/* =========================================================
   MINDBATTLE — STYLE CSS COMPLET
   Design : Moderne • Sombre • Violet • Professionnel
========================================================= */


/* =========================================================
   1. RESET
========================================================= */

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


html {
    scroll-behavior: smooth;
}


body {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background:
        radial-gradient(
            circle at 20% 10%,
            rgba(124, 58, 237, 0.15),
            transparent 35%
        ),

        radial-gradient(
            circle at 80% 30%,
            rgba(139, 92, 246, 0.10),
            transparent 35%
        ),

        #070a12;

    color: #f8fafc;

    min-height: 100vh;

    line-height: 1.6;

    overflow-x: hidden;
}


a {
    color: inherit;

    text-decoration: none;
}


button,
input,
textarea {
    font-family: inherit;
}


button {
    cursor: pointer;
}


img {
    max-width: 100%;
    display: block;
}


/* =========================================================
   2. VARIABLES
========================================================= */

:root {

    --primary:
        #7c3aed;

    --primary-light:
        #8b5cf6;

    --primary-dark:
        #5b21b6;

    --purple:
        #9333ea;

    --green:
        #22c55e;

    --red:
        #ef4444;

    --orange:
        #f97316;

    --dark:
        #070a12;

    --dark-card:
        #0d101a;

    --dark-card-2:
        #111522;

    --border:
        rgba(255, 255, 255, 0.08);

    --text:
        #f8fafc;

    --muted:
        #94a3b8;

    --radius:
        18px;

    --shadow:
        0 20px 60px
        rgba(0, 0, 0, 0.35);

}


/* =========================================================
   3. NAVBAR
========================================================= */

.navbar {

    width: 100%;

    min-height: 76px;

    padding:
        0 6%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    position: sticky;

    top: 0;

    z-index: 1000;

    background:
        rgba(7, 10, 18, 0.88);

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);

    border-bottom:
        1px solid var(--border);

}


/* LOGO */

.logo {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 21px;

    font-weight: 800;

    white-space: nowrap;

}


.logo-icon {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--purple)
        );

    border-radius: 13px;

    box-shadow:
        0 8px 25px
        rgba(124, 58, 237, 0.35);

}


.logo-text {

    color: white;

}


.logo-text span {

    color:
        var(--primary-light);

}


/* MENU */

.main-nav {

    display: flex;

    align-items: center;

    gap: 6px;

}


.nav-link {

    padding:
        10px 14px;

    color:
        var(--muted);

    font-size: 14px;

    font-weight: 600;

    border-radius: 10px;

    transition:
        0.25s ease;

}


.nav-link:hover {

    color: white;

    background:
        rgba(124, 58, 237, 0.12);

}


.nav-link.active {

    color: white;

    background:
        rgba(124, 58, 237, 0.18);

}


/* ACTIONS */

.nav-actions {

    display: flex;

    align-items: center;

    gap: 10px;

}


.login-btn {

    padding:
        10px 16px;

    color:
        var(--muted);

    font-size: 14px;

    font-weight: 600;

}


.login-btn:hover {

    color: white;

}


.register-btn,
.create-debate-btn {

    padding:
        11px 18px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--purple)
        );

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius: 11px;

    color: white;

    font-size: 14px;

    font-weight: 700;

    transition:
        0.25s ease;

    box-shadow:
        0 8px 25px
        rgba(124, 58, 237, 0.25);

}


.register-btn:hover,
.create-debate-btn:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 35px
        rgba(124, 58, 237, 0.4);

}


/* =========================================================
   4. HERO
========================================================= */

.hero-section {

    min-height:
        680px;

    max-width:
        1300px;

    margin:
        auto;

    padding:
        100px 6%;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    align-items:
        center;

    gap:
        70px;

}


.hero-content {

    max-width:
        650px;

}


.hero-badge,
.section-badge {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        7px 13px;

    border:
        1px solid
        rgba(139, 92, 246, 0.25);

    background:
        rgba(124, 58, 237, 0.10);

    border-radius:
        100px;

    color:
        #c4b5fd;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        1px;

}


.hero-content h1 {

    margin-top:
        25px;

    font-size:
        clamp(48px, 7vw, 88px);

    line-height:
        0.98;

    letter-spacing:
        -4px;

}


.hero-content h1 span {

    display:
        block;

    background:
        linear-gradient(
            135deg,
            #a78bfa,
            #c084fc,
            #7c3aed
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


.hero-content > p {

    margin-top:
        28px;

    max-width:
        570px;

    color:
        var(--muted);

    font-size:
        17px;

}


.hero-actions {

    display:
        flex;

    gap:
        12px;

    margin-top:
        35px;

    flex-wrap:
        wrap;

}


.hero-btn {

    padding:
        14px 22px;

    border-radius:
        12px;

    font-weight:
        700;

    transition:
        0.25s ease;

}


.hero-btn.primary {

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--purple)
        );

    box-shadow:
        0 10px 30px
        rgba(124, 58, 237, 0.3);

}


.hero-btn.secondary {

    border:
        1px solid
        var(--border);

    background:
        rgba(255,255,255,0.04);

}


.hero-btn:hover {

    transform:
        translateY(-3px);

}


/* =========================================================
   5. HERO BATTLE PREVIEW
========================================================= */

.hero-visual {

    display:
        flex;

    justify-content:
        center;

}


.battle-preview {

    width:
        100%;

    max-width:
        500px;

    padding:
        30px;

    background:
        linear-gradient(
            145deg,
            rgba(17, 21, 34, 0.95),
            rgba(13, 16, 26, 0.95)
        );

    border:
        1px solid
        var(--border);

    border-radius:
        25px;

    box-shadow:
        var(--shadow);

    transform:
        rotate(2deg);

    transition:
        0.4s ease;

}


.battle-preview:hover {

    transform:
        rotate(0deg)
        translateY(-8px);

}


.preview-top {

    display:
        flex;

    justify-content:
        space-between;

    color:
        var(--muted);

    font-size:
        12px;

}


.preview-top span:last-child {

    color:
        #fb7185;

    font-weight:
        800;

}


.battle-preview h3 {

    margin:
        25px 0;

    font-size:
        25px;

    line-height:
        1.25;

}


.preview-side {

    margin-top:
        20px;

}


.side-header {

    display:
        flex;

    justify-content:
        space-between;

    margin-bottom:
        8px;

}


.progress {

    height:
        8px;

    background:
        rgba(255,255,255,0.07);

    border-radius:
        100px;

    overflow:
        hidden;

}


.progress-fill {

    height:
        100%;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            #c084fc
        );

    border-radius:
        100px;

}


.preview-btn {

    display:
        block;

    margin-top:
        25px;

    padding:
        13px;

    text-align:
        center;

    background:
        rgba(124,58,237,0.12);

    border-radius:
        10px;

    color:
        #c4b5fd;

    font-weight:
        700;

}


/* =========================================================
   6. STATS
========================================================= */

.stats-section {

    padding:
        20px 6% 80px;

}


.stats-grid {

    max-width:
        1200px;

    margin:
        auto;

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        15px;

}


.stat-card {

    padding:
        25px;

    background:
        rgba(255,255,255,0.025);

    border:
        1px solid
        var(--border);

    border-radius:
        16px;

    text-align:
        center;

    transition:
        0.25s ease;

}


.stat-card:hover {

    transform:
        translateY(-5px);

    background:
        rgba(124,58,237,0.07);

}


.stat-icon {

    display:
        block;

    font-size:
        25px;

    margin-bottom:
        10px;

}


.stat-card strong {

    display:
        block;

    font-size:
        26px;

}


.stat-card > span:last-child {

    color:
        var(--muted);

    font-size:
        13px;

}


/* =========================================================
   7. SECTIONS
========================================================= */

.home-section,
.categories-section,
.how-section {

    max-width:
        1200px;

    margin:
        auto;

    padding:
        90px 6%;

}


.section-header {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    gap:
        30px;

    margin-bottom:
        40px;

}


.section-header h2 {

    margin-top:
        14px;

    font-size:
        36px;

}


.section-header p {

    margin-top:
        8px;

    color:
        var(--muted);

}


.section-header.center {

    display:
        block;

    text-align:
        center;

}


.view-all {

    color:
        #c4b5fd;

    font-weight:
        700;

}


/* =========================================================
   8. DEBATE CARDS
========================================================= */

.home-stories-grid,
.debates-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        20px;

}


.home-debate-card,
.debate-explore-card {

    display:
        flex;

    flex-direction:
        column;

    padding:
        25px;

    background:
        linear-gradient(
            145deg,
            rgba(17,21,34,0.9),
            rgba(13,16,26,0.9)
        );

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius);

    transition:
        0.3s ease;

}


.home-debate-card:hover,
.debate-explore-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(139,92,246,0.35);

    box-shadow:
        0 20px 50px
        rgba(0,0,0,0.25);

}


.card-top,
.explore-card-top {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        10px;

}


.category,
.category-tag {

    color:
        #c4b5fd;

    font-size:
        12px;

    font-weight:
        700;

}


.hot,
.status-tag {

    padding:
        4px 8px;

    border-radius:
        6px;

    background:
        rgba(124,58,237,0.12);

    color:
        #c4b5fd;

    font-size:
        10px;

    font-weight:
        800;

}


.home-debate-card h3,
.debate-explore-card h3 {

    margin:
        22px 0 12px;

    font-size:
        20px;

    line-height:
        1.35;

}


.home-debate-card p,
.debate-explore-card p {

    color:
        var(--muted);

    font-size:
        14px;

}


.card-footer,
.explore-card-info {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    margin-top:
        auto;

    padding-top:
        25px;

    color:
        var(--muted);

    font-size:
        12px;

}


.card-footer a,
.debate-card-btn {

    color:
        #a78bfa;

    font-weight:
        700;

}


/* =========================================================
   9. CATÉGORIES
========================================================= */

.categories-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        15px;

    margin-top:
        40px;

}


.category-card {

    padding:
        25px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        8px;

    background:
        rgba(255,255,255,0.025);

    border:
        1px solid
        var(--border);

    border-radius:
        16px;

    transition:
        0.25s ease;

}


.category-card:hover {

    transform:
        translateY(-5px);

    background:
        rgba(124,58,237,0.10);

}


.category-card span {

    font-size:
        32px;

}


.category-card small {

    color:
        var(--muted);

}


/* =========================================================
   10. HOW IT WORKS
========================================================= */

.steps-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        20px;

    margin-top:
        45px;

}


.step-card {

    position:
        relative;

    padding:
        30px;

    background:
        rgba(255,255,255,0.025);

    border:
        1px solid
        var(--border);

    border-radius:
        18px;

}


.step-number {

    position:
        absolute;

    top:
        20px;

    right:
        20px;

    color:
        rgba(139,92,246,0.25);

    font-size:
        30px;

    font-weight:
        900;

}


.step-icon {

    font-size:
        35px;

    margin-bottom:
        20px;

}


.step-card h3 {

    margin-bottom:
        10px;

}


.step-card p {

    color:
        var(--muted);

    font-size:
        14px;

}


/* =========================================================
   11. CTA
========================================================= */

.cta-section {

    max-width:
        1100px;

    margin:
        70px auto 100px;

    padding:
        80px 30px;

    text-align:
        center;

    background:
        radial-gradient(
            circle at center,
            rgba(124,58,237,0.22),
            transparent 65%
        );

    border:
        1px solid
        rgba(124,58,237,0.2);

    border-radius:
        30px;

}


.cta-content h2 {

    margin:
        20px 0 12px;

    font-size:
        42px;

}


.cta-content p {

    color:
        var(--muted);

}


.cta-actions {

    display:
        flex;

    justify-content:
        center;

    gap:
        12px;

    margin-top:
        30px;

}


/* =========================================================
   12. DEBATES PAGE
========================================================= */

.debates-hero {

    padding:
        100px 6%;

    text-align:
        center;

    background:
        radial-gradient(
            circle at center,
            rgba(124,58,237,0.15),
            transparent 60%
        );

}


.debates-hero h1 {

    margin:
        20px 0 10px;

    font-size:
        52px;

}


.debates-hero p {

    color:
        var(--muted);

}


.debates-search {

    max-width:
        700px;

    margin:
        35px auto 0;

    display:
        flex;

    align-items:
        center;

    padding:
        6px;

    background:
        var(--dark-card);

    border:
        1px solid
        var(--border);

    border-radius:
        14px;

}


.debates-search span {

    padding:
        0 12px;

}


.debates-search input {

    flex:
        1;

    min-width:
        0;

    padding:
        14px 5px;

    border:
        none;

    outline:
        none;

    background:
        transparent;

    color:
        white;

}


.debates-search button {

    padding:
        13px 20px;

    border:
        none;

    border-radius:
        10px;

    color:
        white;

    font-weight:
        700;

    background:
        var(--primary);

}


.debates-section {

    max-width:
        1200px;

    margin:
        auto;

    padding:
        60px 6% 100px;

}


.category-filter {

    display:
        flex;

    gap:
        8px;

    flex-wrap:
        wrap;

    margin-bottom:
        50px;

}


.filter-btn {

    padding:
        10px 15px;

    background:
        rgba(255,255,255,0.03);

    border:
        1px solid
        var(--border);

    color:
        var(--muted);

    border-radius:
        9px;

}


.filter-btn.active,
.filter-btn:hover {

    color:
        white;

    background:
        var(--primary);

}


.debates-results-header {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    margin-bottom:
        30px;

}


.debates-results-header h2 {

    font-size:
        30px;

}


.debates-results-header p {

    color:
        var(--muted);

    font-size:
        13px;

}


/* =========================================================
   13. DEBATE DETAIL PAGE
========================================================= */

.debate-page {

    max-width:
        1150px;

    margin:
        auto;

    padding:
        60px 6% 100px;

}


.back-link {

    display:
        inline-block;

    margin-bottom:
        35px;

    color:
        #a78bfa;

    font-weight:
        700;

}


.debate-detail-header {

    text-align:
        center;

}


.debate-detail-meta {

    display:
        flex;

    justify-content:
        center;

    gap:
        10px;

    flex-wrap:
        wrap;

}


.debate-detail-header h1 {

    max-width:
        850px;

    margin:
        25px auto;

    font-size:
        clamp(35px, 5vw, 60px);

    line-height:
        1.1;

}


.debate-author {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        12px;

    color:
        var(--muted);

}


.author-avatar,
.comment-avatar {

    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--purple)
        );

    color:
        white;

    font-weight:
        800;

}


.debate-author a {

    display:
        block;

    color:
        #c4b5fd;

    font-weight:
        700;

}


/* =========================================================
   14. BATTLE SECTION
========================================================= */

.battle-section {

    display:
        grid;

    grid-template-columns:
        1fr 100px 1fr;

    align-items:
        center;

    gap:
        20px;

    margin-top:
        70px;

}


.argument-card {

    min-height:
        350px;

    padding:
        35px;

    display:
        flex;

    flex-direction:
        column;

    background:
        var(--dark-card);

    border:
        1px solid
        var(--border);

    border-radius:
        25px;

}


.argument-for {

    border-color:
        rgba(34,197,94,0.25);

}


.argument-against {

    border-color:
        rgba(239,68,68,0.25);

}


.argument-icon {

    font-size:
        35px;

}


.argument-header {

    margin:
        15px 0;

}


.argument-header span {

    color:
        var(--muted);

    font-size:
        11px;

    font-weight:
        800;

}


.argument-header h2 {

    font-size:
        35px;

}


.argument-card p {

    color:
        var(--muted);

    font-size:
        15px;

}


.vote-button {

    margin-top:
        auto;

    padding:
        15px;

    border:
        none;

    border-radius:
        12px;

    color:
        white;

    font-weight:
        800;

    transition:
        0.25s ease;

}


.vote-for {

    background:
        linear-gradient(
            135deg,
            #16a34a,
            #22c55e
        );

}


.vote-against {

    background:
        linear-gradient(
            135deg,
            #dc2626,
            #ef4444
        );

}


.vote-button:hover:not(:disabled) {

    transform:
        translateY(-3px);

}


.vote-button:disabled {

    opacity:
        0.6;

    cursor:
        not-allowed;

}


.vs-container {

    text-align:
        center;

}


.vs-circle {

    width:
        65px;

    height:
        65px;

    margin:
        auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--purple)
        );

    font-weight:
        900;

    box-shadow:
        0 10px 30px
        rgba(124,58,237,0.35);

}


.vs-container span {

    display:
        block;

    margin-top:
        10px;

    color:
        var(--muted);

    font-size:
        9px;

    font-weight:
        800;

}


/* =========================================================
   15. SCORE
========================================================= */

.battle-score {

    margin-top:
        30px;

    padding:
        30px;

    background:
        var(--dark-card);

    border:
        1px solid
        var(--border);

    border-radius:
        20px;

}


.score-header {

    display:
        flex;

    justify-content:
        space-between;

    color:
        var(--muted);

    font-size:
        13px;

}


.score-header strong {

    color:
        white;

}


.score-percentages {

    display:
        flex;

    justify-content:
        space-around;

    text-align:
        center;

    margin:
        30px 0;

}


.score-percentages strong {

    display:
        block;

    font-size:
        35px;

}


.score-percentages span {

    color:
        var(--muted);

    font-size:
        12px;

}


.score-bar {

    display:
        flex;

    height:
        15px;

    overflow:
        hidden;

    border-radius:
        100px;

    background:
        #ef4444;

}


.score-for {

    background:
        #22c55e;

    transition:
        width 0.5s ease;

}


.score-against {

    background:
        #ef4444;

    transition:
        width 0.5s ease;

}


/* =========================================================
   16. COMMENTS
========================================================= */

.comments-section {

    margin-top:
        80px;

}


.comments-header {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    margin-bottom:
        30px;

}


.comments-header h2 {

    margin-top:
        15px;

}


.comments-header p {

    color:
        var(--muted);

}


.comments-header > strong {

    color:
        #a78bfa;

}


.comment-form {

    display:
        flex;

    gap:
        15px;

    padding:
        20px;

    background:
        var(--dark-card);

    border:
        1px solid
        var(--border);

    border-radius:
        18px;

}


.comment-input-area {

    flex:
        1;

}


.comment-input-area textarea {

    width:
        100%;

    min-height:
        100px;

    padding:
        15px;

    resize:
        vertical;

    background:
        rgba(255,255,255,0.03);

    border:
        1px solid
        var(--border);

    border-radius:
        12px;

    outline:
        none;

    color:
        white;

}


.comment-input-area textarea:focus {

    border-color:
        var(--primary);

}


.comment-form-footer {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    margin-top:
        10px;

}


.comment-form-footer span {

    color:
        var(--muted);

    font-size:
        12px;

}


.comment-form-footer button {

    padding:
        11px 18px;

    border:
        none;

    border-radius:
        10px;

    background:
        var(--primary);

    color:
        white;

    font-weight:
        700;

}


.comments-list {

    margin-top:
        25px;

}


.comment-card {

    display:
        flex;

    gap:
        15px;

    padding:
        25px 0;

    border-bottom:
        1px solid
        var(--border);

}


.comment-content {

    flex:
        1;

}


.comment-top {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

}


.comment-top span {

    color:
        var(--muted);

    font-size:
        11px;

}


.comment-content p {

    margin:
        10px 0;

    color:
        #cbd5e1;

}


.comment-actions {

    display:
        flex;

    gap:
        15px;

}


.comment-actions button {

    border:
        none;

    background:
        transparent;

    color:
        var(--muted);

    font-size:
        12px;

}


.comment-actions button:hover {

    color:
        #a78bfa;

}


/* =========================================================
   17. FOOTER
========================================================= */

.footer {

    margin-top:
        50px;

    padding:
        60px 6% 25px;

    border-top:
        1px solid
        var(--border);

    background:
        rgba(0,0,0,0.2);

}


.footer-content {

    max-width:
        1200px;

    margin:
        auto;

    display:
        flex;

    justify-content:
        space-between;

    gap:
        50px;

}


.footer-brand p {

    margin-top:
        12px;

    color:
        var(--muted);

}


.footer-links {

    display:
        flex;

    gap:
        80px;

}


.footer-links div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

}


.footer-links h4 {

    margin-bottom:
        5px;

}


.footer-links a {

    color:
        var(--muted);

    font-size:
        13px;

}


.footer-links a:hover {

    color:
        #a78bfa;

}


.footer-bottom {

    max-width:
        1200px;

    margin:
        50px auto 0;

    padding-top:
        20px;

    display:
        flex;

    justify-content:
        space-between;

    border-top:
        1px solid
        var(--border);

    color:
        var(--muted);

    font-size:
        12px;

}


/* =========================================================
   18. ANIMATIONS
========================================================= */

@keyframes fadeUp {

    from {

        opacity:
            0;

        transform:
            translateY(20px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


.hero-content,
.hero-visual,
.home-debate-card,
.debate-explore-card {

    animation:
        fadeUp 0.7s ease both;

}


/* =========================================================
   19. RESPONSIVE TABLETTE
========================================================= */

@media
(max-width: 1000px) {


    .main-nav {

        display:
            none;

    }


    .hero-section {

        grid-template-columns:
            1fr;

        text-align:
            center;

    }


    .hero-content {

        margin:
            auto;

    }


    .hero-actions {

        justify-content:
            center;

    }


    .hero-visual {

        margin-top:
            20px;

    }


    .stats-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .home-stories-grid,
    .debates-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .categories-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .battle-section {

        grid-template-columns:
            1fr;

    }


    .vs-container {

        order:
            2;

    }


    .argument-card {

        min-height:
            300px;

    }


}


/* =========================================================
   20. RESPONSIVE MOBILE
========================================================= */

@media
(max-width: 650px) {


    .navbar {

        padding:
            12px 5%;

    }


    .nav-actions {

        gap:
            5px;

    }


    .login-btn {

        display:
            none;

    }


    .register-btn {

        padding:
            9px 12px;

        font-size:
            12px;

    }


    .hero-section {

        padding:
            70px 5%;

    }


    .hero-content h1 {

        font-size:
            50px;

        letter-spacing:
            -2px;

    }


    .hero-content > p {

        font-size:
            15px;

    }


    .battle-preview {

        transform:
            none;

        padding:
            22px;

    }


    .stats-grid,
    .home-stories-grid,
    .debates-grid,
    .categories-grid,
    .steps-grid {

        grid-template-columns:
            1fr;

    }


    .section-header {

        display:
            block;

    }


    .view-all {

        display:
            inline-block;

        margin-top:
            15px;

    }


    .cta-content h2 {

        font-size:
            32px;

    }


    .debates-hero h1 {

        font-size:
            40px;

    }


    .debates-search {

        flex-wrap:
            wrap;

        padding:
            10px;

    }


    .debates-search input {

        width:
            70%;

    }


    .debates-search button {

        width:
            100%;

        margin-top:
            8px;

    }


    .debates-results-header {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            20px;

    }


    .debate-page {

        padding:
            40px 5% 70px;

    }


    .debate-detail-header h1 {

        font-size:
            36px;

    }


    .argument-card {

        padding:
            25px;

    }


    .comments-header {

        display:
            block;

    }


    .comments-header > strong {

        display:
            block;

        margin-top:
            15px;

    }


    .comment-form {

        flex-direction:
            column;

    }


    .comment-form-footer {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            12px;

    }


    .footer-content {

        flex-direction:
            column;

    }


    .footer-links {

        gap:
            50px;

    }


    .footer-bottom {

        flex-direction:
            column;

        gap:
            10px;

    }

}
/* =========================================================
   MINDBATTLE — PAGE CRÉER UN DÉBAT
   create.html
========================================================= */


/* =========================================================
   CONTENEUR PRINCIPAL
========================================================= */

.create-page {

    min-height: calc(100vh - 76px);

    padding:
        70px 20px 100px;

    display:
        flex;

    justify-content:
        center;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(124, 58, 237, 0.14),
            transparent 45%
        );

}


/* =========================================================
   CONTENEUR DU FORMULAIRE
========================================================= */

.create-container {

    width:
        100%;

    max-width:
        900px;

    margin:
        auto;

}


/* =========================================================
   EN-TÊTE
========================================================= */

.create-header {

    text-align:
        center;

    margin-bottom:
        45px;

}


.create-header .section-badge {

    margin-bottom:
        18px;

}


.create-header h1 {

    margin:
        10px 0 15px;

    font-size:
        clamp(38px, 6vw, 62px);

    line-height:
        1.1;

    letter-spacing:
        -2px;

}


.create-header h1 span {

    background:
        linear-gradient(
            135deg,
            #a78bfa,
            #c084fc,
            #7c3aed
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


.create-header p {

    max-width:
        650px;

    margin:
        auto;

    color:
        #94a3b8;

    font-size:
        16px;

    line-height:
        1.7;

}


/* =========================================================
   CARTE DU FORMULAIRE
========================================================= */

.create-form-card {

    padding:
        40px;

    background:
        linear-gradient(
            145deg,
            rgba(17, 21, 34, 0.96),
            rgba(13, 16, 26, 0.96)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius:
        24px;

    box-shadow:
        0 30px 80px
        rgba(0, 0, 0, 0.35);

}


/* =========================================================
   TITRE DES SECTIONS DU FORMULAIRE
========================================================= */

.form-section {

    margin-bottom:
        35px;

}


.form-section:last-child {

    margin-bottom:
        0;

}


.form-section-title {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        20px;

}


.form-section-number {

    width:
        34px;

    height:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #9333ea
        );

    color:
        white;

    font-size:
        14px;

    font-weight:
        800;

}


.form-section-title h2 {

    font-size:
        20px;

}


.form-section-title p {

    color:
        #64748b;

    font-size:
        12px;

}


/* =========================================================
   LABELS
========================================================= */

.form-group {

    margin-bottom:
        20px;

}


.form-group label {

    display:
        block;

    margin-bottom:
        9px;

    color:
        #e2e8f0;

    font-size:
        14px;

    font-weight:
        700;

}


.form-group label span {

    color:
        #a78bfa;

}


/* =========================================================
   INPUT QUESTION
========================================================= */

.create-input {

    width:
        100%;

    min-height:
        58px;

    padding:
        16px 18px;

    background:
        rgba(255, 255, 255, 0.035);

    border:
        1px solid
        rgba(255, 255, 255, 0.09);

    border-radius:
        12px;

    outline:
        none;

    color:
        #f8fafc;

    font-size:
        15px;

    transition:
        0.25s ease;

}


.create-input::placeholder {

    color:
        #64748b;

}


.create-input:focus {

    border-color:
        #7c3aed;

    background:
        rgba(124, 58, 237, 0.05);

    box-shadow:
        0 0 0 4px
        rgba(124, 58, 237, 0.10);

}


/* =========================================================
   TEXTAREA
========================================================= */

.create-textarea {

    width:
        100%;

    min-height:
        160px;

    padding:
        18px;

    resize:
        vertical;

    background:
        rgba(255, 255, 255, 0.035);

    border:
        1px solid
        rgba(255, 255, 255, 0.09);

    border-radius:
        12px;

    outline:
        none;

    color:
        #f8fafc;

    font-size:
        15px;

    line-height:
        1.6;

    transition:
        0.25s ease;

}


.create-textarea::placeholder {

    color:
        #64748b;

}


.create-textarea:focus {

    border-color:
        #7c3aed;

    background:
        rgba(124, 58, 237, 0.05);

    box-shadow:
        0 0 0 4px
        rgba(124, 58, 237, 0.10);

}


/* =========================================================
   COMPTEUR DE CARACTÈRES
========================================================= */

.input-footer {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    margin-top:
        7px;

}


.input-help {

    color:
        #64748b;

    font-size:
        12px;

}


.character-count {

    color:
        #64748b;

    font-size:
        11px;

}


/* =========================================================
   ZONE POUR / CONTRE
========================================================= */

.arguments-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        20px;

}


.argument-form-card {

    padding:
        22px;

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius:
        16px;

    background:
        rgba(255,255,255,0.02);

    transition:
        0.25s ease;

}


.argument-form-card:hover {

    transform:
        translateY(-3px);

}


/* POUR */

.argument-form-card.for {

    border-color:
        rgba(34,197,94,0.20);

}


.argument-form-card.for:focus-within {

    border-color:
        rgba(34,197,94,0.50);

    box-shadow:
        0 0 30px
        rgba(34,197,94,0.08);

}


/* CONTRE */

.argument-form-card.against {

    border-color:
        rgba(239,68,68,0.20);

}


.argument-form-card.against:focus-within {

    border-color:
        rgba(239,68,68,0.50);

    box-shadow:
        0 0 30px
        rgba(239,68,68,0.08);

}


/* =========================================================
   TITRE POUR / CONTRE
========================================================= */

.argument-form-header {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        18px;

}


.argument-form-icon {

    width:
        40px;

    height:
        40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    font-size:
        20px;

}


.argument-form-card.for
.argument-form-icon {

    background:
        rgba(34,197,94,0.12);

}


.argument-form-card.against
.argument-form-icon {

    background:
        rgba(239,68,68,0.12);

}


.argument-form-header h3 {

    font-size:
        18px;

}


.argument-form-header span {

    display:
        block;

    margin-top:
        2px;

    color:
        #64748b;

    font-size:
        11px;

}


/* =========================================================
   TEXTAREA POUR / CONTRE
========================================================= */

.argument-textarea {

    width:
        100%;

    min-height:
        180px;

    padding:
        15px;

    resize:
        vertical;

    background:
        rgba(0,0,0,0.15);

    border:
        1px solid
        rgba(255,255,255,0.07);

    border-radius:
        10px;

    outline:
        none;

    color:
        white;

    font-size:
        14px;

    line-height:
        1.6;

}


.argument-form-card.for
.argument-textarea:focus {

    border-color:
        #22c55e;

}


.argument-form-card.against
.argument-textarea:focus {

    border-color:
        #ef4444;

}


.argument-textarea::placeholder {

    color:
        #64748b;

}


/* =========================================================
   CATÉGORIE
========================================================= */

.category-select {

    width:
        100%;

    padding:
        15px 18px;

    appearance:
        none;

    background:
        rgba(255,255,255,0.035);

    border:
        1px solid
        rgba(255,255,255,0.09);

    border-radius:
        12px;

    outline:
        none;

    color:
        #f8fafc;

    font-size:
        14px;

    cursor:
        pointer;

}


.category-select:focus {

    border-color:
        #7c3aed;

    box-shadow:
        0 0 0 4px
        rgba(124,58,237,0.10);

}


.category-select option {

    background:
        #111522;

    color:
        white;

}


/* =========================================================
   OPTIONS
========================================================= */

.create-options {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        12px;

}


.option-card {

    padding:
        16px;

    background:
        rgba(255,255,255,0.025);

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius:
        12px;

}


.option-card label {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    cursor:
        pointer;

    color:
        #cbd5e1;

    font-size:
        13px;

}


.option-card input {

    accent-color:
        #7c3aed;

}


/* =========================================================
   RÈGLES DU DÉBAT
========================================================= */

.rules-box {

    padding:
        18px;

    background:
        rgba(124,58,237,0.06);

    border:
        1px solid
        rgba(124,58,237,0.15);

    border-radius:
        12px;

}


.rules-box h3 {

    margin-bottom:
        10px;

    font-size:
        14px;

}


.rules-box ul {

    padding-left:
        20px;

    color:
        #94a3b8;

    font-size:
        13px;

}


.rules-box li {

    margin-bottom:
        6px;

}


/* =========================================================
   BOUTONS FINAUX
========================================================= */

.create-form-actions {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        15px;

    margin-top:
        40px;

    padding-top:
        30px;

    border-top:
        1px solid
        rgba(255,255,255,0.08);

}


.cancel-create-btn {

    padding:
        13px 20px;

    border:
        1px solid
        rgba(255,255,255,0.10);

    border-radius:
        11px;

    background:
        rgba(255,255,255,0.03);

    color:
        #94a3b8;

    font-weight:
        700;

    transition:
        0.25s ease;

}


.cancel-create-btn:hover {

    color:
        white;

    background:
        rgba(255,255,255,0.07);

}


.launch-debate-btn {

    padding:
        15px 28px;

    border:
        none;

    border-radius:
        12px;

    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #9333ea
        );

    color:
        white;

    font-size:
        14px;

    font-weight:
        800;

    box-shadow:
        0 10px 30px
        rgba(124,58,237,0.30);

    transition:
        0.25s ease;

}


.launch-debate-btn:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 15px 40px
        rgba(124,58,237,0.45);

}


.launch-debate-btn:active {

    transform:
        translateY(0);

}


/* =========================================================
   APERÇU DU DÉBAT
========================================================= */

.preview-box {

    margin-top:
        35px;

    padding:
        25px;

    background:
        rgba(255,255,255,0.02);

    border:
        1px solid
        rgba(255,255,255,0.07);

    border-radius:
        16px;

}


.preview-box-title {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        20px;

    color:
        #94a3b8;

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        1px;

}


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

@media
(max-width: 800px) {


    .create-page {

        padding:
            50px 15px 80px;

    }


    .create-form-card {

        padding:
            30px 25px;

    }


    .arguments-grid {

        grid-template-columns:
            1fr;

    }


    .create-options {

        grid-template-columns:
            1fr;

    }


}


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

@media
(max-width: 550px) {


    .create-header h1 {

        font-size:
            38px;

    }


    .create-header p {

        font-size:
            14px;

    }


    .create-form-card {

        padding:
            22px 17px;

        border-radius:
            18px;

    }


    .form-section-title h2 {

        font-size:
            17px;

    }


    .argument-form-card {

        padding:
            17px;

    }


    .create-form-actions {

        flex-direction:
            column-reverse;

        align-items:
        stretch;

    }


    .cancel-create-btn,
    .launch-debate-btn {

        width:
            100%;

        text-align:
            center;

    }


}
/* =========================================================
   MINDBATTLE — PAGE PROFIL
========================================================= */


/* =========================================================
   PAGE PRINCIPALE
========================================================= */

.profile-page {

    min-height:
        calc(100vh - 76px);

    padding:
        70px 20px 100px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(124, 58, 237, 0.16),
            transparent 45%
        );

}


.profile-container {

    width:
        100%;

    max-width:
        1100px;

    margin:
        auto;

}


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

.profile-header {

    position:
        relative;

    padding:
        45px;

    display:
        flex;

    align-items:
        center;

    gap:
        30px;

    background:
        linear-gradient(
            145deg,
            rgba(17, 21, 34, 0.96),
            rgba(13, 16, 26, 0.96)
        );

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius:
        25px;

    overflow:
        hidden;

    box-shadow:
        0 25px 70px
        rgba(0,0,0,0.30);

}


/* Lumière décorative */

.profile-header::before {

    content:
        "";

    position:
        absolute;

    width:
        300px;

    height:
        300px;

    top:
        -180px;

    right:
        -100px;

    background:
        rgba(124,58,237,0.25);

    filter:
        blur(80px);

    border-radius:
        50%;

}


/* =========================================================
   AVATAR
========================================================= */

.profile-avatar {

    position:
        relative;

    width:
        120px;

    height:
        120px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #9333ea
        );

    border:
        5px solid
        rgba(255,255,255,0.08);

    border-radius:
        50%;

    color:
        white;

    font-size:
        45px;

    font-weight:
        900;

    box-shadow:
        0 15px 40px
        rgba(124,58,237,0.35);

}


/* Badge vérifié */

.profile-verified {

    position:
        absolute;

    right:
        2px;

    bottom:
        5px;

    width:
        30px;

    height:
        30px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        4px solid
        #0d101a;

    border-radius:
        50%;

    background:
        #7c3aed;

    color:
        white;

    font-size:
        12px;

}


/* =========================================================
   INFORMATIONS UTILISATEUR
========================================================= */

.profile-info {

    position:
        relative;

    flex:
        1;

}


.profile-info h1 {

    margin-bottom:
        4px;

    font-size:
        32px;

}


.profile-username {

    color:
        #a78bfa;

    font-size:
        14px;

    font-weight:
        700;

}


.profile-bio {

    max-width:
        600px;

    margin-top:
        12px;

    color:
        #94a3b8;

    font-size:
        14px;

    line-height:
        1.7;

}


.profile-location {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    margin-top:
        12px;

    color:
        #64748b;

    font-size:
        12px;

}


/* =========================================================
   BOUTON MODIFIER
========================================================= */

.edit-profile-btn {

    position:
        absolute;

    top:
        30px;

    right:
        30px;

    padding:
        10px 16px;

    border:
        1px solid
        rgba(255,255,255,0.10);

    border-radius:
        10px;

    background:
        rgba(255,255,255,0.04);

    color:
        #cbd5e1;

    font-size:
        13px;

    font-weight:
        700;

    transition:
        0.25s ease;

}


.edit-profile-btn:hover {

    background:
        rgba(124,58,237,0.15);

    border-color:
        rgba(124,58,237,0.35);

    color:
        white;

}


/* =========================================================
   STATISTIQUES DU PROFIL
========================================================= */

.profile-stats {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        15px;

    margin-top:
        20px;

}


.profile-stat {

    padding:
        25px 20px;

    text-align:
        center;

    background:
        rgba(255,255,255,0.025);

    border:
        1px solid
        rgba(255,255,255,0.07);

    border-radius:
        16px;

    transition:
        0.25s ease;

}


.profile-stat:hover {

    transform:
        translateY(-4px);

    background:
        rgba(124,58,237,0.07);

    border-color:
        rgba(124,58,237,0.20);

}


.profile-stat strong {

    display:
        block;

    font-size:
        27px;

    color:
        white;

}


.profile-stat span {

    display:
        block;

    margin-top:
        5px;

    color:
        #64748b;

    font-size:
        12px;

}


/* =========================================================
   CONTENU DU PROFIL
========================================================= */

.profile-content {

    display:
        grid;

    grid-template-columns:
        1fr 340px;

    gap:
        25px;

    margin-top:
        25px;

}


/* =========================================================
   CARTE PROFIL
========================================================= */

.profile-card {

    padding:
        30px;

    background:
        linear-gradient(
            145deg,
            rgba(17,21,34,0.95),
            rgba(13,16,26,0.95)
        );

    border:
        1px solid
        rgba(255,255,255,0.07);

    border-radius:
        20px;

}


.profile-card-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        25px;

}


.profile-card-header h2 {

    font-size:
        21px;

}


.profile-card-header a {

    color:
        #a78bfa;

    font-size:
        12px;

    font-weight:
        700;

}


/* =========================================================
   ONGLET PROFIL
========================================================= */

.profile-tabs {

    display:
        flex;

    gap:
        5px;

    margin-bottom:
        25px;

    padding:
        5px;

    background:
        rgba(255,255,255,0.025);

    border-radius:
        11px;

}


.profile-tab {

    flex:
        1;

    padding:
        11px;

    border:
        none;

    border-radius:
        8px;

    background:
        transparent;

    color:
        #64748b;

    font-size:
        12px;

    font-weight:
        700;

}


.profile-tab.active {

    background:
        #7c3aed;

    color:
        white;

}


/* =========================================================
   DÉBATS DU PROFIL
========================================================= */

.profile-debates {

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;

}


.profile-debate {

    padding:
        20px;

    background:
        rgba(255,255,255,0.025);

    border:
        1px solid
        rgba(255,255,255,0.06);

    border-radius:
        14px;

    transition:
        0.25s ease;

}


.profile-debate:hover {

    transform:
        translateX(4px);

    background:
        rgba(124,58,237,0.06);

}


.profile-debate-top {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        15px;

}


.profile-debate-category {

    color:
        #a78bfa;

    font-size:
        11px;

    font-weight:
        800;

}


.profile-debate-status {

    color:
        #22c55e;

    font-size:
        11px;

    font-weight:
        700;

}


.profile-debate h3 {

    margin:
        10px 0;

    font-size:
        16px;

    line-height:
        1.4;

}


.profile-debate-footer {

    display:
        flex;

    gap:
        20px;

    color:
        #64748b;

    font-size:
        11px;

}


/* =========================================================
   BADGES
========================================================= */

.badges-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        12px;

}


.badge-card {

    padding:
        18px 10px;

    text-align:
        center;

    background:
        rgba(255,255,255,0.025);

    border:
        1px solid
        rgba(255,255,255,0.07);

    border-radius:
        14px;

}


.badge-icon {

    display:
        block;

    margin-bottom:
        8px;

    font-size:
        28px;

}


.badge-card strong {

    display:
        block;

    font-size:
        11px;

}


.badge-card span {

    display:
        block;

    margin-top:
        4px;

    color:
        #64748b;

    font-size:
        9px;

}


/* Badge verrouillé */

.badge-card.locked {

    opacity:
        0.35;

    filter:
        grayscale(1);

}


/* =========================================================
   NIVEAU
========================================================= */

.level-card {

    padding:
        25px;

    background:
        linear-gradient(
            135deg,
            rgba(124,58,237,0.12),
            rgba(147,51,234,0.05)
        );

    border:
        1px solid
        rgba(124,58,237,0.18);

    border-radius:
        18px;

}


.level-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        18px;

}


.level-name {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

}


.level-icon {

    width:
        40px;

    height:
        40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #7c3aed;

    border-radius:
        11px;

}


.level-name h3 {

    font-size:
        15px;

}


.level-name span {

    display:
        block;

    color:
        #a78bfa;

    font-size:
        11px;

}


.level-points {

    color:
        #c4b5fd;

    font-size:
        13px;

    font-weight:
        800;

}


.level-progress {

    height:
        9px;

    overflow:
        hidden;

    background:
        rgba(255,255,255,0.08);

    border-radius:
        100px;

}


.level-progress-bar {

    width:
        72%;

    height:
        100%;

    background:
        linear-gradient(
            90deg,
            #7c3aed,
            #c084fc
        );

    border-radius:
        100px;

}


.level-footer {

    display:
        flex;

    justify-content:
        space-between;

    margin-top:
        8px;

    color:
        #64748b;

    font-size:
        10px;

}


/* =========================================================
   ACTIVITÉ RÉCENTE
========================================================= */

.activity-list {

    display:
        flex;

    flex-direction:
        column;

}


.activity-item {

    display:
        flex;

    gap:
        12px;

    padding:
        16px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,0.06);

}


.activity-item:last-child {

    border-bottom:
        none;

}


.activity-icon {

    width:
        35px;

    height:
        35px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(124,58,237,0.10);

    border-radius:
        9px;

}


.activity-content p {

    color:
        #cbd5e1;

    font-size:
        12px;

}


.activity-content span {

    display:
        block;

    margin-top:
        3px;

    color:
        #64748b;

    font-size:
        10px;

}


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

@media
(max-width: 900px) {


    .profile-content {

        grid-template-columns:
            1fr;

    }


    .profile-header {

        padding:
            35px;

    }


}


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

@media
(max-width: 650px) {


    .profile-page {

        padding:
            40px 15px 70px;

    }


    .profile-header {

        flex-direction:
            column;

        text-align:
            center;

        padding:
            35px 20px;

    }


    .profile-avatar {

        width:
            100px;

        height:
            100px;

        font-size:
            38px;

    }


    .profile-info {

        width:
            100%;

    }


    .profile-info h1 {

        font-size:
            27px;

    }


    .profile-location {

        justify-content:
            center;

    }


    .edit-profile-btn {

        position:
            static;

        margin-top:
            15px;

    }


    .profile-stats {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .profile-stat {

        padding:
            20px 10px;

    }


    .profile-stat strong {

        font-size:
            23px;

    }


    .profile-card {

        padding:
            22px 17px;

    }


    .badges-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .profile-debate-top {

        flex-direction:
            column;

        gap:
            5px;

    }


}