@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;900&family=Cinzel+Decorative:wght@400;700;900&family=EB+Garamond:ital,wght@0,400;0,600;1,400;1,600&display=swap');

:root {
  --gold:          #c9a84c;
  --gold-light:    #f0d484;
  --gold-dim:      #7a5a1e;
  --gold-pale:     rgba(240,212,132,0.12);
  --gold-glow:     0 0 34px rgba(240,212,132,0.28);
  --bg:            #050301;
  --ease-premium:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:     cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--gold-light);
  font-family: 'EB Garamond', serif;
  overflow-x: hidden;
  min-height: 100vh;
}

/* ═══ NAV ═══ */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  padding: 1.4rem 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(to bottom, rgba(5,3,1,0.92) 0%, transparent 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
}

.nav-logo img {
  height: 28px;
  width: auto;
  filter: invert(1) sepia(1) saturate(3) hue-rotate(5deg) brightness(1.05)
          drop-shadow(0 0 12px rgba(240,212,132,0.3));
}

.nav-logo span {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(0.85rem, 1.8vw, 1.15rem);
  font-weight: 700;
  color: var(--gold-light);
  letter-spacing: 0.05em;
  filter: drop-shadow(0 0 12px rgba(240,212,132,0.3));
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
}

.nav-links a {
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(240,212,132,0.75);
  text-decoration: none;
  transition: color 0.3s var(--ease-soft);
}
.nav-links a:hover { color: var(--gold-light); }

/* ═══ HERO BACKGROUND ═══ */
.hero-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(120,80,10,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 20% 80%, rgba(80,50,5,0.12) 0%, transparent 60%),
    #050301;
  pointer-events: none;
}

/* ═══ PAGE WRAPPER ═══ */
.page-content {
  position: relative;
  z-index: 10;
  padding-top: 6rem;
}

/* ═══ SECTION ═══ */
.section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 4rem 2rem;
}

.section-sm {
  max-width: 640px;
  margin: 0 auto;
  padding: 4rem 2rem;
}

/* ═══ TYPOGRAPHY ═══ */
.eyebrow {
  font-family: 'Cinzel', serif;
  font-size: clamp(0.55rem, 1.2vw, 0.7rem);
  letter-spacing: 0.5em;
  color: var(--gold-dim);
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.page-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(2rem, 7vw, 5rem);
  font-weight: 900;
  line-height: 1.05;
  color: transparent;
  background: linear-gradient(160deg, #fff8e0 0%, var(--gold-light) 50%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(var(--gold-glow));
  margin-bottom: 0.5rem;
}

.section-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(1.4rem, 3.5vw, 2.5rem);
  font-weight: 700;
  color: transparent;
  background: linear-gradient(160deg, #fff8e0 0%, var(--gold-light) 55%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 20px rgba(240,212,132,0.2));
  text-align: center;
  margin-bottom: 0.75rem;
}

.section-sub {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  color: rgba(240,212,132,0.55);
  text-align: center;
  line-height: 1.7;
  margin-bottom: 3.5rem;
}

/* ═══ DIVIDER ═══ */
.divider {
  width: 160px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-dim), transparent);
  margin: 1.5rem auto;
}

/* ═══ BUTTON ═══ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 2.2rem;
  border: 1px solid var(--gold-dim);
  color: var(--gold-light);
  font-family: 'Cinzel', serif;
  font-size: clamp(0.65rem, 1.3vw, 0.82rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  background: transparent;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.4s var(--ease-soft),
              box-shadow 0.4s var(--ease-soft),
              color 0.4s var(--ease-soft),
              transform 0.35s var(--ease-premium);
}
.btn::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.08), transparent);
  transform: translateX(-120%) skewX(-14deg);
  transition: transform 0.8s var(--ease-premium);
}
.btn:hover {
  border-color: var(--gold-light);
  box-shadow: 0 0 30px rgba(201,168,76,0.22);
  transform: translateY(-2px);
}
.btn:hover::before { transform: translateX(120%) skewX(-14deg); }

.btn-primary {
  background: linear-gradient(135deg, rgba(201,168,76,0.15), rgba(201,168,76,0.05));
  border-color: var(--gold);
}
.btn-primary:hover {
  background: linear-gradient(135deg, rgba(201,168,76,0.25), rgba(201,168,76,0.1));
}

.btn-full { width: 100%; justify-content: center; }

/* ═══ CLAN CARDS ═══ */
.clans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.clan-card {
  background: linear-gradient(160deg, rgba(201,168,76,0.06) 0%, rgba(5,3,1,0.8) 100%);
  border: 1px solid rgba(201,168,76,0.15);
  padding: 2.5rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: border-color 0.4s var(--ease-soft), box-shadow 0.4s var(--ease-soft), transform 0.4s var(--ease-premium);
}
.clan-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(201,168,76,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.clan-card:hover {
  border-color: rgba(201,168,76,0.4);
  box-shadow: 0 0 40px rgba(201,168,76,0.1), inset 0 0 40px rgba(201,168,76,0.03);
  transform: translateY(-4px);
}

.clan-badge {
  width: 120px;
  height: 160px;
  object-fit: contain;
  margin: 0 auto 1.5rem;
  display: block;
  filter: drop-shadow(0 0 20px rgba(201,168,76,0.25));
  transition: filter 0.4s var(--ease-soft), transform 0.4s var(--ease-premium);
}
.clan-card:hover .clan-badge {
  filter: drop-shadow(0 0 35px rgba(201,168,76,0.5));
  transform: scale(1.04);
}

.clan-name {
  font-family: 'Cinzel Decorative', serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gold-light);
  margin-bottom: 0.75rem;
  letter-spacing: 0.05em;
}

.clan-desc {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 1.05rem;
  color: rgba(240,212,132,0.55);
  line-height: 1.65;
}

/* ═══ LEVELS ═══ */
.levels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}

.level-card {
  background: rgba(5,3,1,0.7);
  border: 1px solid rgba(201,168,76,0.12);
  padding: 2rem 1.75rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.4s, box-shadow 0.4s;
}
.level-card.featured {
  border-color: rgba(201,168,76,0.35);
  background: linear-gradient(160deg, rgba(201,168,76,0.08) 0%, rgba(5,3,1,0.7) 100%);
}
.level-card:hover {
  border-color: rgba(201,168,76,0.35);
  box-shadow: 0 0 30px rgba(201,168,76,0.08);
}

.level-badge {
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: 0.75rem;
}

.level-name {
  font-family: 'Cinzel Decorative', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--gold-light);
  margin-bottom: 0.4rem;
}

.level-price {
  font-family: 'EB Garamond', serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 1.25rem;
}
.level-price span {
  font-size: 0.9rem;
  color: rgba(240,212,132,0.45);
}

.level-perks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.level-perks li {
  font-family: 'EB Garamond', serif;
  font-size: 1rem;
  color: rgba(240,212,132,0.7);
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  line-height: 1.4;
}
.level-perks li::before {
  content: '◆';
  color: var(--gold-dim);
  font-size: 0.5rem;
  flex-shrink: 0;
  margin-top: 0.35rem;
}

/* ═══ FORM ═══ */
.form-card {
  background: linear-gradient(160deg, rgba(201,168,76,0.06) 0%, rgba(5,3,1,0.85) 100%);
  border: 1px solid rgba(201,168,76,0.18);
  padding: 3rem 2.5rem;
  max-width: 520px;
  margin: 0 auto;
}

.form-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-weight: 700;
  color: var(--gold-light);
  margin-bottom: 0.5rem;
  text-align: center;
}

.form-sub {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 1.05rem;
  color: rgba(240,212,132,0.45);
  text-align: center;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: 0.6rem;
}

.form-input,
.form-select {
  width: 100%;
  background: rgba(5,3,1,0.8);
  border: 1px solid rgba(201,168,76,0.2);
  color: var(--gold-light);
  font-family: 'EB Garamond', serif;
  font-size: 1.05rem;
  padding: 0.75rem 1rem;
  outline: none;
  transition: border-color 0.3s var(--ease-soft), box-shadow 0.3s var(--ease-soft);
  -webkit-appearance: none;
  appearance: none;
}
.form-input:focus,
.form-select:focus {
  border-color: var(--gold-dim);
  box-shadow: 0 0 20px rgba(201,168,76,0.12);
}
.form-input::placeholder { color: rgba(240,212,132,0.25); }

.form-select option { background: #0a0703; }

.clan-select-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.clan-radio { display: none; }
.clan-radio-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.85rem 0.5rem;
  border: 1px solid rgba(201,168,76,0.15);
  background: rgba(5,3,1,0.6);
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s;
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: rgba(240,212,132,0.5);
  text-transform: uppercase;
  text-align: center;
}
.clan-radio-label img {
  width: 44px;
  height: 56px;
  object-fit: contain;
  filter: grayscale(0.6) brightness(0.8);
  transition: filter 0.3s;
}
.clan-radio:checked + .clan-radio-label {
  border-color: var(--gold);
  background: rgba(201,168,76,0.1);
  color: var(--gold-light);
}
.clan-radio:checked + .clan-radio-label img {
  filter: grayscale(0) brightness(1);
}

/* ═══ MODAL ═══ */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(5,3,1,0.88);
  z-index: 200;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.modal-overlay.open { display: flex; }

.modal {
  background: linear-gradient(160deg, rgba(201,168,76,0.08) 0%, #0a0703 100%);
  border: 1px solid rgba(201,168,76,0.25);
  padding: 3rem 2.5rem;
  width: 100%;
  max-width: 480px;
  position: relative;
  animation: modalIn 0.5s var(--ease-premium) forwards;
}
@keyframes modalIn {
  from { opacity:0; transform:translateY(24px) scale(0.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

.modal-close {
  position: absolute;
  top: 1.2rem; right: 1.5rem;
  background: none; border: none;
  color: var(--gold-dim);
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
  transition: color 0.3s;
}
.modal-close:hover { color: var(--gold-light); }

/* ═══ ALERTS ═══ */
.alert {
  padding: 0.9rem 1.1rem;
  border-left: 2px solid var(--gold-dim);
  background: rgba(201,168,76,0.06);
  font-family: 'EB Garamond', serif;
  font-size: 1rem;
  color: rgba(240,212,132,0.75);
  margin-bottom: 1.5rem;
  display: none;
}
.alert.show { display: block; }
.alert.error { border-color: #c04a4a; color: rgba(255,150,150,0.8); background: rgba(192,74,74,0.08); }
.alert.success { border-color: #4a8c4a; color: rgba(150,220,150,0.8); background: rgba(74,140,74,0.08); }

/* ═══ PROFILE ═══ */
.profile-card {
  background: linear-gradient(160deg, rgba(201,168,76,0.07) 0%, rgba(5,3,1,0.8) 100%);
  border: 1px solid rgba(201,168,76,0.18);
  padding: 3rem 2.5rem;
  text-align: center;
  max-width: 480px;
  margin: 0 auto 2rem;
}

.profile-badge-img {
  width: 110px;
  height: 145px;
  object-fit: contain;
  margin: 0 auto 1.5rem;
  display: block;
  filter: drop-shadow(0 0 25px rgba(201,168,76,0.35));
}

.profile-pseudo {
  font-family: 'Cinzel Decorative', serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--gold-light);
  margin-bottom: 0.4rem;
}

.profile-clan {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: 1.5rem;
}

.profile-level {
  display: inline-block;
  padding: 0.4rem 1.2rem;
  border: 1px solid var(--gold-dim);
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2rem;
}

.profile-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 360px;
  margin: 0 auto;
}

/* ═══ FOOTER ═══ */
footer {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 3rem 2rem;
  border-top: 1px solid rgba(201,168,76,0.08);
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold-dim);
}

/* ═══ LOADING SPINNER ═══ */
.spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid rgba(201,168,76,0.2);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══ PROGRESS BAR ═══ */
#page-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold-light), var(--gold-dim));
  z-index: 100;
  transition: width 0.1s;
  pointer-events: none;
}

/* ═══ FADE ANIMATIONS (hero uniquement, driven par JS observer) ═══ */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.75s var(--ease-soft), transform 0.75s var(--ease-premium);
}
.fade-up.show { opacity: 1; transform: translateY(0); }

/* ═══ CARD ANIMATIONS — CSS pur, aucun JS requis ═══ */
@keyframes cardReveal {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Clan cards : apparition dès que la section entre dans le viewport
   via scroll-margin + animation auto avec délai par enfant.
   Fallback immédiat si pas de support : les cartes sont visibles. */
.clan-card {
  animation: cardReveal 0.75s var(--ease-premium) both;
}
.clan-card:nth-child(1) { animation-delay: 0.05s; }
.clan-card:nth-child(2) { animation-delay: 0.17s; }
.clan-card:nth-child(3) { animation-delay: 0.29s; }

/* Level cards */
.level-card {
  animation: cardReveal 0.7s var(--ease-premium) both;
}
.level-card:nth-child(1) { animation-delay: 0.05s; }
.level-card:nth-child(2) { animation-delay: 0.18s; }
.level-card:nth-child(3) { animation-delay: 0.31s; }

/* Respect des préférences d'accessibilité */
@media (prefers-reduced-motion: reduce) {
  .clan-card, .level-card { animation: none; }
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 640px) {
  nav { padding: 1.2rem 1.5rem; }
  .section { padding: 2.5rem 1.25rem; }
  .form-card { padding: 2rem 1.25rem; }
  .modal { padding: 2.5rem 1.5rem; }
  .clan-select-grid { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
  .clans-grid { grid-template-columns: 1fr; }
  .levels-grid { grid-template-columns: 1fr; }
  .nav-links { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   BADGES CSS TEMPORAIRES — CLANS & NIVEAUX
   KAK = vert  |  KAKETTE = violet  |  ROGER = orange
   + aura dorée Cercle Secret  |  aura bordeaux Garde

   Technique : deux coques clip-path emboîtées (ring + inner)
   + filter:drop-shadow pour le halo (fonctionne avec clip-path,
   contrairement à box-shadow qui est clippé).
═══════════════════════════════════════════════════════════════ */

/* Palette clans */
:root {
  /* KAK — or / beige */
  --kak-primary:   #7a5c10;
  --kak-light:     #c9a84c;
  --kak-glow:      rgba(201,168,76,0.45);
  --kak-text:      #f0d484;

  /* KAKETTE — violet profond */
  --kakette-primary: #3d1070;
  --kakette-light:   #8030c8;
  --kakette-glow:    rgba(128,48,200,0.45);
  --kakette-text:    #d098f8;

  /* ROGER — orange brûlé */
  --roger-primary:  #6b2e08;
  --roger-light:    #c05a18;
  --roger-glow:     rgba(192,90,24,0.45);
  --roger-text:     #f8a060;

  /* Cercle Secret — doré */
  --cs-glow:  rgba(201,168,76,0.6);
  --cs-ring:  #c9a84c;

  /* Garde — bordeaux */
  --garde-primary: #7a1020;
  --garde-light:   #c02535;
  --garde-glow:    rgba(192,37,53,0.55);
  --garde-ring:    #a01828;
}

/* ══════════════════════════════════════════════════════════════
   BADGE BOUCLIER — double coque clip-path
   .clan-badge-ring  →  coque externe colorée (forme le contour)
   .clan-badge-inner →  coque interne sombre (fond du bouclier)
   filter:drop-shadow sur .clan-badge-ring = halo qui respecte
   la forme du clip-path, pas clippé par overflow:hidden du parent.
══════════════════════════════════════════════════════════════ */

/* Clip-path partagé : bouclier à 6 points */
.clan-badge-ring,
.clan-badge-inner {
  clip-path: polygon(50% 0%, 100% 15%, 100% 68%, 50% 100%, 0% 68%, 0% 15%);
}

/* ── Coque externe (ring = la "bordure" colorée) ── */
.clan-badge-ring {
  width: 148px;
  height: 172px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: filter 0.5s var(--ease-soft);
}

/* Glow animé via filter:drop-shadow sur le ring */
@keyframes badgePulse {
  0%, 100% { filter: drop-shadow(0 0 10px var(--badge-glow)) drop-shadow(0 0 4px var(--badge-glow)); }
  50%       { filter: drop-shadow(0 0 28px var(--badge-glow)) drop-shadow(0 0 55px var(--badge-glow)); }
}

/* KAK — or / beige */
.clan-badge-ring--kak {
  background: linear-gradient(160deg, #c9a84c 0%, #f0d484 50%, #a07830 100%);
  --badge-glow: var(--kak-glow);
  animation: badgePulse 3.2s ease-in-out infinite;
}
/* KAKETTE — violet lumineux */
.clan-badge-ring--kakette {
  background: linear-gradient(160deg, #7020b8 0%, #9840e0 50%, #5a1890 100%);
  --badge-glow: var(--kakette-glow);
  animation: badgePulse 3.5s ease-in-out infinite;
}
/* ROGER — orange brûlé */
.clan-badge-ring--roger {
  background: linear-gradient(160deg, #c05a18 0%, #e07030 50%, #983e10 100%);
  --badge-glow: var(--roger-glow);
  animation: badgePulse 3.8s ease-in-out infinite;
}

/* ── Coque interne (fond sombre du bouclier) ── */
.clan-badge-inner {
  width: 136px;
  height: 158px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.2rem;
}
.clan-badge-inner--kak     { background: linear-gradient(165deg, #1a1200 0%, #2e2000 55%, #1a1200 100%); }
.clan-badge-inner--kakette { background: linear-gradient(165deg, #0d0320 0%, #220848 55%, #0d0320 100%); }
.clan-badge-inner--roger   { background: linear-gradient(165deg, #160800 0%, #351408 55%, #160800 100%); }

/* ── Contenu du badge ── */
.clan-badge-letter {
  font-family: 'Cinzel Decorative', serif;
  font-weight: 900;
  font-size: 2.8rem;
  line-height: 1;
  text-shadow: 0 0 20px currentColor;
}
.clan-badge-ring--kak     .clan-badge-letter { color: #f0d484; }
.clan-badge-ring--kakette .clan-badge-letter { color: #d8a8ff; }
.clan-badge-ring--roger   .clan-badge-letter { color: #ffc080; }

.clan-badge-label {
  font-family: 'Cinzel', serif;
  font-size: 0.46rem;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  opacity: 0.65;
}
.clan-badge-ring--kak     .clan-badge-label { color: #d4b060; }
.clan-badge-ring--kakette .clan-badge-label { color: #c090f0; }
.clan-badge-ring--roger   .clan-badge-label { color: #f0a060; }

/* ── Wrapper (centrage, pas de overflow:hidden) ── */
.clan-badge-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 1.25rem;
}

/* ── Variantes de niveau (anneau supplémentaire en ::before sur le ring) ── */
/* Cercle Secret — anneau doré scintillant */
.clan-badge-ring--niveau-cs {
  outline: 2px solid var(--cs-ring);
  outline-offset: 5px;
  clip-path: none; /* outline visible sur le div, le clip-path reste sur ring/inner */
}
/* On utilise une technique différente : on enveloppe le ring dans un .badge-niveau-wrap */
.badge-niveau-wrap {
  display: inline-flex;
  padding: 4px;
  clip-path: polygon(50% 0%, 100% 15%, 100% 68%, 50% 100%, 0% 68%, 0% 15%);
}
.badge-niveau-wrap--cs {
  background: linear-gradient(135deg, var(--cs-ring) 0%, #f8e898 50%, var(--cs-ring) 100%);
  animation: csShimmer 2.8s ease-in-out infinite;
}
.badge-niveau-wrap--garde {
  background: linear-gradient(135deg, var(--garde-ring) 0%, #e04060 50%, var(--garde-ring) 100%);
  animation: gardeBlood 2.2s ease-in-out infinite;
}
@keyframes csShimmer {
  0%,100% { opacity: 0.75; filter: drop-shadow(0 0 8px var(--cs-glow)); }
  50%      { opacity: 1;    filter: drop-shadow(0 0 22px var(--cs-glow)) drop-shadow(0 0 40px rgba(201,168,76,0.2)); }
}
@keyframes gardeBlood {
  0%,100% { opacity: 0.7;  filter: drop-shadow(0 0 8px var(--garde-glow)); }
  50%      { opacity: 1;   filter: drop-shadow(0 0 22px var(--garde-glow)) drop-shadow(0 0 44px rgba(160,24,40,0.25)); }
}

/* ── Chip de niveau (tag sous le badge profil) ── */
.niveau-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.9rem;
  font-family: 'Cinzel', serif;
  font-size: 0.58rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  border: 1px solid;
  margin-bottom: 2rem;
}
.niveau-chip--gratuit      { border-color: rgba(201,168,76,0.22); color: rgba(240,212,132,0.45); }
.niveau-chip--cercle-secret {
  border-color: var(--cs-ring);
  color: var(--gold-light);
  background: rgba(201,168,76,0.08);
  animation: csShimmer 2.8s ease-in-out infinite;
}
.niveau-chip--garde {
  border-color: var(--garde-light);
  color: #f08090;
  background: rgba(120,16,32,0.12);
  animation: gardeBlood 2.2s ease-in-out infinite;
}

/* ── Pastille de couleur sur les cartes de clan ── */
.clan-color-stripe {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  opacity: 0.8;
  transition: opacity 0.4s;
}
.clan-card:hover .clan-color-stripe { opacity: 1; }
.clan-color-stripe--kak     { background: linear-gradient(90deg, transparent, var(--kak-light), transparent); }
.clan-color-stripe--kakette { background: linear-gradient(90deg, transparent, var(--kakette-light), transparent); }
.clan-color-stripe--roger   { background: linear-gradient(90deg, transparent, var(--roger-light), transparent); }

/* Tag "Guerriers / Gardiennes / Sages" */
.clan-tag {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  font-family: 'Cinzel', serif;
  font-size: 0.52rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  border: 1px solid;
  margin-bottom: 0.6rem;
}
.clan-tag--kak     { border-color: rgba(201,168,76,0.5);  color: var(--kak-text);     background: rgba(122,92,16,0.18); }
.clan-tag--kakette { border-color: rgba(128,48,200,0.5);  color: var(--kakette-text); background: rgba(61,16,112,0.18); }
.clan-tag--roger   { border-color: rgba(192,90,24,0.5);   color: var(--roger-text);   background: rgba(107,46,8,0.18); }

/* Hover coloré sur les cartes de clan */
.clan-card--kak:hover     { border-color: rgba(201,168,76,0.4); box-shadow: 0 8px 48px rgba(201,168,76,0.1), inset 0 0 40px rgba(201,168,76,0.04); }
.clan-card--kakette:hover { border-color: rgba(128,48,200,0.4); box-shadow: 0 8px 48px rgba(128,48,200,0.1), inset 0 0 40px rgba(128,48,200,0.04); }
.clan-card--roger:hover   { border-color: rgba(192,90,24,0.4);  box-shadow: 0 8px 48px rgba(192,90,24,0.1),  inset 0 0 40px rgba(192,90,24,0.04); }

/* ── Sélecteur de clan (formulaire) ── */
.clan-radio:checked + .clan-radio-label.label--kak     { border-color: var(--kak-light);     color: var(--kak-text);     background: rgba(122,92,16,0.22); }
.clan-radio:checked + .clan-radio-label.label--kakette { border-color: var(--kakette-light); color: var(--kakette-text); background: rgba(61,16,112,0.2); }
.clan-radio:checked + .clan-radio-label.label--roger   { border-color: var(--roger-light);   color: var(--roger-text);   background: rgba(107,46,8,0.22); }

/* ══════════════════════════════════════════════════════════════
   NIVEAUX — cards visuellement distinctes
══════════════════════════════════════════════════════════════ */

/* Indicateur roman (I / II / III) */
.level-roman {
  font-family: 'Cinzel Decorative', serif;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.level-card:nth-child(1) .level-roman { color: rgba(240,212,132,0.35); }
.level-card:nth-child(2) .level-roman {
  color: transparent;
  background: linear-gradient(135deg, var(--gold-dim), var(--gold-light), var(--gold));
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 16px rgba(201,168,76,0.5));
}
.level-card:nth-child(3) .level-roman { color: rgba(192,37,53,0.7); }

/* Bandeau supérieur coloré par niveau */
.level-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
}
.level-card:nth-child(1)::before {
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.25), transparent);
}
.level-card:nth-child(2)::before {
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: csShimmer 2.8s ease-in-out infinite;
}
.level-card:nth-child(3)::before {
  background: linear-gradient(90deg, transparent, var(--garde-light), transparent);
  animation: gardeBlood 2.2s ease-in-out infinite;
}

/* Cercle Secret : card avec fond doré subtil */
.level-card.featured {
  background: linear-gradient(160deg, rgba(201,168,76,0.1) 0%, rgba(201,168,76,0.03) 100%);
  border-color: rgba(201,168,76,0.3);
}

/* Garde : card avec fond bordeaux subtil */
.level-card--garde {
  background: linear-gradient(160deg, rgba(160,24,40,0.12) 0%, rgba(5,3,1,0.7) 100%);
  border-color: rgba(160,24,40,0.3);
}

/* Perks : icône ◆ colorée selon le niveau */
.level-card:nth-child(1) .level-perks li::before { color: rgba(201,168,76,0.3); }
.level-card:nth-child(2) .level-perks li::before { color: var(--gold); }
.level-card:nth-child(3) .level-perks li::before { color: var(--garde-light); }