/* ==========================================================================
   40aWeek - Responsive Stylesheet (responsive.css)
   Feuille de style responsive structuree par breakpoints
   ========================================================================== */

/* ==========================================================================
   1. GLOBAL COMPONENTS & EXTENSIONS (NON-MEDIA)
   ========================================================================== */

/* --- MOBILE RESPONSIVE TWEAKS --- */

/* --- HALL OF FAME EMPTY STATE --- */
.hof-empty-hero {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 padding: 60px 20px;
 text-align: center;
 background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.4) 100%);
 border-radius: 20px;
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
 margin-bottom: 40px;
 border: 1px solid rgba(255, 255, 255, 0.8);
}

.hof-mystery-icon {
 font-size: 4rem;
 color: var(--color-primary-light);
 margin-bottom: 20px;
 background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 animation: float 6s ease-in-out infinite;
}

.hof-empty-badge {
 background: var(--color-secondary);
 color: white;
 padding: 5px 12px;
 border-radius: 20px;
 font-size: 0.8rem;
 font-weight: bold;
 text-transform: uppercase;
 margin-bottom: 15px;
 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.hof-empty-title {
 font-size: 2rem;
 margin-bottom: 15px;
 font-weight: 800;
 color: var(--color-secondary);
}

.hof-empty-desc {
 color: #666;
 margin-bottom: 25px;
 max-width: 500px;
 line-height: 1.6;
}

@keyframes float {
 0% {
 transform: translateY(0px);
 }

 50% {
 transform: translateY(-10px);
 }

 100% {
 transform: translateY(0px);
 }
}

/* ==========================================================================
   2. DESKTOP & LARGE SCREENS (>= 1024PX) ((min-width: 1024px))
   ========================================================================== */
@media (min-width: 1024px) {

  #mission-sticky-wrapper {
   left: 50%;
   /* On place le point d'ancrage au milieu */

   /* IMPORTANT : On gère les deux axes :
   X : -50% pour centrer parfaitement par rapport à l'ancrage
   Y : 150% pour le cacher vers le bas par défaut */
   transform: translate(-50%, 150%);

   /* Plus de risque de collision avec le bouton FAB (il est caché sur PC) */
   max-width: 500px;
   padding: 12px 25px;
   /* Un peu plus aéré sur PC */
   }

   #mission-sticky-wrapper.visible {
   /* On le remonte à 0 en gardant le centrage X */
   transform: translate(-50%, 0);
   }

   /* Animation de sortie */
   #mission-sticky-wrapper.mission-dismissed {
   transform: translate(-50%, 200%) !important;
   }

   .desktop-hidden {
   display: none !important;
   }

   /* On CACHE la barre de statut mobile (car l'info est dans la sidebar) */
   .stats-bar-container {
   display: none !important;
   }

   /* On AFFICHE les éléments exclusifs au bureau */
   .desktop-only {
   display: block !important;
   }

   /* On AFFICHE la sidebar sur le côté */
   .sidebar {
   display: flex;
   /* ou block selon ton layout */
   }

   /* On CACHE les éléments marqués "mobile-only" */
   .mobile-only {
   display: none !important;
   }

   /* On cache aussi le bouton flottant (FAB) sur PC */
   .mobile-fab {
   display: none !important;
   }

   .timer-section {
   display: flex !important;
   }

}

/* ==========================================================================
   3. SMALL DESKTOP & WIDE DISPLAYS (<= 1100PX) ((max-width: 1100px))
   ========================================================================== */
@media (max-width: 1100px) {

  /* On masque les minutes du timer pour gagner de la place dans le header */
   .header-timer .hide-on-mobile {
   display: none !important;
   }

}

/* ==========================================================================
   4. LAPTOPS & LANDSCAPE TABLETS (<= 1024PX) ((max-width: 1024px))
   ========================================================================== */
@media (max-width: 1024px) {

  .mobile-fab {
   display: flex;
   /* Animation d'entrée au chargement */
   animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s forwards;
   }

   .create-post {
   display: none !important;
   }

}

/* ==========================================================================
   5. TABLETS (<= 960PX) ((max-width: 960px))
   ========================================================================== */
@media (max-width: 960px) {

  .container {
   gap: 0px;
   grid-template-columns: 1fr !important;
   }

  .language-selector-wrapper {
   margin-top: 15px;
   padding-left: 0;
   }

   /* Sur mobile, on peut vouloir le centrer ou l'agrandir un peu */
   .lang-option {
   padding: 10px 25px;
   font-size: 1rem;
   }

   .winner-block-content {
   flex-direction: column;
   }

   .winner-block-image {
   width: 100%;
   /* Pleine largeur sur mobile */
   height: auto;
   max-height: 300px;
   }

   .winner-block-title {
   font-size: 1.8rem;
   }

   .winner-block {
   padding: 25px 20px;
   }

   .hero-steps {
   flex-direction: column;
   /* Passe en vertical sur mobile */
   gap: 30px;
   align-items: center;
   }

   .hero-section {
   padding: 25px 20px;
   }

   .hero-title {
   font-size: 1.8rem;
   }

   .hero-subtitle {
   font-size: 1.1rem;
   }

   .spotlight-card {
   flex-direction: column;
   }

   .spotlight-image {
   width: 100%;
   max-height: 300px;
   }

   .spotlight-content {
   padding: 25px 20px;
   }

   .spotlight-title {
   font-size: 1.8rem;
   }

   .featured-content {
   flex-direction: column;
   text-align: center;
   }

   .featured-image {
   width: 100%;
   height: auto;
   }

   .container {
   grid-template-columns: 1fr;
   /* 1 seule colonne */
   }

   #sidebar-placeholder {
   display: none !important;
   }

   .sidebar-left {
   position: fixed;
   top: 52px;
   left: 0;
   height: calc(100% - 52px);
   width: 250px;
   z-index: 300;
   transform: translateX(-100%);
   transition: transform 0.3s ease-in-out;
   border-right: 1px solid #ccc;
   background: #fff;
   border-radius: 0;
   box-shadow: #1c1c1c33 2px 0 8px;
   max-height: 100%;
   overflow-y: auto;
   }

   .center-content {
   grid-column: 1 !important;
   /* Reste dans la seule colonne */
   }

   #mobile-nav-toggle {
   display: block !important;
   /* On le MONTRE sur mobile */
   }

   .header-nav {
   display: none !important;
   }

   .header-right {
   margin-left: auto;
   }

   .header-content .header-search,
   .header-content .desktop-search-wrapper,
   #theme-toggle-btn {
   display: none !important;
   }

  .header-actions .btn {
  font-size: 12px;
  /* Police plus petite */
  }

  /* MOBILE PROFILE BOTTOM SHEET & OVERLAY */
  .profile-username-text,
  .profile-chevron {
    display: none !important;
  }

  .profile-dropdown-trigger {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
  }

  body.mobile-profile-active::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 99990;
    animation: fadeIn 0.2s ease-out;
  }

  .profile-dropdown-menu.active {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 24px 24px 0 0 !important;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.3) !important;
    padding: 20px 16px 28px 16px !important;
    z-index: 99999 !important;
    animation: slideUpBottomSheet 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  @keyframes slideUpBottomSheet {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }

   /* On le MONTRE sur mobile */
   .mobile-only-sidebar {
   display: block;
   padding: 12px;
   /* Assorti au padding de la nav */
   border-top: 1px solid #eee;
   /* Petite séparation */
   margin-top: 10px;
   }

   #card-create-post {
   border: none !important;
   }

   .mobile-only-sidebar .sidebar-card:not([id]) {
   /* C'est ça qui enlève la bordure blanche */
   border: none;

   /* Ça enlève le fond blanc */
   background: none;

   /* Ça enlève l'espace blanc autour du bouton */
   padding: 0;
   }

   /* On en profite pour agrandir le bouton "Publier" */
   .mobile-only-sidebar .create-post {
   padding: 16px;
   font-size: 1.1rem;
   }

   /* Et on fait pareil pour le bloc "Connectez-vous" */
   .mobile-only-sidebar .logged-out {
   padding: 16px;
   background: var(--color-secondary-light);
   border-radius: 8px;
   }

   .mobile-only-sidebar .phase-name {
   font-size: 1.5rem;
   /* On réduit de 1.8rem à 1.5rem */
   }

   .partner-how-steps,
   .partner-cta {
   flex-direction: column;
   align-items: center;
   }

   .how-step {
   margin-bottom: 20px;
   }

   .partner-benefits,
   .partner-how,
   .partner-social-proof,
   .partner-page .partner-content-wrapper {
   padding: 40px 20px;
   /* Moins de padding sur mobile */
   }

   /* 1. On corrige la grille principale pour qu'elle prenne toute la largeur */
   .container-partner-page {
   display: block;
   /* Enlève la grille "sidebar + contenu" */
   }

   /* 2. On empile les étapes "Comment ça marche" (qui sont en ligne sur PC) */
   .how-steps {
   flex-direction: column;
   align-items: center;
   gap: 40px;
   }

   .how-step {
   max-width: 100%;
   /* Prend toute la largeur disponible */
   margin-bottom: 20px;
   }

   /* 3. On adapte la grille des avantages */
   .benefits-grid {
   grid-template-columns: 1fr;
   /* Une seule colonne */
   gap: 20px;
   }

   /* 4. On empile les boutons d'action s'il n'y a pas assez de place */
   .partner-cta {
   flex-direction: column;
   width: 100%;
   }

   .partner-cta .btn {
   width: 100%;
   /* Boutons pleine largeur */
   text-align: center;
   margin-bottom: 10px;
   }

   /* 5. Ajustements visuels (Textes et Marges) */
   .partner-page .partner-content-wrapper {
   padding: 30px 20px;
   /* Moins de marge sur les côtés */
   }

   .partner-content-wrapper h2 {
   font-size: 1.8rem;
   /* Titre plus petit */
   }

   .partner-banner {
   height: 200px;
   /* Bannière moins haute sur mobile */
   }

   .partner-section-title {
   font-size: 1.6rem;
   }

   /* On s'assure que les logos ne débordent pas */
   .logo-grid {
   gap: 20px;
   }

   .logo-placeholder {
   width: 100%;
   /* Logos pleine largeur sur mobile */
   justify-content: center;
   }

   .skeleton-winner {
   flex-direction: column;
   }

   .skeleton-winner-img {
   width: 100%;
   height: 200px;
   }

   #prize-pool-card {
   display: none;
   }

}

/* ==========================================================================
   6. TABLET PORTRAIT & LARGE MOBILE (<= 768PX) ((max-width: 768px))
   ========================================================================== */
@media (max-width: 768px) {

  .votes-list .vote-article.info-card-promo,
  .info-card-promo {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 18px 20px !important;
  }

  .info-card-promo .promo-action {
    width: 100%;
  }

  .info-card-promo .promo-btn {
    width: 100%;
    justify-content: center;
  }

  .features-grid {
   grid-template-columns: 1fr;
   /* Empile sur mobile */
   }

   .feature-card {
   text-align: center;
   /* Centre le texte sur mobile */
   display: flex;
   flex-direction: column;
   align-items: center;
   }

   .cycle-steps {
   flex-direction: column;
   gap: 15px;
   }

   .cycle-step {
   display: flex;
   align-items: flex-start;
   /* Aligne en haut */
   text-align: left;
   padding: 15px;
   gap: 15px;
   background: #fff;
   /* Fond blanc propre */
   border: 1px solid #eee;
   }

   .step-icon {
   margin: 0;
   /* Plus de marge auto */
   flex-shrink: 0;
   /* Empêche l'icône de s'écraser */
   /* Le centrage flexbox que nous avons ajouté avant reste ici */
   }

   /* NOUVEAU : Gère le bloc de texte à droite */
   .step-content {
   display: flex;
   flex-direction: column;
   /* Empile Titre, Date, Texte verticalement */
   gap: 5px;
   width: 100%;
   }

   /* Ajustements pour que ce soit joli */
   .cycle-step h4 {
   margin: 0;
   font-size: 1.1rem;
   }

   .step-time {
   display: inline-block;
   background: #f0f2f5;
   padding: 4px 8px;
   border-radius: 4px;
   font-size: 0.8rem;
   align-self: flex-start;
   /* Colle le badge à gauche */
   margin-bottom: 5px;
   }

   .cycle-step p {
   color: #666;
   /* Force la couleur grise lisible */
   margin: 0;
   font-size: 0.95rem;
   line-height: 1.4;
   }

   .big-percent {
   font-size: 3rem;
   }

   /* Sur mobile, on annule le style Reddit et on revient au style Carte */
   .votes-list .vote-article {
   flex-direction: column;
   height: auto;
   }

   .votes-list .article-carousel {
   width: 100%;
   height: 250px;
   border-right: none;
   border-bottom: 1px solid #f0f0f0;
   }

   .votes-list .carousel-prev,
   .votes-list .carousel-next {
   display: flex;
   }

   /* On remet les flèches */
   .votes-list .article-title {
   white-space: normal;
   }

   /* Titre entier */
   /* 1. Le Conteneur des boutons (Zone d'action) */
   .vote-article .vote-buttons {
   /* On laisse le style global gérer ça maintenant */
   }

  .editorial-header h1 {
  font-size: 2.5rem;
   }
   .editorial-lead {
  font-size: 1.1rem;
   }
   .editorial-section h2 {
  font-size: 1.8rem;
   }
   .editorial-section p, .editorial-list li {
  font-size: 1rem;
   }
   .hide-on-mobile {
  display: none !important;
   }

   .rules-hero {
   padding: 40px 15px;
   }

   .rules-hero h1 {
   font-size: 2.2rem;
   }

   .timeline-container {
   flex-direction: column;
   padding-left: 20px;
   gap: 30px;
   }

   .timeline-container::before {
   top: 0;
   bottom: 0;
   left: 45px;
   /* Aligné avec les marqueurs */
   width: 2px;
   height: auto;
   right: auto;
   }

   .timeline-step {
   display: flex;
   text-align: left;
   gap: 20px;
   padding: 0;
   }

   .timeline-marker {
   flex-shrink: 0;
   margin: 0;
   }

   .reward-flex {
   flex-direction: column;
   gap: 20px;
   }

   .dos-and-donts {
   grid-template-columns: 1fr;
   }

}

/* ==========================================================================
   7. MOBILE PHONES (<= 767PX) ((max-width: 767px))
   ========================================================================== */
@media (max-width: 767px) {

  .votes-list .vote-article {
   display: flex !important;
   /* On désactive le Grid */
   flex-direction: column !important;
   /* On empile verticalement */
   height: auto !important;
   /* La hauteur s'adapte au contenu */
   min-height: 0 !important;
   align-items: stretch !important;
   }

   /* 1. L'IMAGE (Reprend sa place en haut) */
   .votes-list .article-carousel {
   width: 100% !important;
   /* Toute la largeur */
   height: 250px !important;
   /* Hauteur fixe confortable sur mobile */
   border-right: none !important;
   /* Enlève la ligne de séparation verticale */
   border-bottom: 1px solid #f0f0f0;
   /* Ajoute une ligne en dessous */
   }

   /* 2. LE CONTENU (En dessous) */
   .votes-list .article-content {
   padding: 20px !important;
   }

   .votes-list .article-title {
   /* On laisse le titre prendre la place qu'il veut sur mobile */
   white-space: normal !important;
   margin-bottom: 10px !important;
   }

   .votes-list .article-description {
   /* On affiche 3 lignes sur mobile, c'est suffisant */
   -webkit-line-clamp: 3 !important;
   }

   /* 3. LES BOUTONS */
   .votes-list .vote-buttons {
   /* On restaure le padding standard */
   padding: 12px 20px !important;
   /* On s'assure que tes réglages responsive.css précédents (bouton centré) s'appliquent bien */
   justify-content: center !important;
   }

}

/* ==========================================================================
   8. SMALL MOBILE (<= 600PX) ((max-width: 600px))
   ========================================================================== */
@media (max-width: 600px) {

  .timer-section {
   flex-direction: column;
   text-align: center;
   gap: 15px;
   }

   .timer-content {
   text-align: center;
   }

   .main-chrono {
   font-size: 1.8rem;
   }

   .winner-claim-banner {
   flex-direction: column;
   text-align: center;
   }

   .winner-claim-btn {
   margin-left: 0;
   margin-top: 15px;
   width: 100%;
   }

   .header-username-text {
   display: none !important;
   }

   /* On ajuste un peu les marges pour que l'icône ne soit pas collée */
   #user-email-display i.fa-user-circle {
   margin-left: 5px;
   font-size: 1.4rem !important;
   /* On grossit un peu l'avatar */
   }

   /* 1. On cache le logo 40 sur mobile */
   .karma-logo-small {
   display: none !important;
   }

   /* 2. On réajuste le conteneur pour qu'il soit compact */
   .karma-display {
   padding: 4px 10px;
   /* Padding équilibré */
   margin-right: 5px;
   /* On le rapproche un peu de l'avatar */
   min-width: 40px;
   /* Largeur min pour l'élégance */
   justify-content: center;
   /* Centre le chiffre */
   }

   /* 3. On annule le décalage vertical (top: -1px) qui servait à aligner avec l'image */
   #header-karma-display #karma-val {
   top: 0 !important;
   font-size: 0.9rem;
   /* Lisible */
   line-height: 1;
   }

}

/* ==========================================================================
   9. EXTRA SMALL MOBILE (<= 480PX) ((max-width: 480px))
   ========================================================================== */
@media (max-width: 480px) {

  /* 1. On réduit les marges générales */
   .container {
   padding: 0 10px;
   margin: 65px auto 20px auto;
   }

   /* 8. Badges sur 2 colonnes */
   #badges-container {
   display: grid !important;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
   }

   .badge {
   width: 100% !important;
   margin: 0 !important;
   }

   /* 2. On simplifie le Header */
   header {
   padding: 0 10px 0 5px;
   }

   .header-content {
   justify-content: flex-start;
   }

   .header-nav {
   display: none !important;
   }

   .header-right {
   margin-left: auto;
   }

   .header-content .partner-logo,
   #user-email-display,
   .header-content .header-search,
   .header-content .desktop-search-wrapper,
   #theme-toggle-btn {
   display: none !important;
   }

   /* Le logo reste entier (40aweek) sur mobile */
   .logo-desktop {
   display: inline !important;
   }
   .logo-mobile {
   display: none !important;
   }
   .logo {
   font-size: 22px;
   }

   /* 3. On réduit les marges intérieures des cartes */
   .submission-form,
   .info-page,
   .article-detail,
   .partner-content-wrapper {
   padding: 20px 15px;
   }

   /* 4. On réduit la taille des gros titres */
   .article-detail-title,
   .partner-content-wrapper h2,
   .info-title {
   font-size: 1.8rem;
   }

   /* 5. On réduit les titres des cartes de vote */
   .article-title {
   font-size: 1.3rem;
   }

   /* 7. On réduit les boutons du header */
   .header-actions .btn, .header-profile .btn {
   font-size: 12px;
   /* Police plus petite */
   padding: 6px 12px;
   /* Padding réduit */
   font-weight: 600;
   /* Un peu moins "bold" */
   }

   .error-code {
   font-size: 5rem;
   }

   .error-message {
   font-size: 1.5rem;
   }

}