html {
  scroll-behavior: smooth;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  max-width: 100%;
  overflow-x: hidden;
  position: relative;
}

/* Fond animé uniquement pour les pages légales */
.legal-page::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('/images/serene_waves.gif') center/cover no-repeat;
  opacity: 0.1; /* Réduit l'opacité pour la transparence */
  z-index: -1; /* Place le fond derrière le contenu */
  pointer-events: none; /* Permet d'interagir avec les éléments sous le fond */
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend+Giga&display=swap');
    

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:root {
      --primary-color: #017F96; /* Vert sauge hygge */
      --primary-color-rgb: 1, 127, 150; /* RGB de la couleur primaire */
      --secondary-color: #F7F3EE; /* Beige chaud (updated for better contrast or use #AFEEEE if preferred) */
      --accent-color: #fa9921; /* Jaune doré -> DarkOrange */
      --dark-color: #4a5759; /* Gris foncé */
      --light-color: #f9f7f4; /* Blanc cassé */
      --text-color: #585858; /* Gris moyen pour le texte */
    }
    
    body {
      background: var(--light-color);
      color: var(--text-color);
      font-family: 'Raleway', sans-serif;
      line-height: 1.75;
      margin: 0;
      padding: 0;
      transition: background 0.7s cubic-bezier(.4,0,.2,1);
    }
    
    header {
      background: var(--primary-color);
      box-shadow: 0 4px 24px rgba(0,0,0,0.1);
      padding: 1rem 0;
      position: relative;
      transition: box-shadow 0.5s;
    }
    .header-container {
      width: 100%;
      background-color: var(--primary-color);
    }

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem 2rem;
      max-width: 1400px;
      margin: 0 auto;
      width: 100%;
      box-sizing: border-box;
      transition: all 0.3s ease-in-out;
      position: relative;
      z-index: 1000;
    }

    /* Styles pour la navbar réduite - Mobile par défaut (pas de transparence) */
    .header-container.scrolled {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background-color: var(--primary-color);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      z-index: 1000;
      animation: slideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: transform, opacity;
    }
    
    /* Navigation desktop */
    .desktop-nav {
      display: none; /* Caché par défaut */
      transition: opacity 0.4s ease-out, transform 0.4s ease-out, visibility 0.4s;
    }
    
    /* Transparence et navigation sur desktop */
    @media (min-width: 1025px) {
      .header-container.scrolled {
        background-color: var(--primary-color) !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        overflow-x: hidden; /* Empêche le débordement horizontal */
        box-shadow: none;
      }
      
      .header-content {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 100vw; /* Utilisation de la largeur de la vue */
        width: 100%;
        padding: 0 2rem;
        margin: 0;
        box-sizing: border-box;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden; /* Cache tout contenu débordant */
      }
      
      /* Style de base pour le logo */
      .header-content > div:first-child {
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform, margin;
        position: absolute;
        left: 15%;
        z-index: 10; /* S'assure que le logo reste au-dessus */
      }
      
      /* Conteneur de la navigation */
      .header-content > .desktop-nav {
        position: absolute;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        padding: 0 15%;
        margin: 0 auto;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }
      
      /* Masquer la barre de défilement mais garder la fonctionnalité */
      .desktop-nav::-webkit-scrollbar {
        display: none;
      }
      
      /* Masquage du sélecteur de langue et du CTA au scroll */
      .header-container.scrolled .lang-switch {
        display: none;
      }
      
      /* Style de la navigation desktop */
      .desktop-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;
        margin: 0 auto;
        padding: 0 1rem;
        transition: all 0.3s ease-in-out;
        width: 100%;
        max-width: 1400px;
        background-color: transparent;
        overflow: hidden; /* Cache tout contenu débordant */
        box-sizing: border-box;
      }
      
      .header-container:not(.scrolled) .desktop-nav {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
      }
      
      .header-container.scrolled .desktop-nav {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }
      
      .desktop-nav .tab-btn {
        background: none;
        border: none;
        color: white;
        padding: 0.4rem 0.6rem; /* Réduction du padding vertical */
        margin: 0 0.1rem; /* Petit espacement entre les boutons */
        font-size: 0.8rem; /* Taille de police réduite */
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        border-radius: 4px;
        white-space: nowrap;
        text-transform: uppercase;
        letter-spacing: 0.2px;
        position: relative;
        z-index: 2;
        flex: 0 0 auto; /* Empêche le redimensionnement */
      }
      
      .desktop-nav .tab-btn::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 2px;
        background-color: white;
        transition: width 0.3s ease;
      }
      
      .desktop-nav .tab-btn:hover::after {
        width: 70%;
      }
      
      .desktop-nav .tab-btn.active {
        color: white;
        font-weight: 600;
      }
      
      .desktop-nav .tab-btn.active::after {
        width: 70%;
        background-color: var(--accent-color);
      }
      
      .desktop-nav .tab-btn:hover {
        color: var(--accent-color);
        background: rgba(255, 255, 255, 0.05);
      }
      
      .desktop-nav .tab-btn.active {
        background: var(--accent-color);
        color: white;
      }
    }
    
    .header-container.scrolled .header-content {
      padding: 0.25rem 1rem;
      margin: 0 auto;
      min-height: 42px !important; 
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .header-container.scrolled .logo {
      height: 33px; /* Augmenté de 24px à 28px */
      transition: height 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      margin: 0;
      align-self: center;
    }
    
    .header-container.scrolled .mobile-nav-toggle {
      width: 24px;
      height: 24px;
      top: 50%;
      transform: translateY(-50%);
      right: 8px;
      padding: 0.2rem;
    }

    .header-content > div:first-child {
      display: flex;
      align-items: center;
      height: 100%;
    }
    .header-content > div:first-child img {
      height: 32px;
      transition: all 0.3s ease-in-out;
    }

    .header-content.scrolled .lang-switch {
      opacity: 0;
      pointer-events: none;
      transform: translateY(-100%);
      transition: all 0.3s ease-in-out;
    }

    @keyframes slideDown {
      from {
        transform: translateY(-100%);
      }
      to {
        transform: translateY(0);
      }
    }

    /* Animation du logo */
    .logo {
      transition: all 0.3s ease-in-out;
      height: 60px;
    }

    /* Styles pour la barre de langue et CTA sur mobile */
    @media (max-width: 1024px) {
      .header-content .lang-switch {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        gap: 0.8rem;
        transition: all 0.3s ease-in-out;
        margin-top: 0.5rem;
      }
      
      .header-container.scrolled .lang-switch {
        display: none;
      }
      
      .lang-switch .cta {
        margin-left: 0.5rem;
        white-space: nowrap;
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
      }
      
      .lang-btn {
        font-size: 0.9rem;
        padding: 0.2rem 0.5rem;
      }
      

      
      .header-content {
        padding: 1rem 1.5rem;
        background-color: var(--primary-color);
      }
      
      .header-content.scrolled {
        background-color: var(--primary-color);
      }
      
      .logo {
        height: 50px;
        transition: all 0.3s ease-in-out;
      }
    }
    
    nav {
      background: var(--light-color);
      border-radius: 12px;
      margin: 1rem auto;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      display: flex;
      flex-wrap: nowrap;
      gap: 0.2rem;
      justify-content: center;
      padding: 0.8rem 0;
      max-width: 1200px;
      transition: background 0.5s;
      overflow-x: auto;
    }
    
    nav button, .lang-btn {
      background: none;
      border: none;
      color: var(--dark-color);
      font-size: 1rem;
      font-weight: 500;
      cursor: pointer;
      padding: 0.5rem 1rem;
      border-radius: 6px;
      transition: all 0.3s ease;
    }
    
    nav button.active, nav button:hover, .lang-btn:hover {
      background: var(--secondary-color);
      color: var(--dark-color);
      font-weight: 600;
    }
    
    .lang-switch {
      display: flex;
      gap: 0.5rem;
    }
    
    .lang-btn {
      background: rgba(255,255,255,0.2);
      color: white;
      font-weight: 500;
      padding: 0.3rem 0.8rem;
      border-radius: 4px;
    }
    
    .lang-btn.active {
      background: white;
      color: var(--primary-color);
      font-weight: 600;
    }
    
    /* Style for the CTA button when it's in the header's lang-switch */
    header .lang-switch .cta {
      background: rgba(255,255,255,0.2); /* Match lang-btn background */
      color: white;                       /* Match lang-btn color */
      font-weight: 500;                 /* Match lang-btn font-weight */
      font-size: 0.9rem;                /* Slightly smaller or match lang-btn if it has explicit font-size */
      padding: 0.3rem 0.8rem;           /* Match lang-btn padding */
      border-radius: 4px;               /* Match lang-btn border-radius */
      text-transform: none;             /* Remove uppercase */
      letter-spacing: normal;           /* Remove letter-spacing */
      box-shadow: none;                 /* Remove box-shadow */
      margin: 0;                        /* Remove margin */
      display: inline-block;            /* Ensure it behaves like a button */
      vertical-align: middle;           /* Align with other buttons */
      line-height: normal;              /* Ensure consistent line height */
    }

    header .lang-switch .cta:hover {
      background: var(--secondary-color); /* Match lang-btn hover background */
      color: var(--dark-color);           /* Match lang-btn hover color */
      font-weight: 600;                 /* Match lang-btn hover font-weight */
      transform: none;                  /* Remove transform from general .cta:hover */
      box-shadow: none;                 /* Ensure no shadow on hover */
    }
    .container {
      max-width: 1200px;
      margin: 2rem auto;
      background: white;
      border-radius: 12px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.05);
      padding: 0;
      overflow: hidden;
      animation: fadeIn 1.2s;
    }
    
    .section {
      margin-bottom: 0;
      padding: 3rem 2rem;
      position: relative;
      border-bottom: 1px solid rgba(0,0,0,0.05);
    }
    
    .section:nth-child(even) {
      background-color: var(--light-color);
    }
    
    /* Styles unifiés pour les titres */
    h1, h2, h3, h4, h5, h6 {
      color: var(--primary-color);
      font-family: 'Raleway', sans-serif;
      font-weight: 600;
      line-height: 1.3;
      margin: 1.5rem 0;
      position: relative;
      text-align: left;
      padding-left: 0.5rem;
    }
    
    h1 {
      font-size: 2.8rem;
      color: var(--accent-color);
      margin: 2rem 0 1.5rem;
      padding-bottom: 0.8rem;
      border-bottom: 2px solid var(--accent-light);
    }
    
    h2 {
      font-size: 2.4rem;
      color: var(--primary-color);
      margin: 2.5rem 0 1.2rem;
      padding-bottom: 0.5rem;
    }
    
    h2:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 60px;
      height: 3px;
      background-color: var(--accent-color);
    }
    
    h3 {
      font-size: 2rem;
      color: var(--accent-color);
      margin: 2rem 0 1rem;
    }
    
    h4 {
      font-size: 1.6rem;
      color: var(--primary-color);
      margin: 1.8rem 0 0.8rem;
    }
    
    /* Style spécifique pour les titres de section */
    .section h2,
    .tab-section h2 {
      width: 100%;
      text-align: left;
      letter-spacing: 0.17em;
    }
    
    /* Style pour les sous-titres de méthode */
    .method-subtitle {
      font-size: 2.2rem !important;
      color: var(--accent-color) !important;
      text-align: left !important;
      margin: 2.5rem 0 1.2rem !important;
      padding-bottom: 0.5rem;
      border-bottom: 2px solid var(--accent-light);
      display: block;
      width: 100%;
    }
    
    .hero-section {
      background-color: var(--primary-color);
      color: white;
      padding: 0.5rem 2rem 0.5rem 2rem; /* Reduced top padding to move text higher */
      text-align: center;
      background-image: linear-gradient(rgba(40, 120, 170, 0.30), rgba(20, 100, 150, 0.30)), url('images/colors.jpg');
      background-size: cover;
      background-position: center 25%; /* Shift image downwards to reveal more of its top */
      display: flex; /* Added for flex layout */
      flex-direction: column; /* Stack children vertically */
      justify-content: space-between; /* Pushes content to top and bottom if there's space */
      min-height: 320px; /* Increased min-height */
    }
    
    .hero-section h1 {
      color: white;
      font-size: 3rem;
      margin-top: 0; /* Ensure no top margin */
      margin-bottom: 1.5rem; /* Existing bottom margin */
    }

    .hero-section-bottom-content {
      /* margin-top: auto;  This will push it to the bottom if parent is flex column */
      /* No specific margin-top needed if justify-content: space-between is used on parent */
      padding-bottom: 0.25rem; /* Reduced padding at the very bottom */
    }
    
    /* General paragraph style for hero section */
    .hero-section p {
      font-size: 1.2rem;
      max-width: 800px;
      margin: 0 auto 2rem;
      text-align: center;
    }
    
    /* Specific style for the about.content paragraph in hero-section-bottom-content */
    .hero-section .hero-section-bottom-content p[data-i18n="about.content"] {
      max-width: 100%; /* Use full available width */
      margin-left: 0;
      margin-right: 0;
      text-align: center; /* Ensure this is centered */
      margin-bottom: 1rem; /* Add some bottom margin before the CTA button */
    }
    
    #story {
      position: relative; /* Needed for z-index stacking if we add overlays */
      padding: 3rem 1rem; /* Ensure padding for content visibility */
      min-height: 100vh; /* Make section take full viewport height */
      display: flex; /* Added to help center content vertically if needed */
      flex-direction: column; /* Stack content vertically */
      justify-content: flex-start; /* Align content to the top */
      align-items: center; /* Added to center .story-text-content horizontally */
      /* animation: subtleBackgroundShift 20s infinite alternate ease-in-out; */ 
    }
    #story::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background-color: transparent; /* Remove overlay effect */
      z-index: 0; /* Behind the content */
    }

    #story > * {
      position: relative; /* Ensure content (h2, p, a) is above the pseudo-element overlay */
      z-index: 1;
    }

    .story-layout-container {
      display: flex;
      align-items: center; /* Vertically center text block and image */
      justify-content: space-between; /* Adjust as needed, e.g., space-around or use gap */
      width: 90%; /* Or max-width: 1200px; */
      margin: 2rem auto 0; /* Space below title, centered horizontally */
    }

    #story h2 {
      color: var(--primary-color);
    }

#story .story-text-content {
      flex: 1 1 45%; /* Takes up ~45% of the .story-layout-container width */
      padding: 1rem 2rem 1rem 1rem; /* Padding, with more on the right for image spacing */
      box-sizing: border-box;
      text-align: left; /* Align text to the left */
      /* display: flex, flex-direction, justify-content removed for natural top alignment */
      border-radius: 8px; 
      z-index: 1; 
      /* background-color: rgba(0,0,0,0.1); /* Optional: subtle background for definition */
      background-color: rgba(50, 50, 50, 0.7); /* Dark grey semi-transparent background */
    }

    #story .story-text-content h2 {
      color: white; 
      font-size: 3rem; /* Significantly increased font size */
      margin-bottom: 1rem; /* Adjusted space after heading */
    }

    #story .story-text-content p {
      color: white; 
      font-size: 1.3rem; 
      line-height: 1.6; 
      font-weight: 600; /* Make text semi-bold */
      letter-spacing: 0.05em; /* Add some letter spacing */
    }

    #story a.cta {
      color: white; /* Assuming CTA text should also be white */
      /* Consider: background-color: rgba(255,255,255,0.2); border: 1px solid white; */
    }

    #story::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background-color: transparent; /* Remove overlay effect */
      z-index: 0; /* Behind the content */
    }

    @keyframes subtleBackgroundShift { /* A single animation for all layers */
      0% {
        background-position: 
          top 10% right 10%,    /* butterflies-1127666 */
          bottom 10% left 10%,  /* butterfly-2837589 */
          center center;         /* polaris.jpg */
      }
      50% {
        background-position: 
          top 12% right 8%,     /* butterflies-1127666 moves */
          bottom 8% left 12%,   /* butterfly-2837589 moves */
          center center;         /* polaris.jpg stays centered */
      }
      100% {
        background-position: 
          top 10% right 10%, 
          bottom 10% left 10%, 
          center center;
      }
    }

    .story-image-wrapper {
      flex: 1 1 50%; /* Takes up ~50% of the .story-layout-container width */
      display: flex;
      justify-content: center;
      align-items: center;
      max-height: 75vh; /* Control max height of the image area */
      padding-left: 1rem; /* Space from text */
    }

    .story-image-wrapper img {
      max-width: 100%;
      max-height: 100%; /* Respects wrapper's max-height */
      object-fit: contain; /* Ensures image is not cropped, maintains aspect ratio */
      border-radius: 8px; /* Optional styling */
    }

    .cta {
      background: var(--accent-color);
      color: white;
      border: none;
      border-radius: 6px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      padding: 0.9rem 1.8rem;
      display: inline-block;
      margin: 1.5rem 0;
      text-decoration: none;
      font-weight: 600;
      font-size: 1rem;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      transition: all 0.3s ease;
    }
    
    .cta:hover {
      background: var(--secondary-color);
      color: var(--dark-color);
      transform: translateY(-3px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    .testimonial {
      background: white;
      border-left: 4px solid var(--accent-color);
      margin: 2rem 0;
      padding: 1.5rem;
      border-radius: 8px;
      font-style: italic;
      box-shadow: 0 3px 15px rgba(0,0,0,0.08);
      animation: fadeIn 1.2s;
      position: relative;
    }
    
    .testimonial:before {
      content: '\201C';
      font-family: 'Raleway', sans-serif;
      font-size: 4rem;
      position: absolute;
      left: -20px;
      top: -20px;
      color: var(--accent-color);
      opacity: 0.3;
    }
    
    .testimonials-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      margin-top: 2rem;
    }
    
    .image-section {
      display: flex;
      align-items: center; /* Vertically center text and image */
      margin: 3rem 0;
    }
    
    .image-container {
      flex: 1;
      padding: 1rem;
    }
    
    .image-container img {
      width: 100%;
      height: auto;
      border-radius: 8px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.1);
      transition: transform 0.3s ease, opacity 0.3s ease;
      opacity: 0.9; /* Make image slightly transparent */
    }
    
    .image-container img:hover {
      transform: scale(1.02);
    }
    
    .text-container {
      flex: 1;
      padding: 2rem;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(30px);}
      to { opacity: 1; transform: translateY(0);}
    }
    
    @media (max-width:768px) {
      .container {padding: 0;}
      nav {display: none;}
      .section {padding: 2rem 1rem;}
      .image-section {flex-direction: column;}
      .testimonials-container {grid-template-columns: 1fr;}
      h1 {font-size: 2rem;}
      h2 {font-size: 1.8rem;}
      .header-content {flex-direction: column; padding: 1rem;}
    }
    .calendly-inline-widget {
      min-width: 320px;
      height: 600px;
      margin: 2rem auto;
      border-radius: 18px;
      box-shadow: 0 2px 12px #b7dbe633;
      background: #f9f8f6;
      animation: fadeIn 1.2s;
    }
    @media (max-width:600px) {
      .container {padding:1rem;}
      nav {display: none;}
      .section {padding: 1.2rem 0.5rem;}
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(30px);}
      to { opacity: 1; transform: translateY(0);}
    }
    /* Style pour la citation de William E. Henley dans l'onglet Services */
    .quote {
      font-size: 1.5rem;
      font-style: italic;
      color: var(--accent-color);
      border-left: 4px solid var(--primary-color);
      padding-left: 1.5rem;
      margin: 2rem 0;
      line-height: 1.4;
    }

    /* Advanced Sea Wave Animation for Quote Background */
    .animated-sea-header {
      background: #a0d2db; /* Light turquoise base - can be adjusted or removed if waves cover fully */
      position: relative;
      padding: 3rem 2rem; /* Adjust padding to position title nicely over waves */
      text-align: center;
      overflow: hidden;
      margin-bottom: 1.5rem; /* Space before the quote */
      border-radius: 8px; /* Optional: if you want rounded corners for the header block */
    }

    .animated-sea-header h2 {
      position: relative;
      z-index: 2;
      color: var(--dark-color); /* Or white if background is dark enough: #fff; */
      text-shadow: 0px 1px 3px rgba(255,255,255,0.7); /* Light shadow for better readability */
      margin-bottom: 0; /* Reset margin if padding on parent is enough */
    }

    /* Sea Wave Animation for Quote Background */
    .quote-with-sea-animation {
      background: #a0d2db; /* Light turquoise base */
      position: relative;
      padding: 2rem; /* Padding around the quote */
      overflow: hidden;
      margin: 2rem 0; /* Keep existing quote margin */
      border-radius: 8px;
    }

    .quote-with-sea-animation .quote {
      position: relative;
      z-index: 2;
      color: white; /* Make quote text white for contrast */
      text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* Shadow for readability */
      border-left: none; /* Remove original border */
      padding-left: 0; /* Remove original padding for border */
      margin: 0; /* Reset margin as parent handles spacing */
      font-size: 1.6rem; /* Slightly larger for impact */
      text-align: center;
    }

    .quote-with-sea-animation .quote p {
        margin-bottom: 0.5em;
    }

    .quote-with-sea-animation .quote cite {
        font-size: 1.2rem;
        font-style: normal;
        display: block;
        margin-top: 0.5em;
    }
 
    .wave {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 200%;
      height: 100px; /* Adjust wave height */
      background-repeat: repeat-x;
      background-size: 50% 100px; /* Wave segment width relative to its own 200% width */
      animation: wave-flow 10s linear infinite;
      z-index: 1;
      opacity: 0.7;
    }

    .wave.wave1 {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 100' preserveAspectRatio='none'%3E%3Cpath d='M0,50 C150,100 300,0 400,30 C500,60 650,0 800,50 L800,100 L0,100 Z' fill='%236a8d73'/%3E%3C/svg%3E");
      animation-duration: 12s;
      opacity: 0.6; /* Slightly more opaque for base green */
      height: 110px; /* Slightly taller for base wave */
    }

    .wave.wave2 {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 100' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C200,0 350,100 400,50 C550,0 700,80 800,60 L800,100 L0,100 Z' fill='%2348D1CC'/%3E%3C/svg%3E");
      animation-duration: 10s;
      animation-direction: reverse;
      opacity: 0.7;
      height: 100px;
    }

    .wave.wave3 {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 100' preserveAspectRatio='none'%3E%3Cpath d='M0,70 C250,30 400,120 400,70 C550,20 700,100 800,70 L800,100 L0,100 Z' fill='%23AFEEEE'/%3E%3C/svg%3E");
      animation-duration: 8s;
      opacity: 0.5;
      height: 90px; /* Slightly shorter for top highlight wave */
    }

    @keyframes wave-flow {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); } /* Scrolls one full wave segment (50% of 200% width) */
    }

    /* Styles pour le wrapper de l'invitation CTA */
    .services-cta-wrapper {
      width: 100%;
      max-width: 100%;
      margin: 3rem 0 4rem;
      text-align: center;
      padding: 0 2rem;
      box-sizing: border-box;
    }
    
    .services-invitation {
      background-color: #f9f9f9;
      border-radius: 12px;
      padding: 1.5rem 2rem;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .services-invitation .invitation-prompt {
      font-size: 1.3rem;
      color: var(--primary-color);
      font-weight: 600;
      margin-bottom: 0.2rem;
      line-height: 1.2;
    }
    
    .services-invitation .invitation-prompt br {
      display: block;
      margin: 0.2rem 0;
      content: "";
    }
    
    .services-invitation .invitation-text {
      font-size: 1.2rem;
      color: var(--primary-color);
      font-weight: 600;
      line-height: 1.2;
      margin: 0.5rem 0 1rem;
    }
    
    .services-invitation .cta-container {
      margin-top: 1rem;
    }
    
    .services-cta-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      gap: 20px;
      margin-top: 2rem; /* Space above the container of cards */
      padding: 10px; /* Optional padding for the container itself */
    }

    .service-cta-cadre {
      flex: 1 1 280px; /* Grow, shrink, with a basis of 280px. Adjust as needed. */
      max-width: 350px; /* Prevent cards from becoming too wide on larger screens if only 1 or 2 */
      aspect-ratio: 1 / 1; /* This makes the element square */
      display: flex;
      flex-direction: column;
      justify-content: space-between; /* Pushes h3/p up and .cta down */
      align-items: center; /* Center content horizontally */
      padding: 1.5rem;
      border: 1px solid var(--accent-color, #6a8d73); /* Use accent color with a fallback */
      border-radius: 12px; /* Softer corners */
      background-color: #ffffff; /* White background for cards */
      text-align: center;
      box-shadow: 0 5px 15px rgba(0,0,0,0.08); /* Subtle shadow for depth */
      transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    }

    .service-cta-cadre:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    }

    .service-cta-cadre h3 {
      font-size: 1.1em; /* Adjust size as needed */
      color: var(--primary-color, #333);
      margin-top: 0;
      margin-bottom: 0.75rem;
      text-align: center;
      width: 100%;
    }
    
    .service-cta-cadre h3 br {
      display: block;
      content: "";
      margin: 0.3rem 0;
    }

    /* Styles pour l'image de la section méthode */
    .method-image-container {
      display: flex;
      justify-content: center;
      margin: 2rem 0;
      width: 100%;
    }
    
    .method-image {
      max-width: 300px;
      height: auto;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .service-cta-cadre p {
      font-size: 0.9em; /* Adjust size as needed */
      color: #555;
      margin-bottom: 1rem;
      flex-grow: 1; /* Allows paragraph to take up available space if needed */
      line-height: 1.5;
    }

    .service-cta-cadre .cta {
      padding: 0.75rem 1.5rem; /* Consistent padding for CTAs in cards */
      font-size: 0.9em;
      width: auto; /* Allow button to size to its content */
      align-self: center; /* Ensure button is centered if text above is short */
    }

    #about .text-container p[data-i18n="about.content"] {
      margin-top: 5rem; /* Adjust this value as needed */
    }

    .hero-section .hero-section-bottom-content p[data-i18n="about.content"] {
      max-width: 100%; /* Use full available width */
      margin-left: 0;   /* Remove horizontal auto margin */
      margin-right: 0;  /* Remove horizontal auto margin */
      text-align: center; /* Align text to the center */
    }

    /* Styles for #story section layout (text and image) */
    .story-layout-container {
      display: flex;
      align-items: center; /* Vertically center text block and image */
      justify-content: space-between; /* Adjust as needed, e.g., space-around or use gap */
      width: 90%; /* Or max-width: 1200px; */
      margin: 2rem auto 0; /* Space below title, centered horizontally */
    }

    #story .story-text-content {
      flex: 1 1 45%; /* Takes up ~45% of the .story-layout-container width */
      padding: 1rem 2rem 1rem 1rem; /* Padding, with more on the right for image spacing */
      box-sizing: border-box;
      text-align: left; /* Align text to the left */
      border-radius: 8px; 
      z-index: 1; 
      /* background-color: rgba(0,0,0,0.1); /* Optional: subtle background for definition */
      background-color: rgba(50, 50, 50, 0.7); /* Dark grey semi-transparent background */
    }

    .story-image-wrapper {
      flex: 1 1 50%; /* Takes up ~50% of the .story-layout-container width */
      display: flex;
      justify-content: center;
      align-items: center;
      max-height: 75vh; /* Control max height of the image area */
      padding-left: 1rem; /* Space from text */
    }

    .story-image-wrapper img {
      max-width: 100%;
      max-height: 100%; /* Respects wrapper's max-height */
      object-fit: contain; /* Ensures image is not cropped, maintains aspect ratio */
      border-radius: 8px; /* Optional styling */
    }

    /* Contact Page Image Styling */
    .contact-layout {
      display: flex;
      align-items: flex-start; /* Vertically align text and image wrapper to the top */
      gap: 20px; /* Space between text and image blocks */
      flex-wrap: wrap; /* Allow wrapping on smaller screens */
    }

    .contact-text-content {
      flex: 2; /* Text block takes more space */
      min-width: 300px; /* Minimum width before wrapping */
    }

    .contact-image-wrapper {
      flex: 1;
      display: flex;
      flex-direction: column; /* Stack image and LinkedIn link vertically */
      justify-content: flex-start; /* Align content to the start (top) */
      align-items: center;     /* Center content horizontally */
      min-width: 200px; /* Minimum width for image block */
      background-color: transparent; /* Ensure container background isn't the issue */
    }

    .contact-profile-link {
      display: inline-block;
      border-radius: 50%; /* Ensures the link's hover/active area is also somewhat circular */
      transition: transform 0.3s ease;
    }

    .contact-profile-image {
      display: block;
      width: 150px; /* Desired width of the image */
      height: 150px; /* Desired height of the image */
      border-radius: 50%; /* Makes the image circular */
      object-fit: cover; /* Ensures the image content covers the area without distortion */
      border: 3px solid transparent; /* Initial transparent border to reserve space for click effect */
      transition: border-color 0.2s ease-out; /* Smooth transition for border color */
      box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Subtle shadow for depth */
    }

    .contact-profile-link:hover .contact-profile-image, /* Add :hover pseudo-class */
    .contact-profile-link:active .contact-profile-image {
      border-color: #007bff; /* Blue border appears on click */
      animation: pulseBlueShadowOnClick 0.6s ease-out;
    }
    
    /* Styles pour la section contact */
    .contact-text-content {
      line-height: 1.8;
    }
    
    .contact-text-content p {
      margin-bottom: 1rem;
    }
    
    .contact-link-whatsapp {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
    }
    
    .whatsapp-logo-link {
      display: inline-flex;
      align-items: center;
      color: #25D366;
      text-decoration: none;
      transition: transform 0.3s ease;
    }
    
    .whatsapp-logo-link:hover {
      transform: scale(1.1);
    }
    
    .whatsapp-number {
      transition: color 0.3s ease;
    }
    
    .whatsapp-number:hover {
      color: #25D366;
    }
    
    .email-link {
      color: var(--primary-color);
      text-decoration: none;
      transition: color 0.3s ease;
    }
    
    .email-link:hover {
      color: var(--accent-color);
      text-decoration: underline;
    }
    
    /* Style pour le nuage de mots */
    .word-cloud {
      position: relative;
      margin: 2.5rem auto;
      background: white;
      border-radius: 12px;
      overflow: hidden;
      min-height: 200px;
      width: 100%;
      max-width: 900px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: none;
      padding: 2rem 1rem;
    }
    
    .word-cloud-content {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 1.5rem;
      padding: 1.5rem;
      width: 100%;
    }
    
    .word-cloud-item {
      display: inline-block;
      padding: 0.8rem 1.5rem;
      background-color: white;
      border-radius: 30px;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      font-family: 'Raleway', sans-serif;
      font-weight: 600;
      color: var(--primary-color);
      text-align: center;
      text-decoration: none;
      border: 1px solid rgba(1, 127, 150, 0.1);
      line-height: 1.3;
      white-space: nowrap;
    }
    
    /* Different sizes and colors for words */
    .word-cloud-item:nth-child(1) { 
      font-size: 1.8rem;
      transform: rotate(-2deg); 
      background-color: #e6f7ff; /* Bleu clair */
      color: #0056b3;
      border: 1px solid #b3d9ff;
    }
    .word-cloud-item:nth-child(2) { 
      font-size: 1.5rem;
      transform: rotate(1deg);
      background-color: #f0f9e6; /* Vert clair */
      color: #2e7d32;
      border: 1px solid #c8e6c9;
    }
    .word-cloud-item:nth-child(3) { 
      font-size: 1.3rem;
      transform: rotate(3deg);
      background-color: #f9f2ff; /* Violet clair */
      color: #6a1b9a;
      border: 1px solid #e1bee7;
    }
    .word-cloud-item:nth-child(4) { 
      font-size: 2rem;
      transform: rotate(-1deg);
      background-color: #fff3e0; /* Orange clair */
      color: #e65100;
      border: 1px solid #ffcc80;
    }
    .word-cloud-item:nth-child(5) { 
      font-size: 1.7rem;
      transform: rotate(2deg);
      background-color: #fff8e1; /* Jaune clair */
      color: #ff8f00;
      border: 1px solid #ffecb3;
    }
    .word-cloud-item:nth-child(6) { 
      font-size: 1.4rem;
      transform: rotate(-3deg);
      background-color: #f3e5f5; /* Rose clair */
      color: #8e24aa;
      border: 1px solid #e1bee7;
    }
    
    .word-cloud-item:hover {
      transform: translateY(-5px) scale(1.05) !important;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
      background-color: var(--primary-color) !important;
      color: white !important;
      border-color: var(--primary-color) !important;
      z-index: 10;
    }
    
    .languages {
      text-align: center;
      margin: 1.5rem 0;
      font-style: italic;
      color: var(--dark-color);
      font-size: 1.1rem;
    }

    @keyframes pulseBlueShadowOnClick {
      0% {
        box-shadow: 0 0 0 0px rgba(0, 123, 255, 0.5), 0 4px 12px rgba(0,0,0,0.1); /* Start with base shadow + click shadow */
      }
      100% {
        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0), 0 4px 12px rgba(0,0,0,0.1); /* Click shadow pulses outwards and fades, base shadow remains */
      }
    }
    #about .image-section {
      margin-top: 1rem;
    }

    /* Styles for new content in Method section */
    .section#method {
      font-family: 'Raleway', sans-serif;
      background-color: #ffffff; /* Set background to white */
    }
    
    .section#method p {
      line-height: 1.7;
      margin-bottom: 1.2rem;
      color: var(--text-color);
      font-size: 1.1rem;
    }
    
    .section#method .hook {
      font-size: 1.4rem;
      font-weight: 500;
      line-height: 1.5;
      color: var(--accent-color);
      margin-bottom: 1.8rem;
      text-align: center;
    }
    
    /* Style pour la vidéo de présentation */
    .presentation-video-container {
      max-width: 800px;
      margin: 2rem auto 3rem auto;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    }
    
    .presentation-video-container video {
      width: 100%;
      display: block;
      border-radius: 12px;
    }
    
    /* Style pour les appareils mobiles */
    @media (max-width: 768px) {
      .presentation-video-container {
        margin: 1.5rem auto 2.5rem auto;
        border-radius: 8px;
      }
      
      .presentation-video-container video {
        border-radius: 8px;
      }
    }

    .section#method p strong {
      color: var(--primary-color);
      font-weight: 600;
    }

    .method-subtitle {
      font-family: 'Raleway', sans-serif;
      font-size: 1.7rem;
      color: var(--primary-color);
      margin: 3.5rem 0 1.8rem;
      text-align: center;
      font-weight: 700;
      position: relative;
      padding-bottom: 1rem;
    }
    
    .method-subtitle:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 80px;
      height: 3px;
      background: var(--accent-color);
    }

    .text-image-pair {
      margin-bottom: 2.5rem;
    }
    
    /* Style pour le carrousel des résultats UNIK */
    .unik-results-carousel {
      margin: 2.5rem 0;
      font-family: 'Raleway', sans-serif;
    }
    
    .unik-results-carousel .swiper-slide {
      background: rgba(255, 255, 255, 0.9);
      border-radius: 8px;
      padding: 1.5rem;
      text-align: center;
      font-weight: 600;
      color: var(--primary-color);
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      transition: all 0.3s ease;
    }
    
    .unik-results-carousel .swiper-slide:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    }

    .method-content-wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
      margin: 2.5rem 0;
      align-items: flex-start;
    }

    .method-image-container {
      flex: 1 1 300px;
      max-width: 500px;
      margin: 2rem auto 0; /* Ajout d'une marge supérieure de 2rem */
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .method-image-container img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      object-position: center;
      padding: 0;
      margin: 0;
      display: block;
    }

    .method-text-content {
      flex: 1 1 45%;
      min-width: 300px;
      max-width: 600px;
      margin: 0 auto;
    }

    .method-text-content p {
      margin-bottom: 1.2rem;
      line-height: 1.6;
    }

    .method-text-content p:last-child {
      margin-bottom: 0;
    }

    @media (max-width: 768px) {
      .method-content-wrapper {
        flex-direction: column;
        gap: 1.5rem;
      }
      
      .method-image-container,
      .method-text-content {
        min-width: 100%;
      }
    }

    .image-caption {
      text-align: center;
      font-weight: bold;
      font-size: 0.9em; /* Smaller than default paragraph text */
      color: var(--accent-color);
      margin-top: 0.75rem; /* Space between image and caption */
      padding: 0 10px; /* Add some padding if text is long */
      margin-bottom: 0.5rem; /* Réduit l'espace en dessous */
    }
    
    /* Ajustement pour la version mobile */
    @media (max-width: 768px) {
      .story-image .image-caption {
        margin-bottom: 0.5rem; /* Réduit encore plus l'espace en dessous sur mobile */
      }
      
      .story-part-colored .story-content {
        margin-top: 0.5rem; /* Réduit l'espace au-dessus du contenu */
      }
    }

    /* Swiper Carousel for UNIK Results */
    .unik-results-carousel {
      width: 100%;
      padding-top: 20px; /* Space for pagination if on top */
      padding-bottom: 40px; /* Space for pagination */
      margin-top: 1rem;
      margin-bottom: 1rem;
    }

    .unik-results-carousel .swiper-slide {
      text-align: center;
      font-size: 1.1rem; /* Adjust as needed */
      padding: 20px 15px;
      background: var(--light-color);
      border: 1px solid #e0e0e0; /* Softer border */
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.07);
      color: var(--dark-color);
      min-height: 100px; /* Ensure slides have some height */
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 500;
      line-height: 1.4;
    }

    .unik-results-carousel .swiper-pagination-bullet {
      background: var(--accent-color); /* Inactive dot color */
      opacity: 0.5;
    }

    .unik-results-carousel .swiper-pagination-bullet-active {
      background: var(--primary-color); /* Active dot color */
      opacity: 1;
    }

    /* Styles for Certifications Logos */
    .certifications-logos-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 2rem; /* Space between logos */
      margin-top: 2rem;
      padding: 1rem 0;
    }
    .certifications-logos-container img {
      max-height: 100px; /* Adjust as needed */
      max-width: 100%;   /* Ensure responsiveness */
      object-fit: contain;
      transition: transform 0.3s ease;
    }
    .certifications-logos-container img:hover {
      transform: scale(1.05); /* Slight zoom on hover */
    }

    /* Styles for Testimonials Hero Section */
    .testimonials-hero {
      display: flex;
      align-items: center; /* Vertically aligns the text and image container */
      justify-content: space-between; /* Puts space between text and image blocks */
      gap: 20px; /* Adds some space between the text and image */
      margin-bottom: 2rem; /* Space before the individual testimonials */
      flex-wrap: wrap; /* Allow wrapping on smaller screens */
    }

    .testimonials-hero .text-content {
      flex: 1 1 55%; /* Allows text to take more space, with a basis of 55% */
      min-width: 280px; /* Minimum width before wrapping */
      text-align: center; /* Center-align text */
    }

    .testimonials-hero .image-container {
      flex: 1 1 40%; /* Allows image container to take space, with a basis of 40% */
      display: flex; /* Make the container itself a flex container */
      justify-content: flex-end; /* Align its content (the image) to the right */
      align-items: flex-start; /* Align image to the top of its container */
      min-width: 200px; /* Minimum width for image area */
      background-color: transparent; /* Ensure container background isn't the issue */
    }

    .testimonials-hero .image-container img {
      display: block; /* Good practice for images in layout */
      max-width: 100%;  /* Scales down if container is narrower */
      max-height: 100%; /* Scales down if container is shorter */
      width: auto;      /* Maintain aspect ratio based on height */
      height: auto;     /* Maintain aspect ratio based on width */
      object-fit: contain; /* Ensures entire image is visible, letterboxed if necessary */
      border-radius: 8px; /* Optional: consistent styling */
    }
    
    .highlight-text {
      font-weight: 600;
      color: var(--primary-color);
      display: inline-block;
      margin-top: 0.5rem;
    }

    /* Testimonials Swiper Styling */
    .testimonials-swiper {
      width: 100%;
      padding-top: 20px;
      padding-bottom: 50px; /* Space for pagination */
      margin-top: 2rem; /* Space below the hero section */
    }

    .testimonial-slide {
      background-color: #f9f9f9; /* Light background for slides */
      border-radius: 8px;
      padding: 25px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 300px; /* Ensure slides have some minimum height, adjust as needed */
      box-sizing: border-box;
    }

    .testimonial-text {
      font-style: italic;
      color: #555;
      margin-bottom: 20px;
      flex-grow: 1; /* Allows text to take available space */
      line-height: 1.7;
      font-size: 0.95em;
    }

    .testimonial-author {
      font-weight: bold;
      color: var(--primary-color, #20B2AA);
      text-align: right;
      font-size: 0.9em;
      margin-top: auto; /* Pushes author to the bottom if text is short */
    }

    /* Customizing Swiper Navigation/Pagination for testimonials */
    .testimonials-swiper .swiper-pagination-bullet-active {
      background: var(--primary-color, #20B2AA);
    }

    .testimonials-swiper .swiper-button-next,
    .testimonials-swiper .swiper-button-prev {
      color: var(--primary-color, #20B2AA);
      --swiper-navigation-size: 28px; /* Adjust navigation arrows size */
    }

    .testimonials-swiper .swiper-button-next:after,
    .testimonials-swiper .swiper-button-prev:after {
      font-size: var(--swiper-navigation-size);
    }

    /* Contact Page WhatsApp Green Hover Effect */
    .contact-link-whatsapp:hover .whatsapp-number,
    .contact-link-whatsapp:hover .whatsapp-svg {
      color: #25D366 !important; /* WhatsApp green for text */
      fill: #25D366 !important; /* WhatsApp green for SVG */
    }

    nav button.tab-btn {
      background-color: transparent;
      border: none;
      color: var(--dark-color);
      padding: 0.8rem 1rem;
      cursor: pointer;
      font-size: 0.9rem;
      font-family: 'Raleway', sans-serif;
      transition: color 0.3s ease, border-bottom-color 0.3s ease;
      border-bottom: 2px solid transparent;
      margin: 0 2px;
      white-space: nowrap;
      outline: none;
    }

    nav button.tab-btn:hover,
    nav button.tab-btn.active {
      color: var(--primary-color);
      border-bottom-color: var(--accent-color);
    }

    /* Styles pour le bandeau de la section 'Qui suis-je ?' */
    #about .hero-section {
      padding: 1rem 0;
      text-align: left;
      border-radius: 8px;
      margin-bottom: 2.5rem;
      background-image: none !important;
      background-color: #FFFFFF !important;
    }

    #about .hero-section .hero-section-bottom-content p {
      color: var(--text-color);
      text-shadow: none;
      text-align: left;
    }

    #about .hero-section .hero-section-bottom-content {
      background-color: transparent;
      padding-top: 1rem;
      text-align: left;
    }

    /* Styles pour la nouvelle structure du hero statement */
    .hero-statement {
      padding: 0.5rem 2rem 0.5rem 1rem;
      margin-bottom: 2rem;
    }

    #about .hero-section .hero-statement h1.hero-main-title {
      font-family: 'Raleway', sans-serif;
      font-size: 4rem;
      font-weight: 666;
      color: var(--primary-color) !important;
      margin-bottom: 0.25rem;
      line-height: 1.2;
      text-shadow: none;
      letter-spacing: 0.2em;
      text-align: center;
    }

    #about .hero-section .wave-background-container p.hero-sub-text {
      font-family: 'Lexend Giga', sans-serif;
      font-size: 1.8rem;
      font-weight: 700;
      color: #fff !important;
      line-height: 2.2;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
      letter-spacing: 0.03em;
      text-align: left;
      margin-top: 0;
      margin-bottom: 1.5rem;
      padding: 0 1rem 0 0.5rem;
    }

    /* Style pour la deuxième ligne du sous-titre */
    #about .hero-section .wave-background-container p.hero-sub-text .hero-sub-text-line2 {
      display: inline;
      white-space: nowrap;
      text-align: left;
    }

    /* Nouveau conteneur pour le fond animé */
    #about .hero-section .wave-background-container {
      background-image: url('../images/serene_waves.gif');
      background-size: cover;
      background-position: center;
      color: #fff;
      padding: 6rem 1rem 0.5rem 1rem;
      border-radius: 8px;
      margin-top: 0.5rem;
      margin-bottom: 0.5rem;
      text-align: left;
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      min-height: 28rem;
    }

    #about .hero-section .wave-background-container::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.2);
      border-radius: 8px;
      z-index: -1;
    }

    /* Ancien .paragraphe-avec-vague, maintenant juste un conteneur de texte à l'intérieur de .wave-background-container */
    #about .hero-section .wave-background-container .paragraphe-avec-vague {
      background-image: none;

#about .hero-section .wave-background-container .paragraphe-avec-vague p,
#services .wave-background-container .paragraphe-avec-vague p {
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  font-size: 1.2rem;
  line-height: 1.8;
  margin: 0;
  padding: 3rem 2rem;
  position: relative;
  z-index: 2;
  text-align: center;
}
    }

    /* Forcer <br> à se comporter comme un saut de ligne dans le titre hero */
    /* (Si d'autres styles suivent, ils devraient être ici) */

    /* Styles for Unik Results Section */
    #unik-results {
        padding: 2rem;
        background-color: #fdfdfd;
        border-radius: 8px;
        margin-top: 2rem;
    }

    /* Style spécifique pour les titres de section UNIK */
    #unik-results h2 {
        /* Les styles sont hérités des règles h2 générales */
        /* Aucun style supplémentaire nécessaire ici */
    }

    /* Default style for all intro texts */
    /* Style de base pour tous les paragraphes intro-text dans unik-results */
    #unik-results .intro-text {
      font-size: 1.1rem;
      font-weight: 400;
      font-family: 'Raleway', sans-serif;
      color: var(--text-color);
      text-align: left;
      margin: 0 0 1.5rem 0;
      line-height: 1.8;
      max-width: 100%;
      padding: 0;
    }
    
    /* Style spécifique pour les paragraphes qui doivent être différents */
    #unik-results .hook.subtitle {
      font-size: 2.2rem;
      font-weight: 700;
      font-family: 'Nunito', 'Raleway', sans-serif;
      color: var(--accent-color);
      text-align: center;
      margin: 1.5rem 0 0.5rem;
      line-height: 1.3;
    }

    #unik-results h3 {
        color: var(--accent-color);
        text-align: center;
        margin: 3rem 0 1.5rem 0;
        font-size: 1.8rem;
    }

    .unik-themes-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1.5rem;
        margin: 2rem 0;
        align-items: stretch;
    }
    
    .unik-theme-card {
        background-color: white;
        border-radius: 8px;
        padding: 1.5rem;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        display: flex;
        flex-direction: column;
    }

    .unik-theme-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    }

    /* Style pour la carte contenant l'image */
    .unik-theme-card.image-card {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1.5rem;
        background-color: white;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        height: 100%;
        min-height: auto; /* Suppression de la hauteur minimale fixe */
        align-self: flex-start; /* Alignement en haut pour éviter l'étirement */
    }
    
    .unik-theme-card.image-card img {
        max-width: 100%;
        max-height: 140px;
        width: auto;
        height: auto;
        object-fit: contain;
        border-radius: 4px;
    }
    
    .unik-theme-card.image-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    }
    
    /* La carte Super-pouvoirs utilise maintenant le style par défaut des cartes */
    
    .unik-theme-card h4 {
        color: var(--primary-color);
        font-size: 1.3rem;
        margin-top: 0;
        margin-bottom: 0.75rem;
    }

    .unik-theme-card p {
        font-size: 1rem;
        line-height: 1.6;
        color: var(--text-color);
        flex-grow: 1;
        margin-bottom: 0;
    }

    #unik-results .resonate-question {
        text-align: center;
        font-size: 1.2rem;
        color: var(--dark-color);
        margin-top: 3rem;
        margin-bottom: 0.5rem;
        font-weight: 600;
    }

    #unik-results .resonate-answer-container {
        text-align: center;
        margin-bottom: 2rem;
    }

    #unik-results .resonate-answer-btn {
        background-color: var(--accent-color);
        color: white;
        padding: 0.8rem 2rem;
        border-radius: 25px;
        text-decoration: none;
        font-weight: bold;
        transition: background-color 0.3s ease;
        border: none;
        cursor: pointer;
        font-size: 1.1rem;
    }

    #unik-results .resonate-answer-btn:hover {
        background-color: #c5a076;
    }

    #unik-results .explore-story-text {
        text-align: center;
        font-size: 1.1rem;
        color: var(--text-color);
        margin-top: 2rem;
        margin-bottom: 1rem;
    }

    #unik-results .cta-discovery-session {
        display: block;
        width: fit-content;
        margin: 1rem auto 2rem auto;
        background: var(--primary-color);
        color: white;
        padding: 0.9rem 1.8rem;
        border-radius: 6px;
        text-decoration: none;
        font-weight: bold;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        transition: background-color 0.3s ease, transform 0.3s ease;
    }

    #unik-results .cta-discovery-session:hover {
        background: #016a7e;
        transform: translateY(-2px);
    }

    /* Style unifié pour toutes les phrases d'accroche */
    .hook,
    #story .hook,
    #services .hook,
    #method .hook,
    #unik-results .hook {
      font-family: 'Raleway', sans-serif;
      font-size: 2rem;
      font-weight: 300 !important;
      color: var(--accent-color);
      text-align: center;
      margin: 2rem 0 1.5rem;
      line-height: 1.3;
      padding: 0 1rem;
      max-width: 1000px;
      margin-left: auto;
      margin-right: auto;
      letter-spacing: 0.12em;
    }
    
    /* Style spécifique pour les sous-titres d'accroche (deuxième ligne) */
    .hook.subtitle {
      font-size: 1.8rem;
      margin-top: -1rem;
      margin-bottom: 2.5rem;
    }

    /* Footer Styles */
    footer {
      background-color: #f8f9fa; /* Light grey background */
      color: #343a40; /* Darker grey text */
      text-align: center;
      padding: 25px 15px;
      margin-top: 40px; /* Space above the footer */
      border-top: 1px solid #dee2e6; /* Subtle top border */
      font-size: 0.9em; /* Slightly smaller font for footer */
    }

    .footer-container p {
      margin-bottom: 0.75rem; /* Space between paragraphs */
    }

    .footer-container p:last-child {
      margin-bottom: 0; /* No margin for the last paragraph */
    }

    .footer-container a {
      color: var(--primary-color, #007bff); /* Use primary color or a default blue */
      text-decoration: none;
    }

    .footer-container a:hover,
    .footer-container a:focus {
      text-decoration: underline;
    }

    .footer-container .copyright {
      margin-top: 1rem;
      font-size: 0.8em;
      color: #6c757d; /* Muted color for copyright */
    }

    /* Styles for the new 'Qui suis-je ?' (About) section structure */

    /* 1. About Hero Intro Block */
    .about-hero-intro {
        background-color: transparent; /* Fond transparent */
        padding: 3rem 1.5rem;
        text-align: center;
        margin-bottom: 2.5rem;
    }

    .about-hero-intro .hero-main-title {
        font-family: 'Raleway', sans-serif;
        font-size: clamp(3.2rem, 6vw, 4.2rem);
        font-weight: 500;
        color: var(--primary-color);
        margin-bottom: 1rem;
        line-height: 1.2;
        letter-spacing: 0.33em;
        text-align: center;
    }

    .about-hero-intro .hero-sub-text-standalone {
        font-family: 'Raleway', sans-serif;
        font-size: clamp(1.4rem, 3vw, 1.8rem);
        line-height: 1.4;
        font-weight: 420;
        color: var(--dark-color);
        line-height: 1.6;
        letter-spacing: 0.1em;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
        white-space: normal;
    }
    
    .hero-sub-text-line2 {
        white-space: nowrap;
        display: inline-block;
    }

    /* 2. "Qui suis-je ?" Title (h2#titre-qui-suis-je) - General h2 styles apply or can be specific if needed */
    #about h2#titre-qui-suis-je {
        margin-bottom: 1rem; /* Space before wave banner */
        margin-top: 0; /* Reset top margin if .about-hero-intro provides enough space */
    }

    /* 3. Wave Banner */
    #about .wave-background-container,
    #services .wave-background-container {
        background-image: url('../images/serene_waves.gif');
        background-size: cover;
        background-position: center;
        color: var(--primary-color);
        padding: 4rem 2rem; /* Padding pour l'élégance */
        border-radius: 0; /* Pas de coins arrondis en pleine largeur */
        margin-top: 2rem;
        margin-bottom: 3rem;
        text-align: center; /* Texte centré à l'intérieur */
        position: relative;
        width: 100vw;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
        box-shadow: none; /* Pas d'ombre pour un look épuré */
        /* Les propriétés flex et min-height ne sont plus nécessaires ici */
    }

    #about .wave-background-container .paragraphe-avec-vague p {
        font-family: 'Raleway', sans-serif; /* Or 'Raleway' for consistency */
        font-size: clamp(1.1rem, 2.5vw, 1.4rem);
        font-weight: 600;
        line-height: 1.7;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
        max-width: 98%;
        margin: 0 auto;
        color: #fff;
        letter-spacing: 0.12em;
    }
    
    /* Styles spécifiques pour la section services */
    #services .wave-background-container .paragraphe-avec-vague p {
        font-family: 'Raleway', sans-serif;
        font-size: clamp(1.3rem, 3vw, 1.8rem);
        font-weight: 600;
        line-height: 1.6;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
        max-width: 90%;
        margin: 0 auto;
        color: #fff;
        letter-spacing: 0.05em;
        padding: 4rem 1rem;
    }
    
    #services .wave-background-container .paragraphe-avec-vague cite {
        display: block;
        margin-top: 1.5rem;
        font-style: normal;
        font-weight: 500;
        font-size: clamp(1rem, 2vw, 1.3rem);
        letter-spacing: 0.05em;
        opacity: 0.9;
    }

    /* 4. Main Content (Photo Left, Text Right) */
    /* Style pour le conteneur du texte du catalyseur */
    .about-catalyst-container {
      width: 100%;
      max-width: 100%;
      margin: 0;
      padding: 2rem 0;
      overflow: hidden;
    }

    .about-catalyst-container p {
      font-size: 1.4rem;
      line-height: 1.8;
      color: var(--dark-color);
      text-align: center;
      padding: 0 2rem;
      max-width: 1200px;
      margin: 0 auto 2rem;
    }

    .wave-background-container {
      width: 100%;
      max-width: 100%;
      margin: 0;
      border-radius: 0;
    }

    .about-main-content-wrapper {
        display: flex;
        flex-wrap: nowrap; /* Empêcher le retour à la ligne */
        gap: 3rem;
        margin: 3rem 0;
        align-items: flex-start;
    }

    .image-container-about {
        flex: 0 0 300px; /* Largeur fixe de 300px */
        height: 500px; /* Hauteur fixe pour un format portrait */
        border-radius: 8px;
        overflow: hidden;
        position: relative;
    }

    .image-container-about img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 25%; /* Ajuster le cadrage de l'image */
        border-radius: 8px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }

    .text-container-about {
        flex: 1; /* Prend tout l'espace restant */
        min-width: 0; /* Permet au texte de bien se comporter avec flex */
    }

    .text-container-about p {
        margin-bottom: 1rem;
        line-height: 1.7;
        font-family: 'Raleway', sans-serif;
    }

    /* Style pour mobile - photo au-dessus du texte */
    @media (max-width: 768px) {
        .about-main-content-wrapper {
            flex-direction: column;
            gap: 2rem;
        }
        
        .image-container-about {
            flex: 0 0 auto;
            width: 100%;
            max-width: 400px;
            height: 400px;
            margin: 0 auto 2rem;
        }
        
        .text-container-about {
            width: 100%;
        }
    }

    /* 5. Humaniste Section */
    .humaniste-section {
        max-width: 800px;
        margin: 3rem auto;
        padding: 2rem 1rem;
        background-color: #f9f9f9;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        font-family: 'Raleway', sans-serif;
        text-align: center;
        box-sizing: border-box;
    }
    
    .humaniste-section h3 {
        color: var(--primary-color);
        font-family: 'Raleway', sans-serif;
        font-size: 1.8rem;
        text-align: center;
        margin-bottom: 2rem;
        letter-spacing: 0.12em;
        font-weight: 600;
    }
    
    .humaniste-section ul {
        list-style-type: none;
        padding: 0;
        margin: 1.5rem 0;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }
    
    .humaniste-section li {
        font-size: 1.1rem;
        line-height: 1.8;
        color: var(--dark-color);
        padding: 0.3rem 0;
        position: relative;
    }
    
    .humaniste-section li:before {
        content: '•';
        color: var(--accent-color);
        font-weight: bold;
        display: inline-block;
        width: 1.5em;
        margin-left: -1.5em;
    }
    
    .humaniste-section li:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        background-color: var(--secondary-color);
        color: var(--dark-color);
    }
    
    /* Style pour la liste de valeurs */
    .values-list {
        font-family: 'Raleway', sans-serif;
        list-style-type: none;
        padding: 0;
        margin: 1.5rem auto;
        text-align: center;
        max-width: 800px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
    
    .values-list li {
        margin: 0.5rem;
        padding: 0.5rem 1rem;
        background-color: white;
        border-radius: 8px;
        font-size: 1rem;
        color: var(--dark-color);
        text-align: center;
        white-space: nowrap;
    }
    
    .values-list li:before {
        content: none;
    }
    
    @media (max-width: 768px) {
        .values-list {
            flex-direction: column;
            align-items: center;
            padding: 0 1rem;
        }
        
        .values-list li {
            width: 100%;
            max-width: 300px;
            margin: 0.3rem auto;
            white-space: normal;
            text-align: center;
        }
    }
    
    @media (max-width: 768px) {
        .humaniste-section {
            margin: 2rem 0.5rem;
            padding: 1.5rem 0.5rem;
            width: calc(100% - 1rem);
        }
        
        .humaniste-section ul {
            padding: 0;
            margin: 1.5rem auto;
        }
    }

    /* 6. Final CTA */
    .about-cta-final {
        text-align: center;
        padding: 2rem 0;
        margin-top: 1.5rem;
    }

    .about-cta-final p {
        font-family: 'Raleway', sans-serif;
        font-size: 1.25rem;
        font-weight: 450;
        color: var(--primary-color);
        letter-spacing: 0.12em;
        margin-bottom: 1rem;
    }

    /* General CTA button update for new accent color */
    .cta {
        display: inline-block;
        padding: 0.5rem 1.8rem;
        background-color: var(--accent-color);
        color: white;
        text-decoration: none;
        border-radius: 25px;
        font-weight: 420;
        line-height: 1.8;
        transition: background-color 0.3s ease, transform 0.2s ease;
        font-family: 'Raleway', sans-serif;
        border: 2px solid var(--accent-color);
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        vertical-align: middle;
    }

    .cta:hover, .cta:focus {
        background-color: #E57B00; /* Darker orange on hover */
        border-color: #E57B00;
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    }

    /* Ensure section has some padding */
    .section.tab-section#about {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    
    /* Ensure contact section has white background */
    #contact.tab-section {
        background-color: white;
        padding: 4rem 0;
    }
    
    #contact .tab-section {
        background-color: white;
    }
    
    /* Nouveaux styles pour la section Mon histoire */
    .story-part {
      padding: 3rem 0; /* padding-top: 3rem, padding-bottom: 3rem par défaut */
      position: relative;
    }

    .story-part:first-child {
      padding-bottom: 0.5rem; /* Réduit davantage le padding en bas */
    }
    
    .story-part-colored {
      background-color: var(--light-color);
      margin: 0.5rem 0; /* Réduit davantage la marge en haut et en bas */
      padding: 3rem 0;
    }
    
    .story-content {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 2rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: flex-start;
      gap: 2rem;
      margin: 1.5rem 0;
      font-family: 'Raleway', sans-serif;
    }
    
    .story-text {
      flex: 1;
      min-width: 300px;
    }
    
    .story-image {
      flex: 1;
      min-width: 300px;
      max-width: 800px; /* Augmenté pour accommoder l'image et le texte côte à côte */
      margin: 0 auto; /* Centre le conteneur d'image */
      padding: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .story-image .image-container {
      display: flex;
      align-items: center;
      gap: 2rem;
      width: 100%;
      max-width: 100%;
    }
    
    .story-image .image-container img {
        width: 50%; /* Occupe la moitié de la largeur du conteneur */
        max-width: 100%; /* S'assure que l'image ne dépasse pas son conteneur */
        height: auto;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        object-fit: cover; /* Couvre l'espace disponible en conservant le ratio */
    }
    
    /* Version mobile - image et légende en colonne */
    @media (max-width: 768px) {
        .story-image .image-container {
            flex-direction: column;
            align-items: center;
            gap: 1rem;
        }
        
        .story-image .image-container img {
            width: 100%;
            max-width: 100%;
        }
        
        .story-image .image-caption {
            text-align: center;
            max-width: 100%;
            margin-top: 1rem;
        }
    }
    
    .story-image .image-caption {
      max-width: 300px; /* Largeur fixe pour la légende */
      font-size: 1.4rem;
      font-weight: 600;
      color: var(--primary-color) !important; /* Force la couleur primaire */
      margin: 0;
      text-align: left;
      line-height: 1.4;
    }
    
    /* S'assure que la couleur est bien appliquée même avec la classe hook */
    .story-image .image-caption.hook {
      color: var(--primary-color) !important;
    }
    
    .story-image img {
      max-width: 100%;
      max-height: 400px; /* Réduit la hauteur maximale */
      width: auto;
      height: auto;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      object-fit: contain; /* Assure que toute l'image est visible */
    }
    
    .story-lego {
      flex: 0 0 125px; /* Réduit de 250px à 125px (50%) */
      text-align: center;
      padding: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .lego-image {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
      box-shadow: none; /* Suppression de l'ombre */
      transform: scale(0.5); /* Réduit la taille de l'image de 50% */
      transform-origin: center center; /* Assure que le redimensionnement se fait à partir du centre */
    }

    /* Styles pour la section LEGO (deuxième partie) */
    .story-part-colored .story-content {
      display: flex;
      align-items: center; /* Aligner les éléments au centre verticalement */
      gap: 2rem; /* Espace entre le texte et l'image */
      flex-wrap: nowrap; /* Empêcher le retour à la ligne */
      padding-left: 0; /* Supprimer le padding hérité */
      padding-right: 0; /* Supprimer le padding hérité */
      box-sizing: border-box;
    }

    .story-part-colored .story-text {
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 60% !important; /* Le texte prend environ 60% de la largeur */
      min-width: 0 !important; /* Permet au flex item de rétrécir si nécessaire */
      padding: 0; /* Réinitialiser le padding de la règle générale */
      margin: 0;  /* Réinitialiser la margin de la règle générale */
      max-width: none; /* Réinitialiser max-width de la règle générale */
      box-sizing: border-box;
    }

    .story-part-colored .story-lego {
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 40% !important; /* L'image prend environ 40% de la largeur */
      min-width: 0 !important; /* Permet au flex item de rétrécir si nécessaire */
      padding: 0; /* Supprimer le padding existant si besoin */
      margin: 0; /* Réinitialiser la margin au cas où */
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    /* Version mobile - logo au-dessus du texte */
    @media (max-width: 768px) {
      .story-part-colored .story-content {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
      }
      
      .story-part-colored .story-text,
      .story-part-colored .story-lego {
        flex-basis: auto !important;
        width: 100%;
        max-width: 100%;
      }
      
      .lego-image {
        transform: scale(0.8); /* Ajuster la taille du logo pour mobile */
        margin: 1rem 0;
      }
    }
    
    /* Styles spécifiques pour la première partie avec l'image de l'étoile polaire */
    .story-part:first-child .story-content {
      align-items: center;
    }
    
    .story-part:first-child .story-image {
      flex: 1;
      max-width: none; /* Supprime la largeur maximale */
      min-width: 400px; /* Largeur minimale plus grande */
    }
    
    .story-part:first-child .story-image img {
      display: block; /* Pour permettre le centrage avec margin auto si besoin */
      margin-left: auto;
      margin-right: auto;
      max-height: 24vh; /* 45% de la hauteur de l'écran, réduit de moitié */
      width: auto;
      max-width: 80%;
      object-fit: contain; /* Assure que toute l'image est visible */
    }
    
    .image-caption {
      /* text-align, font-size, color sont gérés par .hook */
      margin-top: 1.5rem; /* Conserve la marge supérieure de .hook ou ajuste si besoin */
      margin-bottom: 1rem; /* Réduit la marge inférieure par rapport à .hook standard */
      /* max-width et margin-left/right auto sont aussi gérés par .hook */
    }

    .lego-list li {
      position: relative;
      padding-left: 1.5rem;
      margin-bottom: 1rem;
      line-height: 1.7;
      color: var(--text-color);
    }
    
    .lego-list li:before {
      content: '•';
      color: var(--accent-color);
      font-weight: bold;
      display: inline-block;
      width: 1em;
      margin-left: -1.5rem;
      font-size: 1.2em;
      position: absolute;
      left: 0;
    }
    
    .story-cta {
      text-align: center;
      padding: 2rem 0;
      margin-top: 1.5rem;
      background: linear-gradient(135deg, rgba(247, 243, 238, 0.8) 0%, rgba(255, 255, 255, 0.9) 100%);
    }
    
    .cta-content {
      max-width: 800px;
      margin: 0 auto;
    }
    
    .story-text, 
    .story-image,
    .story-lego {
      flex: 1 1 100%;
      min-width: 100%;
    }
    
    .challenge-prompt {
      font-family: 'Raleway', sans-serif;
      font-weight: 600;
      color: var(--primary-color);
      font-size: 1.6rem;
      margin: 2rem 0 1.2rem;
      text-align: center;
      line-height: 1.4;
    }
    
    .invitation {
      font-weight: 700;
      margin: 1.5rem 0 2rem;
      text-align: center;
      font-size: 1.8rem;
      color: var(--primary-color);
      line-height: 1.4;
    }
    
    .story-cta .invitation {
      font-size: 1.6rem;
      font-weight: 500;
      line-height: 1.3;
      margin: 2rem 0;
    }
    
    /* Styles pour la section d'introduction des services */
    .services-intro {
      max-width: 100%;
      margin: 0 auto 3rem;
      text-align: center;
      padding: 0 1.5rem;
    }
    
    .services-intro p {
      font-size: 1.2rem;
      line-height: 1.8;
      color: var(--dark-color);
      margin-bottom: 2rem;
      max-width: 1000px;
      margin-left: auto;
      margin-right: auto;
    }
    
    .services-intro p:last-child {
      margin-bottom: 0;
    }
    
    .services-intro p[data-i18n="services.offer.recognize_prompt"] {
      font-weight: 600;
      color: var(--primary-color);
      font-size: 1.2rem;
      margin: 2rem 0 1rem;
      text-align: center;
    }
    
    .services-intro p[data-i18n="services.offer.invitation"] {
      font-style: italic;
      margin-bottom: 2rem;
      text-align: center;
      font-size: 1.1rem;
    }
    
    /* Certifications Section Styles */
    .mission-statement {
      background-color: var(--secondary-color);
      border-radius: 12px;
      padding: 2rem 1.5rem;
      margin: 0 1rem 3rem;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
    }

    .mission-content {
      display: flex;
      flex-direction: column; /* Stack elements vertically */
      align-items: center; /* Center items horizontally in the column */
      gap: 1.5rem; /* Adjusted gap for vertical stacking */
      max-width: 100%;
      width: 100%;
      min-height: auto; /* Allow height to be determined by content */
    }
    
    @media (max-width: 768px) {
      .mission-content {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
      }
      
      .mission-image {
        margin-bottom: 1rem;
      }
      
      .mission-text {
        text-align: center;
      }
    }

    .mission-image {
      flex: 0 0 35%;
      max-width: 400px;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    .mission-image img {
      width: 100%;
      height: auto;
      display: block;
      transition: transform 0.3s ease;
    }

    .mission-image:hover img {
      transform: scale(1.03);
    }

    .mission-text {
      flex: 1;
    }

    .mission-statement .hook {
      font-family: 'Raleway', sans-serif; /* Harmonized */
      font-size: 2rem; /* Consistent with general .hook */
      font-weight: 300; /* Harmonized (was 300) */
      color: var(--accent-color); /* Consistent */
      text-align: center; /* Harmonized */
      margin: 2rem auto 1.5rem; /* Harmonized (top/bottom margin, auto for left/right for centering) */
      line-height: 1.3; /* Harmonized (was 1.4) */
      padding: 0 1rem; /* Harmonized */
      max-width: 1000px; /* Harmonized (was 90%) */
      letter-spacing: 0.12em; /* Harmonized */
    }

    .mission-statement p {
      font-size: 1.2rem;
      line-height: 1.7;
      color: var(--text-color);
      margin: 0 0 1rem 0;
    }

    .mission-statement p:last-child {
      margin-bottom: 0;
    }

    .mission-fullwidth {
      width: 100%;
      margin-top: 2rem;
      padding-top: 2rem;
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      font-size: 1.2rem;
      line-height: 1.7;
      color: var(--text-color);
    }

    .certifications-container {
      display: flex;
      flex-direction: column;
      gap: 2rem;
      margin: 3rem 0;
    }

    .certification-item {
      display: flex;
      align-items: flex-start;
      background: white;
      border-radius: 12px;
      padding: 1.5rem;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .certification-item:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }

    .certification-logo {
      flex: 0 0 80px;
      margin-right: 1.5rem;
    }

    .certification-logo img {
      width: 100%;
      height: auto;
      object-fit: contain;
    }

    .certification-details h3 {
      font-size: 1.1rem;
      color: var(--primary-color);
      margin: 0;
    }

    .mission-text {
      flex: 1;
    }

    .mission-statement .hook {
      font-size: 1.8rem;
      font-weight: 600;
      color: var(--accent-color);
      margin: 0 0 1.5rem 0;
      line-height: 1.4;
    }

    .mission-statement p {
      font-size: 1.2rem;
      line-height: 1.7;
      color: var(--text-color);
      margin: 0 0 1rem 0;
    }
    .mission-statement p:last-child {
      margin-bottom: 0;
    }

    /* Styles pour la section des caractéristiques */
    .features-container {
      margin: 3rem 0;
    }

    .features-list {
      list-style: none;
      padding: 0;
      margin: 2rem 0;
    }

    .feature-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 1.5rem;
      background: white;
      border-radius: 10px;
      padding: 1.5rem;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .feature-item:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    }

    .feature-icon {
      font-size: 1.8rem;
      margin-right: 1.5rem;
      min-width: 50px;
      text-align: center;
      color: var(--primary-color);
    }

    .feature-text {
      font-size: 1.1rem;
      line-height: 1.6;
      color: var(--text-color);
    }

    .text-center {
      text-align: center;
    }

    .certification-details h3 {
      font-size: 1.1rem;
      color: var(--primary-color);
      margin: 0;
    }

    .coaching-explanation ol {
      padding-left: 2rem;
      margin: 1.5rem 0;
    }

    .coaching-explanation li {
      margin-bottom: 1rem;
      line-height: 1.6;
    }

    .cta-text {
      text-align: center;
      font-size: 1.3rem;
      font-weight: 600;
      margin: 3rem 0 1.5rem;
      color: var(--primary-color);
    }

    /* Responsive styles */
    @media (max-width: 768px) {
      .mission-statement {
        padding: 1.5rem;
        margin: 0 -1rem 2rem;
        border-radius: 0;
      }

      .mission-statement .hook {
        font-size: 1.5rem;
      }

      .certification-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 1.5rem 1rem;
      }

      .certification-logo {
        margin: 0 0 1.5rem 0;
        max-width: 100px;
      }

      .coaching-explanation {
        padding: 1.5rem;
        margin: 2rem -1rem 0;
        border-radius: 0;
      }

      .coaching-explanation h3 {
        font-size: 1.5rem;
      }
    }

    .services-intro .quote-text {
      font-style: italic;
      font-size: 1.4rem;
      color: var(--primary-color);
      margin-bottom: 2rem;
      line-height: 1.6;
      position: relative;
      padding: 0 2rem;
    }
    
    .services-intro .quote-text:before {
      content: '"';
      font-size: 4rem;
      color: rgba(1, 127, 150, 0.1);
      position: absolute;
      left: -10px;
      top: -20px;
      font-family: Georgia, serif;
      line-height: 1;
    }
    
    .services-intro .cta-container {
      margin: 2.5rem 0;
    }
    
    .cta-text .cta {
      display: inline-block;
      padding: 0.8rem 1.8rem;
      background-color: var(--accent-color);
      color: white;
      text-decoration: none;
      border-radius: 25px;
      font-weight: 420;
      transition: background-color 0.3s ease, transform 0.2s ease;
      font-family: 'Raleway', sans-serif;
      border: 2px solid var(--accent-color);
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      margin-top: 1.2rem;
      font-size: 1.1rem;
      cursor: pointer;
    }
    
    .cta-text .cta:hover, .cta-text .cta:focus {
      background-color: #E57B00;
      border-color: #E57B00;
      color: white;
      transform: translateY(-2px);
      box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    }

    .invitation {
      font-family: 'Raleway', sans-serif;
      font-size: 1.1rem;
      margin: 1rem 0 1.5rem;
      font-weight: 400;
      color: var(--primary-color);
    }

    p,
    ul,
    ol {
      margin-bottom: 1.2rem;
      line-height: inherit; /* Assure l'héritage de l'interligne du body */
      color: inherit; /* Assure l'héritage de la couleur du texte du body */
    }

    li {
      margin-bottom: 0.6rem;
    }

    ul,
    ol {
      padding-left: 2rem; /* Indentation standard pour les listes */
    }

    /* Navigation Menu Styles */
    .nav-menu {
      background-color: white;
      padding: 1rem 0;
      text-align: center;
      border-bottom: 1px solid var(--accent-light);
      display: flex; /* Use flexbox for alignment */
      justify-content: center; /* Center items horizontally */
      flex-wrap: wrap; /* Allow items to wrap to the next line on smaller screens */
    }

    .mobile-nav-toggle {
      display: none; /* Hidden by default, shown in media query */
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 0.3rem;
      position: absolute;
      top: 50%;
      right: 15px;
      transform: translateY(-50%);
      z-index: 1002;
    }

    .hamburger-icon {
      display: block;
      width: 25px;
      height: 3px;
      background-color: #fff;
      position: relative;
      transition: background-color 0.3s ease;
    }

    .hamburger-icon::before,
    .hamburger-icon::after {
      content: '';
      position: absolute;
      width: 25px;
      height: 3px;
      background-color: #fff;
      left: 0;
      transition: transform 0.3s ease, top 0.3s ease, bottom 0.3s ease;
    }

    .hamburger-icon::before {
      top: -8px;
    }

    .hamburger-icon::after {
      bottom: -8px;
    }

    /* Styles for when the menu is open (toggled by JS) */
    .mobile-nav-toggle[aria-expanded="true"] .hamburger-icon {
      background-color: transparent; /* Middle bar disappears */
    }

    .mobile-nav-toggle[aria-expanded="true"] .hamburger-icon::before {
      transform: rotate(45deg);
      top: 0;
    }

    .mobile-nav-toggle[aria-expanded="true"] .hamburger-icon::after {
      transform: rotate(-45deg);
      bottom: 0;
    }

    /* Add a media query for mobile navigation */
    @media (max-width: 768px) { /* Adjust breakpoint as needed */
      /* Style pour le menu ouvert - défilement autorisé */
      body.menu-open {
        overflow: auto;
      }

      .nav-menu {
        display: flex; /* Afficher pour l'animation */
        flex-direction: column;
        position: fixed;
        top: 36px; /* Further reduced for slimmer navbar */
        left: 0;
        right: 0;
        background-color: rgba(255, 255, 255, 0.98);
        padding: 0.2rem 0.6rem;
        z-index: 1001;
        border-top: 1px solid var(--accent-light);
        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
        max-height: 0;
        overflow-y: auto;
        transition: max-height 0.3s ease-out, opacity 0.2s ease-out;
        opacity: 0;
        backdrop-filter: blur(8px);
      }

      .nav-menu.open {
        display: flex;
        max-height: 50vh; /* Hauteur réduite à 50% de la vue */
        opacity: 1;
        transition: max-height 0.4s ease-in, opacity 0.3s ease-in;
      }

      /* Style des boutons du menu mobile */
      .nav-menu .tab-btn {
        padding: 0.5rem 0.7rem; /* Espacement réduit */
        margin: 0.1rem 0; /* Espace vertical réduit */
        font-size: 0.9rem; /* Taille de police réduite */
        transition: all 0.2s ease;
      }

      .tab-btn {
        display: block;
        width: 100%;
        padding: 0.6rem 0.8rem;
        margin: 0.15rem 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        background: none;
        border: none;
        text-align: left;
        font-size: 0.95rem;
        color: #333;
        cursor: pointer;
        transition: all 0.2s ease;
        border-radius: 4px;
      }
    
      .tab-btn:last-child {
        border-bottom: none;
      }

      .mobile-nav-toggle {
        display: block; /* Show hamburger icon on mobile */
        background-color: var(--primary-color);
      }
      
      .tab-btn:hover,
      .tab-btn.active {
        background-color: rgba(0, 0, 0, 0.05); /* Couleur de survol ou actif plus subtile */
        color: var(--primary-color);
        font-weight: 600;
      }
    }

    /* Styles pour la section vidéo et CTA */
    .video-cta-section {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
      margin: 2rem 0;
      align-items: center;
      justify-content: center;
      max-width: 900px;
      margin-left: auto;
      margin-right: auto;
    }

    .video-container {
      flex: 0 1 500px;
      min-width: 280px;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .video-container:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    }

    .video-container video {
      width: 100%;
      height: auto;
      display: block;
      max-height: 280px;
      object-fit: cover;
    }

    .cta-text {
      flex: 0 1 300px;
      min-width: 250px;
      text-align: center;
      padding: 1.5rem;
      background: #f9f9f9;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }

    .cta-text p:first-child {
      font-size: 1.4rem;
      color: var(--primary-color);
      margin-bottom: 1.2rem;
      font-weight: 500;
      line-height: 1.4;
    }

    .hook-below-video {
      width: 100%;
      max-width: 1000px;
      margin: 3rem auto;
      padding: 2rem 1rem;
      text-align: center;
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;
    }

    .hook-below-video .hook {
      font-family: 'Raleway', sans-serif;
      font-size: 2rem;
      font-weight: 420;
      color: var(--accent-color);
      text-align: center;
      margin: 2rem 0 1.5rem;
      line-height: 1.3;
      letter-spacing: 0.12em;
    }
    
    .hook-below-title .hook {
      font-family: 'Raleway', sans-serif; /* Retains general .hook family */
      font-size: 2.4rem !important; /* DIAGNOSTIC: Forcing size, was 4.5rem */
      font-weight: 300 !important; /* Retains increased prominence */
      color: var(--accent-color); /* Consistent */
      text-align: center; /* Consistent */
      margin: 2rem 0 1.5rem; /* Retains general .hook margin */
      line-height: 1.3; /* Retains general .hook line-height */
      letter-spacing: 0.12em; /* Retains general .hook letter-spacing */
    }
    
    /* Style pour le texte humaniste au-dessus de la vidéo */
    .humanist-text {
      text-align: center;
      margin: 2rem 0;
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
    }
    
    .humanist-text .hook {
      font-size: 1.6rem;
      font-weight: 400;
      color: var(--accent-color) !important;
      line-height: 1.5;
    }
    
    .method-content-wrapper .humanist-text .hook {
      color: var(--accent-color) !important;
    }
    
    /* Ancien style conservé pour compatibilité */
    .hook-below-video .hook:first-child {
      margin-bottom: 1rem;
    }

    @media (max-width: 768px) {
      .video-cta-section {
        flex-direction: column;
        gap: 2rem;
      }
      
      .video-container,
      .cta-text {
        width: 100%;
      }
    }

    /* Styles pour la section de résonance */
    .unik-results-cta {
        display: block;
        max-width: 300px;
        margin: 0 auto 4rem;
        text-align: center;
    }
    
    .unik-results-resonate-question {
        text-align: center;
        font-size: 1.6rem;
        color: var(--primary-color);
        font-weight: 600;
        margin: 4rem 0 1.2rem;
        line-height: 1.4;
    }
    
    .unik-results-resonate-answer {
        text-align: center;
        font-size: 1.7rem;
        font-weight: 700;
        color: var(--primary-color);
        margin: 0 0 1.2rem;
        line-height: 1.4;
    }
    
    .unik-results-explore {
        text-align: center;
        font-size: 1.5rem;
        color: var(--primary-color);
        font-weight: 600;
        line-height: 1.6;
        margin: 0 0 2.5rem;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }