chakibcode · October 31, 2025 09:16
diff --git a/rapport.html b/rapport.html

 <!DOCTYPE html>
 <html lang="fr">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rapport de Vente Dynamique</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

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

    :root {
      --color-primary: #4F46E5;
      --color-primary-light: #6366F1;
      --color-success: #10B981;
      --color-success-light: #34D399;
      --color-overachieve: #F59E0B;
      --color-overachieve-light: #FBBF24;
      --color-warning: #EF4444;
      --color-warning-light: #F87171;
      --color-background: #F8FAFC;
      --color-card-bg: #FFFFFF;
      --color-text-primary: #1E293B;
      --color-text-secondary: #64748B;
      --color-border: #E2E8F0;
      --border-radius: 16px;
      --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      --box-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      margin: 0;
      padding: 20px;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      min-height: 100vh;
      color: var(--color-text-primary);
    }

    .report-card {
      background-color: var(--color-card-bg);
      border-radius: 24px;
      box-shadow: var(--box-shadow-lg);
      width: 100%;
      max-width: 650px;
      overflow: hidden;
      animation: fadeInUp 0.6s ease-out;
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .card-header {
      background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
      color: white;
      padding: 40px 32px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .header-icon {
      font-size: 3em;
      margin-bottom: 12px;
      animation: bounce 2s ease-in-out infinite;
    }

    @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }

    .card-header h1 {
      margin: 0 0 8px 0;
      font-size: 1.75em;
      font-weight: 700;
      position: relative;
      z-index: 1;
    }

    .header-subtitle {
      margin: 0 0 16px 0;
      font-size: 1em;
      opacity: 0.95;
      font-weight: 400;
      position: relative;
      z-index: 1;
    }

    .activity-badge {
      display: inline-block;
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(10px);
      padding: 8px 20px;
      border-radius: 50px;
      font-weight: 600;
      font-size: 0.9em;
      border: 1px solid rgba(255, 255, 255, 0.3);
      position: relative;
      z-index: 1;
    }

    .card-body {
      padding: 24px 32px;
    }

    /* Qualitative KPI styles */
    .qualitative-kpis {
      margin-bottom: 30px;
    }

    .qualitative-kpis h2 {
      text-align: center;
      margin-bottom: 20px;
      font-weight: 700;
      color: var(--color-primary);
    }

    .kpi-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 15px;
      margin-bottom: 20px;
    }

    .kpi-card {
      background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
      border-radius: 12px;
      padding: 20px;
      text-align: center;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      border: 1px solid var(--color-border);
      transition: all 0.3s ease;
    }

    .kpi-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }

    .kpi-title {
      font-size: 1.3em;
      font-weight: 700;
      margin-bottom: 12px;
      color: var(--color-primary);
    }

    .kpi-value {
      font-size: 2em;
      font-weight: 800;
      margin-bottom: 6px;
      background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .kpi-desc {
      font-size: 0.9em;
      color: var(--color-text-secondary);
    }

    .product-item {
      padding: 24px;
      margin-bottom: 16px;
      border-radius: var(--border-radius);
      background: linear-gradient(135deg, #FAFBFC 0%, #FFFFFF 100%);
      border: 1px solid var(--color-border);
      transition: all 0.3s ease;
    }

    .product-item:hover {
      transform: translateY(-2px);
      box-shadow: var(--box-shadow-lg);
      border-color: var(--color-primary-light);
    }

    .product-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }

    .product-name-wrapper {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .product-name {
      font-size: 1.15em;
      font-weight: 700;
      color: var(--color-text-primary);
    }

    .status-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      font-size: 0.85em;
      font-weight: 700;
      color: white;
    }

    .status-badge.success {
      background: linear-gradient(135deg, var(--color-success), var(--color-success-light));
    }

    .status-badge.over-achieved {
      background: linear-gradient(135deg, var(--color-overachieve), var(--color-overachieve-light));
    }

    .status-badge.warning {
      background: linear-gradient(135deg, var(--color-warning), var(--color-warning-light));
    }

    .product-sales {
      font-size: 1.35em;
      font-weight: 800;
      background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .progress-bar-container {
      background-color: var(--color-border);
      border-radius: 50px;
      height: 32px;
      position: relative;
      overflow: hidden;
      margin-bottom: 16px;
    }

    .progress-bar-container.large {
      height: 40px;
    }

    .progress-bar {
      height: 100%;
      border-radius: 50px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden;
    }

    .progress-bar.success {
      background: linear-gradient(90deg, var(--color-success), var(--color-success-light));
    }

    .progress-bar.over-achieved {
      background: linear-gradient(90deg, var(--color-overachieve), var(--color-overachieve-light));
    }

    .progress-bar.warning {
      background: linear-gradient(90deg, var(--color-warning), var(--color-warning-light));
    }

    .progress-shine {
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
      animation: shine 2s infinite;
    }

    @keyframes shine {
      to { left: 100%; }
    }

    .progress-text {
      font-weight: 700;
      font-size: 0.9em;
      color: white;
      text-shadow: 0 1px 2px rgba(0,0,0,0.2);
      position: relative;
      z-index: 1;
    }

    .product-details {
      display: flex;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .raf-section {
      margin-top: 16px;
      padding-top: 16px;
      border-top: 2px solid var(--color-border);
    }

    .raf-card {
      background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
      border: 2px solid #F59E0B;
      border-radius: 12px;
      padding: 20px;
      display: flex;
      align-items: center;
      gap: 16px;
      box-shadow: 0 4px 6px rgba(245, 158, 11, 0.2);
      transition: all 0.3s ease;
    }

    .raf-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 12px rgba(245, 158, 11, 0.3);
    }

    .raf-icon {
      font-size: 2.5em;
      animation: pulse-raf 2s ease-in-out infinite;
    }

    @keyframes pulse-raf {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.1); }
    }

    .raf-content {
      display: flex;
      flex-direction: column;
      gap: 4px;
      flex: 1;
    }

    .raf-label {
      font-size: 0.85em;
      font-weight: 700;
      color: #92400E;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .raf-value {
      font-size: 1.6em;
      font-weight: 800;
      color: #B45309;
      text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }

    .detail-item {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .detail-label {
      font-size: 0.8em;
      color: var(--color-text-secondary);
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .detail-value {
      font-size: 0.95em;
      color: var(--color-text-primary);
      font-weight: 600;
    }

    .zero-sales {
      opacity: 0.6;
    }

    .zero-message {
      text-align: center;
      padding: 16px;
      color: var(--color-text-secondary);
      font-style: italic;
    }

    .card-footer {
      background: linear-gradient(135deg, #F8FAFC 0%, #EFF6FF 100%);
      padding: 32px;
      border-top: 1px solid var(--color-border);
    }

    .total-header {
      text-align: center;
      margin-bottom: 20px;
    }

    .total-header h2 {
      font-size: 1.1em;
      color: var(--color-text-secondary);
      font-weight: 600;
      margin-bottom: 12px;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .total-amount {
      font-size: 2.5em;
      font-weight: 800;
      background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .currency {
      font-size: 0.6em;
      opacity: 0.8;
    }

    /* RAF Card matching existing card style */
    .big-raf-card {
      background: white;
      border-radius: 12px;
      border: 1px solid var(--color-border);
      padding: 24px;
      margin: 24px 0;
      box-shadow: var(--box-shadow);
      transition: all 0.3s ease;
    }

    .big-raf-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--box-shadow-lg);
    }

    .raf-header {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 20px;
      padding-bottom: 16px;
      border-bottom: 2px solid var(--color-border);
    }

    .raf-icon-header {
      font-size: 2.5em;
      animation: pulse-raf 2s ease-in-out infinite;
    }

    .raf-title-section h3 {
      font-size: 1.3em;
      font-weight: 700;
      color: var(--color-text-primary);
      margin-bottom: 4px;
    }

    .raf-motivation {
      font-size: 0.9em;
      color: var(--color-text-secondary);
      margin: 0;
    }

    .raf-main-content {
      text-align: center;
      padding: 20px 0;
      margin-bottom: 20px;
    }

    .raf-big-number {
      margin-bottom: 12px;
    }

    .raf-amount {
      font-size: 3em;
      font-weight: 800;
      background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .raf-currency {
      font-size: 1.2em;
      font-weight: 600;
      color: var(--color-text-secondary);
      margin-left: 8px;
    }

    .raf-daily-target {
      font-size: 1.1em;
      color: var(--color-text-primary);
      font-weight: 500;
    }

    .raf-daily-target strong {
      color: var(--color-primary);
      font-weight: 700;
    }

    .raf-progress-section {
      padding-top: 16px;
      border-top: 1px solid var(--color-border);
    }

    .raf-mini-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .raf-mini-stat {
      background: linear-gradient(135deg, #FAFBFC 0%, #FFFFFF 100%);
      border: 1px solid var(--color-border);
      border-radius: 8px;
      padding: 16px;
      text-align: center;
      transition: all 0.3s ease;
    }

    .raf-mini-stat:hover {
      transform: translateY(-1px);
      box-shadow: var(--box-shadow);
    }

    .mini-stat-icon {
      font-size: 1.5em;
      display: block;
      margin-bottom: 8px;
    }

    .mini-stat-value {
      font-size: 1.1em;
      font-weight: 700;
      color: var(--color-primary);
      display: block;
      margin-bottom: 4px;
    }

    .mini-stat-label {
      font-size: 0.8em;
      color: var(--color-text-secondary);
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .total-details-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-top: 24px;
    }

    .total-detail-card {
      background: white;
      padding: 20px;
      border-radius: 12px;
      border: 1px solid var(--color-border);
      display: flex;
      align-items: center;
      gap: 16px;
      transition: all 0.3s ease;
    }

    .total-detail-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--box-shadow);
    }

    .total-detail-icon {
      font-size: 2em;
    }

    .total-detail-content {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .total-detail-label {
      font-size: 0.8em;
      color: var(--color-text-secondary);
      font-weight: 500;
    }

    .total-detail-value {
      font-size: 1.1em;
      color: var(--color-text-primary);
      font-weight: 700;
    }

    @media (max-width: 600px) {
      body {
        padding: 10px;
      }

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

      .card-body {
        padding: 16px 20px;
      }

      .product-item {
        padding: 16px;
      }

      .kpi-cards {
        grid-template-columns: 1fr;
      }

      .total-details-grid {
        grid-template-columns: 1fr;
      }

      .total-amount {
        font-size: 2em;
      }

      .raf-header {
        flex-direction: column;
        text-align: center;
      }

      .raf-amount {
        font-size: 2.2em;
      }

      .raf-mini-stats {
        grid-template-columns: 1fr;
      }
    }
  </style>
 </head>
 <body>
  <div id="report-container">
    <div class="report-card">
      
  <div class="card-header">
    <div class="header-icon">📊</div>
    <h1>Bonjour, Y59 EL GHANMI MOHAMED 👋</h1>
    <p class="header-subtitle">Rapport de Vente (Valeurs en TTC)</p>
    <div class="activity-badge">SOM</div>
  </div>

      <div class="card-body">
        
    <section class="qualitative-kpis">
    <h2>📊 KPI Qualitatifs - Indicateurs de Performance</h2>
    <div class="kpi-cards">
        <div class="kpi-card">
            <div class="kpi-icon">📅</div>
            <div class="kpi-title">CLT PROGRAMME</div>
            <div class="kpi-value">583</div>
            <div class="kpi-desc">Clients programmés</div>
        </div>
        <div class="kpi-card">
            <div class="kpi-icon">✅</div>
            <div class="kpi-title">ACM</div>
            <div class="kpi-value">94.21%</div>
        </div>
        <div class="kpi-card">
            <div class="kpi-icon">🎯</div>
            <div class="kpi-title">OBJ L/BL</div>
            <div class="kpi-value">101.75%</div>
            <div class="kpi-desc">Moyenne: 5.8</div>
            <div class="kpi-desc">Objectif: 5.7</div>
        </div>
        <div class="kpi-card">
            <div class="kpi-icon">📈</div>
            <div class="kpi-title">TSM</div>
            <div class="kpi-value">80.37%</div>
        </div>
        <div class="kpi-card">
            <div class="kpi-icon">📋</div>
            <div class="kpi-title">RAF TSM</div>
            <div class="kpi-value">114</div>
            <div class="kpi-desc">BL Restants</div>
        </div>
        <div class="kpi-card">
            <div class="kpi-icon">👥</div>
            <div class="kpi-title">RAF ACM</div>
            <div class="kpi-value">33</div>
            <div class="kpi-desc">Clients Restants</div>
        </div>
    </div>
 </section>


        
    <div class="product-item ">
      <div class="product-header">
        <div class="product-name-wrapper">
          <span class="product-name">LEVURE</span>
          <span class="status-badge warning">⚠</span>
        </div>
        <span class="product-sales">88 178 DH</span>
      </div>
      
      <div class="progress-bar-container">
        <div class="progress-bar warning" style="width: 8%;">
          <span class="progress-text">-8%</span>
        </div>
        <div class="progress-shine"></div>
      </div>
      <div class="product-details">
        <div class="detail-item">
          <span class="detail-label">Objectif</span>
          <span class="detail-value">80 000 DH</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">En Cours</span>
          <span class="detail-value">3 426 DH</span>
        </div>
      </div>
      <div class="raf-section">
        <div class="raf-card">
          <div class="raf-icon">🎯</div>
          <div class="raf-content">
            <span class="raf-label">RAF (Reste Par Jour)</span>
            <span class="raf-value">7 820 DH</span>
          </div>
        </div>
      </div>
      
    </div>
  
    <div class="product-item ">
      <div class="product-header">
        <div class="product-name-wrapper">
          <span class="product-name">MGM</span>
          <span class="status-badge success">📈</span>
        </div>
        <span class="product-sales">27 594 DH</span>
      </div>
      
      <div class="progress-bar-container">
        <div class="progress-bar success" style="width: 28%;">
          <span class="progress-text">28%</span>
        </div>
        <div class="progress-shine"></div>
      </div>
      <div class="product-details">
        <div class="detail-item">
          <span class="detail-label">Objectif</span>
          <span class="detail-value">18 000 DH</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">En Cours</span>
          <span class="detail-value">291 DH</span>
        </div>
      </div>
      <div class="raf-section">
        <div class="raf-card">
          <div class="raf-icon">🎯</div>
          <div class="raf-content">
            <span class="raf-label">RAF (Reste Par Jour)</span>
            <span class="raf-value">-5 994 DH</span>
          </div>
        </div>
      </div>
      
    </div>
  
    <div class="product-item ">
      <div class="product-header">
        <div class="product-name-wrapper">
          <span class="product-name">BOUILLON</span>
          <span class="status-badge warning">⚠</span>
        </div>
        <span class="product-sales">29 250 DH</span>
      </div>
      
      <div class="progress-bar-container">
        <div class="progress-bar warning" style="width: 42%;">
          <span class="progress-text">-42%</span>
        </div>
        <div class="progress-shine"></div>
      </div>
      <div class="product-details">
        <div class="detail-item">
          <span class="detail-label">Objectif</span>
          <span class="detail-value">42 000 DH</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">En Cours</span>
          <span class="detail-value">1 780 DH</span>
        </div>
      </div>
      <div class="raf-section">
        <div class="raf-card">
          <div class="raf-icon">🎯</div>
          <div class="raf-content">
            <span class="raf-label">RAF (Reste Par Jour)</span>
            <span class="raf-value">21 149 DH</span>
          </div>
        </div>
      </div>
      
    </div>
  
      </div>
      
    <div class="card-footer">
      <div class="total-header">
        <h2>Chiffre d'Affaires Total (TTC)</h2>
        <div class="total-amount">195 894 <span class="currency">DH</span></div>
      </div>
      <div class="progress-bar-container large">
        <div class="progress-bar warning" style="width: 4%;">
          <span class="progress-text">-4%</span>
        </div>
        <div class="progress-shine"></div>
      </div>

      <!-- RAF Card matching other cards style -->
      <div class="big-raf-card">
        <div class="raf-header">
          <div class="raf-icon-header">🎯</div>
          <div class="raf-title-section">
            <h3>Reste À Faire (RAF)</h3>
            <p class="raf-motivation">Objectif en vue ! Continuez cet élan 💪</p>
          </div>
        </div>

        <div class="raf-main-content">
          <div class="raf-big-number">
            <span class="raf-amount">8 105</span>
            <span class="raf-currency">DH / Jour</span>
          </div>
          <div class="raf-daily-target">
            Reste à atteindre chaque jour
          </div>
        </div>

        <div class="raf-progress-section">
          <div class="raf-mini-stats">
            <div class="raf-mini-stat">
              <span class="mini-stat-icon">📅</span>
              <span class="mini-stat-value">-3 jours</span>
              <span class="mini-stat-label">restants</span>
            </div>
            <div class="raf-mini-stat">
              <span class="mini-stat-icon">⚡</span>
              <span class="mini-stat-value">8 105 DH</span>
              <span class="mini-stat-label">par jour</span>
            </div>
          </div>
        </div>
      </div>

      <div class="total-details-grid">
        <div class="total-detail-card">
          <div class="total-detail-icon">🎯</div>
          <div class="total-detail-content">
            <span class="total-detail-label">Objectif Global</span>
            <span class="total-detail-value">204 000 DH</span>
          </div>
        </div>
        <div class="total-detail-card">
          <div class="total-detail-icon">⏳</div>
          <div class="total-detail-content">
            <span class="total-detail-label">En Cours</span>
            <span class="total-detail-value">7 117 DH</span>
          </div>
        </div>
      </div>
    </div>
  
    </div>
  </div>
 </body>
 </html>

	<!DOCTYPE html>
	<html lang="fr">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Rapport de Vente Dynamique</title>
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

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

	:root {
	--color-primary: #4F46E5;
	--color-primary-light: #6366F1;
	--color-success: #10B981;
	--color-success-light: #34D399;
	--color-overachieve: #F59E0B;
	--color-overachieve-light: #FBBF24;
	--color-warning: #EF4444;
	--color-warning-light: #F87171;
	--color-background: #F8FAFC;
	--color-card-bg: #FFFFFF;
	--color-text-primary: #1E293B;
	--color-text-secondary: #64748B;
	--color-border: #E2E8F0;
	--border-radius: 16px;
	--box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--box-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	}

	body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	margin: 0;
	padding: 20px;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	min-height: 100vh;
	color: var(--color-text-primary);
	}

	.report-card {
	background-color: var(--color-card-bg);
	border-radius: 24px;
	box-shadow: var(--box-shadow-lg);
	width: 100%;
	max-width: 650px;
	overflow: hidden;
	animation: fadeInUp 0.6s ease-out;
	}

	@keyframes fadeInUp {
	from {
	opacity: 0;
	transform: translateY(30px);
	}
	to {
	opacity: 1;
	transform: translateY(0);
	}
	}

	.card-header {
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
	color: white;
	padding: 40px 32px;
	text-align: center;
	position: relative;
	overflow: hidden;
	}

	.header-icon {
	font-size: 3em;
	margin-bottom: 12px;
	animation: bounce 2s ease-in-out infinite;
	}

	@keyframes bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
	}

	.card-header h1 {
	margin: 0 0 8px 0;
	font-size: 1.75em;
	font-weight: 700;
	position: relative;
	z-index: 1;
	}

	.header-subtitle {
	margin: 0 0 16px 0;
	font-size: 1em;
	opacity: 0.95;
	font-weight: 400;
	position: relative;
	z-index: 1;
	}

	.activity-badge {
	display: inline-block;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(10px);
	padding: 8px 20px;
	border-radius: 50px;
	font-weight: 600;
	font-size: 0.9em;
	border: 1px solid rgba(255, 255, 255, 0.3);
	position: relative;
	z-index: 1;
	}

	.card-body {
	padding: 24px 32px;
	}

	/* Qualitative KPI styles */
	.qualitative-kpis {
	margin-bottom: 30px;
	}

	.qualitative-kpis h2 {
	text-align: center;
	margin-bottom: 20px;
	font-weight: 700;
	color: var(--color-primary);
	}

	.kpi-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 15px;
	margin-bottom: 20px;
	}

	.kpi-card {
	background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
	border-radius: 12px;
	padding: 20px;
	text-align: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	border: 1px solid var(--color-border);
	transition: all 0.3s ease;
	}

	.kpi-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
	}

	.kpi-title {
	font-size: 1.3em;
	font-weight: 700;
	margin-bottom: 12px;
	color: var(--color-primary);
	}

	.kpi-value {
	font-size: 2em;
	font-weight: 800;
	margin-bottom: 6px;
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	}

	.kpi-desc {
	font-size: 0.9em;
	color: var(--color-text-secondary);
	}

	.product-item {
	padding: 24px;
	margin-bottom: 16px;
	border-radius: var(--border-radius);
	background: linear-gradient(135deg, #FAFBFC 0%, #FFFFFF 100%);
	border: 1px solid var(--color-border);
	transition: all 0.3s ease;
	}

	.product-item:hover {
	transform: translateY(-2px);
	box-shadow: var(--box-shadow-lg);
	border-color: var(--color-primary-light);
	}

	.product-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
	}

	.product-name-wrapper {
	display: flex;
	align-items: center;
	gap: 12px;
	}

	.product-name {
	font-size: 1.15em;
	font-weight: 700;
	color: var(--color-text-primary);
	}

	.status-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	font-size: 0.85em;
	font-weight: 700;
	color: white;
	}

	.status-badge.success {
	background: linear-gradient(135deg, var(--color-success), var(--color-success-light));
	}

	.status-badge.over-achieved {
	background: linear-gradient(135deg, var(--color-overachieve), var(--color-overachieve-light));
	}

	.status-badge.warning {
	background: linear-gradient(135deg, var(--color-warning), var(--color-warning-light));
	}

	.product-sales {
	font-size: 1.35em;
	font-weight: 800;
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	}

	.progress-bar-container {
	background-color: var(--color-border);
	border-radius: 50px;
	height: 32px;
	position: relative;
	overflow: hidden;
	margin-bottom: 16px;
	}

	.progress-bar-container.large {
	height: 40px;
	}

	.progress-bar {
	height: 100%;
	border-radius: 50px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
	overflow: hidden;
	}

	.progress-bar.success {
	background: linear-gradient(90deg, var(--color-success), var(--color-success-light));
	}

	.progress-bar.over-achieved {
	background: linear-gradient(90deg, var(--color-overachieve), var(--color-overachieve-light));
	}

	.progress-bar.warning {
	background: linear-gradient(90deg, var(--color-warning), var(--color-warning-light));
	}

	.progress-shine {
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
	animation: shine 2s infinite;
	}

	@keyframes shine {
	to { left: 100%; }
	}

	.progress-text {
	font-weight: 700;
	font-size: 0.9em;
	color: white;
	text-shadow: 0 1px 2px rgba(0,0,0,0.2);
	position: relative;
	z-index: 1;
	}

	.product-details {
	display: flex;
	justify-content: space-between;
	margin-bottom: 12px;
	}

	.raf-section {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 2px solid var(--color-border);
	}

	.raf-card {
	background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
	border: 2px solid #F59E0B;
	border-radius: 12px;
	padding: 20px;
	display: flex;
	align-items: center;
	gap: 16px;
	box-shadow: 0 4px 6px rgba(245, 158, 11, 0.2);
	transition: all 0.3s ease;
	}

	.raf-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 12px rgba(245, 158, 11, 0.3);
	}

	.raf-icon {
	font-size: 2.5em;
	animation: pulse-raf 2s ease-in-out infinite;
	}

	@keyframes pulse-raf {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.1); }
	}

	.raf-content {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
	}

	.raf-label {
	font-size: 0.85em;
	font-weight: 700;
	color: #92400E;
	text-transform: uppercase;
	letter-spacing: 1px;
	}

	.raf-value {
	font-size: 1.6em;
	font-weight: 800;
	color: #B45309;
	text-shadow: 0 1px 2px rgba(0,0,0,0.1);
	}

	.detail-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	}

	.detail-label {
	font-size: 0.8em;
	color: var(--color-text-secondary);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	}

	.detail-value {
	font-size: 0.95em;
	color: var(--color-text-primary);
	font-weight: 600;
	}

	.zero-sales {
	opacity: 0.6;
	}

	.zero-message {
	text-align: center;
	padding: 16px;
	color: var(--color-text-secondary);
	font-style: italic;
	}

	.card-footer {
	background: linear-gradient(135deg, #F8FAFC 0%, #EFF6FF 100%);
	padding: 32px;
	border-top: 1px solid var(--color-border);
	}

	.total-header {
	text-align: center;
	margin-bottom: 20px;
	}

	.total-header h2 {
	font-size: 1.1em;
	color: var(--color-text-secondary);
	font-weight: 600;
	margin-bottom: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
	}

	.total-amount {
	font-size: 2.5em;
	font-weight: 800;
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	}

	.currency {
	font-size: 0.6em;
	opacity: 0.8;
	}

	/* RAF Card matching existing card style */
	.big-raf-card {
	background: white;
	border-radius: 12px;
	border: 1px solid var(--color-border);
	padding: 24px;
	margin: 24px 0;
	box-shadow: var(--box-shadow);
	transition: all 0.3s ease;
	}

	.big-raf-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--box-shadow-lg);
	}

	.raf-header {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 2px solid var(--color-border);
	}

	.raf-icon-header {
	font-size: 2.5em;
	animation: pulse-raf 2s ease-in-out infinite;
	}

	.raf-title-section h3 {
	font-size: 1.3em;
	font-weight: 700;
	color: var(--color-text-primary);
	margin-bottom: 4px;
	}

	.raf-motivation {
	font-size: 0.9em;
	color: var(--color-text-secondary);
	margin: 0;
	}

	.raf-main-content {
	text-align: center;
	padding: 20px 0;
	margin-bottom: 20px;
	}

	.raf-big-number {
	margin-bottom: 12px;
	}

	.raf-amount {
	font-size: 3em;
	font-weight: 800;
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	}

	.raf-currency {
	font-size: 1.2em;
	font-weight: 600;
	color: var(--color-text-secondary);
	margin-left: 8px;
	}

	.raf-daily-target {
	font-size: 1.1em;
	color: var(--color-text-primary);
	font-weight: 500;
	}

	.raf-daily-target strong {
	color: var(--color-primary);
	font-weight: 700;
	}

	.raf-progress-section {
	padding-top: 16px;
	border-top: 1px solid var(--color-border);
	}

	.raf-mini-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	}

	.raf-mini-stat {
	background: linear-gradient(135deg, #FAFBFC 0%, #FFFFFF 100%);
	border: 1px solid var(--color-border);
	border-radius: 8px;
	padding: 16px;
	text-align: center;
	transition: all 0.3s ease;
	}

	.raf-mini-stat:hover {
	transform: translateY(-1px);
	box-shadow: var(--box-shadow);
	}

	.mini-stat-icon {
	font-size: 1.5em;
	display: block;
	margin-bottom: 8px;
	}

	.mini-stat-value {
	font-size: 1.1em;
	font-weight: 700;
	color: var(--color-primary);
	display: block;
	margin-bottom: 4px;
	}

	.mini-stat-label {
	font-size: 0.8em;
	color: var(--color-text-secondary);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	}

	.total-details-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 24px;
	}

	.total-detail-card {
	background: white;
	padding: 20px;
	border-radius: 12px;
	border: 1px solid var(--color-border);
	display: flex;
	align-items: center;
	gap: 16px;
	transition: all 0.3s ease;
	}

	.total-detail-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--box-shadow);
	}

	.total-detail-icon {
	font-size: 2em;
	}

	.total-detail-content {
	display: flex;
	flex-direction: column;
	gap: 4px;
	}

	.total-detail-label {
	font-size: 0.8em;
	color: var(--color-text-secondary);
	font-weight: 500;
	}

	.total-detail-value {
	font-size: 1.1em;
	color: var(--color-text-primary);
	font-weight: 700;
	}

	@media (max-width: 600px) {
	body {
	padding: 10px;
	}

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

	.card-body {
	padding: 16px 20px;
	}

	.product-item {
	padding: 16px;
	}

	.kpi-cards {
	grid-template-columns: 1fr;
	}

	.total-details-grid {
	grid-template-columns: 1fr;
	}

	.total-amount {
	font-size: 2em;
	}

	.raf-header {
	flex-direction: column;
	text-align: center;
	}

	.raf-amount {
	font-size: 2.2em;
	}

	.raf-mini-stats {
	grid-template-columns: 1fr;
	}
	}
	</style>
	</head>
	<body>
	<div id="report-container">
	<div class="report-card">

	<div class="card-header">
	<div class="header-icon">📊</div>
	<h1>Bonjour, Y59 EL GHANMI MOHAMED 👋</h1>
	<p class="header-subtitle">Rapport de Vente (Valeurs en TTC)</p>
	<div class="activity-badge">SOM</div>
	</div>

	<div class="card-body">

	<section class="qualitative-kpis">
	<h2>📊 KPI Qualitatifs - Indicateurs de Performance</h2>
	<div class="kpi-cards">
	<div class="kpi-card">
	<div class="kpi-icon">📅</div>
	<div class="kpi-title">CLT PROGRAMME</div>
	<div class="kpi-value">583</div>
	<div class="kpi-desc">Clients programmés</div>
	</div>
	<div class="kpi-card">
	<div class="kpi-icon">✅</div>
	<div class="kpi-title">ACM</div>
	<div class="kpi-value">94.21%</div>
	</div>
	<div class="kpi-card">
	<div class="kpi-icon">🎯</div>
	<div class="kpi-title">OBJ L/BL</div>
	<div class="kpi-value">101.75%</div>
	<div class="kpi-desc">Moyenne: 5.8</div>
	<div class="kpi-desc">Objectif: 5.7</div>
	</div>
	<div class="kpi-card">
	<div class="kpi-icon">📈</div>
	<div class="kpi-title">TSM</div>
	<div class="kpi-value">80.37%</div>
	</div>
	<div class="kpi-card">
	<div class="kpi-icon">📋</div>
	<div class="kpi-title">RAF TSM</div>
	<div class="kpi-value">114</div>
	<div class="kpi-desc">BL Restants</div>
	</div>
	<div class="kpi-card">
	<div class="kpi-icon">👥</div>
	<div class="kpi-title">RAF ACM</div>
	<div class="kpi-value">33</div>
	<div class="kpi-desc">Clients Restants</div>
	</div>
	</div>
	</section>



	<div class="product-item ">
	<div class="product-header">
	<div class="product-name-wrapper">
	<span class="product-name">LEVURE</span>
	<span class="status-badge warning">⚠</span>
	</div>
	<span class="product-sales">88 178 DH</span>
	</div>

	<div class="progress-bar-container">
	<div class="progress-bar warning" style="width: 8%;">
	<span class="progress-text">-8%</span>
	</div>
	<div class="progress-shine"></div>
	</div>
	<div class="product-details">
	<div class="detail-item">
	<span class="detail-label">Objectif</span>
	<span class="detail-value">80 000 DH</span>
	</div>
	<div class="detail-item">
	<span class="detail-label">En Cours</span>
	<span class="detail-value">3 426 DH</span>
	</div>
	</div>
	<div class="raf-section">
	<div class="raf-card">
	<div class="raf-icon">🎯</div>
	<div class="raf-content">
	<span class="raf-label">RAF (Reste Par Jour)</span>
	<span class="raf-value">7 820 DH</span>
	</div>
	</div>
	</div>

	</div>

	<div class="product-item ">
	<div class="product-header">
	<div class="product-name-wrapper">
	<span class="product-name">MGM</span>
	<span class="status-badge success">📈</span>
	</div>
	<span class="product-sales">27 594 DH</span>
	</div>

	<div class="progress-bar-container">
	<div class="progress-bar success" style="width: 28%;">
	<span class="progress-text">28%</span>
	</div>
	<div class="progress-shine"></div>
	</div>
	<div class="product-details">
	<div class="detail-item">
	<span class="detail-label">Objectif</span>
	<span class="detail-value">18 000 DH</span>
	</div>
	<div class="detail-item">
	<span class="detail-label">En Cours</span>
	<span class="detail-value">291 DH</span>
	</div>
	</div>
	<div class="raf-section">
	<div class="raf-card">
	<div class="raf-icon">🎯</div>
	<div class="raf-content">
	<span class="raf-label">RAF (Reste Par Jour)</span>
	<span class="raf-value">-5 994 DH</span>
	</div>
	</div>
	</div>

	</div>

	<div class="product-item ">
	<div class="product-header">
	<div class="product-name-wrapper">
	<span class="product-name">BOUILLON</span>
	<span class="status-badge warning">⚠</span>
	</div>
	<span class="product-sales">29 250 DH</span>
	</div>

	<div class="progress-bar-container">
	<div class="progress-bar warning" style="width: 42%;">
	<span class="progress-text">-42%</span>
	</div>
	<div class="progress-shine"></div>
	</div>
	<div class="product-details">
	<div class="detail-item">
	<span class="detail-label">Objectif</span>
	<span class="detail-value">42 000 DH</span>
	</div>
	<div class="detail-item">
	<span class="detail-label">En Cours</span>
	<span class="detail-value">1 780 DH</span>
	</div>
	</div>
	<div class="raf-section">
	<div class="raf-card">
	<div class="raf-icon">🎯</div>
	<div class="raf-content">
	<span class="raf-label">RAF (Reste Par Jour)</span>
	<span class="raf-value">21 149 DH</span>
	</div>
	</div>
	</div>

	</div>

	</div>

	<div class="card-footer">
	<div class="total-header">
	<h2>Chiffre d'Affaires Total (TTC)</h2>
	<div class="total-amount">195 894 <span class="currency">DH</span></div>
	</div>
	<div class="progress-bar-container large">
	<div class="progress-bar warning" style="width: 4%;">
	<span class="progress-text">-4%</span>
	</div>
	<div class="progress-shine"></div>
	</div>

	<!-- RAF Card matching other cards style -->
	<div class="big-raf-card">
	<div class="raf-header">
	<div class="raf-icon-header">🎯</div>
	<div class="raf-title-section">
	<h3>Reste À Faire (RAF)</h3>
	<p class="raf-motivation">Objectif en vue ! Continuez cet élan 💪</p>
	</div>
	</div>

	<div class="raf-main-content">
	<div class="raf-big-number">
	<span class="raf-amount">8 105</span>
	<span class="raf-currency">DH / Jour</span>
	</div>
	<div class="raf-daily-target">
	Reste à atteindre chaque jour
	</div>
	</div>

	<div class="raf-progress-section">
	<div class="raf-mini-stats">
	<div class="raf-mini-stat">
	<span class="mini-stat-icon">📅</span>
	<span class="mini-stat-value">-3 jours</span>
	<span class="mini-stat-label">restants</span>
	</div>
	<div class="raf-mini-stat">
	<span class="mini-stat-icon">⚡</span>
	<span class="mini-stat-value">8 105 DH</span>
	<span class="mini-stat-label">par jour</span>
	</div>
	</div>
	</div>
	</div>

	<div class="total-details-grid">
	<div class="total-detail-card">
	<div class="total-detail-icon">🎯</div>
	<div class="total-detail-content">
	<span class="total-detail-label">Objectif Global</span>
	<span class="total-detail-value">204 000 DH</span>
	</div>
	</div>
	<div class="total-detail-card">
	<div class="total-detail-icon">⏳</div>
	<div class="total-detail-content">
	<span class="total-detail-label">En Cours</span>
	<span class="total-detail-value">7 117 DH</span>
	</div>
	</div>
	</div>
	</div>

	</div>
	</div>
	</body>
	</html>