/* =========================
   Naughty Bonds — Theme CSS
   (refresh 2025-08)
   ========================= */

/* Variables de thème */
:root{
  --nb-pink: #d63384;
  --nb-pink-700:#a61e61;
  --nb-rose-50:#fff5f8;
  --nb-rose-100:#fdf0f5;
  --nb-lavender-50:#f3e5f5;
  --nb-purple:#7b1fa2;
  --nb-text:#333;
  --nb-muted:#555;
  --nb-border:#e0e0e0;
  --nb-shadow: 0 6px 18px rgba(214,51,132,.12);
  --nb-radius: 12px;
}

/* ===== GENERAL ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Segoe UI','Roboto',system-ui,-apple-system,sans-serif;
  background:#fff;
  color:var(--nb-text);
  margin:0;
  padding:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
main{flex:1}

a{
  color:var(--nb-pink);
  text-decoration:none;
  transition:color .2s ease, text-decoration-color .2s ease;
}
a:hover{color:var(--nb-pink-700); text-decoration:underline}

/* Accessibilité: moins d’animations si demandé */
@media (prefers-reduced-motion: reduce){
  *{animation: none !important; transition: none !important;}
}

/* ===== NAVBAR ===== */
.navbar{
  border-bottom:2px solid var(--nb-pink);
  padding:.7rem 1rem;
  background:linear-gradient(90deg, var(--nb-rose-50), #fff);
}
.navbar-brand img{height:48px}

.navbar-nav .nav-link{
  color:var(--nb-text) !important;
  font-weight:400;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.5rem .9rem;
  border-radius:.75rem;
  transition:background-color .2s ease, color .2s ease, transform .15s ease;
}
.navbar-nav .nav-link i{opacity:.9; line-height:1}
.navbar-nav .nav-link:hover{
  background:linear-gradient(135deg, var(--nb-rose-100), var(--nb-lavender-50));
  color:var(--nb-purple) !important;
  transform:translateY(-1px);
}
/* État actif (optionnel: ajoutez .active côté PHP) */
.navbar-nav .nav-link.active{
  background:linear-gradient(135deg, var(--nb-pink), var(--nb-purple));
  color:#fff !important;
  box-shadow:var(--nb-shadow);
}
.navbar .dropdown-menu .dropdown-item{
  display:flex; align-items:center; gap:.5rem;
}

/* ===== FOOTER ===== */
footer{
  background:#f8f9fa;
  border-top:2px solid var(--nb-pink);
  padding:1rem 0;
  font-size:.95rem;
  text-align:center;
  color:var(--nb-muted);
}
footer a{color:var(--nb-pink)}
footer a:hover{color:var(--nb-pink-700)}

/* ===== BUTTONS ===== */
.btn-primary{
  background-color:var(--nb-pink);
  border-color:var(--nb-pink);
}
.btn-primary:hover{
  background-color:var(--nb-pink-700);
  border-color:var(--nb-pink-700);
}
.btn-outline-light{
  border-color:var(--nb-pink);
  color:var(--nb-pink);
}
.btn-outline-light:hover{
  background-color:var(--nb-pink);
  color:#fff;
}
/* Focus states (accessibilité) */
.btn:focus, .form-control:focus, .form-select:focus{
  outline:0;
  box-shadow:0 0 0 .2rem rgba(214,51,132,.25);
  border-color:var(--nb-pink);
}

/* ===== CONTAINERS / BOXES ===== */
.card{
  background-color:#fff;
  border:1px solid var(--nb-border);
  border-radius:var(--nb-radius);
  box-shadow:var(--nb-shadow);
}
.nb-card{border:0;}
.nb-title{font-weight:800; letter-spacing:.3px;}
.nb-muted{color:#7a7a7a;}
.nb-badge{background:#ec407a;}
.nb-outline{border:1px solid var(--nb-pink); color:var(--nb-pink);}

/* ===== HEADINGS ===== */
h1,h2,h3,h4{color:var(--nb-pink);}

/* === Slider des défis === */
.challenge-slider{
  background-color:var(--nb-rose-100);
  border-top:2px solid var(--nb-pink);
  border-bottom:2px solid var(--nb-pink);
}
.challenge-card{
  background:#fff;
  border:1px solid #e3e3e3;
  border-radius:10px;
  min-height:160px;
  color:var(--nb-text);
  transition:transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}
.challenge-card:hover{
  background:#fef6f9;
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(214,51,132,.12);
}

.decription-field{min-height:200px;}

/* ===== WHEEL OF FORTUNE ===== */
#wheelWrapper{
  position:relative;
  width:100%;
  max-width:400px;
  margin:0 auto 2rem;
}
/* Pointe unique (suppression du doublon + cohérence couleurs) */
#wheelWrapper #pointer{
  position:absolute;
  top:-10px;
  left:50%;
  transform:translateX(-50%);
  width:0; height:0;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-bottom:20px solid var(--nb-pink);
  z-index:10;
}
#wheelContainer{
  width:100%;
  height:0;
  padding-bottom:100%; /* ratio carré */
  position:relative;
  transition:transform 5s cubic-bezier(0.33,1,0.68,1);
}
#wheelContainer canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:2px solid var(--nb-pink);
  border-radius:50%;
}
.color-box{
  width:16px; height:16px;
  border:1px solid var(--nb-pink);
  display:inline-block;
  margin-right:8px;
}

/* ===== Collapse lists (Outils / Endroits) ===== */
.collapse .border{
  border-color:#eee !important;
}
.collapse .border:hover{
  background:var(--nb-rose-50);
}
.collapse-toggle{
  cursor:pointer;
  user-select:none;
}

/* ===== Forms ===== */
.form-control, .form-select{
  border-radius:10px;
  border-color:#e6e6e6;
}
.form-control:hover, .form-select:hover{
  border-color:#dcdcdc;
}

/* ===== Cookie banner ===== */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0;
  background:#f8f9fa;
  color:var(--nb-text);
  padding:15px 20px;
  border-top:1px solid #ddd;
  text-align:center;
  z-index:9999;
  display:none;
}
.cookie-banner p{margin:0; font-size:14px;}
.cookie-banner .btn{margin-top:10px;}

/* === Footer NB === */
.nb-footer {
  background: #f8f9fa;
  border-top: 2px solid var(--nb-pink, #d63384);
}
.nb-footer-logo { height: 40px; }
.nb-footer a.nb-footer-link { color: #333; text-decoration: none; }
.nb-footer a.nb-footer-link:hover { color: var(--nb-pink, #d63384); text-decoration: underline; }
.nb-footer-muted { color: #666; }

/* === Cookie banner === */
.nb-cookie {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, var(--nb-pink, #d63384), var(--nb-purple, #7b1fa2));
  color: #fff;
  z-index: 1080;
}
.nb-cookie .btn.btn-light { color: var(--nb-pink, #d63384); font-weight: 600; }

.result-line + .result-line { 
  border-top: 1px solid #eee; 
  margin-top: .25rem; 
  padding-top: .25rem; 
}

/* ===== NAVBAR COMPACTE / TITRES / ESPACES ===== */
.nb-compact-nav .navbar-brand img { height: 40px !important; width: auto !important; }
.nb-compact-nav .beta-badge { font-size: .65rem !important; padding: .15rem .4rem !important; border-radius: .4rem !important; }

.nb-compact-nav .nav-link {
  font-size: .92rem !important;
  padding: .3rem .55rem !important;
  line-height: 1.2 !important;
}
.nb-compact-nav .nav-link .bi { font-size: 1rem !important; margin-right: .35rem !important; }
.nb-compact-nav .fs-4 { font-size: 1.1rem !important; } /* icône profil */
.nb-compact-nav .navbar-nav { gap: 1rem !important; }   /* espace entre liens */

/* Tailles des titres globales */
h1, .h1 { font-size: 1.45rem !important; }
h2, .h2 { font-size: 1.25rem !important; }
h3, .h3 { font-size: 1.1rem  !important; }
h4, .h4 { font-size: 1rem    !important; }
h5, .h5 { font-size: .95rem  !important; }
h6, .h6 { font-size: .9rem   !important; }
.nb-title { font-size: 1rem !important; margin-bottom: .5rem !important; }

/* Espacement global entre boutons proches */
.btn + .btn { margin-left: .5rem !important; }

/* ===== Badge BÊTA OUVERTE (animé) ===== */
.beta-badge{
  --c1:#ff4d4f;--c2:#ff9f43;--c3:#7bd88f;--c4:#5c7cfa;
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.35rem .65rem;border-radius:999px;font-weight:700;font-size:.75rem;
  letter-spacing:.4px;color:#fff;text-transform:uppercase;white-space:nowrap;
  background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3),var(--c4),var(--c1));
  background-size:400% 400%;
  animation:nb-gradient 8s ease infinite, nb-pop .6s ease .15s both, nb-glow 2.2s ease-in-out infinite;
}
.beta-badge::before{
  content:"";width:8px;height:8px;border-radius:50%;background:#fff;opacity:.95;
  box-shadow:0 0 0 0 rgba(255,255,255,.6);animation:nb-pulse 2s infinite;
}
@keyframes nb-gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes nb-pop{0%{transform:scale(.85);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes nb-pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}70%{box-shadow:0 0 0 10px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
@keyframes nb-glow{0%,100%{filter:drop-shadow(0 0 0 rgba(255,77,79,0))}50%{filter:drop-shadow(0 0 12px rgba(255,77,79,.35))}}

@media (max-width: 576px){
  .beta-badge{ font-size:.7rem; padding:.28rem .55rem; }
}