:root{
  --bg-main:#050b17;
  --bg-glass:rgba(15,25,45,0.55);
  --border:rgba(120,220,255,0.25);
  --accent:#6ff3ff;
  --accent-soft:rgba(111,243,255,0.15);
  --text:#d8f7ff;
  --muted:#8bb8c7;
}

*{box-sizing:border-box;}

body{
  margin:0;
  font-family:Inter,Segoe UI,sans-serif;
  color:var(--text);

  /* Image de fond */
  background:
    linear-gradient(
  rgba(5,11,23,0.75),
  rgba(5,11,23,0.9)
),

    url("images/oBJETS/glyphe du 2eme fragment.png") center / cover no-repeat fixed;
}


/* ===== LANG SWITCH ===== */

.lang-switch{
  position:fixed;
  z-index:200;   /* plus grand que la nav */
}

.lang-switch button{
  background:transparent;
  border:1px solid var(--border);
  color:var(--accent);
  margin-left:6px;
  padding:6px 6px;
  cursor:pointer;
  letter-spacing:.1em;
}

.lang-switch button.active{
  background:var(--accent);
  color:#050b17;
}

/* ===== HEADER ===== */

header{
  padding:4rem 1.5rem 2rem;
  text-align:center;
}

header h1{
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--accent);
}

header p{
  color:var(--muted);
}

/* ===== SECTIONS ===== */

section{
  max-width:1100px;
  margin:3rem auto;
  padding:0 1.5rem;
}

.section-title{
  margin-bottom:1.5rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
}

/* ===== LOGOS ===== */

.logos{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1.5rem;
}

.logo-card{
  background:var(--bg-glass);
  border:1px solid var(--border);
  border-radius:16px;
  padding:1.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:110px;
  backdrop-filter:blur(8px);
  animation:pulse 6s infinite ease-in-out;
}

.logo-card img{
  max-width:120px;
  filter:grayscale(100%) brightness(1.2);
  opacity:.85;
}

@keyframes pulse{
  0%,100%{box-shadow:0 0 12px rgba(111,243,255,0.08);}
  50%{box-shadow:0 0 28px rgba(111,243,255,0.25);}
}

/* ===== CONTRIBUTIONS ===== */

.contributions{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.8rem;
}

.entry{
  background:var(--bg-glass);
  border:1px solid var(--border);
  border-radius:18px;
  padding:1.8rem;
  backdrop-filter:blur(10px);
}

.entry h3{color:var(--accent);margin:0;}
.entry span{
  font-size:.8rem;
  color:var(--muted);
}


.noctua-reply{
  margin-top:1rem;
  padding:1rem 1.2rem;
  border-left:2px solid var(--accent);
  background:rgba(10,20,40,0.45);
  font-size:.85rem;
  color:var(--muted);
}

.noctua-reply strong{
  display:block;
  color:var(--accent);
  letter-spacing:.12em;
  margin-bottom:.4rem;
}

/* ===== FORM ===== */

form{
  margin-top:2rem;
  background:var(--bg-glass);
  border:1px solid var(--border);
  border-radius:18px;
  padding:2rem;
}

input,textarea{
  width:100%;
  margin-bottom:1rem;
  padding:.8rem;
  background:#050b17;
  border:1px solid var(--border);
  color:var(--text);
  border-radius:8px;
}

button{
  background:transparent;
  border:1px solid var(--accent);
  color:var(--accent);
  padding:.8rem 1.5rem;
  cursor:pointer;
  text-transform:uppercase;
}

/* ===== NOCTUA ===== */

.noctua{
  max-width:720px;
  margin:4rem auto;
  text-align:center;
  font-size:.85rem;
  color:var(--muted);
}

.noctua span{
  display:block;
  margin-top:.6rem;
  color:var(--accent);
  letter-spacing:.12em;
}


nav{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.6rem;

  background:rgba(5,11,23,0.75);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(120,220,255,0.25);
  z-index:10000;
}

.main-nav{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px;
  z-index: 10000;
}

nav a{
  color:#8bb8c7;
  text-decoration:none;
  font-size:.8rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  position:relative;
}

nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;
  height:1px;
  background:#6ff3ff;
  transition:.3s;
}

nav a:hover::after{
  width:100%;
}

/* espace sous la nav */
body{
  padding-top:80px;
}

/* mobile */
@media(max-width:768px){
  nav{
    overflow-x:auto;
    justify-content:flex-start;
    padding:0 1rem;
  }
}

.lang-switch{
  background: rgba(5,11,23,0.75);
  padding:4px 4px;
  border-radius:6px;
}


/* pour positionner le bouton de son */
.sound-control {
  position: fixed;
  z-index: 200;
}

.sound-control button {
  background: rgba(5,11,23,0.75);
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 4px 4px;
  border-radius: 6px;
  cursor: pointer;
}


/* ===== SELECT CINÉMATIQUE — PERSONNAGE ===== */

.select-cinema {
  position: relative;
  margin-bottom: 1rem;
}

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

  width: 100%;
  padding: .85rem 3rem .85rem .9rem;

  background:
    linear-gradient(
      145deg,
      rgba(15,25,45,.85),
      rgba(5,11,23,.95)
    );

  border: 1px solid var(--border);
  border-radius: 10px;

  color: var(--text);
  font-family: inherit;
  font-size: .9rem;
  letter-spacing: .08em;

  cursor: pointer;
  transition: all .3s ease;
}

/* flèche holographique */
.select-cinema::after {
  content: "▾";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  pointer-events: none;
  font-size: 1rem;
}

/* hover / focus */
.select-cinema select:hover,
.select-cinema select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 18px rgba(111,243,255,.25);
  outline: none;
}

/* option sélectionnée */
.select-cinema select:not([value=""]) {
  color: var(--accent);
}


/* ===== SELECT PERSONNAGE — FULL CUSTOM ===== */

.character-select {
  position: relative;
  margin-bottom: 1rem;
  z-index: 100;
  user-select: none;
}

.character-selected {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .9rem;
  background: linear-gradient(
    145deg,
    rgba(15,25,45,.85),
    rgba(5,11,23,.95)
  );
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all .3s ease;
}

.character-selected:hover {
  box-shadow: 0 0 18px rgba(111,243,255,.25);
  border-color: var(--accent);
}

.char-icon {
  color: var(--accent);
  font-size: .9rem;
  opacity: .8;
}

.character-options {
  position: absolute;
  left: 0;
  right: 0;
  top: 110%;
  background: rgba(5,11,23,.97);
  border: 1px solid var(--border);
  border-radius: 12px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
  z-index: 101;
}

.character-select.open .character-options {
  max-height: 220px;
  overflow-y: auto;
}

.character-options li {
  padding: .75rem .9rem;
  cursor: pointer;
  transition: background .2s;
}

.character-options li:hover {
  background: rgba(111,243,255,.18);
}

/* sélection confirmée */
.character-select.selected .character-selected {
  border-color: var(--accent);
  box-shadow: 0 0 22px rgba(111,243,255,.35);
}


/* ===== SELECT PAYS — FULL CUSTOM ===== */

.country-select{
  position: relative;
  margin-bottom: 1rem;
  z-index: 100;
  user-select: none;
}

.country-selected{
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .9rem;
  background: linear-gradient(
    145deg,
    rgba(15,25,45,.85),
    rgba(5,11,23,.95)
  );
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all .3s ease;
}

.country-selected:hover{
  box-shadow: 0 0 18px rgba(111,243,255,.25);
  border-color: var(--accent);
}

.country-icon{
  color: var(--accent);
  font-size: 1rem;
  opacity: .95;
}

.country-label{
  color: var(--text);
  letter-spacing: .04em;
}

.country-options{
  position: absolute;
  left: 0;
  right: 0;
  top: 110%;
  background: rgba(5,11,23,.97);
  border: 1px solid var(--border);
  border-radius: 12px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
  z-index: 101;
}

.country-select.open .country-options{
  max-height: 260px;
  overflow-y: auto;
}

.country-options li{
  padding: .75rem .9rem;
  cursor: pointer;
  transition: background .2s, color .2s, padding-left .2s;
}

.country-options li:hover{
  background: rgba(111,243,255,.18);
  color: var(--accent);
  padding-left: 1.2rem;
}

.country-select.selected .country-selected{
  border-color: var(--accent);
  box-shadow: 0 0 22px rgba(111,243,255,.35);
}

.character-select{
  position: relative;
  z-index: 1000;
}

footer{
  margin-top:4rem;
  padding:2.5rem 1.5rem 2rem;
  text-align:center;

  background:
    linear-gradient(
      to top,
      rgba(5,11,23,0.95),
      rgba(5,11,23,0.75)
    );

  border-top:1px solid rgba(111,243,255,0.2);
}

footer p{
  margin:.3rem 0;
  font-size:.8rem;
  color:var(--muted);
  letter-spacing:.08em;
}

.footer-noctua{
  color:var(--accent);
  font-size:.85rem;
  letter-spacing:.12em;
  margin-bottom:.5rem;
  text-shadow:0 0 10px rgba(111,243,255,.25);
}

footer{
  margin-top:6rem;
}

.footer-links {
  margin-top: 1rem;
  font-size: .78rem;
  letter-spacing: .06em;
}
.footer-links a {
  color: rgba(111,243,255,0.5);
  text-decoration: none;
  margin: 0 10px;
  transition: color .18s;
}
.footer-links a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* ===== POSITION VERROUILLÉE LANGUE + MUSIQUE ===== */

/* desktop */
.lang-switch{
  position: fixed !important;
  inset: 16px 16px auto auto !important;
  z-index: 9999 !important;
}

.sound-control{
  position: fixed !important;
  inset: 16px auto auto 16px !important;
  z-index: 9999 !important;
}

/* mobile : sous la nav */
@media (max-width:768px){
  .lang-switch{
    inset: 76px 12px auto auto !important;
  }

  .sound-control{
    inset: 76px auto auto 12px !important;
  }
}


/* ===== SCAN D'EMPREINTE HUMAINE ===== */

.fingerprint-block{
  margin: 1.4rem 0 1.2rem;
  padding: 1.2rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    linear-gradient(
      145deg,
      rgba(15,25,45,.78),
      rgba(5,11,23,.94)
    );
  box-shadow:
    0 0 24px rgba(111,243,255,.08),
    inset 0 0 20px rgba(111,243,255,.03);
}

.fingerprint-title{
  margin-bottom: .9rem;
  color: var(--accent);
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
}

.fingerprint-scanner{
  position: relative;
  width: 100%;
  max-width: 280px;
  height: 320px;
  margin: 0 auto;
  border: 1px solid rgba(111,243,255,.2);
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(circle at center, rgba(111,243,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(8,18,36,.95), rgba(5,11,23,1));
  box-shadow:
    inset 0 0 35px rgba(111,243,255,.05),
    0 0 25px rgba(111,243,255,.06);
}

/* faux motif d'empreinte */
.fingerprint-mark{
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  opacity: .42;
  background:
    radial-gradient(circle, transparent 22%, rgba(111,243,255,.22) 23%, transparent 24%) center/100% 100% no-repeat,
    repeating-radial-gradient(
      ellipse at center,
      rgba(111,243,255,.32) 0 2px,
      transparent 2px 8px
    );
  filter: blur(.3px);
  transform: scale(.92);
}

/* halo */
.fingerprint-glow{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(111,243,255,.12), transparent 58%);
  opacity: .55;
  pointer-events: none;
}

/* ligne de scan */
.fingerprint-scan-line{
  position: absolute;
  left: 0;
  top: -14%;
  width: 100%;
  height: 22%;
  background:
    linear-gradient(
      to bottom,
      rgba(111,243,255,0),
      rgba(111,243,255,.10),
      rgba(111,243,255,.38),
      rgba(111,243,255,.10),
      rgba(111,243,255,0)
    );
  box-shadow: 0 0 18px rgba(111,243,255,.28);
  opacity: 0;
  pointer-events: none;
}

.fingerprint-status{
  margin-top: .9rem;
  text-align: center;
  color: var(--muted);
  font-size: .85rem;
  min-height: 1.2rem;
  letter-spacing: .04em;
}

.fingerprint-btn{
  display: block;
  margin: 1rem auto 0;
  min-width: 170px;
}

/* état scan actif */
.fingerprint-block.scanning .fingerprint-scan-line{
  opacity: 1;
  animation: fingerprintSweep 2.2s linear infinite;
}

.fingerprint-block.scanning .fingerprint-mark{
  animation: fingerprintPulse 1.4s ease-in-out infinite;
}

.fingerprint-block.scanning .fingerprint-glow{
  animation: fingerprintGlow 1.6s ease-in-out infinite;
}

/* état validé */
.fingerprint-block.validated{
  border-color: rgba(111,243,255,.48);
  box-shadow:
    0 0 30px rgba(111,243,255,.16),
    inset 0 0 24px rgba(111,243,255,.06);
}

.fingerprint-block.validated .fingerprint-mark{
  opacity: .75;
  filter: drop-shadow(0 0 10px rgba(111,243,255,.25));
}

.fingerprint-block.validated .fingerprint-status{
  color: var(--accent);
}

@keyframes fingerprintSweep{
  0%   { top: -22%; }
  100% { top: 100%; }
}

@keyframes fingerprintPulse{
  0%,100%{
    transform: scale(.92);
    opacity: .45;
  }
  50%{
    transform: scale(.96);
    opacity: .75;
  }
}

@keyframes fingerprintGlow{
  0%,100%{ opacity: .35; }
  50%{ opacity: .8; }
}

@media (max-width:768px){
  .fingerprint-scanner{
    max-width: 240px;
    height: 280px;
  }
}


/* ===== ZONE DE CONTACT DU SCAN ===== */

.fingerprint-touch-target{
  position: absolute;
  left: 50%;
top: 50%;
transform: translate(-50%, -50%);
  width: 170px;
  height: 110px;
  border: none;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: transparent;
  box-shadow: inset 0 0 10px rgba(111,243,255,.08);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  transition: all .25s ease;
  opacity: 0;
pointer-events: none;
transition: opacity .3s ease;
}

.fingerprint-block.awaiting-touch .fingerprint-touch-target{
  opacity: 1;
  pointer-events: auto;
}

.fingerprint-touch-target:hover{
  border-color: rgba(111,243,255,.5);
  box-shadow:
    inset 0 0 14px rgba(111,243,255,.12),
    0 0 12px rgba(111,243,255,.08);
}

.fingerprint-touch-target.pressing{
  background: rgba(111,243,255,.12);
  border-color: rgba(111,243,255,.65);
  box-shadow:
    0 0 18px rgba(111,243,255,.22),
    inset 0 0 18px rgba(111,243,255,.18);
  transform: translate(-50%, -50%) scale(.98);
}

/* barre de progression */
.fingerprint-progress{
  width: 100%;
  max-width: 280px;
  height: 8px;
  margin: .9rem auto 0;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(111,243,255,.14);
}

.fingerprint-progress-bar{
  width: 0%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(111,243,255,.35),
    rgba(111,243,255,.95)
  );
  box-shadow: 0 0 12px rgba(111,243,255,.35);
  transition: width .08s linear;
}

/* états */
.fingerprint-block.awaiting-touch .fingerprint-touch-target{
  animation: fingerprintPrompt 1.3s ease-in-out infinite;
}

.fingerprint-block.touching .fingerprint-scan-line{
  opacity: 1;
  animation: fingerprintSweep 1.4s linear infinite;
}

.fingerprint-block.touching .fingerprint-mark{
  animation: fingerprintPulse 1s ease-in-out infinite;
}

@keyframes fingerprintPrompt{
  0%,100%{
    box-shadow: inset 0 0 10px rgba(111,243,255,.08);
  }
  50%{
    box-shadow:
      0 0 16px rgba(111,243,255,.18),
      inset 0 0 14px rgba(111,243,255,.12);
  }
}