/*
  THE NEW RICH — 2025 Full Redesign (no background images)
  --------------------------------------------------------
  • Clean, conversion‑oriented, mobile‑first UI
  • New topbar, sticky left column (rules), right content cards
  • You said: keep ORANGE for icons → #ff6600 applied
  • Works alongside Bootstrap 4; our rules are more specific
*/

/* =============================
   0) Tokens & Reset
============================= */
:root{
  /* Base surfaces */
  --bg:#F6F7FB;          /* app background */
  --panel:#FFFFFF;       /* cards/panels */
  --line:#E6E9F0;        /* soft borders */

  /* Typography */
  --ink-1:#0F172A;       /* titles */
  --ink-2:#334155;       /* body */
  --ink-3:#64748B;       /* muted */

  /* Brand */
  --primary:#6C5CE7;     /* main accent */
  --accent:#FF7A59;      /* warm secondary */
  --orange:#ff6600;      /* your icon color */

  /* Effects */
  --radius:16px;
  --shadow:0 10px 24px rgba(2, 8, 23, .06);
  --shadow-lg:0 22px 48px rgba(2, 8, 23, .10);
  --ring:0 0 0 4px rgba(108,92,231,.18);
  --header-h:64px;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink-2); line-height:1.65;
  font-family: Inter, "Noto Sans KR", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--primary); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Override legacy icon colors → keep orange everywhere unless overwritten explicitly */
i{ color:var(--orange); }

/* Remove all ugly inline underlines/borders by default */
hr{ border:0; height:1px; background:var(--line); }

/* Utilities */
.hide{ display:none !important; }
.mt-12{ margin-top:12px; } .mt-16{ margin-top:16px; } .mt-24{ margin-top:24px; }
.mb-12{ margin-bottom:12px; } .mb-16{ margin-bottom:16px; } .mb-24{ margin-bottom:24px; }

/* =============================
   1) Site topbar (add HTML snippet below)
============================= */
.site-topbar{
  position:sticky; top:0; z-index:1000; height:var(--header-h);
  background:#fff; border-bottom:1px solid var(--line); box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 20px;
}
.site-brand{ display:flex; align-items:center; gap:10px; color:var(--ink-1); font-weight:900; letter-spacing:.2px; }
.site-brand .dot{ width:10px; height:10px; border-radius:50%; background:var(--orange); display:inline-block; }
.site-actions{ display:flex; align-items:center; gap:10px; }

/* Topbar buttons */
.btn, .btn-primary, .btn-outline, .tnr-cta{
  -webkit-appearance:none; appearance:none; border:none; cursor:pointer; user-select:none;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:10px 16px; min-height:42px; border-radius:999px; font-weight:800; letter-spacing:.2px;
}
.btn-primary, .tnr-cta{ color:#fff; background:linear-gradient(135deg, var(--primary), #8F84FF); box-shadow:0 10px 24px rgba(108,92,231,.28); }
.btn-primary:hover, .tnr-cta:hover{ transform:translateY(-1px); box-shadow:0 16px 34px rgba(108,92,231,.36); text-decoration:none; }
.btn-outline{ background:#fff; color:var(--primary); border:1px solid var(--line); box-shadow:var(--shadow); }
.btn-outline:hover{ background:#F1F5F9; text-decoration:none; }

/* =============================
   2) Main layout (keeps your .principale/.gauche/.droit)
============================= */
.principale{ display:flex; flex-direction:column; min-height:calc(100vh - var(--header-h)); }
.gauche, .droit{ width:100%; padding:20px; }

@media (min-width: 992px){
  .principale{ flex-direction:row; gap:28px; align-items:flex-start; }
  .gauche{ width:40%; padding:32px 32px 48px; border-right:1px solid var(--line); position:sticky; top:calc(var(--header-h) + 16px); height:calc(100vh - var(--header-h) - 32px); overflow:auto; }
  .droit{ width:60%; padding:32px 32px 48px; }
}

/* Common card/panel style */
.card, .gauche > header, .droit > main, .book .page, .regleDuJeu, #first, .first, .login100-form{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
}

/* =============================
   3) Left column: hero + rules as steps
============================= */
.tete{ text-align:left; margin:0; padding:22px 22px 12px; border-bottom:1px solid var(--line); }
.tete h1{ margin:0 0 6px; font-weight:900; color:var(--ink-1); font-size:clamp(28px,3.6vw,44px); letter-spacing:-.02em; line-height:1.08; }
.tete h1 a{ color:inherit; text-decoration:none; }
.tete h1 a:hover{ opacity:.9; }
.tete h2{ color:var(--ink-2); font-weight:800; font-size:clamp(16px,2vw,20px); margin:10px 0 6px; }
.tete p{ font-size:clamp(15px,1.5vw,18px); color:var(--ink-2); }

.regle{ color:var(--ink-1); text-decoration:none; font-weight:900; letter-spacing:.2px; margin:18px 0 0; padding:18px 22px 0; }
.regleDuJeu{ margin:0 22px 22px; padding:18px 22px; }
.regleDuJeu p{ font-size:16px; margin:0 0 12px; }
.regleDuJeu ul{ margin:10px 0 0; padding-left:0; list-style:none; counter-reset: step; }
.regleDuJeu li{ counter-increment: step; position:relative; padding-left:44px; margin:12px 0; }
.regleDuJeu li::before{
  content: counter(step);
  position:absolute; left:0; top:0; width:28px; height:28px; border-radius:50%;
  background:var(--orange); color:#fff; font-weight:800; display:grid; place-items:center;
  box-shadow:0 6px 16px rgba(255,102,0,.25);
}

/* =============================
   4) Right content area: clean sections
============================= */
.droit > main{ padding:26px; }
.droit > main .section{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px; box-shadow:var(--shadow); margin-bottom:18px; }

/* =============================
   5) Forms overhaul (inscri + login)
============================= */
label{ display:block; font-size:13px; font-weight:700; color:var(--ink-2); margin:0 0 6px; }

/* unify all inputs (legacy IDs included) */
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], textarea,
.input100,
input#fname, input#fnam, input#password, input#quest,
input#email, input#contact, input#address{
  width:100%; height:50px; padding:0 16px; font-size:16px; color:var(--ink-1);
  background:#fff; border:1px solid var(--line); border-radius:14px; outline:none;
  box-shadow: inset 0 -1px 0 rgba(2,8,23,.04);
  transition:border-color .2s, box-shadow .2s;
}
textarea{ min-height:120px; padding-top:12px; padding-bottom:12px; resize:vertical; }
input:focus, textarea:focus, .input100:focus{ border-color:var(--primary); box-shadow:var(--ring); }

/* form containers */
#first, .first, .login100-form{ width:min(540px,100%); margin:24px auto; padding:24px; }
.login100-form-title{ font-weight:900; font-size:22px; color:var(--ink-1); text-align:center; margin:6px 0 12px; text-transform:none; }
.login100-form-logo{ width:96px; height:96px; margin:0 auto; border-radius:50%; display:grid; place-items:center; color:#fff; background:var(--orange); box-shadow:var(--shadow); }
.wrap-input100{ padding:8px 0; border:none; }
.focus-input100::before, .focus-input100::after{ display:none; }

/* Buttons inside forms */
input#submit,
.login100-form-btn{
  -webkit-appearance:none; appearance:none; border:none; cursor:pointer; user-select:none;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 20px; min-height:48px; min-width:170px; border-radius:999px; font-weight:800; letter-spacing:.2px;
  color:#fff; background:linear-gradient(135deg, var(--orange), #ff8840);
  box-shadow:0 10px 24px rgba(255,102,0,.28);
  transition: transform .06s ease, box-shadow .2s ease, filter .2s ease;
}
input#submit:hover, .login100-form-btn:hover{ transform:translateY(-1px); box-shadow:0 16px 34px rgba(255,102,0,.36); }

/* Inline tip text */
.help{ font-size:12px; color:var(--ink-3); margin-top:6px; }

/* remove legacy decorations */
input#fname, input#fnam, input#password, input#quest,
input#email, input#contact, input#address{ background-image:none; box-shadow:none; }

/* =============================
   6) Footer socials — all icons orange as requested
============================= */
footer{ display:flex; justify-content:center; align-items:center; gap:28px; padding:28px 0; }
footer i{ font-size:28px; color:var(--orange)!important; filter:drop-shadow(0 4px 10px rgba(2,8,23,.12)); transition: transform .2s, filter .2s, opacity .2s; opacity:.95; }
footer a:hover i{ transform: translateY(-2px) scale(1.06); filter:drop-shadow(0 10px 22px rgba(2,8,23,.22)); opacity:1; }

/* =============================
   7) Typography polish
============================= */
h1{ color:var(--ink-1); font-weight:900; font-size: clamp(28px, 3.2vw, 42px); letter-spacing:-.02em; }
h2, h3{ color:var(--ink-1); font-weight:800; }
p, .regleDuJeu, .book .page p{ font-size:16px; }

/* =============================
   8) Misc cards & book pages
============================= */
.card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.divider{ height:1px; background:var(--line); margin:18px 0; }
.book{ max-width:1100px; margin:0 auto; padding:0 12px; }
.book .page{ padding:22px; }
@media (min-width:768px){ .book{ display:flex; flex-wrap:wrap; gap:2%; } .book .page{ width:49%; } }

/* =============================
   9) Responsive tweaks & a11y
============================= */
@media (max-width: 768px){ .gauche, .droit{ padding:16px; } .gauche{ position:static; height:auto; overflow:visible; border-right:none; } footer{ gap:22px; padding:22px 0; } }
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }


/* ===== Boutons Connexion / Déconnexion ===== */

.connect {
  text-align: right;
  margin-bottom: 20px;
}

.tnr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: 0.25s;
  user-select: none;
}

/* Déconnexion = bouton plein orange */
.tnr-btn-orange {
  background: linear-gradient(135deg, #ff6600, #ff8840);
  color: #fff;
  box-shadow: 0 6px 16px rgba(255, 102, 0, 0.35);
}

.tnr-btn-orange:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(255, 102, 0, 0.5);
}

/* Connexion = bouton contour léger */
.tnr-btn-outline {
  border: 2px solid #ff6600;
  color: #ff6600;
  background: transparent;
}

.tnr-btn-outline:hover {
  background: #fff3e8;
  box-shadow: 0 6px 16px rgba(255, 102, 0, 0.25);
  transform: translateY(-2px);
}

/* ===== Desktop layout: 50 / 50 ===== */
@media (min-width: 992px){
  .principale{
    flex-direction: row;
    gap: 24px;                 /* un peu moins d’espace */
    align-items: flex-start;
  }
  .gauche{
    width: 50%;                /* était 40% */
    padding: 32px 32px 48px;
    border-right: 1px solid var(--line);
    position: sticky;          /* conserve l’effet “fixe” à gauche */
    top: calc(var(--header-h) + 16px);
    height: calc(100vh - var(--header-h) - 32px);
    overflow: auto;
  }
  .droit{
    width: 50%;                /* était 60% */
    padding: 32px 32px 48px;
  }
}

/* ===== Boutons Connexion / Déconnexion (style + icônes) ===== */
.connect{
  text-align: right;
  margin-bottom: 20px;
}

.tnr-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: 0.25s;
  user-select: none;
  gap: 8px;
}

.tnr-btn i{ font-size: 16px; }

/* Déconnexion = bouton plein orange */
.tnr-btn-orange{
  margin-top: 5px;
  background: linear-gradient(135deg, #ff6600, #ff8840);
  color: #fff;
  box-shadow: 0 6px 16px rgba(255,102,0,.35);
}
.tnr-btn-orange i{ color:#fff !important; }
.tnr-btn-orange:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(255,102,0,.5);
}

/* Connexion = bouton contour orange */
.tnr-btn-outline{
  margin-top: 5px;
  border: 2px solid #ff6600;
  color: #ff6600;
  background: transparent;
  box-shadow: 0 2px 8px rgba(255,102,0,.1);
}
.tnr-btn-outline i{ color:#ff6600 !important; }
.tnr-btn-outline:hover{
  background: #fff3e8;
  box-shadow: 0 6px 16px rgba(255,102,0,.25);
  transform: translateY(-2px);
}

.mb-12,
.mb-16 {
  display: flex;
  justify-content: center;
  text-align: center;
}

@media (min-width: 768px){
  .first,
  .login100-form {
    text-align: center;
  }

  .container-login100-form-btn.mt-16,
  .container-login100-form-btn.mt-12 {
    display: inline-flex;
  }
}

/* Centrer la page de paiement */
.pay-center{
  min-height: 80vh; /* prend de la hauteur pour centrer */
  display: flex;
  flex-direction: column;
  justify-content: center; /* centre vertical */
  align-items: center;      /* centre horizontal */
  text-align: center;
  padding: 32px 16px;
}

/* Empêcher Paypal de s'étaler */
#paypal-button-container{
  margin-top: 24px;
  width: 100%;
  max-width: 350px;
}

/* Centrage de la page "question" */
.center-quest {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centre vertical */
  align-items: center; /* Centre horizontal */
  text-align: center;
  padding: 24px;
}

/* Limite la largeur pour éviter que ça s'étale trop */
.center-quest form,
.center-quest img,
.center-quest p {
  max-width: 420px;
  width: 100%;
}

/* Centre le bouton Valider proprement */
.center-quest input#submit {
  margin-top: 16px;
}

/* Page remerciement centrée */
.thank-wrap {
  min-height: 80vh;                /* centre vertical même avec peu de texte */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 24px;
}

/* Style du message */
.thank-wrap h1 {
  font-size: clamp(24px, 4vw, 42px);
  font-weight: 800;
  color: var(--ink-1);
  background: #fff;
  padding: 24px 40px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  animation: thank-pop .5s ease;
}

/* Animation légère pour un effet premium */
@keyframes thank-pop {
  0% { transform: scale(.92); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Centrage général de la page admin */
.admin-center {
  min-height: calc(100vh - var(--header-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 18px;
  padding: 32px 16px;
}

/* Titre */
.admin-title {
  font-size: 32px;
  font-weight: 900;
  color: var(--ink-1);
  text-decoration: none;
}
.admin-title:hover { opacity: .8; }

/* Bouton stylisé Recommencer une partie */
.admin-restart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 16px;
  color: #fff !important;
  background: linear-gradient(135deg, #ff6600, #ff8840);
  box-shadow: 0 6px 16px rgba(255,102,0,.35);
  text-decoration: none;
  transition: .25s;
}

.admin-restart:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(255,102,0,.5);
}

/* Messages */
.admin-error { color: red; }
.admin-count { color: var(--ink-2); font-weight: 600; }
.admin-winner { color: green; }

/* Formulaire */
.admin-form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
  width: min(420px, 95%);
}

html { scroll-behavior: smooth; }        /* défilement fluide */