@charset "UTF-8";

/*** --HOME PAGE ***
   Tout ce qui est exclusif à views/home.blade.php vit ici (chargé uniquement
   sur cette page, via @push('styles')). Les classes utilisées ailleurs aussi
   (ex. .theme-button, .podium-* du plugin votingplugin) restent dans
   style.css pour ne pas casser les autres pages. */

/* ============================================================
   HERO
   ============================================================ */

.hero-section {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.hero-overlay {
  background: linear-gradient(
    to top,
    var(--primary-color) 1%,
    hsl(from var(--primary-color) h s l / 0.25) 60%,
    hsl(from var(--primary-color) h s l / 0.45) 100%
  );
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* La navbar est fixed-top, donc elle flotte par-dessus le hero sans le
   pousser. Comme la page de référence (padding-top 120px), on compense avec
   un padding asymétrique plutôt qu'un centrage plein écran : le contenu
   visuel se retrouve sous la navbar au lieu d'être centré derrière elle.
   130px = la même valeur que .under-navbar utilisée partout ailleurs sur le
   site pour dégager la navbar fixe. */
.hero-content {
  padding-top: 130px;
  padding-bottom: 60px;
}

.hero-logo {
  width: 380px;
  max-width: 80vw;
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.5));
}

.frankenstein-wrap .hero-ip-btn {
  position: relative;
  z-index: 1; /* bouton au-dessus du gif */
}

.frankenstein-gif {
  z-index: 0;
  pointer-events: none; /* évite de bloquer le clic du bouton */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 25px;
  width: 550px;
  object-fit: contain;
  opacity: 0.95;
}

.easter_rabbit {
  z-index: 2;
  pointer-events: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scaleX(-1);
  bottom: 100px;
  width: 80px;
  object-fit: contain;
  opacity: 0.95;
}

@media (max-width: 767.98px) {
  .frankenstein-gif {
    width: 500px;
  }
}

.hero-ip-btn {
  position: relative;
  background: linear-gradient(135deg, var(--interaction-color), var(--detail-color));
  border: 1px solid var(--detail-color);
  border-radius: 10px;
  color: var(--primary-color);
  font-family: inherit;
  font-weight: 800;
  font-size: 26px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 12px 48px;
  cursor: pointer;
  animation: heroGlowPulse 3s ease-in-out infinite;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-ip-btn:hover {
  transform: scale(1.06) rotate(-1deg);
}

.hero-ip-btn:active {
  transform: scale(0.95);
}

@keyframes heroGlowPulse {
  0%,
  100% {
    box-shadow: 0 8px 24px hsl(from var(--interaction-color) h s l / 0.35);
  }
  50% {
    box-shadow: 0 8px 40px hsl(from var(--interaction-color) h s l / 0.7),
      0 0 24px hsl(from var(--interaction-color) h s l / 0.35);
  }
}

@media (max-width: 767.98px) {
  .hero-ip-btn {
    font-size: 19px;
    padding: 10px 28px;
  }
}

.hero-online-badge {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(40%, -50%);
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--secondary-color-darker);
  border: 1px solid hsl(from var(--important-color) h s l / 0.5);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-color);
  text-transform: none;
  letter-spacing: normal;
}

.hero-hint {
  font-size: 13px;
  color: hsl(from var(--text-color) h s l / 0.65);
}

.hero-mc-version {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 17px;
  color: var(--text-color);
}

.status-dot {
  position: relative;
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--important-color);
}

.status-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 hsl(from var(--important-color) h s l / 0.5);
  animation: pulse 1.5s ease-out infinite;
}

.status-dot-offline {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e35d5d;
}

.mc-icon-img {
  width: 26px;
  height: 26px;
  filter: drop-shadow(-1px 4px 5px rgba(0, 0, 0, 0.5));
}

/* ============================================================
   BOUTONS CTA PARTAGÉS
   Même style "pilule dorée / contour" que la page de référence, réutilisé
   tel quel par About, Votes, Boutique... plutôt que dupliqué section par
   section.
   ============================================================ */

.home-btn-gold,
.home-btn-outline {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s,
    border-color 0.3s, color 0.3s;
}

/* Quand le bouton est aussi un élément .anim (ex. "Voter maintenant"), sa
   propre transition (ci-dessus) écrase entièrement celle du système
   d'entrée au scroll — même spécificité, mais déclarée après dans la
   cascade. On la restaure ici avec un sélecteur composé plus spécifique,
   pour que l'apparition respecte bien --dur/--delay. */
.home-btn-gold.anim,
.home-btn-outline.anim {
  transition: transform var(--dur, 0.6s) var(--ease, ease) var(--delay, 0s),
    opacity var(--dur, 0.6s) var(--ease, ease) var(--delay, 0s),
    scale var(--dur, 0.6s) var(--ease, ease) var(--delay, 0s);
}

.home-btn-gold {
  background: linear-gradient(135deg, var(--interaction-color), var(--detail-color));
  border: 1px solid var(--detail-color);
  color: var(--primary-color);
}

.home-btn-gold:hover {
  transform: translateY(-3px) scale(1.04);
  color: var(--primary-color-darker);
  box-shadow: 0 12px 28px hsl(from var(--interaction-color) h s l / 0.45);
}

.home-btn-gold:active {
  transform: translateY(0) scale(0.96);
}

.home-btn-outline {
  background: transparent;
  border: 1px solid hsl(from var(--text-color) h s l / 0.35);
  color: var(--text-color);
  font-weight: 700;
}

.home-btn-outline:hover {
  border-color: var(--interaction-color);
  color: var(--interaction-color);
}

/* ============================================================
   ABOUT SECTION
   ============================================================ */

.about-section {
  padding: 72px 24px;
}

.about-container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 48px;
}

.about-text-col {
  flex: 1 1 55%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.about-portrait-col {
  flex: 0 1 38%;
  min-width: 0;
  justify-content: center;
}

/* La couronne ne flotte pas en continu (contrairement à la page de
   référence) : elle tombe une seule fois sur sa position au moment où la
   section entre dans l'écran (via le même système .anim/is-inview que le
   reste du site), puis reste fixe. Le "both" garde l'état de départ avant
   que l'animation ne joue, et l'état final une fois qu'elle est terminée. */
.crown-img {
  width: 44px;
  height: 44px;
  top: -23px;
  left: -14px;
  opacity: 0;
}

.is-inview.crown-img {
  animation: crownDrop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both;
}

@keyframes crownDrop {
  0% {
    opacity: 0;
    transform: translateY(-60px) rotate(-45deg);
  }
  55% {
    opacity: 1;
    transform: translateY(8px) rotate(-4deg);
  }
  75% {
    transform: translateY(-4px) rotate(-13deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(-10deg);
  }
}

@media (max-width: 767.98px) {
  .crown-img {
    width: 32px;
    height: 32px;
    top: -15px;
    left: -10px;
  }
}

.about-heading {
  font-size: 40px;
  line-height: 1.15;
}

@media (max-width: 767.98px) {
  .about-heading {
    font-size: 28px;
  }
}

.about-king-word {
  color: var(--interaction-color);
}

.about-lead-text {
  font-size: 17px;
  line-height: 1.65;
}

/* Portrait du roi : un léger balancement continu, indépendant de l'entrée en
   glissement portée par le <div> parent (.anim--slide-left utilise
   `transform`, ce balancement utilise la propriété `translate` séparée pour
   ne pas entrer en conflit — même technique que .anim-logo pour le logo du
   hero). Le flip horizontal (transform: scaleX(-1)) reste statique. */
.about-king-img {
  width: 100%;
  max-width: 380px;
  transform: scaleX(-1);
  filter: drop-shadow(0 0.5rem 1rem hsl(from var(--interaction-color) h s l / 0.4));
  animation: kingSway 5s ease-in-out infinite;
}

@keyframes kingSway {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -10px;
  }
}

/* ============================================================
   VOTES SECTION
   ============================================================ */

/* --primary-color-darker (utilisée ailleurs sur le site) assombrit de 10
   points de luminosité — bien plus que la référence, qui ne fonce que très
   légèrement (~4 points). On calcule donc notre propre teinte subtile ici,
   relative à --primary-color (comme pour le fond de la navbar), plutôt que
   d'utiliser --primary-color-darker ou une couleur figée. */
.votes-section {
  padding: 72px 24px;
  background: linear-gradient(
    to bottom,
    var(--primary-color),
    hsl(from var(--primary-color) h s calc(l - 4))
  );
}

.votes-container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
}

.votes-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 720px;
}

.votes-heading {
  font-size: 36px;
  line-height: 1.2;
}

.votes-subtext {
  font-size: 16px;
  color: hsl(from var(--text-color) h s l / 0.75);
}

.votes-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  gap: 32px;
}

/* Pas de transition propre ici : .podium-entry est toujours combiné avec
   .anim (voir home.blade.php), donc c'est la transition du système
   d'entrée au scroll (--dur/--delay) qui gouverne, y compris au survol. La
   déclarer ici l'écraserait (même bug que .home-btn-gold.anim plus haut). */
.podium-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.podium-entry:hover {
  transform: translateY(-10px) scale(1.03);
}

.podium-badge {
  position: relative;
  z-index: 2;
  width: 44px;
  height: 44px;
  margin-bottom: -22px;
  border-radius: 50%;
  background: var(--important-color);
  color: var(--primary-color);
  font-weight: 800;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.podium-entry--1 .podium-badge {
  width: 48px;
  height: 48px;
  margin-bottom: -24px;
  font-size: 20px;
  background: var(--interaction-color);
}

.podium-entry--3 .podium-badge {
  background: #cd7f32;
}

.podium-avatar-img {
  width: 75%;
}

.podium-rabbit-mask {
  width: 60%;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
}

.podium-player-name {
  margin-top: 12px;
  font-size: 16px;
}

.podium-player-votes {
  color: var(--important-color);
  font-size: 14px;
}

.podium-entry--1 .podium-player-name {
  font-size: 18px;
}

.podium-entry--1 .podium-player-votes {
  font-size: 15px;
}

/* Le home garde ses propres tailles de podium (plus proches de la page de
   référence) sans toucher .podium-gold/-silver/-bronze de style.css, qui
   sont partagées avec la page dédiée du plugin votingplugin. */
.votes-podium .podium-gold {
  width: 180px;
  height: 180px;
}

.votes-podium .podium-silver,
.votes-podium .podium-bronze {
  width: 140px;
  height: 140px;
}

@media (max-width: 767.98px) {
  /* L'or occupe toute la ligne à lui seul (flex-basis:100% le force à
     passer à la ligne), puis argent + bronze se partagent la ligne
     suivante côte à côte — au lieu d'un empilement des 3 entièrement
     vertical. `order` garde l'or en premier quel que soit l'ordre du DOM. */
  .votes-podium {
    row-gap: 24px;
    column-gap: 24px;
  }

  .podium-entry--1 {
    order: -1;
    flex-basis: 100%;
  }

  .podium-entry--2 {
    order: 0;
  }

  .podium-entry--3 {
    order: 1;
  }

  .votes-podium .podium-gold {
    width: 140px;
    height: 140px;
  }

  .votes-podium .podium-silver,
  .votes-podium .podium-bronze {
    width: 110px;
    height: 110px;
  }
}

/* ============================================================
   BOUTIQUE (teaser)
   ============================================================ */

.shop-teaser-section {
  padding: 72px 24px;
  /* Même teinte subtile que la fin du dégradé Votes, réutilisée telle quelle
     — la référence recycle aussi la même couleur pour les deux. */
  background: hsl(from var(--primary-color) h s calc(l - 4));
}

.shop-teaser-card {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  background: hsl(from var(--primary-color) h s calc(l - 6));
  border: 1px solid var(--detail-color);
  border-radius: 18px;
  padding: 48px 40px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

@media (max-width: 767.98px) {
  .shop-teaser-card {
    padding: 32px 24px;
  }
}

.shop-teaser-heading {
  font-size: 32px;
}

.shop-teaser-text {
  font-size: 16px;
  line-height: 1.6;
  color: hsl(from var(--text-color) h s l / 0.8);
  max-width: 560px;
}

.shop-teaser-featured {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.shop-teaser-featured-img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  filter: drop-shadow(0 8px 20px hsl(from var(--interaction-color) h s l / 0.35));
}

.shop-teaser-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--important-color);
}

.shop-teaser-featured-name {
  font-size: 18px;
}

/* ============================================================
   ACTUALITÉS (éditions du plugin Le Citadin, rendues côté serveur)
   ============================================================ */

.news-section {
  padding: 72px 24px;
  background: var(--secondary-color);
}

.news-container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}

.news-heading {
  font-size: 36px;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  width: 100%;
}

/* Pas de transition propre ici non plus : toujours combiné avec .anim,
   voir le commentaire sur .podium-entry plus haut. */
.news-card {
  display: flex;
  flex-direction: column;
  background: hsl(from var(--secondary-color) h s calc(l - 3));
  border: 1px solid hsl(from var(--text-color) h s l / 0.08);
  border-radius: 14px;
  overflow: hidden;
  text-align: left;
  text-decoration: none;
}

.news-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: hsl(from var(--interaction-color) h s l / 0.6);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.4);
}

.news-card-img {
  width: 100%;
  height: 190px;
  object-fit: cover;
}

.news-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
}

.news-card-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--important-color);
}

.news-card-title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--text-color);
  text-transform: uppercase;
}

/* ============================================================
   APP MOBILE
   Le fond référence (#40516d) correspond déjà exactement à
   --secondary-color par défaut : pas besoin de recalibrer une teinte
   custom ici (contrairement à Votes/Boutique), on utilise la variable
   directement, comme pour Actualités juste au-dessus.
   ============================================================ */

.app-section {
  padding: 72px 24px;
  background: var(--secondary-color);
}

.app-container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 48px;
}

.app-portrait-col {
  flex: 0 1 35%;
  justify-content: center;
}

/* Même technique que .about-king-img : le flottement continu utilise la
   propriété `translate` séparée, indépendante du `transform` porté par
   l'entrée en glissement du <div> parent (.anim--slide-right). */
.app-steve-img {
  width: 60%;
  max-width: 240px;
  filter: drop-shadow(0 8px 16px hsl(from var(--interaction-color) h s l / 0.4));
  animation: steveFloat 4s ease-in-out infinite;
}

@keyframes steveFloat {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -12px;
  }
}

.app-text-col {
  flex: 1 1 60%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.app-heading {
  font-size: 36px;
  line-height: 1.2;
}

.app-mobile-word {
  color: var(--interaction-color);
}

.app-lead-text {
  font-size: 17px;
  line-height: 1.6;
  color: hsl(from var(--text-color) h s l / 0.85);
  max-width: 520px;
}

.app-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* Le logo Android par défaut est vert sur fond transparent : sur le bouton
   doré, il devient quasi invisible (faible contraste). On le passe en noir
   uni pour qu'il se détache nettement, comme le texte du bouton. */
.app-android-icon {
  width: 24px;
  filter: brightness(0);
}

/* ============================================================
   CTA REJOINDRE (dernière section avant le footer)
   ============================================================ */

.cta-section {
  padding: 80px 24px;
  background: linear-gradient(to bottom, var(--secondary-color), var(--primary-color));
}

.cta-container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  text-align: center;
}

.cta-heading {
  font-size: 36px;
  line-height: 1.2;
}

.cta-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  width: 100%;
}

/* Pas de transition propre ici non plus : toujours combiné avec .anim,
   voir le commentaire sur .podium-entry plus haut (nécessaire pour que les
   3 cartes apparaissent bien l'une après l'autre via --delay). */
.cta-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: hsl(from var(--secondary-color) h s l / 0.6);
  border: 1px solid hsl(from var(--text-color) h s l / 0.1);
  border-radius: 14px;
  padding: 26px 20px;
}

.cta-step:hover {
  transform: translateY(-6px);
  border-color: hsl(from var(--interaction-color) h s l / 0.5);
}

.cta-step-badge {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--important-color);
  color: var(--primary-color);
  font-weight: 800;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cta-step-title {
  margin: 0;
  font-size: 16px;
}

.cta-step-text {
  margin: 0;
  font-size: 14px;
  color: hsl(from var(--text-color) h s l / 0.7);
}

.cta-ip-btn {
  background: none;
  border: 1px dashed hsl(from var(--interaction-color) h s l / 0.6);
  border-radius: 8px;
  color: var(--interaction-color);
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.3s;
}

.cta-ip-btn:hover {
  background: hsl(from var(--interaction-color) h s l / 0.1);
}

/* Discord garde sa couleur de marque officielle, indépendante de la palette
   du thème. */
.cta-discord-btn {
  display: inline-block;
  padding: 12px 36px;
  border-radius: 10px;
  background: #5865f2;
  border: 1px solid var(--important-color);
  color: #ffffff;
  font-weight: 800;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.cta-discord-btn:hover {
  transform: translateY(-3px) scale(1.04);
  background: #4752c4;
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(88, 101, 242, 0.45);
}

.cta-discord-btn:active {
  transform: scale(0.96);
}

/* ============================================================
   MOBILE : uniformisation des titres de section
   Tous les h2 de section doivent avoir la même taille que
   .about-heading sur mobile (28px), pas leur taille desktop repliée
   telle quelle.
   ============================================================ */

@media (max-width: 767.98px) {
  .votes-heading,
  .shop-teaser-heading,
  .news-heading,
  .app-heading,
  .cta-heading {
    font-size: 28px;
    line-height: 1.15;
  }
}

/*** END --HOME PAGE ***/