:root {
    --primary-color: #e74c3c; /* Rouge vif pour le branding */
    --secondary-color: #ff7661;
    --text-dark: #333;
    --text-light: #fff;
    --link-color: #555;
    --background-light: #f9f9f9;
    --background-dark1: #1e1e1e;
    --background-dark2: #222;
    --card-background: #fff;
    --main-font: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  
  body {
    font-family: var(--main-font);
    background: var(--background-light);
    margin: 0;
    padding: 0;
    color: var(--text-dark);
    font-weight: 400; 
    -webkit-font-smoothing: antialiased;
  }
  
  /* Appliquer la police moderne à tous les éléments de texte */
  h1, h2, h3, h4, h5, h6, p, a, li, span, strong, em, div, button {
      font-family: var(--main-font);
  }
  
  /* --- HEADER & NAV --- */
  header {
    background-color: var(--primary-color);
    color: var(--text-light);
    text-align: center;
    padding: 20px 10px;
  }
  /* CORRECTION: Rendre le logo Ratsplit discret comme demandé */
  header h1 { 
      font-family: var(--main-font);
      margin-bottom: 5px; 
      font-weight: 600; /* Plus léger que 800 */
      font-size: 2em; /* Taille légèrement plus petite */
      letter-spacing: 0; 
      opacity: 0.95; /* Rendre un peu discret */
  } 
  header p { font-weight: 500; font-size: 1em; opacity: 0.9; }
  
  nav {
    background: var(--secondary-color);
    text-align: center;
    padding: 10px;
  }
  nav a {
    margin: 0 10px;
    color: var(--text-light);
    text-decoration: none;
    font-weight: 600; 
    font-size: 15px;
    padding: 8px 12px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    text-transform: uppercase; 
  }
  nav a:active, nav a:hover { background-color: var(--primary-color); }
  
  /* --- PRODUCT CARD --- */
  .product-grid {
    display: flex;
    justify-content: center;
    padding: 30px 10px 10px;
  }
  .product-card {
    background: var(--card-background);
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    text-align: center;
    max-width: 420px; 
    width: 90%;
    transition: transform 0.3s ease;
  }
  .product-card:hover { transform: translateY(-5px); }
  
  .product-card img.product-logo {
    width: 200px; 
    max-width: 80%; 
    height: auto; 
    margin-bottom: 20px;
    /* CORRECTION: Retirer le fond blanc et l'ombre pour la carte principale (qui est déjà blanche) */
    background: none; 
    box-shadow: none; 
    border-radius: 0; 
  }
  
  /* AVATARS */
  .user-avatars { display: flex; justify-content: center; margin: 15px 0; }
  .user-avatars img {
    width: 34px; height: 34px; border-radius: 50%;
    border: 3px solid var(--card-background);
    margin-left: -12px; background: var(--card-background);
  }
  
  /* PRICE */
  .price-section { margin: 15px 0; }
  .price { color: var(--primary-color); font-size: 2em; font-weight: 800; margin: 5px 0; letter-spacing: -0.5px; }
  .price-comparison { font-size: 1em; color: #666; margin: 5px 0 15px 0; font-weight: 500; }
  .price-comparison del { color: #999; text-decoration-thickness: 2px; }
  
  /* BENEFITS - TITRE MARKETING MODIFIÉ */
  .benefits-box {
    background: #fff8f7; padding: 20px;
    border-radius: 16px; text-align: left; margin: 25px 0;
  }
  .benefits-box strong { display: block; margin-bottom: 12px; font-size: 1.1em; font-weight: 700; color: var(--text-dark); }
  .benefits-box ul { list-style-type: none; padding-left: 0; font-size: 0.95em; margin: 0; }
  .benefits-box ul li { margin-bottom: 8px; padding-left: 24px; position: relative; font-weight: 500; color: #444; }
  .benefits-box ul li::before {
      content: '✓'; color: var(--primary-color); position: absolute; left: 0; font-weight: 800;
  }
  /* Mettre en gras le premier bénéfice (l'Essai Gratuit) */
  .benefits-box ul li:first-child { 
      font-weight: 700; 
      color: var(--primary-color); /* Mettre le texte en couleur pour l'Essai Gratuit */
  }
  
  
  /* BUTTONS */
  .button-shared-style {
    display: block; width: 100%; box-sizing: border-box;
    margin: 20px auto 15px auto; padding: 16px 0;
    text-align: center; text-decoration: none; border-radius: 50px;
    font-weight: 700; font-size: 1.1em;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
  }
  .button-shared-style:active { transform: scale(0.98); }
  .subscribe-btn { background-color: var(--primary-color); color: var(--text-light); }
  .subscribe-btn:hover { background-color: #c0392b; box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4); }
  
  .product-card .more-info-link {
    display: inline-block; margin-top: 5px; color: #888;
    text-decoration: none; font-size: 0.9em; cursor: pointer;
    font-weight: 600; border-bottom: 1px dotted #ccc; transition: color 0.2s;
  }
  .product-card .more-info-link:hover { color: var(--primary-color); border-bottom-color: var(--primary-color); }
  
  /* SECTIONS */
  .features-title, .reviews-title { 
    text-align: center; 
    margin: 60px 20px 30px; 
    font-size: 2em; 
    font-weight: 800; 
    color: var(--text-dark); 
    letter-spacing: -0.5px; 
  }
  .features-title span, .reviews-title span { color: var(--primary-color); }
  
  .features-section {
    display: flex;
    flex-wrap: nowrap; 
    justify-content: center; 
    gap: 30px;
    padding: 10px 20px 50px;
    max-width: 100%; 
    margin: 0 auto;
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; 
  }
  .features-section::-webkit-scrollbar {
      display: none; 
  }
  .feature-box { 
    text-align: center; 
    padding: 10px;
    flex: 0 0 auto; 
    width: 180px; 
  }
  .feature-box h4 { font-size: 1.1em; font-weight: 700; margin-bottom: 8px; }
  .feature-box p { font-size: 0.95em; color: #666; line-height: 1.6; }
  .feature-box img {
    width: 50px; height: 50px; padding: 15px;
    background-color: white; border-radius: 20px;
    margin-bottom: 15px; box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  }
  
  /* REVIEWS SCROLL */
  .reviews-section { padding: 20px 0; background: #fcfcfc; position: relative; margin: 0 auto; }
  #reviewContainer {
    display: flex; overflow-x: auto; padding: 20px 60px; scroll-behavior: smooth;
    -ms-overflow-style: none; scrollbar-width: none; scroll-snap-type: x mandatory;
  }
  #reviewContainer::-webkit-scrollbar { display: none; }
  
  .review-card {
    flex: 0 0 auto; background: var(--card-background); margin: 0 15px; padding: 25px;
    border-radius: 16px; width: 300px; white-space: normal;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); scroll-snap-align: center; border: 1px solid #eee;
  }
  .review-card img { width: 45px; height: 45px; border-radius: 50%; margin-bottom: 12px; }
  .review-card h5 { font-weight: 700; font-size: 1.05em; margin: 0 0 8px 0; }
  .review-card p { font-size: 0.95em; color: #555; line-height: 1.5; margin: 0; }
  
  /* BOUTONS DEFILEMENT CLASSIQUES (Non-transparents) */
  .scroll-button {
    position: absolute; top: 50%; transform: translateY(-50%);
    background-color: white; 
    color: var(--text-dark); 
    border: 1px solid #eee;
    width: 45px; height: 45px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; border-radius: 50%; z-index: 10; font-size: 18px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
    transition: all 0.2s;
  }
  .scroll-button:hover { background: var(--primary-color); color: white; transform: translateY(-50%) scale(1.1); }
  .scroll-left { left: 20px; }
  .scroll-right { right: 20px; }
  
  /* FOOTER */
  .how-it-works { 
    background: var(--background-dark1); 
    color: var(--text-light); 
    text-align: center; 
    padding: 50px 20px 0 20px;
  }
  .how-it-works h2 { font-size: 1.8em; margin-bottom: 20px;}
  .how-it-works p { max-width: 700px; margin: 10px auto; font-size: 1em; line-height: 1.6; color: #ddd;}
  
  .how-it-works p[data-i18n="howItWorksSub"] { 
    margin-top: 10px; 
    margin-bottom: 0; 
    padding-bottom: 0; 
  } 
  
  
  footer { 
      background: var(--background-dark2); 
      color: #888; 
      text-align: center; 
      padding: 40px 20px; 
      padding-top: 30px; 
      font-size: 0.9em; 
  }
  
  footer p[data-i18n="footerTrust"] {
      padding-top: 15px; 
      border-top: 1px solid rgba(255, 255, 255, 0.1); 
      margin-top: 20px; 
      color: #ccc; 
  }
  
  footer .payment-icons {
      padding: 15px 0 20px; 
  }
  
  footer .payment-icons img { 
      height: 24px; 
      margin: 0 4px; 
      background-color: white; 
      padding: 4px 6px; 
      border-radius: 4px; 
      vertical-align: middle; 
  }
  
  /* --- MODERN MODAL (Popup) --- */
  .modal {
    display: none; position: fixed; z-index: 2000; left: 0; top: 0;
    width: 100%; height: 100%; overflow: hidden;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    transition: opacity 0.3s ease;
  }
  
  .modal-content {
    background-color: #fff; 
    margin: 10vh auto; /* Positionnement par défaut, ajusté pour être plus haut */
    padding: 0;
    border-radius: 24px; width: 90%; max-width: 550px; position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden; border: 1px solid rgba(255,255,255,0.2);
  }
  
  @keyframes slideUp {
    from { opacity: 0; transform: translateY(50px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  
  .modal-header {
    background: #fdfdfd; padding: 20px 30px; border-bottom: 1px solid #eee;
    display: flex; justify-content: space-between; align-items: center;
  }
  .modal-header h2 { margin: 0; font-size: 1.25em; color: var(--text-dark); }
  
  .modal-body { padding: 30px; line-height: 1.7; color: #555; }
  .modal-main-desc { font-weight: 500; color: #333; margin-bottom: 15px !important; }
  
  .modal-body a { 
      color: var(--text-dark) !important; 
      text-decoration: underline; 
      transition: color 0.2s; 
  }
  .modal-body a:hover { 
      color: var(--primary-color) !important; 
  }
  /* Rendre le texte du lien a dans la modale de support plus grand et en gras */
  .modal-body a[href*="wa.me"], .modal-body a[href*="mailto"] {
      font-weight: 700 !important; 
  }
  
  .close-button-modern {
    background: #f0f0f0; color: #333; border: none;
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 18px; transition: background 0.2s;
  }
  .close-button-modern:hover { background: #e0e0e0; }
  
  .product-modal-layout { display: flex; gap: 20px; align-items: flex-start; }
  
  /* CORRECTION: LOGO MODAL POUR GÉRER LA TRANSPARENCE */
  .product-modal-img { 
      width: 80px; 
      height: auto; 
      /* AJUSTÉ: Retrait de l'ombre et du border-radius pour que le logo semble plus naturel */
      border-radius: 0; 
      box-shadow: none; 
      /* CONSERVÉ: Fond blanc pour les logos qui ont une transparence et qui seraient sur un fond gris/blanc */
      background-color: white; 
      padding: 5px; /* Petit padding pour éviter de coller aux bords si le logo est un carré transparent */
  }
  
  .price-highlight {
      color: var(--primary-color); background: #fff0ee; 
      padding: 2px 8px; border-radius: 6px; font-weight: 700;
      white-space: nowrap; /* CORRECTION: Empêcher la coupure du prix/suffixe */
  }
  
  .modal-main-desc del {
      color: #999; 
      text-decoration-thickness: 2px;
      white-space: nowrap; /* CORRECTION: Empêcher la coupure du prix barré */
  }
  
  /* --- MEDIA QUERIES (Mobile Optimization) --- */
  @media (max-width: 600px) {
     /* 1. Général */
     .product-modal-layout { flex-direction: column; align-items: center; text-align: center; }
     .price { font-size: 1.8em; }
     .modal-content { 
          width: 95%; 
          margin: 10vh auto; /* AJUSTÉ: Pour centrer la modale plus haut, améliorant l'ergonomie */
     }
     .how-it-works h2 { font-size: 1.5em; }
     
     /* 2. Carte Produit */
     .product-card { max-width: 350px; } 
     .product-card img.product-logo { 
          width: 180px; 
          margin-bottom: 15px; 
          background: none; 
          box-shadow: none; 
          border-radius: 0; 
     } 
  
     /* 3. Titres */
     .features-title, .reviews-title { 
          margin: 40px 20px 20px; 
          font-size: 1.6em; 
      }
  
     /* 4. Features (Badges) - AFFICHAGE VERTICAL (défilement vers le bas) */
     .features-section {
          flex-direction: column; 
          flex-wrap: nowrap; 
          justify-content: flex-start; 
          align-items: center; 
          padding: 10px 20px 30px;
          gap: 20px; 
          overflow-x: hidden; 
          max-width: 100%; 
          margin: 0;
      }
      .features-section::-webkit-scrollbar { display: none; }
      .feature-box { 
          flex: 0 0 auto; 
          width: 85%; 
          max-width: 300px;
          margin: 0;
          padding: 15px;
          background: var(--card-background); 
          border-radius: 12px;
          box-shadow: 0 2px 8px rgba(0,0,0,0.05);
          text-align: center; 
      }
      .feature-box h4 { font-size: 1.05em; margin-bottom: 5px; } 
      .feature-box p { 
          display: block; 
          font-size: 0.85em;
          color: #777;
      } 
      .feature-box img { 
           width: 40px; 
           height: 40px; 
           padding: 10px; 
           margin-bottom: 10px; 
           background-color: white; 
           border-radius: 20px; 
           box-shadow: 0 4px 10px rgba(0,0,0,0.05);
      }
      
      /* 5. Reviews - Boutons & Cartes */
      #reviewContainer { 
          padding: 20px 0px; 
          justify-content: flex-start; 
          padding-left: 10px; /* Moins de décalage */
      }
      .scroll-button { 
          width: 35px; 
          height: 35px;
          font-size: 14px; 
      }
      
      /* Repositionnement des boutons */
      .scroll-left { left: 5px; } 
      .scroll-right { right: 5px; } 
      
      .review-card { 
          width: 70vw; /* Taille encore plus réduite */
          max-width: 250px; /* Limite maximale plus petite */
          margin: 0 8px; /* Moins d'espace entre les cartes */
          padding: 15px; /* Réduire le padding de la carte */
      }
      
      /* 6. Modale (Spécifique Mobile) */
      .product-modal-img { 
          width: 80px; 
          max-width: 90%; /* S'assurer qu'elle ne déborde pas */
      }
  }