/**
 * DASHBOARD ABONNEMENT - Premium CSS
 * Page d'abonnement et tarification
 * Version 2.0
 */

/* ============================================
   ABONNEMENT PAGE LAYOUT
   ============================================ */
.abonnement-page{max-width:700px}

/* Page Header */
.page-header{margin-bottom:32px}
.header-content h1{font-size:28px;font-weight:700;color:#0f172a;margin:0 0 6px 0}
.header-content p{font-size:15px;color:#64748b;margin:0}

@media(max-width:640px){
.header-content h1{font-size:22px}
.header-content p{font-size:14px}
}

/* ============================================
   STATS BANNER
   ============================================ */
.stats-banner{display:flex;align-items:center;justify-content:center;gap:24px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:24px 32px;margin-bottom:32px}

.stat-item{display:flex;flex-direction:column;align-items:center;text-align:center}
.stat-number{font-size:28px;font-weight:700;color:#3b82f6}
.stat-text{font-size:13px;color:#64748b;margin-top:2px}

.stat-divider{width:1px;height:40px;background:#e2e8f0}

@media(max-width:640px){
.stats-banner{gap:16px;padding:20px 16px}
.stat-number{font-size:22px}
.stat-text{font-size:12px}
.stat-divider{height:32px}
}

/* ============================================
   PRICING CARD
   ============================================ */
.pricing-section{margin-bottom:32px}

.pricing-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;overflow:hidden;position:relative}
.pricing-card.featured{border:2px solid #3b82f6}

.pricing-badge{position:absolute;top:20px;right:20px;background:#3b82f6;color:#fff;font-size:12px;font-weight:600;padding:6px 12px;border-radius:6px;letter-spacing:0.5px}

/* Header */
.pricing-header{padding:32px 32px 24px;text-align:center}
.pricing-header h2{font-size:24px;font-weight:700;color:#0f172a;margin:0 0 6px 0}
.pricing-header p{font-size:15px;color:#64748b;margin:0}

/* Price */
.pricing-price{padding:0 32px 24px;text-align:center}

.price-main{display:flex;align-items:baseline;justify-content:center;gap:6px}
.price-amount{font-size:48px;font-weight:700;color:#0f172a}
.price-period{font-size:16px;color:#64748b}

.price-ttc{font-size:14px;color:#64748b;margin-top:4px}

.price-commission{display:inline-flex;align-items:center;gap:8px;background:#eff6ff;color:#3b82f6;font-size:14px;font-weight:600;padding:10px 16px;border-radius:8px;margin-top:16px}

/* Features */
.pricing-features{padding:0 32px 24px}

.pricing-features ul{list-style:none;padding:0;margin:0;border-top:1px solid #f1f5f9}

.pricing-features li{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid #f1f5f9;font-size:15px;color:#374151}
.pricing-features li:last-child{border-bottom:none}

.pricing-features li svg{color:#10b981;flex-shrink:0}

/* Info Box */
.pricing-info{margin:0 24px 24px;padding:20px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px}

.info-header{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:#0f172a;margin-bottom:16px}
.info-header svg{color:#64748b}

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

.info-item{display:flex;justify-content:space-between;align-items:center;gap:16px}
.info-label{font-size:14px;color:#64748b}
.info-value{font-size:14px;font-weight:500;color:#0f172a;text-align:right}

@media(max-width:640px){
.info-item{flex-direction:column;align-items:flex-start;gap:2px}
.info-value{text-align:left}
}

/* CTA Button */
.pricing-cta{display:flex;align-items:center;justify-content:center;gap:10px;width:calc(100% - 48px);margin:0 24px 24px;padding:16px 24px;background:#3b82f6;color:#fff;font-size:16px;font-weight:600;font-family:inherit;border:none;border-radius:10px;cursor:pointer;transition:all 0.2s ease}
.pricing-cta:hover{background:#2563eb;transform:translateY(-2px);box-shadow:0 6px 20px rgba(59,130,246,0.3)}

@media(max-width:640px){
.pricing-header{padding:24px 20px 20px}
.pricing-header h2{font-size:20px}
.pricing-price{padding:0 20px 20px}
.price-amount{font-size:40px}
.pricing-features{padding:0 20px 20px}
.pricing-info{margin:0 16px 20px}
.pricing-cta{width:calc(100% - 32px);margin:0 16px 20px}
.pricing-badge{top:16px;right:16px}
}

/* ============================================
   SUPPORT CARD
   ============================================ */
.support-card{display:flex;align-items:center;gap:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:24px}

.support-icon{width:52px;height:52px;border-radius:12px;background:#f0fdf4;color:#10b981;display:flex;align-items:center;justify-content:center;flex-shrink:0}

.support-content{flex:1;min-width:0}
.support-content h3{font-size:16px;font-weight:600;color:#0f172a;margin:0 0 4px 0}
.support-content p{font-size:14px;color:#64748b;margin:0}

.support-actions{display:flex;gap:12px;flex-shrink:0}

.support-link{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;font-size:14px;font-weight:500;border-radius:8px;text-decoration:none;transition:all 0.2s ease}

.support-link.phone{background:#0f172a;color:#fff}
.support-link.phone:hover{background:#1e293b}

.support-link.email{background:#f1f5f9;color:#374151}
.support-link.email:hover{background:#e2e8f0}

@media(max-width:768px){
.support-card{flex-direction:column;text-align:center;gap:16px}
.support-actions{flex-direction:column;width:100%}
.support-link{justify-content:center}
}