/*
Theme Name: RageBait
Author: Toi
Description: Thème WordPress viral et moderne pour RageBait.fr
Version: 5.3
*/

/* ======= Reset basique ======= */
body, h1, h2, h3, p, ul, li, a { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Roboto', Arial, sans-serif; background:#fff; color:#222; line-height:1.6; }

/* ================= Header ================= */
header {
    background:#d62828;
    color:white;
    padding:15px 30px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:sticky;
    top:0;
    z-index:1000;
    box-shadow:0 2px 12px rgba(0,0,0,0.25);
}

header .logo img { height:80px; transition: transform 0.3s; }
header .logo img:hover { transform: scale(1.05); }

header nav a { margin:0 15px; font-weight:600; color:white; text-transform:uppercase; font-size:1em; }
header nav a:hover { color:#ff4d4d; }

header .logo .site-title {
    font-size: 1.5em;         /* Taille du slogan */
    color: #fff;              /* Blanc */
    font-weight: bold;
    display:block;
    line-height:1.2;
}

header .logo a {
    text-decoration: none;  /* Supprime le soulignement du lien */
    display:flex;
    align-items:center;
    gap:15px;
}

/* ================= Fil d’Ariane ================= */
.breadcrumbs {
    font-size:0.9em;
    margin:15px 0;
    color:#555;
}
.breadcrumbs a { color:#d62828; text-decoration:none; }
.breadcrumbs a:hover { color:#ff4d4d; }

/* ================= Section Titles ================= */
.section-title {
    font-size:1.9em;
    color:#d62828;
    margin-bottom:25px;
    text-transform: uppercase;
    border-bottom:2px solid #ff4d4d;
    padding-bottom:5px;
}

/* ================= Grids ================= */
.grid, .grid-circular, .video-grid {
    display:flex;
    flex-wrap:wrap;
    gap:25px;
    justify-content:center;
    margin-bottom:50px;
}

/* ======= Cartes ======= */
.card, .card-circle {
    background:white;
    border-radius:20px;
    overflow:hidden;
    transition: transform 0.4s, box-shadow 0.4s;
}

/* Buzz du jour : espacement entre texte et bouton */
.buzz-today .card-body p {
    margin-bottom: 15px; /* espace entre le texte et les boutons */
}

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

.card-thumb { width:100%; height:220px; object-fit:cover; border-bottom:4px solid #d62828; transition: transform 0.3s; }
.card-thumb:hover { transform: scale(1.03); }

.card-body { padding:18px; text-align:center; }
.card-body h3 { margin-bottom:12px; font-size:1.3em; color:#d62828; }

.card-circle { border-radius:50%; width:170px; height:170px; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; position:relative; box-shadow:0 6px 18px rgba(0,0,0,0.18); }
.circle-thumb { width:100%; height:100%; object-fit:cover; border-radius:50%; transition: transform 0.3s; }
.card-circle .card-body { position:absolute; bottom:10px; text-align:center; background:rgba(0,0,0,0.45); width:90%; border-radius:6px; padding:6px; color:white; }

.card-circle .card-body h3 {
    font-size: 1em; /* réduit la taille du titre dans le cercle */
    margin-bottom: 8px; /* petit espacement sous le titre */
    color: #d62828;
}


/* ======= Boutons ======= */
.btn-group { display:flex; gap:10px; margin-top:5px; justify-content:center; }
.btn-rage, .btn-read, .button { padding:10px 16px; border-radius:6px; font-weight:bold; border:none; cursor:pointer; transition: all 0.3s; }
.btn-rage { background:#ff4d4d; color:white; }
.btn-rage:hover { transform:scale(1.05); }
.btn-read { background:#d62828; color:white; }
.btn-read:hover { background:#ff4d4d; transform:scale(1.05); }

/* ======= Sidebar ======= */
.sidebar-viral {
    background:#fffafa;
    padding:25px;
    margin:20px;
    border-radius:20px;
    box-shadow:0 8px 25px rgba(0,0,0,0.15);
}
.sidebar-viral h3 {
    margin-bottom:15px;
    color:#d62828;
    font-size:1.15em;
    text-transform: uppercase;
    border-bottom:2px solid #ff4d4d;
    padding-bottom:5px;
}

/* Newsletter compacte */
.sidebar-viral form { display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.sidebar-viral form input[type="email"] { padding:8px; border-radius:6px; border:1px solid #ccc; font-size:0.95em; width:100%; box-sizing:border-box; }
.sidebar-viral form button { padding:8px; font-size:0.95em; border-radius:6px; background:#d62828; color:white; border:none; font-weight:bold; cursor:pointer; transition: all 0.3s; }
.sidebar-viral form button:hover { background:#ff4d4d; transform: scale(1.03); }

/* Top du Mois */
.sidebar-viral ul { list-style:none; padding-left:0; margin-bottom:20px; }
.sidebar-viral ul li { margin-bottom:10px; font-size:0.95em; }
.sidebar-viral ul li a { color:#222; text-decoration:none; display:block; padding:4px 6px; border-radius:6px; transition: all 0.3s; }
.sidebar-viral ul li a:hover { background:#d62828; color:white; transform: translateX(4px); }

/* Partage Social */
.sidebar-viral .social-buttons { display:flex; gap:10px; margin-top:10px; justify-content:center; }
.sidebar-viral .social-buttons .button { flex:1; padding:7px 0; border-radius:6px; background:#222; color:white; font-weight:bold; text-align:center; transition: all 0.3s; }
.sidebar-viral .social-buttons .button:hover { background:#d62828; transform: scale(1.05); }

/* ======= Articles recommandés ======= */
.recommended-articles .grid { margin-bottom:50px; }

/* Section À propos / Dangers du RageBait */
.about-ragebait {
    background:#f7f7f7;
    padding:40px 20px;
    margin:50px 0;
    border-radius:20px;
    text-align:center;
    box-shadow:0 8px 25px rgba(0,0,0,0.1);
}

.about-ragebait .about-container {
    max-width:900px;
    margin:0 auto;
}
.about-ragebait .section-title { font-size:2em; color:#d62828; margin-bottom:25px; }
.about-ragebait p { font-size:1.1em; line-height:1.8; color:#333; margin-bottom:15px; }


.hero-description {
    background: linear-gradient(135deg, #f5f5f5, #e0e0e0); /* dégradé gris clair */
    text-align: center;
    padding: 50px 20px;
    border-radius: 15px;
    margin: 30px auto;
    max-width: 1000px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
    font-family: 'Arial', sans-serif;
}
.hero-description h2 {
    font-size: 2em;
    color: #555; /* gris foncé pour contraste doux */
    margin-bottom: 15px;
}
.hero-description p {
    font-size: 1.1em;
    line-height: 1.6;
    color: #333;
}
.hero-description .highlight {
    font-weight: bold;
    color: #d62828; /* accent rouge pour les mots-clés */
}

/* Footer */
footer {
    background:#222;
    color:white;
    padding:40px 20px;
    text-align:center;
    border-top:4px solid #d62828;
}
footer .footer-social a { color:white; margin:0 10px; font-weight:bold; transition:0.3s; }
footer .footer-social a:hover { color:#ff4d4d; transform:scale(1.1); }

/* Container principal */
.contact-form-container {
    max-width: 600px;
    margin: 2em auto;
    padding: 2em;
    background: #f7f7f7; /* gris très clair */
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    font-family: 'Arial', sans-serif;
    color: #333;
}

/* Titre */
.contact-form-container h1 {
    text-align: center;
    margin-bottom: 1.5em;
    font-size: 2em;
    color: #d32f2f; /* rouge vif */
}

/* Labels */
.contact-form-container label {
    display: block;
    margin-bottom: 0.5em;
    font-weight: bold;
    color: #444;
}

/* Inputs et textarea */
.contact-form-container input,
.contact-form-container textarea {
    width: 100%;
    padding: 0.75em 1em;
    margin-bottom: 1.25em;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1em;
    transition: border 0.3s, box-shadow 0.3s;
}

.contact-form-container input:focus,
.contact-form-container textarea:focus {
    border-color: #d32f2f; /* accent rouge */
    box-shadow: 0 0 5px rgba(211,47,47,0.3);
    outline: none;
}

/* Bouton */
.contact-form-container button {
    display: block;
    width: 100%;
    padding: 0.75em;
    background: #d32f2f; /* rouge vif */
    color: #fff;
    font-size: 1.125em;
    font-weight: bold;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
}

.contact-form-container button:hover {
    background: #e53935; /* rouge plus clair au hover */
    transform: translateY(-2px);
}

/* Messages de succès et erreur */
.contact-form-container .success,
.contact-form-container .error {
    margin-top: 1em;
    padding: 0.75em 1em;
    border-radius: 8px;
    font-weight: bold;
    display: none;
}

.contact-form-container .success {
    background: #d4edda;
    color: #155724;
}

.contact-form-container .error {
    background: #f8d7da;
    color: #721c24;
}

/* Affichage des messages */
.contact-form-container .success.show,
.contact-form-container .error.show {
    display: block;
}

/* Responsive */
@media (max-width: 640px) {
    .contact-form-container {
        padding: 1.5em;
        margin: 1em;
    }
}


/* Page container */
.page-container { max-width:1100px; margin:50px auto; padding:0 20px; text-align:center; }
.page-container h1 { font-size:2.5em; margin-bottom:25px; color:#d62828; }
.page-container .content { font-size:1.1em; line-height:1.8; text-align:left; }

/* ===== Animations ===== */
@keyframes fadeInUp { from {opacity:0; transform:translateY(30px);} to {opacity:1; transform:translateY(0);} }
@keyframes rageShake { 0% { transform: translate(0,0) rotate(0deg); } 20% { transform: translate(-5px,0) rotate(-5deg); } 40% { transform: translate(5px,0) rotate(5deg); } 60% { transform: translate(-5px,0) rotate(-5deg); } 80% { transform: translate(5px,0) rotate(5deg); } 100% { transform: translate(0,0) rotate(0deg); } }
.rage-animate { animation: rageShake 0.6s ease; }

/* Pluie d’emojis */
.emoji-drop { position: fixed; top: -50px; pointer-events:none; z-index:9999; animation-name:drop; animation-timing-function:linear; animation-fill-mode:forwards; }
@keyframes drop { 0% { transform: translateY(0) rotate(0deg); opacity:1; } 100% { transform: translateY(100vh) rotate(360deg); opacity:0; } }

/* Responsive */
@media(max-width:1024px){ .card { flex:1 1 calc(50% - 20px); } .video-grid iframe { width:45%; } }
@media(max-width:768px){ .card { flex:1 1 100%; } .viral-sections { flex-direction:column; } .grid-circular { justify-content:center; } .video-grid iframe { width:100%; height:200px; } }

/* Supprimer les puces dans le menu */
nav .menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Liens du menu en blanc */
nav .menu a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s;
}

nav .menu a:hover {
    color: #ffdcdc; /* blanc légèrement rosé au survol */
}