/* ===== THEME ===== */
:root{
  --cyan: #7defff;
  --cyan-core: #00c3ff;
  --pink: #ff7afc;
  --pink-core: #ff00de;

  --btn-fg:#0b0f1a;
  --btn-border:rgba(255,255,255,.18);
  --btn-glass:rgba(255,255,255,.06);
}

*{ box-sizing:border-box; }

/* ===== GLOBAL ===== */
body{
  margin:0; padding:0;
  font-family:'Montserrat',sans-serif;
  color:#fff;
  background:#0c0c1e;
}

.background-fixed{
  position:fixed; inset:0;
  background:url('images/background.jpg') center/cover no-repeat;
  z-index:-1;
}

/* Utilities */
.mt-tight{ margin:10px 0 6px !important; }
.mt-md{ margin-top:14px !important; }

/* ===== STRUCTURE ===== */
.scroll-container{ width:100%; background:rgba(12,12,30,.7); }

section{
  min-height:80vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:50px 20px; text-align:center;
}

#hero img{ max-width:90%; height:auto; margin-top:50px; }

.intro-text{ max-width:800px; margin-top:30px; line-height:1.6; font-size:1.1em; }

footer{ padding:40px 20px; text-align:center; margin-top:50px; }
.footer-logo{ max-width:50%; height:auto; filter:drop-shadow(0 0 15px red); margin-top:20px; }

/* ===== TYPO / NEON ===== */
h1,h2,h3,footer p{ font-family:'Orbitron',sans-serif; text-transform:uppercase; }

.neon-text-pink{
  color:var(--pink);
  text-shadow:0 0 5px var(--pink-core),0 0 10px var(--pink-core),0 0 20px var(--pink-core),0 0 40px var(--pink-core);
}
.neon-text-cyan{
  color:var(--cyan);
  text-shadow:0 0 5px var(--cyan-core),0 0 10px var(--cyan-core),0 0 20px var(--cyan-core),0 0 40px var(--cyan-core);
}

/* Liens (généraux) */
a{ color:var(--cyan); text-decoration:none; }
a:hover{ color:var(--pink); text-shadow:0 0 5px var(--pink-core); }

/* Neon fort pour liens dans cartes & itinéraires (Waze etc.) */
.card a:link,
.card a:visited,
.itineraire a:link,
.itineraire a:visited{
  color:#7defff !important;
  text-shadow:0 0 6px #00c3ff,0 0 14px #00c3ff,0 0 22px #00c3ff,0 0 36px #00c3ff !important;
}
.card a:hover,
.itineraire a:hover{
  color:#ff7afc !important;
  text-shadow:0 0 6px #ff00de,0 0 14px #ff00de,0 0 22px #ff00de,0 0 36px #ff00de !important;
}

/* ===== CARDS ===== */
.card-container{
  display:flex; flex-wrap:wrap; justify-content:center; gap:20px; margin-top:30px; max-width:1200px;
}
.card{
  background:rgba(0, 0, 0, .5);
  border:1px solid var(--cyan); border-radius:8px;
  padding:20px; min-width:280px; flex:1; line-height:1.5;
  box-shadow:0 0 15px rgba(125,239,255,.5);
  text-align:left;
}
.card h3{ color:var(--pink); margin-bottom:10px; }

/* ===== ITINERAIRES ===== */
.itineraire{
  background:rgba(10,10,25,.6); backdrop-filter:blur(6px);
  border:1px solid rgba(108,251,255,.4); border-radius:12px;
  padding:25px 30px; margin:40px auto; max-width:700px;
  box-shadow:0 0 20px rgba(0,255,255,.3);
  color:#fff; text-align:left; line-height:1.6;
}
.itineraire--pink{
  background:rgba(25,10,20,.6);
  border:1px solid rgba(255,122,252,.45);
  box-shadow:0 0 20px rgba(255,122,252,.3);
}
.itineraire--pink h3{ color:var(--cyan); margin:0 0 10px; }

.gallery{
  margin-top:15px; display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
}
.gallery img{
  width:130px; border-radius:8px; cursor:pointer;
  box-shadow:0 0 15px rgba(255,0,255,.4);
}

/* ===== MODAL ÉNIGME ===== */
.riddle-modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(2,2,10,.65); z-index:9999; }
.riddle-modal[aria-hidden="false"]{ display:flex; }

.riddle-inner{
  width:92%; max-width:520px; text-align:center;
  background:rgba(8,8,20,.85);
  border:1px solid rgba(125,239,255,.18);
  border-radius:12px; padding:26px; backdrop-filter:blur(8px);
  box-shadow:0 0 30px rgba(0,255,255,.08);
  animation:modalScale .25s cubic-bezier(.16,.84,.44,1);
}
.riddle-close{ position:absolute; right:12px; top:12px; background:transparent; border:0; color:#fff; font-size:22px; cursor:pointer; }
.riddle-inner input{
  width:100%; padding:10px 12px; margin-top:12px;
  border-radius:8px; border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.02); color:#fff;
}
.riddle-actions{ display:flex; gap:10px; justify-content:center; margin-top:12px; }
.riddle-submit,.riddle-cancel,.riddle-btn{
  padding:10px 14px; border-radius:8px; border:0; cursor:pointer; font-weight:700;
  background:linear-gradient(90deg,var(--pink),#6cfbff); color:#081220;
}
.riddle-cancel{ background:rgba(255,255,255,.06); color:#fff; border:1px solid rgba(255,255,255,.04); }
.riddle-msg{ margin-top:10px; color:#ffb3c9; }
@keyframes modalScale{ from{ transform:scale(.85); opacity:0; } to{ transform:scale(1); opacity:1; } }

/* ===== LIGHTBOX ===== */
.lightbox{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.85); backdrop-filter:blur(8px); justify-content:center; align-items:center; z-index:99999; }
.lightbox[aria-hidden="false"]{ display:flex; }
.lightbox-inner{ position:relative; text-align:center; }
.lightbox-inner img{ max-width:90vw; max-height:80vh; border-radius:8px; box-shadow:0 0 30px rgba(255,0,255,.4); }
.lightbox-actions{ margin-top:15px; display:flex; gap:14px; justify-content:center; }
.lightbox-actions .dl, #closeLightbox{
  padding:10px 16px; border:0; border-radius:6px; cursor:pointer; font-weight:600; background:#ff66ff; color:#111; text-decoration:none;
}
#closeLightbox{ background:#222; color:#fff; border:1px solid #555; }
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:56px; height:56px; border-radius:999px;
  background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.18); color:#fff;
  display:grid; place-items:center; cursor:pointer; user-select:none;
  box-shadow:0 4px 20px rgba(0,0,0,.5); font-size:26px; line-height:1;
}
.lightbox-nav:hover{ background:rgba(0,0,0,.6); }
#prevBtn{ left:-56px; } #nextBtn{ right:-56px; }
@media (max-width:600px){ #prevBtn{ left:-38px; } #nextBtn{ right:-38px; } }
#lbPseudo {color:#7defff;text-shadow:0 0 4px #00c3ff,0 0 8px #00c3ff,0 0 14px #00c3ff;font-weight:600;}
#lightbox[aria-hidden="false"] ~ #homeBtn {display:none !important;}


/* ===== BOUTONS GÉNÉRIQUES ===== */
button,.dl,.riddle-btn{
  -webkit-tap-highlight-color:transparent;
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:16px; line-height:1;
  min-height:48px; padding:14px 18px; border-radius:14px; border:1px solid var(--btn-border);
  background:linear-gradient(135deg, rgba(255,102,255,.85), rgba(102,233,255,.85)); color:var(--btn-fg);
  box-shadow:0 6px 24px rgba(255,102,255,.25), 0 2px 8px rgba(102,233,255,.18);
  text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  transition:transform .12s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
}
button:hover,.dl:hover,.riddle-btn:hover{ box-shadow:0 10px 32px rgba(255,102,255,.35), 0 6px 18px rgba(102,233,255,.25); filter:brightness(1.03); }
button:active,.dl:active,.riddle-btn:active{ transform:translateY(1px) scale(.99); }
button:focus-visible,.dl:focus-visible,.riddle-btn:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }

/* ===== UPLOAD — Layout & néon ===== */
.upload-line{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; width:100%; }
.uploadForm{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.uploadForm input[type="file"]{ display:none; }
.uploadForm .file-name{ flex-basis:100%; text-align:center; font-size:13px; opacity:.8; }

.uploadForm .file-label,
.uploadForm button{
  all:unset; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; min-width:140px; padding:12px 20px;
  font-family:'Orbitron',sans-serif; font-size:14px; text-transform:uppercase; letter-spacing:1px;
  background:rgba(0,0,0,.35); border-radius:12px;
  border:1px solid var(--pink-core); color:var(--pink);
  text-shadow:0 0 4px var(--pink-core),0 0 8px var(--pink-core),0 0 12px var(--pink-core);
  box-shadow:0 0 6px var(--pink-core), inset 0 0 12px var(--pink-core);
}
.uploadForm button{
  border-color:var(--cyan-core); color:var(--cyan);
  text-shadow:0 0 4px var(--cyan-core),0 0 8px var(--cyan-core),0 0 12px var(--cyan-core);
  box-shadow:0 0 6px var(--cyan-core), inset 0 0 12px var(--cyan-core);
}
.uploadForm .file-label:hover,
.uploadForm button:hover{ background:rgba(0,0,0,.6); }

/* ===== Bouton Accueil fixe ===== */
#homeBtn{
  all:unset; position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  z-index:999999; display:inline-flex; align-items:center; gap:10px; padding:12px 24px; min-width:150px;
  font-family:'Orbitron',sans-serif; font-size:14px; letter-spacing:1px; text-transform:uppercase; cursor:pointer;
  background:rgba(0,0,0,.35); border:1px solid var(--cyan-core); border-radius:14px; color:var(--cyan);
  text-shadow:0 0 4px var(--cyan-core),0 0 8px var(--cyan-core),0 0 12px var(--cyan-core);
  box-shadow:0 0 6px var(--cyan-core), inset 0 0 12px var(--cyan-core);
  animation:neonBreath 2.4s ease-in-out infinite;
}
#homeBtn:active{ transform:translateX(-50%) scale(.97); }
#homeBtn .icon-home{ display:inline-block; filter:drop-shadow(0 0 4px var(--cyan-core)) drop-shadow(0 0 8px var(--cyan-core)); }

@keyframes neonBreath{
  0%,100%{ box-shadow:0 0 6px var(--cyan-core), inset 0 0 12px var(--cyan-core); }
  50%{ box-shadow:0 0 14px #00e0ff, inset 0 0 28px rgba(0,224,255,.6); }
}

/* ===== Bouton "Accéder à la page Dimanche" — CYAN NEON ===== */
#openRiddle{
  all: unset !important;
  cursor:pointer !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:12px 24px !important;
  min-width:160px !important;
  margin-top:15px !important;
  font-family:'Orbitron',sans-serif !important;
  font-size:14px !important;
  letter-spacing:1px !important;
  text-transform:uppercase !important;
  background:rgba(0,0,0,0.35) !important;
  border:1px solid #00c3ff !important;
  border-radius:14px !important;
  color:#7defff !important;
  text-shadow:0 0 4px #00c3ff,0 0 8px #00c3ff,0 0 12px #00c3ff !important;
  box-shadow:0 0 6px #00c3ff, inset 0 0 12px #00c3ff !important;
  transition:transform .15s ease, box-shadow .2s ease;
}
#openRiddle:hover{
  box-shadow:0 0 12px #00d5ff, inset 0 0 22px #00d5ff !important;
  transform:scale(1.02);
}

/* ===== MOBILE ===== */
@media (max-width:768px){
  body{ background-attachment:scroll; }
  h1{ font-size:1.8em; }
  .intro-text{ font-size:1em; }
  .card{ min-width:90%; }
  section{ padding:40px 15px; }
}

/* Petits écrans : compacter les deux boutons */
@media (max-width:480px){
  .uploadForm{ gap:6px; }
  .uploadForm .file-label,
  .uploadForm button{
    font-size:12px;
    min-height:42px; min-width:130px;
    padding:10px 14px;
  }
}
.uploadForm button { display:none !important; }
/* --- Toast upload --- */
#toast {
  position: fixed;
  left: 50%;
  bottom: 90px;
  transform: translateX(-50%) translateY(20px);
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(8, 20, 28, 0.88);
  color: #7defff;
  border: 1px solid #00c3ff;
  box-shadow: 0 0 10px #00c3ff, inset 0 0 14px rgba(0,195,255,.35);
  font: 600 14px/1.2 'Montserrat', sans-serif;
  z-index: 999999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
#toast.error {
  color: #ff7afc;
  border-color: #ff00de;
  box-shadow: 0 0 10px #ff00de, inset 0 0 14px rgba(255,0,222,.35);
}
/* === Bouton roue dentée (paramètres) === */
.settings-btn{
  position: fixed;
  top: 16px; right: 16px;
  z-index: 999999;
  display: inline-grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--cyan-core);
  color: var(--cyan);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-shadow: 0 0 4px var(--cyan-core), 0 0 8px var(--cyan-core);
  box-shadow: 0 0 6px var(--cyan-core), inset 0 0 12px var(--cyan-core);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.settings-btn:hover{
  filter: brightness(1.05);
  box-shadow: 0 0 10px #00d5ff, inset 0 0 22px #00d5ff;
}
.settings-btn:active{ transform: scale(.97); }

/* === Modal paramètres (mêmes vibes que riddle) === */
.settings-modal{
  position: fixed; inset: 0;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(8px);
  z-index: 999999;
}
.settings-modal[aria-hidden="false"]{ display: flex; }

.settings-inner{
  width: 92%; max-width: 480px;
  background: rgba(8,8,20,.88);
  border: 1px solid rgba(125,239,255,.22);
  border-radius: 12px; padding: 22px;
  box-shadow: 0 0 30px rgba(0,255,255,.12);
  text-align: center;
  animation: modalScale .25s cubic-bezier(.16,.84,.44,1);
}
.settings-close{
  position: absolute; right: 12px; top: 10px;
  background: transparent; border: 0; color: #fff;
  font-size: 22px; cursor: pointer;
}

#newPseudo{
  width: 100%; padding: 10px 12px; margin-top: 12px;
  border-radius: 8px; border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04); color: #fff;
  font-size: 16px;
}

.settings-actions{
  display: flex; justify-content: center; gap: 10px; margin-top: 12px;
}
.settings-save, .settings-cancel{
  padding: 10px 14px; border-radius: 10px; border: 0; cursor: pointer; font-weight: 700;
}
.settings-save{
  background: linear-gradient(90deg, var(--cyan), #6cfbff);
  color: #081220;
}
.settings-cancel{
  background: rgba(255,255,255,.06);
  color: #fff; border: 1px solid rgba(255,255,255,.08);
}

/* mobile: descend un peu la roue pour éviter le notch */
@media (max-width: 480px){
  .settings-btn{ top: 18px; right: 14px; }
}
.settings-btn{
  text-shadow:none; /* enlève le flou sur le texte/icône du bouton */
}

.settings-btn svg{
  width:22px;
  height:22px;
  stroke:currentColor;
  stroke-width:2.2; /* lignes plus épaisses = plus net */
  fill:none;
  filter:drop-shadow(0 0 6px #00c3ff) drop-shadow(0 0 14px #00c3ff); /* glow sur l’icône uniquement */
}
/* Bouton paramètres */
.settings-btn{
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 100000;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(0,0,0,.35);
  border: 1px solid #00c3ff;
  box-shadow: 0 0 10px #00c3ff, inset 0 0 18px rgba(0,195,255,.6);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Icône roue nette + glow */
.settings-btn .gear{
  font-size: 22px;                 /* taille de la roue */
  line-height: 1;
  color: #7defff;                  /* cyan */
  text-shadow:
    0 0 4px #00c3ff,
    0 0 8px #00c3ff,
    0 0 14px #00c3ff;              /* glow */
}

/* petit hover */
.settings-btn:hover{
  box-shadow: 0 0 14px #00d5ff, inset 0 0 24px rgba(0,213,255,.7);
}
/* === Galerie en carrousel sur mobile === */
@media (max-width:640px){
  .gallery{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding: 16px 6px;
  }

  /* état par défaut : atténué */
  .gallery img{
    flex: 0 0 72%;
    max-width: none;
    scroll-snap-align: center;
    border-radius: 10px;
    transform: scale(.78);
    filter: brightness(.45) blur(.5px);
    opacity: .6;
    transition: transform .25s ease, filter .25s ease, opacity .25s ease;
    z-index: 0;
    margin: 0 -6%;
  }

  /* état centré : net + dessus */
  .gallery img.is-center{
    transform: scale(1) !important;
    filter: none !important;
    opacity: 1 !important;
    z-index: 2 !important;
  }
}
.depart-arrivee{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  margin:10px 0;
  padding:0 5px;
}

.depart-arrivee a{
  flex:1;
}

.depart-arrivee a:first-child{
  text-align:left;
}

.depart-arrivee a:last-child{
  text-align:right;
}
.depart-arrivee{
  display:flex;
  justify-content:space-evenly; /* <-- rapproche du centre */
  align-items:center;
  width:100%;
  margin:10px 0;
}

.depart-arrivee a{
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:600;
}

.waze-ico{
  width:18px;
  height:18px;
  filter: drop-shadow(0 0 4px #00c3ff);
  flex-shrink:0;
}
/* Bloc DEPART / ARRIVEE centré */
.itineraire .depart-arrivee{
  display:flex;
  justify-content:space-between;
  align-items:center;
  /* largeur contenue pour ne pas coller aux bords */
  width:min(560px, 86%);
  margin:12px auto 8px;
  gap:18px;
}

.itineraire .depart-arrivee .side{
  flex:1;
}
.itineraire .depart-arrivee .side.left{ text-align:left; }
.itineraire .depart-arrivee .side.right{ text-align:right; }

.itineraire .depart-arrivee a{
  display:inline-flex;
  align-items:center;
  gap:8px;                 /* espace entre icône et texte */
  font-weight:700;
  letter-spacing:.5px;
}

/* Icône Waze nette + glow */
.waze-ico{
  width:18px; height:18px;
  color:#7defff;
  filter: drop-shadow(0 0 4px #00c3ff) drop-shadow(0 0 8px #00c3ff);
  flex-shrink:0;
  transform: translateY(1px); /* align visuel avec le texte */
}

/* Mobile : on rapproche encore un peu et on empêche la cassure */
@media (max-width:480px){
  .itineraire .depart-arrivee{
    width:min(520px, 92%);
    gap:12px;
  }
  .itineraire .depart-arrivee a{
    white-space:nowrap;
    font-weight:600;
  }
}