@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
/*
 * Enter any custom CSS here.
 * This file will not be overwritten by theme updates.
*/

/* ---- Navbar: logo seul + menu des mises a jour (cloche) ------------------- */
.navbar-brand img { max-height: 34px; width: auto; }

.dtf-updates .btn { padding-inline: .6rem; }

/* Pastille: signale une mise a jour non lue, sans chiffre - il n apporterait rien. */
.dtf-updates-dot {
  position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #fbbf24;
}

.dtf-updates-menu { width: 340px; max-width: 92vw; }
.dtf-updates-list { max-height: 380px; overflow-y: auto; }

.dtf-update {
  display: flex; gap: .6rem;
  padding: .7rem .85rem;
  border-top: 1px solid rgba(160, 156, 185, .16);
}
.dtf-update:first-child { border-top: 0; }

.dtf-update-dot {
  flex: 0 0 auto; margin-top: .45rem;
  width: 7px; height: 7px; border-radius: 50%;
  background: #fbbf24;
}

.dtf-update-title { font-weight: 600; font-size: .88rem; }
.dtf-update-product,
.dtf-update-text { font-size: .8rem; opacity: .72; }
.dtf-update-date { font-size: .72rem; opacity: .5; margin-top: .25rem; }

/* ---- Navbar: liens en pastilles ------------------------------------------
   Le lien actif est un aplat violet plein, les autres restent discrets. Un seul
   element colore a la fois: c est ce qui rend la barre lisible d un coup d oeil. */
.navbar { padding-block: .35rem; }

.dtf-nav { gap: .25rem; }

.dtf-nav .nav-link {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .8rem !important;
  border-radius: 9px;
  font-size: .9rem; font-weight: 600;
  color: #9d9aad !important;
  transition: background-color .15s ease, color .15s ease;
}

.dtf-nav .nav-link svg { opacity: .85; flex: 0 0 auto; }

.dtf-nav .nav-link:hover {
  background: rgba(160, 156, 185, .10);
  color: #fff !important;
}

.dtf-nav .nav-link.active {
  background: #7c5cff;
  color: #fff !important;
}

.dtf-nav .nav-link.active svg { opacity: 1; }

/* A droite, les icones sont des carres nets, pas des boutons a rallonge. */
.navbar-nav.gap-3 { gap: .5rem !important; }

.dtf-updates .btn,
.navbar .cart .btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0 !important;
  border-radius: 9px;
}

.navbar .user .btn { border-radius: 9px; padding: .45rem 1rem; font-size: .9rem; }

/* Le theme "pro" pose ses propres regles sur .nav-link.active: on remonte la
   specificite et on force le fond, sinon la pastille active reste transparente. */
.navbar .dtf-nav .nav-link.active,
.navbar .dtf-nav .nav-item .nav-link.active {
  background: #7c5cff !important;
  color: #fff !important;
}

/* ---- Navbar v2: angles nets, degrade sur l actif, barre au survol ---------
   Remplace le comportement precedent (fond gris au survol, coins arrondis).
   Un seul element colore a la fois; le survol se signale par une barre, pas
   par un aplat, ce qui evite deux zones colorees en meme temps. */
.navbar .dtf-nav .nav-link,
.navbar .dtf-nav .nav-item .nav-link {
  position: relative;
  border-radius: 4px !important;
  background: transparent !important;
  color: #9d9aad !important;
  overflow: visible;
}

/* Barre sous le lien: fine au survol, pleine largeur sur l actif. */
.navbar .dtf-nav .nav-link::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -7px;
  height: 3px; width: 0;
  border-radius: 2px;
  background: #7c5cff;
  transform: translateX(-50%);
  transition: width .18s ease;
}

.navbar .dtf-nav .nav-link:hover { color: #fff !important; }
.navbar .dtf-nav .nav-link:hover::after { width: 60%; }

.navbar .dtf-nav .nav-link.active,
.navbar .dtf-nav .nav-item .nav-link.active {
  background: linear-gradient(135deg, #4f7cff 0%, #7c5cff 55%, #8b5cf6 100%) !important;
  color: #fff !important;
}

.navbar .dtf-nav .nav-link.active::after { width: 70%; }

/* Angles nets partout ailleurs dans la barre. */
.navbar .dtf-updates .btn,
.navbar .cart .btn,
.navbar .user .btn,
.navbar .dtf-updates-menu { border-radius: 4px !important; }

/* ---- Palette bleutee ------------------------------------------------------
   Les neutres virent au bleu ardoise plutot qu au violet: c est ce qui donne
   sa froideur a la reference. L accent violet ne bouge pas, il ressort mieux
   sur un fond bleute que sur un fond deja violace. */
:root {
  --dtf-ink: #0b1018;
  --dtf-raise: #121a26;
  --dtf-raise-2: #16202e;
  --dtf-line: rgba(125, 150, 190, .16);
  --dtf-line-strong: rgba(125, 150, 190, .30);
  --dtf-dim: #8b9ab5;
}

body { background: #0b1018 !important; }

.navbar { background: #0e141e !important; border-bottom: 1px solid rgba(125, 150, 190, .16); }

.card,
.modal-content,
.offcanvas,
.dropdown-menu,
.accordion-item,
.list-group-item,
.form-control,
.form-select,
.input-group-text,
.choices__inner {
  background: #121a26 !important;
  border-color: rgba(125, 150, 190, .16) !important;
}

.card:hover { border-color: rgba(125, 150, 190, .30) !important; }

.card-img-top { background: #0e141e; }

.navbar .dtf-nav .nav-link,
.navbar .dtf-nav .nav-item .nav-link,
.text-muted,
.component .lead { color: #8b9ab5 !important; }

/* Separateur vertical entre le logo et les liens. En ::before sur la liste: pas
   de balise en plus, et il disparait tout seul quand le menu passe en colonne. */
@media (min-width: 992px) {
  .navbar .dtf-nav { position: relative; padding-left: 1.1rem; margin-left: 1.1rem; }
  .navbar .dtf-nav::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 1px; height: 22px;
    transform: translateY(-50%);
    background: rgba(125, 150, 190, .28);
  }
}

/* Le texte de l onglet actif doit rester blanc quoi qu il arrive: pro.css le
   repasse en gris via une regle plus specifique. */
.navbar .dtf-nav .nav-item .nav-link.active,
.navbar .dtf-nav .nav-item .nav-link.active span { color: #fff !important; }

/* ---- Mini panier ---------------------------------------------------------- */
.dtf-cart-menu { width: 340px; max-width: 92vw; }
.dtf-cart-list { max-height: 320px; overflow-y: auto; }

.dtf-cart-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .85rem;
  border-top: 1px solid rgba(125, 150, 190, .16);
}
.dtf-cart-item:first-child { border-top: 0; }

.dtf-cart-item img,
.dtf-cart-thumb {
  width: 38px; height: 38px; flex: 0 0 auto;
  object-fit: cover; border-radius: 4px;
  background: #0e141e;
}

.dtf-cart-info { min-width: 0; flex: 1 1 auto; }
.dtf-cart-name {
  font-size: .85rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dtf-cart-variant { font-size: .75rem; opacity: .65; }

/* Les quantites et montants s alignent en colonne d une ligne a l autre. */
.dtf-cart-qty {
  font-size: .8rem; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.dtf-cart-foot { border-top: 1px solid rgba(125, 150, 190, .16); }
.dtf-cart-total { font-variant-numeric: tabular-nums; }

/* Les deux boutons du panier tiennent sur une ligne: sans cela "Go to cart" se
   pliait en trois lignes et debordait de la carte. */
.dtf-cart-foot .dtf-cart-btn { white-space: nowrap; padding-inline: .9rem; }
.dtf-cart-foot .btn-outline-primary { flex: 0 0 auto; }

/* ---- Typographie ----------------------------------------------------------
   Inter: dessinee pour les interfaces, chiffres lisibles et hauteur d x
   generreuse. display=swap pour que le texte s affiche immediatement avec la
   police systeme plutot que de rester invisible pendant le telechargement. */
body,
.navbar,
.btn,
.form-control,
.form-select,
.card,
.dropdown-menu {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

h1, h2, h3, h4, .card-title, .navbar-brand { letter-spacing: -.02em; }

/* ---- Panier: deux boutons a parts egales ----------------------------------
   Le principal en violet, le secondaire en gris: deux actions de meme poids
   visuel s annuleraient, l oeil ne saurait plus laquelle est la sortie. */
.dtf-cart-foot .dtf-cart-btn {
  flex: 1 1 0 !important;
  width: 50%;
  white-space: nowrap;
  padding-inline: .5rem !important;
  text-align: center;
  font-size: .9rem;
}

.dtf-cart-foot .btn-primary.dtf-cart-btn {
  background: linear-gradient(135deg, #4f7cff 0%, #7c5cff 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.dtf-cart-foot .btn-outline-primary.dtf-cart-btn {
  background: #202a3a !important;
  border: 1px solid rgba(125, 150, 190, .30) !important;
  color: #c7d2e4 !important;
}

.dtf-cart-foot .btn-outline-primary.dtf-cart-btn:hover {
  background: #27334699 !important;
  border-color: rgba(125, 150, 190, .45) !important;
  color: #fff !important;
}

/* ---- Mini panier: colonne de droite, selecteur et croix ------------------- */
.dtf-cart-right { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }

.dtf-cart-stepper {
  display: inline-flex; align-items: center; gap: .1rem;
  border: 1px solid rgba(125, 150, 190, .26);
  border-radius: 4px;
  overflow: hidden;
}

.dtf-cart-stepper button {
  border: 0; background: transparent;
  color: #8b9ab5;
  width: 22px; height: 22px;
  line-height: 1; font-size: .85rem; font-weight: 700;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}

.dtf-cart-stepper button:hover { background: rgba(125, 150, 190, .14); color: #fff; }

.dtf-cart-stepper span {
  min-width: 20px; text-align: center;
  font-size: .78rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* La croix est separee du reste par un filet: c est la seule action destructive. */
.dtf-cart-stepper .dtf-cart-del {
  border-left: 1px solid rgba(125, 150, 190, .26);
  font-size: .95rem;
}
.dtf-cart-stepper .dtf-cart-del:hover { background: rgba(248, 113, 113, .16); color: #f87171; }

/* Vignette + nom cliquables vers la fiche produit. */
.dtf-cart-link {
  display: flex; align-items: center; gap: .6rem;
  flex: 1 1 auto; min-width: 0;
  text-decoration: none; color: inherit;
  border-radius: 4px;
  transition: color .12s ease;
}
.dtf-cart-link:hover { color: #fff; }
.dtf-cart-link:hover .dtf-cart-name { text-decoration: underline; }
.dtf-cart-link:focus-visible { outline: 2px solid #7c5cff; outline-offset: 2px; }

/* Les trois boutons du selecteur occupent exactement la meme case: sans hauteur
   imposee et sans centrage explicite, le "+" ne remplissait pas sa cellule. */
.dtf-cart-stepper { align-items: stretch; height: 24px; }

.dtf-cart-stepper button {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 100%;
  padding: 0; margin: 0;
  font-size: .9rem; line-height: 1;
  font-family: inherit;
}

.dtf-cart-stepper span {
  display: flex; align-items: center; justify-content: center;
  height: 100%; min-width: 22px;
}

/* Le gap entre les boutons laissait une bande non survolable a droite du "+".
   Les cases sont maintenant jointives, separees par un filet et non par du vide. */
.dtf-cart-stepper { gap: 0 !important; }
.dtf-cart-stepper button + button,
.dtf-cart-stepper span + button { border-left: 1px solid rgba(125, 150, 190, .26); }

/* ---- Navbar v3: texte plus petit, respiration entre les groupes -----------
   Reference: liens compacts et discrets a gauche, groupe icones + compte nettement
   detache a droite. Sans cet ecart, la barre se lit comme une seule rangee confuse. */
.navbar .dtf-nav { gap: .1rem; }

.navbar .dtf-nav .nav-link,
.navbar .dtf-nav .nav-item .nav-link {
  font-size: .82rem;
  font-weight: 500;
  padding: .4rem .7rem !important;
  gap: .4rem;
}

.navbar .dtf-nav .nav-link svg { width: 15px; height: 15px; }

/* Ecart franc entre les pages et le bloc de droite. */
@media (min-width: 992px) {
  .navbar .navbar-nav.gap-3 { margin-left: 2.25rem; gap: .6rem !important; }
}

.navbar .user .btn { font-size: .82rem; font-weight: 600; padding: .42rem 1rem; }

/* ---- Mini panier: retrait d une ligne sans a-coup ------------------------- */
.dtf-cart-item {
  overflow: hidden;
  transition: height .18s ease, opacity .14s ease, padding .18s ease;
}

.dtf-cart-item.is-leaving {
  opacity: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top-color: transparent !important;
}

@media (prefers-reduced-motion: reduce) {
  .dtf-cart-item { transition: none; }
}

/* ---- Selecteur: deux carres, un chiffre, une croix nue -------------------
   Le cadre unique autour de l ensemble melangeait deux natures d action. Ici
   "-" et "+" sont des touches encadrees, la croix reste un simple pictogramme:
   elle ne modifie pas une quantite, elle retire la ligne. */
.dtf-cart-stepper {
  border: 0 !important;
  border-radius: 0 !important;
  gap: .3rem !important;
  height: auto !important;
  overflow: visible;
}

.dtf-cart-stepper button + button,
.dtf-cart-stepper span + button { border-left: 0 !important; }

.dtf-cart-stepper button[data-act='dec'],
.dtf-cart-stepper button[data-act='inc'] {
  width: 22px; height: 22px;
  border: 1px solid rgba(125, 150, 190, .28) !important;
  border-radius: 4px;
  background: rgba(125, 150, 190, .06);
  color: #c7d2e4;
}

.dtf-cart-stepper button[data-act='dec']:hover,
.dtf-cart-stepper button[data-act='inc']:hover {
  background: rgba(124, 92, 255, .18);
  border-color: rgba(124, 92, 255, .55) !important;
  color: #fff;
}

/* La croix: pas de cadre, pas de fond, juste le signe. */
.dtf-cart-stepper .dtf-cart-del {
  border: 0 !important;
  background: transparent !important;
  width: 18px; height: 22px;
  margin-left: .15rem;
  color: #7d8ba5;
  font-size: 1rem;
}

.dtf-cart-stepper .dtf-cart-del:hover {
  background: transparent !important;
  color: #f87171;
}

/* ---- Selecteur, version finale -------------------------------------------
   Un seul rectangle autour de "- nombre +": c est un controle unique, il doit se
   lire comme tel. La croix reste dehors, nue: elle ne regle pas une quantite. */
.dtf-cart-stepper {
  gap: 0 !important;
  align-items: stretch;
}

/* Le rectangle est porte par le groupe des trois, pas par chaque touche. */
.dtf-cart-stepper button[data-act='dec'],
.dtf-cart-stepper button[data-act='inc'],
.dtf-cart-stepper > span {
  border: 1px solid rgba(125, 150, 190, .28) !important;
  border-radius: 0 !important;
  background: rgba(125, 150, 190, .06);
  height: 22px;
  color: #c7d2e4;
}

/* Filets internes partages: pas de double trait entre deux cases. */
.dtf-cart-stepper > span,
.dtf-cart-stepper button[data-act='inc'] { border-left: 0 !important; }

.dtf-cart-stepper button[data-act='dec'] { border-radius: 4px 0 0 4px !important; }
.dtf-cart-stepper button[data-act='inc'] { border-radius: 0 4px 4px 0 !important; }

.dtf-cart-stepper > span {
  min-width: 26px;
  font-size: .78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.dtf-cart-stepper button[data-act='dec']:hover,
.dtf-cart-stepper button[data-act='inc']:hover {
  background: rgba(124, 92, 255, .18);
  border-color: rgba(124, 92, 255, .55) !important;
  color: #fff;
  position: relative; /* le filet violet passe au-dessus du voisin */
  z-index: 1;
}

/* ---- Hero ----------------------------------------------------------------
   Texte cale a gauche, sur la moitie de la largeur: l image de fond garde son
   sujet visible a droite. Le degrade ne porte que sur la seconde ligne. */
.hero .content {
  max-width: 620px;
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

.dtf-hero-title {
  display: flex;
  flex-direction: column;
  font-weight: 800;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  margin-bottom: .9rem;
  text-wrap: balance;
}

.dtf-hero-line { color: #fff; }

/* background-clip: le degrade remplit la lettre elle-meme. */
.dtf-hero-accent {
  background: linear-gradient(100deg, #4f7cff 0%, #7c5cff 55%, #a78bfa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.dtf-hero-sub {
  color: #b9c3d6;
  font-size: 1.02rem;
  max-width: 52ch;
  margin-bottom: 1.6rem;
}

.dtf-hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; }

.dtf-hero-btn {
  font-size: .9rem;
  font-weight: 600;
  padding: .62rem 1.3rem;
  border-radius: 6px;
}

.dtf-hero-btn.btn-primary {
  background: linear-gradient(135deg, #4f7cff 0%, #7c5cff 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* Le second bouton reste sombre: deux boutons de meme poids se neutraliseraient. */
.dtf-hero-btn-ghost {
  background: #161d2a !important;
  border: 1px solid rgba(125, 150, 190, .28) !important;
  color: #e6ebf5 !important;
}

.dtf-hero-btn-ghost:hover {
  background: #1d2635 !important;
  border-color: rgba(125, 150, 190, .45) !important;
  color: #fff !important;
}

@media (max-width: 767.98px) {
  .hero .content { max-width: 100%; }
  .dtf-hero-sub { max-width: 100%; }
}

/* Titre du hero: un cran en dessous. La taille reste fluide, seule l echelle bouge. */
.dtf-hero-title { font-size: clamp(1.8rem, 4.1vw, 2.8rem); }
.dtf-hero-sub { font-size: .96rem; }

/* Un cran de plus vers le bas, et davantage d air entre le texte et les boutons. */
.dtf-hero-title { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
.dtf-hero-sub { font-size: .92rem; margin-bottom: 2.6rem; }

/* Descend le bloc de texte DANS le hero, sans toucher au conteneur ni a l image. */
.hero .content { margin-top: 3.5rem; }

@media (max-width: 991.98px) { .hero .content { margin-top: 1rem; } }

/* ---- Bandeau d arguments --------------------------------------------------
   Quatre colonnes sur une ligne, pictogramme en carre a gauche du texte. Pas de
   carte ni de bordure: le bandeau doit prolonger le hero, pas le concurrencer. */
.dtf-features { padding: 2.2rem 0; border-bottom: 1px solid rgba(125, 150, 190, .12); }

.dtf-features-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.6rem;
}

.dtf-feature { display: flex; align-items: flex-start; gap: .85rem; }

.dtf-feature-icon {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: 8px;
  background: rgba(124, 92, 255, .12);
  border: 1px solid rgba(124, 92, 255, .22);
  color: #a78bfa;
}

.dtf-feature-body { min-width: 0; }

.dtf-feature h3 {
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 .25rem;
  letter-spacing: -.01em;
}

.dtf-feature p {
  font-size: .84rem;
  line-height: 1.45;
  color: #8b9ab5;
  margin: 0;
}

@media (max-width: 991.98px) {
  .dtf-features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem; }
}

@media (max-width: 575.98px) {
  .dtf-features-grid { grid-template-columns: 1fr; }
}

/* ---- Raccord hero / bandeau ----------------------------------------------
   Degrade du transparent vers le fond de page sur le bas du hero: la coupure
   nette entre la photo et le bandeau se lisait comme deux blocs colles.
   En ::after, sans balise ajoutee, et sans capter le curseur. */
.hero { position: relative; }

.hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 45%;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(11, 16, 24, 0) 0%, rgba(11, 16, 24, .55) 55%, #0b1018 100%);
}

/* Le contenu doit rester au-dessus du degrade. */
.hero .container { position: relative; z-index: 2; }

/* Le bandeau prolonge le fond, sans arete visible en haut. */
.dtf-features { background: #0b1018; border-top: 0; }

/* ---- Pictogrammes: au moins aussi hauts que le texte a cote --------------- */
.dtf-feature { align-items: center; gap: 1rem; }

.dtf-feature-icon {
  width: 52px; height: 52px;
  border-radius: 10px;
}

.dtf-feature-icon svg { width: 24px; height: 24px; }

/* ---- Hero: image entiere --------------------------------------------------
   Le theme utilise "cover", qui remplit le cadre en rognant les bords. "contain"
   fait tenir l image en entier; le fond de page comble ce qui reste, donc aucune
   bande claire ne se voit. Pas de deformation: le ratio est conserve. */
.hero {
  background-size: contain !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-color: #0b1018 !important;
}

@media (max-width: 991.98px) {
  /* Sur mobile l image entiere deviendrait une bande trop fine: on rogne a nouveau. */
  .hero {
    background-size: cover !important;
    background-position: center !important;
  }
}

/* ---- Hero: le cadre epouse l image ---------------------------------------
   Image mesuree: 1920x700. En donnant ce rapport au hero, la largeur est remplie
   sans rognage ET sans bande laterale, et la hauteur s arrete pile au bas de la
   photo: le bandeau d arguments vient donc directement dessous.
   "cover" redevient sur: le cadre a exactement le ratio de l image. */
.hero {
  aspect-ratio: 1920 / 700;
  height: auto !important;
  min-height: 0 !important;
  background-size: cover !important;
  background-position: center !important;
}

/* Le fondu se cale sur le bas de l image, qui est desormais le bas du hero. */
.hero::after { height: 38%; }

@media (max-width: 991.98px) {
  /* Trop plat sur mobile: on retrouve un cadre lisible, quitte a rogner. */
  .hero {
    aspect-ratio: auto;
    min-height: 420px !important;
  }
}

/* ---- Groupes en page d accueil -------------------------------------------
   Grille de 3 colonnes: 9 groupes tombent juste sur 3 lignes. En 4 colonnes la
   derniere ligne n en aurait qu un seul. Cartes en image seule, dans un cadre. */
.dtf-groups-box {
  border: 1px solid rgba(125, 150, 190, .16);
  border-radius: 12px;
  background: rgba(18, 26, 38, .55);
  padding: 1.4rem;
}

.dtf-groups-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding-bottom: 1.1rem; margin-bottom: 1.4rem;
  border-bottom: 1px solid rgba(125, 150, 190, .14);
}

.dtf-groups-title {
  font-size: 1.15rem; font-weight: 700; color: #fff;
  margin: 0 0 .3rem; letter-spacing: -.01em;
}

.dtf-groups-sub { font-size: .86rem; color: #8b9ab5; margin: 0; }

.dtf-groups-more {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .82rem; font-weight: 600;
  padding: .5rem 1rem; border-radius: 6px;
  white-space: nowrap;
}

.dtf-groups-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

/* Carte: l image occupe toute la surface, rien d autre. */
.dtf-group-card {
  display: block; position: relative;
  aspect-ratio: 16 / 7;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(125, 150, 190, .14);
  background: #0e141e;
  text-decoration: none;
  transition: border-color .16s ease, transform .16s ease;
}

.dtf-group-card img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .25s ease;
}

/* Survol volontairement leger: un frement de l image et un filet qui s eclaire. */
.dtf-group-card:hover { border-color: rgba(124, 92, 255, .45); }
.dtf-group-card:hover img { transform: scale(1.03); }
.dtf-group-card:focus-visible { outline: 2px solid #7c5cff; outline-offset: 2px; }

.dtf-group-fallback {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  color: #8b9ab5; font-weight: 600; font-size: .9rem;
}

@media (max-width: 991.98px) { .dtf-groups-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .dtf-groups-grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .dtf-group-card, .dtf-group-card img { transition: none; }
  .dtf-group-card:hover img { transform: none; }
}

/* ---- Fenetre d un groupe: une seule ligne qui defile ---------------------- */
.modal-body .dtf-group-rail {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: .25rem .25rem 1rem;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 92, 255, .55) transparent;
}

.dtf-group-rail::-webkit-scrollbar { height: 6px; }
.dtf-group-rail::-webkit-scrollbar-track { background: rgba(125, 150, 190, .10); border-radius: 99px; }
.dtf-group-rail::-webkit-scrollbar-thumb { background: rgba(124, 92, 255, .55); border-radius: 99px; }
.dtf-group-rail:focus-visible { outline: 2px solid #7c5cff; outline-offset: 3px; }

/* Largeur fixe: les cartes ne se compriment pas, c est ce qui cree le defilement. */
.dtf-group-slide {
  flex: 0 0 240px;
  max-width: 240px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.dtf-group-slide .card { height: 100%; }

/* "In Stock" du pied de carte remplace par le bouton d achat: dans cette fenetre
   la disponibilite est deja portee par la pastille de statut sous le nom. */
.dtf-group-slide .card .info .text-primary { display: none; }

.dtf-buy-now {
  display: block;
  text-align: center;
  font-size: .85rem;
  font-weight: 600;
  padding: .55rem 1rem;
  border-radius: 6px;
  background: linear-gradient(135deg, #4f7cff 0%, #7c5cff 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.dtf-buy-now:hover { filter: brightness(1.08); }

@media (max-width: 575.98px) {
  .dtf-group-slide { flex: 0 0 78%; max-width: 78%; }
}

/* ---- Carte de la fenetre de groupe ---------------------------------------
   Image, puis nom + statut, puis prix et bouton. Le tout est un seul lien:
   pas de survol "View Details" par-dessus l image. */
.dtf-group-rail { scroll-snap-type: none !important; scroll-behavior: auto; }
.dtf-group-slide { flex: 0 0 235px; max-width: 235px; }

.dtf-pcard {
  display: flex; flex-direction: column;
  height: 100%;
  border: 1px solid rgba(125, 150, 190, .18);
  border-radius: 10px;
  background: #121a26;
  overflow: hidden;
  text-decoration: none;
  transition: border-color .16s ease;
}

.dtf-pcard:hover { border-color: rgba(124, 92, 255, .45); }

.dtf-pcard-media { display: block; aspect-ratio: 4 / 3; background: #0e141e; }
.dtf-pcard-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dtf-pcard-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: .4rem;
  padding: .7rem .8rem .6rem;
}

.dtf-pcard-name { font-size: .88rem; font-weight: 700; color: #fff; }

.dtf-pcard-status {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .7rem; font-weight: 600;
  padding: .12rem .45rem;
  border-radius: 999px;
  background: rgba(125, 150, 190, .10);
}

.dtf-pcard-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }

.dtf-pcard-foot {
  display: flex; align-items: center; gap: .5rem;
  margin-top: auto;
  padding: .6rem .7rem .7rem;
  border-top: 1px solid rgba(125, 150, 190, .14);
}

.dtf-pcard-price {
  display: inline-flex; align-items: baseline; gap: .3rem;
  font-size: .9rem; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums;
}

.dtf-pcard-from { font-size: .6rem; font-weight: 700; letter-spacing: .08em; color: #8b9ab5; }

.dtf-pcard-buy {
  margin-left: auto;
  font-size: .78rem; font-weight: 700; color: #fff;
  padding: .4rem .8rem;
  border-radius: 6px;
  background: linear-gradient(135deg, #4f7cff 0%, #7c5cff 100%);
  white-space: nowrap;
}

.dtf-pcard:hover .dtf-pcard-buy { filter: brightness(1.1); }

/* La carte est devenue l element flex direct du rail: c est donc elle qui porte la
   largeur fixe et l etirement, plus l ancien conteneur .dtf-group-slide qui n existe
   plus dans le balisage. Sans ca chaque carte se dimensionnait sur son contenu. */
.dtf-group-rail { align-items: stretch; }

.dtf-group-rail > .dtf-pcard {
  flex: 0 0 235px;
  width: 235px;
  max-width: 235px;
  align-self: stretch;
}

/* Le nom passe a la ligne au lieu d elargir la carte. */
.dtf-pcard-name { overflow-wrap: anywhere; }

@media (max-width: 575.98px) {
  .dtf-group-rail > .dtf-pcard { flex: 0 0 78%; width: 78%; max-width: 78%; }
}

/* Cartes strictement identiques: le nom et le statut sont toujours sur deux lignes
   distinctes. Quand la pastille remontait a cote d un nom court, ce bloc perdait une
   ligne et la carte se decalait par rapport a ses voisines. */
.dtf-pcard-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
  min-height: 4.6rem;
  padding: .75rem .8rem .5rem;
}

.dtf-pcard-name { font-size: .86rem; line-height: 1.25; }

/* L image garde exactement la meme hauteur d une carte a l autre. */
.dtf-pcard-media { flex: 0 0 auto; }

/* Cartes plus larges et plus basses: l image passe en 16/9 au lieu de 4/3, et le
   bloc nom + statut se resserre. La carte gagne en largeur ce qu elle perd en hauteur. */
.dtf-group-rail > .dtf-pcard {
  flex: 0 0 290px;
  width: 290px;
  max-width: 290px;
}

.dtf-pcard-media { aspect-ratio: 16 / 9; }

.dtf-pcard-head {
  min-height: 0;
  gap: .3rem;
  padding: .6rem .75rem .45rem;
}

.dtf-pcard-foot { padding: .5rem .75rem .6rem; }

/* Le nom tient desormais sur une ligne dans la plupart des cas, mais la hauteur reste
   identique d une carte a l autre grace a cette reserve de deux lignes. */
.dtf-pcard-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.15rem;
}

@media (max-width: 575.98px) {
  .dtf-group-rail > .dtf-pcard { flex: 0 0 84%; width: 84%; max-width: 84%; }
}

/* ---- Carte de groupe: dimensions imposees --------------------------------
   Les hauteurs etaient encore inegales parce que chaque bloc se dimensionnait sur
   son contenu. Ici image, en-tete et pied ont une hauteur fixe: la carte est
   identique par construction, quel que soit le produit. */
.dtf-group-rail > .dtf-pcard {
  flex: 0 0 250px;
  width: 250px;
  max-width: 250px;
  height: 100%;
}

.dtf-pcard-media {
  aspect-ratio: auto !important;
  height: 118px;
  flex: 0 0 118px;
}

/* Nom et statut sur la meme ligne: le nom est tronque plutot que de passer a la
   ligne, ce qui garantit une hauteur constante. */
.dtf-pcard-head {
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap;
  gap: .4rem;
  height: 38px;
  min-height: 38px !important;
  padding: 0 .7rem !important;
}

.dtf-pcard-name {
  display: block !important;
  min-height: 0 !important;
  font-size: .82rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  -webkit-line-clamp: none;
}

.dtf-pcard-status {
  flex: 0 0 auto;
  font-size: .66rem;
  padding: .1rem .4rem;
}

/* Pied resserre: le prix dans sa propre case, le bouton a droite. */
.dtf-pcard-foot {
  margin-top: 0 !important;
  padding: .5rem .7rem .6rem !important;
  gap: .45rem;
}

.dtf-pcard-price {
  padding: .3rem .55rem;
  border: 1px solid rgba(125, 150, 190, .22);
  border-radius: 5px;
  background: rgba(125, 150, 190, .07);
  font-size: .82rem;
}

.dtf-pcard-from { font-size: .56rem; }

.dtf-pcard-buy { font-size: .74rem; padding: .35rem .7rem; }

@media (max-width: 575.98px) {
  .dtf-group-rail > .dtf-pcard { flex: 0 0 80%; width: 80%; max-width: 80%; }
}

/* ---- Blocs regroupes dans le composant feedbacks ------------------------- */
.dtf-steps-section, .dtf-loyalty-section, .dtf-reviews-section { padding: 3.2rem 0; }

.dtf-block-head { text-align: center; margin-bottom: 2.2rem; }
.dtf-block-title {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800; color: #fff;
  letter-spacing: -.025em; margin: 0 0 .5rem; text-wrap: balance;
}
.dtf-block-sub { color: #8b9ab5; font-size: .92rem; max-width: 60ch; margin: 0 auto; }

/* Etapes: quatre cartes de meme hauteur, numerotees. */
.dtf-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }

.dtf-step {
  position: relative;
  border: 1px solid rgba(125, 150, 190, .16);
  border-radius: 10px;
  background: #121a26;
  padding: 1.1rem 1.05rem 1.2rem;
}

.dtf-step-num {
  position: absolute; top: .9rem; right: 1rem;
  font-size: .72rem; font-weight: 700;
  color: rgba(139, 154, 181, .6);
  font-variant-numeric: tabular-nums;
}

.dtf-step-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-bottom: .9rem;
  border-radius: 8px;
  background: rgba(124, 92, 255, .12);
  border: 1px solid rgba(124, 92, 255, .22);
  color: #a78bfa;
}

.dtf-step h3 { font-size: .92rem; font-weight: 700; color: #fff; margin: 0 0 .4rem; }
.dtf-step p { font-size: .82rem; line-height: 1.5; color: #8b9ab5; margin: 0; }

/* Fidelite: texte a gauche, chiffres a droite. */
.dtf-loyalty { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }

.dtf-loyalty-title {
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  font-weight: 800; color: #fff;
  letter-spacing: -.025em; line-height: 1.15; margin: 0 0 .9rem;
}
/* Seconde phrase en retrait: la premiere porte l affirmation. */
.dtf-loyalty-dim { color: #7a869c; display: block; }
.dtf-loyalty-text p { color: #8b9ab5; font-size: .9rem; line-height: 1.6; margin: 0; }

.dtf-loyalty-cards { display: flex; flex-direction: column; gap: .8rem; }

.dtf-stat-main {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border: 1px solid rgba(125, 150, 190, .16);
  border-radius: 12px; background: #121a26; padding: 1.2rem 1.3rem;
}

.dtf-stat-label { font-size: .88rem; font-weight: 700; color: #fff; }
.dtf-stat-note { font-size: .74rem; color: #7a869c; margin-bottom: .5rem; }
.dtf-stat-big {
  font-size: 2.4rem; font-weight: 800; color: #fff;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.dtf-stat-big span { font-size: 1.1rem; color: #8b9ab5; margin-left: .15rem; }

.dtf-ring-text { fill: #fff; font-size: 15px; font-weight: 700; }

.dtf-stat-row {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid rgba(125, 150, 190, .16);
  border-radius: 12px; background: #121a26;
}

.dtf-stat-cell {
  display: flex; align-items: center; gap: .7rem;
  padding: 1rem 1.2rem;
}
.dtf-stat-cell + .dtf-stat-cell { border-left: 1px solid rgba(125, 150, 190, .16); }

.dtf-stat-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  background: rgba(124, 92, 255, .12);
  border: 1px solid rgba(124, 92, 255, .22);
  color: #a78bfa; flex: 0 0 auto;
}

.dtf-stat-value { font-size: 1.05rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.dtf-stat-cap { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #7a869c; }

@media (max-width: 991.98px) {
  .dtf-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dtf-loyalty { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .dtf-steps { grid-template-columns: 1fr; }
  .dtf-stat-row { grid-template-columns: 1fr; }
  .dtf-stat-cell + .dtf-stat-cell { border-left: 0; border-top: 1px solid rgba(125, 150, 190, .16); }
}

/* Degrade applique au texte lui-meme, reutilisable sur n importe quel fragment. */
.dtf-grad {
  background: linear-gradient(100deg, #4f7cff 0%, #7c5cff 55%, #a78bfa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Le titre redevient un paragraphe continu. */
.dtf-loyalty-dim { display: inline; color: inherit; }
.dtf-loyalty-title { text-wrap: balance; }

/* Les chiffres ne doivent pas faire sauter la mise en page pendant qu ils montent. */
.dtf-count { font-variant-numeric: tabular-nums; }

/* ---- Carrousel d avis ----------------------------------------------------
   La carte centrale est nette et pleine opacite, les voisines reculent. C est ce
   contraste qui designe l avis a lire, pas une bordure de plus. */
.dtf-rev { position: relative; display: flex; align-items: center; }

.dtf-rev-track {
  display: flex;
  gap: 1.1rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 1rem .5rem 1.2rem;
  scrollbar-width: none;
  width: 100%;
}
.dtf-rev-track::-webkit-scrollbar { display: none; }

.dtf-rev-slide {
  flex: 0 0 340px;
  max-width: 340px;
  opacity: .38;
  transform: scale(.94);
  transition: opacity .28s ease, transform .28s ease;
}

.dtf-rev-slide.is-active { opacity: 1; transform: scale(1); }

/* Premier et dernier avis: de la marge pour qu ils puissent atteindre le centre. */
.dtf-rev-slide:first-child { margin-left: calc(50% - 170px); }
.dtf-rev-slide:last-child { margin-right: calc(50% - 170px); }

.dtf-rev-arrow {
  position: absolute; top: 50%; z-index: 2;
  transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 8px;
  border: 1px solid rgba(125, 150, 190, .22);
  background: rgba(18, 26, 38, .92);
  color: #c7d2e4;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.dtf-rev-prev { left: 0; }
.dtf-rev-next { right: 0; }
.dtf-rev-arrow:hover { border-color: rgba(124, 92, 255, .55); color: #fff; }
.dtf-rev-arrow:focus-visible { outline: 2px solid #7c5cff; outline-offset: 2px; }

.dtf-rev-count {
  text-align: center;
  font-size: .8rem; font-weight: 600;
  color: #7a869c;
  font-variant-numeric: tabular-nums;
  margin-top: .2rem;
}

.dtf-rev-all { display: flex; justify-content: center; margin-top: 1.4rem; }
.dtf-rev-all .btn { font-size: .85rem; font-weight: 600; padding: .55rem 1.4rem; border-radius: 6px; }

.dtf-ring-text { fill: #fff; font-size: 15px; font-weight: 700; }

@media (max-width: 575.98px) {
  .dtf-rev-slide { flex: 0 0 84%; max-width: 84%; }
  .dtf-rev-slide:first-child { margin-left: 8%; }
  .dtf-rev-slide:last-child { margin-right: 8%; }
}

@media (prefers-reduced-motion: reduce) {
  .dtf-rev-track { scroll-behavior: auto; }
  .dtf-rev-slide { transition: none; }
}

/* ---- Carte d avis: finition ---------------------------------------------- */
.dtf-rev-slide .card,
.dtf-rev-slide > div {
  border: 1px solid rgba(125, 150, 190, .16) !important;
  border-radius: 12px !important;
  background: #121a26 !important;
  padding: 1.05rem 1.15rem !important;
  height: 100%;
}

/* La carte active se detache par un filet violet, pas par une ombre. */
.dtf-rev-slide.is-active .card,
.dtf-rev-slide.is-active > div {
  border-color: rgba(124, 92, 255, .40) !important;
  background: #16202e !important;
}

/* Vignette produit: ronde, avec un anneau discret. */
.dtf-rev-slide img {
  border-radius: 50%;
  border: 1px solid rgba(125, 150, 190, .28);
  width: 38px; height: 38px;
  object-fit: cover;
}

.dtf-rev-slide .card p,
.dtf-rev-slide > div p { font-size: .88rem; line-height: 1.55; color: #c7d2e4; margin-bottom: 0; }

/* Etoiles: un cran plus petites, elles prenaient trop de place. */
.dtf-rev-slide svg { max-height: 16px; }

.dtf-rev-slide .text-muted,
.dtf-rev-slide small { font-size: .74rem !important; color: #7a869c !important; }

.dtf-rev-arrow {
  border-radius: 50%;
  width: 40px; height: 40px;
  backdrop-filter: blur(6px);
}

/* Fleches: carre a coins arrondis, comme les autres controles du site. */
.dtf-rev-arrow { border-radius: 8px !important; width: 38px; height: 38px; }

.dtf-rev-link { color: #7c5cff; font-weight: 600; text-decoration: none; }
.dtf-rev-link:hover { text-decoration: underline; }

/* ---- Carte d avis, ecrite pour DTF --------------------------------------- */
.dtf-rcard {
  display: flex; flex-direction: column; gap: .85rem;
  height: 100%;
  padding: 1.05rem 1.15rem;
  border: 1px solid rgba(125, 150, 190, .16);
  border-radius: 12px;
  background: #121a26;
}

.dtf-rev-slide.is-active .dtf-rcard {
  border-color: rgba(124, 92, 255, .40);
  background: #16202e;
}

.dtf-rcard-top { display: flex; align-items: center; gap: .7rem; }

.dtf-rcard-img {
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(125, 150, 190, .28);
}

.dtf-rcard-id { min-width: 0; flex: 1 1 auto; }

.dtf-rcard-name {
  font-size: .84rem; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.dtf-rcard-date { font-size: .74rem; color: #7a869c; }

.dtf-rcard-stars { flex: 0 0 auto; letter-spacing: .05em; font-size: .95rem; }
.dtf-rcard-stars .on { color: #fbbf24; }
.dtf-rcard-stars .off { color: rgba(125, 150, 190, .28); }

.dtf-rcard-msg {
  font-size: .88rem; line-height: 1.55; color: #c7d2e4;
  margin: 0;
  overflow-wrap: anywhere;
}

/* Reponse du vendeur: en retrait, marquee par un filet violet. */
.dtf-rcard-reply {
  font-size: .82rem; line-height: 1.5; color: #9aa6bd;
  padding-left: .7rem;
  border-left: 2px solid rgba(124, 92, 255, .55);
}

.dtf-rcard-reply-tag {
  display: block;
  font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #a78bfa;
  margin-bottom: .15rem;
}

/* Trois cartes visibles au maximum: la piste est bornee a la carte centrale plus
   ses deux voisines, le bord de la quatrieme ne depasse plus. Le masque adoucit
   en plus les deux extremites au lieu de les couper net. */
.dtf-rev { max-width: 1120px; margin-inline: auto; overflow: hidden; }

.dtf-rev-track {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
}

@media (max-width: 991.98px) {
  .dtf-rev { max-width: 100%; }
}

/* ---- Communaute Discord ---------------------------------------------------
   Aucun cadre: le bloc repose sur le fond de page, seule la photo ronde et le
   bouton portent de la matiere. */
.dtf-community { padding: 3.4rem 0; text-align: center; }

.dtf-community-title {
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 2rem;
}

.dtf-community-inner { display: flex; flex-direction: column; align-items: center; gap: .55rem; }

.dtf-community-avatar { position: relative; width: 108px; height: 108px; }

.dtf-community-avatar img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(125, 150, 190, .22);
  background: #0e141e;
}

/* Pastille de presence, posee sur le bord du cercle. */
.dtf-community-dot {
  position: absolute; right: 6px; bottom: 6px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #3ba55d;
  border: 3px solid #0b1018;
}

.dtf-community-name { font-size: 1.25rem; font-weight: 800; color: #fff; letter-spacing: -.01em; }

.dtf-community-stats {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 1.4rem;
  margin-bottom: .9rem;
}

.dtf-cstat {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .88rem; color: #8b9ab5;
}

.dtf-cstat b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }

.dtf-cdot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dtf-cdot-on { background: #3ba55d; }
.dtf-cdot-off { background: #7a869c; }

.dtf-community-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-width: 320px; max-width: 100%;
  padding: .8rem 1.6rem;
  border-radius: 8px;
  font-size: .95rem; font-weight: 700;
  color: #fff !important;
  text-decoration: none;
  background: linear-gradient(135deg, #4f7cff 0%, #7c5cff 100%);
  transition: filter .15s ease;
}

.dtf-community-btn:hover { filter: brightness(1.08); }
.dtf-community-btn:focus-visible { outline: 2px solid #7c5cff; outline-offset: 3px; }

@media (max-width: 575.98px) {
  .dtf-community-btn { min-width: 0; width: 100%; }
}

/* Pied de page: exactement le fond du site, plus le bloc plus clair du theme. */
footer, .footer, .site-footer, footer.component {
  background: #0b1018 !important;
  background-image: none !important;
  border-top: 1px solid rgba(125, 150, 190, .16);
}

footer a, .footer a { color: #8b9ab5; }
footer a:hover, .footer a:hover { color: #fff; }

/* ---- Page /products ------------------------------------------------------- */
.dtf-products-hero { aspect-ratio: 1920 / 700; }
.dtf-products-hero .content { margin-top: 2.5rem; }

/* Aucune barre laterale: la grille prend toute la largeur. */
.dtf-plist { padding: 2.4rem 0 3.5rem; }
.dtf-plist .col-lg-3, .dtf-plist aside, .products-sidebar, .sidebar { display: none !important; }

.dtf-plist-search {
  position: relative;
  display: flex; align-items: center; gap: .6rem;
  max-width: 520px; margin: 0 auto 1.1rem;
  padding: .1rem .9rem;
  border: 1px solid rgba(125, 150, 190, .20);
  border-radius: 8px;
  background: #121a26;
  color: #7a869c;
  transition: border-color .15s ease;
}

.dtf-plist-search:focus-within { border-color: rgba(124, 92, 255, .55); }

.dtf-plist-search input {
  flex: 1 1 auto;
  background: transparent; border: 0; outline: none;
  color: #fff; font-size: .9rem;
  padding: .65rem 0;
}
.dtf-plist-search input::placeholder { color: #7a869c; }

/* Alphabet: seules les lettres presentes sont rendues cote serveur. */
.dtf-alpha {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem;
  margin-bottom: 1.8rem;
}

.dtf-alpha-btn {
  min-width: 32px; height: 30px;
  padding: 0 .5rem;
  border: 1px solid rgba(125, 150, 190, .18);
  border-radius: 6px;
  background: transparent;
  color: #8b9ab5;
  font-size: .8rem; font-weight: 700;
  cursor: pointer;
  transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}

.dtf-alpha-btn:hover { color: #fff; border-color: rgba(125, 150, 190, .35); }

.dtf-alpha-btn.is-on {
  background: linear-gradient(135deg, #4f7cff 0%, #7c5cff 100%);
  border-color: transparent;
  color: #fff;
}

.dtf-plist-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.dtf-plist-empty { text-align: center; color: #8b9ab5; font-size: .9rem; margin-top: 1.5rem; }

@media (max-width: 991.98px) {
  .dtf-plist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dtf-products-hero { aspect-ratio: auto; min-height: 320px; }
}
@media (max-width: 575.98px) { .dtf-plist-grid { grid-template-columns: 1fr; } }

/* Hero de /products: meme traitement que celui d accueil. */
.dtf-products-hero {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Le message "aucun resultat" vit maintenant dans le cadre. */
.dtf-plist-box { margin-top: .4rem; }
.dtf-plist-box .dtf-plist-empty { margin-bottom: .5rem; }

/* ---- Contour des cartes de groupe ----------------------------------------
   Le filet est peint en dessous de l image via un fond en degrade: la carte est
   plus petite que sa boite d un pixel de chaque cote, ce qui laisse voir ce fond.
   C est ce qui permet un contour degrade, impossible avec border-color seul. */
.dtf-group-card {
  border: 0 !important;
  padding: 1px;
  background: rgba(125, 150, 190, .20);
  transition: background .2s ease, transform .2s ease;
}

.dtf-group-card img,
.dtf-group-fallback {
  border-radius: 7px;
}

.dtf-group-card:hover {
  background: linear-gradient(135deg, #4f7cff 0%, #7c5cff 55%, #a78bfa 100%);
  transform: translateY(-2px);
}

.dtf-group-card:focus-visible {
  background: linear-gradient(135deg, #4f7cff 0%, #7c5cff 100%);
}

@media (prefers-reduced-motion: reduce) {
  .dtf-group-card { transition: none; }
  .dtf-group-card:hover { transform: none; }
}

/* Contour plus franc: 2 px au lieu d un seul, et un gris nettement plus clair au
   repos. A 1 px sur un fond sombre, le liseré se confondait avec l image. */
.dtf-group-card {
  padding: 2px;
  background: rgba(150, 172, 205, .38);
}

.dtf-group-card img,
.dtf-group-fallback { border-radius: 6px; }

.dtf-group-card:hover {
  background: linear-gradient(135deg, #4f7cff 0%, #7c5cff 50%, #a78bfa 100%);
  box-shadow: 0 0 0 1px rgba(124, 92, 255, .35), 0 10px 26px -14px rgba(124, 92, 255, .8);
}

/* ---- Page /feedback ------------------------------------------------------- */
.dtf-fbpage { padding: 2.8rem 0 3.5rem; }

.dtf-fbhead { text-align: center; margin-bottom: 2.2rem; }

/* Deux chiffres cote a cote: la note moyenne d abord, c est ce qu on cherche. */
.dtf-fbscore {
  display: inline-flex; align-items: stretch;
  margin-top: 1.4rem;
  border: 1px solid rgba(125, 150, 190, .16);
  border-radius: 12px;
  background: #121a26;
  overflow: hidden;
}

.dtf-fbscore-cell { padding: .9rem 1.8rem; text-align: center; }
.dtf-fbscore-cell + .dtf-fbscore-cell { border-left: 1px solid rgba(125, 150, 190, .16); }

.dtf-fbscore-value {
  font-size: 1.6rem; font-weight: 800; color: #fff;
  line-height: 1.1; font-variant-numeric: tabular-nums;
}

.dtf-fbscore-cap {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #7a869c;
}

/* Grille en colonnes de hauteur libre: une carte courte ne doit pas s etirer. */
.dtf-fbgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

.dtf-fbpage .dtf-rcard { height: auto; }

.dtf-fbpager { display: flex; justify-content: center; margin-top: 2rem; }
.dtf-fbpager .page-item.active .page-link { background: #7c5cff; border-color: #7c5cff; }

.dtf-fbempty { text-align: center; color: #8b9ab5; padding: 3rem 0; }

@media (max-width: 991.98px) { .dtf-fbgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) {
  .dtf-fbgrid { grid-template-columns: 1fr; }
  .dtf-fbscore-cell { padding: .8rem 1.2rem; }
}

/* ---- Pagination ----------------------------------------------------------
   Meme vocabulaire que le reste du site: fond sombre, filet bleute, coins a 6 px,
   et le degrade reserve a la page courante. Le compteur passe en gris discret,
   ses nombres en blanc: c est la seule information qu on y cherche. */
.dtf-fbpager, .pagination-wrapper, nav[aria-label='pagination'] {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: .9rem;
  margin-top: 2.2rem;
}

.dtf-fbpager p,
.pagination-info,
.dtf-fbpager .text-muted {
  color: #7a869c !important;
  font-size: .84rem;
  margin: 0;
}

.dtf-fbpager b,
.dtf-fbpager strong,
.pagination-info b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }

.pagination { gap: .3rem; margin: 0 !important; }

.pagination .page-item .page-link,
.pagination .page-link {
  min-width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 .55rem;
  border: 1px solid rgba(125, 150, 190, .18) !important;
  border-radius: 6px !important;
  background: #121a26 !important;
  color: #8b9ab5 !important;
  font-size: .84rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: none !important;
  transition: border-color .14s ease, color .14s ease, background-color .14s ease;
}

.pagination .page-link:hover {
  border-color: rgba(125, 150, 190, .38) !important;
  color: #fff !important;
}

.pagination .page-item.active .page-link {
  background: linear-gradient(135deg, #4f7cff 0%, #7c5cff 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.pagination .page-item.disabled .page-link {
  opacity: .4;
  color: #7a869c !important;
}

.pagination .page-link:focus-visible {
  outline: 2px solid #7c5cff;
  outline-offset: 2px;
}

/* ---- Correctif DTF: navbar mobile -------------------------------------- */
@media (max-width: 991.98px) {
  /* Le soulignement centre n a de sens qu en rangee horizontale: retire en colonne. */
  .navbar .dtf-nav .nav-link::after { display: none !important; }

  .navbar-collapse { padding: .9rem 0 1.1rem; }

  .dtf-nav { flex-direction: column; align-items: stretch; gap: .3rem; padding-left: 0; margin-left: 0; }
  .dtf-nav::before { display: none; }

  .navbar .dtf-nav .nav-link,
  .navbar .dtf-nav .nav-item .nav-link {
    width: 100%;
    justify-content: flex-start;
    padding: .65rem .8rem !important;
    font-size: .92rem;
  }

  .navbar .dtf-nav .nav-link svg { width: 17px; height: 17px; }

  /* Groupe cloche + connexion: une rangee, la cloche en carre compact, Log in prend le reste. */
  .navbar-nav.gap-3 {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap;
    gap: .6rem !important;
    margin-top: .9rem !important;
    margin-left: 0 !important;
    padding-top: .9rem;
    border-top: 1px solid rgba(125, 150, 190, .14);
  }

  .navbar-nav.gap-3 .dtf-updates,
  .navbar-nav.gap-3 .cart,
  .navbar-nav.gap-3 .user { flex: 0 0 auto; }

  .navbar-nav.gap-3 .user { flex: 1 1 auto; }
  .navbar-nav.gap-3 .user .btn { width: 100%; }

  .dtf-updates-menu { position: fixed !important; left: 1rem !important; right: 1rem !important; width: auto !important; }
}