/* ===============================
   RESET
================================ */


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

body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    background: #f7f8fa; /* fond clair moderne */
    color: #1f2937; /* texte principal foncé */
    -webkit-font-smoothing: antialiased;
    display: none; /* cache le contenu avant vérification */
}

/* ===============================
   HEADER
================================ */
.main-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(247,248,250,0.95); /* clair et translucide */
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(0,0,0,0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 60px;
}

.logo {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, #3f6b4c, #5da070);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.main-nav a {
    text-decoration: none;
    color: #6b7280;
    margin-left: 28px;
    font-weight: 500;
    transition: 0.25s ease;
}

.main-nav a:hover,
.main-nav a.active {
    color: #1f2937;
}

/* ===============================
   LAYOUT
================================ */
.layout {
    max-width: 1300px;
    margin: 60px auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 2.2fr 1fr;
    gap: 60px;
}

.feed-column {
    max-width: 750px;
}

/* ===============================
   CREATE WISP
================================ */
.create-wisp {
    background: #ffffff;
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 32px;
    border: 1px solid rgba(0,0,0,0.08);
    transition: 0.3s ease;
}

.create-wisp:focus-within {
    border: 1px solid rgba(63,107,76,0.5);
}

.create-wisp textarea {
    width: 100%;
    background: transparent;
    border: none;
    resize: none;
    color: #1f2937;
    font-size: 15px;
    min-height: 90px;
    outline: none;
}

.wisp-options {
    margin-top: 18px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

select {
    background: #f0f2f5;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    padding: 8px 14px;
    color: #1f2937;
}

.btn-publish {
    background: linear-gradient(135deg, #3f6b4c, #5da070);
    border: none;
    border-radius: 14px;
    padding: 10px 20px;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: 0.25s ease;
}

.btn-publish:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(93,160,112,0.35);
}

/* ===============================
   WISP CARD
================================ */
.wisp-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 26px;
    margin-bottom: 24px;
    border: 1px solid rgba(0,0,0,0.08);
    transition: 0.3s ease;
}

.wisp-card:hover {
    background: #f0f2f5;
    transform: translateY(-3px);
}

.wisp-header {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 12px;
}

.timer {
    color: #ff8a65;
    font-weight: 600;
}

.wisp-content {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 18px;
}

.wisp-interactions {
    display: flex;
    gap: 24px;
    font-size: 14px;
    color: #6b7280;
}

.wisp-interactions span {
    cursor: pointer;
    transition: 0.2s;
}

.wisp-interactions span:hover {
    color: #3f6b4c;
}

/* ===============================
   CERCLE CARD
================================ */
.cercle-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 22px;
    margin-bottom: 20px;
    border: 1px solid rgba(0,0,0,0.08);
}

.cercle-card h3 {
    font-size: 16px;
    margin-bottom: 8px;
}

/* ===============================
   PROFILE
================================ */
.profile-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
}

.profile-header .avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3f6b4c, #5da070);
}

.profile-header h2 {
    font-size: 18px;
    color: #1f2937;
}

.profile-header p {
    font-size: 14px;
    color: #6b7280;
}

.profile-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
    font-size: 14px;
    color: #6b7280;
}

/* ===============================
   SIDEBAR (INDEX.HTML)
================================ */
.sidebar {
    position: sticky;
    top: 120px;
}

.sidebar-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 28px;
    border: 1px solid rgba(0,0,0,0.08);
}

.sidebar-card h3 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 18px;
    color: #1f2937;
}

.user-mini {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
}

.mini-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3f6b4c, #5da070);
}

.mini-avatar.premium {
    box-shadow: 0 0 12px rgba(63,107,76,0.35);
}

.user-mini strong {
    font-size: 14px;
}

.user-mini p {
    font-size: 12px;
    color: #6b7280;
}

/* ===============================
   FOOTER
================================ */
footer {
    text-align: center;
    padding: 40px;
    color: #8b8f98;
    font-size: 13px;
}

/* ===============================
   RESPONSIVE
================================ */
@media (max-width: 1100px) {
    .layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .sidebar {
        display: none;
    }

    .main-header {
        padding: 20px 30px;
    }
}

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

.main-footer{
background:#f8f9fb;
margin-top:80px;
border-top:1px solid rgba(0,0,0,0.05);
}

.footer-container{
max-width:1300px;
margin:auto;
padding:60px 40px;
display:flex;
justify-content:space-between;
gap:60px;
}

.footer-brand h2{
font-size:22px;
font-weight:700;
margin-bottom:10px;
background:linear-gradient(135deg,#3f6b4c,#5da070);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.footer-brand p{
font-size:14px;
color:#6b7280;
max-width:220px;
}

.footer-links{
display:flex;
gap:60px;
}

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

.footer-column h4{
font-size:14px;
font-weight:600;
margin-bottom:12px;
color:#1f2937;
}

.footer-column a{
text-decoration:none;
font-size:14px;
color:#6b7280;
transition:0.2s;
}

.footer-column a:hover{
color:#3f6b4c;
}

.footer-bottom{
border-top:1px solid rgba(0,0,0,0.05);
padding:20px;
text-align:center;
font-size:13px;
color:#9ca3af;
}