/* =========================================================
Pirates Tools — styles.css (HARMONISÉ v8 - FINAL)
• Correction animation et espacement du logo
• Suppression du logo de fond global
========================================================= */

/* ========== 01) THÈME & VARIABLES GLOBALES ========== */
:root {
color-scheme: dark;

/* Couleurs */
--bg: #0a0f14;
--panel: #0e151c;
--card: #121b24;
--fg: #e6edf5;
--muted: #9fb4c5;
--border: #22303b;
--brand: #19d3ff;
--brand-2: #00e1b4;
--wa-1: #25d366;
--wa-2: #128c7e;

/* UI */
--radius: 14px;
--shadow: 0 10px 24px rgba(0,0,0,.35);
--container-w: 1100px;

/* Layout dynamiques (pilotés par JS) */
--listGap: 4vh; /* Réduction de l'espacement excessif */
--heroFadeH: 26vh;
--safe-top: 70px;
--app-vh: 1vh;

/* Dock & safe areas */
--dock-bottom: 14px;
--dockH: 64px;
--safe-bottom: env(safe-area-inset-bottom, 0px);

/* Hero États + transitions */
--hero-scale: 1.06;
--hero-blur: 8px;
--hero-duration: 420ms;
}

/* Upgrade si clamp() dispo (vieux WebKit safe) */
@supports (height: clamp(18vh,26vh,32vh)) {
:root { --heroFadeH: clamp(18vh,26vh,32vh); }
}

/* ========== 02) RESET, BASE & TYPO ========== */

* { box-sizing: border-box; }
[hidden], .hidden { display: none !important; }

html {
background: #0a0f14;
color-scheme: dark;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
width: 100%;
max-width: 100%;
overflow-x: hidden;
scroll-padding-top: var(--safe-top, 70px);
}

body {
margin: 0;
width: 100%;
max-width: 100%;
overflow-x: hidden;
touch-action: manipulation;
background: #0a0f14;
color: var(--fg);
font: 500 16px/1.6 system-ui, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding-bottom: calc(var(--dockH) + var(--safe-bottom) + 16px);
overscroll-behavior-y: auto;
-webkit-overflow-scrolling: touch;
}

/* Couche de masquage du hero après scroll — désactivée */
/* body.after-hero::after removed */

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
border-radius: 10px;
}
button, input, select, textarea { font: inherit; color: inherit; }

#app, main, .view {
background: #0a0f14;
}

.container {
width: min(var(--container-w), 92vw);
margin: 0 auto;
padding: 0 1rem;
position: relative;
z-index: 10;
box-sizing: border-box;
}
#view-home .container { z-index: 1; }
.empty { opacity: .6; text-align: center; padding: 2rem 0; width: 100%; display: flex; align-items: center; justify-content: center; }

/* Titres */
h1, h2, h3 { font-weight: 900; letter-spacing: .2px; }
h1 { font-size: clamp(1.4rem, 1.2rem + 1.5vw, 2rem); }
h2 { font-size: clamp(1.2rem, 1.05rem + 1vw, 1.6rem); }
h3 { font-size: 1.05rem; }

/* Catalogue header */
.catalogue-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(139, 92, 246, 0.15);
}
.catalogue-title {
    font-size: clamp(1.6rem, 1.3rem + 1.5vw, 2.2rem);
    text-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
    margin: 0 0 .3rem;
}
.catalogue-subtitle {
    color: var(--muted);
    font-size: .9rem;
    margin: 0;
    opacity: .7;
}

/* ========== 03) TOPBAR ========== */
.topbar, #topbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 8px 12px;
background: rgba(10,15,20,.78);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border);
}

.topbar-left {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
flex: 1 1 auto;
}

#menu-toggle {
background: transparent;
border: 0;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 22px;
padding: 4px 2px;
flex: 0 0 auto;
pointer-events: auto;
z-index: 1002;
}
#menu-toggle .bar {
width: 100%;
height: 3px;
border-radius: 2px;
background: #fff;
opacity: .95;
transition: .25s;
}

/* LOGO TOPBAR */
.topbar-logo-link {
display: inline-flex;
align-items: center;
margin-left: .5rem;
-webkit-tap-highlight-color: transparent;
cursor: pointer;
}

.topbar-logo {
display: block;
height: 28px;
width: auto;
object-fit: contain;
image-rendering: -webkit-optimize-contrast;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translateZ(0);
}

/* FORCER la visibilité du logo sur toutes les pages */
body.page-catalogue .topbar-logo-link,
body.page-devis .topbar-logo-link,
body.page-compte .topbar-logo-link,
body.page-produit .topbar-logo-link,
body.page-auth .topbar-logo-link {
display: inline-flex;
visibility: visible;
opacity: 1;
}

.cta {
margin-left: auto;
display: flex;
align-items: center;
gap: 10px;
flex: 0 1 auto;
min-width: 0;
}

/* ========== 04) BOUTONS - COULEURS FORCÉES ========== */
.btn {
display: inline-flex;
align-items: center;
gap: .5rem;
flex-shrink: 0;
padding: .58rem .9rem;
border-radius: 12px;
font-weight: 700;
border: 0;
cursor: pointer;
background: linear-gradient(90deg, #00bfff, #0099cc);
color: #ffffff;
box-shadow: 0 4px 12px rgba(0, 191, 255, 0.4);
transition: transform .15s ease;
}
.btn:active { transform: translateY(1px); }

.btn.btn-social {
width: 42px;
height: 42px;
padding: 0;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1.5px solid rgba(255,255,255,.12);
transition: transform .2s ease, box-shadow .2s ease;
}
.btn.btn-social:active { transform: scale(.92); }
.btn.btn-social svg { width: 20px; height: 20px; }

.btn.btn-fb {
background: #1877F2;
color: #fff;
box-shadow: 0 4px 12px rgba(24, 119, 242, .35);
}
.btn.btn-ig {
background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
color: #fff;
box-shadow: 0 4px 12px rgba(225, 48, 108, .35);
}

.btn.primary {
background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%);
color: #001018;
font-weight: 800;
padding: .7rem .95rem;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(25, 211, 255, 0.4);
}

@media (max-width: 360px) {
.btn.btn-social {
width: 38px;
height: 38px;
}
.btn.btn-social svg { width: 18px; height: 18px; }
}

/* ========== 05) MENU LATÉRAL ========== */
.backdrop {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
z-index: 998;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.backdrop:not([hidden]) { opacity: 1; visibility: visible; }

.drawer {
position: fixed;
top: 0;
left: 0;
width: 320px;
height: 100vh;
background: rgba(13, 27, 42, 0.95);
border-right: 2px solid rgba(65, 105, 225, 0.3);
box-shadow: 10px 0 50px rgba(65, 105, 225, 0.2);
z-index: 999;
transform: translateX(-100%);
transition: transform 0.3s ease;
padding: 20px 0 40px 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}

.drawer.open, .menu-open .drawer, #side-menu.open {
transform: translateX(0) !important;
}

.drawer:not(.open), .drawer.hidden, .drawer[aria-hidden="true"]:not(.open) {
transform: translateX(-100%) !important;
}

.backdrop.hidden, .backdrop[hidden] {
opacity: 0 !important;
visibility: hidden !important;
display: none !important;
}

.menu-title {
font-size: 28px;
font-weight: 700;
text-align: center;
margin: 20px 20px 30px 20px;
padding: 15px 20px;
color: #00bfff;
text-shadow: 0 0 20px rgba(0, 191, 255, 0.8);
background: rgba(65, 105, 225, 0.1);
border: 1px solid rgba(65, 105, 225, 0.3);
border-radius: 16px;
letter-spacing: 2px;
text-transform: uppercase;
}

.menu {
display: flex;
flex-direction: column;
gap: 8px;
padding: 0 20px;
height: 100%;
}

.menu a {
display: flex;
align-items: center;
gap: 20px;
padding: 18px 24px;
color: #e1e5e9;
text-decoration: none;
border-radius: 16px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(65, 105, 225, 0.2);
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}

.menu a:hover {
background: rgba(65, 105, 225, 0.15);
border-color: rgba(65, 105, 225, 0.6);
box-shadow: 0 8px 20px rgba(65, 105, 225, 0.3);
color: #00bfff;
}

.menu svg {
width: 28px;
height: 28px;
transition: all 0.3s ease;
filter: drop-shadow(0 0 8px rgba(65, 105, 225, 0.3));
}

.menu a:hover svg {
transform: scale(1.1);
filter: drop-shadow(0 0 15px rgba(0, 191, 255, 0.8));
color: #00bfff;
}

.menu span {
font-size: 16px;
font-weight: 600;
letter-spacing: 0.5px;
transition: all 0.3s ease;
text-shadow: 0 0 8px rgba(65, 105, 225, 0.3);
}

.menu a:hover span {
text-shadow: 0 0 15px rgba(0, 191, 255, 0.8);
}

body.menu-open { overflow: hidden; }

.menu-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 10px 0 6px;
}
.menu-section-label {
  display: block;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8B5CF6;
  opacity: 0.8;
}
.menu-terr-link {
  display: block;
  padding: 8px 12px;
  font-size: 14px;
  color: #cdd6e0;
  text-decoration: none;
  border-radius: 8px;
  transition: background .15s ease, color .15s ease;
}
.menu-terr-link:hover {
  background: rgba(139, 92, 246, 0.1);
  color: #fff;
}

@media (max-width: 768px) {
.drawer { width: 280px; }
}

/* ========== 06) HÉRO ========== */
#hero, .hero-full {
    position: relative;
    height: 100vh;
    pointer-events: none;
    background: #0a0f14;
    z-index: 10;
    overflow: visible;
}

/* Glow removed from hero — light is now on the logo image itself */
#hero::before, .hero-full::before {
    display: none;
}

/* Smooth transition from hero to content */
#hero::after, .hero-full::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30%;
    background: linear-gradient(to bottom, transparent, var(--bg));
    z-index: 1;
    pointer-events: none;
}

.hero-logo-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
    padding-top: var(--safe-top, 70px);
    box-sizing: border-box;
}

.hero-full.hero-out, #hero.hero-out {
z-index: -1;
height: 0 !important;
min-height: 0 !important;
display: none !important;
pointer-events: none !important;
}
#hero.hero-out .hero-logo-container {
display: none !important;
}
body.after-hero #hero {
z-index: -1;
pointer-events: none;
height: 0 !important;
min-height: 0 !important;
display: none !important;
}

#heroLogo, .hero-logo {
    position: relative;
    z-index: 11;
    display: block;
    width: clamp(180px, 42vmin, 420px);
    max-width: 75vw;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    transform-origin: 50% 50%;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
    will-change: transform, opacity;
    opacity: 0;
    transform: scale(0.95) translateY(20px);
    filter: drop-shadow(0 0 18px rgba(212,175,55,.45)) drop-shadow(0 0 6px rgba(212,175,55,.3));
}

#heroLogo.on, .hero-logo.on {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Masquer le hero sur toutes les pages sauf accueil */
body:not(.page-home) #hero,
body:not(.page-home) #heroLogo,
body:not(.page-home) .hero-logo-container {
display: none !important;
visibility: hidden !important;
}

body.page-catalogue #hero, body.page-catalogue #heroLogo, body.page-catalogue .hero-logo-container,
body.page-devis #hero, body.page-devis #heroLogo, body.page-devis .hero-logo-container,
body.page-compte #hero, body.page-compte #heroLogo, body.page-compte .hero-logo-container,
body.page-produit #hero, body.page-produit #heroLogo, body.page-produit .hero-logo-container,
body.page-auth #hero, body.page-auth #heroLogo, body.page-auth .hero-logo-container {
display: none !important;
visibility: hidden !important;
}

body.page-home #hero { display: block; }
body.page-home #heroLogo { display: block; }

/* hero-fade gradients removed — no visible separation */

.after-hero .hero-fade-fixed { opacity: 0; }

@media (max-height: 480px) {
#heroLogo, .hero-logo { width: clamp(140px, 40vmin, 420px); }
}

@media (prefers-reduced-motion: reduce) {
#heroLogo, .hero-logo {
transition: none !important;
transform: none !important;
filter: none !important;
opacity: 1 !important;
}
}

/* ========== 07) ACCUEIL — ESPACEMENT ========== */
#view-home .container {
    margin-top: 0;
    padding-top: 1rem;
}

/* ========== 08) TOOLBAR & CHAMPS ========== */
.toolbar {
position: relative;
z-index: 20;
width: 100%;
margin: 0 auto 1.2rem;
padding: .4rem 0;
display: grid;
grid-template-columns: 1fr auto;
gap: .6rem;
align-items: center;
}

.search, .select {
background: rgba(139, 92, 246, 0.04);
border: 1px solid rgba(139, 92, 246, 0.2);
border-radius: 12px;
color: var(--fg);
padding: .85rem 1rem;
box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
width: 100%;
min-height: 48px;
outline: none;
appearance: none;
-webkit-appearance: none;
transition: border-color .2s ease, box-shadow .2s ease;
}

.search::placeholder { color: #7f94a5; }

.select {
min-width: 160px;
padding-right: 2.1rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239fb4c5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right .65rem center;
background-size: .9rem auto;
}

.select:focus, .search:focus {
box-shadow: 0 0 0 2px rgba(139, 92, 246, .25), 0 0 12px rgba(139, 92, 246, .15);
border-color: rgba(139, 92, 246, .6);
}

@media (max-width: 680px) {
.toolbar {
grid-template-columns: 1fr;
gap: .5rem;
}
.select { min-width: auto; }
}

/* ========== 09) LISTES & CARTES AVEC EFFET NÉON VIOLET ========== */
.list {
    display: grid;
    gap: 1.2rem;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    position: relative;
    z-index: 10;
    padding: .5rem 0;
}

/* ── Product Cards ── */
.product-card {
    display: flex;
    flex-direction: column;
    background: rgba(139, 92, 246, 0.04);
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: var(--fg);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,.3), 0 0 8px rgba(139, 92, 246, 0.1);
}

.product-card:hover {
    transform: translateY(-6px);
    border-color: rgba(168, 85, 247, 0.6);
    box-shadow:
        0 12px 32px rgba(0,0,0,.4),
        0 0 20px rgba(139, 92, 246, 0.25),
        0 0 40px rgba(139, 92, 246, 0.1);
}

.product-card__img-wrap {
    position: relative;
    aspect-ratio: 4 / 3;
    background: rgba(255,255,255,.03);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom: 1px solid rgba(139, 92, 246, 0.15);
}

.product-card__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 1rem;
    transition: transform .3s ease;
}

.product-card:hover .product-card__img-wrap img {
    transform: scale(1.05);
}

.product-card__tag {
    position: absolute;
    top: .6rem;
    left: .6rem;
    background: rgba(139, 92, 246, 0.85);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .25rem .6rem;
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
}

.product-card__body {
    padding: .8rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    flex: 1;
}

.product-card__brand {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--brand);
    opacity: .8;
}

.product-card__title {
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card__price {
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    margin-top: auto;
    padding-top: .4rem;
    text-shadow: 0 0 12px rgba(139, 92, 246, 0.5);
}
.product-card__price small {
    font-size: 0.65em;
    font-weight: 600;
    opacity: 0.65;
    letter-spacing: 0.03em;
    vertical-align: baseline;
}

/* Small variant for related products */
.product-card--sm {
    border-radius: 12px;
}
.product-card--sm .product-card__img-wrap {
    aspect-ratio: 1 / 1;
}
.product-card--sm .product-card__body {
    padding: .5rem .7rem .7rem;
}

/* Related products grid */
.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .8rem;
    margin-top: .8rem;
}

/* No results state */
.no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--muted);
    font-size: 1.05rem;
    opacity: .7;
}

/* ── Category chips ── */
.cat-chip {
    display: inline-flex;
    align-items: center;
    padding: .5rem 1.1rem;
    border-radius: 999px;
    border: 1px solid rgba(139, 92, 246, 0.3);
    background: rgba(139, 92, 246, 0.06);
    color: var(--fg);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
    white-space: nowrap;
}

.cat-chip:hover {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.2);
}

.cat-chip.active {
    background: rgba(139, 92, 246, 0.2);
    border-color: #8B5CF6;
    color: #fff;
    box-shadow: 0 0 14px rgba(139, 92, 246, 0.35), 0 0 6px rgba(139, 92, 246, 0.2);
    text-shadow: 0 0 8px rgba(139, 92, 246, 0.5);
}

/* CARTES AVEC EFFET NÉON VIOLET */
.card {
background: rgba(139, 92, 246, 0.05);
border: 2px solid #8B5CF6;
border-radius: var(--radius);
overflow: hidden;
position: relative;
box-shadow:
0 0 10px rgba(139, 92, 246, 0.3),
0 0 20px rgba(139, 92, 246, 0.2),
0 0 30px rgba(139, 92, 246, 0.1),
inset 0 1px 0 rgba(139, 92, 246, 0.2);
transition: all 0.3s ease;
content-visibility: auto;
contain-intrinsic-size: 320px;
}

.card:hover {
border-color: #A855F7;
box-shadow:
0 0 15px rgba(168, 85, 247, 0.4),
0 0 25px rgba(168, 85, 247, 0.3),
0 0 35px rgba(168, 85, 247, 0.2),
inset 0 1px 0 rgba(168, 85, 247, 0.3);
transform: translateY(-2px);
}

.card.product {
  cursor: pointer;
  padding: 0;
  border: 1px solid rgba(139, 92, 246, 0.25);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 0 8px rgba(139, 92, 246, 0.15);
}
.card.product:hover {
  border-color: #A855F7;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 16px rgba(168, 85, 247, 0.3);
  transform: translateY(-4px);
}
.card.product .thumb {
  background: rgba(255, 255, 255, 0.03);
}
.card.product .title {
  padding: 0.5rem 0.8rem 0.2rem;
  font-size: 0.95rem;
  line-height: 1.3;
}
.card.product .actions {
  padding: 0.5rem 0.8rem 0.8rem;
}

.card .head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.1rem .6rem;
border-bottom: 1px solid rgba(139, 92, 246, 0.3);
}

.title {
margin: 0;
font-size: 1.05rem;
font-weight: 800;
color: #e6edf5;
}

.badge {
display: inline-flex;
align-items: center;
padding: .35rem .7rem;
border-radius: 999px;
font-weight: 700;
color: #e6edf5;
background: linear-gradient(180deg, rgba(139, 92, 246, 0.3), rgba(139, 92, 246, 0.1));
border: 1px solid rgba(139, 92, 246, 0.5);
box-shadow: 0 0 8px rgba(139, 92, 246, 0.3);
}

.specs {
display: flex;
flex-wrap: wrap;
gap: .5rem 1rem;
padding: 1rem 1.1rem;
color: var(--muted);
}

.actions {
display: flex;
gap: .6rem;
padding: 0 1.1rem 1.1rem;
flex-wrap: wrap;
}

.actions .btn {
min-width: 0;
flex: 0 1 auto;
background: linear-gradient(90deg, #00bfff, #0099cc);
color: #ffffff;
border: none;
box-shadow: 0 4px 12px rgba(0, 191, 255, 0.4);
}

@media (max-width: 560px) {
.actions .btn {
flex: 1 1 100%;
white-space: nowrap;
}
}

/* ========== 10) PAGE DEVIS ========== */

body.page-devis #view-devis {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative;
  z-index: 15;
}

#view-devis .container {
  position: relative;
  z-index: 20;
}

.devis-page-title {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

/* ── Stats Banner ── */
.devis-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 1.5rem;
}

.devis-stat {
  background: rgba(139,92,246,.06);
  border: 1px solid rgba(139,92,246,.2);
  border-radius: 16px;
  padding: .8rem .6rem;
  text-align: center;
  transition: all .3s ease;
}

.devis-stat--accent {
  background: rgba(139,92,246,.12);
  border-color: rgba(139,92,246,.4);
  box-shadow: 0 0 20px rgba(139,92,246,.15);
}

.devis-stat__value {
  display: block;
  font-size: 1.2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}

.devis-stat--accent .devis-stat__value {
  color: #A855F7;
  text-shadow: 0 0 20px rgba(168,85,247,.5);
}

.devis-stat__label {
  display: block;
  font-size: .7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: .2rem;
}

/* ── Cart Items List ── */
.devis-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Single Cart Item ── */
.devis-item {
  display: flex;
  gap: .8rem;
  align-items: stretch;
  background: linear-gradient(135deg, rgba(139,92,246,.06) 0%, rgba(14,21,28,.9) 100%);
  border: 1px solid rgba(139,92,246,.2);
  border-radius: 16px;
  padding: .7rem;
  transition: all .35s cubic-bezier(.4,0,.2,1);
  animation: devisItemIn .4s ease both;
  position: relative;
  overflow: hidden;
}

.devis-item::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(139,92,246,.08), transparent 60%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

.devis-item:hover::before { opacity: 1; }

.devis-item:hover {
  border-color: rgba(139,92,246,.4);
  box-shadow: 0 4px 20px rgba(139,92,246,.15);
}

.devis-item--removing {
  animation: devisItemOut .3s ease forwards;
}

@keyframes devisItemIn {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes devisItemOut {
  to { opacity: 0; transform: translateX(40px) scale(.95); height: 0; padding: 0; margin: 0; }
}

/* ── Item Image ── */
.devis-item__img-wrap {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(139,92,246,.15);
}

.devis-item__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Item Body ── */
.devis-item__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

.devis-item__info {
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

.devis-item__name {
  font-size: .9rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.devis-item__brand {
  font-size: .72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── Item Bottom Row ── */
.devis-item__bottom {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: .3rem;
}

/* ── Qty Stepper ── */
.devis-item__qty-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  border-radius: 10px;
  border: 1px solid rgba(139,92,246,.25);
  overflow: hidden;
  background: rgba(139,92,246,.06);
}

.devis-qty-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #c4b5fd;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s ease;
  -webkit-tap-highlight-color: transparent;
}

.devis-qty-btn:hover {
  background: rgba(139,92,246,.2);
  color: #fff;
}

.devis-qty-btn:active {
  transform: scale(.9);
}

.devis-qty-value {
  min-width: 26px;
  text-align: center;
  font-size: .85rem;
  font-weight: 700;
  color: #fff;
}

/* ── Subtotal ── */
.devis-item__subtotal {
  font-size: .9rem;
  font-weight: 700;
  color: #A855F7;
  text-shadow: 0 0 12px rgba(168,85,247,.3);
  margin-left: auto;
  white-space: nowrap;
}

/* ── Remove Button ── */
.devis-remove {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid rgba(239,68,68,.2);
  background: rgba(239,68,68,.06);
  color: #f87171;
  cursor: pointer;
  transition: all .25s ease;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.devis-remove:hover {
  background: rgba(239,68,68,.15);
  border-color: rgba(239,68,68,.4);
  box-shadow: 0 0 12px rgba(239,68,68,.2);
}

/* ── Empty State ── */
.devis-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  border: 2px dashed rgba(139,92,246,.25);
  border-radius: 20px;
  background: rgba(139,92,246,.04);
}

.devis-empty__icon {
  font-size: 3rem;
  margin-bottom: .8rem;
  filter: grayscale(.6);
  opacity: .6;
}

.devis-empty__title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 .4rem;
}

.devis-empty__text {
  font-size: .85rem;
  color: var(--muted);
  margin: 0 0 1.2rem;
}

/* ── Sticky Footer ── */
.devis-footer {
  position: sticky;
  bottom: calc(var(--dockH) + var(--safe-bottom) + 20px);
  z-index: 25;
  margin-top: 1.5rem;
  padding: 1rem 1.2rem;
  background: rgba(10,15,20,.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(139,92,246,.3);
  border-radius: 18px;
  box-shadow:
    0 -4px 30px rgba(0,0,0,.4),
    0 0 20px rgba(139,92,246,.12);
}

.devis-footer__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .8rem;
  font-size: .9rem;
  color: var(--muted);
}

.devis-footer__total strong {
  font-size: 1.3rem;
  color: #fff;
  text-shadow: 0 0 16px rgba(139,92,246,.4);
}

.devis-footer__actions {
  display: flex;
  gap: 10px;
}

/* ── Devis Buttons ── */
.devis-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .7rem 1rem;
  border: none;
  border-radius: 12px;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .3s cubic-bezier(.4,0,.2,1);
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}

.devis-btn--pay {
  flex: 2;
  background: linear-gradient(135deg, #635bff, #8B5CF6);
  color: #fff;
  box-shadow: 0 4px 18px rgba(139,92,246,.35);
}
.devis-btn--pay:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(139,92,246,.5);
  filter: brightness(1.07);
}

.devis-btn--wa {
  flex: 2;
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: #fff;
  box-shadow: 0 4px 15px rgba(37,211,102,.3);
}

.devis-btn--wa:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(37,211,102,.4);
}

.devis-btn--clear {
  background: rgba(239,68,68,.1);
  border: 1px solid rgba(239,68,68,.25);
  color: #f87171;
}

.devis-btn--clear:hover {
  background: rgba(239,68,68,.18);
  border-color: rgba(239,68,68,.4);
}

.devis-btn--browse {
  display: inline-flex;
  flex: none;
  background: linear-gradient(135deg, #8B5CF6, #7C3AED);
  color: #fff;
  box-shadow: 0 4px 15px rgba(139,92,246,.3);
  padding: .65rem 1.3rem;
}

.devis-btn--browse:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(139,92,246,.4);
}

@keyframes cardAppear {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========== 10b) BANDEAU SCROLL PRODUITS (accueil) ========== */
.home-products-strip {
    width: 100%;
    margin: 3rem 0 2rem;
    padding: 2rem 0;
    position: relative;
    overflow: visible;
    background: transparent;
}

.home-products-strip__title {
    text-align: center;
    margin: 0 0 1.5rem;
    font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem);
    font-weight: 900;
    color: #e6edf5;
    text-shadow: 0 0 16px rgba(139, 92, 246, 0.5);
}

.home-products-strip__track {
    display: flex;
    gap: 1.2rem;
    padding: 50px 1.5rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.home-products-strip__track::-webkit-scrollbar { display: none; }

.home-products-strip .product-card {
    flex: 0 0 220px;
    min-width: 220px;
}

.home-products-strip .product-card__img-wrap {
    aspect-ratio: 1 / 1;
}

@media (max-width: 480px) {
    .home-products-strip .product-card {
        flex: 0 0 170px;
        min-width: 170px;
    }
    .home-products-strip__track {
        gap: .8rem;
        padding: 0 1rem;
    }
}

/* ========== 10c) ABONNEMENTS & SERVICES ========== */

.plans-section {
  position: relative;
  padding: 2rem 0 1.5rem;
}

.plans-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139,92,246,.4), transparent);
}

.plans-header {
  text-align: center;
  margin-bottom: 1.2rem;
}

.plans-header__badge {
  display: inline-block;
  padding: .22rem .6rem;
  border-radius: 20px;
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #c4b5fd;
  background: rgba(139,92,246,.12);
  border: 1px solid rgba(139,92,246,.25);
  margin-bottom: .5rem;
}

.plans-header__title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 .2rem;
}

.plans-header__sub {
  font-size: .75rem;
  color: var(--muted);
  margin: 0;
}

/* ── Round Orbs ── */
.plan-orbs {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 1.2rem;
  flex-wrap: wrap;
}

.plan-orb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  transition: transform .3s ease;
}

.plan-orb:active { transform: scale(.94); }

.plan-orb__circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(139,92,246,.06);
  border: 2px solid rgba(139,92,246,.18);
  transition: all .35s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: visible;
}

.plan-orb__circle::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: all .35s ease;
}

/* Pulse ring animation (hidden by default) */
.plan-orb__pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid transparent;
  opacity: 0;
  transition: opacity .3s ease;
}

.plan-orb.is-active .plan-orb__pulse {
  opacity: 1;
  animation: orbPulse 2s ease-in-out infinite;
}

@keyframes orbPulse {
  0%, 100% { transform: scale(1); opacity: .6; }
  50% { transform: scale(1.12); opacity: 0; }
}

/* ── Basique — Cool Teal ── */
.plan-orb--basique .plan-orb__circle {
  border-color: rgba(45,212,191,.2);
  background: rgba(45,212,191,.06);
}
.plan-orb--basique .plan-orb__pulse { border-color: rgba(45,212,191,.3); }
.plan-orb--basique.is-active .plan-orb__circle {
  border-color: #2dd4bf;
  background: rgba(45,212,191,.14);
  box-shadow: 0 0 18px rgba(45,212,191,.3), 0 0 36px rgba(45,212,191,.08);
  transform: scale(1.06);
}
.plan-orb--basique.is-active .plan-orb__circle::after { border-color: rgba(45,212,191,.25); }
.plan-orb--basique .plan-orb__price { color: #2dd4bf; }
.plan-orb--basique .plan-orb__emoji { filter: drop-shadow(0 0 6px rgba(45,212,191,.3)); }

/* ── Pro — Electric Blue ── */
.plan-orb--pro .plan-orb__circle {
  border-color: rgba(59,130,246,.2);
  background: rgba(59,130,246,.06);
}
.plan-orb--pro .plan-orb__pulse { border-color: rgba(59,130,246,.3); }
.plan-orb--pro.is-active .plan-orb__circle {
  border-color: #3b82f6;
  background: rgba(59,130,246,.14);
  box-shadow: 0 0 20px rgba(59,130,246,.35), 0 0 40px rgba(59,130,246,.1);
  transform: scale(1.08);
}
.plan-orb--pro.is-active .plan-orb__circle::after { border-color: rgba(59,130,246,.3); }
.plan-orb--pro .plan-orb__price { color: #60a5fa; }
.plan-orb--pro .plan-orb__emoji { filter: drop-shadow(0 0 6px rgba(59,130,246,.35)); }

/* ── Gold — Luxe Amber ── */
.plan-orb--gold .plan-orb__circle {
  border-color: rgba(251,191,36,.22);
  background: linear-gradient(135deg, rgba(251,191,36,.08), rgba(245,158,11,.04));
}
.plan-orb--gold .plan-orb__pulse { border-color: rgba(251,191,36,.35); }
.plan-orb--gold.is-active .plan-orb__circle {
  border-color: #fbbf24;
  background: linear-gradient(135deg, rgba(251,191,36,.18), rgba(245,158,11,.08));
  box-shadow: 0 0 22px rgba(251,191,36,.35), 0 0 44px rgba(245,158,11,.12), inset 0 0 12px rgba(251,191,36,.06);
  transform: scale(1.1);
}
.plan-orb--gold.is-active .plan-orb__circle::after { border-color: rgba(251,191,36,.3); }
.plan-orb--gold .plan-orb__price { color: #fbbf24; }
.plan-orb--gold .plan-orb__name {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.plan-orb--gold .plan-orb__emoji {
  filter: drop-shadow(0 0 8px rgba(251,191,36,.4));
  animation: goldShimmer 3s ease-in-out infinite;
}
@keyframes goldShimmer {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(251,191,36,.3)); }
  50% { filter: drop-shadow(0 0 14px rgba(251,191,36,.6)); }
}

/* ── Black Metal — Dark Premium ── */
.plan-orb--black .plan-orb__circle {
  border-color: rgba(192,132,252,.2);
  background: linear-gradient(135deg, rgba(15,10,25,.95), rgba(80,40,120,.15));
}
.plan-orb--black .plan-orb__pulse { border-color: rgba(192,132,252,.35); }
.plan-orb--black.is-active .plan-orb__circle {
  border-color: #c084fc;
  background: linear-gradient(135deg, rgba(20,12,35,.95), rgba(100,50,160,.2));
  box-shadow: 0 0 24px rgba(168,85,247,.4), 0 0 48px rgba(139,92,246,.15), 0 0 6px rgba(255,255,255,.05);
  transform: scale(1.12);
}
.plan-orb--black.is-active .plan-orb__circle::after {
  border-color: rgba(192,132,252,.35);
  animation: blackRing 2.5s linear infinite;
}
@keyframes blackRing {
  0% { border-color: rgba(192,132,252,.35); }
  33% { border-color: rgba(168,85,247,.5); }
  66% { border-color: rgba(139,92,246,.35); }
  100% { border-color: rgba(192,132,252,.35); }
}
.plan-orb--black .plan-orb__name {
  background: linear-gradient(135deg, #e2e2e2, #c084fc, #e2e2e2);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: blackTextShine 4s linear infinite;
}
@keyframes blackTextShine {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}
.plan-orb--black .plan-orb__price { color: #c084fc; }
.plan-orb--black .plan-orb__emoji {
  filter: drop-shadow(0 0 8px rgba(168,85,247,.5));
}

/* Common active states */
.plan-orb.is-active .plan-orb__name { color: #fff; }
.plan-orb.is-active .plan-orb__price { opacity: 1; }

.plan-orb__emoji {
  font-size: 1.5rem;
  transition: filter .3s ease;
}

.plan-orb__name {
  font-size: .68rem;
  font-weight: 700;
  color: #d4d4e0;
  transition: color .3s ease;
  text-align: center;
  max-width: 72px;
  line-height: 1.2;
}

.plan-orb__price {
  font-size: .6rem;
  font-weight: 600;
  color: #A855F7;
  opacity: .7;
  transition: opacity .3s ease;
}

/* Tags */
.plan-orb__tag {
  position: absolute;
  top: -4px; right: -8px;
  padding: .12rem .38rem;
  border-radius: 6px;
  font-size: .46rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.plan-orb__tag--pro {
  color: #60a5fa;
  background: rgba(59,130,246,.12);
  border: 1px solid rgba(59,130,246,.25);
}
.plan-orb__tag--gold {
  color: #fbbf24;
  background: rgba(251,191,36,.12);
  border: 1px solid rgba(251,191,36,.25);
}
.plan-orb__tag--black {
  color: #c084fc;
  background: rgba(192,132,252,.12);
  border: 1px solid rgba(192,132,252,.25);
}

/* ── Chart — Modern Glassmorphism ── */
.plans-chart {
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(10,10,20,.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
  margin: 0 auto .8rem;
  max-width: 88%;
  box-shadow: 0 4px 24px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.04);
}

.plans-chart__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: .55rem .7rem .3rem;
}

.plans-chart__header-left {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.plans-chart__title {
  font-size: .62rem;
  font-weight: 600;
  color: rgba(255,255,255,.5);
  letter-spacing: .02em;
}

.plans-chart__saving {
  font-size: .72rem;
  font-weight: 800;
  color: #34d399;
  text-shadow: 0 0 8px rgba(52,211,153,.2);
  transition: all .4s ease;
  white-space: nowrap;
}

.plans-chart__legend {
  display: flex;
  gap: .55rem;
}

.plans-chart__leg {
  display: flex;
  align-items: center;
  gap: .18rem;
  font-size: .5rem;
  color: rgba(159,180,197,.4);
  letter-spacing: .01em;
}

.plans-chart__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.plans-chart__dot--store { background: rgba(239,68,68,.5); }
.plans-chart__dot--pirate { background: #8B5CF6; }

.plans-chart__canvas-wrap {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.plans-chart__canvas-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}

/* ── Detail panel ── */
.plan-detail {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .45s ease, opacity .3s ease;
  text-align: center;
  max-width: 92%;
  margin-left: auto;
  margin-right: auto;
}

.plan-detail.is-open {
  max-height: 340px;
  opacity: 1;
}

.plan-detail__inner {
  padding: .7rem .9rem;
  border-radius: 12px;
  border: 1px solid rgba(139,92,246,.12);
  background: rgba(139,92,246,.04);
}

.plan-detail__name {
  font-size: .85rem;
  font-weight: 700;
  color: #c4b5fd;
}

.plan-detail__desc {
  font-size: .7rem;
  color: var(--muted);
  margin-top: .25rem;
  line-height: 1.5;
}

.plan-detail__features {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  justify-content: center;
  margin-top: .4rem;
}

.plan-detail__feat {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  padding: .12rem .4rem;
  border-radius: 6px;
  font-size: .58rem;
  font-weight: 600;
  color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}

.plan-detail__feat-icon {
  font-size: .6rem;
}

.plan-detail__saving {
  display: inline-block;
  margin-top: .4rem;
  padding: .15rem .5rem;
  border-radius: 8px;
  font-size: .62rem;
  font-weight: 700;
  color: #34d399;
  background: rgba(52,211,153,.08);
  border: 1px solid rgba(52,211,153,.2);
}

/* Tier-specific detail colors */
.plan-detail--basique .plan-detail__inner {
  border-color: rgba(45,212,191,.15);
  background: rgba(45,212,191,.04);
}
.plan-detail--basique .plan-detail__name { color: #5eead4; }
.plan-detail--basique .plan-detail__feat {
  background: rgba(45,212,191,.06);
  border-color: rgba(45,212,191,.12);
}

.plan-detail--pro .plan-detail__inner {
  border-color: rgba(59,130,246,.15);
  background: rgba(59,130,246,.04);
}
.plan-detail--pro .plan-detail__name { color: #93c5fd; }
.plan-detail--pro .plan-detail__feat {
  background: rgba(59,130,246,.06);
  border-color: rgba(59,130,246,.12);
}

.plan-detail--gold .plan-detail__inner {
  border-color: rgba(251,191,36,.18);
  background: rgba(251,191,36,.04);
}
.plan-detail--gold .plan-detail__name {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.plan-detail--gold .plan-detail__feat {
  background: rgba(251,191,36,.06);
  border-color: rgba(251,191,36,.12);
  color: rgba(251,191,36,.8);
}

.plan-detail--black .plan-detail__inner {
  border-color: rgba(192,132,252,.18);
  background: linear-gradient(135deg, rgba(15,10,25,.6), rgba(80,40,120,.06));
}
.plan-detail--black .plan-detail__name {
  background: linear-gradient(135deg, #e2e2e2, #c084fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.plan-detail--black .plan-detail__feat {
  background: rgba(192,132,252,.06);
  border-color: rgba(192,132,252,.12);
  color: rgba(192,132,252,.8);
}

/* CTA button in detail panel */
.plan-detail__cta {
  display: inline-block;
  margin-top: .5rem;
  padding: .4rem 1.2rem;
  border-radius: 20px;
  font-size: .65rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .02em;
  transition: all .3s ease;
  cursor: pointer;
}
.plan-detail__cta--basique {
  color: #fff;
  background: linear-gradient(135deg, #2dd4bf, #14b8a6);
  box-shadow: 0 2px 12px rgba(45,212,191,.25);
}
.plan-detail__cta--pro {
  color: #fff;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow: 0 2px 12px rgba(59,130,246,.25);
}
.plan-detail__cta--gold {
  color: #1a1a2e;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  box-shadow: 0 2px 12px rgba(251,191,36,.3);
}
.plan-detail__cta--black {
  color: #fff;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed, #6d28d9);
  box-shadow: 0 2px 12px rgba(139,92,246,.3);
}
.plan-detail__cta:active { transform: scale(.96); }

/* ══════════════════════════════════════════════════════════════
   ABONNEMENT PAGE — 4 themes distincts
   ══════════════════════════════════════════════════════════════ */

.abo-page {
  padding: 1rem 1.2rem 3rem;
  min-height: 100vh;
  animation: aboFadeIn .5s ease;
}
@keyframes aboFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.abo-back {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  color: rgba(255,255,255,.4);
  text-decoration: none;
  margin-bottom: .8rem;
  transition: color .2s;
}
.abo-back:hover { color: rgba(255,255,255,.7); }

/* ── Hero header ── */
.abo-hero {
  text-align: center;
  padding: 2rem 1rem 1.5rem;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.abo-hero__glow {
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  top: -60px; left: 50%;
  transform: translateX(-50%);
  filter: blur(60px);
  opacity: .3;
  pointer-events: none;
}
.abo-hero__badge {
  display: inline-block;
  padding: .2rem .7rem;
  border-radius: 20px;
  font-size: .6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .6rem;
}
.abo-hero__title {
  font-size: 1.3rem;
  font-weight: 900;
  color: #fff;
  margin: 0 0 .4rem;
  line-height: 1.2;
}
.abo-hero__desc {
  font-size: .72rem;
  color: rgba(255,255,255,.5);
  line-height: 1.5;
  max-width: 340px;
  margin: 0 auto .8rem;
}
.abo-hero__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .15rem;
}
.abo-hero__amount {
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1;
}
.abo-hero__period {
  font-size: .8rem;
  font-weight: 600;
  opacity: .5;
}

/* ── Features list ── */
.abo-features {
  margin-bottom: 1.5rem;
}
.abo-features__title {
  font-size: .8rem;
  font-weight: 700;
  color: rgba(255,255,255,.4);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 .8rem;
}
.abo-feat {
  display: flex;
  gap: .6rem;
  padding: .6rem .7rem;
  border-radius: 12px;
  margin-bottom: .4rem;
  animation: aboFeatIn .4s ease both;
}
@keyframes aboFeatIn {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}
.abo-feat__icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}
.abo-feat__body { flex: 1; }
.abo-feat__title {
  font-size: .72rem;
  font-weight: 700;
  color: rgba(255,255,255,.85);
}
.abo-feat__detail {
  font-size: .62rem;
  color: rgba(255,255,255,.35);
  margin-top: .1rem;
  line-height: 1.4;
}

/* ── CTA bottom ── */
.abo-cta-wrap {
  text-align: center;
  padding: 1rem 0 2rem;
}
.abo-cta {
  display: inline-block;
  width: 100%;
  max-width: 320px;
  padding: .7rem 1.5rem;
  border: none;
  border-radius: 14px;
  font-size: .8rem;
  font-weight: 800;
  cursor: pointer;
  transition: all .3s ease;
  letter-spacing: .01em;
}
.abo-cta:active { transform: scale(.97); }
.abo-cta-note {
  font-size: .58rem;
  color: rgba(255,255,255,.25);
  margin-top: .4rem;
}

/* ════════════════════════════════════════════════════════════
   THEME: BASIQUE — Teal / Minimalist Clean
   ════════════════════════════════════════════════════════════ */
.abo-page--basique {
  background: linear-gradient(180deg, rgba(45,212,191,.04) 0%, transparent 40%);
}
.abo-page--basique .abo-hero {
  background: rgba(45,212,191,.04);
  border: 1px solid rgba(45,212,191,.1);
}
.abo-page--basique .abo-hero__glow { background: #2dd4bf; }
.abo-page--basique .abo-hero__badge {
  color: #2dd4bf;
  background: rgba(45,212,191,.1);
  border: 1px solid rgba(45,212,191,.2);
}
.abo-page--basique .abo-hero__amount { color: #2dd4bf; }
.abo-page--basique .abo-hero__period { color: #5eead4; }
.abo-page--basique .abo-feat {
  background: rgba(45,212,191,.03);
  border: 1px solid rgba(45,212,191,.06);
}
.abo-page--basique .abo-feat__title { color: #99f6e4; }
.abo-cta--basique {
  color: #042f2e;
  background: linear-gradient(135deg, #2dd4bf, #14b8a6);
  box-shadow: 0 4px 20px rgba(45,212,191,.3);
}

/* ════════════════════════════════════════════════════════════
   THEME: PRO — Electric Blue / Corporate Tech
   ════════════════════════════════════════════════════════════ */
.abo-page--pro {
  background: linear-gradient(180deg, rgba(59,130,246,.05) 0%, transparent 40%);
}
.abo-page--pro .abo-hero {
  background: rgba(59,130,246,.04);
  border: 1px solid rgba(59,130,246,.1);
}
.abo-page--pro .abo-hero__glow { background: #3b82f6; }
.abo-page--pro .abo-hero__badge {
  color: #60a5fa;
  background: rgba(59,130,246,.1);
  border: 1px solid rgba(59,130,246,.2);
}
.abo-page--pro .abo-hero__amount { color: #60a5fa; }
.abo-page--pro .abo-hero__period { color: #93c5fd; }
.abo-page--pro .abo-feat {
  background: rgba(59,130,246,.03);
  border: 1px solid rgba(59,130,246,.06);
}
.abo-page--pro .abo-feat__title { color: #bfdbfe; }
.abo-cta--pro {
  color: #fff;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow: 0 4px 20px rgba(59,130,246,.3);
}

/* ════════════════════════════════════════════════════════════
   THEME: GOLD — Luxe Amber / Warm Premium
   ════════════════════════════════════════════════════════════ */
.abo-page--gold {
  background: linear-gradient(180deg, rgba(251,191,36,.05) 0%, rgba(245,158,11,.02) 30%, transparent 50%);
}
.abo-page--gold .abo-hero {
  background: linear-gradient(135deg, rgba(251,191,36,.05), rgba(245,158,11,.02));
  border: 1px solid rgba(251,191,36,.12);
}
.abo-page--gold .abo-hero__glow { background: #fbbf24; opacity: .25; }
.abo-page--gold .abo-hero__badge {
  color: #fbbf24;
  background: rgba(251,191,36,.1);
  border: 1px solid rgba(251,191,36,.25);
}
.abo-page--gold .abo-hero__title {
  background: linear-gradient(135deg, #fff, #fde68a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.abo-page--gold .abo-hero__amount {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.abo-page--gold .abo-hero__period { color: #fcd34d; }
.abo-page--gold .abo-feat {
  background: rgba(251,191,36,.03);
  border: 1px solid rgba(251,191,36,.07);
}
.abo-page--gold .abo-feat__title { color: #fde68a; }
.abo-page--gold .abo-features__title { color: rgba(251,191,36,.5); }
.abo-cta--gold {
  color: #1a1a2e;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  box-shadow: 0 4px 20px rgba(251,191,36,.35);
}

/* ════════════════════════════════════════════════════════════
   THEME: BLACK METAL — Dark Iridescent / Ultra Premium
   ════════════════════════════════════════════════════════════ */
.abo-page--black {
  background: linear-gradient(180deg, rgba(139,92,246,.06) 0%, rgba(88,28,135,.03) 30%, transparent 50%);
}
.abo-page--black .abo-hero {
  background: linear-gradient(135deg, rgba(15,10,28,.8), rgba(88,28,135,.08));
  border: 1px solid rgba(192,132,252,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.abo-page--black .abo-hero__glow {
  background: linear-gradient(135deg, #8b5cf6, #c084fc);
  opacity: .2;
  width: 250px; height: 250px;
}
.abo-page--black .abo-hero__badge {
  background: linear-gradient(135deg, rgba(139,92,246,.15), rgba(192,132,252,.1));
  border: 1px solid rgba(192,132,252,.25);
  color: #c084fc;
}
.abo-page--black .abo-hero__title {
  background: linear-gradient(135deg, #fff, #c084fc, #fff);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: blackTextShine 4s linear infinite;
}
.abo-page--black .abo-hero__amount {
  background: linear-gradient(135deg, #c084fc, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.abo-page--black .abo-hero__period { color: #a78bfa; }
.abo-page--black .abo-feat {
  background: linear-gradient(135deg, rgba(139,92,246,.04), rgba(192,132,252,.02));
  border: 1px solid rgba(139,92,246,.08);
}
.abo-page--black .abo-feat__title { color: #ddd6fe; }
.abo-page--black .abo-features__title { color: rgba(192,132,252,.5); }
.abo-cta--black {
  color: #fff;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed, #6d28d9);
  box-shadow: 0 4px 24px rgba(139,92,246,.35), 0 0 40px rgba(139,92,246,.1);
}

@media (max-width: 400px) {
  .plan-orb__circle { width: 54px; height: 54px; }
  .plan-orb__emoji { font-size: 1.2rem; }
  .plan-orbs { gap: 10px; }
}

/* ========== 10b) AVIS CLIENTS — ACCUEIL ========== */
.home-reviews {
    width: 100%;
    margin: 2rem 0 0;
    padding: 3rem 0 4rem;
    background: linear-gradient(180deg, transparent 0%, rgba(139, 92, 246, 0.03) 30%, rgba(139, 92, 246, 0.06) 50%, rgba(139, 92, 246, 0.03) 70%, transparent 100%);
}
.home-reviews__title {
    text-align: center;
    margin: 0 0 2rem;
    font-size: clamp(1.4rem, 1rem + 2vw, 2rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #fff 0%, rgba(139, 92, 246, 0.8) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.home-reviews__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 2.5rem;
}
.home-reviews__empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2rem;
    color: var(--muted);
    font-size: .95rem;
    border: 1px dashed rgba(139, 92, 246, 0.15);
    border-radius: 14px;
}
.home-reviews__form-wrapper {
    max-width: 560px;
    margin: 0 auto;
    background: rgba(139, 92, 246, 0.03);
    border: 1px solid rgba(139, 92, 246, 0.12);
    border-radius: 16px;
    padding: 2rem;
}
.home-reviews__form-heading {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0 0 1.2rem;
    text-align: center;
    background: linear-gradient(135deg, #fff 0%, rgba(139, 92, 246, 0.7) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ========== 11) BANNIÈRE OUTILS 3D ========== */

.tools-banner {
width: min(800px, 92vw);
margin: 3rem auto 2rem;
position: relative;
z-index: 15;
}

.tools-banner h2 {
text-align: center;
margin: 0 0 1.2rem;
color: #e6edf5;
font-size: clamp(1.3rem, 1.1rem + 1.2vw, 1.8rem);
font-weight: 900;
text-shadow: 0 0 20px rgba(139, 92, 246, 0.6);
}

/* --- 3D Viewer Carousel --- */
.tools-3d-viewer {
position: relative;
display: flex;
align-items: center;
gap: 0;
}

.tools-3d-stage {
flex: 1;
position: relative;
height: clamp(320px, 50vw, 480px);
background: radial-gradient(ellipse at 50% 60%, rgba(139,92,246,0.08) 0%, rgba(10,15,20,0.95) 70%);
border: 2px solid rgba(139, 92, 246, 0.3);
border-radius: 20px;
overflow: hidden;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow:
  0 0 40px rgba(139, 92, 246, 0.15),
  inset 0 1px 0 rgba(255,255,255,0.08),
  inset 0 -1px 0 rgba(0,0,0,0.3);
}

.tools-3d-stage model-viewer {
--poster-color: transparent;
}

/* Label overlay */
.tools-3d-label {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
text-align: center;
pointer-events: none;
z-index: 5;
}

.tools-3d-brand {
display: block;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.15em;
color: rgba(139, 92, 246, 0.9);
margin-bottom: 2px;
}

.tools-3d-name {
display: block;
font-size: 1rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.7), 0 0 20px rgba(139,92,246,0.4);
white-space: nowrap;
}

/* Counter (e.g. 3 / 12) */
.tools-3d-counter {
position: absolute;
top: 14px;
right: 16px;
font-size: 0.75rem;
font-weight: 600;
color: rgba(255,255,255,0.5);
letter-spacing: 0.05em;
pointer-events: none;
z-index: 5;
}

/* Arrow buttons */
.tools-3d-arrow {
flex-shrink: 0;
width: 44px;
height: 44px;
border: none;
border-radius: 50%;
background: rgba(139, 92, 246, 0.7);
color: #fff;
font-size: 22px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.25s ease;
box-shadow: 0 4px 18px rgba(139,92,246,0.35);
z-index: 10;
}

.tools-3d-arrow:hover {
background: rgba(168, 85, 247, 0.95);
transform: scale(1.12);
box-shadow: 0 6px 24px rgba(168,85,247,0.5);
}

.tools-3d-arrow:active {
transform: scale(0.95);
}

.tools-3d-prev { margin-right: -22px; }
.tools-3d-next { margin-left: -22px; }

/* Dots navigation */
.tools-3d-dots {
position: absolute;
bottom: -28px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 10;
}

.tools-3d-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(139,92,246,0.3);
border: none;
padding: 0;
cursor: pointer;
transition: all 0.3s ease;
}

.tools-3d-dot.active {
background: #A855F7;
box-shadow: 0 0 10px rgba(168,85,247,0.6);
transform: scale(1.3);
}

.tools-3d-dot:hover:not(.active) {
background: rgba(139,92,246,0.6);
}

/* Add bottom margin for dots */
.tools-banner {
margin-bottom: 3.5rem;
}

/* ========== 12) MODAL VISUALISEUR 3D ========== */

.tool-3d-modal {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 9000;
opacity: 0;
visibility: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tool-3d-modal.open {
opacity: 1;
visibility: visible;
}

.tool-3d-backdrop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}

.tool-3d-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.9);
width: min(95vw, 1200px);
height: min(90vh, 800px);
background: rgba(18, 27, 36, 0.95);
border: 2px solid rgba(139, 92, 246, 0.5);
border-radius: 20px;
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.8),
0 0 40px rgba(139, 92, 246, 0.3);
display: flex;
flex-direction: column;
overflow: hidden;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tool-3d-modal.open .tool-3d-container {
transform: translate(-50%, -50%) scale(1);
}

.tool-3d-header {
padding: 1.5rem 2rem;
background: rgba(139, 92, 246, 0.1);
border-bottom: 2px solid rgba(139, 92, 246, 0.3);
display: flex;
justify-content: space-between;
align-items: center;
}

.tool-3d-header h2 {
margin: 0;
color: #ffffff;
font-size: 1.5rem;
font-weight: 900;
text-shadow: 0 0 20px rgba(139, 92, 246, 0.8);
}

.tool-3d-close {
background: none;
border: none;
color: #ffffff;
font-size: 2rem;
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}

.tool-3d-close:hover {
background: rgba(255, 255, 255, 0.1);
transform: scale(1.1);
}

.tool-3d-viewport {
flex: 1;
position: relative;
background: linear-gradient(135deg, #0a0f14 0%, #121b24 100%);
overflow: hidden;
}

.tool-3d-viewport::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(168, 85, 247, 0.1) 0%, transparent 50%);
z-index: 0;
pointer-events: none;
}

.tool-3d-viewport canvas {
width: 100% !important;
height: 100% !important;
display: block;
}

.loading-spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #ffffff;
}

.spinner {
width: 60px;
height: 60px;
border: 4px solid rgba(139, 92, 246, 0.3);
border-top: 4px solid #8B5CF6;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 1rem;
}

.loading-spinner p {
margin: 0;
font-size: 1rem;
color: #8B5CF6;
font-weight: 600;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

.model-error {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #ff6b6b;
background: rgba(255, 107, 107, 0.1);
padding: 2rem;
border-radius: 12px;
border: 2px dashed #ff6b6b;
}

.tool-3d-controls {
padding: 1.5rem 2rem;
background: rgba(139, 92, 246, 0.05);
border-top: 1px solid rgba(139, 92, 246, 0.3);
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
}

.tool-info-details {
flex: 1;
color: #b8c5d1;
}

.tool-info-details p {
margin: 0.3rem 0;
font-size: 0.9rem;
}

.tool-info-details strong {
color: #ffffff;
}

.tool-3d-actions {
display: flex;
gap: 1rem;
flex-shrink: 0;
}

.tool-3d-actions .btn {
padding: 0.7rem 1.2rem;
font-size: 0.9rem;
white-space: nowrap;
}

.control-hints {
position: absolute;
bottom: 20px;
left: 20px;
background: rgba(0, 0, 0, 0.7);
color: #ffffff;
padding: 1rem;
border-radius: 8px;
font-size: 0.8rem;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}

.control-hints h4 {
margin: 0 0 0.5rem;
color: #8B5CF6;
font-size: 0.9rem;
}

.control-hints ul {
margin: 0;
padding-left: 1rem;
list-style: none;
}

.control-hints li {
margin: 0.2rem 0;
}

.control-hints li::before {
content: "• ";
color: #8B5CF6;
font-weight: bold;
}

.fullscreen-btn {
position: absolute;
top: 20px;
right: 20px;
background: rgba(139, 92, 246, 0.8);
border: none;
color: white;
padding: 0.5rem;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
z-index: 10;
}

.fullscreen-btn:hover {
background: rgba(168, 85, 247, 0.9);
transform: scale(1.1);
}

/* ========== 13) CATALOGUE ========== */
.cat-list {
display: flex;
flex-wrap: wrap;
gap: .6rem;
margin: 0 0 1rem;
padding: 0;
}

.cat-card {
background: rgba(139, 92, 246, 0.05);
border: 2px solid #8B5CF6;
border-radius: var(--radius);
padding: 1rem 1.1rem;
cursor: pointer;
box-shadow:
0 0 10px rgba(139, 92, 246, 0.3),
0 0 20px rgba(139, 92, 246, 0.2),
0 0 30px rgba(139, 92, 246, 0.1),
inset 0 1px 0 rgba(139, 92, 246, 0.2);
transition: all 0.3s ease;
content-visibility: auto;
contain-intrinsic-size: 320px;
}

.cat-card:hover {
border-color: #A855F7;
box-shadow:
0 0 15px rgba(168, 85, 247, 0.4),
0 0 25px rgba(168, 85, 247, 0.3),
0 0 35px rgba(168, 85, 247, 0.2),
inset 0 1px 0 rgba(168, 85, 247, 0.3);
transform: translateY(-2px);
}

/* ========== 14) PDP — LANDING INTERACTIVE (Apple-style) ========== */

/* Navigation retour */
.pdp-nav {
    position: fixed;
    top: calc(var(--safe-top, 70px) + 8px);
    left: 1rem;
    z-index: 100;
}
.pdp-back {
    color: var(--fg);
    font-size: .85rem;
    font-weight: 600;
    padding: .45rem .8rem;
    border-radius: 10px;
    background: rgba(10, 15, 20, 0.7);
    border: 1px solid rgba(139, 92, 246, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background .2s, border-color .2s;
    text-decoration: none;
    display: inline-block;
}
.pdp-back:hover {
    background: rgba(139, 92, 246, 0.25);
    border-color: rgba(139, 92, 246, 0.6);
}

/* ── HERO : model-viewer plein ecran ── */
.pdp-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: #0a0f14;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0;
}

/* Glow ambiant derriere le model 3D */
.pdp-hero::after {
    content: '';
    position: absolute;
    top: 35%;
    left: 50%;
    width: 60vmin;
    height: 60vmin;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.12) 0%, rgba(139, 92, 246, 0.04) 40%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    animation: pdpGlowPulseHero 5s ease-in-out infinite;
}
@keyframes pdpGlowPulseHero {
    0%, 100% { opacity: .5; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}

/* Model-viewer plein ecran */
#pdp3d {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    --poster-color: transparent;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    will-change: transform, opacity, filter;
    z-index: 1;
    /* L'outil commence légèrement plus bas et zoome à l'apparition */
    animation: pdpModelAppear 1.2s cubic-bezier(0.22, 1, 0.36, 1) .1s both;
}
@keyframes pdpModelAppear {
    from { opacity: 0; transform: scale(0.9) translateY(30px); filter: blur(4px); }
    to   { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}
#pdp3d::part(default-progress-bar) { background: rgba(139, 92, 246, 0.6); height: 3px; }
#pdp3d::part(default-ar-button) { display: none; }

/* Gradient en bas du hero */
.pdp-hero__gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 55%;
    background: linear-gradient(to top, rgba(10, 15, 20, 0.95) 0%, rgba(10, 15, 20, 0.5) 45%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}

/* Info en bas du hero (titre + prix) */
.pdp-hero__info {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 0 1.5rem 3.5rem;
    will-change: transform, opacity;
    animation: pdpInfoAppear 1s cubic-bezier(0.22, 1, 0.36, 1) .5s both;
}
@keyframes pdpInfoAppear {
    from { opacity: 0; transform: translateY(40px) scale(0.92); filter: blur(6px); }
    to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.pdp-hero__title {
    font-size: clamp(2rem, 1rem + 4.5vw, 3.8rem);
    font-weight: 900;
    margin: 0 0 .5rem;
    line-height: 1.05;
    letter-spacing: -0.03em;
    background: linear-gradient(180deg, #fff 30%, rgba(139, 92, 246, 0.7) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
}

.pdp-hero__tag {
    font-size: .95rem;
    color: rgba(255,255,255,.5);
    margin: 0 0 .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
}

.pdp-hero__price {
    font-size: 1.8rem;
    font-weight: 800;
    margin-top: .2rem;
}
.pdp-hero__price .pdp-price__ttc {
    color: #fff;
    text-shadow: 0 0 25px rgba(139, 92, 246, 0.6);
}
.pdp-hero__price .pdp-price__ht {
    display: inline-block;
    margin-left: .6rem;
    font-size: .85rem;
    font-weight: 500;
    color: rgba(255,255,255,.4);
}

/* Scroll hint */
.pdp-hero__scroll-hint {
    position: absolute;
    bottom: 1.2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    color: rgba(255,255,255,.5);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    animation: scrollHintBounce 2s ease infinite;
    transition: opacity .4s ease;
}
.pdp-hero__scroll-hint.hidden-hint {
    opacity: 0;
    pointer-events: none;
}
@keyframes scrollHintBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: .4; }
    50% { transform: translateX(-50%) translateY(8px); opacity: 1; }
}

/* ── KEYFRAMES ── */
@keyframes pdpFadeUp {
    from { opacity: 0; transform: translateY(80px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes pdpFadeScale {
    from { opacity: 0; transform: scale(0.7) translateY(60px); filter: blur(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}
@keyframes pdpSlideLeft {
    from { opacity: 0; transform: translateX(-80px); filter: blur(4px); }
    to { opacity: 1; transform: translateX(0); filter: blur(0); }
}
@keyframes pdpSlideRight {
    from { opacity: 0; transform: translateX(80px); filter: blur(4px); }
    to { opacity: 1; transform: translateX(0); filter: blur(0); }
}
@keyframes pdpGlow {
    from { box-shadow: 0 0 0 rgba(139,92,246,0); }
    to { box-shadow: 0 0 60px rgba(139,92,246,0.25), 0 20px 80px rgba(0,0,0,.6); }
}
@keyframes pdpScaleIn {
    from { opacity: 0; transform: scale(0.7); filter: blur(8px); }
    to { opacity: 1; transform: scale(1); filter: blur(0); }
}
@keyframes pdpLineReveal {
    from { opacity: 0; transform: translateX(-40px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes pdpGlowPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(139,92,246,0.1); }
    50% { box-shadow: 0 0 50px rgba(139,92,246,0.3), 0 0 100px rgba(139,92,246,0.12); }
}
@keyframes pdpGlowLine {
    0% { transform: scaleX(0); opacity: 0; }
    100% { transform: scaleX(1); opacity: 1; }
}
@keyframes pdpShine {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

/* ── GLOW DIVIDERS between sections ── */
.pdp-section + .pdp-section::before {
    content: '';
    display: block;
    width: 60%;
    max-width: 400px;
    height: 1px;
    margin: 0 auto 0;
    background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.5), transparent);
    opacity: 0;
    transform: scaleX(0);
    transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1), opacity 1s ease;
}
.pdp-section.visible + .pdp-section::before,
.pdp-section + .pdp-section.visible::before {
    opacity: 1;
    transform: scaleX(1);
}

/* ── SECTIONS — base (JS handles transforms via scroll) ── */
.pdp-section {
    opacity: 0;
    transform: translateY(80px) scale(0.95);
    will-change: opacity, transform, filter;
    transition: none;
    position: relative;
}

/* Visible state for IntersectionObserver (stagger children) */
.pdp-section.visible {
    animation: pdpFadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Scale-up variant (discover, CTA) — JS drives the heading, CSS for the container */
.pdp-section[data-animate="scale-up"] {
    transform: translateY(100px) scale(0.75);
}
.pdp-section[data-animate="scale-up"].visible {
    animation: pdpFadeScale 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Parallax variant (media) */
.pdp-section[data-animate="parallax"] {
    transform: translateY(120px) scale(0.85);
}
.pdp-section[data-animate="parallax"].visible {
    animation: pdpFadeScale 1.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Stagger variant (features, kit) */
.pdp-section[data-animate="stagger"] {
    transform: translateY(60px);
}
.pdp-section[data-animate="stagger"].visible {
    animation: pdpFadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Fade-up variant */
.pdp-section[data-animate="fade-up"].visible {
    animation: pdpFadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ── SECTION INNER ── */
.pdp-section__inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 4rem 1.5rem;
}
.pdp-section__inner--wide {
    max-width: 1100px;
}
.pdp-section__heading {
    font-size: clamp(1.3rem, 1rem + 1.5vw, 2rem);
    font-weight: 900;
    margin: 0 0 1.5rem;
    text-align: center;
    text-shadow: 0 0 20px rgba(139, 92, 246, 0.35);
}
.pdp-section__heading--big {
    font-size: clamp(1.6rem, 1rem + 3vw, 2.8rem);
    letter-spacing: -0.02em;
    margin-bottom: 2rem;
}

/* ── DISCOVER SECTION ── */
.pdp-section--discover {
    padding: 8rem 0;
    background: linear-gradient(180deg, #0a0f14 0%, #0e151c 50%, #0a0f14 100%);
    position: relative;
    overflow: hidden;
}
.pdp-section--discover::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.5s ease;
}
.pdp-section--discover.visible::after {
    opacity: 1;
}
.pdp-discover__heading {
    font-size: clamp(2.2rem, 1.2rem + 5vw, 4rem);
    font-weight: 900;
    text-align: center;
    margin: 0 0 2rem;
    letter-spacing: -0.04em;
    line-height: 1.05;
    background: linear-gradient(135deg, #fff 0%, rgba(139, 92, 246, 0.9) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    will-change: transform, opacity, filter;
}
.pdp-discover__desc {
    font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.4rem);
    line-height: 1.8;
    color: #c5d5e5;
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
    will-change: transform, opacity, filter;
}

/* ── SPLIT SECTION : 3D + SPECS ── */
.pdp-section--split {
    padding: 4rem 0;
    background: linear-gradient(180deg, #0a0f14 0%, rgba(139, 92, 246, 0.03) 50%, #0a0f14 100%);
}
.pdp-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
.pdp-split__viewer {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 24px;
    overflow: hidden;
    background: rgba(139, 92, 246, 0.03);
    border: 1px solid rgba(139, 92, 246, 0.1);
    will-change: transform, opacity;
    opacity: 0;
}
.pdp-section.visible .pdp-split__viewer {
    animation: pdpGlowPulse 4s ease infinite;
}
#pdp3dSecondary {
    width: 100%;
    height: 100%;
    --poster-color: transparent;
    background: transparent !important;
    border: none !important;
    outline: none !important;
}
#pdp3dSecondary::part(default-progress-bar) { background: rgba(139, 92, 246, 0.6); height: 2px; }
#pdp3dSecondary::part(default-ar-button) { display: none; }

.pdp-split__specs {
    padding: 1rem 0;
    will-change: transform, opacity;
    opacity: 0;
}
.pdp-split__specs .pdp-section__heading {
    text-align: left;
    margin-bottom: 1.5rem;
}

/* ── SPECS TABLE ── */
.pdp-specs-table {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(139, 92, 246, 0.15);
    background: rgba(139, 92, 246, 0.04);
}
.pdp-specs-table table {
    width: 100%;
    border-collapse: collapse;
}
.pdp-specs-table tr {
    opacity: 0;
    will-change: transform, opacity, filter;
}

.pdp-specs-table td {
    padding: .85rem 1.1rem;
    border-bottom: 1px solid rgba(139, 92, 246, 0.08);
    font-size: .9rem;
}
.pdp-specs-table tr:last-child td { border-bottom: 0; }
.pdp-specs-table td:first-child {
    color: var(--muted);
    font-weight: 600;
    width: 40%;
}
.pdp-specs-table td:last-child {
    color: var(--fg);
}

/* ── PHOTO PRODUIT ── */
.pdp-section--media {
    padding: 2rem 0;
}
.pdp-section--media .pdp-section__inner {
    display: flex;
    justify-content: center;
}
.pdp-landing__media {
    width: 100%;
    max-width: 500px;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(139, 92, 246, 0.15);
    background: rgba(255,255,255,.03);
    will-change: transform, opacity, filter;
    opacity: 0;
}
.pdp-section.visible .pdp-landing__media {
    animation: pdpGlow 1.2s ease .3s forwards;
}
.pdp-landing__media img {
    width: 100%;
    height: auto;
    display: block;
}

/* ── FEATURES — grille ── */
.pdp-section--features {
    padding: 5rem 0;
    background: linear-gradient(180deg, #0a0f14 0%, #0e151c 50%, #0a0f14 100%);
    position: relative;
    overflow: hidden;
}
.pdp-section--features::after {
    content: '';
    position: absolute;
    top: 30%;
    right: -100px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.06) 0%, transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.5s ease .3s;
}
.pdp-section--features.visible::after {
    opacity: 1;
}
.pdp-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.2rem;
}
.pdp-feature {
    background: rgba(139, 92, 246, 0.05);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: 16px;
    padding: 1.3rem 1.5rem;
    font-size: 1rem;
    color: #d8e6f1;
    display: flex;
    align-items: center;
    gap: .8rem;
    opacity: 0;
    will-change: transform, opacity, filter;
    transition: border-color .25s, box-shadow .25s;
}
.pdp-feature:hover {
    border-color: rgba(139, 92, 246, 0.6);
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.25), 0 8px 30px rgba(0,0,0,.3);
    transform: translateY(-4px) scale(1.03);
}
.pdp-feature__icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(139, 92, 246, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    color: #A855F7;
}

/* ── KIT ── */
.pdp-section--kit {
    padding: 3rem 0;
}
.pdp-kit {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .7rem;
    max-width: 600px;
    margin: 0 auto;
}
.pdp-kit li {
    padding: .8rem 1.1rem;
    background: rgba(139, 92, 246, 0.05);
    border: 1px solid rgba(139, 92, 246, 0.12);
    border-radius: 12px;
    font-size: .95rem;
    color: #d8e6f1;
    display: flex;
    align-items: center;
    gap: .6rem;
    opacity: 0;
    will-change: transform, opacity, filter;
    transition: border-color .2s;
}
.pdp-kit li:hover {
    border-color: rgba(139, 92, 246, 0.4);
    transform: translateX(6px);
}
.pdp-kit li::before {
    content: '\2713';
    color: #A855F7;
    font-weight: 700;
}

/* ── CTA ── */
.pdp-section--cta {
    padding: 5rem 0;
    text-align: center;
    background: linear-gradient(180deg, #0a0f14 0%, rgba(139, 92, 246, 0.05) 50%, #0a0f14 100%);
}
.pdp-cta__heading {
    font-size: clamp(1.8rem, 1rem + 3.5vw, 3.2rem);
    font-weight: 900;
    margin: 0 0 2rem;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, #fff 0%, rgba(139, 92, 246, 0.8) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    will-change: transform, opacity, filter;
}
.pdp-landing__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}
/* PDP CTA buttons — override .btn base styles for product page theme */
.pdp-landing__actions .btn--lg {
    padding: 1rem 2.2rem;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    will-change: transform, opacity, filter;
    transition: transform .2s ease, box-shadow .25s ease;
}
.pdp-landing__actions .btn--lg:hover {
    transform: translateY(-3px);
}
/* Primary — violet gradient */
.pdp-landing__actions .btn--lg.primary {
    background: linear-gradient(135deg, #8B5CF6, #A855F7);
    color: #fff;
    box-shadow: 0 0 24px rgba(139, 92, 246, 0.4), 0 4px 16px rgba(0,0,0,.3);
}
.pdp-landing__actions .btn--lg.primary:hover {
    box-shadow: 0 0 40px rgba(139, 92, 246, 0.6), 0 8px 24px rgba(0,0,0,.4);
}
/* WhatsApp — green */
.pdp-landing__actions .btn--lg.btn-wa {
    background: linear-gradient(135deg, #25d366, #128c7e);
    color: #fff;
    box-shadow: 0 0 20px rgba(37, 211, 102, 0.3), 0 4px 16px rgba(0,0,0,.3);
}
.pdp-landing__actions .btn--lg.btn-wa:hover {
    box-shadow: 0 0 36px rgba(37, 211, 102, 0.5), 0 8px 24px rgba(0,0,0,.4);
}
/* Share — outline style */
.pdp-landing__actions .btn--lg:not(.primary):not(.btn-wa) {
    background: rgba(255,255,255,.06);
    color: #e6edf5;
    border: 1.5px solid rgba(139, 92, 246, 0.4);
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.15), 0 4px 12px rgba(0,0,0,.2);
}
.pdp-landing__actions .btn--lg:not(.primary):not(.btn-wa):hover {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.6);
    box-shadow: 0 0 28px rgba(139, 92, 246, 0.3), 0 8px 24px rgba(0,0,0,.3);
}

/* ── AVIS CLIENTS ── */
.pdp-reviews {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Résumé note moyenne */
.pdp-reviews__summary {
    text-align: center;
    padding: 2rem;
    background: rgba(139, 92, 246, 0.04);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: 16px;
}
.pdp-reviews__avg {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
}
.pdp-reviews__avg-num {
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, #fff 0%, rgba(139, 92, 246, 0.8) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.pdp-reviews__avg-stars {
    font-size: 1.6rem;
    color: #FFD700;
    letter-spacing: 2px;
}
.pdp-reviews__avg-count {
    font-size: .9rem;
    color: var(--muted);
    margin-top: .25rem;
}

/* Liste des avis */
.pdp-reviews__list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.pdp-review-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(139, 92, 246, 0.12);
    border-radius: 14px;
    padding: 1.2rem 1.4rem;
    transition: border-color .2s;
}
.pdp-review-card:hover {
    border-color: rgba(139, 92, 246, 0.3);
}
.pdp-review-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    margin-bottom: .6rem;
}
.pdp-review-card__author {
    display: flex;
    align-items: center;
    gap: .6rem;
}
.pdp-review-card__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8B5CF6, #A855F7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: .85rem;
    color: #fff;
    flex-shrink: 0;
}
.pdp-review-card__name {
    font-weight: 700;
    font-size: .95rem;
    color: var(--fg);
}
.pdp-review-card__date {
    font-size: .78rem;
    color: var(--muted);
}
.pdp-review-card__stars {
    color: #FFD700;
    font-size: 1rem;
    letter-spacing: 1px;
}
.pdp-review-card__text {
    font-size: .92rem;
    line-height: 1.6;
    color: rgba(230, 237, 245, 0.85);
    margin: 0;
}

/* Formulaire */
.pdp-reviews__form-wrapper {
    background: rgba(139, 92, 246, 0.03);
    border: 1px solid rgba(139, 92, 246, 0.12);
    border-radius: 16px;
    padding: 2rem;
}
.pdp-reviews__form-title {
    font-size: 1.2rem;
    font-weight: 800;
    margin: 0 0 1.2rem;
    background: linear-gradient(135deg, #fff 0%, rgba(139, 92, 246, 0.7) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.pdp-reviews__form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.pdp-reviews__stars-input {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.pdp-reviews__stars-label {
    font-size: .9rem;
    color: var(--muted);
    font-weight: 600;
}
.pdp-reviews__stars-select {
    display: flex;
    gap: 4px;
}
.pdp-reviews__star-btn {
    background: none;
    border: none;
    font-size: 1.8rem;
    color: rgba(255, 255, 255, 0.15);
    cursor: pointer;
    padding: 0 2px;
    transition: color .15s, transform .15s;
    line-height: 1;
}
.pdp-reviews__star-btn:hover,
.pdp-reviews__star-btn.active {
    color: #FFD700;
    transform: scale(1.15);
}
.pdp-reviews__star-btn.active {
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}
.pdp-reviews__input,
.pdp-reviews__textarea {
    width: 100%;
    padding: .85rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 12px;
    color: var(--fg);
    font: inherit;
    font-size: .95rem;
    resize: vertical;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
}
.pdp-reviews__input:focus,
.pdp-reviews__textarea:focus {
    outline: none;
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 0 0 16px rgba(139, 92, 246, 0.15);
}
.pdp-reviews__input::placeholder,
.pdp-reviews__textarea::placeholder {
    color: rgba(159, 180, 197, 0.5);
}
.pdp-reviews__submit {
    align-self: flex-start;
    background: linear-gradient(135deg, #8B5CF6, #A855F7);
    color: #fff;
    box-shadow: 0 0 24px rgba(139, 92, 246, 0.4), 0 4px 16px rgba(0,0,0,.3);
    padding: .85rem 2rem;
    border: none;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform .2s, box-shadow .25s;
}
.pdp-reviews__submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 40px rgba(139, 92, 246, 0.6), 0 8px 24px rgba(0,0,0,.4);
}
.pdp-reviews__empty {
    text-align: center;
    padding: 1.5rem;
    color: var(--muted);
    font-size: .92rem;
    border: 1px dashed rgba(139, 92, 246, 0.15);
    border-radius: 12px;
}

/* ── RESPONSIVE PDP ── */
@media (max-width: 768px) {
    .pdp-split {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .pdp-split__viewer {
        max-width: 400px;
        margin: 0 auto;
    }
    .pdp-split__specs .pdp-section__heading {
        text-align: center;
    }
    .pdp-hero__title { font-size: clamp(1.4rem, 1rem + 3vw, 2.2rem); }
    .pdp-section__inner { padding: 3rem 1rem; }
    .pdp-features { grid-template-columns: 1fr; }
    .pdp-discover__heading { font-size: clamp(1.6rem, 1rem + 3vw, 2.4rem); }
}

/* Legacy fallbacks */
.pdp { padding: .5rem 0 1.2rem; }
.pdp__grid { display: grid; gap: 1.2rem; grid-template-columns: 1.2fr 1fr; }

.pdp__media {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: .8rem;
display: grid;
place-items: center;
min-height: 180px;
}

.pdp__media img {
width: 100%;
height: auto;
display: block;
max-height: 56vh;
object-fit: contain;
transform: translateZ(0);
filter: drop-shadow(0 18px 36px rgba(0,0,0,.35));
}

.pdp__info {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 1rem 1.1rem;
}

.pdp__title { margin: .2rem 0 .2rem; overflow-wrap: anywhere; hyphens: auto; }
.pdp__tag { margin: .2rem 0 .6rem; color: #cfeaf8; }
.pdp__desc { margin: 0 0 1rem; color: #d8e6f1; }
.pdp__specs { margin: .8rem 0 0; padding-left: 1.1rem; color: #b9d0e2; }
.pdp__specs li { margin: .25rem 0; }

.pdp__specs table {
width: 100%;
border-collapse: collapse;
font-size: .95rem;
margin-top: .25rem;
border: 1px solid rgba(255,255,255,.06);
background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
}

.pdp__specs th, .pdp__specs td {
text-align: left;
padding: .55rem .7rem;
vertical-align: top;
border-bottom: 1px solid rgba(255,255,255,.06);
}

.pdp__specs th {
width: 38%;
color: #cfeaf8;
font-weight: 700;
}

.pdp__specs tr:last-child th, .pdp__specs tr:last-child td { border-bottom: 0; }

.pdp__specs .badge {
background: linear-gradient(180deg, rgba(25,211,255,.22), rgba(0,225,180,.10));
border-color: rgba(25,211,255,.45);
color: #e6f7ff;
}

.pdp__related {
margin: 1.2rem 0 0;
display: grid;
gap: .8rem;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

@media (max-width: 740px) {
.pdp__grid { grid-template-columns: 1fr; }
}

/* ========== 15) (legacy devis cleared) ========== */

/* ========== 16) JAUGE FIDÉLITÉ ========== */
.meter { display: grid; gap: .4rem; }

.meter__rail {
position: relative;
height: 14px;
border-radius: 999px;
overflow: hidden;
background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
border: 1px solid var(--border);
box-shadow: inset 0 0 8px rgba(0,0,0,.35);
}

.meter__fill, #accFill {
position: absolute;
inset: 0 auto 0 0;
width: 0%;
background: linear-gradient(90deg, var(--brand), var(--brand-2));
filter: drop-shadow(0 0 10px rgba(0,225,180,.45));
transition: width .25s ease;
}

.meter__cursor, #accCursor {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 18px rgba(25,211,255,.8), 0 0 28px rgba(0,225,180,.6);
border: 2px solid #0a0f14;
transition: left .25s ease;
}

.meter__scale {
display: flex;
justify-content: space-between;
font-size: .85rem;
color: #9fb4c5;
}

#accSlider {
width: 100%;
appearance: none;
height: 0;
outline: none;
background: transparent;
margin-top: .2rem;
}

#accSlider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 22px;
height: 22px;
border-radius: 50%;
background: linear-gradient(90deg, var(--brand), var(--brand-2));
border: 2px solid #0a0f14;
box-shadow: 0 0 12px rgba(25,211,255,.8);
margin-top: -11px;
}

#accSlider::-moz-range-thumb {
width: 22px;
height: 22px;
border-radius: 50%;
background: linear-gradient(90deg, var(--brand), var(--brand-2));
border: 2px solid #0a0f14;
box-shadow: 0 0 12px rgba(25,211,255,.8);
}

/* ========== 17) COMPTE — onglets & sections ========== */
.tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin: .6rem 0 1rem; }

.tab {
padding: .45rem .8rem;
border-radius: 999px;
cursor: pointer;
user-select: none;
background: rgba(255,255,255,.06);
border: 1px solid var(--border);
color: #d9e3ec;
font-weight: 700;
line-height: 1.1;
}

.tab:hover { background: rgba(255,255,255,.10); }

.tab.is-active {
background: linear-gradient(180deg, rgba(25,211,255,.22), rgba(0,225,180,.10));
border-color: rgba(25,211,255,.45);
color: #e6f7ff;
}

.tabpanels [data-panel] { display: none; }
.tabpanels [data-panel].is-active { display: block; }

/* ========== 18) AUTH ========== */

.auth-card {
  position: relative;
  max-width: 480px;
  margin: 1rem auto 2rem;
  background: linear-gradient(145deg, rgba(139,92,246,.08) 0%, rgba(14,21,28,.95) 50%, rgba(139,92,246,.05) 100%);
  border: 1.5px solid rgba(139,92,246,.35);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 0 20px rgba(139,92,246,.2),
    0 0 40px rgba(139,92,246,.1),
    0 8px 32px rgba(0,0,0,.4);
}

.auth-card__glow {
  position: absolute;
  top: -60%;
  left: 50%;
  translate: -50% 0;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(139,92,246,.25) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.auth-card__header {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 2rem 1.5rem 1rem;
}

.auth-card__icon {
  font-size: 2.5rem;
  margin-bottom: .5rem;
  filter: drop-shadow(0 0 12px rgba(139,92,246,.5));
}

.auth-card__title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 .3rem;
  letter-spacing: -.02em;
}

.auth-card__subtitle {
  font-size: .85rem;
  color: var(--muted);
  margin: 0;
}

/* ── Auth Tabs ── */

.auth-tabs {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 4px;
  margin: 1rem 1.5rem 0;
  background: rgba(255,255,255,.04);
  border-radius: 12px;
  padding: 4px;
  border: 1px solid rgba(139,92,246,.15);
}

.auth-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .65rem .8rem;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: .88rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .35s cubic-bezier(.4,0,.2,1);
  position: relative;
  z-index: 1;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.auth-tab__icon {
  font-size: 1rem;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}

.auth-tab.active {
  color: #fff;
  background: rgba(139,92,246,.2);
  border: 1px solid rgba(139,92,246,.5);
  box-shadow:
    0 0 12px rgba(139,92,246,.3),
    0 0 24px rgba(139,92,246,.15),
    inset 0 1px 0 rgba(255,255,255,.1);
  text-shadow: 0 0 20px rgba(139,92,246,.6);
}

.auth-tab.active .auth-tab__icon {
  transform: scale(1.15);
  filter: drop-shadow(0 0 6px rgba(139,92,246,.6));
}

.auth-tab:not(.active):hover {
  color: #c4b5fd;
  background: rgba(139,92,246,.08);
}

/* ── Auth Form ── */

.auth-card__body {
  position: relative;
  z-index: 1;
  padding: 1.2rem 1.5rem 1.8rem;
}

.auth-form {
  display: grid;
  gap: 1rem;
}

.auth-field label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .35rem;
}

.auth-field input {
  width: 100%;
  padding: .7rem 1rem;
  border-radius: 10px;
  border: 1.5px solid rgba(139,92,246,.2);
  background: rgba(255,255,255,.04);
  color: #fff;
  font-size: .95rem;
  outline: none;
  transition: all .3s ease;
  box-sizing: border-box;
}

.auth-field input::placeholder {
  color: rgba(159,180,197,.5);
}

.auth-field input:focus {
  border-color: #8B5CF6;
  background: rgba(139,92,246,.06);
  box-shadow:
    0 0 0 3px rgba(139,92,246,.15),
    0 0 16px rgba(139,92,246,.1);
}

/* ── Auth Submit Button ── */

.auth-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: .8rem 1.5rem;
  margin-top: .5rem;
  border: none;
  border-radius: 12px;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .35s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #8B5CF6, #7C3AED);
  color: #fff;
  box-shadow:
    0 4px 15px rgba(139,92,246,.35),
    0 0 20px rgba(139,92,246,.15);
}

.auth-submit:hover {
  transform: translateY(-1px);
  box-shadow:
    0 6px 20px rgba(139,92,246,.45),
    0 0 30px rgba(139,92,246,.25);
}

.auth-submit:active {
  transform: translateY(0) scale(.98);
}

.auth-submit--register {
  background: linear-gradient(135deg, #7C3AED, #6D28D9);
}

.auth-submit svg {
  transition: transform .3s ease;
}

.auth-submit:hover svg {
  transform: translateX(3px);
}

/* Loading state on auth submit buttons */
.auth-submit__spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: auth-spin .8s linear infinite;
}
@keyframes auth-spin {
  to { transform: rotate(360deg); }
}
.auth-submit.is-loading {
  pointer-events: none;
  opacity: .85;
}
.auth-submit.is-loading .auth-submit__label,
.auth-submit.is-loading .auth-submit__icon {
  display: none;
}
.auth-submit.is-loading .auth-submit__spinner {
  display: inline-block;
}

/* Forgot password row + link */
.auth-forgot-row {
  display: flex;
  justify-content: flex-end;
  margin-top: -.3rem;
}
.auth-forgot-link {
  background: none;
  border: none;
  color: #c4b5fd;
  font-size: .8rem;
  font-weight: 500;
  cursor: pointer;
  padding: .2rem .1rem;
  transition: color .25s ease;
  text-decoration: none;
}
.auth-forgot-link:hover {
  color: #fff;
  text-shadow: 0 0 12px rgba(139,92,246,.6);
}

/* Forgot password panel (slides in over login form) */
.auth-forgot-panel {
  margin-top: 1rem;
  padding: 1.2rem 1.1rem 1rem;
  background: linear-gradient(160deg, rgba(139,92,246,.1) 0%, rgba(14,21,28,.85) 100%);
  border: 1.5px solid rgba(139,92,246,.4);
  border-radius: 14px;
  box-shadow: 0 0 24px rgba(139,92,246,.18), inset 0 1px 0 rgba(255,255,255,.06);
  animation: auth-forgot-in .35s cubic-bezier(.4,0,.2,1);
}
@keyframes auth-forgot-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.auth-forgot-panel[hidden] {
  display: none;
}
.auth-forgot-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .4rem;
}
.auth-forgot-panel__head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}
.auth-forgot-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 .3rem;
  transition: color .2s ease;
}
.auth-forgot-close:hover {
  color: #fff;
}
.auth-forgot-panel__desc {
  margin: 0 0 .9rem;
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.4;
}

/* Email verification banner on the account page */
.acc-verify-banner {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .9rem 1.1rem;
  margin: 0 auto 1.2rem;
  max-width: 720px;
  background: linear-gradient(135deg, rgba(251,191,36,.12) 0%, rgba(245,158,11,.08) 100%);
  border: 1.5px solid rgba(251,191,36,.4);
  border-radius: 14px;
  box-shadow: 0 0 18px rgba(251,191,36,.15), inset 0 1px 0 rgba(255,255,255,.05);
}
.acc-verify-banner[hidden] {
  display: none;
}
.acc-verify-banner__icon {
  font-size: 1.6rem;
  color: #fbbf24;
  filter: drop-shadow(0 0 8px rgba(251,191,36,.5));
  flex-shrink: 0;
}
.acc-verify-banner__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.acc-verify-banner__text strong {
  color: #fff;
  font-size: .92rem;
  font-weight: 700;
}
.acc-verify-banner__text span {
  color: var(--muted);
  font-size: .8rem;
}
.acc-verify-banner__btn {
  flex-shrink: 0;
  background: rgba(251,191,36,.18);
  color: #fbbf24;
  border: 1px solid rgba(251,191,36,.5);
  border-radius: 10px;
  padding: .5rem .9rem;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .25s ease;
}
.acc-verify-banner__btn:hover {
  background: rgba(251,191,36,.3);
  box-shadow: 0 0 14px rgba(251,191,36,.35);
}
@media (max-width: 540px) {
  .acc-verify-banner {
    flex-wrap: wrap;
    text-align: center;
  }
  .acc-verify-banner__text {
    flex: 1 1 100%;
    text-align: center;
  }
  .acc-verify-banner__btn {
    margin: 0 auto;
  }
}

/* ========== 19) AVIS ========== */
.ratings {
margin: 2rem auto 1rem;
width: min(var(--container-w), 92vw);
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1rem 1.1rem;
box-shadow: var(--shadow);
}

.ratings h2 { margin: 0 0 .5rem; font-size: 1.05rem; }
.ratings__list { margin: 0; padding-left: 1.1rem; }

/* ========== 20) CHIPS ========== */
.chip {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .42rem .9rem;
border-radius: 9999px;
overflow: hidden;
background: rgba(255,255,255,.04);
border: 1px solid var(--border);
color: #d9e3ec;
box-shadow: inset 0 -1px 0 rgba(255,255,255,.05);
-webkit-mask-image: -webkit-radial-gradient(white, black);
}

.chip:hover { background: rgba(255,255,255,.07); }

.chip--back {
border: 1px solid var(--border);
border-radius: 9999px;
background: rgba(255,255,255,.05);
padding: .36rem .7rem;
margin: .5rem 0 1rem;
display: inline-flex;
align-items: center;
gap: .4rem;
}

/* ========== 21) SITE LINKS ========== */
.site-links {
width: min(var(--container-w), 92vw);
margin: 1rem auto 1.25rem;
display: flex;
gap: .35rem;
flex-wrap: wrap;
justify-content: center;
padding: .48rem .6rem;
border: 1px solid var(--border);
border-radius: 999px;
background: rgba(255,255,255,.03);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
box-shadow: var(--shadow);
z-index: 15;
}

.site-links .chip {
font-size: .92rem;
line-height: 1.1;
max-width: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

.site-links .chip:hover { background: rgba(255,255,255,.08); }

@media (max-width: 420px) {
.site-links {
gap: .28rem;
padding: .44rem .55rem;
}
.site-links .chip {
font-size: .88rem;
padding: .28rem .54rem;
}
}

/* ========== 22) FOOTER ========== */
.footer, .foot {
background: #0b1218;
border-top: 1px solid #1e2a35;
color: #9fb4c5;
padding: 1rem var(--container-pad, 1rem);
width: 100%;
}

.footer .container, .foot .foot__grid {
max-width: var(--container-w);
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: .75rem;
}

.footer p { margin: 0; }
.footer-links a { color: #9fb4c5; text-decoration: none; margin-right: .75rem; }
.footer-links a:hover { color: #e6edf5; }

/* ========== 23) DOCK ========== */
#dock, .dock {
position: fixed;
left: 50%;
bottom: calc(var(--dock-bottom, 14px) + max(env(safe-area-inset-bottom, 0px), var(--safe-bottom, 0px)));
transform: translateX(-50%) translateY(0);
z-index: 1000;
opacity: 1;
pointer-events: auto;
will-change: transform, opacity;
transition: opacity .45s cubic-bezier(.25,.46,.45,.94), transform .45s cubic-bezier(.25,.46,.45,.94);
}
#dock.dock--hidden, .dock.dock--hidden {
opacity: 0;
pointer-events: none;
transform: translateX(-50%) translateY(24px);
}

#dock .dock__shell, .dock .dock__shell {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 24px;
background: rgba(10,15,20,.85);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,.1);
box-shadow: 0 8px 32px rgba(0,0,0,.6);
}

.dock__btn {
width: 44px;
height: 44px;
border: none;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
text-decoration: none;
cursor: pointer;
transition: transform .15s ease;
}

.dock__btn:active { transform: scale(0.95); }

.dock__btn--home,
.dock__btn--tools,
.dock__btn--account,
.dock__btn--cart {
background: rgba(255,255,255,.06);
color: #e6edf5;
border: 1.5px solid rgba(139, 92, 246, 0.35);
box-shadow: 0 0 10px rgba(139, 92, 246, 0.12);
}

.dock__btn--cart {
position: relative;
}

.dock__btn--call {
background: linear-gradient(135deg, #8B5CF6, #A855F7);
color: #fff;
border: none;
box-shadow: 0 0 16px rgba(139, 92, 246, 0.35);
}

.dock__btn--wa {
background: linear-gradient(135deg, #25d366, #128c7e);
color: #fff;
border: none;
box-shadow: 0 0 16px rgba(37, 211, 102, 0.3);
}

.dock__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #ff3b30;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(255, 59, 48, 0.5);
}
.dock__badge:empty,
.dock__badge[data-count="0"] {
  display: none;
}

/* ========== 24) VUES / ROUTER ========== */
.view {
width: min(var(--container-w), 92vw);
margin: 0 auto 1.2rem;
content-visibility: auto;
contain-intrinsic-size: 800px 600px;
}

/* Vue produit : pleine largeur, pas de content-visibility (casse sticky) */
#view-produit {
    width: 100%;
    max-width: 100%;
    margin: 0;
    content-visibility: visible;
    contain-intrinsic-size: auto;
    overflow: visible;
}

.view.hidden { display: none !important; }

/* ========== 25) TOASTS ========== */
#toasts {
position: fixed;
z-index: 9500;
right: 12px;
bottom: calc(var(--dock-bottom) + var(--safe-bottom) + 62px);
display: grid;
gap: .5rem;
width: min(92vw, 420px);
pointer-events: none;
}

.toast {
pointer-events: auto;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 12px;
padding: .7rem .9rem;
box-shadow: var(--shadow);
display: flex;
align-items: flex-start;
gap: .6rem;
animation: toast-in .18s ease-out both;
}

.toast__icon { font-size: 1.1rem; line-height: 1; }
.toast__body { flex: 1; color: #d8e6f1; }
.toast__close { background: transparent; border: 0; color: #9fb4c5; cursor: pointer; font-size: 1.1rem; }
.toast--success .toast__icon { filter: drop-shadow(0 0 8px rgba(0,225,180,.45)); }
.toast--error .toast__icon { filter: drop-shadow(0 0 8px rgba(255,80,80,.45)); }

@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toast-out { to { transform: translateY(8px); opacity: 0; } }

@media (max-width: 480px) {
#toasts { right: 8px; width: min(94vw, 420px); }
}

/* ========== 26) A11Y ========== */
.sr-only, #sr-live {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}

.skip-link {
position: fixed;
left: 8px;
top: -42px;
z-index: 10000;
padding: .5rem .7rem;
border-radius: 8px;
background: #111a22;
color: #e6edf5;
border: 1px solid var(--border);
box-shadow: var(--shadow);
transition: top .18s ease;
}

.skip-link:focus { top: 8px; outline: 2px solid var(--brand); }

/* ========== 27) BANNIÈRES ========== */
#updateBanner {
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: calc(96px + var(--safe-bottom));
background: rgba(10,15,20,.92);
color: var(--fg);
border: 1px solid var(--border);
border-radius: 10px;
padding: .55rem .7rem;
z-index: 130;
box-shadow: var(--shadow);
}

#a2hsTip {
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: calc(96px + var(--safe-bottom));
z-index: 125;
background: rgba(10,15,20,.92);
color: var(--fg);
border: 1px solid var(--border);
border-radius: 12px;
padding: .55rem .75rem;
box-shadow: var(--shadow);
display: flex;
align-items: center;
gap: .6rem;
max-width: min(92vw, 520px);
animation: a2hs-in .18s ease-out both;
pointer-events: auto;
}

#a2hsTip.out { animation: toast-out .18s ease-in both; }

.a2hs-tip__icon {
display: inline-block;
padding: .18rem .38rem;
border-radius: 8px;
background: rgba(255,255,255,.06);
border: 1px solid var(--border);
margin: 0 .2rem;
}

#a2hsTip .a2hs-tip__close {
background: transparent;
border: 0;
color: #9fb4c5;
cursor: pointer;
font-size: 16px;
padding: .25rem;
border-radius: 6px;
}

@keyframes a2hs-in { from { transform: translateX(-50%) translateY(6px); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } }

#a2hsTriangle {
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: calc(96px + var(--safe-bottom));
z-index: 126;
border: 1px solid var(--border);
background: rgba(10,15,20,.92);
color: #e6edf5;
font-weight: 900;
line-height: 1;
border-radius: 999px;
padding: .2rem .5rem;
cursor: pointer;
box-shadow: var(--shadow);
}

#netBanner {
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: calc(72px + var(--safe-bottom));
background: rgba(10,15,20,.88);
border: 1px solid var(--border);
padding: .5rem .8rem;
border-radius: 10px;
z-index: 120;
box-shadow: var(--shadow);
font: 600 14px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Arial, sans-serif;
color: #e6edf5;
display: none;
}

/* ========== 28) ANIMATIONS ========== */
@keyframes exitLeft { to { transform: translateX(-60px); opacity: 0; filter: blur(2px); } }
@keyframes exitRight { to { transform: translateX(60px); opacity: 0; filter: blur(2px); } }

.tool--exit-left {
animation: exitLeft 420ms cubic-bezier(.22,.61,.36,1) forwards;
will-change: transform, opacity;
}

.tool--exit-right {
animation: exitRight 420ms cubic-bezier(.22,.61,.36,1) forwards;
will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.toast { animation: none; }
.dock__btn--cart { animation: none; }
.tool--exit-left, .tool--exit-right { animation: none; opacity: 0; }
}

/* ========== 29) MARQUES — Showcase Premium ========== */

/* ── Section wrapper ── */
.brands-section {
  margin: 0 0 2rem;
}

.brands-section__header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.brands-section__title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 .3rem;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, #fff 30%, #c4b5fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.brands-section__subtitle {
  font-size: .85rem;
  color: var(--muted);
  margin: 0;
}

/* ── Grid ── */
.brands-showcase {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 24px;
}
.brands-showcase .brand-card { flex: 0 0 auto; }

@media (min-width: 600px) {
  .brands-showcase { gap: 20px 32px; }
}

/* ── Single Brand Card ── */
.brand-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  background: none;
  border: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  animation: brandFadeIn .5s ease both;
}

@keyframes brandFadeIn {
  from { opacity: 0; transform: translateY(16px) scale(.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Rotating ring ── */
.brand-card__ring {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  padding: 3px;
  background: conic-gradient(
    from 0deg,
    rgba(139,92,246,.5),
    rgba(168,85,247,.15),
    rgba(139,92,246,.5),
    rgba(168,85,247,.15),
    rgba(139,92,246,.5)
  );
  transition: all .4s cubic-bezier(.4,0,.2,1);
}

.brand-card__ring::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 60%,
    rgba(139,92,246,.3) 80%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity .4s ease;
  animation: ringRotate 4s linear infinite paused;
}

.brand-card:hover .brand-card__ring::before {
  opacity: 1;
  animation-play-state: running;
}

@keyframes ringRotate {
  to { transform: rotate(360deg); }
}

/* ── Bubble (inner circle) ── */
.brand-card__bubble {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(14,21,28,.9);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.06),
    0 4px 16px rgba(0,0,0,.4);
  transition: all .35s cubic-bezier(.4,0,.2,1);
}

.brand-card__bubble::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.08) 0%, transparent 60%);
  pointer-events: none;
}

/* ── Logo ── */
.brand-card__logo {
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  position: absolute;
  inset: 6px;
  image-rendering: -webkit-optimize-contrast;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.3));
  transition: transform .35s cubic-bezier(.4,0,.2,1), filter .35s ease;
}

/* ── Label ── */
.brand-card__name {
  font-weight: 700;
  font-size: .82rem;
  color: #d4d4e0;
  letter-spacing: .01em;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color .3s ease;
}

/* ── Hover States ── */
.brand-card:hover .brand-card__ring,
.brand-card:focus-visible .brand-card__ring {
  background: conic-gradient(
    from 0deg,
    #8B5CF6,
    #A855F7,
    #c084fc,
    #A855F7,
    #8B5CF6
  );
  box-shadow: 0 0 24px rgba(139,92,246,.4);
  transform: scale(1.06);
}

.brand-card:hover .brand-card__bubble {
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.1),
    0 0 20px rgba(139,92,246,.25),
    0 8px 24px rgba(0,0,0,.3);
}

.brand-card:hover .brand-card__logo {
  transform: scale(1.08);
  filter: drop-shadow(0 2px 6px rgba(139,92,246,.3));
}

.brand-card:hover .brand-card__name {
  color: #fff;
  text-shadow: 0 0 12px rgba(139,92,246,.5);
}

.brand-card:focus-visible .brand-card__ring { outline: 2px solid #8B5CF6; outline-offset: 3px; }

/* ── Active / Press ── */
.brand-card:active .brand-card__ring {
  transform: scale(.95);
  transition-duration: .1s;
}

.brand-card:active .brand-card__ring::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,.35) 0%, transparent 70%);
  animation: brandPulseNew .4s ease-out;
}

@keyframes brandPulseNew {
  0%   { opacity: 1; transform: scale(.8); }
  100% { opacity: 0; transform: scale(1.4); }
}

/* ── Responsive ── */
@media (max-width: 420px) {
  .brand-card__ring { width: 76px; height: 76px; }
  .brand-card__name { font-size: .75rem; }
  .brands-showcase { gap: 12px; }
}

/* ========== 30) RESPONSIF GÉNÉRIQUE ========== */
@media (max-width: 768px) {
.btn { padding: .54rem .8rem; }
.ratings { margin: 1.4rem auto .6rem; }
.footer { padding-bottom: 1.2rem; }
#list, #contact { scroll-margin-top: calc(var(--safe-top, 70px) + 14px); }
.list { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .8rem; }
.product-card__title { font-size: .85rem; }
.product-card__price { font-size: 1rem; }

/* Responsive 3D carousel */
.tools-3d-arrow {
width: 36px;
height: 36px;
font-size: 18px;
}
.tools-3d-prev { margin-right: -18px; }
.tools-3d-next { margin-left: -18px; }

/* Responsive modal 3D */
.tool-3d-container {
width: 95vw;
height: 85vh;
margin: 0;
}

.tool-3d-header {
padding: 1rem 1.5rem;
}

.tool-3d-header h2 {
font-size: 1.3rem;
}

.tool-3d-controls {
flex-direction: column;
align-items: stretch;
gap: 1rem;
padding: 1rem 1.5rem;
}

.tool-3d-actions {
justify-content: center;
}

.control-hints {
display: none;
}

/* Responsive devis - mobile */
.devis-item__name { font-size: .82rem; }
.devis-stats { gap: 6px; }
.devis-stat { padding: .6rem .4rem; }
.devis-stat__value { font-size: 1rem; }
}

@media (max-width: 480px) {
/* Responsive 3D carousel */
.tools-3d-arrow {
width: 32px;
height: 32px;
font-size: 16px;
}
.tools-3d-prev { margin-right: -16px; }
.tools-3d-next { margin-left: -16px; }
.tools-3d-name { font-size: 0.85rem; }
.tools-3d-brand { font-size: 0.6rem; }

/* Responsive modal 3D */
.tool-3d-container {
width: 100vw;
height: 100vh;
border-radius: 0;
}

.tool-3d-actions {
flex-direction: column;
}

.tool-3d-actions .btn {
width: 100%;
}

}

/* ========== 31) FOOTER ========== */
.site-footer {
  background: #0a0f14;
  border-top: 1px solid rgba(139, 92, 246, 0.2);
  padding: 3rem 0 calc(var(--dockH) + var(--safe-bottom) + 2rem);
  margin-top: 4rem;
  position: relative;
  z-index: 10;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-col h4 {
  color: #8B5CF6;
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 .8rem;
  text-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
}

.footer-col p {
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.5;
  margin: 0;
}

.footer-col nav {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.footer-col a {
  color: var(--muted);
  font-size: .9rem;
  transition: color .2s;
}

.footer-col a:hover {
  color: var(--brand);
}

/* Footer — Social banner */
.footer-social {
  text-align: center;
  padding: 2rem 0 1.5rem;
  border-top: 1px solid var(--border);
  margin-top: 1rem;
}
.footer-social h4 {
  font-size: .95rem;
  color: var(--text);
  margin-bottom: 1rem;
  letter-spacing: .03em;
}
.footer-social__links {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-social__link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1.2rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
  border: 1px solid rgba(255,255,255,.1);
}
.footer-social__link:active { transform: scale(.95); }
.footer-social__link svg { flex-shrink: 0; }
.footer-social__link--fb {
  background: #1877F2;
  box-shadow: 0 4px 16px rgba(24, 119, 242, .3);
}
.footer-social__link--ig {
  background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  box-shadow: 0 4px 16px rgba(225, 48, 108, .3);
}
.footer-social__link--wa {
  background: #25D366;
  color: #042016;
  box-shadow: 0 4px 16px rgba(37, 211, 102, .3);
}
@media (hover: hover) {
  .footer-social__link:hover { transform: translateY(-2px) scale(1.03); }
  .footer-social__link--fb:hover { box-shadow: 0 6px 24px rgba(24, 119, 242, .45); }
  .footer-social__link--ig:hover { box-shadow: 0 6px 24px rgba(225, 48, 108, .45); }
  .footer-social__link--wa:hover { box-shadow: 0 6px 24px rgba(37, 211, 102, .45); }
}

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
  text-align: center;
}

.footer-bottom p {
  color: var(--muted);
  font-size: .8rem;
  margin: 0;
  opacity: .7;
}

/* ========== 32) PATCHES & ANCRAGES ========== */
#a2hsTip { pointer-events: auto; z-index: 125; }
#a2hsTip, #a2hsTriangle { bottom: calc(96px + var(--safe-bottom)); }
#list, #contact, #pdp, #view-catalogue, #view-devis, #view-compte {
scroll-margin-top: calc(var(--safe-top, 70px) + 14px);
}

/* ============================================================
   ACCOUNT — Refonte (hero + onglets)
   ============================================================ */
.acc-hero {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.4rem 1.6rem;
  background: linear-gradient(135deg, rgba(139,92,246,.14), rgba(168,85,247,.06));
  border: 1px solid rgba(139,92,246,.25);
  margin-bottom: 1.2rem;
}
.acc-hero__avatar-wrap {
  position: relative;
  flex: 0 0 auto;
}
.acc-hero__avatar {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  border: 2px solid rgba(168,85,247,.5);
  object-fit: cover;
  background: rgba(255,255,255,.04);
}
.acc-hero__avatar-edit {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8B5CF6, #A855F7);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid #0a0a0f;
  transition: transform .2s ease;
}
.acc-hero__avatar-edit:hover { transform: scale(1.1); }
.acc-hero__info { flex: 1; min-width: 0; }
.acc-hero__name {
  margin: 0 0 .15rem;
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
}
.acc-hero__email {
  margin: 0 0 .6rem;
  font-size: .88rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acc-hero__loyalty {
  margin: 0 0 .35rem;
  font-size: .82rem;
  color: #A855F7;
  font-weight: 600;
}
.acc-hero__meter { max-width: 320px; }

/* Tabs */
.acc-tabs {
  display: flex;
  gap: .35rem;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: .35rem;
  margin-bottom: 1.2rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.acc-tabs::-webkit-scrollbar { display: none; }
.acc-tab {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .7rem 1rem;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: var(--muted);
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .25s ease;
  white-space: nowrap;
}
.acc-tab svg { flex: 0 0 auto; }
.acc-tab:hover { color: #fff; background: rgba(139,92,246,.08); }
.acc-tab.active {
  background: linear-gradient(135deg, rgba(139,92,246,.25), rgba(168,85,247,.18));
  color: #fff;
  box-shadow: 0 4px 14px rgba(139,92,246,.25);
}

.acc-pane { animation: acc-fade .3s ease; }
.acc-pane[hidden] { display: none; }
@keyframes acc-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Danger card */
.acc-danger { border-color: rgba(244,67,54,.25); }
.acc-logout-btn {
  background: rgba(244,67,54,.15);
  color: #f44;
  border: 1px solid rgba(244,67,54,.3);
}
.acc-logout-btn:hover {
  background: rgba(244,67,54,.25);
}

@media (max-width: 560px) {
  .acc-hero { flex-direction: column; text-align: center; padding: 1.2rem; }
  .acc-hero__email { white-space: normal; }
  .acc-hero__meter { margin: 0 auto; }
  .acc-tab span { display: none; }
  .acc-tab { padding: .8rem; }
  .acc-tab svg { width: 20px; height: 20px; }
}

/* ============================================================
   PAYMENT MODAL — Stripe checkout
   ============================================================ */
.pay-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.pay-modal.is-open { opacity: 1; pointer-events: auto; }
.pay-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 12, .82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.pay-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 600px;
  max-height: 92vh;
  overflow-y: auto;
  background: linear-gradient(160deg, #14101f 0%, #0c0a14 100%);
  border: 1px solid rgba(139,92,246,.35);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(168,85,247,.08), 0 0 60px rgba(139,92,246,.15);
  transform: translateY(20px) scale(.96);
  transition: transform .35s cubic-bezier(.2,.9,.3,1.1);
}
.pay-modal.is-open .pay-modal__dialog { transform: translateY(0) scale(1); }

.pay-modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: all .2s ease;
}
.pay-modal__close:hover { background: rgba(255,255,255,.14); transform: rotate(90deg); }

.pay-modal__header {
  text-align: center;
  padding: 2rem 1.5rem 1rem;
}
.pay-modal__icon {
  font-size: 2.4rem;
  margin-bottom: .4rem;
}
.pay-modal__header h2 {
  margin: 0 0 .25rem;
  font-size: 1.35rem;
  color: #fff;
  font-weight: 700;
}
.pay-modal__sub {
  margin: 0;
  font-size: .85rem;
  color: var(--muted);
}

.pay-modal__body {
  padding: .5rem 1.5rem 1rem;
}
.pay-modal__items {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: .8rem 1rem;
  margin-bottom: .8rem;
}
.pay-modal__line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .8rem;
  padding: .45rem 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.pay-modal__line:last-child { border-bottom: none; }
.pay-modal__line-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pay-modal__line-title {
  font-size: .88rem;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pay-modal__line-qty {
  font-size: .75rem;
  color: var(--muted);
  margin-top: .15rem;
}
.pay-modal__line-price {
  font-size: .9rem;
  color: #A855F7;
  font-weight: 600;
  flex: 0 0 auto;
}

.pay-modal__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .9rem 1rem;
  background: linear-gradient(135deg, rgba(139,92,246,.18), rgba(168,85,247,.10));
  border: 1px solid rgba(139,92,246,.3);
  border-radius: 14px;
  margin-bottom: 1rem;
}
.pay-modal__total span { color: var(--muted); font-size: .9rem; }
.pay-modal__total strong { color: #fff; font-size: 1.3rem; font-weight: 700; }

.pay-modal__trust {
  display: grid;
  gap: .4rem;
  padding: .8rem 1rem;
  background: rgba(76,175,80,.04);
  border: 1px solid rgba(76,175,80,.15);
  border-radius: 12px;
}
.pay-modal__trust-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .78rem;
  color: rgba(255,255,255,.75);
}
.pay-modal__trust-row svg { color: #4caf50; flex: 0 0 auto; }

.pay-modal__footer {
  padding: 0 1.5rem 1.5rem;
  text-align: center;
}
.pay-modal__footer .btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.pay-modal__btn-icon { font-size: 1.1rem; }
.pay-modal__powered {
  margin: .8rem 0 0;
  font-size: .72rem;
  color: var(--muted);
}
.pay-modal__powered strong { color: #635bff; }

/* ── Onglets de paiement ─────────────────────────────────────── */
.pay-tabs{
  display:flex; gap:.5rem;
  padding: 0 1.4rem;
  margin-top:.4rem;
}
.pay-tab{
  flex:1; cursor:pointer;
  background:rgba(255,255,255,.04);
  color:var(--muted);
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  padding:.7rem .8rem;
  font-weight:600; font-size:.92rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  transition: all .2s ease;
}
.pay-tab:hover{ background:rgba(255,255,255,.07); color:#fff; }
.pay-tab.is-active{
  background: linear-gradient(135deg, rgba(99,91,255,.22), rgba(139,92,246,.22));
  border-color: rgba(139,92,246,.55);
  color:#fff;
  box-shadow: 0 0 18px rgba(139,92,246,.25);
}
.pay-tab__icon{ font-size:1.05rem; }

.pay-pane{ display:none; }
.pay-pane.is-active{ display:block; }

/* ── Portail crypto (étapes numérotées) ──────────────────────── */
.cryptopay{ display:flex; flex-direction:column; gap:1.2rem; }

/* Encadré d'étape */
.cryptostep{
  background: rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding: .9rem .95rem 1rem;
  position:relative;
}
.cryptostep--alt{
  background: linear-gradient(135deg, rgba(30,124,74,.10), rgba(52,199,122,.10));
  border-color: rgba(52,199,122,.30);
}
.cryptostep__head{
  display:flex; align-items:flex-start; gap:.7rem;
  margin-bottom:.7rem;
}
.cryptostep__num{
  flex:0 0 auto;
  width:30px; height:30px;
  display:inline-flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, #635bff, #8B5CF6);
  color:#fff; font-weight:800; font-size:.95rem;
  border-radius:50%;
  box-shadow: 0 0 14px rgba(139,92,246,.35);
}
.cryptostep__num--alt{
  background: linear-gradient(135deg, #1e7c4a, #34c77a);
  box-shadow: 0 0 14px rgba(52,199,122,.35);
}
.cryptostep__title{
  color:#fff; font-size:1rem; font-weight:700;
  margin:0; line-height:1.2;
}
.cryptostep__sub{
  color:var(--muted); font-size:.78rem; margin:.15rem 0 0;
}
.cryptostep__hint{
  color:var(--muted); font-size:.82rem; line-height:1.5;
  margin: .2rem 0 0;
  background: rgba(255,255,255,.03);
  border-left: 3px solid #8B5CF6;
  padding: .55rem .75rem;
  border-radius: 6px;
}
.cryptostep__hint strong{ color:#fff; }

/* Grille de réseaux */
.cryptopay__nets{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap:.55rem;
  min-height: 64px;
}
.cryptopay__empty{
  grid-column: 1 / -1;
  text-align:center;
  color:var(--muted);
  font-size:.85rem;
  padding: 1rem;
  background: rgba(255,255,255,.03);
  border-radius:10px;
  border:1px dashed rgba(255,255,255,.10);
}
.cryptopay-net{
  cursor:pointer;
  background: rgba(255,255,255,.04);
  border: 2px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:.7rem .8rem;
  display:flex; flex-direction:column; gap:.2rem;
  text-align:left;
  transition: all .18s ease;
  font: inherit; color: inherit;
  position: relative;
}
.cryptopay-net:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(139,92,246,.55);
  transform: translateY(-1px);
}
.cryptopay-net.is-on{
  background: linear-gradient(135deg, rgba(99,91,255,.28), rgba(139,92,246,.28));
  border-color: #8B5CF6;
  box-shadow: 0 0 0 3px rgba(139,92,246,.18), 0 6px 18px rgba(139,92,246,.30);
}
.cryptopay-net.is-on::after{
  content: "✓";
  position:absolute; top:.4rem; right:.55rem;
  color:#fff;
  background: linear-gradient(135deg, #635bff, #8B5CF6);
  width:18px; height:18px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; font-size:.7rem; font-weight:800;
}
.cryptopay-net__chain{ color:#fff; font-weight:800; font-size:1rem; line-height:1.2; }
.cryptopay-net__token{
  color:#a78bfa; font-weight:700; font-size:.72rem;
  letter-spacing:.05em; text-transform:uppercase;
}
.cryptopay__tokens-wrap{ margin-top:.75rem; }
.cryptopay__tokens-label{
  color:var(--muted); font-size:.78rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:.4rem;
}
.cryptopay__tokens{
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.cryptopay-token{
  cursor:pointer;
  display:inline-flex; align-items:center; gap:.4rem;
  background: rgba(255,255,255,.04);
  border:2px solid rgba(255,255,255,.10);
  border-radius:10px;
  padding:.5rem .75rem;
  font:inherit; color:#fff;
}
.cryptopay-token:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(139,92,246,.55);
}
.cryptopay-token.is-on{
  background: linear-gradient(135deg, rgba(99,91,255,.28), rgba(139,92,246,.28));
  border-color:#8B5CF6;
  box-shadow: 0 0 0 3px rgba(139,92,246,.18);
}
.cryptopay-token__sym{ font-weight:800; font-size:.85rem; color:#a78bfa; letter-spacing:.04em; }
.cryptopay-token__name{ font-weight:600; font-size:.78rem; color:rgba(255,255,255,.78); }

/* Détail (QR + adresse + montant) */
.cryptopay__detail{
  display:grid;
  grid-template-columns: 160px 1fr;
  gap: 1rem;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding: .9rem;
  align-items:start;
}
@media (max-width: 540px){
  .cryptopay__detail{ grid-template-columns: 1fr; }
  .cryptopay__qr{ justify-self:center; }
}
.cryptopay__qr{
  background:#fff; padding:8px; border-radius:12px;
  width:160px; height:160px;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.cryptopay__qr img{
  width:100%; height:100%; image-rendering:pixelated; display:block;
}
.cryptopay__qr img:not([src]){ display:none; }
.cryptopay__qr-placeholder{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.4rem;
  color:#3a3a4a; font-size:.78rem; font-weight:600;
  text-align:center;
}
.cryptopay__qr-placeholder div{ font-size:1.5rem; }
.cryptopay__qr.is-ready .cryptopay__qr-placeholder{ display:none; }

.cryptopay__info{ display:flex; flex-direction:column; gap:.7rem; min-width:0; }
.cryptopay__row{ display:flex; flex-direction:column; gap:.25rem; min-width:0; }
.cryptopay__label{
  color:var(--muted); font-size:.68rem; text-transform:uppercase;
  letter-spacing:.07em; font-weight:700;
}
.cryptopay__chain{
  color:#fff; font-weight:700; font-size:.95rem;
}

.cryptopay__row--amount{ gap:.35rem; }
.cryptopay__amount-box{
  display:flex; align-items:center; gap:.5rem;
  background: rgba(139,92,246,.10);
  border:1px solid rgba(139,92,246,.30);
  border-radius:10px;
  padding:.5rem .65rem;
}
.cryptopay__amount{
  display:flex; align-items:baseline; gap:.35rem;
  color:#fff; font-weight:800; font-size:1.15rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  flex:1; min-width:0;
}
.cryptopay__amount > #cryptopayAmount{ overflow:hidden; text-overflow:ellipsis; }
.cryptopay__amount-sym{ font-size:.78rem; color:#a78bfa; font-weight:700; }
.cryptopay__rate{ color:var(--muted); font-size:.7rem; }

.cryptopay__addr{
  display:flex; align-items:center; gap:.4rem;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  padding:.5rem .6rem;
  min-width:0;
}
.cryptopay__addr code{
  flex:1; min-width:0;
  color:#ffd66b; font-size:.76rem;
  word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  line-height:1.35;
}
.cryptopay__mini-copy{
  flex: 0 0 auto;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  border-radius:8px;
  padding:.35rem .55rem;
  font-size:.72rem; font-weight:700;
  cursor:pointer; white-space:nowrap;
  transition: all .15s ease;
}
.cryptopay__mini-copy:hover{ background:rgba(255,255,255,.18); }
.cryptopay__mini-copy.is-copied{
  background: linear-gradient(135deg, #1e7c4a, #34c77a);
  border-color: #34c77a;
}

.cryptopay__warn{
  margin: .8rem 0 0;
  font-size:.76rem; color:#ffb86b;
  background:rgba(255,184,107,.08);
  border:1px solid rgba(255,184,107,.28);
  border-radius:9px; padding:.55rem .75rem;
  line-height:1.4;
}
.cryptopay__warn strong{ color:#ffd99a; }

.cryptopay__card-btn{
  width:100%;
  background: linear-gradient(135deg, #1e7c4a, #34c77a);
  color:#fff; border:none; border-radius:12px;
  padding:.85rem 1rem; font-weight:800; font-size:.95rem;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  box-shadow: 0 4px 18px rgba(52,199,122,.35);
  margin-top:.2rem;
}
.cryptopay__card-btn:hover{ filter:brightness(1.08); transform: translateY(-1px); }
.cryptopay__card-hint{
  display:block; text-align:center;
  color:var(--muted); font-size:.72rem;
  margin-top:.4rem; line-height:1.4;
}

/* ── Tuto paiement (4 étapes) ─────────────────────────── */
.paytuto{
  background: linear-gradient(135deg, rgba(99,91,255,.10), rgba(139,92,246,.10));
  border:1px solid rgba(139,92,246,.30);
  border-radius:12px;
  padding:.6rem .8rem;
  margin-bottom:.9rem;
}
.paytuto[open]{ padding-bottom:.9rem; }
.paytuto summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
  gap:.5rem; user-select:none;
}
.paytuto summary::-webkit-details-marker{ display:none; }
.paytuto__title{ color:#fff; font-weight:700; font-size:.88rem; }
.paytuto__chev{
  color:#a78bfa; font-size:.9rem;
  transition: transform .2s ease;
}
.paytuto[open] .paytuto__chev{ transform: rotate(180deg); }

.paytuto__steps{
  list-style:none; padding:0; margin:.7rem 0 0;
  display:flex; flex-direction:column; gap:.55rem;
}
.paytuto__steps > li{
  display:flex; align-items:flex-start; gap:.6rem;
}
.paytuto__num{
  flex:0 0 auto;
  width:24px; height:24px;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, #635bff, #8B5CF6);
  color:#fff; font-weight:800; font-size:.78rem;
  border-radius:50%;
  box-shadow: 0 0 10px rgba(139,92,246,.35);
}
.paytuto__steps strong{ color:#fff; font-size:.85rem; display:block; }
.paytuto__steps p{
  margin:.15rem 0 0; color:var(--muted);
  font-size:.76rem; line-height:1.4;
}
.paytuto__tips{
  margin-top:.7rem;
  background:rgba(255,255,255,.04);
  border-left:3px solid #34c77a;
  border-radius:6px;
  padding:.5rem .7rem;
}
.paytuto__tips p{ margin:0; font-size:.76rem; color:var(--muted); line-height:1.4; }
.paytuto__tips strong{ color:#fff; }
.paytuto--mini{ margin-bottom: .8rem; }

.cryptopay__warn{
  margin:.2rem 0 0;
  font-size:.72rem; color:#ffb86b;
  background:rgba(255,184,107,.08);
  border:1px solid rgba(255,184,107,.25);
  border-radius:9px; padding:.5rem .7rem;
}

/* Devis "Payer" button per line */
.devis-buy {
  background: linear-gradient(135deg, #635bff, #8B5CF6);
  color: #fff;
  border: none;
  padding: .45rem .8rem;
  border-radius: 10px;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
  white-space: nowrap;
}
.devis-buy:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(99,91,255,.4);
}

/* Merci page */
.merci-card {
  max-width: 560px;
  margin: 0 auto;
  padding: 2.5rem 2rem;
  background: linear-gradient(160deg, rgba(76,175,80,.08), rgba(139,92,246,.05));
  border: 1px solid rgba(76,175,80,.25);
  border-radius: 22px;
}
.merci-icon {
  display: inline-flex;
  width: 100px;
  height: 100px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(76,175,80,.2), rgba(76,175,80,.05));
  border: 2px solid rgba(76,175,80,.5);
  color: #4caf50;
  margin-bottom: 1.2rem;
  animation: merci-pop .6s cubic-bezier(.2,.9,.3,1.4);
}
@keyframes merci-pop {
  0% { transform: scale(.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.merci-card h1 {
  margin: 0 0 .8rem;
  font-size: 1.8rem;
  color: #fff;
}
.merci-lead {
  font-size: 1.02rem;
  color: rgba(255,255,255,.85);
  margin: 0 0 .5rem;
}
.merci-sub {
  font-size: .9rem;
  color: var(--muted);
  margin: 0 0 1.5rem;
}
.merci-actions {
  display: flex;
  gap: .8rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* 3D model on product cards */
.product-card__model {
  width: 100%;
  height: 100%;
  display: block;
  background: transparent;
  --poster-color: transparent;
  pointer-events: none;
  --progress-bar-color: transparent;
}
.product-card__model::part(default-progress-bar) { display: none; }
.product-card__model img[slot="poster"] {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1rem;
  background: transparent;
}

/* 3D brand spheres */
.brand-card__bubble { position: relative; }
.brand-card__canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.brand-card__logo--fallback {
  transition: opacity .4s ease;
}

/* ============================================================
   SECTION REVEAL — Entrance/exit animations on home page
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1), filter .9s ease;
  will-change: opacity, transform;
  filter: blur(6px);
}
[data-reveal="fade-up"]    { transform: translateY(60px); }
[data-reveal="fade-down"]  { transform: translateY(-60px); }
[data-reveal="slide-left"] { transform: translateX(80px); }
[data-reveal="slide-right"]{ transform: translateX(-80px); }
[data-reveal="scale-up"]   { transform: scale(.9); }

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Stagger reveal — children pop in one by one */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(40px) scale(.7);
  transition: opacity .7s cubic-bezier(.2,.9,.3,1.2), transform .7s cubic-bezier(.2,.9,.3,1.2);
  filter: blur(4px);
}
[data-reveal-stagger].is-visible > * {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}
[data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: .05s; }
[data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: .15s; }
[data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: .25s; }
[data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: .35s; }
[data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: .45s; }
[data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: .55s; }
[data-reveal-stagger].is-visible > *:nth-child(7) { transition-delay: .65s; }
[data-reveal-stagger].is-visible > *:nth-child(8) { transition-delay: .75s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-stagger] > * {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* Brand bubbles entrance — disable initial auto-anim, replay on reveal */
.brands-showcase .brand-card { animation: none; opacity: 0; transform: translateY(50px) scale(.5); }
.brands-showcase.is-visible .brand-card {
  animation: brandBubbleIn .9s cubic-bezier(.18,1.25,.4,1.05) both;
}
@keyframes brandBubbleIn {
  0%   { opacity: 0; transform: translateY(60px) scale(.4) rotate(-12deg); filter: blur(8px); }
  60%  { opacity: 1; transform: translateY(-8px) scale(1.08) rotate(3deg); filter: blur(0); }
  80%  { transform: translateY(2px) scale(.96) rotate(-1deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); filter: blur(0); }
}
.brands-showcase.is-visible .brand-card__ring {
  animation: brandRingPulse 1.2s ease-out .3s both;
}
@keyframes brandRingPulse {
  0%   { box-shadow: 0 0 0 0 rgba(139,92,246,.6); }
  60%  { box-shadow: 0 0 0 14px rgba(139,92,246,0); }
  100% { box-shadow: 0 0 0 0 rgba(139,92,246,0); }
}

/* ========== ACCESSIBILITÉ : reduced-motion global ========== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ========== TOUCH : neutraliser les hover sticky ==========
   Sur iPad / mobile, un :hover reste collé après un tap jusqu'au
   prochain tap ailleurs, provoquant des transforms/scale persistants.
   On retire les transforms de hover pour les éléments interactifs
   principaux — les :active/focus gèrent le feedback tactile. */
@media (hover: none) {
  .product-card:hover,
  .brand-card:hover,
  .cat-chip:hover,
  .dock__btn:hover,
  .btn:hover,
  .pdp-related__card:hover,
  .tool-card:hover,
  .devis-item:hover {
    transform: none;
  }
}

/* ========== STOCK BADGES ==========
   Shown on product cards (top-right of image) and inline on PDP price block.
   Statuses : in_stock (green), low_stock (orange), out_of_stock (red), preorder (blue). */
.stock-badge {
  position: absolute;
  top: .6rem;
  right: .6rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .55rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(15, 22, 32, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  z-index: 2;
  pointer-events: none;
}

.stock-badge__dot {
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}

.stock-badge--in {
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.35);
}

.stock-badge--low {
  color: #fb923c;
  border-color: rgba(251, 146, 60, 0.38);
  animation: stockPulse 2.4s ease-in-out infinite;
}

.stock-badge--out {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.42);
}

.stock-badge--preorder {
  color: #60a5fa;
  border-color: rgba(96, 165, 250, 0.4);
}

@keyframes stockPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .72; }
}

/* Out-of-stock card : dim the image so users feel the unavailability */
.product-card--out .product-card__img-wrap img,
.product-card--out .product-card__img-wrap model-viewer {
  filter: grayscale(0.7) brightness(0.75);
}

.product-card--out .product-card__price {
  text-decoration: line-through;
  opacity: .65;
}

/* Inline badge in PDP price block — not absolute, flows with text */
.pdp-price .stock-badge,
#pdpPrice .stock-badge {
  position: static;
  margin-left: .75rem;
  vertical-align: middle;
}

/* Disabled buy/quote buttons when stock_status = out_of_stock */
#pdpQuote[disabled],
#pdpBuy[disabled],
#pdpQuote[aria-disabled="true"],
#pdpBuy[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  filter: grayscale(0.4);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .stock-badge--low { animation: none; }
}

/* ========== ADMIN PANEL (#/admin) ========== */
#view-admin {
  padding: 2rem 1rem 6rem;
  min-height: 100vh;
}

.admin-wrap {
  max-width: 980px;
  margin: 0 auto;
}

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 0;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}

.admin-header h1 {
  margin: 0;
  font-size: 1.5rem;
  color: #fff;
}

.admin-hint {
  color: rgba(230, 237, 245, 0.6);
  font-size: .88rem;
  margin: 0 0 1.5rem;
  line-height: 1.5;
}

.admin-loading {
  color: rgba(230, 237, 245, 0.5);
  text-align: center;
  padding: 2rem;
}

.admin-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.admin-row {
  background: rgba(15, 23, 32, 0.6);
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-radius: 14px;
  padding: 1rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.admin-row__head {
  display: flex;
  align-items: center;
  gap: .9rem;
}

.admin-row__img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

.admin-row__info {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}

.admin-row__brand {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #8B5CF6;
}

.admin-row__title {
  color: #e6edf5;
  font-size: .95rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-row__id {
  font-family: ui-monospace, Menlo, monospace;
  font-size: .72rem;
  color: rgba(230, 237, 245, 0.4);
}

.admin-row__fields {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: .75rem;
}

@media (max-width: 640px) {
  .admin-row__fields { grid-template-columns: 1fr; }
}

.admin-field {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.admin-field span {
  font-size: .72rem;
  color: rgba(230, 237, 245, 0.55);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
}

.admin-field input,
.admin-field select {
  background: rgba(10, 15, 20, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e6edf5;
  padding: .65rem .75rem;
  border-radius: 8px;
  font-size: .9rem;
  font-family: inherit;
}

.admin-field input:focus,
.admin-field select:focus {
  outline: none;
  border-color: #8B5CF6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

.admin-row__actions {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}

.admin-row__status {
  font-size: .82rem;
  color: rgba(230, 237, 245, 0.55);
}

.admin-row__status--ok { color: #4ade80; }
.admin-row__status--err { color: #f87171; }

/* Admin login gate */
.admin-login {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.admin-login__card {
  max-width: 420px;
  width: 100%;
  background: rgba(15, 23, 32, 0.8);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 18px;
  padding: 2rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.admin-login__card h1 {
  margin: 0 0 .5rem;
  color: #fff;
  font-size: 1.4rem;
}

.admin-login__card p {
  color: rgba(230, 237, 245, 0.6);
  font-size: .9rem;
  margin: 0 0 1.2rem;
}

.admin-login__card label {
  display: block;
  font-size: .75rem;
  color: rgba(230, 237, 245, 0.55);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
  margin-bottom: .4rem;
}

.admin-login__card input {
  width: 100%;
  background: rgba(10, 15, 20, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e6edf5;
  padding: .75rem .9rem;
  border-radius: 10px;
  font-size: 1rem;
  font-family: inherit;
  box-sizing: border-box;
  margin-bottom: 1rem;
}

.admin-login__card input:focus {
  outline: none;
  border-color: #8B5CF6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

.admin-login__card button {
  width: 100%;
}

.admin-login__hint {
  margin-top: 1rem;
  font-size: .78rem;
  color: rgba(230, 237, 245, 0.45);
}

.admin-login__hint code {
  background: rgba(139, 92, 246, 0.15);
  color: #c4b5fd;
  padding: .1rem .35rem;
  border-radius: 4px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: .85em;
}

/* Admin : tabs */
.admin-tabs {
  display: flex;
  gap: .5rem;
  border-bottom: 1px solid rgba(139, 92, 246, 0.2);
  margin: 0 0 1.5rem;
}

.admin-tab {
  background: transparent;
  border: none;
  color: rgba(230, 237, 245, 0.55);
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  padding: .75rem 1.1rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .2s, border-color .2s;
}

.admin-tab:hover { color: #e6edf5; }
.admin-tab.is-active {
  color: #8B5CF6;
  border-bottom-color: #8B5CF6;
}

.admin-pane { display: none; }
.admin-pane.is-active { display: block; }

.admin-subtitle {
  font-size: 1.05rem;
  color: #fff;
  margin: 1.5rem 0 .5rem;
}

.admin-subtitle:first-child { margin-top: 0; }

.admin-tools-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .75rem;
  margin-bottom: 1.5rem;
}

.admin-tools-form .admin-field {
  flex: 1 1 240px;
}

.admin-health-output {
  background: rgba(10, 15, 20, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #c4b5fd;
  padding: 1rem;
  border-radius: 10px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: .78rem;
  overflow-x: auto;
  margin: 1rem 0 0;
  max-height: 320px;
  overflow-y: auto;
}

.admin-hint code {
  background: rgba(139, 92, 246, 0.15);
  color: #c4b5fd;
  padding: .1rem .35rem;
  border-radius: 4px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: .85em;
}

/* ========== WISHLIST (heart button on cards) ========== */
.wishlist-btn {
  position: absolute;
  top: .55rem;
  left: .55rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(15, 22, 32, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: transform .2s, color .2s, background .2s;
  padding: 0;
}

.wishlist-btn:hover {
  color: #fff;
  transform: scale(1.1);
}

.wishlist-btn.is-active {
  color: #f43f5e;
  border-color: rgba(244, 63, 94, 0.4);
  background: rgba(244, 63, 94, 0.15);
}

.wishlist-btn.is-active svg {
  animation: heartPop .35s ease;
}

@keyframes heartPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .wishlist-btn.is-active svg { animation: none; }
}

/* Wishlist view */
.wishlist-header {
  padding: 2rem 0 1.5rem;
  text-align: center;
}

.wishlist-header h1 {
  margin: 0 0 .5rem;
  font-size: 1.8rem;
  color: #fff;
}

.wishlist-subtitle {
  color: rgba(230, 237, 245, 0.6);
  margin: 0;
}

.wishlist-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.2rem;
  padding-bottom: 4rem;
}

.wishlist-empty {
  text-align: center;
  padding: 4rem 1rem;
  color: rgba(230, 237, 245, 0.55);
}

.wishlist-empty svg {
  color: #8B5CF6;
  margin-bottom: 1rem;
}

.wishlist-empty h2 {
  margin: 0 0 .5rem;
  font-size: 1.25rem;
  color: #fff;
}

.wishlist-empty p {
  margin: 0 0 1.5rem;
  color: rgba(230, 237, 245, 0.55);
}

/* ========== CONTACT FORM (/contact) ========== */
#view-contact {
  padding: 2rem 1rem 6rem;
}

.contact-wrap {
  max-width: 980px;
  margin: 0 auto;
}

.contact-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.contact-header h1 {
  margin: 0 0 .6rem;
  font-size: 2rem;
  color: #fff;
}

.contact-subtitle {
  color: rgba(230, 237, 245, 0.6);
  margin: 0;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

.contact-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2rem;
}

@media (max-width: 820px) {
  .contact-grid { grid-template-columns: 1fr; }
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

.contact-info__card {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1rem 1.1rem;
  background: rgba(15, 23, 32, 0.6);
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-radius: 12px;
  color: #e6edf5;
  transition: border-color .2s, transform .2s;
}

.contact-info__card:hover {
  border-color: rgba(139, 92, 246, 0.4);
  transform: translateY(-2px);
}

.contact-info__card > div {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}

.contact-info__card strong {
  font-size: .72rem;
  color: rgba(230, 237, 245, 0.55);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
}

.contact-info__card a,
.contact-info__card span {
  color: #fff;
  font-size: .95rem;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-info__card a:hover { color: #8B5CF6; }

.contact-info__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(139, 92, 246, 0.12);
  color: #8B5CF6;
  font-size: 1.3rem;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.8rem;
  background: rgba(15, 23, 32, 0.6);
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-radius: 16px;
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 560px) {
  .contact-form__row { grid-template-columns: 1fr; }
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.contact-field > span {
  font-size: .75rem;
  color: rgba(230, 237, 245, 0.6);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
}

.contact-field em {
  color: #f43f5e;
  font-style: normal;
  font-weight: 700;
  margin-left: .2rem;
}

.contact-field input,
.contact-field textarea {
  background: rgba(10, 15, 20, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e6edf5;
  padding: .75rem .9rem;
  border-radius: 10px;
  font-size: .95rem;
  font-family: inherit;
  resize: vertical;
}

.contact-field input:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: #8B5CF6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

.contact-form__honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.contact-form__actions {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
  margin-top: .4rem;
}

.contact-form__status {
  font-size: .86rem;
  color: rgba(230, 237, 245, 0.55);
}

.contact-form__status--ok { color: #4ade80; }
.contact-form__status--err { color: #f87171; }

/* ========== NEWSLETTER (home) ========== */
.home-newsletter {
  padding: 4rem 1rem 3rem;
}

.home-newsletter__card {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  padding: 2.5rem 1.8rem;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(139, 92, 246, 0.02));
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.home-newsletter__icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: rgba(139, 92, 246, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: #8B5CF6;
}

.home-newsletter__title {
  margin: 0 0 .5rem;
  font-size: 1.5rem;
  color: #fff;
}

.home-newsletter__sub {
  color: rgba(230, 237, 245, 0.6);
  margin: 0 0 1.5rem;
  font-size: .95rem;
  line-height: 1.5;
}

.home-newsletter__form {
  display: flex;
  gap: .6rem;
  max-width: 460px;
  margin: 0 auto;
}

@media (max-width: 520px) {
  .home-newsletter__form { flex-direction: column; }
}

.home-newsletter__form input[type="email"] {
  flex: 1;
  background: rgba(10, 15, 20, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e6edf5;
  padding: .85rem 1rem;
  border-radius: 10px;
  font-size: .95rem;
  font-family: inherit;
  min-width: 0;
}

.home-newsletter__form input[type="email"]:focus {
  outline: none;
  border-color: #8B5CF6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

.home-newsletter__submit {
  background: linear-gradient(135deg, #8B5CF6, #6d28d9);
  color: #fff;
  border: none;
  padding: .85rem 1.5rem;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  font-size: .95rem;
  transition: transform .15s, box-shadow .2s;
}

.home-newsletter__submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.35);
}

.home-newsletter__submit:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

.home-newsletter__honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.home-newsletter__status {
  margin: 1rem 0 0;
  font-size: .88rem;
  color: rgba(230, 237, 245, 0.55);
  min-height: 1.2em;
}

.home-newsletter__status--ok { color: #4ade80; }
.home-newsletter__status--err { color: #f87171; }

/* Recently viewed strip uses same layout as home-products-strip */
.home-products-strip--recent {
  padding-top: 2rem;
}

/* ========================================================================
   GLOBAL A11Y : reduced-motion + hover guards
   -------------------------------------------
   Last-word rules so respect for user preferences wins everywhere.
   ======================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* Protect translate/scale hover effects from sticky touch-highlights on
   devices without a real hover. Disables the "lift" only (no functionality
   lost). Targets high-traffic interactive cards. */
@media (hover: none) {
  .product-card:hover,
  .brand-card:hover,
  .pdp-review-card:hover,
  .home-newsletter__submit:hover,
  .wishlist-btn:hover,
  .cat-chip:hover {
    transform: none !important;
  }
}

/* ========== 33) TERRITORY SELECTOR (DOM-TOM) ========== */
.terr-wrap { position: relative; display: inline-flex; }
.terr-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: #e6edf5;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
  max-width: 220px;
}
.terr-btn:hover { background: rgba(139, 92, 246, 0.14); border-color: rgba(139, 92, 246, 0.35); }
.terr-btn:focus-visible { outline: 2px solid #8B5CF6; outline-offset: 2px; }
.terr-btn__icon { font-size: 15px; line-height: 1; }
.terr-btn__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.terr-btn__chev { font-size: 10px; opacity: .7; }
.terr-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #0f1722;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
  z-index: 9600;
}
.terr-menu[hidden] { display: none; }
.terr-menu__item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: #e6edf5;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.terr-menu__item:hover,
.terr-menu__item:focus-visible {
  background: rgba(139, 92, 246, 0.16);
  outline: none;
}
.terr-menu__item.is-active {
  background: rgba(139, 92, 246, 0.24);
  color: #fff;
}
.terr-menu__flag { font-size: 20px; line-height: 1; }
.terr-menu__name { flex: 1; font-weight: 600; }
.terr-menu__code { opacity: .6; font-size: 12px; }

@media (max-width: 640px) {
  .terr-btn { padding: 6px 10px; font-size: 12px; max-width: 150px; }
  .terr-btn__label { max-width: 90px; }
}

/* ========== 34) PDP PRICE BREAKDOWN ========== */
.pdp-price__breakdown {
  margin-top: 10px;
  font-size: 13px;
  color: #cdd6e0;
}
.pdp-price__breakdown summary {
  cursor: pointer;
  color: #8B5CF6;
  font-weight: 600;
  list-style: none;
  padding: 4px 0;
}
.pdp-price__breakdown summary::-webkit-details-marker { display: none; }
.pdp-price__breakdown summary::before {
  content: '▸ ';
  display: inline-block;
  transition: transform .18s ease;
}
.pdp-price__breakdown[open] summary::before { transform: rotate(90deg); }
.pdp-price__breakdown ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}
.pdp-price__breakdown li {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
}
.pdp-price__breakdown .pdp-price__total {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-weight: 700;
}

/* ========== 35) PRODUCT DOM-TOM BADGES ========== */
.pt-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  z-index: 2;
  pointer-events: none;
}
.pt-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 14px;
  line-height: 1;
  background: rgba(15, 23, 34, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.pt-badge__txt { display: none; }
.pt-badge--tropical { background: rgba(34, 197, 94, 0.22); border-color: rgba(34, 197, 94, 0.5); }
.pt-badge--cordless { background: rgba(59, 130, 246, 0.22); border-color: rgba(59, 130, 246, 0.5); }
.pt-badge--mayotte  { background: rgba(251, 146, 60, 0.22); border-color: rgba(251, 146, 60, 0.5); }
.pt-badge--stock    { background: rgba(250, 204, 21, 0.22); border-color: rgba(250, 204, 21, 0.5); }

/* Flow variant on PDP discover section — show label text */
.pt-badges--pdp {
  position: static;
  justify-content: center;
  margin: 20px 0 8px;
}
.pt-badges--pdp .pt-badge { width: auto; padding: 6px 12px; font-size: 13px; gap: 6px; color: #fff; }
.pt-badges--pdp .pt-badge__txt { display: inline; font-weight: 600; }

.pdp-more {
  max-width: 820px;
  margin: 16px auto 0;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  text-align: left;
}
.pdp-more[hidden] { display: none; }
.pdp-more summary {
  cursor: pointer;
  color: #8B5CF6;
  font-weight: 600;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pdp-more summary::-webkit-details-marker { display: none; }
.pdp-more summary::before {
  content: '▸';
  display: inline-block;
  transition: transform .2s ease;
}
.pdp-more[open] summary::before { transform: rotate(90deg); }
.pdp-more p { margin: 12px 0 0; color: #cdd6e0; line-height: 1.6; }

/* ========== 36) TERRITORY LANDING VIEW ========== */
.terr-view { padding: 24px 16px 60px; }
.terr-view__hero {
  text-align: center;
  padding: 40px 20px 32px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(34, 197, 94, 0.08));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  margin-bottom: 40px;
}
.terr-view__flag { font-size: 56px; line-height: 1; display: block; margin-bottom: 12px; }
.terr-view__hero h1 { font-size: clamp(26px, 4.5vw, 40px); margin: 0 0 12px; }
.terr-view__hero h1 span { color: #8B5CF6; }
.terr-view__lead { max-width: 680px; margin: 0 auto 20px; color: #cdd6e0; line-height: 1.55; }
.terr-view__rates {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 24px;
}
.terr-view__rate {
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  font-size: 13px;
}
.terr-view__rate strong { color: #8B5CF6; margin-right: 4px; }
.terr-view__cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.terr-view__section { margin-top: 44px; }
.terr-view__section h2 {
  font-size: 22px;
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.terr-view__shipping {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.terr-ship-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}
.terr-ship-card__icon { font-size: 28px; }
.terr-ship-card strong { color: #fff; }
.terr-ship-card p { margin: 2px 0 0; color: #cdd6e0; font-size: 13px; }

/* FAQ list (used on territory view and anywhere .faq-list appears) */
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 18px;
}
.faq-item summary {
  cursor: pointer;
  color: #fff;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  color: #8B5CF6;
  font-size: 22px;
  line-height: 1;
  transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin: 10px 0 0; color: #cdd6e0; line-height: 1.55; }

/* ========== 37) CONSENT BAR ========== */
.consent-bar {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0));
  z-index: 9700;
  background: #0f1722;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.5);
  color: #e6edf5;
  font-size: 13px;
}
.consent-bar[hidden] { display: none; }
.consent-bar__inner {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  flex-wrap: wrap;
}
.consent-bar__text { flex: 1; min-width: 220px; margin: 0; line-height: 1.5; }
.consent-bar__text strong { color: #fff; display: block; margin-bottom: 4px; font-size: 14px; }
.consent-bar__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.consent-bar .btn { padding: 8px 16px; font-size: 13px; }
.consent-bar__deny { opacity: 0.7; }
.consent-bar__deny:hover { opacity: 1; }

@media (max-width: 640px) {
  .consent-bar {
    bottom: calc(96px + env(safe-area-inset-bottom, 0));
  }
  .consent-bar__inner { padding: 12px 14px; }
}

/* ========== 38) WHATSAPP FLOTTANT ========== */
.wa-float {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: #25D366;
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.4);
  font-weight: 700;
  font-size: 14px;
  z-index: 9500;
  will-change: transform, opacity;
  transition: transform .45s cubic-bezier(.25,.46,.45,.94), box-shadow .2s ease, opacity .45s cubic-bezier(.25,.46,.45,.94);
}
.wa-float.wa-float--hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px) scale(.9);
}
.wa-float__icon { font-size: 18px; line-height: 1; }
.wa-float__label { font-family: inherit; }

@media (hover: hover) {
  .wa-float:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 16px 38px rgba(37, 211, 102, 0.55);
  }
}
@media (max-width: 640px) {
  .wa-float {
    bottom: calc(90px + env(safe-area-inset-bottom, 0));
  }
  .wa-float__label { display: none; }
  .wa-float { padding: 12px 14px; }
}

/* ========== 39) DEVIS FIDÉLITÉ ========== */
.devis-loyalty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 18px;
  margin: 16px 0;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.14), rgba(34, 197, 94, 0.10));
  border: 1px solid rgba(139, 92, 246, 0.35);
  border-radius: 14px;
  font-size: 14px;
  flex-wrap: wrap;
}
.devis-loyalty__tier { font-weight: 700; color: #fff; }
.devis-loyalty__save {
  padding: 4px 10px;
  background: rgba(34, 197, 94, 0.22);
  color: #22c55e;
  border-radius: 999px;
  font-weight: 700;
}
.devis-loyalty__hint { color: #cdd6e0; font-size: 13px; }
.devis-loyalty__bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  margin-top: 8px;
  overflow: hidden;
}
.devis-loyalty__fill {
  height: 100%;
  background: linear-gradient(90deg, #8B5CF6, #22c55e);
  border-radius: 999px;
  transition: width .4s ease;
}

/* ========== 40) DEVIS LIVRAISON ========== */
.devis-shipping {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 18px;
  margin: 12px 0 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  font-size: 13px;
  flex-wrap: wrap;
}
.devis-shipping__label { font-weight: 600; color: #fff; }
.devis-shipping__value { color: #8B5CF6; font-weight: 700; }
.devis-shipping__delay { color: #cdd6e0; font-size: 12px; }

/* ========== 41) COMPARATEUR PRIX LOCAL ========== */
.pt-local-compare {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(139, 92, 246, 0.08));
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-radius: 12px;
  font-size: 13px;
}
.pt-local-compare__label { opacity: .75; }
.pt-local-compare__value { text-decoration: line-through; color: #f59e0b; font-weight: 700; }
.pt-local-compare__saving {
  margin-left: auto;
  padding: 4px 10px;
  background: rgba(34, 197, 94, 0.22);
  border-radius: 999px;
  color: #22c55e;
  font-weight: 700;
}

/* ========== 42) STRIPE ELEMENTS ========== */
.stripe-elements-wrap {
  margin-bottom: 16px;
}
.stripe-payment-element {
  min-height: 120px;
  padding: 4px 0;
}
.stripe-card-error {
  color: #ef4444;
  font-size: 13px;
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
}
.stripe-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px 16px;
  color: #cdd6e0;
  font-size: 14px;
}
.stripe-loading__spinner {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(139, 92, 246, 0.25);
  border-top-color: #8B5CF6;
  border-radius: 50%;
  animation: stripe-spin .7s linear infinite;
}
@keyframes stripe-spin {
  to { transform: rotate(360deg); }
}
.stripe-fallback {
  text-align: center;
  padding: 24px 16px;
  color: #cdd6e0;
  line-height: 1.6;
}
.stripe-fallback p { margin: 4px 0; }
.stripe-fallback strong { color: #fff; }

/* ========== 43) INSTAGRAM ADMIN ========== */
.ig-admin {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.ig-section {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 20px;
}
.ig-error {
  color: #ef4444;
  font-size: 13px;
  margin: 8px 0 0;
  padding: 10px 14px;
  background: rgba(239, 68, 68, 0.08);
  border-radius: 8px;
}

/* Account card */
.ig-account-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
}
.ig-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(139, 92, 246, 0.4);
  flex-shrink: 0;
}
.ig-account-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ig-username {
  color: #E1306C;
  font-size: 16px;
}
.ig-name {
  color: #cdd6e0;
  font-size: 13px;
}
.ig-stats {
  display: flex;
  gap: 16px;
  margin-top: 6px;
  font-size: 13px;
  color: #9ca3af;
}
.ig-bio {
  margin-top: 8px;
  font-size: 13px;
  color: #b0b8c4;
  line-height: 1.5;
}

/* Token */
.ig-token-card {
  margin-top: 14px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
}
.ig-token-success {
  color: #22c55e;
  font-weight: 600;
  margin-bottom: 8px;
}
.ig-token-textarea {
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  color: #e5e7eb;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 10px;
  font-family: monospace;
  font-size: 11px;
  resize: vertical;
  margin: 8px 0;
}

/* Media grid */
.ig-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.ig-media-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s, transform .2s;
}
.ig-media-card:hover {
  border-color: rgba(225, 48, 108, 0.4);
  transform: translateY(-2px);
}
.ig-media-thumb {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}
.ig-media-nothumb {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.03);
  color: #6b7280;
  font-size: 12px;
}
.ig-media-info {
  padding: 10px 12px;
}
.ig-media-date {
  font-size: 11px;
  color: #9ca3af;
}
.ig-media-type {
  font-size: 10px;
  color: #6b7280;
  text-transform: uppercase;
  margin-left: 8px;
}
.ig-media-caption {
  font-size: 12px;
  color: #b0b8c4;
  margin: 6px 0 4px;
  line-height: 1.4;
}
.ig-media-stats {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: #9ca3af;
}

/* Publish form */
.ig-publish-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ig-publish-form textarea {
  background: rgba(0, 0, 0, 0.3);
  color: #e5e7eb;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 10px;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
}
.ig-publish-preview {
  border: 1px solid rgba(225, 48, 108, 0.3);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 8px;
}
.ig-preview-img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  display: block;
}
.ig-preview-caption {
  padding: 12px;
  font-size: 13px;
  color: #cdd6e0;
  line-height: 1.5;
  white-space: pre-wrap;
}
.ig-publish-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.ig-draft-confirm {
  margin-top: 14px;
  padding: 16px;
  background: rgba(34, 197, 94, 0.06);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.ig-draft-msg {
  font-size: 14px;
  color: #22c55e;
  font-weight: 600;
  width: 100%;
}

/* Comments */
.ig-comments-lookup {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.ig-media-id-input {
  flex: 1;
  background: rgba(0, 0, 0, 0.3);
  color: #e5e7eb;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
}
.ig-comments-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ig-comment {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  padding: 12px 14px;
}
.ig-comment-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.ig-comment-header strong {
  color: #E1306C;
  font-size: 13px;
}
.ig-comment-date {
  font-size: 11px;
  color: #6b7280;
}
.ig-comment-text {
  font-size: 13px;
  color: #cdd6e0;
  line-height: 1.5;
  margin: 0;
}
.ig-replies {
  margin-top: 8px;
  padding-left: 16px;
  border-left: 2px solid rgba(225, 48, 108, 0.2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ig-reply {
  font-size: 12px;
  color: #b0b8c4;
  line-height: 1.4;
}
.ig-reply strong {
  color: #8B5CF6;
}
.ig-comment-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.ig-reply-input {
  flex: 1;
  background: rgba(0, 0, 0, 0.3);
  color: #e5e7eb;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
}
.ig-reply-btn {
  font-size: 12px;
  padding: 6px 12px;
}

/* Insights */
.ig-insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.ig-insight-card {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ig-insight-label {
  font-size: 12px;
  color: #9ca3af;
  text-transform: capitalize;
}
.ig-insight-value {
  font-size: 28px;
  color: #fff;
  font-weight: 700;
}
.ig-insight-desc {
  font-size: 11px;
  color: #6b7280;
  line-height: 1.4;
}

/* Responsive */
@media (max-width: 600px) {
  .ig-media-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .ig-account-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .ig-stats {
    justify-content: center;
  }
  .ig-insights-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}