:root{
  --text:#eaf2ff; --muted:#c4d4ea;
  --stroke:rgba(255,255,255,.12);
  --chip:rgba(255,255,255,.10);
  --chipH:rgba(255,255,255,.18);
  --accent:#4ade80; --accent2:#22c55e;
  --shadow:0 18px 50px rgba(0,0,0,.38);
  --vote-red:#ef4444;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0; color:var(--text); font-family:Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif; line-height:1.6}

/* Fond */
.bg{position:fixed; inset:0; z-index:-3; background:url('banner.jpg') center/cover no-repeat fixed}
.scrim{position:fixed; inset:0; z-index:-2; background:linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.64))}

/* Header transparent + auto-hide */
.header{position:sticky; top:12px; z-index:50; transition:transform .25s ease}
.header--hidden{transform:translateY(-140%)}
.bar{
  max-width:1020px; margin:0 auto; padding:8px 10px;
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; column-gap:12px;
}
.menu{display:flex; gap:10px; flex-wrap:wrap}
.menu.left{justify-content:flex-end}
.menu.right{justify-content:flex-start}
.chip{
  display:inline-flex; align-items:center; gap:10px; padding:11px 16px;
  border-radius:999px; color:var(--text); text-decoration:none; background:var(--chip);
  border:1px solid var(--stroke); backdrop-filter: blur(10px); font-weight:800; transition:.15s
}
.chip--button{cursor:pointer}
.chip:hover{transform:translateY(-1px); background:var(--chipH)}
.chip.big{padding:16px 24px; font-size:1.12rem}
.brand{display:inline-flex; align-items:center; justify-self:center}
.brand img{width:120px; height:120px; border-radius:20px; box-shadow:var(--shadow); margin:-28px 0}

/* HERO */
.hero{position:relative; max-width:1100px; margin:56px auto 12px; padding:0 16px; text-align:center}
.hero--compact::before{content:""; position:absolute; inset:-16px -20px; border-radius:26px;
  background:radial-gradient(700px 260px at 50% 9%, rgba(0,0,0,.30), transparent 70%); z-index:-1}

/* Grille votes + IP */
.votes-row{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px;
}
.votes-col{
  display:flex; flex-direction:column; gap:10px; align-items:stretch;
  opacity:0; transform:translateY(-6px) scale(.98); pointer-events:none; max-height:0; overflow:hidden; transition:.22s ease;
}
body.votes-open .votes-col{opacity:1; transform:none; pointer-events:auto; max-height:460px}

.vote-chip{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px; border-radius:14px; min-width:240px;
  background:rgba(255,255,255,.10); border:1px solid var(--stroke);
  color:var(--text); text-decoration:none; font-weight:800; backdrop-filter:blur(10px);
  transition:background .15s, transform .15s;
}
.vote-chip:hover{background:rgba(255,255,255,.18); transform:translateY(-1px)}
.vote-chip.voted{background: linear-gradient(135deg, var(--vote-red), #b91c1c); border-color: rgba(0,0,0,.25)}

/* Bloc IP */
.ip{display:inline-flex; position:relative; flex-direction:column; align-items:center; gap:10px; padding:16px 20px;
  background:rgba(255,255,255,.10); border:1px solid var(--stroke); border-radius:18px; box-shadow:var(--shadow)}

/* Ligne avec IP et flèches compactes */
.ip-line{display:inline-flex; align-items:center; gap:10px}
.ip-arrow{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:24px; height:24px; padding:0 6px; border-radius:999px;
  background:rgba(255,255,255,.10); border:1px solid var(--stroke);
  font-size:1rem; line-height:1; user-select:none; pointer-events:none; opacity:.85;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));
  transition:transform .18s ease;
}
/* Par défaut : flèches POINTENT VERS l'IP (droite depuis la gauche, gauche depuis la droite) */
.ip-line .ip-arrow.right{transform:scaleX(-1)} /* ➜ devient ← */

/* Quand les votes sont ouverts : flèches POINTENT VERS les colonnes de votes (vers l'extérieur) */
body.votes-open .ip-line .ip-arrow.left{transform:scaleX(-1)}  /* ➜ devient ← (vers gauche) */
body.votes-open .ip-line .ip-arrow.right{transform:none}       /* ➜ reste → (vers droite) */

.copyable{cursor:pointer; user-select:none; padding:12px 16px; border-radius:12px;
  background:rgba(0,0,0,.38); border:1px solid var(--stroke); font-weight:900; letter-spacing:.2px;
  transition: box-shadow .2s, background .2s}
.copyable.pulse{
  background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#072313;
  box-shadow:0 0 0 0 rgba(34,197,94,.9);
  animation:pulse 0.7s ease;
}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.9)}100%{box-shadow:0 0 0 22px rgba(34,197,94,0)}}
.hint{color:var(--muted); font-size:.95rem}

/* Hint sous IP (visible uniquement quand votes ouverts) */
.vote-hint.under-ip{margin-top:10px; color:#dbe8ff; opacity:.95}
.hint--success{
  display:inline-block; padding:8px 12px; border-radius:12px;
  background:linear-gradient(135deg, rgba(74,222,128,.18), rgba(34,197,94,.18));
  border:1px solid rgba(34,197,94,.35);
}
body:not(.votes-open) #voteHint{display:none}

/* GRID FONCTIONNALITÉS */
.features-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px; max-width:1100px; margin:18px auto 6px; padding:0 16px
}
.feat{
  background:rgba(255,255,255,.08); border:1px solid var(--stroke); border-radius:18px;
  text-align:center; padding:16px 12px; box-shadow:var(--shadow);
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.feat:hover{transform:translateY(-2px); background:rgba(255,255,255,.12); box-shadow:0 22px 60px rgba(0,0,0,.42)}
.icon{font-size:2rem; display:block; margin-bottom:10px}
.feat h3{margin:2px 0 6px; font-size:1.1rem; color:#fff}
.feat p{
  margin:0 auto; color:var(--muted); font-size:.96rem; line-height:1.4;
  max-width:30ch; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}

/* Showcase + aura */
.showcase{position:relative; max-width:1100px; margin:18px auto 0; padding:26px 16px;
  display:grid; grid-template-columns:1fr 1fr; gap:18px}
.showcase.aura::before{content:""; position:absolute; inset:-8px 0 0 0; pointer-events:none;
  background:radial-gradient(600px 180px at 50% 0%, rgba(120,170,255,.14), transparent 70%)}
.card{border-radius:22px; overflow:hidden; border:1px solid var(--stroke); background:rgba(255,255,255,.06); box-shadow:var(--shadow)}
.card img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block}
.card figcaption{padding:10px 12px; color:#e6efff; background:rgba(0,0,0,.28); border-top:1px solid var(--stroke)}
.clamp{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; line-height:1.5; min-height: calc(1em * 1.5 * 3)}

/* Footer */
.footer{position:relative; margin:20px auto 26px; max-width:1100px; text-align:center; color:#c9d7ee; padding:10px 16px}
.footer p{margin:0}
#scrollTop{position:absolute; right:0; top:0; background:var(--chip); color:var(--text); border:none; padding:6px 12px; border-radius:8px; cursor:pointer}
#scrollTop:hover{background:var(--chipH)}

/* Canvas particules */
#fx{position:fixed; inset:0; pointer-events:none; z-index:-1}

/* Responsive */
@media (max-width:900px){
  .brand img{width:100px; height:100px; margin:-24px 0}
  .votes-row{grid-template-columns:1fr; gap:10px}
  .votes-col{flex-direction:row; flex-wrap:wrap; justify-content:center}
  .vote-chip{min-width:unset}
  .showcase{grid-template-columns:1fr; padding:20px 16px}
}