/* Refonte Solar (2026-10-21, localhost) : derniere feuille chargee (master.njk).

   v2 du 2026-10-22 (« prend exemple sur evaded.xyz pour les glow, et surtout comment les cases
   sont mises ») : fond noir #000, cases #060606 a filet blanc 8 % et coins de 8 px, entetes de
   case en petites capitales grises sur un filet, pictogrammes dans des cases de 38 px ; une lueur
   de fond (anneau flou + grain, comme evaded/Solar) teintee bleu leger ; grain discret sur le fond.
   Le reste vient de solarservices.cc : texte #f2f2f5, gris #8e8e97, prix en lavande #8d80ff,
   bouton principal blanc a texte noir, secondaire en filet. Les ombres, degrades et mouvements au
   survol du theme restent retires a la source par solar.js. Le survol change une couleur.

   « html body » et les !important : les feuilles du theme (custom.css surtout) empilent des
   regles a forte specificite, souvent forcees ; sans eux, ces regles l emporteraient. */

:root {
  --s-fond: #000;
  --s-case: #060606;
  --s-case-2: #0c0c0d;
  --s-media: #0a0a0b;
  --s-filet: rgba(255, 255, 255, .08);
  --s-filet-fort: rgba(255, 255, 255, .14);
  --s-texte: #f2f2f5;
  --s-texte-2: #a6a6ad;
  --s-gris: #8e8e97;
  --s-gris-2: #6f6f78;
  --s-accent: #8d80ff;
  --s-bleu: 64, 132, 255;
  --s-r: 8px;
  --s-r-ctl: 7px;
  --s-r-puce: 4px;
  /* grain d evaded.xyz : bruit fractal blanc, transparent hors des grains */
  --s-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 3 0 0 0 -1.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --bs-body-bg: #000;
  --bs-body-color: #f2f2f5;
  --bs-border-color: rgba(255, 255, 255, .08);
  --bs-border-radius: 7px;
  --bs-border-radius-sm: 4px;
  --bs-border-radius-lg: 8px;
  --bs-border-radius-xl: 8px;
  --bs-border-radius-xxl: 8px;
  --bs-border-radius-pill: 7px;
}

/* la couleur est sur html : posee sur body, elle couvrait la lueur et le grain (z-index negatifs) */
html { background: var(--s-fond) !important; }
html body {
  overflow-x: clip;
  background: transparent !important;
  color: var(--s-texte);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

html body .container { max-width: 1280px; }

html body ::selection { background: rgba(141, 128, 255, .35); }

/* ---- Boutons ---------------------------------------------------------------- */
html body .btn {
  border-radius: var(--s-r) !important;
  font-size: 13.5px;
  font-weight: 600;
}

html body .btn-primary,
html body .btn.btn-primary {
  background: #fff !important;
  border: 1px solid #fff !important;
  color: #0a0a0c !important;
}
html body .btn-primary:hover,
html body .btn-primary:focus-visible,
html body .btn-primary:active {
  background: #e2e2e6 !important;
  border-color: #e2e2e6 !important;
  color: #0a0a0c !important;
}

html body .btn-outline-primary,
html body .btn-secondary,
html body .btn-outline-secondary,
html body .btn-dark,
html body .btn-outline-light {
  background: rgba(255, 255, 255, .03) !important;
  border: 1px solid var(--s-filet-fort) !important;
  color: var(--s-texte) !important;
}
html body .btn-outline-primary:hover,
html body .btn-secondary:hover,
html body .btn-outline-secondary:hover,
html body .btn-dark:hover,
html body .btn-outline-light:hover {
  background: rgba(255, 255, 255, .06) !important;
  border-color: rgba(255, 255, 255, .22) !important;
  color: #fff !important;
}

html body .btn:focus-visible,
html body a:focus-visible,
html body button:focus-visible { outline: 2px solid var(--s-accent); outline-offset: 2px; box-shadow: none; }

/* ---- Champs ----------------------------------------------------------------- */
html body .form-control,
html body .form-select,
html body .input-group-text {
  background: var(--s-case) !important;
  border: 1px solid var(--s-filet) !important;
  border-radius: var(--s-r);
  color: var(--s-texte);
}
html body .form-control:focus,
html body .form-select:focus { border-color: rgba(255, 255, 255, .3) !important; box-shadow: none !important; }
html body .form-control::placeholder { color: var(--s-gris-2); }

/* ---- Cases generiques (Bootstrap) ------------------------------------------- */
html body .card,
html body .modal-content,
html body .dropdown-menu,
html body .accordion-item,
html body .list-group-item,
html body .offcanvas {
  background: var(--s-case) !important;
  border: 1px solid var(--s-filet) !important;
  border-radius: var(--s-r) !important;
}
html body .card:hover { border-color: var(--s-filet) !important; }
html body .text-muted { color: var(--s-gris) !important; }

/* ---- Barre du haut (2026-10-22) ------------------------------------------------------
   Base relevee sur solarservices.cc : barre de 77 px collee en haut, transparente sur le haut
   de page, fond des qu on defile (classe is-scrolled posee par navbar.njk) ; liens 13,5 px avec
   pictogramme de 16 px, gris a 58 % ; a droite, un groupe encadre (filet blanc 10 %, coins de
   10 px, 42 px de haut) : devise | panier | compte.
   Pour ne pas etre une copie (« trop copie colle a solar ») : les liens sont eux aussi reunis
   dans un cadre du meme dessin, l actif sur un voile blanc a 7 %. */
html body .navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  min-height: 77px;
  background: transparent !important;
  border-bottom: 1px solid transparent !important;
  transition: background-color .2s ease, border-color .2s ease;
}
html body .navbar.is-scrolled {
  background: rgba(8, 8, 10, .92) !important;
  border-bottom-color: rgba(255, 255, 255, .06) !important;
}
html body .navbar .dtf-nav .nav-link,
html body .navbar .dtf-nav .nav-item .nav-link {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent !important;
  color: rgba(255, 255, 255, .58) !important;
  font-size: 13.5px;
  font-weight: 500;
  padding: 12px 13px !important;
  border-radius: 0 !important;
}
html body .navbar .dtf-nav .nav-link svg { width: 16px; height: 16px; opacity: 1; color: inherit; }
html body .navbar .dtf-nav .nav-link svg.dtf-nav-caret { width: 12px; height: 12px; margin-left: -4px; }
html body .navbar .dtf-nav .nav-link:hover,
html body .navbar .dtf-nav .nav-item .nav-link:hover { color: #fff !important; }
html body .navbar .dtf-nav .nav-link.active,
html body .navbar .dtf-nav .nav-item .nav-link.active,
html body .navbar .dtf-nav .nav-item .nav-link.active span {
  background: transparent !important;
  color: #f0eff3 !important;
  font-weight: 600;
}
html body .navbar .dtf-nav .nav-item .nav-link.active { background: rgba(255, 255, 255, .07) !important; }
html body .navbar .dtf-nav .nav-link::before,
html body .navbar .dtf-nav .nav-link::after,
html body .navbar .dtf-nav::before { content: none !important; display: none !important; }
@media (min-width: 992px) {
  html body .navbar .dtf-nav {
    align-items: center;
    height: 42px;
    padding: 0 4px;
    margin-left: 1.75rem;
    gap: 2px !important;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
  }
  html body .navbar .dtf-nav .nav-link,
  html body .navbar .dtf-nav .nav-item .nav-link { padding: 7px 12px !important; border-radius: 7px !important; }
  html body .navbar .navbar-nav.gap-3 {
    gap: 0 !important;
    margin-left: 0 !important;
    height: 42px;
    align-items: stretch !important;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
  }
  html body .navbar .navbar-nav.gap-3 > li { height: 40px; }
  html body .navbar .navbar-nav.gap-3 > li + li { border-left: 1px solid rgba(255, 255, 255, .1); }
  html body .navbar .dtf-cur-btn {
    height: 40px !important;
    padding: 0 13px !important;
    border: 0 !important;
    border-radius: 9px 0 0 9px !important;
    background: transparent !important;
    color: rgba(255, 255, 255, .8) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
  }
  html body .navbar .navbar-nav.gap-3 .cart .btn,
  html body .navbar .navbar-nav.gap-3 .user .btn,
  html body .navbar .navbar-nav.gap-3 .user > .dtf-acc-btn {
    width: 42px !important; height: 40px !important;
    padding: 0 !important;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: rgba(255, 255, 255, .8) !important;
  }
  html body .navbar .navbar-nav.gap-3 .user .btn,
  html body .navbar .navbar-nav.gap-3 .user > .dtf-acc-btn { border-radius: 0 9px 9px 0 !important; font-size: 12px; font-weight: 600; }
  html body .navbar .navbar-nav.gap-3 .cart .btn svg { width: 17px; height: 17px; }
  html body .navbar .navbar-nav.gap-3 .cart .btn:hover,
  html body .navbar .navbar-nav.gap-3 .user .btn:hover,
  html body .navbar .navbar-nav.gap-3 .user > .dtf-acc-btn:hover,
  html body .navbar .dtf-cur-btn:hover { color: #fff !important; background: rgba(255, 255, 255, .04) !important; }
}
/* telephone : le menu deplie passe par-dessus la page, la barre garde donc un fond */
@media (max-width: 991.98px) {
  html body .navbar { background: rgba(8, 8, 10, .96) !important; border-bottom-color: rgba(255, 255, 255, .06) !important; }
  html body .navbar .cart .btn { width: 38px; height: 38px; background: transparent !important; border: 1px solid rgba(255, 255, 255, .1) !important; }
}

/* menus deroulants (Resources, panier, compte, devise) */
html body .dropdown-menu { padding: 6px; }
html body .dtf-drop-menu a,
html body .dtf-acc-menu a,
html body .dtf-acc-menu button {
  border-radius: var(--s-r-puce) !important;
  color: var(--s-texte-2) !important;
}
html body .dtf-drop-menu a:hover,
html body .dtf-acc-menu a:hover,
html body .dtf-acc-menu button:hover { background: rgba(255, 255, 255, .05) !important; color: #fff !important; }
html body .dtf-drop-menu a svg,
html body .dtf-acc-menu svg { color: var(--s-gris) !important; }

/* ---- Hero ----------------------------------------------------------------------
   L image du composant reste ; un voile plat (pas de degrade) garde le texte lisible. */
html body .hero .bg-overlay {
  position: absolute; inset: 0;
  background: rgba(8, 8, 10, .45) !important;
}
html body .hero::after { content: none !important; }
html body .dtf-hero-title {
  font-size: clamp(32px, 4.2vw, 50px) !important;
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.035em;
  text-transform: none !important;
  margin-bottom: 18px;
}
html body .dtf-hero-line,
html body .dtf-hero-accent { color: #fff !important; background: none !important; -webkit-text-fill-color: currentColor; }
html body .dtf-hero-sub {
  color: rgba(255, 255, 255, .66) !important;
  font-size: 15px !important;
  line-height: 1.6;
  max-width: 54ch;
  margin-bottom: 28px !important;
}
html body .dtf-hero-actions { gap: 10px; }
html body .dtf-hero-btn {
  display: inline-flex; align-items: center;
  height: 45px;
  padding: 0 18px !important;
  margin: 0 !important;
}
/* le hero alignait son texte 20 px plus a droite que le reste de la page sur telephone */
@media (max-width: 575.98px) {
  html body .hero .container { padding-left: 12px !important; padding-right: 12px !important; }
  html body .dtf-gc-meta { flex-wrap: wrap; row-gap: 4px; }
}
html body .dtf-hero-btn.btn-primary { background: #fff !important; border-color: #fff !important; color: #0a0a0c !important; }
html body .dtf-hero-btn-ghost {
  background: rgba(255, 255, 255, .03) !important;
  border: 1px solid var(--s-filet-fort) !important;
  color: #fff !important;
  font-weight: 500;
}

/* ---- Bandeau d arguments : quatre cases comme les chiffres du tableau de bord d evaded
   (libelle a gauche, pictogramme dans une case de 38 px en haut a droite) ---------------- */
html body .dtf-features {
  padding: 24px 0 8px;
  background: transparent !important;
  border-bottom: 0 !important;
}
html body .dtf-features-grid { gap: 16px !important; }
html body .dtf-feature {
  display: flex !important;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 18px 20px;
  background: var(--s-case);
  border: 1px solid var(--s-filet);
  border-radius: var(--s-r);
}
html body .dtf-feature h2,
html body .dtf-feature h3 { font-size: 14px; font-weight: 600; color: var(--s-texte); letter-spacing: -.01em; margin: 0 0 6px; }
html body .dtf-feature p { font-size: 13px; line-height: 1.5; color: var(--s-gris); }

/* case a pictogramme, partagee par le bandeau, « Why choose » et la carte d aide de la FAQ */
html body .dtf-feature-icon,
html body .dtf-why-icone,
html body .dtf-faq3-help-ico {
  display: inline-flex !important; align-items: center; justify-content: center;
  flex: 0 0 38px;
  width: 38px !important; height: 38px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--s-r-ctl) !important;
  background: rgba(255, 255, 255, .06) !important;
  color: var(--s-gris) !important;
}
html body .dtf-feature-icon svg,
html body .dtf-why-icone svg,
html body .dtf-faq3-help-ico svg { width: 18px !important; height: 18px !important; }

/* ---- Titres de section ---------------------------------------------------------- */
html body .dtf-groups-title,
html body .dtf-aa-title,
html body .dtf-block-title,
html body .dtf-faq3-title {
  font-size: clamp(24px, 2.4vw, 30px) !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: -.025em !important;
  color: var(--s-texte) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor;
  margin: 0 0 8px !important;
}
html body .dtf-groups-sub,
html body .dtf-aa-sub,
html body .dtf-block-sub,
html body .dtf-faq3-sub { color: var(--s-gris) !important; font-size: 14px !important; line-height: 1.6; margin: 0 !important; }
html body .dtf-grad { color: inherit !important; background: none !important; -webkit-text-fill-color: currentColor; }

/* petites capitales grises, a la evaded (« LATEST ORDERS ») */
html body .dtf-aa-eyebrow,
html body .dtf-faq3-eyebrow {
  display: block;
  margin: 0 0 10px !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  color: var(--s-gris) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
}
html body .dtf-aa-eyebrow span,
html body .dtf-faq3-eyebrow span { display: none !important; }

/* ---- Catalogue ------------------------------------------------------------------ */
html body .dtf-groups-section { padding-top: 64px !important; padding-bottom: 32px !important; }
html body .dtf-groups-box { border: 0 !important; background: none !important; padding: 0 !important; }
html body .dtf-groups-head {
  align-items: flex-end !important;
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 24px !important;
}
html body .dtf-plist-search {
  display: flex; align-items: center; gap: 8px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--s-filet) !important;
  border-radius: var(--s-r) !important;
  background: var(--s-case) !important;
  color: var(--s-gris);
}
html body .dtf-plist-search input {
  flex: 1 1 auto; min-width: 0;
  border: 0 !important; outline: 0; background: transparent !important;
  color: var(--s-texte); font-size: 13.5px;
}
html body .dtf-plist-search:focus-within { border-color: rgba(255, 255, 255, .3) !important; }

html body .dtf-groups-section .dtf-groups-grid { gap: 16px !important; }

/* Carte de jeu, d apres la case produit de Solar : image a fleur en haut (aucune marge
   interieure, l image touche le filet), puis nom, prix de depart et nombre de produits. */
html body .dtf-group-card {
  display: flex !important;
  flex-direction: column;
  aspect-ratio: auto !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid var(--s-filet) !important;
  border-radius: var(--s-r) !important;
  background: var(--s-case) !important;
  color: var(--s-texte);
  text-decoration: none;
  transition: border-color .15s ease;
}
/* les jaquettes de jeu sont en 640 x 280 (16/7) : rien n est rogne */
html body .dtf-gc-media {
  display: block;
  aspect-ratio: 16 / 7;
  background: var(--s-media);
  overflow: hidden;
}
html body .dtf-group-card img,
html body .dtf-group-fallback {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 0 !important;
  margin: 0 !important;
}
html body .dtf-gc-body { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; }
html body .dtf-gc-name {
  font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--s-texte);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html body .dtf-gc-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 13px; color: rgba(255, 255, 255, .6);
}
html body .dtf-gc-from b {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--s-r-puce);
  background: rgba(34, 34, 38, .8);
  color: var(--s-accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
html body .dtf-gc-count { white-space: nowrap; }

/* ---- Fenetre d un jeu ----------------------------------------------------------- */
html body .modal-backdrop.show { opacity: .7; }
html body .modal-content { background: var(--s-fond) !important; }
/* fenetre de jeu : custom.css la voulait translucide (verre) ; elle devient pleine */
html body .modal[id^="group-modal-"] .modal-content { background: var(--s-fond) !important; }
html body .dtf-pcard-from { text-transform: uppercase; font-size: 11px !important; letter-spacing: .08em !important; }
html body .modal-header { border-bottom: 1px solid var(--s-filet) !important; padding: 16px 20px; }
html body .modal-title { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
html body .modal-body { padding: 20px; }
html body .btn-close { filter: invert(1) grayscale(1); opacity: .6; }
html body .btn-close:hover { opacity: 1; }

html body .dtf-pcard {
  display: flex; flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--s-filet) !important;
  border-radius: var(--s-r) !important;
  background: var(--s-case) !important;
  color: var(--s-texte);
  text-decoration: none;
  transition: border-color .15s ease;
}
html body .dtf-pcard:hover { border-color: rgba(255, 255, 255, .2) !important; }
html body .dtf-pcard-media {
  display: block !important;
  aspect-ratio: 16 / 9 !important;
  background: var(--s-media);
  overflow: hidden;
}
html body .dtf-pcard-media img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
html body .dtf-pcard-head {
  display: flex !important; flex-direction: row !important; align-items: center !important;
  gap: 8px; height: auto !important; min-height: 0 !important;
  padding: 14px 16px 8px !important;
}
html body .dtf-pcard-name { font-size: 14px !important; font-weight: 600; letter-spacing: -.01em; color: var(--s-texte); }
html body .dtf-pcard-traits { min-height: 0 !important; margin: 0 !important; padding: 0 16px 14px !important; gap: 4px !important; }
html body .dtf-pcard-trait { color: var(--s-gris) !important; font-size: 12.5px !important; line-height: 1.45; }
html body .dtf-pcard-foot {
  margin-top: auto !important;
  padding: 12px 16px !important;
  border-top: 1px solid var(--s-filet) !important;
}
html body .dtf-pcard-price {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 0 !important; border: 0 !important; background: none !important;
  font-size: 13px !important; font-weight: 500; color: rgba(255, 255, 255, .6);
}
html body .dtf-pcard-from { font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0 !important; color: rgba(255, 255, 255, .6) !important; }
html body .dtf-pcard-price b { color: var(--s-accent); font-weight: 600; font-variant-numeric: tabular-nums; }
html body .dtf-pcard-buy {
  padding: 6px 12px !important;
  border-radius: var(--s-r) !important;
  /* bouton secondaire : un seul bouton blanc par ecran, celui de la fiche */
  border: 1px solid var(--s-filet-fort) !important;
  background: rgba(255, 255, 255, .03) !important;
  color: var(--s-texte) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}

/* puce de statut (cartes, fiches) : une case sobre, la couleur du statut sur le texte */
html body .dtf-badge {
  border-radius: var(--s-r-puce) !important;
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid var(--s-filet) !important;
}

/* ---- Comparatif « See the difference » ------------------------------------------ */
html body .dtf-aa-head { text-align: left !important; margin-bottom: 24px !important; }
html body .dtf-aa-frame { border: 1px solid var(--s-filet) !important; border-radius: var(--s-r) !important; }
html body .dtf-aa-knob { background: #fff !important; color: #0a0a0c !important; border: 0 !important; }
html body .dtf-aa-line { background: rgba(255, 255, 255, .8) !important; }

/* ---- Why choose ------------------------------------------------------------------ */
html body .dtf-block-head { text-align: left !important; margin-bottom: 24px !important; }
html body .dtf-why-grid { gap: 16px !important; }
html body .dtf-why-carte {
  position: relative;
  padding: 18px 20px !important;
  border: 1px solid var(--s-filet) !important;
  border-radius: var(--s-r) !important;
  background: var(--s-case) !important;
}
html body .dtf-why-carte:hover { border-color: var(--s-filet) !important; }
/* pictogramme en haut a droite, comme les cases chiffrees d evaded */
html body .dtf-why-icone { position: absolute; top: 18px; right: 20px; margin: 0 !important; }
html body .dtf-why-carte h3 { font-size: 15px !important; font-weight: 600 !important; color: var(--s-texte) !important; margin: 0 0 8px !important; min-height: 38px; display: flex; align-items: center; padding-right: 52px; }
html body .dtf-why-carte p { font-size: 13.5px !important; line-height: 1.6 !important; color: var(--s-gris) !important; margin: 0 !important; }

/* ---- FAQ ------------------------------------------------------------------------- */
html body .dtf-faq3 { --f-acc: #8d80ff; --f-surface: #0f0f12; --f-line: rgba(255, 255, 255, .08); padding: 64px 0 72px; }
html body .dtf-faq3-title-row::before { content: none !important; }
html body .dtf-faq3-sub { margin-left: 0 !important; }
html body .dtf-faq3-help { border: 1px solid var(--s-filet) !important; background: var(--s-case) !important; padding: 22px !important; }
html body .dtf-faq3-help h3 { font-size: 16px !important; font-weight: 600 !important; }
html body .dtf-faq3-help-ico { margin-bottom: 14px !important; }
html body .dtf-faq3-help-txt { color: var(--s-gris) !important; font-size: 13.5px !important; line-height: 1.6 !important; }
html body .dtf-faq3-points { gap: 0 !important; margin-top: 16px !important; border-top: 1px solid var(--s-filet); }
html body .dtf-faq3-points li {
  min-height: 0 !important;
  padding: 10px 0 !important;
  border: 0 !important; border-bottom: 1px solid var(--s-filet) !important;
  border-radius: 0 !important;
  background: none !important;
  color: var(--s-texte-2) !important;
  font-size: 13px !important; font-weight: 500 !important;
}
html body .dtf-faq3-join {
  background: #fff !important; color: #0a0a0c !important;
  font-size: 13.5px !important; font-weight: 600 !important;
  height: 42px; padding: 0 16px !important;
}
html body .dtf-faq3-join:hover { background: #e2e2e6 !important; }
html body .dtf-faq3-help-foot { color: var(--s-gris-2) !important; font-weight: 500 !important; font-size: 12px !important; }
html body .dtf-faq3-help-foot span { display: none !important; }
html body .dtf-faq3-list { gap: 8px !important; }
html body .dtf-faq3-group { color: var(--s-gris) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .1em !important; }
html body .dtf-faq3-item,
html body .dtf-faq3-item.is-open { border: 1px solid var(--s-filet) !important; background: var(--s-case) !important; }
html body .dtf-faq3-item:hover { border-color: var(--s-filet-fort) !important; }
html body .dtf-faq3-btn { min-height: 56px !important; padding: 14px 16px !important; }
html body .dtf-faq3-btn::before { content: none !important; }
html body .dtf-faq3-q { font-size: 14px !important; font-weight: 500 !important; color: var(--s-texte); }
html body .dtf-faq3-tog,
html body .dtf-faq3-item.is-open .dtf-faq3-tog {
  width: 24px !important; height: 24px !important; flex-basis: 24px !important;
  border: 0 !important; background: none !important; color: var(--s-gris) !important;
}
html body .dtf-faq3-a { margin: 0 16px 16px !important; padding-top: 12px !important; color: var(--s-texte-2) !important; font-size: 13.5px !important; line-height: 1.7 !important; opacity: 1 !important; transform: none !important; }
html body .dtf-faq3-a a,
html body .dtf-faq3-more { color: var(--s-texte) !important; text-decoration: underline; text-underline-offset: 3px; }

/* ---- Pied de page (footer.njk v5) --------------------------------------------------
   Structure Solar : marque a gauche, colonnes de liens a droite, copyright dessous. */
html body .dtf-footer {
  margin-top: 48px;
  padding: 56px 0 28px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  background: transparent !important;
}
html body .dtf-foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 48px;
}
html body .dtf-foot-logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
html body .dtf-foot-logo img { height: 34px; width: auto; display: block; }
html body .dtf-foot-logo span { color: var(--s-texte); font-size: 17px; font-weight: 600; letter-spacing: .02em; }
html body .dtf-foot-tag { max-width: 40ch; margin: 14px 0 18px; color: var(--s-gris); font-size: 13.5px; line-height: 1.6; }
html body .dtf-foot-social { display: flex; gap: 8px; }
html body .dtf-foot-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid var(--s-filet);
  border-radius: var(--s-r);
  background: rgba(255, 255, 255, .03);
  color: var(--s-texte-2);
}
html body .dtf-foot-social a:hover { color: #fff; border-color: rgba(255, 255, 255, .22); }
html body .dtf-foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
html body .dtf-foot-cols > div { display: flex; flex-direction: column; gap: 10px; }
html body .dtf-foot-h {
  margin: 0 0 4px;
  color: var(--s-gris);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
html body .dtf-foot-cols a { width: fit-content; color: rgba(255, 255, 255, .82); font-size: 14px; text-decoration: none; }
html body .dtf-foot-cols a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
html body .dtf-foot-copy {
  margin: 48px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  color: var(--s-gris-2);
  font-size: 12.5px;
}
@media (max-width: 991.98px) {
  html body .dtf-foot-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 575.98px) {
  html body .dtf-footer { padding-top: 40px; }
  html body .dtf-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
}

/* ---- Fiche produit (product-page.njk + product-form.njk) ---------------------------
   Comme la fiche Solar : pas de grande case autour, titre 24 px, durees en lignes a pastille
   ronde (nom a gauche, prix a droite), achat en blanc, image a fleur de sa case. */
html body .qlf-pp .qlf-pp-fold-card {
  border: 0 !important;
  background: none !important;
  padding: 0 !important;
}
html body .qlf-pp .py-5-nav > .container { margin-top: 40px !important; }
html body .qlf-pp .qlf-pp-title-row { align-items: center; gap: 12px; margin-bottom: 20px; }
html body .qlf-pp .qlf-pp-title {
  font-size: clamp(22px, 2vw, 26px) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
  color: var(--s-texte) !important;
}

/* galerie */
html body .qlf-pp .qlf-pp-carousel,
html body .qlf-pp .qlf-pp-single-img,
html body .qlf-pp .qlf-pp-video {
  border: 1px solid var(--s-filet) !important;
  border-radius: var(--s-r) !important;
  background: var(--s-media) !important;
  overflow: hidden;
}
html body .qlf-pp .qlf-pp-thumbs { margin-top: 10px; }
html body .qlf-pp .qlf-pp-thumb {
  border: 1px solid var(--s-filet) !important;
  border-radius: var(--s-r-puce) !important;
  background: var(--s-media) !important;
  overflow: hidden;
  padding: 0 !important;
}
html body .qlf-pp .qlf-pp-thumb:hover { border-color: rgba(255, 255, 255, .22) !important; }
html body .qlf-pp .qlf-pp-thumb.active { border-color: rgba(255, 255, 255, .6) !important; }

/* libelles : petites capitales grises */
html body .qlf-pp .product-form .form-label,
html body .qlf-pp .product-form .qlf-pf-total-label,
html body .qlf-pp .product-form .qty-bar .qty-label,
html body .qlf-pp .product-form .qlf-vp-title {
  color: var(--s-gris) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
}
html body .qlf-pp .product-form .qlf-pf-divider { background: var(--s-filet) !important; }

/* durees */
html body .qlf-pp .product-form .variants {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px !important;
  overflow: visible !important;
}
html body .qlf-pp .product-form .variants .variant {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 52px;
  padding: 12px 16px !important;
  margin: 0 !important;
  text-align: left;
  background: var(--s-case) !important;
  border: 1px solid var(--s-filet) !important;
  border-radius: var(--s-r) !important;
  color: var(--s-texte) !important;
}
html body .qlf-pp .product-form .variants .variant::before {
  content: '';
  flex: 0 0 14px;
  width: 14px; height: 14px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
}
html body .qlf-pp .product-form .variants .variant:hover:not(:disabled):not(.active) { border-color: rgba(255, 255, 255, .22) !important; }
html body .qlf-pp .product-form .variants .variant.active {
  background: rgba(255, 255, 255, .04) !important;
  border-color: rgba(255, 255, 255, .5) !important;
}
html body .qlf-pp .product-form .variants .variant.active::before {
  border-color: #fff;
  background: #fff;
  box-shadow: inset 0 0 0 3px var(--s-case);
}
html body .qlf-pp .product-form .variants .variant .name {
  flex: 1 1 auto; min-width: 0;
  font-size: 14px !important; font-weight: 500 !important;
  text-transform: none !important; letter-spacing: 0 !important;
  color: var(--s-texte) !important;
  white-space: normal !important;
}
html body .qlf-pp .product-form .variants .variant .v-price-row { flex-direction: row !important; align-items: baseline !important; gap: 8px !important; }
html body .qlf-pp .product-form .variants .variant .v-price,
html body .qlf-pp .product-form .variants .variant.active .v-price { font-size: 13.5px !important; font-weight: 600 !important; color: var(--s-texte) !important; font-variant-numeric: tabular-nums; }
html body .qlf-pp .product-form .variants .variant .v-price-slash { font-size: 12px !important; color: var(--s-gris-2) !important; text-decoration-color: var(--s-gris-2) !important; }
html body .qlf-pp .product-form .variants .variant .v-day-rate,
html body .qlf-pp .product-form .variants .variant.active .v-day-rate { font-size: 11.5px !important; color: var(--s-gris) !important; opacity: 1; }

/* total et stock */
html body .qlf-pp .product-form .qlf-pf-total-row { border-bottom-color: var(--s-filet) !important; }
html body .qlf-pp .product-form .qlf-pf-total-price {
  font-size: 24px !important; font-weight: 600 !important; letter-spacing: -.02em;
  color: var(--s-texte) !important; background: none !important; -webkit-text-fill-color: currentColor;
}
html body .qlf-pp .product-form .qlf-stock-badge {
  padding: 4px 10px !important;
  border: 1px solid var(--s-filet) !important;
  border-radius: var(--s-r-puce) !important;
  background: rgba(255, 255, 255, .03) !important;
  color: var(--s-texte-2) !important;
  font-size: 12px !important; font-weight: 500 !important;
}

/* quantite et paliers */
html body .qlf-pp .product-form .qty-bar {
  background: var(--s-case) !important;
  border: 1px solid var(--s-filet) !important;
  border-radius: var(--s-r) !important;
}
html body .qlf-pp .product-form .qty-bar button { color: var(--s-texte) !important; border-radius: var(--s-r-puce) !important; }
html body .qlf-pp .product-form .qty-bar button:hover:not(:disabled) { background: rgba(255, 255, 255, .06) !important; color: #fff !important; }
html body .qlf-pp .product-form .qlf-vp-tier { background: var(--s-case) !important; border-color: var(--s-filet) !important; }
html body .qlf-pp .product-form .qlf-vp-tier.is-active { background: rgba(255, 255, 255, .04) !important; border-color: rgba(255, 255, 255, .5) !important; }
html body .qlf-pp .product-form .qlf-vp-tier.is-active .qlf-vp-tier-pct { color: var(--s-texte) !important; }
html body .qlf-pp .product-form .qlf-vp-tier-dot { display: none; }
html body .qlf-pp .product-form .qlf-vp-progress-fill { background: var(--s-accent) !important; }
html body .qlf-pp .product-form .qlf-vp-active-badge { background: rgba(255, 255, 255, .04) !important; border: 1px solid var(--s-filet) !important; color: var(--s-texte-2) !important; border-radius: var(--s-r-puce) !important; }

/* boutons */
html body .qlf-pp .product-form .buy-row { gap: 8px !important; }
html body .qlf-pp .product-form .buy-row .cart-seg,
html body .qlf-pp .product-form .buy-row .purchase-seg,
html body .qlf-pp .product-form .buy-row .guide-seg {
  min-height: 45px !important;
  padding: 0 16px !important;
  border-radius: var(--s-r) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
html body .qlf-pp .product-form .buy-row .purchase-seg { background: #fff !important; border: 1px solid #fff !important; color: #0a0a0c !important; }
html body .qlf-pp .product-form .buy-row .purchase-seg:hover:not(:disabled) { background: #e2e2e6 !important; border-color: #e2e2e6 !important; }
html body .qlf-pp .product-form .buy-row .cart-seg:not(.is-added),
html body .qlf-pp .product-form .buy-row .guide-seg {
  background: rgba(255, 255, 255, .03) !important;
  border: 1px solid var(--s-filet-fort) !important;
  color: var(--s-texte) !important;
}
html body .qlf-pp .product-form .buy-row .cart-seg:not(.is-added):hover:not(:disabled),
html body .qlf-pp .product-form .buy-row .guide-seg:hover { background: rgba(255, 255, 255, .06) !important; border-color: rgba(255, 255, 255, .22) !important; color: #fff !important; }
html body .qlf-pp .product-form .purchase-terms { color: var(--s-gris-2) !important; }
html body .qlf-pp .product-form .purchase-terms a { color: var(--s-texte-2) !important; text-decoration: underline; text-underline-offset: 2px; }

/* description, offres, avis : la case « LATEST ORDERS » d evaded — entete en petites capitales
   grises sur un filet, puis des lignes pleine largeur separees par un filet, sans case dans la case */
html body .qlf-pp .qlf-pp-box {
  background: var(--s-case) !important;
  border: 1px solid var(--s-filet) !important;
  border-radius: var(--s-r) !important;
  padding: 0 !important;
  overflow: hidden;
}
html body .qlf-pp .qlf-pp-box-title {
  margin: 0 !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--s-filet);
  font-size: 11px !important; font-weight: 600 !important; letter-spacing: .08em !important;
  text-transform: uppercase !important; color: var(--s-gris) !important;
}
html body .qlf-pp .qlf-pp-box > :not(.qlf-pp-box-title):not(.qlf-accordion):not(.dtf-onglets) { padding: 16px 18px; }
html body .qlf-pp .qlf-pp-description { color: var(--s-texte-2); font-size: 14px; line-height: 1.7; }
html body .qlf-pp .qlf-accordion,
html body .qlf-pp .qlf-accordion-col { gap: 0 !important; align-items: stretch !important; }
html body .qlf-pp .qlf-accordion-col + .qlf-accordion-col { border-left: 1px solid var(--s-filet); }
html body .qlf-pp .qlf-accordion-item,
html body .qlf-pp .qlf-accordion-item.is-open {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--s-filet) !important;
  border-radius: 0 !important;
}
html body .qlf-pp .qlf-accordion-item:hover { background: rgba(255, 255, 255, .02) !important; }
html body .qlf-pp .qlf-accordion-item:last-child { border-bottom: 0 !important; }
html body .qlf-pp .qlf-flip-front { padding: 14px 18px !important; }
html body .qlf-pp .qlf-flip-front:hover { background: none !important; }
@media (max-width: 480px) {
  html body .qlf-pp .qlf-accordion-col + .qlf-accordion-col { border-left: 0; }
}
html body .qlf-pp .qlf-accordion-title { font-size: 14px !important; font-weight: 500 !important; color: var(--s-texte) !important; }
html body .qlf-pp .qlf-flip-back-content { color: var(--s-texte-2); font-size: 13.5px; line-height: 1.7; }
html body .qlf-pp .qlf-flip-back-content a { color: var(--s-texte) !important; text-decoration: underline; }
html body .qlf-pp .qlf-flip-back-btn { color: var(--s-texte-2) !important; }
html body .qlf-pp .qlf-pp-review-card,
html body .qlf-pp .qlf-pp-bundle-item { background: var(--s-fond) !important; border: 1px solid var(--s-filet) !important; border-radius: var(--s-r) !important; }
html body .qlf-pp .qlf-pp-review-stars { color: var(--s-texte) !important; }
html body .qlf-pp .qlf-pp-bundle-add-all { background: #fff !important; color: #0a0a0c !important; border-radius: var(--s-r) !important; }

/* statut a cote du titre et sur les cartes */
html body .qlf-pp .dtf-badge,
html body .dtf-pcard .dtf-badge { font-size: 12px !important; font-weight: 500 !important; padding: 3px 8px !important; }

/* ---- Bouton principal dans les pages : les feuilles du theme le forcent en lavande avec
   une specificite plus haute (.cart-page .btn-primary, button[type=submit].btn-primary) ---- */
html body :is(.cart-page, .component, .modal, form) .btn-primary:not(.variant),
html body .dtf-fbwrite-btn,
html body .dtf-review-send {
  background: #fff !important;
  border: 1px solid #fff !important;
  color: #0a0a0c !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-radius: var(--s-r) !important;
}
html body :is(.cart-page, .component, .modal, form) .btn-primary:not(.variant):hover,
html body .dtf-fbwrite-btn:hover,
html body .dtf-review-send:hover { background: #e2e2e6 !important; border-color: #e2e2e6 !important; }
html body :is(.cart-page, .component, .modal, form) .btn-primary:not(.variant):disabled { opacity: .4; }
html body .btn { text-transform: none !important; letter-spacing: 0 !important; }

/* ---- Titres de page ------------------------------------------------------------------ */
html body h1 {
  font-size: clamp(26px, 2.6vw, 32px) !important;
  font-weight: 600 !important;
  letter-spacing: -.025em !important;
  text-transform: none !important;
  line-height: 1.15;
}
html body .stv-title,
html body .gp-title,
html body .dtf-upd h1 { font-size: clamp(26px, 2.6vw, 32px) !important; font-weight: 600 !important; letter-spacing: -.025em !important; text-transform: none !important; }
html body .stv-eyebrow { color: var(--s-gris) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .1em !important; }
html body .stv-live { background: var(--s-gris) !important; }
html body .stv-sub,
html body .upd-sub,
html body .gp-sub { color: var(--s-gris) !important; font-size: 14px !important; }

/* barre d annonce : aplat neutre au lieu de la lavande */
html body .announcement { background: var(--s-case-2) !important; color: var(--s-texte) !important; border-bottom: 1px solid var(--s-filet); }
html body .announcement a { color: #fff !important; text-decoration: underline; }

/* ---- Mises a jour (/updates) ------------------------------------------------------- */
html body .upd-carte { background: var(--s-case) !important; border: 1px solid var(--s-filet) !important; border-radius: var(--s-r) !important; }
html body .upd-chip { border-radius: var(--s-r-puce) !important; border-color: var(--s-filet) !important; background: rgba(255, 255, 255, .03) !important; color: var(--s-texte-2) !important; }
html body .upd-filtres button { border-radius: var(--s-r-puce) !important; }

/* ---- Guides ------------------------------------------------------------------------- */
html body .guides-page { --v: #fff; --v2: #fff; --pan: #0f0f12; --pan2: #0b0b0d; --bd: rgba(255, 255, 255, .08); --tx: #a6a6ad; --mut: #8e8e97; }
html body .guides-page .gp-head { text-align: left; }
html body .gp-brand { border-radius: var(--s-r) !important; }
html body .gp-brand:hover { border-color: rgba(255, 255, 255, .22) !important; background: var(--pan) !important; }
html body .gp-brand .b-name { font-weight: 600 !important; font-size: 14px !important; color: var(--s-texte); }
html body .gp-brand .b-go { color: var(--s-gris) !important; }
html body .gp-back { color: var(--s-texte-2) !important; font-weight: 500 !important; }
html body .gp-page .gp-ptitle,
html body .gp-sub-h,
html body .gp-guide h2,
html body .gp-guide h3,
html body .gp-guide h4 { font-weight: 600 !important; color: var(--s-texte) !important; }
html body .gp-loader { background: #fff !important; color: #0a0a0c !important; font-weight: 600 !important; border-radius: var(--s-r) !important; }
html body .gp-guide ul > li::before { background: var(--s-gris-2) !important; width: 5px !important; height: 5px !important; }
html body .gp-guide a { color: var(--s-texte) !important; }
html body .gp-guide summary { color: var(--s-texte) !important; font-weight: 600 !important; }

/* ---- Avis (/feedback) -------------------------------------------------------------- */
html body .dtf-rcard { background: var(--s-case) !important; border: 1px solid var(--s-filet) !important; border-radius: var(--s-r) !important; }
html body .dtf-rcard-discord::before { content: none !important; display: none !important; }
html body .dtf-rcard-reply { border-left: 1px solid var(--s-filet-fort) !important; }
html body .dtf-rcard-score { background: rgba(255, 255, 255, .05) !important; color: var(--s-texte) !important; border-radius: var(--s-r-puce) !important; }
html body .dtf-fbscore { background: var(--s-case) !important; border-color: var(--s-filet) !important; }
html body .dtf-fbscore-value { font-weight: 600 !important; }

/* ---- Panier ------------------------------------------------------------------------ */
html body .cart-page .form-label { color: var(--s-gris) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .1em !important; }
html body .cart-page .total,
html body .cart-page .price { color: var(--s-texte) !important; }
html body .cart-item-bg { background: var(--s-case) !important; border-color: var(--s-filet) !important; }
html body .cart-item-bg .btn-outline-secondary:hover,
html body .cart-item-bg .btn-outline-primary:hover { background: rgba(255, 255, 255, .06) !important; }

/* ---- Haut de page, devise ------------------------------------------------------------ */
html body .dtf-haut { border-radius: var(--s-r) !important; background: var(--s-case) !important; border: 1px solid var(--s-filet-fort) !important; color: var(--s-texte) !important; }
html body .dtf-cur .is-active,
html body .dtf-cur li.is-active { background: rgba(255, 255, 255, .06) !important; }

/* recapitulatif du panier : une seule case (le formulaire interieur en dessinait une
   seconde), total en blanc, paiement en bouton principal */
html body form[\@submit\.prevent='checkout'] { background: transparent !important; border: 0 !important; padding: 0 !important; }
html body span[x-text*="totalPrice"] { font-size: 22px !important; font-weight: 600 !important; color: var(--s-texte) !important; }
html body .rounded.form form .btn.w-100 {
  background: #fff !important; border: 1px solid #fff !important; color: #0a0a0c !important;
  height: 45px; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important;
}
html body .rounded.form form .btn.w-100:hover { background: #e2e2e6 !important; }
html body .navbar .count { background: #fff !important; color: #0a0a0c !important; }

/* ---- Fond continu bleu (2026-10-22) ------------------------------------------------
   « connecte les glow entre component et met les en bleu » : une seule couche (.dtf-fond,
   posee par master.njk) couvre toute la hauteur de la page, derriere les sections. Ses
   quatre arcs (le dessin d evaded / Solar : un tres grand cercle dont on ne voit qu un arc,
   flou, avec du grain sur le meme arc) alternent gauche / droite et traversent les limites
   des sections. Bleu franc, grain bleu compris, et un voile bleu tres doux le long du meme
   trajet. Statique. Grain baisse a la demande du user (« le grain est un peu trop fort »).
   Ce bloc avait ete supprime par erreur avec les anciennes regles de /status : il est remis
   avant celles-ci, pour qu une decoupe de /status ne puisse plus l emporter.
   2026-10-22 suite (« plus trace et moins ecarte, ca fait trop ») : anneaux trois fois plus fins
   (bande de 6 % du rayon au lieu de ~28 %, fin reglable par --c), flou 28 -> 9 px, un peu plus
   lumineux pour rester lisibles ; voiles bleus diffus reduits de moitie.
   Puis « trop fin, trouve un juste milieu » : bande ~ 2 fois l ancienne fine (12-17 % du rayon),
   flou 16 px puis 22 px (« un peu plus flou »), voiles diffus aux trois quarts d origine. */
html body { position: relative; }
html body .dtf-fond {
  --s-grain-bleu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .38 0 0 0 0 .62 0 0 0 0 1 3 0 0 0 -1.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  position: absolute; inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(900px 620px at 14% 360px, rgba(var(--s-bleu), .06), transparent 65%),
    radial-gradient(760px 900px at 94% 1150px, rgba(var(--s-bleu), .045), transparent 65%),
    radial-gradient(900px 900px at 4% 44%, rgba(var(--s-bleu), .04), transparent 65%),
    radial-gradient(900px 900px at 96% 76%, rgba(var(--s-bleu), .038), transparent 65%);
}
html body .dtf-fond i {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--s); height: var(--s);
  border-radius: 50%;
}
html body .dtf-fond i::before,
html body .dtf-fond i::after { content: ''; position: absolute; inset: 0; border-radius: 50%; }
html body .dtf-fond i::before {
  filter: blur(22px);
  background: radial-gradient(circle closest-side, transparent var(--a), rgba(var(--s-bleu), var(--o)) var(--b), transparent var(--c, 100%));
  -webkit-mask-image: var(--m);
          mask-image: var(--m);
}
html body .dtf-fond i::after {
  background-image: var(--s-grain-bleu);
  background-size: 200px 200px;
  opacity: var(--g);
  -webkit-mask-image: radial-gradient(circle closest-side, transparent var(--a), #000 var(--b), transparent var(--c, 100%)), var(--m);
  -webkit-mask-composite: source-in;
          mask-image: radial-gradient(circle closest-side, transparent var(--a), #000 var(--b), transparent var(--c, 100%)), var(--m);
          mask-composite: intersect;
}
/* 1. haut a gauche (l anneau d evaded) */
html body .dtf-fond i:nth-child(1) {
  --x: -2460px; --y: -900px; --s: 3270px;
  --a: 80%; --b: 88.5%; --c: 97%; --o: .24; --g: .18;
  --m: linear-gradient(35deg, transparent 30%, #000 52%, #000 72%, transparent 88%);
}
/* 2. a droite, du hero jusqu au catalogue */
html body .dtf-fond i:nth-child(2) {
  --x: calc(100% - 700px); --y: -700px; --s: 3200px;
  --a: 85%; --b: 91%; --c: 97%; --o: .21; --g: .16;
  --m: linear-gradient(90deg, #000 0%, #000 22%, transparent 40%);
}
/* 3. a gauche, au milieu de la page */
html body .dtf-fond i:nth-child(3) {
  --x: -2700px; --y: calc(44% - 1600px); --s: 3200px;
  --a: 85%; --b: 91%; --c: 97%; --o: .19; --g: .15;
  --m: linear-gradient(270deg, #000 0%, #000 22%, transparent 40%);
}
/* 4. a droite, vers le bas de la page */
html body .dtf-fond i:nth-child(4) {
  --x: calc(100% - 700px); --y: calc(76% - 1600px); --s: 3200px;
  --a: 85%; --b: 91%; --c: 97%; --o: .18; --g: .14;
  --m: linear-gradient(90deg, #000 0%, #000 22%, transparent 40%);
}

/* grain discret sur tout le fond : visible entre les cases, jamais par-dessus le texte */
html body::before {
  content: '';
  position: fixed; inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: var(--s-grain);
  background-size: 200px 200px;
  opacity: .025;
}
html body .flex-wrapper,
html body main,
html body .components { background: transparent !important; }

/* ---- Hero propose, v2 (hero.njk assemble par solar.js) -------------------------------
   Meme langage que le reste (noir, cases a filet, bouton blanc) mais notre composition :
   texte a gauche (petit libelle, titre en deux tons, texte, boutons, jeux les plus fournis),
   image du composant a droite dans une case. Pas de fond propre : .dtf-fond passe derriere.
   Le hero glisse sous la barre transparente (marge negative = hauteur de la barre). */
html body .dtf-hero2 { position: relative; margin-top: -78px; padding: 150px 0 88px; }
html body .dtf-h2-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 56px;
  align-items: center;
}
html body .dtf-h2-label,
html body .dtf-h2-jeux-titre {
  display: block;
  margin: 0 0 14px;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--s-gris);
}
html body .dtf-hero2 .dtf-hero-title {
  display: flex; flex-direction: column;
  font-size: clamp(34px, 3.3vw, 52px) !important;
  font-weight: 600 !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
  margin: 0 0 18px !important;
}
html body .dtf-hero2 .dtf-h2-gris { color: var(--s-gris) !important; }
html body .dtf-hero2 .dtf-hero-sub {
  max-width: 54ch;
  margin: 0 0 28px !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  color: rgba(255, 255, 255, .6) !important;
}
html body .dtf-hero2 .dtf-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
html body .dtf-hero2 .dtf-hero-btn { gap: 8px; }
html body .dtf-h2-jeux { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--s-filet); }
html body .dtf-h2-jeux-titre { margin-bottom: 12px; }
html body .dtf-h2-jeux-liste { display: flex; flex-wrap: wrap; gap: 8px; }
html body .dtf-h2-jeux-liste a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--s-filet);
  border-radius: var(--s-r-ctl);
  background: var(--s-case);
  color: var(--s-texte-2);
  font-size: 12.5px; font-weight: 500;
  text-decoration: none;
}
html body .dtf-h2-jeux-liste a:hover { color: #fff; border-color: rgba(255, 255, 255, .2); }
/* jaquettes en 16/7, logo a droite : on garde le personnage, a gauche */
html body .dtf-h2-jeux-liste img { display: block; width: 40px; height: 24px; object-fit: cover; object-position: 18% 30%; border-radius: 4px; }
html body .dtf-h2-media {
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  background: var(--s-case);
}
html body .dtf-h2-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 66% 40%;
  border-radius: 8px;
}
@media (max-width: 991.98px) {
  html body .dtf-hero2 { margin-top: 0; padding: 40px 0 56px; }
  html body .dtf-h2-grille { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

/* ---- Matiere des cartes de jeu et des cartes produit (2026-10-22) -----------------------
   « ajoute plus de matieres, ombre ou quoi aux group cards ». La carte devient une surface
   posee sur le fond plutot qu un aplat :
     - un leger degrade blanc en biais sur le fond de case (celui des cases de Solar) ;
     - un filet clair en haut (inset) et une ombre portee sombre sous la carte ;
     - l image se fond dans la case par un voile sombre en bas, separee du texte par un filet ;
     - dans le bas de la case, un reflet bleu, comme si la lueur du fond l eclairait ;
     - un grain tres fin sur la partie texte.
   Au survol : filet un peu plus clair et halo bleu de 1 px, rien ne bouge. */
html body .dtf-group-card,
html body .dtf-pcard {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .055) 0%, rgba(255, 255, 255, .02) 45%, rgba(255, 255, 255, .03) 100%),
    var(--s-case) !important;
  border-color: rgba(255, 255, 255, .09) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 2px 6px rgba(0, 0, 0, .35),
    0 14px 32px -14px rgba(0, 0, 0, .85);
}
html body .dtf-group-card:hover,
html body .dtf-pcard:hover {
  border-color: rgba(255, 255, 255, .18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    0 2px 6px rgba(0, 0, 0, .35),
    0 16px 36px -14px rgba(0, 0, 0, .9),
    0 0 0 1px rgba(var(--s-bleu), .18);
}
html body .dtf-gc-media,
html body .dtf-pcard-media { position: relative; }
html body .dtf-gc-media::after,
html body .dtf-pcard-media::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 45%;
  background: linear-gradient(to top, rgba(6, 6, 6, .6), transparent);
  pointer-events: none;
}
html body .dtf-gc-body,
html body .dtf-pcard-head { position: relative; border-top: 1px solid rgba(255, 255, 255, .06); }
html body .dtf-group-card,
html body .dtf-pcard { position: relative; isolation: isolate; }
html body .dtf-group-card::after,
html body .dtf-pcard::after {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(120% 75% at 50% 115%, rgba(var(--s-bleu), .26), transparent 62%);
}
/* grain a part : le motif est dense, il ne supporte qu une opacite tres basse */
html body .dtf-group-card::before,
html body .dtf-pcard::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background-image: var(--s-grain);
  background-size: 200px 200px;
  opacity: .025;
}

/* ---- Pictogrammes en bleu et en blanc (2026-10-22) ----------------------------------- */
:root { --s-bleu-clair: #6ea5ff; }
/* cases a pictogramme (bandeau d arguments, « Why choose », aide de la FAQ) : bleu */
html body .dtf-feature-icon,
html body .dtf-why-icone,
html body .dtf-faq3-help-ico {
  background: rgba(var(--s-bleu), .12) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--s-bleu), .22);
  color: var(--s-bleu-clair) !important;
}
/* barre : le lien actif a son pictogramme en bleu, panier et compte en blanc */
html body .navbar .dtf-nav .nav-link.active svg { color: var(--s-bleu-clair); }
html body .navbar .navbar-nav.gap-3 .cart .btn,
html body .navbar .navbar-nav.gap-3 .user .btn { color: #fff !important; }
/* reseaux du pied en blanc, pictogrammes des menus deroulants en bleu */
html body .dtf-foot-social a { color: #fff; }
html body .dtf-drop-menu a svg,
html body .dtf-acc-menu svg { color: var(--s-bleu-clair) !important; }

/* ---- Page /status v3 (status-page.njk de la surcouche, 2026-10-22) -------------------
   « make it light and simple to read and understand » : une colonne de 860 px, resume en une
   phrase, filtres en texte, une case par jeu avec une ligne par produit. */
html body .sts { max-width: 860px; padding-top: 56px; padding-bottom: 72px; }
html body .sts-tete h1 { margin: 0 0 10px !important; }
html body .sts-resume { margin: 0; font-size: 16px; color: var(--s-texte-2); }
html body .sts-verif { margin: 6px 0 0; font-size: 12.5px; color: var(--s-gris); }
html body .sts-verif b { color: var(--s-texte-2); font-weight: 500; }
html body .sts-t-ok { color: #4ade80; font-weight: 600; }
html body .sts-t-down { color: #f87171; font-weight: 600; }

html body .sts-outils { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 32px 0 16px; }
html body .sts-filtres { display: flex; flex-wrap: wrap; gap: 4px; }
html body .sts-filtres button {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 10px;
  border: 0; border-radius: 6px;
  background: transparent;
  color: var(--s-gris);
  font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1.2;
  cursor: pointer;
}
html body .sts-filtres button span { color: var(--s-gris-2); font-variant-numeric: tabular-nums; }
html body .sts-filtres button:hover { color: #fff; }
html body .sts-filtres button.is-on { background: rgba(255, 255, 255, .07); color: #fff; }
html body .sts-recherche {
  display: flex; align-items: center; gap: 8px;
  width: min(260px, 100%); height: 36px; padding: 0 12px;
  border: 1px solid var(--s-filet); border-radius: var(--s-r-ctl);
  background: var(--s-case); color: var(--s-gris);
}
html body .sts-recherche input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--s-texte); font-size: 13px; }

html body .sts-jeux { display: grid; gap: 12px; }
html body .sts-jeu { border: 1px solid var(--s-filet); border-radius: var(--s-r); background: var(--s-case); overflow: hidden; }
html body .sts-jeu > header {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--s-filet);
  font-size: 12.5px; color: var(--s-gris);
}
html body .sts-jeu h2 { margin: 0; font-size: 14px !important; font-weight: 600; color: var(--s-texte); }
html body .sts-jeu ul { margin: 0; padding: 0; list-style: none; }
html body .sts-jeu li + li { border-top: 1px solid rgba(255, 255, 255, .05); }
html body .sts-ligne {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 18px;
  color: var(--s-texte); text-decoration: none; font-size: 13.5px;
}
html body .sts-ligne:hover { background: rgba(255, 255, 255, .025); }
html body .sts-nom { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
html body .sts-etat { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; white-space: nowrap; }
html body .sts-depuis { flex: 0 0 auto; min-width: 70px; text-align: right; font-size: 12px; color: var(--s-gris-2); }
html body .sts-point { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
html body .sts-k-ok { color: #4ade80; }
html body .sts-k-work { color: #6ea5ff; }
html body .sts-k-test { color: #b4a7ff; }
html body .sts-k-risk { color: #fbbf24; }
html body .sts-k-down { color: #f87171; }
html body .sts-k-frozen { color: #94a3b8; }
html body .sts-vide { margin: 8px 0; color: var(--s-gris); font-size: 13.5px; }

html body .sts-legende { margin-top: 40px; }
html body .sts-legende h2 { margin: 0 0 12px; font-size: 11px !important; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--s-gris); }
html body .sts-legende dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; margin: 0; }
html body .sts-legende dt { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--s-texte); }
html body .sts-legende dd { margin: 2px 0 0 14px; font-size: 12.5px; color: var(--s-gris); }
html body .sts-liens { display: flex; flex-wrap: wrap; gap: 20px; margin: 32px 0 0; font-size: 13px; }
html body .sts-liens a { color: var(--s-texte-2); text-decoration: underline; text-underline-offset: 3px; }
html body .sts-liens a:hover { color: #fff; }
@media (max-width: 575.98px) {
  html body .sts { padding-top: 32px; }
  html body .sts-depuis { display: none; }
  html body .sts-legende dl { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Matiere de toutes les cases (2026-10-22) ------------------------------------------
   « dans toutes les parties comme ca en general sur le site, met du grain et un effet leger
   brillant et du bleu, une petite touche de luminosite, pour tous les petits carres ».
   Meme recette que les cartes de jeu, mais en calques de fond (sans pseudo-elements, que
   plusieurs de ces cases utilisent deja) : reflet blanc en biais, reflet bleu dans le bas,
   grain fin (motif dont l opacite est deja dans le SVG : 7 % au plus), filet clair en haut et
   ombre portee douce. Les cartes de jeu et de produit gardent leur propre version. */
:root {
  --s-grain-case: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .14 0 0 0 -.07'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --s-matiere:
    linear-gradient(160deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .018) 45%, rgba(255, 255, 255, .03) 100%),
    radial-gradient(120% 80% at 50% 125%, rgba(var(--s-bleu), .16), transparent 62%),
    var(--s-grain-case);
  --s-reflet: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 28px -16px rgba(0, 0, 0, .9);
}
html body .dtf-feature,
html body .dtf-why-carte,
html body .dtf-faq3-help,
html body .dtf-faq3-item,
html body .dtf-faq3-item.is-open,
html body .qlf-pp .qlf-pp-box,
html body .sts-jeu,
html body .dtf-rcard,
html body .upd-carte,
html body .gp-brand,
html body .gp-brand:hover,
html body .guides-page .gp-block,
html body .dtf-h2-jeux-liste a,
html body .dtf-h2-media,
html body .rounded.form,
html body .cart-item-bg,
html body .dtf-fbscore,
html body .qlf-pp .product-form .variants .variant,
html body .qlf-pp .product-form .qty-bar,
html body .dtf-foot-social a,
html body .sts-recherche,
html body .dtf-plist-search {
  background: var(--s-matiere), var(--s-case) !important;
  background-size: auto, auto, 200px 200px, auto !important;
  box-shadow: var(--s-reflet) !important;
}

/* petites cases a pictogramme : bleu lumineux, filet clair et halo bleu discret */
html body .dtf-feature-icon,
html body .dtf-why-icone,
html body .dtf-faq3-help-ico {
  background: linear-gradient(160deg, rgba(var(--s-bleu), .28), rgba(var(--s-bleu), .08)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 0 0 1px rgba(var(--s-bleu), .32),
    0 0 18px -4px rgba(var(--s-bleu), .5) !important;
  color: #9cc2ff !important;
}

/* case video du hero */
html body .dtf-h2-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 8px;
  background: var(--s-media);
}

/* ---- Fenetre d un jeu, v2 (2026-10-22) --------------------------------------------------
   Fond de la grande case transparent (les cartes flottent sur le voile sombre), bandeau bleu a
   motif + grain en tete de chaque carte (dtf.js), statut en rond de couleur, Undetected d abord
   (products.njk). */
html body .modal[id^="group-modal-"] .modal-content { background: transparent !important; border: 0 !important; box-shadow: none !important; }
html body .modal[id^="group-modal-"] .modal-header { border-bottom: 0 !important; }
html body .modal-backdrop { background-color: #000 !important; }
html body .modal-backdrop.show { opacity: .82 !important; }
html body .dtf-pcard .dtf-pcard-head { border-top: 0; }
html body .dtf-pcard-vague { overflow: hidden; }
html body .dtf-pcard-vague::after {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--s-grain);
  background-size: 160px 160px;
  opacity: .14;
  -webkit-mask-image: linear-gradient(#000 30%, transparent 85%);
          mask-image: linear-gradient(#000 30%, transparent 85%);
}

/* statut : un rond de la couleur du statut devant le mot, sans case ni bouclier */
html body .dtf-badge {
  display: inline-flex !important; align-items: center; gap: 7px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: var(--dtf-badge-c, var(--s-texte-2)) !important;
  font-weight: 500 !important;
}
html body .dtf-badge-point {
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

/* barres de defilement : fines, sans fleches (les proprietes standard affichent les fleches de
   Windows ; on les remet a auto pour que les regles -webkit- s appliquent partout) */
html body * { scrollbar-width: auto !important; scrollbar-color: auto !important; }
html body ::-webkit-scrollbar { width: 8px; height: 8px; }
html body ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
html body ::-webkit-scrollbar-track { background: transparent; }
html body ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16) !important; border-radius: 8px !important; border: 2px solid transparent; background-clip: padding-box !important; }
html body ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .28) !important; background-clip: padding-box !important; }
html body ::-webkit-scrollbar-track { background: transparent !important; }
html body ::-webkit-scrollbar-corner { background: transparent; }

/* ---- Fiche produit v3 (2026-10-22) ----------------------------------------------------
   « une meilleure product page intuitive et simple d utilisation » : a gauche images puis
   description en onglets ; a droite la zone d achat, collante, dans l ordre ou on s en sert :
   fil d Ariane, titre et statut, duree, total, quantite, Purchase Now (pleine largeur), Add to
   Cart, puis ce que l on recoit et ou poser une question. */
/* colonnes etirees : la colonne d achat doit etre aussi haute que celle de gauche pour que sa case reste collee */
html body .qlf-pp .row.gx-6 { align-items: stretch; }
@media (min-width: 992px) {
  html body .qlf-pp .col-lg-5 > .qlf-pp-info {
    position: sticky;
    top: 96px;
    padding: 22px;
    border: 1px solid var(--s-filet);
    border-radius: var(--s-r);
    background: var(--s-matiere), var(--s-case);
    background-size: auto, auto, 200px 200px, auto;
    box-shadow: var(--s-reflet);
    height: auto;
  }
}
html body .dtf-pp-fil {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 10px;
  font-size: 12.5px; color: var(--s-gris);
}
html body .dtf-pp-fil a { color: var(--s-gris); text-decoration: none; }
html body .dtf-pp-fil a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
html body .dtf-pp-fil span[aria-hidden] { color: var(--s-gris-2); }
html body .dtf-pp-fil > span:last-child { color: var(--s-texte-2); }

/* achat : Purchase Now d abord, sur toute la largeur, puis Add to Cart */
html body .qlf-pp .product-form .buy-row { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; }
html body .qlf-pp .product-form .buy-row .purchase-seg { order: 1; width: 100%; flex: none !important; min-height: 48px !important; font-size: 14px !important; }
html body .qlf-pp .product-form .buy-row .cart-seg { order: 2; width: 100%; flex: none !important; }
html body .qlf-pp .product-form .buy-row .guide-seg { order: 3; width: 100%; flex: none !important; }

/* ce que l on recoit */
html body .dtf-pp-recu { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--s-filet); display: grid; gap: 9px; }
html body .dtf-pp-recu li { display: flex; align-items: baseline; gap: 10px; font-size: 13px; line-height: 1.45; color: var(--s-texte-2); }
html body .dtf-pp-recu i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--s-bleu-clair); box-shadow: 0 0 8px rgba(var(--s-bleu), .8); transform: translateY(-1px); }
html body .dtf-pp-question { margin: 14px 0 0; font-size: 12.5px; color: var(--s-gris); }
html body .dtf-pp-question a { color: var(--s-texte); text-decoration: underline; text-underline-offset: 3px; }

/* description sous les images, en onglets */
html body .qlf-pp .dtf-pp-details { margin-top: 20px; height: auto; }
html body .dtf-onglets-barre {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 10px 14px 0;
  border-bottom: 1px solid var(--s-filet);
}
html body .dtf-onglets-barre button {
  position: relative;
  padding: 9px 12px 11px;
  border: 0; background: none;
  color: var(--s-gris);
  font-family: inherit; font-size: 13.5px; font-weight: 500; line-height: 1.2;
  cursor: pointer;
}
html body .dtf-onglets-barre button:hover { color: #fff; }
html body .dtf-onglets-barre button[aria-selected="true"] { color: #fff; }
html body .dtf-onglets-barre button[aria-selected="true"]::after {
  content: '';
  position: absolute; left: 10px; right: 10px; bottom: -1px;
  height: 2px; border-radius: 2px;
  background: var(--s-bleu-clair);
  box-shadow: 0 0 10px rgba(var(--s-bleu), .7);
}
html body .dtf-onglet-panneau { padding: 18px 20px 20px; color: var(--s-texte-2); font-size: 14px; line-height: 1.7; }
html body .dtf-onglet-panneau ul { margin: 0; padding-left: 18px; }
html body .dtf-onglet-panneau li { margin: 4px 0; }
html body .dtf-onglet-panneau li::marker { color: var(--s-bleu-clair); }
html body .dtf-onglet-panneau strong,
html body .dtf-onglet-panneau b { color: var(--s-texte); }
html body .dtf-onglet-panneau a { color: var(--s-texte); text-decoration: underline; }
/* telephone : images, puis l achat, puis la description (sinon il fallait passer toute la
   description pour trouver le bouton). La colonne de gauche s efface (display: contents) pour
   que ses deux blocs se rangent de part et d autre de la colonne d achat. */
@media (max-width: 991.98px) {
  html body .qlf-pp .row.gx-6 > .col-lg-7 { display: contents; }
  html body .qlf-pp .qlf-pp-image-section { order: 1; width: 100%; padding: 0 calc(var(--bs-gutter-x) * .5); margin-bottom: 24px; }
  html body .qlf-pp .row.gx-6 > .col-lg-5 { order: 2; }
  html body .qlf-pp .dtf-pp-details { order: 3; width: calc(100% - var(--bs-gutter-x)); margin: 28px calc(var(--bs-gutter-x) * .5) 0; }
  html body .dtf-onglets-barre { flex-wrap: nowrap; overflow-x: auto; }
  html body .dtf-onglets-barre button { flex: none; white-space: nowrap; }
}

/* ---- Cases lisses (2026-10-22, derniere version) ---------------------------------------
   « lisse le grain sur les carres partout, garde la brillance et la texture un peu, rajoute pour
   differencier du fond une petite brillance ou ombre » + capture d une ligne « Month Key » de Solar :
   surface sombre un peu plus claire que le fond, reflet blanc en biais (plus clair en haut a gauche),
   filet clair en haut, ombre douce. Plus de grain dans les cases ; reflet bleu a peine marque.
   Ces regles remplacent les valeurs posees plus haut (meme selecteurs, declarees apres). */
:root {
  --s-case: #0c0c0e;
  --s-filet: rgba(255, 255, 255, .09);
  --s-matiere:
    linear-gradient(160deg, rgba(255, 255, 255, .055) 0%, rgba(255, 255, 255, .02) 45%, rgba(255, 255, 255, .03) 100%),
    radial-gradient(120% 80% at 50% 130%, rgba(var(--s-bleu), .07), transparent 60%);
  --s-reflet: inset 0 1px 0 rgba(255, 255, 255, .09), 0 8px 30px rgba(0, 0, 0, .35);
}
html body .dtf-feature,
html body .dtf-why-carte,
html body .dtf-faq3-help,
html body .dtf-faq3-item,
html body .dtf-faq3-item.is-open,
html body .qlf-pp .qlf-pp-box,
html body .sts-jeu,
html body .dtf-rcard,
html body .upd-carte,
html body .gp-brand,
html body .gp-brand:hover,
html body .guides-page .gp-block,
html body .dtf-h2-jeux-liste a,
html body .dtf-h2-media,
html body .rounded.form,
html body .cart-item-bg,
html body .dtf-fbscore,
html body .qlf-pp .product-form .variants .variant,
html body .qlf-pp .product-form .qty-bar,
html body .dtf-foot-social a,
html body .sts-recherche,
html body .dtf-plist-search { background-size: auto !important; }
@media (min-width: 992px) {
  html body .qlf-pp .col-lg-5 > .qlf-pp-info { background-size: auto; }
}
/* cartes de jeu et de produit : meme surface, sans grain */
html body .dtf-group-card::before,
html body .dtf-pcard::before { content: none !important; }
html body .dtf-group-card::after,
html body .dtf-pcard::after { background: radial-gradient(120% 75% at 50% 120%, rgba(var(--s-bleu), .1), transparent 60%) !important; }
html body .dtf-group-card,
html body .dtf-pcard { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 8px 30px rgba(0, 0, 0, .35) !important; }
html body .dtf-pcard-vague::after { opacity: .05; }

/* moins de neon : plus de halo sur les pictogrammes, les ronds de statut, les puces, les onglets */
html body .dtf-feature-icon,
html body .dtf-why-icone,
html body .dtf-faq3-help-ico {
  background: rgba(var(--s-bleu), .12) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--s-bleu), .2) !important;
  color: #8fb3f5 !important;
}
html body .dtf-badge-point,
html body .dtf-pp-recu i,
html body .dtf-onglets-barre button[aria-selected="true"]::after { box-shadow: none !important; }

/* fenetre d un jeu : fond sombre a moitie opaque, plus « transparent » */
html body .modal[id^="group-modal-"] .modal-content {
  background: rgba(10, 10, 12, .78) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 12px !important;
}
html body .modal[id^="group-modal-"] .modal-header { border-bottom: 1px solid rgba(255, 255, 255, .06) !important; }

/* vignettes du hero : visuels officiels, cadres au centre */
html body .dtf-h2-jeux-liste img { object-position: center; }

/* ---- Page /feedback (2026-10-22, « arrange cette page, fais que c est proportionnel ») ----
   En-tete centre (titre, phrase, bouton, note), puis des cartes d avis TOUTES de la meme taille :
   texte coupe a 4 lignes (en entier au survol), notes sur une ligne, reponse sur deux, auteur en bas. */
html body .dtf-fbpage { padding: 48px 0 72px; }
html body .dtf-fbhead { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; margin-bottom: 32px; }
html body .dtf-fbhead .dtf-block-title { margin-bottom: 8px !important; }
html body .dtf-fbhead .dtf-block-sub { text-align: center; max-width: 52ch; margin: 0 auto !important; }
html body .dtf-fbwrite { margin: 20px 0 0; }
html body .dtf-fbwrite-btn { height: 42px; padding: 0 18px; }
html body .dtf-fbscore { margin-top: 20px !important; }
html body .dtf-fbscore-cell { padding: 12px 28px !important; }
html body .dtf-fbscore-value { font-size: 22px !important; }

html body .dtf-fbgrid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
  columns: auto !important;
}
html body .dtf-fbgrid > .dtf-rcard {
  display: flex !important;
  flex-direction: column;
  height: 236px !important;
  margin: 0 !important;
  padding: 18px 20px !important;
  overflow: hidden;
  break-inside: avoid;
}
html body .dtf-rcard-top { flex: none; margin-bottom: 12px !important; }
html body .dtf-rcard-msg {
  flex: none;
  margin: 0 !important;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 14px !important; line-height: 1.55 !important; color: var(--s-texte-2) !important;
}
html body .dtf-rcard-notes { flex: none; margin: 8px 0 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px !important; }
html body .dtf-rcard-reply {
  flex: none;
  margin: 10px 0 0 !important;
  padding: 0 0 0 10px !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 12.5px !important;
}
html body .dtf-rcard-by { margin-top: auto !important; padding-top: 10px !important; }
@media (max-width: 991.98px) { html body .dtf-fbgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 575.98px) {
  html body .dtf-fbgrid { grid-template-columns: minmax(0, 1fr) !important; }
  html body .dtf-fbgrid > .dtf-rcard { height: auto !important; min-height: 180px; }
}

/* ---- Connexion client (customer-login-modal.njk de la surcouche) ----------------------- */
html body .dtf-cx .modal-dialog { max-width: 400px; }
html body .dtf-cx .modal-content {
  background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015) 50%), #0c0c0e !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 60px rgba(0, 0, 0, .6) !important;
  overflow: hidden;
}
html body .dtf-cx .modal-header { padding: 16px 20px !important; border-bottom: 1px solid rgba(255, 255, 255, .07) !important; }
html body .dtf-cx .modal-title { display: inline-flex; align-items: center; gap: 9px; font-size: 16px !important; font-weight: 600; color: #fff; }
html body .dtf-cx .modal-title svg { color: var(--s-gris); }
html body .dtf-cx .modal-body { padding: 20px !important; }
html body .dtf-cx-texte { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--s-texte-2); }
html body .dtf-cx-texte b { color: #fff; font-weight: 600; }
html body .dtf-cx-champ {
  display: flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  background: rgba(255, 255, 255, .03);
  color: var(--s-gris);
  cursor: text;
}
html body .dtf-cx-champ:focus-within { border-color: rgba(var(--s-bleu), .7); box-shadow: 0 0 0 3px rgba(var(--s-bleu), .18); color: #9cbcff; }
html body .dtf-cx-champ input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #fff; font-size: 14.5px; }
html body .dtf-cx-champ input::placeholder { color: var(--s-gris-2); }
html body .dtf-cx-bouton {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 46px; margin-top: 14px;
  border: 0 !important; border-radius: 10px !important;
  background: linear-gradient(180deg, #4b8cff, #3a78f2) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
  color: #fff !important; font-size: 14.5px; font-weight: 600 !important;
  text-transform: none !important; letter-spacing: 0 !important;
  cursor: pointer;
}
html body .dtf-cx-bouton:hover:not(:disabled) { background: linear-gradient(180deg, #5a96ff, #4180f5) !important; }
html body .dtf-cx-bouton:disabled { opacity: .55; cursor: default; }
html body .dtf-cx-erreur { margin: 12px 0 0; font-size: 13px; color: #f87171; }
html body .dtf-cx-lien,
html body .dtf-cx-renvoi { padding: 0; border: 0; background: none; font-size: 13px; cursor: pointer; }
html body .dtf-cx-lien { color: var(--s-texte-2); text-decoration: underline; text-underline-offset: 3px; }
html body .dtf-cx-lien:hover { color: #fff; }
html body .dtf-cx-lien-seul { display: block; margin: 14px auto 0; }
html body .dtf-cx-renvoi { color: #8fb3f5; }
html body .dtf-cx-renvoi:disabled { color: var(--s-gris-2); cursor: default; }
html body .dtf-cx-bas { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
html body .dtf-cx-code { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
html body .dtf-cx-code input {
  height: 54px; min-width: 0;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  background: rgba(255, 255, 255, .03);
  color: #fff; text-align: center; font-size: 20px; font-weight: 600;
  outline: 0;
}
html body .dtf-cx-code input:focus { border-color: rgba(var(--s-bleu), .75); box-shadow: 0 0 0 3px rgba(var(--s-bleu), .18); }
html body .dtf-cx-pied {
  display: flex; align-items: center; gap: 8px;
  margin: 0; padding: 0 20px 18px;
  font-size: 12px; color: var(--s-gris-2);
}

/* ---- Popular games (2026-10-22) : une seule ligne ; ce qui passe a la ligne est masque, l ordre
   du gabarit fait la priorite. overflow-clip-margin laisse respirer l ombre des vignettes. */
html body .dtf-h2-jeux-liste { height: 30px; overflow: clip; overflow-clip-margin: 6px; gap: 5px; }
/* vignettes resserrees pour que R6, EFT, Valorant, ARC Raiders, Apex et COD tiennent ensemble */
html body .dtf-h2-jeux-liste a { gap: 5px; padding: 3px 8px 3px 3px; }
html body .dtf-h2-jeux-liste img { width: 34px; height: 22px; }

/* ---- logo chrome (2026-10-22) */
html body .navbar .navbar-brand img { height: 44px !important; max-height: none !important; width: auto !important; }
html body .dtf-foot-logo img { height: 36px; }

/* ---- /status v3.1 (2026-10-22, captures du user) : le jeu est un simple titre HORS case,
   chaque produit a sa propre case (vignette, nom, pastille de statut encadree, chevron) ;
   filtre par jeu « All Groups » a cote de la recherche. */
html body .sts-jeux { gap: 26px; }
html body .sts-jeu { border: 0 !important; border-radius: 0; background: none !important; box-shadow: none !important; overflow: visible; }
html body .sts-jeu > header { padding: 0 2px 10px; border-bottom: 0; }
html body .sts-jeu h2 { font-size: 17px !important; font-weight: 700; letter-spacing: -.01em; }
html body .sts-jeu ul { display: grid; gap: 8px; }
html body .sts-jeu li + li { border-top: 0; }
html body .sts-ligne {
  gap: 14px; padding: 10px 14px 10px 10px;
  border: 1px solid var(--s-filet); border-radius: 10px;
  background: var(--s-matiere), var(--s-case);
  box-shadow: var(--s-reflet);
  transition: border-color .15s;
}
html body .sts-ligne:hover { background: var(--s-matiere), var(--s-case); border-color: rgba(255, 255, 255, .18); }
html body .sts-vign { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 7px; overflow: hidden; background: rgba(255, 255, 255, .05); border: 1px solid var(--s-filet); }
html body .sts-vign img { display: block; width: 100%; height: 100%; object-fit: cover; }
html body .sts-nom { font-size: 14px; font-weight: 600; }
html body .sts-etat {
  gap: 6px; padding: 4px 10px;
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  font-size: 12.5px;
}
html body .sts-etat .sts-point { width: 6px; height: 6px; }
html body .sts-fleche { flex: 0 0 auto; color: var(--s-gris-2); }
html body .sts-ligne:hover .sts-fleche { color: var(--s-texte); }

html body .sts-groupes { position: relative; margin-left: auto; }
html body .sts-groupes-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px;
  border: 1px solid var(--s-filet); border-radius: var(--s-r-ctl);
  background: var(--s-matiere), var(--s-case); color: var(--s-texte-2);
  font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}
html body .sts-groupes-btn:hover, html body .sts-groupes-btn[aria-expanded="true"] { border-color: rgba(255, 255, 255, .2); color: #fff; }
html body .sts-groupes-btn[aria-expanded="true"] .sts-chev { transform: rotate(180deg); }
html body .sts-groupes-liste {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0;
  min-width: 220px; max-height: 360px; overflow-y: auto;
  margin: 0; padding: 6px; list-style: none;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px;
  background: #0c0c0e; box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
}
html body .sts-groupes-liste li {
  position: relative; padding: 8px 10px 8px 28px; border-radius: 6px;
  color: var(--s-gris); font-size: 13px; cursor: pointer;
}
html body .sts-groupes-liste li:hover { background: rgba(255, 255, 255, .05); color: #fff; }
html body .sts-groupes-liste li[aria-selected="true"] { color: var(--s-bleu-clair); }
html body .sts-groupes-liste li[aria-selected="true"]::before { content: "✓"; position: absolute; left: 10px; }
@media (max-width: 575.98px) {
  html body .sts-groupes { margin-left: 0; }
  html body .sts-recherche { width: 100%; }
  html body .sts-ligne { gap: 10px; }
}
/* outils sur deux lignes fixes : filtres de statut, puis « All Groups » + recherche (sinon la
   recherche sautait d une ligne a l autre selon la longueur du nom de jeu choisi) */
html body .sts-filtres { flex: 1 1 100%; }
html body .sts-groupes { margin-left: 0; }
html body .sts-recherche { flex: 1 1 200px; width: auto; }

/* ---- Grain leger + lueur sur toutes les cases (2026-10-22, capture de /status : « trop pale et
   lisse, ca manque de texture, garde ce format mais rajoute un leger grain et glow ») ----------
   Meme forme qu avant ; on change seulement les deux jetons partages par toutes les cases :
   grain fin integre au fond (4,5 % au plus), reflet blanc un peu plus net, reflet bleu dans le bas
   un peu plus marque, et une lueur bleue tres douce autour de la case. */
:root {
  --s-grain-leger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .09 0 0 0 -.045'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --s-filet: rgba(255, 255, 255, .1);
  --s-matiere:
    var(--s-grain-leger),
    linear-gradient(160deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .022) 42%, rgba(255, 255, 255, .035) 100%),
    radial-gradient(120% 85% at 50% 135%, rgba(var(--s-bleu), .14), transparent 62%);
  --s-reflet:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    0 10px 30px rgba(0, 0, 0, .4),
    0 0 26px -8px rgba(var(--s-bleu), .3);
}
/* cartes de jeu et de produit (elles ont leur propre surface) : meme grain et meme lueur */
html body .dtf-group-card::before,
html body .dtf-pcard::before { content: "" !important; background-image: var(--s-grain-leger) !important; background-size: 180px 180px; opacity: 1 !important; z-index: 1; }
html body .dtf-group-card::after,
html body .dtf-pcard::after { background: radial-gradient(120% 75% at 50% 120%, rgba(var(--s-bleu), .16), transparent 60%) !important; }
html body .dtf-group-card,
html body .dtf-pcard { box-shadow: var(--s-reflet) !important; }
/* videos 60 i/s des fiches (remplacent le WebP anime en 1re image) */
html body .qlf-pp-carousel-item video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---- /guides en cartes (2026-10-22, modele solarservices.cc/guides) : titre centre, recherche,
   grille de cartes (image du jeu + pastille de la marque, « Setup guide », nom, « View guide »). */
html body .guides-page .gp-wrap { max-width: 1140px; }
html body .guides-page .gp-head { text-align: center; margin-bottom: 28px; }
html body .gp-brands { display: block !important; }
html body .gp-brands[hidden] { display: none !important; }
html body .gp-cherche {
  display: flex; align-items: center; gap: 8px;
  width: min(420px, 100%); height: 40px; margin: 0 auto 28px; padding: 0 14px;
  border: 1px solid var(--s-filet); border-radius: var(--s-r-ctl);
  background: var(--s-matiere), var(--s-case); color: var(--s-gris);
}
html body .gp-cherche input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--s-texte); font-size: 13.5px; }
html body .gp-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
html body .gp-carte {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--s-filet); border-radius: 12px;
  background: var(--s-matiere), var(--s-case); box-shadow: var(--s-reflet);
  color: var(--s-texte); text-decoration: none;
  transition: border-color .15s, transform .15s;
}
html body .gp-carte:hover { border-color: rgba(255, 255, 255, .2); transform: translateY(-2px); color: var(--s-texte); }
html body .gp-carte[hidden] { display: none; }
html body .gp-carte-img { position: relative; display: block; aspect-ratio: 16 / 7; background: #08080a; overflow: hidden; }
html body .gp-carte-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
html body .gp-carte-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .55)); }
html body .gp-carte-marque {
  position: absolute; z-index: 1; left: 50%; bottom: 10px; transform: translateX(-50%);
  padding: 2px 10px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 6px;
  background: rgba(8, 8, 10, .7); backdrop-filter: blur(4px);
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: #fff; white-space: nowrap;
}
html body .gp-carte-corps { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
html body .gp-carte-sur { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--s-gris); }
html body .gp-carte-nom { font-size: 15px; font-weight: 600; color: var(--s-texte); }
html body .gp-carte-voir { display: inline-flex; gap: 6px; font-size: 13px; font-weight: 500; color: var(--s-texte-2); }
html body .gp-carte:hover .gp-carte-voir { color: #fff; }
html body .gp-vide { text-align: center; color: var(--s-gris); margin: 24px 0; }
@media (max-width: 991.98px) { html body .gp-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { html body .gp-cartes { grid-template-columns: minmax(0, 1fr); } }

/* ---- Page d un guide facon Solar (2026-10-22) : sommaire des guides par jeu a gauche (collant),
   en-tete « Product guide », etapes numerotees reliees par un trait, encadres depliables
   (reference / correctif), alerte « Borderless », depannage. */
html body .gp-wrap:has(.gp-page:not([hidden])) .gp-head { display: none; }
html body .gp-page:not([hidden]) { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: start; }
html body .gs-som { position: sticky; top: 100px; max-height: calc(100vh - 120px); overflow-y: auto; padding-right: 6px; }
html body .gs-som .gp-back { display: inline-block; margin-bottom: 12px; font-size: 13px; text-decoration: none; }
html body .gs-som-cherche input {
  width: 100%; height: 36px; padding: 0 12px; margin-bottom: 18px;
  border: 1px solid var(--s-filet); border-radius: var(--s-r-ctl);
  background: var(--s-matiere), var(--s-case); color: var(--s-texte); font-size: 13px; outline: 0;
}
html body .gs-som-jeu { margin-bottom: 16px; }
html body .gs-som-jeu[hidden], html body .gs-som-jeu a[hidden] { display: none; }
html body .gs-som-jeu p { margin: 0 0 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--s-gris); }
html body .gs-som-jeu a { display: block; padding: 5px 10px; margin-left: 4px; border-left: 1px solid var(--s-filet); font-size: 13px; color: var(--s-gris); text-decoration: none; }
html body .gs-som-jeu a:hover { color: #fff; }
html body .gs-som-jeu a.is-on { color: #fff; border-left-color: var(--s-bleu-clair); background: rgba(var(--s-bleu), .08); }

html body .gs-tete { padding: 24px 26px; margin-bottom: 36px; border: 1px solid var(--s-filet); border-radius: 12px; background: var(--s-matiere), var(--s-case); box-shadow: var(--s-reflet); }
html body .gs-sur { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--s-gris); }
html body .gs-tete .gp-ptitle { margin: 8px 0 6px !important; font-size: 30px !important; letter-spacing: -.02em; }
html body .gs-tete p { margin: 0; color: var(--s-gris); font-size: 14px; }
html body .gs-tete-liens { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
html body .gs-tete-liens a { padding: 7px 14px; border: 1px solid var(--s-filet); border-radius: var(--s-r-ctl); font-size: 13px; color: var(--s-texte-2); text-decoration: none; }
html body .gs-tete-liens a:first-child { background: #4b8cff; border-color: #4b8cff; color: #fff; }
html body .gs-h { margin: 0 0 18px; font-size: 19px !important; font-weight: 600; color: var(--s-texte); }

html body .gs-etapes { position: relative; margin: 0 0 44px; padding: 0 0 0 44px; list-style: none; }
html body .gs-etapes::before { content: ""; position: absolute; left: 13px; top: 6px; bottom: 6px; width: 1px; background: var(--s-filet); }
html body .gs-etapes > li { position: relative; margin-bottom: 16px; }
html body .gs-ref::before { content: ""; position: absolute; left: -36px; top: 18px; width: 11px; height: 11px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 3px; background: #0c0c0e; }
html body .gs-num {
  position: absolute; left: -44px; top: 0; display: grid; place-items: center;
  width: 27px; height: 27px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%;
  background: #0c0c0e; font-size: 12.5px; font-weight: 600; color: var(--s-texte);
}
html body .gs-etape { padding-top: 2px; margin-top: 26px !important; }
html body .gs-etape h3 { margin: 2px 0 6px; font-size: 16px !important; font-weight: 600; color: var(--s-texte); }
html body .gs-etape-c > p { margin: 0 0 12px; font-size: 14px; color: var(--s-gris); line-height: 1.6; }

html body .gs-bloc, html body .gs-erreur { margin-bottom: 10px; border: 1px solid var(--s-filet); border-radius: 10px; background: var(--s-matiere), var(--s-case); box-shadow: var(--s-reflet); }
html body .gs-bloc summary, html body .gs-erreur summary { display: flex; align-items: center; gap: 12px; padding: 13px 16px; cursor: pointer; list-style: none; }
html body .gs-bloc summary::-webkit-details-marker, html body .gs-erreur summary::-webkit-details-marker { display: none; }
html body .gs-bloc-t { flex: 1; display: flex; flex-direction: column; font-size: 14.5px; font-weight: 600; color: var(--s-texte); }
html body .gs-bloc-t small { font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--s-gris-2); }
html body .gs-fix .gs-bloc-t small { color: #f87171; }
html body .gs-bloc em, html body .gs-erreur em { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; color: #fbbf24; background: rgba(251, 191, 36, .1); border: 1px solid rgba(251, 191, 36, .25); white-space: nowrap; }
html body .gs-chev { width: 8px; height: 8px; border-right: 1.5px solid var(--s-gris); border-bottom: 1.5px solid var(--s-gris); transform: rotate(45deg); margin: -4px 4px 0; transition: transform .15s; }
html body details[open] > summary .gs-chev { transform: rotate(-135deg); margin-top: 4px; }
html body .gs-bloc-corps, html body .gs-erreur-corps { padding: 0 16px 14px; font-size: 13.5px; line-height: 1.65; color: var(--s-texte-2); }
html body .gs-bloc-corps ol, html body .gs-bloc-corps ul { margin: 0; padding-left: 20px; }
html body .gs-bloc-corps li { margin: 4px 0; }
html body .gs-bloc-corps a { color: var(--s-bleu-clair); }
html body .gs-bloc-corps pre { margin: 8px 0; padding: 10px 12px; border-radius: 8px; background: #050506; border: 1px solid var(--s-filet); font-size: 12.5px; color: #dfe4ee; white-space: pre-wrap; }
html body .gs-erreur { border-color: rgba(251, 191, 36, .22); background: linear-gradient(rgba(251, 191, 36, .04), rgba(251, 191, 36, .02)), var(--s-case); }
html body .gs-erreur > summary span { flex: 1; font-size: 14px; font-weight: 600; color: var(--s-texte); }
html body .gs-erreur > summary span::before { content: "⚠"; margin-right: 10px; color: #fbbf24; }
html body .gs-erreur > summary em { padding: 0; border: 0; background: none; text-transform: none; letter-spacing: 0; font-size: 12.5px; }
html body .gs-erreur-corps .gs-bloc { box-shadow: none; }
html body .gs-dl { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; padding: 16px 18px; border: 1px solid var(--s-filet); border-radius: 10px; background: var(--s-matiere), var(--s-case); }
html body .gs-dl b { font-size: 15px; color: var(--s-texte); }
html body .gs-dl span { font-size: 13px; color: var(--s-gris); }
html body .gs-alerte { margin: 12px 0 0; padding: 12px 16px; border: 1px solid rgba(248, 113, 113, .3); border-radius: 10px; background: rgba(248, 113, 113, .06); font-size: 13.5px; color: var(--s-texte-2); }
html body .gs-alerte b { color: #f87171; }
html body .gs-marque .gp-block { margin-bottom: 10px; }
html body .gs-intro { margin: -8px 0 16px; color: var(--s-gris); font-size: 14px; }
@media (max-width: 991.98px) {
  html body .gp-page:not([hidden]) { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  html body .gs-som { position: static; max-height: none; }
  /* plus d index en cartes (2026-10-22) : sur telephone la liste reste, en boite defilante */
  html body .gs-som nav { max-height: 220px; overflow-y: auto; padding: 10px 8px 0; border: 1px solid var(--s-filet); border-radius: 8px; }
}
@media (max-width: 575.98px) {
  html body .gs-bloc > summary { flex-wrap: wrap; }
  html body .gs-bloc-t { flex: 1 1 100%; }
  html body .gs-bloc > summary em { order: 2; }
  html body .gs-bloc > summary .gs-chev { order: 3; margin-left: auto; }
  html body .gs-tete { padding: 18px; }
  html body .gs-tete .gp-ptitle { font-size: 24px !important; }
}

/* cartes de /guides comme les visuels de Solar : image du jeu assombrie et adoucie (son logo
   s efface), « MARQUE JEU » en grand au centre en Orbitron, pastille de marque dessous */
html body .gp-carte-img { aspect-ratio: 16 / 9; }
html body .gp-carte-img img { filter: brightness(.36) saturate(.75) blur(2.5px); transform: scale(1.06); }
html body .gp-carte-img::after { background: radial-gradient(80% 90% at 50% 50%, rgba(0, 0, 0, .15), rgba(0, 0, 0, .55)); }
html body .gp-carte-titre {
  position: absolute; z-index: 1; inset: 0 12px 30px; display: grid; place-items: center; text-align: center;
  font-family: "Orbitron", "Bahnschrift", sans-serif; font-weight: 900; font-size: clamp(18px, 2.1vw, 26px);
  line-height: 1.02; letter-spacing: .04em; text-transform: uppercase; color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .6);
}
html body .gp-carte-marque { bottom: 12px; padding: 1px 10px; border-radius: 999px; background: rgba(8, 8, 10, .55); font-weight: 500; text-transform: lowercase; }

/* ---- /guides : effets doux (2026-10-22, « met un effet leger smooth ») : ouverture des encadres
   en glissant (Chrome / Edge recents ; ailleurs ils s ouvrent d un coup), fondu a l ouverture d un
   guide ou de la grille, zoom lent de l image au survol d une carte. Rien si l utilisateur reduit
   les animations. */
@media (prefers-reduced-motion: no-preference) {
  html body .guides-page { interpolate-size: allow-keywords; }
  html body .guides-page details::details-content {
    height: 0; overflow: clip;
    transition: height .28s ease, content-visibility .28s allow-discrete;
  }
  html body .guides-page details[open]::details-content { height: auto; }
  html body .gs-bloc, html body .gs-erreur { transition: border-color .2s ease, background-color .2s ease; }
  html body .gs-bloc > summary:hover, html body .gs-erreur > summary:hover { background: rgba(255, 255, 255, .02); }
  html body .gp-page:not([hidden]) .gs-art,
  html body .gp-brands:not([hidden]) .gp-cartes { animation: gs-fondu .35s ease both; }
  html body .gp-carte { transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
  html body .gp-carte-img img { transition: transform .6s ease, filter .4s ease; }
  html body .gp-carte:hover .gp-carte-img img { transform: scale(1.12); filter: brightness(.42) saturate(.85) blur(2px); }
  html body .gs-som-jeu a { transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
}
@keyframes gs-fondu { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* guides calques sur Solar : note (violet pale comme chez Solar, ici bleu), conseil « Avoid bans »
   en bleu, liens de telechargement sous la case */
html body .gs-note { margin: 0 0 10px; padding: 11px 16px; border: 1px solid rgba(var(--s-bleu), .22); border-radius: 10px; background: rgba(var(--s-bleu), .06); font-size: 13.5px; color: var(--s-texte-2); line-height: 1.6; }
html body .gs-note b { color: var(--s-bleu-clair); }
html body .gs-alerte-info { border-color: rgba(var(--s-bleu), .3); background: rgba(var(--s-bleu), .07); }
html body .gs-alerte-info b { color: var(--s-bleu-clair); }
html body .gs-dl-liens { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
html body .gs-dl-liens .gp-loader { margin: 0; }
html body .gs-etapes > li.gs-ref > .gs-note, html body .gs-etapes > li.gs-ref > .gs-alerte { margin: 0; }

/* textes repris des guides Solar (captures, touches, code) */
html body .gs-solar { font-size: 13.5px; line-height: 1.65; color: var(--s-texte-2); }
html body .gs-etape-c > .gs-solar { margin-bottom: 4px; color: var(--s-gris); font-size: 14px; }
html body .gs-solar p { margin: 0 0 8px; }
html body .gs-solar p:last-child { margin-bottom: 0; }
html body .gs-solar ol, html body .gs-solar ul { margin: 0 0 6px; padding-left: 20px; }
html body .gs-solar li { margin: 5px 0; }
html body .gs-solar a { color: var(--s-bleu-clair); }
html body .gs-solar strong { color: var(--s-texte); font-weight: 600; }
html body .gs-solar img { display: block; max-width: 100%; height: auto; margin: 10px 0; border: 1px solid var(--s-filet); border-radius: 8px; }
html body .gs-solar kbd { padding: 1px 6px; border: 1px solid rgba(255, 255, 255, .2); border-bottom-width: 2px; border-radius: 4px; background: #111114; font: 600 12px/1.4 ui-monospace, Consolas, monospace; color: var(--s-texte); }
html body .gs-solar code { padding: 1px 5px; border-radius: 4px; background: #111114; font: 12.5px ui-monospace, Consolas, monospace; color: #dfe4ee; }
html body .gs-solar pre { margin: 8px 0; padding: 10px 12px; border: 1px solid var(--s-filet); border-radius: 8px; background: #050506; white-space: pre-wrap; font: 12.5px/1.6 ui-monospace, Consolas, monospace; color: #dfe4ee; }
html body .gs-solar pre code { padding: 0; background: none; }
html body .gs-note.gs-solar, html body .gs-alerte.gs-solar { margin: 0; }

/* ---- Accueil sous le catalogue (2026-10-22) : How it works, chiffres, carrousel d avis ecrits,
   paiements et garanties. Meme langage que le reste : cases --s-matiere, titres sobres. */
html body .dtf-sec-tete { text-align: center; margin-bottom: 32px; }
html body .dtf-sec-sur { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--s-bleu-clair); }
html body .dtf-sec-titre { margin: 0 0 8px; font-size: clamp(24px, 2.6vw, 32px) !important; font-weight: 700; letter-spacing: -.02em; color: var(--s-texte); }
html body .dtf-sec-sous { margin: 0; font-size: 14.5px; color: var(--s-gris); }

html body .dtf-how { padding: 72px 0 24px; }
html body .dtf-how-etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
html body .dtf-how-etape {
  position: relative; padding: 26px 24px 24px;
  border: 1px solid var(--s-filet); border-radius: 12px;
  background: var(--s-matiere), var(--s-case); box-shadow: var(--s-reflet);
}
html body .dtf-how-num {
  display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 16px;
  border: 1px solid rgba(var(--s-bleu), .35); border-radius: 50%;
  background: rgba(var(--s-bleu), .12); color: var(--s-bleu-clair); font-weight: 700; font-size: 14px;
}
html body .dtf-how-etape h3 { margin: 0 0 8px; font-size: 16.5px !important; font-weight: 600; color: var(--s-texte); }
html body .dtf-how-etape p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--s-gris); }
html body .dtf-how-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }

html body .dtf-chiffres { padding: 32px 0 8px; }
html body .dtf-chiffres-grille {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--s-filet); border-radius: 12px; overflow: hidden;
  background: var(--s-matiere), var(--s-case); box-shadow: var(--s-reflet);
}
html body .dtf-chiffre { display: flex; flex-direction: column; gap: 6px; padding: 26px 24px; text-align: center; }
html body .dtf-chiffre + .dtf-chiffre { border-left: 1px solid var(--s-filet); }
html body .dtf-chiffre strong { font-size: clamp(26px, 3vw, 34px); font-weight: 700; letter-spacing: -.02em; color: var(--s-texte); font-variant-numeric: tabular-nums; line-height: 1.1; }
html body .dtf-chiffre strong small { font-size: .55em; color: var(--s-gris); font-weight: 600; margin-left: 2px; }
html body .dtf-chiffre span { font-size: 13px; color: var(--s-gris); }

html body .dtf-garanties { padding: 56px 0 24px; }
html body .dtf-garanties-grille {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: center;
  padding: 36px; border: 1px solid var(--s-filet); border-radius: 12px;
  background: var(--s-matiere), var(--s-case); box-shadow: var(--s-reflet);
}
html body .dtf-pay-liste { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
html body .dtf-pay-liste li { padding: 7px 12px; border: 1px solid var(--s-filet); border-radius: 8px; background: rgba(255, 255, 255, .03); font-size: 13px; font-weight: 500; color: var(--s-texte-2); }
html body .dtf-garanties-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; margin: 0; padding: 0; list-style: none; }
html body .dtf-garanties-liste li { display: flex; flex-direction: column; gap: 5px; padding-left: 16px; border-left: 2px solid rgba(var(--s-bleu), .45); }
html body .dtf-garanties-liste b { font-size: 14.5px; font-weight: 600; color: var(--s-texte); }
html body .dtf-garanties-liste span { font-size: 13.5px; line-height: 1.55; color: var(--s-gris); }

@media (max-width: 991.98px) {
  html body .dtf-how-etapes { grid-template-columns: minmax(0, 1fr); }
  html body .dtf-chiffres-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body .dtf-chiffre:nth-child(3) { border-left: 0; }
  html body .dtf-chiffre:nth-child(n+3) { border-top: 1px solid var(--s-filet); }
  html body .dtf-garanties-grille { grid-template-columns: minmax(0, 1fr); padding: 24px; gap: 28px; }
}
@media (max-width: 575.98px) {
  html body .dtf-garanties-liste { grid-template-columns: minmax(0, 1fr); }
}

/* ---- My keys dans la DA (2026-10-22) : en-tete sobre, filtres, cases --s-matiere, bouton bleu ---- */
html body .dtf-keys { --pan: #0c0c0e; --pan2: rgba(0, 0, 0, .28); --line: var(--s-filet); --line2: rgba(255, 255, 255, .18); --muted: var(--s-gris); --dim: var(--s-gris-2); --v: #4b8cff; }
html body .dtf-keys .kk-body { padding: 56px 0 72px; }
html body .dtf-keys .kk-head { align-items: flex-end; margin-bottom: 18px; }
html body .dtf-keys .kk-sur { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--s-bleu-clair); }
html body .dtf-keys .kk-title { font-size: clamp(28px, 3.4vw, 36px) !important; font-weight: 700 !important; letter-spacing: -.02em; }
html body .dtf-keys .kk-sous { margin: 8px 0 0; font-size: 14.5px; color: var(--s-gris); }
html body .dtf-keys .kk-count { display: none; }
html body .dtf-keys .kk-search { height: 40px; padding: 0 14px; border-radius: var(--s-r-ctl); background: var(--s-matiere), var(--s-case); }
html body .dtf-keys .kk-search:focus-within { border-color: rgba(var(--s-bleu), .55); }
html body .kk-filtres { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 18px; }
html body .kk-filtres button {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px;
  border: 0; border-radius: 6px; background: transparent; color: var(--s-gris);
  font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}
html body .kk-filtres button span { color: var(--s-gris-2); font-variant-numeric: tabular-nums; }
html body .kk-filtres button:hover { color: #fff; }
html body .kk-filtres button.is-on { background: rgba(255, 255, 255, .07); color: #fff; }
html body .kk-point { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
html body .kk-point.is-ok { background: #4ade80; }
html body .kk-point.is-wait { background: #fbbf24; }
html body .kk-card.kk-hors-filtre { display: none !important; }

html body .dtf-keys .kk-list { gap: 12px; }
html body .dtf-keys .kk-card {
  grid-template-columns: 210px minmax(0, 1fr); border-radius: 12px;
  background: var(--s-matiere), var(--s-case); box-shadow: var(--s-reflet);
}
html body .dtf-keys .kk-card:hover { border-color: rgba(255, 255, 255, .18); }
html body .dtf-keys .kk-media { min-height: 160px; background: #08080a; }
html body .dtf-keys .kk-media::after { background: linear-gradient(90deg, transparent 60%, rgba(12, 12, 14, .55)); }
html body .dtf-keys .kk-game { color: var(--s-bleu-clair); font-weight: 600; letter-spacing: .12em; }
html body .dtf-keys .kk-name h3 { font-size: 20px !important; font-weight: 700 !important; }
html body .dtf-keys .kk-tag { border-radius: 6px; }
html body .dtf-keys .kk-btn {
  background: linear-gradient(180deg, #4b8cff, #3a78f2); border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 6px 18px -8px rgba(var(--s-bleu), .8);
  font-weight: 600;
}
html body .dtf-keys .kk-btn:hover { background: linear-gradient(180deg, #5a96ff, #4382f6); }
html body .dtf-keys .kk-btn[aria-expanded="true"], html body .dtf-keys .kk-btn-ghost { background: transparent; box-shadow: none; border-color: var(--line2); }
html body .dtf-keys .kk-band { background: rgba(0, 0, 0, .28); }
html body .dtf-keys .kk-link { border-radius: 8px; border-color: var(--s-filet); }
html body .dtf-keys .kk-link:hover { border-color: rgba(255, 255, 255, .22); }
html body .dtf-keys .kk-keys { background: rgba(var(--s-bleu), .04); }
html body .dtf-keys .kk-key-value { border-radius: 8px; background: #060607; border-color: rgba(var(--s-bleu), .25); }
html body .dtf-keys .kk-copy { background: linear-gradient(180deg, #4b8cff, #3a78f2); border-radius: 8px; }
html body .dtf-keys .kk-copy:hover { background: linear-gradient(180deg, #5a96ff, #4382f6); }
html body .dtf-keys .kk-note a, html body .dtf-keys .kk-filter a { color: var(--s-bleu-clair); }
html body .dtf-keys .kk-id:focus-visible, html body .dtf-keys .kk-btn:focus-visible { outline-color: var(--s-bleu-clair); }
@media (max-width: 767.98px) {
  html body .dtf-keys .kk-card { grid-template-columns: minmax(0, 1fr); }
  html body .dtf-keys .kk-body { padding-top: 32px; }
}

/* tableau de bord client aux couleurs de la refonte (bleu au lieu du violet, cases --s-matiere) */
html body .dtf-dash { --v: #6ea5ff; --v2: #3a78f2; --pan: #0c0c0e; --line: var(--s-filet); }
html body .dtf-dash .dtf-stat, html body .dtf-dash .dtf-panel, html body .dtf-dash .dtf-order { background: var(--s-matiere), var(--s-case); box-shadow: var(--s-reflet); }
html body .dtf-dash .dtf-dash-avatar, html body .dtf-dash .dtf-order-btn { background: linear-gradient(180deg, #4b8cff, #3a78f2); }
html body .dtf-dash .dtf-chip.is-pending, html body .dtf-dash .dtf-chip.is-created { background: rgba(var(--s-bleu), .14); color: var(--s-bleu-clair); border-color: rgba(var(--s-bleu), .32); }

/* ---- Carrousel d avis v2 (2026-10-22, modele « Loved by Players ») ---- */
html body .dtf-avis-car { padding: 72px 0 32px; overflow: hidden; }
html body .dtf-avis-car-tete { margin-bottom: 30px; }
html body .dtf-avis-car-note {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 16px; padding: 6px 13px;
  border: 1px solid var(--s-filet); border-radius: 999px; background: var(--s-matiere), var(--s-case);
  font-size: 12.5px; font-weight: 600; color: var(--s-texte-2);
}
html body .dtf-avis-car-note svg { color: var(--s-bleu-clair); }
html body .dtf-avis-car-confiance { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--s-texte); }
html body .dtf-avis-car-pile { display: inline-flex; }
html body .dtf-avis-car-pile i {
  width: 26px; height: 26px; margin-left: -8px; border: 2px solid #050506; border-radius: 50%;
  background: center / cover no-repeat, linear-gradient(135deg, #2b4a8a, #5c3d8a);
}
html body .dtf-avis-car-pile i:first-child { margin-left: 0; }
html body .dtf-avis-car-pile i:nth-child(2) { background-color: #7a3a52; background-image: linear-gradient(135deg, #7a3a52, #3a2a5a); }
html body .dtf-avis-car-pile i:nth-child(3) { background-image: linear-gradient(135deg, #2f6b55, #26404f); }
html body .dtf-avis-car-pile i:nth-child(4) { background-image: linear-gradient(135deg, #5a3f8f, #2a2f5a); }

html body .dtf-avis-car-scene { display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; align-items: center; gap: 14px; }
html body .dtf-avis-car-btn {
  display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--s-filet); border-radius: 50%; background: var(--s-matiere), var(--s-case);
  color: var(--s-texte-2); cursor: pointer; transition: border-color .2s, color .2s, transform .2s;
}
html body .dtf-avis-car-btn:hover { border-color: rgba(255, 255, 255, .28); color: #fff; transform: scale(1.06); }
html body .dtf-avis-car-piste {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 3);
  gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 10px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent);
}
html body .dtf-avis-car-piste::-webkit-scrollbar { display: none; }
html body .dtf-avis-car-carte {
  display: flex; flex-direction: column; gap: 14px; scroll-snap-align: start; min-height: 190px; padding: 18px 20px;
  border: 1px solid var(--s-filet); border-radius: 12px; background: var(--s-matiere), var(--s-case); box-shadow: var(--s-reflet);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
html body .dtf-avis-car-carte:hover { transform: translateY(-4px); border-color: rgba(var(--s-bleu), .35); box-shadow: var(--s-reflet), 0 14px 30px -14px rgba(var(--s-bleu), .45); }
html body .dtf-avis-car-haut { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--s-filet); }
html body .dtf-avis-car-ico {
  flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; overflow: hidden;
  border: 1px solid var(--s-filet); border-radius: 8px; background: rgba(255, 255, 255, .04); color: var(--s-gris);
}
html body .dtf-avis-car-ico img { width: 100%; height: 100%; object-fit: cover; }
html body .dtf-avis-car-qui { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
html body .dtf-avis-car-qui b { font-size: 14.5px; font-weight: 600; color: var(--s-texte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .dtf-avis-car-qui small { font-size: 12.5px; color: var(--s-gris); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .dtf-avis-car-score { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--s-gris); }
html body .dtf-avis-car-etoiles { font-size: 13px; letter-spacing: 1px; }
html body .dtf-avis-car-etoiles .on { color: #fbbf24; }
html body .dtf-avis-car-etoiles .off { color: rgba(255, 255, 255, .15); }
html body .dtf-avis-car-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
html body .dtf-avis-car-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border: 1px solid var(--s-filet); border-radius: 999px; background: rgba(255, 255, 255, .04);
  font-size: 11.5px; font-weight: 600; color: var(--s-texte-2);
}
html body .dtf-avis-car-badge i { width: 6px; height: 6px; border-radius: 50%; }
html body .dtf-avis-car-badge i.is-ok { background: #4ade80; }
html body .dtf-avis-car-badge i.is-discord { background: #8ea2ff; }
html body .dtf-avis-car-date { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--s-gris); }
html body .dtf-avis-car-msg {
  margin: 0; font-size: 14px; line-height: 1.6; color: var(--s-texte-2); white-space: pre-line;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
html body .dtf-avis-car-points { display: flex; justify-content: center; gap: 6px; margin-top: 22px; }
html body .dtf-avis-car-points button {
  width: 6px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .22);
  cursor: pointer; transition: width .3s ease, background-color .3s ease;
}
html body .dtf-avis-car-points button.is-on { width: 22px; background: #fff; }
html body .dtf-avis-car-tout-l { margin: 18px 0 0; text-align: center; }
html body .dtf-avis-car-tout { font-size: 13.5px; color: var(--s-bleu-clair); text-decoration: none; }
html body .dtf-avis-car-tout:hover { text-decoration: underline; }

/* animations d entree : en-tete puis cartes en cascade (--i pose par le script) */
@media (prefers-reduced-motion: no-preference) {
  html body .dtf-avis-car .dtf-avis-car-tete > * { opacity: 0; translate: 0 16px; }
  html body .dtf-avis-car .dtf-avis-car-carte { opacity: 0; translate: 0 16px; }
  html body .dtf-avis-car.is-vu .dtf-avis-car-tete > * { animation: avis-entree .6s cubic-bezier(.2, .7, .2, 1) forwards; }
  html body .dtf-avis-car.is-vu .dtf-avis-car-tete > :nth-child(2) { animation-delay: .08s; }
  html body .dtf-avis-car.is-vu .dtf-avis-car-tete > :nth-child(3) { animation-delay: .16s; }
  html body .dtf-avis-car.is-vu .dtf-avis-car-tete > :nth-child(4) { animation-delay: .24s; }
  html body .dtf-avis-car.is-vu .dtf-avis-car-carte { animation: avis-entree .6s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(.25s + var(--i, 0) * .09s); }
  html body .dtf-avis-car-pile i { transition: transform .25s ease; }
  html body .dtf-avis-car-confiance:hover .dtf-avis-car-pile i { transform: translateX(calc(var(--d, 0) * 3px)); }
  html body .dtf-avis-car-pile i:nth-child(2) { --d: 1; }
  html body .dtf-avis-car-pile i:nth-child(3) { --d: 2; }
  html body .dtf-avis-car-pile i:nth-child(4) { --d: 3; }
}
@keyframes avis-entree { to { opacity: 1; translate: none; } }
@media (max-width: 991.98px) {
  html body .dtf-avis-car-piste { grid-auto-columns: calc((100% - 16px) / 2); }
}
@media (max-width: 640px) {
  html body .dtf-avis-car-scene { grid-template-columns: minmax(0, 1fr); }
  html body .dtf-avis-car-btn { display: none; }
  html body .dtf-avis-car-piste { grid-auto-columns: 86%; }
}

/* ==== Accueil v2 (2026-10-22) : sections illustrees et animees ==================================
   Chaque scene part de son etat final si les animations sont coupees ; sinon elle se joue a l entree
   dans l ecran (.is-vu pose par le script d accueil-bas.njk). */

/* -- How it works -- */
html body .dtf-how { position: relative; }
html body .dtf-how-fil { position: relative; height: 2px; margin: 0 16.6% -1px; background: var(--s-filet); border-radius: 2px; overflow: hidden; }
html body .dtf-how-fil span { position: absolute; inset: 0; transform-origin: left; background: linear-gradient(90deg, #4b8cff, #6ea5ff); }
html body .dtf-how-etape { padding: 0 0 24px; overflow: hidden; }
html body .dtf-how-etape > .dtf-how-num, html body .dtf-how-etape > h3, html body .dtf-how-etape > p { margin-left: 24px; margin-right: 24px; }
html body .dtf-how-etape > .dtf-how-num { margin-top: -17px; position: relative; z-index: 2; background: #0c0c0e; box-shadow: 0 0 0 4px #0c0c0e; }
html body .dtf-how-vue { position: relative; height: 168px; overflow: hidden; border-bottom: 1px solid var(--s-filet); background: radial-gradient(90% 120% at 50% 0%, rgba(var(--s-bleu), .12), transparent 70%), #08080a; }
html body .dtf-how-grille { position: absolute; inset: 18px 22px 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
html body .dtf-how-grille span { border-radius: 6px; background: center / cover no-repeat #111; opacity: .45; border: 1px solid var(--s-filet); }
html body .dtf-how-grille span.is-choisi { opacity: 1; border-color: #4b8cff; box-shadow: 0 0 0 2px rgba(var(--s-bleu), .35); }
html body .dtf-how-curseur { position: absolute; left: 52%; top: 46%; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6)); }
html body .dtf-how-pastille { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid rgba(74, 222, 128, .4); border-radius: 999px; background: rgba(5, 5, 6, .85); font-size: 11.5px; font-weight: 600; color: #4ade80; white-space: nowrap; }
html body .dtf-how-pastille i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
html body .dtf-how-vue-2 { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
html body .dtf-how-paie { display: flex; gap: 6px; }
html body .dtf-how-paie span { padding: 4px 10px; border: 1px solid var(--s-filet); border-radius: 6px; background: rgba(255, 255, 255, .04); font-size: 11.5px; color: var(--s-texte-2); }
html body .dtf-how-cle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid rgba(var(--s-bleu), .35); border-radius: 8px; background: #050506; color: var(--s-bleu-clair); }
html body .dtf-how-cle-txt { display: inline-block; overflow: hidden; white-space: nowrap; font: 600 12.5px ui-monospace, Consolas, monospace; color: #e6ecff; }
html body .dtf-how-livre { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #4ade80; }
html body .dtf-how-vue-3 { display: flex; align-items: center; justify-content: center; gap: 26px; }
html body .dtf-how-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
html body .dtf-how-liste li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--s-texte-2); }
html body .dtf-how-liste i { position: relative; width: 16px; height: 16px; border: 1.5px solid rgba(255, 255, 255, .25); border-radius: 4px; }
html body .dtf-how-liste i::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid #4ade80; border-width: 0 2px 2px 0; transform: rotate(45deg); }
html body .dtf-how-viseur { color: var(--s-bleu-clair); }

/* -- chiffres -- */
html body .dtf-chiffre { position: relative; align-items: center; padding: 24px 20px 20px; overflow: hidden; }
html body .dtf-chiffre-ico { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 4px; border-radius: 8px; background: rgba(var(--s-bleu), .12); color: var(--s-bleu-clair); }
html body .dtf-chiffre-courbe { width: 70%; height: 26px; margin-top: 6px; }
html body .dtf-chiffre-courbe path { fill: none; stroke: #4b8cff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 220; stroke-dashoffset: 0; }
html body .dtf-chiffre-etoiles { display: flex; gap: 4px; margin-top: 8px; }
html body .dtf-chiffre-etoiles i { width: 14px; height: 14px; background: #fbbf24; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
html body .dtf-chiffre-live { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; padding: 3px 10px; border-radius: 999px; background: rgba(74, 222, 128, .1); font-size: 11.5px; font-weight: 600; color: #4ade80; }
html body .dtf-chiffre-live i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
html body .dtf-chiffre-live i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; }

/* -- Why choose v2 -- */
html body .dtf-why2 { padding: 64px 0 24px; }
html body .dtf-why2-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
html body .dtf-why2-carte { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--s-filet); border-radius: 12px; background: var(--s-matiere), var(--s-case); box-shadow: var(--s-reflet); transition: border-color .3s ease, transform .3s ease; }
html body .dtf-why2-carte:hover { border-color: rgba(var(--s-bleu), .35); transform: translateY(-3px); }
html body .dtf-why2-carte h3 { display: flex; align-items: center; gap: 10px; margin: 20px 22px 8px; font-size: 16.5px !important; font-weight: 600; color: var(--s-texte); }
html body .dtf-why2-carte p { margin: 0 22px 22px; font-size: 14px; line-height: 1.6; color: var(--s-gris); }
html body .dtf-why2-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: rgba(var(--s-bleu), .12); color: var(--s-bleu-clair); }
html body .dtf-why2-vue { position: relative; height: 150px; padding: 18px 20px; border-bottom: 1px solid var(--s-filet); background: radial-gradient(90% 120% at 50% 0%, rgba(var(--s-bleu), .1), transparent 70%), #08080a; overflow: hidden; }
html body .dtf-why2-chat { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
html body .dtf-why2-chat span { max-width: 82%; padding: 7px 11px; border-radius: 12px; font-size: 12px; line-height: 1.4; }
html body .dtf-why2-chat .b-client { align-self: flex-start; background: rgba(255, 255, 255, .07); color: var(--s-texte-2); border-bottom-left-radius: 4px; }
html body .dtf-why2-chat .b-equipe { align-self: flex-end; background: linear-gradient(180deg, #4b8cff, #3a78f2); color: #fff; border-bottom-right-radius: 4px; }
html body .dtf-why2-chat .b-points { align-self: flex-end; display: none; gap: 4px; padding: 9px 12px; background: rgba(255, 255, 255, .07); }
html body .dtf-why2-chat .b-points i { width: 5px; height: 5px; border-radius: 50%; background: var(--s-gris); }
html body .dtf-why2-flux { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
html body .dtf-why2-flux .f-ligne { display: flex; align-items: center; gap: 10px; width: 100%; font-size: 12px; font-weight: 600; color: var(--s-texte-2); }
html body .dtf-why2-flux .f-barre { flex: 1; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .07); overflow: hidden; }
html body .dtf-why2-flux .f-barre i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4b8cff, #6ea5ff); }
html body .dtf-why2-flux .f-eclair { color: #fbbf24; filter: drop-shadow(0 0 10px rgba(251, 191, 36, .45)); }
html body .dtf-why2-flux .f-ok { font-size: 11.5px; color: var(--s-gris); }
html body .dtf-why2-statuts { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
html body .dtf-why2-statuts .s-ligne { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border: 1px solid var(--s-filet); border-radius: 8px; background: rgba(255, 255, 255, .03); font-size: 12px; color: var(--s-texte-2); }
html body .dtf-why2-statuts .s-etat { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--c, #4ade80); }
html body .dtf-why2-statuts .s-etat i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
html body .dtf-why2-statuts .s-etat i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; }

/* -- Avis v3 -- */
html body .dtf-avis3 { padding: 72px 0 32px; overflow: hidden; }
html body .dtf-avis3-grille { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 32px; align-items: center; }
html body .dtf-avis3-note { display: grid; gap: 16px; margin-top: 22px; padding: 20px; border: 1px solid var(--s-filet); border-radius: 12px; background: var(--s-matiere), var(--s-case); box-shadow: var(--s-reflet); }
html body .dtf-avis3-moyenne { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; }
html body .dtf-avis3-moyenne strong { grid-row: span 2; font-size: 46px; font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--s-texte); }
html body .dtf-avis3-etoiles { font-size: 16px; letter-spacing: 2px; color: #fbbf24; }
html body .dtf-avis3-moyenne small { font-size: 12.5px; color: var(--s-gris); }
html body .dtf-avis3-barres { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
html body .dtf-avis3-barres li { display: grid; grid-template-columns: 26px 1fr 38px; align-items: center; gap: 10px; font-size: 12px; color: var(--s-gris); font-variant-numeric: tabular-nums; }
html body .dtf-avis3-barres li span:last-child { text-align: right; }
html body .dtf-avis3-barres .b { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .07); overflow: hidden; }
html body .dtf-avis3-barres .b i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, #fbbf24, #f59e0b); }
html body .dtf-avis3-confiance { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: 14px; font-weight: 600; color: var(--s-texte); }
html body .dtf-avis3-tout { display: inline-flex; gap: 6px; margin-top: 14px; font-size: 13.5px; color: var(--s-bleu-clair); text-decoration: none; }
html body .dtf-avis3-tout:hover { text-decoration: underline; }
html body .dtf-avis3-rangs { display: grid; gap: 14px; min-width: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
html body .dtf-avis3-reserve { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
html body .dtf-avis3-rang { overflow: hidden; }
html body .dtf-avis3-piste { display: flex; gap: 14px; width: max-content; }
html body .dtf-avis3-carte { flex: 0 0 300px; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border: 1px solid var(--s-filet); border-radius: 12px; background: var(--s-matiere), var(--s-case); box-shadow: var(--s-reflet); transition: border-color .3s ease; }
html body .dtf-avis3-carte:hover { border-color: rgba(var(--s-bleu), .4); }
html body .dtf-avis3-carte .h { display: flex; align-items: center; gap: 10px; }
html body .dtf-avis3-carte .ico { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; overflow: hidden; border: 1px solid var(--s-filet); border-radius: 8px; background: rgba(255, 255, 255, .04); color: var(--s-gris); }
html body .dtf-avis3-carte .ico img { width: 100%; height: 100%; object-fit: cover; }
html body .dtf-avis3-carte .qui { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
html body .dtf-avis3-carte .qui b { font-size: 14px; font-weight: 600; color: var(--s-texte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .dtf-avis3-carte .qui small { font-size: 12px; color: var(--s-gris); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .dtf-avis3-carte .et { font-size: 12px; letter-spacing: 1px; }
html body .dtf-avis3-carte .et .on { color: #fbbf24; }
html body .dtf-avis3-carte .et .off { color: rgba(255, 255, 255, .15); }
html body .dtf-avis3-carte p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--s-texte-2); white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
html body .dtf-avis3-carte .src { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--s-gris); }
html body .dtf-avis3-carte .src i { width: 6px; height: 6px; border-radius: 50%; }
html body .dtf-avis3-carte .src i.is-ok { background: #4ade80; }
html body .dtf-avis3-carte .src i.is-discord { background: #8ea2ff; }

/* -- paiement v2 : logos -- */
html body .dtf-pay-logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
html body .dtf-pay-logos li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px 10px; border: 1px solid var(--s-filet); border-radius: 10px; background: rgba(255, 255, 255, .03); font-size: 11px; font-weight: 500; color: var(--s-gris); text-align: center; transition: border-color .25s ease, transform .25s ease, background-color .25s ease; }
html body .dtf-pay-logos li span { display: grid; place-items: center; width: 26px; height: 26px; color: #e9ecf3; transition: color .25s ease; }
html body .dtf-pay-logos li svg { width: 24px; height: 24px; }
html body .dtf-pay-logos li:hover { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); transform: translateY(-2px); }
html body .dtf-pay-logos li:hover span { color: var(--c); }
html body .dtf-garanties-liste li { position: relative; padding-left: 0; border-left: 0; }
html body .dtf-garanties-liste .g-ico { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 6px; border: 1px solid rgba(var(--s-bleu), .3); border-radius: 10px; background: rgba(var(--s-bleu), .1); color: var(--s-bleu-clair); }

@media (max-width: 991.98px) {
  html body .dtf-how-fil { display: none; }
  html body .dtf-why2-grille { grid-template-columns: minmax(0, 1fr); }
  html body .dtf-avis3-grille { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
  html body .dtf-avis3-carte { flex-basis: 260px; }
}

/* -- animations (coupees si l utilisateur reduit les animations) -- */
@media (prefers-reduced-motion: no-preference) {
  html body [data-anim] .dtf-sec-tete > *, html body [data-anim] .dtf-avis3-panneau > *,
  html body .dtf-how-etape, html body .dtf-chiffre, html body .dtf-why2-carte, html body .dtf-garanties-grille { opacity: 0; translate: 0 18px; }
  html body .is-vu .dtf-sec-tete > *, html body .is-vu .dtf-avis3-panneau > *,
  html body .is-vu .dtf-how-etape, html body .is-vu .dtf-chiffre, html body .is-vu .dtf-why2-carte, html body .is-vu .dtf-garanties-grille { animation: acc-entree .7s cubic-bezier(.2, .7, .2, 1) forwards; }
  html body .is-vu .dtf-sec-tete > :nth-child(2), html body .is-vu .dtf-avis3-panneau > :nth-child(2) { animation-delay: .07s; }
  html body .is-vu .dtf-sec-tete > :nth-child(3), html body .is-vu .dtf-avis3-panneau > :nth-child(3) { animation-delay: .14s; }
  html body .is-vu .dtf-avis3-panneau > :nth-child(n+4) { animation-delay: .22s; }
  html body .is-vu .dtf-how-etape:nth-child(1), html body .is-vu .dtf-chiffre:nth-child(1), html body .is-vu .dtf-why2-carte:nth-child(1) { animation-delay: .15s; }
  html body .is-vu .dtf-how-etape:nth-child(2), html body .is-vu .dtf-chiffre:nth-child(2), html body .is-vu .dtf-why2-carte:nth-child(2) { animation-delay: .3s; }
  html body .is-vu .dtf-how-etape:nth-child(3), html body .is-vu .dtf-chiffre:nth-child(3), html body .is-vu .dtf-why2-carte:nth-child(3) { animation-delay: .45s; }
  html body .is-vu .dtf-chiffre:nth-child(4) { animation-delay: .6s; }
  html body .dtf-how-fil span { transform: scaleX(0); }
  html body .is-vu .dtf-how-fil span { animation: acc-fil 1.6s .3s cubic-bezier(.5, 0, .2, 1) forwards; }
  html body .is-vu .dtf-how-curseur { animation: acc-curseur 4s ease-in-out infinite; }
  html body .is-vu .dtf-how-grille span.is-choisi { animation: acc-tuile 4s ease-in-out infinite; }
  html body .is-vu .dtf-how-pastille { animation: acc-pop 4s ease-in-out infinite; }
  html body .dtf-how-cle-txt { width: 0; }
  html body .is-vu .dtf-how-cle-txt { animation: acc-frappe 4.5s steps(19) infinite; }
  html body .is-vu .dtf-how-livre { animation: acc-livre 4.5s ease infinite; }
  html body .dtf-how-liste i::after { opacity: 0; }
  html body .is-vu .dtf-how-liste li:nth-child(1) i::after { animation: acc-coche 4.5s .3s infinite; }
  html body .is-vu .dtf-how-liste li:nth-child(2) i::after { animation: acc-coche 4.5s 1.1s infinite; }
  html body .is-vu .dtf-how-liste li:nth-child(3) i::after { animation: acc-coche 4.5s 1.9s infinite; }
  html body .is-vu .dtf-how-viseur { animation: acc-viseur 2.4s ease-in-out infinite; }
  html body .dtf-chiffre-courbe path { stroke-dashoffset: 220; }
  html body .is-vu .dtf-chiffre-courbe path { animation: acc-trace 1.8s .5s ease forwards; }
  html body .dtf-chiffre-etoiles i { opacity: 0; scale: .4; }
  html body .is-vu .dtf-chiffre-etoiles i { animation: acc-etoile .4s ease forwards; }
  html body .is-vu .dtf-chiffre-etoiles i:nth-child(2) { animation-delay: .1s; }
  html body .is-vu .dtf-chiffre-etoiles i:nth-child(3) { animation-delay: .2s; }
  html body .is-vu .dtf-chiffre-etoiles i:nth-child(4) { animation-delay: .3s; }
  html body .is-vu .dtf-chiffre-etoiles i:nth-child(5) { animation-delay: .4s; }
  html body .dtf-chiffre-live i::after, html body .dtf-why2-statuts .s-etat i::after { animation: acc-pulse 1.8s ease-out infinite; }
  html body .dtf-why2-chat .b-client, html body .dtf-why2-chat .b-equipe { opacity: 0; translate: 0 8px; }
  html body .is-vu .dtf-why2-chat .b-client { animation: acc-bulle 6s .3s infinite; }
  html body .is-vu .dtf-why2-chat .b-points { display: inline-flex; animation: acc-points-vis 6s .3s infinite; }
  html body .is-vu .dtf-why2-chat .b-points i { animation: acc-saut 1s ease-in-out infinite; }
  html body .is-vu .dtf-why2-chat .b-points i:nth-child(2) { animation-delay: .15s; }
  html body .is-vu .dtf-why2-chat .b-points i:nth-child(3) { animation-delay: .3s; }
  html body .is-vu .dtf-why2-chat .b-equipe { animation: acc-bulle2 6s .3s infinite; }
  html body .dtf-why2-flux .f-barre i { width: 0; }
  html body .is-vu .dtf-why2-flux .f-barre i { animation: acc-barre 3s ease-in-out infinite; }
  html body .is-vu .dtf-why2-flux .f-eclair { animation: acc-eclair 3s ease-in-out infinite; }
  html body .dtf-avis3-barres .b i { width: 0; }
  html body .is-vu .dtf-avis3-barres .b i { animation: acc-largeur 1.2s .4s ease forwards; }
  html body .is-defile .dtf-avis3-rang .dtf-avis3-piste { animation: acc-defile var(--duree, 60s) linear infinite; }
  html body .is-defile .dtf-avis3-rang.is-inverse .dtf-avis3-piste { animation-direction: reverse; }
  html body .dtf-avis3-rangs:hover .dtf-avis3-piste { animation-play-state: paused; }
  html body .dtf-pay-logos li { opacity: 0; translate: 0 10px; }
  html body .is-vu .dtf-pay-logos li { animation: acc-entree .5s ease forwards; }
  html body .is-vu .dtf-pay-logos li:nth-child(2) { animation-delay: .06s; }
  html body .is-vu .dtf-pay-logos li:nth-child(3) { animation-delay: .12s; }
  html body .is-vu .dtf-pay-logos li:nth-child(4) { animation-delay: .18s; }
  html body .is-vu .dtf-pay-logos li:nth-child(5) { animation-delay: .24s; }
  html body .is-vu .dtf-pay-logos li:nth-child(6) { animation-delay: .3s; }
  html body .is-vu .dtf-pay-logos li:nth-child(7) { animation-delay: .36s; }
  html body .is-vu .dtf-pay-logos li:nth-child(8) { animation-delay: .42s; }
}
@media (prefers-reduced-motion: reduce) {
  html body .is-defile .dtf-avis3-rang { overflow-x: auto; }
}
@keyframes acc-entree { to { opacity: 1; translate: none; } }
@keyframes acc-fil { to { transform: scaleX(1); } }
@keyframes acc-curseur { 0% { translate: 70px 50px; opacity: 0; } 20% { opacity: 1; } 45%, 70% { translate: 0 0; opacity: 1; } 55% { scale: .85; } 60% { scale: 1; } 90%, 100% { translate: 0 0; opacity: 0; } }
@keyframes acc-tuile { 0%, 50% { box-shadow: 0 0 0 0 rgba(75, 140, 255, 0); } 58%, 85% { box-shadow: 0 0 0 3px rgba(75, 140, 255, .55); } 100% { box-shadow: 0 0 0 0 rgba(75, 140, 255, 0); } }
@keyframes acc-pop { 0%, 55% { opacity: 0; scale: .85; } 62%, 90% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: .95; } }
@keyframes acc-frappe { 0% { width: 0; } 45%, 90% { width: 19ch; } 100% { width: 0; } }
@keyframes acc-livre { 0%, 48% { opacity: 0; translate: 0 6px; } 55%, 88% { opacity: 1; translate: none; } 100% { opacity: 0; } }
@keyframes acc-coche { 0% { opacity: 0; scale: .3; } 8%, 80% { opacity: 1; scale: 1; } 100% { opacity: 0; } }
@keyframes acc-viseur { 0%, 100% { scale: 1; opacity: .8; } 50% { scale: 1.12; opacity: 1; } }
@keyframes acc-trace { to { stroke-dashoffset: 0; } }
@keyframes acc-etoile { to { opacity: 1; scale: 1; } }
@keyframes acc-pulse { 0% { opacity: .7; scale: 1; } 100% { opacity: 0; scale: 2.8; } }
@keyframes acc-bulle { 0% { opacity: 0; translate: 0 8px; } 8%, 88% { opacity: 1; translate: none; } 100% { opacity: 0; } }
@keyframes acc-points-vis { 0%, 15% { opacity: 0; } 20%, 40% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes acc-bulle2 { 0%, 42% { opacity: 0; translate: 0 8px; } 50%, 88% { opacity: 1; translate: none; } 100% { opacity: 0; } }
@keyframes acc-saut { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
@keyframes acc-barre { 0% { width: 0; } 55%, 85% { width: 100%; } 100% { width: 100%; opacity: .4; } }
@keyframes acc-eclair { 0%, 50% { scale: 1; } 58% { scale: 1.25; } 66%, 100% { scale: 1; } }
@keyframes acc-largeur { from { width: 0; } to { width: var(--w); } }
@keyframes acc-defile { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 7px)); } }

/* ---- Page /games (2026-10-22) ---- */
html body .dtf-jeux { padding: 40px 0 72px; }
html body .dtf-jeux-fil { display: flex; gap: 8px; margin-bottom: 28px; font-size: 13px; color: var(--s-gris); }
html body .dtf-jeux-fil a { color: var(--s-gris); text-decoration: none; }
html body .dtf-jeux-fil a:hover { color: #fff; }
html body .dtf-jeux-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; margin-bottom: 26px; }
html body .dtf-jeux-titre { margin: 0 0 8px; font-size: clamp(30px, 3.6vw, 42px) !important; font-weight: 700 !important; letter-spacing: -.025em; color: var(--s-texte); }
html body .dtf-jeux-outils { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
html body .dtf-jeux-cherche { display: flex; align-items: center; gap: 8px; width: 240px; height: 38px; padding: 0 12px; border: 1px solid var(--s-filet); border-radius: var(--s-r-ctl); background: var(--s-matiere), var(--s-case); color: var(--s-gris); }
html body .dtf-jeux-cherche input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--s-texte); font-size: 13.5px; }
html body .dtf-jeux-filtres { display: flex; gap: 4px; }
html body .dtf-jeux-filtres button { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border: 1px solid transparent; border-radius: var(--s-r-ctl); background: transparent; color: var(--s-gris); font: 500 13px inherit; font-family: inherit; cursor: pointer; }
html body .dtf-jeux-filtres button i { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; }
html body .dtf-jeux-filtres button:hover { color: #fff; }
html body .dtf-jeux-filtres button.is-on { border-color: var(--s-filet); background: rgba(255, 255, 255, .06); color: #fff; }
html body .dtf-jeux-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
html body .dtf-jeu-carte {
  position: relative; display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: var(--s-texte);
  border: 1px solid var(--s-filet); border-radius: 12px; background: var(--s-matiere), var(--s-case); box-shadow: var(--s-reflet);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
html body .dtf-jeu-carte[hidden] { display: none; }
html body .dtf-jeu-carte:hover { color: var(--s-texte); border-color: rgba(var(--s-bleu), .4); transform: translateY(-4px); box-shadow: var(--s-reflet), 0 16px 34px -18px rgba(var(--s-bleu), .55); }
html body .dtf-jeu-img { display: block; aspect-ratio: 16 / 7; overflow: hidden; background: #08080a; }
html body .dtf-jeu-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
html body .dtf-jeu-carte:hover .dtf-jeu-img img { transform: scale(1.06); }
html body .dtf-jeu-corps { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; }
html body .dtf-jeu-nom { font-size: 15.5px; font-weight: 600; }
html body .dtf-jeu-info { font-size: 12.5px; color: var(--s-gris); }
html body .dtf-jeu-info b { color: var(--s-texte); font-weight: 600; }
html body .dtf-jeu-jauge { display: flex; gap: 3px; height: 5px; margin-top: 2px; }
html body .dtf-jeu-jauge i { flex: 1; border-radius: 999px; background: #94a3b8; }
html body .dtf-jeu-jauge i.is-ok { background: #4ade80; }
html body .dtf-jeu-jauge i.is-work { background: #6ea5ff; }
html body .dtf-jeu-jauge i.is-test { background: #b4a7ff; }
html body .dtf-jeu-jauge i.is-risk { background: #fbbf24; }
html body .dtf-jeu-jauge i.is-down { background: #f87171; }
html body .dtf-jeu-etat { font-size: 12px; font-weight: 500; }
html body .dtf-jeu-etat.is-ok { color: #4ade80; }
html body .dtf-jeu-etat.is-off { color: var(--s-gris-2); }
html body .dtf-jeu-fleche { position: absolute; right: 14px; bottom: 16px; color: var(--s-gris-2); transition: color .25s ease, transform .25s ease; }
html body .dtf-jeu-carte:hover .dtf-jeu-fleche { color: var(--s-bleu-clair); transform: translateX(3px); }
html body .dtf-jeux-vide { margin: 24px 0; text-align: center; color: var(--s-gris); }
html body .dtf-jeux-bas { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 40px; padding: 26px 28px; border: 1px solid var(--s-filet); border-radius: 12px; background: var(--s-matiere), var(--s-case); box-shadow: var(--s-reflet); }
html body .dtf-jeux-bas h2 { margin: 0 0 6px; font-size: 19px !important; font-weight: 600; color: var(--s-texte); }
html body .dtf-jeux-bas p { margin: 0; font-size: 14px; color: var(--s-gris); }
@media (prefers-reduced-motion: no-preference) {
  html body .dtf-jeu-carte { opacity: 0; translate: 0 14px; animation: acc-entree .55s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(var(--i, 0) * .04s); }
}
@media (max-width: 1199.98px) { html body .dtf-jeux-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { html body .dtf-jeux-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } html body .dtf-jeux-cherche { width: 100%; } }
@media (max-width: 479.98px) { html body .dtf-jeux-grille { grid-template-columns: minmax(0, 1fr); } }

/* ---- Page /about (2026-10-22) ---- */
html body .dtf-about { padding: 40px 0 80px; }
html body .dtf-about-tete { max-width: 820px; margin-bottom: 40px; }
html body .dtf-about-tete h1 { margin: 0 0 14px; font-size: clamp(30px, 3.6vw, 42px) !important; font-weight: 700 !important; letter-spacing: -.025em; line-height: 1.15; color: var(--s-texte); }
html body .dtf-about-chapo { margin: 0; font-size: 16px; line-height: 1.7; color: var(--s-texte-2); }
html body .dtf-about-mise { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; align-items: start; }
html body .dtf-about-sommaire { position: sticky; top: 100px; padding: 18px; border: 1px solid var(--s-filet); border-radius: 12px; background: var(--s-matiere), var(--s-case); }
html body .dtf-about-sommaire p { margin: 0 0 10px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--s-gris); }
html body .dtf-about-sommaire ol { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; }
html body .dtf-about-sommaire a { color: var(--s-texte-2); text-decoration: none; }
html body .dtf-about-sommaire a:hover { color: var(--s-bleu-clair); }
html body .dtf-about-texte { max-width: 760px; }
html body .dtf-about-texte section { padding-bottom: 34px; margin-bottom: 34px; border-bottom: 1px solid var(--s-filet); scroll-margin-top: 100px; }
html body .dtf-about-texte section:last-child { border-bottom: 0; }
html body .dtf-about-texte h2 { margin: 0 0 14px; font-size: 24px !important; font-weight: 700 !important; letter-spacing: -.015em; color: var(--s-texte); }
html body .dtf-about-texte h3 { margin: 22px 0 8px; font-size: 17px !important; font-weight: 600 !important; color: var(--s-texte); }
html body .dtf-about-texte p, html body .dtf-about-texte li { font-size: 15px; line-height: 1.75; color: var(--s-texte-2); }
html body .dtf-about-texte p { margin: 0 0 12px; }
html body .dtf-about-texte ul { margin: 0 0 12px; padding-left: 20px; }
html body .dtf-about-texte strong { color: var(--s-texte); }
html body .dtf-about-texte a { color: var(--s-bleu-clair); }
html body .dtf-about-table { margin: 16px 0; overflow-x: auto; border: 1px solid var(--s-filet); border-radius: 12px; }
html body .dtf-about-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
html body .dtf-about-table th, html body .dtf-about-table td { padding: 11px 14px; border-bottom: 1px solid var(--s-filet); text-align: left; vertical-align: top; color: var(--s-texte-2); }
html body .dtf-about-table thead th { background: rgba(var(--s-bleu), .08); color: var(--s-texte); font-weight: 600; }
html body .dtf-about-table tbody th { width: 26%; color: var(--s-texte); font-weight: 600; }
html body .dtf-about-table tr:last-child th, html body .dtf-about-table tr:last-child td { border-bottom: 0; }
html body .dtf-about-jeux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; padding: 0 !important; list-style: none; }
html body .dtf-about-jeux li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); font-size: 14px !important; }
html body .dtf-about-jeux span { color: var(--s-gris); font-size: 13px; }
html body .dtf-about-glossaire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; margin: 0; }
html body .dtf-about-glossaire dt { font-size: 14px; font-weight: 600; color: var(--s-texte); }
html body .dtf-about-glossaire dd { margin: 2px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--s-gris); }
@media (max-width: 991.98px) {
  html body .dtf-about-mise { grid-template-columns: minmax(0, 1fr); }
  html body .dtf-about-sommaire { position: static; }
}
@media (max-width: 575.98px) {
  html body .dtf-about-jeux, html body .dtf-about-glossaire { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Ecran de chargement (2026-10-22, capture du user) : noir, lueur granuleuse a gauche qui derive
   lentement, « DTF Market » au centre (Market en gras italique), filet de progression blanc. ---- */
html.dtf-ld::after { background: #000 !important; }
html body .dtf-ld-o { overflow: hidden; background: #000 !important; }
html body .dtf-ld-lueur {
  position: absolute; top: -10%; bottom: -10%; left: -6%; width: 46%; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .5 0 0 0 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(48% 62% at 46% 50%, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03) 55%, transparent 75%);
  -webkit-mask-image: radial-gradient(50% 65% at 45% 50%, #000 30%, transparent 78%);
          mask-image: radial-gradient(50% 65% at 45% 50%, #000 30%, transparent 78%);
}
html body .dtf-ld-c { position: relative; width: auto; padding: 0; border: 0; border-radius: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 22px; }
html body .dtf-ld-logo { font: 400 22px/1 Inter, system-ui, sans-serif; letter-spacing: -.01em; color: #f2f2f5; }
html body .dtf-ld-logo b { font-weight: 800; font-style: italic; }
html body .dtf-ld-bar { width: 140px; height: 2px; border: 0; border-radius: 2px; background: rgba(255, 255, 255, .12); }
html body .dtf-ld-bar::after { content: none; }
html body .dtf-ld-bar i { background: #fff; border-radius: inherit; }
@media (prefers-reduced-motion: no-preference) {
  html body .dtf-ld-lueur { animation: ld-derive 6s ease-in-out infinite alternate; }
  html body .dtf-ld-logo { animation: ld-entree .6s ease both; }
  html body .dtf-ld-bar { animation: ld-entree .6s .12s ease both; }
}
@keyframes ld-derive { from { translate: 0 0; opacity: .85; } to { translate: 4% 0; opacity: 1; } }
@keyframes ld-entree { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: none; } }

/* ---- Scenes v2 (2026-10-22) : recherche de l etape 1, circuit de livraison de « Instant delivery » ---- */
html body .dtf-how-vue-1 { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; }
html body .dtf-how-recherche { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border: 1px solid rgba(var(--s-bleu), .35); border-radius: 8px; background: #050506; color: var(--s-gris); }
html body .dtf-how-recherche .r-texte { display: inline-block; overflow: hidden; white-space: nowrap; font-size: 12.5px; color: #e9ecf3; }
html body .dtf-how-recherche .r-caret { width: 1.5px; height: 14px; background: var(--s-bleu-clair); }
html body .dtf-how-resultats { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
html body .dtf-how-resultats li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; height: 30px; padding: 0 8px 0 4px; border: 1px solid var(--s-filet); border-radius: 7px; background: rgba(255, 255, 255, .03); font-size: 11.5px; }
html body .dtf-how-resultats .r-img { width: 26px; height: 20px; border-radius: 4px; background: center / cover no-repeat #111; }
html body .dtf-how-resultats .r-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--s-texte); }
html body .dtf-how-resultats .r-statut { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; white-space: nowrap; }
html body .dtf-how-resultats .r-statut i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
html body .dtf-how-resultats .r-statut.is-ok { color: #4ade80; }
html body .dtf-how-resultats .r-statut.is-autre { color: #94a3b8; }
html body .dtf-how-resultats .r-prix { font-weight: 600; color: var(--s-bleu-clair); font-variant-numeric: tabular-nums; }
html body .dtf-how-resultats li.is-choisi { border-color: rgba(var(--s-bleu), .55); background: rgba(var(--s-bleu), .1); }
html body .dtf-how-vue-1 .dtf-how-curseur { left: 58%; top: 66px; }

html body .dtf-why2-flux { gap: 16px; padding: 22px 26px 16px; }
html body .dtf-why2-flux .f-circuit { position: relative; display: flex; justify-content: space-between; width: 100%; }
html body .dtf-why2-flux .f-ligne2 { position: absolute; left: 19px; right: 19px; top: 18px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; }
html body .dtf-why2-flux .f-impulsion { position: absolute; top: -1px; left: 0; width: 46px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, transparent, #6ea5ff, #fff); filter: drop-shadow(0 0 6px rgba(110, 165, 255, .9)); opacity: 0; }
html body .dtf-why2-flux .f-noeud { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
html body .dtf-why2-flux .f-noeud svg { box-sizing: content-box; padding: 10px; border: 1px solid var(--s-filet); border-radius: 50%; background: #0c0c0e; color: var(--s-gris); transition: color .3s, border-color .3s, background-color .3s; }
html body .dtf-why2-flux .f-noeud small { font-size: 11px; font-weight: 600; color: var(--s-gris); }
html body .dtf-why2-flux .f-notif {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px;
  border: 1px solid rgba(var(--s-bleu), .3); border-radius: 10px; background: rgba(12, 14, 20, .9);
  box-shadow: 0 10px 24px -12px rgba(var(--s-bleu), .6);
}
html body .dtf-why2-flux .f-notif-ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: rgba(251, 191, 36, .14); color: #fbbf24; }
html body .dtf-why2-flux .f-notif-txt { display: flex; flex-direction: column; line-height: 1.3; }
html body .dtf-why2-flux .f-notif-txt b { font-size: 12px; font-weight: 600; color: var(--s-texte); }
html body .dtf-why2-flux .f-notif-txt small { font: 11px ui-monospace, Consolas, monospace; color: var(--s-gris); }

@media (prefers-reduced-motion: no-preference) {
  html body .dtf-how-recherche .r-texte { width: 0; }
  html body .is-vu .dtf-how-recherche .r-texte { animation: sc-frappe 5s steps(6) infinite; }
  html body .is-vu .dtf-how-recherche .r-caret { animation: sc-caret .8s steps(1) infinite; }
  html body .dtf-how-resultats li { opacity: 0; translate: 0 6px; }
  html body .is-vu .dtf-how-resultats li { animation: sc-ligne 5s ease infinite; }
  html body .is-vu .dtf-how-resultats li:nth-child(2) { animation-delay: .12s; }
  html body .is-vu .dtf-how-resultats li:nth-child(3) { animation-delay: .24s; }
  html body .is-vu .dtf-how-resultats li.is-choisi { animation-name: sc-ligne, sc-choix; animation-duration: 5s, 5s; animation-iteration-count: infinite, infinite; }
  html body .is-vu .dtf-how-vue-1 .dtf-how-curseur { animation: sc-curseur 5s ease-in-out infinite; }

  html body .is-vu .dtf-why2-flux .f-impulsion { animation: sc-impulsion 4s ease-in-out infinite; }
  html body .is-vu .dtf-why2-flux .n1 svg { animation: sc-noeud 4s infinite; }
  html body .is-vu .dtf-why2-flux .n2 svg { animation: sc-noeud2 4s infinite; }
  html body .is-vu .dtf-why2-flux .n3 svg { animation: sc-noeud3 4s infinite; }
  html body .dtf-why2-flux .f-notif { opacity: 0; translate: 0 10px; }
  html body .is-vu .dtf-why2-flux .f-notif { animation: sc-notif 4s ease infinite; }
}
@keyframes sc-frappe { 0% { width: 0; } 22%, 92% { width: calc(var(--n, 4) * 1ch); } 100% { width: 0; } }
@keyframes sc-caret { 50% { opacity: 0; } }
@keyframes sc-ligne { 0%, 26% { opacity: 0; translate: 0 6px; } 34%, 92% { opacity: 1; translate: none; } 100% { opacity: 0; } }
@keyframes sc-choix { 0%, 62% { border-color: var(--s-filet); background: rgba(255, 255, 255, .03); } 66%, 92% { border-color: rgba(75, 140, 255, .6); background: rgba(75, 140, 255, .12); } 100% { border-color: var(--s-filet); background: rgba(255, 255, 255, .03); } }
@keyframes sc-curseur { 0%, 38% { opacity: 0; translate: 60px 40px; } 44% { opacity: 1; } 58% { translate: 0 0; scale: 1; } 62% { scale: .82; } 66% { scale: 1; } 86% { opacity: 1; translate: 0 0; } 94%, 100% { opacity: 0; translate: 0 0; } }
@keyframes sc-impulsion { 0% { left: -46px; opacity: 0; } 8% { opacity: 1; } 62% { left: 100%; opacity: 1; } 66%, 100% { left: 100%; opacity: 0; } }
@keyframes sc-noeud { 0%, 4% { color: var(--s-gris); border-color: rgba(255, 255, 255, .1); background-color: #0c0c0e; } 8%, 90% { color: #fff; border-color: #4b8cff; background-color: rgba(75, 140, 255, .18); } 100% { color: var(--s-gris); } }
@keyframes sc-noeud2 { 0%, 32% { color: var(--s-gris); border-color: rgba(255, 255, 255, .1); background-color: #0c0c0e; } 36%, 90% { color: #fff; border-color: #4b8cff; background-color: rgba(75, 140, 255, .18); } 100% { color: var(--s-gris); } }
@keyframes sc-noeud3 { 0%, 58% { color: var(--s-gris); border-color: rgba(255, 255, 255, .1); background-color: #0c0c0e; } 62%, 90% { color: #4ade80; border-color: #4ade80; background-color: rgba(74, 222, 128, .15); } 100% { color: var(--s-gris); } }
@keyframes sc-notif { 0%, 64% { opacity: 0; translate: 0 10px; } 72%, 92% { opacity: 1; translate: none; } 100% { opacity: 0; translate: 0 -4px; } }

/* ---- Pages de jeu /<jeu>-cheats (2026-10-22) ---- */
html body .dtf-jp { padding: 40px 0 80px; }
html body .dtf-jp-tete { position: relative; overflow: hidden; display: flex; align-items: flex-end; min-height: 240px; margin-bottom: 22px; padding: 30px; border: 1px solid var(--s-filet); border-radius: 14px; background: #08080a; box-shadow: var(--s-reflet); }
html body .dtf-jp-banniere { position: absolute; inset: 0; background: center / cover no-repeat; opacity: .45; filter: saturate(.85); }
html body .dtf-jp-banniere::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 8, 10, .96) 0%, rgba(8, 8, 10, .75) 45%, rgba(8, 8, 10, .2) 100%), linear-gradient(0deg, rgba(8, 8, 10, .9), transparent 60%); }
html body .dtf-jp-tete-txt { position: relative; max-width: 620px; }
html body .dtf-jp-produits { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-bottom: 48px; }
html body .dtf-jp-produit { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: var(--s-texte); border: 1px solid var(--s-filet); border-radius: 12px; background: var(--s-matiere), var(--s-case); box-shadow: var(--s-reflet); transition: border-color .25s ease, transform .25s ease; }
html body .dtf-jp-produit:hover { color: var(--s-texte); border-color: rgba(var(--s-bleu), .4); transform: translateY(-3px); }
html body .dtf-jp-produit-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #08080a; }
html body .dtf-jp-produit-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
html body .dtf-jp-produit:hover .dtf-jp-produit-img img { transform: scale(1.05); }
html body .dtf-jp-produit-corps { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
html body .dtf-jp-produit-haut, html body .dtf-jp-produit-bas { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
html body .dtf-jp-produit-haut b { font-size: 15px; font-weight: 600; }
html body .dtf-jp-produit-bas { font-size: 12.5px; color: var(--s-gris); }
html body .dtf-jp-produit-bas b { color: var(--s-bleu-clair); }
html body .dtf-jp-produit-bas .is-ok { color: #4ade80; }
html body .dtf-jp-produit-bas .is-off { color: var(--s-gris-2); }
html body .dtf-jp-statut { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid; border-radius: 6px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
html body .dtf-jp-statut i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
html body .dtf-jp-statut.is-ok { color: #4ade80; border-color: rgba(74, 222, 128, .4); background: rgba(74, 222, 128, .08); }
html body .dtf-jp-statut.is-work { color: #6ea5ff; border-color: rgba(110, 165, 255, .4); background: rgba(110, 165, 255, .08); }
html body .dtf-jp-statut.is-test { color: #b4a7ff; border-color: rgba(180, 167, 255, .4); background: rgba(180, 167, 255, .08); }
html body .dtf-jp-statut.is-risk { color: #fbbf24; border-color: rgba(251, 191, 36, .4); background: rgba(251, 191, 36, .08); }
html body .dtf-jp-statut.is-down { color: #f87171; border-color: rgba(248, 113, 113, .4); background: rgba(248, 113, 113, .08); }
html body .dtf-jp-statut.is-frozen { color: #94a3b8; border-color: rgba(148, 163, 184, .4); background: rgba(148, 163, 184, .08); }
html body .dtf-jp-bloc { margin-bottom: 48px; }
html body .dtf-jp-bloc > h2 { margin: 0 0 8px; font-size: 24px !important; font-weight: 700 !important; letter-spacing: -.015em; color: var(--s-texte); }
html body .dtf-jp-bloc > .dtf-sec-sous { margin-bottom: 18px; max-width: 760px; }
html body .dtf-jp-table { overflow-x: auto; border: 1px solid var(--s-filet); border-radius: 12px; background: var(--s-matiere), var(--s-case); }
html body .dtf-jp-table table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
html body .dtf-jp-table th, html body .dtf-jp-table td { padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, .05); text-align: left; white-space: nowrap; color: var(--s-texte-2); }
html body .dtf-jp-table thead th { position: sticky; top: 0; background: #101114; color: var(--s-texte); font-weight: 600; }
html body .dtf-jp-table tbody th { color: var(--s-gris); font-weight: 500; }
html body .dtf-jp-table tr[hidden] { display: none; }
html body .dtf-jp-groupe th { padding-top: 16px; font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .12em; text-transform: uppercase; color: var(--s-bleu-clair) !important; }
html body .dtf-jp-oui { color: #4ade80; font-weight: 700; }
html body .dtf-jp-non { color: var(--s-gris-2); }
html body .dtf-jp-textes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
html body .dtf-jp-texte { padding: 22px 24px; border: 1px solid var(--s-filet); border-radius: 12px; background: var(--s-matiere), var(--s-case); box-shadow: var(--s-reflet); }
html body .dtf-jp-texte h3 { margin: 0 0 12px; font-size: 18px !important; font-weight: 600 !important; color: var(--s-texte); }
html body .dtf-jp-texte p { margin: 0 0 12px; font-size: 14px; line-height: 1.7; color: var(--s-gris); }
html body .dtf-jp-liens { display: flex; flex-wrap: wrap; gap: 18px; margin: 4px 0 0 !important; }
html body .dtf-jp-liens a { font-size: 13.5px; font-weight: 500; color: var(--s-texte-2); text-decoration: none; }
html body .dtf-jp-liens a:first-child { color: var(--s-bleu-clair); }
html body .dtf-jp-liens a:hover { text-decoration: underline; }
html body .dtf-jp-autres { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
html body .dtf-jp-autres a { display: inline-block; padding: 8px 13px; border: 1px solid var(--s-filet); border-radius: 8px; background: rgba(255, 255, 255, .03); font-size: 13px; color: var(--s-texte-2); text-decoration: none; transition: border-color .2s, color .2s; }
html body .dtf-jp-autres a:hover { border-color: rgba(var(--s-bleu), .4); color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  html body .dtf-jp-produit { opacity: 0; translate: 0 12px; animation: acc-entree .55s cubic-bezier(.2, .7, .2, 1) forwards; }
  html body .dtf-jp-produit:nth-child(2) { animation-delay: .06s; }
  html body .dtf-jp-produit:nth-child(3) { animation-delay: .12s; }
  html body .dtf-jp-produit:nth-child(n+4) { animation-delay: .18s; }
}
@media (max-width: 767.98px) { html body .dtf-jp-textes { grid-template-columns: minmax(0, 1fr); } html body .dtf-jp-tete { min-height: 200px; padding: 22px; } }

/* ---- Fond : anneaux remis, nouvelles positions (2026-10-22, « remet des traits comme avant, change juste la position »).
   Memes arcs (epaisseur, flou, grain) ; ils partent maintenant en haut a DROITE puis alternent
   gauche / droite / gauche en descendant (avant : gauche / droite / gauche / droite). */
html body .dtf-fond i:nth-child(1) { --x: calc(100% - 810px); --y: -1010px; --m: linear-gradient(-35deg, transparent 30%, #000 52%, #000 72%, transparent 88%); }
html body .dtf-fond i:nth-child(2) { --x: -2560px; --y: 380px; --m: linear-gradient(270deg, #000 0%, #000 22%, transparent 40%); }
html body .dtf-fond i:nth-child(3) { --x: calc(100% - 640px); --y: calc(40% - 1600px); --m: linear-gradient(90deg, #000 0%, #000 22%, transparent 40%); }
html body .dtf-fond i:nth-child(4) { --x: -2640px; --y: calc(78% - 1600px); --m: linear-gradient(270deg, #000 0%, #000 22%, transparent 40%); }

/* ---- Guides : mode pas a pas + verrou client (2026-10-22) ---- */
html body .gs-mode { display: inline-flex; gap: 2px; margin-top: 18px; padding: 3px; border: 1px solid var(--s-filet); border-radius: 9px; background: rgba(255, 255, 255, .02); }
html body .gs-mode button { padding: 6px 12px; border: 0; border-radius: 6px; background: none; color: var(--s-gris); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
html body .gs-mode button:hover { color: #fff; }
html body .gs-mode button.is-on { background: #4b8cff; color: #fff; }
html body .gs-mode button:focus-visible, html body .gs-pas button:focus-visible { outline: 2px solid #6ea5ff; outline-offset: 2px; }
html body .gs-pas { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 0 40px; padding-top: 18px; border-top: 1px solid var(--s-filet); }
html body .gs-pas[hidden] { display: none; }
html body .gs-pas span { color: var(--s-gris); font-size: 13px; font-variant-numeric: tabular-nums; }
html body .gs-pas button { padding: 8px 16px; border: 1px solid #4b8cff; border-radius: 7px; background: #4b8cff; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; transition: filter .15s ease, opacity .15s ease; }
html body .gs-pas .gs-pas-av { background: rgba(75, 140, 255, .14); border-color: rgba(75, 140, 255, .3); color: #a9c7ff; }
html body .gs-pas button:hover:not(:disabled) { filter: brightness(1.1); }
html body .gs-pas button:disabled { opacity: .4; cursor: default; }
html body .gs-etapes > li[hidden] { display: none !important; }
html body .gp-verrou { max-width: 520px; margin: 40px auto 60px; padding: 36px 30px; text-align: center; border: 1px solid var(--s-filet); border-radius: 12px; background: var(--s-matiere), var(--s-case); box-shadow: var(--s-reflet); }
html body .gp-verrou-ico { display: inline-grid; place-items: center; width: 46px; height: 46px; margin-bottom: 14px; border-radius: 12px; background: rgba(var(--s-bleu), .12); box-shadow: inset 0 0 0 1px rgba(var(--s-bleu), .22); color: var(--s-bleu-clair); }
html body .gp-verrou-titre { margin: 0 0 8px; font-size: 24px; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
html body .gp-verrou p { margin: 0 auto; max-width: 40ch; color: var(--s-gris); font-size: 14px; }
html body .gp-verrou-liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
html body .gp-verrou-sec { border: 1px solid var(--s-filet) !important; color: var(--s-texte-2) !important; background: transparent !important; }
@media (prefers-reduced-motion: reduce) { html body .gs-mode button, html body .gs-pas button { transition: none; } }

/* ---- Barre facon solarservices.cc, v2 (2026-10-23, « fait une navbar a la solarservices ») ----
   Remplace le cadre autour des liens (v1) : liens nus comme chez Solar, l actif en blanc gras
   (son pictogramme reste bleu), contenu borne a 1280 px ; en defilant, voile noir flou et grande
   ombre (0 4px 60px) au lieu d un fond plein ; menus en verre (filet 10 %, coins 16 px, flou). */
@media (min-width: 992px) {
  html body .navbar > .container { max-width: 1280px; padding: 16px 32px !important; }
  html body .navbar .dtf-nav { height: auto; padding: 0; margin-left: 2rem; gap: 1px !important; border: 0; border-radius: 0; }
  html body .navbar .dtf-nav .nav-link,
  html body .navbar .dtf-nav .nav-item .nav-link { padding: 12px 13px !important; border-radius: 0 !important; }
  html body .navbar .dtf-nav .nav-item .nav-link.active { background: transparent !important; }
}
html body .navbar.is-scrolled {
  background: rgba(0, 0, 0, .55) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: transparent !important;
  box-shadow: 0 4px 60px rgba(0, 0, 0, .9);
}
html body .navbar { transition: background-color .3s ease, box-shadow .3s ease; }
html body .navbar .dropdown-menu.dtf-drop-menu,
html body .navbar .dropdown-menu.dtf-acc-menu,
html body .navbar .dropdown-menu.dtf-cart-menu {
  margin-top: 10px !important;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 16px !important;
  background: rgba(10, 10, 12, .78) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}
html body .navbar .dropdown-menu.dtf-cart-menu { padding: 0; }
html body .navbar .dtf-drop-menu { min-width: 200px; }
html body .navbar .dtf-drop-menu a {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 15px !important;
  border-radius: 11px !important;
  font-size: 13.5px; font-weight: 500;
  color: rgba(255, 255, 255, .6) !important;
}
html body .navbar .dtf-drop-menu a:hover { background: rgba(255, 255, 255, .05) !important; color: #fff !important; }
html body .navbar .dtf-drop-menu a.active { color: #fff !important; font-weight: 600; }
html body .navbar .dtf-drop-menu a.active svg { color: var(--s-bleu-clair) !important; }
@media (prefers-reduced-motion: reduce) { html body .navbar { transition: none; } }

/* ---- Pied de page : Popular Games remis (2026-10-23) ---- */
html body .dtf-foot-jeux { margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .06); }
html body .dtf-foot-jeux-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
html body .dtf-foot-jeux-tete .dtf-foot-h { margin: 0; }
html body .dtf-foot-jeux-tete a { color: var(--s-texte-2); font-size: 13px; text-decoration: none; }
html body .dtf-foot-jeux-tete a:hover { color: #fff; }
html body .dtf-foot-jeux-liste { display: flex; flex-wrap: wrap; gap: 8px; }
html body .dtf-foot-jeux-liste a {
  padding: 6px 12px;
  border: 1px solid var(--s-filet);
  border-radius: var(--s-r);
  background: rgba(255, 255, 255, .03);
  color: rgba(255, 255, 255, .82);
  font-size: 13px;
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease;
}
html body .dtf-foot-jeux-liste a:hover { color: #fff; border-color: rgba(255, 255, 255, .22); }
html body .dtf-foot-jeux + .dtf-foot-copy { margin-top: 28px; }
@media (prefers-reduced-motion: reduce) { html body .dtf-foot-jeux-liste a { transition: none; } }

/* ---- Guides : video de lancement dans une etape (2026-10-23, FirstHunt) ---- */
html body .gs-video { display: flex; flex-direction: column; gap: 8px; }
html body .gs-video video { width: 100%; max-width: 720px; aspect-ratio: 16 / 9; border: 1px solid var(--s-filet); border-radius: 10px; background: #000; }
html body .gs-video span { color: var(--s-gris); font-size: 12.5px; }

/* ---- Why choose v3 (2026-10-23, « trop IA et monotone, fais comme une vraie experience ») ----
   Trois vraies interfaces au lieu de schemas : un ticket Discord, une boite mail, la page Status.
   Fonds plats, pas de lueur ; les messages et le mail arrivent une fois quand la case entre a l ecran. */
html body .dtf-why2-vue.w-dc,
html body .dtf-why2-vue.w-mail,
html body .dtf-why2-vue.w-st { height: auto; min-height: 212px; padding: 0; background: #0b0b0d; display: flex; flex-direction: column; }
/* ticket Discord */
html body .w-dc { font-family: "gg sans", "Noto Sans", "Inter", system-ui, sans-serif; }
html body .w-dc .dc-tete { display: flex; align-items: center; gap: 6px; padding: 9px 14px; border-bottom: 1px solid rgba(255, 255, 255, .06); font-size: 12.5px; font-weight: 600; color: #dbdee1; }
html body .w-dc .dc-diese { color: #80848e; font-size: 15px; font-weight: 500; }
html body .w-dc .dc-tete small { margin-left: auto; font-size: 10.5px; font-weight: 500; color: #80848e; }
html body .w-dc .dc-msg { display: flex; gap: 9px; padding: 6px 14px 2px; }
html body .w-dc .dc-msg:last-child { padding-bottom: 10px; }
html body .w-dc .dc-av { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--a, #5865f2); color: #fff; font-size: 11px; font-weight: 700; }
html body .w-dc .dc-av-staff { background: #fff; color: #0b0b0d; }
html body .w-dc .dc-msg p { margin: 0; font-size: 12px; line-height: 1.35; color: #dbdee1; }
html body .w-dc .dc-msg p.dc-nom { display: flex; align-items: center; gap: 6px; margin-bottom: 1px; font-size: 12px; font-weight: 600; color: #f2f3f5; }
html body .w-dc .dc-nom em { padding: 0 4px; border-radius: 3px; background: #4b8cff; color: #fff; font-size: 8.5px; font-style: normal; font-weight: 700; letter-spacing: .02em; line-height: 14px; }
html body .w-dc .dc-nom time { font-size: 10px; font-weight: 400; color: #80848e; }
html body .w-dc .dc-reac { display: inline-block; margin-left: 4px; padding: 0 6px; border: 1px solid rgba(75, 140, 255, .5); border-radius: 6px; background: rgba(75, 140, 255, .14); color: #c9dbff; font-size: 10.5px; line-height: 16px; }
/* boite mail */
html body .w-mail .ml-barre { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 14px 6px; font-size: 13px; font-weight: 600; color: var(--s-texte); }
html body .w-mail .ml-barre small { font-size: 10.5px; font-weight: 500; color: #4b8cff; }
html body .w-mail .ml-ligne { display: flex; gap: 10px; padding: 8px 14px; border-top: 1px solid rgba(255, 255, 255, .05); }
html body .w-mail .ml-neuf { order: -1; background: rgba(75, 140, 255, .07); box-shadow: inset 2px 0 0 #4b8cff; }
html body .w-mail .ml-barre { order: -2; }
html body .w-mail .ml-av { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: #0b0b0d; font-size: 12px; font-weight: 700; }
html body .w-mail .ml-av-gris { background: #2a2a30; color: #9a9aa3; }
html body .w-mail .ml-txt { min-width: 0; flex: 1; }
html body .w-mail .ml-txt p { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11.5px; line-height: 1.4; color: var(--s-gris); }
html body .w-mail .ml-txt p:first-child { display: flex; justify-content: space-between; gap: 8px; }
html body .w-mail .ml-txt b { font-size: 12px; font-weight: 600; color: var(--s-texte); }
html body .w-mail .ml-txt time { font-size: 10.5px; color: var(--s-gris); }
html body .w-mail .ml-neuf .ml-sujet { color: var(--s-texte); font-weight: 600; }
html body .w-mail .ml-vieux { opacity: .55; }
html body .w-mail .ml-cle { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 14px 12px; padding: 7px 8px 7px 11px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 7px; background: #111114; }
html body .w-mail .ml-cle code { font: 11.5px ui-monospace, Consolas, monospace; letter-spacing: .04em; color: var(--s-texte); }
html body .w-mail .ml-cle code span { filter: blur(3.5px); }
html body .w-mail .ml-copier { padding: 3px 9px; border-radius: 5px; background: #fff; color: #0b0b0d; font-size: 10.5px; font-weight: 600; }
/* extrait de la page Status */
html body .w-st { padding-bottom: 10px; }
html body .w-st .st-tete { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 14px 8px; font-size: 13px; font-weight: 600; color: var(--s-texte); }
html body .w-st .st-tete small { font-size: 10.5px; font-weight: 500; color: var(--s-gris); }
html body .w-st .st-ligne { display: flex; align-items: center; gap: 10px; margin: 0 10px 6px; padding: 6px 8px; border: 1px solid rgba(255, 255, 255, .06); border-radius: 8px; background: #111114; }
html body .w-st .st-ligne img, html body .w-st .st-img { flex: none; width: 30px; height: 30px; border-radius: 6px; object-fit: cover; background: #1a1a1f; }
html body .w-st .st-nom { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
html body .w-st .st-nom b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; font-weight: 600; color: var(--s-texte); }
html body .w-st .st-nom small { font-size: 10.5px; color: var(--s-gris); }
html body .w-st .st-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); border-radius: 6px; background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c); font-size: 10.5px; font-weight: 600; white-space: nowrap; }
html body .w-st .st-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
/* apparition unique */
@media (prefers-reduced-motion: no-preference) {
  html body .w-dc .dc-msg, html body .w-mail .ml-neuf, html body .w-mail .ml-cle { opacity: 0; translate: 0 6px; }
  html body .is-vu .w-dc .dc-msg, html body .is-vu .w-mail .ml-neuf, html body .is-vu .w-mail .ml-cle { animation: why3-arrivee .45s ease-out forwards; }
  html body .is-vu .w-dc .m1 { animation-delay: .4s; }
  html body .is-vu .w-dc .m2 { animation-delay: 1.6s; }
  html body .is-vu .w-dc .m3 { animation-delay: 2.8s; }
  html body .is-vu .w-mail .ml-neuf { animation-delay: .8s; }
  html body .is-vu .w-mail .ml-cle { animation-delay: 1.6s; }
}
@keyframes why3-arrivee { to { opacity: 1; translate: 0 0; } }

/* ---- Why choose v3.1 (2026-10-23) : ticket en bulles (Customer a gauche, DTF Market a droite) et
   livraison expliquee (paiement confirme -> API de livraison -> cle en quelques secondes) ---- */
html body .w-dc .dc-msg { flex-direction: column; gap: 3px; max-width: 84%; padding: 6px 14px 0; }
html body .w-dc .dc-msg:last-child { padding-bottom: 12px; }
html body .w-dc .dc-client { align-self: flex-start; align-items: flex-start; }
html body .w-dc .dc-equipe { align-self: flex-end; align-items: flex-end; }
html body .w-dc .dc-msg p.dc-nom { margin: 0 2px; font-size: 10.5px; font-weight: 600; color: #b5bac1; }
html body .w-dc .dc-equipe p.dc-nom { color: #f2f3f5; }
html body .w-dc .dc-msg p.dc-bulle { padding: 7px 11px; border-radius: 12px; font-size: 12px; line-height: 1.4; }
html body .w-dc .dc-client .dc-bulle { background: #1d1e23; color: #dbdee1; border-top-left-radius: 4px; }
html body .w-dc .dc-equipe .dc-bulle { background: #4b8cff; color: #fff; border-top-right-radius: 4px; }
/* livraison */
html body .dtf-why2-vue.w-livr { height: auto; min-height: 212px; padding: 0; background: #0b0b0d; display: flex; flex-direction: column; }
html body .w-livr .lv-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 14px 4px; font-size: 13px; font-weight: 600; color: var(--s-texte); }
html body .w-livr .lv-tete small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 10.5px; font-weight: 500; color: var(--s-gris); }
html body .w-livr .lv-etapes { position: relative; margin: 4px 14px 0; padding: 0; list-style: none; }
html body .w-livr .lv-etapes::before { content: ""; position: absolute; left: 8px; top: 12px; bottom: 12px; width: 1px; background: rgba(255, 255, 255, .1); }
html body .w-livr .lv-etapes li { position: relative; display: flex; align-items: center; gap: 10px; padding: 5px 0; }
html body .w-livr .lv-etapes i { flex: none; position: relative; z-index: 1; display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; background: #0b0b0d; }
html body .w-livr .lv-etapes i::after { content: ""; width: 7px; height: 4px; margin-top: -2px; border-left: 1.6px solid #fff; border-bottom: 1.6px solid #fff; transform: rotate(-45deg); }
html body .w-livr .lv-etapes span { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
html body .w-livr .lv-etapes b { font-size: 12px; font-weight: 600; color: var(--s-texte); }
html body .w-livr .lv-etapes small { font-size: 10.5px; color: var(--s-gris); }
html body .w-livr .lv-etapes time { font: 10.5px ui-monospace, Consolas, monospace; color: var(--s-gris); }
html body .w-livr .lv-etapes li i { border-color: #22c55e; background: #22c55e; }
html body .w-livr .ml-cle { margin-top: 8px; }
@media (prefers-reduced-motion: no-preference) {
  html body .w-livr .lv-etapes li { opacity: .35; }
  html body .w-livr .lv-etapes li i { border-color: rgba(255, 255, 255, .18); background: #0b0b0d; }
  html body .w-livr .lv-etapes li i::after { opacity: 0; }
  html body .is-vu .w-livr .lv-etapes li { animation: why3-etape .35s ease-out forwards; }
  html body .is-vu .w-livr .lv-etapes li i { animation: why3-coche .35s ease-out forwards; }
  html body .is-vu .w-livr .lv-etapes li i::after { animation: why3-coche-v .35s ease-out forwards; }
  html body .is-vu .w-livr .e1, html body .is-vu .w-livr .e1 i, html body .is-vu .w-livr .e1 i::after { animation-delay: .5s; }
  html body .is-vu .w-livr .e2, html body .is-vu .w-livr .e2 i, html body .is-vu .w-livr .e2 i::after { animation-delay: 1.2s; }
  html body .is-vu .w-livr .e3, html body .is-vu .w-livr .e3 i, html body .is-vu .w-livr .e3 i::after { animation-delay: 2.2s; }
  html body .w-livr .ml-cle { opacity: 0; translate: 0 6px; }
  html body .is-vu .w-livr .ml-cle { animation: why3-arrivee .45s 2.7s ease-out forwards; }
}
@keyframes why3-etape { to { opacity: 1; } }
@keyframes why3-coche { to { border-color: #22c55e; background: #22c55e; } }
@keyframes why3-coche-v { to { opacity: 1; } }
/* case de la cle, reprise de l ancienne boite mail pour la vignette de livraison */
html body .w-livr .ml-cle { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 14px 12px; padding: 7px 8px 7px 11px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 7px; background: #111114; }
html body .w-livr .ml-cle code { font: 11.5px ui-monospace, Consolas, monospace; letter-spacing: .04em; color: var(--s-texte); }
html body .w-livr .ml-cle code span { filter: blur(3.5px); }
html body .w-livr .ml-copier { padding: 3px 9px; border-radius: 5px; background: #fff; color: #0b0b0d; font-size: 10.5px; font-weight: 600; }

/* ---- Ecran de chargement v4 (2026-10-23, « avec ma DA ») : fond de la refonte (arcs bleus flous et
   grain, la meme couche .dtf-fond que les pages, ici dans l ecran), logo DTF chrome, filet bleu.
   Pas de lueur ajoutee : la lueur grise de la v3 est retiree. ---- */
html body .dtf-ld-o .dtf-ld-lueur { display: none; }
html body .dtf-ld-o .dtf-ld-fond { position: absolute; inset: 0; z-index: 0; }
html body .dtf-ld-c { z-index: 1; gap: 20px; }
html body .dtf-ld-img { display: block; width: auto; height: 48px; }
html body .dtf-ld-bar { width: 150px; height: 2px; background: rgba(255, 255, 255, .1); }
html body .dtf-ld-bar i { background: #4b8cff; }
@media (prefers-reduced-motion: no-preference) {
  html body .dtf-ld-img { animation: ld-entree .6s ease both; }
}
/* v4.1 : la couche .dtf-fond des pages, mise dans l ecran, voilait le logo et remplissait tout ;
   fond dedie : noir, grain de la refonte, deux halos bleus discrets dans les coins */
html body .dtf-ld-o {
  background:
    var(--s-grain-case),
    radial-gradient(55% 45% at 12% 18%, rgba(64, 132, 255, .14), transparent 70%),
    radial-gradient(50% 42% at 88% 84%, rgba(64, 132, 255, .09), transparent 70%),
    #000 !important;
}
html body .dtf-ld-o .dtf-ld-fond { display: none; }

/* ---- Lecteur video a la demande (2026-10-23) : image fixe + bouton play, video chargee au clic ---- */
html body .dtf-vid { position: relative; display: block; overflow: hidden; background: #000; }
html body .dtf-vid > img, html body .dtf-vid > video { display: block; width: 100%; height: 100%; object-fit: cover; }
html body .dtf-vid > img[hidden] { display: none; }
html body .dtf-vid-play {
  position: absolute; inset: 0; margin: auto; /* centrage sans translate : ignore par certains navigateurs, le bouton partait de travers */
  display: grid; place-items: center; width: 62px; height: 62px; padding: 0; z-index: 3;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%;
  background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color .15s ease, transform .15s ease;
}
html body .dtf-vid-play:hover { background: #4b8cff; border-color: #4b8cff; transform: scale(1.06); }
html body .dtf-vid-play:focus-visible { outline: 2px solid #6ea5ff; outline-offset: 3px; }
html body .dtf-vid.is-lecture .dtf-vid-play { display: none; }
html body .dtf-vid.is-chargement::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 2px solid rgba(255, 255, 255, .2); border-top-color: #fff; border-radius: 50%; animation: dtf-vid-tour .8s linear infinite; }
@keyframes dtf-vid-tour { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { html body .dtf-vid-play { transition: none; } }

/* Carrousel de la fiche : les vues inactives (opacite 0) restent par-dessus et volent le clic du bouton play */
html body .qlf-pp-carousel-item:not(.active) { pointer-events: none; }


/* ---- Guides verrouilles pour les visiteurs (2026-10-23) : sommaire + en-tete + carte « Customer access only » ---- */
html body .gs-verrou-page { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: start; }
html body .gs-verrou-page .gp-verrou { max-width: 460px; margin: 8px auto 60px; padding: 32px 28px; text-align: center; }
html body .gv-champ { position: relative; display: flex; align-items: center; gap: 10px; margin: 22px 0 6px; padding: 0 12px; height: 46px; border: 1px solid var(--s-filet); border-radius: 8px; background: rgba(255, 255, 255, .03); cursor: text; }
html body .gv-champ:focus-within { border-color: #6c63ff; }
html body .gv-ico { flex: none; color: var(--s-gris); }
html body .gv-champ input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: #fff; font-size: 14.5px; }
html body .gv-champ input::placeholder { color: var(--s-gris); opacity: .7; }
html body .gv-type { flex: none; padding: 3px 8px; border: 1px solid var(--s-filet); border-radius: 5px; font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--s-texte-2); }
html body .gv-aide { display: block; font-size: 12px; color: var(--s-gris); }
html body .gv-bouton { width: 100%; height: 46px; margin-top: 20px; border: 0; border-radius: 8px; background: #5b4ff5; color: #fff; font-size: 14.5px; font-weight: 600; cursor: pointer; transition: background-color .15s ease; }
html body .gv-bouton:hover { background: #6c61ff; }
html body .gv-bouton:disabled { opacity: .6; cursor: progress; }
html body .gv-bouton:focus-visible { outline: 2px solid #8d85ff; outline-offset: 3px; }
html body .gv-erreur { margin: 12px 0 0 !important; color: #ff7b7b !important; font-size: 13px !important; }
@media (max-width: 991.98px) { html body .gs-verrou-page { grid-template-columns: minmax(0, 1fr); gap: 20px; } html body .gs-verrou-page .gs-som { order: 2; } }
/* marges du conteneur : ailleurs posees par le style interne de la version client */
html body .guides-page { position: relative; padding: 6px 0 44px; }
html body .guides-page .gp-wrap { margin: 0 auto; padding: 0 1rem; }
/* la vue video remplit toute la case du carrousel : le centre du bouton = le centre de l image visible */
html body .qlf-pp-carousel-item > .dtf-vid { position: absolute; inset: 0; }
/* 2026-10-23 « met juste un bouton play blanc rempli » : plus de cercle, triangle blanc plein avec une ombre pour rester lisible */
html body .dtf-vid-play { width: 72px; height: 72px; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .55)); }
html body .dtf-vid-play svg { position: relative; left: -4px; width: 56px; height: 56px; } /* le trace du triangle est decale a droite dans sa boite */
html body .dtf-vid-play:hover { background: none; transform: scale(1.1); }

/* ---- Marques sous le catalogue (2026-10-23) : tuiles logo + nom, clic = fenetre des fiches de la marque ---- */
html body .dtf-marques { margin-top: 48px; }
html body .dtf-marques-head { margin-bottom: 16px; }
html body .dtf-marques-title { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
html body .dtf-marques-sub { margin: 4px 0 0; color: var(--s-gris); font-size: 14px; }
html body .dtf-marques-rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } /* 2 lignes de 5 (2026-11-04) ; defilement sur telephone plus bas */
html body .dtf-marque {
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 18px 10px 14px;
  border: 1px solid var(--s-filet); border-radius: 12px; background: var(--s-matiere), var(--s-case); box-shadow: var(--s-reflet);
  color: var(--s-texte); font: inherit; cursor: pointer; transition: border-color .15s ease, transform .15s ease;
}
html body .dtf-marque:hover { border-color: rgba(255, 255, 255, .22); transform: translateY(-2px); }
html body .dtf-marque:focus-visible { outline: 2px solid #6ea5ff; outline-offset: 3px; }
html body .dtf-marque-logo { display: grid; place-items: center; width: 100%; height: 56px; margin-bottom: 8px; }
html body .dtf-marque-logo img { max-width: 72%; max-height: 56px; object-fit: contain; }
html body .dtf-marque-logo b { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: rgba(255, 255, 255, .06); font-size: 24px; font-weight: 700; color: #fff; }
html body .dtf-marque-nom { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
html body .dtf-marque-nb { font-size: 12px; color: var(--s-gris); }
@media (max-width: 991.98px) {
  html body .dtf-marques-rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  html body .dtf-marque { flex: 0 0 132px; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { html body .dtf-marque { transition: none; } html body .dtf-marque:hover { transform: none; } }

/* ---- Caisse dans notre fenetre facon Solar (2026-10-23) : en-tete « Checkout », croix, roue d attente (caisse-dtf.js) ---- */
html body .dtf-caisse { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; padding: 16px; }
html body .dtf-caisse-fond { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: dtf-caisse-fondu .2s ease-out; }
html body .dtf-caisse-boite {
  position: relative; display: flex; flex-direction: column; width: min(100%, 32rem); max-height: calc(100dvh - 32px);
  border: 1px solid rgba(255, 255, 255, .09); border-radius: 16px; background: #0e0e11; box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  overflow: hidden; animation: dtf-caisse-entree .22s ease-out;
}
html body .dtf-caisse-tete { display: flex; align-items: center; justify-content: space-between; flex: none; padding: 14px 16px 14px 20px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
html body .dtf-caisse-titre { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 16px; font-weight: 600; }
html body .dtf-caisse-titre svg { color: var(--s-gris); }
html body .dtf-caisse-x { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--s-gris); cursor: pointer; }
html body .dtf-caisse-x:hover { background: rgba(255, 255, 255, .06); color: #fff; }
html body .dtf-caisse-x:focus-visible { outline: 2px solid #6ea5ff; outline-offset: 2px; }
html body .dtf-caisse-corps { position: relative; min-height: 460px; overflow-y: auto; overscroll-behavior: contain; }
html body .dtf-caisse-corps iframe { display: block; width: 100%; height: 520px; border: 0; opacity: 0; transition: opacity .15s ease-out; }
html body .dtf-caisse.is-pret .dtf-caisse-corps { min-height: 0; }
html body .dtf-caisse.is-pret .dtf-caisse-corps iframe { opacity: 1; }
html body .dtf-caisse.is-pret .dtf-caisse-attente { display: none; }
html body .dtf-caisse-attente { position: absolute; inset: 0; display: grid; place-items: center; }
html body .dtf-caisse-roue { width: 26px; height: 26px; border: 2px solid rgba(255, 255, 255, .15); border-top-color: #fff; border-radius: 50%; animation: dtf-vid-tour .8s linear infinite; }
html body .dtf-caisse-erreur { padding: 40px 28px; text-align: center; }
html body .dtf-caisse-erreur b { display: block; margin-bottom: 6px; color: #fff; font-size: 17px; }
html body .dtf-caisse-erreur p { margin: 0 0 18px; color: var(--s-gris); font-size: 14px; }
html body .dtf-caisse-erreur a { display: inline-block; padding: 10px 18px; border-radius: 8px; background: #fff; color: #111; font-weight: 600; text-decoration: none; }
html body .dtf-caisse.is-fermeture .dtf-caisse-boite { animation: dtf-caisse-sortie .18s ease-in forwards; }
html body .dtf-caisse.is-fermeture .dtf-caisse-fond { animation: dtf-caisse-fondu .18s ease-in reverse forwards; }
@keyframes dtf-caisse-entree { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes dtf-caisse-sortie { to { opacity: 0; transform: scale(.97); } }
@keyframes dtf-caisse-fondu { from { opacity: 0; } to { opacity: 1; } }

/* ---- Panier en volet lateral facon Solar (2026-10-23) : le menu deroulant du panier devient un volet plein ecran a droite ---- */
html body .dtf-cart:has(.dtf-cart-menu.show)::after { content: ""; position: fixed; inset: 0; z-index: 1990; background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: dtf-caisse-fondu .2s ease-out; }
html body .dtf-cart .dtf-cart-menu.dropdown-menu {
  position: fixed !important; inset: 12px 12px 12px auto !important; transform: none !important; margin: 0 !important; z-index: 2000;
  width: min(420px, calc(100vw - 24px)); max-height: none; padding: 0 !important; flex-direction: column;
  border: 1px solid rgba(255, 255, 255, .09); border-radius: 16px; background: #0b0b0d; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); overflow: hidden;
}
html body .dtf-cart .dtf-cart-menu.dropdown-menu.show { display: flex; animation: dtf-cart-glisse .22s ease-out; }
@keyframes dtf-cart-glisse { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
html body .dtf-cart-tete { display: flex; align-items: center; gap: 10px; flex: none; padding: 18px 16px 18px 20px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
html body .dtf-cart-titre { color: #fff; font-size: 17px; font-weight: 600; }
html body .dtf-cart-nb { padding: 2px 9px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; color: var(--s-texte-2); font-size: 12px; font-weight: 600; }
html body .dtf-cart-x { display: grid; place-items: center; width: 32px; height: 32px; margin-left: auto; padding: 0; border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px; background: transparent; color: var(--s-gris); cursor: pointer; }
html body .dtf-cart-x:hover { color: #fff; background: rgba(255, 255, 255, .06); }
html body .dtf-cart .dtf-cart-list { flex: 1; max-height: none !important; overflow-y: auto; }
html body .dtf-cart-vide { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 60vh; text-align: center; }
html body .dtf-cart-vide b { color: #fff; font-size: 16px; font-weight: 600; }
html body .dtf-cart-continuer { padding: 9px 18px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px; color: #fff; font-size: 14px; font-weight: 500; text-decoration: none; }
html body .dtf-cart-continuer:hover { background: rgba(255, 255, 255, .06); color: #fff; }
html body .dtf-cart .dtf-cart-foot { flex: none; border-top: 1px solid rgba(255, 255, 255, .07); padding-top: 6px; }
@media (prefers-reduced-motion: reduce) { html body .dtf-caisse-boite, html body .dtf-caisse-fond, html body .dtf-cart .dtf-cart-menu.dropdown-menu.show { animation: none; } }
html body .dtf-cart .dtf-cart-foot .dtf-cart-btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; border-radius: 10px; font-size: 14px; font-weight: 600; }
html body .dtf-cart .dtf-cart-foot .btn-primary { border: 0; background: #fff; color: #111; }
html body .dtf-cart .dtf-cart-foot .btn-primary:hover { background: #e9e9ee; color: #111; }
html body .dtf-cart .dtf-cart-foot .btn-outline-primary { border: 1px solid rgba(255, 255, 255, .14); background: transparent; color: #fff; }
html body .dtf-cart .dtf-cart-foot .btn-outline-primary:hover { background: rgba(255, 255, 255, .06); color: #fff; }
/* le style « verre » des menus de la barre rendait le volet translucide */
html body .navbar .dtf-cart .dtf-cart-menu.dropdown-menu { background: #0b0b0d !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* la caisse n envoie pas sa hauteur (aucun « resize ») : le cadre prend la hauteur disponible, defilement interne au-dela */
html body .dtf-caisse-corps iframe { height: min(720px, calc(100dvh - 32px - 62px)); }
/* video YouTube dans la galerie (R6 │ BLACKOUT) : meme cadre que la video mp4 */
html body .dtf-vid > iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---- Pages legales (2026-10-24) : en-tete + onglets, sommaire collant, carte de lecture (page-legale.njk) ---- */
html body .dtf-legal { max-width: 1080px; padding-top: 48px; padding-bottom: 64px; }
html body .dtf-legal-tete { margin-bottom: 28px; }
html body .dtf-legal-sur { margin: 0 0 8px; color: var(--s-gris); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
html body .dtf-legal-tete h1 { margin: 0; font-size: clamp(30px, 5vw, 44px); font-weight: 600; letter-spacing: -.03em; text-wrap: balance; }
html body .dtf-legal-sous { max-width: 60ch; margin: 10px 0 0; color: var(--s-gris); font-size: 15px; }
html body .dtf-legal-onglets { display: flex; gap: 6px; margin-top: 24px; overflow-x: auto; scrollbar-width: none; }
html body .dtf-legal-onglets a { flex: none; padding: 8px 14px; border: 1px solid var(--s-filet); border-radius: 8px; color: var(--s-gris); font-size: 14px; font-weight: 500; text-decoration: none; transition: color .15s ease, border-color .15s ease; }
html body .dtf-legal-onglets a:hover { color: var(--s-texte); border-color: rgba(255, 255, 255, .2); }
html body .dtf-legal-onglets a[aria-current="page"] { border-color: transparent; background: #fff; color: #111; }
html body .dtf-legal-corps { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: start; }
html body .dtf-legal-corps:has(> .dtf-legal-som[hidden]) { grid-template-columns: minmax(0, 1fr); }
html body .dtf-legal-som { position: sticky; top: 110px; }
html body .dtf-legal-som > p { margin: 0 0 10px; color: var(--s-gris); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
html body .dtf-legal-som ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; counter-reset: som; }
html body .dtf-legal-som li { counter-increment: som; }
html body .dtf-legal-som a { display: flex; gap: 10px; padding: 6px 10px; border-radius: 8px; color: var(--s-gris); font-size: 14px; line-height: 1.35; text-decoration: none; }
html body .dtf-legal-som a::before { content: counter(som); min-width: 14px; color: rgba(255, 255, 255, .3); font-variant-numeric: tabular-nums; }
html body .dtf-legal-som a:hover { background: rgba(255, 255, 255, .05); color: var(--s-texte); }
html body .dtf-legal-texte { padding: 32px 36px; border: 1px solid var(--s-filet); border-radius: 12px; background: var(--s-matiere), var(--s-case); box-shadow: var(--s-reflet); color: #c9c9d1; font-size: 15px; line-height: 1.7; }
html body .dtf-legal-texte > :first-child { margin-top: 0; }
html body .dtf-legal-texte > :last-child { margin-bottom: 0; }
html body .dtf-legal-texte h2, html body .dtf-legal-texte h3 { margin: 32px 0 10px; padding-top: 24px; border-top: 1px solid var(--s-filet); color: var(--s-texte); font-size: 19px; font-weight: 600; letter-spacing: -.01em; scroll-margin-top: 110px; }
html body .dtf-legal-texte .dtf-legal-maj + h2, html body .dtf-legal-texte .dtf-legal-intro + h2 { border-top: 0; padding-top: 0; }
html body .dtf-legal-texte p { max-width: 70ch; margin: 0 0 12px; }
html body .dtf-legal-texte ul { display: grid; gap: 8px; max-width: 70ch; margin: 0 0 14px; padding: 0; list-style: none; }
html body .dtf-legal-texte li { position: relative; padding-left: 20px; }
html body .dtf-legal-texte li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .35); }
html body .dtf-legal-texte a { color: var(--s-texte); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .3); }
html body .dtf-legal-texte a:hover { text-decoration-color: currentColor; }
html body .dtf-legal-texte strong, html body .dtf-legal-texte b { color: var(--s-texte); }
html body .dtf-legal-maj { display: inline-block; margin-bottom: 20px !important; padding: 4px 10px; border: 1px solid var(--s-filet); border-radius: 8px; color: var(--s-gris); font-size: 12px; }
html body .dtf-legal-intro { margin-bottom: 28px !important; padding: 16px 18px; border-radius: 8px; background: rgba(255, 255, 255, .04); color: var(--s-texte); font-size: 16px; }
html body .dtf-legal-aide { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; padding: 20px 24px; border: 1px solid var(--s-filet); border-radius: 12px; background: var(--s-matiere), var(--s-case); }
html body .dtf-legal-aide div { display: grid; gap: 2px; }
html body .dtf-legal-aide b { color: var(--s-texte); font-size: 15px; font-weight: 600; }
html body .dtf-legal-aide span { color: var(--s-gris); font-size: 14px; }
html body .dtf-legal-bouton { flex: none; display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border-radius: 8px; background: #fff; color: #111 !important; font-size: 14px; font-weight: 600; text-decoration: none; }
html body .dtf-legal-bouton:hover { background: #e9e9ee; }
@media (max-width: 991.98px) {
  html body .dtf-legal-corps { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  html body .dtf-legal-som { position: static; }
}
@media (max-width: 575.98px) {
  html body .dtf-legal { padding-top: 32px; }
  html body .dtf-legal-texte { padding: 22px 18px; }
  html body .dtf-legal-aide { flex-direction: column; align-items: stretch; text-align: left; }
  html body .dtf-legal-bouton { justify-content: center; }
}

/* ---- Bannieres /banner v2 (2026-10-28, phase 5, « plus naturelle, dans la DA ») : bande sobre dans la surface du site,
   filet en bas, la couleur choisie sur Discord ne reste que sur la pastille (--dtf-b pose par master.njk) ---- */
html body .dtf-banner { min-height: 40px; padding-top: 9px; padding-bottom: 9px; background: var(--s-case, #0c0c0e); color: var(--s-texte-2, #c9c9d1) !important; font-size: 13.5px; font-weight: 450; letter-spacing: 0; box-shadow: inset 0 -1px 0 var(--s-filet, rgba(255, 255, 255, .1)); }
html body .dtf-banner + .dtf-banner { box-shadow: inset 0 -1px 0 var(--s-filet, rgba(255, 255, 255, .1)); }
html body .dtf-banner__txt { gap: 10px; }
html body .dtf-banner__txt::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--dtf-b, #8d80ff); }
html body a.dtf-banner__txt { color: var(--s-texte, #f2f2f5); }
html body a.dtf-banner__txt span { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .25); text-underline-offset: 3px; }
html body a.dtf-banner__txt:hover span { text-decoration-color: currentColor; }
html body a.dtf-banner__txt svg { width: 14px; height: 14px; color: var(--s-gris, #8e8e97); }
html body .dtf-banner__x { width: 26px; height: 26px; border-radius: 6px; background: transparent; color: var(--s-gris, #8e8e97); }
html body .dtf-banner__x:hover { background: rgba(255, 255, 255, .06); color: var(--s-texte, #f2f2f5); }

/* ---- Widget Support (2026-10-24) : bouton en bas a droite + panneau de tickets (dtf-support.js) ; mise en page des
   captures de reference, couleurs de la DA (boutons blancs, anneau de focus violet, pas de lueur) ---- */
html body .dtf-sup { position: fixed; right: 20px; bottom: 20px; z-index: 2147482000; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; font-family: inherit; color: var(--s-texte); }
html body .dtf-sup-ico { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; }
html body .dtf-sup-ico svg { width: 100%; height: 100%; }
html body .dtf-sup-lanceur { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px 0 15px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; background: #0c0c0e; color: var(--s-texte); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .9); transition: border-color .15s ease, transform .15s ease; }
html body .dtf-sup-lanceur:hover { border-color: rgba(255, 255, 255, .24); transform: translateY(-1px); }
html body .dtf-sup button:focus-visible, html body .dtf-sup a:focus-visible, html body .dtf-sup input:focus-visible, html body .dtf-sup textarea:focus-visible, html body .dtf-sup-menu:focus-visible { outline: 2px solid #8d80ff; outline-offset: 2px; }
html body .dtf-sup-panneau { display: flex; flex-direction: column; width: 380px; height: min(640px, calc(100dvh - 100px)); padding: 14px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; background: #0b0b0d; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .95); animation: dtf-sup-in .18s ease-out; }
html body .dtf-sup-panneau[hidden] { display: none; }
@keyframes dtf-sup-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
html body .dtf-sup-tete { display: flex; align-items: center; gap: 12px; padding: 2px 2px 14px; }
html body .dtf-sup-tete b { flex: 1; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
html body .dtf-sup-logo { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px; background: rgba(255, 255, 255, .05); }
html body .dtf-sup-fermer, html body .dtf-sup-retour { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--s-gris); cursor: pointer; }
html body .dtf-sup-fermer:hover, html body .dtf-sup-retour:hover { background: rgba(255, 255, 255, .06); color: var(--s-texte); }
html body .dtf-sup-fermer svg, html body .dtf-sup-retour svg { width: 16px; height: 16px; }
html body .dtf-sup-corps { flex: 1; min-height: 0; display: flex; }
html body .dtf-sup-carte { flex: 1; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--s-filet); border-radius: 12px; background: var(--s-matiere), var(--s-case); overflow: hidden; }
html body .dtf-sup-sous { display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 14px 0 8px; border-bottom: 1px solid var(--s-filet); color: var(--s-gris); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
html body .dtf-sup-sous > span:only-child { padding-left: 8px; }
html body .dtf-sup-form { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; padding: 16px; overflow-y: auto; }
html body .dtf-sup-intro { margin: 0; color: var(--s-gris); font-size: 14px; line-height: 1.5; }
html body .dtf-sup-champ { display: grid; gap: 7px; }
html body .dtf-sup-champ label { color: var(--s-texte); font-size: 13px; font-weight: 500; }
html body .dtf-sup-champ small { color: var(--s-gris); font-size: 12px; }
html body .dtf-sup input[type="text"], html body .dtf-sup input[type="email"], html body .dtf-sup textarea, html body .dtf-sup-choix { width: 100%; min-height: 44px; padding: 10px 13px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px; background: #131316; color: var(--s-texte); font: inherit; font-size: 15px; line-height: 1.4; }
html body .dtf-sup textarea { resize: none; }
html body .dtf-sup input::placeholder, html body .dtf-sup textarea::placeholder { color: #5f5f68; }
html body .dtf-sup input:focus, html body .dtf-sup textarea:focus, html body .dtf-sup-choix[aria-expanded="true"] { border-color: rgba(141, 128, 255, .7); outline: none; }
html body .dtf-sup-select { position: relative; }
html body .dtf-sup-choix { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; cursor: pointer; }
html body .dtf-sup-choix > span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
html body .dtf-sup-chev { color: var(--s-gris); }
html body .dtf-sup-menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 2; max-height: 248px; margin: 0; padding: 6px; overflow-y: auto; list-style: none; border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; background: #111114; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .9); }
html body .dtf-sup-menu[hidden] { display: none; }
html body .dtf-sup-menu li { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; }
html body .dtf-sup-menu li.is-actif { background: rgba(255, 255, 255, .06); }
html body .dtf-sup-menu li[aria-selected="true"] { background: rgba(141, 128, 255, .14); }
html body .dtf-sup-menu li .dtf-sup-ico { width: 16px; height: 16px; color: #b3abff; }
html body .dtf-sup-joints { display: flex; align-items: center; gap: 10px; color: var(--s-gris); font-size: 13px; }
html body .dtf-sup-joindre { display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px; background: transparent; color: var(--s-gris); cursor: pointer; }
html body .dtf-sup-joindre:hover { color: var(--s-texte); border-color: rgba(255, 255, 255, .2); }
html body .dtf-sup-joindre svg { width: 17px; height: 17px; }
html body .dtf-sup-vignettes { display: flex; flex-wrap: wrap; gap: 8px; }
html body .dtf-sup-vignettes[hidden] { display: none; }
html body .dtf-sup-vignette { position: relative; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; border: 1px solid var(--s-filet); }
html body .dtf-sup-vignette img { width: 100%; height: 100%; object-fit: cover; }
html body .dtf-sup-vignette button { position: absolute; top: 3px; right: 3px; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 5px; background: rgba(0, 0, 0, .75); color: #fff; cursor: pointer; }
html body .dtf-sup-vignette button svg { width: 12px; height: 12px; }
html body .dtf-sup-erreur { margin: 0; padding: 10px 12px; border-radius: 8px; background: rgba(242, 109, 109, .1); color: #ff9b9b; font-size: 13px; }
html body .dtf-sup-erreur[hidden] { display: none; }
html body .dtf-sup-pied { display: grid; gap: 10px; margin-top: auto; padding-top: 4px; }
html body .dtf-sup-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; border: 0; border-radius: 10px; background: #fff; color: #111; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
html body .dtf-sup-btn:hover { background: #e9e9ee; }
html body .dtf-sup-btn:disabled, html body .dtf-sup-envoyer:disabled { opacity: .55; cursor: progress; }
html body .dtf-sup-lien { justify-self: center; padding: 4px; border: 0; background: none; color: var(--s-gris); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .25); cursor: pointer; }
html body .dtf-sup-lien:hover { color: var(--s-texte); }
html body .dtf-sup-charge { margin: 0; padding: 24px 16px; color: var(--s-gris); font-size: 14px; text-align: center; }
html body .dtf-sup-carte > .dtf-sup-liste { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; }
html body .dtf-sup-carte > .dtf-sup-pied { padding: 12px 16px 16px; border-top: 1px solid var(--s-filet); }
html body .dtf-sup-ligne { display: grid; gap: 6px; width: 100%; padding: 12px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
html body .dtf-sup-ligne:hover { background: rgba(255, 255, 255, .04); }
html body .dtf-sup-ligne + .dtf-sup-ligne { box-shadow: 0 -1px 0 var(--s-filet); }
html body .dtf-sup-ligne-haut { display: flex; justify-content: space-between; gap: 10px; }
html body .dtf-sup-ligne-haut b { overflow: hidden; font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
html body .dtf-sup-ligne-haut time { flex: none; color: var(--s-gris); font-size: 12px; }
html body .dtf-sup-ligne-bas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
html body .dtf-sup-statut { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 5px; background: rgba(255, 255, 255, .06); color: var(--s-gris); font-size: 11px; font-weight: 600; }
html body .dtf-sup-statut::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
html body .dtf-sup-statut.is-open { color: #b3abff; background: rgba(141, 128, 255, .12); }
html body .dtf-sup-statut.is-resolved { color: #6fd39a; background: rgba(74, 222, 128, .1); }
html body .dtf-sup-produit { overflow: hidden; color: var(--s-gris); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
html body .dtf-sup-vide { display: grid; gap: 6px; padding: 40px 20px; text-align: center; }
html body .dtf-sup-vide b { font-size: 15px; font-weight: 600; }
html body .dtf-sup-vide span { color: var(--s-gris); font-size: 13px; }
html body .dtf-sup-entete-fil { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 12px 16px; border-bottom: 1px solid var(--s-filet); }
html body .dtf-sup-entete-fil b { flex-basis: 100%; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
html body .dtf-sup-fil { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 16px; overflow-y: auto; }
html body .dtf-sup-msg { display: grid; gap: 4px; max-width: 86%; }
html body .dtf-sup-msg.is-moi { align-self: flex-end; justify-items: end; }
html body .dtf-sup-msg-qui { color: var(--s-gris); font-size: 11px; }
html body .dtf-sup-msg p { margin: 0; padding: 9px 12px; border-radius: 12px; background: #17171b; font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
html body .dtf-sup-msg.is-moi p { background: #fff; color: #111; border-bottom-right-radius: 5px; }
html body .dtf-sup-msg.is-staff p { border: 1px solid var(--s-filet); border-bottom-left-radius: 5px; }
html body .dtf-sup-msg-imgs { display: flex; flex-wrap: wrap; gap: 6px; }
html body .dtf-sup-msg-imgs img { display: block; width: 120px; height: 90px; border: 1px solid var(--s-filet); border-radius: 8px; object-fit: cover; }
html body .dtf-sup-note { margin: 4px 0 0; color: var(--s-gris); font-size: 12px; text-align: center; }
html body .dtf-sup-repondre { display: grid; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--s-filet); }
html body .dtf-sup-zone { display: flex; align-items: flex-end; gap: 8px; }
html body .dtf-sup-zone textarea { flex: 1; min-height: 40px; max-height: 120px; padding: 9px 12px; font-size: 14px; }
html body .dtf-sup-envoyer { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 8px; background: #fff; color: #111; cursor: pointer; }
html body .dtf-sup-envoyer svg { width: 17px; height: 17px; }
html body .dtf-sup-zone .dtf-sup-joindre { width: 40px; height: 40px; }
@media (max-width: 767.98px) {
  html body .dtf-sup { right: 14px; bottom: 14px; }
  html body .dtf-sup.is-open { inset: 0; }
  html body .dtf-sup.is-open .dtf-sup-lanceur { display: none; }
  html body .dtf-sup-panneau { width: 100%; height: 100%; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); border: 0; border-radius: 0; animation: none; }
  html.dtf-sup-plein, html.dtf-sup-plein body { overflow: hidden; }
  /* iOS zoome sur les champs sous 16 px */
  html body .dtf-sup input[type="text"], html body .dtf-sup input[type="email"], html body .dtf-sup textarea { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { html body .dtf-sup-panneau, html body .dtf-sup-lanceur { animation: none; transition: none; } }
/* dtf-product.css colore tous les button[type="submit"] du site (violet, majuscules, !important) : pas dans le widget */
html body .dtf-sup button[type="submit"] { background: #fff !important; border-color: transparent !important; color: #111 !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 600 !important; }
html body .dtf-sup button[type="submit"]:hover { background: #e9e9ee !important; }

/* ---- Widget Support, version sobre (2026-10-24, « trop IA, le plus carre dans la DA et sans neon ») : coins 12/8/5,
   cartes noires du site, aucun halo ni neon, point « en ligne » fixe ; le bleu ne sert qu au focus ---- */
html body .dtf-sup-lanceur { height: 46px; padding: 0 16px 0 14px; gap: 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); background: #0c0c0e; color: #fff; font-size: 14.5px; box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .9); }
html body .dtf-sup-lanceur:hover { border-color: rgba(255, 255, 255, .28); transform: none; }
html body .dtf-sup-lanceur .dtf-sup-ico { width: 20px; height: 20px; color: #fff; }
html body .dtf-sup-court { display: none; }
html body .dtf-sup-enligne { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #34d399; }
html body .dtf-sup-panneau { border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1); background: #0b0b0d; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .95); }
html body .dtf-sup-logo { border-radius: 8px; border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); color: #fff; }
html body .dtf-sup-carte { border-radius: 8px; border-color: var(--s-filet); background: #0e0e11; }
html body .dtf-sup input[type="text"], html body .dtf-sup input[type="email"], html body .dtf-sup textarea, html body .dtf-sup-choix { border-radius: 5px; background: #131316; }
html body .dtf-sup input:focus, html body .dtf-sup textarea:focus, html body .dtf-sup-choix[aria-expanded="true"] { border-color: rgb(var(--s-bleu)); box-shadow: none; }
html body .dtf-sup-menu { border-radius: 8px; background: #111114; }
html body .dtf-sup-menu li { border-radius: 5px; }
html body .dtf-sup-menu li[aria-selected="true"] { background: rgba(255, 255, 255, .07); }
html body .dtf-sup-menu li .dtf-sup-ico { color: #fff; }
html body .dtf-sup-btn, html body .dtf-sup-envoyer, html body .dtf-sup-joindre { border-radius: 8px; }
html body .dtf-sup-msg p { border-radius: 8px; }
html body .dtf-sup-msg.is-moi p { border-bottom-right-radius: 3px; }
html body .dtf-sup-msg.is-staff p { border-bottom-left-radius: 3px; border-color: var(--s-filet); background: #17171b; }
html body .dtf-sup-statut, html body .dtf-sup-vignette, html body .dtf-sup-msg-imgs img { border-radius: 5px; }
html body .dtf-sup-astuce { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--s-filet); border-radius: 8px; color: var(--s-gris); font-size: 13px; }
html body .dtf-sup-astuce button { flex: none; padding: 6px 10px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 5px; background: transparent; color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
html body .dtf-sup-astuce button:hover { border-color: rgba(255, 255, 255, .32); }
@media (max-width: 767.98px) {
  html body .dtf-sup-long { display: none; }
  html body .dtf-sup-court { display: inline; }
  html body .dtf-sup-panneau { border-radius: 0; border: 0; }
}

/* recherche du catalogue (2026-10-24, « la barre de recherche marche pas ») : le display:flex !important des cartes
   ci-dessus passait devant le .d-none de Bootstrap, les jeux filtres restaient affiches */
html body .dtf-group-card.d-none { display: none !important; }

/* bouton « Open ticket » toujours visible (2026-10-24, « j arrive pas a scroll ») : colle au bas du formulaire, sans avoir a defiler */
html body .dtf-sup-form > .dtf-sup-pied { position: sticky; bottom: -16px; z-index: 1; margin: 0 -16px -16px; padding: 12px 16px 16px; background: #0e0e11; border-top: 1px solid var(--s-filet); }
html body .dtf-sup-form { overscroll-behavior: contain; }

/* pastille des reponses non lues sur le bouton Support (2026-10-24) */
html body .dtf-sup-lanceur { position: relative; }
html body .dtf-sup-pastille { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; box-shadow: 0 0 0 2px #000; }
html body .dtf-sup-pastille[hidden] { display: none; }
html body .dtf-sup-fichier { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding: 7px 10px; border: 1px solid var(--s-filet); border-radius: 5px; color: inherit; font-size: 13px; text-decoration: none; word-break: break-all; }
html body .dtf-sup-fichier:hover { border-color: rgba(255,255,255,.22); }
html body .dtf-sup-fichier .dtf-sup-ico { width: 14px; height: 14px; flex: none; }

/* ==== Page /tickets (2026-10-28) : structure des captures de reference du user, matiere du site ====
   Cartes = matiere + reflet + filet ; bouton principal blanc (comme tout le site) ; violet = accent seulement. */
html body .dtf-tk { max-width: 1060px; padding-top: 28px; padding-bottom: 64px; color: var(--s-texte); }
html body .dtf-tk-charge { color: var(--s-gris); padding: 40px 0; text-align: center; }
html body .dtf-tk-ico { display: inline-flex; width: 18px; height: 18px; flex: none; }
html body .dtf-tk-ico svg { width: 100%; height: 100%; }
html body .dtf-tk-ico.is-petit { width: 13px; height: 13px; }
html body .dtf-tk-ico.is-accent, html body .dtf-tk .is-accent { color: var(--s-accent); }
html body .dtf-tk-carte { border: 1px solid var(--s-filet); border-radius: 12px; background: var(--s-matiere), var(--s-case); box-shadow: var(--s-reflet); }

/* barre du haut */
html body .dtf-tk-barre { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; margin-bottom: 18px; }
html body .dtf-tk-retour { display: inline-flex; align-items: center; gap: 6px; color: var(--s-texte-2); font-size: 14px; font-weight: 500; text-decoration: none; }
html body .dtf-tk-retour:hover { color: var(--s-texte); }
html body .dtf-tk-retour .dtf-tk-ico { width: 16px; height: 16px; }
html body .dtf-tk-barre-d { display: flex; align-items: center; gap: 8px; }
html body .dtf-tk-moi { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 4px; border: 1px solid var(--s-filet); border-radius: 999px; background: rgba(255, 255, 255, .03); font-size: 13px; }
html body .dtf-tk-moi .dtf-tk-av { width: 26px; height: 26px; font-size: 11px; }
html body .dtf-tk-carre { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 34px; min-width: 34px; padding: 0 9px; border: 1px solid var(--s-filet); border-radius: 8px; background: rgba(255, 255, 255, .03); color: var(--s-texte-2); cursor: pointer; }
html body .dtf-tk-carre:hover, html body .dtf-tk-carre[aria-expanded="true"] { color: var(--s-texte); border-color: var(--s-filet-fort); }
html body .dtf-tk-ancre { position: relative; }

/* menus (langue, commande, message, emoji) */
html body .dtf-tk-menu { position: absolute; z-index: 30; border: 1px solid var(--s-filet-fort); border-radius: 12px; background: #111114; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .9); }
html body .dtf-tk-menu[hidden] { display: none; }
html body .dtf-tk-menu ul, html body ul.dtf-tk-menu { list-style: none; margin: 0; padding: 6px; }
html body .dtf-tk-menu li:hover, html body .dtf-tk-menu li:focus { background: rgba(255, 255, 255, .05); outline: 0; }

/* avatars et presence */
html body .dtf-tk-av { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; object-fit: cover; background: #1b1c22; color: var(--s-texte-2); font-size: 13px; font-weight: 700; }
/* avatar du support = logo de la boutique (2026-10-29) : logo large, contenu dans la case sans etre rogne */
html body .dtf-tk-av.is-dtf { border-radius: 8px; background: #0f1014; border: 1px solid var(--s-filet); object-fit: contain; padding: 4px; }
html body .dtf-tk-av-pres { position: relative; display: inline-flex; }
html body .dtf-tk-pres { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border: 2px solid #0c0c0e; border-radius: 50%; background: #6f6f78; }
html body .dtf-tk-pres.is-en-ligne { background: #22c55e; }

/* boutons */
html body .dtf-tk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; padding: 0 18px; border: 1px solid #fff; border-radius: 8px; background: #fff; color: #0a0a0c; font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background .15s ease; }
html body .dtf-tk-btn:hover { background: #e2e2e6; border-color: #e2e2e6; color: #0a0a0c; }
html body .dtf-tk-btn.is-auto { width: auto; }
html body .dtf-tk-btn.is-contour { height: 40px; background: rgba(255, 255, 255, .03); border-color: var(--s-filet-fort); color: var(--s-texte); font-size: 14px; }
html body .dtf-tk-btn.is-contour:hover { background: rgba(255, 255, 255, .07); color: #fff; }
html body .dtf-tk-btn.is-discret { height: 38px; font-size: 14px; }
html body .dtf-tk-btn:disabled { opacity: .55; cursor: default; }
html body .dtf-tk-btn .dtf-tk-ico { width: 16px; height: 16px; }
html body .dtf-tk-lienbtn { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 0; border: 0; background: none; color: var(--s-gris); font: inherit; font-size: 13px; cursor: pointer; }
html body .dtf-tk-lienbtn:hover { color: var(--s-texte); }
html body .dtf-tk-lienbtn .dtf-tk-ico { width: 15px; height: 15px; }
html body .dtf-tk-erreur { margin: 10px 0 0; color: #ff9a9a; font-size: 14px; }
html body .dtf-tk-erreur[hidden] { display: none; }

/* ecran 1 : liaison Discord */
html body .dtf-tk-centre { display: grid; place-items: center; padding: 40px 0; }
/* carte de liaison Discord = connexion de DTF Admin (2026-10-28) : centree, logo, bouton Discord pleine largeur */
html body .dtf-tk-lien { width: 100%; max-width: 380px; padding: 30px 24px 24px; text-align: center; }
html body .dtf-tk-lien-logo { display: block; width: 95px; height: auto; margin: 0 auto 16px; }
html body .dtf-tk-lien-titre { margin: 0 0 6px; font-size: 24px !important; font-weight: 700 !important; letter-spacing: -.01em; }
html body .dtf-tk-lien p { margin: 0 0 22px; color: var(--s-texte-2); font-size: 15px; line-height: 1.55; }
html body .dtf-tk-btn.dtf-tk-btn-discord { border-color: #5865f2; background: #5865f2; color: #fff; }
html body .dtf-tk-btn.dtf-tk-btn-discord:hover { border-color: #4752c4; background: #4752c4; }
html body .dtf-tk-btn.dtf-tk-btn-discord .dtf-tk-ico { width: 18px; height: 18px; }
html body .dtf-tk-lien .dtf-tk-erreur { margin: 12px 0 0; }

/* liste */
html body .dtf-tk-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
html body .dtf-tk-tete h1 { margin: 0 0 4px; font-size: 26px !important; font-weight: 700 !important; letter-spacing: -.02em; }
html body .dtf-tk-tete p { margin: 0; color: var(--s-texte-2); font-size: 14.5px; }
html body .dtf-tk-tete.is-simple { margin-bottom: 20px; }
html body .dtf-tk-tete.is-simple h1 { font-size: 22px !important; }
html body .dtf-tk-liste { display: grid; gap: 10px; }
html body .dtf-tk-ligne { display: grid; gap: 8px; padding: 14px 16px; color: inherit; text-decoration: none; transition: border-color .15s ease; }
html body .dtf-tk-ligne:hover { border-color: var(--s-filet-fort); color: inherit; }
html body .dtf-tk-ligne-h { display: flex; align-items: center; gap: 10px; }
html body .dtf-tk-ligne-h b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
html body .dtf-tk-ligne-h time, html body .dtf-tk-num { color: var(--s-gris); font-size: 12.5px; }
html body .dtf-tk-ligne-b { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
html body .dtf-tk-produit { color: var(--s-texte-2); font-size: 13px; }
html body .dtf-tk-statut { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 1px solid var(--s-filet); border-radius: 5px; font-size: 12px; font-weight: 600; color: var(--s-texte-2); }
html body .dtf-tk-statut.is-ouvert { color: #4ade80; border-color: rgba(74, 222, 128, .3); }
html body .dtf-tk-statut.is-repondu { color: var(--s-accent); border-color: rgba(141, 128, 255, .35); }
html body .dtf-tk-point { width: 8px; height: 8px; border-radius: 50%; background: var(--s-accent); }
html body .dtf-tk-vide { display: grid; justify-items: center; gap: 8px; padding: 40px 20px; text-align: center; color: var(--s-texte-2); }
html body .dtf-tk-vide b { color: var(--s-texte); font-size: 16px; }
html body .dtf-tk-vide .dtf-tk-btn { margin-top: 8px; }

/* ecran 3 : nouveau ticket */
html body .dtf-tk-etroit { max-width: 620px; margin: 0 auto; }
html body .dtf-tk-form { display: grid; gap: 16px; }
html body .dtf-tk-champ label { display: block; margin-bottom: 7px; color: var(--s-texte-2); font-size: 13.5px; font-weight: 600; }
html body .dtf-tk-champ input, html body .dtf-tk-champ textarea { width: 100%; padding: 11px 14px; border: 1px solid var(--s-filet); border-radius: 8px; background: var(--s-matiere), var(--s-case); color: var(--s-texte); font: inherit; font-size: 15px; }
html body .dtf-tk-champ textarea { min-height: 150px; resize: vertical; }
html body .dtf-tk-champ input:focus, html body .dtf-tk-champ textarea:focus, html body .dtf-tk-select:focus-visible { border-color: rgba(255, 255, 255, .3); outline: 0; }
html body .dtf-tk input::placeholder, html body .dtf-tk textarea::placeholder { color: var(--s-gris-2); }
html body .dtf-tk-select { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border: 1px solid var(--s-filet); border-radius: 8px; background: var(--s-matiere), var(--s-case); color: var(--s-texte); font: inherit; text-align: left; cursor: pointer; }
html body .dtf-tk-select-ico { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; border: 1px solid var(--s-filet); border-radius: 8px; color: var(--s-texte-2); }
html body .dtf-tk-select-ico .dtf-tk-ico { width: 12px; height: 12px; }
html body .dtf-tk-select-txt { display: grid; flex: 1; min-width: 0; }
html body .dtf-tk-select-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; }
html body .dtf-tk-select-txt small { color: var(--s-gris); font-size: 12.5px; }
html body .dtf-tk-select .is-chev { color: var(--s-gris); }
html body .dtf-tk-menu-select { top: calc(100% + 6px); left: 0; right: 0; max-height: 320px; overflow-y: auto; }
html body .dtf-tk-menu-select li { display: flex; align-items: center; gap: 12px; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
html body .dtf-tk-vignettes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
html body .dtf-tk-vignettes[hidden] { display: none; }
html body .dtf-tk-vignette { position: relative; }
html body .dtf-tk-vignette img { display: block; width: 64px; height: 64px; border: 1px solid var(--s-filet); border-radius: 8px; object-fit: cover; }
html body .dtf-tk-vignette button { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: #2a2a31; color: #fff; cursor: pointer; }
html body .dtf-tk-vignette .dtf-tk-ico { width: 12px; height: 12px; }

/* ecran 5 : conversation */
html body .dtf-tk-titre { margin: 0 0 16px; font-size: 24px !important; font-weight: 700 !important; letter-spacing: -.02em; overflow-wrap: anywhere; }
html body .dtf-tk-fil { display: grid; grid-template-columns: minmax(0, 1fr) 250px; min-height: 620px; overflow: hidden; }
html body .dtf-tk-gauche { display: flex; flex-direction: column; min-width: 0; padding: 0 16px 16px; }
html body .dtf-tk-flux { flex: 1; min-height: 320px; max-height: 64vh; overflow-y: auto; padding: 18px 2px 12px; overscroll-behavior: contain; }
html body .dtf-tk-msg { position: relative; display: flex; align-items: flex-start; gap: 10px; width: fit-content; max-width: 88%; margin: 0 0 14px; padding: 6px 8px; border-radius: 12px; }
html body .dtf-tk-msg:hover { background: rgba(255, 255, 255, .025); }
html body .dtf-tk-msg.is-moi { flex-direction: row-reverse; margin-left: auto; }
html body .dtf-tk-msg.is-cible { box-shadow: inset 0 0 0 1px rgba(141, 128, 255, .45); }
html body .dtf-tk-msg-col { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: 560px; }
html body .dtf-tk-msg.is-moi .dtf-tk-msg-col { align-items: flex-end; }
html body .dtf-tk-msg-tete { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; font-size: 13.5px; }
html body .dtf-tk-msg-tete time, html body .dtf-tk-modif { color: var(--s-gris); font-size: 12px; }
html body .dtf-tk-bulle { padding: 9px 13px; border: 1px solid var(--s-filet); border-radius: 12px; background: rgba(255, 255, 255, .035); font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
html body .dtf-tk-msg.is-moi .dtf-tk-bulle { background: rgba(var(--s-bleu), .12); border-color: rgba(var(--s-bleu), .25); }
html body .dtf-tk-texte code { padding: 1px 5px; border-radius: 4px; background: rgba(255, 255, 255, .08); font-size: .92em; }
html body .dtf-tk-texte blockquote { margin: 2px 0; padding-left: 10px; border-left: 2px solid var(--s-filet-fort); color: var(--s-texte-2); }
html body .dtf-tk-cite { display: grid; gap: 1px; margin: 0 0 7px; padding: 5px 9px; border-left: 2px solid var(--s-accent); border-radius: 5px; background: rgba(255, 255, 255, .04); color: var(--s-texte-2); font-size: 12.5px; text-decoration: none; }
html body .dtf-tk-cite b { color: var(--s-texte); font-size: 12px; }
html body .dtf-tk-imgs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
html body .dtf-tk-img { padding: 0; border: 0; background: none; cursor: zoom-in; }
html body .dtf-tk-img img { display: block; width: 140px; height: 100px; border: 1px solid var(--s-filet); border-radius: 8px; object-fit: cover; }
html body .dtf-tk-fichier { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding: 7px 10px; border: 1px solid var(--s-filet); border-radius: 5px; color: inherit; font-size: 13px; text-decoration: none; word-break: break-all; }
html body .dtf-tk-reacs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
html body .dtf-tk-reacs button { height: 26px; padding: 0 8px; border: 1px solid var(--s-filet); border-radius: 999px; background: rgba(255, 255, 255, .03); color: var(--s-texte); font: inherit; font-size: 12.5px; cursor: pointer; }
html body .dtf-tk-reacs button.is-mien { border-color: rgba(141, 128, 255, .5); background: rgba(141, 128, 255, .12); }
html body .dtf-tk-envoye { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; color: var(--s-gris); font-size: 12px; }
html body .dtf-tk-envoye .dtf-tk-ico { width: 14px; height: 14px; }
/* barre d actions au survol, menu « … » */
html body .dtf-tk-msg-outils { position: absolute; top: 2px; display: none; gap: 2px; padding: 3px; border: 1px solid var(--s-filet-fort); border-radius: 8px; background: #111114; }
html body .dtf-tk-msg.is-moi .dtf-tk-msg-outils { right: calc(100% - 4px); }
html body .dtf-tk-msg.is-staff .dtf-tk-msg-outils { left: calc(100% - 4px); }
html body .dtf-tk-msg:hover .dtf-tk-msg-outils, html body .dtf-tk-msg:focus-within .dtf-tk-msg-outils { display: flex; }
html body .dtf-tk-msg-outils button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 5px; background: none; color: var(--s-texte-2); cursor: pointer; }
html body .dtf-tk-msg-outils button:hover { background: rgba(255, 255, 255, .07); color: #fff; }
html body .dtf-tk-msg-outils .dtf-tk-ico { width: 16px; height: 16px; }
html body .dtf-tk-menu-msg { top: 38px; width: 236px; padding: 6px; }
html body .dtf-tk-msg.is-moi .dtf-tk-menu-msg { right: 0; }
html body .dtf-tk-msg.is-staff .dtf-tk-menu-msg { left: 0; }
html body .dtf-tk-menu-msg > button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--s-texte); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
html body .dtf-tk-menu-msg > button:hover, html body .dtf-tk-menu-msg > button:focus-visible { background: rgba(255, 255, 255, .06); outline: 0; }
html body .dtf-tk-menu-msg .dtf-tk-ico { width: 16px; height: 16px; color: var(--s-texte-2); }
html body .dtf-tk-menu-msg .is-droite { margin-left: auto; transform: rotate(180deg); }
html body .dtf-tk-menu-msg hr { margin: 5px 4px; border: 0; border-top: 1px solid var(--s-filet); opacity: 1; }
html body .dtf-tk-reac-rapides, html body .dtf-tk-reac-plein { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 4px; }
html body .dtf-tk-reac-plein { grid-template-columns: repeat(5, 1fr); padding: 4px 0; }
html body .dtf-tk-reac-plein[hidden] { display: none; }
html body .dtf-tk-reac-rapides button, html body .dtf-tk-reac-plein button { height: 40px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .05); font-size: 19px; cursor: pointer; }
html body .dtf-tk-reac-rapides button:hover, html body .dtf-tk-reac-plein button:hover { background: rgba(255, 255, 255, .1); }
html body .dtf-tk-sys { display: flex; justify-content: center; margin: 4px 0 16px; }
html body .dtf-tk-sys span { padding: 5px 12px; border: 1px solid var(--s-filet); border-radius: 999px; background: rgba(255, 255, 255, .03); color: var(--s-gris); font-size: 12.5px; text-align: center; }
/* bandeau « resolu » et composeur */
html body .dtf-tk-bandeau { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 -16px 14px; padding: 14px 20px; border-top: 1px solid var(--s-filet); }
html body .dtf-tk-bandeau[hidden] { display: none; }
html body .dtf-tk-bandeau div { display: grid; gap: 2px; font-size: 14px; }
html body .dtf-tk-bandeau span { color: var(--s-texte-2); font-size: 13.5px; }
html body .dtf-tk-compo { border: 1px solid var(--s-filet); border-radius: 12px; background: rgba(0, 0, 0, .25); }
html body .dtf-tk-compo[hidden] { display: none; }
html body .dtf-tk-compo textarea { display: block; width: 100%; min-height: 56px; padding: 13px 14px 8px; border: 0; background: none; color: var(--s-texte); font: inherit; font-size: 14.5px; line-height: 1.5; resize: none; outline: 0; }
html body .dtf-tk-compo .dtf-tk-vignettes { margin: 10px 14px 0; }
html body .dtf-tk-contexte { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--s-filet); font-size: 13px; }
html body .dtf-tk-contexte[hidden] { display: none; }
html body .dtf-tk-contexte > span { display: flex; gap: 6px; min-width: 0; color: var(--s-texte-2); }
html body .dtf-tk-contexte > span span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .dtf-tk-contexte button { padding: 0; border: 0; background: none; color: var(--s-gris); cursor: pointer; }
html body .dtf-tk-outils { display: flex; align-items: center; gap: 2px; padding: 8px 10px; border-top: 1px solid var(--s-filet); }
html body .dtf-tk-outil { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 5px; background: none; color: var(--s-gris); cursor: pointer; }
html body .dtf-tk-outil:hover { background: rgba(255, 255, 255, .06); color: var(--s-texte); }
html body .dtf-tk-outil .dtf-tk-ico { width: 16px; height: 16px; }
html body .dtf-tk-outil.is-entree { border: 1px solid var(--s-filet); }
html body .dtf-tk-outil.is-entree[aria-pressed="true"] { color: var(--s-accent); border-color: rgba(141, 128, 255, .4); }
html body .dtf-tk-sep { width: 1px; height: 18px; margin: 0 6px; background: var(--s-filet-fort); }
html body .dtf-tk-espace { flex: 1; }
html body .dtf-tk-btn.is-envoyer { width: auto; height: 36px; margin-left: 8px; padding: 0 16px; font-size: 14px; }
html body .dtf-tk-emojis { bottom: calc(100% + 8px); left: 0; display: grid; grid-template-columns: repeat(8, 32px); gap: 2px; padding: 6px; }
html body .dtf-tk-emojis[hidden] { display: none; }
html body .dtf-tk-emojis button { width: 32px; height: 32px; border: 0; border-radius: 6px; background: none; font-size: 18px; cursor: pointer; }
html body .dtf-tk-emojis button:hover { background: rgba(255, 255, 255, .08); }
html body .dtf-tk-ferme { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid var(--s-filet); border-radius: 12px; color: var(--s-texte-2); font-size: 14px; }
html body .dtf-tk-ferme[hidden] { display: none; }
/* colonne de droite */
html body .dtf-tk-cote { display: flex; flex-direction: column; border-left: 1px solid var(--s-filet); }
html body .dtf-tk-gens { flex: 1; padding: 18px 18px 8px; }
html body .dtf-tk-sur { margin: 0 0 10px; color: var(--s-gris); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
html body .dtf-tk-qui { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
html body .dtf-tk-qui b { display: block; font-size: 14.5px; }
html body .dtf-tk-qui small { color: var(--s-gris); font-size: 12.5px; }
html body .dtf-tk-etat { display: grid; gap: 12px; padding: 16px 18px 18px; border-top: 1px solid var(--s-filet); }
html body .dtf-tk-kv { display: flex; gap: 14px; font-size: 14px; }
html body .dtf-tk-kv span { width: 58px; color: var(--s-gris); }
html body .dtf-tk-kv .is-vert { color: #4ade80; }
html body .dtf-tk-etat .dtf-tk-btn[hidden] { display: none; }
html body .dtf-tk-dm { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; margin-top: 4px; }
html body .dtf-tk-dm label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 600; }
html body .dtf-tk-dm label .dtf-tk-ico { width: 16px; height: 16px; color: var(--s-texte-2); }
html body .dtf-tk-dm p { grid-column: 1 / -1; margin: 0 0 4px; color: var(--s-gris); font-size: 12.5px; line-height: 1.45; }
html body .dtf-tk-dm .dtf-tk-btn { grid-column: 1 / -1; }
html body .dtf-tk-dm input[type="checkbox"] { appearance: none; position: relative; width: 36px; height: 20px; margin: 0; border: 1px solid var(--s-filet-fort); border-radius: 999px; background: #1b1c22; cursor: pointer; transition: background .15s ease; }
html body .dtf-tk-dm input[type="checkbox"]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #8e8e97; transition: transform .15s ease, background .15s ease; }
html body .dtf-tk-dm input[type="checkbox"]:checked { background: rgba(141, 128, 255, .35); border-color: rgba(141, 128, 255, .6); }
html body .dtf-tk-dm input[type="checkbox"]:checked::after { transform: translateX(16px); background: #fff; }
/* visionneuse */
html body .dtf-tk-visio { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; padding: 24px; background: rgba(0, 0, 0, .88); outline: 0; }
html body .dtf-tk-visio img { max-width: 100%; max-height: 100%; border-radius: 8px; }
html body .dtf-tk-visio-x { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--s-filet-fort); border-radius: 8px; background: #111114; color: #fff; cursor: pointer; }
/* pastille du lien « Tickets » de la barre */
html body .dtf-nav-tickets { position: relative; }
html body .dtf-nav-pastille { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
html body .dtf-nav-pastille[hidden] { display: none; }
/* mobile : la colonne de droite passe sous le fil, le composeur reste en bas */
@media (max-width: 860px) {
  html body .dtf-tk-fil { grid-template-columns: 1fr; min-height: 0; }
  html body .dtf-tk-cote { border-left: 0; border-top: 1px solid var(--s-filet); }
  html body .dtf-tk-gauche { padding: 0 10px 10px; }
  html body .dtf-tk-flux { max-height: none; min-height: 260px; }
  html body .dtf-tk-compo { position: sticky; bottom: 8px; z-index: 5; background: #0c0c0e; }
  html body .dtf-tk-msg { max-width: 94%; }
  html body .dtf-tk-moi b { display: none; }
  html body .dtf-tk-moi { padding: 0 4px; }
  html body .dtf-tk-tete { flex-direction: column; align-items: stretch; }
  html body .dtf-tk-bandeau { flex-direction: column; align-items: stretch; margin: 0 -10px 12px; padding: 12px; }
}
@media (prefers-reduced-motion: reduce) { html body .dtf-tk-btn, html body .dtf-tk-dm input { transition: none; } }
/* les boutons d envoi de la page tickets ne prennent pas le style des boutons d achat (button[type="submit"] du theme) */
html body .dtf-tk button.dtf-tk-btn[type="submit"] { background: #fff !important; border-color: #fff !important; color: #0a0a0c !important; text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important; }
html body .dtf-tk button.dtf-tk-btn[type="submit"]:hover { background: #e2e2e6 !important; border-color: #e2e2e6 !important; }
/* fichiers joints avant l envoi (2026-10-28) : puce nom + retrait, a cote des vignettes d images */
html body .dtf-tk-doc { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; height: 32px; padding: 0 6px 0 10px; border: 1px solid var(--s-filet); border-radius: 8px; background: var(--s-case); color: var(--s-texte-2); font-size: 13px; }
html body .dtf-tk-doc > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .dtf-tk-doc .dtf-tk-ico { width: 14px; height: 14px; flex: none; }
html body .dtf-tk-doc button { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 5px; background: none; color: var(--s-gris); cursor: pointer; }
html body .dtf-tk-doc button:hover { background: rgba(255, 255, 255, .06); color: var(--s-texte); }

/* ---- DA blanche (2026-10-29, « utilise celui attache avec une DA blanche a la place de bleu pour les
   gradients glow et tout, tu peux garder bleu pour les boutons ») ----
   Les lueurs, halos, filets, focus et pictogrammes passent du bleu au blanc casse par la variable --s-bleu
   (et --s-bleu-clair) ; les boutons gardent leur bleu (couleurs ecrites en dur, intouchees ici) ; la couleur
   de statut « Updating » reste bleue (sens, pas decor). Fond : maquette « bords blancs » (W6) : lumiere sur les
   cotes, centre noir, + quelques lueurs rondes semees le long de la page (« des glow aleatoire rond a quelques endroits »).
   Retour : retirer ce bloc. Maquettes : refonte-noire/maquettes-fonds/. */
:root { --s-bleu: 236, 238, 244; --s-bleu-clair: #e8eaf0; }
html body .dtf-fond {
  --s-grain-bleu: var(--s-grain);
  background:
    radial-gradient(500px 1100px at -80px 380px, rgba(236, 238, 244, .16), transparent 70%),
    radial-gradient(500px 1100px at calc(100% + 80px) 520px, rgba(236, 238, 244, .14), transparent 70%),
    radial-gradient(420px 900px at -60px 1900px, rgba(236, 238, 244, .09), transparent 70%),
    radial-gradient(420px 900px at calc(100% + 60px) 2700px, rgba(236, 238, 244, .08), transparent 70%),
    radial-gradient(circle 280px at 74% 1250px, rgba(236, 238, 244, .12), transparent 70%),
    radial-gradient(circle 240px at 22% 2250px, rgba(236, 238, 244, .11), transparent 70%),
    radial-gradient(circle 320px at 82% 3350px, rgba(236, 238, 244, .11), transparent 70%),
    radial-gradient(circle 260px at 36% 4300px, rgba(236, 238, 244, .10), transparent 70%),
    radial-gradient(circle 280px at 64% 5300px, rgba(236, 238, 244, .10), transparent 70%),
    radial-gradient(circle 240px at 14% 6200px, rgba(236, 238, 244, .09), transparent 70%);
}
html body .dtf-fond i { display: none; }
/* pictogrammes et petits accents qui avaient un bleu ecrit en dur */
html body .dtf-feature-icon, html body .dtf-why-icone, html body .dtf-faq3-help-ico { color: #e8eaf0 !important; }
html body .dtf-cx-champ:focus-within { color: #fff; }
html body .dtf-cx-renvoi, html body .gs-pas .gs-pas-av { color: #d4d6dd; }
html body .dtf-how-fil span, html body .dtf-why2-flux .f-barre i { background: linear-gradient(90deg, #9a9ca6, #f2f2f5); }
html body .dtf-why2-flux .f-impulsion { background: linear-gradient(90deg, transparent, #d4d6dd, #fff); filter: drop-shadow(0 0 6px rgba(255, 255, 255, .6)); }
html body .dtf-how-grille span.is-choisi { border-color: #e8eaf0; }
html body .dtf-chiffre-courbe path { stroke: #e8eaf0; }
html body .gs-pas .gs-pas-av { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); }
html body .dtf-ld-bar i { background: #f2f2f5; }
html body .dtf-vid-play:focus-visible, html body .dtf-marque:focus-visible, html body .dtf-caisse-x:focus-visible { outline-color: #e8eaf0; }
html body .dtf-ld-o {
  background:
    var(--s-grain-case),
    radial-gradient(55% 45% at 12% 18%, rgba(236, 238, 244, .08), transparent 70%),
    radial-gradient(50% 42% at 88% 84%, rgba(236, 238, 244, .05), transparent 70%),
    #000 !important;
}

/* Guide des pages de jeu (2026-10-30) : chiffres du catalogue, profils, questions */
html body .dtf-gg-chiffres { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
html body .dtf-gg-chiffres li { padding: 8px 14px; border: 1px solid var(--s-filet); border-radius: 8px; font-size: 14px; color: var(--s-gris); background: var(--s-case); }
html body .dtf-gg-chiffres b { color: var(--s-texte); font-variant-numeric: tabular-nums; }
html body .dtf-gg-profils { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
html body .dtf-gg-profils .dtf-jp-liens { display: flex; flex-wrap: wrap; gap: 6px 14px; }
html body .dtf-gg-familles { margin: 16px 0 0; max-width: 760px; font-size: 14px; line-height: 1.7; color: var(--s-gris); }
html body .dtf-gg-familles b { color: var(--s-texte); }
html body .dtf-gg-faq { display: grid; gap: 8px; max-width: 860px; }
html body .dtf-gg-faq details { border: 1px solid var(--s-filet); border-radius: 8px; background: var(--s-case); padding: 0 18px; }
html body .dtf-gg-faq summary { cursor: pointer; padding: 14px 0; font-weight: 600; color: var(--s-texte); }
html body .dtf-gg-faq details p { margin: 0 0 14px; font-size: 14px; line-height: 1.7; color: var(--s-gris); }

/* Avis : etoiles du formulaire et mention d achat verifie (2026-11-04) */
html body .dtf-tk-etoiles { display: flex; gap: 4px; }
html body .dtf-tk-etoile { padding: 2px 4px; border: 0; background: none; color: rgba(255,255,255,.22); font-size: 1.6rem; line-height: 1; cursor: pointer; }
html body .dtf-tk-etoile.is-on { color: #f5b70a; }
html body .dtf-tk-etoile:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }
html body .dtf-rcard-verif { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 12px; color: #8a8a93; font-size: .76rem; }
html body .dtf-rcard-verif svg { flex: none; color: #4ade80; }
/* How it works : vraies captures (2026-11-04) */
html body .dtf-how-vue-img { height: auto; aspect-ratio: 816 / 441; }
html body .dtf-how-vue-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* Note grise sous l onglet System Requirements */
html body .dtf-sr-note { margin: 14px 0 0; color: #7d7d86; font-size: .8rem; }
/* How it works v3 (2026-11-04) : etapes a gauche, une capture entiere a droite */
html body .dtf-how2-corps { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 28px; align-items: center; margin-top: 32px; }
html body .dtf-how2-etapes { display: grid; gap: 6px; }
html body .dtf-how2-etape { display: flex; gap: 16px; width: 100%; padding: 18px; border: 1px solid transparent; border-radius: 12px; background: none; color: inherit; text-align: left; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
html body .dtf-how2-etape:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
html body .dtf-how2-etape.is-actif { border-color: var(--s-filet); background: rgba(255, 255, 255, .04); }
html body .dtf-how2-etape .n { flex: none; width: 28px; font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .35); transition: color .2s ease; }
html body .dtf-how2-etape.is-actif .n { color: #fff; }
html body .dtf-how2-etape .t { display: grid; gap: 6px; }
html body .dtf-how2-etape b { font-size: 1.05rem; font-weight: 600; color: rgba(255, 255, 255, .6); transition: color .2s ease; }
html body .dtf-how2-etape.is-actif b { color: #fff; }
html body .dtf-how2-etape small { font-size: .9rem; line-height: 1.55; color: #85858e; }
html body .dtf-how2-vue { position: relative; aspect-ratio: 8 / 5; overflow: hidden; border: 1px solid var(--s-filet); border-radius: 12px; background: #0b0b0d; }
html body .dtf-how2-vue img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease; }
html body .dtf-how2-vue img.is-actif { opacity: 1; }
@media (max-width: 899px) {
  html body .dtf-how2-corps { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  html body .dtf-how2-vue { order: -1; position: sticky; top: 96px; z-index: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html body .dtf-how2-vue img, html body .dtf-how2-etape, html body .dtf-how2-etape .n, html body .dtf-how2-etape b { transition: none; }
}
/* debut glow accueil (2026-11-04, « en blanc, des lignes glow comme solar », puis « coupures nettes ») : une seule couche d arcs blancs flous + grain
   derriere toute la zone How it works -> Pay the way you want, fondue en haut et en bas. Sans animation, rien ne deborde de la page. */
html body .dtf-glow-zone { position: relative; }
html body .dtf-glow-fond { position: absolute; left: 0; right: 0; top: -160px; bottom: -160px; z-index: -1; pointer-events: none;
  --p1: circle 1250px at 130% 22%; --p2: circle 1290px at 130% 22%; --p3: circle 1250px at -30% 72%; --p4: circle 1290px at -30% 72%; --p5: circle 900px at 125% 96%; --p6: circle 930px at 125% 96%;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); }
html body .dtf-glow-fond::before, html body .dtf-glow-fond::after { content: ''; position: absolute; inset: 0; }
html body .dtf-glow-fond::before { filter: blur(13px); background: radial-gradient(var(--p1), transparent 88.5%, rgba(255, 255, 255, .42) 91%, transparent 93.5%), radial-gradient(var(--p2), transparent 92.5%, rgba(255, 255, 255, .22) 94%, transparent 95.5%), radial-gradient(var(--p3), transparent 88.5%, rgba(255, 255, 255, .42) 91%, transparent 93.5%), radial-gradient(var(--p4), transparent 92.5%, rgba(255, 255, 255, .22) 94%, transparent 95.5%), radial-gradient(var(--p5), transparent 88.5%, rgba(255, 255, 255, .42) 91%, transparent 93.5%), radial-gradient(var(--p6), transparent 92.5%, rgba(255, 255, 255, .22) 94%, transparent 95.5%); }
html body .dtf-glow-fond::after { background-image: var(--s-grain); background-size: 200px 200px; opacity: .14; -webkit-mask-image: radial-gradient(var(--p1), transparent 88.5%, #000 91%, transparent 93.5%), radial-gradient(var(--p2), transparent 92.5%, #000 94%, transparent 95.5%), radial-gradient(var(--p3), transparent 88.5%, #000 91%, transparent 93.5%), radial-gradient(var(--p4), transparent 92.5%, #000 94%, transparent 95.5%), radial-gradient(var(--p5), transparent 88.5%, #000 91%, transparent 93.5%), radial-gradient(var(--p6), transparent 92.5%, #000 94%, transparent 95.5%); mask-image: radial-gradient(var(--p1), transparent 88.5%, #000 91%, transparent 93.5%), radial-gradient(var(--p2), transparent 92.5%, #000 94%, transparent 95.5%), radial-gradient(var(--p3), transparent 88.5%, #000 91%, transparent 93.5%), radial-gradient(var(--p4), transparent 92.5%, #000 94%, transparent 95.5%), radial-gradient(var(--p5), transparent 88.5%, #000 91%, transparent 93.5%), radial-gradient(var(--p6), transparent 92.5%, #000 94%, transparent 95.5%); }
/* les deux larges anneaux bleus du fond qui tombent dans cette zone sont retires, sur l accueil seulement */
html body:has(.dtf-how2) .dtf-fond i:nth-child(3), html body:has(.dtf-how2) .dtf-fond i:nth-child(4) { display: none; }
@media (max-width: 767.98px) {
  html body .dtf-glow-fond { --p1: circle 640px at 135% 16%; --p2: circle 660px at 135% 16%; --p3: circle 640px at -38% 50%; --p4: circle 660px at -38% 50%; --p5: circle 640px at 135% 84%; --p6: circle 660px at 135% 84%; }
}
/* fin glow accueil */