/* ============================================
   index.css — Tape 2 Enter landing page
   Extrait de index.html <style>
   ============================================ */

:root {
    --purple: #7c3aed;
    --purple-light: #9c5cf7;
    --purple-dark: #5b21b6;
    --purple-bg: #f5f3ff;
    --neon: #7c5cfc;
    --cyan: #22d3ee;
    --gold: #f59e0b;
    --green: #10b981;
    --red: #ef4444;
    --dark: #0d0d1a;
    --dark2: #12121f;
}

* { box-sizing: border-box; }
body { font-family: 'DM Sans', sans-serif; }

/* ── FEATURE CARDS ── */
.feature-card {
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border-radius: 0 !important;
    border: 1px solid #e5e7eb !important;
}

.feature-card::before {
    content: '';
    position: absolute;
    left: 32px;
    right: 32px;
    top: 0;
    height: 4px;
    background-color: #a538f3;
    transform: scaleX(0.75);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.feature-card:hover {
    transform: scale(1.025);
    box-shadow: 0 20px 40px rgba(124,58,237,0.14);
    border-color: transparent !important;
    z-index: 1;
}

.feature-card:hover::before {
    transform: scaleX(1);
    opacity: 1;
}

/* ── PRICING CARDS ── */
.pricing-card { transition: all 0.3s ease; }
.pricing-card:hover { transform: scale(1.02); }

/* ── HERO ── */
.hero-gradient {
    background: #0a0a0f;
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 20% 20%, rgba(124, 58, 237, 0.18) 0%, transparent 70%),
        radial-gradient(ellipse 40% 40% at 80% 80%, rgba(0, 212, 255, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse 50% 60% at 50% 50%, rgba(218, 34, 255, 0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.hero-gradient::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
}

/* ── KIOSQUE PLACEHOLDER ── */
.kiosk-placeholder {
    width: 100%;
    max-width: 380px;
    aspect-ratio: 9/16;
    background: rgba(255,255,255,0.06);
    border: 2px dashed rgba(255,255,255,0.2);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: rgba(255,255,255,0.4);
    font-size: .85rem;
    text-align: center;
    padding: 24px;
}

/* ── HERO : image kiosque avec profondeur 3D (rendu net) ── */
.kiosk-hero-img {
    display: block;
    width: 100%;
    max-width: 380px;
    height: auto;

    transform: perspective(1400px) rotateY(-9deg) rotateX(3deg);
    transform-origin: center center;

    /* ── Anti-flou ── */
    image-rendering: -webkit-optimize-contrast;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
    transform-style: preserve-3d;

    filter:
        drop-shadow(28px 30px 55px rgba(0, 0, 0, 0.55))
        drop-shadow(0 0 45px rgba(124, 92, 252, 0.30))
        drop-shadow(0 0 30px rgba(34, 211, 238, 0.10));

    transition: transform .4s ease;
    
}

@media (min-width: 768px) {
    .kiosk-hero-img {
        width: auto;
        max-width: 100%;
        height: min(720px, calc(100vh - 120px));
    }
}

/* ── HERO : légende sous l'image kiosque ── */
.kiosk-hero-caption {
    margin-top: 18px;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
}

/* ── HERO BADGE ── */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(8px);
    padding: 6px 16px;
    border-radius: 100px;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #a78bfa;
    margin-bottom: 20px;
}
.hero-badge .dot {
    width: 6px;
    height: 6px;
    background: #a78bfa;
    border-radius: 50%;
    animation: blink 2s infinite;
}

@keyframes blink {
    0%,100% { opacity: 1; }
    50%      { opacity: .3; }
}

.pulse-animation { animation: pulse 2.5s infinite; }

@keyframes pulse {
    0%,100% { transform: scale(1); }
    50%      { transform: scale(1.03); }
}

/* ── SECTION TAG ── */
.section-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: .68rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--purple);
    display: block;
    margin-bottom: 10px;
}

/* ── CAROUSEL ── */
#carousel-section { background: #ffffff; }

.carousel-outer {
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(124,58,237,0.15);
}

.carousel-track {
    display: flex;
    transition: transform .55s cubic-bezier(.25,.46,.45,.94);
}

.c-slide {
    min-width: 100%;
    height: 500px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.c-slide-bg { position: absolute; inset: 0; }
.slide-bg-1 { background: linear-gradient(135deg, #0d0d1a 0%, #1a0533 45%, #0a1628 100%); }
.slide-bg-2 { background: linear-gradient(135deg, #1a0d08 0%, #2b1408 50%, #1a0820 100%); }
.slide-bg-3 { background: linear-gradient(135deg, #071a12 0%, #0d2b1a 50%, #081428 100%); }
.slide-bg-4 { background: linear-gradient(135deg, #080d1a 0%, #0a1628 50%, #1a0d30 100%); }
.slide-bg-5 { background: linear-gradient(135deg, #1a1208 0%, #2b2008 50%, #1a0820 100%); }
.slide-bg-6 { background: linear-gradient(135deg, #0d0c0f 0%, #24212c 50%, #000000 100%); }


.c-mockup {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.c-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 36px 36px 32px;
    background: linear-gradient(to top, rgba(8,8,16,.96) 0%, transparent 100%);
}
.c-caption h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.7rem;
    letter-spacing: .03em;
    color: #fff;
    margin-bottom: 5px;
}
.c-caption p { font-size: .88rem; color: rgba(255,255,255,0.5); }

.carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: #d8b4fe;
    border: none;
    cursor: pointer;
    transition: all .3s;
}
.carousel-dot.active { background: var(--purple); width: 24px; }

.carousel-nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    border: 1px solid #e9d5ff;
    color: var(--purple);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
    font-size: 1rem;
    box-shadow: 0 2px 8px rgba(124,58,237,0.15);
}
.carousel-nav-btn:hover { background: var(--purple); color: white; }

/* ── COMPARE TABLE ── */
.compare-tbl { width: 100%; border-collapse: collapse; }

.compare-tbl th {
    padding: 14px 18px;
    text-align: left;
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #7c3aed;
    border-bottom: 2px solid #cacaca6b;
    font-family: 'JetBrains Mono', monospace;
}

.compare-tbl td {
    padding: 14px 18px;
    font-size: .88rem;
    border-bottom: 1px solid #f3f0ff;
    vertical-align: top;
}
.compare-tbl td:first-child { color: #6b7280; }
.compare-tbl td.bad  { color: #ef4444; }
.compare-tbl td.good { color: #10b981; font-weight: 500; }
.compare-tbl tbody tr:hover { background: #fdfcff; }

/* ── ROI CALCULATOR ── */
#roi-section {
    background: #0a0a0f;
    position: relative;
    overflow: hidden;
}

#roi-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 20% 20%, rgba(124, 58, 237, 0.18) 0%, transparent 70%),
        radial-gradient(ellipse 40% 40% at 80% 80%, rgba(0, 212, 255, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse 50% 60% at 50% 50%, rgba(218, 34, 255, 0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

#roi-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
}

.roi-card {
    background: rgb(0 0 0 / 41%);
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(16px);
    padding: 36px;
}

.roi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

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

.roi-input:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

#hardware-block.dimmed { opacity: 0.35; pointer-events: none; }

.roi-input {
    width: 100%;
    padding: 11px 14px 11px 28px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    color: white;
    font-family: 'JetBrains Mono', monospace;
    font-size: .9rem;
    transition: border-color .2s;
}
.roi-input:focus        { outline: none; border-color: rgba(167,139,250,0.6); }
.roi-input::placeholder { color: rgba(255,255,255,0.25); }

.roi-label-txt {
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    margin-bottom: 6px;
    display: block;
}

.roi-prefix {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.35);
    font-family: 'JetBrains Mono', monospace;
    font-size: .85rem;
}

.mode-toggle {
    display: flex;
    border: 1px solid rgba(255,255,255,0.12);
    overflow: hidden;
}

.mode-btn {
    flex: 1;
    padding: 10px 8px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.4);
    font-family: 'DM Sans', sans-serif;
    font-size: .78rem;
    cursor: pointer;
    transition: all .2s;
    text-align: center;
}
.mode-btn.active { background: rgba(167,139,250,0.2); color: white; }

.roi-result-box {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 20px;
}

.roi-big { font-family: 'Bebas Neue', sans-serif; font-size: 2.6rem; line-height: 1; }
.roi-big.pos { color: #10b981; }
.roi-big.neg { color: #ef4444; }
.roi-big.neu { color: white; }

.roi-sm-box {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    padding: 12px 14px;
}
.roi-sm-label {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: rgba(255,255,255,0.3);
    margin-bottom: 3px;
}
.roi-sm-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: .85rem;
    color: rgba(255,255,255,0.8);
}

.roi-tab {
    padding: 6px 12px;
    border: 1px solid rgba(255,255,255,0.12);
    background: transparent;
    color: rgba(255,255,255,0.4);
    font-size: .72rem;
    cursor: pointer;
    transition: all .2s;
    font-family: 'DM Sans', sans-serif;
}
.roi-tab.active {
    background: rgba(167,139,250,0.25);
    border-color: rgba(167,139,250,0.4);
    color: white;
}

/* ── CHART ── */
#roi-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 160px;
    padding: 0 4px;
}

.chart-bar-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    height: 100%;
    justify-content: flex-end;
}

.chart-bar {
    width: 100%;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(to top, #7c3aed, #a78bfa);
    transition: height .5s cubic-bezier(.34,1.56,.64,1);
    min-height: 2px;
}

.chart-yr {
    font-size: .6rem;
    color: rgba(255,255,255,0.35);
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    white-space: nowrap;
}

.chart-val {
    font-size: .58rem;
    color: rgba(255,255,255,0.4);
    font-family: 'JetBrains Mono', monospace;
    white-space: nowrap;
}

/* ── ARGUMENTS ── */
.arg-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 4.5rem;
    position: absolute;
    top: -4px;
    right: 12px;
    color: rgba(124,58,237,0.07);
    line-height: 1;
    pointer-events: none;
}

/* ── FAQ ── */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease, padding .3s;
}
.faq-answer.open { max-height: 300px; }

/* ── AUTONOMIE ── */
.autonomy-card {
    padding: 32px;
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
    transition: border-color .3s, transform .2s;
}
.autonomy-card:hover { transform: translateY(-3px); }
.autonomy-card.full { border-color: #c4b5fd; }
.autonomy-card.semi { border-color: #6ee7b7; }

.autonomy-badge-full {
    background: #7c3aed;
    color: white;
    font-size: .7rem;
    font-weight: 600;
    padding: 4px 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 20px;
}
.autonomy-badge-semi {
    background: #10b981;
    color: white;
    font-size: .7rem;
    font-weight: 600;
    padding: 4px 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 20px;
}

/* ── COMPLIANCE BADGES ── */
.comp-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    border: 1px solid #e9d5ff;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: .82rem;
    box-shadow: 0 1px 4px rgba(124,58,237,.06);
}
.comp-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── SCROLL REVEAL ── */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .6s ease, transform .6s ease;
}
.reveal.visible { opacity: 1; transform: none; }

/* ── RESPONSIVE ── */
@media (max-width: 767px) {
    #mobile-menu.open { max-height: 500px; }
    .c-slide { height: 380px; }
}

@media (max-width: 640px) {
    .hero-gradient { min-height: 100vh; padding-top: 5rem; padding-bottom: 3rem; }
}

/* ── NAV TRANSPARENTE AU TOP ── */
#main-nav {
    transition: background-color .35s ease, box-shadow .35s ease;
    background-color: transparent !important;
}
#main-nav.scrolled {
    background-color: #ffffff !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
/* Liens nav : blancs au top, gris au scroll */
#main-nav .nav-link {
    color: rgba(255,255,255,0.85);
    transition: color .2s;
}
#main-nav.scrolled .nav-link {
    color: #4b5563;
}
#main-nav .nav-link:hover {
    color: white;
}
#main-nav.scrolled .nav-link:hover {
    color: #7c3aed;
}
/* Logo texte */
#main-nav .nav-logo-text {
    color: white;
    transition: color .2s;
}
#main-nav.scrolled .nav-logo-text {
    color: #7c3aed;
}

#main-nav .nav-menu-btn {
    color: rgba(255,255,255,0.85);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color .2s;
}
#main-nav.scrolled .nav-menu-btn {
    color: #4b5563;
}

/* Compensation hauteur nav fixe (64px = h-16 Tailwind) */
.hero-gradient {
    padding-top: 64px;
}

/* ── BOUTON MON COMPTE ── */
.nav-btn-compte {
    background-color: #000000;
    border: 1px solid rgba(255,255,255,0.15);
    transition: background-color .2s, opacity .2s;
}
.nav-btn-compte:hover {
    background-color: #000000;
    opacity: 0.65;
}

/* ── SURCHARGE TAILWIND (scopée — évite tout effet de bord global) ── */
.hero-gradient .text-purple-200,
#roi-section .text-purple-200 {
    color: rgb(163 163 163) !important;
}

/* ── TICKET CAROUSEL ── */
.ticket-carousel {
    background: #f8f7ff;
    border: 1px solid #e9d5ff;
    border-radius: 16px;
    padding: 16px 12px 12px;
    width: 100%;
}

.ticket-carousel-outer {
    overflow: hidden;
    border-radius: 8px;
    width: 100%;
}

.ticket-track {
    display: flex;
    width: 100%;
    transition: transform .45s cubic-bezier(.25,.46,.45,.94);
}

.ticket-slide {
    min-width: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 4px 0 8px;
}

.ticket-label {
    font-size: .72rem;
    font-weight: 600;
    color: #7c3aed;
    letter-spacing: .04em;
    text-align: center;
}

.ticket-img-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
}

.ticket-img-wrap img {
    width: 200px;
    max-width: 90%;
    height: auto;
    display: block;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}

.ticket-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding: 0 2px;
}

.ticket-arrow {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: white;
    border: 1px solid #e9d5ff;
    color: #7c3aed;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    transition: all .2s;
    flex-shrink: 0;
    line-height: 1;
    padding: 0;
}
.ticket-arrow:hover {
    background: #7c3aed;
    color: white;
    border-color: #7c3aed;
}

.ticket-dots {
    display: flex;
    gap: 6px;
    align-items: center;
}

.ticket-dot {
    width: 7px;
    height: 7px;
    border-radius: 4px;
    background: #d8b4fe;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all .3s;
}
.ticket-dot.active {
    background: #7c3aed;
    width: 20px;
}

@media (max-width: 640px) {
    .ticket-img-wrap img { width: 160px; }
}

.section-dark {
    background: #0a0a0f;
    position: relative;
    overflow: hidden;
}

.section-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 20% 20%, rgba(124, 58, 237, 0.18) 0%, transparent 70%),
        radial-gradient(ellipse 40% 40% at 80% 80%, rgba(0, 212, 255, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse 50% 60% at 50% 50%, rgba(218, 34, 255, 0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.section-dark::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
}

#roi-section > div,
.section-dark > div {
    position: relative;
    z-index: 1;
}

.faq-item {
    border: 1px solid #e9d5ff !important;
}

/* ============================================================
   ADDITIF index.css — Section #imprimantes (thème section-dark)
   À COLLER à la fin de index.css.
   Le carrousel clair existant (.ticket-carousel) reste intact ;
   on ne fait qu'AJOUTER une variante --dark.
   ============================================================ */

/* ── Cartes imprimante (glass sombre) ── */
.impr-card {
    position: relative;
    background: rgba(13, 13, 26, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 24px;
    backdrop-filter: blur(8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    z-index: 1;
}

.impr-pill-violet {
    background: rgba(124, 92, 252, 0.12);
    color: #a78bfa;
    border: 1px solid rgba(124, 92, 252, 0.25);
}

.impr-printer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}
.impr-printer-row--idle {
    background: rgba(0, 0, 0, 0.18);
    border-color: rgba(255, 255, 255, 0.06);
    opacity: 0.65;
}

.impr-pulse {
    animation: imprPulse 2s infinite;
}
@keyframes imprPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
    50%      { opacity: 0.6; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0); }
}

/* ── Encart "tickets par commande" ── */
.impr-soft-box {
    padding: 16px;
    background: rgba(13, 13, 26, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── Chips/badges sombres ── */
.impr-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.55);
    background: rgba(13, 13, 26, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

/* ── VARIANTE SOMBRE DU CARROUSEL TICKETS ──
   Surcharge uniquement quand .ticket-carousel porte aussi --dark.
   Le carrousel clair d'origine n'est pas affecté. */
.ticket-carousel--dark {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.ticket-carousel--dark .ticket-label {
    color: #a78bfa;
}
.ticket-carousel--dark .ticket-img-wrap img {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
.ticket-carousel--dark .ticket-arrow {
    background: rgba(13, 13, 26, 0.8);
    border: 1px solid rgba(124, 92, 252, 0.3);
    color: #a78bfa;
}
.ticket-carousel--dark .ticket-arrow:hover {
    background: #7c3aed;
    color: #fff;
    border-color: #7c3aed;
}
.ticket-carousel--dark .ticket-dot {
    background: rgba(255, 255, 255, 0.25);
}
.ticket-carousel--dark .ticket-dot.active {
    background: #a78bfa;
}

section.py-10 .bg-purple-50 {
    background-color: transparent !important;
    border-color: #e5e7eb !important;
}

/* ============================================================
   ADDITIF index.css — Mockup #tarification (.tarif-mockup)
   Carte sombre sur section blanche.
   À COLLER à la fin de index.css.
   ============================================================ */

.tarif-mockup {
    background: rgb(10 2 25);
    border: 1px solid rgba(245, 158, 11, 0.18);
    padding: 20px;
    box-shadow: 0 0 60px rgba(245, 158, 11, 0.08);
}

.tarif-mockup-hdr {
    text-align: center;
    margin-bottom: 4px;
}

.tarif-mockup-body {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 16px;
}

/* ── Carte palier ── */
.tarif-step {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 10px;
    padding: 14px 16px;
}
.tarif-step--green {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-left: 4px solid #10b981;
}
.tarif-step--blue {
    background: rgba(55, 138, 221, 0.08);
    border: 1px solid rgba(55, 138, 221, 0.3);
    border-left: 4px solid #378ADD;
}
.tarif-step--red {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-left: 4px solid #ef4444;
}

.tarif-step-info { flex: 1; }

.tarif-step-time {
    font-size: .68rem;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'JetBrains Mono', monospace;
}

.tarif-step-badge {
    display: inline-block;
    margin-top: 5px;
    font-size: .6rem;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 5px;
    letter-spacing: .03em;
}
.tarif-step-badge--green { color: #5DCAA5; background: rgba(16, 185, 129, 0.15); }
.tarif-step-badge--blue  { color: #85B7EB; background: rgba(55, 138, 221, 0.15); }
.tarif-step-badge--red   { color: #F09595; background: rgba(239, 68, 68, 0.15); }

.tarif-step-sub {
    margin-top: 5px;
    font-size: .62rem;
    color: rgba(255, 255, 255, 0.35);
}

.tarif-step-price {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.2rem;
    line-height: 1;
}

/* ── Chevron de transition ── */
.tarif-chevron {
    text-align: center;
    color: rgba(255, 255, 255, 0.25);
    font-size: .7rem;
    line-height: .6;
}

/* ── Footer encart ── */
.tarif-mockup-foot {
    margin-top: 14px;
    text-align: center;
    font-size: .62rem;
    color: rgba(255, 255, 255, 0.4);
    background: rgba(245, 158, 11, 0.06);
    border: 1px solid rgba(245, 158, 11, 0.15);
    border-radius: 8px;
    padding: 10px;
}

/* ── Rétablit la bordure des feature-cards (section "Tout ce dont votre club a besoin") ── */
#fonctionnalites .feature-card {
    border: 1px solid #e5e7eb !important;
    border-width: 1px !important;
}

/* ── Annule border-width et border-radius de Tailwind ── */
.border        { border-width: 0 !important; }
.rounded-2xl   { border-radius: 0 !important; }
.rounded-xl    { border-radius: 0 !important; }

/* ── Formulaire contact — rétablit les bordures des champs ── */
#contact-form input,
#contact-form select,
#contact-form textarea {
    border-width: 1px !important;
    border-color: #e5e7eb !important; /* gray-200 */
}

#contact .bg-gray-50 {
    background-color: white !important;
}

/* ── MOBILE MENU : disparition totale quand fermé ── */
#mobile-menu {
    transition: max-height .3s ease, padding .3s ease, border-width .3s ease;
    max-height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    border-top-width: 0;      /* ← supprime le 1px fantôme */
}

#mobile-menu.open {
    max-height: 500px;
    padding-top: .25rem;
    padding-bottom: .75rem;
    border-top-width: 1px;
    border-top-color: #f3f4f6;
}
/* Liens : un peu d'air pour un rendu plus "app" */
#mobile-menu a {
    border-radius: 10px;
    padding-left: .75rem;
    padding-right: .75rem;
}
#mobile-menu a:not(.bg-purple-600):hover {
    background: #faf5ff;
}

/* ── CARROUSEL APERÇU : empilement mockup + caption en mobile ── */
@media (max-width: 767px) {
    .c-slide {
        height: auto;
        flex-direction: column;
        align-items: stretch;
    }
    .c-mockup {
        position: relative;
        inset: auto;
        flex: 1 0 auto;
        padding: 26px 10px 12px;
    }
    .c-caption {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        padding: 18px 22px 22px;
        background: #08080f;
    }
    .c-caption h3 { font-size: 1.5rem; }
}

/* ── CALCULATEUR ROI : padding réduit en mobile (anti-débordement) ── */
@media (max-width: 767px) {
    .roi-card { padding: 22px; }
}
@media (max-width: 420px) {
    .roi-card { padding: 16px; }
    .mode-btn { font-size: .72rem; padding: 9px 4px; }
}

/* ── CALCULATEUR ROI : anti-débordement ── */
.roi-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 900px) {
    .roi-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Les colonnes (flex-col) doivent pouvoir rétrécir */
.roi-grid > * { min-width: 0; }
.roi-card .flex-col { min-width: 0; }

/* Le toggle 3 boutons : il passe à 2 lignes plutôt que déborder */
@media (max-width: 480px) {
    .mode-toggle { flex-wrap: wrap; }
    .mode-btn {
        flex: 1 1 33%;
        font-size: .72rem;
        padding: 9px 4px;
    }
}

/* Padding de carte réduit en mobile (rappel, garde-le si déjà posé) */
@media (max-width: 767px) {
    .roi-card { padding: 20px; }
}
@media (max-width: 420px) {
    .roi-card { padding: 14px; }
}

/* ── TABLE COMPARATIVE : tient sur mobile ── */
@media (max-width: 600px) {
    .compare-tbl th,
    .compare-tbl td {
        padding: 10px 8px;
        font-size: .76rem;
    }
    .compare-tbl th { font-size: .6rem; }
}

/* ── ROI CHART : anti-débordement mobile ── */
#roi-chart {
    overflow: hidden;        /* sécurité : rien ne sort du cadre */
}
.chart-bar-wrap {
    min-width: 0;            /* autorise les barres à rétrécir */
}
@media (max-width: 600px) {
    #roi-chart { gap: 3px; }       /* moins d'espace entre barres */
    .chart-val { font-size: .5rem; }
    .chart-yr  { font-size: .52rem; }
}
@media (max-width: 420px) {
    .chart-val { display: none; }  /* les montants au-dessus deviennent illisibles → on les masque */
}

/* ── TARIFICATION : badges sous le mockup en mobile ── */
.tarif-badges-mobile { display: none !important; }   /* caché par défaut (desktop) */

@media (max-width: 767px) {
    .tarif-badges-desktop { display: none !important; }    /* on cache ceux du haut */
    .tarif-badges-mobile  { display: flex !important; margin-top: 24px; }  /* on montre ceux du bas */
}

/* ── Supprime le trait blanc en haut du nav (fond de page sombre) ── */
html, body {
    background-color: #0a0a0f;
}

/* ── BLOC PRIX KIOSQUE MATÉRIEL (sous les formules) ── */
.kiosk-bundle {
    margin-top: 2.5rem;
    padding: 32px 28px 24px;
}
.kiosk-bundle-head { text-align: center; margin-bottom: 26px; }
.kiosk-bundle-head .kb-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: .68rem; letter-spacing: .15em; text-transform: uppercase;
    color: var(--purple); display: block; margin-bottom: 8px;
}
.kiosk-bundle-head h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.9rem; letter-spacing: .02em; color: #111827; line-height: 1;
}
.kiosk-bundle-head p { font-size: .9rem; color: #6b7280; margin-top: 8px; }

.kb-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 28px;
}
.kb-item { display: flex; align-items: flex-start; gap: 12px; }
.kb-ico {
    flex-shrink: 0;
    width: 38px; height: 38px;
    background: #f0e9ff;
    display: flex; align-items: center; justify-content: center;
    color: var(--purple); font-size: .95rem;
}
.kb-item-t { font-size: .9rem; font-weight: 600; color: #1f2937; margin-bottom: 3px; }
.kb-item-d { font-size: .8rem; color: #6b7280; line-height: 1.5; }

.kiosk-bundle-foot {
    margin-top: 28px; padding-top: 24px;
    border-top: 1px solid #ece5ff;
    display: flex; align-items: flex-start;
    justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.kb-price-col { flex: 1 1 320px; min-width: 0; }
.kb-price {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem; letter-spacing: .03em; color: #4b5563;
}
.kb-price span { font-size: 2rem; color: #111827; margin-left: 4px; }
.kb-price-sub { font-size: .78rem; color: #9ca3af; margin-top: 4px; }
.kb-roi-note {
    margin-top: 12px; font-size: .78rem; color: #7c3aed;
    background: #f3eeff; border: 1px solid #e9d5ff;
    padding: 9px 12px; line-height: 1.5;
}
.kb-roi-note i { margin-right: 5px; }

.kb-cta {
    flex-shrink: 0;
    display: inline-block; white-space: nowrap;
    background: var(--purple); color: #fff;
    font-weight: 600; font-size: .9rem;
    padding: 14px 24px; transition: background-color .2s;
    align-self: center;
}
.kb-cta:hover { background: #6d28d9; }

/* ── Responsive ── */
@media (max-width: 767px) {
    .kb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
    .kiosk-bundle { padding: 26px 18px 20px; }
    .kiosk-bundle-foot { flex-direction: column; align-items: stretch; }
    .kb-cta { text-align: center; }
}
@media (max-width: 460px) {
    .kb-grid { grid-template-columns: 1fr; }
}

/* ── BLOC CONDITIONNEL : devis kiosque (formulaire contact) ── */
.devis-details-box {
    background: #faf8ff;
    border: 1px solid #e9d5ff;
    padding: 16px;
}