:root{
  --bg:#120d0a; --fg:#e8e6e3; --cyan:#f0eced; --magenta:#ce0808;
  --sepia:#fcfaf8; --panel:rgba(255,255,255,.06); --border:rgba(255,255,255,.10);
  /* Couleurs par artiste */
  --azeric:#9f60e6; --angels:#e53935; --alaskan:#4cc9f0;
  /* Glows (couleurs avec transparence) */
  --azeric-glow: rgba(159, 96, 230, .28);
  --angels-glow: rgba(229, 57, 53, .28);
  --alaskan-glow: rgba(76, 201, 240, .28);
  /* Bleu foncé pour les autres boutons du menu */
  --btn-blue:#1e3a8a; /* blue-800 approx */
  --btn-blue-glow: rgba(30, 64, 175, .28);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:'',serif;
  color:var(--fg);
  background-color: var(--bg);
  /* Voile foncé + image de fond Fond-lumière */
  background-image:
    linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25)),
    url('assets/images/Fond-lumière.png');
  background-position: center center, center center;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-attachment: fixed, fixed;
}
a{color:var(--cyan);text-decoration:none}

/* Header / Nav */
.header{position:sticky;top:0;z-index:10;background:rgba(8,12,22,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 16px;
  gap: 18px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 16px;
  font: 700 18px 'Orbitron',sans-serif;
}
.brand img {
  height: 100px;
  width: auto;
  margin-left: 20px;
}
.menu {
  display: flex;
  gap: 14px;
  align-items: center;
}
.menu a{font-weight:700}
.menu .cta{background:var(--cyan);color:#05101a;padding:8px 12px;border-radius:8px}

/* Hero */
.hero{position:relative;min-height:64vh;display:grid;place-items:center;text-align:center;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;background:url('images/usine-banniere.jpg') center/cover no-repeat;
  opacity:.35;mix-blend-mode:screen;filter:grayscale(30%);
}
.hero::after{
  content:"";position:absolute;inset:0;background:
    radial-gradient(1100px 400px at 70% 20%, rgba(0, 0, 0, 0.12), transparent 55%),
    radial-gradient(800px 400px at 20% 80%, rgba(255,97,210,.10), transparent 60%),
    linear-gradient(180deg, rgba(10,15,26,.95), rgba(10,15,26,.90));
}
.hero-inner{position:relative;z-index:1;max-width:920px;padding:40px 20px}
.hero h1{font:700 44px 'Orbitron',sans-serif;margin:0 0 10px;color:var(--cyan);letter-spacing:.06em}
.hero blockquote{font-style:italic;font-size:22px;margin:0 0 8px}
.hero p{opacity:.85}
.btn{display:inline-block;border:1px solid var(--cyan);padding:10px 16px;border-radius:10px;margin:10px 8px;display:inline-flex;align-items:center;gap:8px;transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.btn .icon{display:inline-block;width:1em;height:1em;line-height:1;}
.btn .icon svg{width:100%;height:100%;display:block}
.btn.primary{background:var(--cyan);color:#0b0f19;font-weight:800;border-color:transparent}
/* Effet relief */
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

/* Header: autres boutons avec contour bleu foncé (sauf artistes) */
.header .menu .btn:not(.azeric):not(.angels):not(.alaskan){
  border-color: var(--btn-blue);
}
.header .menu .btn:not(.azeric):not(.angels):not(.alaskan):hover{
  background: var(--btn-blue);
  color:#fff;
  box-shadow:0 0 14px var(--btn-blue-glow),0 6px 18px rgba(0,0,0,.25)
}
/* Variantes artistes pour les boutons du header */
.btn.azeric{border-color:var(--azeric);color:var(--azeric)}
.btn.azeric:hover{background:var(--azeric);color:#0b0f19;box-shadow:0 0 14px var(--azeric-glow),0 6px 18px rgba(0,0,0,.25)}
.btn.angels{border-color:var(--angels);color:var(--angels)}
.btn.angels:hover{background:var(--angels);color:#0b0f19;box-shadow:0 0 14px var(--angels-glow),0 6px 18px rgba(0,0,0,.25)}
.btn.alaskan{border-color:var(--alaskan);color:var(--alaskan)}
.btn.alaskan:hover{background:var(--alaskan);color:#0b0f19;box-shadow:0 0 14px var(--alaskan-glow),0 6px 18px rgba(0,0,0,.25)}

/* Cards */
.grid{max-width:1100px;margin:24px auto;padding:0 20px;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--panel);border:1px solid var(--border);padding:18px;border-radius:12px;transition:transform .2s ease, box-shadow .2s ease}
.card h3{color:var(--magenta);font:700 22px 'Orbitron',sans-serif;margin:0 0 6px}
.card p{margin:0 0 10px;opacity:.9;line-height:1.45}
.card a{display:inline-block;padding:8px 12px;border:1px solid var(--cyan);border-radius:10px;color:var(--cyan);font-weight:700;margin-top:6px}
.card a:hover{background:var(--cyan);color:#0b0f19}
.card:hover{transform:translateY(-4px);box-shadow:0 6px 22px rgba(0,0,0,.25)}

/* Espacement lorsque les cartes sont sous les boutons de la hero */
.hero .grid{margin-top:16px}

/* Accents par artiste */
.card.azeric{border-color:var(--azeric);border-width:2px}
.card.azeric h3{color:var(--azeric)}
.card.azeric a{border-color:var(--azeric);color:var(--azeric)}
.card.azeric a:hover{background:var(--azeric);color:#0b0f19}

.card.angels{border-color:var(--angels);border-width:2px}
.card.angels h3{color:var(--angels)}
.card.angels a{border-color:var(--angels);color:var(--angels)}
.card.angels a:hover{background:var(--angels);color:#0b0f19}

.card.alaskan{border-color:var(--alaskan);border-width:2px}
.card.alaskan h3{color:var(--alaskan)}
.card.alaskan a{border-color:var(--alaskan);color:var(--alaskan)}
.card.alaskan a:hover{background:var(--alaskan);color:#0b0f19}

/* Fin glow par artiste */
.card.azeric{box-shadow:0 0 10px var(--azeric-glow)}
.card.angels{box-shadow:0 0 10px var(--angels-glow)}
.card.alaskan{box-shadow:0 0 10px var(--alaskan-glow)}

/* Conserver le glow au survol en plus de l’ombre générique */
.card.azeric:hover{box-shadow:0 0 14px var(--azeric-glow), 0 6px 22px rgba(0,0,0,.25)}
.card.angels:hover{box-shadow:0 0 14px var(--angels-glow), 0 6px 22px rgba(0,0,0,.25)}
.card.alaskan:hover{box-shadow:0 0 14px var(--alaskan-glow), 0 6px 22px rgba(0,0,0,.25)}

/* Style global: fond noir pour toutes les cartes; laisser les couleurs par artiste s'exprimer */
.card{background:#000;color:#fff;border-color:rgba(255,255,255,.18)}
/* Titre et liens restent colorés par leurs variantes (azeric/angels/alaskan) */
/* Survol générique des liens, si non redéfini par variante */
.card a:hover{background:#fff;color:#0b0f19}
/* Alaskan: conserver les accents (bordure/cta) bleus tout en gardant le fond noir global */
.card.alaskan{border-color:var(--alaskan)}
.card.alaskan a{border-color:var(--alaskan);color:var(--alaskan)}
.card.alaskan a:hover{background:var(--alaskan);color:#0b0f19}

/* Option contraste si fond clair autour des cartes */
.cards-contrast .card{border-color:rgba(0,0,0,.28);border-width:2px}
.cards-contrast .card:hover{border-color:rgba(0,0,0,.40)}
/* Conserver la couleur par artiste même en mode contraste */
.cards-contrast .card.azeric{border-color:var(--azeric)}
.cards-contrast .card.angels{border-color:var(--angels)}
.cards-contrast .card.alaskan{border-color:var(--alaskan)}

/* Banners */
.banner{display:flex;justify-content:center;align-items:center;background:transparent;border-bottom:1px solid var(--border);padding:0 8px;margin:0}
.banner img{width:100%;max-width:1400px;max-height:70vh;height:auto;display:block;margin:0 auto}

/* Responsive: augmenter le padding et la hauteur de bannière sur écrans plus larges */
@media (min-width: 768px){
  .banner{padding:0 16px}
  .banner img{max-height:80vh}
}
@media (min-width: 1200px){
  .banner{padding:0 24px}
}
.banner .inner{max-width:1100px;margin:0 auto;padding:28px 20px}
.banner .title{background:rgba(10,15,26,.55);display:inline-block;padding:8px 12px;border-radius:8px}

/* Sections */
.section{max-width:1100px;margin:26px auto;padding:0 20px}

/* Shop */
.products{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.product{background:var(--panel);border:1px solid var(--border);padding:14px;border-radius:12px}
.product h4{margin:.2em 0}
.price{color:var(--sepia);font-weight:700}
.buy{background:var(--cyan);color:#0b0f19;border:0;padding:10px 12px;border-radius:10px;font-weight:800;cursor:pointer}

/* Footer */
.footer{border-top:1px solid var(--border);margin-top:36px;background:rgba(8,12,22,.85)}
.footer-inner{max-width:1100px;margin:0 auto;padding:20px;display:grid;gap:16px;grid-template-columns:1.2fr 1fr 1fr}
.footer small{opacity:.6}
@media (max-width:800px){.footer-inner{grid-template-columns:1fr} .hero h1{font-size:34px}}
/* Hero d’accueil */
.hero {
  position: relative;
  min-height: 64vh; /* Diminue la hauteur pour remonter le bloc */
  background: var(--bg);
  margin-top: -32px; /* Ajoute une marge négative pour remonter sous la bannière */
}

/* Bannières de pages */

/* On n'impose plus de background-image aux bannières de pages;
  on utilise des <img> dans le HTML pour garantir l'affichage complet. */

/* Option : limiter la hauteur très grands écrans */
.hero, .banner { max-height: 1080px; }

/* Option mobile : remonter un peu le cadrage si besoin */
@media (max-width: 768px) {
  .hero, .banner { background-position: center 35%; }
}

.btn.red {
  background: #e53935;
  color: #fff;
  border-color: #e53935;
  font-weight: 700;
}
.btn.red:hover {
  background: #fff;
  color: #e53935;
  border-color: #e53935;
  box-shadow: 0 0 10px #e53935;
}