/* =========================================
   RAGE SCORE — RageBait.fr Premium
   Version compacte responsive
   ========================================= */


.rage-score{

background:#fff;

border:1px solid rgba(0,0,0,.07);

border-radius:22px;

padding:22px;

margin:35px 0 45px;

box-shadow:
0 18px 55px rgba(0,0,0,.10);

position:relative;

overflow:hidden;

}



/* Glow */

.rage-score::before{

content:"";

position:absolute;

width:320px;

height:320px;

right:-140px;

top:-140px;


background:

radial-gradient(
circle,
rgba(255,77,77,.18),
rgba(255,77,77,0) 70%
);


pointer-events:none;

}



.rage-score > *{

position:relative;

z-index:1;

}



/* =========================================
   HEADER
   ========================================= */


.rage-score-head{

display:flex;

align-items:center;

justify-content:space-between;

gap:15px;

margin-bottom:20px;

}



.rage-score-title{

flex:1;

}



.rage-score-label{

display:inline-flex;

align-items:center;

padding:6px 12px;

border-radius:999px;


background:
rgba(214,40,40,.10);


border:
1px solid rgba(214,40,40,.18);


color:#d62828;


font-size:.75rem;

font-weight:950;

}



.rage-score-title h3{

margin:10px 0 0;


font-size:1.3rem;


font-weight:950;


letter-spacing:-.4px;


color:#111;

}





/* =========================================
   SCORE BOX COMPACT
   ========================================= */


.rage-score-number{

display:flex;

align-items:baseline;

justify-content:center;

gap:3px;


min-width:95px;


padding:10px 15px;


border-radius:18px;


background:

linear-gradient(
135deg,
#ff4d4d,
#d62828
);


color:#fff;


box-shadow:

0 10px 25px rgba(214,40,40,.25);


}



.rage-score-number strong{


font-size:2.2rem;


line-height:1;


font-weight:950;


letter-spacing:-1px;


}



.rage-score-number span{


font-size:.9rem;


font-weight:900;


}





/* =========================================
   VERDICT
   ========================================= */


.rage-score-level{


padding:15px;


border-radius:18px;


background:

rgba(214,40,40,.06);


border:

1px solid rgba(214,40,40,.15);


margin-bottom:22px;


}



.rage-score-level strong{


display:block;


color:#d62828;


font-size:1.15rem;


font-weight:950;


margin-bottom:8px;


}



.rage-score-level p{


margin:5px 0;


color:#333;


font-weight:600;


line-height:1.6;


}



/* =========================================
   BARRES
   ========================================= */


.rage-score-meter{

display:grid;

gap:16px;

}



.rage-score-line p{


display:flex;

justify-content:space-between;

align-items:center;


margin:0 0 7px;


font-weight:850;


color:#222;


}



.rage-score-line strong{


color:#d62828;


font-weight:950;


}



.bar{


height:11px;


width:100%;


background:

rgba(0,0,0,.06);


border-radius:999px;


overflow:hidden;


}



.bar span{


display:block;


height:100%;


border-radius:999px;


background:

linear-gradient(
90deg,
#ff4d4d,
#d62828
);


animation:

rageFill 1s ease;


}



@keyframes rageFill{

from{

width:0;

}

}





/* =========================================
   PARTAGE
   ========================================= */


.rage-score-share{


margin-top:22px;


padding-top:18px;


border-top:

1px solid rgba(0,0,0,.08);


text-align:center;


}



.rage-score-share p{


margin:0 0 12px;


font-weight:900;


color:#111;


}



.rage-share-btn{


display:inline-flex;


align-items:center;


justify-content:center;


padding:12px 20px;


border:0;


border-radius:999px;


cursor:pointer;


background:

linear-gradient(
90deg,
#ff4d4d,
#d62828
);


color:white;


font-weight:950;


font-size:.95rem;


box-shadow:

0 12px 30px rgba(214,40,40,.25);


transition:.2s ease;


}



.rage-share-btn:hover{


transform:translateY(-2px);


box-shadow:

0 18px 40px rgba(214,40,40,.35);


}





/* =========================================
   TABLETTE
   ========================================= */


@media(max-width:768px){


.rage-score{


padding:18px;


}



.rage-score-head{


gap:12px;


}



.rage-score-number{


min-width:85px;


padding:9px 12px;


}



.rage-score-number strong{


font-size:1.9rem;


}



}





/* =========================================
   MOBILE
   ========================================= */


@media(max-width:520px){


.rage-score{


border-radius:18px;


padding:16px;


}



.rage-score-head{


flex-direction:column;


align-items:flex-start;


}



.rage-score-number{


align-self:center;


min-width:100px;


}



.rage-score-number strong{


font-size:2rem;


}



.rage-score-title h3{


font-size:1.15rem;


}



.rage-score-level{


padding:13px;


}



.rage-share-btn{


width:100%;


}



.rage-score-line p{


font-size:.9rem;


}


}

/* =========================================
   BOUTON PARTAGE — COMPACT
   ========================================= */

.rage-share-btn{

padding:10px 16px;

font-size:.85rem;

border-radius:999px;

width:auto;

min-height:auto;

}


/* Desktop */
@media(min-width:769px){

.rage-share-btn{

padding:9px 18px;

font-size:.82rem;

}

}


/* Mobile */
@media(max-width:520px){

.rage-share-btn{

width:auto;

padding:10px 14px;

font-size:.82rem;

margin:auto;

}

.rage-score-share{

text-align:center;

}

}