/* ============================================================
   Modale Feedback — design e-commerce SaaS ACTI (Maquette A)
   Header vert dégradé (comme le hero) + bouton orange.
   Surcharge de styles.css (chargé après, !important ciblés).
   ============================================================ */
#feedbackModal.feedback-overlay{background:rgba(15,17,21,.72);backdrop-filter:blur(8px);}

#feedbackModal .feedback-container{
    background:#fff;border-radius:12px;max-width:480px;width:92%;
    box-shadow:0 40px 80px -30px rgba(0,0,0,.5);overflow:hidden;
    font-family:'Plus Jakarta Sans',system-ui,sans-serif;
    animation:fbPop .35s cubic-bezier(.16,1,.3,1);
}
@keyframes fbPop{from{opacity:0;transform:translateY(16px) scale(.97);}to{opacity:1;transform:none;}}

/* Header vert dégradé (comme le hero du site) */
#feedbackModal .feedback-header{
    background:linear-gradient(150deg,#0f2a20,#2f7259 70%,#3e9172) !important;
    color:#fff;padding:1.9rem 1.8rem !important;text-align:center;position:relative;overflow:hidden;
}
#feedbackModal .feedback-header::before{
    content:'' !important;position:absolute;top:-40%;right:-10%;width:160px;height:160px;
    border-radius:50%;background:rgba(255,255,255,.07);animation:none !important;
}
#feedbackModal .feedback-header h2{font-size:1.4rem !important;font-weight:800;margin:0 0 .3rem !important;letter-spacing:-.02em;position:relative;z-index:1;}
#feedbackModal .feedback-header p{font-size:.9rem;color:rgba(255,255,255,.85);margin:0;position:relative;z-index:1;}
#feedbackModal .close-btn{
    position:absolute;top:1.1rem;right:1.1rem;width:34px;height:34px;border-radius:9px;
    background:rgba(255,255,255,.16);border:none;color:#fff;cursor:pointer;display:grid;place-items:center;
    font-size:.95rem;transition:background .15s;z-index:2;
}
#feedbackModal .close-btn:hover{background:rgba(255,255,255,.28);}

#feedbackModal .feedback-content{padding:1.7rem 1.8rem 1.9rem;}

/* Barre de progression (segments) */
#feedbackModal .step-indicator{display:flex;gap:6px;margin-bottom:1.6rem;justify-content:stretch;}
#feedbackModal .step-indicator .step{
    flex:1;width:auto !important;height:5px !important;border-radius:999px !important;
    background:#ececed;margin:0 !important;transition:background .25s;transform:none !important;
}
#feedbackModal .step-indicator .step.active{background:#3e9172;transform:none !important;}
#feedbackModal .step-indicator .step.completed{background:#3e9172;}

#feedbackModal .rating-section{text-align:center;margin:0;}
#feedbackModal .rating-title{font-size:1.12rem !important;font-weight:800;color:#17181c;margin:0 0 .3rem !important;text-align:center;letter-spacing:-.01em;}
#feedbackModal .rating-subtitle{font-size:.86rem;color:#6b7280;margin:0 0 1.5rem;text-align:center;}

/* Emojis (carrés arrondis) */
#feedbackModal .emoji-rating{display:flex;justify-content:space-between;gap:.5rem;margin-bottom:.9rem;}
#feedbackModal .emoji-option{
    width:54px !important;height:54px !important;border-radius:15px !important;background:#f6f7f9 !important;
    border:2px solid transparent !important;display:grid;place-items:center;font-size:1.6rem;cursor:pointer;
    transition:transform .15s,border-color .15s,background .15s;
}
#feedbackModal .emoji-option:hover{transform:translateY(-3px) scale(1.04);background:#fff !important;}
#feedbackModal .emoji-option.selected{border-color:#3e9172 !important;background:#e8f3ee !important;transform:translateY(-3px) scale(1.06);}
#feedbackModal .rating-labels{display:flex;justify-content:space-between;gap:.4rem;}
#feedbackModal .rating-labels span{flex:1;text-align:center;font-size:.64rem;color:#9aa1b1;font-weight:600;}

/* Catégories */
#feedbackModal .category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem;}
#feedbackModal .category-item{
    background:#f6f7f9 !important;border:2px solid transparent !important;border-radius:14px !important;
    padding:1rem .5rem !important;text-align:center;cursor:pointer;transition:transform .15s,border-color .15s,background .15s;
}
#feedbackModal .category-item:hover{transform:translateY(-2px);background:#fff !important;border-color:#ececed !important;}
#feedbackModal .category-item.selected{border-color:#3e9172 !important;background:#e8f3ee !important;}
#feedbackModal .category-item i{font-size:1.25rem !important;color:#3e9172 !important;margin-bottom:.45rem;display:block;}
#feedbackModal .category-item span{font-size:.78rem;font-weight:600;color:#17181c;}

/* Formulaire */
#feedbackModal .form-group{margin-bottom:1rem;}
#feedbackModal .form-label{display:block;font-size:.8rem;font-weight:700;color:#17181c;margin-bottom:.4rem;}
#feedbackModal .form-input{
    width:100%;border:1px solid #ececed !important;border-radius:11px !important;padding:.78rem .9rem !important;
    font-size:.92rem;font-family:inherit;color:#17181c;box-sizing:border-box;transition:border-color .15s,box-shadow .15s;
}
#feedbackModal .form-input:focus{outline:none;border-color:#3e9172 !important;box-shadow:0 0 0 3px rgba(62,145,114,.12);}
#feedbackModal .form-textarea{min-height:104px;resize:vertical;}

/* Merci */
#feedbackModal .thank-you-section{text-align:center;padding:.6rem 0;}
#feedbackModal .thank-you-icon{
    width:68px;height:68px;border-radius:50%;background:#e8f3ee !important;color:#3e9172 !important;
    display:grid;place-items:center;font-size:1.8rem;margin:0 auto 1.1rem;
    animation:fbCheck .5s cubic-bezier(.16,1,.3,1);
}
@keyframes fbCheck{from{transform:scale(0);}to{transform:scale(1);}}
#feedbackModal .thank-you-title{font-size:1.25rem !important;font-weight:800;color:#17181c;margin:0 0 .5rem;}
#feedbackModal .thank-you-text{font-size:.88rem;color:#6b7280;line-height:1.6;margin:0 auto;max-width:340px;}

/* Actions */
#feedbackModal .feedback-actions{display:flex;gap:.7rem;margin-top:1.6rem;}
#feedbackModal .feedback-actions .btn{
    flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    padding:.82rem 1rem !important;border-radius:12px !important;font-weight:700;font-size:.9rem;font-family:inherit;
    cursor:pointer;border:none;transition:transform .15s,background .15s,opacity .15s;
}
#feedbackModal .feedback-actions .btn-secondary{background:#f6f7f9 !important;color:#17181c !important;border:1px solid #ececed !important;}
#feedbackModal .feedback-actions .btn-secondary:hover{background:#ececed !important;}
#feedbackModal .feedback-actions .btn-primary{background:linear-gradient(135deg,#ff6b35,#e85520) !important;color:#fff !important;}
#feedbackModal .feedback-actions .btn-primary:hover{transform:translateY(-2px);}
#feedbackModal .feedback-actions .btn.loading{opacity:.7;pointer-events:none;}

@media(max-width:520px){
    #feedbackModal .feedback-header{padding:1.6rem 1.4rem !important;}
    #feedbackModal .feedback-content{padding:1.4rem 1.4rem 1.7rem;}
    #feedbackModal .emoji-option{width:46px !important;height:46px !important;font-size:1.35rem;}
    #feedbackModal .category-grid{grid-template-columns:repeat(2,1fr);}
}