/* =====================================================================
   Chasse au trésor — styles (fichier séparé, ne touche pas à styles.css)
   Palette du site : --jaune #E9DD00, --encre #1B1A16 + une touche
   « urbaine » orangée empruntée à Urban Rivals.
   ===================================================================== */
:root{ --ur-orange:#E8541E; --ur-orange-2:#ff7a3d; }

/* ---------- HÉRO ---------- */
.ct-hero{position:relative;overflow:hidden;min-height:min(74vh,560px);display:flex;align-items:flex-end;
  background:#0d0b08;color:#fff}
.ct-hero-bg{position:absolute;inset:0;background:center/cover no-repeat;transform:scale(1.03);
  filter:saturate(1.05) contrast(1.02)}
.ct-hero-veil{position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 15% 110%, rgba(233,221,0,.16), transparent 55%),
    linear-gradient(180deg, rgba(13,11,8,.45) 0%, rgba(13,11,8,.72) 55%, rgba(13,11,8,.97) 100%)}
.ct-hero-in{position:relative;z-index:2;padding:40px 0 46px}
.ct-hero .eyebrow,.ct-hero h1,.ct-hero h2{color:#fff}
.ct-breadcrumb{color:rgba(255,255,255,.75);margin-bottom:18px}
.ct-breadcrumb a{color:rgba(255,255,255,.9)}
.ct-badge{display:inline-block;background:var(--jaune);color:#1B1A16;font-weight:700;font-size:.78rem;
  letter-spacing:.05em;text-transform:uppercase;padding:6px 13px;border-radius:999px;margin-bottom:16px}
.ct-title{color:#fff!important;font-family:"Marcellus",serif;font-weight:400;line-height:1.05;margin:0 0 14px;
  font-size:clamp(2.1rem,5.5vw,3.6rem);text-shadow:0 3px 18px rgba(0,0,0,.5)}
.ct-sub{max-width:640px;font-size:clamp(1rem,1.6vw,1.18rem);line-height:1.6;color:rgba(255,255,255,.92);margin:0 0 26px}
.ct-cta{display:flex;gap:14px;flex-wrap:wrap}
.ct-btn-play{background:var(--jaune);color:#1B1A16;border-color:var(--jaune);font-size:1.05rem;padding:14px 26px}
.ct-btn-play:hover{background:#fff;border-color:#fff}
.ct-btn-how{background:transparent!important;color:#fff!important;border-color:rgba(255,255,255,.5)}
.ct-btn-how:hover{background:rgba(255,255,255,.14)!important;border-color:#fff}

/* ---------- PARTENARIAT ---------- */
.ct-partner{background:linear-gradient(180deg,#161310,#1B1A16);color:#fff;padding:34px 0}
.ct-partner-in{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.ct-partner-logo{flex:none;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:16px;padding:18px 24px}
.ct-partner-logo img{display:block;height:64px;width:auto;filter:drop-shadow(0 4px 12px rgba(0,0,0,.45))}
.ct-partner-txt{flex:1 1 340px}
.ct-partner-txt .eyebrow{color:var(--ur-orange-2)}
.ct-partner-txt p{color:rgba(255,255,255,.9);line-height:1.65;margin:.4rem 0 0;max-width:720px}
.ct-partner-txt strong{color:#fff}

/* ---------- COMMENT ÇA MARCHE ---------- */
.ct-steps{padding:52px 0}
.ct-steplist{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.ct-steplist li{display:flex;gap:14px;align-items:flex-start;background:var(--blanc);
  border:1px solid var(--trait);border-radius:14px;padding:18px 18px;box-shadow:var(--shadow);
  border-top:3px solid var(--jaune)}
.ct-num{flex:none;width:38px;height:38px;border-radius:50%;background:var(--encre);color:var(--jaune);
  display:flex;align-items:center;justify-content:center;font-family:"Marcellus",serif;font-size:1.2rem}
.ct-steplist b{display:block;margin-bottom:3px}
.ct-steplist p{margin:0;color:var(--muet);font-size:.92rem;line-height:1.5}

/* ---------- ZONE DE JEU ---------- */
.ct-game{padding:8px 0 64px}
.ct-card{background:var(--blanc);border:1px solid var(--trait);border-radius:18px;
  box-shadow:var(--shadow);padding:clamp(22px,4vw,40px);max-width:720px;margin:0 auto;position:relative}
.ct-card::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;border-radius:18px 18px 0 0;
  background:linear-gradient(90deg,var(--jaune),var(--ur-orange))}

/* écran d'accueil du jeu */
.ct-intro h2{font-family:"Marcellus",serif;font-weight:400;font-size:1.7rem;margin:0 0 6px}
.ct-intro p.lead{color:var(--muet);margin:0 0 20px}
.ct-field{margin-bottom:16px}
.ct-field label{display:block;font-weight:600;font-size:.88rem;margin-bottom:6px}
.ct-field input{width:100%;font:inherit;font-size:16px;padding:13px 15px;border:1px solid var(--trait);
  border-radius:11px;background:var(--pierre)}
.ct-field .hint{display:block;margin-top:6px;font-size:.82rem;color:var(--muet)}
.ct-code-input{text-transform:uppercase;letter-spacing:.22em;font-weight:700;font-size:1.3rem!important;text-align:center}
.ct-row2{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:end}
.ct-nb{width:96px}
.ct-err{color:#B23120;font-size:.92rem;margin:6px 0 0;min-height:1.1em}
.ct-start-btn{width:100%;justify-content:center;font-size:1.05rem;padding:15px;margin-top:6px}

/* progression */
.ct-progress{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.ct-bar{flex:1 1 auto;height:10px;background:var(--pierre-2);border-radius:999px;overflow:hidden}
.ct-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--jaune),var(--ur-orange));
  border-radius:999px;transition:width .4s ease}
.ct-progress .lbl{flex:none;font-size:.85rem;color:var(--muet);font-weight:600;white-space:nowrap}

/* question */
.ct-q-num{font-size:.8rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--or-txt)}
.ct-q-text{font-family:"Marcellus",serif;font-weight:400;font-size:1.5rem;line-height:1.3;margin:6px 0 20px}
.ct-choices{display:grid;gap:12px}
.ct-choice{display:flex;align-items:center;gap:14px;width:100%;text-align:left;font:inherit;font-size:1.02rem;
  padding:15px 18px;border:2px solid var(--trait);border-radius:13px;background:var(--blanc);cursor:pointer;
  transition:border-color .12s,background .12s,transform .08s}
.ct-choice:hover{border-color:var(--or-txt);background:var(--pierre)}
.ct-choice:active{transform:scale(.995)}
.ct-choice .k{flex:none;width:32px;height:32px;border-radius:50%;background:var(--pierre-2);color:var(--encre);
  display:flex;align-items:center;justify-content:center;font-weight:700}
.ct-choice.is-right{border-color:#2E7D46;background:#EAF6EE}
.ct-choice.is-right .k{background:#2E7D46;color:#fff}
.ct-choice.is-wrong{border-color:#B23120;background:#FBEEEA;animation:ctShake .35s}
.ct-choice.is-wrong .k{background:#B23120;color:#fff}
.ct-choice:disabled{cursor:default}
@keyframes ctShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.ct-feedback{margin-top:16px;font-size:.95rem;min-height:1.4em;text-align:center}
.ct-feedback.ok{color:#2E7D46;font-weight:600}
.ct-feedback.ko{color:#B23120}
.ct-retry-timer{font-weight:700}

/* victoire */
.ct-win{text-align:center}
.ct-win .trophy{font-size:3.4rem;line-height:1;margin-bottom:10px}
.ct-win h2{font-family:"Marcellus",serif;font-weight:400;font-size:2rem;margin:0 0 8px}
.ct-win p{color:var(--muet);margin:0 auto 22px;max-width:460px}
.ct-win .btn{margin:4px}

/* ---------- BON DE RETRAIT (imprimable) ---------- */
.ct-voucher{max-width:560px;margin:0 auto;border:2px dashed var(--encre);border-radius:16px;
  padding:28px;background:#fff;position:relative}
.ct-voucher-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  border-bottom:2px solid var(--encre);padding-bottom:14px;margin-bottom:16px}
.ct-voucher-head .commune{font-family:"Marcellus",serif;font-size:1.15rem;line-height:1.2}
.ct-voucher-head .commune small{display:block;font-family:"Public Sans",sans-serif;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muet)}
.ct-voucher-head img{height:44px;width:auto}
.ct-voucher h3{font-family:"Marcellus",serif;font-weight:400;font-size:1.5rem;margin:0 0 4px;text-align:center}
.ct-voucher .done{text-align:center;color:#2E7D46;font-weight:700;margin:0 0 18px}
.ct-voucher .vrow{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px dotted var(--trait);font-size:.98rem}
.ct-voucher .vrow .k{color:var(--muet)}
.ct-voucher .vrow .v{font-weight:700;text-align:right}
.ct-voucher .vnum{font-size:1.6rem;font-family:"Marcellus",serif}
.ct-voucher .consigne{margin-top:18px;background:#FBF9EC;border-left:4px solid var(--jaune);
  padding:12px 14px;border-radius:0 8px 8px 0;font-size:.9rem;line-height:1.5}
.ct-voucher .consigne b{color:var(--encre)}
.ct-voucher-foot{margin-top:16px;font-size:.76rem;color:var(--muet);text-align:center;line-height:1.5}
.ct-print-actions{text-align:center;margin-top:22px}
.ct-print-actions .btn{margin:4px}

@media print{
  body *{visibility:hidden!important}
  .ct-voucher, .ct-voucher *{visibility:visible!important}
  .ct-voucher{position:absolute;left:0;top:0;margin:0;border-style:solid;box-shadow:none;width:100%}
  .ct-print-actions{display:none!important}
  @page{margin:16mm}
}

/* mode Noël / Halloween : cartes lisibles */
html.theme-noel .ct-card,html.theme-halloween .ct-card{background:#18212C}
html.theme-noel .ct-choice,html.theme-halloween .ct-choice{background:#0F1620;color:var(--ink)}
html.theme-noel .ct-steplist li,html.theme-halloween .ct-steplist li{background:#18212C}

/* responsive */
@media (max-width:520px){
  .ct-row2{grid-template-columns:1fr}
  .ct-nb{width:100%}
  .ct-hero{min-height:auto}
  .ct-partner-logo img{height:52px}
}