/* ══════════════════════════════════════════════════════════════════════════
   FAQE V3 — Design Premium "Continent & Nature"
   Palette : #0A1628 nuit · #1E3A5F forêt profonde · #2DD4BF eau claire
             #22C55E vert nature · #F59E0B or solaire · #F0EDE8 ivoire
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Variables CSS ────────────────────────────────────────────────────────── */
:root {
  --night:    #0A1628;
  --deep:     #1E3A5F;
  --ocean:    #112240;
  --teal:     #2DD4BF;
  --teal-d:   #1A9E8F;
  --nature:   #22C55E;
  --nature-d: #16A34A;
  --gold:     #F59E0B;
  --ivory:    #F0EDE8;
  --radius-sm: .75rem;
  --radius:    1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --shadow-teal: 0 20px 60px rgba(45,212,191,.12);
  --shadow-glow: 0 0 40px rgba(45,212,191,.2);
  --transition: all .3s cubic-bezier(.22,1,.36,1);
}

/* ── Overrides Bootstrap ──────────────────────────────────────────────────── */
body {
  background-color: var(--night) !important;
  color: var(--ivory) !important;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
  overflow-x: hidden;
}

/* ── Couleurs custom Bootstrap ────────────────────────────────────────────── */
.text-teal   { color: var(--teal) !important; }
.text-nature { color: var(--nature) !important; }
.text-gold   { color: var(--gold) !important; }
.text-ivory  { color: var(--ivory) !important; }
.bg-night    { background-color: var(--night) !important; }
.bg-deep     { background-color: var(--deep) !important; }
.bg-teal     { background-color: var(--teal) !important; }

.btn-teal {
  background: linear-gradient(135deg, var(--teal), var(--teal-d));
  color: var(--night) !important;
  font-weight: 700;
  border: none;
  border-radius: var(--radius-sm);
  padding: .75rem 2rem;
  transition: var(--transition);
}
.btn-teal:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(45,212,191,.3); filter: brightness(1.08); }

.btn-nature {
  background: linear-gradient(135deg, var(--nature), var(--nature-d));
  color: #fff !important;
  font-weight: 700;
  border: none;
  border-radius: var(--radius-sm);
  padding: .75rem 2rem;
  transition: var(--transition);
}
.btn-nature:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(34,197,94,.3); }

.btn-outline-teal {
  color: var(--teal) !important;
  border: 1.5px solid rgba(45,212,191,.5) !important;
  border-radius: var(--radius-sm);
  padding: .75rem 2rem;
  font-weight: 600;
  background: transparent !important;
  transition: var(--transition);
}
.btn-outline-teal:hover { background: rgba(45,212,191,.08) !important; border-color: var(--teal) !important; transform: translateY(-2px); }

/* ── Cards Glass ──────────────────────────────────────────────────────────── */
.glass {
  background: rgba(30,58,95,.25);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius-lg);
}
.glass-hover {
  transition: var(--transition);
  cursor: pointer;
}
.glass-hover:hover {
  border-color: rgba(45,212,191,.3);
  box-shadow: var(--shadow-teal);
  transform: translateY(-5px);
}

/* ── Gradients & effets texte ─────────────────────────────────────────────── */
.grad-text {
  background: linear-gradient(135deg, #2DD4BF 0%, #F59E0B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.grad-text-nature {
  background: linear-gradient(135deg, #22C55E 0%, #2DD4BF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.section-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--teal);
}

/* ── Orbes décoratives ────────────────────────────────────────────────────── */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.orb-teal   { background: rgba(45,212,191,.25); }
.orb-gold   { background: rgba(245,158,11,.18); }
.orb-green  { background: rgba(34,197,94,.2); }
.orb-blue   { background: rgba(99,102,241,.15); }

/* ── Grille décorative ────────────────────────────────────────────────────── */
.grid-bg {
  background-image: linear-gradient(rgba(45,212,191,.03) 1px,transparent 1px),
                    linear-gradient(90deg,rgba(45,212,191,.03) 1px,transparent 1px);
  background-size: 60px 60px;
}

/* ── Reveal scroll ────────────────────────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(30px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in { opacity:1; transform:none; }

/* ── Image frame (pour les espaces photo humanisme) ──────────────────────── */
.img-frame {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  position: relative;
}
.img-frame img { width:100%; height:100%; object-fit:cover; }
.img-frame-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,22,40,.6) 0%, transparent 50%);
}
.img-placeholder {
  background: linear-gradient(135deg, var(--deep), var(--ocean));
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.2);
  font-size: 3rem;
  min-height: 280px;
  border-radius: var(--radius-xl);
  border: 2px dashed rgba(255,255,255,.08);
  position: relative;
  overflow: hidden;
}
.img-placeholder::after {
  content: 'Ajouter une image';
  position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);
  font-size: .75rem; color: rgba(255,255,255,.3); font-family: sans-serif; white-space: nowrap;
}

/* ── Event card ───────────────────────────────────────────────────────────── */
.event-card {
  background: linear-gradient(145deg, rgba(30,58,95,.5), rgba(10,22,40,.7));
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}
.event-card:hover {
  border-color: rgba(45,212,191,.35);
  box-shadow: var(--shadow-teal);
  transform: translateY(-5px);
}
.event-card .event-img {
  width: 100%; height: 180px; object-fit: cover;
  background: linear-gradient(135deg, var(--deep), var(--ocean));
}
.event-card .event-img-placeholder {
  width: 100%; height: 180px;
  background: linear-gradient(135deg, rgba(30,58,95,.8), rgba(17,34,64,.9));
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; color: rgba(255,255,255,.12);
}

/* ── Ticket premium ───────────────────────────────────────────────────────── */
.ticket-wrap { perspective: 1400px; }
.ticket-inner { position:relative; transition:transform .7s cubic-bezier(.23,1,.32,1); transform-style:preserve-3d; min-height:460px; }
.ticket-wrap.flipped .ticket-inner { transform:rotateY(180deg); }
.ticket-face, .ticket-back-face { backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.ticket-back-face { position:absolute; inset:0; transform:rotateY(180deg); }
.ticket-card {
  background: linear-gradient(145deg, #1E3A5F 0%, #0A1628 70%);
  border: 1px solid rgba(45,212,191,.2);
  border-radius: var(--radius-xl);
  overflow: hidden; position: relative;
}
.ticket-card::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse at 25% 20%, rgba(45,212,191,.08), transparent 60%);
  pointer-events: none;
}
.ticket-dashed {
  border: none; border-top: 2px dashed rgba(45,212,191,.2);
  position: relative; margin: 0 2rem;
}
.ticket-dashed::before, .ticket-dashed::after {
  content:''; position:absolute; top:50%; transform:translateY(-50%);
  width:1.4rem; height:1.4rem;
  background:var(--night); border-radius:50%;
  border:1px solid rgba(45,212,191,.15);
}
.ticket-dashed::before { left:-2.5rem; }
.ticket-dashed::after  { right:-2.5rem; }

/* ── Tampon ───────────────────────────────────────────────────────────────── */
.stamp {
  display:inline-block;
  border:2.5px solid #22C55E; color:#22C55E;
  padding:.3rem 1rem;
  font-size:.7rem; font-weight:900;
  text-transform:uppercase; letter-spacing:.25em;
  border-radius:4px; opacity:0;
}
.stamp.show { animation:stampIn .45s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes stampIn {
  from { opacity:0; transform:scale(.3) rotate(-15deg); }
  to   { opacity:1; transform:scale(1) rotate(-2deg); }
}

/* ── Scanner ──────────────────────────────────────────────────────────────── */
.scan-frame {
  position:relative; border:2px solid rgba(45,212,191,.4);
  border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:0 0 40px rgba(45,212,191,.12);
}
.laser {
  position:absolute; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,#2DD4BF,transparent);
  box-shadow:0 0 10px 3px rgba(45,212,191,.7);
  animation:laserMove 1.8s ease-in-out infinite;
  z-index:10; pointer-events:none;
}
@keyframes laserMove { 0%{top:0%} 50%{top:95%} 100%{top:0%} }
.scan-corner { position:absolute; width:22px; height:22px; border-color:#2DD4BF; border-style:solid; z-index:11; }
.scan-corner.tl { top:8px; left:8px; border-width:3px 0 0 3px; }
.scan-corner.tr { top:8px; right:8px; border-width:3px 3px 0 0; }
.scan-corner.bl { bottom:8px; left:8px; border-width:0 0 3px 3px; }
.scan-corner.br { bottom:8px; right:8px; border-width:0 3px 3px 0; }
.scan-overlay {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.75rem;
  border-radius:var(--radius-lg); z-index:20;
  opacity:0; pointer-events:none; transition:opacity .2s;
  backdrop-filter:blur(6px);
}
.scan-overlay.show { opacity:1; pointer-events:auto; }
.scan-overlay.v-ok  { background:rgba(5,150,105,.9); }
.scan-overlay.v-dup { background:rgba(180,83,9,.9); }
.scan-overlay.v-err { background:rgba(185,28,28,.9); }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-10px)} 40%{transform:translateX(10px)} 60%{transform:translateX(-6px)} 80%{transform:translateX(6px)} }
.shake { animation:shake .4s ease; }

/* ── Jauge ────────────────────────────────────────────────────────────────── */
.jauge-wrap { height:6px; background:rgba(255,255,255,.07); border-radius:999px; overflow:hidden; }
.jauge-fill { height:100%; border-radius:999px; width:0; transition:width 1.4s cubic-bezier(.22,1,.36,1); background:linear-gradient(90deg,#2DD4BF,#1A9E8F); }
.jauge-fill.gold   { background:linear-gradient(90deg,#F59E0B,#d97706); }
.jauge-fill.nature { background:linear-gradient(90deg,#22C55E,#16A34A); }

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.form-control-night, .form-select-night {
  background: rgba(17,34,64,.7) !important;
  border: 1.5px solid rgba(255,255,255,.12) !important;
  color: var(--ivory) !important;
  border-radius: var(--radius-sm) !important;
  padding: .875rem 1rem !important;
  transition: border-color .2s, box-shadow .2s;
}
.form-control-night::placeholder { color: rgba(240,237,232,.3) !important; }
.form-control-night:focus, .form-select-night:focus {
  border-color: var(--teal) !important;
  box-shadow: 0 0 0 3px rgba(45,212,191,.14) !important;
  outline: none !important;
}
.form-select-night option { background: #112240; color: var(--ivory); }
.form-label-night { display:block; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:rgba(240,237,232,.45); margin-bottom:.5rem; }

/* ── Partenaires carousel ─────────────────────────────────────────────────── */
.partner-logo-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  transition: var(--transition);
  min-height: 140px;
}
.partner-logo-card:hover { border-color: rgba(45,212,191,.3); background:rgba(45,212,191,.04); transform:translateY(-3px); }
.partner-logo-card img { max-height: 60px; max-width: 160px; object-fit: contain; filter: brightness(0.9); transition: filter .2s; }
.partner-logo-card:hover img { filter: brightness(1); }
.partner-logo-placeholder {
  width:80px; height:40px;
  background:rgba(255,255,255,.06);
  border-radius:.5rem;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; color:rgba(255,255,255,.2);
}

/* ── OTP input ────────────────────────────────────────────────────────────── */
.otp-input {
  width:56px; height:64px;
  text-align:center; font-size:1.75rem; font-weight:900;
  background:rgba(17,34,64,.8) !important;
  border:2px solid rgba(255,255,255,.12) !important;
  border-radius:.875rem !important;
  color:var(--ivory) !important;
  transition:border-color .2s, box-shadow .2s;
}
.otp-input:focus { border-color:var(--teal) !important; box-shadow:0 0 0 3px rgba(45,212,191,.2) !important; outline:none !important; }
.otp-input.filled { border-color:var(--teal) !important; }

/* ── Admin sidebar ────────────────────────────────────────────────────────── */
.admin-sidebar { background:rgba(17,34,64,.95); backdrop-filter:blur(20px); border-right:1px solid rgba(255,255,255,.05); }
.admin-nav-link { display:flex; align-items:center; gap:.75rem; padding:.625rem 1rem; border-radius:.75rem; font-size:.875rem; color:rgba(240,237,232,.5); text-decoration:none; font-weight:500; transition:var(--transition); white-space:nowrap; }
.admin-nav-link:hover { background:rgba(255,255,255,.06); color:var(--ivory); }
.admin-nav-link.active { background:rgba(45,212,191,.1); color:var(--teal); }
.stat-card { background:rgba(17,34,64,.6); border:1px solid rgba(255,255,255,.07); border-radius:var(--radius-lg); padding:1.5rem; transition:var(--transition); }
.stat-card:hover { border-color:rgba(45,212,191,.2); transform:translateY(-2px); }

/* ── Tableaux admin ───────────────────────────────────────────────────────── */
.tbl-dark-custom { border-collapse:separate; border-spacing:0; width:100%; }
.tbl-dark-custom th { background:rgba(17,34,64,.8)!important; color:rgba(240,237,232,.35)!important; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; padding:.75rem 1rem!important; border-bottom:1px solid rgba(255,255,255,.06)!important; white-space:nowrap; }
.tbl-dark-custom td { padding:.9rem 1rem!important; color:rgba(240,237,232,.75)!important; border-bottom:1px solid rgba(255,255,255,.04)!important; vertical-align:middle!important; }
.tbl-dark-custom tbody tr:hover td { background:rgba(45,212,191,.03)!important; }

/* ── Membre card ──────────────────────────────────────────────────────────── */
.membre-card { background:linear-gradient(145deg,rgba(17,34,64,.8),rgba(10,22,40,.9)); border:1px solid rgba(255,255,255,.07); border-radius:var(--radius-lg); overflow:hidden; transition:var(--transition); }
.membre-card:hover { border-color:rgba(45,212,191,.3); box-shadow:var(--shadow-teal); transform:translateY(-4px); }

/* ── Paiement badges ──────────────────────────────────────────────────────── */
.badge-stripe  { background:#635bff22; color:#8B83FF; border:1px solid #635bff33; }
.badge-fedapay { background:#f5a62322; color:#F5A623; border:1px solid #f5a62333; }
.badge-gratuit { background:rgba(34,197,94,.12); color:#4ADE80; border:1px solid rgba(34,197,94,.25); }

/* ── Star rating interactif ───────────────────────────────────────────────── */
.star-btn { cursor:pointer; font-size:1.5rem; color:rgba(255,255,255,.2); transition:color .15s; padding:0 .2rem; border:none; background:none; }
.star-btn:hover, .star-btn.active { color:#F59E0B; }

/* ── Print ────────────────────────────────────────────────────────────────── */
@media print {
  .no-print, nav, .navbar, footer { display:none!important; }
  body { background:#fff!important; color:#000!important; }
  .ticket-card { box-shadow:none!important; border:2px dashed #333!important; }
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
  .reveal { transition:none; opacity:1; transform:none; }
  .laser  { animation:none; top:50%; }
  .glass-hover:hover, .event-card:hover { transform:none; }
}