* {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
       max-width: 100%;
   }


   html,
   body {
       max-width: 100%;
       overflow-x: hidden;
       /* empêche le scroll horizontal */
   }

   body {
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
       line-height: 1.6;
       color: #000;
   }

   /* Navigation */
   nav {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       z-index: 50;
       transition: all 0.3s;
       background: transparent;
   }

   nav.scrolled {
       background: rgba(255, 255, 255, 0.95);
       backdrop-filter: blur(16px);
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   }

   .nav-container {
       max-width: 1280px;
       margin: 0 auto;
       padding: 1rem 1.5rem;
       display: flex;
       align-items: center;
       justify-content: space-between;
   }

   .logo-container {
       display: flex;
       align-items: center;
       gap: 0.5rem;
       cursor: pointer;
   }

   .logo-box {
       width: 2.5rem;
       height: 2.5rem;
       background: #348054;
       border-radius: 0.75rem;
       display: flex;
       align-items: center;
       justify-content: center;
       box-shadow: 0 4px 6px rgba(52, 128, 84, 0.3);
   }

   .logo-text {
       font-size: 1.5rem;
       font-weight: 700;
       color: #000;
   }

   .nav-links {
       display: flex;
       align-items: center;
       gap: 1rem;
   }

   .nav-link {
       font-size: 1rem;
       font-weight: 500;
       color: #374151;
       text-decoration: none;
       transition: color 0.2s;
   }

   .nav-link:hover {
       color: #348054;
   }

   .btn {
       padding: 0.5rem 1.5rem;
       border-radius: 0.5rem;
       font-weight: 600;
       cursor: pointer;
       transition: all 0.2s;
       border: none;
       text-decoration: none;
       display: inline-block;
   }

   .btn-subscription {
       padding: 17px 1.5rem 32px !important;
   }

   .btn-primary {
       background: #348054;
       color: white;
   }

   .btn-primary:hover {
       background: #2a6844;
   }

   /* Mobile menu */
   .mobile-menu {
       display: none;
   }

   @media (max-width: 768px) {
       .nav-links .nav-link {
           display: none;
       }

       .nav-links .btn {
           display: none;
       }

       .mobile-menu {
           display: flex;
           gap: 0.75rem;
       }

       .mobile-menu-btn {
           width: 2.5rem;
           height: 2.5rem;
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           gap: 0.25rem;
           background: transparent;
           border: none;
           cursor: pointer;
           border-radius: 0.5rem;
           transition: background 0.2s;
       }

       .mobile-menu-btn:hover {
           background: #f3f4f6;
       }

       .menu-line {
           width: 1.5rem;
           height: 0.125rem;
           background: #374151;
       }

       .mobile-login-btn {
           width: 2.5rem;
           height: 2.5rem;
           display: flex;
           align-items: center;
           justify-content: center;
           background: #348054;
           border-radius: 0.5rem;
           border: none;
           cursor: pointer;
       }
   }

   /* Hero Section */
   .hero {
       position: relative;
       padding: 9rem 1.5rem 13rem;
       overflow: hidden;
       background: linear-gradient(135deg, #ffffff 0%, #F9F0EA 50%, #ffffff 100%);
   }

   .hero-bg-circle-1 {
       position: absolute;
       top: 5rem;
       right: 2.5rem;
       width: 18rem;
       height: 18rem;
       background: rgba(52, 128, 84, 0.1);
       border-radius: 50%;
       filter: blur(60px);
   }

   .hero-bg-circle-2 {
       position: absolute;
       bottom: 5rem;
       left: 2.5rem;
       width: 24rem;
       height: 24rem;
       background: rgba(52, 128, 84, 0.05);
       border-radius: 50%;
       filter: blur(60px);
   }

   .hero-content {
       max-width: 80rem;
       margin: 30px auto;
       text-align: center;
       position: relative;
       z-index: 10;
   }

   .hero h1 {
       font-size: 3rem;
       font-weight: 800;
       margin-bottom: 1.5rem;
       line-height: 1.1;
       color: #000;
   }

   .hero .highlight {
       color: #348054;
   }

   .hero-description {
       font-size: 24px;
       color: #374151;
       margin-bottom: 2.5rem;
       max-width: 48rem;
       margin-left: auto;
       margin-right: auto;
       line-height: 30px;
   }

   .hero-buttons {
       display: flex;
       flex-direction: column;
       gap: 1rem;
       justify-content: center;
       align-items: center;
       margin-bottom: 4rem;
   }

   @media (min-width: 640px) {
       .hero h1 {
           font-size: 4.5rem;
           width: 80%;
           margin: 0 auto 20px;
           line-height: 66px;
       }

       .hero-buttons {
           flex-direction: row;
       }
   }

   .btn-large {
       padding: 0.8rem 2rem;
       font-size: 1.125rem;
       border-radius: 0.75rem;
       display: inline-flex;
       align-items: center;
       gap: 0.5rem;
   }

   .btn-outline {
       border: 2px solid #000;
       background: transparent;
       color: #000;
   }

   .btn-outline:hover {
       border-color: #348054;
       background: rgba(52, 128, 84, 0.05);
   }

   .hero-features {
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
       gap: 2rem;
       font-size: 0.875rem;
       color: #374151;
   }

   .hero-feature {
       display: flex;
       align-items: center;
       gap: 0.5rem;
   }

   /* Sections */
   .section {
       padding: 6rem 1.5rem;
   }

   .section-white {
       background: white;
   }

   .section-gradient {
       background: linear-gradient(135deg, #F9F0EA 0%, #F5E6DB 50%, #ffffff 100%);
       position: relative;
       overflow: hidden;
   }

   .container {
       max-width: 72rem;
       margin: 0 auto;
   }

   .container-game {

       margin: 0 auto;
   }

   .section-header {
       text-align: center;
       margin-bottom: 4rem;
   }

   .section-title {
       font-size: 2.5rem;
       font-weight: 700;
       margin-bottom: 1rem;
       color: #000;
   }

   .section-subtitle {
       font-size: 1.25rem;
       color: #374151;
       max-width: 48rem;
       margin: 0 auto;
   }

   @media (min-width: 768px) {
       .section-title {
           font-size: 3rem;
       }
   }

   /* Cards Grid */
   .cards-grid {
       display: grid;
       gap: 1.5rem;
       grid-template-columns: 1fr;
   }

   @media (min-width: 768px) {
       .cards-grid {
           grid-template-columns: repeat(3, 1fr);
       }
   }

   .card {
       background: white;
       border: 1px solid #d1d5db;
       border-radius: 1.5rem;
       padding: 2rem;
       transition: all 0.3s;
   }

   .card:hover {
       border-color: #348054;
       box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
   }

   .card-number {
       width: 3rem;
       height: 3rem;
       border-radius: 50%;
       border: 2px solid #348054;
       display: flex;
       align-items: center;
       justify-content: center;
       margin-bottom: 1.5rem;
       font-size: 1.25rem;
       font-weight: 700;
       color: #348054;
   }

   .card-title {
       font-size: 1.25rem;
       font-weight: 700;
       margin-bottom: 0.75rem;
       color: #000;
       text-align: center;
   }

   .card-description {
       font-size: 0.875rem;
       color: #374151;
       line-height: 1.75;
       text-align: center;
   }

   /* Feature Cards */
   .feature-card {
       background: white;
       border: 2px solid #e5e7eb;
       border-radius: 1.5rem;
       padding: 2rem;
       transition: all 0.3s;
   }

   .feature-card:hover {
       border-color: #348054;
       transform: translateY(-4px);
       box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
   }

   .feature-icon {
       width: 3.5rem;
       height: 3.5rem;
       border-radius: 0.75rem;
       background: #348054;
       display: flex;
       align-items: center;
       justify-content: center;
       margin-bottom: 1.5rem;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   }

   .feature-title {
       font-size: 1.5rem;
       font-weight: 700;
       margin-bottom: 1.5rem;
       color: #000;
   }

   .feature-list {
       list-style: none;
       padding: 0;
   }

   .feature-list li {
       display: flex;
       align-items: flex-start;
       gap: 0.75rem;
       margin-bottom: 1rem;
       color: #374151;
       line-height: 1.75;
   }

   /* Pricing Section */
   .pricing-grid {
       display: grid;
       gap: 1.5rem;
       max-width: 64rem;
       margin: 0 auto;
   }

   @media (min-width: 768px) {
       .pricing-grid {
           grid-template-columns: repeat(2, 1fr);
       }
   }

   .pricing-card {
       border: 2px solid #e5e7eb;
       border-radius: 1.5rem;
       padding: 1.5rem;
       background: white;
       position: relative;
       transition: all 0.3s;
   }

   .pricing-card:hover {
       box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
   }

   .pricing-card.featured {
       border-color: #348054;
       box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
   }

   .pricing-badge {
       position: absolute;
       top: 0;
       right: 0;
       background: #348054;
       color: white;
       padding: 0.25rem 0.75rem;
       font-size: 0.75rem;
       font-weight: 700;
       border-bottom-left-radius: 0.5rem;
       border-top-right-radius: 22px;
   }

   .pricing-header {
       display: flex;
       align-items: center;
       gap: 0.5rem;
       margin-bottom: 0.75rem;
   }

   .pricing-title {
       font-size: 1.25rem;
       font-weight: 700;
       color: #000;
   }

   .pricing-price {
       display: flex;
       align-items: baseline;
       gap: 0.5rem;
       margin-bottom: 1rem;
   }

   .price-large {
       font-size: 2.5rem;
       font-weight: 800;
       color: #348054;
   }

   .price-period {
       font-size: 0.875rem;
       color: #6b7280;
   }

   .pricing-features {
       list-style: none;
       padding: 0;
       margin-bottom: 1.5rem;
   }

   .pricing-features li {
       display: flex;
       align-items: center;
       gap: 0.5rem;
       font-size: 0.875rem;
       color: #374151;
       margin-bottom: 0.5rem;
   }

   .pricing-footer {
       margin-top: 2rem;
       text-align: center;
       font-size: 0.875rem;
       color: #6b7280;
   }

   /* Testimonials */
   .testimonials-grid {
       display: grid;
       gap: 2rem;
       grid-template-columns: 1fr;
   }

   @media (min-width: 768px) {
       .testimonials-grid {
           grid-template-columns: repeat(3, 1fr);
       }
   }

   .testimonial-card {
       background: rgba(255, 255, 255, 0.8);
       backdrop-filter: blur(4px);
       border: 2px solid rgba(255, 255, 255, 0.5);
       border-radius: 1rem;
       padding: 2rem;
       transition: all 0.3s;
   }

   .testimonial-card:hover {
       border-color: #348054;
       box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
   }

   .stars {
       display: flex;
       gap: 0.25rem;
       margin-bottom: 1rem;
   }

   .star {
       width: 1.25rem;
       height: 1.25rem;
       fill: #348054;
       color: #348054;
   }

   .testimonial-text {
       color: #374151;
       margin-bottom: 1.5rem;
       line-height: 1.75;
       font-style: italic;
       font-weight: 500;
   }

   .testimonial-author {
       padding-top: 1rem;
       border-top: 1px solid #e5e7eb;
   }

   .author-name {
       font-weight: 700;
       color: #000;
   }

   .author-role {
       font-size: 0.875rem;
       color: #6b7280;
       margin-top: 0.25rem;
   }

   /* CTA Section */
   .cta-section {
       padding: 4rem 1.5rem;
       background: linear-gradient(135deg, #348054 0%, #2a6844 100%);
       color: white;
       position: relative;
       overflow: hidden;
   }

   .cta-content {
       max-width: 48rem;
       margin: 0 auto;
       text-align: center;
       position: relative;
       z-index: 10;
   }

   .cta-title {
       font-size: 2rem;
       font-weight: 700;
       margin-bottom: 1rem;
   }

   @media (min-width: 768px) {
       .cta-title {
           font-size: 2.5rem;
       }
   }

   .cta-description {
       font-size: 1.125rem;
       margin-bottom: 2rem;
       opacity: 0.9;
   }

   .btn-white {
       background: white;
       color: #348054;
   }

   .btn-white:hover {
       background: #f3f4f6;
   }

   .cta-note {
       margin-top: 1rem;
       opacity: 0.8;
       font-size: 0.875rem;
   }

   /* Footer */
   footer {
       background: linear-gradient(180deg, #FAF5F0 0%, #F5EBE1 50%, #F0E5DB 100%);
       padding: 3rem 1.5rem;
   }

   .footer-container {
       max-width: 72rem;
       margin: 0 auto;
   }

   .footer-grid {
       display: grid;
       gap: 2rem;
       margin-bottom: 2rem;
   }

   @media (min-width: 768px) {
       .footer-grid {
           grid-template-columns: 2fr 1fr 1fr;
       }
   }

   .footer-brand {
       display: flex;
       align-items: center;
       gap: 0.5rem;
       margin-bottom: 0.75rem;
   }

   .footer-description {
       color: #374151;
       font-size: 0.875rem;
       line-height: 1.75;
   }

   .footer-section h4 {
       font-weight: 700;
       color: #000;
       margin-bottom: 0.75rem;
       font-size: 0.875rem;
   }

   .footer-links {
       list-style: none;
       padding: 0;
   }

   .footer-links li {
       margin-bottom: 0.5rem;
   }

   .footer-links a {
       color: #374151;
       font-size: 0.875rem;
       text-decoration: none;
       transition: color 0.2s;
   }

   .footer-links a:hover {
       color: #348054;
   }

   .language-selector {
       display: flex;
       justify-content: center;
       margin-bottom: 1.5rem;
   }

   .language-btn {
       display: flex;
       align-items: center;
       gap: 0.5rem;
       padding: 0.5rem 1rem;
       background: rgba(255, 255, 255, 0.5);
       border: 1px solid #d1d5db;
       border-radius: 0.5rem;
       cursor: pointer;
       transition: background 0.2s;
   }

   .language-btn:hover {
       background: rgba(255, 255, 255, 0.7);
   }

   .disclaimer {
       margin-bottom: 1.5rem;
   }

   .disclaimer-text {
       color: #374151;
       font-size: 0.75rem;
       line-height: 1.75;
   }

   .disclaimer-toggle {
       color: #374151;
       text-decoration: underline;
       background: none;
       border: none;
       cursor: pointer;
       font-weight: 500;
       padding: 0;
       margin-left: 0.25rem;
   }

   .disclaimer-toggle:hover {
       color: #111827;
   }

   .disclaimer-full {
       display: block;
       margin-top: 0.5rem;
   }

   .footer-copyright {
       text-align: center;
       color: #374151;
       font-size: 0.75rem;
       padding-top: 1.5rem;
       border-top: 1px solid #d1d5db;
   }

   /* Animations */
   .fade-in-up {
       animation: fadeInUp 0.6s ease-out;
   }

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

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   .icon-white {
       color: white;
   }

   .icon-green {
       color: #348054;
   }


   .grid-container {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
       gap: 20px;
       max-width: 1200px;
       margin: 40px auto 0 auto;
       padding: 0 15px;
       /* Ajout pour l'espacement sur mobile */
   }

   .card-my img {
       height: 100px;
       margin: 0 auto 15px auto;
       display: block;
   }

   .card-my {
       background: white;
       border-radius: 15px;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       padding: 20px;
       height: 100%;
       box-sizing: border-box;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
       border: 1px solid rgb(200, 247, 219);
       width: 100%;
       /* Prend toute la largeur disponible */
   }

   .card-my-title {
       font-size: 18px;
       font-weight: bold;
       margin: 10px 0;
       color: #1f2937;
       /* gris foncé */
       text-align: center;
   }

   .card-my-desc {
       font-size: 14px;
       color: #4b5563;
       /* gris moyen */
       flex-grow: 1;
       margin-bottom: 20px;
   }

   .button {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       padding: 10px 20px;
       font-size: 16px;
       font-weight: bold;
       color: white;
       background: rgb(34, 116, 68);
       border: 2px solid rgb(34, 116, 68);
       border-radius: 10px;
       text-decoration: none;
       transition: 0.3s;
   }

   .button:hover {
       background: rgb(24, 94, 53);
       color: white;
   }

   .containerEnd {
       width: 89%;
       display: flex;
       flex-wrap: wrap;
       gap: 20px;
       padding: 0;
       justify-content: center;
       margin: 50px auto;
   }

   .card5 {
       flex: 1 1 calc(20% - 16px);
       /* 5 colonnes sur desktop */
       max-width: calc(20% - 16px);
       background-color: #fff;
       border-radius: 8px;
       padding: 15px;
       text-align: center;
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
       display: flex;
       flex-direction: column;
       align-items: center;
       transition: transform 0.2s;

   }

   .card5:hover {
       transform: translateY(-5px);
   }

   .icon-circle {
       color: white;
       width: 50px;
       height: 50px;
       background-color: rgb(34, 116, 68);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       margin-bottom: 15px;
   }

   .icon-circle img {
       width: 30px;
       height: 30px;
       filter: brightness(100%) contrast(100%);
   }

   .tilteCardEnd {
       color: black;
       font-size: 18px;
       font-weight: 600;
   }

   .pCardEnd {
       color: #000933A6;
       line-height: 17px;
       margin-top: 18px;
   }

   .svgEnd {
       width: 25px;
       height: 25px;
   }

   @media (max-width: 768px) {

       .hero {
           position: relative;
           padding: 7rem 1.5rem 9rem;
           overflow: hidden;
           background: linear-gradient(135deg, #ffffff 0%, #F9F0EA 50%, #ffffff 100%);
       }

       .hero-content {
           margin: 0 auto;
       }

       .grid-container {
           grid-template-columns: 1fr;
           /* Une seule colonne en mobile */
           padding: 0 10px;
       }

       .containerEnd {
           width: 100%;
           display: flex;
           flex-wrap: wrap;
           gap: 20px;
           padding: 0;
           justify-content: center;
           margin: 50px auto;
       }

       .card5 {
           flex-direction: row;
           align-items: center;
           text-align: left;
           max-width: 100%;
       }

       .icon-circle {
           min-width: 50px;
           min-height: 50px;
           background-color: rgb(34, 116, 68);
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           margin-bottom: 15px;
           margin-right: 15px;
       }


       .tilteCardEnd {
           color: black;
           font-size: 18px;
           margin-bottom: -15px;
       }

       .section-title {
           font-size: 2.5rem;
           font-weight: 700;
           margin-bottom: 1rem;
           color: #000;
           line-height: 40px;
       }
   }