/* Flent — boutique, thème noir. Fichier « custom.css » du marchand (conservé lors des mises à jour du thème). */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  --f-bg: #07070a; --f-bg2: #0e0e13; --f-fg: #f2f1ee; --f-mut: #8c8c96; --f-line: rgba(255,255,255,.09); --f-line2: rgba(255,255,255,.16);
  --f-acc: #8b8dff; --f-acc-rgb: 139,141,255; --f-hue: 238;
  --f-serif: "Instrument Serif", Georgia, serif; --f-mono: "JetBrains Mono", ui-monospace, monospace;
  --cl-accent: #8b8dff; --cl-accent-rgb: 139,141,255; --cl-background-primary: #07070a; --cl-background-primary-rgb: 7,7,10;
  --cl-background-secondary: #0e0e13; --cl-background-secondary-rgb: 14,14,19; --cl-border: rgba(255,255,255,.09);
  --bs-body-bg: #07070a; --bs-body-color: #f2f1ee; --bs-border-color: rgba(255,255,255,.09); --bs-font-sans-serif: "Inter", system-ui, sans-serif;
}
html, body { background: var(--f-bg) !important; color: var(--f-fg) !important; font-family: "Inter", system-ui, sans-serif !important; -webkit-font-smoothing: antialiased; }
body { padding-top: 88px !important; }
::selection { background: rgba(var(--f-acc-rgb), .35); }
a { color: var(--f-fg); text-decoration-color: var(--f-line2); text-underline-offset: 4px; }
a:hover { color: var(--f-acc); }
h1, h2, h3, h4 { color: var(--f-fg) !important; letter-spacing: -.02em; font-weight: 500; }
p, small, .text-muted, .text-secondary { color: var(--f-mut) !important; }
hr { border-color: var(--f-line) !important; opacity: 1; }

/* Composants courants : fond sombre, filets fins, aucune ombre lourde */
.card, .modal-content, .dropdown-menu, .offcanvas, .accordion-item, .list-group-item, .sa-product-card, .sa-cart-panel, .sa-cart-item, .sa-product-form, .table {
  background: var(--f-bg2) !important; color: var(--f-fg) !important; border: 1px solid var(--f-line) !important; border-radius: 14px !important; box-shadow: none !important;
}
.card, .sa-product-card { transition: border-color .3s ease, transform .4s cubic-bezier(.2,.7,.2,1); }
.card:hover, .sa-product-card:hover { border-color: var(--f-line2) !important; transform: translateY(-3px); }
.card img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.card:hover img { transform: scale(1.04); }
input, textarea, select, .form-control, .form-select, .choices__inner { background: #0b0b10 !important; color: var(--f-fg) !important; border: 1px solid var(--f-line) !important; border-radius: 10px !important; }
input::placeholder, textarea::placeholder { color: #5d5d66; }
input:focus, textarea:focus, select:focus, .form-control:focus { border-color: var(--f-acc) !important; box-shadow: 0 0 0 3px rgba(var(--f-acc-rgb), .18) !important; outline: 0; }
.btn, button, [type="submit"] { border-radius: 10px !important; font-weight: 500; transition: background .2s, color .2s, border-color .2s, transform .15s; }
.btn-primary, .sa-add-to-cart, [type="submit"] { background: var(--f-fg) !important; color: #0a0a0d !important; border: 1px solid var(--f-fg) !important; }
.btn-primary:hover, .sa-add-to-cart:hover, [type="submit"]:hover { background: var(--f-acc) !important; border-color: var(--f-acc) !important; color: #07070a !important; }
.btn-secondary, .btn-outline-primary, .btn-outline-secondary { background: transparent !important; color: var(--f-fg) !important; border: 1px solid var(--f-line2) !important; }
.btn:active, button:active { transform: scale(.98); }
.badge, [class*="badge"] { background: rgba(255,255,255,.07) !important; color: var(--f-fg) !important; border: 1px solid var(--f-line); border-radius: 6px !important; font-family: var(--f-mono); font-weight: 400; letter-spacing: .02em; }
[class*="price"] { color: var(--f-fg) !important; font-weight: 500; font-variant-numeric: tabular-nums; }
footer { background: transparent !important; border-top: 1px solid var(--f-line); color: var(--f-mut) !important; }
table, th, td { color: var(--f-fg) !important; border-color: var(--f-line) !important; }

/* Barre de navigation : îlot flottant, centré */
.navbar:not(.navbar .navbar), .sa-header {
  position: fixed !important; top: 14px !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important;
  width: min(940px, calc(100% - 24px)) !important; z-index: 1000 !important; padding: .35rem .6rem .35rem 1rem !important;
  background: rgba(10,10,14,.72) !important; backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--f-line) !important; border-radius: 999px !important; box-shadow: 0 20px 50px -24px #000 !important;
}
.navbar .container, .navbar .container-fluid { max-width: none !important; }
.navbar .navbar-nav { margin-left: auto !important; margin-right: auto !important; justify-content: center; gap: .1rem; }
.navbar .nav-link { color: var(--f-mut) !important; border-radius: 999px !important; padding: .45rem .95rem !important; font-size: .9rem; transition: color .2s, background .2s; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--f-fg) !important; background: rgba(255,255,255,.06) !important; }
@media (max-width: 991.98px) { .navbar:not(.navbar .navbar) { border-radius: 22px !important; } }

/* ───────── Éléments Flent injectés par custom.js ───────── */
.fl-mono { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--f-mut); }
.fl-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 2000; background: var(--f-acc); }

.fl-hero { position: relative; min-height: calc(100vh - 88px); margin-top: -88px; padding-top: 88px; display: grid; align-content: center; overflow: hidden; isolation: isolate; }
.fl-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.fl-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 55% at 50% 50%, transparent, var(--f-bg) 92%); }
.fl-wrap { width: min(1080px, calc(100% - 40px)); margin: 0 auto; }
.fl-h1 { font-family: var(--f-serif) !important; font-weight: 400 !important; font-size: clamp(3rem, 9.5vw, 8.2rem); line-height: .95; letter-spacing: -.035em; margin: 1.2rem 0 1.6rem; }
.fl-h1 em { font-style: italic; color: var(--f-acc); }
.fl-line { display: block; overflow: hidden; padding-bottom: .08em; }
.fl-line > span { display: block; transform: translateY(110%); animation: fl-up 1.1s cubic-bezier(.2,.8,.2,1) forwards; }
.fl-line:nth-child(2) > span { animation-delay: .12s; } .fl-line:nth-child(3) > span { animation-delay: .24s; }
@keyframes fl-up { to { transform: none; } }
.fl-lead { max-width: 520px; font-size: 1.05rem; line-height: 1.65; color: var(--f-mut) !important; opacity: 0; animation: fl-fade 1s .5s forwards; }
.fl-actions { display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: center; margin-top: 2rem; opacity: 0; animation: fl-fade 1s .7s forwards; }
@keyframes fl-fade { to { opacity: 1; } }
.fl-btn { display: inline-flex; align-items: center; gap: .6rem; padding: .9rem 1.5rem; border-radius: 999px; background: var(--f-fg); color: #0a0a0d !important; font-weight: 500; text-decoration: none !important; transition: background .25s, transform .25s; }
.fl-btn:hover { background: var(--f-acc); transform: translateY(-2px); }
.fl-link { color: var(--f-fg); text-decoration: none; border-bottom: 1px solid var(--f-line2); padding-bottom: 2px; transition: border-color .2s, color .2s; }
.fl-link:hover { border-color: var(--f-acc); color: var(--f-acc); }
.fl-scroll { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; }
.fl-scroll i { width: 1px; height: 46px; background: linear-gradient(var(--f-fg), transparent); transform-origin: top; animation: fl-drip 2s ease-in-out infinite; }
@keyframes fl-drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* Rubriques éditoriales (étapes, questions) */
.fl-section { padding: clamp(70px, 12vw, 150px) 0; }
.fl-h2 { font-family: var(--f-serif) !important; font-weight: 400 !important; font-size: clamp(2.2rem, 6vw, 4.4rem); line-height: 1; letter-spacing: -.03em; margin: .8rem 0 0; }
.fl-h2 em { font-style: italic; color: var(--f-acc); }
.fl-steps { margin-top: 3rem; border-top: 1px solid var(--f-line); }
.fl-step { display: grid; grid-template-columns: 90px 1fr 1.2fr; gap: 1.4rem; align-items: baseline; padding: 1.8rem 0; border-bottom: 1px solid var(--f-line); transition: padding .4s cubic-bezier(.2,.7,.2,1), background .3s; }
.fl-step:hover { padding-left: 14px; background: linear-gradient(90deg, rgba(255,255,255,.03), transparent); }
.fl-step b { font-family: var(--f-mono); font-weight: 400; color: var(--f-acc); font-size: .85rem; }
.fl-step h3 { margin: 0; font-size: 1.5rem; font-family: var(--f-serif) !important; font-weight: 400 !important; }
.fl-step p { margin: 0; line-height: 1.6; }
@media (max-width: 700px) { .fl-step { grid-template-columns: 1fr; gap: .4rem; } }
.fl-faq { margin-top: 2.4rem; border-top: 1px solid var(--f-line); }
.fl-q { border-bottom: 1px solid var(--f-line); }
.fl-q summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1.3rem 0; cursor: pointer; list-style: none; font-size: 1.1rem; }
.fl-q summary::-webkit-details-marker { display: none; }
.fl-q summary::after { content: "+"; font-family: var(--f-mono); color: var(--f-acc); transition: transform .3s; }
.fl-q[open] summary::after { transform: rotate(45deg); }
.fl-q p { margin: 0 0 1.4rem; max-width: 640px; line-height: 1.7; }

.fl-rv { opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1), filter .9s ease; }
.fl-rv.fl-in { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) { .fl-rv { opacity: 1; transform: none; filter: none; transition: none; } .fl-line > span { transform: none; animation: none; } .fl-lead, .fl-actions { opacity: 1; animation: none; } .fl-scroll i { animation: none; } }

/* Lisibilité du texte sur le tunnel, repères sans retour à la ligne, barre robuste */
.navbar:not(.navbar .navbar) > .container, .navbar:not(.navbar .navbar) > .container-fluid { display: flex !important; align-items: center; justify-content: space-between; flex-wrap: nowrap; }
.navbar .navbar-nav { display: flex; flex-direction: row; list-style: none; margin: 0; padding: 0; }
.navbar-brand { color: var(--f-fg) !important; font-weight: 600; }