/* ==========================================================================
   MAIN CSS, REUTILISABLE + (ACCUEIL)
   ========================================================================== */

:root {
    --couleur-fond-principal: #09090d;
    --couleur-fond-carte: #12121a;
    --couleur-fond-survol: #181826;
    --violet-neon: #a855f7;
    --violet-lumineux: rgba(168, 85, 247, 0.35);
    --cyan-neon: #06b6d4;
    --cyan-lumineux: rgba(6, 182, 212, 0.35);
    --texte-principal: #e2e8f0;
    --texte-sourd: #64748b;
    --couleur-bordure: #27273a;
    --police-titres: 'Syne', sans-serif;
    --police-code: 'Share Tech Mono', monospace;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--couleur-fond-principal);
    color: var(--texte-principal);
    font-family: var(--police-code);
    line-height: 1.5;
    overflow-x: hidden;
    position: relative;
}

/* Texture de bruit Web1.0 */
#superposition-bruit {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 4px 4px;
    pointer-events: none;
    z-index: 99;
}

/* Étoiles scintillantes en CSS pur */
#etoiles-cosmiques {
    position: fixed;
    top: 0; left: 0; width: 2px; height: 2px;
    background: transparent;
    pointer-events: none;
    z-index: 1;
    box-shadow: 
        12vw 15vh var(--violet-neon), 
        35vw 45vh var(--cyan-neon), 
        75vw 12vh #ffffff, 
        88vw 78vh var(--violet-neon),
        42vw 85vh var(--cyan-neon),
        80vw 32vh #ffffff,
        22vw 68vh var(--violet-neon),
        60vw 92vh var(--cyan-neon);
    animation: scintillement-cosmique 4s infinite ease-in-out;
}

@keyframes scintillement-cosmique {
    0%, 100% { opacity: 0.2; transform: scale(0.8); }
    50% { opacity: 0.8; transform: scale(1.2); }
}

/* ENTÊTE (#entete) */
#entete {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2.5rem;
    border-bottom: 1px solid var(--couleur-bordure);
    background: rgba(9, 9, 13, 0.95);
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(5px);
}

#logo-boutique #titre-boutique {
    font-family: var(--police-titres);
    font-weight: bolder;
    font-size: 2rem;
    color: #ffffff;
    text-shadow: 0 0 12px var(--violet-lumineux);
}

#symbole-boutique {
    font-weight: bolder;
    font-size: 0.4em;
    color: var(--violet-neon);
}

#coordonnees-astrales {
    font-size: 0.75rem;
    color: var(--texte-sourd);
    letter-spacing: 1px;
}

#navigation-principale .lien-navigation {
    color: var(--texte-principal);
    text-decoration: none;
    margin-left: 2rem;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.2s, text-shadow 0.2s;
}

#navigation-principale .lien-navigation:hover,
#navigation-principale .lien-navigation.active {
    color: var(--cyan-neon);
    text-shadow: 0 0 8px var(--cyan-lumineux);
}

/* CONTENU PRINCIPAL (#contenu-principal) */
#contenu-principal {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem;
    position: relative;
    z-index: 2;
}

/* SECTION VEDETTE (#section-vedette) */
#section-vedette { margin: 1rem 12% 3rem 12%; }

#carte-son-vedette {
    background: radial-gradient(circle at top left, #1a162b 0%, var(--couleur-fond-carte) 70%);
    border: 1px solid var(--couleur-bordure);
    border-left: 5px solid var(--violet-neon);
    padding: 2.5rem;
    position: relative;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
}

.badge-vedette {
    font-size: 0.75rem;
    color: var(--cyan-neon);
    letter-spacing: 2px;
    margin-bottom: 0.8rem;
}

.vedette-categorie {
    font-size: 0.8rem;
    color: var(--texte-sourd);
    display: block;
    margin-bottom: 0.5rem;
}

.vedette-titre {
    font-family: var(--police-titres);
    font-size: 2rem;
    letter-spacing: 2px;
    color: #ffffff;
    margin-bottom: 1rem;
}

.vedette-description {
    color: var(--texte-principal);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    max-width: 800px;
}

.vedette-metadonnees {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.metadonnee {
    background: rgba(39, 39, 58, 0.5);
    border: 1px solid var(--couleur-bordure);
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
    color: var(--cyan-neon);
}

.vedette-action {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.vedette-prix {
    font-size: 1.8rem;
    font-weight: bold;
    color: #ffffff;
    font-family: var(--police-titres);
}

#banniere-principale {
    position: relative;
    padding-top: 2.2rem;
    border-bottom: 1px solid var(--couleur-bordure);
    /* Fond sombre cosmique (non pur noir) avec dégradé subtil */
    background: radial-gradient(circle at center, #181826 0%, #09090d 100%);
    overflow: hidden;
}

/* Texture de carte du ciel en arrière-plan */
.star-chart-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: radial-gradient(var(--couleur-bordure) 1px, transparent 0);
    background-size: 18px 18px;
    opacity: 0.35;
    pointer-events: none;
}

.banniere-contenu {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-bottom: 1.8rem;
}

.banniere-contenu h2 {
    font-family: var(--police-titres);
    font-size: 1.8rem; /* Taille plus fine et élégante */
    letter-spacing: 4px;
    margin-bottom: 0.3rem;
    color: #ffffff;
    text-shadow: 0 0 10px var(--violet-lumineux);
}

.banniere-contenu p {
    color: var(--cyan-neon);
    font-size: 0.8rem;
    letter-spacing: 1.5px;
}

/* BANDEAU DÉFILANT (Style TikTok Shop / Promo Banner) */
#bandeau-defilant {
    position: relative;
    z-index: 3;
    width: 100%;
    background: radial-gradient(circle at center, #11111b 0%, #08080c 100%);
    border-top: 1px dashed var(--couleur-bordure);
    overflow: hidden;
    white-space: nowrap;
}
:root {
    --bg-main: #09090d;
    --bg-card: #12121a;
    --purple-neon: #a855f7;
    --purple-glow: rgba(168, 85, 247, 0.4);
    --cyan-neon: #06b6d4;
    --cyan-glow: rgba(6, 182, 212, 0.4);
    --text-main: #e2e8f0;
    --text-muted: #64748b;
    --border-color: #27273a;
    --font-heading: 'Syne', sans-serif;
    --font-code: 'Share Tech Mono', monospace;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: var(--font-code);
    line-height: 1.5;
    overflow-x: hidden;
}

/* Texture de grain Underground/Web1.0 */
.noise-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: radial-gradient(circle, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 4px 4px;
    pointer-events: none;
    z-index: 99;
}

/* Conteneur d'étoiles fixe */
.stars-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1;
}

/* Style de base des étoiles */
.star {
    position: absolute;
    color: var(--cyan-neon);
    font-size: 0.8rem;
    opacity: 0.2;
    animation: twinkle 4s infinite ease-in-out;
}

/* Variations d'animation pour un scintillement décalé */
.star.s1 {
    animation-duration: 3s;
    animation-delay: 0s;
    color: var(--purple-neon);
}

.star.s2 {
    animation-duration: 5s;
    animation-delay: 1.5s;
}

.star.s3 {
    animation-duration: 4s;
    animation-delay: 2.8s;
}

/* Keyframes pour le Fade In / Fade Out */
@keyframes twinkle {
    0%, 100% {
        opacity: 0.1;
        transform: scale(0.8);
        text-shadow: none;
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
        text-shadow: 0 0 8px var(--cyan-glow);
    }
}

/* Header */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--border-color);
    background: rgba(9, 9, 13, 0.9);
    position: sticky;
    top: 0;
    z-index: 10;
}

.logo h1 {
    font-family: var(--font-heading);
    font-size: 2rem;
    letter-spacing: 2px;
    color: #fff;
    text-shadow: 0 0 10px var(--purple-glow);
}

.logo h1 span { color: var(--purple-neon); }

.coords {
    font-size: 0.75rem;
    color: var(--text-muted);
}

nav a {
    color: var(--text-main);
    text-decoration: none;
    margin-left: 1.5rem;
    font-size: 0.9rem;
    transition: color 0.2s;
}

nav a:hover, .cart-btn {
    color: var(--cyan-neon);
}

/* Hero Section / Carte Ciel Retro */
.hero {
    position: relative;
    padding: 4rem 2rem;
    border-bottom: 1px solid var(--border-color);
    background: radial-gradient(circle at center, #181824 0%, var(--bg-main) 70%);
}

.star-chart-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: radial-gradient(var(--border-color) 1px, transparent 0);
    background-size: 20px 20px;
    opacity: 0.3;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.hero-content h2 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    letter-spacing: 4px;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.hero-content p {
    color: var(--purple-neon);
    font-size: 0.85rem;
    letter-spacing: 1px;
}

/* Catalogue & Cartes */
main { padding: 2rem; max-width: 1000px; margin: 0 auto; }

.section-title {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    letter-spacing: 2px;
}

.section-title span { color: var(--cyan-neon); }

.track-list { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 3rem; }

.track-card {
    display: grid;
    grid-template-columns: 1.5fr 2fr 1fr;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--purple-neon);
    padding: 1rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

.track-card.cyan-accent {
    border-left-color: var(--cyan-neon);
}

.track-card:hover {
    transform: translateX(4px);
    box-shadow: 0 0 15px var(--purple-glow);
}

.catalog-id { font-size: 0.7rem; color: var(--text-muted); display: block; }
.track-info h4 { font-family: var(--font-heading); font-size: 1.1rem; }
.tags { font-size: 0.75rem; color: var(--text-muted); }

/* Lecteur audio */
.audio-player { display: flex; align-items: center; gap: 1rem; }

.play-btn {
    background: transparent;
    border: 1px solid var(--text-main);
    color: var(--text-main);
    padding: 0.4rem 0.8rem;
    cursor: pointer;
    font-family: var(--font-code);
}

.play-btn:hover {
    background: var(--text-main);
    color: var(--bg-main);
}

.waveform-placeholder {
    color: var(--border-color);
    letter-spacing: 2px;
    font-weight: bold;
}

/* Boutons d'achat */
.track-action { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; }
.price { font-weight: bold; color: #fff; }

.buy-btn {
    background: var(--purple-neon);
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    font-family: var(--font-code);
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 0 10px var(--purple-glow);
}

.buy-btn:hover { background: #9333ea; }

/* Grid Kits */
.kit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }

.kit-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    position: relative;
}

.kit-badge {
    position: absolute;
    top: 10px; right: 10px;
    font-size: 0.65rem;
    background: var(--border-color);
    padding: 2px 6px;
}

.kit-card h4 { font-family: var(--font-heading); margin-bottom: 0.5rem; }
.kit-card p { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 1.5rem; }
.kit-action { display: flex; justify-content: space-between; align-items: center; }

footer {
    text-align: center;
    padding: 2rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.75rem;
    color: var(--text-muted);
}
.defilement-contenu {
    display: inline-block;
    padding-left: 100%;
    animation: defilement-texte 25s linear infinite;
    font-size: 0.78rem;
    letter-spacing: 1px;
    color: var(--texte-principal); /* Texte clair */
}

.defilement-contenu span strong {
    color: var(--violet-neon);
}

.separateur-etoile {
    color: var(--cyan-neon);
    margin: 0 1.5rem;
}

/* Animation du texte défilant de droite à gauche */
@keyframes defilement-texte {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-100%, 0, 0);
    }
}

/* SECTIONS VITRINE (.section-vitrine) */
.section-vitrine { margin-top: 2rem; margin-bottom: 4rem; }

.titre-section {
    font-family: var(--police-titres);
    font-size: 1.4rem;
    letter-spacing: 3px;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--couleur-bordure);
    padding-bottom: 0.5rem;
}

.prefixe-titre { color: var(--cyan-neon); margin-right: 0.5rem; }

.liste-cartes-sons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.8rem;
}

/* CARTE SON INDIVIDUELLE (.son) */
.son {
    background: var(--couleur-fond-carte);
    border: 1px solid var(--couleur-bordure);
    border-left: 4px solid var(--violet-neon);
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.son.cyan-variante { border-left-color: var(--cyan-neon); }

.son:hover {
    transform: translateY(-4px);
    background-color: var(--couleur-fond-survol);
    box-shadow: 0 0 20px var(--violet-lumineux);
}

.son.cyan-variante:hover { box-shadow: 0 0 20px var(--cyan-lumineux); }

.son-visuel {
    height: 120px;
    background: #0d0d14;
    position: relative;
    border-bottom: 1px solid var(--couleur-bordure);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.aperçu-spectre {
    width: 80%;
    height: 40px;
    opacity: 0.4;
    background-size: 12px 100%;
}

.spectre-purple { background-image: linear-gradient(90deg, var(--violet-neon) 2px, transparent 2px); }
.spectre-cyan { background-image: linear-gradient(90deg, var(--cyan-neon) 2px, transparent 2px); }

.son-id {
    position: absolute;
    top: 10px; right: 12px;
    font-size: 0.7rem;
    color: var(--texte-sourd);
    background: rgba(9, 9, 13, 0.8);
    padding: 2px 6px;
    border: 1px solid var(--couleur-bordure);
}

.son-contenu {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
}

.son-titre {
    font-family: var(--police-titres);
    font-size: 1.25rem;
    color: #ffffff;
    margin-bottom: 0.3rem;
}

.son-genre {
    font-size: 0.8rem;
    color: var(--texte-sourd);
    margin-bottom: 1.5rem;
}

.son-pied {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.son-prix {
    font-size: 1.2rem;
    font-weight: bold;
    color: #ffffff;
}

.bouton-action {
    display: inline-block;
    background: var(--violet-neon);
    color: #ffffff;
    text-decoration: none;
    padding: 0.6rem 1.2rem;
    font-family: var(--police-code);
    font-weight: bold;
    font-size: 0.85rem;
    letter-spacing: 1px;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 10px var(--violet-lumineux);
    transition: background-color 0.2s, box-shadow 0.2s;
}

.bouton-action:hover {
    background-color: #9333ea;
    box-shadow: 0 0 15px var(--violet-neon);
}

.cyan-variante .bouton-action {
    background: var(--cyan-neon);
    color: #09090d;
    box-shadow: 0 0 10px var(--cyan-lumineux);
}

.cyan-variante .bouton-action:hover {
    background-color: #0891b2;
    color: #ffffff;
    box-shadow: 0 0 15px var(--cyan-neon);
}

.bouton-vedette {
    padding: 0.8rem 1.8rem;
    font-size: 0.95rem;
}

/* PIED DE PAGE (#pied-de-page) */
#pied-de-page {
    border-top: 1px solid var(--couleur-bordure);
    background: #060609;
    padding: 3rem 2.5rem;
    text-align: center;
    position: relative;
    z-index: 10;
}

#contact-boutique {
    max-width: 600px;
    margin: 0 auto 2rem auto;
}

#titre-contact {
    font-family: var(--police-titres);
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: var(--cyan-neon);
    letter-spacing: 2px;
}

#contact-boutique p {
    font-size: 0.85rem;
    color: var(--texte-sourd);
    margin-bottom: 0.5rem;
}

#email-contact {
    color: var(--violet-neon);
    border-bottom: 1px dashed var(--violet-neon);
    text-decoration: none;
}

#email-contact:hover {
    color: #ffffff;
    text-shadow: 0 0 8px var(--violet-neon);
}

#copyright-boutique {
    font-size: 0.75rem;
    color: var(--texte-sourd);
    letter-spacing: 1px;
    margin-top: 1.5rem;
    border-top: 1px solid rgba(39, 39, 58, 0.5);
    padding-top: 1.5rem;
}

/* ==========================================================================
   PANNEAU D'ADMINISTRATION : LISTE & FORMULAIRE
   ========================================================================== */

#entete-admin {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.description-admin {
    color: var(--texte-sourd);
    font-size: 0.85rem;
}

/* LISTE DE L'INVENTAIRE (Disposition en Lignes) */
#liste-inventaire {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.ligne-item-inventaire {
    display: flex;
    align-items: center;
    background: var(--couleur-fond-carte);
    border: 1px solid var(--couleur-bordure);
    border-left: 4px solid var(--violet-neon);
    padding: 1rem 1.5rem;
    gap: 1.5rem;
    transition: background-color 0.2s, border-color 0.2s;
}

.ligne-item-inventaire.cyan-variante {
    border-left-color: var(--cyan-neon);
}

.ligne-item-inventaire:hover {
    background-color: var(--couleur-fond-survol);
}

.item-colonne-visuel { min-width: 100px; }

.item-colonne-details { flex-grow: 1; }

.item-titre {
    font-family: var(--police-titres);
    font-size: 1.1rem;
    color: #ffffff;
}

.item-metadonnees {
    font-size: 0.8rem;
    color: var(--texte-sourd);
    margin-top: 0.2rem;
}

.badge-type {
    background: rgba(168, 85, 247, 0.2);
    color: var(--violet-neon);
    padding: 2px 6px;
    font-size: 0.7rem;
    border: 1px solid var(--violet-neon);
    margin-right: 0.5rem;
}

.badge-kit {
    background: rgba(6, 182, 212, 0.2);
    color: var(--cyan-neon);
    border-color: var(--cyan-neon);
}

.item-colonne-prix {
    font-family: var(--police-titres);
    font-size: 1.2rem;
    color: #ffffff;
    min-width: 90px;
    text-align: right;
}

.item-colonne-actions {
    display: flex;
    gap: 0.5rem;
}

.bouton-action-icone {
    background: transparent;
    border: 1px solid var(--couleur-bordure);
    color: var(--texte-principal);
    padding: 0.4rem 0.8rem;
    font-family: var(--police-code);
    font-size: 0.8rem;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

.bouton-editer:hover {
    background: var(--cyan-neon);
    color: #000;
    border-color: var(--cyan-neon);
}

.bouton-supprimer:hover {
    background: #ef4444;
    color: #fff;
    border-color: #ef4444;
}

/* FORMULAIRES & FIELDSETS */
.bloc-formulaire {
    border: 1px solid var(--couleur-bordure);
    background: rgba(18, 18, 26, 0.6);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.legende-formulaire {
    font-family: var(--police-titres);
    color: var(--cyan-neon);
    font-size: 0.9rem;
    padding: 0 0.5rem;
    letter-spacing: 1px;
}

.grille-champs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.2rem;
    margin-top: 0.5rem;
}

.plein-largeur { grid-column: 1 / -1; }

.label-champ {
    display: block;
    font-size: 0.8rem;
    color: var(--texte-sourd);
    margin-bottom: 0.4rem;
}

.entree-texte, .entree-select, .entree-zone-texte, .entree-fichier {
    width: 100%;
    background: #09090d;
    border: 1px solid var(--couleur-bordure);
    color: var(--texte-principal);
    padding: 0.6rem 0.8rem;
    font-family: var(--police-code);
    font-size: 0.85rem;
    outline: none;
}

.entree-texte:focus, .entree-select:focus, .entree-zone-texte:focus {
    border-color: var(--violet-neon);
    box-shadow: 0 0 8px var(--violet-lumineux);
}

#barre-actions-formulaire {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.5rem;
}

.bouton-annuler {
    background: transparent;
    border: 1px solid var(--couleur-bordure);
    color: var(--texte-sourd);
    box-shadow: none;
}

.bouton-annuler:hover {
    background: var(--couleur-bordure);
    color: #ffffff;
}

/* ==========================================================================
   TUNNEL DE COMMANDE & FACTURATION (CHECKOUT)
   ========================================================================== */

#section-commande {
    margin-top: 1rem;
    margin-bottom: 4rem;
}

/* BARRE D'ÉTAPES (STEPPER) */
#barre-etapes-commande {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3rem;
    background: var(--couleur-fond-carte);
    border: 1px solid var(--couleur-bordure);
    padding: 1rem 2rem;
}

.etape-commande {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    opacity: 0.4;
    transition: opacity 0.3s;
}

.etape-commande.active {
    opacity: 1;
}

.numero-etape {
    background: var(--couleur-bordure);
    color: #ffffff;
    font-family: var(--police-titres);
    padding: 0.2rem 0.6rem;
    font-size: 0.85rem;
    border: 1px solid var(--texte-sourd);
}

.etape-commande.active .numero-etape {
    background: var(--violet-neon);
    border-color: var(--violet-neon);
    box-shadow: 0 0 10px var(--violet-lumineux);
}

.texte-etape {
    font-size: 0.85rem;
    letter-spacing: 1px;
}

.ligne-connecteur {
    flex-grow: 1;
    height: 1px;
    background: var(--couleur-bordure);
    margin: 0 1.5rem;
}

/* MASQUAGE DES ÉTAPES NON ACTIVES */
.masque {
    display: none !important;
}

/* LISTE PANIER (Étapes 1) */
.ligne-article-panier {
    display: flex;
    align-items: center;
    background: var(--couleur-fond-carte);
    border: 1px solid var(--couleur-bordure);
    border-left: 4px solid var(--violet-neon);
    padding: 1.2rem 1.5rem;
    margin-bottom: 1rem;
    gap: 1.5rem;
}

.ligne-article-panier.cyan-variante {
    border-left-color: var(--cyan-neon);
}

.visuel-article-panier { min-width: 100px; }

.info-article-panier { flex-grow: 1; }

.titre-article-panier {
    font-family: var(--police-titres);
    font-size: 1.1rem;
    color: #ffffff;
}

.details-article-panier {
    font-size: 0.8rem;
    color: var(--texte-sourd);
    margin-top: 0.2rem;
}

.quantite-article-panier {
    font-size: 0.9rem;
    color: var(--cyan-neon);
}

.prix-article-panier {
    font-family: var(--police-titres);
    font-size: 1.2rem;
    color: #ffffff;
}

.recapitulatif-sous-total {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.5rem;
    margin: 2rem 0;
    padding-top: 1rem;
    border-top: 1px solid var(--couleur-bordure);
    font-size: 1.1rem;
}

.montant-sous-total {
    font-family: var(--police-titres);
    font-size: 1.6rem;
    color: var(--cyan-neon);
}

.actions-etape {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
}

.bouton-suivant {
    background: var(--cyan-neon);
    color: #09090d;
    box-shadow: 0 0 10px var(--cyan-lumineux);
}

.bouton-suivant:hover {
    background: #0891b2;
    color: #ffffff;
    box-shadow: 0 0 15px var(--cyan-neon);
}

/* FACTURE & REÇU (Étape 3) */
#carte-facture {
    background: var(--couleur-fond-carte);
    border: 1px solid var(--couleur-bordure);
    padding: 2.5rem;
}

.entete-facture {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 1.5rem;
    border-bottom: 1px dashed var(--couleur-bordure);
    margin-bottom: 2rem;
}

.titre-facture {
    font-family: var(--police-titres);
    font-size: 1.2rem;
    color: #ffffff;
}

.date-facture {
    font-size: 0.8rem;
    color: var(--texte-sourd);
}

.statut-facture {
    background: rgba(168, 85, 247, 0.2);
    border: 1px solid var(--violet-neon);
    color: var(--violet-neon);
    padding: 0.4rem 0.8rem;
    font-size: 0.75rem;
    letter-spacing: 1px;
}

.tableau-facture {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
}

.tableau-facture th, .tableau-facture td {
    padding: 0.8rem 0;
    border-bottom: 1px solid rgba(39, 39, 58, 0.5);
    font-size: 0.9rem;
}

.tableau-facture th {
    text-align: left;
    color: var(--texte-sourd);
    font-weight: normal;
}

.aligne-droite { text-align: right; }

.calcul-facture {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    margin-bottom: 2.5rem;
}

.ligne-calcul {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--texte-sourd);
}

.ligne-calcul.total-final {
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--couleur-bordure);
    font-size: 1.1rem;
    color: #ffffff;
}

.prix-ttc {
    font-family: var(--police-titres);
    font-size: 1.5rem;
    color: var(--cyan-neon);
}

/* RESERVATION BOUTON PAYPAL (VIDE) */
#zone-paypal-vide {
    margin: 2rem 0;
}

.boite-reserve-paypal {
    border: 2px dashed var(--violet-neon);
    background: rgba(168, 85, 247, 0.05);
    padding: 2.5rem;
    text-align: center;
}

.icone-paypal-placeholder {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.5rem;
}

.boite-reserve-paypal h4 {
    font-family: var(--police-titres);
    color: #ffffff;
    letter-spacing: 2px;
    margin-bottom: 0.4rem;
}

.boite-reserve-paypal p {
    font-size: 0.8rem;
    color: var(--texte-sourd);
}