/* =========================================================
   DarkGPT — boutique SellAuth (thème Blue 3.9), couche de design
   Même identité que darkgpt.chat : noir profond, rouge DarkGPT, Inter, cartes nettes.
   Ce fichier n'est pas écrasé par les mises à jour du thème.
   ========================================================= */
:root {
  --dg-red: #e53935;
  --dg-red-2: #ff5a4f;
  --dg-line: rgba(255, 255, 255, .08);
  --dg-line-2: rgba(255, 255, 255, .14);
  --dg-text: #f2f2f5;
  --dg-muted: #a1a1b0;
  --dg-card: rgba(255, 255, 255, .03);
  --dg-radius: 18px;
}

/* ---------- page ---------- */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { color: var(--dg-text); letter-spacing: -.005em; }
body::before { /* soft red light at the top, fine grid fading out */
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 45% at 50% -8%, rgba(229, 57, 53, .20), transparent 70%),
    radial-gradient(35% 30% at 100% 30%, rgba(229, 57, 53, .06), transparent 70%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 50% at 50% 0%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 50% at 50% 0%, #000 20%, transparent 75%);
}
#app { position: relative; z-index: 1; }
::selection { background: rgba(229, 57, 53, .35); }

/* ---------- typography ---------- */
h1, h2, h3, h4 { letter-spacing: -.03em; }
.component h1 { font-weight: 800; }
.component hr.border-accent-500 { display: none; } /* old underline under section titles */
.text-t-primary\/80, .text-t-primary\/75 { color: var(--dg-muted) !important; }
.uppercase { letter-spacing: .02em; }

/* ---------- announcement bar ---------- */
.announcement > div {
  background: linear-gradient(90deg, #b3171b, var(--dg-red) 50%, #b3171b) !important;
  border: 0 !important; font-weight: 600; letter-spacing: .01em;
}

/* ---------- cards (navbar, products, features, reviews, forms…) ---------- */
[class*="bg-card"] {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)) !important;
  border-color: var(--dg-line) !important;
  border-radius: var(--dg-radius);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.border-white\/5 { border-color: var(--dg-line) !important; }

/* product cards */
a.group[class*="bg-card"] {
  overflow: hidden; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
a.group[class*="bg-card"]:hover {
  transform: translateY(-4px);
  border-color: rgba(229, 57, 53, .45) !important;
  box-shadow: 0 24px 60px -28px rgba(229, 57, 53, .55), 0 0 0 1px rgba(229,57,53,.15);
}
a.group[class*="bg-card"] > div { background: transparent !important; }
a.group[class*="bg-card"] h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
a.group[class*="bg-card"] img { border-radius: 12px; transition: transform .4s ease; }
a.group[class*="bg-card"]:hover img { transform: scale(1.02); }
a.group[class*="bg-card"] .border-b { border-color: var(--dg-line) !important; }

/* ---------- buttons ---------- */
a.inline-flex.border, .component a[class*="border-accent-500"], button[class*="bg-accent-500"], a[class*="bg-accent-500"] {
  border-radius: 12px !important;
}
[class~="bg-accent-500"]:not(.announcement *):not(.badges *) { /* real filled buttons only (not hover:bg-… outlines) */
  background: linear-gradient(180deg, var(--dg-red-2), var(--dg-red)) !important;
  border-color: transparent !important;
  box-shadow: 0 10px 30px -12px rgba(229, 57, 53, .8), inset 0 1px 0 rgba(255,255,255,.2);
}
[class*="border-accent-500"][class*="text-accent-500"] { border-radius: 12px; }
a.group [class*="border-accent-500"] { /* "Voir les détails" inside product cards */
  border-color: rgba(229,57,53,.5) !important; padding-top: .55rem !important; padding-bottom: .55rem !important;
}
a.group:hover [class*="border-accent-500"] { background: var(--dg-red) !important; color: #fff !important; border-color: var(--dg-red) !important; }

/* ---------- inputs ---------- */
input, select, textarea, .choices__inner { border-radius: 12px !important; }
input:focus, select:focus, textarea:focus { outline: none; box-shadow: 0 0 0 3px rgba(229,57,53,.25); }

/* ---------- stats ---------- */
.component .border-b-2.border-white\/5 {
  border: 1px solid var(--dg-line) !important; border-radius: var(--dg-radius);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
}

/* ---------- product page ---------- */
.prose, .product-description { color: #d6d6de; line-height: 1.7; }
.prose h2, .prose h3 { color: var(--dg-text); margin-top: 1.4em; }
.prose strong { color: var(--dg-text); }
.prose ul li::marker { color: var(--dg-red); }

/* ---------- product description (rich text) ---------- */
.editor { color: #d6d6de; line-height: 1.7; font-size: .97rem; }
.editor > *:first-child { margin-top: 0; }
.editor p { margin: .5rem 0 .9rem; }
.editor h3 { color: var(--dg-text); font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; margin: 1.4rem 0 .6rem; }
.editor ul { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .45rem; }
.editor ul li { position: relative; padding-left: 1.7rem; }
.editor ul li::before {
  content: ""; position: absolute; left: 0; top: .3rem; width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: var(--dg-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/66% no-repeat;
}
.editor strong { color: var(--dg-text); }
.editor a { color: #ff7a6e; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- layout: rows of 4 stay on one line (stats, "Pourquoi DarkGPT") ---------- */
@media (min-width: 1024px) {
  .component .grid:has(> div:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .component .flex-wrap:has(> div:nth-child(4):last-child) > div { width: calc((100% - 3rem) / 4); }
}

/* ---------- hero ---------- */
.component h1.lg\:text-5xl { font-size: clamp(2.3rem, 4.4vw, 3.9rem); line-height: 1.05; max-width: none; letter-spacing: -.045em; }
.component div:has(> h1.lg\:text-5xl) { max-width: 56rem; }
.component h1.lg\:text-5xl + p { font-size: 1.12rem; max-width: 40rem; margin-left: auto; margin-right: auto; }

/* ---------- feature cards: modern case, more air ---------- */
.component h4.uppercase { text-transform: none; letter-spacing: -.01em; font-size: 1.05rem; font-weight: 700; }
.component [class*="bg-card"] i[class*="text-accent-500"] {
  display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: 14px; border-radius: 14px; font-size: 1.15rem !important;
  background: rgba(229, 57, 53, .1); border: 1px solid rgba(229, 57, 53, .25);
}
.component [class*="bg-card"].text-center { padding: 1.6rem 1.4rem !important; }

/* ---------- comparison table (packs) ---------- */
.editor table { width: 100%; border-collapse: separate; border-spacing: 0; margin: .4rem 0 1.1rem; font-size: .92rem; border: 1px solid var(--dg-line); border-radius: 14px; overflow: hidden; }
.editor th { text-align: left; font-weight: 600; color: var(--dg-muted); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; background: rgba(255,255,255,.04); padding: .7rem .9rem; }
.editor td { padding: .7rem .9rem; border-top: 1px solid var(--dg-line); color: var(--dg-text); }
.editor tbody tr:last-child td { background: rgba(229,57,53,.08); }
.editor tbody tr:last-child td:first-child { font-weight: 700; }
@media (max-width: 640px) { .editor table { font-size: .82rem; } .editor th, .editor td { padding: .55rem .5rem; } }

/* ---------- limited-time promo badge (hero) ---------- */
.dg-promo {
  display: inline-flex; align-items: center; gap: .55rem; margin: 0 auto 1.4rem; padding: .5rem .95rem; border-radius: 999px;
  font-size: .9rem; font-weight: 600; letter-spacing: 0; line-height: 1.3; color: #ffd9b0;
  background: linear-gradient(90deg, rgba(255,122,40,.16), rgba(229,57,53,.16)); border: 1px solid rgba(255,140,60,.4);
  transition: border-color .2s, background .2s;
}
.dg-promo:hover { border-color: rgba(255,160,80,.75); }
.dg-promo b { color: #fff; }
h1 .dg-promo { display: flex; width: fit-content; }
.editor p[data-until] { padding: .8rem 1rem; border-radius: 12px; border: 1px solid rgba(255,140,60,.35); background: linear-gradient(90deg, rgba(255,122,40,.12), rgba(229,57,53,.1)); color: #ffe2c4; }

/* ---------- variant descriptions: easier to read ---------- */
[class*="bg-card"] label p, [class*="bg-card"] [x-text*="description"] { line-height: 1.45; }

/* ---------- cards in a row share the same height ---------- */
.component .flex-wrap > div > [class*="bg-card"] { height: 100%; }

/* ---------- product page buttons stay on one line ---------- */
[class*="bg-card"] button, [class*="bg-card"] a.inline-flex { white-space: nowrap; /* buy buttons */ }

/* ---------- small square icon buttons (cart, menu, currency) keep their size ---------- */
.size-10[class*="bg-card"] { width: 2.5rem !important; height: 2.5rem !important; min-height: 2.5rem; flex: none; border-radius: 12px !important; }

/* ---------- bilingual product descriptions: blocks tagged data-lang show only in their language ---------- */
html[lang="en"] [data-lang="fr"], html:not([lang="en"]) [data-lang="en"] { display: none !important; }

/* ---------- mobile ---------- */
@media (max-width: 640px) {
  h1 .dg-promo { display: block; width: auto; text-align: center; font-size: .8rem; padding: .55rem .9rem; border-radius: 14px; }
}
@media (max-width: 640px) {
  :root { --dg-radius: 16px; }
  .component h1 { font-size: 1.75rem !important; line-height: 1.15; }
}