/* === Layout général === */
.dashboard-lemon-v7,
.dashboard-lemon-v7 .wrap {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
}

.dashboard-lemon-v7 .wrap {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr auto;
}

/* === Zones === */
.dashboard-lemon-v7 .zone {
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Left intro */
.dashboard-lemon-v7 .left {
  background: linear-gradient(180deg, #F76B1C 0%, #FAD961 100%);
  color: #FFEEDF;
  position: relative;
  grid-row: 1 / span 2; /* bloc orange toute la hauteur */
}
.dashboard-lemon-v7 .eyebrow { color: rgba(255,238,223,.9); font-weight: 600; margin-bottom: 12px; }
.dashboard-lemon-v7 .hello { color: #FFEEDF; font-size: 48px; font-weight: 800; margin-bottom: 12px; }
.dashboard-lemon-v7 .lead { color: rgba(255,238,223,.9); line-height: 1.4; }

.dashboard-lemon-v7 .quit-bar {
  position: absolute;
  top: 24px; right: 24px;
  display: flex; align-items: center; gap: 16px;
}
.dashboard-lemon-v7 .quit-link { color: #FFEEDF; font-weight: 600; }
.dashboard-lemon-v7 .quit-x {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid #FFEEDF;
  color: #FFEEDF;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: bold;
}

.dashboard-lemon-v7 .gear {
  position: absolute; bottom: 20px; left: 24px;
  display: flex; align-items: center; gap: 8px;
  color: rgba(255,238,223,.9);
}

/* Center stats */
.dashboard-lemon-v7 .center {
  background: #F8F8F4;
  color: #121212;
  display: flex;
  flex-direction: column;      /* pour pousser les CTA en bas */
  justify-content: flex-start;
}

/* --- Ajustement du titre "Les stats" (même style que le bloc jaune) --- */
.dashboard-lemon-v7 .center h2,
.dashboard-lemon-v7 .right h2 {
  font-size: clamp(26px, 2.4vw, 36px) !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 12px 0 !important;
}

.dashboard-lemon-v7 .ranking { list-style: none; margin: 0; padding: 0; }
.dashboard-lemon-v7 .ranking li {
  display: flex; justify-content: space-between;
  padding: 8px 0;
  border-bottom: 2px solid #CFCFC6;
}
.dashboard-lemon-v7 .pts { font-weight: 600; }

/* ==== CTA du bloc STATS : en bas à droite ==== */
.dashboard-lemon-v7 .pills-stats {
  margin-top: auto; 
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 18px;
}

.dashboard-lemon-v7 .pill-stats {
  background: #121212;          /* noir */
  color: #F7D933;               /* jaune citron */
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  padding: 16px 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  width: auto;                  /* largeur = contenu */
}
.dashboard-lemon-v7 .pill-stats .arr {
  margin-left: 12px;
}

/* Right player (BLOC JAUNE) */
.dashboard-lemon-v7 .right {
  background: #F7D933;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 0;
}

/* Scène image + CTA : image fond plein cadre sous les boutons (desktop) */
.dashboard-lemon-v7 .player-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 260px;
  justify-content: flex-end;
}

/* Conteneur image */
.dashboard-lemon-v7 .player-slider{
  position: relative;
  flex: 1;
  min-height: 260px;
  max-height: min(72vh, 820px);   /* limite l'agrandissement pour éviter la pixellisation */
  border-radius: 18px;
  overflow: hidden;
}

/* Image plein cadre, focalisée vers le haut (desktop) */
.dashboard-lemon-v7 .player-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;             /* remplit tout le bloc */
  object-position: 50% 0%;       /* focus haut (cup/visages) */
  display: block;
  opacity: 0;
  transition: opacity .3s ease;
}
.dashboard-lemon-v7 .player-img.is-active { opacity: 1; }

/* ==== CTA du bloc PLAYER : overlay en bas à droite (desktop) ==== */
.dashboard-lemon-v7 .player-actions {
  position: absolute;
  right: 16px;
  bottom: 16px;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 18px;
}
.dashboard-lemon-v7 .pill-alt {
  background: #121212;          /* noir */
  color: #F7D933;               /* jaune citron */
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  padding: 16px 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  width: auto;
}
.dashboard-lemon-v7 .pill-alt .arr {
  margin-left: 12px;
}

/* Prez (bandeau noir sous blanc+jaune uniquement) */
.dashboard-lemon-v7 .prez {
  grid-column: 2 / span 2; /* bloc noir sous blanc + jaune */
  background: #0F1012;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;          /* pour positionner les deux CTA opposés */
  padding: 28px 32px 100px;    /* mêmes padding latéraux ; gros padding bas pour laisser respirer les CTA */
  min-height: 300px;           /* hauteur demandée */
}

/* Titre prez : en BLANC */
.dashboard-lemon-v7 .prez h3 { color: #fff; margin: 0 0 12px 0; }

.dashboard-lemon-v7 .pill-lemon {
  background: #F7D933; color: #121212;
  padding: 12px 20px; border-radius: 999px;
  font-weight: 600; text-decoration: none;
  display: inline-flex; justify-content: space-between; align-items: center;
}

/* ====== Slider "Les mots du prez’" ====== */
.prez .prez-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* ---- Positionnement des 2 boutons du bloc noir (desktop) ---- */
.prez .prez-actions{
  position: static;
  min-height: 0;
}
.prez #prez-all{
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
}
.prez #prez-open{
  position: absolute;
  left: 32px;
  bottom: 16px;
  z-index: 2;
  /* visibilité/activable gérées par le JS */
}

.prez .prez-stage {
  display: grid;
  grid-template-columns: 0 1fr 0;
  align-items: center;
  column-gap: 0;
  width: 100%;
  margin-top: 22px;
}
.prez .prez-arrow { display: none !important; }

.prez .prez-message-wrap {
  grid-column: 2;
  display: flex;
  justify-content: flex-start;
}
.prez .prez-message {
  margin: 0;
  text-align: left;
  font-size: clamp(22px, 2.6vw, 42px);
  line-height: 1.3;
  max-width: 1120px;
}

/* Ancien wrapper (non utilisé mais inoffensif) */
.prez .prez-open-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-height: 56px;
  margin-top: 14px;
}
.prez .prez-open {
  visibility: hidden;
  pointer-events: none;
}

.prez .prez-source { display: none; }

/* LEFT bloc aligné haut */
.dashboard-lemon-v7 .left { justify-content: flex-start; }

.dashboard-lemon-v7 .hello {
  margin: 16px 0 12px;
}
.dashboard-lemon-v7 .hello .hello-name,
.dashboard-lemon-v7 .hello .hello-tag {
  display: block;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #FFEEDF;
  font-size: clamp(40px, 5.2vw, 72px);
}
.dashboard-lemon-v7 .left .lead {
  margin-top: 18px;
}

/* ===========================
   STATS / TOP 3
   =========================== */

/* En-tête "Cours :" + select */
.dashboard-lemon-v7 .lp-top3-wrap .lp-top3-head{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex-wrap:wrap !important;
  margin:0 0 14px 0 !important;
}
.dashboard-lemon-v7 .lp-top3-wrap .lp-top3-label{
  display:inline-block !important;
  font-weight:600 !important;
  white-space:nowrap !important;
  margin:0 !important;
}
.dashboard-lemon-v7 .lp-top3-wrap .lp-top3-select{
  width:min(360px, 100%) !important;
  max-width:360px !important;
  line-height:1.2 !important;
}

/* ---- PATCH alignement et typo ---- */
.dashboard-lemon-v7 .lp-ranking{
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
  counter-reset: rank;
}
.dashboard-lemon-v7 .lp-ranking > li{
  counter-increment: rank;
  display: flex !important;
  align-items: baseline !important;
  gap: 16px !important;
  padding: 12px 0 14px 0 !important;
  border-bottom: 2px solid #1f1f1f !important;
}
.dashboard-lemon-v7 .lp-ranking > li:last-child{
  border-bottom: none !important;
}
.dashboard-lemon-v7 .lp-ranking > li::before{
  content: counter(rank) ".";
  font-size: clamp(20px, 2.2vw, 28px) !important;
  line-height: 1.25 !important;
  font-weight: 400 !important;
  color: #121212 !important;
  flex: 0 0 auto;
}

.dashboard-lemon-v7 .lp-ranking .row{
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 20px !important;
  flex: 1 1 auto;
  min-width: 0;
}
.dashboard-lemon-v7 .lp-ranking .name,
.dashboard-lemon-v7 .lp-ranking .pts{
  font-size: clamp(20px, 2.2vw, 28px) !important;
  line-height: 1.25 !important;
}
.dashboard-lemon-v7 .lp-ranking .pts{
  font-weight: 500 !important;
  white-space: nowrap !important;
}

/* Optionnel : légère réduction sur mobile */
@media (max-width: 480px){
  .dashboard-lemon-v7 .lp-ranking > li{
    padding:12px 0 14px 0 !important;
    border-bottom-width:1.5px !important;
  }
}

/* Responsive : limiter encore l'upscale des images joueur/cup en moyens écrans */
@media (max-width: 1024px){
  .dashboard-lemon-v7 .player-slider { max-height: 560px; }
}
@media (max-width: 640px){
  .dashboard-lemon-v7 .player-slider { max-height: 460px; }
}


/* ===========================================================
   === Styles page PROFIL (zone droite noire + formulaire) ===
   =========================================================== */

.profile-right{
  background:#0F1012;            /* noir profond */
  color:#fff;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
}

.lp-profile-form{
  width:min(820px, 100%);
  margin: 32px auto 24px;
  display:flex;
  flex-direction:column;
  gap:22px;
}

.lp-profile-header{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:8px;
}

/* Avatar rond + bouton appareil photo */
.lp-avatar{
  position:relative;
  width:160px;
  height:160px;
  border-radius:50%;
  background:#F7D933;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.lp-avatar-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.lp-avatar-btn{
  position:absolute;
  right:6px;
  bottom:6px;
  width:40px;
  height:40px;
  border-radius:10px;
  background:#121212;
  color:#F7D933;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  border:2px solid #F7D933;
}
.lp-avatar-btn input{ display:none; }
.lp-avatar-ico{ font-size:18px; line-height:1; }

/* Champs */
.lp-field{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.lp-label{
  font-size:14px;
  font-weight:600;
  color:#CFCFC6;
}
.lp-field input[type="text"],
.lp-field input[type="email"],
.lp-field input[type="number"],
.lp-field textarea{
  background:transparent;
  border:none;
  border-bottom:1.5px solid #CFCFC6;
  padding:12px 2px;
  color:#fff;
  outline:none;
  font-size:16px;
}
.lp-field textarea{
  border:1.5px solid #CFCFC6;
  border-radius:10px;
  padding:12px 12px;
  resize:vertical;
}

/* Notices */
.lp-notice{
  padding:12px 14px;
  border-radius:10px;
  font-weight:600;
}
.lp-notice.ok{ background:#143d1d; color:#b6f2c3; border:1px solid #2a7b3c; }
.lp-notice.ko{ background:#3d1414; color:#f2b6b6; border:1px solid #7b2a2a; }
.lp-notice.ko ul{ margin:6px 0 0 18px; }

/* Actions */
.lp-actions{
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:16px;
}
.lp-submit{
  border:none;
  cursor:pointer;
}
.lp-secondary{
  text-decoration:none;
  background:#121212;
  color:#F7D933;
  border:none;
}

/* Remplissage bandeau du bas pour stabiliser la grille sur 3 colonnes */
.profile-prez-filler{
  grid-column: 2 / span 2;
  background:#0F1012;
  padding:0;
  min-height:40px;
}

/* Responsive */
@media (max-width: 900px){
  .lp-profile-form{ margin: 24px 16px; }
  .lp-avatar{ width:132px; height:132px; }
}
/* ===========================================================
   === PROFIL intégré à la grille dashboard ===
   =========================================================== */

.dashboard-lemon-v7 .profile-right{
  grid-column: 2 / span 2 !important;
  background:#0F1012 !important;
  color:#fff !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  min-height:100vh;
}

.dashboard-lemon-v7 .lp-profile-form{
  width:min(820px, 100%);
  margin:32px auto 24px;
  display:flex; flex-direction:column; gap:22px;
}

.dashboard-lemon-v7 .lp-profile-header{
  display:flex; align-items:center; gap:18px; margin-bottom:8px;
}

.dashboard-lemon-v7 .lp-avatar{
  position:relative; width:160px; height:160px; border-radius:50%;
  background:#F7D933; display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.dashboard-lemon-v7 .lp-avatar-img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.dashboard-lemon-v7 .lp-avatar-btn{
  position:absolute; right:6px; bottom:6px; width:40px; height:40px; border-radius:10px;
  background:#121212; color:#F7D933; display:flex; align-items:center; justify-content:center;
  cursor:pointer; border:2px solid #F7D933;
}
.dashboard-lemon-v7 .lp-avatar-btn input{ display:none; }
.dashboard-lemon-v7 .lp-avatar-ico{ font-size:18px; line-height:1; }

.dashboard-lemon-v7 .lp-field{ display:flex; flex-direction:column; gap:8px; }
.dashboard-lemon-v7 .lp-label{ font-size:14px; font-weight:600; color:#CFCFC6; }
.dashboard-lemon-v7 .lp-field input[type="text"],
.dashboard-lemon-v7 .lp-field input[type="email"],
.dashboard-lemon-v7 .lp-field input[type="number"],
.dashboard-lemon-v7 .lp-field textarea{
  background:transparent; border:none; border-bottom:1.5px solid #CFCFC6;
  padding:12px 2px; color:#fff; outline:none; font-size:16px;
}
.dashboard-lemon-v7 .lp-field textarea{
  border:1.5px solid #CFCFC6; border-radius:10px; padding:12px 12px; resize:vertical;
}

.dashboard-lemon-v7 .lp-notice{ padding:12px 14px; border-radius:10px; font-weight:600; }
.dashboard-lemon-v7 .lp-notice.ok{ background:#143d1d; color:#b6f2c3; border:1px solid #2a7b3c; }
.dashboard-lemon-v7 .lp-notice.ko{ background:#3d1414; color:#f2b6b6; border:1px solid #7b2a2a; }
.dashboard-lemon-v7 .lp-notice.ko ul{ margin:6px 0 0 18px; }

.dashboard-lemon-v7 .lp-actions{ margin-top:10px; display:flex; align-items:center; gap:16px; }
.dashboard-lemon-v7 .lp-submit{ border:none; cursor:pointer; }
.dashboard-lemon-v7 .lp-secondary{ text-decoration:none; background:#121212; color:#F7D933; border:none; }

/* Filler noir bas */
.dashboard-lemon-v7 .profile-prez-filler{
  grid-column: 2 / span 2 !important;
  background:#0F1012 !important;
  padding:0; min-height:40px;
}

/* Lecture seule (mes-stats) */
.lp-readonly-field[disabled]{ opacity:.85; cursor:not-allowed; }
.lp-readonly-hide{ display:none !important; }

/* Responsive */
@media (max-width: 900px){
  .dashboard-lemon-v7 .lp-profile-form{ margin:24px 16px; }
  .dashboard-lemon-v7 .lp-avatar{ width:132px; height:132px; }
}

/* ===========================================================
   SPÉCIFIQUE LOGIN / REGISTER
   =========================================================== */

/* Centrage du titre et du lien sur login */
body.lp-login-blank .lp-right-inner h2 {
  text-align:center;
}
body.lp-login-blank .lp-register{
  text-align:center !important;
}

/* Fix bloc orange login en mobile (plus de 100vh imposé) */
@media (max-width: 900px){
  .lp-login-left .dashboard-lemon-v7,
  .lp-login-left .dashboard-lemon-v7 .zone.left{
    height:auto;
    min-height:0;
  }
}

/* Responsive profil déjà plus haut */


/* ===========================================================
   RESPONSIVE GLOBAL DASHBOARD
   =========================================================== */

/* Tablet : paddings un peu réduits */
@media (max-width: 1024px) {
  .dashboard-lemon-v7 .zone {
    padding: 24px;
  }
  .dashboard-lemon-v7 .prez {
    padding: 24px 24px 90px;
  }
}

/* Stack vertical + layout login/dashboard sur mobile / tablette */
@media (max-width: 900px) {

  /* On ne force plus de hauteur mini sur la grille dashboard */
  .dashboard-lemon-v7,
  .dashboard-lemon-v7 .wrap {
    height: auto;
    min-height: 0;
  }

  .dashboard-lemon-v7 .wrap {
    display: flex;
    flex-direction: column;
  }

  .dashboard-lemon-v7 .zone,
  .dashboard-lemon-v7 .prez,
  .dashboard-lemon-v7 .profile-right,
  .dashboard-lemon-v7 .profile-prez-filler {
    grid-column: auto !important;
  }

  .dashboard-lemon-v7 .prez {
    flex-direction: column;
    align-items: flex-start;
  }

  /* ===== BLOC TROPHÉES (player-stage) EN MOBILE ===== */
  .dashboard-lemon-v7 .player-stage{
    /* On passe en layout horizontal : image à gauche / CTA à droite */
    position: static;
    display:flex;
    flex-direction:row;
    align-items:flex-end;
    gap:16px;
    min-height:0;
  }

  .dashboard-lemon-v7 .player-slider{
    position:relative;
    flex:0 0 55%;
    min-height:0;
    max-height:none;
    border-radius:18px;
    overflow:hidden;
  }

  /* Image plus petite, contenue dans son bloc, pour ne plus recouvrir les boutons */
  .dashboard-lemon-v7 .player-img{
    position:relative;
    width:100%;
    height:auto;
    aspect-ratio:4/3;
    object-fit:contain;
    object-position:center;
    opacity:1;              /* on considère une seule image active sur mobile */
  }

  /* CTA à droite, en bas, sans position:absolute */
  .dashboard-lemon-v7 .player-actions{
    position:static;
    flex:1;
    margin-top:0;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    justify-content:flex-end;
    gap:14px;
  }

  .dashboard-lemon-v7 .pill-alt{
    width:100%;
    justify-content:space-between;
  }

  /* ===== PREZ : CTA centré ===== */
  .prez #prez-all,
  .prez #prez-open{
    position:static;
    margin-top:16px;
  }

  .prez .prez-actions{
    margin-top:16px;
    display:flex;
    justify-content:center;
  }

  .prez #prez-all{
    display:inline-flex;
    margin-left:auto;
    margin-right:auto;
  }

  /* LOGIN : empilement bloc orange / formulaire */
  body.lp-login-blank .lp-login-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  body.lp-login-blank .lp-login-left,
  body.lp-login-blank .lp-login-right {
    width: 100%;
  }

  body.lp-login-blank .lp-right-inner {
    max-width: 480px;
    margin: 32px auto;
    padding: 0 20px;
  }
}

/* Petits smartphones : paddings + barre Quitter */

@media (max-width: 600px) {
  .dashboard-lemon-v7 .zone {
    padding: 20px 18px;
  }
  .dashboard-lemon-v7 .prez {
    padding: 22px 18px 80px;
  }
  .dashboard-lemon-v7 .quit-bar {
    top: 16px;
    right: 16px;
    gap: 10px;
  }
  .dashboard-lemon-v7 .quit-link {
    font-size: 14px;
  }
  .dashboard-lemon-v7 .quit-x {
    width: 38px;
    height: 38px;
  }
}