@charset "utf-8";
/* CSS Document */

*{
box-sizing:border-box;
margin:0;
padding:0;
}

body{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial;
background:#f1f3f7;
color:#111;
}

/* HEADER */
.header{
background:#f5c400;
color:#111;
padding:18px 20px;
text-align:center;
position:sticky;
top:0;
z-index:1000;
box-shadow:0 4px 12px rgba(0,0,0,.12);
}

.header h1{
font-size:28px;
font-weight:800;
}

.header p{
font-size:13px;
opacity:.8;
margin-top:4px;
}

.img-right {
	float: right;
	margin: 0 0 15px 20px;
	max-width: 100%;
	height: auto;
}

/* Version mobile */
@media (max-width: 768px) {
	.img-right {
		float: none;
		display: block;
		margin: 0 auto 15px auto;
	}
}

h1 a {
  color: #000;            /* noir */
  text-decoration: none;  /* pas souligné */
}

h1 a:hover {
  text-decoration: underline; /* souligné au survol */
}

/* MENU DU HAUT */

.sub-menu{
background:#fff;
display:flex;
justify-content:center;
gap:20px;
padding:10px 15px;
box-shadow:0 2px 10px rgba(0,0,0,.05);
position:sticky;
top:62px;
z-index:999;
}

.sub-menu a{
text-decoration:none;
color:#111;
font-size:13px;
font-weight:600;
opacity:.8;
transition:.2s;
}

.sub-menu a:hover{
opacity:1;
color:#f5c400;
}


/* CONTAINER */
.container{
max-width:1180px;
margin:auto;
padding:30px;
}

/* INTRO */
.intro{
background:#fff;
padding:18px;
border-radius:12px;
box-shadow:0 8px 20px rgba(0,0,0,.05);
margin-top:10px;
font-size:14px;
}

/* BEST */
.section{
background:#fff;
margin-top:40px;
padding:25px;
border-radius:12px;
box-shadow:0 6px 18px rgba(0,0,0,.05);
}

.section.best{
border:2px solid #f5c400;
background:#fffdf2;
}

.badge{
display:inline-block;
background:#111;
color:#fff;
padding:4px 10px;
font-size:12px;
border-radius:20px;
margin-bottom:10px;
}

/* CARDS */
.card{
position:relative;
display:grid;
grid-template-columns:80px 1fr 220px;
background:#fff;
border:2px solid #f5c400;
border-radius:16px;
margin-top:18px;
box-shadow:0 6px 18px rgba(0,0,0,.08);
overflow:hidden;
transition:.2s;
}

.card:hover{
transform:translateY(-2px);
box-shadow:0 10px 25px rgba(0,0,0,.12);
}

.badge-card{
position:absolute;
top:10px;
left:10px;
background:#111;
color:#fff;
font-size:11px;
padding:4px 8px;
border-radius:12px;
}

/* RANK */
.rank{
background:#fff6cc;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}

.rank .num{
font-size:26px;
font-weight:800;
}

.rank .txt{
font-size:10px;
color:#555;
margin-top:5px;
}

/* CONTENT */
.content{padding:18px;}

.title{font-size:20px;margin:0;}

.sub{
font-size:13px;
color:#666;
margin-top:4px;
}

.features{
margin-top:10px;
font-size:14px;
line-height:1.5;
}

.mini-summary{
font-size:12px;
margin-top:8px;
color:#444;
font-style:italic;
}



/* RIGHT */
.right{
border-left:1px solid #eee;
display:flex;
flex-direction:column;
align-items:stretch;
justify-content:center;
padding:18px;
text-align:center;
}

.score{
font-size:34px;
font-weight:800;
color:#1a8f3a;
}

/* BUTTON */
.btn{
margin-top:10px;
display:block;
background:linear-gradient(135deg,#f5c400,#ffdd55);
color:#111;
padding:12px 14px;
border-radius:10px;
font-weight:800;
text-decoration:none;
width:100%;
text-align:center;
box-shadow:0 6px 14px rgba(0,0,0,.15);
transition:.2s;
}

.btn:hover{
transform:translateY(-2px);
box-shadow:0 10px 18px rgba(0,0,0,.2);
}

/* FAQ ACCORDION */
.accordion{
margin-top:15px;
}

.acc-item{
border-bottom:1px solid #eee;
}

.acc-btn{
width:100%;
text-align:left;
padding:14px 10px;
background:none;
border:none;
font-size:15px;
font-weight:700;
cursor:pointer;
color:#111;
display:flex;
justify-content:space-between;
align-items:center;
}

.acc-btn::after{
content:"+";
font-size:18px;
color:#f5c400;
}

.acc-item.active .acc-btn::after{
content:"–";
}

.acc-content{
max-height:0;
overflow:hidden;
transition:max-height 0.25s ease;
padding:0 10px;
}

.acc-item.active .acc-content{
padding:10px;
max-height:200px;
}

.acc-content p{
font-size:14px;
color:#444;
line-height:1.6;
}





/* FAQ */

.faq-item{
margin-top:15px;
padding-bottom:10px;
border-bottom:1px solid #eee;
}

.faq-item h3{
font-size:15px;
margin-bottom:6px;
color:#111;
}

.faq-item p{
font-size:14px;
color:#444;
line-height:1.6;
}


/* STICKY CTA */
.sticky-cta{
position:fixed;
bottom:0;
left:0;
right:0;
background:#111;
color:#fff;
padding:12px;
display:flex;
justify-content:space-between;
align-items:center;
z-index:999;
transition:0.3s ease;
will-change:transform;
}

.sticky-cta a{
background:#f5c400;
color:#111;
padding:10px 14px;
border-radius:8px;
font-weight:800;
text-decoration:none;
}

/* FOOTER */
footer{
margin-top:60px;
background:#111;
color:#fff;
text-align:center;
padding:30px;
}

footer a{
color:#fff;
margin:0 10px;
text-decoration:none;
}


.site-thumb-best{
display:block;
margin:15px 0;
width:90px;
height:90px;
object-fit:contain;
background:#fff;
padding:6px;
border-radius:10px;
box-shadow:0 4px 12px rgba(0,0,0,0.08);
}
@media (max-width:768px){
.site-thumb-best{
width:70px;
height:70px;
}
}



@media (max-width: 768px){

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

.right{
display:flex;
flex-direction:row;
justify-content:space-between;
align-items:center;
width:100%;
gap:10px;
}

.score{
font-size:20px;
min-width:60px;
text-align:left;
}

.btn{
flex:1;
}

}