/* ============================================================================
   DTF — feuille additionnelle, chargee apres custom.css.
   custom.css a depasse la limite d ecriture de l API SellAuth (~10 000 caracteres
   par requete) et ne peut plus etre modifie. Tout nouveau style vient donc ici.
   ========================================================================== */

/* ---- Page panier ---------------------------------------------------------- */

.cart-item-bg,
.cart-page .border,
.cart-page .form {
  background: #121a26 !important;
  border-color: rgba(125, 150, 190, .16) !important;
}

/* Les blocs du panier: memes fonds, memes filets, memes coins que le reste. */
[x-data] .rounded-3,
.cart-item-bg {
  border-radius: 10px !important;
}

.cart-image-container {
  background: #0e141e;
  border-radius: 8px;
  overflow: hidden;
}

.cart-image-container img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Le formulaire de paiement doit se distinguer du recapitulatif: c est l action. */
.cart-page .form,
form[\@submit\.prevent='checkout'],
.checkout-form {
  background: #16202e !important;
  border: 1px solid rgba(125, 150, 190, .20) !important;
  border-radius: 12px !important;
}

/* Montants alignes d une ligne a l autre. */
.cart-page .price,
.cart-page .total,
.cart-summary strong,
.cart-item-bg .price {
  font-variant-numeric: tabular-nums;
  color: #fff;
}

/* Champs de saisie: identiques a ceux de la navbar et de la recherche. */
.cart-page .form-control,
.cart-page .form-select,
.cart-page .choices__inner {
  background: #0e141e !important;
  border: 1px solid rgba(125, 150, 190, .18) !important;
  border-radius: 8px !important;
  color: #fff !important;
}

.cart-page .form-control:focus,
.cart-page .form-select:focus {
  border-color: rgba(124, 92, 255, .55) !important;
  box-shadow: none !important;
}

/* Bouton de paiement: le seul element en degrade de la page. */
.cart-page .btn-primary,
button[type='submit'].btn-primary {
  background: linear-gradient(135deg, #4f7cff 0%, #7c5cff 100%) !important;
  border-color: transparent !important;
  border-radius: 8px !important;
  font-weight: 700;
}

.cart-page .btn-primary:hover,
button[type='submit'].btn-primary:hover {
  filter: brightness(1.08);
}

.cart-page .btn-primary:disabled,
button[type='submit'].btn-primary:disabled {
  opacity: .45;
  filter: none;
}

/* Quantites: mêmes touches carrees que le mini panier. */
.cart-item-bg .btn-outline-secondary,
.cart-item-bg .btn-outline-primary {
  border: 1px solid rgba(125, 150, 190, .28) !important;
  border-radius: 6px !important;
  background: rgba(125, 150, 190, .06) !important;
  color: #c7d2e4 !important;
}

.cart-item-bg .btn-outline-secondary:hover,
.cart-item-bg .btn-outline-primary:hover {
  background: rgba(124, 92, 255, .18) !important;
  border-color: rgba(124, 92, 255, .55) !important;
  color: #fff !important;
}

/* Alertes et messages: lisibles sur fond sombre. */
.cart-page .alert-warning,
.alert-warning {
  background: rgba(251, 191, 36, .10) !important;
  border: 1px solid rgba(251, 191, 36, .30) !important;
  color: #fbbf24 !important;
  border-radius: 10px !important;
}

.cart-page .alert-danger,
.alert-danger {
  background: rgba(248, 113, 113, .10) !important;
  border: 1px solid rgba(248, 113, 113, .30) !important;
  color: #f87171 !important;
  border-radius: 10px !important;
}

/* Panier vide: un message centre plutot qu une bordure nue. */
.cart-page .p-4.border.rounded.text-center,
.p-4.border.rounded.text-center {
  background: #121a26 !important;
  border: 1px solid rgba(125, 150, 190, .16) !important;
  border-radius: 12px !important;
  padding: 3rem 1.5rem !important;
}

/* Le titre de page suit la meme echelle que les autres. */
.cart-page h1,
.cart-page .section-title h1 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -.025em;
  color: #fff;
}

/* ---- Panier: mise en page facon recapitulatif -----------------------------
   Le composant fait 29 800 caracteres, au-dela de la limite d ecriture de l API:
   tout se joue donc en CSS sur le balisage existant. */

/* Titre en capitales, comme les references. */
.py-5-nav > .section-title h1,
.cart-page h1,
h1 {
  text-transform: uppercase;
  letter-spacing: -.01em;
  font-weight: 800;
}

/* Ligne d article: vignette plus grande, respiration, coins arrondis. */
.cart-item-bg {
  padding: .9rem 1rem !important;
  gap: 1rem;
  align-items: center !important;
  border: 1px solid rgba(125, 150, 190, .16) !important;
  background: #121a26 !important;
  border-radius: 12px !important;
  transition: border-color .15s ease;
}

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

.cart-image-container {
  width: 76px !important; height: 76px !important;
  min-width: 76px;
  padding: 0 !important;
  border-radius: 10px !important;
  background: #0e141e;
}

.cart-image-container img {
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 10px;
}

/* Nom du produit puis variante en dessous, en gris. */
.cart-item-bg a,
.cart-item-bg .fw-bold { color: #fff !important; font-weight: 700; text-decoration: none; }
.cart-item-bg .text-muted,
.cart-item-bg small { color: #8b9ab5 !important; }

/* Le selecteur de quantite forme un bloc unique, comme dans le mini panier. */
.cart-item-bg .input-group,
.cart-item-bg .quantity {
  border: 1px solid rgba(125, 150, 190, .26);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(125, 150, 190, .06);
}

.cart-item-bg .input-group .btn,
.cart-item-bg .quantity .btn {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #c7d2e4 !important;
  width: 30px;
}

.cart-item-bg .input-group .btn:hover,
.cart-item-bg .quantity .btn:hover { background: rgba(124, 92, 255, .18) !important; color: #fff !important; }

.cart-item-bg .input-group input,
.cart-item-bg .quantity input {
  border: 0 !important; background: transparent !important;
  color: #fff !important; text-align: center;
  width: 40px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Prix de ligne bien lisible. */
.cart-item-bg .price,
.cart-item-bg .fw-semibold { font-size: 1rem; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }

/* Bouton de suppression: discret, rouge au survol. */
.cart-item-bg .btn-close,
.cart-item-bg .btn-link {
  color: #7a869c !important;
  opacity: 1 !important;
  filter: none !important;
  transition: color .15s ease;
}
.cart-item-bg .btn-close:hover,
.cart-item-bg .btn-link:hover { color: #f87171 !important; }

/* ---- Recapitulatif de commande ------------------------------------------- */
.cart-page .form,
form[\@submit\.prevent='checkout'] {
  padding: 1.2rem 1.3rem !important;
}

/* Le titre du recapitulatif en capitales espacees. */
.cart-page .form .form-label,
.cart-page .form h2,
.cart-page .form h3,
.cart-page .form .fw-bold:first-child {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .8rem !important;
  font-weight: 800;
  color: #fff;
}

/* Lignes du recapitulatif: libelle a gauche, montant a droite. */
.cart-page .form .d-flex.justify-content-between {
  padding: .5rem 0;
  font-size: .88rem;
  color: #8b9ab5;
}

.cart-page .form .d-flex.justify-content-between span:last-child,
.cart-page .form .d-flex.justify-content-between strong {
  color: #fff; font-weight: 700; font-variant-numeric: tabular-nums;
}

.cart-page .form .border-bottom,
.cart-page .form hr { border-color: rgba(125, 150, 190, .16) !important; }

/* Bouton de paiement: pleine largeur, en capitales, l element le plus fort. */
.cart-page .form .btn-primary,
button[type='submit'].btn-primary {
  width: 100%;
  padding: .8rem 1rem !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .88rem;
  font-weight: 800;
}

/* Le conteneur intermediaire du recapitulatif - col-lg-4 > .d-flex.flex-column.gap-3 -
   portait un fond et un cadre du theme, ce qui donnait une boite noire autour de la
   carte. Selecteur exact releve dans cart-page.njk, plus de :has() approximatif. */
.col-lg-4 > .d-flex.flex-column.gap-3 {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* La carte du recapitulatif garde son cadre, seule boite visible desormais. */
.col-lg-4 .p-4.border.rounded.form {
  background: #121a26 !important;
  border: 1px solid rgba(125, 150, 190, .18) !important;
  border-radius: 12px !important;
}

/* ---- Page produit: variantes ---------------------------------------------
   Balisage non modifiable (43 000 caracteres), on habille l existant:
   .variants > .variant > .name / .price, badge injecte par dtf.js. */
.variants { gap: .6rem; }

.variant {
  position: relative;
  display: flex !important; flex-direction: column; align-items: flex-start;
  gap: .15rem;
  min-width: 118px;
  padding: .75rem .9rem !important;
  border: 1px solid rgba(125, 150, 190, .20) !important;
  border-radius: 10px !important;
  background: #121a26 !important;
  color: #8b9ab5 !important;
  transition: border-color .15s ease, background-color .15s ease;
}

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

/* Variante choisie: filet violet et fond legerement releve, pas un aplat plein
   qui ecraserait le prix. */
.variant.active {
  border-color: rgba(124, 92, 255, .70) !important;
  background: #16202e !important;
}

.variant .name {
  margin: 0 !important;
  font-size: .78rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  color: #fff;
}

.variant.active .name { color: #fff; }

.variant .price {
  margin: 0 !important;
  font-size: .95rem; font-weight: 700;
  color: #c7d2e4;
  font-variant-numeric: tabular-nums;
}

.variant.active .price { color: #a78bfa; }

.variant .stock { display: none !important; }
.variant .active-indicator { display: none !important; }

/* Badge d economie, calcule par dtf.js. Vert: c est un gain, pas une alerte,
   et il ne doit pas se confondre avec le violet de marque. */
.dtf-save {
  position: absolute; top: -8px; right: -6px;
  padding: .12rem .4rem;
  border-radius: 6px;
  background: #22c55e;
  color: #06240f;
  font-size: .68rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 8px -2px rgba(34, 197, 94, .6);
}

.dtf-perday {
  font-size: .68rem;
  color: #7a869c;
  font-variant-numeric: tabular-nums;
}

/* ---- Onglets de description ---------------------------------------------- */
.nav-tabs { border-bottom: 1px solid rgba(125, 150, 190, .16) !important; gap: .2rem; }

.nav-tabs .nav-link {
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #8b9ab5 !important;
  font-size: .82rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: .6rem .9rem !important;
}

.nav-tabs .nav-link:hover { color: #fff !important; }

.nav-tabs .nav-link.active {
  color: #fff !important;
  border-bottom-color: #7c5cff !important;
}

/* ---- FAQ ------------------------------------------------------------------
   Une colonne de cartes repliables. Bootstrap fournit le mecanisme (collapse),
   on remplace entierement son habillage clair par celui de DTF. */
.dtf-faq { padding: 3.2rem 0; }

.dtf-faq-list {
  display: flex; flex-direction: column; gap: .6rem;
  max-width: 820px; margin-inline: auto;
}

.dtf-faq-item {
  background: #121a26 !important;
  border: 1px solid rgba(125, 150, 190, .16) !important;
  border-radius: 10px !important;
  overflow: hidden;
  transition: border-color .15s ease;
}

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

/* La carte ouverte se distingue par un filet violet, sans fond plein. */
.dtf-faq-item:has(.accordion-button:not(.collapsed)) {
  border-color: rgba(124, 92, 255, .45) !important;
  background: #16202e !important;
}

.dtf-faq-q {
  display: flex !important; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%;
  padding: 1rem 1.1rem !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  font-size: .92rem; font-weight: 600;
  text-align: left;
  transition: color .15s ease;
}

.dtf-faq-q:hover { color: #fff !important; }
.dtf-faq-q:focus-visible { outline: 2px solid #7c5cff; outline-offset: -2px; }

/* Bootstrap injecte sa propre fleche en background-image: on la retire. */
.dtf-faq-q::after { display: none !important; }

.dtf-faq-q-text { flex: 1 1 auto; }

.dtf-faq-icon {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 6px;
  background: rgba(125, 150, 190, .10);
  border: 1px solid rgba(125, 150, 190, .18);
  color: #8b9ab5;
  transition: transform .2s ease, background-color .15s ease, color .15s ease;
}

.dtf-faq-q:not(.collapsed) .dtf-faq-icon {
  transform: rotate(180deg);
  background: rgba(124, 92, 255, .16);
  border-color: rgba(124, 92, 255, .40);
  color: #a78bfa;
}

.dtf-faq-a {
  padding: 0 1.1rem 1.1rem !important;
  font-size: .88rem; line-height: 1.6;
  color: #8b9ab5;
}

.dtf-faq-a a { color: #7c5cff; }

@media (prefers-reduced-motion: reduce) {
  .dtf-faq-item, .dtf-faq-icon { transition: none; }
}
/* ---- Navbar: reaction au changement de page ------------------------------- */

/* La pastille active est un degrade: un degrade ne s interpole pas, il change
   d un coup. On le porte donc sur un pseudo-element dont on anime l opacite,
   ce qui donne un fondu propre quand l actif passe d un lien a l autre. */
/* isolation: le <nav> a un fond opaque sans contexte d empilement propre. Sans
   cette ligne, le pseudo-element en z-index negatif irait se peindre derriere ce
   fond et la pastille serait invisible. */
.navbar .dtf-nav .nav-link { isolation: isolate; }

.navbar .dtf-nav .nav-link::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: linear-gradient(135deg, #4f7cff 0%, #7c5cff 55%, #8b5cf6 100%);
  opacity: 0;
  transition: opacity .22s ease;
  z-index: -1;
}

.navbar .dtf-nav .nav-link.active,
.navbar .dtf-nav .nav-item .nav-link.active {
  background: transparent !important;
  color: #fff !important;
  transition: color .22s ease;
}

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

/* Le soulignement suit le meme tempo que la pastille. */
.navbar .dtf-nav .nav-link::after { transition: width .22s ease; }


@media (prefers-reduced-motion: reduce) {
  .navbar .dtf-nav .nav-link::before,
  .navbar .dtf-nav .nav-link::after { transition: none; }
}

/* ---- Accueil: barre de recherche pleine largeur --------------------------- */

/* Le filtre alphabetique a ete retire; la recherche occupe donc toute la largeur
   de la case au lieu d etre centree sur 520 px. */
.dtf-plist-box .dtf-plist-search {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 1.5rem;
}

/* ---- Navbar: libelles sur une seule ligne --------------------------------- */

/* "My Key(s)" se coupait en deux lignes et deformait la pastille active. Les
   onglets ne doivent jamais se replier: la barre defile plutot que de casser. */
.navbar .dtf-nav .nav-link {
  white-space: nowrap;
}

.navbar .dtf-nav .nav-link svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}


/* ---- Page My Key(s) ------------------------------------------------------- */

/* La banniere reutilise .hero + .height-medium du theme: rien a redefinir ici,
   sinon la marge qui la separe de la liste. */
.dtf-keys-hero { margin-bottom: 2.4rem; }

/* ---- Cartes de commande --------------------------------------------------- */

.dtf-orders {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 20px;
}

.dtf-order {
  display: flex;
  flex-direction: column;
  background: #121a26;
  border: 1px solid rgba(125, 150, 190, .16);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .16s ease, transform .16s ease;
}

.dtf-order:hover {
  border-color: rgba(124, 92, 255, .45);
  transform: translateY(-2px);
}

.dtf-order-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #0e141e;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dtf-order-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dtf-order-noimg { color: #48566d; }

/* Badge d identifiant, repris de la reference: coin haut droit, sur l image. */
.dtf-order-id {
  position: absolute;
  top: 8px; right: 8px;
  padding: .22rem .5rem;
  border-radius: 5px;
  background: rgba(10, 15, 24, .82);
  border: 1px solid rgba(125, 150, 190, .22);
  color: #cbd6e6;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dtf-order-body {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .85rem .9rem 1rem;
  flex: 1 1 auto;
}

.dtf-order-name {
  margin: 0;
  font-size: .92rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
}

.dtf-order-variant { color: #8fa0b8; font-weight: 500; }

.dtf-order-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  font-size: .74rem;
  color: #8b9ab0;
}

.dtf-order-sep { opacity: .45; }
.dtf-order-price { color: #cbd6e6; font-variant-numeric: tabular-nums; }

.dtf-order-status { text-transform: capitalize; font-weight: 600; color: #8b9ab0; }
.dtf-order-status.is-completed { color: #3fb950; }
.dtf-order-status.is-partially_completed { color: #d29922; }
.dtf-order-status.is-pending { color: #8b9ab0; }
.dtf-order-status.is-cancelled,
.dtf-order-status.is-failed { color: #f85149; }
.dtf-order-status.is-refunded { color: #a371f7; }

.dtf-order-reseller {
  margin: 0;
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #6f7f96;
}

.dtf-order-actions {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-top: .3rem;
}

.dtf-order-btn {
  flex: 1 1 auto;
  text-align: center;
  padding: .5rem .7rem;
  border-radius: 8px;
  border: 0;
  background: linear-gradient(135deg, #4f7cff 0%, #7c5cff 55%, #8b5cf6 100%);
  color: #fff !important;
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
  transition: filter .16s ease;
}

.dtf-order-btn:hover { filter: brightness(1.12); }

.dtf-order-link {
  background: none;
  border: 0;
  padding: .5rem .2rem;
  color: #8fa0b8;
  font-size: .76rem;
  white-space: nowrap;
  cursor: pointer;
}

.dtf-order-link:hover { color: #fff; }

.dtf-orders-empty {
  padding: 3rem 1rem;
  text-align: center;
  color: #8b9ab0;
  background: #121a26;
  border: 1px solid rgba(125, 150, 190, .16);
  border-radius: 12px;
}

.dtf-orders-empty .dtf-order-btn {
  display: inline-block;
  flex: 0 0 auto;
  margin-top: .8rem;
  padding: .55rem 1.4rem;
}

@media (max-width: 767px) {
  .dtf-orders { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
}