/* ============================================================
   KOH KAMPAGNA — Design System
   ds.css · tokens + composants partagés
   ============================================================ */

:root{
  --ff-title:"Cinzel",Georgia,serif;
  /* Pierre / nuit */
  --stone-950:#0e0a06; --stone-900:#161009; --stone-850:#1f160c;
  --stone-800:#291d11; --stone-700:#382818; --stone-600:#4a3722;
  /* Bois / bronze */
  --wood-800:#3c2716; --wood-700:#5a3d22; --wood-600:#74502e;
  --wood-500:#8a5e34; --wood-400:#a87c4a;
  /* Or / laiton */
  --gold-700:#9a7426; --gold-600:#b88a30; --gold-500:#c79a3a;
  --gold-400:#d7b25a; --gold-300:#e6c97e; --gold-200:#f2e0ab;
  /* Feu */
  --fire-700:#a83f15; --fire-600:#c2521b; --fire-500:#e0772a;
  --fire-400:#f0a23c; --fire-300:#f6c074;
  /* Forêt */
  --forest-700:#1b4028; --forest-500:#2f6b43; --forest-400:#3d8652; --forest-300:#79b08d;
  /* Héraldique */
  --azure:#23408f; --gules:#b11f2a;
  /* Parchemin / texte */
  --parch-100:#efe2c4; --parch-200:#d8c39a; --sand-400:#a4906c;
  --line:#3a2c1a; --line-soft:#2a2014;
  /* États */
  --success:#52b06b; --error:#cf4334; --warning:#e0882a; --info:#5a8fd0;
  /* Tribus (blasons unis) */
  --tribu-rouge:#c0392b; --tribu-jaune:#e7b62c; --tribu-bleu:#2e5aa8;
  --tribu-gris:#8a8f96; --tribu-vert:#3f9a5e; --tribu-orange:#e08128;

  /* Rayons / ombres / espacements */
  --r-sm:7px; --r-md:12px; --r-lg:18px; --r-pill:999px;
  --sh-1:0 2px 8px rgba(0,0,0,.35);
  --sh-2:0 10px 30px rgba(0,0,0,.5);
  --sh-3:0 24px 60px rgba(0,0,0,.6);
  --sh-gold:0 6px 0 #5a3d12, 0 10px 22px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.35);
  --maxw:1180px;
  --ff-display:"Cinzel",Georgia,serif;
  --ff-body:"Hanken Grotesk",system-ui,sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;color:var(--parch-100);font-family:var(--ff-body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;}
img{max-width:100%;}
a{color:var(--gold-400);}

/* grain overlay (add <div class="grain"></div> or body::before) */
.grain::before, body.grain::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Backgrounds ---------- */
body.immersive{
  background:
    radial-gradient(820px 520px at 8% 100%, rgba(224,119,42,.18), transparent 60%),
    radial-gradient(820px 520px at 92% 0%, rgba(224,119,42,.10), transparent 58%),
    radial-gradient(1200px 760px at 50% -12%, #2a1d10, transparent 60%),
    linear-gradient(#160f08,#0e0a06 70%);
  background-attachment:fixed;
}
body.app{
  background:
    radial-gradient(900px 600px at 100% 0%, #20170d, transparent 55%),
    linear-gradient(#14100a,#0e0a06);
  background-attachment:fixed;
}

/* ---------- Typography ---------- */
h1,h2,h3,h4,h5{font-family:var(--ff-display);font-weight:700;line-height:1.12;margin:0;letter-spacing:.01em;color:var(--parch-100);}
.display{font-family:var(--ff-display);}
.eyebrow{font-family:var(--ff-display);font-weight:600;text-transform:uppercase;letter-spacing:.32em;font-size:13px;color:var(--gold-500);display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.eyebrow::before{content:"";width:36px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-500));}
.eyebrow.center{justify-content:center;}
.title-xl{font-family:var(--ff-display);font-weight:900;font-size:clamp(34px,5.2vw,64px);line-height:1.02;text-shadow:0 3px 0 #2a1a0c,0 6px 18px rgba(0,0,0,.55);}
.title-lg{font-family:var(--ff-display);font-weight:800;font-size:clamp(28px,4vw,46px);text-shadow:0 2px 12px rgba(0,0,0,.5);}
.lead{color:var(--parch-200);font-size:18px;max-width:64ch;}
.muted{color:var(--sand-400);}
.gold{color:var(--gold-400);}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 30px;position:relative;z-index:1;}
.section{padding:72px 0;position:relative;z-index:1;}
.section + .section{border-top:1px solid var(--line);}
code,.mono{font-family:ui-monospace,Menlo,monospace;}

/* ---------- Buttons ---------- */
.btn{font-family:var(--ff-display);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:15px;
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;text-decoration:none;border:none;
  padding:14px 28px;border-radius:var(--r-sm);transition:.16s;white-space:nowrap;}
.btn svg{width:18px;height:18px;}
.btn--wood{color:#2a1a0a;background:linear-gradient(180deg,var(--gold-300),var(--gold-500) 55%,var(--gold-700));box-shadow:var(--sh-gold);}
.btn--wood:hover{transform:translateY(-2px);}
.btn--wood:active{transform:translateY(1px);box-shadow:0 3px 0 #5a3d12,0 6px 14px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.3);}
.btn--outline{color:var(--gold-300);border:1.5px solid var(--gold-600);background:rgba(0,0,0,.25);box-shadow:inset 0 0 18px rgba(199,154,58,.12);}
.btn--outline:hover{background:rgba(199,154,58,.14);color:var(--gold-200);}
.btn--ghost{color:var(--parch-200);background:transparent;border:1.5px solid var(--line);}
.btn--ghost:hover{border-color:var(--wood-500);color:var(--parch-100);}
.btn--sm{padding:9px 16px;font-size:13px;letter-spacing:.1em;}
.btn--lg{padding:17px 36px;font-size:17px;}
.btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none;filter:grayscale(.3);}

/* ---------- Site nav (immersif) ---------- */
.site-nav{position:sticky;top:0;z-index:30;backdrop-filter:blur(8px);
  background:linear-gradient(180deg,rgba(14,10,6,.92),rgba(14,10,6,.55));border-bottom:1px solid var(--line);}
.site-nav .bar{max-width:var(--maxw);margin:0 auto;padding:12px 30px;display:flex;align-items:center;gap:26px;}
.site-nav .brand{display:flex;align-items:center;gap:12px;text-decoration:none;}
.site-nav .brand img{height:30px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6));}
.site-nav .links{display:flex;gap:6px;margin-left:8px;flex-wrap:wrap;}
.site-nav .links a{font-family:var(--ff-display);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:13px;
  color:var(--parch-200);text-decoration:none;padding:9px 14px;border-radius:var(--r-sm);transition:.15s;}
.site-nav .links a:hover{background:rgba(199,154,58,.1);color:var(--gold-300);}
.site-nav .links a.active{color:var(--gold-400);background:rgba(199,154,58,.12);}
.site-nav .spacer{flex:1;}
@media(max-width:880px){.site-nav .links{display:none;}}

/* ---------- Cards / surfaces ---------- */
.card{background:linear-gradient(180deg,rgba(40,29,17,.55),rgba(20,14,8,.55));border:1px solid var(--line);
  border-radius:var(--r-md);padding:24px;box-shadow:var(--sh-1);}
.card--wood{background:linear-gradient(180deg,#3a2817,#241810);border:1px solid var(--wood-600);}
.panel{background:rgba(20,14,8,.5);border:1px solid var(--line);border-radius:var(--r-md);}
.hr{height:1px;background:var(--line);border:none;margin:0;}

/* ---------- Badges & tribus ---------- */
.badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--ff-display);font-weight:600;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;padding:4px 11px;border-radius:var(--r-pill);border:1px solid var(--line);color:var(--parch-200);}
.badge--gold{color:var(--gold-300);border-color:var(--gold-700);background:rgba(199,154,58,.1);}
.badge--success{color:var(--success);border-color:#2c6b43;background:rgba(82,176,107,.1);}
.badge--fire{color:var(--fire-400);border-color:var(--fire-700);background:rgba(224,119,42,.1);}
.badge--info{color:var(--info);border-color:#2f4f80;background:rgba(90,143,208,.1);}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;}

/* blason de tribu (écu coloré uni) */
.blason{width:34px;height:40px;flex:none;border-radius:5px 5px 50% 50%/5px 5px 22px 22px;
  border:2px solid rgba(0,0,0,.4);box-shadow:inset 0 2px 6px rgba(255,255,255,.25),inset 0 -8px 14px rgba(0,0,0,.35),var(--sh-1);}
.blason.lg{width:54px;height:64px;}
.blason.sm{width:22px;height:26px;border-width:1.5px;}
.t-rouge{background:radial-gradient(circle at 50% 30%,#d4503f,var(--tribu-rouge));}
.t-jaune{background:radial-gradient(circle at 50% 30%,#f1cb52,var(--tribu-jaune));}
.t-bleu{background:radial-gradient(circle at 50% 30%,#4674c4,var(--tribu-bleu));}
.t-gris{background:radial-gradient(circle at 50% 30%,#a7acb2,var(--tribu-gris));}
.t-vert{background:radial-gradient(circle at 50% 30%,#56b277,var(--tribu-vert));}
.t-orange{background:radial-gradient(circle at 50% 30%,#f0a24e,var(--tribu-orange));}

/* ---------- Forms ---------- */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px;}
.label{font-family:var(--ff-display);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-400);}
.input,.select,.textarea{font-family:var(--ff-body);font-size:16px;color:var(--parch-100);background:rgba(10,7,4,.6);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;width:100%;transition:.15s;}
.input::placeholder,.textarea::placeholder{color:#7a6c52;}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--gold-500);box-shadow:0 0 0 3px rgba(199,154,58,.18);background:rgba(20,14,8,.7);}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%23c79a3a'%3E%3Cpath d='M7 10L2 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;}
.textarea{min-height:110px;resize:vertical;}
.help{font-size:13px;color:var(--sand-400);}
.field.is-error .input{border-color:var(--error);box-shadow:0 0 0 3px rgba(207,67,52,.18);}
.field.is-error .help{color:var(--error);}
.checkline{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--parch-200);}
.checkline input{width:18px;height:18px;accent-color:var(--gold-500);}

/* ---------- Tables ---------- */
.table{width:100%;border-collapse:collapse;font-size:15px;}
.table th{font-family:var(--ff-display);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:12px;
  color:var(--gold-400);text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);}
.table td{padding:13px 14px;border-bottom:1px solid var(--line-soft);color:var(--parch-200);}
.table tr:hover td{background:rgba(199,154,58,.05);}
.table .num{font-variant-numeric:tabular-nums;text-align:right;}

/* ---------- Steps / progress ---------- */
.steps{display:flex;align-items:center;gap:0;flex-wrap:wrap;}
.steps .step{display:flex;align-items:center;gap:10px;color:var(--sand-400);font-family:var(--ff-display);font-size:13px;letter-spacing:.06em;text-transform:uppercase;}
.steps .step .n{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line);font-weight:700;font-size:14px;}
.steps .step.active{color:var(--gold-300);}
.steps .step.active .n{border-color:var(--gold-500);background:rgba(199,154,58,.15);color:var(--gold-200);}
.steps .step.done .n{border-color:var(--success);background:rgba(82,176,107,.15);color:var(--success);}
.steps .bar{flex:1;height:1px;background:var(--line);margin:0 14px;min-width:24px;}

/* ---------- Dashboard shell ---------- */
.app-shell{display:grid;grid-template-columns:264px 1fr;min-height:100vh;}
.sidebar{background:linear-gradient(180deg,#1a130b,#100b07);border-right:1px solid var(--line);padding:22px 16px;position:sticky;top:0;height:100vh;overflow-y:auto;}
.sidebar .brand{display:flex;align-items:center;gap:10px;padding:6px 10px 18px;text-decoration:none;}
.sidebar .brand img{height:26px;}
.side-group{font-family:var(--ff-display);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--sand-400);padding:18px 12px 8px;}
.side-link{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--r-sm);color:var(--parch-200);text-decoration:none;font-size:15px;transition:.14s;margin-bottom:2px;}
.side-link svg{width:19px;height:19px;color:var(--gold-500);flex:none;}
.side-link:hover{background:rgba(199,154,58,.08);color:var(--parch-100);}
.side-link.active{background:linear-gradient(90deg,rgba(199,154,58,.18),transparent);color:var(--gold-300);box-shadow:inset 2px 0 0 var(--gold-500);}
.side-link.active svg{color:var(--gold-300);}
.main{padding:28px 36px 60px;min-width:0;}
.topbar-app{display:flex;align-items:center;gap:18px;margin-bottom:26px;}
.topbar-app .who{margin-left:auto;display:flex;align-items:center;gap:12px;}
.avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(180deg,var(--wood-500),var(--wood-700));border:2px solid var(--gold-600);display:grid;place-items:center;font-family:var(--ff-display);font-weight:700;color:var(--parch-100);}
@media(max-width:840px){.app-shell{grid-template-columns:1fr;}.sidebar{position:relative;height:auto;display:none;}.main{padding:20px;}}

/* utilities */
.row{display:flex;gap:16px;}.col{display:flex;flex-direction:column;gap:16px;}
.between{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.grid{display:grid;gap:18px;}
.grid > *{min-width:0;}
.g-2{grid-template-columns:repeat(2,1fr);}.g-3{grid-template-columns:repeat(3,1fr);}.g-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:1100px){.g-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:980px){.g-3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:620px){.g-2,.g-3,.g-4{grid-template-columns:1fr;}}
.stat{font-family:var(--ff-display);font-weight:900;font-size:38px;color:var(--gold-300);line-height:1;}
.kicker{font-family:var(--ff-display);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--sand-400);}
.tag-day{font-family:var(--ff-display);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--fire-400);}

/* ---- Titres marquants (Cinzel) ---- */
.title-xl,.title-lg,h2.section-title,.hero-copy h1,.stat,.footer .display,.footer .big,.display.devise{
  font-family:var(--ff-title);font-weight:700;letter-spacing:.01em;text-transform:uppercase;}