:root{
  --bg:#000;
  --text:#fff;
  --top-h:56px;
  --bot-h:50px;
  --feed-h: calc(100dvh - var(--top-h) - var(--bot-h));
  --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}


/* base */
*{box-sizing:border-box}
html,body{height:100%;margin:0;color:var(--text);font-family:var(--font)}
button{ cursor: pointfer; }


.topbar{position:fixed;left:0;right:0;height:var(--top-h);
  background:#000;display:flex;align-items:center;justify-content:center;z-index:60;
  border-bottom:1px solid #111; }

.bottombar{position:fixed;left:0;right:0;bottom:0;height:var(--bot-h);background:#000;
  display:flex;align-items:center;justify-content:
  center;z-index:60;border-top:1px solid #000;
   justify-content: space-around;  
   border-image: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d) 1;
    border-image-slice: 1; }

#viewport-wrapper {
  position: absolute;
  top: var(--top-h);
  bottom: var(--bot-h);
  left: 50%;                   /* Centre horizontalement */
  transform: translateX(-50%); /* Ajuste le centrage */
  width: 100%;                 /* Prend toute la largeur par défaut */
  max-width: 520px;           /* Limite à 520px */
  overflow: hidden;
  /* Gardez vos autres propriétés */
  overflow-x: hidden;
}


/* feed */
.feed{height:100%;overflow-y:auto;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch; 
  }
.feed::-webkit-scrollbar{width:8px;background:transparent}
.feed::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.06);border-radius:4px}

/* post (viewport-sized minus navs) */
.post {
  height:100%;
  scroll-snap-align:start;
  position:relative;display:flex;flex-direction:column;overflow:hidden;}

  .design_inside_post { color: black; vertical-align: center; justify-content: center; align-items: center; font-weight: bold; display: flex; }

/* Zone B: media area */
.post-content { height:calc(100% - 80px); display:flex;align-items:center;justify-content:center;
  background-color:black;overflow:hidden; text-align: center;}

 .media-el { width:100%; display:block; object-fit:contain;}
 .text-el { display: flex; width:70%; font-size:20px; text-align:left; }

/* Zone A: info area 100px */
.post-info{ height:80px; padding:0px 14px;display:block; flex-direction:column;
  justify-content:space-between; 
  background:linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0.25));
  font-size:13px; padding-bottom:7px; background:black; }


/* L1: notes list */
.post-score-list{
  display:flex;gap:8px;align-items:center;
  white-space: nowrap;overflow:hidden;text-overflow:ellipsis;color:#e6e6e6;font-size:12px;
  justify-content: center; padding: 3px 0px;

}

/* L2: score left, actions right */
.post-stats{display:flex;justify-content:space-between;align-items:center; margin: 0 auto;}

.score-box{  }

.actions{display:flex; gap:3px;align-items:center}

.action-btn{display:flex;align-items:center;gap:6px;
  border-radius:6px;background:transparent;border:1px solid rgba(255,255,255,0.04);
  color:#ddd;cursor:pointer}
  
/* L3: user + caption (single line) */
.post-desc{display:flex; align-items:center;white-space:nowrap; 
  font-size: 17px; display: flex;
  overflow:hidden;text-overflow:ellipsis;color:#ddd}
.post-desc .username{font-weight:700;color:#fff}
.post-username{ font-size:px; cursor:pointer; }

/* L4: date + comments */
.post-meta{ display:flex; 
    /*justify-content:space-between;*/
    color:#bdbdbd; font-size:15px;  gap: 20px; }


    .btn-share{ transform: none; }

/* rating panel left (vertical small buttons) */

.rating-panel{position:absolute;right:8px !important;top:50%;transform:translateY(-50%);display:flex;
  flex-direction:column;gap:6px;z-index:40;padding:4px; left: auto !important; /* Désactive le left */}

.rating-btn{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-weight:700;border:2px solid rgba(255,255,255,0.12);
  background:transparent;color:#fff;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,0.5);
  transition:transform .08s,opacity .12s}
.rating-btn:active{transform:scale(.98)}


/* spectrum colors (bright gradients) - map data-v values */
.rating-btn[data-v="7"]{background:linear-gradient(180deg,#ff0000,#ff6b6b);border-color:#ff0000}
.rating-btn[data-v="6"]{background:linear-gradient(180deg,#ff8c00,#ffb24d);border-color:#ff8c00}
.rating-btn[data-v="5"]{background:linear-gradient(180deg,#ffd700,#ffea7a);border-color:#ffd700;color:#000}
.rating-btn[data-v="4"]{background:linear-gradient(180deg,#00a300,#4bd65b);border-color:#00a300}
.rating-btn[data-v="3"]{background:linear-gradient(180deg,#0047ff,#4b78ff);border-color:#0047ff}
.rating-btn[data-v="2"]{background:linear-gradient(180deg,#800080,#a04da0);border-color:#800080}
.rating-btn[data-v="1"]{background:linear-gradient(180deg,#ff1493,#ff66b2);border-color:#ff1493}
.active { background-color:black !important; }
.active-note{ border: 2px solid white;
  background-color:black; color: white; border-radius:50%; width:30px;height:30px; display:flex;align-items:center; justify-content:center;font-weight:700; border-color: white; }

.info-line3 { margin:7px 0px; }
.post-comments-btn { font-size:11px; }

/* responsive */
@media(max-width:520px){.rating-btn{width:26px;height:26px;font-size:12px;gap:4px}.rating-panel{left:6px;gap:5px}}





/* Bouton flottant */
.floating-btn {
  /*position: fixed;
  right: 20px;
  bottom: 70px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  
  color: white;
  font-size: 28px;
  
  cursor: pointer;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);*/background: transparent; border: none;
}

/* Modal */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  display: none; /* Caché par défaut */
}

.modal-content-make-content {
  background: #111;
  border-radius: 16px;
  padding: 24px;
  max-width: 320px;
  width: 90%;
  border: 1px solid #333;
}

.modal-content-make-content h3 {
  margin: 0 0 20px 0;
  text-align: center;
  color: #fff;
}

.modal-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
  
}

.modal-option {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid #333;
  border-radius: 12px;
  padding: 16px;
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s;
}

.modal-option:hover {
  background: rgba(255, 255, 255, 0.1);
}

.modal-option .icon {
  font-size: 24px;
  display: block;
  margin-bottom: 8px;
}

.modal-option .title {
  display: block;
  font-weight: bold;
  font-size: 16px;
}

.modal-option .desc {
  display: block;
  font-size: 13px;
  color: #aaa;
  margin-top: 4px;
}

.modal-close {
  width: 100%;
  padding: 12px;
  background: transparent;
  border: 1px solid #444;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
}



.top-icons{
  
  margin-right: 7px;
  margin-left:auto;
}



.post-score-list {
  display: flex;
  gap: 6px;
}




/* Zone affichant les sommes des notes */
.post-score-list {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
}

.note-item {
  border-radius: 6px;
  font-size: 9px;
  font-weight: 200;
  text-align: center;
}



/* Animation du +7 */
.rating-fx {
  position: fixed;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  font-size: 60px;
  font-weight: 900;
  color: white;
  opacity: 0;
  animation: popFade 0.6s ease-out forwards;
  pointer-events: none;
  z-index: 9999;
}

@keyframes popFade {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 1; }
  60% { transform: translate(-50%, -50%) scale(1.4); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}




.rating-animation {
    position: fixed;
    pointer-events: none; /* Ne bloque pas les clics */
    font-weight: bold;
    font-size: 3rem;
    color: white; /* Couleur bleue (ou celle de votre choix) */
    z-index: 10000;
    transform: translate(-50%, -50%);
    animation: floatUp 0.8s ease-out forwards;

    -webkit-text-stroke: 2px black;
    -webkit-text-fill-color: white;
    /* Pour Firefox et autres navigateurs */
    paint-order: stroke fill;
    stroke: black;
    stroke-width: 1px;
}

@keyframes floatUp {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -150%) scale(2.5); /* S'agrandit et monte */
    }
}



.btn-save .slash-line {
    display: block; /* Barré par défaut */
}

.btn-save.saved .slash-line {
    display: none; /* Cache le trait si sauvegardé */
}

.btn-save.saved svg {
    color: #28a745; /* Optionnel: icône en vert si sauvé */
}

.btn-save {
    display: inline-flex; /* Aligne les éléments à l'intérieur */
    align-items: center;  /* Centre l'icône et le texte verticalement */
    gap: 0;               /* Force l'espace entre l'icône et le span à zéro */
    padding: 5px;         /* Ajuste selon ton design */
}

.btn-save span {
    margin-left: 0;       /* S'assure qu'aucune marge ne pousse le chiffre */
}



/* Style du texte qui jaillit */
.save-pop-animation {
    position: fixed;
    pointer-events: none;
    font-weight: 900;
    font-size: 1.5rem;
    color: #28a745; /* Vert pour la sauvegarde */
    z-index: 10000;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
    animation: savePopUp 0.7s ease-out forwards;
}

@keyframes savePopUp {
    0% {
        opacity: 0;
        transform: translate(-50%, 0) scale(0.5); /* Part du bas (position du clic) */
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -20px) scale(1.2); /* S'affiche vite */
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -100px) scale(2); /* Monte haut et s'agrandit */
    }
}