/* brawlstars.help - FINAL & COMPLETE STYLESHEET */

/* --- Root Color Variables --- */
:root {
    --bg-light: #f9f7f2;
    --bg-dark: #0d1120;
    --card-dark: #1a2035;
    --text-light: #e0e5f0;
    --text-dark: #2c3e50;
    --text-medium-dark: #576574;
    --text-medium-light: #a0a8b5;
    --brawl-orange: #ff4500;
    --brawl-yellow: #fbc531;
    --brawl-blue: #007bff;
    --brawl-turquoise: #00cec9;
    --border-light: #dfe4ea;
    --border-dark: #303a5c;
}

/* --- Basic Reset & Global Body Styles --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.3s ease;
}

/* --- Typography --- */
h1, h2, h3 { line-height: 1.3; font-weight: 700; }
h1 { font-size: 3rem; }
h2 { font-size: 2.5rem; margin-bottom: 1.5rem; }
h3 { font-size: 1.5rem; margin-bottom: 1rem; }
p { font-size: 1.1rem; margin-bottom: 1.5rem; }
a { text-decoration: none; font-weight: 600; transition: color 0.3s ease; }
strong { font-weight: 600; }

/* --- Header --- */
header {
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-light);
    position: sticky; top: 0; z-index: 1000;
}
.logo a { font-size: 1.8rem; font-weight: bold; color: var(--brawl-blue); text-decoration: none; }
.logo img { max-height: 50px; width: auto; display: block; }
nav ul { list-style: none; display: flex; gap: 2rem; }
nav a { color: var(--text-dark); font-weight: 600; font-size: 1.1rem; text-decoration: none; }
nav a.active { color: var(--brawl-orange); }

/* --- Main Content Layout --- */
main { width: 100%; }
.content-wrapper {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem; /* Ajoute un peu d'espace sur les côtés sur mobile */
}

section {
    padding: 6rem 2rem;
    overflow: hidden;
}
.section-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4rem;
}
.section-wrapper.reverse { flex-direction: row-reverse; }
.text-content { flex: 1.2; min-width: 300px; }
.image-content { flex: 1; min-width: 300px; }
.image-content img { width: 100%; height: auto; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }

/* --- THEME-SPECIFIC STYLES --- */
.theme-light { background-color: var(--bg-light); }
.theme-light h1, .theme-light h2, .theme-light h3, .theme-light h4 { color: var(--text-dark); }
.theme-light h2 { color: var(--brawl-blue); }
.theme-light h3 { color: var(--brawl-orange); }
.theme-light p { color: var(--text-medium-dark); }
.theme-light strong { color: var(--text-dark); }
.theme-light a { color: var(--brawl-orange); }
.theme-light a:hover { color: var(--brawl-blue); }

.theme-dark { background-color: var(--bg-dark); }
.theme-dark h1, .theme-dark h2, .theme-dark h3, .theme-dark h4 { color: var(--text-light); }
.theme-dark h2 { color: var(--brawl-turquoise); }
.theme-dark h3 { color: var(--brawl-yellow); }
.theme-dark p { color: var(--text-medium-light); }
.theme-dark strong { color: var(--brawl-yellow); }
.theme-dark a { color: var(--brawl-orange); }
.theme-dark a:hover { color: var(--brawl-yellow); }

/* --- Buttons --- */
.cta-button {
    display: inline-block;
    background: transparent; /* Fond transparent */
    border: 3px solid var(--brawl-orange); /* Bordure colorée */
    color: var(--brawl-orange); /* Texte de la même couleur que la bordure */
    text-shadow: none;
    padding: calc(1rem - 3px) calc(2.5rem - 3px); /* Ajustement du padding pour compenser la bordure */
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    cursor: pointer;
    text-decoration: none;
}

.cta-button:hover {
    background-color: var(--brawl-orange); /* Le fond se remplit au survol */
    color: #fff; /* Le texte devient blanc au survol */
    transform: translateY(-3px);
}

/* --- Amélioration de la Lisibilité des Articles (Alignement Gauche) --- */
.post-content p {
    text-align: left;
}
/* --- Espacement pour le Contenu des Articles --- */
.post-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* --- FAQ Accordion --- */
#faq { text-align: center; }
.faq-container { max-width: 800px; margin: 2rem auto; text-align: left; }
.faq-item { border-radius: 8px; margin-bottom: 1rem; }
.faq-question { padding: 1.2rem 1.5rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 1.2rem; font-weight: 600; }
.faq-question span { font-size: 1.5rem; transition: transform 0.3s ease; }
.faq-answer { padding: 0 1.5rem; max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out, padding 0.4s ease-out; }
.faq-answer p { padding-bottom: 1.5rem; margin-bottom: 0; }
.faq-item.active .faq-answer { max-height: 250px; padding-top: 1rem; }
.faq-item.active .faq-question span { transform: rotate(45deg); }
.theme-light .faq-item { background-color: #fff; border: 1px solid var(--border-light); }
.theme-light .faq-question { color: var(--text-dark); }
.theme-light .faq-question span { color: var(--brawl-blue); }
.theme-light .faq-item.active .faq-question { color: var(--brawl-orange); }
.theme-dark .faq-item { background-color: var(--card-dark); border: 1px solid var(--border-dark); }
.theme-dark .faq-question { color: var(--text-light); }
.theme-dark .faq-question span { color: var(--brawl-turquoise); }
.theme-dark .faq-item.active .faq-question { color: var(--brawl-yellow); }

/* --- ANIMATIONS & INTERACTIONS --- */
.animate-on-scroll { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); }
.logo a, nav a { transition: transform 0.3s ease, color 0.3s ease; }
.logo a:hover { transform: scale(1.05); }
nav a:hover { transform: translateY(-2px); color: var(--brawl-orange); }
.image-content img { transition: transform 0.4s ease-out, box-shadow 0.4s ease-out; }
.section-wrapper:hover .image-content img { transform: scale(1.03); box-shadow: 0 15px 35px rgba(0,0,0,0.15); }

/* --- Footer --- */
footer { padding: 4rem 2rem; text-align: center; }
.theme-light footer { background-color: var(--bg-soft-gray); color: var(--text-medium-dark); }
.theme-dark footer { background-color: #000; color: var(--text-medium-light); }
footer nav a { margin: 0 0.5rem; font-weight: 500; }


/* --- Centrage des Images Full-Width --- */
.full-width-image {
    display: block; /* Important pour appliquer les marges auto */
    margin-left: auto;
    margin-right: auto;
    max-width: 100%; /* S'assurer qu'elle ne déborde pas */
    height: auto;    /* Maintenir les proportions */
    border-radius: 15px; /* Pour l'esthétique */
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); /* Pour la profondeur */
    margin-top: 3rem; /* Espace au-dessus */
    margin-bottom: 3rem; /* Espace en dessous */
}



/* --- Section "Comment ça marche" (Version Améliorée & Animée) --- */
/* NOUVEAU CODE POUR UNE GRILLE 2x2 */
.steps-container {
    display: grid; /* On passe de flex à grid pour un contrôle parfait */
    grid-template-columns: repeat(2, 1fr); /* Crée 2 colonnes de taille égale */
    gap: 2rem; /* Garde l'espace entre les cartes */
    max-width: 800px; /* On définit une largeur max pour que la grille soit bien centrée */
    margin: 0 auto; /* Centre la grille dans la section */
}

.step-card {
    background-color: #fff;
    border: 1px solid var(--border-light);
    border-radius: 15px;
    padding: 2.5rem 2rem; /* Un peu plus d'espace */
    text-align: center;
    flex: 1;
    min-width: 280px;
    max-width: 320px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
    /* Transition plus douce pour tous les effets */
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}

.step-card:hover {
    transform: translateY(-10px);
    /* Ombre colorée et plus prononcée pour un effet "vivant" */
    box-shadow: 0 15px 35px rgba(0, 123, 255, 0.15); /* Utilise la couleur --brawl-blue */
}

.step-number {
    width: 60px;
    height: 60px;
    background-image: linear-gradient(45deg, var(--brawl-orange), var(--brawl-yellow));
    color: #fff;
    font-size: 2rem;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem auto;
    box-shadow: 0 5px 15px rgba(255, 69, 0, 0.3);
    /* Animation du numéro au survol de la carte */
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Transition avec effet "ressort" */
}

/* Fait grossir le numéro quand on survole la carte parente */
.step-card:hover .step-number {
    transform: scale(1.15);
}

.step-card h3 {
    font-size: 1.4rem;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.step-card p {
    font-size: 1rem;
    color: var(--text-medium-dark);
    line-height: 1.6;
}


/* --- Styles pour la Page Index du Blog --- */
.blog-intro { text-align: center; padding: 4rem 1rem; }
.blog-intro h1 { font-size: 3rem; color: var(--text-dark); }
.blog-intro p { font-size: 1.2rem; max-width: 600px; margin: 1rem auto 0 auto; color: var(--text-medium-dark); }

.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem 4rem 1rem;
}
.post-card {
    background-color: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    border: 1px solid var(--border-light);
}
.post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 123, 255, 0.15);
}
.post-card-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}
.post-card-content {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.post-card-content h2 {
    font-size: 1.4rem;
    margin-top: 0;
    color: var(--brawl-blue);
}
.post-card-content p {
    color: var(--text-medium-dark);
    flex-grow: 1;
    font-size: 1rem;
}
.read-more-btn {
    display: inline-block;
    margin-top: 1rem;
    color: var(--brawl-orange);
    font-weight: bold;
    align-self: flex-start;
}
.read-more-btn:hover {
    color: var(--brawl-blue);
}

/* --- Styles Spécifiques pour la Page About Us --- */
.about-intro {
    text-align: center;
    padding-top: 4rem;
    padding-bottom: 2rem;
}
.about-intro h1 {
    font-size: 3rem;
}
.about-intro p {
    font-size: 1.2rem;
    max-width: 700px;
    margin: 1rem auto 0 auto;
}
.values-list {
    list-style: none;
    padding: 0;
}
.values-list li {
    margin-bottom: 1.5rem;
}
.values-list h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.values-list .icon {
    color: var(--brawl-orange);
    font-size: 1.5rem;
    font-weight: bold;
}
.mission-box {
    background-color: var(--bg-soft-gray);
    padding: 3rem;
    border-radius: 10px;
    text-align: center;
    margin-top: 2rem;
}


/* --- Styles Spécifiques pour la Page Contact --- */
.contact-intro {
    text-align: center;
    padding-top: 4rem;
    padding-bottom: 2rem;
}
.contact-intro h1 {
    font-size: 3rem;
}
.contact-intro p {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 1rem auto 0 auto;
}
.contact-info {
    margin-top: 3rem;
    text-align: center;
}
.contact-info h3 {
    margin-top: 2rem;
}
.contact-info p {
    margin-top: 0.5rem;
}
.contact-info a {
    font-size: 1.2rem;
}


/* --- Styles pour les Pages de Contenu Standard (About, Contact, Légal) --- */
.page-container {
    padding: 4rem 0;
}

/* --- Styles pour les Pages d'Article de Blog --- */
.post-container {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.post-header { 
    text-align: center; 
    margin-bottom: 2rem; 
}
.post-featured-image { 
    width: 100%; 
    height: auto; 
    border-radius: 15px; 
    margin-bottom: 3rem; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.post-content h2 { 
    margin-top: 2.5rem; 
}
.post-content p { 
    font-size: 1.1rem; 
    line-height: 1.8; 
}
.back-to-blog { 
    display: inline-block; 
    margin-top: 3rem; 
    font-weight: bold; 
}



/* --- RESPONSIVE DESIGN & MOBILE NAVIGATION --- */

/* Styles pour le bouton Hamburger */
.mobile-nav-toggle {
    display: none; /* Caché par défaut sur grand écran */
    position: absolute;
    z-index: 2000;
    right: 1.5rem;
    top: 2rem;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.mobile-nav-toggle .sr-only { /* Pour l'accessibilité */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/* Styles pour les 3 barres de l'icône */
.mobile-nav-toggle::before,
.mobile-nav-toggle::after,
.mobile-nav-toggle span {
    content: '';
    display: block;
    width: 25px;
    height: 3px;
    background: var(--text-dark);
    margin: 5px 0;
    transition: transform 0.3s ease-out, opacity 0.2s ease-out;
}

/* Animation de l'icône en croix quand le menu est ouvert */
.mobile-nav-toggle[aria-expanded="true"]::before {
    transform: translateY(8px) rotate(45deg);
}
.mobile-nav-toggle[aria-expanded="true"] span {
    opacity: 0;
}
.mobile-nav-toggle[aria-expanded="true"]::after {
    transform: translateY(-8px) rotate(-45deg);
}


/* Breakpoint pour Tablettes et Mobiles */
@media (max-width: 768px) {
    h1 { font-size: 2.2rem; }
    h2 { font-size: 2rem; }
    
    header {
        position: relative; /* Nécessaire pour le positionnement du bouton */
    }
	
	/* Dans @media (max-width: 768px) */
.steps-container {
    grid-template-columns: 1fr; /* Sur mobile, on passe à 1 seule colonne */
}

/* NOUVEAU CODE CORRIGÉ */
.primary-navigation {
    gap: 2rem;
    position: fixed;
    z-index: 1000;
    inset: 0 0 0 30%;
    
    list-style: none;
    padding: min(20vh, 10rem) 2rem;
    margin: 0;
	min-height: 100vh; /* Assure que le menu fait toujours 100% de la hauteur de l'écran */
    
    flex-direction: column;
    
    /* === LA CORRECTION EST ICI === */
    /* NOUVELLE LIGNE */
background: var(--bg-dark); /* Fond solide bleu nuit, 100% opaque */
    backdrop-filter: blur(1rem); /* On garde l'effet de flou qui est très pro */
    
    transform: translateX(100%);
    transition: transform 350ms ease-out;
}

/* On ajoute cette règle pour que les liens soient lisibles sur le nouveau fond sombre */
.primary-navigation a {
    color: var(--text-light);
}
    
    .primary-navigation[data-visible="true"] {
        transform: translateX(0%); /* Apparaît quand on clique */
    }
    
    .mobile-nav-toggle {
        display: block;
    }
    
    nav {
        /* On retire la navigation du flux normal */
        position: static;
    }
    
    .section-wrapper,
    .section-wrapper.reverse {
        flex-direction: column;
        gap: 2.5rem;
    }
    
    footer {
        padding: 3rem 1rem;
    }
}

/* Breakpoint pour Petits Mobiles */
@media (max-width: 480px) {
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.6rem; }

    section {
        padding: 4rem 1rem;
    }
}
}