/* ============================================================
   FIRST SKY — Macaw Theme
   CSS principal · 100 % custom · basé sur Bootstrap 5
   Palette logo : Bleu #1E9EEB · Bleu foncé #0D4E8A
                  Rouge #D42E1A · Jaune #F5C430 · Vert #48C038
   ============================================================ */

/* ── Google Fonts ────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

/* ── 1. DESIGN TOKENS ──────────────────────────────────────────
   Toutes les valeurs du site passent par ces variables.
   ─────────────────────────────────────────────────────────── */
:root {
  /* Couleurs First Sky */
  --c-red:        #D42E1A;
  --c-orange:     #F5A020;
  --c-yellow:     #F5C430;
  --c-green:      #48C038;
  --c-teal:       #1EC8A8;
  --c-sky:        #1E9EEB;
  --c-blue:       #0D4E8A;
  --c-dark-blue:  #07142E;

  /* Gradient arc-en-ciel (logo) */
  --c-rainbow:    linear-gradient(90deg,
                    #D42E1A 0%, #F5A020 20%, #F5C430 40%,
                    #48C038 58%, #1E9EEB 80%, #0D4E8A 100%);
  /* Gradient bleu (navbar / hero) */
  --c-grad-blue:  linear-gradient(135deg, #0D4E8A 0%, #091E42 60%, #060C1A 100%);
  /* Gradient bouton jaune */
  --c-grad-yellow:linear-gradient(135deg, #F5C430, #E8A010);

  /* Fonds */
  --bg-root:      #060C1A;   /* page entière */
  --bg-card:      #0B1835;   /* fond cards */
  --bg-card-alt:  #0F2040;   /* fond cards hover/alt */
  --bg-input:     rgba(255,255,255,0.05);
  --bg-jungle:    #0C4820;   /* section jungle */
  --bg-night:     #060C1A;   /* section nuit */
  --bg-ocean:     #051825;   /* section océan */

  /* Hero */
  --hero-sky:     #1E9EEB;
  --hero-mid:     #5CC4F0;
  --hero-grass:   #3AAB56;

  /* Texte */
  --txt:          #E8F0FF;
  --txt-muted:    rgba(180,205,255,0.60);
  --txt-dim:      rgba(150,180,240,0.35);

  /* Bordures */
  --border:       rgba(30,158,235,0.22);
  --border-dim:   rgba(255,255,255,0.07);

  /* Rayons */
  --r-sm:         8px;
  --r-md:         14px;
  --r-lg:         22px;
  --r-xl:         30px;
  --r-pill:       50px;

  /* Ombres */
  --sh-sm:    0 2px 10px rgba(0,0,0,0.35);
  --sh-md:    0 6px 24px rgba(0,0,0,0.50);
  --sh-lg:    0 12px 48px rgba(0,0,0,0.65);
  --sh-blue:  0 6px 24px rgba(30,158,235,0.28);
  --sh-glow:  0 0 0 3px rgba(30,158,235,0.25);

  /* Bootstrap 5 remapping */
  --bs-font-sans-serif:     'Nunito', system-ui, sans-serif;
  --bs-body-font-family:    'Nunito', system-ui, sans-serif;
  --bs-body-bg:             var(--bg-root);
  --bs-body-color:          var(--txt);
  --bs-primary:             var(--c-sky);
  --bs-primary-rgb:         30,158,235;
  --bs-success:             var(--c-green);
  --bs-success-rgb:         72,192,56;
  --bs-danger:              var(--c-red);
  --bs-danger-rgb:          212,46,26;
  --bs-warning:             var(--c-yellow);
  --bs-warning-rgb:         245,196,48;
  --bs-info:                var(--c-teal);
  --bs-link-color:          var(--c-sky);
  --bs-link-hover-color:    var(--c-yellow);
  --bs-border-color:        var(--border);
  --bs-border-radius:       var(--r-md);
  --bs-border-radius-sm:    var(--r-sm);
  --bs-border-radius-lg:    var(--r-lg);
}

/* ── 2. BASE ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html  { scroll-behavior: smooth; }
body  {
  background: url('/assets/themes/macaw/image/bg-vertical.webp') no-repeat top center;
  background-size: cover;
  color: var(--txt);
  font-family: 'Nunito', system-ui, sans-serif;
  overflow-x: hidden;
  min-height: 100vh;
}
a     { color: var(--c-sky); transition: color .2s; }
a:hover { color: var(--c-yellow); text-decoration: none; }
h1,h2,h3,h4,h5,h6 { color: #fff; font-weight: 800; }

/* Contenu principal Azuriom */
#app { background: transparent; }
.container--rainbow { background: transparent !important; }
#preloader { display: none !important; }

/* ── 3. NAVBAR ─────────────────────────────────────────────────
   Centrée · coins 16px · gradient bleu logo · 72 px · sans logo
   ─────────────────────────────────────────────────────────── */
.header {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: min(980px, 94vw);
  background: rgba(6, 14, 38, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(30,158,235,0.32);
  border-radius: 16px;
  box-shadow: var(--sh-md), 0 1px 0 rgba(30,158,235,0.18) inset;
  z-index: 1050;
  padding: 0 32px;
}

.header .navbar {
  height: 70px;       /* hauteur fixe — boutons et liens parfaitement centrés */
  min-height: unset;
  padding: 0;
  align-items: center;
}
.header .navbar-brand  { display: none; }

.header .nav-link {
  color: rgba(210,230,255,.88);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 11px 20px;
  border-radius: 9px;
  transition: color .18s, background .18s;
  line-height: 1;
}

/* ── Navbar : liens centrés à gauche, boutons bloqués à droite ── */
@media (min-width: 1200px) {
  .header .navbar-collapse {
    display: flex !important;
    align-items: center !important;
    width: 100%;
    position: static !important;
  }
  /* Les liens prennent tout l'espace restant, alignés à gauche */
  .header .navbar-menu {
    flex: 1 1 0 !important;
    display: flex !important;
    justify-content: flex-start !important;
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    padding-left: 4px !important;
    overflow: visible;
  }
  /* Boutons : taille naturelle, pas d'auto-margin, collés à droite */
  .header .navbar-cta {
    flex: 0 0 auto !important;
    margin-left: 0 !important;
  }
}
.header .nav-link:hover,
.header .nav-link.active {
  color: #fff;
  background: rgba(30,158,235,.18);
}
.header .nav-link:hover { color: var(--c-yellow); background: rgba(245,196,48,.10); }

/* Bouton boutique — jaune */
.header .btn { border-radius: var(--r-pill) !important; }

.header .btn-primary,
.header .btn-shop,
.header a[href*="shop"].btn,
.header a[href*="boutique"].btn {
  background: var(--c-grad-yellow) !important;
  border: none !important;
  color: #1A0800 !important;
  font-weight: 800 !important;
  font-size: .85rem !important;
  padding: 10px 26px !important;
  letter-spacing: .06em;
  box-shadow: 0 4px 16px rgba(245,196,48,.40) !important;
  transition: transform .2s, box-shadow .2s !important;
}
.header .btn-primary:hover,
.header .btn-shop:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(245,196,48,.60) !important;
  color: #1A0800 !important;
}

/* Bouton Discord navbar */
.header .btn-discord,
.header .btn-secondary {
  background: rgba(88,101,242,.22) !important;
  border: 1px solid rgba(88,101,242,.45) !important;
  border-radius: 10px !important;
  color: #fff !important;
  padding: 8px 14px !important;
}
.header .btn-discord:hover,
.header .btn-secondary:hover {
  background: rgba(88,101,242,.40) !important;
}

/* ── Boutons CTA navbar (Boutique / Jouer) ──────────────── */
.navbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 22px;
  border-radius: 10px;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: .84rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none !important;
  border: none;
  white-space: nowrap;
  line-height: 1;
  position: relative;
  overflow: hidden;
  transition: transform .18s, box-shadow .18s;
}
/* Shimmer au hover */
.navbar-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 55%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transition: left .38s ease;
  pointer-events: none;
}
.navbar-btn:hover::after { left: 160%; }
.navbar-btn:hover { transform: translateY(-2px); }

/* Boutique — or chaud */
.navbar-btn--shop {
  background: linear-gradient(135deg, #FFD060 0%, #FF9000 100%);
  color: #1A0600 !important;
  box-shadow: 0 3px 12px rgba(255,160,0,.38),
              inset 0 1px 0 rgba(255,255,255,.25);
}
.navbar-btn--shop:hover {
  box-shadow: 0 6px 22px rgba(255,160,0,.65),
              inset 0 1px 0 rgba(255,255,255,.25);
  color: #1A0600 !important;
}

/* Jouer — vert électrique + pulsation douce */
.navbar-btn--play {
  background: linear-gradient(135deg, #4ADE80 0%, #15A348 100%);
  color: #fff !important;
  box-shadow: 0 3px 12px rgba(74,222,128,.38),
              inset 0 1px 0 rgba(255,255,255,.20);
  animation: play-pulse 2.8s ease-in-out infinite;
}
.navbar-btn--play:hover {
  box-shadow: 0 6px 24px rgba(74,222,128,.70),
              inset 0 1px 0 rgba(255,255,255,.20);
  color: #fff !important;
  animation: none;
  transform: translateY(-2px) scale(1.04);
}

@keyframes play-pulse {
  0%, 100% { box-shadow: 0 3px 12px rgba(74,222,128,.38), inset 0 1px 0 rgba(255,255,255,.20); }
  50%       { box-shadow: 0 4px 22px rgba(74,222,128,.65), 0 0 28px rgba(74,222,128,.18), inset 0 1px 0 rgba(255,255,255,.20); }
}

/* ── Bouton auth (Connexion / Profil) ───────────────────────── */
.navbar-btn--auth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto;
  height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  background: rgba(30,158,235,.28);
  border: 1.5px solid rgba(30,158,235,.65);
  color: rgba(220,240,255,.95);
  font-size: .84rem;
  font-weight: 800;
  letter-spacing: .04em;
  transition: background .2s, border-color .2s, color .2s, transform .18s, box-shadow .18s;
  cursor: pointer;
  text-decoration: none !important;
  white-space: nowrap;
}
/* Override shimmer & hauteur du parent .navbar-btn */
.navbar-btn--auth::after { display: none; }
.navbar-btn--auth:hover {
  background: rgba(30,158,235,.50);
  border-color: var(--c-sky);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(30,158,235,.30);
}

/* Initial (première lettre du pseudo) */
.navbar-auth-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  font-size: .92rem;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, #1E9EEB 0%, #0D4E8A 100%);
  border-radius: 50%;
  text-transform: uppercase;
  line-height: 1;
}

/* Dropdown menu auth */
.navbar-auth-menu {
  background: rgba(7,16,40,.97) !important;
  border: 1px solid rgba(30,158,235,.18) !important;
  border-radius: 14px !important;
  padding: 4px 0 !important;
  min-width: 210px;
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 32px rgba(0,0,0,.55), 0 0 0 1px rgba(30,158,235,.08) !important;
  margin-top: 8px !important;
}
.navbar-auth-menu__label {
  display: block;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(30,158,235,.55);
  margin-bottom: 2px;
}
.navbar-auth-menu__name {
  display: block;
  font-size: .90rem;
  font-weight: 800;
  color: rgba(220,240,255,.92);
}
.navbar-auth-menu__sep {
  border-color: rgba(30,158,235,.12) !important;
  margin: 4px 0 !important;
}
.navbar-auth-menu__item {
  display: flex !important;
  align-items: center;
  padding: 9px 18px !important;
  font-size: .85rem !important;
  font-weight: 600 !important;
  color: rgba(200,225,255,.80) !important;
  transition: background .15s, color .15s;
  border-radius: 0;
}
.navbar-auth-menu__item:hover {
  background: rgba(30,158,235,.12) !important;
  color: rgba(220,240,255,.95) !important;
}
.navbar-auth-menu__item--logout {
  color: rgba(255,120,100,.70) !important;
}
.navbar-auth-menu__item--logout:hover {
  background: rgba(220,50,40,.10) !important;
  color: rgba(255,140,130,.90) !important;
}

/* ── Icône auth MOBILE ──────────────────────────────────────── */
.navbar-auth-mobile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(30,158,235,.12);
  border: 1.5px solid rgba(30,158,235,.28);
  color: rgba(180,215,255,.85);
  font-size: 1.2rem;
  text-decoration: none !important;
  transition: background .2s, border-color .2s, color .2s;
  flex-shrink: 0;
  overflow: hidden;
}
.navbar-auth-mobile--user { padding: 0; }
.navbar-auth-initial-sm {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  font-size: .85rem;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, #1E9EEB 0%, #0D4E8A 100%);
  border-radius: 50%;
  text-transform: uppercase;
  line-height: 1;
}
.navbar-auth-mobile:hover {
  background: rgba(30,158,235,.24);
  border-color: rgba(30,158,235,.55);
  color: #fff;
}

/* Hamburger */
.header .navbar-toggler {
  border: 1px solid rgba(30,158,235,.35);
  border-radius: 10px;
  padding: 8px;
}
.header .navbar-toggler-icon { filter: invert(1); }

/* Collapse mobile */
@media (max-width: 991px) {
  .header .navbar-collapse {
    background: #091E42;
    border-radius: 0 0 12px 12px;
    padding: 12px 4px;
    margin: 0 -32px;
    border-top: 1px solid rgba(30,158,235,.18);
  }
}

/* Dropdown navbar */
.header .dropdown-menu {
  background: #091E42;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  padding: 6px;
  margin-top: 8px;
}
.header .dropdown-item {
  color: var(--txt-muted);
  border-radius: var(--r-sm);
  padding: 8px 14px;
  font-weight: 600;
  font-size: .88rem;
}
.header .dropdown-item:hover {
  background: rgba(30,158,235,.14);
  color: #fff;
}

/* ── 4. HERO HOME ──────────────────────────────────────────────
   Background image de l'île tropicale Minecraft
   ─────────────────────────────────────────────────────────── */
.macaw-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: visible;
  background: transparent;
  background-color: transparent;
}

/* Ancien bg hero supprimé — le background vertical du body prend le relais */
.macaw-hero::before { display: none; }

/* Vague supprimée — pas besoin avec le bg vertical continu */
.macaw-hero::after { display: none; }

/* Fleurs multicolores + palmiers + personnages supprimés */
.macaw-palm,
.macaw-flower,
.macaw-char { display: none !important; }

/* ── Nuages améliorés — style Minecraft nuit ────────────────── */
.macaw-cloud {
  position: absolute;
  background: rgba(210, 225, 255, 0.82);
  border-radius: 6px;           /* légèrement carré = style Minecraft */
  z-index: 3;
  animation: cloud-drift linear infinite;
  box-shadow:
    0 0 28px rgba(180, 210, 255, 0.35),   /* halo lunaire bleuté */
    inset 0 -4px 12px rgba(130, 170, 230, 0.20);
  filter: drop-shadow(0 2px 8px rgba(100, 150, 255, 0.18));
}
/* Bosse supérieure gauche */
.macaw-cloud::before {
  content: '';
  position: absolute;
  background: rgba(220, 235, 255, 0.88);
  border-radius: 6px;
  top: -55%; left: 12%;
  width: 42%; height: 180%;
}
/* Bosse supérieure droite */
.macaw-cloud::after {
  content: '';
  position: absolute;
  background: rgba(215, 230, 255, 0.85);
  border-radius: 6px;
  top: -35%; left: 50%;
  width: 34%; height: 145%;
}
.macaw-cloud--1 { width:160px; height:38px; top:15%; left:5%;  animation-duration:28s; }
.macaw-cloud--2 { width:110px; height:28px; top:28%; left:22%; animation-duration:38s; animation-delay:-15s; opacity:.75; }
.macaw-cloud--3 { width:200px; height:48px; top:10%; right:6%; animation-duration:44s; animation-delay:-22s; }

/* Personnages (optionnels) */
.macaw-char {
  position: absolute;
  bottom: 65px;
  z-index: 5;
  animation: char-idle 3.5s ease-in-out infinite;
}
.macaw-char--l { left: 80px; }
.macaw-char--r { right: 80px; }
.macaw-char img {
  height: 280px; width: auto;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.30));
}

/* Contenu hero central */
.macaw-hero__inner {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
  padding: 110px 24px 160px;
}

/* Logo grand */
.macaw-hero__logo img {
  width: min(680px, 90vw);
  height: auto;
  filter: drop-shadow(0 0 60px rgba(20,100,220,.50))
          drop-shadow(0 16px 40px rgba(0,0,0,.65));
  animation: char-idle 4s ease-in-out infinite;
}

/* Description hero */
.macaw-hero__desc {
  max-width: 700px;
  margin: 0 auto;
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.68;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.70);
}

/* ── Boutons hero ─────────────────────────────────────────────── */
.hero-btns {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 34px;
  border-radius: 12px;
  font-weight: 800;
  font-size: .96rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none !important;
  cursor: pointer;
  border: none;
  white-space: nowrap;
  transition: transform .2s, box-shadow .2s;
}
.hero-btn:hover { transform: translateY(-3px); }

/* Wiki — jaune/or */
.hero-btn--wiki {
  background: linear-gradient(135deg, #F5C430, #D4920A);
  color: #1A0800;
  box-shadow: 0 6px 22px rgba(245,196,48,.42);
}
.hero-btn--wiki:hover {
  box-shadow: 0 10px 30px rgba(245,196,48,.65);
  color: #1A0800;
}

/* ── Widget IP copiable (hero) ────────────────────────────── */
.hero-ip-widget {
  display: inline-flex;
  align-items: stretch;
  background: rgba(3, 8, 26, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(30,158,235,.30);
  border-radius: 16px;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  transition: transform .2s, border-color .2s, box-shadow .2s;
  box-shadow: 0 6px 28px rgba(0,0,0,.55),
              inset 0 1px 0 rgba(255,255,255,.06);
}
.hero-ip-widget:hover {
  transform: translateY(-3px);
  border-color: rgba(30,158,235,.55);
  box-shadow: 0 10px 36px rgba(0,0,0,.60),
              0 0 28px rgba(30,158,235,.18),
              inset 0 1px 0 rgba(255,255,255,.06);
}

/* Partie gauche : statut + adresse */
.hero-ip-widget__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 14px 22px;
}
.hero-ip-widget__status {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hero-ip-widget__dot {
  width: 7px; height: 7px;
  background: #4ADE80;
  border-radius: 50%;
  flex-shrink: 0;
  animation: ip-dot-pulse 2.2s ease-in-out infinite;
}
@keyframes ip-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(74,222,128,.70); }
  60%       { box-shadow: 0 0 0 5px rgba(74,222,128,.00); }
}
.hero-ip-widget__online {
  font-size: .62rem; font-weight: 800;
  letter-spacing: .14em; color: #4ADE80;
  text-transform: uppercase;
}
.hero-ip-widget .macaw-ip__addr {
  font-size: 1.18rem; font-weight: 900;
  color: #fff; letter-spacing: .06em;
  line-height: 1;
}

/* Partie droite : bouton copier */
.hero-ip-widget__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 20px;
  min-width: 74px;
  background: rgba(30,158,235,.14);
  border-left: 1px solid rgba(30,158,235,.22);
  color: rgba(140,200,255,.75);
  font-size: .62rem; font-weight: 800;
  letter-spacing: .10em; text-transform: uppercase;
  transition: background .18s, color .18s;
}
.hero-ip-widget:hover .hero-ip-widget__copy {
  background: rgba(30,158,235,.28);
  color: #fff;
}
.macaw-ip__hint { /* texte "Copier l'IP" / "✓ COPIÉ !" */ }

/* Compat anciens sélecteurs JS */
.macaw-ip__addr { font-size: 1.18rem; font-weight: 900; color: #fff; letter-spacing: .06em; }
.macaw-ip:hover { transform: translateY(-3px); }

/* Boutons CTA hero */
.macaw-cta { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

.macaw-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 32px;
  border-radius: var(--r-pill);
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: .9rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  border: none; cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  white-space: nowrap;
}
.macaw-btn:hover { transform: translateY(-3px); }

.macaw-btn--yellow {
  background: var(--c-grad-yellow);
  color: #1A0800;
  box-shadow: 0 6px 20px rgba(245,196,48,.42);
}
.macaw-btn--yellow:hover { box-shadow: 0 10px 28px rgba(245,196,48,.65); color: #1A0800; }

.macaw-btn--discord {
  background: linear-gradient(135deg, #5865F2, #4451CC);
  color: #fff;
  box-shadow: 0 6px 20px rgba(88,101,242,.40);
}
.macaw-btn--discord:hover { box-shadow: 0 10px 28px rgba(88,101,242,.65); color: #fff; }

.macaw-btn--rainbow {
  background: var(--c-rainbow);
  color: #fff;
  box-shadow: 0 6px 24px rgba(30,158,235,.40);
}
.macaw-btn--rainbow:hover { box-shadow: 0 10px 32px rgba(30,158,235,.65); color: #fff; }

/* ── 5. WAVE DIVIDERS — supprimés (bg vertical continu) ──────── */
.macaw-wave,
.macaw-wave-divider { display: none !important; }

/* ── 6. SECTIONS HOME ─────────────────────────────────────────── */

/* Jungle (stats / composants) */
.macaw-section--jungle {
  position: relative;
  background: rgba(0, 18, 8, 0.48);
  padding: 64px 0 80px;
  overflow: hidden;
  margin-top: 0;
  z-index: 1;
}
/* Bandes latérales supprimées — trop visibles */
.macaw-section--jungle::before,
.macaw-section--jungle::after { display: none; }

/* ── Description OneBlock ────────────────────────────────────── */
.ob-desc {
  max-width: 860px;
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.ob-desc__lead {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.78;
  color: rgba(220,240,220,.90);
  text-align: center;
  font-weight: 500;
}

.ob-desc__body {
  margin: 0;
  font-size: .97rem;
  line-height: 1.80;
  color: rgba(200,225,210,.78);
  text-align: center;
}

/* Grille de features */
.ob-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 8px 0;
}
@media (max-width: 575px) {
  .ob-features { grid-template-columns: 1fr; }
}

.ob-feature {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(10, 30, 12, 0.52);
  border: 1px solid rgba(30, 200, 100, 0.14);
  border-radius: 14px;
  padding: 16px 18px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.ob-feature__icon {
  font-size: 1.55rem;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}

.ob-feature div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ob-feature strong {
  font-size: .94rem;
  font-weight: 800;
  color: #fff;
}

.ob-feature span {
  font-size: .86rem;
  color: rgba(190,225,200,.72);
  line-height: 1.55;
}

.ob-desc__cta {
  margin: 0;
  font-size: .97rem;
  line-height: 1.78;
  color: rgba(200,230,210,.80);
  text-align: center;
  font-style: italic;
  border-top: 1px solid rgba(30,200,100,.12);
  padding-top: 18px;
}

/* Nuit (articles / login) */
.macaw-section--night {
  background: rgba(0, 6, 22, 0.55);
  padding: 72px 0 80px;
  position: relative;
}
/* Étoiles */
.macaw-section--night::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 10% 12%, rgba(255,255,255,.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 23% 42%, rgba(255,255,255,.40) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 38% 7%,  rgba(255,255,255,.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 51% 58%, rgba(255,255,255,.45) 0%, transparent 100%),
    radial-gradient(1px 1px at 67% 20%, rgba(255,255,255,.55) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 78% 72%, rgba(255,255,255,.40) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 33%, rgba(255,255,255,.50) 0%, transparent 100%),
    radial-gradient(1px 1px at 14% 77%, rgba(255,255,255,.40) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 88%, rgba(255,255,255,.45) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 28%, rgba(255,255,255,.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 92% 55%, rgba(255,255,255,.40) 0%, transparent 100%),
    radial-gradient(1px 1px at 5%  48%, rgba(255,255,255,.35) 0%, transparent 100%);
  pointer-events: none;
}

/* Océan (CTA Discord) */
.macaw-section--ocean {
  position: relative;
  background: rgba(0, 14, 38, 0.58);
  padding: 72px 0 80px;
  overflow: hidden;
}
.macaw-section--ocean::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(168deg, transparent 25%, rgba(30,158,235,.07) 50%, transparent 72%),
    linear-gradient(192deg, transparent 18%, rgba(30,158,235,.05) 44%, transparent 65%);
  pointer-events: none;
}

/* ── Wrapper titre OneBlock ──────────────────────────────── */
.ob-title-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 48px;
}

/* Badge chip au-dessus */
.ob-title-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(30, 200, 100, 0.12);
  border: 1px solid rgba(30, 200, 100, 0.32);
  border-radius: 999px;
  padding: 6px 20px;
  font-size: .70rem;
  font-weight: 800;
  letter-spacing: .18em;
  color: rgba(100, 235, 155, 0.92);
  text-transform: uppercase;
}

/* Barre décorative arc-en-ciel pulsante */
.ob-title-bar {
  width: 72px; height: 4px;
  background: linear-gradient(90deg,
    #D42E1A, #F5A020, #F5C430, #48C038, #1E9EEB, #9B59F5, #D42E1A);
  background-size: 200% 100%;
  border-radius: 3px;
  box-shadow: 0 0 16px rgba(245,196,48,.50);
  animation: bar-rainbow 3s linear infinite,
             bar-grow 2.5s ease-in-out infinite;
}
@keyframes bar-rainbow {
  0%   { background-position: 0%   0%; }
  100% { background-position: 200% 0%; }
}
@keyframes bar-grow {
  0%, 100% { width: 72px;  box-shadow: 0 0 14px rgba(245,196,48,.45); }
  50%       { width: 110px; box-shadow: 0 0 28px rgba(245,196,48,.75), 0 0 50px rgba(30,158,235,.30); }
}

/* Titre de section */
.macaw-sec-title {
  text-align: center;
  font-size: clamp(1.55rem, 4vw, 2.8rem);
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 0; /* géré par .ob-title-wrap gap ou contexte */
}
/* Fallback hors wrapper */
.macaw-sec-title:not(.ob-title-wrap *) { margin-bottom: 48px; }

.macaw-sec-title--glow {
  animation: title-glow-pulse 3s ease-in-out infinite;
}
@keyframes title-glow-pulse {
  0%, 100% { text-shadow: 0 0 32px rgba(30,200,168,.60), 0 0 60px rgba(30,200,168,.22); }
  50%       { text-shadow: 0 0 52px rgba(30,200,168,.95), 0 0 90px rgba(30,200,168,.40), 0 2px 0 rgba(255,255,255,.06); }
}

/* Texte en gradient arc-en-ciel */
.txt-rainbow {
  background: var(--c-rainbow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ONEBLOCK : gradient animé + glow */
.macaw-gradient-text {
  background: linear-gradient(90deg,
    #D42E1A 0%, #F5A020 16%, #F5C430 33%,
    #48C038 50%, #1E9EEB 66%, #9B59F5 83%, #D42E1A 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 4s linear infinite;
  filter: drop-shadow(0 0 18px rgba(245,196,48,.55))
          drop-shadow(0 0 40px rgba(30,158,235,.25));
}
@keyframes gradient-shift {
  0%   { background-position: 0%   center; }
  100% { background-position: 200% center; }
}

/* ── 7. STATS BADGES ─────────────────────────────────────────── */
.macaw-stats { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; }

.macaw-stat {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 145px; height: 145px; text-align: center;
  clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  animation: stat-pulse 3s ease-in-out infinite;
}
.macaw-stat--red    { background: linear-gradient(135deg, #A81A0A, #D42E1A); animation-delay: 0s; }
.macaw-stat--yellow { background: linear-gradient(135deg, #B88010, #F5C430); animation-delay: .7s; }
.macaw-stat--green  { background: linear-gradient(135deg, #2A7820, #48C038); animation-delay: 1.4s; }
.macaw-stat--blue   { background: linear-gradient(135deg, #083870, #1E9EEB); animation-delay: 2.1s; }

.macaw-stat__val  { font-size: 1.75rem; font-weight: 900; color: #fff; line-height: 1; text-shadow: 0 2px 8px rgba(0,0,0,.40); }
.macaw-stat__lbl  { font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.85); margin-top: 4px; }

/* ── 8. PILIERS POURQUOI FIRSTSKY ────────────────────────────── */

/* Section — même esprit que howto (bleu nuit) */
.macaw-section--pillars {
  background: rgba(0, 10, 28, 0.55);
  padding: 80px 0 96px;
  position: relative;
}
.macaw-section--pillars::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 800px; height: 280px;
  background: radial-gradient(ellipse, rgba(30,158,235,.09) 0%, transparent 68%);
  pointer-events: none;
}

/* Sous-titre de section */
.macaw-sec-sub {
  text-align: center;
  color: rgba(155,195,250,.48);
  font-size: .92rem;
  margin: 10px 0 0;
  line-height: 1.6;
}

/* Grille 2 colonnes (+ lisible que 3 avec les descriptions) */
.server-pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 980px;
  margin: 48px auto 0;
}
@media (max-width: 767px) {
  .server-pillars { grid-template-columns: 1fr; gap: 10px; }
}

/* Carte — CSS Grid interne : icône en col 1, titre+desc en col 2 */
.server-pillar {
  display: grid;
  grid-template-columns: 54px 1fr;
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 5px;
  align-items: start;
  background: rgba(14, 28, 58, 0.70);
  border: 1px solid rgba(30,158,235,.14);
  border-left: 3px solid rgba(30,158,235,.55);
  border-radius: 0 16px 16px 0;
  padding: 20px 20px 20px 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .22s, border-left-color .22s, box-shadow .22s, transform .22s;
}
.server-pillar:hover {
  background: rgba(16, 34, 72, 0.80);
  border-left-color: var(--c-sky);
  box-shadow: -3px 0 18px rgba(30,158,235,.18), 0 6px 28px rgba(0,0,0,.35);
  transform: translateX(3px);
}

/* Icône — s'étend sur les 2 lignes */
.server-pillar__icon-wrap {
  grid-row: 1 / 3;
  align-self: center;
  display: flex; align-items: center; justify-content: center;
  width: 54px; height: 54px;
  background: rgba(30,158,235,.10);
  border: 1px solid rgba(30,158,235,.20);
  border-radius: 14px;
  transition: background .22s, border-color .22s;
}
.server-pillar:hover .server-pillar__icon-wrap {
  background: rgba(30,158,235,.18);
  border-color: rgba(30,158,235,.40);
}

.server-pillar__icon {
  font-size: 1.9rem;
  line-height: 1;
  display: block;
}

/* Titre */
.server-pillar__title {
  grid-column: 2;
  font-size: .97rem;
  font-weight: 800;
  color: rgba(225,240,255,.95);
  margin: 0;
  letter-spacing: .01em;
  align-self: end;
  transition: color .20s;
}
.server-pillar:hover .server-pillar__title { color: #fff; }

/* Description */
.server-pillar__desc {
  grid-column: 2;
  font-size: .84rem;
  color: rgba(148,190,248,.62);
  line-height: 1.65;
  margin: 0;
  align-self: start;
}

/* ── CARD CTA (legacy) ───────────────────────────────────────── */
.macaw-cta-card {
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(30,158,235,.22);
  border-radius: var(--r-xl);
  padding: 40px 48px;
  display: flex; align-items: center; gap: 48px; flex-wrap: wrap;
  max-width: 900px; margin: 0 auto;
}
.macaw-cta-card__title {
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 12px;
}
.macaw-cta-card p { color: var(--txt-muted); margin-bottom: 24px; line-height: 1.65; }
.macaw-cta-card__img img {
  max-height: 200px; width: auto;
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
}

/* Bulles océan */
.macaw-bubble {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(30,158,235,.38);
  background: rgba(30,158,235,.07);
  animation: bubble-rise 5s ease-in infinite;
  bottom: -20px;
}

/* ── 9. CARDS GLOBALES ───────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--txt);
  box-shadow: var(--sh-sm);
  transition: transform .25s, box-shadow .25s;
}
.card:hover          { transform: translateY(-4px); box-shadow: var(--sh-md); }
.card-header         { background: rgba(30,158,235,.10); border-bottom: 1px solid var(--border-dim); padding: 14px 20px; font-weight: 800; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-sky); }
.card-body           { padding: 20px; }
.card-footer         { background: rgba(0,0,0,.20); border-top: 1px solid var(--border-dim); }
.card-title          { color: #fff; font-weight: 800; margin-bottom: 10px; }
.card-text           { color: var(--txt-muted); font-size: .95rem; line-height: 1.65; }
.card-img-top        { border-radius: calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0 0; object-fit: cover; }

/* ── Badge promo boutique ─────────────────────────────────── */
.shop-promo-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: linear-gradient(135deg, #ff3b6b 0%, #ff5e3a 100%);
  color: #fff;
  font-weight: 900;
  font-size: 0.72rem;
  padding: 4px 12px;
  border-radius: 50px;
  z-index: 5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 3px 12px rgba(255,60,100,.5);
  pointer-events: none;
  user-select: none;
}

/* ── 10. BOUTONS GLOBAUX ────────────────────────────────────────
   Bootstrap .btn overrides
   ─────────────────────────────────────────────────────────── */
.btn {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: var(--r-pill);
  transition: transform .2s, box-shadow .2s, background .2s;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary   { background: linear-gradient(135deg, var(--c-sky), var(--c-blue)); border: none; box-shadow: var(--sh-blue); color: #fff; }
.btn-primary:hover { box-shadow: 0 8px 28px rgba(30,158,235,.55); color: #fff; }

.btn-success   { background: linear-gradient(135deg, var(--c-green), #2A8820); border: none; color: #fff; }
.btn-danger    { background: linear-gradient(135deg, var(--c-red), #8A1A0A); border: none; color: #fff; }
.btn-warning   { background: var(--c-grad-yellow); border: none; color: #1A0800; }
.btn-info      { background: linear-gradient(135deg, var(--c-teal), #0D9070); border: none; color: #fff; }

.btn-outline-primary   { border-color: var(--c-sky); color: var(--c-sky); background: transparent; }
.btn-outline-primary:hover { background: rgba(30,158,235,.15); color: var(--c-sky); border-color: var(--c-sky); }

.btn-secondary { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: var(--txt); }
.btn-secondary:hover { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.30); }

.btn-light { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); color: #fff; }
.btn-link  { color: var(--c-sky); }
.btn-link:hover { color: var(--c-yellow); }

/* ── 11. FORMULAIRES ─────────────────────────────────────────── */
.form-label  { font-weight: 700; font-size: .88rem; color: var(--txt-muted); margin-bottom: 6px; }

.form-control,
.form-select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--txt);
  font-family: 'Nunito', sans-serif;
  font-size: .95rem;
  padding: 10px 14px;
  transition: border-color .2s, box-shadow .2s;
}
.form-control:focus,
.form-select:focus {
  background: rgba(30,158,235,.08);
  border-color: var(--c-sky);
  box-shadow: var(--sh-glow);
  color: #fff;
  outline: none;
}
.form-control::placeholder { color: var(--txt-dim); }
.form-select option { background: #0B1835; }

.form-check-input {
  background-color: var(--bg-input);
  border-color: var(--border);
}
.form-check-input:checked {
  background-color: var(--c-sky);
  border-color: var(--c-sky);
}

/* ── 12. TABLES ──────────────────────────────────────────────── */
.table {
  color: var(--txt);
  border-color: var(--border-dim);
}
.table thead th { color: var(--txt-muted); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; border-bottom: 1px solid var(--border); }
.table > :not(caption) > * > * { background: transparent; padding: 14px 16px; }
.table-striped > tbody > tr:nth-of-type(odd) > * { background: rgba(30,158,235,.04); }
.table-hover > tbody > tr:hover > * { background: rgba(30,158,235,.08); }
.table-bordered > * > tr > * { border-color: var(--border-dim); }

/* ── 13. BADGES ─────────────────────────────────────────────── */
.badge { font-family: 'Nunito', sans-serif; font-weight: 700; font-size: .72rem; letter-spacing: .05em; border-radius: 6px; }
.bg-primary   { background: var(--c-sky) !important; }
.bg-success   { background: var(--c-green) !important; }
.bg-danger    { background: var(--c-red) !important; }
.bg-warning   { background: var(--c-yellow) !important; color: #1A0800 !important; }
.bg-info      { background: var(--c-teal) !important; }
.bg-secondary { background: rgba(100,120,160,.55) !important; }
.bg-dark      { background: var(--bg-card) !important; }

/* ── 14. ALERTS ─────────────────────────────────────────────── */
.alert { border: none; border-radius: var(--r-md); font-weight: 600; }
.alert-success { background: rgba(72,192,56,.12);  border-left: 3px solid var(--c-green);  color: #80EE70; }
.alert-danger  { background: rgba(212,46,26,.12);  border-left: 3px solid var(--c-red);    color: #FF9090; }
.alert-warning { background: rgba(245,196,48,.10); border-left: 3px solid var(--c-yellow); color: #FFE56A; }
.alert-info    { background: rgba(30,158,235,.10); border-left: 3px solid var(--c-sky);    color: #8ED8FF; }

/* ── 15. PAGINATION ──────────────────────────────────────────── */
.pagination { gap: 4px; }
.page-link {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm) !important;
  color: var(--txt-muted);
  font-weight: 700;
  transition: all .2s;
}
.page-link:hover  { background: rgba(30,158,235,.18); color: #fff; border-color: var(--c-sky); }
.page-item.active .page-link { background: var(--c-sky); border-color: var(--c-sky); color: #fff; }
.page-item.disabled .page-link { background: var(--bg-card); opacity: .4; }

/* ── 16. MODAL ───────────────────────────────────────────────── */
.modal-content   { background: #0B1835; border: 1px solid var(--border); border-radius: var(--r-lg); color: var(--txt); }
.modal-header    { border-bottom: 1px solid var(--border-dim); padding: 20px 24px; }
.modal-title     { font-weight: 800; font-size: 1.1rem; }
.modal-footer    { border-top: 1px solid var(--border-dim); padding: 16px 24px; }
.modal-body      { padding: 24px; }
.btn-close       { filter: invert(1) opacity(.6); }
.btn-close:hover { filter: invert(1) opacity(1); }
.modal-backdrop.show { backdrop-filter: blur(4px); background: rgba(0,0,0,.65); }

/* ── 17. DROPDOWN ────────────────────────────────────────────── */
.dropdown-menu {
  background: #0B1835;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  padding: 6px;
}
.dropdown-item { color: var(--txt-muted); border-radius: var(--r-sm); padding: 9px 14px; font-weight: 600; font-size: .9rem; transition: background .15s, color .15s; }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(30,158,235,.14); color: #fff; }
.dropdown-divider { border-color: var(--border-dim); }

/* ── 18. BREADCRUMB ──────────────────────────────────────────── */
.breadcrumb { background: transparent; padding: 0; font-size: .85rem; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--txt-dim); }
.breadcrumb-item a { color: var(--c-sky); font-weight: 600; }
.breadcrumb-item.active { color: var(--txt-muted); }

/* ── 19. NAV TABS / PILLS ────────────────────────────────────── */
.nav-tabs { border-bottom: 1px solid var(--border-dim); }
.nav-tabs .nav-link { color: var(--txt-muted); border: none; border-radius: var(--r-sm) var(--r-sm) 0 0; padding: 10px 18px; font-weight: 700; font-size: .88rem; transition: color .2s, background .2s; }
.nav-tabs .nav-link:hover { color: #fff; background: rgba(30,158,235,.08); }
.nav-tabs .nav-link.active { background: rgba(30,158,235,.15); color: var(--c-sky); border-bottom: 2px solid var(--c-sky); }
.nav-pills .nav-link { color: var(--txt-muted); border-radius: var(--r-sm); font-weight: 700; }
.nav-pills .nav-link.active { background: var(--c-sky); color: #fff; }

/* ── 20. FOOTER ──────────────────────────────────────────────── */

/* Wrapper global — même palette bleu nuit que le reste du site */
.macaw-footer {
  position: relative;
  background: rgba(5, 14, 38, 0.97);
  color: rgba(180,210,255,.72);
  overflow: hidden;
}

/* Étoiles subtiles dans le fond (cohérent avec section nuit) */
.macaw-footer::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 8%  20%, rgba(255,255,255,.30) 0%, transparent 100%),
    radial-gradient(1px 1px at 22% 55%, rgba(255,255,255,.22) 0%, transparent 100%),
    radial-gradient(1px 1px at 45%  9%, rgba(255,255,255,.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 61% 70%, rgba(255,255,255,.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 77% 38%, rgba(255,255,255,.28) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 15%, rgba(255,255,255,.22) 0%, transparent 100%),
    radial-gradient(1px 1px at 33% 82%, rgba(255,255,255,.20) 0%, transparent 100%);
  pointer-events: none; z-index: 0;
}

/* Halo bleu centré */
.macaw-footer::after {
  content: '';
  position: absolute;
  top: -80px; left: 50%; transform: translateX(-50%);
  width: 700px; height: 260px;
  background: radial-gradient(ellipse, rgba(30,158,235,.08) 0%, transparent 68%);
  pointer-events: none; z-index: 0;
}

/* Ligne arc-en-ciel animée */
.macaw-footer__topline {
  height: 3px;
  background: linear-gradient(90deg,
    #D42E1A 0%, #F5A020 16.6%, #F5C430 33.2%,
    #48C038 50%, #1E9EEB 66.6%, #9B59F5 83.2%, #D42E1A 100%);
  background-size: 200% 100%;
  animation: bar-rainbow 6s linear infinite;
  position: relative; z-index: 1;
}

/* Corps */
.macaw-footer__body {
  padding: 56px 0 44px;
  position: relative; z-index: 1;
}

/* Grille 4 colonnes équilibrées */
.macaw-footer__grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1.15fr;
  gap: 28px 44px;
  align-items: start;
}

/* ── Col 1 : Brand ─────────────────────────────────────────── */
.macaw-footer__brand {
  display: flex; flex-direction: column; gap: 14px;
  padding-right: 8px;
  border-right: 1px solid rgba(30,158,235,.10);
}

.macaw-footer__logo {
  max-width: 160px; height: auto;
  filter: drop-shadow(0 0 14px rgba(30,158,235,.35));
  transition: filter .3s;
}
.macaw-footer__logo:hover { filter: drop-shadow(0 0 22px rgba(30,158,235,.60)); }

.macaw-footer__tagline {
  font-size: .83rem;
  line-height: 1.62;
  color: rgba(148,185,238,.55);
  margin: 0;
}
.macaw-footer__tagline strong { color: rgba(180,215,255,.78); font-weight: 700; }

/* Réseaux sociaux */
.macaw-footer__socials { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }

.macaw-footer__social {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(30,158,235,.08);
  border: 1px solid rgba(30,158,235,.16);
  text-decoration: none;
  transition: background .2s, border-color .2s, transform .2s;
}
.macaw-footer__social:hover {
  background: rgba(30,158,235,.22);
  border-color: rgba(30,158,235,.45);
  transform: translateY(-2px);
}
.macaw-footer__social i { font-size: 1.05rem; }

/* ── Cols 2-3 : Navigation ─────────────────────────────────── */
.macaw-footer__col { display: flex; flex-direction: column; }

.macaw-footer__col-title {
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(30,158,235,.70);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(30,158,235,.14);
}

.macaw-footer__links {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0;
}
.macaw-footer__links li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: .86rem;
  font-weight: 600;
  color: rgba(155,195,248,.58);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .18s, border-color .18s, padding-left .18s;
}
.macaw-footer__links li a::before {
  content: '';
  display: block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(30,158,235,.40);
  flex-shrink: 0;
  transition: background .18s, transform .18s;
}
.macaw-footer__links li a:hover {
  color: rgba(215,235,255,.92);
  padding-left: 4px;
}
.macaw-footer__links li a:hover::before {
  background: var(--c-sky);
  transform: scale(1.4);
}

/* ── Col 4 : Serveur ──────────────────────────────────────── */
.macaw-footer__ips { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }

.macaw-footer__ip {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 14px;
  background: rgba(14,28,58,.70);
  border: 1px solid rgba(30,158,235,.15);
  border-radius: 12px;
  transition: background .2s, border-color .2s;
}
.macaw-footer__ip:hover {
  background: rgba(18,36,72,.80);
  border-color: rgba(30,158,235,.28);
}

.macaw-footer__ip-label {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: rgba(30,158,235,.60);
  text-transform: uppercase;
}

.macaw-footer__ip-code {
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(30,158,235,.18);
  border-radius: 6px;
  padding: 4px 9px;
  font-family: 'Courier New', monospace;
  font-size: .86rem;
  font-weight: 700;
  color: rgba(210,235,255,.92);
  letter-spacing: .02em;
  width: fit-content;
}

.macaw-footer__dl-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px;
  background: linear-gradient(135deg, rgba(30,158,235,.18), rgba(13,78,138,.25));
  border: 1px solid rgba(30,158,235,.25);
  border-radius: 10px;
  font-size: .80rem; font-weight: 700;
  color: rgba(195,225,255,.85);
  text-decoration: none;
  transition: background .2s, border-color .2s, transform .2s;
}
.macaw-footer__dl-btn:hover {
  background: linear-gradient(135deg, rgba(30,158,235,.30), rgba(13,78,138,.40));
  border-color: rgba(30,158,235,.45);
  transform: translateY(-2px); color: #fff;
}

/* ── Barre du bas ─────────────────────────────────────────── */
.macaw-footer__bottom {
  background: rgba(0,8,22,.55);
  border-top: 1px solid rgba(30,158,235,.10);
  padding: 14px 0;
  position: relative; z-index: 1;
}

.macaw-footer__bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.macaw-footer__copy {
  font-size: .78rem;
  color: rgba(130,170,220,.55);
  line-height: 1.5;
}
.macaw-footer__copy a { color: rgba(30,158,235,.70); text-decoration: none; transition: color .18s; }
.macaw-footer__copy a:hover { color: var(--c-sky); }
.macaw-footer__copy-sep { color: rgba(130,170,220,.40); }

.macaw-footer__conds {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.macaw-footer__conds a {
  font-size: .78rem;
  font-weight: 600;
  color: rgba(130,170,220,.50);
  text-decoration: none;
  transition: color .18s;
}
.macaw-footer__conds a:hover { color: rgba(200,230,255,.85); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 991px) {
  .macaw-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px 36px; }
  .macaw-footer__brand { grid-column: 1 / -1; flex-direction: row; align-items: flex-start; flex-wrap: wrap; }
}
@media (max-width: 575px) {
  .macaw-footer__grid { grid-template-columns: 1fr; }
  .macaw-footer__brand { flex-direction: column; }
  .macaw-footer__bottom-row { flex-direction: column; align-items: flex-start; }
}

/* ── 21. SECTION COMMENT JOUER ───────────────────────────────── */
.macaw-section--howto {
  background: rgba(0, 12, 32, 0.52);
  padding: 72px 0 88px;
  position: relative;
}

/* Halo central décoratif */
.macaw-section--howto::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 800px; height: 300px;
  background: radial-gradient(ellipse, rgba(30,158,235,.09) 0%, transparent 65%);
  pointer-events: none;
}

/* Base commune toutes sections → bubbles ne débordent pas */
.macaw-section {
  position: relative;
  overflow: hidden;
}

/* ── Section Actualités ─────────────────────────────────────── */
.macaw-section--news {
  background: rgba(0, 10, 30, 0.50);
  padding: 72px 0 80px;
  position: relative;
}

/* Titre spécial actus */
.news-sec-title {
  font-family: 'Minecraft', 'Courier New', monospace;
  letter-spacing: .08em;
}
.news-title--sky {
  color: #5CC8F5;
  text-shadow: 0 0 22px rgba(30,158,235,.50);
}

/* Grille 3 colonnes */
.news-grid {
  max-width: 1060px;
  margin: 48px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 991px) {
  .news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .news-grid { grid-template-columns: 1fr; }
}

/* Carte — image plein format + overlay */
.news-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 300px;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none !important;
  color: #fff;
  transition: transform .25s, box-shadow .25s;
}
.news-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  color: #fff;
}

/* Image de fond */
.news-card__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: rgba(10,20,50,.80);
  transition: transform .4s ease;
}
.news-card:hover .news-card__bg {
  transform: scale(1.05);
}

/* Gradient overlay : transparent en haut, sombre en bas */
.news-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.15) 0%,
    rgba(0,0,0,.10) 40%,
    rgba(0,0,0,.78) 100%
  );
}

/* Méta haut (auteur + date) */
.news-card__meta {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  gap: 8px;
}

.news-card__author {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 5px 12px 5px 5px;
  font-size: .80rem;
  font-weight: 700;
  color: #fff;
}

.news-card__avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5865F2, #8B6CF7);
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
}

.news-card__date {
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: .78rem;
  font-weight: 700;
  color: rgba(255,255,255,.90);
  white-space: nowrap;
}

/* Bas de carte (titre + lire) */
.news-card__foot {
  position: relative;
  z-index: 2;
  padding: 14px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.news-card__title {
  margin: 0;
  font-size: 1.04rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.35;
  text-shadow: 0 2px 8px rgba(0,0,0,.60);
}

.news-card__read {
  font-size: .84rem;
  font-weight: 700;
  color: #5DC8F5;
  letter-spacing: .03em;
  transition: color .2s;
}
.news-card:hover .news-card__read { color: #fff; }

/* Bouton "Voir tout" */
.news-view-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 13px 36px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.30);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.85);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none !important;
  transition: background .22s, border-color .22s, color .22s;
}
.news-view-all:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.55);
  color: #fff;
}

/* ── Section Discord ─────────────────────────────────────────── */
.macaw-section--discord {
  background: rgba(4, 6, 24, 0.60);
  padding: 90px 0 100px;
  position: relative;
  overflow: hidden;
}
/* Halo violet centré */
.macaw-section--discord::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 100% at 50% 50%, rgba(88,101,242,0.22) 0%, transparent 68%),
    radial-gradient(ellipse 30% 50% at 20% 80%, rgba(88,101,242,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 30% 50% at 80% 20%, rgba(88,101,242,0.08) 0%, transparent 60%);
  pointer-events: none;
}

/* Carte centrale — layout horizontal */
.discord-cta {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 32px;
  text-align: left;
  position: relative;
  z-index: 1;
  background: rgba(18, 22, 60, 0.55);
  border: 1px solid rgba(88,101,242,.28);
  border-radius: 24px;
  padding: 36px 44px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 0 0 1px rgba(88,101,242,.10) inset,
              0 24px 60px rgba(0,0,0,.35);
}

/* Partie gauche : logo seul */
.discord-cta__left { flex-shrink: 0; }

/* Partie centrale : titre + desc */
.discord-cta__body { flex: 1; min-width: 0; }

/* Mobile : revert column */
@media (max-width: 767px) {
  .discord-cta {
    flex-direction: column;
    text-align: center;
    padding: 40px 28px;
    gap: 20px;
  }
  .discord-cta__actions { align-items: center !important; }
}

/* Orbes décoratifs dans le fond */
.discord-cta__orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.discord-cta__orb--l {
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(88,101,242,.18) 0%, transparent 70%);
  top: -60px; left: -60px;
}
.discord-cta__orb--r {
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(88,101,242,.14) 0%, transparent 70%);
  bottom: -40px; right: -50px;
}

/* Grand logo Discord */
.discord-cta__logo {
  width: 80px; height: 80px;
  background: linear-gradient(135deg, #5865F2, #4451CC);
  border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 32px rgba(88,101,242,.55), 0 0 0 8px rgba(88,101,242,.10);
  animation: char-idle 4s ease-in-out infinite;
  position: relative; z-index: 1;
}
.discord-cta__logo i {
  font-size: 2.6rem;
  color: #fff;
  line-height: 1;
}

.discord-cta__title {
  font-size: clamp(1.35rem, 2.8vw, 1.9rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: .03em;
  margin: 0;
  position: relative; z-index: 1;
}

.discord-cta__desc {
  margin: 8px 0 0;
  font-size: .97rem;
  color: rgba(200,210,255,.72);
  line-height: 1.70;
  position: relative; z-index: 1;
}

/* Droite : membres + bouton empilés */
.discord-cta__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  flex-shrink: 0;
  position: relative; z-index: 1;
}

.discord-cta__members {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(88,101,242,.12);
  border: 1px solid rgba(88,101,242,.30);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: .88rem;
  font-weight: 700;
  color: rgba(200,210,255,.90);
  white-space: nowrap;
}

.discord-cta__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #3BA55D;
  box-shadow: 0 0 7px rgba(59,165,93,.90);
  animation: pulse-green 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 7px rgba(59,165,93,.80); }
  50%       { box-shadow: 0 0 16px rgba(59,165,93,1.0), 0 0 28px rgba(59,165,93,.45); }
}

.discord-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 36px;
  background: linear-gradient(135deg, #5865F2, #4451CC);
  color: #fff;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-decoration: none !important;
  box-shadow: 0 6px 24px rgba(88,101,242,.50);
  transition: transform .2s, box-shadow .2s;
}
.discord-cta__btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(88,101,242,.72);
  color: #fff;
}
.discord-cta__btn i { font-size: 1.15rem; }

@media (max-width: 575px) {
  .discord-cta__btn { padding: 12px 24px; font-size: .9rem; }
}

/* ── FAQ Section ───────────────────────────────────────────── */
.macaw-section--faq {
  background: rgba(0, 8, 25, 0.52);
  padding: 72px 0 96px;
  position: relative;
}

/* Accordéon pleine largeur (une colonne) */
.faq-accordion {
  max-width: 860px;
  margin: 48px auto 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Item FAQ */
.faq-item {
  background: linear-gradient(135deg, rgba(0,150,220,0.45) 0%, rgba(0,80,165,0.45) 100%);
  border: 1px solid rgba(0,180,255,0.28);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: background 0.22s, border-color 0.22s, box-shadow 0.22s;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.faq-item:hover {
  background: linear-gradient(135deg, rgba(0,165,235,0.58) 0%, rgba(0,95,185,0.58) 100%);
  border-color: rgba(0,200,255,0.50);
  box-shadow: 0 6px 28px rgba(0,160,240,0.20);
}
.faq-item.faq-open {
  background: linear-gradient(135deg, rgba(0,155,225,0.62) 0%, rgba(0,85,175,0.62) 100%);
  border-color: rgba(0,210,255,0.60);
  box-shadow: 0 8px 32px rgba(0,160,240,0.25);
}

/* En-tête */
.faq-item__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 26px;
  gap: 16px;
  user-select: none;
}

/* Question */
.faq-item__q {
  flex: 1;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
}

/* Icône + */
.faq-item__icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  font-weight: 300;
  color: #fff;
  line-height: 1;
  transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1);
}
.faq-item.faq-open .faq-item__icon {
  transform: rotate(45deg);
}

/* Réponse dépliante */
.faq-item__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.38s ease, padding 0.25s ease;
  padding: 0 26px;
  color: rgba(255,255,255,0.88);
  font-size: .95rem;
  line-height: 1.70;
  border-top: 0px solid rgba(255,255,255,0.14);
}
.faq-item.faq-open .faq-item__body {
  max-height: 300px;
  padding: 0 26px 22px;
  border-top-width: 1px;
}
.faq-item__body code {
  background: rgba(0,160,255,0.22);
  border-radius: 5px;
  padding: 2px 8px;
  color: #7DE8FF;
  font-size: .88rem;
}

/* ── Onglets ── */
.ht-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 auto 40px;
}

.ht-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(30, 60, 110, 0.38);
  border: 1px solid rgba(100,160,255,.22);
  border-radius: 14px;
  color: rgba(180,215,255,.82);
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: .83rem;
  padding: 11px 22px;
  cursor: pointer;
  transition: all .22s ease;
  white-space: nowrap;
}
.ht-tab__icon { font-size: 1.1rem; line-height: 1; }
.ht-tab:hover {
  border-color: rgba(30,158,235,.35);
  color: rgba(255,255,255,.85);
  background: rgba(30,158,235,.08);
  transform: translateY(-2px);
}
.ht-tab--active {
  background: linear-gradient(135deg, #1E6EB5 0%, #0D4E8A 100%);
  border-color: rgba(30,158,235,.55);
  color: #fff !important;
  box-shadow: 0 6px 22px rgba(30,158,235,.38), 0 0 0 1px rgba(30,158,235,.22) inset;
  transform: translateY(-2px);
}

/* ── Panneaux ── */
.ht-panels { max-width: 760px; margin: 0 auto; }

.ht-panel {
  display: none;
  animation: htFadeUp .35s ease forwards;
}
.ht-panel--active { display: block; }

@keyframes htFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Carte ── */
.ht-card {
  background: rgba(14,28,58,.70);
  border: 1px solid rgba(30,158,235,.18);
  border-radius: 22px;
  padding: 32px 36px;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 40px rgba(0,0,0,.30);
}

.ht-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 24px;
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(30,158,235,.12);
}
.ht-card__title {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ht-card__title > i,
.ht-card__title > span {
  font-size: 1.8rem;
  opacity: .85;
}
.ht-card__title h3 {
  margin: 0 0 3px;
  font-size: 1.08rem;
  font-weight: 800;
  color: #fff;
}
.ht-card__title p {
  margin: 0;
  font-size: .80rem;
  color: var(--txt-muted);
}

/* IP dans la carte */
.ht-ip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(30,158,235,.10);
  border: 1px solid rgba(30,158,235,.28);
  border-radius: 12px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background .2s, transform .2s;
  user-select: none;
}
.ht-ip:hover {
  background: rgba(30,158,235,.22);
  transform: translateY(-2px);
}
.ht-ip i { color: var(--c-sky); font-size: 1rem; }
.ht-ip .macaw-ip__addr {
  font-size: .92rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: .04em;
}
.ht-ip .macaw-ip__hint {
  font-size: .70rem;
  color: var(--txt-muted);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-top: 0;
}

/* ── Étapes (timeline) ── */
.ht-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}
/* Ligne verticale connectant les étapes */
.ht-steps::before {
  content: '';
  position: absolute;
  left: 19px; top: 20px; bottom: 20px;
  width: 2px;
  background: linear-gradient(to bottom, rgba(30,158,235,.35), rgba(30,158,235,.05));
}

.ht-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 16px 14px 0;
  animation: htFadeUp .3s ease both;
  position: relative;
}
.ht-step:nth-child(1) { animation-delay: .05s; }
.ht-step:nth-child(2) { animation-delay: .12s; }
.ht-step:nth-child(3) { animation-delay: .19s; }

.ht-step__num {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #1E9EEB 0%, #0D4E8A 100%);
  color: #fff;
  font-size: .80rem;
  font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(30,158,235,.38);
  position: relative;
  z-index: 1;
}
.ht-step p {
  margin: 0;
  padding-top: 9px;
  color: rgba(190,220,255,.82);
  font-size: .92rem;
  line-height: 1.65;
}
.ht-step strong { color: #fff; }
.ht-step code {
  background: rgba(30,158,235,.16);
  color: var(--c-sky);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: .84rem;
  font-family: monospace;
}

@media (max-width: 767px) {
  .ht-card { padding: 22px 18px; }
  .ht-card__head { flex-direction: column; align-items: flex-start; }
  .ht-tab { padding: 9px 15px; font-size: .78rem; }
}

/* ── 22. PAGES INTERNES ──────────────────────────────────────── */
/* (ancienne numérotation 21) */

/* Barre d'espacement sous la navbar fixed */
.content.main-page,
#content,
main > .container {
  padding-top: 110px;
}

/* Header de section interne */
.page-header-macaw {
  background: linear-gradient(135deg, var(--c-blue), var(--c-dark-blue));
  border-bottom: 1px solid var(--border);
  padding: 28px 0 24px;
  margin-bottom: 32px;
}
.page-header-macaw h1, .page-header-macaw .page-title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 900;
  color: #fff;
  margin: 0;
}

/* ── 21b. WIDGET WYSIWYG (description Rainbow) ──────────────────
   Réduit la carte de description qui s'affiche entre les sections
   ─────────────────────────────────────────────────────────── */

/* Carte wysiwyg — fond transparent, padding réduit */
article.mb-3 .card,
.widget-wysiwyg .card {
  background: rgba(30,158,235,.05);
  border-color: rgba(30,158,235,.14);
  box-shadow: none;
}
article.mb-3 .card:hover,
.widget-wysiwyg .card:hover {
  transform: none;
  box-shadow: none;
}

/* Titre de la description — plus petit */
article.mb-3 .card-title,
.widget-wysiwyg .card-title {
  font-size: .95rem;
  font-weight: 800;
  color: var(--c-sky);
  margin-bottom: 6px;
}

/* Corps du texte — compact, moins de lignes */
article.mb-3 .card-text,
.widget-wysiwyg .card-text {
  font-size: .85rem;
  line-height: 1.55;
  color: var(--txt-muted);
  /* Limite à 3 lignes */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Padding réduit sur la card-body */
article.mb-3 .card-body,
.widget-wysiwyg .card-body {
  padding: 14px 18px;
}

/* Si la description est dans la section jungle, on la met en ligne */
.macaw-section--jungle article.mb-3 {
  margin-bottom: 8px !important;
}

/* ── 22. PAGE PROFIL ─────────────────────────────────────────── */
.profile-card,
.user-card,
.card[class*="profile"] {
  border: 1px solid var(--border);
  background: var(--bg-card);
}
.profile-card .avatar,
img.rounded-circle {
  border: 3px solid var(--c-sky);
  box-shadow: 0 0 0 5px rgba(30,158,235,.18);
}

/* ── 23. PAGE BOUTIQUE (SHOP) ────────────────────────────────── */
.shop-item,
.card.giftcard,
.card.item-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.shop-item:hover,
.card.giftcard:hover,
.card.item-card:hover {
  border-color: var(--c-sky);
  box-shadow: var(--sh-blue);
}
.shop-price,
.price-tag { color: var(--c-yellow); font-weight: 900; font-size: 1.2rem; }

/* ── 24. PAGE VOTE ───────────────────────────────────────────── */
.vote-site,
.voting-site { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 20px; margin-bottom: 12px; transition: border-color .2s; }
.vote-site:hover,
.voting-site:hover { border-color: var(--c-sky); }

/* ── 25. PAGE AUTH ───────────────────────────────────────────── */
.auth-wrapper,
.login-wrapper,
.register-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px 20px 40px;
  background: var(--bg-root);
}
.auth-card,
.login-card,
.register-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 40px;
  width: 100%;
  max-width: 440px;
  box-shadow: var(--sh-lg);
}
.auth-card .card-title { font-size: 1.6rem; font-weight: 900; text-align: center; margin-bottom: 28px; }

/* ── 26. SCROLLBAR ───────────────────────────────────────────── */
::-webkit-scrollbar       { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: #04080E; }
::-webkit-scrollbar-thumb { background: linear-gradient(to bottom, var(--c-sky), var(--c-blue)); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-sky); }

/* ── 27. ANIMATIONS @keyframes ───────────────────────────────── */

@keyframes palm-sway {
  0%,100% { transform: rotate(0deg); }
  30%     { transform: rotate(2.5deg); }
  70%     { transform: rotate(-1.8deg); }
}
@keyframes cloud-drift {
  from { transform: translateX(-150px); }
  to   { transform: translateX(calc(100vw + 200px)); }
}
@keyframes char-idle {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-10px); }
}
@keyframes flower-sway {
  0%,100% { transform: rotate(0deg) translateY(0); }
  33%     { transform: rotate(5deg) translateY(-5px); }
  66%     { transform: rotate(-4deg) translateY(-2px); }
}
@keyframes stat-pulse {
  0%,100% { filter: drop-shadow(0 0 8px rgba(255,255,255,.20)); transform: scale(1); }
  50%     { filter: drop-shadow(0 0 20px rgba(255,255,255,.45)); transform: scale(1.06); }
}
@keyframes bubble-rise {
  0%   { transform: translateY(0) scale(1); opacity: .7; }
  80%  { opacity: .3; }
  100% { transform: translateY(-260px) scale(1.5); opacity: 0; }
}
@keyframes bubble-rise-hero {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: .55; }
  30%  { transform: translateY(-120px) translateX(8px) scale(1.1); opacity: .45; }
  65%  { transform: translateY(-320px) translateX(-6px) scale(1.2); opacity: .25; }
  100% { transform: translateY(-520px) translateX(4px) scale(1.5); opacity: 0; }
}
@keyframes section-in {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════════
   PAGE VOTE — FirstSky
   ══════════════════════════════════════════════════════════════ */

/* ── HERO VOTE ──────────────────────────────────────────────── */
.vote-hero {
  position: relative;
  padding: 90px 0 80px;
  overflow: hidden;
  text-align: center;
}

/* Halo radial bleu comme fond d'ambiance */
.vote-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 60% at 50% 0%,
      rgba(30,158,235,.13) 0%, transparent 65%),
    rgba(0,8,24,.60);
  pointer-events: none;
}

.vote-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.vote-hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(30,158,235,.12);
  border: 1px solid rgba(30,158,235,.28);
  border-radius: 999px;
  padding: 5px 18px;
  font-size: .70rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(100,200,255,.85);
  margin: 0;
}

.vote-hero__title {
  font-size: clamp(1.7rem, 5vw, 3rem);
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  line-height: 1.1;
}

.vote-hero__desc {
  font-size: 1.04rem;
  color: rgba(180,215,255,.72);
  line-height: 1.70;
  margin: 0;
  max-width: 560px;
}
.vote-hero__desc strong { color: rgba(220,240,255,.92); }

.vote-hero__hint {
  font-size: .80rem;
  color: rgba(140,185,240,.45);
  margin: -4px 0 0;
}

/* ── Formulaire pseudo (invités) ──────────────────────────── */
.vote-name-form {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(14,28,58,.80);
  border: 1px solid rgba(30,158,235,.22);
  box-shadow: 0 8px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  width: 100%;
  max-width: 520px;
  transition: border-color .22s, box-shadow .22s;
}
.vote-name-form:focus-within {
  border-color: rgba(30,158,235,.55);
  box-shadow: 0 8px 32px rgba(0,0,0,.45), 0 0 0 3px rgba(30,158,235,.14);
}

.vote-name-form__field {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 12px;
  padding: 0 16px;
}
.vote-name-form__icon { color: rgba(30,158,235,.55); font-size: 1.1rem; flex-shrink: 0; }

.vote-name-form__input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: .96rem;
  font-weight: 700;
  padding: 16px 0;
}
.vote-name-form__input::placeholder { color: rgba(140,185,240,.40); font-weight: 600; }

.vote-name-form__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 24px;
  background: linear-gradient(135deg, #1E9EEB, #0D4E8A);
  border: none;
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .04em;
  cursor: pointer;
  white-space: nowrap;
  transition: filter .2s;
  min-height: 56px;
}
.vote-name-form__btn:hover { filter: brightness(1.15); }
.vote-name-form__btn .btn-icon { font-size: 1.2rem; }

/* ── Utilisateur connecté ─────────────────────────────────── */
.vote-hero__user {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: rgba(14,28,58,.75);
  border: 1px solid rgba(30,158,235,.22);
  border-radius: 14px;
  padding: 12px 22px;
}
.vote-hero__user-avatar {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #1E9EEB, #0D4E8A);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 900; color: #fff;
  flex-shrink: 0;
}
.vote-hero__user-label {
  display: block;
  font-size: .72rem;
  color: rgba(140,185,240,.55);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
}
.vote-hero__user-name { font-size: 1rem; font-weight: 800; color: #fff; }

/* ── Section sites de vote ────────────────────────────────── */
.vote-sites-section {
  padding: 64px 0 88px;
  position: relative;
  background: rgba(0,8,22,.55);
}
.vote-sites-section::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 700px; height: 200px;
  background: radial-gradient(ellipse, rgba(30,158,235,.08) 0%, transparent 68%);
  pointer-events: none;
}

/* Choix de serveur (magrigry) */
.vote-server-select {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 480px;
  margin: 32px auto;
  flex-wrap: wrap;
}
.vote-server-select__label {
  font-size: .88rem;
  font-weight: 700;
  color: rgba(180,215,255,.72);
  white-space: nowrap;
}
.vote-server-select__input { flex: 1; min-width: 200px; }

/* Grille de sites */
.vote-sites-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 1000px;
  margin: 48px auto 0;
}
@media (max-width: 991px) { .vote-sites-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .vote-sites-grid { grid-template-columns: 1fr; gap: 10px; } }

/* Carte d'un site de vote */
.vote-site-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(14,28,58,.72);
  border: 1px solid rgba(30,158,235,.14);
  border-left: 3px solid rgba(30,158,235,.50);
  border-radius: 0 14px 14px 0;
  text-decoration: none;
  color: inherit;
  transition: background .22s, border-left-color .22s, transform .22s, box-shadow .22s;
  position: relative;
}
.vote-site-card:hover {
  background: rgba(16,34,72,.85);
  border-left-color: var(--c-sky);
  transform: translateX(4px);
  box-shadow: -3px 0 18px rgba(30,158,235,.18), 0 4px 20px rgba(0,0,0,.35);
  color: inherit;
}

/* Numéro de position */
.vote-site-card__num {
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .06em;
  color: rgba(30,158,235,.45);
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}

/* Favicon */
.vote-site-card__icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  background: rgba(255,255,255,.06);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

/* Info (nom + timer) */
.vote-site-card__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.vote-site-card__name {
  font-size: .92rem;
  font-weight: 700;
  color: rgba(220,240,255,.90);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Timer badge — caché si pas encore disponible */
.vote-site-card__timer {
  font-size: .68rem;
  letter-spacing: .02em;
  align-self: flex-start;
}

/* Bouton CTA */
.vote-site-card__cta {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  font-size: .78rem;
  font-weight: 800;
  color: rgba(30,158,235,.65);
  letter-spacing: .04em;
  transition: color .2s;
}
.vote-site-card:hover .vote-site-card__cta { color: var(--c-sky); }

/* Message vide */
.vote-empty {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px;
  background: rgba(212,46,26,.08);
  border: 1px solid rgba(212,46,26,.20);
  border-radius: 14px;
  color: rgba(255,180,180,.75);
  font-weight: 600;
}

/* ── Section résultat ─────────────────────────────────────── */
.vote-result-wrap {
  padding: 72px 0 80px;
  background: rgba(0,8,22,.55);
  text-align: center;
}

.vote-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 520px;
  margin: 0 auto;
}
.vote-result__icon { font-size: 3.5rem; line-height: 1; }
.vote-result__text {
  font-size: 1.15rem;
  font-weight: 700;
  color: rgba(220,245,220,.90);
  line-height: 1.60;
  margin: 0;
}
.vote-result__back {
  margin-top: 8px;
}

/* ── Section leaderboard ──────────────────────────────────── */
.vote-leaderboard {
  padding: 80px 0 100px;
  background: rgba(0,6,18,.60);
  position: relative;
}
.vote-leaderboard::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 900px; height: 260px;
  background: radial-gradient(ellipse, rgba(30,158,235,.07) 0%, transparent 68%);
  pointer-events: none;
}

/* Podium — conteneur principal */
.vote-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 20px;
  margin: 56px auto 64px;
  max-width: 780px;
}

/* Carte joueur podium */
.vote-podium__player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: relative;
}

/* Marches du podium */
.vote-podium__step {
  width: 100%;
  border-radius: 10px 10px 0 0;
  margin-top: 12px;
  position: relative;
}
/* Numéro affiché au centre de la marche */
.vote-podium__step::before {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1;
  font-family: 'Nunito', sans-serif;
  letter-spacing: -.02em;
}
.vote-podium__step--1 {
  height: 80px;
  background: linear-gradient(180deg, rgba(255,200,50,.55) 0%, rgba(230,160,0,.30) 100%);
  border: 1.5px solid rgba(255,205,50,.65);
  border-bottom: none;
  box-shadow: 0 -6px 28px rgba(255,190,0,.25);
}
.vote-podium__step--1::before { content: '1'; color: rgba(255,220,80,.95); text-shadow: 0 0 14px rgba(255,190,0,.50); }
.vote-podium__step--2 {
  height: 54px;
  background: linear-gradient(180deg, rgba(178,196,220,.42) 0%, rgba(148,168,198,.22) 100%);
  border: 1.5px solid rgba(188,208,232,.50);
  border-bottom: none;
  box-shadow: 0 -4px 18px rgba(160,190,220,.12);
}
.vote-podium__step--2::before { content: '2'; color: rgba(200,220,240,.90); }
.vote-podium__step--3 {
  height: 36px;
  background: linear-gradient(180deg, rgba(192,128,68,.42) 0%, rgba(162,100,46,.22) 100%);
  border: 1.5px solid rgba(198,142,96,.50);
  border-bottom: none;
  box-shadow: 0 -4px 16px rgba(190,130,70,.12);
}
.vote-podium__step--3::before { content: '3'; color: rgba(210,155,100,.90); }

/* Couronne 1ère place */
.vote-podium__crown {
  font-size: 1.5rem;
  line-height: 1;
  margin-bottom: 4px;
  animation: podiumCrownFloat 2.8s ease-in-out infinite;
}
@keyframes podiumCrownFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}

/* Skin du joueur */
.vote-podium__skin {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.vote-podium__player--1st .vote-podium__skin {
  filter: drop-shadow(0 0 18px rgba(255,190,0,.30));
}
.vote-podium__player--2nd .vote-podium__skin,
.vote-podium__player--3rd .vote-podium__skin {
  filter: drop-shadow(0 0 10px rgba(30,158,235,.18));
}

/* Infos joueur */
.vote-podium__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  margin-bottom: 2px;
}
.vote-podium__rank {
  font-size: .72rem;
  font-weight: 900;
  color: rgba(30,158,235,.75);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.vote-podium__rank--gold   { color: #f5c542; }
.vote-podium__rank--bronze { color: #c87c3a; }

.vote-podium__name {
  font-size: .95rem;
  font-weight: 800;
  color: rgba(220,240,255,.95);
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vote-podium__count {
  font-size: .72rem;
  font-weight: 700;
  color: rgba(30,158,235,.55);
  letter-spacing: .03em;
}

/* Taille des cartes selon rang */
.vote-podium__player--1st { width: 180px; }
.vote-podium__player--2nd { width: 160px; }
.vote-podium__player--3rd { width: 150px; }

/* ── Tableau classement ──────────────────────────────────────── */
.vote-rankings {
  max-width: 680px;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(30,158,235,.14);
}
.vote-rankings__table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(10,20,46,.72);
}
.vote-rankings__table thead tr {
  background: rgba(14,30,64,.90);
}
.vote-rankings__table th {
  padding: 14px 20px;
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: rgba(30,158,235,.65);
  border-bottom: 1px solid rgba(30,158,235,.14);
}
.vote-rankings__table td {
  padding: 12px 20px;
  font-size: .88rem;
  color: rgba(200,225,255,.80);
  border-bottom: 1px solid rgba(30,158,235,.07);
  vertical-align: middle;
}
.vote-rankings__table tbody tr:last-child td { border-bottom: none; }
.vote-rankings__table tbody tr:hover td {
  background: rgba(16,34,72,.55);
}

/* Row top 3 */
.vote-rankings__row--top td { color: rgba(220,240,255,.95); }
.vote-rankings__table tbody tr:nth-child(1) td { background: rgba(255,190,0,.04); }
.vote-rankings__table tbody tr:nth-child(2) td { background: rgba(170,185,205,.03); }
.vote-rankings__table tbody tr:nth-child(3) td { background: rgba(185,120,60,.03); }

/* Row "Vous" */
.vote-rankings__row--me td {
  background: rgba(30,158,235,.08) !important;
  border-left: 2px solid rgba(30,158,235,.45);
}

/* Cellule position */
.vote-rankings__pos {
  font-size: 1.05rem;
  font-weight: 900;
  text-align: center;
  width: 48px;
}

/* Cellule joueur */
.vote-rankings__player {
  display: flex;
  align-items: center;
  gap: 10px;
}
.vote-rankings__avatar {
  border-radius: 6px;
  flex-shrink: 0;
  border: 1px solid rgba(30,158,235,.18);
}
.vote-rankings__you {
  display: inline-block;
  font-size: .65rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  background: rgba(30,158,235,.18);
  color: rgba(30,158,235,.90);
  border-radius: 5px;
  padding: 2px 7px;
  margin-left: 4px;
}

/* Cellule votes */
.vote-rankings__votes strong {
  font-size: .95rem;
  font-weight: 900;
  color: rgba(30,158,235,.85);
}

/* Responsive podium */
@media (max-width: 767px) {
  .vote-podium { gap: 10px; }
  .vote-podium__player--1st { width: 140px; }
  .vote-podium__player--2nd { width: 122px; }
  .vote-podium__player--3rd { width: 110px; }
  .vote-podium__name { font-size: .82rem; max-width: 120px; }
  .vote-rankings__table td, .vote-rankings__table th { padding: 10px 14px; }
}
@media (max-width: 479px) {
  .vote-podium { flex-wrap: wrap; align-items: center; justify-content: center; }
  .vote-podium__player--1st { order: -1; width: 140px; }
  .vote-podium__step { display: none; }
  .vote-rankings { border-radius: 12px; }
}

/* ── 27a. PAGE AUTHENTIFICATION ─────────────────────────────── */
.auth-page {
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  padding: 64px 0 88px;
}
.auth-card-outer {
  display: flex;
  justify-content: center;
}
.auth-card {
  width: 100%;
  max-width: 440px;
  background: rgba(7,16,40,.93);
  border: 1px solid rgba(30,158,235,.22);
  border-radius: 24px;
  padding: 46px 42px;
  backdrop-filter: blur(18px);
  box-shadow: 0 28px 72px rgba(0,0,0,.65), 0 0 0 1px rgba(30,158,235,.07), inset 0 1px 0 rgba(30,158,235,.10);
}
.auth-card__logo-link {
  display: block;
  text-align: center;
  margin-bottom: 18px;
  text-decoration: none;
}
.auth-card__logo { height: 66px; width: auto; }
.auth-card__title {
  font-size: 1.55rem;
  font-weight: 900;
  text-align: center;
  margin: 0 0 5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
}
.auth-card__sub {
  text-align: center;
  font-size: .80rem;
  color: rgba(120,175,240,.52);
  margin: 0 0 28px;
}
.auth-alerts { margin-bottom: 4px; }
.auth-field { margin-bottom: 16px; }
.auth-field__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: rgba(120,175,240,.65);
  margin-bottom: 7px;
}
.auth-field__input {
  display: block;
  width: 100%;
  height: 48px;
  background: rgba(14,28,58,.80) !important;
  border: 1px solid rgba(30,158,235,.22) !important;
  border-radius: 12px !important;
  color: rgba(220,240,255,.90) !important;
  font-size: .92rem !important;
  font-family: 'Nunito', sans-serif !important;
  padding: 0 16px !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color .2s, box-shadow .2s !important;
}
.auth-field__input:focus {
  border-color: rgba(30,158,235,.60) !important;
  box-shadow: 0 0 0 3px rgba(30,158,235,.12) !important;
}
.auth-field__input::placeholder { color: rgba(90,145,205,.32) !important; }
.auth-field__input.is-invalid { border-color: rgba(220,60,60,.60) !important; }
.auth-field__error {
  display: block;
  font-size: .72rem;
  color: rgba(255,110,90,.85);
  margin-top: 5px;
}
.auth-form__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  gap: 10px;
  flex-wrap: wrap;
}
.auth-remember {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .80rem;
  color: rgba(140,185,240,.60);
  cursor: pointer;
  user-select: none;
}
.auth-remember__check { accent-color: var(--c-sky); cursor: pointer; }
.auth-forgot {
  font-size: .80rem;
  color: rgba(30,158,235,.65);
  text-decoration: none;
  transition: color .2s;
}
.auth-forgot:hover { color: var(--c-sky); text-decoration: underline; }
.auth-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 50px;
  background: linear-gradient(135deg, #1E9EEB 0%, #0B60B0 100%);
  border: none;
  border-radius: 14px;
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: .88rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s, filter .18s;
  box-shadow: 0 4px 20px rgba(30,158,235,.40);
  margin-bottom: 4px;
}
.auth-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(30,158,235,.58);
  filter: brightness(1.08);
}
.auth-submit i { font-size: 1.35rem; }
.auth-card__footer {
  text-align: center;
  font-size: .80rem;
  color: rgba(120,175,240,.50);
  margin: 18px 0 0;
}
.auth-card__footer a {
  color: rgba(30,158,235,.78);
  font-weight: 700;
  text-decoration: none;
  transition: color .2s;
}
.auth-card__footer a:hover { color: var(--c-sky); }
@media (max-width: 575px) {
  .auth-card { padding: 32px 22px; border-radius: 18px; }
  .auth-card__title { font-size: 1.3rem; }
}

/* ── 27b. ANIMATIONS REVEAL AU SCROLL ──────────────────────── */

/* État caché avant entrée dans le viewport */
.m-will-reveal {
  opacity: 0;
  transition:
    opacity  .60s ease,
    transform .65s cubic-bezier(.22,.68,0,1.20);
  will-change: opacity, transform;
}

/* Directions de départ */
.m-will-reveal.m-dir-up    { transform: translateY(38px); }
.m-will-reveal.m-dir-left  { transform: translateX(-52px); }
.m-will-reveal.m-dir-right { transform: translateX(52px); }
.m-will-reveal.m-dir-zoom  {
  transform: scale(.86);
  transition: opacity .55s ease, transform .60s cubic-bezier(.34,1.56,.64,1);
}

/* État final — révélé */
.m-will-reveal.m-revealed {
  opacity: 1 !important;
  transform: none !important;
}

/* Accessibilité : désactiver toute animation si l'utilisateur le préfère */
@media (prefers-reduced-motion: reduce) {
  .m-will-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── 28. RESPONSIVE ─────────────────────────────────────────── */

@media (max-width: 991px) {
  .header  { top: 10px; padding: 0 18px; }
  .macaw-hero__inner { padding: 120px 20px 140px; }
  .macaw-char { display: none; }
  .macaw-palm { width: 160px; height: 280px; }
  .macaw-cta-card { padding: 28px 24px; }
}

@media (max-width: 767px) {
  .macaw-hero { min-height: 100svh; }
  .macaw-hero__logo img { height: 200px; }
  .macaw-ip__addr { font-size: 1rem; }
  .macaw-btn { padding: 12px 22px; font-size: .83rem; }
  .macaw-stats { gap: 18px; }
  .macaw-stat  { width: 118px; height: 118px; }
  .macaw-stat__val { font-size: 1.35rem; }
  .macaw-sec-title { font-size: 1.1rem; }
  .macaw-cta-card { flex-direction: column; text-align: center; }
  .content.main-page, #content, main > .container { padding-top: 80px; }
}

@media (max-width: 479px) {
  .header { width: 96vw; padding: 0 14px; border-radius: 12px; }
  .macaw-hero__logo img { height: 160px; }
  .macaw-cloud--3 { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   NAVBAR — CORRECTIFS DIVERS
   ══════════════════════════════════════════════════════════════ */

/* ── Skin joueur dans le rond du profil ─────────────────────── */
.navbar-skin-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  image-rendering: pixelated; /* préserve le pixel-art des skins MC */
}

/* ── Auth mobile + hamburger : au-dessus du collapse panel ─────
   backdrop-filter sur le collapse crée un stacking context qui
   sinon s'affiche par-dessus les éléments du même flex-row      */
.navbar-auth-mobile,
.header .navbar-toggler {
  position: relative;
  z-index: 10;
}

/* ── Bouton profil utilisateur : forcer carré + cercle ───────── */
.navbar-btn--auth.navbar-btn--user {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════
   NAVBAR — CORRECTIFS MOBILE
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Header + navbar : taille adaptée mobile ─────────────── */
.header .navbar {
  min-height: 70px;
  height: auto;         /* overrides le height:70px fixe */
}
@media (min-width: 1200px) {
  .header .navbar { height: 70px; min-height: unset; }
}

/* ≤ 575px — header compact */
@media (max-width: 575px) {
  .header {
    top: 6px;
    width: calc(100vw - 16px);   /* 8px marge de chaque côté */
    padding: 0 14px;
    border-radius: 12px;
  }
  .header .navbar {
    min-height: 54px;
  }
  /* Logo plus petit */
  .header .navbar-brand img { max-height: 32px; }
  /* Toggler plus compact */
  .header .navbar-toggler { padding: 6px; border-radius: 8px; }
  .header .navbar-toggler .icon-bar { width: 18px; }
  /* Auth mobile plus petit */
  .navbar-auth-mobile { width: 30px; height: 30px; font-size: 1rem; }
}

/* ── 2. Hamburger icon-bar (absent de macaw.css) ────────────── */
.header .navbar-toggler .icon-bar {
  display: block;
  width: 22px; height: 2px;
  border-radius: 1px;
  background: rgba(200, 228, 255, .90);
  transition: transform .28s ease, opacity .22s ease;
}
.header .navbar-toggler .icon-bar + .icon-bar { margin-top: 5px; }
/* Animation → ✕ à l'ouverture */
.header .navbar-toggler.x:not(.collapsed) .icon-bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.header .navbar-toggler.x:not(.collapsed) .icon-bar:nth-child(2) {
  opacity: 0; transform: translateX(-12px);
}
.header .navbar-toggler.x:not(.collapsed) .icon-bar:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ── 3. Panel collapse — calé sur le vrai breakpoint xl ─────── */
@media (max-width: 1199.98px) {
  /* S'assurer que le collapse passe sous le row hamburger+auth */
  .header .navbar-collapse {
    flex-basis: 100%;
    order: 99;
  }

  /* Menu ouvert : colonne normale (liens NAV en haut, CTA en bas) */
  .header .navbar-collapse.show,
  .header .navbar-collapse.collapsing {
    display: flex !important;
    flex-direction: column !important;
    background: rgba(6, 14, 38, .97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: 0 0 14px 14px;
    padding: 10px 8px 16px;
    margin: 0 -32px;
    border-top: 1px solid rgba(30,158,235,.22);
    overflow: hidden;
  }

  /* Nav links : en haut, pleine largeur */
  .header .navbar-collapse .navbar-menu {
    order: 1;
    flex-direction: column !important;
    width: 100%; padding: 0;
    margin: 0 !important;
    gap: 2px !important;
  }
  .header .navbar-collapse .nav-item { width: 100%; }
  .header .navbar-collapse .nav-link {
    padding: 12px 16px;
    font-size: .92rem;
    width: 100%; display: block;
    text-align: left;
  }
  /* Dropdown en mode statique */
  .header .navbar-collapse .dropdown-menu {
    position: static !important; transform: none !important;
    box-shadow: none; border: none;
    background: rgba(255,255,255,.04);
    border-radius: 8px; margin: 2px 8px;
  }

  /* CTA mobile (Boutique + Jouer) en BAS du menu */
  .navbar-cta-mobile {
    order: 2;
    display: flex;
    gap: 8px;
    padding: 10px 8px 2px;
    border-top: 1px solid rgba(30,158,235,.14);
    margin-top: 8px;
    flex-wrap: wrap;
  }
  .navbar-cta-mobile .navbar-btn {
    flex: 1 1 auto;
    justify-content: center;
    font-size: .80rem;
    height: 36px; padding: 0 12px;
    min-width: 0;
  }
}
@media (min-width: 1200px) {
  .navbar-cta-mobile { display: none !important; }
}

/* ≤ 575px — collapse panel suit le padding 14px du header */
@media (max-width: 575px) {
  .header .navbar-collapse.show,
  .header .navbar-collapse.collapsing {
    margin: 0 -14px;
    border-radius: 0 0 11px 11px;
    padding: 8px 6px 12px;
  }
}

/* ══════════════════════════════════════════════════════════════
   SHOP — ONE-PAGE CHECKOUT + PROFIL (FirstSky theme)
   ══════════════════════════════════════════════════════════════ */

/* ── STEPPER QUANTITÉ ───────────────────────────────────────── */
.shop-qty-stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.shop-qty-btn {
  width: 36px; height: 36px;
  border: none; border-radius: var(--r-sm);
  font-size: 1.1rem; font-weight: 800; line-height: 1;
  cursor: pointer;
  transition: background .15s, transform .12s, opacity .15s;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.shop-qty-minus {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--txt-muted);
}
.shop-qty-minus:hover:not(:disabled) {
  background: rgba(255,255,255,.18);
  color: #fff; transform: scale(1.08);
}
.shop-qty-minus:disabled { opacity: .28; cursor: default; }
.shop-qty-plus {
  background: linear-gradient(135deg, var(--c-green), #2e9e20);
  color: #fff;
  box-shadow: 0 3px 10px rgba(72,192,56,.38);
}
.shop-qty-plus:hover:not(:disabled) {
  filter: brightness(1.12); transform: scale(1.08);
  box-shadow: 0 5px 18px rgba(72,192,56,.58);
}
.shop-qty-plus:disabled { opacity: .32; cursor: default; box-shadow: none; }
.shop-qty-val {
  min-width: 42px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(30,158,235,.08);
  border: 1px solid rgba(30,158,235,.28);
  border-radius: var(--r-sm);
  font-weight: 800; font-size: .95rem; color: #fff;
  user-select: none;
}

/* ── PRIX BARRÉ (remise) ────────────────────────────────────── */
.shop-price-original {
  color: var(--c-green);
  text-decoration: line-through;
  font-weight: 700;
  opacity: .85;
}

/* ── CHECKOUT — BLOC COMMANDE ───────────────────────────────── */
.shop-co-order {
  padding: 20px 24px 18px;
  background: rgba(30,158,235,.03);
  border-bottom: 1px solid rgba(30,158,235,.10);
}
.shop-section-label {
  display: flex; align-items: center; gap: 7px;
  font-size: .68rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--c-sky);
  margin-bottom: 12px;
}
.shop-section-label-cancel {
  margin-left: auto;
  background: none; border: none; padding: 2px 4px;
  color: var(--txt-muted); cursor: pointer; line-height: 1;
  font-size: .85rem;
  transition: color .15s, transform .12s;
}
.shop-section-label-cancel:hover { color: rgba(255,255,255,.75); transform: scale(1.15); }

/* Ligne article panier */
.shop-cart-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px;
  background: rgba(11,24,53,.90);
  border: 1px solid rgba(30,158,235,.22);
  border-radius: var(--r-md);
  backdrop-filter: blur(8px);
}
.shop-cart-item__icon {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: var(--r-sm);
  background: rgba(30,158,235,.14);
  border: 1px solid rgba(30,158,235,.25);
  color: var(--c-sky);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.shop-cart-item__name  { flex: 1; font-weight: 800; color: #fff; font-size: .92rem; }
.shop-cart-item__qty   { color: var(--txt-muted); font-size: .82rem; font-weight: 700; white-space: nowrap; }
.shop-cart-item__price {
  font-weight: 900; color: var(--c-sky); white-space: nowrap;
  text-align: right;
  text-shadow: 0 0 18px rgba(30,158,235,.45);
}

/* Coupon */
.shop-coupon-prepend {
  background: rgba(30,158,235,.08) !important;
  border: 1px solid rgba(30,158,235,.22) !important;
  border-right: none !important;
  color: var(--c-sky) !important;
}
.shop-coupon-row .form-control {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(30,158,235,.22) !important; border-left: none !important;
  color: var(--txt) !important; font-size: .84rem; height: 34px;
}
.shop-coupon-row .form-control:focus {
  background: rgba(255,255,255,.07) !important;
  border-color: var(--c-sky) !important;
  box-shadow: 0 0 0 3px rgba(30,158,235,.18) !important; color: #fff !important;
}
.shop-coupon-row .form-control::placeholder { color: rgba(150,185,240,.38); }
.shop-coupon-apply-btn {
  background: rgba(30,158,235,.12) !important;
  border: 1px solid rgba(30,158,235,.30) !important;
  color: var(--c-sky) !important; font-weight: 700; font-size: .80rem; height: 34px;
  transition: background .18s, color .18s;
}
.shop-coupon-apply-btn:hover {
  background: rgba(30,158,235,.25) !important; color: #fff !important;
}

/* ── SÉPARATEUR MODE DE PAIEMENT ────────────────────────────── */
.shop-pay-divider {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 24px;
  background: rgba(30,158,235,.08);
  border-top: 1px solid rgba(30,158,235,.14);
  border-bottom: 1px solid rgba(30,158,235,.14);
  font-size: .68rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--c-sky);
}

/* ── CHECKOUT — BLOC PAIEMENT ───────────────────────────────── */
.shop-co-pay { padding: 18px 24px 22px; }

/* Grille passerelles */
.shop-gateways-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.shop-gw-wrap { display: contents; }

.shop-gateway-card {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px; min-height: 90px; padding: 16px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--txt); font-size: .75rem; font-weight: 800;
  text-align: center; cursor: pointer; width: 130px;
  transition: border-color .2s, background .18s, transform .18s, box-shadow .2s;
  appearance: none; -webkit-appearance: none; line-height: 1.3;
}
.shop-gateway-card:hover,
.shop-gateway-card:focus {
  border-color: var(--c-sky);
  background: rgba(30,158,235,.12);
  transform: translateY(-4px);
  box-shadow: var(--sh-blue);
  color: #fff; outline: none;
}
.shop-gateway-card img {
  max-height: 36px; max-width: 88px;
  object-fit: contain; filter: brightness(1.05);
}
.shop-gw-name { color: var(--txt-muted); font-size: .72rem; font-weight: 700; }
.shop-gateway-card:hover .shop-gw-name { color: rgba(200,225,255,.70); }

/* Monnaie serveur — accent jaune */
.shop-gw-wrap--money .shop-gateway-card {
  background: rgba(245,196,48,.06);
  border-color: rgba(245,196,48,.25);
}
.shop-gw-wrap--money .shop-gateway-card:hover {
  border-color: var(--c-yellow);
  background: rgba(245,196,48,.14);
  box-shadow: 0 6px 24px rgba(245,196,48,.28);
}
.shop-gw-wrap--money .shop-gateway-card .bi-coin { color: var(--c-yellow); }

/* ── PROFIL — VOS ACHATS ────────────────────────────────────── */
.shop-profile-wrap { display: flex; flex-direction: column; }

.shop-profile-section { margin-bottom: 36px; }

.shop-profile-section__title {
  display: flex; align-items: center; gap: 10px;
  font-size: .70rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .11em;
  color: var(--c-sky);
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(30,158,235,.20);
}

/* Carte achat */
.shop-purchase-card {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center; gap: 16px;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: 8px;
  transition: transform .22s, border-color .2s, box-shadow .22s;
}
.shop-purchase-card:hover {
  transform: translateY(-3px);
  border-color: rgba(30,158,235,.45);
  box-shadow: var(--sh-blue);
}
.shop-purchase-card__icon {
  width: 48px; height: 48px; border-radius: var(--r-md);
  background: rgba(30,158,235,.12);
  border: 1px solid rgba(30,158,235,.22);
  color: var(--c-sky);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem;
}
.shop-purchase-card__icon--sub {
  background: rgba(72,192,56,.12);
  border-color: rgba(72,192,56,.22);
  color: var(--c-green);
}
.shop-purchase-card__body { min-width: 0; }
.shop-purchase-card__method {
  font-weight: 800; color: #fff; font-size: .92rem; margin-bottom: 3px;
}
.shop-purchase-card__txid {
  font-size: .70rem; color: var(--txt-muted);
  font-family: ui-monospace, monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 220px;
}
.shop-purchase-card__meta {
  text-align: right; display: flex; flex-direction: column;
  align-items: flex-end; gap: 5px; flex-shrink: 0;
}
.shop-purchase-card__price {
  font-weight: 900; font-size: 1.1rem; color: var(--c-sky);
  text-shadow: 0 0 16px rgba(30,158,235,.42); line-height: 1;
}
.shop-purchase-card__status { font-size: .65rem; font-weight: 800; letter-spacing: .03em; }
.shop-purchase-card__date   { font-size: .70rem; color: var(--txt-muted); font-weight: 600; }

/* État vide */
.shop-profile-empty {
  display: flex; flex-direction: column;
  align-items: center; padding: 52px 24px; gap: 14px;
  border-radius: var(--r-lg);
  border: 1px dashed rgba(30,158,235,.22);
  background: rgba(30,158,235,.03);
  color: var(--txt-muted);
}
.shop-profile-empty i    { font-size: 2.6rem; color: rgba(30,158,235,.38); }
.shop-profile-empty span { font-size: .9rem; font-weight: 700; }

/* Formulaire carte cadeau */
.shop-giftcard-form { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.shop-giftcard-form .form-control {
  flex: 1; min-width: 200px;
  background: rgba(255,255,255,.05);
  border-color: rgba(30,158,235,.22); color: var(--txt);
}
.shop-giftcard-form .form-control:focus {
  background: rgba(255,255,255,.07);
  border-color: var(--c-sky);
  box-shadow: 0 0 0 3px rgba(30,158,235,.18);
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */

/* ≤ 575px — paddings réduits + modal interne */
@media (max-width: 575px) {
  .shop-co-order    { padding: 14px 16px 12px; }
  .shop-co-pay      { padding: 14px 16px 18px; }
  .shop-pay-divider { padding: 8px 16px; }

  /* Article panier : wrap propre */
  .shop-cart-item       { padding: 10px 12px; gap: 8px; flex-wrap: wrap; }
  .shop-cart-item__name { flex-basis: calc(100% - 52px); }
  .shop-cart-item__qty  { margin-left: auto; }
  .shop-cart-item__price {
    width: 100%; text-align: right;
    border-top: 1px solid rgba(30,158,235,.10);
    padding-top: 6px; margin-top: 2px;
  }

  /* Passerelles plus compactes */
  .shop-gateway-card { width: 100px; padding: 12px 6px; min-height: 80px; }
  .shop-gateway-card img { max-height: 30px; max-width: 72px; }
}

/* ≤ 479px — téléphone */
@media (max-width: 479px) {
  /* Carte achat profil */
  .shop-purchase-card {
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto auto;
  }
  .shop-purchase-card__icon  { width: 40px; height: 40px; font-size: 1.1rem; }
  .shop-purchase-card__meta  { grid-column: 2; }
  .shop-purchase-card__price { font-size: .95rem; }
  .shop-purchase-card__txid  { max-width: 160px; }

  /* Formulaire carte cadeau : colonne */
  .shop-giftcard-form               { flex-direction: column; }
  .shop-giftcard-form .form-control { min-width: 0; width: 100%; }
}