/* === Palette principale === */
:root {
  --c-sand: #ddc3a5;
  --c-orange: #d2601a;
  --c-ink: #201e20;
  --c-gold: #e0a96d;

  --bs-body-bg: #ffffff;
  --bs-body-color: var(--c-ink);
  --bs-primary: var(--c-gold);
  --bs-secondary: var(--c-sand);
  --bs-link-color: var(--c-gold);
  --bs-link-hover-color: #c5894b;
  --accent: var(--c-gold);
}

/* === Général === */
html { scroll-behavior: smooth; }
body { scroll-padding-top: 4.5rem; font-family: system-ui, sans-serif; }

.russo-one-regular {
  font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* === Navbar === */
.navbar-dark { background-color: var(--c-ink) !important; }
.navbar-brand, .navbar-dark .nav-link { color: #f6f2ec !important; }
.navbar-dark .nav-link:hover { color: var(--c-gold) !important; }
.navbar.is-scrolled { box-shadow: 0 8px 24px rgba(0,0,0,.15); }

/* === Hero === */
.hero {
  min-height: 70vh;
  display: grid;
  place-items: center;
  color: #f6f2ec;
  text-align: center;
  background:
    radial-gradient(80% 120% at 50% -10%, rgba(224,169,109,.35), transparent 60%),
    linear-gradient(180deg, #2b2729 0%, var(--c-ink) 60%);
}

/* === Boutons === */
.btn-primary {
  background-color: var(--c-gold);
  border-color: var(--c-gold);
  color: #1f1f1f;
}
.btn-primary:hover { filter: brightness(.95); color:#1f1f1f; }
.btn-outline-primary {
  color: var(--c-gold);
  border-color: var(--c-gold);
}
.btn-outline-primary:hover {
  background-color: var(--c-gold);
  color: #1f1f1f;
}

/* === Avatars et cartes === */
.avatar {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--c-gold) 35%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-sand) 25%, transparent);
}

.member-card, .soft-card, .card.h-100 {
  background-color: color-mix(in srgb, var(--c-orange) 85%, white);
  border-radius: 1rem;
  box-shadow: 0 4px 10px rgba(32, 30, 32, 0.15);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.member-card:hover, .soft-card:hover, .card.h-100:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(32, 30, 32, 0.25);
}

/* === Tableau et badges === */
.table thead { background-color: color-mix(in srgb, var(--c-sand) 65%, white); }
.badge-rank { font-size: .85rem; }
.rank-1 { background: linear-gradient(135deg,#ffd700,#ffb300); color:#1f1f1f; }
.rank-2 { background: linear-gradient(135deg,#c0c0c0,#a8a8a8); color:#1f1f1f; }
.rank-3 { background: linear-gradient(135deg,#cd7f32,#b16a27); color:#1f1f1f; }

/* === Sections === */
.section-title { letter-spacing: .02em; color: var(--c-ink); }
.section-title2 { letter-spacing: .02em; color: var(--c-sand); }

.bg-light { background-color: color-mix(in srgb, var(--c-sand) 20%, #606060) !important; }

/* === Footer === */
footer {
  background: color-mix(in srgb, var(--c-sand) 18%, white);
  color: var(--c-ink);
}

/* === Flip countdown (pour index.html) === */
.flip-wrap {
  background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--c-sand) 20%, #fff));
  border: 1px solid color-mix(in srgb, var(--c-sand) 45%, transparent);
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: 0 10px 24px rgba(32,30,32,.12);
  overflow: hidden;
}
.flip-countdown {
  display: grid;
  grid-auto-flow: column;
  gap: 1rem;
  justify-content: center;
  align-items: start;
  width: 100%;
}
.timebox { display: grid; gap: .5rem; justify-items: center; min-width: 0; }
.timebox-label {
  color: #6c6c6c;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* === Flip countdown (complet & responsive) === */
:root{
  --flip-w: 72px;     /* largeur d'une carte */
  --flip-h: 96px;     /* hauteur d'une carte */
  --flip-r: .8rem;    /* arrondi */
  --flip-gap: 1rem;   /* espace entre unités */
  --digit-gap: .5rem; /* espace entre chiffres */
  --digit-fs: 3.6rem; /* taille du chiffre */
}

.flip-wrap{
  background: linear-gradient(180deg,#fff,color-mix(in srgb,var(--c-sand) 20%,#fff));
  border: 1px solid color-mix(in srgb,var(--c-sand) 45%, #0000);
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: 0 10px 24px rgba(32,30,32,.12);
  overflow: hidden;
}

.flip-countdown{
  display: grid;
  grid-auto-flow: column;
  gap: var(--flip-gap);
  justify-content: center;
  align-items: start;
  width: 100%;
}

.timebox{ display:grid; gap:.5rem; justify-items:center; min-width:0; }
.timebox-label{
  color:#6c6c6c; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em;
}
.digits{ display:grid; grid-auto-flow:column; gap:var(--digit-gap); }

/* Carte entière */
.flip-digit{
  position: relative;
  width: var(--flip-w);
  height: var(--flip-h);
  perspective: 900px;
  color: #f6f2ec;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  border-radius: var(--flip-r);
  background: linear-gradient(180deg,#2b2729 0%, #201e20 100%);
  box-shadow: 0 8px 18px rgba(32,30,32,.25), inset 0 0 0 1px rgba(255,255,255,.06);
}
.flip-digit::after{
  content:""; position:absolute; inset:0; border-radius:var(--flip-r);
  box-shadow: 0 0 0 2px color-mix(in srgb,var(--c-gold) 35%, #0000) inset;
  pointer-events:none;
}

/* Les moitiés (haut/bas) + couches animées */
.flip-top, .flip-bottom, .flip-fold, .flip-unfold{
  position:absolute; left:0; right:0; overflow:hidden;
  height: calc(var(--flip-h)/2);
  background: transparent;
}

/* coins arrondis et trait central */
.flip-top, .flip-fold{
  top:0; border-radius: var(--flip-r) var(--flip-r) 0 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.flip-bottom, .flip-unfold{
  bottom:0; border-radius: 0 0 var(--flip-r) var(--flip-r);
}

/* Positionnement du texte dans chaque moitié */
.flip-top span, .flip-fold span,
.flip-bottom span, .flip-unfold span{
  position:absolute; left:0; right:0; height:var(--flip-h);
  display:flex; align-items:center; justify-content:center;
  font-size: var(--digit-fs); line-height:1;
}
.flip-top span, .flip-fold span { top:0; }
.flip-bottom span, .flip-unfold span { top: calc(-1 * var(--flip-h)/2); }

/* Couches animées (pli/dépli) */
.flip-fold, .flip-unfold{
  backface-visibility: hidden;
  will-change: transform;
  transform-style: preserve-3d;
  background: linear-gradient(180deg,#2b2729 0%, #201e20 100%);
}
.flip-unfold{
  background: linear-gradient(180deg,#1e1b1c 0%, #151314 100%);
}

/* Sécurise l'étirement des iframes dans les conteneurs .ratio */
.ratio > iframe,
.ratio > embed,
.ratio > video {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Fond discret de carte vidéo */
.video-card { background: color-mix(in srgb, var(--c-gold) 22%, #0000); }

@keyframes foldAnim { from{transform:rotateX(0)} to{transform:rotateX(-90deg)} }
@keyframes unfoldAnim { from{transform:rotateX(90deg)} to{transform:rotateX(0)} }

@media (prefers-reduced-motion: reduce){
  .flip-fold, .flip-unfold{ animation:none !important; }
}

/* Breakpoints pour mobile */
@media (max-width: 768px){
  :root{ --flip-w:50px; --flip-h:80px; --flip-r:.7rem; --flip-gap:.8rem; --digit-gap:.4rem; --digit-fs:2rem; }
  .timebox-label{ font-size:.8rem; }
}
@media (max-width: 480px){
  :root{ --flip-w:40px; --flip-h:68px; --flip-r:.6rem; --flip-gap:.65rem; --digit-gap:.35rem; --digit-fs:1.65rem; }
  .flip-wrap{ padding:1rem .75rem; }
  .timebox-label{ font-size:.7rem; }
}
@media (max-width: 380px){
  :root{ --flip-w:44px; --flip-h:60px; --flip-r:.55rem; --flip-gap:.5rem; --digit-gap:.25rem; --digit-fs:1.45rem; }
  .flip-countdown{
    grid-auto-flow: row;
    grid-template-columns: repeat(2, auto);
    row-gap: .7rem; justify-content:center;
  }
  .timebox-label{ font-size:.65rem; }
}


/* === Thèmes (couleur d’accent) ===================================== */
.member-flip{ --accent:#e0a96d; }
.member-flip[data-theme="gold"]   { --accent:#f3ca20; }
.member-flip[data-theme="copper"] { --accent:#d07a3f; }
.member-flip[data-theme="teal"]   { --accent:#2ea6a6; }
.member-flip[data-theme="cobalt"] { --accent:#4a74ff; }
.member-flip[data-theme="violet"] { --accent:#8752ff; }
.member-flip[data-theme="crimson"]{ --accent:#d44848; }

/* === Carte ========================================================= */
.member-flip{
  position: relative;
  perspective: 1200px;
  height: 100%;
  aspect-ratio: 3/4;
  min-height: 300px;
  border-radius: 22px;
  background: #0b0b0b;   /* base sombre si PNG transparent */
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: box-shadow .25s ease, transform .25s ease;
  contain: paint;
}
/* Halo + arrêtes "verre" */
.member-flip::before{
  content:"";
  position:absolute; inset:0; border-radius:22px;
  pointer-events:none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.18), transparent 35%),
    linear-gradient(315deg, rgba(255,255,255,.10), transparent 45%);
  mix-blend-mode: screen;
  opacity:.75;
}

/* Shadow/glow plus fort quand retournée */
.member-flip.is-flipped{
  box-shadow: 0 22px 60px rgba(0,0,0,.38),
              0 0 0 1px color-mix(in srgb,var(--accent) 40%, transparent);
  transform: translateY(-2px);
}

/* === Inner qui pivote ============================================= */
.member-flip .member-inner{
  position: relative; inset:0; width:100%; height:100%;
  transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
  will-change: transform;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
  border-radius: 22px;
}
@media (hover:hover) and (pointer:fine){
  .member-flip:hover .member-inner{ transform: none !important; }
}
.member-flip.is-flipped .member-inner{ transform: rotateY(180deg); }

/* === Faces ========================================================= */
.member-flip .member-face{
  position:absolute; inset:0; border-radius:22px;
  display:grid; place-items:center; text-align:center;
  padding:0; overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  transform: translateZ(0);
}

/* ---- Face avant : image plein cadre + overlays ------------------- */
.member-flip .member-front{ background:#000; }

/* Image plein cadre (utilise ton <img class="cover"> existant) */
.member-front .cover{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  filter: saturate(1.05);
  opacity:.98;
}

/* Vignette & teinte d’accent douce + glossy diagonal */
.member-flip .member-front::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, color-mix(in srgb,var(--accent) 18%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.45) 70%, rgba(0,0,0,.65)),
    linear-gradient(115deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 30%);
}

/* Bandeau texte (nom/rôle) façon verre */
.member-front .front-info{
  position:absolute; left:14px; right:14px; bottom:14px; z-index:2;
  padding:.9rem 1.1rem;
  border-radius:16px;
  background: rgba(20,20,20,.45);
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  color:#f6f2ec;
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 8px 24px rgba(0,0,0,.35),
              0 0 0 1px color-mix(in srgb,var(--accent) 30%, transparent) inset;
}
.front-info .name{ font-weight:800; letter-spacing:.2px; font-size:1.35rem; }
.front-info .role{ opacity:.9; font-size:1.05rem; margin-top:.15rem; }

/* Badge étoile */
.member-flip .ribbon{
  position:absolute; top:12px; left:12px; z-index:3;
  width:38px; height:38px; border-radius:999px;
  display:grid; place-items:center;
  color:#1b1b1b; font-weight:900;
  background: color-mix(in srgb,var(--accent) 82%, #fff);
  border:1px solid color-mix(in srgb,var(--accent) 55%, #0000);
  box-shadow: 0 6px 14px rgba(0,0,0,.35);
}

/* ---- Face arrière : panneau verre + citation --------------------- */
.member-flip .member-back{
  transform: rotateY(180deg);
  background:
    radial-gradient(110% 100% at 50% -20%, color-mix(in srgb,var(--accent) 16%, transparent), transparent 65%),
    linear-gradient(180deg,#0f0f10, #151517);
  color:#f6f2ec;
  padding:1.5rem;
}
.member-back .quote-card{
  max-width: 92%; margin:auto;
  padding:1.1rem 1.2rem;
  border-radius:16px;
  background: rgba(20,20,22,.45);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 30px rgba(0,0,0,.35),
              0 0 0 1px color-mix(in srgb,var(--accent) 28%, transparent) inset;
}
.quote{ font-size:1.05rem; font-style:italic; line-height:1.4; }
.quote-meta{ margin-top:.6rem; font-size:.95rem; opacity:.85; }

/* === Grille fluide pour espacer les cartes ======================== */
.pioneers-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
  gap: 28px 32px;
  align-items: stretch;
}
@media (max-width: 576px){
  .pioneers-grid{ grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap:18px; }
}
.pioneers-grid .member-flip{ width:100%; height:100%; }

/* --- Désactive le flip automatique au hover desktop (on garde le clic) --- */
@media (hover:hover) and (pointer:fine){
  .member-flip:hover .member-inner{ transform: none !important; }
}

/* --- Prépa tilt 3D : petits réglages visuels pendant le survol --- */
.member-flip.tilt-on {
  transition: transform .08s ease, box-shadow .08s ease;
}
.member-flip.tilt-on .member-front::after{
  background:
    radial-gradient(120% 80% at 50% -10%, color-mix(in srgb,var(--accent) 22%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.42) 70%, rgba(0,0,0,.62)),
    linear-gradient(115deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 34%);
}

/* === Compatibilité iOS / Safari 3D ================================ */
.member-flip, .member-flip .member-inner{
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.member-flip .member-face{
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0.01px);
}

.member-flip .member-back{
  transform: rotateY(180deg) translateZ(0.01px);
}

.member-front .cover{
  will-change: transform;
  transform: translateZ(0);
}

/* Pas de tilt sur écrans tactiles (iOS & co) */
@media (hover:none), (pointer:coarse){
  .member-flip.tilt-on{ transform:none !important; box-shadow:none !important; }
}


/* ===== Nav verre + glow ========================================== */
:root{
  --nav-bg: rgba(12,12,14,.52);
  --nav-blur: 12px;
  --gold: #f3ca20;
  --gold-2: #e0a96d;
}
.nav-glass{
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(var(--nav-blur)) saturate(1.1);
  backdrop-filter: blur(var(--nav-blur)) saturate(1.1);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}
#topnav.is-scrolled{
  background: rgba(12,12,14,.72);
  border-bottom-color: rgba(255,255,255,.12);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}

/* ===== Marque (logo typographique) ================================ */
.brand-mark .brand-badge{
  display:inline-grid; place-items:center;
  width: 50px; height:34px; border-radius:10px;
  font-weight:800; letter-spacing:.5px;
  background:
    radial-gradient(120% 100% at 10% 0%, rgba(255,255,255,.18), rgba(255,255,255,0)),
    linear-gradient(135deg, var(--gold), var(--gold-2) 65%);
  color:#1a1a1a; border:1px solid rgba(0,0,0,.2);
  box-shadow: 0 8px 18px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.brand-mark .brand-word{ font-size:1.35rem; letter-spacing:.05em; }
.brand-mark .brand-accent{ color:var(--gold); text-shadow:0 0 18px color-mix(in srgb,var(--gold) 60%, transparent); }

/* ===== Liens soulignés + indicateur actif ========================= */
.nav-underline .nav-link{
  position:relative; padding:.6rem .8rem; color:#eaeaea; opacity:.9;
  transition: color .2s ease, opacity .2s ease;
}
.nav-underline .nav-link:hover{ color:#fff; opacity:1; }
.nav-underline .nav-link::after{
  content:""; position:absolute; left:12px; right:12px; bottom:.25rem; height:2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb,var(--gold) 85%, #fff), transparent);
  transform: scaleX(0); transform-origin: center; transition: transform .25s ease;
}
.nav-underline .nav-link:hover::after{ transform: scaleX(1); }
.nav-underline .nav-link.active{
  color:#fff;
  text-shadow:0 0 12px color-mix(in srgb,var(--gold) 50%, transparent);
}
.nav-underline .nav-link.active::after{ transform: scaleX(1); }

/* ===== Bouton gradient ============================================ */
.btn-gradient{
  --g1: var(--gold);
  --g2: #b8892f;
  background: linear-gradient(135deg, var(--g1), var(--g2));
  border:1px solid rgba(255,255,255,.18);
  color:#111; font-weight:700;
  box-shadow: 0 10px 18px rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.25) inset;
}
.btn-gradient:hover{
  filter: brightness(1.05);
  color:#111; border-color: rgba(255,255,255,.28);
}

/* ===== Toggler propre ============================================= */
.navbar-toggler{
  background: rgba(255,255,255,.08);
  border-radius:10px;
}

/* ===== Petites tailles ============================================ */
@media (max-width: 991.98px){
  .nav-underline .nav-link{ padding:.75rem .25rem; }
}


/* === Événements ================================================== */
.events-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
  gap: 2rem;
  margin-top: 1rem;
}

.event-card{
  position: relative;
  padding: 1.5rem 1.6rem;
  border-radius: 18px;
  background: rgba(18,18,20,.45);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 25px rgba(0,0,0,.25);
  color: #f3f3f3;
  transition: transform .25s ease, box-shadow .25s ease;
  overflow: hidden;
}
.event-card:hover{
  transform: translateY(-6px) rotateX(1.2deg) rotateY(-1.2deg);
  box-shadow: 0 18px 40px rgba(0,0,0,.35), 0 0 0 1px color-mix(in srgb,var(--accent, #f3ca20) 25%, transparent);
}

/* Décoration en bordure */
.event-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,0));
  mix-blend-mode:overlay;
  pointer-events:none;
}

/* Entête */
.event-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:.6rem;
}
.event-badge{
  display:flex;
  align-items:center;
  gap:.4rem;
  font-weight:600;
  font-size:.95rem;
  padding:.25rem .6rem;
  border-radius:12px;
  color:#111;
  background: var(--badge-bg, #f3ca20);
  box-shadow:0 3px 10px rgba(0,0,0,.25);
}
.event-badge i{ font-size:1.1rem; }

/* Couleur par type */
.event-card[data-type="tournoi"]    { --badge-bg:#f3ca20; }
.event-card[data-type="training"]   { --badge-bg:#2ea6a6; }
.event-card[data-type="community"]  { --badge-bg:#8752ff; }

/* Date */
.event-date{
  font-size:.9rem;
  color:rgba(255,255,255,.75);
  font-weight:500;
}

/* Titre et texte */
.event-title{
  font-size:1.25rem;
  font-weight:700;
  margin-bottom:.4rem;
  color:#fff;
}
.event-desc{
  font-size:.95rem;
  color:rgba(255,255,255,.85);
  margin-bottom:1rem;
}

/* Bouton */
.btn-event{
  --g1:#f3ca20; --g2:#b8892f;
  display:inline-block;
  padding:.4rem .9rem;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.15);
  background:linear-gradient(135deg,var(--g1),var(--g2));
  color:#111; font-weight:600;
  box-shadow:0 8px 14px rgba(0,0,0,.25);
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn-event:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(0,0,0,.35);
}

/* Responsive */
@media(max-width:576px){
  .event-card{ padding:1.2rem 1.3rem; }
  .event-title{ font-size:1.1rem; }
}


/* === Cartes Roster Epic Style ================================== */
.role-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.8rem;
  border-radius: 18px;
  background: rgba(28, 33, 42, 0.7);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  color: #f2f2f2;
  background-image: linear-gradient(180deg, rgba(42, 52, 66, 0.9), rgba(16, 18, 24, 0.95)),
                    url('https://cdn.pixabay.com/photo/2020/04/18/09/37/sky-5059601_1280.jpg');
  background-size: cover;
  background-position: center;
}
.role-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45),
              0 0 22px rgba(243, 202, 32, 0.18);
}

/* Header */
.role-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.role-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid #f3ca20;
  object-fit: cover;
  box-shadow: 0 0 18px rgba(243, 202, 32, 0.25);
}
.role-info {
  display: flex;
  flex-direction: column;
}
.role-name {
  font-weight: 700;
  font-size: 1.3rem;
  margin: 0;
  color: #fff;
}
.role-badge {
  display: inline-block;
  font-weight: 600;
  font-size: 0.9rem;
  background: linear-gradient(135deg, #f3ca20, #b8892f);
  color: #111;
  padding: 0.25rem 0.7rem;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
.role-badge.teal {
  background: linear-gradient(135deg, #2ea6a6, #1f6f6f);
  color: #fff;
}
.role-badge.violet {
  background: linear-gradient(135deg, #8752ff, #4b2c9c);
  color: #fff;
}

/* Description */
.role-desc {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.role-desc li {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0.35rem;
  position: relative;
  padding-left: 1.3rem;
}
.role-desc li::before {
  content: "•";
  color: #f3ca20;
  position: absolute;
  left: 0;
  font-size: 1.2rem;
  line-height: 1;
}

/* Tags */
.role-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.role-tags span {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  padding: 0.25rem 0.65rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
}

/* Bouton */
.role-btn {
  display: inline-block;
  text-align: center;
  font-weight: 700;
  font-size: 0.9rem;
  background: linear-gradient(135deg, #f3ca20, #b8892f);
  color: #111;
  padding: 0.55rem 1.1rem;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(0,0,0,0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.role-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.45);
}




/* =========================
   REGLES — THE_ FRENCHTEAM
   ========================= */
:root{
  --gold:#f3ca20; 
  --gold2:#b8892f;
  --steel-900:#0f1217; 
  --steel-800:#151a22; 
  --steel-700:#1c222c; 
  --steel-600:#273142;
}

/* -------- Hero (entête) -------- */
.hero {
  position: relative;
  color: #fff;
  background:
    radial-gradient(120% 80% at 10% -20%, rgba(255, 255, 255, 0.08), transparent 55%),
    linear-gradient(180deg, rgba(24, 29, 38, 0.9), rgba(15, 18, 23, 0.96)),
    url('/assets/pictures/banière_regles.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  box-shadow: inset 0 -80px 120px rgba(0, 0, 0, 0.45);
}

.brand-badge{
  display:inline-grid;place-items:center;
  width:38px;height:38px;border-radius:10px;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#111;font-weight:800;letter-spacing:.4px;
  box-shadow:0 10px 22px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.08) inset;
}

/* -------- Fond de page doux (papier crème + halos) -------- */
.content-bg{
  background:
    radial-gradient(80% 60% at 10% -10%, rgba(243,202,32,.06), transparent 60%),
    radial-gradient(80% 60% at 110% 10%, rgba(135,82,255,.05), transparent 60%),
    linear-gradient(180deg,#fbf7ef, #f6f1e7);
}

/* -------- Sommaire sticky -------- */
.toc{
  position:sticky; top:90px;
  background:rgba(28,33,42,.6);
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px; padding:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}
.toc a{
  display:block; padding:.35rem .5rem;
  color:#e8ecf2; text-decoration:none; border-radius:8px;
  transition: background .2s ease, color .2s ease;
}
.toc a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.toc a.active{
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#111; font-weight:700;
}

/* -------- Cartes “verre” du règlement -------- */
.rule-card{
  background:rgba(28,33,42,.68);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:1.4rem 1.2rem;
  color:#eaf0f6;
  box-shadow:0 12px 28px rgba(0,0,0,.32);
  transition: transform .25s ease, box-shadow .25s ease;
}
.rule-card:hover{
  transform: translateY(-3px);
  box-shadow:0 18px 40px rgba(0,0,0,.42),
             0 0 22px rgba(243,202,32,.14);
}
.rule-card h3, .rule-card h4{ color:#fff; font-weight:800; }
.rule-card .muted, .muted{ color:rgba(255,255,255,.85); }
.badge-gold{
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#111; font-weight:700;
}

/* -------- Encadré d’info -------- */
.callout{
  border-left:4px solid var(--gold);
  background:rgba(255,255,255,.05);
  border-radius:12px;
  padding:1rem;
}

/* -------- Tableau récap -------- */
.table-wrap{
  overflow:auto; border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
}
.table{ color:#eaf0f6; margin:0; }
.table thead{ background:rgba(255,255,255,.06); color:#fff; }
.table tbody tr{ background:rgba(255,255,255,.03); }
.table tbody tr + tr{ border-top:1px solid rgba(255,255,255,.06); }

/* -------- Liens -------- */
a{ color:#b3d6ff; }
a:hover{ color:#d8e8ff; }
.section-title i{ color:var(--gold); }

/* -------- Navbar (utilise tes classes existantes) --------
   Ces petites touches optimisent le rendu si nav-glass est présent */
.nav-glass{
  background: rgba(12,12,14,.52);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}
#topnav.is-scrolled{
  background: rgba(12,12,14,.72);
  border-bottom-color: rgba(255,255,255,.12);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}

/* -------- Responsive -------- */
@media (max-width: 991.98px){
  .hero{ background-attachment: scroll; }
  .toc{ position:static; margin-bottom:1rem; }
}
@media (max-width: 576px){
  .brand-badge{ width:34px; height:34px; }
  .rule-card{ padding:1.1rem 1rem; }
}


/* ========= LISTES, TABLES, FORMULAIRES & FAQ — STYLE VITRÉ ========= */
/* Portée limitée aux blocs concernés pour ne pas impacter le reste */
:root { --gold:#f3ca20; --gold2:#b8892f; }

/* Cartes vitrées */
#guides .soft-card,
#schedule .soft-card,
#recruit .soft-card,
#faq .soft-card{
  background: rgba(28,33,42,.68);
  backdrop-filter: blur(10px) saturate(1.18);
  -webkit-backdrop-filter: blur(10px) saturate(1.18);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
  color:#eaf0f6;
}
#guides .soft-card:hover,
#schedule .soft-card:hover,
#recruit .soft-card:hover,
#faq .soft-card:hover{
  box-shadow: 0 18px 42px rgba(0,0,0,.38), 0 0 22px rgba(243,202,32,.12);
  transform: translateY(-2px);
}

/* En-têtes internes de cartes */
#guides .soft-card > header,
#schedule .soft-card > header{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
}

/* Liens dans les cartes */
#guides .soft-card a.link-dark,
#recruit .soft-card a.link-dark{ color:#dfe8ff; }
#guides .soft-card a.link-dark:hover,
#recruit .soft-card a.link-dark:hover{ color:#ffffff; text-decoration: underline; }

/* List-group “verre” (Guides) */
#guides .list-group-item{
  background: transparent;
  color:#eaf0f6;
  border-color: rgba(255,255,255,.08);
  transition: background .2s ease, transform .2s ease;
}
#guides .list-group-item:hover{
  background: rgba(255,255,255,.06);
  transform: translateX(2px);
}

/* Badges auxiliaires doux */
.badge.bg-warning.text-dark,
.badge.bg-info.text-dark,
.badge.bg-success{
  filter: saturate(.95) brightness(1.04);
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}

/* Table “verre” (Planning) */
#schedule .table{ color:#eaf0f6; }
#schedule .table thead{
  background: rgba(255,255,255,.08);
  color:#fff;
}
#schedule .table tbody tr{ background: transparent; }
#schedule .table tbody tr + tr{ border-top:1px solid rgba(255,255,255,.08); }
#schedule .table tbody tr:hover{
  background: rgba(255,255,255,.06);
}
#schedule .table td, #schedule .table th{ border-color: rgba(255,255,255,.08) !important; }

/* Formulaires verre (Recrutement) */
#recruit .form-control,
#recruit .form-select{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
}
#recruit .form-control::placeholder{ color:rgba(255,255,255,.6); }
#recruit .form-select option{ color:#111; } /* menu natif */
#recruit .form-control:focus,
#recruit .form-select:focus{
  border-color: color-mix(in srgb, var(--gold) 70%, #fff);
  box-shadow: 0 0 0 .2rem rgba(243,202,32,.2);
}

/* Accordéon “verre” (FAQ) */
#faq .accordion-item{
  background: transparent;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  overflow: hidden;
}
#faq .accordion-item + .accordion-item{ margin-top:.6rem; }
#faq .accordion-button{
  background: rgba(255,255,255,.05);
  color:#fff;
  box-shadow: none;
}
#faq .accordion-button:not(.collapsed){
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  color:#fff;
}
#faq .accordion-button::after{ filter: invert(1) brightness(1.2); opacity:.85; }
#faq .accordion-body{ color:#eaf0f6; background: rgba(255,255,255,.03); }

/* Boutons */
.btn-gradient{
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  color:#111; font-weight:700; border:none;
  box-shadow: 0 10px 22px rgba(0,0,0,.28);
}
.btn-gradient:hover{ box-shadow: 0 14px 32px rgba(0,0,0,.36); color:#111; }

.btn-outline-primary{
  border-color: rgba(243,202,32,.6);
  color: #ffe9a6;
}
.btn-outline-primary:hover{
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  color:#111; border-color: transparent;
}

/* Petits ajustements */
.section-title i{ color: var(--gold); }
.text-muted, .text-secondary{ color: rgba(235,240,248,.78) !important; }



/* ===== Aurora Frosted (alt design) ===== */
.panel-aurora{
  border-radius:18px; padding:0; overflow:hidden;
  background: linear-gradient(180deg, rgba(32,38,48,.72), rgba(18,22,28,.86));
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 36px rgba(0,0,0,.30);
  color:#edf2f8;
  transition: transform .2s ease, box-shadow .2s ease;
}
.panel-aurora:hover{ transform: translateY(-2px); box-shadow: 0 20px 48px rgba(0,0,0,.38); }
.panel-aurora .panel-head{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:1rem 1.1rem; border-bottom:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(135deg, rgba(243,202,32,.12), transparent 40%),
    linear-gradient(315deg, rgba(135,82,255,.08), transparent 50%);
}
.panel-aurora .panel-foot{ padding:.75rem 1.1rem; border-top:1px solid rgba(255,255,255,.08); }
.text-soft{ color:rgba(255,255,255,.78); }

/* Chips / tags */
.chip{ display:inline-flex; align-items:center; gap:.5rem; padding:.25rem .6rem; border-radius:999px;
  font-weight:700; font-size:.85rem; color:#111; white-space:nowrap; }
.chip i{ color:#111; }
.chip-gold{ background:linear-gradient(135deg, #f3ca20, #b8892f); }
.chip-cyan{ background:linear-gradient(135deg, #46e1ff, #1a8ea7); color:#071018; }
.tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin: .4rem 1.1rem .8rem; }
.tags span{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:8px; padding:.2rem .5rem; font-size:.85rem; }

/* Liens style "ghost list" */
.list-ghost{ list-style:none; padding:0; margin:0; }
.list-ghost li{ display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.8rem 1.1rem; border-top:1px solid rgba(255,255,255,.06); }
.list-ghost li:first-child{ border-top:0; }
.list-ghost a{ color:#dfe8ff; text-decoration:none; }
.list-ghost li:hover{ background:rgba(255,255,255,.06); }
.list-ghost i{ opacity:.9; }

/* Steps */
.steps{ margin: .6rem 1.1rem 0; color:#e8eef7; }
.steps li{ margin-bottom:.35rem; }

/* ===== Server cards ===== */
.server-card{
  border-radius:18px; padding:1.1rem; color:#eef3fb;
  background: linear-gradient(180deg, rgba(27,31,40,.8), rgba(14,17,22,.9));
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 16px 38px rgba(0,0,0,.32);
}
.server-top{ margin-bottom:.6rem; }
.server-name{ font-weight:800; font-size:1.15rem; }
.server-sub{ color:rgba(255,255,255,.75); margin-top:.1rem; }
.server-badge{
  display:inline-flex; align-items:center; gap:.45rem; padding:.25rem .6rem; border-radius:999px;
  background:linear-gradient(135deg, #f3ca20, #b8892f); color:#111; font-weight:800; font-size:.85rem;
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}
.server-badge.alt{ background:linear-gradient(135deg, #8752ff, #4b2c9c); color:#fff; }
.server-stats{ display:grid; grid-template-columns: repeat(3,1fr); gap:.6rem; margin:.6rem 0 .8rem; }
.server-stats i{ opacity:.9; margin-right:.35rem; }

.server-actions{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.ip-wrap{ display:flex; align-items:center; gap:.45rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:10px; padding:.35rem .5rem; }
.ip{ color:#fff; }
.copy-ip{ border-color: rgba(243,202,32,.6); color:#ffe9a6; }
.copy-ip:hover{ background: linear-gradient(135deg, #f3ca20, #b8892f); color:#111; border-color:transparent; }

.server-card .btn-gradient{ padding:.45rem .9rem; }
.server-card .btn-outline-primary{ padding:.45rem .9rem; }

/* Table vitre (hérite de ton pack précédent) */
#schedule .panel-aurora .table thead{ background: rgba(255,255,255,.10); }


/* ==== Fond de section plus sombre pour le contraste ==== */
#playstyle { position: relative; }
#playstyle .playstyle-scrim{
  position:absolute; inset:0; z-index:1;
  /* fond plus sombre et uniforme */
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(243,202,32,.08), transparent 55%),
    radial-gradient(120% 90% at 10% 90%, rgba(46,166,166,.10), transparent 60%),
    linear-gradient(180deg, #0b0d10 0%, #0b0d10 45%, #0b0d10 100%);
  /* voile sombre supplémentaire */
}
#playstyle .playstyle-scrim::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.28));
}

/* ==== Cartes “verre” mais vraiment lisibles ==== */
#playstyle .glass-card,
#playstyle .glass-readable{
  position: relative; z-index:2;
  background: rgba(18,20,24,.86);               /* + opaque */
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  border: 1px solid rgba(255,255,255,.06);      /* bord discret */
  border-radius: 18px;
  box-shadow: 0 14px 36px rgba(0,0,0,.45);      /* ombre plus nette */
  color: #e9eef3;                               /* texte clair */
  padding: 1.75rem;                             /* un poil + serré que huge */
}
@media (min-width: 992px){
  #playstyle .glass-card,
  #playstyle .glass-readable{ padding: 2.25rem; }
}

/* anneau subtil autour des cartes pour le détourage */
#playstyle .glass-card::before{
  content:""; position:absolute; inset:0; border-radius:18px; pointer-events:none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset;
}

/* ==== Titres & paragraphes ==== */
#playstyle h5{ color:#ffffff; letter-spacing:.2px; }
#playstyle .lead-xs{
  color:#d6dde4;
  font-size: 1.08rem;
  line-height: 1.7;
  margin-bottom: .75rem;
}

/* ==== Liste plus lisible ==== */
#playstyle .bullet{
  position: relative;
  margin: .6rem 0;
  padding-left: 30px;
  color:#d1d8df;
  line-height: 1.65;
  font-size: 1.02rem;
}
#playstyle .bullet::before{
  content:""; position:absolute; left:6px; top:.9em;
  width:14px; height:3px; border-radius:2px;
  background:#f3ca20;                          /* jaune bien visible */
  box-shadow: 0 0 0 1px rgba(243,202,32,.25);
}
#playstyle .bullet span{ transform: translateY(-1px); display:inline-block; }

/* ==== Pastilles d’icône plus contrastées ==== */
#playstyle .icon-wrap{
  width: 44px; height: 44px; border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
}
#playstyle .icon-warm{ color:#f3ca20; }
#playstyle .icon-cool{ color:#2ea6a6; }

/* ==== Hover léger, sans flou gênant ==== */
@media (hover:hover){
  #playstyle .glass-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 18px 46px rgba(0,0,0,.55);
  }
}

/* ==== Mobile : encore plus de contraste ==== */
@media (max-width: 575.98px){
  #playstyle .glass-card,
  #playstyle .glass-readable{
    background: rgba(18,20,24,.92);
    padding: 1.25rem 1.15rem;
  }
  #playstyle .lead-xs{ font-size: 1.02rem; }
  #playstyle .bullet{ font-size: 1rem; }
}

.text-body-emphasis { 
  color:var(--c-orange) !important;
}