/* ============================================================
   qa.css — Questions & Réponses + Page Premium
   ============================================================ */

/* ---- QUESTIONS : TOPBAR --------------------------------- */
.qa-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.qa-stats {
    display: flex;
    gap: 24px;
}

.qa-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.qa-stat-num {
    font-family: var(--font-title);
    font-size: 20px;
    font-weight: 700;
    color: var(--c-primary);
}

.qa-stat-label {
    font-size: 12px;
    color: var(--c-muted);
}

/* ---- FILTRES ------------------------------------------- */
.qa-filtres        { margin-bottom: 20px; }
.qa-filtres-form   { display: flex; flex-direction: column; gap: 12px; }

.qa-search-wrap    { position: relative; }
.qa-search-input   { width: 100%; padding: 10px 16px; border: 1px solid var(--c-border); border-radius: var(--r-md); font-size: 14px; outline: none; transition: border-color .15s; background: var(--c-white); }
.qa-search-input:focus { border-color: var(--c-accent); }

.qa-cats           { display: flex; flex-wrap: wrap; gap: 6px; }
.qa-cat-pill       { padding: 5px 14px; border: 1px solid var(--c-border); border-radius: 20px; font-size: 13px; color: var(--c-muted); transition: all .15s; }
.qa-cat-pill:hover { border-color: var(--c-accent); color: var(--c-accent); }
.qa-cat-active     { background: var(--c-primary); color: #F7FAFC; border-color: var(--c-primary); }

.qa-statut-tabs    { display: flex; gap: 4px; }
.qa-statut-tab     { padding: 7px 16px; border: 1px solid var(--c-border); border-radius: var(--r-md); font-size: 13px; color: var(--c-muted); transition: all .15s; }
.qa-statut-tab:hover { border-color: var(--c-accent); color: var(--c-accent); }
.qa-statut-tab.active { background: var(--c-primary); color: #F7FAFC; border-color: var(--c-primary); }

.qa-results-count  { font-size: 13px; color: var(--c-muted); margin-bottom: 14px; }

/* ---- LISTE DES QUESTIONS ------------------------------- */
.qa-list           { display: flex; flex-direction: column; gap: 1px; margin-bottom: 20px; }

.qa-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    margin-bottom: 8px;
    transition: box-shadow .15s, border-color .15s;
    text-decoration: none;
}

.qa-item:hover {
    box-shadow: var(--shadow-sm);
    border-color: #A0AEC0;
}

/* Indicateur statut */
.qa-item-status    { flex-shrink: 0; padding-top: 3px; }
.qa-status-resolved {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--c-cta);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.qa-status-open    { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--c-border); }

/* Corps item */
.qa-item-body      { flex: 1; min-width: 0; }
.qa-item-top       { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }

.qa-cat-badge      { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
.qa-resolved-badge { background: #C6F6D5; color: #276749; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; }
.qa-open-badge     { background: #BEE3F8; color: #1A365D; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; }

.qa-item-titre     { font-family: var(--font-title); font-size: 15px; font-weight: 600; color: var(--c-primary); line-height: 1.4; margin-bottom: 6px; }
.qa-item-meta      { font-size: 12px; color: var(--c-muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Stats droite */
.qa-item-stats     { display: flex; gap: 12px; flex-shrink: 0; }
.qa-item-stat      { text-align: center; padding: 6px 10px; border: 1px solid var(--c-border); border-radius: var(--r-sm); min-width: 52px; }
.qa-item-stat-num  { display: block; font-family: var(--font-title); font-size: 16px; font-weight: 700; color: var(--c-primary); }
.qa-item-stat-label { display: block; font-size: 10px; color: var(--c-muted); }
.qa-stat-answered  { border-color: #EF9F27; background: #FEFCBF; }
.qa-stat-answered .qa-item-stat-num { color: #7B6A00; }
.qa-stat-resolved  { border-color: var(--c-cta); background: #E1F5EE; }
.qa-stat-resolved .qa-item-stat-num { color: var(--c-cta); }

/* ---- SIDEBAR Q&R --------------------------------------- */
.qa-sidebar-cta { background: #E1F5EE; border-color: #9FE1CB; }

/* ---- DÉTAIL QUESTION ----------------------------------- */
.qa-question-header  { margin-bottom: 20px; }
.qa-question-badges  { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.qa-question-titre   { font-family: var(--font-title); font-size: clamp(18px,3vw,26px); font-weight: 700; color: var(--c-primary); line-height: 1.35; margin-bottom: 10px; }
.qa-question-meta    { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--c-muted); }

.qa-question-body {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 24px;
    margin-bottom: 24px;
}

.qa-question-content {
    font-size: 15px;
    line-height: 1.8;
    color: var(--c-text);
    white-space: pre-wrap;
    word-break: break-word;
}

.qa-question-actions { display: flex; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--c-border); }

/* ---- RÉPONSES ------------------------------------------ */
.qa-reponses        { margin-bottom: 28px; }
.qa-reponses-titre  { font-family: var(--font-title); font-size: 18px; font-weight: 700; color: var(--c-primary); margin-bottom: 14px; }

.qa-reponse {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 20px 24px;
    margin-bottom: 12px;
}

.qa-reponse-best {
    border-color: var(--c-cta);
    background: #F0FFF4;
}

.qa-best-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--c-cta);
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #9AE6B4;
}

.qa-reponse-content {
    font-size: 15px;
    line-height: 1.8;
    color: var(--c-text);
    white-space: pre-wrap;
    word-break: break-word;
    margin-bottom: 16px;
}

.qa-reponse-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--c-border);
}

.qa-reponse-meta    { display: flex; align-items: center; gap: 10px; }
.qa-reponse-avatar  { width: 32px; height: 32px; border-radius: 50%; background: var(--c-primary); color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.qa-reponse-auteur  { font-size: 13px; font-weight: 600; color: var(--c-primary); display: flex; align-items: center; gap: 6px; }
.qa-reponse-date    { font-size: 11px; color: var(--c-muted); }
.qa-admin-badge     { background: var(--c-primary); color: #F7FAFC; font-size: 10px; padding: 1px 7px; border-radius: 10px; font-weight: 600; }

.qa-best-btn {
    padding: 6px 14px;
    border: 1.5px solid var(--c-cta);
    border-radius: var(--r-md);
    background: transparent;
    color: var(--c-cta);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
.qa-best-btn:hover  { background: var(--c-cta); color: #fff; }

.qa-no-reponse      { text-align: center; padding: 32px; background: var(--c-white); border: 1px dashed var(--c-border); border-radius: var(--r-lg); color: var(--c-muted); }

/* ---- FORMULAIRE RÉPONSE / QUESTION -------------------- */
.qa-form-section    { margin-top: 24px; }
.qa-form-titre      { font-family: var(--font-title); font-size: 18px; font-weight: 700; color: var(--c-primary); margin-bottom: 14px; }

.qa-resolved-notice {
    background: #E1F5EE;
    border: 1px solid #9AE6B4;
    border-radius: var(--r-md);
    padding: 12px 16px;
    font-size: 14px;
    color: #0F6E56;
    margin-bottom: 16px;
}

.qa-reponse-form    { background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 20px; }
.qa-textarea        { min-height: 150px; resize: vertical; line-height: 1.7; }
.qa-textarea-lg     { min-height: 220px; }

.qa-login-cta {
    background: var(--c-primary);
    border-radius: var(--r-lg);
    padding: 28px;
    text-align: center;
    color: #A0AEC0;
}
.qa-login-cta h3   { font-family: var(--font-title); font-size: 18px; font-weight: 700; color: #F7FAFC; margin-bottom: 8px; }
.qa-login-cta p    { font-size: 14px; margin-bottom: 20px; }

/* ---- FORMULAIRE POSER UNE QUESTION -------------------- */
.qa-conseils        { background: #E1F5EE; border-radius: var(--r-lg); padding: 18px 20px; margin-bottom: 20px; }
.qa-conseils-titre  { font-family: var(--font-title); font-size: 14px; font-weight: 700; color: #085041; margin-bottom: 12px; }
.qa-conseils-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qa-conseil-item    { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #0F6E56; }
.qa-conseil-icon    { font-size: 16px; }

.qa-form-card       { background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 28px; }

.qa-cat-select      { display: flex; flex-wrap: wrap; gap: 8px; }
.qa-cat-option      { cursor: pointer; }
.qa-cat-option input { display: none; }
.qa-cat-option-label {
    display: block;
    padding: 7px 16px;
    border: 1.5px solid var(--c-border);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--c-muted);
    transition: all .15s;
    cursor: pointer;
}
.qa-cat-option input:checked + .qa-cat-option-label {
    background: var(--c-primary);
    color: #F7FAFC;
    border-color: var(--c-primary);
}
.qa-cat-option-label:hover { border-color: var(--c-accent); color: var(--c-accent); }

/* ---- PREMIUM HERO -------------------------------------- */
.premium-hero {
    background: linear-gradient(135deg, #2D3748 0%, #1A202C 100%);
    padding: 56px 0 48px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.premium-hero::before {
    content: '✦';
    position: absolute;
    font-size: 200px;
    color: rgba(56,178,172,.06);
    top: -40px; right: -20px;
    pointer-events: none;
}

.premium-hero-inner { max-width: 580px; margin: 0 auto; }
.premium-hero-badge {
    display: inline-block;
    background: rgba(56,178,172,.2);
    border: 1px solid rgba(56,178,172,.4);
    color: var(--c-accent);
    padding: 5px 18px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 18px;
}
.premium-hero-title {
    font-family: var(--font-title);
    font-size: clamp(24px,4vw,36px);
    font-weight: 700;
    color: #F7FAFC;
    line-height: 1.3;
    margin-bottom: 12px;
}
.premium-hero-title em { color: var(--c-accent); font-style: normal; }
.premium-hero-sub  { font-size: 15px; color: #A0AEC0; line-height: 1.7; }

/* ---- AVANTAGES ----------------------------------------- */
.premium-avantages       { margin-bottom: 40px; }
.premium-avantages-titre { font-family: var(--font-title); font-size: 20px; font-weight: 700; color: var(--c-primary); text-align: center; margin-bottom: 24px; }
.premium-avantages-grid  { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.premium-avantage-card   { background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 16px 18px; display: flex; align-items: flex-start; gap: 12px; }
.premium-avantage-icon   { font-size: 24px; flex-shrink: 0; }
.premium-avantage-titre  { font-family: var(--font-title); font-size: 14px; font-weight: 600; color: var(--c-primary); margin-bottom: 4px; }
.premium-avantage-desc   { font-size: 12px; color: var(--c-muted); line-height: 1.5; }

/* ---- PLANS --------------------------------------------- */
.premium-plans           { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 32px; max-width: 600px; margin-left: auto; margin-right: auto; }
.premium-plan {
    background: var(--c-white);
    border: 2px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 24px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    position: relative;
}
.premium-plan:hover      { border-color: var(--c-accent); }
.premium-plan-active     { border-color: var(--c-accent); background: #E1F5EE; }
.premium-plan-featured   { border-color: var(--c-accent); }
.premium-plan-badge {
    position: absolute;
    top: -12px; left: 50%;
    transform: translateX(-50%);
    background: var(--c-accent);
    color: #085041;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 20px;
    white-space: nowrap;
}
.premium-plan-header     { margin-bottom: 12px; }
.premium-plan-nom        { font-family: var(--font-title); font-size: 16px; font-weight: 700; color: var(--c-primary); margin-bottom: 6px; }
.premium-plan-prix       { font-family: var(--font-title); font-size: 22px; font-weight: 700; color: var(--c-primary); }
.premium-plan-prix span  { font-size: 13px; font-weight: 400; color: var(--c-muted); }
.premium-plan-economy    { font-size: 12px; color: var(--c-cta); font-weight: 600; margin-bottom: 12px; }
.premium-plan-radio      { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--c-muted); }
.premium-plan-radio input { accent-color: var(--c-accent); }

/* ---- PAIEMENT CARD ------------------------------------- */
.premium-paiement-card {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    padding: 28px;
    margin-bottom: 28px;
}
.premium-paiement-titre  { font-family: var(--font-title); font-size: 18px; font-weight: 700; color: var(--c-primary); margin-bottom: 20px; }

.premium-ops             { display: flex; gap: 8px; margin-bottom: 20px; }
.premium-op-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px;
    border: 1.5px solid var(--c-border);
    border-radius: var(--r-md);
    background: transparent;
    font-size: 14px;
    font-weight: 500;
    color: var(--c-muted);
    cursor: pointer;
    transition: all .15s;
}
.premium-op-btn:hover     { border-color: var(--c-accent); color: var(--c-primary); }
.premium-op-active        { background: var(--c-primary); color: #F7FAFC; border-color: var(--c-primary); }
.premium-op-icon          { font-size: 18px; }

.premium-instructions     { background: var(--c-bg); border-radius: var(--r-lg); padding: 18px 20px; margin-bottom: 20px; }
.premium-instructions-titre { font-family: var(--font-title); font-size: 14px; font-weight: 700; color: var(--c-primary); margin-bottom: 14px; }
.premium-steps            { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.premium-steps li         { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.5; }
.premium-step-num {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--c-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.premium-numero           { font-family: monospace; font-size: 15px; color: var(--c-accent); background: #E1F5EE; padding: 2px 8px; border-radius: 4px; }
.premium-ref              { font-family: monospace; font-size: 14px; font-weight: 700; color: var(--c-primary); background: var(--c-bg); padding: 2px 8px; border-radius: 4px; }
.premium-montant-display  { color: var(--c-cta); font-size: 16px; }

.premium-confirm-section  { border-top: 1px solid var(--c-border); padding-top: 20px; margin-top: 4px; }
.premium-confirm-titre    { font-family: var(--font-title); font-size: 15px; font-weight: 700; color: var(--c-primary); margin-bottom: 16px; }

.premium-recap {
    background: var(--c-bg);
    border-radius: var(--r-md);
    padding: 14px 16px;
    margin-bottom: 16px;
}
.premium-recap-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    font-size: 14px;
    border-bottom: 1px solid var(--c-border);
}
.premium-recap-row:last-child { border-bottom: none; }
.premium-recap-total { padding-top: 10px; margin-top: 4px; }
.premium-recap-total span { font-weight: 600; font-size: 15px; }
.premium-recap-total strong { color: var(--c-cta); font-size: 18px; }

.premium-submit-btn { margin-top: 4px; padding: 14px; font-size: 16px; }

/* ---- GARANTIES ----------------------------------------- */
.premium-garanties {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 14px;
}
.premium-garantie { display: flex; align-items: flex-start; gap: 10px; }
.premium-garantie-icon   { font-size: 22px; flex-shrink: 0; }
.premium-garantie-titre  { font-size: 13px; font-weight: 600; color: var(--c-primary); margin-bottom: 2px; }
.premium-garantie-desc   { font-size: 12px; color: var(--c-muted); line-height: 1.4; }

/* ---- RESPONSIVE ---------------------------------------- */
@media (max-width: 900px) {
    .qa-item-stats       { display: none; }
    .premium-avantages-grid { grid-template-columns: 1fr 1fr; }
    .premium-garanties   { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
    .qa-stats            { gap: 14px; }
    .qa-item             { flex-direction: column; gap: 10px; }
    .qa-conseils-grid    { grid-template-columns: 1fr; }
    .premium-plans       { grid-template-columns: 1fr; }
    .premium-avantages-grid { grid-template-columns: 1fr; }
    .premium-garanties   { grid-template-columns: 1fr; }
    .premium-ops         { flex-direction: column; }
}