/* Extrait de NEXJTS/components/LuxuryEstablishment.js — bloc <style jsx> (l. 140-289).
   Seule modification : la couleur du pays, interpolée en JS (${colors.primary}),
   devient la variable --luxury-primary, posée en ligne sur .luxury-section. */

        .luxury-section {
          background: white;
          border-radius: 12px;
          overflow: hidden;
          margin: 3rem 0;
          box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
          position: relative;
          font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }
        
        .luxury-section::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 4px;
          background: var(--luxury-primary);
        }
        
        .luxury-header {
          padding: 40px 40px 20px;
          text-align: center;
        }
        
        .luxury-header h2 {
          font-family: 'Playfair Display', Georgia, serif;
          font-size: 28px;
          font-weight: 400;
          color: #111111;
          margin-bottom: 16px;
          letter-spacing: -0.02em;
          line-height: 1.3;
        }
        
        .luxury-description {
          font-size: 16px;
          line-height: 1.6;
          color: var(--gray-500, #6b7280);
          max-width: 700px;
          margin: 0 auto;
        }
        
        .features-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
          gap: 24px;
          padding: 20px 40px 40px;
        }
        
        .feature-card {
          background: var(--cream, #F5F5F0);
          border-radius: 12px;
          overflow: hidden;
          transition: all 0.3s ease;
          opacity: 0;
          transform: translateY(20px);
          animation: fadeInUp 0.5s ease forwards;
          animation-delay: var(--animation-delay, 0ms);
        }
        
        @keyframes fadeInUp {
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        
        .feature-card:hover {
          transform: translateY(-6px);
          box-shadow: 0 12px 25px rgba(0, 0, 0, 0.07);
        }
        
        .feature-content {
          padding: 24px;
        }
        
        .feature-icon {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 40px;
          height: 40px;
          border-radius: 10px;
          background: var(--luxury-primary);
          color: white;
          margin-bottom: 16px;
          position: relative;
          overflow: hidden;
        }
        
        .feature-icon::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(255, 255, 255, 0.2);
          clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%);
        }
        
        .feature-card h3 {
          font-family: 'Playfair Display', Georgia, serif;
          font-size: 18px;
          font-weight: 600;
          color: #000000;
          margin-bottom: 12px;
          letter-spacing: -0.01em;
        }
        
        .feature-card p {
          color: var(--gray-600, #4b5563);
          line-height: 1.6;
          font-size: 15px;
        }
        
        .luxury-footer {
          background: #f8f8f8;
          padding: 24px 40px;
          text-align: center;
          border-top: 1px solid #eeeeee;
        }
        
        .luxury-footer p {
          font-size: 14px;
          color: var(--gray-500, #6b7280);
          line-height: 1.5;
          max-width: 700px;
          margin: 0 auto;
        }
        
        @media (max-width: 768px) {
          .luxury-header {
            padding: 30px 24px 15px;
          }
          
          .luxury-header h2 {
            font-size: 22px;
          }
          
          .features-grid {
            padding: 15px 24px 30px;
            gap: 16px;
          }
          
          .luxury-footer {
            padding: 20px 24px;
          }
        }
