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

body{
    font-family:'Poppins',sans-serif;
    background:linear-gradient(180deg,#0b1020,#141b35);
    color:#fff;
}

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

header{
    padding:18px 8%;
    background:rgba(10,15,35,0.95);
    position:relative;
}

.header-shell{
    max-width:1100px;
    margin:0 auto;
    display:flex;
    align-items:center;
    width:100%;
    gap:18px; 
}

/* LOGO */

.logo{
    font-size:26px;
    font-weight:700;
    text-decoration:none;
    color:#fff;
    display:inline-flex;
    align-items:center;
    margin-right: 80px;
}

.logo-badge{
    background:#ffffff;
    color:#111827;
    padding:1px 4px;
    border-radius:4px;
    font-weight:800;
}

/* MENU */

header nav{
    display:flex;
    gap:40px;
    margin-left:10px; 
}

header nav a{
    text-decoration:none;
    color:#ddd;
    font-weight:500;
    white-space:nowrap;
    transition:0.3s;
}

header nav a:hover{
    color:#fff;
}

/* BOUTON DEAL */

.deal-button{
    background:#facc15;
    color:#000;
    padding:10px 18px;
    border-radius:8px;
    font-weight:600;
    text-decoration:none;
    transition:0.3s;
    display:flex;             
    align-items:center;
    gap:8px;     
    margin-left:50px;            
}

.deal-button i{
    font-size:14px;
}

.deal-button:hover{
    transform:translateY(-2px);
}

/* BURGER */

.menu-toggle{
    display:none;
    font-size:26px;
    cursor:pointer;
}

/* ================= HERO INDEX================= */

.hero{
    position:relative;
    background:url('https://www.fmeurope.net/uploads/images/hero-coach-football-manager.webp') center center / cover no-repeat;
    min-height:50vh; /* au lieu de 90-100vh */
    padding:0 8%;
    display:flex;
    align-items:center;
}

.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        to right,
        rgba(10,15,35,0.85) 0%,
        rgba(10,15,35,0.75) 40%,
        rgba(10,15,35,0.55) 70%,
        rgba(10,15,35,0.3) 100%
    );
}

.hero-content{
    position:relative;
    z-index:2;
    max-width:700px;
}

.hero h1{
    font-size:52px;
    line-height:1.2;
    margin-bottom:25px;
}

.hero h1 span{
    color:#a855f7;
}

.hero-subtitle{
    font-size:18px;
    font-weight:400;
    color:#e2e8f0;
    margin-bottom:35px;
}

.hero-buttons{
    display:flex;
    gap:20px;
}

.btn-primary{
    background:#7c3aed;
    padding:16px 40px;
    border-radius:8px;
    text-decoration:none;
    color:white;
    font-weight:600;
    font-size:18px;
    transition:0.3s;
}

.btn-primary:hover{
    background:#6d28d9;
}

/* ================= ARTICLES INDEX ================= */

.section{padding:60px 8%;}

.section h2{margin-bottom:30px;}

.articles{
    display:grid;
    grid-template-columns:3fr 1fr;
    gap:30px;
}

.cards{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.card{
    background:rgba(255,255,255,0.05);
    border-radius:12px;
    overflow:hidden;
    transition:0.3s;
}

.card:hover{
    transform:translateY(-5px);
}

.card a{
    display:block;
    text-decoration:none;
    color:inherit;
}

.card img{
    width:100%;
    height:180px;
    object-fit:cover;
    object-position:center 30%;
    display:block;
}

.card-rating{
    font-size:18px;
    letter-spacing:3px;
    position:relative;
    display:inline-block;
    margin-bottom:6px;
    line-height:1;
}

/* étoiles noires de base */

.card-rating::before{
    content:"★★★★★";
    color:#111;
}

/* étoiles dorées */

.card-rating::after{
    content:"★★★★★";
    position:absolute;
    left:0;
    top:0;
    color:#facc15;
    overflow:hidden;
    white-space:nowrap;
}

/* notes */

.rating-50::after{ width:100%; }  /* ⭐⭐⭐⭐⭐ */
.rating-45::after{ width:90%; }   /* ⭐⭐⭐⭐½ */
.rating-40::after{ width:80%; }   /* ⭐⭐⭐⭐ */
.rating-35::after{ width:70%; }   /* ⭐⭐⭐½ */
.rating-30::after{ width:60%; }   /* ⭐⭐⭐ */


.card-content{
    padding:15px;
}

.card-content h3{
    margin-bottom:10px;
    font-size:16px;
}

.card-content p{
    font-size:13px;
    color:#bbb;
    margin-bottom:12px;
}

.sidebar{
    background:rgba(255,255,255,0.05);
    padding:20px;
    border-radius:12px;
}

.sidebar ul{list-style:none;}

.sidebar a{
    text-decoration:none;
    color:#bbb;
    display:flex;              
    align-items:center;        
    gap:10px;                  
    padding:10px 0;
}

.sidebar a:hover{
    color:#fff;
}

.sidebar li{
    border-bottom:1px solid rgba(255,255,255,0.1);
}

.sidebar a i{
    font-size:13px;
    color:#fff;
}



/* ================= CTA BLOCS ================= */

.cta-section{
    padding:60px 8%;
}

.cta-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:20px;
}

.cta-box{
    background:linear-gradient(135deg,#312e81,#1e293b);
    padding:35px 40px;
    border-radius:12px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    text-decoration:none;
    color:inherit;
    transition:0.25s ease;
}

.cta-box:hover{
    transform:translateY(-3px);
}

.cta-content{
    display:flex;
    align-items:center;
    gap:20px;
}

.cta-icon{
    width:70px;
    height:70px;
    background:rgba(255,255,255,0.08);
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    font-size:28px;
    color:#a855f7;
}

.cta-box h3{
    margin-bottom:6px;
}

.cta-box p{
    font-size:14px;
    color:#bbb;
}

.cta-link{
    background:#7c3aed;
    padding:12px 20px;
    border-radius:6px;
    font-weight:600;
    font-size:14px;
}

/* ===== FORUM HIGHLIGHT ===== */

.forum-highlight{
    padding:40px 8%;
}

.forum-highlight-shell{
    max-width:800px;
    margin:0 auto;
    text-align:center;
}

.forum-highlight-head{
    margin-bottom:15px;
}

.forum-highlight-head h2{
    font-size:30px;
    margin-bottom:10px;
    color:#fff;
}

.forum-highlight-head p{
    color:#b8c0d4;
    font-size:15px;
    margin:0 auto;
}

.forum-highlight-list{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:15px;
}

.forum-highlight-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 14px;
    border-radius:12px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.08);
    text-decoration:none;
    color:#fff;
    transition:0.2s;
}

.forum-highlight-item:hover{
    background:rgba(255,255,255,0.08);
    transform:translateX(4px);
}

.forum-highlight-icon{
    font-size:18px;
}

.forum-highlight-title{
    font-size:15px;
    text-align:left;
}

.forum-highlight-footer{
    margin-top:15px;
}

.forum-highlight-footer a{
    color:#c4b5fd;
    font-weight:700;
    text-decoration:none;
}

.login-separator{
    margin:30px 0 20px 0;
    text-align:center;
    color:#9aa3b2;
}

.login-separator span{
    display:block;
    font-weight:600;
    margin-bottom:5px;
}

.login-separator small{
    font-size:13px;
}

/* ================= BLOC ACHETER ================= */

.buy-game{
    padding:55px 8%;
    background:linear-gradient(135deg,#1e1b4b,#0f172a);
    text-align:center;
}

.buy-title{
    font-size:30px;
    margin-bottom:30px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
}

.buy-title i{
    font-size:24px;
    color:#fff;
}

.buy-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:35px;
}

.buy-image img{
    width:170px;
    max-width:100%;
    height:auto;
}

.buy-text{
    max-width:460px;
    text-align:left;
}

.buy-text p{
    font-size:16px;
    color:#ddd;
    margin-bottom:20px;
}

.buy-button{
    background:#facc15;
    color:#000;
    padding:12px 28px;
    border-radius:8px;
    font-weight:700;
    text-decoration:none;
    display:inline-block;
    transition:0.3s;
}

.buy-button:hover{
    transform:scale(1.05);
}

/* ================= NEWSLETTER ================= */

.newsletter{
    background:linear-gradient(135deg,#1e1b4b,#0f172a);
    padding:80px 8%;
    text-align:center;
}

.newsletter p{color:#bbb;margin-bottom:30px;}

.newsletter-form{
    display:flex;
    justify-content:center;
    gap:10px;
}

.newsletter-form input{
    padding:14px;
    width:300px;
    max-width:90%;
    border-radius:6px;
    border:none;
}

.newsletter-title{
    font-size:32px;
    margin-bottom:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
}

.newsletter-title i{
    font-size:22px;
    color:#fff;
}

.newsletter-form button{
    background:#facc15;
    color:#000;
    border:none;
    padding:14px 22px;
    border-radius:6px;
    font-weight:600;
    cursor:pointer;
    transition:0.3s;
}

.newsletter-form button:hover{
    transform:scale(1.05);
}


/* ================= FAQ ================= */
.faq{
    padding:60px 8%;
}

.faq-title{
    font-size:30px;
    margin-bottom:30px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    text-align:center;
}

.faq-title i{
    font-size:24px;
    color:#fff;
}

.faq-item{
    background:rgba(255,255,255,0.05);
    padding:20px;
    border-radius:10px;
    margin-bottom:15px;
    display:flex;
    align-items:flex-start;
    gap:18px;
}

.faq-avatar img{
    width:56px;
    height:56px;
    object-fit:cover;
    border-radius:50%;
    display:block;
}

.faq-content{
    flex:1;
}

.faq-item h3{
    margin-bottom:10px;
    font-size:18px;
}

.faq-item p{
    color:#bbb;
    font-size:14px;
    line-height:1.6;
}
.faq a{
    color:inherit;
    text-decoration:underline;
}

.faq a:hover{
    text-decoration:none;
}

/* ================= FOOTER ================= */

footer{
    background:#0b1020;
    padding:60px 8% 30px 8%;
    border-top:1px solid rgba(255,255,255,0.08);
}

.footer-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:40px;
    margin-bottom:40px;
}

.footer-grid h4{
    margin-bottom:15px;
    font-size:16px;
    color:#fff;
}

.footer-grid ul{
    list-style:none;
}

.footer-grid li{
    margin-bottom:8px;
    font-size:14px;
}

.footer-grid a{
    text-decoration:none;
    color:#bbb;
    transition:0.3s;
}

.footer-grid a:hover{
    color:#fff;
}

.social-links a{
    text-decoration:none;
    color:#bbb;
    display:flex;
    align-items:center;
    gap:8px;
    transition:0.3s;
}

.social-links a:hover{
    color:#fff;
}

.social-links i{
    font-size:16px;
}

/* Ligne du bas */

.footer-bottom{
    text-align:center;
    font-size:13px;
    color:#777;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,0.08);
}

.footer-bottom a{
    color:inherit;          
    text-decoration:none;   
}


/* HERO PAGE ARTICLES */

.page-hero{
    position:relative;
    background:url('https://www.fmeurope.net/uploads/images/hero-guides-football-manager.png') center 30% / cover no-repeat;
    min-height:50vh;
    padding:80px 8%;
    display:flex;
    align-items:flex-start;
}

.page-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        to right,
        rgba(10,15,35,0.65) 0%,
        rgba(10,15,35,0.45) 50%,
        rgba(10,15,35,0.15) 100%
    );
}

.page-hero-content{
    position:relative;
    z-index:2;
    max-width:700px;
}

.page-title{
    font-size:52px;
    line-height:1.2;
    margin-bottom:20px;
}

.page-title span{
    color:#a855f7;
}

.page-hero p{
    color:#ddd;
    font-size:18px;
}


/* HERO PAGE DL */

.page-hero-telechargement{
    position:relative;
    background:url('https://www.fmeurope.net/uploads/images/hero-telechargement-football-manager.png') center 22% / cover no-repeat;
    min-height:50vh;
    padding:80px 8%;
    display:flex;
    align-items:flex-start;
}

.page-hero-telechargement::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        to right,
        rgba(10,15,35,0.65) 0%,
        rgba(10,15,35,0.45) 50%,
        rgba(10,15,35,0.15) 100%
    );
}

.page-hero-content-telechargement{
    position:relative;
    z-index:2;
    max-width:700px;
}

.page-hero-telechargement p{
    color:#ddd;
    font-size:18px;
}


/* HERO PAGE story */

.page-hero-story{
    position:relative;
    background:url('https://www.fmeurope.net/uploads/images/hero-story-football-manager.png') center 35% / cover no-repeat;
    min-height:50vh;
    padding:80px 8%;
    display:flex;
    align-items:flex-start;
}

.page-hero-story::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        to right,
        rgba(10,15,35,0.65) 0%,
        rgba(10,15,35,0.45) 50%,
        rgba(10,15,35,0.15) 100%
    );
}

.page-hero-content-story{
    position:relative;
    z-index:2;
    max-width:700px;
}

.page-hero-story p{
    color:#ddd;
    font-size:18px;
}



/* ===== LISTE ARTICLES ===== */

.breadcrumb{
    max-width:1200px;
    margin:20px auto 16px auto;
    padding:0 8%;
    font-size:13px;
    color:#9aa3b2;
    text-align:left;
}

.breadcrumb a{
    color:#9aa3b2;
    text-decoration:none;
}

.breadcrumb a:hover{
    color:#fff;
}

.breadcrumb span{
    margin:0 6px;
}

.articles-list{
    max-width:1200px;
    margin:auto;
    padding-top:0;
}

.section-title{
    font-size:30px;
    line-height:1.2;
    margin-bottom:12px;
    position:relative;
    display:inline-block;
}

.section-title::after{
    content:"";
    display:block;
    width:70px;
    height:4px;
    margin-top:10px;
    border-radius:999px;
    background:#a855f7;
}

.section-intro{
    color:#b8c0d4;
    font-size:15px;
    line-height:1.7;
    margin-top:8px;
    margin-bottom:36px;
    max-width:780px;
}

.article-card{
    background:rgba(255,255,255,0.05);
    border-radius:14px;
    overflow:hidden;
    margin-bottom:28px;
    transition:0.25s ease;
}

.article-card:hover{
    transform:translateY(-4px);
}

.article-card-link{
    display:flex;
    align-items:stretch;
    text-decoration:none;
    color:inherit;
    cursor:pointer;
}

.article-image{
    flex:0 0 420px;
    padding-left:18px;
    display:flex;
    align-items:center;
}

.article-image img{
    width:100%;
    max-height:260px;
    height:auto;
    object-fit:contain;
    display:block;
}

.article-content{
    flex:1;
    padding:24px 26px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.article-badge{
    display:inline-block;
    align-self:flex-start;
    background:#facc15;
    color:#111;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.4px;
    padding:6px 10px;
    border-radius:6px;
    margin-bottom:14px;
}

.article-content h3{
    font-size:28px;
    line-height:1.2;
    margin-bottom:12px;
    color:#fff;
}

.article-content p{
    color:#bbb;
    font-size:15px;
    line-height:1.7;
    margin-bottom:16px;
    max-width:680px;
}

.article-meta{
    font-size:13px;
    color:#9aa3b2;
    margin-top:10px;
}

.article-meta .separator{
    margin:0 6px;
}

/* ================= ARTICLE PAGE ================= */

/* Conteneur global */
.article-page{
    padding:30px 8% 70px 8%;
    background:transparent;
}

.article-shell{
    max-width:1100px;
    margin:0 auto;
}

/* Fil d'Ariane */
.article-breadcrumb{
    font-size:13px;
    color:#9aa3b2;
    margin-bottom:22px;
}

.article-breadcrumb a{
    color:#9aa3b2;
    text-decoration:none;
}

.article-breadcrumb a:hover{
    color:#fff;
}

.article-breadcrumb span{
    margin:0 6px;
}

/* Header article */
.article-header{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    margin-bottom:30px;
}

.article-header-top{
    margin-bottom:14px;
}

.article-badge{
    display:inline-block;
    background:#facc15;
    color:#111;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.4px;
    padding:6px 10px;
    border-radius:6px;
}

.article-title{
    font-size:48px;
    line-height:1.15;
    margin-bottom:18px;
    max-width:900px;
}

.article-meta{
    display:block;
    width:100%;
    margin-bottom:12px;
}

.article-meta .separator{
    margin:0 8px;
}

/* Image principale */
.article-hero{
    margin-bottom:40px;
}

.article-hero img{
    width:100%;
    max-width:1000px;
    height:auto;
    display:block;
    border-radius:14px;
    cursor:default;
}

.article-rating{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:24px;
}

.article-rating-text{
    font-size:14px;
    font-weight:600;
    color:#eef2ff;
    line-height:1;
}

/* Corps de l'article */

.article-body{
    max-width:760px;
    margin:0 auto;
    font-size: 18px;
    line-height: 1.8;
    color: #d6d9e3; 
}

/* Conteneur centré */
.article-body .centrer {
  display: flex;
  justify-content: center;
  margin: 30px 0;
}

/* ===== IMAGES ARTICLE ===== */

/* Images dans le contenu */
.article-image-inline{
    margin:32px 0;
    display:flex;
    flex-direction:column; /* 🔥 important */
    align-items:center;
}

.article-image-inline img{
    width:auto;
    max-width:100%;
    height:auto;
    display:block;
    border-radius:12px;
    cursor:pointer;
    transition:0.25s;
}

.article-image-inline img:hover{
    transform:scale(1.02);
}

.article-image-inline figcaption{
    font-size:13px;
    color:#9aa3b2;
    margin-top:10px;
    text-align:center;
}

.article-body strong{
    font-weight:700;
    color:#fff;
}

.article-body p{
    font-size:18px;
    line-height:1.85;
    color:#d6d9e3;
    margin-bottom:22px;
}

.article-body .article-intro{
    font-size:20px;
    line-height:1.85;
    color:#eef2ff;
    margin-bottom:30px;
}

.article-body h2{
    font-size:32px;
    line-height:1.25;
    margin:60px 0 50px 0;
    color:#fff;
}

.article-body h3{
    font-size:24px;
    line-height:1.3;
    margin:18px 0 7px 0;
    color:#A855F0;
}

.article-body h3.article-subtitle {
    font-size: 22px;
    margin: 12px 0 6px 0;
    color: #9A4CF4;
    line-height: 1.3;
}

.article-body ul,
.article-body ol{
    margin:0 0 24px 24px;
    color:#d6d9e3;
}

.article-body li{
    margin-bottom:10px;
    line-height:1.75;
    font-size:18px;
}

.article-body a{
    color:#a855f7;
    text-decoration:underline;
    text-underline-offset:3px;
    transition:0.2s;
}

.article-body a:hover{
    text-decoration:none;
}

.article-highlight{
    background:rgba(255,255,255,0.05);
    border-left:4px solid #a855f7;
    padding:16px 18px;
    border-radius:10px;
    margin:12px 0 28px 0; 
    color:#eef2ff;
}

.article-highlight p{
    margin-bottom:10px;
}

.article-highlight p:last-child{
    margin-bottom:0;
}

.article-tip{
    background:rgba(124,58,237,0.15);
    border:1px solid rgba(124,58,237,0.35);
    padding:20px 22px;
    border-radius:12px;
    margin:30px 0;
    color:#eef2ff;
}

.article-tip strong{
    color:#c4b5fd;
}

.article-warning{
    background:rgba(251,146,60,0.10);
    text-align:center;
    color:#FB923C;
    padding:14px 16px;
    border-radius:10px;
    margin:30px 0 45px 0;
}

.article-warning strong{
    color:#fb923c;
}

.article-video {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    margin: 30px 0;
}

.article-video iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 12px;
}


/* Fin d'article */
.article-end{
    max-width:760px;
    margin:50px auto 0 auto;
    padding-top:24px;
    border-top:1px solid rgba(255,255,255,0.08);
}

/* ================= TABLE ================= */

.article-table {
    width: 100%;
    border-collapse: collapse;
    margin: 30px 0;
    font-size: 16px;

    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

/* Caption */
.article-table caption {
    caption-side: top;
    text-align: left;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #eef2ff;
}

/* Header */
.article-table thead {
    background: linear-gradient(135deg, #A855F7, #7C3AED);
}

.article-table th {
    padding: 14px;
    text-align: left;
    font-weight: 700;
    color: #fff;
    font-size: 15px;
}

/* Cells */
.article-table td {
    padding: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    color: #d6d9e3;
}

/* Première colonne */
.article-table td:first-child,
.article-table th:first-child {
    width: 25%;
    color: #eef2ff;
}

/* Alternance lignes */
.article-table tbody tr:nth-child(even) {
    background: rgba(255,255,255,0.03);
}

/* Hover */
.article-table tbody tr:hover {
    background: rgba(124,58,237,0.12);
    transition: 0.2s;
}

.article-table caption {
    caption-side: bottom;
    text-align: center;
    font-size: 14px;
    color: #9aa3b2;
    margin-top: 10px;
    line-height: 1.5;
}

/* ================= DOWNLOAD BOX ================= */

.download-box{
    max-width:760px;
    margin:40px auto 0 auto;
    padding:24px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:14px;
    text-align:center;
}

.download-rating-wrap{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin-bottom:18px;
}

.download-rating-text{
    font-size:14px;
    font-weight:600;
    color:#eef2ff;
}

.download-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    min-width:280px;
    padding:16px 26px;
    border-radius:12px;
    background:#7c3aed;
    color:#fff;
    text-decoration:none;
    font-size:17px;
    font-weight:700;
    transition:0.2s;
    box-shadow:0 10px 30px rgba(124,58,237,0.22);
}

.download-button:hover{
    transform:translateY(-2px);
    background:#6d28d9;
}

.download-button i{
    font-size:18px;
}

.download-note{
    margin-top:14px;
    font-size:13px;
    color:#9aa3b2;
}

/* ================= INSTALL BOX ================= */

.install-box{
    max-width:760px;
    margin:34px auto 0 auto;
    padding:22px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:12px;
}

.install-title{
    font-size:24px;
    margin-bottom:16px;
    color:#fff;
}

.install-box p{
    font-size:16px;
    line-height:1.75;
    color:#d6d9e3;
    margin-bottom:14px;
}

.install-path{
    margin:16px 0;
    padding:14px 16px;
    border-radius:10px;
    background:rgba(0,0,0,0.22);
    border:1px solid rgba(255,255,255,0.08);
    font-size:14px;
    line-height:1.6;
    color:#eef2ff;
    word-break:break-word;
    font-family:monospace;
}

.install-content p {
    font-size: 16px;
    line-height: 1.75;
    color: #d6d9e3;
    margin-bottom: 14px;
}

.install-help-link {
    margin-top: 16px;
    margin-bottom: 0;
}

.install-help-link a {
    color: #a855f7;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.install-help-link a:hover {
    text-decoration: none;
}

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

.article-share{
    max-width:760px;
    margin:40px auto 0 auto;
    display:flex;
    gap:14px;
}

.share-icon{
    width:42px;
    height:42px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.08);
    color:#fff;
    text-decoration:none;
    cursor:pointer;
    transition:0.2s;
}

.share-icon i{
    font-size:16px;
}

.share-icon:hover{
    transform:translateY(-2px);
    background:rgba(255,255,255,0.1);
}

/* ================= AUTHOR BOX ================= */

.article-author-box{
    max-width:760px;
    margin:50px auto 0 auto;
    background:rgba(255,255,255,0.05);
    border-radius:12px;
    padding:22px;
    display:flex;
    gap:18px;
    align-items:center;
    position:relative;
}

.author-avatar img{
    width:74px;
    height:76px;
    object-fit:cover;
    border-radius:8px;
    display:block;
}

.author-info h4{
    font-size:18px;
    margin-bottom:6px;
}

.author-info p{
    font-size:14px;
    color:#bbb;
    line-height:1.6;
}

/* ================= RELATED ARTICLES ================= */

.related-section{
    max-width:1100px;
    margin:70px auto 0 auto;
}

.related-title{
    font-size:26px;
    margin-bottom:24px;
}

.related-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.related-card{
    background:rgba(255,255,255,0.05);
    border-radius:12px;
    overflow:hidden;
    transition:0.25s;
}

.related-card:hover{
    transform:translateY(-4px);
}

.related-card a{
    display:block;
    color:inherit;
    text-decoration:none;
}

.related-card img{
    width:100%;
    height:160px;
    object-fit:cover;
    display:block;
}

.related-content{
    padding:14px;
}

.related-content h3{
    font-size:16px;
    line-height:1.35;
    margin-bottom:8px;
}

.related-meta{
    font-size:12px;
    color:#9aa3b2;
}

.article-author{
    color:inherit;
    text-decoration:none;
}

.author-full-link{
    position:absolute;
    inset:0;
    z-index:2;
}

/* ================= COMMENTS ================= */

.comments-section{
    max-width:760px;
    margin:70px auto 0 auto;
}

.comments-title{
    font-size:26px;
    margin-bottom:24px;
}

.comment-item{
    display:flex;
    gap:16px;
    background:rgba(255,255,255,0.05);
    border-radius:12px;
    padding:18px;
    margin-bottom:18px;
}

.comment-avatar img{
    width:74px;
    height:76px;
    object-fit:cover;
    border-radius:8px;
    display:block;
}

.comment-body{
    flex:1;
}

.comment-meta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    margin-bottom:8px;
}

.comment-author{
    font-weight:700;
    color:#fff;
    font-size:15px;
}

.comment-date{
    font-size:12px;
    color:#9aa3b2;
}

.comment-text{
    font-size:15px;
    line-height:1.7;
    color:#d6d9e3;
}

.comment-reply {
  display: flex;
  gap: 14px;
  margin-top: 18px;
  margin-left: 12px;
  padding: 16px 18px;
  border-left: 3px solid #a855f7;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
}


.comment-reply-avatar img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.comment-reply-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.comment-reply-author {
  font-weight: 700;
  color: #fff;
}


.comment-reply-badge {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: #a855f7;
  padding: 4px 8px;
  border-radius: 999px;
  line-height: 1;
}


.comment-reply-text {
  font-size: 15px;
  line-height: 1.7;
  color: #d6d9e3;
}

.comment-form-box p{
    margin-bottom:24px;
}

.comment-form-box.comment-validation-page{
    margin:36px auto 100px auto;
}

.comment-success{
    margin:60px 0;
}

/* ================= COMMENT FORM ================= */

.comment-form-box{
    max-width:760px;
    margin:36px auto 0 auto;
    background:rgba(255,255,255,0.05);
    border-radius:12px;
    padding:22px;
}

.comment-form-title{
    font-size:22px;
    margin-bottom:18px;
}

.comment-form{
    display:grid;
    gap:14px;
}

.comment-form input,
.comment-form textarea{
    width:100%;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:8px;
    padding:14px 14px;
    color:#fff;
    font-family:'Poppins',sans-serif;
    font-size:14px;
    outline:none;
}

.comment-form input::placeholder,
.comment-form textarea::placeholder{
    color:#9aa3b2;
}

.comment-form textarea{
    min-height:150px;
    resize:vertical;
}

.comment-form input:focus,
.comment-form textarea:focus{
    border-color:#a855f7;
}

.comment-submit{
    display:inline-block;
    align-self:flex-start;
    background:#7c3aed;
    color:#fff;
    border:none;
    border-radius:8px;
    padding:13px 22px;
    font-weight:600;
    font-size:14px;
    cursor:pointer;
    transition:0.25s;
}

.comment-submit:hover{
    background:#6d28d9;
}

/* ================= LIGHTBOX ================= */

.image-lightbox{
    position:fixed;
    inset:0;
    background:rgba(10,15,35,0.95);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
    padding:40px;
}

.image-lightbox img{
    width:auto;
    height:auto;
    max-width:95vw;
    max-height:95vh;
    object-fit:contain;
    border-radius:12px;
}

.image-lightbox.active{
    display:flex;
}

/* ================= EMAIL POPUP ================= */

.email-overlay{
    position:fixed;
    inset:0;
    background:rgba(7,10,20,0.78);
    backdrop-filter:blur(4px);
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    z-index:99999;
}

.email-overlay.active{
    display:flex;
}

.email-popup{
    position:relative;
    width:100%;
    max-width:520px;
    background:#111827;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:18px;
    padding:28px 24px 24px;
    box-shadow:0 20px 60px rgba(0,0,0,0.35);
    text-align:center;
}

.email-popup-close{
    position:absolute;
    top:14px;
    right:14px;
    width:38px;
    height:38px;
    border:none;
    border-radius:10px;
    background:rgba(255,255,255,0.06);
    color:#fff;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:0.2s;
}

.email-popup-close:hover{
    background:rgba(255,255,255,0.12);
}

.email-popup-badge{
    display:inline-block;
    margin-bottom:14px;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(124,58,237,0.16);
    color:#c4b5fd;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.4px;
}

.email-popup-title{
    font-size:28px;
    line-height:1.2;
    color:#fff;
    margin-bottom:14px;
}

.email-popup-text{
    font-size:16px;
    line-height:1.7;
    color:#d6d9e3;
    margin-bottom:20px;
}

.email-popup-form{
    display:grid;
    gap:12px;
}

.email-popup-form input{
    width:100%;
    padding:14px 16px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.10);
    background:rgba(255,255,255,0.05);
    color:#fff;
    font-family:'Poppins',sans-serif;
    font-size:14px;
    outline:none;
}

.email-popup-form input::placeholder{
    color:#9aa3b2;
}

.email-popup-form input:focus{
    border-color:#a855f7;
}

.email-popup-submit{
    width:100%;
    border:none;
    border-radius:10px;
    padding:14px 18px;
    background:#7c3aed;
    color:#fff;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    transition:0.2s;
}

.email-popup-submit:hover{
    background:#6d28d9;
}

.email-popup-note{
    margin-top:14px;
    font-size:12px;
    color:#9aa3b2;
    line-height:1.6;
}

body.popup-open{
    overflow:hidden;
}

.email-popup-success{
    margin-top:12px;
    padding:14px 16px;
    border-radius:10px;
    background:rgba(34,197,94,0.12);
    border:1px solid rgba(34,197,94,0.35);
    color:#dcfce7;
    font-size:14px;
    line-height:1.6;
}


/* ================= FORUM LISTING ================= */

.forum-hero{
    position:relative;
    min-height:50vh;
    padding:0 8%;
    display:flex;
    align-items:center;
    background:
        linear-gradient(to right, rgba(10,15,35,0.82) 0%, rgba(10,15,35,0.65) 45%, rgba(10,15,35,0.35) 100%),
        url('https://www.fmeurope.net/uploads/images/hero-coach-football-manager.png') center center / cover no-repeat;
}

.forum-hero-content{
    position:relative;
    z-index:2;
    max-width:760px;
}

.forum-title{
    font-size:52px;
    line-height:1.15;
    margin-bottom:18px;
}

.forum-title span{
    color:#a855f7;
}

.forum-subtitle{
    font-size:18px;
    line-height:1.75;
    color:#d6d9e3;
    margin-bottom:28px;
    max-width:680px;
}

.forum-create-button{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:#7c3aed;
    color:#fff;
    text-decoration:none;
    border-radius:10px;
    padding:14px 22px;
    font-weight:600;
    transition:0.25s;
}

.forum-create-button:hover{
    background:#6d28d9;
    transform:translateY(-2px);
}

.forum-page{
    max-width:1200px;
    margin:auto;
    padding-top:0;
}

.forum-shell{
    max-width:1100px;
    margin:0 auto;
}

.forum-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:34px;
}

.forum-create-button-desktop{
    flex-shrink:0;
}

.forum-topics-list{
    display:grid;
    gap:18px;
}

.forum-topic-card{
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:14px;
    overflow:hidden;
    transition:0.25s;
}

.forum-topic-card:hover{
    transform:translateY(-3px);
}

.forum-topic-link{
    display:block;
    text-decoration:none;
    color:inherit;
    padding:22px 24px;
}

.forum-topic-main{
    display:grid;
    gap:16px;
}

.forum-topic-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
}

.forum-topic-title{
    font-size:24px;
    line-height:1.3;
    color:#fff;
    max-width:760px;
}

.forum-topic-stats{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:8px;
    flex-shrink:0;
    min-width:145px;
}

.forum-topic-replies{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    color:#eef2ff;
    background:rgba(124,58,237,0.16);
    border:1px solid rgba(124,58,237,0.28);
    padding:8px 12px;
    border-radius:999px;
}

.forum-topic-date{
    font-size:13px;
    color:#9aa3b2;
}

.forum-topic-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}

.forum-topic-author{
    display:flex;
    align-items:center;
    gap:12px;
    color:#b8c0d4;
    font-size:14px;
}

.forum-topic-author img{
    width:44px;
    height:44px;
    object-fit:cover;
    border-radius:50%;
    display:block;
}

.forum-create-topic-box{
    max-width:760px;
    margin:60px auto 0 auto;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:16px;
    padding:26px;
}

.forum-form-title{
    font-size:28px;
    margin-bottom:10px;
    color:#fff;
}

.forum-form-intro{
    font-size:15px;
    line-height:1.7;
    color:#b8c0d4;
    margin-bottom:20px;
}

.forum-topic-form{
    display:grid;
    gap:14px;
}

.forum-topic-form input,
.forum-topic-form textarea{
    width:100%;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:10px;
    padding:14px 14px;
    color:#fff;
    font-family:'Poppins',sans-serif;
    font-size:14px;
    outline:none;
}

.forum-topic-form input::placeholder,
.forum-topic-form textarea::placeholder{
    color:#9aa3b2;
}

.forum-topic-form input:focus,
.forum-topic-form textarea:focus{
    border-color:#a855f7;
}

.forum-topic-form textarea{
    min-height:220px;
    resize:vertical;
}

.forum-editor-toolbar{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.forum-tool-button{
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:none;
    border-radius:10px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.08);
    color:#fff;
    cursor:pointer;
    transition:0.2s;
}

.forum-tool-button:hover{
    background:rgba(255,255,255,0.12);
    transform:translateY(-2px);
}

.forum-submit-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    align-self:flex-start;
    background:#7c3aed;
    color:#fff;
    border:none;
    border-radius:10px;
    padding:14px 24px;
    font-weight:600;
    font-size:14px;
    cursor:pointer;
    transition:0.25s;
}

.forum-submit-button:hover{
    background:#6d28d9;
}

.centrer{
    text-align:center;
}

.forum-message-content a{
    color:#a855f7;
    text-decoration:underline;
    text-underline-offset:3px;
    transition:0.2s;
}

.forum-message-content a:hover{
    text-decoration:none;
}

/* ================= FORUM TOPIC PAGE ================= */

.forum-topic-page{
    max-width:1200px;
    margin:auto;
    padding-top:0;
}

.forum-topic-shell{
    max-width:1100px;
    margin:0 auto;
}

.forum-topic-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:34px;
}

.forum-topic-header-aligned{
    max-width:100%;
}

.forum-topic-header-main{
    max-width:820px;
}

.forum-topic-page-title{
    font-size:48px;
    line-height:1.15;
    margin:0;
    color:#fff;
    max-width:900px;
}

.forum-reply-anchor{
    flex-shrink:0;
    align-self:flex-end;
}

.forum-messages-list{
    max-width:760px;
    margin:0 auto;
    display:grid;
    gap:18px;
}

.forum-message-card{
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:14px;
    padding:22px 24px;
}

.forum-message-meta{
    margin-bottom:18px;
    padding-bottom:16px;
    border-bottom:1px solid rgba(255,255,255,0.08);
}

.forum-message-author{
    display:flex;
    align-items:center;
    gap:14px;
}

.forum-message-author img{
    width:54px;
    height:54px;
    object-fit:cover;
    border-radius:50%;
    display:block;
}

.forum-message-author-info{
    display:grid;
    gap:4px;
}

.forum-message-pseudo{
    font-size:16px;
    font-weight:700;
    color:#fff;
}

.forum-message-date{
    font-size:13px;
    color:#9aa3b2;
}

.forum-message-content p{
    font-size:17px;
    line-height:1.8;
    color:#d6d9e3;
    margin-bottom:18px;
}

.forum-message-content p:last-child{
    margin-bottom:0;
}

.forum-reply-box{
    max-width:760px;
    margin:50px auto 0 auto;
}

.forum-topic-form textarea{
    min-height:220px;
    resize:vertical;
}

/* ================= BOUTIQUE PAGE ================= */

.shop-hero-image img{
    width:100%;
    max-width:1000px;
    height:auto;
    display:block;
    border-radius:14px;
}

.shop-list{
    max-width:1100px;
    margin:50px auto 0 auto;
    display:grid;
    gap:26px;
}

.shop-card{
    display:grid;
    grid-template-columns:320px 1fr; /* au lieu de 260px */
    gap:22px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:16px;
    padding:22px;
    align-items:center;
}

.shop-card-media{
    width:100%;
    height:220px;
    overflow:hidden;
    border-radius:12px;
}

.shop-card-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.shop-card-content{
    display:grid;
    grid-template-columns:1fr 250px;
    gap:22px;
    align-items:start;
}

.shop-card-tag{
    display:inline-block;
    margin-bottom:10px;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(124,58,237,0.16);
    color:#c4b5fd;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.4px;
}

.shop-card-title{
    font-size:28px;
    line-height:1.2;
    margin-bottom:12px;
    color:#fff;
}

.shop-card-description{
    font-size:16px;
    line-height:1.8;
    color:#d6d9e3;
}

.shop-buy-box{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:14px;
    padding:18px;
}

.shop-buy-top{
    display:grid;
    gap:10px;
    margin-bottom:16px;
}

.shop-shop-name{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    font-weight:600;
    color:#eef2ff;
}

.shop-price{
    font-size:30px;
    font-weight:700;
    line-height:1;
    color:#fff;
}

.shop-buy-button{
    display:inline-flex;
    width:100%;
    justify-content:center;
    align-items:center;
    text-decoration:none;
    background:#7c3aed;
    color:#fff;
    border-radius:10px;
    padding:14px 18px;
    font-size:14px;
    font-weight:700;
    transition:0.25s;
}

.shop-buy-button:hover{
    background:#6d28d9;
    transform:translateY(-2px);
}

.amazon-box .shop-shop-name i{
    font-size:16px;
}

.shop-note-box{
    max-width:760px;
    margin:50px auto 0 auto;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:14px;
    padding:22px;
}

.shop-note-title{
    font-size:24px;
    margin-bottom:14px;
    color:#fff;
}

.shop-note-box p{
    font-size:16px;
    line-height:1.8;
    color:#d6d9e3;
}

.shop-card-rating{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
}

.shop-rating-label{
    font-size:13px;
    color:#9aa3b2;
}

    .shop-pros-cons{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-top:16px;
}

.shop-pros-title,
.shop-cons-title{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    font-weight:700;
    margin-bottom:8px;
}

.shop-pros-title{
    color:#22c55e;
}

.shop-cons-title{
    color:#ef4444;
}

.shop-pros ul,
.shop-cons ul{
    padding-left:16px;
}

.shop-pros li,
.shop-cons li{
    font-size:14px;
    color:#d6d9e3;
    line-height:1.6;
    margin-bottom:6px;
}


/* ================= PANEL ADMIN ================= */
.admin-inline-group{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px 18px;
}

/* 🔥 fix radio + label inline */
.admin-inline-group label{
    display:inline;
    margin:0;
    cursor:pointer;
}

.admin-inline-group input[type="radio"]{
    margin-right:6px;
}

.admin-radio{
    display:flex;
    align-items:center;
    gap:6px;
    cursor:pointer;
    font-size:14px;
    color:#e2e8f0;
}

.admin-radio input{
    margin:0;
    accent-color:#a855f7;
}

.admin-header{
    margin-bottom:30px;
}

.admin-dashboard{
    padding:30px;
}

.admin-actions{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:16px;
    margin-bottom:30px;
}

.admin-card{
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px;
    background:#111827;
    color:#fff;
    border-radius:10px;
    text-decoration:none;
    font-weight:600;
    transition:0.2s;
}

.admin-card i{
    font-size:18px;
    color:#A855F7;
}

.admin-card:hover{
    background:#1f2937;
    transform:translateY(-2px);
}

.admin-section-title{
    margin-bottom:16px;
}

.admin-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.admin-list-item{
    padding:12px 14px;
    background:#0f172a;
    border-radius:8px;
    color:#fff;
    text-decoration:none;
    transition:0.2s;
}

.admin-list-item:hover{
    background:#1e293b;
    color:#A855F7;
}

/* ================= RESPONSIVE ================= */



@media (max-width:1400px){

.hero{
min-height:360px;
padding:60px 8%;
align-items:flex-start;
background-position:center 55%;
}

.hero-content{
max-width:560px;
}

.hero h1{
font-size:36px;
line-height:1.2;
margin-bottom:24px;
}

.hero-subtitle{
font-size:17px;
margin-bottom:30px;
}

.hero-buttons{
margin-top:5px;
}

.btn-primary{
padding:13px 24px;
font-size:16px;
}

 .page-hero{
        min-height:58vh;
        background-position:center 28%;
    }

.page-hero-story{
        min-height:58vh;
        background-position:center 32%;
    }

.forum-hero{
    min-height:360px;
    padding:60px 8%;
    align-items:flex-start;
    background-position:center, center 55%;
}
    
}
@media (min-width:1025px) and (max-width:1700px){
    .card img{
        width:98%;
        aspect-ratio:16/9;
        height:auto;
        margin:0 auto;
        object-fit:contain;
        object-position:center;
        display:block;
        background:transparent;
    }
}


/* ===== 1150 pour le menu ===== */
@media (max-width:1150px){

    .header-shell{
        gap:12px;
    }

    .logo{
        margin-right:32px;
    }

    header nav{
        gap:20px;
        margin-left:0;
    }

    header nav a{
        font-size:14px;
    }

    .deal-button{
        margin-left:18px;
        padding:9px 14px;
        font-size:12px;
        gap:6px;
        white-space:nowrap;
        flex-shrink:0;
    }

    .deal-button i{
        font-size:12px;
    }
}

/* ===== TABLET (≤1024px) ===== */
@media (max-width: 1024px){

    .articles{
        grid-template-columns:1fr;
    }

    .cards{
        grid-template-columns:repeat(2,1fr);
    }

    .cta-grid{
        grid-template-columns:1fr;
    }

    .footer-grid{
        grid-template-columns:1fr 1fr;
    }

    
    .hero h1{
        font-size:38px;
    }

     .article-image{
        flex:0 0 320px;
        padding-left:14px;
    }

    .article-image img{
        max-height:220px;
    }

    .article-content{
        padding:20px 22px;
    }

    .article-content h3{
        font-size:24px;
    }

    .article-content p{
        font-size:14px;
        line-height:1.6;
    }

      .article-title{
        font-size:40px;
    }

    .article-body{
        max-width:720px;
    }

    .article-body p,
    .article-body li{
        font-size:17px;
    }

    .article-body h2{
        font-size:28px;
    }
}

/* ===== 950 PX ===== */

@media (max-width:950px){

  header{
        padding:16px 8%;
    }

    .header-shell{
        gap:14px;
        flex-wrap:wrap;
    }

    .logo{
        margin-right:24px;
        font-size:24px;
    }

    header nav{
        display:none;
        flex-direction:column;
        width:100%;
        margin-top:18px;
        margin-left:0;
        gap:18px;
    }

    header nav.active{
        display:flex;
    }

    .menu-toggle{
        display:block;
        margin-left:auto;
    }

    .deal-button{
        margin-left:0;
        margin-top:0;
        padding:9px 13px;
        font-size:12px;
        gap:6px;
        flex-shrink:0;
        white-space:nowrap;
    }

    .deal-button i{
        font-size:12px;
    }

      .forum-highlight{
        padding:32px 6%;
    }

    .forum-highlight-shell{
        max-width:100%;
    }

    .forum-highlight-head h2{
        font-size:26px;
    }

    .forum-highlight-head p{
        font-size:14px;
    }

    .article-card-link{
        flex-direction:column;
    }

    .article-image{
        flex:none;
        width:100%;
        padding:16px 16px 0 16px;
        align-items:flex-start;
    }

    .article-image img{
        width:100%;
        max-height:none;
        height:auto;
        border-radius:10px;
    }

    .article-content{
        padding:18px 16px 20px 16px;
        justify-content:flex-start;
    }

    .article-content h3{
        font-size:22px;
    }

    .article-content p{
        font-size:14px;
        line-height:1.6;
        margin-bottom:12px;
    }

    .article-page{
        padding:24px 8% 60px 8%;
    }

    .article-title{
        font-size:34px;
    }

    .article-meta{
        font-size:13px;
        line-height:1.7;
    }

    .article-body{
        max-width:100%;
    }

    .article-body .article-intro{
        font-size:18px;
    }

    .article-body p,
    .article-body li{
        font-size:16px;
        line-height:1.8;
    }

    .article-body h2{
        font-size:26px;
    }

    .article-body h3{
        font-size:22px;
    }

     .article-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .article-table th,
    .article-table td {
        padding: 12px;
        font-size: 15px;
    }

    .related-grid{
        grid-template-columns:1fr 1fr;
    }

    .forum-title{
        font-size:42px;
    }

    .forum-heading{
        flex-direction:column;
        align-items:flex-start;
    }

    .forum-topic-top{
        flex-direction:column;
        gap:14px;
    }

    .forum-topic-stats{
        flex-direction:row;
        align-items:center;
        justify-content:flex-start;
        min-width:0;
    }

    .forum-topic-header{
        flex-direction:column;
        align-items:flex-start;
    }

    .forum-topic-page-title{
        font-size:34px;
    }

    .forum-reply-anchor{
        align-self:flex-start;
    }

    .shop-card-content{
        grid-template-columns:1fr;
    }

    .shop-card-title{
        font-size:24px;
    }

     .shop-card{
        grid-template-columns:280px 1fr;
    }

     .buy-row{
        flex-direction:column;
        gap:25px;
    }

    .buy-text{
        text-align:center;
    }
}

/* ===== MOBILE (≤600px) ===== */
@media (max-width: 600px){

    header{
        padding:14px 8%;
    }

    .header-shell{
        gap:10px;
    }

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

    .menu-toggle{
        font-size:24px;
        margin-left:auto;
    }

    .deal-button{
        order:3;
        width:auto;
        max-width:none;
        justify-content:center;
        align-self:flex-start;
        margin-left:0;
        margin-top:10px;
        padding:9px 12px;
        font-size:12px;
        gap:6px;
    }

    .deal-button i{
        font-size:12px;
    }

    header nav{
        margin-top:16px;
        gap:16px;
    }

    /* Cards */
    .cards{
        grid-template-columns:1fr;
    }

    /* Footer */
    .footer-grid{
        grid-template-columns:1fr;
    }

    /* Hero */
    .hero h1{
        font-size:28px;
    }

    .btn-primary{
    padding:12px 22px;
    font-size:15px;
}

    /* Newsletter */
    .newsletter-form{
        flex-direction:column;
        gap:12px;
        align-items:center;
    }

    .newsletter-form input{
        width:100%;
        max-width:320px;
        padding:12px;
        font-size:14px;
    }

    .newsletter-form button{
        width:100%;
        max-width:320px;
        padding:12px;
        font-size:14px;
    }

/* CTA */
.cta-box{
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
    padding:25px;
}

.cta-content{
    width:100%;
    gap:15px;
}

.cta-icon{
    width:56px;
    height:56px;
    font-size:22px;
    border-radius:12px;
}

.cta-box h3{
    font-size:18px;
}

.cta-box p{
    font-size:14px;
}

.cta-link{
    width:100%;
    text-align:center;
    padding:12px 16px;
}

/* Affichage derniers sujets forum */
   .forum-highlight{
        padding:26px 5%;
    }

    .forum-highlight-head{
        margin-bottom:12px;
    }

    .forum-highlight-head h2{
        font-size:22px;
        margin-bottom:8px;
    }

    .forum-highlight-head p{
        font-size:14px;
        line-height:1.6;
    }

    .forum-highlight-list{
        gap:7px;
        margin-top:12px;
    }

    .forum-highlight-item{
        gap:10px;
        padding:10px 12px;
        border-radius:10px;
    }

    .forum-highlight-icon{
        font-size:16px;
    }

    .forum-highlight-title{
        font-size:14px;
        line-height:1.4;
    }

    .forum-highlight-footer{
        margin-top:12px;
    }

    .forum-highlight-footer a{
        font-size:14px;
    }

/* Buy block */
.buy-game{
    padding:45px 8%;
}

.buy-title{
    font-size:24px;
    margin-bottom:20px;
}

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

.buy-image img{
    width:140px;
}

.buy-text{
    max-width:100%;
    text-align:center;
}

.buy-text p{
    font-size:14px;
    line-height:1.6;
    margin-bottom:18px;
}

.buy-button{
    width:100%;
    max-width:320px;
    text-align:center;
}

/* FAQ */
.faq{
    padding:45px 8%;
}

.faq-title{
    font-size:24px;
    margin-bottom:20px;
}

.faq-item{
    padding:18px;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

.faq-avatar img{
    width:52px;
    height:52px;
}

.faq-item h3{
    font-size:16px;
}

.faq-item p{
    font-size:14px;
    line-height:1.5;
}

.page-hero{
    min-height:360px;
    padding:50px 8%;
}

.page-title{
    font-size:30px;
    line-height:1.2;
    margin-bottom:16px;
}

.page-hero p{
    font-size:15px;
    line-height:1.6;
}

  .article-card{
        border-radius:14px;
        margin-bottom:22px;
    }

    .article-image{
        padding:14px 14px 0 14px;
    }

    .article-content{
        padding:16px 14px 18px 14px;
    }

    .article-badge{
        font-size:11px;
        padding:5px 9px;
        margin-bottom:10px;
    }

    .article-content h3{
        font-size:20px;
        line-height:1.25;
        margin-bottom:10px;
    }

    .article-content p{
        font-size:13px;
        margin-bottom:10px;
    }

    .article-meta .separator{
        margin:0 4px;
    }

     .article-page{
        padding:20px 8% 50px 8%;
    }

    .article-breadcrumb{
        font-size:12px;
        line-height:1.6;
        margin-bottom:18px;
    }

    .article-title{
        font-size:28px;
        line-height:1.2;
        margin-bottom:14px;
    }

    .article-badge{
        font-size:11px;
        padding:5px 9px;
    }

    .article-meta{
        font-size:12px;
        margin-bottom:18px;
    }

    .article-meta .separator{
        margin:0 5px;
    }

    .article-hero{
        margin-bottom:28px;
    }

    .article-hero img{
        border-radius:10px;
    }

    .article-body .article-intro{
        font-size:17px;
        margin-bottom:22px;
    }

    .article-body p,
    .article-body li{
        font-size:15px;
        line-height:1.75;
        margin-bottom:18px;
    }

    .article-body h2{
        font-size:23px;
        line-height:1.3;
        margin:42px 0 26px 0;
    }

    .article-body h3{
        font-size:20px;
        margin:24px 0 12px 0;
    }

    .article-highlight{
         padding:16px 16px;
         margin:22px 0;
    }

    .article-warning{
    margin:18px 0 28px 0;
    }

    .article-author-box{
        flex-direction:column;
        text-align:center;
        position:relative;
    }

      .article-table {
        font-size: 14px;
    }

    .article-table th,
    .article-table td {
        padding: 10px;
    }

    .related-grid{
        grid-template-columns:1fr;
    }

    .related-card img{
        height:180px;
    }

    .comments-title{
        font-size:22px;
        margin-bottom:18px;
    }

    .comment-item{
        flex-direction:column;
        align-items:flex-start;
        padding:16px;
    }

    .comment-avatar img{
        width:60px;
        height:62px;
    }

    .comment-text{
        font-size:14px;
        line-height:1.65;
    }

    .comment-form-box{
        padding:18px;
    }

    .comment-form-title{
        font-size:20px;
    }

    .comment-submit{
        width:100%;
        text-align:center;
    }

        .download-box{
        padding:20px 16px;
    }

    .download-rating-wrap{
        flex-direction:column;
        gap:8px;
    }

    .download-button{
        width:100%;
        min-width:0;
        font-size:16px;
        padding:15px 18px;
    }

    .install-box{
        padding:18px;
    }

    .install-title{
        font-size:21px;
    }

    .install-box p{
        font-size:15px;
    }

    .install-path{
        font-size:13px;
    }

     .email-popup{
        padding:24px 18px 20px;
        border-radius:16px;
    }

    .email-popup-title{
        font-size:23px;
    }

    .email-popup-text{
        font-size:15px;
    }

      .forum-hero{
        min-height:auto;
        padding:54px 8%;
    }

    .forum-title{
        font-size:32px;
    }

    .forum-subtitle{
        font-size:16px;
        margin-bottom:22px;
    }

    .forum-create-button{
        width:100%;
        justify-content:center;
    }

    .forum-topic-link{
        padding:18px 16px;
    }

    .forum-topic-title{
        font-size:20px;
    }

    .forum-topic-stats{
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
    }

    .forum-topic-author{
        font-size:13px;
    }

    .forum-topic-author img{
        width:40px;
        height:40px;
    }

    .forum-create-topic-box{
        padding:20px 16px;
        margin-top:46px;
    }

    .forum-form-title{
        font-size:24px;
    }

    .forum-submit-button{
        width:100%;
    }

     .forum-topic-page-title{
        font-size:28px;
        line-height:1.2;
    }

    .forum-message-card{
        padding:18px 16px;
    }

    .forum-message-author img{
        width:46px;
        height:46px;
    }

    .forum-message-content p{
        font-size:15px;
        line-height:1.75;
    }

        .shop-list{
        margin-top:36px;
        gap:20px;
    }

     .shop-card{
        grid-template-columns:1fr;
    }

    .shop-card-media{
        height:220px;
    }

    .shop-card-title{
        font-size:22px;
    }

    .shop-card-description{
        font-size:15px;
        line-height:1.75;
    }

    .shop-price{
        font-size:26px;
    }

    .shop-note-box{
        padding:18px;
    }

    .shop-note-title{
        font-size:21px;
    }

    .shop-note-box p{
        font-size:15px;
    }

    .shop-pros-cons{
    grid-template-columns:1fr;
}

}