:root{
  --bg:#05060b;
  --card:rgba(10,12,20,.95);
  --text:#f5f5f5;
  --a1:#32ffa6;
  --a2:#ff5af1;
  --a3:#46c5ff;
  --border:rgba(255,255,255,.08);
  --radius:18px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  background:radial-gradient(circle at top,#101326 0,#05060b 60%);
  color:var(--text);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.neon-gradient{
  position:fixed; inset:-50%;
  background:
    radial-gradient(circle at 10% 0, rgba(50,255,166,.12), transparent 55%),
    radial-gradient(circle at 90% 0, rgba(255,90,241,.12), transparent 55%),
    radial-gradient(circle at 50% 60%, rgba(70,197,255,.12), transparent 55%);
  pointer-events:none; z-index:-1;
}

.site-header{
  display:flex; gap:1rem;
  align-items:center; justify-content:space-between;
  padding:1rem 1.5rem;
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(10px);
  position:sticky; top:0; z-index:10;
  background:linear-gradient(90deg, rgba(5,6,11,.9), rgba(5,6,11,.7));
}

.logo{display:flex; align-items:center; gap:.5rem}
.leaf-icon{font-size:1.4rem; filter: drop-shadow(0 0 6px rgba(50,255,166,.7))}
.logo-text{
  font-weight:700; letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.9rem; color:var(--a1);
}

.main-nav{display:flex; gap:.6rem; align-items:center}
.main-nav a{
  color:#d8d8d8; text-decoration:none;
  padding:.45rem .85rem;
  border-radius:999px;
  transition:.2s;
}
.main-nav a:hover{background:rgba(255,255,255,.06); transform:translateY(-1px)}
.lang-switch select{
  background:transparent;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--text);
  padding:.3rem .7rem;
}

.content{
  width:100%;
  max-width:900px;
  margin:1.5rem auto 2rem;
  padding:0 1rem;
  flex:1;
}

.hero{text-align:center; margin-bottom:1.5rem}
.hero-title{
  font-size:clamp(2.2rem,4vw,3.4rem);
  background:linear-gradient(120deg,var(--a1),var(--a2),var(--a3));
  -webkit-background-clip:text;
  color:transparent;
}
.hero-subtitle{color:#c7c7c7; max-width:650px; margin:0 auto}

.card{
  background:var(--card);
  border-radius:var(--radius);
  border:1px solid var(--border);
  padding:1.4rem 1.5rem;
  box-shadow:
    0 0 0 1px rgba(50,255,166,.08),
    0 18px 45px rgba(0,0,0,.85);
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute; inset:-50%;
  background:conic-gradient(from 120deg,
    transparent 0 45%,
    rgba(50,255,166,.10),
    rgba(255,90,241,.10),
    rgba(70,197,255,.10),
    transparent 70% 100%);
  filter: blur(20px);
  opacity:.8;
  z-index:0;
}
.card > *{position:relative; z-index:1}

.info-grid{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.info-block{padding:1rem; border:1px solid var(--border); border-radius:16px; background:rgba(255,255,255,.03)}

.form-grid{display:grid; gap:1rem; margin-top:1rem}
label{display:grid; gap:.35rem; color:#dcdcdc}
input,
textarea,
select {
  padding: 0.7rem 0.85rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background-color: rgba(5, 6, 11, 0.85);
  color: var(--text);
  outline: none;
  font-size: 0.95rem;
}

/* focus néon */
input:focus,
textarea:focus,
select:focus {
  border-color: rgba(50,255,166,0.6);
  box-shadow:
    0 0 0 1px rgba(50,255,166,0.4),
    0 0 14px rgba(50,255,166,0.25);
}

/* options de la liste déroulante */
select option {
  background-color: #05060b;
  color: #f5f5f5;
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image:
    linear-gradient(45deg, transparent 50%, var(--a1) 50%),
    linear-gradient(135deg, var(--a1) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px);
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}


select:focus option:checked {
  background-color: rgba(50,255,166,0.25);
  color: #ffffff;
}


textarea{resize:vertical}

.form-actions{display:flex; gap:.8rem; margin-top:.5rem; align-items:center}

.btn-primary, .btn-secondary{
  display:inline-block;
  padding:.65rem 1rem;
  border-radius:999px;
  text-decoration:none;
  border:1px solid var(--border);
}
.btn-primary{
  background:linear-gradient(90deg, rgba(50,255,166,.15), rgba(255,90,241,.15));
  box-shadow: 0 0 18px rgba(255,90,241,.12);
  color:var(--text);
}
.btn-secondary{background:rgba(255,255,255,.05); color:var(--text)}
.btn-primary:hover, .btn-secondary:hover{transform:translateY(-1px)}

.confirmation{
  padding:1rem;
  border-radius:14px;
  border:1px solid rgba(50,255,166,.25);
  background:rgba(50,255,166,.06);
}

.site-footer{
  border-top:1px solid var(--border);
  padding:1rem;
  text-align:center;
  color:#aaa;
}

/* --- GROS BOUTON INSCRIPTION (hero) --- */

.hero-cta {
  margin-top: 1.8rem;
  display: flex;
  justify-content: center;
}

.btn-giant {
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 1.1rem 2.6rem;
  border-radius: 999px;
  text-decoration: none;
  color: var(--text);

  background: linear-gradient(
    120deg,
    rgba(50,255,166,0.25),
    rgba(255,90,241,0.25),
    rgba(70,197,255,0.25)
  );

  border: 1px solid rgba(255,255,255,0.18);

  box-shadow:
    0 0 25px rgba(255,90,241,0.25),
    0 0 45px rgba(50,255,166,0.15),
    inset 0 0 15px rgba(255,255,255,0.05);

  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.btn-giant:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 0 35px rgba(255,90,241,0.35),
    0 0 65px rgba(50,255,166,0.25),
    inset 0 0 18px rgba(255,255,255,0.08);
  filter: brightness(1.15);
}

.btn-giant:active {
  transform: translateY(0) scale(0.98);
}

.presence-day {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0.9rem 1rem;
  background: rgba(255,255,255,0.02);
}

.presence-day legend {
  padding: 0 0.4rem;
  font-weight: 600;
  color: var(--a1);
}

.presence-day label {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.25rem;
}


/* --- Tableau admin --- */

.admin-table-wrapper {
  overflow-x: auto;
  margin-top: 0.5rem;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.admin-table th,
.admin-table td {
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 0.5rem 0.6rem;
  text-align: left;
  vertical-align: top;
}

.admin-table thead th {
  font-weight: 600;
  color: #f0f0f0;
  background: rgba(255,255,255,0.03);
  position: sticky;
  top: 0;
  backdrop-filter: blur(8px);
}

.admin-table tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.02);
}

.admin-note {
  font-size: 0.78rem;
  color: #bbbbbb;
}


.admin-actions {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.btn-small {
  font-size: 0.8rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.btn-small:hover {
  background: rgba(255,255,255,0.08);
}

.btn-danger {
  border-color: rgba(255,90,90,0.7);
  background: rgba(255,90,90,0.12);
}

.btn-danger:hover {
  background: rgba(255,90,90,0.25);
}
.admin-actions form {
  margin: 0;
}
/* --- Layout plein écran pour l'admin --- */

body.admin-page .content {
  max-width: none;        /* enlève la limite 900px */
  width: 100%;
  margin: 1rem auto 2rem;
  padding: 0 1rem;
}


/* --- Logo cliquable --- */

.logo-link {
  font-size: 1.15rem;
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.logo-link:hover .logo-text {
  text-shadow:
    0 0 6px rgba(50,255,166,0.6),
    0 0 14px rgba(50,255,166,0.4);
}

.logo-link:hover .leaf-icon {
  filter: drop-shadow(0 0 10px rgba(50,255,166,0.9));
}


.logo-icon {
  width: 10rem;   /* ajuste comme tu veux */
  height: 2.2rem;
  display: block;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(50,255,166,0.7));
}

/* bonus : effet au survol */
.logo-link:hover .logo-icon {
  filter: drop-shadow(0 0 10px rgba(50,255,166,0.9));
}

/* --- Section affiche festival --- */

.poster-section {
  display: flex;
  justify-content: center;
  margin: 2rem 0 2.5rem;
}

.poster-card {
  max-width: 600px;
  width: 100%;
  padding: .1rem;
  border-radius: 18px;
  background: rgba(10,12,20,0.95);
  border: 1px solid rgba(255,255,255,0.08);

  box-shadow:
    0 0 0 1px rgba(50,255,166,0.12),
    0 0 35px rgba(255,90,241,0.18),
    0 20px 60px rgba(0,0,0,0.9);
}

.festival-poster {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  background: #05060b;
}

.poster-caption {
  margin-top: 0.6rem;
  text-align: center;
  font-size: 0.8rem;
  color: #bdbdbd;
}

/* --- Décors latéraux néon-plantes --- */

.side-decor {
  position: fixed;
  top: -10%;
  bottom: -10%;
  width: 420px;              /* PLUS GRAND */
  pointer-events: none;
  z-index: -1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%; /* image très grande */
  opacity: 0.35;             /* transparence globale */
  mix-blend-mode: screen;    /* fusion lumineuse */
  filter:
    blur(2px)
    brightness(1.15)
    saturate(1.3);      /* très léger flou */
}

.side-decor-left {
  left: -220px; /* image bien en dehors */
  background-image: url("/img/neon-plants.webp");
}

.side-decor-right {
  right: -220px;
  background-image: url("/img/neon-plants.webp");
  transform: scaleX(-1);
}
/* On désactive sur mobile pour garder la lisibilité */
@media (max-width: 900px) {
  .side-decor {
    display: none;
  }
}

body {
  position: relative;
  background-color: #05060b;
}

body::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -2;
  pointer-events: none;

  background-image: url("/img/neon-plants.webp");
  background-repeat: repeat;
  background-size: cover; /* taille de la texture */
  background-position: center;

  opacity: 0.15;

  filter:
    blur(2px)
    brightness(1)
    saturate(1.3);

  /* Dissout les bords */
  mask-image: radial-gradient(
    circle at center,
    rgba(0,0,0,1) 40%,
    rgba(0,0,0,0) 75%
  );
  -webkit-mask-image: radial-gradient(
    circle at center,
    rgba(0,0,0,1) 40%,
    rgba(0,0,0,0) 75%
  );
}


/* --- Page Artistes --- */

.artists-grid {
  display: grid;
  gap: 2rem;
  margin-top: 2rem;
}

.artist-card {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 1.5rem;
  align-items: start;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,0.02);
  transition: all 0.3s ease;
}

.artist-card:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(50,255,166,0.3);
  box-shadow: 0 0 30px rgba(50,255,166,0.1);
}

.artist-image {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.artist-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.artist-content h2 {
  margin: 0 0 0.3rem 0;
  font-size: 1.4rem;
  color: var(--text);
}

.artist-origin {
  font-size: 0.85rem;
  color: var(--a1);
  margin: 0 0 1rem 0;
  font-weight: 500;
}

.artist-description {
  color: #c7c7c7;
  line-height: 1.6;
  margin: 0;
  font-size: 0.95rem;
}

@media (max-width: 768px) {
  .artist-card {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .artist-image {
    aspect-ratio: 16/9;
  }
}

/* Responsive header / menu for small screens */
@media (max-width: 700px) {
  .site-header{
    flex-direction:column;
    align-items:stretch;
    gap:.6rem;
    padding:.75rem 1rem;
  }
  .header-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    gap:.6rem;
  }
  .site-header .logo{
    width:100%;
    justify-content:space-between;
    align-items:center;
    gap:.5rem;
  }
  /* hide nav by default on small screens, show via `.open` */
  .main-nav{
    display:none;
    gap:.45rem;
    flex-wrap:wrap;
    justify-content:flex-start;
    width:100%;
  }
  .main-nav.open{
    display:flex;
    flex-direction:column;
    gap:.5rem;
  }
  .main-nav a{
    flex: 0 1 auto;
    padding:.6rem .75rem;
    text-align:left;
    width:100%;
  }
  .lang-switch{
    align-self:flex-end;
  }
  .lang-switch select{
    padding:.35rem .6rem;
  }
  .site-header .btn-primary{
    margin-left:0;
  }
}

/* Hamburger button */
.hamburger{
  display:none;
  width:44px;
  height:40px;
  align-items:center;
  justify-content:center;
  gap:4px;
  background:transparent;
  border:1px solid transparent;
  border-radius:10px;
  cursor:pointer;
}
.hamburger span{
  display:block;
  width:20px;
  height:2px;
  background:var(--text);
  border-radius:2px;
  transition:transform .18s ease, opacity .18s ease;
}

@media (max-width:700px){
  .hamburger{display:flex}
  .hamburger.open span:nth-child(1){transform: translateY(8px) rotate(45deg)}
  .hamburger.open span:nth-child(2){opacity:0}
  .hamburger.open span:nth-child(3){transform: translateY(-8px) rotate(-45deg)}
}

/* SVG hamburger / close styling */
.hamburger svg rect{ fill: var(--text); }
.hamburger .icon-close rect{ fill: var(--text); }

@media (max-width:700px){
  /* show only site logo image and hamburger when closed */
  .site-header .logo-text{display:inline-block}
  .lang-switch{display:block}
  /* when nav is closed (no .nav-open), hide text and lang */
  .site-header:not(.nav-open) .logo-text{display:none}
  .site-header:not(.nav-open) .lang-switch{display:none}

  /* ensure logo image remains visible and aligned */
  .logo-link .logo-icon{width:2.2rem; height:auto}
  .site-header .logo{justify-content:flex-start}
}