/* ============================================================
   ASTRO STELLAR — Porte-clés NFC Horoscope Quotidien
   Propulsé par Timelapse-3D | Design cosmique premium
   ============================================================ */

/* ── FORÇAGE FOND SOMBRE GLOBAL ────────────────────────────── */
html {
    background:
        radial-gradient(ellipse 70% 60% at 95%  -5%, rgba(139,92,246,.45) 0%, transparent 55%),
        radial-gradient(ellipse 55% 55% at  -5%  70%, rgba(109,40,217,.22) 0%, transparent 55%),
        radial-gradient(ellipse 60% 50% at  80%  95%, rgba(76,29,149,.28)  0%, transparent 55%),
        #070014 !important;
    background-attachment: fixed !important;
    min-height: 100%;
}
body { background: transparent !important; color: #F8F4FF; font-family: 'Inter', system-ui, sans-serif; }

/* ── HEADER SOMBRE ─────────────────────────────────────────── */
/* Le fond blanc est sur .nav (pill flottante), pas sur #main-header */
#main-header { background: transparent !important; }
#main-header .nav {
    background: rgba(9, 2, 30, 0.96) !important;
    border: 1px solid rgba(139,92,246,.25) !important;
    box-shadow: 0 4px 28px rgba(0,0,0,.45), 0 0 0 1px rgba(139,92,246,.1) inset !important;
    /* backdrop-filter supprimé sur mobile : il crée un contexte de positionnement
       qui piège le #mobile-nav (position:fixed) et le rend invisible.
       On compense avec un fond plus opaque (0.96). */
}
/* Sur desktop uniquement : backdrop-filter ne gêne pas (mobile-nav est en flow normal) */
@media (min-width: 841px) {
    #main-header .nav {
        backdrop-filter: blur(22px) !important;
        -webkit-backdrop-filter: blur(22px) !important;
    }
}
/* Logo & textes généraux */
#main-header .logo img          { filter: brightness(0) invert(1) !important; }
#main-header .logo span         { color: #F8F4FF !important; }
#main-header nav a              { color: rgba(248,244,255,.85) !important; }
#main-header nav a:hover        { color: #fff !important; }
#main-header .submenu-toggle    { color: rgba(248,244,255,.85) !important; }
/* Bouton "Connexion" desktop */
#main-header .btn-secondary     { background: rgba(139,92,246,.13) !important; color: #c4b5fd !important; border-color: rgba(139,92,246,.3) !important; }
/* Panier & hamburger */
#main-header .cart              { background: rgba(139,92,246,.15) !important; color: rgba(248,244,255,.8) !important; border-radius: 12px !important; }
#main-header #cart-count        { background: #8B5CF6 !important; color: #fff !important; }
#main-header .menu-toggle span  { background: #F8F4FF !important; }
/* Sélecteur de langue */
#main-header .language-switcher select {
    background: rgba(255,255,255,.08) !important;
    color: #F8F4FF !important;
    border: 1px solid rgba(255,255,255,.2) !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}
#main-header .language-switcher select option { background: #0e0230 !important; color: #F8F4FF !important; }

/* ── Submenu-toggle ouvert : violet au lieu de vert teal ───── */
#main-header .submenu-toggle:hover,
#main-header .has-submenu.submenu-open > .submenu-toggle,
#main-header .has-submenu:focus-within > .submenu-toggle {
    background: rgba(139,92,246,.22) !important;
    color: #fff !important;
}
/* Lien actif */
#main-header .nav nav a.active  { color: #fff !important; background: rgba(139,92,246,.28) !important; box-shadow: 0 0 0 1px rgba(139,92,246,.35) !important; }

/* ── Desktop : dropdowns flottants sombres ─────────────────── */
@media (min-width: 841px) {
    #main-header .submenu,
    #main-header .subsubmenu { background: #0e0230 !important; border: 1px solid rgba(139,92,246,.22) !important; box-shadow: 0 10px 36px rgba(0,0,0,.55) !important; }
    #main-header .submenu a,
    #main-header .subsubmenu a { color: rgba(201,191,230,.85) !important; }
    #main-header .submenu a:hover,
    #main-header .subsubmenu a:hover { background: rgba(139,92,246,.15) !important; color: #fff !important; }
}

/* ══ MOBILE : panneau nav entièrement sombre ════════════════ */
@media (max-width: 840px) {
    /* Panneau principal */
    #main-header #mobile-nav {
        background: #0d0230 !important;
        border: 1px solid rgba(139,92,246,.22) !important;
        box-shadow: 0 14px 50px rgba(0,0,0,.75) !important;
    }
    /* Tous les textes */
    #main-header #mobile-nav a,
    #main-header #mobile-nav button    { color: rgba(248,244,255,.9) !important; }
    #main-header #mobile-nav a:hover,
    #main-header #mobile-nav button:hover { color: #fff !important; }
    /* Lien actif */
    #main-header #mobile-nav a.active  { background: rgba(139,92,246,.25) !important; color: #fff !important; }
    /* Submenu inline (niveau 1) */
    #main-header #mobile-nav .submenu  { background: rgba(22,11,46,.85) !important; border-color: rgba(139,92,246,.15) !important; box-shadow: none !important; }
    /* Subsubmenu inline (niveau 2) */
    #main-header #mobile-nav .subsubmenu { background: transparent !important; border-left: 2px solid rgba(139,92,246,.4) !important; border-top: none !important; border-right: none !important; border-bottom: none !important; box-shadow: none !important; }
    #main-header #mobile-nav .subsubmenu a { color: rgba(196,181,253,.88) !important; }
    #main-header #mobile-nav .subsubmenu a:hover { color: #fff !important; background: rgba(139,92,246,.15) !important; }
    /* Toggle ouvert au niveau 2 */
    #main-header #mobile-nav .has-subsubmenu.subsubmenu-open > .subsubmenu-toggle { color: #c4b5fd !important; background: rgba(139,92,246,.12) !important; border-radius: 8px !important; }
    /* Bouton Connexion */
    #main-header .mobile-cta-link      { background: #8B5CF6 !important; border-color: #7C3AED !important; color: #fff !important; }
    #main-header .mobile-cta-item      { border-top-color: rgba(139,92,246,.25) !important; }
}

/* ── FOOTER SOMBRE ─────────────────────────────────────────── */
footer                   { background: #0b0220 !important; border-top: 1px solid rgba(139,92,246,.18) !important; }
footer h4, footer h5     { color: #F8F4FF !important; }
footer p, footer li      { color: rgba(196,181,253,.65) !important; }
footer a                 { color: rgba(196,181,253,.65) !important; }
footer a:hover           { color: #c4b5fd !important; }
footer .social-link      { background: rgba(139,92,246,.1) !important; color: #c4b5fd !important; border-color: rgba(139,92,246,.2) !important; }
/* cache le sticky CTA générique */
.demo-sticky             { display: none !important; }

/* ── VARIABLES ─────────────────────────────────────────────── */
:root {
    --as-violet: #8B5CF6;
    --as-rose:   #EC5CFF;
    --as-text:   #F8F4FF;
    --as-muted:  #B8A8D9;
    --as-dim:    #8c81b0;
    --as-card:   rgba(255,255,255,.04);
    --as-border: rgba(255,255,255,.09);
    --as-r:      20px;
    --as-r-lg:   28px;
}

/* ── CONTAINER ─────────────────────────────────────────────── */
.as-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ── HERO ───────────────────────────────────────────────────── */
.as-hero { padding: 56px 0 64px; position: relative; z-index: 1; }
.as-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
}

/* Galerie */
.as-gallery { display: grid; grid-template-columns: 78px 1fr; gap: 14px; position: sticky; top: 100px; }
.as-thumbs  { display: flex; flex-direction: column; gap: 10px; }
.as-thumb   {
    width: 76px; height: 76px;
    border-radius: 12px; overflow: hidden; padding: 0;
    border: 2px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    cursor: pointer; flex-shrink: 0;
    transition: border-color .2s, transform .2s;
}
.as-thumb:hover          { border-color: rgba(139,92,246,.5); transform: scale(1.04); }
.as-thumb.is-active      { border-color: #8B5CF6; box-shadow: 0 0 14px rgba(139,92,246,.45); }
.as-thumb img            { width: 100%; height: 100%; object-fit: cover; display: block; }
.as-main-wrap            {
    border-radius: 20px; overflow: hidden;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
}
.as-main-img             { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .25s; }

/* Info */
.as-info              { display: flex; flex-direction: column; gap: 0; }
.as-badge             {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(139,92,246,.13); color: #c4b5fd;
    border: 1px solid rgba(139,92,246,.32);
    padding: 5px 14px; border-radius: 20px;
    font-size: .75rem; font-weight: 700; letter-spacing: .09em;
    margin-bottom: 18px; width: fit-content;
}
.as-h1                {
    font-size: 2.5rem; font-weight: 700; line-height: 1.13;
    font-family: 'Space Grotesk','Inter',sans-serif;
    color: #F8F4FF; margin: 0 0 10px;
}
.as-tagline           { color: #a78bfa; font-size: 1rem; font-style: italic; font-weight: 500; margin: 0 0 10px; }
.as-desc              { color: var(--as-muted); font-size: .93rem; line-height: 1.65; margin: 0 0 22px; }

/* 4 feature icons */
.as-feat-icons        { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 24px; }
.as-feat-icon         {
    background: var(--as-card); border: 1px solid var(--as-border);
    border-radius: 14px; padding: 14px 6px;
    display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
}
.as-feat-icon i       { font-size: 1.35rem; color: var(--as-violet); }
.as-feat-icon span    { font-size: .72rem; color: #c9bfe6; line-height: 1.35; }

/* Prix */
.as-price-block       {
    display: flex; align-items: baseline; gap: 10px;
    background: rgba(139,92,246,.07); border: 1px solid rgba(139,92,246,.2);
    border-radius: 16px; padding: 16px 20px; margin-bottom: 18px;
}
.as-price             { font-size: 2.5rem; font-weight: 800; color: #F8F4FF; font-family: 'Space Grotesk','Inter',sans-serif; }
.as-price-ttc         { font-size: .82rem; color: var(--as-dim); }

/* Sélecteur de signe */
.as-label             { display: block; font-size: .85rem; color: #c9bfe6; margin-bottom: 8px; font-weight: 500; }
.as-select-wrap       { position: relative; margin-bottom: 16px; }
.as-select            {
    width: 100%; appearance: none;
    background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.13);
    color: #F8F4FF; padding: 13px 44px 13px 16px;
    border-radius: 12px; font-size: .95rem; font-family: 'Inter',sans-serif; cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
}
.as-select:focus      { outline: none; border-color: var(--as-violet); box-shadow: 0 0 0 3px rgba(139,92,246,.22); }
.as-select option     { background: #160B2E; }
.as-select-arr        { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--as-dim); pointer-events: none; font-size: .85rem; }

/* Quantité + panier */
.as-cart-row          { display: flex; gap: 12px; margin-bottom: 18px; align-items: center; }
.as-qty               { display: flex; align-items: center; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; overflow: hidden; flex-shrink: 0; }
.as-qty-btn           { background: none; border: none; color: #c9bfe6; width: 42px; height: 48px; cursor: pointer; font-size: .85rem; transition: color .2s, background .2s; display: flex; align-items: center; justify-content: center; }
.as-qty-btn:hover     { color: var(--as-violet); background: rgba(139,92,246,.1); }
.as-qty-num           { width: 34px; text-align: center; font-size: 1.05rem; font-weight: 600; color: #F8F4FF; }
.as-btn-cart          {
    flex: 1; background: linear-gradient(135deg,#8B5CF6 0%,#7C3AED 100%);
    color: #fff; border: none; border-radius: 12px; padding: 14px 18px;
    font-size: .95rem; font-weight: 700; font-family: 'Inter',sans-serif; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: all .3s; box-shadow: 0 4px 20px rgba(139,92,246,.35);
}
.as-btn-cart:hover    { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(139,92,246,.52); }

/* Petites garanties sous le bouton */
.as-mini-trust        { list-style: none; padding: 0; margin: 0; display: flex; gap: 8px; }
.as-mini-trust li     {
    flex: 1; font-size: .75rem; color: var(--as-dim);
    background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px; padding: 10px 6px;
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px;
}
.as-mini-trust li i   { color: var(--as-violet); font-size: .9rem; }

/* ── SECTIONS COMMUNES ──────────────────────────────────────── */
.as-section           { position: relative; z-index: 1; padding: 32px 0 48px; }

/* Cartes glass */
.as-glass             {
    background: var(--as-card); border: 1px solid var(--as-border);
    border-radius: var(--as-r-lg); backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px); padding: 32px;
}
.as-two-col           { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.as-card-ico          {
    width: 52px; height: 52px;
    background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.25);
    border-radius: 14px; display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem; color: #c4b5fd; margin-bottom: 20px;
}
.as-card-h2           { font-size: 1.45rem; font-weight: 700; color: #F8F4FF; margin: 0 0 14px; font-family: 'Space Grotesk','Inter',sans-serif; }
.as-card-p            { color: var(--as-muted); font-size: .9rem; line-height: 1.6; margin: 0 0 10px; }
.as-card-visual       { width: 100%; border-radius: 14px; margin-top: 20px; object-fit: cover; max-height: 260px; display: block; }

/* Steps "comment ça marche" */
.as-steps             { display: flex; align-items: flex-start; gap: 6px; margin: 20px 0 16px; }
.as-step              { flex: 1; text-align: center; }
.as-step-ico          {
    width: 50px; height: 50px; border-radius: 50%;
    background: rgba(139,92,246,.1); border: 1px solid rgba(139,92,246,.25);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; color: #c4b5fd; margin: 0 auto 10px;
}
.as-step p            { font-size: .77rem; color: var(--as-muted); line-height: 1.4; margin: 0; }
.as-step-arr          { color: rgba(139,92,246,.35); font-size: .8rem; padding-top: 12px; flex-shrink: 0; }
.as-compat            { font-size: .8rem; color: var(--as-dim); display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.as-compat i          { font-size: 1rem; }

/* ── BÉNÉFICES 4 ────────────────────────────────────────────── */
.as-benefits-grid     { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.as-benefit           {
    background: rgba(255,255,255,.03); border: 1px solid var(--as-border);
    border-radius: var(--as-r); padding: 28px 18px; text-align: center;
    transition: transform .3s, background .3s;
}
.as-benefit:hover     { transform: translateY(-5px); background: rgba(139,92,246,.07); border-color: rgba(139,92,246,.25); }
.as-benefit-ico       {
    width: 60px; height: 60px; border-radius: 50%;
    background: rgba(139,92,246,.08); border: 1px solid rgba(139,92,246,.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.45rem; color: #c4b5fd; margin: 0 auto 16px;
}
.as-benefit h3        { font-size: .98rem; color: #F8F4FF; margin: 0 0 8px; font-family: 'Space Grotesk','Inter',sans-serif; }
.as-benefit p         { font-size: .82rem; color: var(--as-dim); margin: 0; line-height: 1.5; }

/* ── 12 SIGNES ──────────────────────────────────────────────── */
.as-section-h2        { font-size: 2rem; font-weight: 700; color: #F8F4FF; text-align: center; margin: 0 0 36px; font-family: 'Space Grotesk','Inter',sans-serif; }
.as-signs-grid        { display: grid; grid-template-columns: repeat(6,1fr); gap: 16px; margin-bottom: 32px; }
/* ── CARTES SIGNES ── */
.as-sign-card         {
    position: relative; overflow: hidden;
    background: linear-gradient(160deg, rgba(139,92,246,.07) 0%, rgba(255,255,255,.02) 100%);
    border: 1px solid rgba(139,92,246,.18);
    border-radius: 20px; padding: 20px 10px 16px;
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    cursor: pointer; transition: all .3s ease; text-decoration: none;
    font-family: 'Inter',sans-serif;
}
.as-sign-card::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 50% -10%, rgba(139,92,246,.18) 0%, transparent 65%);
    opacity: 0; transition: opacity .3s;
}
.as-sign-card:hover          { border-color: rgba(139,92,246,.5); transform: translateY(-7px); box-shadow: 0 14px 32px rgba(139,92,246,.22); }
.as-sign-card:hover::before  { opacity: 1; }
.as-sign-icon         {
    width: 52px; height: 52px;
    background: linear-gradient(135deg, rgba(139,92,246,.35) 0%, rgba(109,40,217,.45) 100%);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(139,92,246,.3);
    transition: transform .3s, box-shadow .3s;
    flex-shrink: 0;
}
.as-sign-card:hover .as-sign-icon { transform: scale(1.12); box-shadow: 0 6px 22px rgba(139,92,246,.5); }
.as-sign-glyph        { font-size: 1.7rem; line-height: 1; color: #F8F4FF; }
.as-sign-name         { font-size: .9rem; color: #F8F4FF; font-weight: 600; letter-spacing: .01em; }
.as-sign-dates        { font-size: .66rem; color: rgba(196,181,253,.5); font-weight: 400; text-align: center; line-height: 1.3; }
.as-sign-link         {
    font-size: .72rem; color: #8B5CF6; font-weight: 600;
    display: flex; align-items: center; gap: 4px;
    opacity: 0; transform: translateY(5px); transition: all .25s;
    margin-top: 2px;
}
.as-sign-card:hover .as-sign-link { opacity: 1; transform: translateY(0); }
.as-signs-cta         { text-align: center; }

/* ── AVIS + QUALITÉ ─────────────────────────────────────────── */
.as-stars-row         { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.as-stars i           { color: #FBBF24; font-size: 1rem; }
.as-rating-num        { font-size: 1.05rem; font-weight: 700; color: #F8F4FF; }
.as-rating-count      { font-size: .8rem; color: var(--as-dim); }
.as-quote             { background: rgba(255,255,255,.04); border-left: 3px solid var(--as-violet); border-radius: 0 12px 12px 0; padding: 16px 20px; margin: 0 0 16px; }
.as-quote blockquote  { margin: 0; }
.as-quote blockquote p{ font-size: .93rem; color: #c9bfe6; font-style: italic; line-height: 1.6; margin: 0 0 8px; }
.as-quote figcaption  { font-size: .82rem; color: var(--as-violet); font-weight: 600; }
.as-dots              { display: flex; gap: 6px; }
.as-dot               { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.2); display: block; }
.as-dot.on            { background: var(--as-violet); }
.as-quality-card      { display: flex; flex-direction: column; gap: 20px; }
.as-quality-img       { width: 100%; border-radius: 16px; object-fit: cover; max-height: 200px; display: block; }
.as-quality-list      { display: flex; flex-direction: column; gap: 14px; }
.as-quality-item      { display: flex; gap: 14px; align-items: flex-start; }
.as-quality-item > i  { color: var(--as-violet); font-size: 1.15rem; margin-top: 3px; flex-shrink: 0; }
.as-quality-item strong { display: block; color: #F8F4FF; font-size: .92rem; margin-bottom: 4px; }
.as-quality-item p    { color: var(--as-dim); font-size: .82rem; margin: 0; }

/* ── FAQ ────────────────────────────────────────────────────── */
.as-faq-inner         { max-width: 760px; margin: 0 auto; }
.as-faq-list          { display: flex; flex-direction: column; gap: 12px; }
.as-faq-item          { background: var(--as-card); border: 1px solid var(--as-border); border-radius: 14px; overflow: hidden; }
.as-faq-q             {
    width: 100%; background: none; border: none; color: #F8F4FF;
    padding: 18px 20px; display: flex; justify-content: space-between; align-items: center;
    font-size: .97rem; font-weight: 600; font-family: 'Inter',sans-serif;
    cursor: pointer; text-align: left; gap: 12px; transition: background .2s;
}
.as-faq-q:hover       { background: rgba(255,255,255,.04); }
.as-faq-ico           { color: var(--as-violet); transition: transform .3s; flex-shrink: 0; }
.as-faq-item.open .as-faq-ico  { transform: rotate(180deg); }
.as-faq-a             { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.as-faq-item.open .as-faq-a   { max-height: 200px; }
.as-faq-a p           { padding: 0 20px 20px; color: var(--as-muted); font-size: .88rem; line-height: 1.65; margin: 0; }

/* ── CTA FINAL ──────────────────────────────────────────────── */
.as-cta-section       { position: relative; z-index: 1; padding: 20px 0 40px; }
.as-cta-card          { position: relative; border-radius: 24px; overflow: hidden; }
.as-cta-card__bg      {
    position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(135deg, #2E1065 0%, #5B21B6 50%, #2E1065 100%);
}
.as-cta-card__bg::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 50%, rgba(236,92,255,.22) 0%, transparent 65%);
}
.as-cta-card__body    { position: relative; z-index: 1; display: flex; align-items: center; gap: 24px; padding: 36px 44px; }
.as-cta-ico           { width: 56px; height: 56px; background: rgba(255,255,255,.12); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff; flex-shrink: 0; }
.as-cta-text          { flex: 1; }
.as-cta-text strong   { display: block; color: #fff; font-size: 1.2rem; font-weight: 700; margin-bottom: 4px; }
.as-cta-text span     { color: rgba(255,255,255,.72); font-size: .88rem; }
.as-btn-cta           {
    background: #fff; color: #5B21B6; border: none; border-radius: 12px;
    padding: 14px 28px; font-size: .97rem; font-weight: 700;
    font-family: 'Inter',sans-serif; cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    text-decoration: none; flex-shrink: 0; transition: all .25s;
}
.as-btn-cta:hover     { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.22); color: #5B21B6; }

/* Bouton fantôme */
.as-btn-ghost         {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(139,92,246,.09); border: 1px solid rgba(139,92,246,.3);
    color: #c4b5fd; padding: 12px 24px; border-radius: 12px;
    font-size: .88rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: all .25s;
}
.as-btn-ghost:hover   { background: rgba(139,92,246,.18); color: #fff; }

/* ── BARRE DE CONFIANCE ─────────────────────────────────────── */
.as-trust-bar         { position: relative; z-index: 1; background: rgba(255,255,255,.025); border-top: 1px solid rgba(255,255,255,.06); padding: 28px 0 44px; }
.as-trust-items       { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.as-trust-item        { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; }
.as-trust-item .as-trust-flag { font-size: 1.6rem; }
.as-trust-item > i    { font-size: 1.25rem; color: var(--as-violet); }
.as-trust-item strong { font-size: .84rem; color: #F8F4FF; }
.as-trust-item span   { font-size: .76rem; color: var(--as-dim); }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .as-hero-grid     { grid-template-columns: 1fr; gap: 40px; }
    .as-gallery       { position: static; }
    .as-two-col       { grid-template-columns: 1fr; }
    .as-benefits-grid { grid-template-columns: repeat(2,1fr); }
    .as-trust-items   { grid-template-columns: repeat(2,1fr); }
    /* Compense le header fixe (~88px) */
    .as-hero          { padding-top: 110px; }
}
@media (max-width: 768px) {
    /* Header fixe mobile ~82px + marge de sécurité */
    .as-hero          { padding: 110px 0 48px; }
    .as-gallery       { grid-template-columns: 1fr; }
    .as-thumbs        { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 2px; gap: 8px; }
    .as-thumb         { scroll-snap-align: start; }
    .as-h1            { font-size: 2rem; }
    .as-feat-icons    { grid-template-columns: repeat(2,1fr); }
    .as-cart-row      { flex-direction: column; }
    .as-btn-cart      { width: 100%; }
    .as-mini-trust    { flex-direction: column; }
    .as-mini-trust li { flex-direction: row; text-align: left; gap: 10px; }
    /* Signes en 4 colonnes sur tablette, dates masquées */
    .as-signs-grid    { grid-template-columns: repeat(4,1fr); gap: 12px; }
    .as-sign-dates    { display: none; }
    .as-sign-link     { display: none; }
    .as-cta-card__body{ flex-direction: column; text-align: center; padding: 30px 24px; }
    .as-btn-cta       { width: 100%; justify-content: center; }
    .as-benefits-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 480px) {
    .as-wrap          { padding: 0 16px; }
    .as-hero          { padding-top: 100px; }
    .as-h1            { font-size: 1.75rem; }
    /* Signes en 3 colonnes sur mobile, compacts */
    .as-signs-grid    { grid-template-columns: repeat(3,1fr); gap: 10px; }
    .as-sign-card     { padding: 14px 6px 12px; border-radius: 16px; gap: 6px; }
    .as-sign-icon     { width: 40px; height: 40px; border-radius: 10px; }
    .as-sign-glyph    { font-size: 1.35rem; }
    .as-sign-name     { font-size: .78rem; }
    .as-sign-dates    { display: none; }
    /* Sur mobile on montre le lien en tout temps (pas de hover) */
    .as-sign-link     { opacity: 1; transform: none; font-size: .62rem; }
    .as-benefits-grid { grid-template-columns: 1fr 1fr; }
    .as-steps         { flex-wrap: wrap; }
    .as-step-arr      { display: none; }
    .as-step          { min-width: calc(50% - 4px); }
    .as-trust-items   { grid-template-columns: repeat(2,1fr); gap: 14px; }
}