/* 
 * Fichier CSS principal
 * Ce fichier importe tous les autres fichiers CSS dans un ordre logique
 * - D'abord les outils et variables globales
 * - Ensuite les styles génériques et éléments de base
 * - Puis les composants spécifiques
 * - Enfin les utilitaires qui ont la priorité
 */
*, *:before, *:after {
  box-sizing: border-box;
}
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct box sizing in Firefox.
 */

hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Remove the inheritance of text transform in Edge and Firefox.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
 */

legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* ------------------------------
 * 1. TOOLS & VARIABLES
 * Fonctions, mixins, variables et utilitaires nécessaires
 * ------------------------------ */
/* 
 * STYLES GLOBAUX ET VARIABLES CSS
 * Ce fichier contient les styles de base, les resets et les variables CSS pour le thème.
 */ 

/* =================================
   VARIABLES CSS
   ================================= */

   :root {

   /* =================================
      VARIABLES HUBL DEPUIS FIELDS.JSON
      ================================= */
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

   /* =================================
      PALETTE DE COULEURS DE BASE
      ================================= */
 
   /* --- Couleurs Principales --- */
   --primary: #F7EA48;
   --secondary: #A2ACAB;
   --tertiary: #7EDDD3;
   --fourth: #F4364C;  /* Couleur Red pour éléments d'alerte */
 
   --color-light: #FFFFFF;
   --color-dark: #25282A;
 
   --color-white: #FFFFFF;
   --color-black: #000000;

   /* Note: Pour les box-shadow avec opacité, utiliser directement les variables de couleur 
      avec des valeurs d'opacité CSS : 
      - color-mix(in srgb, var(--primary) 10%, transparent) 
      - ou directement la couleur avec alpha dans rgba() si supporté */
   
   /* =================================
      GÉNÉRATION DYNAMIQUE DES NUANCES
      Utilise color-mix() pour créer automatiquement les nuances
      ================================= */

   /* --- Nuances Primaires Dynamiques --- */
   --primary-50: color-mix(in srgb, var(--primary) 5%, white);
   --primary-100: color-mix(in srgb, var(--primary) 10%, white);
   --primary-200: color-mix(in srgb, var(--primary) 25%, white);
   --primary-300: var(--primary); /* Couleur primaire principale */
   --primary-400: color-mix(in srgb, var(--primary) 85%, black 15%);
   --primary-500: color-mix(in srgb, var(--primary) 75%, black 25%);
   --primary-600: color-mix(in srgb, var(--primary) 65%, black 35%);
   --primary-700: color-mix(in srgb, var(--primary) 55%, black 45%);
   --primary-800: color-mix(in srgb, var(--primary) 45%, black 55%);
   --primary-900: color-mix(in srgb, var(--primary) 35%, black 65%);
   
   /* --- Nuances Secondaires Dynamiques --- */
   --secondary-50: color-mix(in srgb, var(--secondary) 5%, white);
   --secondary-100: color-mix(in srgb, var(--secondary) 10%, white);
   --secondary-200: color-mix(in srgb, var(--secondary) 25%, white);
   --secondary-300: color-mix(in srgb, var(--secondary) 40%, white);
   --secondary-400: color-mix(in srgb, var(--secondary) 60%, white);
   --secondary-500: color-mix(in srgb, var(--secondary) 80%, white);
   --secondary-600: color-mix(in srgb, var(--secondary) 90%, white);
   --secondary-700: color-mix(in srgb, var(--secondary) 95%, white);
   --secondary-800: var(--secondary); /* Couleur secondaire principale */
   --secondary-900: color-mix(in srgb, var(--secondary) 85%, black 15%);
   
 
   /* --- Nuances Tertiaires Dynamiques --- */
   --tertiary-50: var(--tertiary); /* Couleur tertiaire principale (déjà claire) */
   --tertiary-100: color-mix(in srgb, var(--tertiary) 90%, white);
   --tertiary-200: color-mix(in srgb, var(--tertiary) 80%, white);
   --tertiary-300: color-mix(in srgb, var(--tertiary) 70%, white);
   --tertiary-400: color-mix(in srgb, var(--tertiary) 60%, white);
   --tertiary-500: color-mix(in srgb, var(--tertiary) 50%, white);
   --tertiary-600: color-mix(in srgb, var(--tertiary) 85%, black 15%);
   --tertiary-700: color-mix(in srgb, var(--tertiary) 75%, black 25%);
   --tertiary-800: color-mix(in srgb, var(--tertiary) 65%, black 35%);
   --tertiary-900: color-mix(in srgb, var(--tertiary) 55%, black 45%);

   /* --- Nuances Fourth Dynamiques --- */
   --fourth-50: color-mix(in srgb, var(--fourth) 5%, white);
   --fourth-100: color-mix(in srgb, var(--fourth) 10%, white);
   --fourth-200: color-mix(in srgb, var(--fourth) 25%, white);
   --fourth-300: color-mix(in srgb, var(--fourth) 40%, white);
   --fourth-400: color-mix(in srgb, var(--fourth) 60%, white);
   --fourth-500: var(--fourth); /* Couleur fourth principale */
   --fourth-600: color-mix(in srgb, var(--fourth) 85%, black 15%);
   --fourth-700: color-mix(in srgb, var(--fourth) 75%, black 25%);
   --fourth-800: color-mix(in srgb, var(--fourth) 65%, black 35%);
   --fourth-900: color-mix(in srgb, var(--fourth) 55%, black 45%);
 
 
   /* --- Couleurs Neutres --- */
   --white: #FFFFFF;
   --gray-50: #f9fafb;
   --gray-100: #f3f4f6;
   --gray-200: #e5e7eb;
   --gray-300: #d1d5db;
   --gray-400: #9ca3af;
   --gray-500: #6b7280;
   --gray-600: #4b5563;
   --gray-700: #374151;
   --gray-800: #1f2937;
   --gray-900: #111827;
   --black: #000000;
 
   /* =================================
      VARIABLES SÉMANTIQUES (UTILISATION)
      Ces variables utilisent la palette ci-dessus et définissent l'usage.
      Modifier ces variables impacte les composants qui les utilisent.
      ================================= */
 
   /* --- Texte --- */
   --color-text-default: #1A1A1A;      /* Texte principal */
   --color-headings-default: #25282A;   /* Couleur principale des titres */
   --color-text-muted: var(--gray-600);        /* Texte secondaire, moins important */
   --color-text-subtle: var(--gray-500);       /* Texte encore plus discret */
   --color-text-inverted: var(--white);        /* Texte sur fond sombre */
   --color-text-inverted-muted: rgba(255, 255, 255, 0.8); /* Texte secondaire sur fond sombre */
   --color-text-accent: var(--primary);    /* Texte pour liens ou accents primaires */
   --color-text-link: var(--primary);
   --color-text-link-hover: var(--primary-700);
 
   /* Mapping des anciennes variables */
   --content-primary: var(--color-text-default);
   --content-secondary: var(--color-text-muted);
 
   /* --- Fonds (Backgrounds) --- */
   --color-background-body: var(--white);          /* Fond principal de la page */
   --color-background-primary: var(--primary);          /* Fond principal de la page */
   --color-background-secondary: var(--secondary);          /* Fond principal de la page */
   --color-background-tertiary: var(--tertiary);          /* Fond principal de la page */
   --color-background-fourth: var(--fourth);          /* Fond fourth de la page */
   --color-background-dark: var(--color-dark);          /* Fond principal de la page */
   --color-background-light: var(--color-light);          /* Fond principal de la page */
   --color-background-black: var(--color-black);          /* Fond principal de la page */
   --color-background-white: var(--color-white);          /* Fond principal de la page */
 
 
   /* --- Bordures --- */
   --color-border-default: var(--gray-200);      /* Bordure standard */
   --color-border-subtle: var(--gray-100);       /* Bordure légère */
   --color-border-muted: var(--gray-300);        /* Bordure pour champs, etc. */
   --color-border-accent: var(--primary-300);    /* Bordure pour focus, accents */
   --color-border-strong: var(--gray-400);
 
   /* --- Éléments Interactifs (Focus, Sélection) --- */
   --color-focus-ring: rgba(190, 242, 100, 0.25); /* Utilise --primary-300 */
 
   /* =================================
      TYPOGRAPHIE
      ================================= */
 
   /* --- Familles de Polices --- */
   --font-family-base: 'Proxima Nova', sans-serif;
   --font-family-heading: 'Proxima Nova Bold', sans-serif;
   --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
   
   /* --- Tailles de Police --- */
   --font-size-xs: 0.75rem;   /* 12px */
   --font-size-sm: 0.875rem;  /* 14px */
   --font-size-base: 16px;    /* 16px - Taille de référence */
   --font-size-lg: 1.125rem;  /* 18px */
   --font-size-xl: 1.25rem;   /* 20px */
   --font-size-2xl: 1.5rem;   /* 24px */
   --font-size-3xl: 1.875rem; /* 30px */
   --font-size-4xl: 2.25rem;  /* 36px */
   --font-size-5xl: 3rem;     /* 48px */
   --font-size-6xl: 3.75rem;  /* 60px */
   
   /* --- Épaisseurs de Police --- */
   --font-weight-light: 300;
   --font-weight-normal: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;
   --font-weight-extrabold: 800;
   --font-weight-black: 900;
   
   /* --- Hauteurs de Ligne --- */
   --line-height-none: 1;
   --line-height-tight: 1.25;
   --line-height-snug: 1.375;
   --line-height-normal: 1.5;    /* Référence pour le corps du texte */
   --line-height-relaxed: 1.625;
   --line-height-loose: 2;
   
   /* --- Espacement des Lettres --- */
   --letter-spacing-tighter: -0.05em;
   --letter-spacing-tight: -0.025em;
   --letter-spacing-normal: 0em;
   --letter-spacing-wide: 0.025em;
   --letter-spacing-wider: 0.05em;
   --letter-spacing-widest: 0.1em;
 
   /* =================================
      ESPACEMENTS & LAYOUT
      ================================= */
 
   /* --- Échelle d'Espacement (pour padding, margin, gap) --- */
   --space-0: 0;
   --space-1: 0.25rem;  /* 4px */
   --space-2: 0.5rem;   /* 8px */
   --space-3: 0.75rem;  /* 12px */
   --space-4: 1rem;     /* 16px */
   --space-5: 1.5rem;   /* 24px */
   --space-6: 2rem;     /* 32px */
   --space-7: 2.5rem;   /* 40px */
   --space-8: 3rem;     /* 48px */
   --space-9: 4rem;     /* 64px */
   --space-10: 5rem;    /* 80px */
   /* Mapping des anciennes variables */
   --spacing-xs: var(--space-1);
   --spacing-sm: var(--space-2);
   --spacing-md: var(--space-4);
   --spacing-lg: var(--space-5);
   --spacing-xl: var(--space-6);
   --spacing-2xl: var(--space-8);
   --spacing-3xl: var(--space-9);
   --spacing-4xl: var(--space-10);
   
   /* --- Layout Global --- */
     
     /* 1a. Containers */
   --container-max-width: 1400px;
   --container-fluid-padding-x:0;
   --container-padding-x: 24px; /* 24px, cohérent avec l'échelle */
   --fullwidth-padding-x: 24px;
   /* Paddings responsives */
   --container-padding-xs: 1rem;
   --container-padding-md: 2rem;
   --container-padding-lg: 3rem;
 
   /* --- Sections --- */
   --section-padding-y: 64px; /* 64px */
   --dnd-section-padding: var(--space-6); /* 2rem */
   --section-padding-vertical: 4rem;
   --section-padding-horizontal: 1rem;
 
   /* --- Grille --- */
   --grid-columns: 12;
   --grid-gutter-width: 24px; /* 1.5rem */
   /* Mapping des gaps */
   --gap-xs: var(--space-1);
   --gap-sm: var(--space-2);
   --gap-md: var(--space-4);
   --gap-lg: var(--space-5);
   --gap-xl: var(--space-6);
   --gap-2xl: var(--space-8);
   --gap-3xl: var(--space-9);
 
   /* =================================
      BORDURES & ARRONDIS
      ================================= */
 
   /* --- Épaisseur & Style --- */
   --border-width-default: 1px;
   --border-style-default: solid;
 
   /* --- Rayon d'Arrondi (Border Radius) --- */
   --border-radius-none: 0px;
   --border-radius-sm: 4px;
   --border-radius-md: 8px;
   --border-radius-lg: 16px;
   --border-radius-xl: 24px;
   --border-radius-full: 9999px; /* Pour les pilules, cercles */
 
   /* =================================
      OMBRES (BOX SHADOW)
      ================================= */
   
     
       --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
       --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
       --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
       --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
     
     --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
   
   --shadow-none: none;
 
   /* =================================
      TRANSITIONS
      ================================= */
   --transition-duration-default: 200ms;
   --transition-duration-slow: 300ms;
   --transition-timing-default: ease-in-out;
   --transition-property-common: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
   /* Mapping */
   --theme-transition: var(--transition-duration-slow) var(--transition-timing-default);
 
   /* =================================
      HEADER & NAVIGATION
      ================================= */
   --global-top-bar-enabled: 0;
   --global-top-bar-height: 0px;

   /* =================================
      BREAKPOINTS (POINTS DE RUPTURE)
      ================================= */
   --breakpoint-xs: 767px;
   --breakpoint-sm: 1024px;
   --breakpoint-md: 768px;
   --breakpoint-lg: 1024px;
   --breakpoint-xl: 1280px;
 
 }
 
 /* =================================
    RESET & STYLES DE BASE
    ================================= */
 
 /* Box sizing global */
 *, *::before, *::after {
   box-sizing: border-box;
 }
 
 /* Reset des marges et paddings */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
 article, aside, canvas, details, embed, 
 figure, figcaption, footer, header, hgroup, 
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   vertical-align: baseline;
 }
 
 /* HTML5 display-role reset pour anciens navigateurs */
 article, aside, details, figcaption, figure, 
 footer, header, hgroup, menu, nav, section {
   display: block;
 }
 
 
 /* Déclaration de la police Figtree locale */

 /* Configuration de base du document */
 html {
   font-size: 16px; /* Taille de base en px pour rem */
   line-height: var(--line-height-normal);
   -webkit-text-size-adjust: 100%;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
   scroll-behavior: smooth;
 }
 
 body {
   font-family: var(--font-family-base);
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-normal);
   color: var(--color-text-default);
   background-color: var(--color-background-body);
   overflow-x: hidden;
 }
 
 /* Liens */
 a {
   color: var(--color-text-link);
   text-decoration: none;
   transition: color var(--transition-duration-default) var(--transition-timing-default);
 }
 
 a:hover {
   color: var(--color-text-link-hover);
   text-decoration: none;
 }
 
 /* Images responsives par défaut */
 img {
   max-width: 100%;
   height: auto;
   vertical-align: middle;
 }
 
 /* Formulaires et boutons */
 button, input, optgroup, select, textarea {
   font-family: inherit;
   font-size: inherit;
   line-height: inherit;
   color: inherit;
   margin: 0;
 }
 
 button {
   cursor: pointer;
   background-color: transparent;
   border: none;
   padding: 0;
 }
 
 /* Focus styles pour accessibilité */
 :focus-visible {
   outline: 2px solid var(--color-focus-ring);
   outline-offset: 2px;
 }
 
 /* Listes */
 ul, ol {
   padding-left: 1.5em;
 }
 
 /* Typographie de base */
 h1, h2, h3, h4, h5, h6 {
   font-family: var(--font-family-heading);
   font-weight: var(--font-weight-bold);
   line-height: var(--line-height-tight);
   color: var(--color-text-default);
   margin-bottom: 0.5em;
 }
 
 p {
   margin-bottom: 1rem;
 }
 
 strong, b {
   font-weight: var(--font-weight-bold);
 }
 

 /* Prévention des débordements qui causent des problèmes d'affichage sur mobile */
 
 /* Règle générale pour empêcher les débordements horizontaux */
 body, 
 section, 
 .content-section,
 .container {
   max-width: 100%;
 }
 
 /* Gestion du texte pour éviter les débordements */
 h1, h2, h3, h4, h5, h6,
 p, li, a, span, button {
   max-width: 100%;
   word-wrap: break-word;
   overflow-wrap: break-word;
   hyphens: initial;
 }
 
 /* Ajustements spécifiques pour mobile */
 @media (max-width: 767px) {
   /* Assurer que tous les éléments de navigation et boutons ne débordent pas */
   .nav-menu__link,
   .nav-menu__dropdown-link, 
   .nav-menu__sub-dropdown-link,
   .btn,
   .button,
   .mobile-menu__link,
   .header-lang-selector__name {
     white-space: normal;
     word-wrap: break-word;
     overflow-wrap: break-word;
   }
   
   /* Contrôle de la largeur des conteneurs */
   .container {
     width: 100%;
     max-width: 100%;
     padding-left: 15px;
     padding-right: 15px;
     box-sizing: border-box;
   }
 }



/* =================================
    FALLBACK POUR NAVIGATEURS NON COMPATIBLES
    Nuances statiques comme fallback
    ================================= */

   /* Fallback uniquement si color-mix() n'est pas supporté */
   @supports not (color: color-mix(in srgb, red, blue)) {
     /* --- Couleurs Primaires (Vert lime) - Fallback --- */
     --primary-50: #f7ffe5;
     --primary-100: #ecffc7;
     --primary-200: #deff96;
     --primary-300: #BEF264; /* Couleur primaire principale */
     --primary-400: #a5e635;
     --primary-500: #88cc16;
     --primary-600: #65a30d;
     --primary-700: #4d7c0f;
     --primary-800: #3f6212;
     --primary-900: #365314;
     
     /* --- Couleurs Secondaires (Vert foncé) - Fallback --- */
     --secondary-50: #ecfdf4;
     --secondary-100: #c5f1e1;
     --secondary-200: #89e2c7;
     --secondary-300: #4dceac;
     --secondary-400: #2cb396;
     --secondary-500: #148f7c;
     --secondary-600: #0f6b5d;
     --secondary-700: #0c4a3f;
     --secondary-800: #022C22; /* Couleur secondaire principale */
     --secondary-900: #011a14;
     
     /* --- Couleurs Tertiaires (tertiary) - Fallback --- */
     --tertiary-50: #FFF7ED; /* Couleur Tertiaires principale */
     --tertiary-100: #FEF3C7;
     --tertiary-200: #FDE68A;
     --tertiary-300: #FCD34D;
     --tertiary-400: #FBBF24;
     --tertiary-500: #F59E0B;
     --tertiary-600: #D97706;
     --tertiary-700: #B45309;
         --tertiary-800: #92400E;
    --tertiary-900: #78350F;
  }

/* =================================
   CLASSES UTILITAIRES POUR RICH TEXT
   ================================= */

.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6 {
  color: var(--color-white) !important;
}

.text-white p,
.text-white li,
.text-white span,
.text-white div {
  color: var(--color-white) !important;
}

.text-white strong,
.text-white b {
  color: var(--color-white) !important;
  font-weight: 600;
}

.text-white em,
.text-white i {
  color: var(--color-white) !important;
}

.text-white a {
  color: var(--primary) !important;
}

.text-white a:hover {
  color: var(--color-white) !important;
}
/**
 * Colors Utility Classes
 * Classes pour l'application de couleurs de fond et de texte
 */

/* ---------- Classes de fond (background) ---------- */

/* Couleurs principales */
.bg-primary { background-color: var(--primary); }
.bg-secondary { background-color: var(--secondary); }
.bg-tertiary { background-color: var(--tertiary); }
.bg-fourth { background-color: var(--fourth); }
.bg-light { background-color: var(--light); }
.bg-dark { background-color: var(--dark); }
.bg-white { background-color: var(--white); }
.bg-black { background-color: var(--black); }

/* Couleurs primaires */
.bg-primary-50 { background-color: var(--primary-50); }
.bg-primary-100 { background-color: var(--primary-100); }
.bg-primary-200 { background-color: var(--primary-200); }
.bg-primary-300 { background-color: var(--primary-300); }
.bg-primary-400 { background-color: var(--primary-400); }
.bg-primary-500 { background-color: var(--primary-500); }
.bg-primary-600 { background-color: var(--primary-600); }
.bg-primary-700 { background-color: var(--primary-700); }
.bg-primary-800 { background-color: var(--primary-800); }
.bg-primary-900 { background-color: var(--primary-900); }

/* Couleurs secondaires */
.bg-secondary-50 { background-color: var(--secondary-50); }
.bg-secondary-100 { background-color: var(--secondary-100); }
.bg-secondary-200 { background-color: var(--secondary-200); }
.bg-secondary-300 { background-color: var(--secondary-300); }
.bg-secondary-400 { background-color: var(--secondary-400); }
.bg-secondary-500 { background-color: var(--secondary-500); }
.bg-secondary-600 { background-color: var(--secondary-600); }
.bg-secondary-700 { background-color: var(--secondary-700); }
.bg-secondary-800 { background-color: var(--secondary-800); }
.bg-secondary-900 { background-color: var(--secondary-900); }


/* Couleurs tertiaires */
.bg-tertiary-50 { background-color: var(--tertiary-50); }
.bg-tertiary-100 { background-color: var(--tertiary-100); }
.bg-tertiary-200 { background-color: var(--tertiary-200); }
.bg-tertiary-300 { background-color: var(--tertiary-300); }
.bg-tertiary-400 { background-color: var(--tertiary-400); }
.bg-tertiary-500 { background-color: var(--tertiary-500); }
.bg-tertiary-600 { background-color: var(--tertiary-600); }
.bg-tertiary-700 { background-color: var(--tertiary-700); }
.bg-tertiary-800 { background-color: var(--tertiary-800); }
.bg-tertiary-900 { background-color: var(--tertiary-900); }

/* Couleurs fourth (Red) */
.bg-fourth-50 { background-color: var(--fourth-50); }
.bg-fourth-100 { background-color: var(--fourth-100); }
.bg-fourth-200 { background-color: var(--fourth-200); }
.bg-fourth-300 { background-color: var(--fourth-300); }
.bg-fourth-400 { background-color: var(--fourth-400); }
.bg-fourth-500 { background-color: var(--fourth-500); }
.bg-fourth-600 { background-color: var(--fourth-600); }
.bg-fourth-700 { background-color: var(--fourth-700); }
.bg-fourth-800 { background-color: var(--fourth-800); }
.bg-fourth-900 { background-color: var(--fourth-900); }

/* Couleurs Red (alias pour fourth) */
.bg-red { background-color: var(--fourth); }
.bg-red-50 { background-color: var(--fourth-50); }
.bg-red-100 { background-color: var(--fourth-100); }
.bg-red-200 { background-color: var(--fourth-200); }
.bg-red-300 { background-color: var(--fourth-300); }
.bg-red-400 { background-color: var(--fourth-400); }
.bg-red-500 { background-color: var(--fourth-500); }
.bg-red-600 { background-color: var(--fourth-600); }
.bg-red-700 { background-color: var(--fourth-700); }
.bg-red-800 { background-color: var(--fourth-800); }
.bg-red-900 { background-color: var(--fourth-900); }

/* Couleurs Sky (maintenant tertiaire) */
.bg-sky { background-color: var(--tertiary); }
.bg-sky-50 { background-color: var(--tertiary-50); }
.bg-sky-100 { background-color: var(--tertiary-100); }
.bg-sky-200 { background-color: var(--tertiary-200); }
.bg-sky-300 { background-color: var(--tertiary-300); }
.bg-sky-400 { background-color: var(--tertiary-400); }
.bg-sky-500 { background-color: var(--tertiary-500); }
.bg-sky-600 { background-color: var(--tertiary-600); }
.bg-sky-700 { background-color: var(--tertiary-700); }
.bg-sky-800 { background-color: var(--tertiary-800); }
.bg-sky-900 { background-color: var(--tertiary-900); }


/* Couleurs neutres */
.bg-light { background-color: var(--light); }
.bg-dark { background-color: var(--dark); }
.bg-white { background-color: var(--white); }
.bg-black { background-color: var(--black); }
.bg-gray-50 { background-color: var(--gray-50); }
.bg-gray-100 { background-color: var(--gray-100); }
.bg-gray-200 { background-color: var(--gray-200); }
.bg-gray-300 { background-color: var(--gray-300); }
.bg-gray-400 { background-color: var(--gray-400); }
.bg-gray-500 { background-color: var(--gray-500); }
.bg-gray-600 { background-color: var(--gray-600); }
.bg-gray-700 { background-color: var(--gray-700); }
.bg-gray-800 { background-color: var(--gray-800); }
.bg-gray-900 { background-color: var(--gray-900); }

/* ---------- Classes de texte (color) ---------- */

/* Couleurs primaires */
.text-primary-50 { color: var(--primary-50); }
.text-primary-100 { color: var(--primary-100); }
.text-primary-200 { color: var(--primary-200); }
.text-primary-300 { color: var(--primary-300); }
.text-primary-400 { color: var(--primary-400); }
.text-primary-500 { color: var(--primary-500); }
.text-primary-600 { color: var(--primary-600); }
.text-primary-700 { color: var(--primary-700); }
.text-primary-800 { color: var(--primary-800); }
.text-primary-900 { color: var(--primary-900); }

/* Couleurs secondaires */
.text-secondary-50 { color: var(--secondary-50); }
.text-secondary-100 { color: var(--secondary-100); }
.text-secondary-200 { color: var(--secondary-200); }
.text-secondary-300 { color: var(--secondary-300); }
.text-secondary-400 { color: var(--secondary-400); }
.text-secondary-500 { color: var(--secondary-500); }
.text-secondary-600 { color: var(--secondary-600); }
.text-secondary-700 { color: var(--secondary-700); }
.text-secondary-800 { color: var(--secondary-800); }
.text-secondary-900 { color: var(--secondary-900); }

/* Couleurs tertiaires */
.text-tertiary-50 { color: var(--tertiary-50); }
.text-tertiary-100 { color: var(--tertiary-100); }
.text-tertiary-200 { color: var(--tertiary-200); }
.text-tertiary-300 { color: var(--tertiary-300); }
.text-tertiary-400 { color: var(--tertiary-400); }
.text-tertiary-500 { color: var(--tertiary-500); }
.text-tertiary-600 { color: var(--tertiary-600); }
.text-tertiary-700 { color: var(--tertiary-700); }
.text-tertiary-800 { color: var(--tertiary-800); }
.text-tertiary-900 { color: var(--tertiary-900); }

/* Couleurs fourth (Red) */
.text-fourth-50 { color: var(--fourth-50); }
.text-fourth-100 { color: var(--fourth-100); }
.text-fourth-200 { color: var(--fourth-200); }
.text-fourth-300 { color: var(--fourth-300); }
.text-fourth-400 { color: var(--fourth-400); }
.text-fourth-500 { color: var(--fourth-500); }
.text-fourth-600 { color: var(--fourth-600); }
.text-fourth-700 { color: var(--fourth-700); }
.text-fourth-800 { color: var(--fourth-800); }
.text-fourth-900 { color: var(--fourth-900); }

/* Couleurs Red (alias pour fourth) */
.text-red { color: var(--fourth); }
.text-red-50 { color: var(--fourth-50); }
.text-red-100 { color: var(--fourth-100); }
.text-red-200 { color: var(--fourth-200); }
.text-red-300 { color: var(--fourth-300); }
.text-red-400 { color: var(--fourth-400); }
.text-red-500 { color: var(--fourth-500); }
.text-red-600 { color: var(--fourth-600); }
.text-red-700 { color: var(--fourth-700); }
.text-red-800 { color: var(--fourth-800); }
.text-red-900 { color: var(--fourth-900); }

/* Couleurs Sky (maintenant tertiaire) */
.text-sky { color: var(--tertiary); }
.text-sky-50 { color: var(--tertiary-50); }
.text-sky-100 { color: var(--tertiary-100); }
.text-sky-200 { color: var(--tertiary-200); }
.text-sky-300 { color: var(--tertiary-300); }
.text-sky-400 { color: var(--tertiary-400); }
.text-sky-500 { color: var(--tertiary-500); }
.text-sky-600 { color: var(--tertiary-600); }
.text-sky-700 { color: var(--tertiary-700); }
.text-sky-800 { color: var(--tertiary-800); }
.text-sky-900 { color: var(--tertiary-900); }


/* Couleurs neutres */
.text-light { color: var(--light); }
.text-dark { color: var(--dark); }
.text-white { color: var(--white); }
.text-black { color: var(--black); }
.text-gray-50 { color: var(--gray-50); }
.text-gray-100 { color: var(--gray-100); }
.text-gray-200 { color: var(--gray-200); }
.text-gray-300 { color: var(--gray-300); }
.text-gray-400 { color: var(--gray-400); }
.text-gray-500 { color: var(--gray-500); }
.text-gray-600 { color: var(--gray-600); }
.text-gray-700 { color: var(--gray-700); }
.text-gray-800 { color: var(--gray-800); }
.text-gray-900 { color: var(--gray-900); }

/* Couleurs de contenu */
.text-content-primary { color: var(--content-primary); }
.text-content-secondary { color: var(--content-secondary); }

/* Couleurs des liens */
.link-100, .link-200, .link-300, .link-400 { color: var(--primary-600); }
.link-100:hover, .link-200:hover, .link-300:hover, .link-400:hover { color: var(--primary-700); }
.link-100:active, .link-200:active, .link-300:active, .link-400:active { color: var(--primary-800); }
.link-100:visited, .link-200:visited, .link-300:visited, .link-400:visited { color: var(--primary-500); }
.link-100:disabled, .link-200:disabled, .link-300:disabled, .link-400:disabled { color: var(--gray-400); }

/* Utilitaires de texte */
.text-on-dark {
    color: var(--white);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.text-on-light {
    color: var(--gray-900);
    text-shadow: none;
}
/* 
 * Fichier de styles pour les icônes SVG
 * Ce fichier définit les classes utilitaires pour les icônes
 */

/**
 * Système d'icônes SVG
 * ---------------
 * Classes pour gérer les icônes basées sur un sprite SVG.
 */

/* Classe de base pour toutes les icônes */
.icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  stroke-width: 2;
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

/* Tailles d'icônes */
.icon-xs {
  width: 16px;
  height: 16px;
}

.icon-sm {
  width: 20px;
  height: 20px;
}

.icon-md {
  width: 24px;
  height: 24px;
}

.icon-lg {
  width: 32px;
  height: 32px;
}

.icon-xl {
  width: 48px;
  height: 48px;
}

/* Couleurs d'icônes (utilisant les variables CSS du système de couleurs) */
.icon-primary {
  stroke: var(--primary-600);
}

.icon-secondary {
  stroke: var(--secondary-600);
}

.icon-success {
  stroke: var(--success-500, #10b981);
}

.icon-danger {
  stroke: var(--danger-500, #ef4444);
}

.icon-warning {
  stroke: var(--warning-500, #f59e0b);
}

.icon-info {
  stroke: var(--info-500, #3b82f6);
}

.icon-gray {
  stroke: var(--gray-500, #6b7280);
}

.icon-white {
  stroke: var(--white, #ffffff);
}

.icon-black {
  stroke: var(--black, #000000);
}

/* Variations d'épaisseur de trait */
.icon-stroke-1, .stroke-1 {
  stroke-width: 1;
}

.icon-stroke-2, .stroke-2 {
  stroke-width: 2;
}

.icon-stroke-3, .stroke-3 {
  stroke-width: 3;
}

/* Effets au survol */
.icon-hover-primary:hover {
  stroke: var(--primary-600);
}

.icon-hover-secondary:hover {
  stroke: var(--secondary-600);
}

.icon-hover-success:hover {
  stroke: var(--success-500, #10b981);
}

.icon-hover-danger:hover {
  stroke: var(--danger-500, #ef4444);
}

.icon-hover-warning:hover {
  stroke: var(--warning-500, #f59e0b);
}

/* Classe pour remplir les icônes */
.icon-fill {
  fill: currentColor;
}

/* Classes spécifiques pour le remplissage avec couleur */
.icon-fill-primary {
  fill: var(--primary-600, #3b82f6);
}

.icon-fill-secondary {
  fill: var(--secondary-600, #6b7280);
}

.icon-fill-success {
  fill: var(--success-500, #10b981);
}

/* Classes pour l'accessibilité */
.icon-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/**
 * Conteneur du sprite SVG
 * Utilisé par le script JS pour injecter le sprite 
 * de manière invisible dans la page
 */
#svg-sprite-container {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
/*------------------------------------
    Variantes de Section Unifiées
    Système commun pour toutes les sections
------------------------------------*/

/* Variables communes pour toutes les variantes de section */
:root {
  /* Couleurs de fond pour les variantes */
  --section-bg-primary: var(--primary, #BEF264);
  --section-bg-secondary: var(--secondary, #022C22);
  --section-bg-tertiary: var(--tertiary, #FFF7ED);

  --section-bg-light: var(--light, #FFFFFF);
  --section-bg-dark: var(--dark, #1D1F1E);

  --section-bg-white: var(--white);
  --section-bg-black: var(--black);


  
  /* Couleurs de texte principal selon le fond */
  --section-text-on-primary: var(--content-primary, var(--gray-800));
  --section-text-on-secondary: var(--white, var(--white));
  --section-text-on-tertiary: var(--content-primary, var(--gray-800));

  --section-text-on-light: var(--color-dark, var(--gray-800));
  --section-text-on-dark: var(--white);

  --section-text-on-white: var(--content-primary, var(--gray-800));
  --section-text-on-black: var(--white);


  
  /* Couleurs de texte secondaire selon le fond */

  --section-text-secondary-on-primary: var(--content-primary, var(--gray-800));
  --section-text-secondary-on-secondary: var(--content-secondary, var(--gray-800));
  --section-text-secondary-on-tertiary: var(--content-secondary, var(--gray-600));

  --section-text-secondary-on-light: var(--color-dark, var(--gray-600));
  --section-text-secondary-on-dark: var(--color-text-inverted-muted, rgba(255, 255, 255, 0.8));

  --section-text-secondary-on-white: var(--content-secondary, var(--gray-600));
  --section-text-secondary-on-black: var(--white);
  
  /* Padding standard pour les sections */
  --section-padding-y: 5rem;
  --section-padding-y-mobile: 3rem;
}

/* 
 * Classes de variantes de base  
 * Ces classes peuvent être combinées avec le nom spécifique de chaque composant
 * Ex: "features-section section--dark" ou "cta-section section--tertiary"
 */

/* Classe de base pour toutes les sections */
.section {
  padding-top: var(--section-padding-y);
  padding-bottom: var(--section-padding-y);
  position: relative;
  transition: background-color var(--transition-duration-default, 0.2s) var(--transition-timing-default, ease-in-out);
}

/* Styles pour les sur-titres (overtitle) */
.section__overtitle {
  color: var(--primary);
  background-color: var(--color-dark);
  border-radius: 5px;
  font-weight: 500;
  margin-bottom: 16px;
  padding: 0 10px;
  text-transform: uppercase;
  width: max-content;
  display: inline-block;
  font-size: 14px;
  letter-spacing: 0.1em;
}



/* Variante Primary (vert clair) */
.section--primary {
  background-color: var(--section-bg-primary);
  color: var(--section-text-on-primary);
}
.section--primary .section__title {
  color: var(--color-headings-default);
}
.section--primary .section__subtitle,
.section--primary .section__description {
  color: var(--section-text-secondary-on-primary);
}
.section--primary .section__overtitle {
  color: var(--color-white);
}

/* Variante secondary (vert foncé) */
.section--secondary {
  background-color: var(--section-bg-secondary);
  color: var(--section-text-on-secondary);
}
.section--secondary .section__title {
    color: var(--section-text-on-secondary);
}
.section--secondary .section__subtitle,
.section--secondary .section__description {
  color: var(--section-text-secondary-on-secondary);
}
.section--secondary .section__overtitle {
  color: var(--primary);
}

/* Variante tertiary (tertiary) */
.section--tertiary {
  background-color: var(--section-bg-tertiary);
  color: var(--section-text-on-tertiary);
}
.section--tertiary .section__title {
  color: var(--section-text-on-tertiary);
}
.section--tertiary .section__subtitle,
.section--tertiary .section__description {
  color: var(--section-text-secondary-on-tertiary);
}
.section--tertiary .section__overtitle {
    background: var(--primary);
    color: var(--color-dark);
}


/* Variante Light (blanche) */
.section--light {
  background-color: var(--section-bg-light);
  color: var(--section-text-on-light);
}
.section--light .section__title {
  color: var(--section-text-on-light);
}
.section--light .section__subtitle,
.section--light .section__description {
  color: var(--section-text-secondary-on-light);
}

/* Variante Dark (vert foncé) */
.section--dark {
  background-color: var(--section-bg-dark);
  color: var(--section-text-on-dark);
}
.section--dark .section__title {
  color: var(--section-text-on-dark);
}
.section--dark .section__subtitle,
.section--dark .section__description {
  color: var(--section-text-secondary-on-dark);
}
.section--dark .section__overtitle {
  color: var(--color-dark);
  background: var(--primary);
}


/* Variante white (blanche) */
.section--white {
  background-color: var(--section-bg-white);
  color: var(--section-text-on-white);
}
.section--white .section__title {
  color: var(--section-text-on-white);
}
.section--white .section__subtitle,
.section--white .section__description {
  color: var(--section-text-secondary-on-white);
}

/* Variante black (noir) */
.section--black {
  background-color: var(--section-bg-black);
  color: var(--section-text-on-black);
}
.section--black .section__title {
    color: var(--section-text-on-black);
}
.section--black .section__subtitle,
.section--black .section__description {
  color: var(--section-text-secondary-on-black);
}


/* Adaptations spécifiques aux boutons */
.section--dark .btn-outline {
  color: var(--white);
  border-color: var(--white);
}
.section--dark .btn-outline:hover {
  background-color: var(--white);
  color: var(--secondary-800);
}

/* Styles pour les icônes dans les boutons outline des sections dark */
.section--dark .btn-outline .icon {
  stroke: var(--white);
}
.section--dark .btn-outline:hover .icon {
  stroke: var(--secondary-800);
}

/* Styles pour les icônes dans les boutons outline-dark des sections secondary (fond sombre) */
.section--secondary .btn-outline-dark .icon {
  stroke: var(--white);
}
.section--secondary .btn-outline-dark:hover .icon {
  stroke: var(--button-outline-dark-hover-txt);
}

/* Responsive */
@media (max-width: 768px) {
  .section {
    padding-top: var(--section-padding-y-mobile);
    padding-bottom: var(--section-padding-y-mobile);
  }

  .section__overtitle {
    margin:auto;
  }
}
/*------------------------------------
    Modes de couleur
    Système centralisé pour la gestion des thèmes de couleur
------------------------------------*/

/* Modes de couleur globaux */
.section--primary {
  background-color: var(--color-background-primary);
  color: var(--color-dark);
}

.section--secondary {
  background-color: var(--color-background-secondary);
  color: var(--color-white);
}

.section--tertiary {
  background-color: var(--color-background-tertiary);
  color: var(--color-dark);
}

.section--dark {
  background-color: var(--color-background-dark);
  color: var(--color-white);
}

.section--light {
  background-color: var(--color-background-light);
  color: var(--color-dark);
}

.section--black {
  background-color: var(--color-background-black);
  color: var(--color-white);
}

.section--white {
  background-color: var(--color-background-light);
  color: var(--color-dark);
}


/* Styles communs pour les titres */
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4, .section--dark h5, .section--dark h6,
.section--black h1, .section--black h2, .section--black h3, .section--black h4, .section--black h5, .section--black h6,
.section--secondary h1, .section--secondary h2, .section--secondary h3, .section--secondary h4, .section--secondary h5, .section--secondary h6 {
  color: var(--color-white);
}


.section--primary h1, .section--primary h2, .section--primary h3, .section--primary h4, .section--primary h5, .section--primary h6,
.section--light h1, .section--light h2, .section--light h3, .section--light h4, .section--light h5, .section--light h6,
.section--tertiary h1, .section--tertiary h2, .section--tertiary h3, .section--tertiary h4, .section--tertiary h5, .section--tertiary h6,
.section--white h1, .section--white h2, .section--white h3, .section--white h4, .section--white h5, .section--white h6 {
  color: var(--color-dark);
}

/* Styles communs pour les liens */
.section--dark a:not(.btn), .section--secondary a:not(.btn), .section--black a:not(.btn) {
  color: var(--color-white);
}

.section--primary a:not(.btn), .section--tertiary a:not(.btn), .section--light a:not(.btn), .section--white a:not(.btn) {
  color: var(--color-dark);
}

/* Styles communs pour les boutons */
.section--dark .btn-default,
.section--secondary .btn-default {
  background-color: var(--color-white);
  color: var(--color-dark);
}

/* Styles communs pour les inputs */
.section--dark input, .section--secondary input {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--color-white);
}

.section--dark input::placeholder, .section--secondary input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.section--primary input, .section--tertiary input {
  background-color: var(--color-white);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--color-dark);
}

/* Compatibilité avec les anciennes classes (pour une migration progressive) */
.section--dark {
  background-color: var(--color-background-dark);
  color: var(--color-white);
}

.section--primary {
  background-color: var(--color-background-primary);
  color: var(--color-dark);
}

.section--secondary {
  background-color: var(--color-background-secondary);
  color: var(--color-white);
}

.section--light {
  background-color: var(--color-background-light);
  color: var(--color-dark);
}

.section--tertiary {
  background-color: var(--color-background-tertiary);
  color: var(--color-dark);
}
 
 /* ------------------------------
  * 2. ELEMENTS
  * Styles des éléments HTML de base
  * ------------------------------ */
/* 
 * Styles typographiques
 * Ce fichier contient tous les styles liés à la typographie du thème
 */

/* Variables typographiques */
:root {
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
}

/* Titres HTML standards */
h1 {
  font-family: var(--font-family-heading);
  font-size: 48px;
  font-weight: var(--font-weight-normal);
  line-height: 48px;
  letter-spacing: 0em;
  color: #25282A;
}

h2 {
  font-family: var(--font-family-heading);
  font-size: 40px;
  font-weight: var(--font-weight-normal);
  line-height: 40px;
  letter-spacing: -0.03em;
  color: #25282A;
}

h3 {
  font-family: var(--font-family-heading);
  font-size: 30px;
  font-weight: var(--font-weight-normal);
  line-height: 30px;
  letter-spacing: -0.03em;
  color: #25282A;
}

h4 {
  font-family: var(--font-family-heading);
  font-size: 24px;
  font-weight: var(--font-weight-normal);
  line-height: 24px;
  letter-spacing: -0.03em;
  color: #25282A;
}

h5 {
  font-family: var(--font-family-heading);
  font-size: 20px;
  font-weight: var(--font-weight-normal);
  line-height: 20px;
  letter-spacing: -0.03em;
  color: #25282A;
}

h6 {
  font-family: var(--font-family-heading);
  font-size: 18px;
  font-weight: var(--font-weight-normal);
  line-height: 18px;
  letter-spacing: -0.03em;
  color: #25282A;
}

/* Classes de titres personnalisés */
.title-100 {
  font-family: var(--font-family-heading);
  font-size: 40px;
  font-weight: var(--font-weight-normal);
  line-height: 52px;
  letter-spacing: -0.01em;
}

.title-200 {
  font-family: var(--font-family-heading);
  font-size: 32px;
  font-weight: var(--font-weight-normal);
  line-height: 40px;
  letter-spacing: -0.01em;
}

.title-300 {
  font-family: var(--font-family-heading);
  font-size: 24px;
  font-weight: var(--font-weight-normal);
  line-height: 36px;
  letter-spacing: -0.01em;
}

.title-400 {
  font-family: var(--font-family-heading);
  font-size: 20px;
  font-weight: var(--font-weight-normal);
  line-height: 24px;
  letter-spacing: -0.01em;
}

/* Classes de texte de corps */
.body-100, body {
  font-family: var(--font-family-base);
  font-size: 18px;
  font-weight: var(--font-weight-normal);
  line-height: 26px;
  letter-spacing: -0.004em;
}

.body-200 {
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: var(--font-weight-normal);
  line-height: 24px;
  letter-spacing: -0.004em;
}

.body-300 {
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: var(--font-weight-normal);
  line-height: 20px;
  letter-spacing: -0.004em;
}

.body-400 {
  font-family: var(--font-family-base);
  font-size: 12px;
  font-weight: var(--font-weight-normal);
  line-height: 16px;
  letter-spacing: 0;
}

/* Classes de labels */
.label-100 {
  font-family: var(--font-family-base);
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  line-height: 1.5rem;
  letter-spacing: -0.004em;
}

.label-200 {
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  line-height: 1.5rem;
  letter-spacing: -0.004em;
}

.label-300 {
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  line-height: 1.25rem;
  letter-spacing: -0.004em;
}

.label-400 {
  font-family: var(--font-family-base);
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  line-height: 1rem;
  letter-spacing: 0;
}

/* =================================
   RESPONSIVE TYPOGRAPHY
   ================================= */

/* Tablette (max-width: 1024px) */
@media (max-width: 1024px) {
  h1 {
    font-size: 40px;
  }
  
  h2 {
    font-size: 34px;
  }
  
  h3 {
    font-size: 26px;
  }
  
  h4 {
    font-size: 22px;
  }
  
  h5 {
    font-size: 18px;
  }
  
  h6 {
    font-size: 16px;
  }
  
  .title-100 {
    font-size: 34px;
  }
  
  .title-200 {
    font-size: 28px;
  }
  
  .title-300 {
    font-size: 22px;
  }
  
  .title-400 {
    font-size: 18px;
  }
  
  /* Classes body responsive */
  .body-100, body {
    font-size: 17px;
  }
  
  .body-200 {
    font-size: 15px;
  }
  
  .body-300 {
    font-size: 13px;
  }
  
  .body-400 {
    font-size: 11px;
  }
}

/* Mobile (max-width: 767px) */
@media (max-width: 767px) {
  h1 {
    font-size: 32px;
  }
  
  h2 {
    font-size: 28px;
  }
  
  h3 {
    font-size: 22px;
  }
  
  h4 {
    font-size: 20px;
  }
  
  h5 {
    font-size: 16px;
  }
  
  h6 {
    font-size: 14px;
  }
  
  .title-100 {
    font-size: 28px;
  }
  
  .title-200 {
    font-size: 24px;
  }
  
  .title-300 {
    font-size: 20px;
  }
  
  .title-400 {
    font-size: 16px;
  }
  
  /* Classes body responsive */
  .body-100, body {
    font-size: 16px;
  }
  
  .body-200 {
    font-size: 14px;
  }
  
  .body-300 {
    font-size: 12px;
  }
  
  .body-400 {
    font-size: 10px;
  }
}

/* Classes de liens */
.link-100 {
  font-family: var(--font-family-base);
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  line-height: 26px;
  letter-spacing: -0.004em;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
  transition: color 0.2s ease;
}

.link-200 {
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  line-height: 24px;
  letter-spacing: -0.004em;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
  transition: color 0.2s ease;
}

.link-300 {
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  line-height: 20px;
  letter-spacing: -0.004em;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
  transition: color 0.2s ease;
}

.link-400 {
  font-family: var(--font-family-base);
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  line-height: 16px;
  letter-spacing: 0;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
  transition: color 0.2s ease;
}

/* Interaction des liens */
.link-100:hover, .link-200:hover, .link-300:hover, .link-400:hover {
  color: var(--primary-800);
}

/* Variantes de liens blancs pour fonds sombres */
.link-100--white, .link-200--white, .link-300--white, .link-400--white {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
  transition: color 0.2s ease;
}

.link-100--white:hover, .link-200--white:hover, .link-300--white:hover, .link-400--white:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* Ajustement de l'alignement vertical pour les zones CTA */
.hero-banner__cta {
  align-items: center !important;
}

.hero-banner__cta .link-100,
.hero-banner__cta .link-200,
.hero-banner__cta .link-300,
.hero-banner__cta .link-400,
.hero-banner__cta .link-100--white,
.hero-banner__cta .link-200--white,
.hero-banner__cta .link-300--white,
.hero-banner__cta .link-400--white {
  display: inline-flex;
  align-items: center;
  line-height: inherit;
}

/* Variantes de texte */
.font-light {
  font-weight: var(--font-weight-light);
}

.font-normal {
  font-weight: var(--font-weight-normal);
}

.font-medium {
  font-weight: var(--font-weight-medium);
}

.font-semibold {
  font-weight: var(--font-weight-semibold);
}

.font-bold {
  font-weight: var(--font-weight-bold);
}

.text-primary {
  color: #F7EA48;
}

.text-secondary {
  color: #A2ACAB;
}

.text-success {
  color: #F7EA48;
}

.text-danger {
  color: #EF4444;
}

.text-gray {
  color: #6B7280;
}

/* Classe utilitaire pour les espaces typographiques */
.text-spacing-1 {
  margin-bottom: 0.5rem;
}

.text-spacing-2 {
  margin-bottom: 1rem;
}

.text-spacing-3 {
  margin-bottom: 1.5rem;
}

.text-spacing-4 {
  margin-bottom: 2rem;
}

/* =================================
    EFFETS DE SURLIGNAGE DE TEXTE
    ================================= */

    .highlight-primary {
      position: relative;
      font-style: italic;
      background: linear-gradient(135deg, #F7EA48, rgba(190, 242, 100, 0.1) 100%);
      padding: 0px 6px;
      border-radius: 3px;
      box-shadow: 0 2px 4px rgba(190, 242, 100, 0.2);
      transition: all 200ms ease-in-out;
    }
    
    .highlight-primary:hover {
      background: linear-gradient(135deg, rgba(190, 242, 100, 0.4) 0%, rgba(190, 242, 100, 0.2) 100%);
      transform: translateY(-1px);
      box-shadow: 0 4px 8px rgba(190, 242, 100, 0.3);
    }
/**
 * Buttons Styles
 * Styles pour les différents types et états de boutons
 */

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 



















 :root {
  /* Variable globale pour les coins arrondis des boutons */
  --button-border-radius: 10px; /* Peut être modifié pour changer l'arrondi de tous les boutons */
  
  /* Couleurs des boutons basées sur Figma */
  --button-primary-bg: rgba(247, 234, 72, 1.0); /* vert foncé depuis fields.json */
  --button-primary-hover-bg: rgba(255, 255, 255, 1.0); /* vert foncé plus clair pour hover */
  --button-primary-txt: #25282A; /* couleur du texte pour boutons primaires */
  --button-primary-hover-txt: #25282A; /* couleur du texte pour boutons primaires au survol */
  
  --button-disabled-bg: var(--gray-400); /* #9ca3af - gris pour boutons désactivés */
  --button-disabled-txt: var(--white); /* couleur du texte pour boutons désactivés */
  --button-disabled-txt-light: var(--gray-400); /* couleur du texte sur fond clair pour boutons désactivés */

  /* Couleurs des boutons secondaires */
  --button-secondary-bg: rgba(37, 40, 42, 1.0); /* vert clair depuis fields.json */
  --button-secondary-hover-bg: rgba(247, 234, 72, 1.0); /* vert clair plus vif pour hover */
  --button-secondary-txt: #ffffff; /* couleur du texte pour boutons secondaires */
  --button-secondary-hover-txt: #25282A; /* couleur du texte pour boutons secondaires au survol */

  /* Couleurs des boutons outline */
  --button-outline-border: #FFFFFF; /* bordure verte foncée */
  --button-outline-txt: #FFFFFF; /* couleur du texte pour boutons outline */
  --button-outline-bg: rgba(255, 255, 255, 0.0); /* fond transparent par défaut */
  --button-outline-hover-bg: rgba(247, 234, 72, 1.0); /* fond légèrement teinté au survol */
  --button-outline-hover-border: #F7EA48; /* bordure hover */
  --button-outline-hover-txt: #25282A; /* couleur du texte pour boutons outline au survol */
  
  /* Couleurs des boutons outline pour fond sombre */
  --button-outline-dark-border: #25282A; /* bordure blanche pour contraste sur fond sombre */
  --button-outline-dark-txt: #25282A; /* texte blanc pour lisibilité sur fond sombre */
  --button-outline-dark-bg: rgba(255, 255, 255, 0.0); /* fond transparent */
  --button-outline-dark-hover-bg: rgba(37, 40, 42, 1.0); /* légère surbrillance blanche au survol */
  --button-outline-dark-hover-border: #25282A; /* bordure accent vert clair au survol */
  --button-outline-dark-hover-txt: #FFFFFF; /* texte accent vert clair au survol */
  
  /* Couleurs des boutons solid white */
  --button-solid-white-bg: rgba(255, 255, 255, 1.0); /* fond blanc depuis fields.json */
  --button-solid-white-txt: #25282A; /* texte bleu foncé depuis fields.json */
  --button-solid-white-hover-bg: rgba(37, 40, 42, 1.0); /* fond blanc avec opacité au survol depuis fields.json */
  --button-solid-white-hover-txt: #FFFFFF; /* texte bleu foncé au survol depuis fields.json */
  
  /* Couleurs des boutons outline white */
  --button-outline-white-bg: rgba(37, 40, 42, 1.0); /* fond transparent depuis fields.json */
  --button-outline-white-border: #25282A; /* bordure blanche depuis fields.json */
  --button-outline-white-txt: #FFFFFF; /* texte blanc depuis fields.json */
  --button-outline-white-hover-bg: rgba(255, 255, 255, 1.0); /* fond blanc au survol depuis fields.json */
  --button-outline-white-hover-border: #FFFFFF; /* bordure blanche au survol depuis fields.json */
  --button-outline-white-hover-txt: #25282A; /* texte bleu foncé au survol depuis fields.json */
}

/* Base des boutons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* Espacement entre texte et icône */
  border: none;
  border-radius: var(--button-border-radius);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background-color 0.2s, box-shadow 0.2s;
  color: var(--white);
  text-align: center;
  /* Assurer l'alignement vertical avec d'autres boutons */
  vertical-align: middle;
  /* Garantir une position cohérente dans le flux */
  position: relative;
  /* Taille par défaut (medium) */
  height: 48px;
  padding: 0 20px;
  font-size: var(--font-size-base);
}

/* Styles spécifiques pour les liens avec classe .btn */
a.btn {
  text-decoration: none; /* Supprimer le soulignement des liens */
  line-height: 1; /* Normaliser la hauteur de ligne */
  white-space: nowrap; /* Empêcher le texte de se couper */
  margin:5px 5px 5px 0;
}

/* Gérer l'état désactivé des liens (attribute HTML disabled non supporté sur les liens) */
a.btn[aria-disabled="true"] {
  pointer-events: none; /* Désactiver les interactions */
  background-color: var(--button-disabled-bg);
  color: var(--button-disabled-txt);
  cursor: not-allowed;
  opacity: 1; /* Maintenir l'opacité pleine comme pour les boutons */
}

a.btn[aria-disabled="true"] .icon {
  stroke: var(--button-disabled-txt);
}

.btn:disabled {
  background-color: var(--button-disabled-bg);
  color: var(--button-disabled-txt);
  cursor: not-allowed;
}

.btn:disabled .icon {
  stroke: var(--button-disabled-txt);
}

/* Tailles de bouton */
.btn-sm {
  height: 40px;
  padding: 0 16px;
  font-size: var(--font-size-sm);
}

/* .btn-md classe est maintenant redondante car ces styles sont dans .btn */
/* Conservée pour la compatibilité avec le code existant */
.btn-md {
  height: 48px;
  padding: 0 20px;
  font-size: var(--font-size-base);
}

.btn-lg {
  height: 56px;
  padding: 0 24px;
  font-size: var(--font-size-lg);
}

/* Types de boutons */
.btn-primary {
  background-color: var(--button-primary-bg);
  color: var(--button-primary-txt);
}

.btn-primary:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--button-primary-hover-bg);
  color: var(--button-primary-hover-txt);
}

.btn-primary:focus-visible:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--button-primary-bg);
  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--button-primary-bg);
  outline: none;
  border: 2px solid var(--white);
}

/* Boutons secondaires */
.btn-secondary {
  background-color: var(--button-secondary-bg);
  color: var(--button-secondary-txt);
}

.btn-secondary:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--button-secondary-hover-bg);
  color: var(--button-secondary-hover-txt);
}

.btn-secondary:focus-visible:not(:disabled):not([aria-disabled="true"]) {
  border: 2px solid var(--white);
  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--button-secondary-bg);
  outline: none;
}

/* Icônes dans les boutons */
.btn .icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  /* Assurer un alignement vertical cohérent */
  position: relative;
  top: -0.5px; /* Léger ajustement vertical pour aligner avec le texte */
  /* Garantir que l'icône ne modifie pas la hauteur totale */
  flex-shrink: 0;
}

/* Par défaut (taille medium) */
.btn .icon {
  width: 20px;
  height: 20px;
}

.btn-sm .icon {
  width: 16px;
  height: 16px;
}

.btn-lg .icon {
  width: 20px;
  height: 20px;
}

/* Adaptations pour les boutons avec uniquement des icônes */
.btn-icon {
  padding: 0;
  width: 48px; /* Taille par défaut (medium) */
}

.btn-icon.btn-sm {
  width: 40px;
}

.btn-icon.btn-md {
  width: 48px;
}

.btn-icon.btn-lg {
  width: 56px;
}

/* Boutons outline */
.btn-outline {
  background-color: var(--button-outline-bg);
  color: var(--button-outline-txt);
  border: 2px solid var(--button-outline-border);
}

.btn-outline.active, .btn-outline:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--button-outline-hover-bg);
  border-color: var(--button-outline-hover-border);
  color: var(--button-outline-hover-txt);
}

.btn-outline:focus-visible:not(:disabled):not([aria-disabled="true"]) {
  border: 2px solid var(--white);
  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--button-outline-border);
}

/* Pour les boutons outline avec icônes */
.btn-outline .icon {
  stroke: var(--button-outline-txt);
}

.btn-outline:hover:not(:disabled):not([aria-disabled="true"]) .icon {
  stroke: var(--button-outline-hover-txt);
}

/* État désactivé - utilise les variables communes */
.btn-outline:disabled, 
a.btn-outline[aria-disabled="true"] {
  background-color: var(--button-outline-bg);
  border-color: var(--button-disabled-bg);
  color: var(--button-disabled-txt-light);
}

.btn-outline:disabled .icon,
a.btn-outline[aria-disabled="true"] .icon {
  stroke: var(--button-disabled-txt-light);
}

/* Boutons outline pour fond sombre */
.btn-outline-dark {
  background-color: var(--button-outline-dark-bg);
  color: var(--button-outline-dark-txt);
  border: 2px solid var(--button-outline-dark-border);
}

.btn-outline-dark:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--button-outline-dark-hover-bg);
  border-color: var(--button-outline-dark-hover-border);
  color: var(--button-outline-dark-hover-txt);
}

.btn-outline-dark:focus-visible:not(:disabled):not([aria-disabled="true"]) {
  border: 2px solid var(--primary-300);
  box-shadow: 0 0 0 2px var(--primary-300), 0 0 0 4px rgba(255, 255, 255, 0.5);
}

.btn-outline-dark .icon {
  stroke: var(--button-outline-dark-txt);
}

.btn-outline-dark:hover:not(:disabled):not([aria-disabled="true"]) .icon {
  stroke: var(--button-outline-dark-hover-txt);
}

.btn-outline-dark:disabled,
a.btn-outline-dark[aria-disabled="true"] {
  background-color: var(--button-outline-dark-bg);
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.3);
}

.btn-outline-dark:disabled .icon,
a.btn-outline-dark[aria-disabled="true"] .icon {
  stroke: rgba(255, 255, 255, 0.3);
}

/* Boutons solid white */
.btn-solid-white {
  background-color: var(--button-solid-white-bg);
  color: var(--button-solid-white-txt);
  border: none;
}

.btn-solid-white:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--button-solid-white-hover-bg);
  color: var(--button-solid-white-hover-txt);
}

.btn-solid-white:focus-visible:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--button-solid-white-bg);
  box-shadow: 0 0 0 2px #032C6D, 0 0 0 4px rgba(3, 44, 109, 0.3);
  outline: none;
}

.btn-solid-white .icon {
  stroke: var(--button-solid-white-txt);
}

.btn-solid-white:hover:not(:disabled):not([aria-disabled="true"]) .icon {
  stroke: var(--button-solid-white-hover-txt);
}

.btn-solid-white:disabled,
a.btn-solid-white[aria-disabled="true"] {
  background-color: var(--button-disabled-bg);
  color: var(--button-disabled-txt);
}

.btn-solid-white:disabled .icon,
a.btn-solid-white[aria-disabled="true"] .icon {
  stroke: var(--button-disabled-txt);
}

/* Boutons outline white */
.btn-outline-white {
  background-color: var(--button-outline-white-bg);
  color: var(--button-outline-white-txt);
  border: 2px solid var(--button-outline-white-border);
}

.btn-outline-white:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--button-outline-white-hover-bg);
  border-color: var(--button-outline-white-hover-border);
  color: var(--button-outline-white-hover-txt);
}

.btn-outline-white:focus-visible:not(:disabled):not([aria-disabled="true"]) {
  border: 2px solid #032C6D;
  box-shadow: 0 0 0 2px #032C6D, 0 0 0 4px rgba(3, 44, 109, 0.3);
  outline: none;
}

.btn-outline-white .icon {
  stroke: var(--button-outline-white-txt);
}

.btn-outline-white:hover:not(:disabled):not([aria-disabled="true"]) .icon {
  stroke: var(--button-outline-white-hover-txt);
}

.btn-outline-white:disabled,
a.btn-outline-white[aria-disabled="true"] {
  background-color: var(--button-outline-white-bg);
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.3);
}

.btn-outline-white:disabled .icon,
a.btn-outline-white[aria-disabled="true"] .icon {
  stroke: rgba(255, 255, 255, 0.3);
}

/* Bouton style lien - basé sur .link-100 */
.btn-link {
  /* Réinitialiser les propriétés de bouton standard */
  background-color: transparent;
  border: none;
  height: auto;
  padding: 0;
  min-height: auto;
  border-radius: 0;

  /* Appliquer les propriétés de lien */
  font-family: var(--font-family-base);
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  line-height: 26px;
  letter-spacing: -0.004em;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
  transition: color 0.2s ease;

  /* Couleurs basées sur les liens */
  color: var(--primary-600);
}

.btn-link:hover:not(:disabled):not([aria-disabled="true"]) {
  color: var(--primary-700);
  text-decoration: underline;
}

.btn-link:active:not(:disabled):not([aria-disabled="true"]) {
  color: var(--primary-800);
}

.btn-link:visited:not(:disabled):not([aria-disabled="true"]) {
  color: var(--primary-500);
}

.btn-link:focus-visible:not(:disabled):not([aria-disabled="true"]) {
  outline: 2px solid var(--primary-600);
  outline-offset: 2px;
  text-decoration: underline;
}

.btn-link:disabled,
a.btn-link[aria-disabled="true"] {
  color: var(--gray-400);
  cursor: not-allowed;
  text-decoration: underline;
}

/* Pour corriger l'alignement dans .element-example */
.element-example {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Assurer que les boutons sont correctement alignés */
.element-example .btn {
  margin-top: 0;
  margin-bottom: 0;
  /* Empêcher que les différences de contenu n'affectent l'alignement */
  vertical-align: middle;
}
/* Variables Hubl depuis fields.json */







/* Variables de base pour les badges */
:root {
    /* Dimensions et géométrie */
    --badge-border-radius: 20px; /* Rayon de bordure pour tous les badges */
    --badge-padding-x: 12px; /* Padding horizontal */
    --badge-padding-y-sm: 0px; /* Padding vertical pour petits badges */
    --badge-padding-y-md: 2px; /* Padding vertical pour badges moyens */
    --badge-icon-gap: 4px; /* Espace entre icône et texte */
    
    /* Couleurs des badges outline */
    --badge-outline-bg: transparent; /* Fond transparent */
    --badge-outline-border: #e5e7eb; /* Couleur de bordure */
    --badge-outline-txt: var(--gray-900); /* Couleur du texte */
    
    /* Couleurs des badges primary (gris clair) */
    --badge-primary-bg: #edf2f1; /* Fond gris clair */
    --badge-primary-txt: var(--gray-900); /* Couleur du texte */
    
    /* Couleurs des badges secondary (vert clair) */
    --badge-secondary-bg: #ecfccb; /* Fond vert clair */
    --badge-secondary-txt: #365314; /* Texte vert foncé */
    
    /* Couleurs des indicateurs de statut */
    --badge-status-neutral: #929a99; /* Gris pour statut neutre */
    --badge-status-success: #84cc14; /* Vert pour succès */
    --badge-status-error: #ef4444; /* Rouge pour erreur */
    --badge-status-warning: #f59e0b; /* Orange pour avertissement */
    --badge-status-info: #3b82f6; /* Bleu pour information */
  }
  
  /* Style de base pour tous les badges */
  .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--badge-border-radius);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    /* Assurer que les badges s'alignent correctement dans le flux */
    vertical-align: middle;
  }
  
  /* Tailles de badge */
  .badge-sm {
    height: 30px;
    padding: var(--badge-padding-y-sm) var(--badge-padding-x);
    font-size: 0.75rem;
  }
  
  .badge-md {
    height: 40px;
    padding: var(--badge-padding-y-md) var(--badge-padding-x);
    font-size: 0.875rem;
  }
  
  /* Variantes de badge */
  .badge-outline {
    background-color: var(--badge-outline-bg);
    color: var(--badge-outline-txt);
    border: 1px solid var(--badge-outline-border);
  }
  
  .badge-primary {
    background-color: var(--badge-primary-bg);
    color: var(--badge-primary-txt);
  }
  
  .badge-secondary {
    background-color: var(--badge-secondary-bg);
    color: var(--badge-secondary-txt);
  }
  
  /* Style pour les icônes à l'intérieur des badges */
  .badge .icon {
    width: 16px;
    height: 16px;
    stroke-width: 1.5;
    flex-shrink: 0;
    /* Assurer que les icônes sont correctement alignées verticalement */
    position: relative;
    top: -0.5px; /* Léger ajustement vertical pour aligner avec le texte */
  }
  
  /* Espace entre l'icône et le texte */
  .badge .badge-text {
    margin: 0 var(--badge-icon-gap);
    /* Assurer un alignement cohérent du texte */
    display: inline-block;
    line-height: 1;
    position: relative;
  }
  
  /* Badge avec icône avant le texte */
  .badge-icon-left .icon {
    margin-right: var(--badge-icon-gap);
  }
  
  /* Badge avec icône après le texte */
  .badge-icon-right .icon {
    margin-left: var(--badge-icon-gap);
  }
  
  /* Badge avec indicateur de statut */
  .badge-status .status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: var(--badge-icon-gap);
    flex-shrink: 0;
  }
  
  /* Couleurs d'indicateur de statut */
  .status-neutral .status-indicator {
    background-color: var(--badge-status-neutral);
  }
  
  .status-success .status-indicator {
    background-color: var(--badge-status-success);
  }
  
  .status-error .status-indicator {
    background-color: var(--badge-status-error);
  }
  
  .status-warning .status-indicator {
    background-color: var(--badge-status-warning);
  }
  
  .status-info .status-indicator {
    background-color: var(--badge-status-info);
  }
  
  /* Adaptation des couleurs d'icônes selon le type de badge */
  .badge-primary .icon {
    stroke: var(--badge-primary-txt);
  }
  
  .badge-secondary .icon {
    stroke: var(--badge-secondary-txt);
  }
  
  .badge-outline .icon {
    stroke: var(--badge-outline-txt);
  }
  
  /* Règle pour fixer l'alignement vertical des badges dans .element-example */
  .element-example .badge {
    margin-top: 0;
    margin-bottom: 0;
  }
  
  /* Assurer que l'alignement de la ligne de base est correct pour les badges côte à côte */
  .element-example {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
  }

/* ====================================
   BADGES POUR TAGS (style minimaliste)
   ==================================== */

/* Conteneur pour les tags avec séparateurs */
.featured-article__tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Style minimaliste pour les badges de tags */
.featured-article__tags .badge {
  background: none !important;
  border: none !important;
  color: var(--secondary) !important;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0;
  height: auto;
  text-decoration: none;
  transition: color 0.2s ease;
}

/* Effet hover pour les tags */
.featured-article__tags .badge:hover {
  color: var(--primary-700) !important;
  text-decoration: none;
}

/* Séparateur rond entre les tags */
.featured-article__tags .badge:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  background-color: var(--primary);
  border-radius: 50%;
  margin-left: 0.5rem;
  vertical-align: middle;
}

/* Responsive - plus petit sur mobile */
@media (max-width: 768px) {
  .featured-article__tags .badge {
    font-size: 0.6875rem;
  }
  
  .featured-article__tags .badge:not(:last-child)::after {
    width: 3px;
    height: 3px;
    margin-left: 0.375rem;
  }
}
/* =================================
 * COMPOSANT INPUT
 * Système flexible d'inputs avec plusieurs variantes et états
 * ================================= */

/* Variables Hubl depuis fields.json */

















/* Variables */
:root {
  /* Couleurs */
  --input-text-color: #1c1f1e;
  --input-placeholder-color: #636969;
  --input-background: #ffffff;
  --input-disabled-background: #f9fafb;
  --input-disabled-text: #929b99;
  
  /* Couleurs de bordure/ombre */
  
    --input-border-color: #266ea3;
  
  --input-hover-border-color: rgba(2, 44, 34, 0.16);
  
    --input-focus-border-color: #4b93c8;
  
  --input-error-color: #dc2626;
  --input-success-color: #16a34a;
  
  /* Tailles et espacements configurables */
  --input-padding-x-sm: calc(16px * 0.875);
  --input-padding-x-md: 16px;
  --input-padding-x-lg: calc(16px * 1.25);
  --input-padding-y-sm: calc(12px * 0.667);
  --input-padding-y-md: 12px;
  --input-padding-y-lg: calc(12px * 1.333);
  --input-icon-space: 44px;
  
  /* Taille de police configurable */
  --input-font-size: 14px;
  
  /* Rayons - inputs utilisent le border-radius des boutons, textarea celui des inputs */
  --input-radius-xs: 4px;
  --input-radius-sm: 8px;
  --input-radius-md: 10px;
  --input-textarea-radius: 12px;
  --input-radius-full: 200px;
}

/* Base */
input, 
select {
  display: block;
  width: 100%;
  padding: var(--input-padding-y-md) var(--input-padding-x-md);
  font-family: inherit;
  font-size: var(--input-font-size);
  line-height: 24px;
  color: var(--input-text-color);
  background-color: var(--input-background);
  border: 1px solid var(--input-border-color);
  border-radius: var(--input-radius-md);
  transition: all 0.2s ease;
  position: relative;
  appearance: none;
  -webkit-appearance: none;
}

/* Textarea avec border-radius spécifique */
textarea {
  display: block;
  width: 100%;
  padding: var(--input-padding-y-md) var(--input-padding-x-md);
  font-family: inherit;
  font-size: var(--input-font-size);
  line-height: 24px;
  color: var(--input-text-color);
  background-color: var(--input-background);
  border: 1px solid var(--input-border-color);
  border-radius: var(--input-textarea-radius);
  transition: all 0.2s ease;
  position: relative;
  appearance: none;
  -webkit-appearance: none;
}

input::placeholder,
select::placeholder {
  color: var(--input-placeholder-color);
  opacity: 1;
}

textarea::placeholder {
  color: var(--input-placeholder-color);
  opacity: 1;
}

input:hover,
select:hover {
  border-color: var(--input-hover-border-color);
}

textarea:hover {
  border-color: var(--input-hover-border-color);
}

input:focus,
select:focus {
  outline: none;
  border-color: var(--input-focus-border-color);
}

textarea:focus {
  outline: none;
  border-color: var(--input-focus-border-color);
}

/* Types de bordure/fond */
input.solid, 
select.solid {
  /* Style par défaut */
}

textarea.solid {
  /* Style par défaut */
}

input.underline,
select.underline {
  border-radius: 0;
  border-bottom: 1px solid var(--input-border-color);
  padding-left: 0;
  padding-right: 0;
}

textarea.underline {
  border-radius: 0;
  border-bottom: 1px solid var(--input-border-color);
  padding-left: 0;
  padding-right: 0;
}

input.underline:hover,
select.underline:hover {
  border-bottom-color: var(--input-hover-border-color);
}

textarea.underline:hover {
  border-bottom-color: var(--input-hover-border-color);
}

input.underline:focus,
select.underline:focus {
  border-bottom: 2px solid var(--input-focus-border-color);
  padding-bottom: calc(var(--input-padding-y-md) - 1px);
}

textarea.underline:focus {
  border-bottom: 2px solid var(--input-focus-border-color);
  padding-bottom: calc(var(--input-padding-y-md) - 1px);
}

input.filled,
select.filled {
  background-color: var(--input-disabled-background);
  border-color: transparent;
}

textarea.filled {
  background-color: var(--input-disabled-background);
  border-color: transparent;
}

input.filled:hover,
select.filled:hover {
  background-color: rgba(2, 44, 34, 0.05);
}

textarea.filled:hover {
  background-color: rgba(2, 44, 34, 0.05);
}

input.filled:focus,
select.filled:focus {
  background-color: var(--input-background);
  border-color: var(--input-focus-border-color);
}

textarea.filled:focus {
  background-color: var(--input-background);
  border-color: var(--input-focus-border-color);
}

/* Rayons de bordure */
input.rounded-full,
select.rounded-full {
  border-radius: var(--input-radius-full);
}

textarea.rounded-full {
  border-radius: var(--input-radius-full);
}

input.rounded-md,
select.rounded-md {
  border-radius: var(--input-radius-md);
}

textarea.rounded-md {
  border-radius: var(--input-textarea-radius);
}

input.rounded-sm,
select.rounded-sm {
  border-radius: var(--input-radius-sm);
}

textarea.rounded-sm {
  border-radius: var(--input-radius-sm);
}

input.rounded-xs,
select.rounded-xs {
  border-radius: var(--input-radius-xs);
}

textarea.rounded-xs {
  border-radius: var(--input-radius-xs);
}

input.rectangle,
select.rectangle {
  border-radius: 0;
}

textarea.rectangle {
  border-radius: 0;
}

/* Tailles */
input.sm,
select.sm {
  padding: var(--input-padding-y-sm) var(--input-padding-x-sm);
  font-size: 14px;
  line-height: 20px;
}

textarea.sm {
  padding: var(--input-padding-y-sm) var(--input-padding-x-sm);
  font-size: 14px;
  line-height: 20px;
}

input.md,
select.md {
  /* Style par défaut */
}

textarea.md {
  /* Style par défaut */
}

input.lg,
select.lg {
  padding: var(--input-padding-y-lg) var(--input-padding-x-lg);
  font-size: 16px;
  line-height: 24px;
}

textarea.lg {
  padding: var(--input-padding-y-lg) var(--input-padding-x-lg);
  font-size: 16px;
  line-height: 24px;
}

/* Gestion des icônes */
input.icon-left,
select.icon-left {
  padding-left: var(--input-icon-space);
}

textarea.icon-left {
  padding-left: var(--input-icon-space);
}

input.icon-right,
select.icon-right {
  padding-right: var(--input-icon-space);
}

textarea.icon-right {
  padding-right: var(--input-icon-space);
}

/* Thèmes de couleur */
input.light,
select.light {
  /* Style par défaut */
}

textarea.light {
  /* Style par défaut */
}

input.dark,
select.dark {
  background-color: var(--input-text-color);
  color: white;
}

textarea.dark {
  background-color: var(--input-text-color);
  color: white;
}

input.primary,
select.primary {
  border-color: var(--input-focus-border-color);
}

textarea.primary {
  border-color: var(--input-focus-border-color);
}

input.primary:focus,
select.primary:focus {
  border-color: var(--input-focus-border-color);
}

textarea.primary:focus {
  border-color: var(--input-focus-border-color);
}

input.danger,
select.danger {
  border-color: var(--input-error-color);
}

textarea.danger {
  border-color: var(--input-error-color);
}

input.danger:focus,
select.danger:focus {
  border-color: var(--input-error-color);
}

textarea.danger:focus {
  border-color: var(--input-error-color);
}

input.success,
select.success {
  border-color: var(--input-success-color);
}

textarea.success {
  border-color: var(--input-success-color);
}

input.success:focus,
select.success:focus {
  border-color: var(--input-success-color);
}

textarea.success:focus {
  border-color: var(--input-success-color);
}

/* États */
input:disabled,
select:disabled,
input.is-disabled,
select.is-disabled {
  background-color: var(--input-disabled-background);
  color: var(--input-disabled-text);
  cursor: not-allowed;
}

textarea:disabled,
textarea.is-disabled {
  background-color: var(--input-disabled-background);
  color: var(--input-disabled-text);
  cursor: not-allowed;
}

input.is-error,
select.is-error {
  border-color: var(--input-error-color);
}

textarea.is-error {
  border-color: var(--input-error-color);
}

input.is-error:focus,
select.is-error:focus {
  border-color: var(--input-error-color);
}

textarea.is-error:focus {
  border-color: var(--input-error-color);
}

input.is-valid,
select.is-valid {
  border-color: var(--input-success-color);
}

textarea.is-valid {
  border-color: var(--input-success-color);
}

input.is-valid:focus,
select.is-valid:focus {
  border-color: var(--input-success-color);
}

textarea.is-valid:focus {
  border-color: var(--input-success-color);
}

input.is-focused,
select.is-focused {
  border-color: var(--input-focus-border-color);
}

textarea.is-focused {
  border-color: var(--input-focus-border-color);
}

/* Position relative pour supporter les icônes */
.input-container {
  position: relative;
  width: 100%;
  display: inline-block;
}

/* Icônes */
.input-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  pointer-events: none;
  z-index: 1;
}

.input-icon--left {
  left: 16px;
}

.input-icon--right {
  right: 16px;
}

/* Ajustements pour les tailles spécifiques d'icônes */
input.sm + .input-icon,
textarea.sm + .input-icon,
select.sm + .input-icon {
  width: 16px;
  height: 16px;
}

input.lg + .input-icon,
textarea.lg + .input-icon,
select.lg + .input-icon {
  width: 24px;
  height: 24px;
}

input.sm ~ .input-icon--left,
textarea.sm ~ .input-icon--left,
select.sm ~ .input-icon--left {
  left: 12px;
}

input.lg ~ .input-icon--left,
textarea.lg ~ .input-icon--left,
select.lg ~ .input-icon--left {
  left: 20px;
}

input.sm ~ .input-icon--right,
textarea.sm ~ .input-icon--right,
select.sm ~ .input-icon--right {
  right: 12px;
}

input.lg ~ .input-icon--right,
textarea.lg ~ .input-icon--right,
select.lg ~ .input-icon--right {
  right: 20px;
}
/*------------------------------------
    HubSpot Forms Styling
    Styles pour tous les éléments des formulaires HubSpot
------------------------------------*/

/* Variables Hubl depuis fields.json */
























/* Variables pour les formulaires HubSpot - basées sur les variables du thème */
:root {
  /* Espacements configurables */
  --hs-form-field-gap: 16px;
  --hs-form-field-gap-mobile: calc(16px * 0.875);
  --hs-input-padding: 12px 16px;
  --hs-input-padding-sm: calc(12px * 0.75) calc(16px * 0.875);
  
  /* Styles de base des inputs */
  --hs-input-border-radius: 10px;
  --hs-textarea-border-radius: 12px;
  --hs-input-bg: #ffffff;
  --hs-input-text-color: #1c1f1e;
  --hs-input-placeholder-color: #636969;
  --hs-input-font-size: 14px;
  --hs-input-bg-disabled: #f9fafb;
  
  /* Couleurs de bordure avec gestion de l'opacité */
  
    --hs-input-border-color: #266ea3;
  
  
  
    --hs-input-border-color-focus: #4b93c8;
  
  
  /* États et couleurs */
  --hs-input-border-color-error: #dc2626;
  
  /* Labels configurables */
  --hs-label-color: #374151;
  --hs-label-font-size: 14px;
  --hs-label-font-weight: 500;
  
  /* Boutons configurables */
  --hs-button-padding: 12px 24px;
  --hs-button-font-size: 16px;
  --hs-button-font-weight: 600;
  --hs-button-border-radius: var(--hs-input-border-radius);
  --hs-button-min-height: 44px;
  
  /* Éléments de sélection configurables */
  --hs-checkbox-size: 18px;
  --hs-radio-size: 18px;
  
  /* Couleurs d'erreur et succès depuis le thème */
  --hs-error-color: #dc2626;
  --hs-error-bg: color-mix(in srgb, #dc2626 10%, white);
  --hs-error-border: color-mix(in srgb, #dc2626 30%, white);
  --hs-success-color: #16a34a;
  --hs-success-bg: color-mix(in srgb, #16a34a 10%, white);
  --hs-success-border: color-mix(in srgb, #16a34a 30%, white);
}

/* Structure de base du formulaire HubSpot */
.hs-form {
  width: 100%;
  max-width: none;
}

.hs-form a{
  color: var(--secondary) !important;
}

/* Fieldsets et colonnes */
.hs-form fieldset {
  border: none;
  margin: 5px 0 0 0 !important;
  padding: 0;
  margin-bottom: var(--hs-form-field-gap);
  max-width: 1000px !important;
}

.hs-form fieldset:last-child {
  margin-bottom: 0;
}

/* Champs de formulaire */
.hs-form .hs-form-field {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}

.hs-form .field {
  position: relative;
}

/* Labels */
.hs-form .hs-form-field label {
  display: block;
  font-size: var(--hs-label-font-size);
  font-weight: var(--hs-label-font-weight);
  color: var(--hs-label-color) !important;
  margin-bottom: 0.5rem;
  line-height: 1.4;
  
}

.hs-form .hs-form-field label span {
  color: inherit;
}

/* Champ requis */
.hs-form .hs-form-required {
  color: var(--hs-error-color);
  margin-left: 0.25rem;
}

/* Container d'input */
.hs-form .input {
  position: relative;
}

/* Styles de base pour tous les inputs */
.hs-form .hs-input {
  width: 100% !important;
  padding: var(--hs-input-padding);
  border: 1px solid var(--hs-input-border-color);
  border-radius: var(--hs-input-border-radius) !important;
  background-color: var(--hs-input-bg);
  color: var(--hs-input-text-color);
  font-size: var(--hs-input-font-size);
  line-height: 1.5;
  transition: all 0.2s ease;
  outline: none;
  box-sizing: border-box;
}

.hs-form .hs-input::placeholder {
  color: var(--hs-input-placeholder-color);
  opacity: 1;
}

/* Focus état - sans box-shadow */
.hs-form .hs-input:focus {
  border-color: var(--hs-input-border-color-focus);
}

/* État disabled */
.hs-form .hs-input:disabled {
  background-color: var(--hs-input-bg-disabled);
  color: var(--gray-500);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Placeholder état pour les select */
.hs-form .hs-input.is-placeholder {
  color: var(--hs-input-placeholder-color);
}

.hs-form .hs-input.is-placeholder:focus {
  color: var(--hs-input-text-color);
}

/* Inputs spécifiques */

/* Textarea */
.hs-form .hs-input.hs-fieldtype-textarea,
.hs-form textarea.hs-input {
  min-height: 100px;
  resize: vertical;
  font-family: inherit;
  border-radius: var(--hs-textarea-border-radius) !important;
}

/* Number inputs */
.hs-form input[type="number"].hs-input {
  -moz-appearance: textfield;
}

.hs-form input[type="number"].hs-input::-webkit-outer-spin-button,
.hs-form input[type="number"].hs-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Date inputs */
.hs-form .hs-dateinput {
  position: relative;
}

.hs-form .hs-dateinput .hs-input {
  cursor: pointer;
}

.hs-form .hs-datepicker {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.25rem;
  z-index: 1000;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--hs-input-border-radius);
}

/* File inputs */
.hs-form input[type="file"].hs-input {
  padding: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: var(--gray-50);
  border-radius: var(--hs-textarea-border-radius) !important;
  border: 1px solid var(--gray-200);
}

.hs-form input[type="file"].hs-input:hover {
  border-color: var(--hs-input-border-color-focus);
  background-color: var(--primary-50);
}

.hs-form input[type="file"].hs-input:focus {
  border-color: var(--hs-input-border-color-focus);
}

/* Select inputs */
.hs-form select.hs-input {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25rem;
  padding-right: 2.5rem;
  cursor: pointer;
}

/* Checkboxes et Radio buttons */

/* Container pour les listes */
.hs-form .inputs-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.hs-form .inputs-list.multi-container {
  gap: 0.625rem;
}

/* Checkbox styling */
.hs-form .hs-form-checkbox,
.hs-form .hs-form-booleancheckbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.hs-form .hs-form-checkbox-display,
.hs-form .hs-form-booleancheckbox-display {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
  line-height: 1.5;
  font-size: 0.875rem;
  color: var(--gray-700);
}

.hs-form input[type="checkbox"].hs-input {
  width: var(--hs-checkbox-size) !important;
  height: var(--hs-checkbox-size);
  min-width: var(--hs-checkbox-size);
  margin: 0;
  appearance: none;
  border: 1px solid var(--hs-input-border-color);
  padding: 0;
  border-radius: 5px !important;
  background-color: var(--hs-input-bg);
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}

.hs-form input[type="checkbox"].hs-input:checked {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
}

.hs-form input[type="checkbox"].hs-input:checked::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.375rem;
  height: 0.625rem;
  border: 2px solid white;
  border-top: none;
  border-left: none;
  transform: translate(-50%, -60%) rotate(45deg);
}

.hs-form input[type="checkbox"].hs-input:focus {
  outline: none;
  border-color: var(--hs-input-border-color-focus);
}

/* Radio button styling */
.hs-form .hs-form-radio {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.hs-form .hs-form-radio-display {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
  line-height: 1.5;
  font-size: 0.875rem;
  color: var(--gray-700);
}

.hs-form input[type="radio"].hs-input {
  width: var(--hs-radio-size) !important;
  height: var(--hs-radio-size);
  min-width: var(--hs-radio-size);
  margin: 0;
  appearance: none;
  border: 1px solid var(--hs-input-border-color);
  padding: 0;
  border-radius: 50%;
  background-color: var(--hs-input-bg);
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}

.hs-form input[type="radio"].hs-input:checked {
  border-color: var(--primary-600);
}

.hs-form input[type="radio"].hs-input:checked::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--primary-600);
  border-radius: 50%;
}

.hs-form input[type="radio"].hs-input:focus {
  outline: none;
  border-color: var(--hs-input-border-color-focus);
}

/* Submit button */
.hs-form .hs-submit {
  margin-top: 1.5rem;
}

.hs-form .hs-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--hs-button-padding);
  font-size: var(--hs-button-font-size);
  font-weight: var(--hs-button-font-weight);
  line-height: 1.5;
  border-radius: var(--hs-button-border-radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  min-height: var(--hs-button-min-height);
  gap: 0.5rem;
}

.hs-form .hs-button.primary {
  background-color: var(--primary-600);
  color: var(--white);
  border-color: var(--primary-600);
}

.hs-form .hs-button.primary:hover {
  background-color: var(--primary-700);
  border-color: var(--primary-700);
}

.hs-form .hs-button.primary:focus {
  outline: none;
  border-color: var(--hs-input-border-color-focus);
}

.hs-form .hs-button.primary:active {
  background-color: var(--primary-800);
  border-color: var(--primary-800);
}

.hs-form .hs-button.large {
  padding: 1rem 2rem;
  font-size: 1.125rem;
  min-height: 3rem;
}

.hs-form .hs-button:disabled {
  background-color: var(--gray-400);
  border-color: var(--gray-400);
  color: var(--white);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Rich text content */
.hs-form .hs-richtext {
  margin-bottom: var(--hs-form-field-gap);
  line-height: 1.6;
}

.hs-form .hs-richtext h1,
.hs-form .hs-richtext h2,
.hs-form .hs-richtext h3,
.hs-form .hs-richtext h4,
.hs-form .hs-richtext h5,
.hs-form .hs-richtext h6 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  color: var(--gray-900);
}

.hs-form .hs-richtext p {
  margin-top: 0;
  margin-bottom: 0.75rem;
  color: var(--gray-700);
}

.hs-form .hs-richtext p:last-child {
  margin-bottom: 0;
}

.hs-form .hs-richtext img {
  max-width: 100%;
  height: auto;
}

/* Legal consent styling */
.hs-form .legal-consent-container {
  margin-top: 1.5rem;
  padding: 1.25rem;
  background-color: var(--gray-50);
  border-radius: var(--hs-textarea-border-radius);
  border: 1px solid var(--gray-200);
}

.hs-form .legal-consent-container .hs-richtext {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--gray-600);
  margin-bottom: 1rem;
}

.hs-form .legal-consent-container .hs-richtext:last-child {
  margin-bottom: 0;
}

.hs-form .legal-consent-container .hs-form-booleancheckbox-display {
  font-size: 0.875rem;
  color: var(--gray-700);
}

.legal-consent-container .hs-form-booleancheckbox-display>span {
    margin-left: 10px !important;
}

/* reCAPTCHA styling */
.hs-form .hs-recaptcha {
  margin: 1.5rem 0;
  display: flex;
  justify-content: center;
}

.hs-form .grecaptcha-badge {
  transform: scale(0.9);
  transform-origin: center;
}

/* Error states - sans box-shadow */
.hs-form .hs-form-field.error .hs-input {
  border-color: var(--hs-input-border-color-error);
}

.hs-form .hs-form-field.error .hs-input:focus {
  border-color: var(--hs-input-border-color-error);
}

.hs-form .hs-error-msgs {
  margin-top: 0.5rem;
  color: var(--hs-error-color);
}

label.hs-error-msg.hs-main-font-element {
    color: var(--hs-error-color) !important;
}

.hs-form .hs-error-msg {
  display: block;
  font-size: 0.875rem;
  color: var(--hs-error-color);
  margin-bottom: 0.25rem;
}

/* Success state - sans box-shadow */
.hs-form .hs-form-field.success .hs-input {
  border-color: var(--hs-success-color);
}

.hs-form .hs-form-field.success .hs-input:focus {
  border-color: var(--hs-success-color);
}

/* Success message */
.hs-form .submitted-message {
  padding: 1.25rem;
  background-color: var(--hs-success-bg);
  border: 1px solid var(--hs-success-border);
  border-radius: var(--hs-input-border-radius);
  color: var(--hs-success-color);
  text-align: center;
}

/* Loading state */
.hs-form .hs-loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Field descriptions */
.hs-form .hs-field-desc {
  font-size: 0.8125rem;
  color: var(--gray-500);
  margin-top: 0.25rem;
  line-height: 1.4;
}

/* Responsive design */
@media (max-width: 768px) {
  .hs-form .form-columns-2,
  .hs-form .form-columns-3 {
    grid-template-columns: 1fr;
    gap: var(--hs-form-field-gap-mobile);
  }
  
  .hs-form fieldset {
    margin-bottom: var(--hs-form-field-gap-mobile);
  }
  
  .hs-form .form-columns-1 {
    gap: var(--hs-form-field-gap-mobile);
  }
  
  .hs-form .hs-input {
    padding: var(--hs-input-padding-sm);
    font-size: calc(var(--hs-input-font-size) * 0.9);
  }
  
  .hs-form .hs-button {
    padding: calc(var(--hs-button-padding-y) * 0.875) var(--hs-button-padding-x);
    font-size: calc(var(--hs-button-font-size) * 0.9);
    min-height: calc(var(--hs-button-min-height) * 0.9);
  }
  
  .hs-form .hs-button.large {
    padding: var(--hs-button-padding);
    font-size: var(--hs-button-font-size);
    min-height: var(--hs-button-min-height);
  }
  
  .hs-form .legal-consent-container {
    margin-top: var(--hs-form-field-gap-mobile);
  }
}

@media (max-width: 480px) {
  .hs-form .hs-input {
    font-size: calc(var(--hs-input-font-size) * 0.85);
  }
  
  .hs-form .hs-button {
    padding: calc(var(--hs-button-padding-y) * 0.75) calc(var(--hs-button-padding-x) * 0.875);
    font-size: calc(var(--hs-button-font-size) * 0.85);
    min-height: calc(var(--hs-button-min-height) * 0.85);
  }
  
  .hs-form .hs-button.large {
    padding: calc(var(--hs-button-padding-y) * 0.875) var(--hs-button-padding-x);
    font-size: calc(var(--hs-button-font-size) * 0.9);
    min-height: calc(var(--hs-button-min-height) * 0.9);
  }
}

/* Hover état */
.hs-form .hs-input:hover {
  border-color: var(--hs-input-border-color-focus);
}
 
 /* ------------------------------
  * 3. OBJECTS
  * Styles pour les modèles de mise en page réutilisables
  * ------------------------------ */
/* 
 * CLASSES DE MISE EN PAGE (LAYOUT)
 * Ce fichier contient les classes pour les conteneurs, rangées et colonnes
 * extraites de global.css pour une meilleure organisation
 */




/* CSS variables */

:root {
  --column-gap: 2.13%;
  --column-width-multiplier: 8.333;
}

/* Mobile layout */

.row-fluid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}


  .row-fluid .span1,
  .row-fluid .span2,
  .row-fluid .span3,
  .row-fluid .span4,
  .row-fluid .span5,
  .row-fluid .span6,
  .row-fluid .span7,
  .row-fluid .span8,
  .row-fluid .span9,
  .row-fluid .span10,
  .row-fluid .span11,
  .row-fluid .span12{
  min-height: 1px;
  width: 100%;
}

/* Desktop layout */

@media (min-width: 768px) {
  .row-fluid {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  
    .row-fluid .span1 {
      width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span2 {
      width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span3 {
      width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span4 {
      width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span5 {
      width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span6 {
      width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span7 {
      width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span8 {
      width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span9 {
      width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span10 {
      width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span11 {
      width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100));
    }
  
}


/* =================================
   CONTAINERS
   ================================= */

/* Container simple et flexible */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--container-padding-x);
  padding-left: var(--container-padding-x);
  padding: 0 24px;
  box-sizing: border-box;
}

.container-full-width {
  width: 100%;
  padding: 0 var(--fullwidth-padding-x);
}

.container-fluid {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--container-fluid-padding-x);
  padding-left: var(--container-fluid-padding-x);
}

/* Conteneurs avec tailles responsives */
@media (max-width: 480px) {
  .container {
    padding-right: var(--container-padding-xs);
    padding-left: var(--container-padding-xs);
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .container {
    padding-right: var(--container-padding-md);
    padding-left: var(--container-padding-md);
  }
}

@media (min-width: 769px) {
  .container {
    padding-right: var(--container-padding-x);
    padding-left: var(--container-padding-x);
  }
}

/* =================================
   SYSTÈME DE GRILLE FLEXBOX
   ================================= */

/* Row (Ligne) - Conteneur Flex par défaut */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--grid-gutter-width) / 2);
  margin-right: calc(var(--grid-gutter-width) / 4);
}

/* Pour les lignes qui doivent s'aligner sans marge latérale */
.row-no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.row-no-gutters > [class^="col-"] {
  padding-left: 0;
  padding-right: 0;
}

/* Colonnes de base */
[class^="col-"] {
  position: relative;
  width: 100%;
  padding-left: calc(var(--grid-gutter-width) / 2);
  padding-right: calc(var(--grid-gutter-width) / 2);
}

/* Colonnes avec largeurs spécifiques basées sur 12 colonnes */
.col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }


/* Responsive - Tablette */
@media (max-width: 992px) {
  .col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-md-3 { flex: 0 0 25%; max-width: 25%; }
  .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-md-9 { flex: 0 0 75%; max-width: 75%; }
  .col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Responsive - Mobile */
@media (max-width: 576px) {
  .col-sm-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .col-sm-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
  .col-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-sm-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
  .col-sm-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-sm-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-sm-9 { flex: 0 0 75%; max-width: 75%; }
  .col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}


/* Colonnes avec taille automatique */
.col { flex-basis: 0; flex-grow: 1; max-width: 100%; }
.col-auto { flex: 0 0 auto; width: auto; max-width: 100%; }

/* Pour les éléments qui doivent être étirés pour remplir la hauteur complète */
.h-100 {
  height: 100%;
}

/* Pour les rangées qui doivent s'étirer verticalement */
.row-stretch {
  align-items: stretch;
}

/* Pour les colonnes qui doivent apparaître comme des cartes */
.col-card {
  display: flex;
  flex-direction: column;
}
/* 
 * CLASSES CSS GRID
 * Ce fichier contient les classes pour le système de grille CSS
 * extraites de global.css pour une meilleure organisation
 */

/* =================================
   SYSTÈME BASÉ SUR CSS GRID
   ================================= */

/* Container Grid */
.grid {
  display: grid;
  gap: var(--grid-gutter-width);
}

/* Définition du nombre de colonnes */
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
.grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

/* Définition de l'espacement */
.grid-gap-0 { gap: 0; }
.grid-gap-1 { gap: var(--space-1); }
.grid-gap-2 { gap: var(--space-2); }
.grid-gap-3 { gap: var(--space-3); }
.grid-gap-4 { gap: var(--space-4); }
.grid-gap-5 { gap: var(--space-5); }
.grid-gap-6 { gap: var(--space-6); }
.grid-gap-8 { gap: var(--space-8); }

/* Span des colonnes */
.grid-col-span-1 { grid-column: span 1; }
.grid-col-span-2 { grid-column: span 2; }
.grid-col-span-3 { grid-column: span 3; }
.grid-col-span-4 { grid-column: span 4; }
.grid-col-span-5 { grid-column: span 5; }
.grid-col-span-6 { grid-column: span 6; }
.grid-col-span-12 { grid-column: span 12; }

/* Grille responsive */
@media (max-width: 768px) {
  .grid-cols-md-1 { grid-template-columns: repeat(1, 1fr); }
  .grid-cols-md-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-md-3 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 480px) {
  .grid-cols-sm-1 { grid-template-columns: repeat(1, 1fr); }
  .grid-cols-sm-2 { grid-template-columns: repeat(2, 1fr); }
}
 
 /* ------------------------------
  * 4. LAYOUT & STRUCTURE
  * En-tête, pied de page et mise en page globale
  * ------------------------------ */
/**
 * Header Styles
 * Styles pour le header du site
 */

/* Variables Hubl depuis fields.json */








/* ----------------------------------------
   Variables
   ---------------------------------------- */
   :root {
    /* Couleurs */
    --menu-bg: #ffffff;
    --menu-text: #25282A;
    --menu-text-hover: #A2ACAB;
    --menu-border: var(--gray-200);
    
    /* Dimensions */
    --top-bar-height: var(--global-top-bar-height); /* Définie par les paramètres globaux du thème */
    --header-height: 100px;
    --header-height-mobile: 100px;
    --logo-height: 30px;
    
    /* Espacements */
    --menu-item-gap: 25px;
    --nav-button-gap: 12px;
    
    /* Transitions */
    --menu-transition: 0.3s ease;
    
    /* Sélecteur de langue */
    --lang-selector-bg: transparent;
    --lang-selector-hover: rgba(0, 0, 0, 0.05);
    --lang-dropdown-shadow: none;/* 0 4px 16px rgba(0, 0, 0, 0.1); */
    --lang-item-padding: 8px 12px;
    
    /* Tailles de police */
    --menu-font-size: 18px;
    --menu-mobile-font-size: 20px;
    --top-bar-font-size: 14px;
    --lang-dropdown-font-size: 16px;
    --lang-name-font-size: 14px;
    
    /* Tailles d'icônes */
    --icon-size: 20px;
    --icon-size-sm: 18px;
    
    --btn-border-radius: 999px; /* Valeur élevée pour des coins très arrondis */
    --lang-dropdown-align: left; /* Nouvelle variable pour l'alignement du dropdown */
    
    /* Comportement du menu au scroll */
    --menu-scroll-transition: 0.4s cubic-bezier(0.3, 0, 0.2, 1);
    --menu-scroll-offset: -100%;
    
    /* Variables pour les animations des sous-menus */
    --submenu-transition: 0.25s cubic-bezier(0.3, 0, 0.2, 1);
  }
  
  /* ----------------------------------------
     Conteneur
     ---------------------------------------- */
  body {
    overflow-x: hidden; /* Empêche le défilement horizontal sur toute la page */
  }
  
  .site-header {
    width: 100%;
    max-width: 100vw; /* Limite la largeur au viewport */
    overflow: visible; /* Permet aux dropdowns d'être visibles */
  }
  
  
  /* Pour un menu full-width, ajouter la classe .site-header--full-width */
  .site-header--full-width .container {
    max-width: none;
    padding: 0 48px;
  }
  
  /* ----------------------------------------
     Top Bar
     ---------------------------------------- */
  .top-bar {
    background-color: var(--menu-bg, var(--secondary-800));
    color: var(--menu-text, #ffffff);
    font-size: var(--top-bar-font-size);
    padding: 8px 0;
    transition: background-color var(--menu-transition), color var(--menu-transition), border-color var(--menu-transition);
    border-bottom: 1px solid var(--menu-border, rgba(255, 255, 255, 0.1));
  }
  
  /* Pour cacher la top bar, ajouter la classe .top-bar--hidden */
  .top-bar--hidden {
    display: none;
  }
  
  .top-bar__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 16px;
  }

  /* Classe utilitaire pour forcer l'alignement à droite quand il n'y a que top-bar__right */
  .top-bar__inner--right-only {
    justify-content: flex-end;
  }

  .top-bar__inner--right-only .top-bar__right {
    margin-left: 0;
    grid-column: unset;
  }

  /* Fallback pour navigateurs sans support :has() */
  @supports not selector(:has(*)) {
    .top-bar__inner {
      display: flex;
      justify-content: space-between;
    }
    
    .top-bar__right {
      margin-left: auto;
    }
    
    .top-bar__inner--right-only {
      justify-content: flex-end;
    }
  }

  /* Quand il n'y a que top-bar__right, il occupe la colonne de droite */
  .top-bar__inner:not(:has(.top-bar__left)) {
    grid-template-columns: 1fr;
    justify-items: end;
  }

  /* Assurer que top-bar__right soit toujours aligné à droite */
  .top-bar__right {
    margin-left: auto;
    grid-column: 2;
  }

  /* Quand il n'y a pas de left, right prend la première colonne mais reste aligné à droite */
  .top-bar__inner:not(:has(.top-bar__left)) .top-bar__right {
    grid-column: 1;
    justify-self: end;
  }
  
  .top-bar__left, .top-bar__right {
      display: flex;
      align-items: center;
    gap: 16px;
  }
  
  .top-bar__link {
    color: var(--menu-text, #ffffff);
    text-decoration: none;
      display: flex;
      align-items: center;
    gap: 6px;
    transition: opacity var(--menu-transition), color var(--menu-transition);
  }
  
  .top-bar__link:hover {
    opacity: 0.8;
  }
  
  /* Sélecteur de langue */
  .lang-selector {
    position: relative;
    z-index: 110; /* Au-dessus des autres éléments */
  }
  
  .lang-selector__button {
    background: var(--lang-selector-bg);
    border: none;
    cursor: pointer;
      display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 6px;
    transition: all var(--menu-transition);
    padding: 8px 12px;
    font-weight: var(--font-weight-medium);
  }
  
  .lang-selector__button:hover {
    background-color: var(--lang-selector-hover);
  }
  
  .lang-selector__button:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
  }
  
  .lang-selector__dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background-color: var(--menu-bg);
    border-radius: 8px;
    box-shadow: var(--lang-dropdown-shadow);
    min-width: 160px;
    padding: 8px 0;
    display: none;
    z-index: 100;
      list-style: none;
    border: 1px solid var(--menu-border);
    animation: langDropdownFadeIn 0.2s ease;
  }
  
  @keyframes langDropdownFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  .lang-selector__item {
    display: flex;
    align-items: center;
    padding: var(--lang-item-padding);
    color: var(--menu-text);
      text-decoration: none;
    transition: background-color var(--menu-transition);
  }
  
  .lang-selector__item:hover {
    background-color: var(--lang-selector-hover);
  }
  
  .lang-selector__item--active {
    position: relative;
      font-weight: var(--font-weight-medium);
    color: var(--menu-text-hover);
  }
  
  .lang-selector__item--active::after {
    display: none;
  }
  
  /* Styles spécifiques pour le sélecteur de la top-bar */
  .top-bar .lang-selector__button {
    color: #ffffff;
    font-size: 14px;
    padding: 4px 8px;
  }
  
  .top-bar .lang-selector__button:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }
  
  .top-bar .lang-selector__dropdown {
    margin-top: 4px;
    min-width: 120px;
  }
  
  /* Sélecteur de langue dans le header */
  .header-lang-selector {
    position: relative;
    z-index: 110; /* Au-dessus des autres éléments */
  }
  
  .header-lang-selector__button {
    background: var(--lang-selector-bg);
    border: none;
    cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
    border-radius: 6px;
    transition: all var(--menu-transition);
    padding: 6px 10px;
    font-weight: var(--font-weight-medium);
    color: var(--menu-text);
    font-size: calc(var(--menu-font-size) * 0.85);
  }
  
  .header-lang-selector__button .icon {
    width: calc(var(--icon-size) * 0.85);
    height: calc(var(--icon-size) * 0.85);
  }
  
  .header-lang-selector__button .icon--sm {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }
  
  .header-lang-selector__button:hover {
    background-color: var(--lang-selector-hover);
  }
  
  .header-lang-selector__button:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
  }
  
  .header-lang-selector__current {
    font-weight: var(--font-weight-medium);
  }
  
  .header-lang-selector__dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: var(--lang-dropdown-align, 0);
    right: auto;
    background-color: var(--menu-bg);
    border-radius: 8px;
    box-shadow: var(--lang-dropdown-shadow);
    width: auto;
    min-width: auto;
      padding: 0;
    display: none;
    z-index: 150;
    list-style: none;
    border: 1px solid var(--menu-border);
    animation: langDropdownFadeIn 0.2s ease;
    white-space: nowrap;
  }
  
  @keyframes langDropdownFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  .header-lang-selector__item {
      display: flex;
      align-items: center;
    padding: var(--lang-item-padding);
    color: var(--menu-text);
    text-decoration: none;
    transition: background-color var(--menu-transition);
    width: 100%;
  }
  
  .header-lang-selector__item:hover {
    background-color: var(--lang-selector-hover);
  }
  
  .header-lang-selector__item--active {
    font-weight: var(--font-weight-bold);
    background-color: rgba(0, 0, 0, 0.03); /* Légère mise en évidence */
  }
  
  .header-lang-selector__item--active::after {
    display: none;
  }
  
  .header-lang-selector__code {
    font-weight: var(--font-weight-medium);
    margin: 0 8px 0 0;
    width: auto;
    display: inline-block;
    font-size: var(--lang-dropdown-font-size);
  }
  
  .header-lang-selector__name {
    font-size: var(--lang-name-font-size);
    color: var(--content-secondary, #646A69);
    padding-right: 8px;
  }
  
  .header-lang-selector__item--active .header-lang-selector__code,
  .header-lang-selector__item--active .header-lang-selector__name {
    color: var(--menu-text-hover);
  }
  
  /* Animation lorsque le menu langue est ouvert */
  .lang-selector.is-active .lang-selector__dropdown,
  .header-lang-selector.is-active .header-lang-selector__dropdown {
    display: block;
  }
  
  /* ----------------------------------------
     Main Header
     ---------------------------------------- */
  .main-header {
    background-color: var(--menu-bg);
    /*border-bottom: 1px solid var(--menu-border);*/
    height: var(--header-height);
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    overflow: visible;
  }
  
  .main-header__inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
    height: 100%;
      width: 100%;
    flex-wrap: nowrap; /* Empêche le retour à la ligne des éléments */
  }
  
  /* Logo */
  .main-header__logo {
    height: var(--logo-height);
      display: flex;
      align-items: center;
    flex-shrink: 1; /* Permet au logo de rétrécir si nécessaire */
    margin-right: 20px;
    min-width: 80px; /* Largeur minimale pour le logo */
  }
  
  .main-header__logo img, .mobile-menu__logo img {
    display: block;
    max-width: 100%; /* Empêche l'image de dépasser */
    height: auto; /* Maintient le ratio */
  }
  
  .main-header__logo img.logo-dark, .mobile-menu__logo img.logo-dark {
    display: none;
  }
  
  .main-header__logo img.logo-light, .mobile-menu__logo img.logo-light {
    display: block;
  }
  
  /* Gestion des logos clair/sombre */
  .site-header--light .main-header__logo img.logo-dark, .site-header--light .mobile-menu__logo img.logo-dark {
    display: none; /* Masqué par défaut */
  }
  
  .site-header--light .main-header__logo img.logo-light, .site-header--light .mobile-menu__logo img.logo-light {
    display: block; /* Visible par défaut */
  }
  
  /* Navigation desktop */
  .main-header__nav {
    display: flex;
    align-items: center;
    height: 100%;
    flex-grow: 1;
    justify-content: center;
    flex-shrink: 1; /* Permet à la navigation de rétrécir */
    overflow: visible !important; /* Forcer à être visible pour permettre aux sous-menus de dépasser */
  }
  
  /* Positions possibles du menu */
  /* Par défaut, le menu est centré */
  .desktop-nav {
    height: 100%;
    display: flex;
    align-items: center;
  }
  
  /* Menu aligné à gauche, proche du logo */
  .site-header--menu-left .main-header__nav {
    justify-content: flex-start;
  }
  
/* Menu aligné à gauche */
.site-header--menu-left .main-header__nav {
  justify-content: flex-start;
}

  /* Menu aligné à droite */
  .site-header--menu-right .main-header__nav {
    justify-content: flex-end;
  }
  
  .nav-menu {
      display: flex;
    gap: var(--menu-item-gap);
      list-style: none;
      padding: 0;
      margin: 0;
    height: 100%;
    flex-wrap: nowrap; /* Empêche les éléments de passer à la ligne */
  }
  
  .nav-menu__item {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    overflow: visible; /* S'assurer que le sous-menu peut dépasser */
  }
  
  .nav-menu__link {
    color: var(--menu-text);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color var(--menu-transition);
    height: 100%;
    padding: 0 4px;
    font-size: var(--menu-font-size);
  }
  
  .nav-menu__link:hover {
    color: var(--menu-text-hover);
  }
  
  /* Actions */
  .main-header__actions {
      display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    flex-shrink: 0;
    margin-left: 18px;
  }
  
  .nav-icons {
    display: flex;
    align-items: center;
      gap: 16px;
  }
  
  .nav-icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    transition: background-color var(--menu-transition);
    color: var(--menu-text);
  }
  
  .nav-icon-link:hover {
    background-color: var(--lang-selector-hover);
  }
  
  .nav-icon-link svg {
    width: var(--icon-size);
    height: var(--icon-size);
  }
  
  .nav-buttons {
    display: flex;
    gap: var(--nav-button-gap);
  }
  
  /* Bouton mobile toggle */
  .mobile-toggle {
    display: none; /* Caché par défaut */
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--color-black);
    transition: all var(--menu-transition);
  }
  
  .mobile-toggle:hover {
    color: var(--secondary);
  }
  
  .mobile-toggle .icon {
    width: 24px;
    height: 24px;
    transition: transform var(--menu-transition);
  }
  
  /* Animation du bouton toggle */
  .mobile-toggle[aria-expanded="true"] .icon {
    transform: rotate(180deg);
  }
  
  /* Bouton fermeture menu mobile */
  .mobile-menu__close {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--gray-800);
    transition: all var(--menu-transition);
  }
  
  .mobile-menu__close:hover {
    color: var(--primary-600);
  }
  
  .mobile-menu__close .icon {
    width: 24px;
    height: 24px;
    transition: transform var(--menu-transition);
  }
  
  /* Animation du bouton fermeture */
  .mobile-menu.is-active .mobile-menu__close .icon {
    transform: rotate(180deg);
  }
  
  /* Affichage du menu mobile et masquage du menu desktop jusqu'à 1024px */
  @media (max-width: 1024px) {
    /* Variables adaptées pour mobile et tablette 
    :root {
      --header-height: 67px;
      --header-height-mobile: 64px;
      --menu-font-size: 13px;
      --logo-height: 28px;
      --menu-item-gap: 20px;
      --menu-mobile-font-size: 20px;
    }
  */
    /* Structure du header */
    .main-header {
      height: var(--header-height-mobile);
      overflow: visible;
    }
  
    .main-header__actions {
      gap: 12px;
      margin-left: auto;
    }
    
    /* Navigation */
    .desktop-nav {
      display: none !important;
    }
  
    .nav-buttons.d-none-mobile,
    .header-lang-selector,
    .nav-icons {
      display: none !important;
    }
  
    .mobile-toggle {
    display: flex;
    align-items: center;
      justify-content: center;
    }
  
    .mobile-menu.is-active {
      display: flex;
    }
  
    
    body.mobile-menu-open {
      overflow: hidden;
    }
    
    /* Header du menu mobile */
    .mobile-menu__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 24px;
      max-height: var(--header-height-mobile);
      border-bottom: 1px solid var(--menu-border);
    }
  
    /*
    .mobile-menu__logo {
      height: 40px;
    }
    */
    
    /* Navigation mobile */
    .mobile-menu__nav {
      flex: 1;
      padding: 40px 12%;
      order: 1;
    }

    .mobile-menu__list {
      padding-left: 0;
    }
  
    .mobile-menu__link {
      font-size: var(--menu-mobile-font-size);
      padding: 12px 0;
      color: var(--color-black);
      text-decoration: none;
      font-weight: var(--font-weight-medium);
      display: block;
      transition: color var(--menu-transition);
      border: none;
      background: none;
    }
  
    .mobile-menu__link:hover,
    .mobile-menu__link:focus {
      color: var(--secondary);
    }
  
    /* Sélecteur de langue mobile */
    .mobile-menu__lang-selector {
      padding: 16px 24px;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px;
      order: 2;
      border-bottom: 1px solid var(--menu-border);
    }
  
    .mobile-menu__lang-item {
      background: var(--gray-100);
      border: none;
      border-radius: 4px;
      padding: 8px 12px;
      font-size: var(--lang-dropdown-font-size);
      font-weight: var(--font-weight-medium);
      color: var(--menu-text);
      cursor: pointer;
      transition: all var(--menu-transition);
    }
  
    .mobile-menu__lang-item:hover {
      background: var(--gray-200);
    }
  
    .mobile-menu__lang-item--active {
      background: var(--primary);
      color: var(--color-dark);
    }
  
    /* Footer du menu mobile */
    .mobile-menu__footer {
      padding: 24px;
      border-top: 1px solid var(--menu-border);
      order: 4;
    }
  
    /* Assurer que les boutons sont en deux colonnes sur tablette */
    .mobile-menu__footer .mobile-menu__actions {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      gap: 12px;
    width: 100%;
  }
  
    .mobile-menu__footer .mobile-menu__actions .btn {
      width: 48%;
      justify-content: center;
    }
  
    /* Si un seul bouton existe, le centrer */
    .mobile-menu__footer .mobile-menu__actions .btn:only-child {
      width: 60%;
    margin: 0 auto;
  }
  
    /* Styles des sous-menus mobile */
    .mobile-menu__item {
    display: flex;
      flex-wrap: wrap;
    align-items: center;
      position: relative;
    }
  
    .mobile-menu__submenu-toggle {
      position: absolute;
      right: 0;
      top: 0;
      height: 48px;
      width: 36px;
      background: transparent;
      border: none;
    display: flex;
    align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--menu-text);
      margin-top: 15px;
    }
  
    .mobile-menu__submenu-toggle[aria-expanded="true"] .icon--chevron-down {
      transform: rotate(180deg);
    }
  
    .mobile-menu__submenu {
      width: 100%;
      max-height: 0;
      overflow: hidden;
      transition: max-height var(--menu-transition);
      opacity: 0.8;
    }
  
    .mobile-menu__submenu.is-open {
      max-height: 1500px;
      opacity: 1;
    }
  
    .mobile-menu__submenu-item {
    display: flex;
      flex-wrap: wrap;
    align-items: center;
      position: relative;
      margin-bottom: 12px;
    }
  
    .mobile-menu__submenu-link {
      color: var(--color-white);
      text-decoration: none;
      font-size: 1.1em;
      line-height: 1.5em;
      font-weight: 600;
      opacity: 0.9;
      transition: opacity var(--menu-transition), color var(--menu-transition);
      flex: 1;
      background: var(--color-background-dark);
      padding: 10px 20px;
      border-radius: 10px;
    }
  
    .mobile-menu__submenu-link:hover {
      opacity: 1;
      color: var(--menu-text-hover);
    }
  
    /* Sous-sous-menu mobile */
    .mobile-menu__subsubmenu-toggle {
      position: absolute;
      right: 5px;
      top: 5px;
      background: transparent;
      border: none;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--color-white);
    }
  
    .mobile-menu__subsubmenu-toggle[aria-expanded="true"] .icon--chevron-right {
      transform: scaleX(-1);
      color: var(--menu-text-hover);
    }
  
    .mobile-menu__subsubmenu {
      width: 100%;
      padding-left: 16px;
      max-height: 0;
      overflow: hidden;
      transition: max-height var(--menu-transition);
      opacity: 0.8;
    }
  
    .mobile-menu__subsubmenu.is-open {
      max-height: 500px;
      opacity: 1;
    }
  
    .mobile-menu__subsubmenu-item {
      margin: 15px 0 25px;
    }
  
    .mobile-menu__subsubmenu-link {
      color: var(--menu-text);
      text-decoration: none;
      font-size: 1em;
      padding: 5px;
      opacity: 0.9;
      border-bottom: 1px solid var(--color-dark);
      transition: opacity var(--menu-transition), color var(--menu-transition);
    }
  
    .mobile-menu__subsubmenu-link:hover {
      opacity: 1;
      color: var(--menu-text-hover);
    }
  }
  
  /* Optimisations spécifiques pour mobile (smaller) */
  @media (max-width: 768px) {
    
    /* Masquer la top bar sur mobile et tablette */
    .top-bar {
      display: none;
    }
  
    /* Ajustements pour les espaces */
    .mobile-menu__nav {
      padding: 25px 12%;
    }
  
    .mobile-menu__footer {
      padding: 16px;
    }
  
    /* Modifier à nouveau la disposition des boutons en colonne pour petit mobile */
    .mobile-menu__footer .mobile-menu__actions {
      flex-direction: column;
    }
  
    .mobile-menu__footer .mobile-menu__actions .btn {
      width: 100%;
      margin-bottom: 12px;
    }
  
    /* La btn:only-child reste avec sa propre règle du breakpoint précédent */
  }
  
  /* Optimisations pour très petits écrans */
  @media (max-width: 480px) {
    .main-header .container {
      padding: 16px 24px;
    }
  
    .mobile-menu__lang-selector {
      padding: 12px 16px;
    }
  }
  
  /* ----------------------------------------
     Utilitaires pour personnalisation
     ---------------------------------------- */
  /* Classes utilitaires pour changer facilement l'apparence */
  .site-header--elevated {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
  
  .site-header--transparent {
    background-color: transparent;
    border-bottom: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
  }
  
  .btn--full {
    width: 100%;
  }
  
  /* Style des boutons */
  .nav-buttons .btn {
    font-size: var(--menu-font-size);
    padding: 8px 14px;
    border-radius: var(--button-border-radius);
  }
  
  /* Taille des icônes dans les liens du menu */
  .nav-menu__link svg,
  .top-bar__link svg,
  .mobile-menu__contact-item svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }
  
  /* Réseaux sociaux dans la top bar */
  .top-bar__social {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 16px;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    transition: border-color var(--menu-transition);
  }
  
  .top-bar__social-text {
    color: var(--menu-text, #000000);
    font-size: 0.875rem;
    opacity: 0.9;
    margin-right: 8px;
    white-space: nowrap;
  }
  
  .top-bar__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background-color: var(--fourth);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    transition: background-color var(--menu-transition), opacity 0.3s ease;
  }
  
  /* Ajustement spécifique pour les icônes des réseaux sociaux */
  .top-bar__social-link .icon {
    width: var(--icon-size-xs, 16px);
    height: var(--icon-size-xs, 16px);
    color: #ffffff;
    fill: currentColor;
    stroke: none;
  }
  
  .top-bar__social-link:hover {
    background-color: var(--primary);
  }
  
  
  
  /* ----------------------------------------
     Comportement du menu au scroll
     ---------------------------------------- */
  /* Mode Fixed: Menu toujours visible en haut de la page */
  .scroll-mode-fixed .site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: transform var(--menu-scroll-transition);
  }
  
  /* Ajoute un espace pour éviter que le contenu remonte sous le header fixe */
  .scroll-mode-fixed main {
    padding-top: calc(var(--header-height) + (var(--top-bar-height, 0px) - 15px));
  }
  
  /* Effet visuel quand le menu devient fixe après avoir scrollé */
  .site-header.scrolled {
    background-color: var(--menu-bg);
  }
  
  /* Réduire légèrement la hauteur du header lors du scroll pour un look plus compact */
  .site-header.scrolled .main-header {
    height: var(--header-height);
    transition: height var(--menu-scroll-transition);
  }
  
  .site-header.scrolled .top-bar {
    max-height: 0;
    padding: 0;
    overflow: hidden;
    transition: all var(--menu-scroll-transition);
    border: none;
  }
  
  /* Ajustements responsive */
  @media (max-width: 768px) {
    .scroll-mode-fixed main {
      padding-top: calc(var(--header-height-mobile) - 15px);
    }
    
    /* La top-bar est déjà cachée en mobile */
    .site-header.scrolled .main-header {
      height: var(--header-height-mobile);
    }
  }
  
  /* Visibilité mobile (évite les problèmes avec le menu mobile) */
  .mobile-menu-open .site-header {
    position: absolute !important;
    transform: none !important;
  }
  
  /* ----------------------------------------
     Sous-menus / Dropdowns (Desktop)
     ---------------------------------------- */
  .nav-menu__dropdown {
    position: absolute;
    top: calc(100% + 0px);
    left: 0;
    background-color: var(--menu-bg);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 220px;
    padding: 8px 0;
    margin-top: -1px;
    list-style: none;
    display: none;
    z-index: 200;
    border: 1px solid var(--menu-border);
    border-top: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 0;
    transform: translateY(0);
  }
  
  /* Assurer que tous les parents sont visible pour permettre l'affichage des sous-menus */
  .nav-menu__item {
    position: relative;
    height: var(--header-height);
    display: flex;
    align-items: center;
    overflow: visible !important;
  }
  
  .nav-menu {
    overflow: visible !important;
  }
  
  .main-header__nav {
    overflow: visible !important;
  }
  
  .desktop-nav {
    overflow: visible !important;
  }
  
  .main-header {
    overflow: visible !important;
  }
  
  .site-header {
    overflow: visible !important;
  }
  
  /* Animation plus douce pour l'apparition des sous-menus */
  .desktop-nav .nav-menu__item:hover .nav-menu__dropdown {
    display: block;
    opacity: 1;
    transform: translateY(0);
  }


  
  /* Ajustement pour les menus en mode fixe lors du défilement */
  .site-header.site-header--fixed .nav-menu__dropdown,
  .site-header.site-header--alternative .nav-menu__dropdown {
    top: var(--header-height, 65px);
  }
  
  /* Style de pointeur pour indiquer qu'un item a un sous-menu */
  .nav-menu__item:has(.nav-menu__dropdown) > .nav-menu__link {
    cursor: pointer;
  }
  
  /* Effet visuel sur l'élément parent lorsque le sous-menu est ouvert */
  .nav-menu__item:hover > .nav-menu__link {
    color: var(--menu-text-hover);
  }
  
  /* Pour les menus qui pourraient sortir du viewport à droite, les aligner à droite */
  .nav-menu__item:last-child .nav-menu__dropdown {
    left: auto;
    right: 0;
  }
  
  .nav-menu__dropdown-item {
    position: relative;
    margin: 0;
    padding: 0;
  }
  
  .nav-menu__dropdown-link {
    display: block;
    padding: 10px 16px;
    color: var(--menu-text);
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
  }
  
  .nav-menu__dropdown-link:hover,
  .nav-menu__dropdown-link:focus {
    background-color: var(--menu-item-hover-bg, rgba(0, 0, 0, 0.05));
    color: var(--menu-text-hover);
    padding-left: 20px;
  }
  
  /* Séparateur entre les items du sous-sous-menu */
  .nav-menu__dropdown-item:not(:last-child) {
    border-bottom: 1px solid var(--menu-border, rgba(0, 0, 0, 0.05));
  }
  
  /* Style pour les sous-menus actifs */
  .nav-menu__dropdown-link.active {
    font-weight: var(--font-weight-medium);
    color: var(--menu-text-hover);
  }
  
  /
  /* Style pour les liens avec sous-menus */
  .nav-menu__dropdown-link.has-submenu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding-right: 30px; /* Espace pour l'icône */
  }
  
  .nav-menu__dropdown-link .icon-right {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    transition: transform var(--submenu-transition), color var(--submenu-transition);
  }
  
  /* Amélioration de l'apparence du sous-sous-menu */
  .nav-menu__sub-dropdown {
    position: absolute;
    top: -1px; /* Aligner avec le parent pour un effet de continuation */
    left: 100%;
    background-color: var(--menu-bg);
    border-radius: 0 8px 8px 0;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    min-width: 220px;
    padding: 8px 0;
    margin: 0;
    list-style: none;
    display: none;
    z-index: 210;
    border: 1px solid var(--menu-border);
    transition: opacity var(--submenu-transition), transform var(--submenu-transition);
    opacity: 0;
    transform: translateX(10px);
    pointer-events: none; /* Éviter que le sous-menu intercepte les événements avant d'être visible */
  }
  
  /* Animation de l'icône lors du survol */
  .nav-menu__dropdown-link .icon-right {
    transition: transform var(--submenu-transition), color var(--submenu-transition);
  }
  
  .nav-menu__dropdown-item:hover > .nav-menu__dropdown-link .icon-right {
    transform: translateY(-50%) rotate(90deg);
    color: var(--menu-text-hover);
  }
  
  /* Amélioration de l'effet de transition */
  .nav-menu__dropdown-item:hover > .nav-menu__sub-dropdown {
    display: block;
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto; /* Réactiver les événements quand le sous-menu est visible */
  }
  
  /* Style pour le sous-sous-menu quand il s'affiche à gauche */
  .nav-menu__dropdown-item:last-child .nav-menu__sub-dropdown,
  .nav-menu__dropdown-item.position-left .nav-menu__sub-dropdown {
    left: auto;
    right: 100%;
    border-radius: 8px 0 0 8px;
  }
  
  /* Rotation inverse de l'icône pour les menus à gauche */
  .nav-menu__dropdown-item:last-child:hover > .nav-menu__dropdown-link .icon-right,
  .nav-menu__dropdown-item.position-left:hover > .nav-menu__dropdown-link .icon-right {
    transform: translateY(-50%) rotate(-90deg);
  }
  
  
  
  /* ----------------------------------------
     Sous-menus mobile (accordéon niveau 2)
     ---------------------------------------- */
  .mobile-menu__item {
    position: relative;
    border-bottom: 1px solid var(--menu-border);
    padding-top: 10px;
  }
  
  .mobile-menu__submenu-toggle {
    position: absolute;
    right: 0;
    top: 0;
    background: transparent;
    border: none;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    cursor: pointer;
    color: var(--menu-text);
    transition: transform var(--menu-transition);
  }
  
  .mobile-menu__submenu-toggle svg {
    transition: transform var(--menu-transition);
  }
  
  .mobile-menu__submenu-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }
  
  .mobile-menu__submenu {
    list-style: none;
    padding: 0 0 0 0px;
    margin: 8px 0 0 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--menu-transition);
    opacity: 0.8;
    width: 100%;
  }
  
  .mobile-menu__submenu.is-open {
    max-height: 1500px; /* Hauteur suffisante pour contenir tous les éléments */
    opacity: 1;
  }
  
  .mobile-menu__submenu-item {
    margin-bottom: 12px;
    position: relative;
  }
  
  .mobile-menu__submenu-link {
    color: var(--color-white);
    text-decoration: none;
    font-size: 1.1em;
    opacity: 0.9;
    transition: opacity var(--menu-transition), color var(--menu-transition);
  }

  .mobile-menu__submenu-link--has-children {
    color: var(--primary);
    cursor: pointer;
    position: relative;
  }


  /* Animation de rotation quand le sous-menu est ouvert */
  .mobile-menu__submenu-item:has(.mobile-menu__subsubmenu-toggle[aria-expanded="true"]) .mobile-menu__submenu-link--has-children[href="#"]::after,
  .mobile-menu__submenu-item:has(.mobile-menu__subsubmenu-toggle[aria-expanded="true"]) .mobile-menu__submenu-link--has-children:not([href])::after {
    transform: translateY(-50%) rotate(180deg);
  }
  
  .mobile-menu__submenu-link:hover {
    opacity: 1;
    color: var(--menu-text-hover);
  }
  
  @media (max-width: 768px) {
    /* Ajuster le layout pour que le toggle fonctionne correctement */
    .mobile-menu__item {
    display: flex;
      flex-wrap: wrap;
    align-items: center;
      position: relative;
    }
    
    .mobile-menu__link {
      flex: 1; /* Prend tout l'espace disponible */
    }
    
    .mobile-menu__submenu {
      width: 100%; /* Prend toute la largeur */
    }
  }
  
  /* ----------------------------------------
     Sous-sous-menus mobile (accordéon niveau 3)
     ---------------------------------------- */
  .mobile-menu__subsubmenu-item {
    position: relative;
  }
  
  .mobile-menu__subsubmenu-toggle {
    position: absolute;
    right: 5px;
    top: 5px;
    background: transparent;
    border: none;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-white);
    transition: transform var(--menu-transition);
  }
  
  .mobile-menu__subsubmenu-toggle svg {
    transition: transform var(--menu-transition);
  }
  
  .mobile-menu__subsubmenu-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }
  
  .mobile-menu__subsubmenu {
    list-style: none;
    padding: 0 0 0 16px;
    margin: 8px 0 0 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--menu-transition);
    opacity: 0.8;
    width: 100%;
  }
  
  .mobile-menu__subsubmenu.is-open {
    max-height: 500px; /* Hauteur suffisante pour contenir tous les éléments */
    opacity: 1;
  }
  
  .mobile-menu__subsubmenu-item {
    margin: 15px 0 25px;
  }
  
  .mobile-menu__subsubmenu-link {
    color: var(--menu-text);
    text-decoration: none;
    font-size: 0.9em;
    opacity: 0.9;
    transition: opacity var(--menu-transition), color var(--menu-transition);
  }
  
  .mobile-menu__subsubmenu-link:hover {
    opacity: 1;
    color: var(--menu-text-hover);
  }
  
  @media (max-width: 768px) {
    /* Ajuster le layout pour que les toggles du niveau 3 fonctionnent correctement */
    .mobile-menu__submenu-item {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      position: relative;
    }
    
    .mobile-menu__submenu-link {
      flex: 1; /* Prend tout l'espace disponible */
    }
    
    .mobile-menu__subsubmenu {
      width: 100%; /* Prend toute la largeur */
      padding-left: 16px;
    }
  }
  
  /* Style des liens du menu mobile */
  .mobile-menu__link {
    color: var(--color-black);
    text-decoration: none;
    font-size: var(--menu-mobile-font-size);
    font-weight: var(--font-weight-medium);
    padding: 12px 0;
      display: block;
    transition: color var(--menu-transition);
  }
  
  .mobile-menu__link:hover,
  .mobile-menu__link:focus {
    color: var(--secondary);
  }
  
  /* Ajustement des espacements et styles du footer mobile */
  .mobile-menu__footer {
    padding: 24px;
    border-top: 1px solid var(--menu-border);
  }
  
  .mobile-menu__contact {
    margin-bottom: 24px;
      display: flex;
      flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  
  .mobile-menu__contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--secondary-800);
    text-decoration: none;
    font-size: 14px;
    transition: color var(--menu-transition);
  }
  
  .mobile-menu__contact-item:hover {
    color: var(--primary-600);
  }
  
  .mobile-menu__contact-item .icon {
    width: 16px;
    height: 16px;
  }
  
  .mobile-menu__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  .mobile-menu__actions .btn {
      width: 100%;
    justify-content: center;
  }
  
  /* Styles des sous-menus */
  .nav-menu__sub-dropdown-item {
    margin: 0;
    padding: 0;
  }
  
  .nav-menu__sub-dropdown-link {
    display: block;
    padding: 10px 16px;
    color: var(--menu-text);
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
  }
  
  .nav-menu__sub-dropdown-link:hover,
  .nav-menu__sub-dropdown-link:focus {
    background-color: var(--menu-item-hover-bg, rgba(0, 0, 0, 0.05));
    color: var(--menu-text-hover);
    padding-left: 20px;
  }
  
  /* Séparateur entre les items du sous-sous-menu */
  .nav-menu__sub-dropdown-item:not(:last-child) {
    border-bottom: 1px solid var(--menu-border, rgba(0, 0, 0, 0.05));
  }
  
  /* Animation des chevrons */
  .nav-menu__item .nav-menu__link .icon--chevron-down {
    transition: transform var(--submenu-transition);
  }
  
  .nav-menu__item:hover > .nav-menu__link .icon--chevron-down {
    transform: rotate(180deg);
  }
  
  .nav-menu__dropdown-link .icon-right {
      position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    transition: transform var(--submenu-transition), color var(--submenu-transition);
  }
  
  .nav-menu__dropdown-item:hover > .nav-menu__dropdown-link .icon-right {
    transform: translateY(-50%) scaleX(-1);
    color: var(--menu-text-hover);
  }
  
  .nav-menu__dropdown-item.position-left:hover > .nav-menu__dropdown-link .icon-right {
    transform: translateY(-50%) scaleX(-1);
  }
  
  /* Animations des chevrons mobiles */
  .mobile-menu__submenu-toggle .icon--chevron-down {
    transition: transform var(--submenu-transition);
  }
  
  .mobile-menu__submenu-toggle[aria-expanded="true"] .icon--chevron-down {
    transform: rotate(180deg);
  }
  
  .mobile-menu__subsubmenu-toggle .icon--chevron-right {
    transition: transform var(--submenu-transition);
  }
  
  .mobile-menu__subsubmenu-toggle[aria-expanded="true"] .icon--chevron-right {
    transform: scaleX(-1);
    color: var(--menu-text-hover);
  }
  
  /* ----------------------------------------
     Menu Mobile
     ---------------------------------------- */
  /* Le menu mobile est masqué par défaut sur tous les écrans */
  .mobile-menu {
    display: none;
    position: fixed;
    top: 0;
      left: 0;
      width: 100%;
    height: 100vh;
    background-color: var(--menu-bg);
    z-index: 1000;
    flex-direction: column;
    overflow-y: auto;
  }
  
  /* Le menu mobile est affiché uniquement lorsque la classe is-active est présente */
  .mobile-menu.is-active {
    display: flex;
  }
  
  /* La règle suivante empêche la duplication de ce code dans les media queries */
  @media (max-width: 1024px) {
    .mobile-menu {
      /* Les propriétés de positionnement et de style sont préservées 
         mais display reste contrôlé par .is-active */
    }
  }
  
  /*------------------------------------
      Search Modal Component
  ------------------------------------*/
  
  /* Search toggle button */
  .search-toggle {
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    transition: opacity 0.2s ease;
  }
  
  .search-toggle:hover,
  .search-toggle:focus {
    opacity: 0.8;
  }

  /* Overlay blur pour l'arrière-plan */
  .search-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  }

  .search-modal-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  /* Empêcher le défilement de la page quand la recherche est ouverte */
  body.search-modal-open {
    overflow: hidden;
  }
  
  /* Modal container */
  .search-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--white);
    z-index: 1000;
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
    visibility: hidden;
    border-bottom: 1px solid var(--gray-200);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  }
  
  .search-modal[aria-hidden="false"] {
    transform: translateY(0);
    visibility: visible;
  }
  
  .search-modal__container {
    padding: 2rem 0;
  }
  
  .search-modal__form {
    position: relative;
    margin-right: 3rem;
  }
  
  .search-modal__input-group {
    display: flex;
    gap: 1rem;
  }
  
  .search-modal__input {
    flex: 1;
    padding: 1rem 1.25rem;
    font-size: var(--font-size-lg);
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius-md);
    background-color: var(--white);
  }
  
  .search-modal__input:focus {
    outline: none;
    border-color: var(--primary-400);
  }
  
  .search-modal__button {
    white-space: nowrap;
  }
  
  .search-modal__close {
    position: absolute;
    top: 2rem;
    right: 1rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    transition: opacity 0.2s ease;
  }
  
  .search-modal__close:hover,
  .search-modal__close:focus {
    opacity: 0.8;
  }
  
  /* Responsive adjustments */
  @media (max-width: 767px) {
    .search-modal__container {
      padding: 1.5rem 0;
    }
    
    .search-modal__form {
      margin-right: 2rem;
    }
    
    .search-modal__input-group {
      flex-direction: column;
      gap: 0.75rem;
    }
  }
  

  span.new {
    background: #25282a;
    color: #f5e847;
    font-size: 12px;
    padding: 3px 4px;
    border-radius: 5px;
    vertical-align: super;
    margin-left: 3px;
}
/*------------------------------------
    Header Landing Page
    Menu simplifié pour landing pages avec seulement le logo
    Conserve la même hauteur que le menu principal sans la top bar
------------------------------------*/

/* Variables spécifiques au menu landing page */
:root {
  --landing-header-height: var(--header-height, 80px);
  --landing-header-height-mobile: var(--header-height-mobile, 64px);
  --landing-logo-max-height: 40px;
  --landing-content-padding: 0 1rem;
}

/* Header de landing page */
.site-header--landing-page {
  position: relative;
  width: 100%;
  max-width: 100vw;
  background-color: var(--menu-bg, #ffffff);
  border-bottom: 1px solid var(--menu-border, #e5e7eb);
  transition: background-color var(--menu-transition, 0.3s ease), 
              border-color var(--menu-transition, 0.3s ease);
}

/* Main header landing page */
.main-header--landing-page {
  height: var(--landing-header-height);
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
}

/* Inner container */
.main-header__inner--landing-page {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  width: 100%;
  padding: var(--landing-content-padding);
}

/* Logo landing page */
.main-header__logo--landing-page {
  height: var(--landing-logo-max-height);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.main-header__logo--landing-page img {
  display: block;
  max-width: 100%;
  max-height: var(--landing-logo-max-height);
  height: auto;
  width: auto;
  transition: opacity var(--menu-transition, 0.3s ease);
}

.main-header__logo--landing-page a {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: opacity var(--menu-transition, 0.3s ease);
}

.main-header__logo--landing-page a:hover img {
  opacity: 0.8;
}



/* Variantes de position du logo */

/* Positions Desktop */

/* Logo centré (par défaut) */
.site-header--logo-center-desktop .main-header__inner--landing-page {
  justify-content: center;
}

/* Logo à gauche */
.site-header--logo-left-desktop .main-header__inner--landing-page {
  justify-content: flex-start;
}

/* Logo à droite */
.site-header--logo-right-desktop .main-header__inner--landing-page {
  justify-content: flex-end;
}

/* Effets d'ombre (identiques au menu principal) */
.site-header--landing-page.site-header--elevate {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Position fixe (identique au menu principal) */
.scroll-mode-fixed .site-header--landing-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: transform var(--menu-scroll-transition, 0.4s cubic-bezier(0.3, 0, 0.2, 1));
}

/* Ajustement du padding du main pour éviter que le contenu passe sous le header fixe */
.scroll-mode-fixed main {
  padding-top: calc(var(--landing-header-height) + var(--top-bar-height, 0px) - 15px);
}

/* Effet au scroll (identique au menu principal) */
.site-header--landing-page.scrolled {
  background-color: var(--menu-bg, #ffffff);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Masquer le top bar au scroll (même logique que le menu principal) */
.site-header--landing-page.scrolled .top-bar {
  max-height: 0;
  padding: 0;
  overflow: hidden;
  transition: all var(--menu-scroll-transition, 0.4s cubic-bezier(0.3, 0, 0.2, 1));
  border: none;
}


/* Responsive Design */
@media (max-width: 768px) {
  :root {
    --landing-header-height: var(--landing-header-height-mobile);
    --landing-logo-max-height: 32px;
    --landing-content-padding: 0 1rem;
  }
  
  .main-header--landing-page {
    height: var(--landing-header-height-mobile);
  }
  
  /* Positions Mobile */
  
  /* Logo centré en mobile */
  .site-header--logo-center-mobile .main-header__inner--landing-page {
    justify-content: center;
  }
  
  /* Logo à gauche en mobile */
  .site-header--logo-left-mobile .main-header__inner--landing-page {
    justify-content: flex-start;
  }
  
  /* Logo à droite en mobile */
  .site-header--logo-right-mobile .main-header__inner--landing-page {
    justify-content: flex-end;
  }
  
  /* Ajustement du padding main en mobile */
  .scroll-mode-fixed main {
    padding-top: calc(var(--landing-header-height-mobile) - 15px);
  }
}

@media (max-width: 480px) {
  :root {
    --landing-content-padding: 0 0.75rem;
    --landing-logo-max-height: 28px;
  }
}

/* Compatibilité avec les modes de couleur du thème */
.site-header--landing-page.site-header--dark {
  background-color: var(--gray-900, #111827);
  border-bottom-color: var(--gray-700, #374151);
  color: var(--gray-100, #f3f4f6);
}

.site-header--landing-page.site-header--light {
  background-color: var(--gray-50, #f9fafb);
  border-bottom-color: var(--gray-200, #e5e7eb);
  color: var(--gray-900, #111827);
}

/* Animation d'apparition */
.site-header--landing-page {
  animation: headerFadeIn 0.6s ease-out;
}

@keyframes headerFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Focus et accessibilité */
.main-header__logo--landing-page a:focus-visible {
  outline: 2px solid var(--primary, #3b82f6);
  outline-offset: 2px;
  border-radius: 4px;
}
/**
 * Footer Styles
 * Styles pour le pied de page du site
 */

/* Variables Hubl depuis fields.json */





/* ----------------------------------------
   Variables
   ---------------------------------------- */
   :root {
    /* Couleurs */
    --footer-bg: #25282A;
    --footer-text-primary: #F7EA48;
    --footer-text-secondary: #FFFFFF;
    --footer-border: #474b4d;
    
    /* Couleurs du badge */
    --badge-bg: #02301E;
    --badge-text: #ffffff;
  
    
    /* Espacement */
    --footer-padding-y: 82px;
    --footer-padding-bottom: 40px;
    --menu-item-spacing: 30px;
    
    /* Tailles de texte */
    --footer-title-size: 22px;
    --footer-link-size: 18px;
    --footer-copyright-size: 14px;
    --footer-newsletter-title-size: 18px;
    --badge-font-size: 12px;
  }
  
  /* ----------------------------------------
     Structure globale
     ---------------------------------------- */
  .site-footer {
    background-color: var(--footer-bg);
    padding-top: var(--footer-padding-y);
    padding-bottom: var(--footer-padding-bottom);
    color: var(--footer-text-secondary);
    margin: 20px;
    border-radius: 20px;
  }
  
  /* ----------------------------------------
     Variante vert foncé (dark)
     ---------------------------------------- */
  .site-footer.site-footer--dark {
    background-color: var(--secondary-800);
    color: var(--color-text-inverted-muted);
  }
  
  .site-footer.site-footer--dark .footer-newsletter__title,
  .site-footer.site-footer--dark .footer-menu__title {
    color: var(--color-text-inverted);
  }
  
  .site-footer.site-footer--dark .footer-newsletter__text,
  .site-footer.site-footer--dark .footer-copyright {
    color: var(--color-text-inverted-muted);
  }
  
  .site-footer.site-footer--dark .footer-menu__link {
    color: var(--gray-300);
  }
  
  .site-footer.site-footer--dark .footer-menu__link:hover {
    color: var(--primary-300);
  }
  
  .site-footer.site-footer--dark .footer-bottom {
    border-top-color: var(--secondary-700);
  }
  
  /* ----------------------------------------
     Variante tertiary clair
     ---------------------------------------- */
  .site-footer.site-footer--light-tertiary {
    background-color: var(--tertiary-50);
    color: var(--content-secondary);
  }
  
  .site-footer.site-footer--light-tertiary .footer-menu__link:hover {
    color: var(--secondary-600);
  }
  
  .site-footer.site-footer--light-tertiary .footer-bottom {
    border-top-color: var(--primary-200);
  }
  
  .footer-main {
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
    margin-bottom: 64px;
  }
  
  /* ----------------------------------------
     Colonne de logo et newsletter
     ---------------------------------------- */
  .footer-brand {
    flex: 0 0 calc(5 / 12 * 100% - 24px);
    max-width: 488px;
  }
  
  .footer-logo {
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
  }
  
  .footer-logo__img {
    display: block;
    max-width: 100%;
    height: auto;
  }
  
  .footer-logo__text {
    font-size: 22px;
    font-weight: 600;
    color: var(--footer-text-primary);
  }
  
  .footer-newsletter {
    max-width: 488px;
    margin-top: 32px;
  }
  
  .footer-newsletter__title {
    font-size: var(--footer-newsletter-title-size);
    font-weight: 600;
    color: var(--footer-text-primary);
    margin: 0 0 16px 0;
  }
  
  .footer-newsletter__text {
    font-size: 24px;
    line-height: 1.5;
    color: var(--footer-text-secondary);
    margin: 0;
  }
  
  /* ----------------------------------------
     Colonnes de menus
     ---------------------------------------- */
  .footer-menus {
    flex: 1;
    display: flex;
    justify-content: space-between;
    gap: 32px;
  }
  
  .footer-menu {
    flex: 1;
  }
  
  .footer-menu__title {
    font-family: var(--font-family-base);
    font-size: var(--footer-title-size);
    font-weight: 400;
    color: var(--footer-text-primary);
    margin: 0 0 24px 0;
  }
  
  .footer-menu__list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .footer-menu__list li {
    margin-bottom: var(--menu-item-spacing);
  }
  
  .footer-menu__link {
    font-size: var(--footer-link-size);
    color: var(--footer-text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
  }
  
  .footer-menu__link:hover {
    color: var(--footer-text-primary);
  }
  
  /* Badge "NOUVEAU" pour Carrières */
  .footer-menu__link-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .footer-menu__badge {
    display: inline-block;
    padding: 2px 8px;
    background-color: var(--badge-bg);
    color: var(--badge-text);
    font-size: var(--badge-font-size);
    font-weight: 600;
    border-radius: 6px;
    text-transform: uppercase;
  }
  
  /* ----------------------------------------
     Sous-footer copyright
     ---------------------------------------- */
  .footer-bottom {
    padding-top: 24px;
    border-top: 1px solid var(--footer-border);
    text-align: center;
  }
  
  .footer-copyright {
    font-size: var(--footer-copyright-size);
    color: var(--footer-text-secondary);
    margin: 0;
  }
  
  /* ----------------------------------------
     Responsive
     ---------------------------------------- */
  @media (max-width: 1024px) {
    :root {
      --menu-item-spacing: 16px; /* Réduction de l'espace entre les liens sur tablette */
      --footer-padding-y: 64px;
    }
    
    /* Centrage de tous les éléments sur tablette */
    .footer-brand,
    .footer-menu,
    .footer-bottom {
      text-align: center;
    }
    
    .footer-logo {
      justify-content: center;
      margin-bottom: 32px;
    }
    
    .footer-newsletter {
      margin: 0 auto;
      max-width: 600px;
    }
    
    .footer-main {
      flex-direction: column;
      gap: 48px;
    }
    
    .footer-brand {
      flex: 0 0 100%;
      max-width: 100%;
    }
    
    .footer-menus {
      width: 100%;
      flex-direction: row; /* Conserver les 3 colonnes sur la même ligne */
      justify-content: space-between;
      gap: 20px;
    }
    
    .footer-menu {
      flex: 1 1 0;
      min-width: 0; /* Éviter que les menus débordent */
    }
    
    .footer-menu__title {
      font-size: 15px;
      margin-bottom: 20px;
    }
    
    .footer-menu__link-wrapper {
      justify-content: center;
    }
  }
  
  @media (max-width: 768px) {
    :root {
      --footer-padding-y: 56px;
      --footer-padding-bottom: 32px;
      --menu-item-spacing: 12px; /* Réduction supplémentaire de l'espace entre les liens sur mobile */
    }
    
    /* Centrage de tous les éléments sur mobile */
    .footer-brand,
    .footer-menu,
    .footer-bottom {
      text-align: center;
    }
    
    .footer-logo {
      justify-content: center;
      margin-bottom: 32px;
    }
    
    .footer-menu__link-wrapper {
      justify-content: center;
    }
    
    .footer-menus {
      flex-direction: column;
      gap: 32px;
    }
    
    .footer-menu {
      flex: 0 0 100%;
    }
  
    .footer-newsletter {
      margin:auto;
      }
  
    
    .footer-newsletter__title {
      font-size: 16px;
    }
    
    .footer-menu__title {
      margin-bottom: 16px;
    }
  }
  
  @media (max-width: 480px) {
    :root {
      --footer-padding-y: 48px;
      --footer-padding-bottom: 24px;
      --menu-item-spacing: 10px; /* Espacement minimal pour mobile petit écran */
    }
    
    .footer-menu__badge {
      padding: 1px 6px;
      font-size: 10px;
    }
  }
/**
 * Footer Small Styles
 * Module de pied de page compact avec logo, navigation horizontale et réseaux sociaux
 */

/* ============================================
   VARIABLES
   ============================================ */
:root {
    /* Hauteur et espacement */
    --footer-small-height: 115px;
    --footer-small-padding-y: 30px;
    --footer-small-gap: 40px;
    
    /* Tailles */
    --footer-small-logo-width: auto;
    --footer-small-logo-height: 55px;
    --footer-small-icon-size: 24px;
}

/* ============================================
   STRUCTURE PRINCIPALE
   ============================================ */
.footer-small {
    min-height: var(--footer-small-height);
    padding: var(--footer-small-padding-y) 0;
    display: flex;
    align-items: center;
}

.footer-small__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--footer-small-gap);
}

/* ============================================
   LOGO/BRAND
   ============================================ */
.footer-small__brand {
    flex-shrink: 0;
}

.footer-small__logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.footer-small__logo:hover {
    opacity: 0.8;
}

.footer-small__logo img {
    width: var(--footer-small-logo-width);
    height: var(--footer-small-logo-height);
    object-fit: contain;
}

/* ============================================
   NAVIGATION
   ============================================ */
.footer-small__nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.footer-small__menu {
    display: flex;
    align-items: center;
    gap: var(--footer-small-gap);
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-small__menu-item {
    margin: 0;
}

.footer-small__menu-link {
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
    position: relative;
}

.footer-small__menu-link:hover {
    transform: translateY(-1px);
}

/* ============================================
   SOCIAL & CTA
   ============================================ */
.footer-small__social {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.footer-small__cta-link {
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.footer-small__cta-link:hover {
    transform: translateY(-1px);
}

.footer-small__cta-text {
    font-size: 15px;
    font-weight: 400;
    white-space: nowrap;
}

.footer-small__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--footer-small-icon-size);
    height: var(--footer-small-icon-size);
    text-decoration: none;
    transition: all 0.2s ease;
    border-radius: 4px;
}

.footer-small__social-link:hover {
    transform: translateY(-2px) scale(1.1);
}

.footer-small__social-icon {
    width: var(--footer-small-icon-size);
    height: var(--footer-small-icon-size);
    fill: currentColor;
}

/* ============================================
   VARIANTES DE COULEUR
   ============================================ */

/* Variante Light (par défaut) */
.footer-small.section--light {
    background-color: var(--color-light);
    color: var(--color-text-default);
}

.footer-small.section--light .footer-small__menu-link {
    color: var(--color-text-default);
}

.footer-small.section--light .footer-small__menu-link:hover {
    color: var(--primary-600);
}

.footer-small.section--light .footer-small__cta-link {
    color: var(--color-text-default);
}

.footer-small.section--light .footer-small__cta-link:hover {
    color: var(--primary-600);
}

.footer-small.section--light .footer-small__cta-text {
    color: var(--color-text-default);
}

.footer-small.section--light .footer-small__social-link {
    color: var(--color-text-default);
}

.footer-small.section--light .footer-small__social-link:hover {
    color: var(--primary-600);
    background-color: var(--primary-50);
}

/* Variante Primary */
.footer-small.section--primary {
    background-color: var(--primary);
    color: var(--secondary);
}

.footer-small.section--primary .footer-small__menu-link {
    color: var(--secondary);
}

.footer-small.section--primary .footer-small__menu-link:hover {
    color: var(--secondary-600);
}

.footer-small.section--primary .footer-small__cta-link {
    color: var(--secondary);
}

.footer-small.section--primary .footer-small__cta-link:hover {
    color: var(--secondary-600);
}

.footer-small.section--primary .footer-small__cta-text {
    color: var(--secondary);
}

.footer-small.section--primary .footer-small__social-link {
    color: var(--secondary);
}

.footer-small.section--primary .footer-small__social-link:hover {
    color: var(--secondary-600);
    background-color: var(--primary-200);
}

/* Variante Secondary */
.footer-small.section--secondary {
    background-color: var(--secondary);
    color: var(--color-text-inverted);
}

.footer-small.section--secondary .footer-small__menu-link {
    color: var(--color-text-inverted);
}

.footer-small.section--secondary .footer-small__menu-link:hover {
    color: var(--primary);
}

.footer-small.section--secondary .footer-small__cta-link {
    color: var(--color-text-inverted);
}

.footer-small.section--secondary .footer-small__cta-link:hover {
    color: var(--primary);
}

.footer-small.section--secondary .footer-small__cta-text {
    color: var(--color-text-inverted);
}

.footer-small.section--secondary .footer-small__social-link {
    color: var(--color-text-inverted);
}

.footer-small.section--secondary .footer-small__social-link:hover {
    color: var(--primary);
    background-color: var(--secondary-700);
}

/* Variante Tertiary */
.footer-small.section--tertiary {
    background-color: var(--tertiary);
    color: var(--secondary);
}

.footer-small.section--tertiary .footer-small__menu-link {
    color: var(--secondary);
}

.footer-small.section--tertiary .footer-small__menu-link:hover {
    color: var(--primary-600);
}

.footer-small.section--tertiary .footer-small__cta-link {
    color: var(--secondary);
}

.footer-small.section--tertiary .footer-small__cta-link:hover {
    color: var(--primary-600);
}

.footer-small.section--tertiary .footer-small__cta-text {
    color: var(--secondary);
}

.footer-small.section--tertiary .footer-small__social-link {
    color: var(--secondary);
}

.footer-small.section--tertiary .footer-small__social-link:hover {
    color: var(--primary-600);
    background-color: var(--tertiary-200);
}

/* Variante Dark */
.footer-small.section--dark {
    background-color: var(--color-dark);
    color: var(--color-text-inverted);
}

.footer-small.section--dark .footer-small__menu-link {
    color: var(--color-text-inverted);
}

.footer-small.section--dark .footer-small__menu-link:hover {
    color: var(--primary);
}

.footer-small.section--dark .footer-small__cta-link {
    color: var(--color-text-inverted);
}

.footer-small.section--dark .footer-small__cta-link:hover {
    color: var(--primary);
}

.footer-small.section--dark .footer-small__cta-text {
    color: var(--color-text-inverted);
}

.footer-small.section--dark .footer-small__social-link {
    color: var(--color-text-inverted);
}

.footer-small.section--dark .footer-small__social-link:hover {
    color: var(--primary);
    background-color: var(--primary-900);
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* Tablette */
@media (max-width: 1024px) {
    :root {
        --footer-small-gap: 30px;
    }
    
    .footer-small__menu {
        gap: 30px;
    }
    
    .footer-small__menu-link,
    .footer-small__cta-link,
    .footer-small__cta-text {
        font-size: 14px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    :root {
        --footer-small-height: auto;
        --footer-small-padding-y: 20px;
        --footer-small-gap: 20px;
    }
    
    .footer-small__content {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    
    .footer-small__nav {
        order: 2;
    }
    
    .footer-small__social {
        order: 3;
    }
    
    .footer-small__menu {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }
    
    .footer-small__menu-link,
    .footer-small__cta-link,
    .footer-small__cta-text {
        font-size: 14px;
    }
}

/* Très petit mobile */
@media (max-width: 480px) {
    :root {
        --footer-small-gap: 16px;
        --footer-small-logo-width: 90px;
        --footer-small-logo-height: 34px;
    }
    
    .footer-small__menu {
        gap: 16px;
    }
    
    .footer-small__menu-link,
    .footer-small__cta-link,
    .footer-small__cta-text {
        font-size: 13px;
    }
    
    .footer-small__social {
        gap: 12px;
    }
}
/* =================================
   MEGA MENU STYLES
   ================================= */

.nav-menu__dropdown-link {
    border-radius: 10px;
}

.nav-menu__dropdown-link.has-submenu {
    background: var(--color-background-dark);
    color: var(--color-white);
    border-radius: 10px;
    margin: 0 0 5px;
    font-size: 20px;
    padding: 20px 35px 20px 20px;
}

.nav-menu__dropdown-link.has-submenu span, .mobile-menu__submenu-link span {
    color: var(--secondary);
    display: block !important;
    font-size: 15px;
    font-weight: 400;
}

.nav-menu__dropdown-link:hover, .nav-menu__dropdown-link:focus {
    background: var(--primary);
    color: var(--color-dark);
}
.nav-menu__dropdown-link:hover span, .nav-menu__dropdown-link:focus span{
    color: var(--color-dark);
}

.nav-menu__dropdown-item:not(:last-child) {
    border-bottom: none;
}

/* Structure normale des dropdowns */
.nav-menu__dropdown{
    padding: 10px 10px 5px;
    border-radius: 15px;
}

/* =================================
   MEGA MENU LAYOUT - 3 NIVEAUX
   ================================= */

/* Layout principal du mega menu */
.mega-menu-layout {
    width: 800px;
    padding: 20px;
    border-radius: 15px;
    background: var(--color-white);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

/* Animation plus douce pour l'apparition des sous-menus */
.desktop-nav .nav-menu__item:hover .nav-menu__dropdown.mega-menu-layout {
    display: flex !important;
    opacity: 1;
    transform: translateY(0);
  }

/* Colonne de gauche - Niveau 2 */
.mega-menu-level2 {
    flex: 0 0 50%;
    padding-right: 20px;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

/* Colonne de droite - Niveau 3 */
.mega-menu-level3 {
    flex: 0 0 50%;
    padding: 20px;
}

/* Items du niveau 2 dans le mega menu */
.mega-menu-level2 .nav-menu__dropdown-item {
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mega-menu-level2 .nav-menu__dropdown-item:hover {
    transform: translateX(5px);
}

.mega-menu-level2 .nav-menu__dropdown-item.active {
    transform: translateX(5px);
}

.mega-menu-level2 .nav-menu__dropdown-link {
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s ease;
}

.mega-menu-level2 .nav-menu__dropdown-item.active .nav-menu__dropdown-link {
    background: var(--primary);
    color: var(--color-dark);
}

.mega-menu-level2 .nav-menu__dropdown-item.active .nav-menu__dropdown-link span {
    color: var(--color-dark);
}

/* Items du niveau 3 dans le mega menu */
.mega-menu-level3 .nav-menu__sub-dropdown {
    display: block;
    margin: 0;
    padding: 0;
    box-shadow: none;
    border: none;
    position: initial !important;
    pointer-events: auto !important;
}

.mega-menu-level3 .nav-menu__sub-dropdown-item {
    margin-bottom: 12px;
    padding-bottom: 12px;
    pointer-events: auto !important;
}


.mega-menu-level3 .nav-menu__sub-dropdown-link {
    font-size: 18px !important;
    display: block;
    padding: 12px 16px;
    color: var(--color-text);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
    pointer-events: auto !important;
    position: relative;
    z-index: 10;
}

.mega-menu-level3 .nav-menu__sub-dropdown-link:hover {
    transform: translateX(5px);
}


/* Animation d'apparition */
.mega-menu-level3 .nav-menu__sub-dropdown {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.mega-menu-level3 .nav-menu__sub-dropdown:not([style*="display: none"]) {
    opacity: 1;
    transform: translateY(0);
}
 
 /* ------------------------------
  * 5. COMPONENTS
  * Styles pour les composants spécifiques
  * ------------------------------ */
 
  /* FAQ et Accordéons */
/* 
 * Styles pour la section FAQ avec accordéon
 * Mise à jour selon les maquettes fournies
 */

/* ======== STRUCTURE DE BASE ======== */
.faq-section {
    padding: var(--spacing-4xl) 0;
    transition: background-color 0.3s ease;
}

/* Structure de base pour la colonne de gauche */
.faq-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.faq-left h1,
.faq-left h2,
.faq-left h3,
.faq-left h4,
.faq-left h5,
.faq-left h6 {
    margin-top: 0;
    margin-bottom: 40px;
}

/* Structure de base pour la colonne de droite */
.faq-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ======== ACCORDÉON ======== */

/* Élément d'accordéon */
.faq-item {
    background-color: white;
    border-radius: 16px;
    border: 1px solid var(--color-border-default);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

/* En-tête de l'accordéon (visible) */
.faq-header {
    padding: 24px 32px;
    display: flex;
    justify-content: space-between;
    align-items: normal;
    cursor: pointer;
    position: relative;
}

.faq-header h4 {
    margin-bottom: 0;
}

/* Bouton toggle pour ouvrir/fermer */
.faq-toggle {
    position: relative;
    background: none;
    border: none;
    font-size: 24px;
    color: currentColor;
    cursor: pointer;
    width: 24px;
    height: 24px;
    padding: 0;
    margin-left: 16px;
    flex-shrink: 0;
}

/* Icônes plus et minus */
.icon-plus, .icon-minus {
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Minus cachée par défaut */
.icon-minus {
    opacity: 0;
    transform: rotate(-90deg);
}

/* Animation des icônes lorsque actif */
.faq-item.active .icon-plus {
    opacity: 0;
    transform: rotate(90deg);
}

.faq-item.active .icon-minus {
    opacity: 1;
    transform: rotate(0);
}

/* Contenu de l'accordéon (caché par défaut) */
.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

/* Contenu visible lorsque actif */
.faq-item.active .faq-content {
    max-height: 1000px;
    padding: 0 32px 24px;
    animation: fadeIn 0.3s ease-in-out;
}

/* Style du texte dans le contenu */
.faq-content .body-200 {
    margin: 0;
}

/* ======== BLOC DE CONTACT ======== */

/* Bloc de contact (bas gauche) */
.faq-contact {
    margin-top: auto;
}

.faq-contact-icon {
    width: 48px;
    height: 48px;
    background-color: var(--primary-100);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

/* SVG dans l'icône */
.faq-contact-icon svg {
    color: var(--secondary-800);
    width: 32px;
    height: 32px;
}

/* Titre du bloc contact */
.faq-contact h4 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 500;
}

/* Texte du bloc contact */
.faq-contact p {
    margin: 0;
    color: var(--color-text-inverted-muted);
}

/* Lien dans le bloc contact */
.faq-contact-link {
    color: var(--primary-300);
    text-decoration: underline;
    font-weight: 500;
    transition: color 0.2s ease;
}

.faq-contact-link:hover {
    color: var(--primary-100);
}

/* ======== VARIANTES DE COULEUR ======== */

/* Variante Light (claire) */
.section--light {
    --faq-section-bg: var(--color-white);
    --faq-section-text-color: var(--color-text-default);
    --faq-title-color: var(--color-text-default);
    --faq-item-color: var(--color-text-default);
    --faq-contact-p-color: var(--color-text-muted);
    --faq-contact-link-color: var(--secondary-800);
    --faq-contact-link-hover-color: var(--secondary-700);
}

/* Variante Primary */
.section--primary {
    --faq-section-bg: var(--primary);
    --faq-section-text-color: var(--color-text-default);
    --faq-title-color: var(--color-text-default);
    --faq-item-color: var(--color-text-default);
    --faq-contact-p-color: var(--color-text-muted);
    --faq-contact-link-color: var(--secondary-800);
    --faq-contact-link-hover-color: var(--secondary-700);
}

/* Variante Secondary */
.section--secondary {
    --faq-section-bg: var(--secondary);
    --faq-section-text-color: var(--color-white);
    --faq-title-color: var(--color-white);
    --faq-item-color: var(--color-text-default);
    --faq-contact-p-color: var(--color-text-inverted-muted);
    --faq-contact-link-color: var(--primary-300);
    --faq-contact-link-hover-color: var(--primary-100);
}

/* Variante Tertiary */
.section--tertiary {
    --faq-section-bg: var(--tertiary);
    --faq-section-text-color: var(--color-text-default);
    --faq-title-color: var(--color-text-default);
    --faq-item-color: var(--color-text-default);
    --faq-contact-p-color: var(--color-text-muted);
    --faq-contact-link-color: var(--primary-700);
    --faq-contact-link-hover-color: var(--primary-600);
}

/* Variante Dark */
.section--dark {
    --faq-section-bg: var(--color-dark);
    --faq-section-text-color: var(--color-white);
    --faq-title-color: var(--color-white);
    --faq-item-color: var(--color-text-default);
    --faq-contact-p-color: var(--color-text-inverted-muted);
    --faq-contact-link-color: var(--primary-300);
    --faq-contact-link-hover-color: var(--primary-100);
}

.faq-section{
    background-color: var(--faq-section-bg);
    color: var(--faq-section-text-color);
}

.faq-left h3, .faq-left h4 {
    color: var(--color-headings-default);
}

.faq-toggle, .faq-item h4 , .faq-item p {
    color: var(--faq-item-color);
}

.faq-contact p {
    color: var(--faq-contact-p-color);
}

.faq-contact-link {
    color: var(--faq-contact-link-color);
}

.faq-contact-link:hover {
    color: var(--faq-contact-link-hover-color);
}


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

/* ======== ANIMATIONS ======== */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ======== MEDIA QUERIES ======== */

@media (max-width: 992px) {
  .faq-left{
   padding-bottom:50px; 
  }
}

/* Tablettes et mobiles larges */
@media (max-width: 768px) {
    .faq-left h1,
    .faq-left h2,
    .faq-left h3,
    .faq-left h4,
    .faq-left h5,
    .faq-left h6 {
        margin-bottom: 30px;
    }
    
    .faq-header {
        padding: 20px 24px;
    }
    
    .faq-item.active .faq-content {
        padding: 0 24px 20px;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .faq-section {
        padding: 50px 0;
    }
    
    .faq-left h1,
    .faq-left h2,
    .faq-left h3,
    .faq-left h4,
    .faq-left h5,
    .faq-left h6 {
        margin-bottom: 24px;
    }
    
    .faq-header {
        padding: 16px 20px;
    }
    
    .faq-item.active .faq-content {
        padding: 0 20px 16px;
    }
}

/* Sections d'appel à l'action (CTA) */
/**
 * Styles pour la Section Call-to-Action (CTA)
 */

/* Base de la section CTA avec les variables unifiées */
.cta-section {
    padding-top: var(--section-padding-y, 4rem);
    padding-bottom: var(--section-padding-y, 4rem);
    text-align: center;
    transition: background-color var(--transition-duration-default, 0.2s) var(--transition-timing-default, ease-in-out);
}

.cta-content {
    max-width: 768px; /* Limiter la largeur du texte pour une meilleure lisibilité */
    margin-left: auto;
    margin-right: auto;
}

/* Ajout de l'espacement sous le titre spécifiquement pour la section CTA */
.cta-section .title-200 {
    margin-bottom: var(--space-6, 40px);
}

.cta-button-wrapper {
    /* Peut contenir des styles spécifiques si besoin (ex: marges pour plusieurs boutons) */
}



/* -- Responsive -- */
@media (max-width: var(--breakpoint-md, 768px)) {
    /* La taille responsive est gérée par .title-200 globalement */

    .cta-section {
        padding-top: calc(var(--section-padding-y, 4rem) * 0.75);
        padding-bottom: calc(var(--section-padding-y, 4rem) * 0.75);
    }
}
/**
 * Styles spécifiques pour la galerie d'images dans la section CTA (version horizontale scrollable)
 */

/* Wrapper pour contrôler le débordement et le scroll */
.cta-gallery-wrapper {
    width: 100%;
    overflow-x: auto; /* Active le scroll horizontal si nécessaire */
    padding: var(--space-9, 4rem) 0; /* Espace vertical, mais pas horizontal */
    /* Optionnel: Cacher la barre de scroll */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
/* Cacher la barre de scroll pour Chrome, Safari, Opera */
.cta-gallery-wrapper::-webkit-scrollbar {
    display: none;
}

/* Conteneur interne des images */
.cta-gallery {
    display: flex;
    flex-wrap: nowrap; /* Empêche le retour à la ligne */
    justify-content: flex-start; /* Garder flex-start pour l'animation */
    gap: var(--space-5, 1.5rem); /* Espace entre les images */
    padding-left: 10px; 
    padding-right: 10px;
    margin:auto;
}

.cta-gallery__image {
    max-width: none; /* Enlève la limitation précédente */
    height: 200px; /* Hauteur fixe pour l'uniformité */
    width: 300px; /* Largeur fixe pour l'uniformité */
    border-radius: var(--border-radius-lg, 16px);
    object-fit: cover;
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06));
    flex-shrink: 0; /* Empêche les images de rétrécir */
}

/* Suppression des anciennes media queries pour flex-basis */

.cta-gallery__image {
    max-width: 100%; /* Assure que les images ne débordent pas */
    height: auto; /* Maintient le ratio de l'image */
    border-radius: var(--border-radius-lg, 16px); /* Arrondi des images (variable globale) */
    object-fit: cover; /* Assure que l'image couvre bien l'espace si dimensions fixes */
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)); /* Ombre légère (variable globale) */

    /* Optionnel: définir une largeur fixe ou flexible */
    flex-basis: calc(20% - var(--space-5, 1.5rem) * 4 / 5); /* Exemple pour 5 images par ligne, ajuster selon besoin */
    flex-grow: 0; /* Empêche les images de grandir pour remplir l'espace */
    flex-shrink: 0; /* Empêche les images de rétrécir excessivement */
}

/* --- Animation pour défilement infini --- */
@keyframes scrollInfinite {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Déplace de la moitié de la largeur totale (contenu original + clone) */
        transform: translateX(-50%); 
    }
}

/* Classe pour activer l'animation */
.cta-gallery--infinite {
    /* La durée dépend du nombre d'images et de la vitesse souhaitée */
    /* Exemple : 7 images * 300px + 6 gaps * 24px = 2100 + 144 = 2244px par set */
    /* Pour une vitesse de ~50px/sec -> 2244px * 2 / 50px/sec = ~90 sec */
    animation: scrollInfinite 60s linear infinite;
}

/* Pause de l'animation au survol du wrapper */
.cta-gallery-wrapper:hover .cta-gallery--infinite {
    animation-play-state: paused;
}

/* --- Responsive pour la galerie --- */
@media (max-width: var(--breakpoint-lg, 1024px)) {
    .cta-gallery__image {
        /* 3 images par ligne sur tablette */
        flex-basis: calc(33.333% - var(--space-5, 1.5rem) * 2 / 3);
    }

    .cta-gallery--infinite {
        animation: scrollInfinite 20s linear infinite;
    }

}

@media (max-width: var(--breakpoint-sm, 640px)) {
    .cta-gallery {
        gap: var(--space-4, 1rem);
        margin-top: var(--space-8, 3rem);
    }
    .cta-gallery__image {
        /* 2 images par ligne sur mobile */
        flex-basis: calc(50% - var(--space-4, 1rem) * 1 / 2);
        border-radius: var(--border-radius-md, 8px);
    }


}
/**
 * Styles pour la Section CTA Bannière
 */

 .cta-banner-section {
    /* Rôle structurel, peut avoir des marges externes */
    margin-bottom: var(--space-6, 2rem); /* Exemple d'espacement entre sections */
}

/* La div intérieure porte les styles visuels */
.cta-banner-inner {
    border-radius: var(--border-radius-xl, 24px); 
    padding: var(--space-9, 3rem); /* Padding ajusté */
    transition: background-color var(--transition-duration-default, 0.2s) var(--transition-timing-default, ease-in-out);
    /* Le background-color est défini par les variantes */
}

/* Utilisation de Flexbox pour aligner texte et bouton */
.cta-banner-content {
    display: flex;
    align-items: center; /* Alignement vertical au centre */
    justify-content: space-between; /* Espace maximal entre texte et bouton */
    gap: var(--space-6, 2rem); /* Espace entre texte et bouton si l'espace manque */
    flex-wrap: wrap; /* Permet au bouton de passer en dessous sur petit écran */
    flex-shrink: 0; /* Empêche le bouton de rétrécir */
}

.cta-banner-text {
    flex: 1; /* Permet au texte de prendre l'espace disponible */
    min-width: 250px; /* Empêche le texte de devenir trop écrasé */
}


.cta-banner-subtitle {
    /* La couleur sera définie par la variante */
    margin: 0;
    /* max-width: 450px; /* Suppression de la limite de largeur */
}

.cta-banner-action {
    flex-shrink: 0; /* Empêche le bouton de rétrécir */
}



/* -- Variante Light -- */
.cta-banner-inner.cta-banner--light {
    background-color: var(--color-light);
}

.cta-banner-inner.cta-banner--light .cta-banner-text .title-200,
.cta-banner-inner.cta-banner--light .cta-banner-text .cta-banner-subtitle {
    color: var(--color-text-default); /* Texte foncé sur fond clair */
}


/* -- Variante Primaire (Vert Clair) -- */
.cta-banner-inner.cta-banner--primary {
    background-color: var(--primary);
}

.cta-banner-inner.cta-banner--primary .cta-banner-text .title-200,
.cta-banner-inner.cta-banner--primary .cta-banner-text .cta-banner-subtitle {
    color: var(--color-text-default); /* Texte foncé sur fond clair */
}
/* Bouton: btn-primary par défaut */



/* -- Variante Secondary -- */
.cta-banner-inner.cta-banner--secondary {
    background-color: var(--secondary);
}

.cta-banner-inner.cta-banner--secondary .cta-banner-text .title-200 {
    color: var(--color-text-inverted, var(--white));
}

.cta-banner-inner.cta-banner--secondary .cta-banner-text .cta-banner-subtitle {
    color: var(--color-text-inverted-muted, rgba(255, 255, 255, 0.8));
}
/* Bouton: btn-secondary recommandé */


/* -- Variante tertiary -- */
.cta-banner-inner.cta-banner--tertiary {
    background-color: var(--tertiary);
}

.cta-banner-inner.cta-banner--tertiary .cta-banner-text .title-200,
.cta-banner-inner.cta-banner--tertiary .cta-banner-text .cta-banner-subtitle {
    color: var(--color-text-default, var(--gray-900));
}
/* Bouton: btn-primary par défaut */


/* -- Variante Dark -- */
.cta-banner-inner.cta-banner--dark {
    background-color: var(--color-dark);
}

.cta-banner-inner.cta-banner--dark .cta-banner-text .title-200,
.cta-banner-inner.cta-banner--dark .cta-banner-text .cta-banner-subtitle {
    color: var(--color-text-inverted);
}
/* Bouton: btn-primary par défaut */


/* --- Responsive --- */
@media (max-width: 640px) {
    .cta-banner-content {
        flex-direction: column; /* Empiler texte et bouton */
        align-items: flex-start; /* Aligner à gauche */
        text-align: left; /* S'assurer que le texte est aligné à gauche */
    }

    .cta-banner-action {
        margin-top: var(--space-5, 1.5rem);
        width: 100%; /* Optionnel: bouton pleine largeur */
    }
    .cta-banner-action .btn {
         width: 100%; /* Optionnel: bouton pleine largeur */
    }
    
    /* Ajuster le padding de l'inner sur mobile */
    .cta-banner-inner {
        padding: var(--space-5, 1.5rem); /* Padding ajusté pour mobile */
    }
}
/*------------------------------------
    CTA Section V2
    Section CTA basée sur la structure newsletter avec image et bouton
    Répartition 40/60 des colonnes
------------------------------------*/

/* Styles spécifiques pour les boutons CTA dans les sections newsletter */
.newsletter-section .cta-button-wrapper {
  display: flex;
  align-items: center;
  margin-top: 0.5rem;
}

/* ================================
   EFFET DE COURBE SUR L'IMAGE
   ================================ */

/* Effet de courbe diagonal sur l'image - Desktop uniquement */
@media (min-width: 768px) {
  .newsletter-section__image.left.cta-v2-image {
    clip-path: circle(95% at 0 90%);
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .newsletter-section__image.right.cta-v2-image {
    clip-path: circle(95% at 100% 90%);
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  
  .newsletter-section__image-wrapper {
    overflow: hidden;
    position: relative;
  }
  
  /* Assure que l'image remplit complètement son conteneur */
  .newsletter-section__image-container {
    min-height: 400px;
  }
}

/* Responsive */
@media (max-width: 767px) {
  .newsletter-section {
    padding: 0;
  }
  
  .newsletter-section .cta-button-wrapper {
    justify-content: center;
    margin-top: 1rem;
  }
  
  /* Sur mobile, pas d'effet de courbe - image normale */
  .newsletter-section__image {
    clip-path: none;
    border-radius:0 !important;
  }
}

/* Ajustements spécifiques pour la répartition 40/60 dans toutes les variantes */
.newsletter-section__grid--fullwidth {
  gap: 0;
}

.newsletter-section__grid--fullwidth .newsletter-section__image-container {
  width: 40%;
  flex: 0 0 40%;
  height: auto;
}

.newsletter-section__grid--fullwidth .newsletter-section__content {
  width: 60%;
  flex: 0 0 60%;
  max-width: none;
  padding: 3rem 4rem;
}

/* Responsive pour les colonnes */
@media (max-width: 767px) {
  .newsletter-section__grid--fullwidth .newsletter-section__image-container,
  .newsletter-section__grid--fullwidth .newsletter-section__content {
    width: 100%;
    flex: 0 0 100%;
  }
  
  .newsletter-section__grid--fullwidth .newsletter-section__content {
    padding: 2rem;
  }
}

/* Styles pour les textes dans les sections CTA */
.newsletter-section .newsletter-section__title {
  margin-bottom: 1rem;
}

.newsletter-section .newsletter-section__description {
  margin-bottom: 1.5rem;
}

/* ================================
   BACKGROUND IMAGE STYLES - CTA V2
   ================================ */

/* Conteneur avec background image */
.newsletter-section__inner.has-background-image {
  position: relative;
  background-attachment: scroll;
}

/* Overlay pour améliorer la lisibilité */
.newsletter-section__inner .background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
}

/* Contenu au-dessus de l'overlay */
.newsletter-section__inner.has-background-image > *:not(.background-overlay) {
  position: relative;
  z-index: 2;
}

/* Variantes d'overlay - Sombre */
.newsletter-section__inner .background-overlay--dark-light {
  background-color: rgba(0, 0, 0, 0.2);
}

.newsletter-section__inner .background-overlay--dark-medium {
  background-color: rgba(0, 0, 0, 0.4);
}

.newsletter-section__inner .background-overlay--dark-strong {
  background-color: rgba(0, 0, 0, 0.6);
}

/* Variantes d'overlay - Primary */
.newsletter-section__inner .background-overlay--primary-light {
  background-color: var(--primary-200);
  opacity: 0.3;
}

.newsletter-section__inner .background-overlay--primary-medium {
  background-color: var(--primary-400);
  opacity: 0.5;
}

/* Variantes d'overlay - Secondary */
.newsletter-section__inner .background-overlay--secondary-light {
  background-color: var(--secondary-200);
  opacity: 0.3;
}

.newsletter-section__inner .background-overlay--secondary-medium {
  background-color: var(--secondary-400);
  opacity: 0.5;
}

/* Optimisations mobiles */
@media (max-width: 768px) {
  .newsletter-section__inner.has-background-image {
    background-attachment: scroll !important;
  }
}

/* Optimisation pour les écrans à haute densité */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .newsletter-section__inner.has-background-image {
    /* Améliore le rendu sur les écrans Retina */
    background-size: cover;
    image-rendering: -webkit-optimize-contrast;
  }
}
/* Section Ressources */
.resources-section {
    padding: 80px 0;
    background-color: #fff;
}

.resources-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.resource-card {
    display: flex;
    border: 1px solid #25282a;
    border-radius: 5px;
    background-color: #fff;
    overflow: hidden;
    min-height: 260px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}


@keyframes shine {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.resource-card:hover {
    background-color: #25282a;
    transform: translateY(-5px);
}

.resource-content {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}



.resource-card h3 {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 30px;
    line-height: 1.4;
    color: #25282a;
    transition: color 0.3s ease;
}

.resource-card:hover h3 {
    color: #fff;
}

.resource-button {
    display: inline-block;
    padding: 12px 30px;
    background-color: #25282a;
    color: #fff !important;
    border: 1px solid #25282a;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    align-self: flex-start;
    width: fit-content;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.resource-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg, 
        transparent, 
        rgba(255, 255, 255, 0.4), 
        transparent
    );
    z-index: 1;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.resource-button:hover::after {
    animation: shine 0.8s forwards;
    opacity: 1;
}

.resource-card:hover .resource-button {
    background-color: #fff;
    color: #25282a !important;
    border-color: #fff;
}

.resource-image {
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.resource-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.resource-card:hover .resource-image img {
    transform: scale(1.05);
}

/* Responsive pour la section ressources */
@media (max-width: 992px) {
    .resources-grid {
        padding: 0 20px;
    }
}

@media (max-width: 768px) {
    .resources-grid {
        grid-template-columns: 1fr;
    }
    
    .resource-card {
        flex-direction: column;
    }
    
    .resource-content {
        order: 2;
        padding: 30px;
    }
    
    .resource-image {
        order: 1;
        width: 100%;
        height: 200px;
    }
}

/* Composants Career */
:root {
    --career-card-highlight-color: var(--primary-300); /* Default highlight */
    --career-card-bg: var(--color-white);
    --career-card-shadow: var(--shadow-sm); /* Ajustez selon votre système de design */
    --career-card-border-radius: var(--rounded-lg, 16px);
    --career-grid-gap: var(--space-6, 2rem);
    --career-card-padding: var(--space-6, 2rem);
}

.career-section {
    /* Styles de base pour toutes les variantes */
    background-color: var(--section-bg);
    color: var(--section-text-color);
    padding-top: var(--space-10, 5rem); /* Ajout padding haut */
    padding-bottom: var(--space-10, 5rem); /* Ajout padding bas */
}

/* --- Variantes de couleur --- */
.career--light {
    --section-bg: var(--color-white);
    --section-text-color: var(--color-text-default);
    --section-secondary-text-color: var(--color-text-muted);
    --career-card-highlight-color: var(--primary-300);
    --career-card-bg: var(--color-white);
    --career-card-text-color: var(--color-text-default);
    --career-card-link-color: var(--secondary-800);
    --career-card-badge-border-color: var(--color-border-default);
    --career-card-badge-text-color: var(--color-text-default);
}

.career--primary {
    --section-bg: var(--primary);
    --section-text-color: var(--color-text-default);
    --section-secondary-text-color: var(--color-text-muted);
    --career-card-highlight-color: var(--tertiary);
    --career-card-bg: var(--color-white);
    --career-card-text-color: var(--color-text-default);
    --career-card-link-color: var(--secondary-800);
    --career-card-badge-border-color: var(--color-border-default);
    --career-card-badge-text-color: var(--color-text-default);
}

.career--secondary {
    --section-bg: var(--secondary);
    --section-text-color: var(--color-white);
    --section-secondary-text-color: var(--color-text-inverted-muted);
    --career-card-highlight-color: var(--primary);
    --career-card-bg: var(--primary-100);
    --career-card-text-color: var(--primary-900);
    --career-card-link-color: var(--secondary-800);
    --career-card-badge-border-color: var(--primary);
    --career-card-badge-text-color: var(--primary-900);
}

.career--tertiary {
    --section-bg: var(--tertiary);
    --section-text-color: var(--color-text-default);
    --section-secondary-text-color: var(--color-text-muted);
    --career-card-highlight-color: var(--primary-300);
    --career-card-bg: var(--color-white);
    --career-card-text-color: var(--color-text-default);
    --career-card-link-color: var(--secondary-800);
    --career-card-badge-border-color: var(--color-border-default);
    --career-card-badge-text-color: var(--color-text-default);
}

.career--dark {
    --section-bg: var(--color-dark);
    --section-text-color: var(--color-white);
    --section-secondary-text-color: var(--color-text-inverted-muted);
    --career-card-highlight-color: var(--primary-300);
    --career-card-bg: var(--primary-100);
    --career-card-text-color: var(--primary-900);
    --career-card-link-color: var(--secondary-800);
    --career-card-badge-border-color: var(--primary-300);
    --career-card-badge-text-color: var(--primary-900);
}

/* Appliquer les couleurs de la section */
.career-section .text-color-secondary {
     color: var(--section-secondary-text-color);
}

/* Variables de couleur pour les titres selon les variantes */
.career--primary .title-display,
.career--primary .title-200,
.career--tertiary .title-display,
.career--tertiary .title-200,
.career--light .title-display,
.career--light .title-200 {
     color: var(--color-headings-default);
}

.career--secondary .title-display,
.career--secondary .title-200,
.career--dark .title-display,
.career--dark .title-200 {
     color: var(--section-text-on-dark);
}

/* Variables de couleur pour les sur-titres */
.career--primary .section__overtitle {
     color: var(--color-white);
}


/* --- Header --- */
.career-header {
    /* Vous pouvez ajouter un max-width ici si nécessaire */
    max-width: 600px; /* Example max-width */
    flex-shrink: 1; /* Allow header to shrink if needed */
}

/* --- New Top Layout Wrapper --- */
.career-section__top-layout {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens before breakpoint */
    justify-content: space-between;
    align-items: flex-end; /* Align items to the top */
    gap: var(--space-5, 1.5rem); /* Gap between header and filters */
}

/* --- Grille des offres --- */
.career-jobs-grid {
    display: grid;
    gap: var(--career-grid-gap);
    /* 3 colonnes max, s'adapte automatiquement */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

/* --- Carte d'offre --- */
.job-card {
    background-color: var(--career-card-bg);
    color: var(--career-card-text-color);
    border-radius: var(--career-card-border-radius);
    padding: var(--career-card-padding);
    box-shadow: var(--career-card-shadow);
    border: 1px solid color-mix(in srgb, var(--secondary-800) 10%, transparent);
    position: relative;
    overflow: hidden; /* Pour que le highlight ne dépasse pas */
    display: flex;
    flex-direction: column;
}

.job-card__highlight {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: var(--career-card-highlight-color);
}

.job-card h3 {
     color: inherit; /* Hérite de la couleur de la carte */
     /* Ajustez la taille/poids si nécessaire via les classes typography */
}

.job-card__info {
    display: flex;
    flex-wrap: wrap; /* Si manque de place */
    gap: var(--space-2, 0.5rem);
    align-items: center;
}

/* Style spécifique pour les badges dans ce contexte */
.job-card .badge--outline {
     border-color: var(--career-card-badge-border-color);
     color: var(--career-card-badge-text-color);
     background-color: transparent; /* Assurez-vous qu'il n'y a pas de fond hérité */
}
/* Assurez-vous que l'icône a la bonne couleur */
.job-card .badge--outline .icon {
    color: var(--career-card-badge-text-color);
}


.job-card__apply-link {
    text-decoration: none;
    margin-top: auto; /* Pousse le lien vers le bas */
    padding-top: var(--space-3, 0.75rem); /* Espace avant le lien */
    color: var(--career-card-link-color);
    font-weight: var(--font-weight-medium, 500);
    transition: color 0.2s ease-out; /* Transition pour la couleur */
    display: inline-flex; /* Pour aligner l'icône et permettre la transition */
    align-items: center;
    gap: var(--space-1, 0.25rem); /* Petit espace entre texte et icône */
}

.job-card__apply-link:hover,
.job-card__apply-link:focus {
    color: var(--color-text-link-hover);
    outline: none;
}

/* Specific hover color for dark theme */
.career--dark .job-card__apply-link:hover,
.career--dark .job-card__apply-link:focus {
    color: var(--color-text-link-hover);
}

.job-card__apply-link .icon {
     color: currentColor; /* Hérite de la couleur du lien (y compris au hover) */
     display: inline-block; /* Permet la transformation */
     transition: transform 0.2s ease-out; /* Transition pour l'animation */
}

.job-card__apply-link:hover .icon,
.job-card__apply-link:focus .icon {
    /* transform: translateX(4px); /* Ancienne transformation simple */
    animation: arrowTeleport 0.6s ease-out forwards; /* Appliquer l'animation */
}

/* Définition de l'animation */
@keyframes arrowTeleport {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  40% {
    transform: translate(8px, -8px); /* Montée diagonale */
    opacity: 0;
  }
  60% {
     /* Phase de téléportation invisible */
    transform: translate(-8px, 8px);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0); /* Retour à la position initiale */
    opacity: 1;
  }
}

/* --- Responsive (si nécessaire, la grille auto-fit gère déjà beaucoup) --- */
@media (max-width: 640px) {
    .job-card {
         padding: var(--space-4, 1rem); /* Moins de padding sur mobile */
    }
}



/* --- Filtres --- */
.career-filters {
    display: flex;
    flex-wrap: wrap; /* Pour le responsive */
    gap: var(--space-4, 1rem);
    /* justify-content: flex-end; /* Removed, handled by parent */
    /* margin-bottom: var(--space-7, 2.5rem); /* Removed, margin is on parent */
    flex-shrink: 0; /* Prevent filters from shrinking */
}

.career-filter {
    flex-grow: 0;
    flex-shrink: 0;
    width: auto; /* Largeur par défaut */
    min-width: 240px; /* Largeur minimale */
}

/* Style du sélecteur */
.career-filter-select {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--color-border-default);
    background-color: var(--color-white);
    color: var(--color-text-default);
    font-size: 1rem;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.25em 1.25em;
    cursor: pointer;
    transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
}



/* Styles de la flèche pour les variantes */
.career--light .career-filter-select,
.career--tertiary .career-filter-select {
    /* Flèche gris foncé sur fond clair */
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%234a5568'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd' /%3E%3C/svg%3E");
     border-color: var(--career-card-badge-border-color);
     background-color: var(--career-card-bg);
     color: var(--career-card-text-color);
}

.career--dark .career-filter-select, .career--secondary .career-filter-select {
     /* Flèche blanche sur fond sombre/clair */
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23ffffff'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd' /%3E%3C/svg%3E");
     border-color: var(--primary-600);
     background-color: var(--secondary-800);
     color: var(--color-white);
}

.career-filter-select:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
     border-color: var(--primary-300);
    box-shadow: 0 0 0 2px var(--section-bg, white), 0 0 0 4px var(--primary-300); /* Style de focus */
}

.career--dark .career-filter-select:focus, .career--secondary .career-filter-select:focus {
     box-shadow: 0 0 0 2px var(--section-bg), 0 0 0 4px var(--color-white); /* Style de focus pour dark */
}

/* --- Responsive pour les filtres --- */
@media (max-width:1024px) { /* Adjust breakpoint if needed */
    .career-section__top-layout {
        flex-direction: column;
        align-items: stretch; /* Make items full width */
        gap: var(--space-6, 2rem); /* Adjust gap for vertical layout */
    }
    .career-header {
        max-width: none; /* Allow header full width */
    }
    .career-filters {
        justify-content: flex-start; /* Align filters left on mobile */
         /* Keep margin-bottom if needed, otherwise handled by parent gap */
    }
}

/* Keep smaller breakpoint adjustments for filters if needed */
@media (max-width: 768px) {
    .career-filters {
        display: inline-grid !important;
        justify-content: flex-start; /* Aligner à gauche sur mobile */
    }
    .career-filter {
        min-width: 150px; /* Réduire largeur min */
        flex-basis: calc(50% - var(--space-2)); /* Env. 2 par ligne */
    }
}
@media (max-width: 640px) {
     .career-filter {
        flex-basis: 100%; /* 1 par ligne */
    }
}

/* --- Job Card Hidden State --- */
.job-card.is-hidden {
    display: none;
}
/* css/components/career-avatars.css */

/* Base styles for the section */
.career-section-avatars {
    /* Variables pour les couleurs */
    --career-section-bg: var(--color-white);
    --career-text-color: var(--color-text-default);
    --career-secondary-text-color: var(--color-text-muted);

    /* Variables pour les cartes - Thème Clair */
    --career-card-bg-color: var(--color-white); 
    --career-card-text-color: var(--color-text-default);
    --career-card-link-color: var(--secondary-800);
    --career-card-link-hover-color: var(--primary-300);

    /* Variables pour les badges - Thème Clair */
    --career-badge-bg-color: var(--color-border-subtle);
    --career-badge-text-color: var(--color-text-muted);

    --career-avatar-shadow: var(--shadow-sm);

    background-color: var(--career-section-bg);
    color: var(--career-text-color);
    overflow: hidden; /* Pour contenir les avatars en position absolue */
    padding: 4rem 0;
    position: relative;
}

/* Color Variants */
.career-section-avatars.career--light {
    --career-badge-bg-color: var(--primary-100);
    --career-badge-text-color: var(--primary-800);
}

.career-section-avatars.career--primary {
    --career-section-bg: var(--primary);
    --career-text-color: var(--color-text-default);
    --career-secondary-text-color: var(--color-text-muted);
}

.career-section-avatars.career--secondary {
     --career-section-bg: var(--secondary);
     --career-text-color: var(--color-white); 
     --career-secondary-text-color: var(--color-text-inverted-muted);

     --career-card-bg-color: var(--primary-300);
     --career-card-text-color: var(--color-text-default);
     --career-card-link-color: var(--secondary-800);
     --career-card-link-hover-color: var(--color-text-default);

     --career-badge-bg-color: var(--primary-100);
     --career-badge-text-color: var(--primary-800);

     --career-avatar-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.15);
}

.career-section-avatars.career--tertiary {
    --career-section-bg: var(--tertiary);
    --career-card-bg-color: var(--color-white);
    --career-badge-bg-color: var(--primary-100);
    --career-badge-text-color: var(--primary-800);
}

.career-section-avatars.career--dark {
    --career-section-bg: var(--color-dark);
    --career-text-color: var(--color-white);
    --career-secondary-text-color: var(--color-text-inverted-muted);

    --career-badge-bg-color: var(--primary-100);
    --career-badge-text-color: var(--primary-800);
}


/* Header avec Avatars */
.career-header-avatars {
    position: relative;
    padding-top: 100px;
    padding-bottom: 40px;
    text-align: center;
}

/* Contenu textuel dans le header */
.career-header-avatars__content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 650px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Style pour les avatars */
.career-avatar {
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: var(--career-avatar-shadow);
    border: 3px solid var(--career-section-bg);
    z-index: 1;
}

.career-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Positionnement précis des avatars selon la maquette - ajusté pour éviter la zone de texte */
.career-avatar.avatar--1 { 
    width: 72px; height: 72px; 
    top: 40px; left: 45%;
    transform: translateX(-412px);
}
.career-avatar.avatar--2 { 
    width: 64px; height: 64px; 
    top: 0px; left: 50%;
    transform: translateX(-64px);
}
.career-avatar.avatar--3 { 
    width: 72px; height: 72px; 
    top: 180px; left: 50%;
    transform: translateX(-609px);
}
.career-avatar.avatar--4 { 
    width: 72px; height: 72px; 
    top: 180px; left: 50%;
    transform: translateX(397px);
}
.career-avatar.avatar--5 { 
    width: 64px; height: 64px; 
    top: 30px; left: 50%;
    transform: translateX(504px);
}

/* Variables de couleur pour les titres selon les variantes */
.career-section-avatars.career--primary .title-display,
.career-section-avatars.career--primary .title-200,
.career-section-avatars.career--tertiary .title-display,
.career-section-avatars.career--tertiary .title-200,
.career-section-avatars.career--light .title-display,
.career-section-avatars.career--light .title-200 {
    color: var(--color-headings-default);
    margin-bottom: 0.75rem;
}

.career-section-avatars.career--secondary .title-display,
.career-section-avatars.career--secondary .title-200,
.career-section-avatars.career--dark .title-display,
.career-section-avatars.career--dark .title-200 {
    color: var(--section-text-on-dark);
    margin-bottom: 0.75rem;
}

/* Variables de couleur pour les sur-titres */
.career-section-avatars.career--primary .section__overtitle {
    color: var(--color-white);
}

.career-section-avatars .title-300 {
     color: var(--career-card-text-color);
     margin-bottom: 1rem;
}

.career-section-avatars .text-color-secondary {
    color: var(--career-secondary-text-color);
}

/* Conteneur central pour les offres */
.career-jobs-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Titres de départements */
.career-jobs-container h3 {
    margin-bottom: 1.5rem;
    color: var(--career-text-color);
}

/* Groupe de cartes par département */
.career-jobs-cards {
    display: grid;
    gap: 1rem;
    margin-bottom: 3rem;
}

/* --- Job Card Colored --- */
.job-card-colored {
    border: 1px solid color-mix(in srgb, var(--secondary-800) 10%, transparent);
    background-color: var(--career-card-bg-color);
    color: var(--career-card-text-color);
    padding: 1.25rem 1.5rem;
    border-radius: 16px;
    box-shadow: var(--career-avatar-shadow);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Header de la carte */
.job-card-colored__header {
    display: flex;
    align-items: baseline;
    width: 100%;
    justify-content: space-between;
    padding-right: 0;
}

/* Titre du poste */
.job-card-colored__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--career-card-text-color);
    flex: 1;
    margin: 0;
    padding-right: 0;
}

/* Lien Apply */
.job-card-colored__apply-link {
    margin-left: auto;
    white-space: nowrap;
    color: var(--career-card-link-color);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    transition: color 0.2s ease-out;
    text-decoration: none;
}

.job-card-colored__apply-link:hover {
    color: var(--career-card-link-hover-color);
}

.job-card-colored__apply-link:hover .icon {
    animation: arrowTeleport 0.6s ease-out forwards;
}

.job-card-colored__apply-link .icon {
    transition: transform 0.2s ease-out;
    display: inline-block;
    color: currentColor;
}

/* Animation arrowTeleport (reprise de career.css) */
@keyframes arrowTeleport {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  40% {
    transform: translate(8px, -8px); /* Montée diagonale */
    opacity: 0;
  }
  60% {
    /* Phase de téléportation invisible */
    transform: translate(-8px, 8px);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0); /* Retour à la position initiale */
    opacity: 1;
  }
}

/* Infos (badges) */
.job-card-colored__info {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* Badge */
.badge--colored {
    background-color: var(--career-badge-bg-color);
    color: var(--career-badge-text-color);
    width: fit-content;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.badge--colored .icon {
    color: var(--career-badge-text-color);
    font-size: 1rem;
}

/* Responsive */
@media (max-width: 1400px) {
    .career-avatar.avatar--1 { transform: translateX(-30vw); }
    .career-avatar.avatar--2 { transform: translateX(-5vw); }
    .career-avatar.avatar--3 { display: none; }
    .career-avatar.avatar--4 { transform: translateX(28vw); }
    .career-avatar.avatar--5 { transform: translateX(35vw); }
}

@media (max-width: 1024px) {
    .career-header-avatars {
        padding-top: 30px;
        padding-bottom: 30px;
        display: block; /* Supprime flex-direction: column */
        text-align: center;
    }
    
    /* Conteneur spécifique pour les avatars */
    .career-header-avatars:before {
        content: "";
        display: block;
        height: 70px; /* Espace pour les avatars */
        position: relative;
    }
    
    /* Nouveau style pour les avatars en ligne avec chevauchement */
    .career-avatar {
        position: relative; /* Change static en relative */
        display: inline-block;
        width: 60px; 
        height: 60px;
        margin-right: -20px; /* Crée le chevauchement négatif */
        transform: none !important; /* Annule toutes les transformations précédentes */
        vertical-align: middle;
        top: auto !important; /* Neutralise toutes les positions top */
        left: auto !important; /* Neutralise toutes les positions left */
        margin-top: -85px; /* Place les avatars dans l'espace créé par :before */
    }
    
    /* Groupe d'avatars - assure que tous sont visibles et alignés horizontalement */
    .career-avatar.avatar--1,
    .career-avatar.avatar--2,
    .career-avatar.avatar--3,
    .career-avatar.avatar--4,
    .career-avatar.avatar--5 {
        display: inline-block;
        width: 72px; height: 72px; 
    }
    
    /* Le dernier avatar ne doit pas avoir de marge négative */
    .career-avatar:last-child {
        margin-right: 0;
    }
    
    /* Contenu textuel */
    .career-header-avatars__content {
        width: 100%;
        max-width: 550px;
        margin: 30px auto 0;
        padding: 0 1rem;
        background-color: transparent;
    }
}

@media (max-width: 768px) {
    .career-header-avatars {
        padding-top: 30px;
        padding-bottom: 20px;
    }
    
    .career-avatar {
        width: 48px;
        height: 48px;
        margin-right: -15px; /* Chevauchement légèrement réduit */
    }
    
    .job-card-colored {
        padding: 1rem 1.25rem;
    }
    
    .job-card-colored__header {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
    }
    
    .job-card-colored__title {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .career-avatar.avatar--2 { transform: translateX(-20vw); }
    .career-avatar.avatar--4 { transform: translateX(20vw); }
    
    .job-card-colored__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .job-card-colored__apply-link {
        margin-left: 0;
    }
    
    .job-card-colored__info {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Style pour les filtres */
.career-filters {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.career-filter {
    flex: 0 1 auto;
    min-width: 240px;
    max-width: 300px;
    width: calc(50% - 0.5rem);
}

/* Responsive pour les filtres */
@media (max-width: 640px) {
    .career-filters {
        flex-direction: column;
        align-items: center;
    }
    
    .career-filter {
        width: 100%;
        max-width: 400px;
    }
}

/* Nouvelle section Features */
/*------------------------------------
    Features Section
------------------------------------*/

.features-section {
    /* Styles généraux pour la section, si nécessaire */
}

.features-section__grid {
    /* La grille est gérée par les classes utilitaires .grid, .grid-cols-*, etc. */
    /* Aucun style spécifique nécessaire ici pour l'instant */
}

.feature-item {
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.feature-item__icon-wrapper {
    /* Conteneur pour l'icône, peut aider à l'alignement */
    display: inline-block; /* Pour que le wrapper prenne la taille de l'icône */
}

.feature-item__icon {
    display: inline-flex; /* Utilisation de flex pour centrer l'icône SVG */
    align-items: center;
    justify-content: center;
    width: 56px; /* Taille du carré */
    height: 56px;
    border-radius: var(--rounded-lg); /* Coins arrondis */
    margin-bottom: var(--space-lg); /* Marge en dessous gérée par le wrapper mb-md */
}

/* Styles spécifiques pour chaque icône (fond + couleur svg) */
/* Variante --white (fond de section blanc) */
.features-section--white .feature-item__icon {
    background-color: var(--primary-100); /* Fond vert clair */
}

.features-section--white .feature-item__icon svg {
    fill: var(--primary-600); /* Icône vert foncé */
    width: 24px; 
    height: 24px;
}

.feature-item__title {
    /* Styles pour le titre de l'item */
    /* La taille est gérée par .title-300 */
}

.feature-item__description {
    /* Styles pour la description */
    /* La taille/couleur est gérée par .text-md et .text-color-secondary */
}

.feature-item__link {
    /* Styles pour le lien "Read more" */
    /* Le style de base est géré par .link et .link--arrow */
}


/* --- Variantes de couleur de fond pour la section --- */

/* Styles spécifiques aux éléments sur fond blanc (si nécessaire) */
.features-section--white .section-header .title-display,
.features-section--white .feature-item__title {
    color: var(--content-primary); /* Texte principal */
}
.features-section--white .section-header .text-color-secondary,
.features-section--white .feature-item__description {
    color: var(--content-secondary); /* Texte secondaire */
}
.features-section--white .feature-item__link {
    color: var(--primary-600); /* Couleur du lien par défaut */
    transition: color 0.3s ease;
    font-weight: 600;
    position: relative;
    display: inline-flex;
    align-items: center;
}
.features-section--white .feature-item__link:hover {
    color: var(--primary-700); /* Couleur plus foncée au survol */
}
.features-section--white .feature-item__link:after {
    content: "→";
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
}
.features-section--white .feature-item__link:hover:after {
    transform: translateX(4px);
}

/* Ajoutez ici les styles pour les autres variantes (.features-section--tertiary, etc.) */

/* --- Variante fond tertiary --- */
.features-section.section--tertiary,
.features-section--tertiary {
    background-color: var(--section-bg-tertiary, var(--tertiary-50));
}
.features-section--tertiary .section-header .title-display,
.features-section--tertiary .feature-item__title {
    color: var(--content-primary);
}
.features-section--tertiary .section-header .text-color-secondary,
.features-section--tertiary .feature-item__description {
    color: var(--content-secondary);
}
.features-section--tertiary .feature-item__icon {
    background-color: var(--secondary-100); /* Ajustez si besoin */
}
.features-section--tertiary .feature-item__icon svg {
    fill: var(--secondary-700); /* Ajustez si besoin */
}
.features-section--tertiary .feature-item__link {
    color: var(--secondary-800); /* Vert foncé pour meilleur contraste */
    transition: color 0.3s ease;
    font-weight: 600;
    position: relative;
    display: inline-flex;
    align-items: center;
}
.features-section--tertiary .feature-item__link:hover {
    color: var(--primary-600); /* Vert plus vif au survol */
}
.features-section--tertiary .feature-item__link:after {
    content: "→";
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
}
.features-section--tertiary .feature-item__link:hover:after {
    transform: translateX(4px);
}

/* --- Variante fond vert (primaire) --- */
.features-section--primary {
    background-color: var(--primary-300); /* Couleur lime #BEF264 selon Figma RGB(0.745, 0.949, 0.392) */
}
/* Sur fond primaire, texte sombre */
.features-section--primary .section-header .title-display,
.features-section--primary .feature-item__title {
    color: var(--content-primary); /* Texte noir */
}
.features-section--primary .section-header .text-color-secondary,
.features-section--primary .feature-item__description {
    color: var(--content-primary); /* Texte noir ou légèrement gris */
}
.features-section--primary .feature-item__icon {
    background-color: var(--white); /* Icône sur fond blanc selon Figma */
}
.features-section--primary .feature-item__icon svg {
    fill: var(--secondary-800); /* SVG en vert foncé #022C22 */
}
.features-section--primary .feature-item__link {
    color: var(--secondary-800); /* Lien en vert foncé #022C22 selon Figma */
    transition: color 0.3s ease; 
    font-weight: 600;
    position: relative;
    display: inline-flex;
    align-items: center;
}
.features-section--primary .feature-item__link:hover {
    color: var(--secondary-900); /* Presque noir au survol pour contraste */
}
.features-section--primary .feature-item__link:after {
    content: "→";
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
}
.features-section--primary .feature-item__link:hover:after {
    transform: translateX(4px);
}

/* --- Variante fond vert foncé (dark) --- */
.features-section--dark {
    background-color: var(--secondary-800); /* Vert très foncé #022C22 selon Figma */
}
/* Sur fond foncé, utiliser du texte clair */
.features-section--dark .section-header .title-display,
.features-section--dark .feature-item__title {
    color: var(--white);
}
.features-section--dark .section-header .text-color-secondary,
.features-section--dark .feature-item__description {
    color: rgba(255, 255, 255, 0.8); /* Blanc 80% d'opacité selon Figma */
}
.features-section--dark .feature-item__icon {
    background-color: var(--primary-300); /* #BEF264 - Vert lime selon Figma */
}
.features-section--dark .feature-item__icon svg {
    fill: var(--secondary-800); /* #022C22 - Vert foncé selon Figma */
}
.features-section--dark .feature-item__link {
    color: var(--white); /* Lien blanc selon Figma */
    transition: color 0.3s ease;
    font-weight: 600;
    position: relative;
    display: inline-flex;
    align-items: center;
}
.features-section--dark .feature-item__link:hover {
    color: var(--primary-300);
}
.features-section--dark .feature-item__link:after {
    content: "→";
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
}
.features-section--dark .feature-item__link:hover:after {
    transform: translateX(4px);
}

/* Styles pour l'image qui remplace l'icône */
.feature-item__image {
    display: block; /* S'assurer que l'image est un block pour appliquer la marge */
    margin-bottom: 10px; /* Nouveau padding (appliqué comme marge) */
}
/*------------------------------------
    Feature Split Content
------------------------------------*/

/* Variables spécifiques à ce composant */
:root {
  --feature-split-spacing: 4rem;

  /* Couleurs de fond pour les variantes */
  --feature-split-bg-white: var(--white);
  --feature-split-bg-tertiary: var(--tertiary-50);
  --feature-split-bg-dark: var(--secondary-800);
  
  /* Couleurs de texte */
  --feature-split-text-dark: var(--content-primary);
  --feature-split-text-light: var(--white);
  --feature-split-text-secondary-dark: var(--content-secondary);
  --feature-split-text-secondary-light: rgba(255, 255, 255, 0.8);
  
  /* Ombre et bordures */
  --feature-split-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --feature-split-border-radius: var(--border-radius-md);
} 


/* Styles de base pour la section */
.feature-split {
  position: relative;
  overflow: hidden;
}

/* Conteneur principal avec mise en page flex */
.feature-split__inner {
  display: flex;
  align-items: center;
  gap: var(--feature-split-spacing);
}

/* Variante avec image à droite et contenu à gauche */
.feature-split--reverse .feature-split__inner {
  flex-direction: row-reverse;
}

/* Style pour le conteneur media */
.feature-split__media {
  flex: 1;
}

/* Conteneur de l'image avec bordure arrondie et ombre */
.feature-split__image-wrapper {
  position: relative;
  border-radius: var(--feature-split-border-radius);
  overflow: hidden;
}

/* Style pour l'image */
.feature-split__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Style pour le conteneur de contenu */
.feature-split__content {
  flex: 1;
  padding: 1rem;
}

/* Style pour le titre */
.feature-split__title {
  margin-bottom: 1.5rem;
}

/* Style pour la liste d'éléments */
.feature-split__list-item:first-child {
  padding-top: 0;
}

.feature-split__list-item {
  padding: 1rem 0 1.5rem;
  border-bottom: 1px solid #525252;
}

.feature-split__list-item:last-child {
  border-bottom: none;
}

.feature-split__list-title {
  color: var(--secondary);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 2.5rem;
}

.feature-split__list-subtitle {
  color: var(--content-secondary);
  font-size: 1.2rem;
  line-height: 1.6;
  margin: 0;
}

/* Style pour le conteneur d'actions */
.feature-split__actions {
  margin-top: 2rem;
}

.feature-split__actions {
  display: flex;
  gap: 1rem;
}

/* --- Variantes de couleur de fond pour la section --- */

/* Variante fond blanc (par défaut) */
.feature-split--white {
  background-color: var(--white);
}

.feature-split--white .feature-split__title {
  color: var(--content-primary);
}

.feature-split--white .feature-split__description {
  color: var(--content-secondary);
}

/* Variante fond tertiary */
.feature-split--tertiary {
  background-color: var(--tertiary-50);
}

.feature-split--tertiary .feature-split__title {
  color: var(--content-primary);
}

.feature-split--tertiary .feature-split__description {
  color: var(--content-secondary);
}

/* Variante fond vert foncé */
.feature-split--dark {
  background-color: var(--secondary-800);
}

.feature-split--dark .feature-split__title {
  color: var(--white);
}

.feature-split--dark .feature-split__description {
  color: rgba(255, 255, 255, 0.8);
}

.feature-split--dark .feature-split__list-title {
  color: var(--primary);
}

.section--dark .feature-split__list-subtitle,
.section--secondary .feature-split__list-subtitle {
  color: rgba(255, 255, 255, 0.8);
}

.feature-split--dark .feature-split__list-item {
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

/* --- Media Queries --- */

@media (max-width: 991px) {
  .feature-split__inner {
    flex-direction: column;
    gap: 1rem;
  }
  
  .feature-split--reverse .feature-split__inner {
    flex-direction: column;
  }
  
  .feature-split__media,
  .feature-split__content {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .feature-split__title {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  
  .feature-split__description {
    font-size: 1rem;
    margin-bottom: 1.5rem;
  }
  
  .feature-split__list-item {
    padding: 1rem 0;
  }
  
  .feature-split__list-title {
    font-size: 0.9rem;
  }
  
  .feature-split__list-subtitle {
    font-size: 0.85rem;
  }
}

/* Metrics */
/*------------------------------------
    Metrics Component
------------------------------------*/

/* Variables CSS pour les métriques - Récupération des valeurs du thème */







:root {
  --metrics-animation-speed: 2s;
  --metrics-digit-size: 4rem;
  --metrics-digit-size-mobile: 3.332rem;
  --metrics-digit-weight: 700;
  --metrics-label-size: 1rem;
  --metrics-spacing: 0.5rem;
  --metrics-digit-color: #25282A;
  --metrics-label-color: #636969;
  --metrics-column-gap: 2rem;
  --metrics-row-gap: 3rem;
  --metrics-transition-timing: cubic-bezier(0.34, 1.56, 0.64, 1); /* effet de rebond */
}

/* Section de base - Adapter pour utiliser les nouvelles variables */
.metrics-section {
  padding: 5rem 0;
  background-color: var(--section-bg-light, var(--white));
  overflow: hidden;
}

/* Utiliser la classe de base pour la variante primary */
.metrics-section.section--primary,
.metrics-section--primary {
  background-color: var(--section-bg-primary, var(--primary-300));
  color: var(--section-text-on-primary, var(--black));
}

/* Utiliser la classe de base pour la variante secondary */
.metrics-section.section--secondary,
.metrics-section--secondary {
  background-color: var(--section-bg-secondary, var(--secondary-100));
  color: var(--section-text-on-secondary, var(--white));
}

/* Utiliser la classe de base pour la variante tertiary */
.metrics-section.section--tertiary,
.metrics-section--tertiary {
  background-color: var(--section-bg-tertiary, var(--tertiary-100));
}

/* Utiliser la classe de base pour la variante dark */
.metrics-section.section--dark,
.metrics-section--dark {
  background-color: var(--section-bg-dark, var(--secondary-900));
  color: var(--section-text-on-dark, var(--white));
}


.metrics-section.section--primary .metric-label {
  color: var(--secondary, #011a14);
}

/* Adapter les éléments spécifiques */
.metrics-section.section--secondary .metric-label,
.section--secondary .metric-label,
.metrics-section.section--dark .metric-label,
.section--dark .metric-label {
  color: var(--section-text-secondary-on-dark, var(--gray-300));
}

.metrics-section.section--secondary .metric-value,
.section--secondary .metric-value,
.metrics-section.section--dark .metric-value,
.section--dark .metric-value {
  color: var(--section-text-on-dark, var(--white));
}


/* Grille responsive */
.metrics-grid {
  display: grid;
  gap: var(--metrics-row-gap) var(--metrics-column-gap);
  justify-content: center;
  align-items: start;
}

/* Item de métrique */
.metric-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.metric-item.left{
  align-items: start;
}
.metric-item.center, .metric-item.justify{
  align-items: center;
}
.metric-item.right{
  align-items: end;
}
/* Valeur de la métrique */
.metric-value {
  font-size: var(--metrics-digit-size);
  font-weight: var(--metrics-digit-weight);
  line-height: 1.2;
  margin-bottom: var(--metrics-spacing);
  color: var(--metrics-digit-color);
  position: relative;
  transition: transform 0.3s var(--metrics-transition-timing);
  transform-origin: center;
}

/* Animation pendant le comptage */
.metric-value.animating .metric-digit-static {
  animation: pulse-metric 0.5s ease-in-out infinite alternate;
}

/* Animation des chiffres - effet pulse */
@keyframes pulse-metric {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.05);
    opacity: 1;
  }
}

/* Animation terminée */
.metric-value.animation-complete {
  animation: complete-metric 0.5s var(--metrics-transition-timing);
}

/* Animation finale quand le compteur est terminé */
@keyframes complete-metric {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* Wrapper pour compteur */
.metric-digit-wrapper {
  position: relative;
  display: inline-block;
}

/* Valeur statique */
.metric-digit-static {
  display: inline-block;
}

/* Préfixe et suffixe plus petits */
.metric-prefix,
.metric-suffix {
  font-size: 0.5em;
  font-weight: 600;
  vertical-align: middle;
  opacity: 0.85;
}

/* Suffixe spécifique - légèrement surélevé */
.metric-suffix {
  vertical-align: 15%;
  margin-left: 0.05em;
}

/* Préfixe spécifique */
.metric-prefix {
  margin-right: 0.05em;
}

/* Libellé de la métrique */
.metric-label {
  font-size: var(--metrics-label-size);
  color: var(--metrics-label-color);
  text-align: left;
  line-height: 1.4;
  margin: 0;
  font-weight: 400;
  transition: opacity 0.4s ease;
  opacity: 0.8;
}

/* Style du libellé quand l'animation est terminée */
.animation-complete + .metric-label {
  opacity: 1;
}

/* Responsive */
@media (max-width: 1200px) {
  .metrics-section .grid-cols-5,
  .metrics-section .grid-cols-6 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .metrics-section .grid-cols-3,
  .metrics-section .grid-cols-4,
  .metrics-section .grid-cols-5,
  .metrics-section .grid-cols-6 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .metric-value {
    font-size: var(--metrics-digit-size-mobile);
  }
}

@media (max-width: 480px) {
  .metrics-section .grid-cols-2,
  .metrics-section .grid-cols-3,
  .metrics-section .grid-cols-4,
  .metrics-section .grid-cols-5,
  .metrics-section .grid-cols-6 {
    grid-template-columns: 1fr;
  }
}
/*------------------------------------
    Metrics Alternative Component (Card Design)
------------------------------------*/

:root {
  /* Variables spécifiques à cette variante */
  --metrics-alt-card-border-radius: 16px;
  --metrics-alt-card-padding: 2.5rem 2rem;
  --metrics-alt-title-margin: 0 0 3rem 0;
  --metrics-alt-card-gap: 1.5rem;
  
  /* Couleurs des cartes */
  --metrics-alt-card-bg-default: var(--primary);
  --metrics-alt-card-bg-primary: var(--primary);
  --metrics-alt-card-bg-secondary: var(--secondary);
  --metrics-alt-card-bg-tertiary: var(--tertiary);
  --metrics-alt-card-bg-dark: var(--color-dark);
  --metrics-alt-card-bg-light: var(--color-light);
  
  /* Couleurs de texte dans les cartes */
  --metrics-alt-text-on-default: var(--color-text-default);
  --metrics-alt-text-on-dark: var(--color-light);
  --metrics-alt-text-on-primary: var(--color-text-default);
  
  /* Couleurs secondaires de texte */
  --metrics-alt-text-secondary-on-default: var(--color-text-muted);
  --metrics-alt-text-secondary-on-dark: var(--color-text-subtle);
  --metrics-alt-text-secondary-on-primary: var(--color-text-default);
}

/* Style de base de la section */
.metrics-alt {
  padding: 5rem 0;
  overflow: hidden;
}

/* Titre de la section centré */
.metrics-alt__title {
  font-size: 3rem;
  font-weight: 400;
  margin: var(--metrics-alt-title-margin);
}

/* Section sur fond clair */
.metrics-alt.section--light .metrics-alt__title {
  color: var(--content-primary);
}

/* Section sur fond tertiary */
.metrics-alt.section--tertiary .metrics-alt__title {
  color: var(--content-primary);
}

/* Section sur fond foncé */
.metrics-alt.section--dark .metrics-alt__title {
  color: var(--white);
}

/* Grille pour disposer les cartes */
.metrics-alt__grid {
  display: grid;
  gap: var(--metrics-alt-card-gap);
}

/* Carte de base */
.metrics-alt__card {
  border-radius: var(--metrics-alt-card-border-radius);
  overflow: hidden;
  position: relative;
  background-color: var(--metrics-alt-card-bg-default);
  color: var(--metrics-alt-text-on-default);
}

.metrics-alt__card--light {
  background-color: var(--metrics-alt-card-bg-light);
}

.metrics-alt__card--light, .metrics-alt__card--light  .metric-digit-static, .metrics-alt__card--light .metrics-alt__label{
  color: var(--metrics-alt-text-on-default);
}

.metrics-alt__card--dark {
  background-color: var(--metrics-alt-card-bg-dark);
}

.metrics-alt__card--dark, .metrics-alt__card--dark  .metric-digit-static, .metrics-alt__card--dark .metrics-alt__label{
  color: var(--metrics-alt-text-on-dark);
}

.metrics-alt__card--primary {
  background-color: var(--metrics-alt-card-bg-primary);
}
.metrics-alt__card--primary, .metrics-alt__card--primary  .metric-digit-static, .metrics-alt__card--primary .metrics-alt__label{
  color: var(--metrics-alt-text-on-primary);
}

.metrics-alt__card--secondary {
  background-color: var(--metrics-alt-card-bg-secondary);
}
.metrics-alt__card--secondary, .metrics-alt__card--secondary  .metric-digit-static, .metrics-alt__card--secondary .metrics-alt__label{
  color: var(--metrics-alt-text-on-dark);
}

.metrics-alt__card--tertiary {
  background-color: var(--metrics-alt-card-bg-tertiary);
}

.metrics-alt__card--tertiary, .metrics-alt__card--tertiary  .metric-digit-static, .metrics-alt__card--tertiary .metrics-alt__label{
  color: var(--metrics-alt-text-on-default);
}


/* Contenu intérieur de la carte */
.metrics-alt__card-inner {
  position: relative;
  z-index: 1;
  padding: var(--metrics-alt-card-padding);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* Alignement du contenu selon l'alignement défini */
.metrics-alt__card-inner.left {
  text-align: left;
  align-items: flex-start;
}

.metrics-alt__card-inner.center,
.metrics-alt__card-inner.justify {
  text-align: center;
  align-items: center;
}

.metrics-alt__card-inner.right {
  text-align: right;
  align-items: flex-end;
}

/* Valeur métrique */
.metrics-alt__card .metric-value {
  color: var(--metrics-alt-text-on-default) !important;
}

.metrics-alt__card--dark .metric-value {
  color: var(--metrics-alt-text-on-dark) !important;
}

.metrics-alt__card--primary .metric-value {
  color: var(--metrics-alt-text-on-primary) !important;
}

/* Label de la métrique */
.metrics-alt__label {
  font-size: var(--metrics-label-size, 1rem);
  line-height: 1.4;
  margin: 0;
  font-weight: 400;
  opacity: 0.85;
}

/* Alignement spécifique de la légende selon l'alignement défini */
.metric-item.left .metrics-alt__label {
  text-align: left;
}

.metric-item.center .metrics-alt__label,
.metric-item.justify .metrics-alt__label {
  text-align: center;
}

.metric-item.right .metrics-alt__label {
  text-align: right;
}

/* Styles pour les labels dans les différentes variantes */
.metrics-alt__card--dark .metrics-alt__label {
  color: var(--metrics-alt-text-secondary-on-dark);
}

/* Réutiliser l'animation existante pour la variante alt */
.metrics-alt__value.animating .metric-digit-static {
  animation: pulse-metric 0.5s ease-in-out infinite alternate;
}

.metrics-alt__value.animation-complete {
  animation: complete-metric 0.5s var(--metrics-transition-timing, cubic-bezier(0.34, 1.56, 0.64, 1));
}

/* Appliquer les styles pour les préfixes/suffixes de la composante principale */
.metrics-alt__value .metric-prefix,
.metrics-alt__value .metric-suffix {
  font-size: 0.6em;
  font-weight: 600;
  vertical-align: middle;
  opacity: 0.85;
}

.metrics-alt__value .metric-suffix {
  vertical-align: 15%;
  margin-left: 0.05em;
}

.metrics-alt__value .metric-prefix {
  margin-right: 0.05em;
}

/* Responsive */
@media (max-width: 991px) {
  .metrics-alt .grid-cols-3,
  .metrics-alt .grid-cols-4,
  .metrics-alt .grid-cols-5,
  .metrics-alt .grid-cols-6 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .metrics-alt {
    padding: 4rem 0;
  }
  
  .metrics-alt__title {
    font-size: 2.5rem;
    margin-bottom: 2rem;
  }
  
  .metrics-alt__value {
    font-size: var(--metrics-digit-size-mobile, 2.5rem);
  }
}

@media (max-width: 480px) {
  .metrics-alt .grid-cols-2,
  .metrics-alt .grid-cols-3,
  .metrics-alt .grid-cols-4,
  .metrics-alt .grid-cols-5,
  .metrics-alt .grid-cols-6 {
    grid-template-columns: 1fr;
  }
  
  .metrics-alt__card-inner {
    padding: 2rem 1.5rem;
  }
}
/*------------------------------------
    Metrics V3 Component (Cards with Description)
------------------------------------*/

/* Variables spécifiques à cette variante */
:root {
  --metrics-v3-card-spacing: 1.5rem;
  --metrics-v3-card-padding: 2rem;
  --metrics-v3-title-margin: 0 0 1rem 0;
  --metrics-v3-subtitle-margin: 0 0 3rem 0;
  --metrics-v3-card-border-radius: 12px;
  --metrics-v3-card-border: 1px solid var(--gray-200, #e5e7eb);
  --metrics-v3-card-bg: var(--white, #ffffff);
  --metrics-v3-icon-size: 48px;
  --metrics-v3-icon-bg-size: 64px;
  
  /* Animation */
  --metrics-v3-card-animation-duration: 0.5s;
  --metrics-v3-card-animation-delay-factor: 0.1s;
  --metrics-v3-card-animation-timing: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Section de base */
.metrics-v3 {
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}

/* Titre centré */
.metrics-v3__title {
  font-size: var(--font-size-4xl, 2.25rem);
  font-weight: var(--font-weight-normal, 400);
  margin: var(--metrics-v3-title-margin);
  line-height: 1.2;
}

/* Sous-titre centré */
.metrics-v3__subtitle {
  font-size: var(--font-size-lg, 1.125rem);
  margin: var(--metrics-v3-subtitle-margin);
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

/* Grille pour les cartes */
.metrics-v3__grid {
  display: grid;
  gap: var(--metrics-v3-card-spacing);
}

/* Style de base des cartes */
.metrics-v3__card {
  background-color: var(--metrics-v3-card-bg);
  border-radius: var(--metrics-v3-card-border-radius);
  border: var(--metrics-v3-card-border);
  padding: var(--metrics-v3-card-padding);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp var(--metrics-v3-card-animation-duration) var(--metrics-v3-card-animation-timing) forwards;
}

/* Animation séquentielle pour les cartes */
.metrics-v3__grid .metrics-v3__card:nth-child(1) {
  animation-delay: 0s;
}
.metrics-v3__grid .metrics-v3__card:nth-child(2) {
  animation-delay: calc(var(--metrics-v3-card-animation-delay-factor) * 1);
}
.metrics-v3__grid .metrics-v3__card:nth-child(3) {
  animation-delay: calc(var(--metrics-v3-card-animation-delay-factor) * 2);
}
.metrics-v3__grid .metrics-v3__card:nth-child(4) {
  animation-delay: calc(var(--metrics-v3-card-animation-delay-factor) * 3);
}

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

/* Adaptations de style selon le fond */
.section--light .metrics-v3__title,
.section--tertiary .metrics-v3__title {
  color: var(--content-primary, var(--gray-900));
}

.section--light .metrics-v3__subtitle,
.section--tertiary .metrics-v3__subtitle {
  color: var(--content-secondary, var(--gray-600));
}

.section--secondary .metrics-v3__title,
.section--secondary .metrics-v3__subtitle,
.section--dark .metrics-v3__title,
.section--dark .metrics-v3__subtitle {
  color: var(--white);
}

.section--dark .metrics-v3__card {
  border-color: var(--secondary-700, rgba(255, 255, 255, 0.1));
}

/* Icône en haut de la carte */
.metrics-v3__icon-wrapper {
  width: var(--metrics-v3-icon-bg-size);
  height: var(--metrics-v3-icon-bg-size);
  background-color: var(--primary-300, #BEF264);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

/* Alignement de l'icône selon l'alignement du texte */
.metric-item.left .metrics-v3__icon-wrapper {
  align-self: flex-start;
}

.metric-item.center .metrics-v3__icon-wrapper,
.metric-item.justify .metrics-v3__icon-wrapper {
  align-self: center;
}

.metric-item.right .metrics-v3__icon-wrapper {
  align-self: flex-end;
}

.metrics-v3__icon {
  width: var(--metrics-v3-icon-size);
  height: var(--metrics-v3-icon-size);
}

/* Valeur numérique (métrique) */
.metrics-v3__value {
  font-size: var(--metrics-digit-size, 3rem);
  font-weight: var(--font-weight-medium, 600);
  line-height: 1.2;
  margin-bottom: 0.5rem;
  color: var(--content-primary, var(--gray-900));
}

/* Étiquette (titre secondaire) */
.metrics-v3__label {
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: var(--font-weight-semibold, 600);
  margin: 0 0 1rem 0;
  color: var(--content-primary, var(--gray-900));
  line-height: 1.8rem;
}

/* Description (paragraphe) */
.metrics-v3__description {
  font-size: var(--font-size-base, 1rem);
  line-height: 1.6;
  color: var(--content-secondary, var(--gray-600));
  margin: 0;
}

/* Alignement du texte selon l'alignement défini */
.metric-item.left .metrics-v3__label,
.metric-item.left .metrics-v3__description {
  text-align: left;
}

.metric-item.center .metrics-v3__label,
.metric-item.center .metrics-v3__description,
.metric-item.justify .metrics-v3__label,
.metric-item.justify .metrics-v3__description {
  text-align: center;
}

.metric-item.right .metrics-v3__label,
.metric-item.right .metrics-v3__description {
  text-align: right;
}

/* Styles spécifiques au fond foncé */
.section--secondary .metrics-v3__card, .section--dark .metrics-v3__card {
  background-color: var(--white);
}

.section--secondary .metrics-v3__value,
.section--secondary .metrics-v3__label,
.section--dark .metrics-v3__value,
.section--dark .metrics-v3__label {
  color: var(--content-primary, var(--gray-900)) !important;
}

.section--secondary .metrics-v3__description,
.section--dark .metrics-v3__description {
  color: var(--content-secondary, var(--gray-600));
}

/* Responsive */
@media (max-width: 991px) {
  .metrics-v3 .grid-cols-3,
  .metrics-v3 .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .metrics-v3 {
    padding: 4rem 0;
  }
  
  .metrics-v3__title {
    font-size: var(--font-size-3xl, 1.875rem);
  }
  
  .metrics-v3__subtitle {
    font-size: var(--font-size-base, 1rem);
  }
  
  .metrics-v3__value {
    font-size: var(--metrics-digit-size-mobile, 2.5rem);
  }
  
  .metrics-v3__icon-wrapper {
    width: calc(var(--metrics-v3-icon-bg-size) * 0.9);
    height: calc(var(--metrics-v3-icon-bg-size) * 0.9);
  }
  
  .metrics-v3__icon {
    width: calc(var(--metrics-v3-icon-size) * 0.9);
    height: calc(var(--metrics-v3-icon-size) * 0.9);
  }
}

@media (max-width: 576px) {
  .metrics-v3 .grid-cols-2,
  .metrics-v3 .grid-cols-3,
  .metrics-v3 .grid-cols-4 {
    grid-template-columns: 1fr;
  }
  
  .metrics-v3__card {
    padding: 1.5rem;
  }
}
/*------------------------------------
    Metrics V4 Component (Asymmetric Layout)
------------------------------------*/

:root {
  /* Variables spécifiques à cette variante */
  --metrics-v4-card-border-radius: 12px;
  --metrics-v4-card-padding: 2rem;
  --metrics-v4-title-margin: 0 0 3rem 0;
  --metrics-v4-card-gap: 1.5rem;
}

.metrics-v4.section--light{
  --metrics-v4-title-color: var(--content-primary, var(--gray-800));
  --metrics-v4-card-bg: var(--tertiary, #FFF7ED);
  --metrics-v4-digit-static-color: var(--color-dark);
  --metrics-v4-label-color: var(--color-dark);
  --metrics-v4-description-color: var(--content-primary, var(--gray-800));
}

.metrics-v4.section--primary{
  --metrics-v4-title-color: var(--content-primary, var(--gray-800));
  --metrics-v4-card-bg: var(--white, #ffffff);
  --metrics-v4-digit-static-color: var(--color-dark);
  --metrics-v4-label-color: var(--color-dark);
  --metrics-v4-description-color: var(--content-primary, var(--gray-800));
}

.metrics-v4.section--secondary{
  --metrics-v4-title-color: var(--white, #ffffff);
  --metrics-v4-card-bg: var(--primary, #BEF264);
  --metrics-v4-digit-static-color: var(--color-dark);
  --metrics-v4-label-color: var(--color-dark);
  --metrics-v4-description-color: var(--content-primary, var(--gray-800));
}

.metrics-v4.section--tertiary{
  --metrics-v4-title-color: var(--content-primary, var(--gray-800));
  --metrics-v4-card-bg: var(--primary, #BEF264);
  --metrics-v4-digit-static-color: var(--color-dark);
  --metrics-v4-label-color: var(--color-dark);
  --metrics-v4-description-color: var(--content-primary, var(--gray-800));
}

.metrics-v4.section--dark{
  --metrics-v4-title-color: var(--white, #ffffff);
  --metrics-v4-card-bg: var(--primary, #BEF264);
  --metrics-v4-digit-static-color: var(--color-dark);
  --metrics-v4-label-color: var(--color-dark);
  --metrics-v4-description-color: var(--content-primary, var(--gray-800));
}

/* Section de base */
.metrics-v4 {
  padding: 5rem 0;
  overflow: hidden;
}

/* Titre de la section */
.metrics-v4__title {
  text-align: center;
  font-size: var(--font-size-3xl, 1.875rem);
  font-weight: var(--font-weight-medium, 500);
  margin: var(--metrics-v4-title-margin);
  line-height: 1.2;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  color: var(--metrics-v4-title-color);
}


/* Grille asymétrique */
.metrics-v4__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--metrics-v4-card-gap);
  align-items: stretch;
}

/* Colonne des petites cartes */
.metrics-v4__column {
  display: flex;
  flex-direction: column;
  gap: var(--metrics-v4-card-gap);
}

/* Carte commune (styles partagés) */
.metrics-v4__card {
  background-color: var(--metrics-v4-card-bg);
  border-radius: var(--metrics-v4-card-border-radius);
  padding: var(--metrics-v4-card-padding);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
}


/* Grande carte (gauche) */
.metrics-v4__card--large {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 2rem;
}

/* Alignement du contenu dans les cartes larges selon l'alignement défini */
.metrics-v4__card--large .metric-item.left {
  text-align: left;
  align-items: flex-start;
}

.metrics-v4__card--large .metric-item.center,
.metrics-v4__card--large .metric-item.justify {
  text-align: center;
  align-items: center;
}

.metrics-v4__card--large .metric-item.right {
  text-align: right;
  align-items: flex-end;
}

/* Alignement de l'icône selon l'alignement défini */
.metrics-v4__card--large .metric-item.left .metrics-v4__icon-wrapper {
  align-self: flex-start;
}

.metrics-v4__card--large .metric-item.center .metrics-v4__icon-wrapper,
.metrics-v4__card--large .metric-item.justify .metrics-v4__icon-wrapper {
  align-self: center;
}

.metrics-v4__card--large .metric-item.right .metrics-v4__icon-wrapper {
  align-self: flex-end;
}

/* Alignement du texte pour label et description */
.metrics-v4__card--large .metric-item.left .metrics-v4__label,
.metrics-v4__card--large .metric-item.left .metrics-v4__description {
  text-align: left;
}

.metrics-v4__card--large .metric-item.center .metrics-v4__label,
.metrics-v4__card--large .metric-item.center .metrics-v4__description,
.metrics-v4__card--large .metric-item.justify .metrics-v4__label,
.metrics-v4__card--large .metric-item.justify .metrics-v4__description {
  text-align: center;
}

.metrics-v4__card--large .metric-item.right .metrics-v4__label,
.metrics-v4__card--large .metric-item.right .metrics-v4__description {
  text-align: right;
}

/* Ajustement des marges pour la description selon l'alignement */
.metrics-v4__card--large .metric-item.left .metrics-v4__description {
  max-width: 500px;
  margin-left: 0;
  margin-right: auto;
}

.metrics-v4__card--large .metric-item.center .metrics-v4__description,
.metrics-v4__card--large .metric-item.justify .metrics-v4__description {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.metrics-v4__card--large .metric-item.right .metrics-v4__description {
  max-width: 500px;
  margin-left: auto;
  margin-right: 0;
}

/* Petite carte (droite) */
.metrics-v4__card--small {
  flex: 1;
}

/* Alignement du contenu dans les cartes small selon l'alignement défini */
.metrics-v4__card--small .metric-item.left {
  text-align: left;
  align-items: flex-start;
}

.metrics-v4__card--small .metric-item.center,
.metrics-v4__card--small .metric-item.justify {
  text-align: center;
  align-items: center;
}

.metrics-v4__card--small .metric-item.right {
  text-align: right;
  align-items: flex-end;
}

/* Alignement de l'icône selon l'alignement défini pour les cartes small */
.metrics-v4__card--small .metric-item.left .metrics-v4__icon-wrapper {
  align-self: flex-start;
}

.metrics-v4__card--small .metric-item.center .metrics-v4__icon-wrapper,
.metrics-v4__card--small .metric-item.justify .metrics-v4__icon-wrapper {
  align-self: center;
}

.metrics-v4__card--small .metric-item.right .metrics-v4__icon-wrapper {
  align-self: flex-end;
}

/* Alignement du texte pour label et description dans les cartes small */
.metrics-v4__card--small .metric-item.left .metrics-v4__label,
.metrics-v4__card--small .metric-item.left .metrics-v4__description {
  text-align: left;
}

.metrics-v4__card--small .metric-item.center .metrics-v4__label,
.metrics-v4__card--small .metric-item.center .metrics-v4__description,
.metrics-v4__card--small .metric-item.justify .metrics-v4__label,
.metrics-v4__card--small .metric-item.justify .metrics-v4__description {
  text-align: center;
}

.metrics-v4__card--small .metric-item.right .metrics-v4__label,
.metrics-v4__card--small .metric-item.right .metrics-v4__description {
  text-align: right;
}


/* Conteneur de l'image avec dimensions fixes */
.metrics-v4__icon-wrapper {
  display: inline-block;
  width: 64px;  /* Taille fixe du conteneur */
  height: 64px; /* Taille fixe du conteneur */
  margin-bottom: 10px;
  position: relative;
}

/* Image à sa taille réelle */
.metrics-v4__image {
  display: block;
  width: auto;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Valeur numérique */
.metrics-v4__value {
  font-size: var(--metrics-digit-size, 3rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: 1.2;
  margin-bottom: 0.5rem;
  color: var(--metrics-v4-digit-static-color) !important;
}

.metrics-v4 .metrics-section.section--dark .metric-value {
  color: var(--metrics-v4-digit-static-color) !important;
}

/* Label (titre secondaire) */
.metrics-v4__label {
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: var(--font-weight-semibold, 600);
  line-height: var(--line-height-relaxed, 1.625rem);
  color: var(--metrics-v4-label-color) !important;
}

/* Description (paragraphe) */
.metrics-v4__description {
  font-size: var(--font-size-base, 1rem);
  line-height: 1.6;
  color: var(--metrics-v4-description-color);
  margin: 0;
  opacity: 0.85;
}

/* Animation au survol */
.metrics-v4__card:hover {
  transform: translateY(-5px);
}

/* Responsive */
@media (max-width: 991px) {
  .metrics-v4__grid {
    grid-template-columns: 1fr;
  }
  
  .metrics-v4__card--large {
    padding: 2.5rem 1.5rem;
  }
}

@media (max-width: 767px) {
  .metrics-v4 {
    padding: 4rem 0;
  }
  
  .metrics-v4__title {
    font-size: var(--font-size-2xl, 1.5rem);
    margin-bottom: 2rem;
  }
  
  .metrics-v4__card {
    padding: 1.5rem;
  }
  
  .metrics-v4__card--large {
    padding: 2rem 1.25rem;
  }
  
  .metrics-v4__card--large .metrics-v4__icon-wrapper {
    margin-bottom: 1rem;
  }
  
  .metrics-v4__value {
    font-size: var(--metrics-digit-size-mobile, 2.5rem);
  }
  
}
/*------------------------------------
    Metrics V5 Component (Simple Row Layout)
------------------------------------*/

:root {
  /* Variables spécifiques à cette variante */
  --metrics-v5-title-margin: 0 0 3rem 0;
  --metrics-v5-divider-color: var(--primary-300, #BEF264);
  --metrics-v5-divider-width: 100%;
  --metrics-v5-divider-height: 3px;
  --metrics-v5-divider-margin: 0 0 1.5rem 0;
}

/* Section de base */
.metrics-v5 {
  padding: 5rem 0;
}

/* Titre de la section */
.metrics-v5__title {
  margin: var(--metrics-v5-title-margin);
  line-height: 1.2;
  margin-left: auto;
  margin-right: auto;
}

/* Section sur fond clair */
.metrics-v5.section--light .metrics-v5__title {
  color: var(--content-primary);
}

/* Section sur fond tertiary */
.metrics-v5.section--tertiary .metrics-v5__title {
  color: var(--color-dark);
}

/* Section sur fond vert foncé */
.metrics-v5.section--dark .metrics-v5__title {
  color: var(--white);
}

/* Carte métrique */
.metrics-v5__card {
  text-align: left;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5rem;
}

/* Variante avec bordure gauche */
.metrics-v5__card--border-left {
  text-align: left;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1rem 2rem;
  border-left: 5px solid #F2F5F9;
}

.section--tertiary .metrics-v5__card--border-left {
  border-left: 5px solid var(--white);
}

/* Ligne séparatrice au-dessus du chiffre */
.metrics-v5__divider {
  width: var(--metrics-v5-divider-width);
  height: var(--metrics-v5-divider-height);
  background-color: var(--metrics-v5-divider-color);
  margin: var(--metrics-v5-divider-margin);
  border-radius: 2px;
}

/* Section sur fond clair */
.section--light .metrics-v5__divider {
  background-color: var(--primary-300);
}

/* Section sur fond tertiary */
.section--primary .metrics-v5__divider {
  background-color: var(--primary-100);
}
/* Section sur fond secondary */
.section--secondary .metrics-v5__divider {
  background-color: var(--primary-400);
}

/* Section sur fond tertiary */
.section--tertiary .metrics-v5__divider {
  background-color: var(--primary-400);
}

/* Section sur fond vert foncé */
.section--dark .metrics-v5__divider {
  background-color: var(--primary-300);
}

/* Valeur numérique */
.metrics-v5__value {
  font-size: var(--metrics-digit-size, 3rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

/* Styles pour les effets de dégradé sur les métriques */
.metrics-v5__value.text-gradient,
.metrics-v5__value.text-gradient--vertical,
.metrics-v5__value.text-gradient--diagonal {
  /* Assurer que l'effet de dégradé reste visible pendant l'animation */
  position: relative;
}

.metrics-v5__value.text-gradient .metric-digit-static,
.metrics-v5__value.text-gradient--vertical .metric-digit-static,
.metrics-v5__value.text-gradient--diagonal .metric-digit-static {
  /* Hériter l'effet de dégradé du parent */
  background: inherit;
  background-clip: inherit;
  -webkit-background-clip: inherit;
  -webkit-text-fill-color: inherit;
  -moz-background-clip: inherit;
  -moz-text-fill-color: inherit;
}

/* Styles spécifiques pour les chiffres avec dégradé */
.metric-number.text-gradient {
  /* Dégradé horizontal pour les chiffres principaux */
  display: inline;
  font-weight: inherit;
  background: linear-gradient(90deg, var(--secondary-700) 0%, var(--primary) 50%, var(--secondary-700) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
}

.metric-number.text-gradient--vertical {
  /* Dégradé vertical pour les chiffres principaux */
  display: inline;
  font-weight: inherit;
  background: linear-gradient(180deg, var(--secondary-700) 0%, var(--primary) 50%, var(--secondary-700) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
}

.metric-number.text-gradient--diagonal {
  /* Dégradé diagonal pour les chiffres principaux */
  display: inline;
  font-weight: inherit;
  background: linear-gradient(45deg, var(--secondary-700) 0%, var(--primary) 50%, var(--secondary-700) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
}

/* Méthode simple et fiable : couleur unie via classe parente */
.text-gradient .metric-prefix,
.text-gradient .metric-suffix,
.text-gradient--vertical .metric-prefix,
.text-gradient--vertical .metric-suffix,
.text-gradient--diagonal .metric-prefix,
.text-gradient--diagonal .metric-suffix {
  color: var(--primary-600) !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
}

/* Section sur fond clair ou tertiary */
.section--light .metrics-v5__value,
.section--tertiary .metrics-v5__value {
  color: var(--content-primary);
}

/* Section sur fond vert foncé */
.section--dark .metrics-v5__value {
  color: var(--white);
}

/* Label (titre secondaire) */
.metrics-v5__label {
  font-size: var(--font-size-md, 1rem);
  font-weight: var(--font-weight-regular, 400);
  line-height: 1.5;
  margin: 0;
}

/* Variante uppercase pour les labels */
.metrics-v5__label.uppercase {
  text-transform: uppercase;
}

/* Variante align texte */

.left .metrics-v5__label{
 text-align:left; 
}

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

.right .metrics-v5__label{
 text-align:right; 
}


/* Section sur fond clair ou tertiary */
.section--light .metrics-v5__label,
.section--tertiary .metrics-v5__label {
  color: var(--content-secondary);
}

/* Section sur fond vert foncé */
.section--dark .metrics-v5__label {
  color: var(--white);
  opacity: 0.8;
}

/* Responsive */
@media (max-width: 767px) {
  .metrics-v5 {
    padding: 4rem 0;
  }

  .metrics-v5 .grid-cols-3, .metrics-v5 .grid-cols-4, .metrics-v5 .grid-cols-5, .metrics-v5 .grid-cols-6 {
    grid-template-columns: auto;
  }
  
  .metrics-v5__title {
    font-size: var(--font-size-2xl, 1.5rem);
    margin-bottom: 2rem;
  }
  
  .metrics-v5__value {
    font-size: var(--metrics-digit-size-mobile, 2.5rem);
  }
  
  .metrics-v5__card {
    padding: 1rem;
  }
}
/**
 * Metrics Stats Cards Component
 * Module de cartes statistiques avec différents types de présentation
 */

/* Section Statistiques */
.stats-section {
    padding: 80px 0;
}

/* Éléments de contenu de l'en-tête */
.stats-surtitle {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 16px;
}

.stats-title {
    text-align: center;
    font-weight: 400;
    line-height: 1.3;
    color: var(--content-primary);
    margin-bottom: 80px;
    max-width: 1000px;
    position: relative;
    padding-left: 0;
    margin-left: auto;
    margin-right: auto;
}

.stats-title:before {
    display: none;
}

.stats-subtitle {
    text-align: center;
    font-size: 18px;
    color: var(--content-secondary);
    margin-bottom: 60px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.stats-card {
    background-color: var(--color-dark);
    border-radius: var(--border-radius-sm);
    border-radius: 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 200px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.stats-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

/* Effet de brillance au survol */
.stats-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    z-index: 4;
    transition: left 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.stats-card:hover::before {
    left: 100%;
}

.stats-card.large {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 20px;
}

.stats-card.large .stats-image {
    height: 100%;
    max-height: 100%;
}

.stats-card.large .stats-content {
    padding: 30px 50px;
}

.stats-card.double {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 20px;
}

.stats-card.double .stats-top {
    background-color: var(--dark);
    margin-bottom: 0;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 50%;
    z-index: 999;
}

.stats-card.double .stats-image {
    height: 55%;
    margin-bottom: 0;
}

/* Style par défaut pour les autres cartes */
.stats-card:not(.large):not(.double) .stats-content {
    padding: 30px;
    height: 45%;
}

.stats-card:not(.large):not(.double) .stats-image {
    height: 55%;
    margin-bottom: 0;
}

.stats-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    max-height: 350px;
    margin-bottom: 0;
    position: relative;
}

.stats-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
    opacity: 0.8;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.stats-card:hover .stats-image::after {
    opacity: 1;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.8));
}

.stats-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    filter: brightness(1) contrast(1);
}

.stats-overlay-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 5rem;
    font-weight: 600;
    color: var(--white);
    z-index: 2;
    opacity: 1;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.stats-number {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateZ(0); /* Optimisation GPU */
}

.stats-card:hover .stats-number {
    transform: translate(15%, -15%) scale(1.2);
}

.stats-card:hover .stats-overlay-number {
    transform: translate(-50%, -50%) scale(1.1);
}

.stats-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--dark);
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateZ(0); /* Optimisation GPU */
}

.stats-card:hover .stats-content {
    transform: translateY(-2px);
}

.stats-number {
    font-family: 'Proxima Nova', sans-serif;
    font-size: 5rem;
    font-weight: 500;
    color: var(--primary);
    margin-bottom: 10px;
    line-height: 1;
}

.section--dark h3.stats-number {
    color: var(--primary);
}

.stats-text {
    font-size: 30px;
    font-weight: 400;
    color: var(--white);
    margin-bottom: 10px;
    line-height: 1.3;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateZ(0);
}

.stats-card:hover .stats-text {
    transform: translateY(-1px);
    color: rgba(255, 255, 255, 0.95);
}

.stats-description {
    font-size: 20px;
    color: var(--gray-400);
    line-height: 1.5;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateZ(0);
}

.stats-card:hover .stats-description {
    transform: translateY(-1px);
    color: var(--gray-300);
}

/* Logo overlay */
img.overlay-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 60%;
    height: auto;
    max-width: 150px;
    z-index: 3;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4)) brightness(0.95);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0.9;
}

.stats-card:hover img.overlay-logo {
    transform: translate(-50%, -50%) scale(1.15);
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.6)) brightness(1.1);
    opacity: 1;
}

/* Variantes de couleur pour les modes section */
.section--primary .stats-card {
    background-color: var(--primary-900);
}

.section--primary .stats-content {
    background: var(--primary-900);
}

.section--primary .stats-card.double .stats-top {
    background-color: var(--primary-900);
}

.section--secondary .stats-card {
    background-color: var(--secondary-900);
}

.section--secondary .stats-content {
    background: var(--secondary-900);
}

.section--secondary .stats-card.double .stats-top {
    background-color: var(--secondary-900);
}

.section--tertiary .stats-card {
    background-color: var(--tertiary-900);
}

.section--tertiary .stats-content {
    background: var(--tertiary-900);
}

.section--tertiary .stats-card.double .stats-top {
    background-color: var(--tertiary-900);
}

.section--dark .stats-card {
    background-color: var(--gray-900);
}

.section--dark .stats-content {
    background: var(--gray-900);
}

.section--dark .stats-card.double .stats-top {
    background-color: var(--gray-900);
}

/* Media queries */
@media (max-width: 992px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stats-card.large {
        grid-column: 1 / 3;
    }
  
    .stats-card.large .stats-content {
        padding: 100px 50px;
    }
    
    .stats-title {
        margin-bottom: 60px;
    }
}

@media (max-width: 768px) {
    .stats-section {
        padding: 60px 0;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .stats-card.large, 
    .stats-card.double {
        grid-column: 1;
    }
  
    .stats-card.large {
        display: flex;
        flex-direction: column;
        grid-template-columns: unset;
    }
    
    .stats-card.large .stats-image {
        width: 100%;
        height: 200px;
    }
    
    .stats-card.large .stats-content {
        width: 100%;
        padding: 80px 30px;
    }
    
    .stats-title {
        margin-bottom: 40px;
    }
    
    .stats-number {
        font-size: 3rem;
    }
    
    .stats-text {
        font-size: 24px;
    }
    
    .stats-description {
        font-size: 18px;
    }
}
/* Section des métriques clés */
.key-metrics-section {
    padding: 80px 0;
    background-color: #fff;
}

.metrics-grid {
    display: flex;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 30px;
}

.metrics-card, .metrics-full-card {
    background-color: #fff; /* Fond blanc au lieu de jaune */
    border: 1px solid #000;
    border-radius: 5px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alignement à gauche au lieu de centré */
    text-align: left; /* Texte aligné à gauche */
    transition: transform 0.3s ease;
}

.metrics-full-card{
  border:none;
  background:#fae43e;
}

.metrics-card:hover, .metrics-full-card:hover {
    transform: translateY(-5px);
}

.metric-number {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #000;
    line-height: 1;
}

.metrics-card p, .metrics-full-card p {
    font-size: 20px;
    color: #000;
    line-height: 1.5;
}

.metrics-full-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: 40px;
}

.metrics-full-card .metric-number {
    font-size: 4rem;
    margin-right: 30px;
    margin-bottom: 0;
}

.metrics-full-card .metric-text,.metrics-full-card p{
    font-size: 20px;
    flex: 1;
}

/* Media Queries pour la responsivité */
@media (max-width: 992px) {
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .metrics-grid {
        grid-template-columns: 1fr;
    }
    
    .metrics-full-card {
        flex-direction: column;
        text-align: center;
    }
    
    .metrics-full-card .metric-number {
        margin-right: 0;
        margin-bottom: 15px;
    }
}

/* Team Section */
/*------------------------------------
    Team Section
    Présentation de l'équipe avec slider
    
    Usage du système de colonnes:
    1. Utiliser les classes grid, grid-cols-X (où X est le nombre de colonnes souhaité)
    2. Ajouter les classes responsives: grid-cols-md-X, grid-cols-sm-X
    3. Ajouter l'espacement avec grid-gap-X
    
    Exemple:
    <div class="team-section__grid grid grid-cols-3 grid-cols-md-2 grid-cols-sm-1 grid-gap-4">
      <!-- 3 colonnes sur desktop, 2 sur tablette, 1 sur mobile, avec gap taille 4 -->
    </div>
------------------------------------*/

.team-section {
  padding: 5rem 0;
  position: relative;
}

.team-section__header {
  max-width: 1200px;
  margin: 0 auto 3rem;
  padding: 0 1.5rem;
}

.team-section__title {
  margin-bottom: 1rem;
}

.team-section__subtitle {
  font-size: 1.125rem;
  line-height: 1.5;
  margin-bottom: 2rem;
}


.section--primary .team-section__title, .section--tertiary .team-section__title {
  color: var(--color-text-default);
}

.section--primary .team-section__subtitle, .section--tertiary .team-section__subtitle {
  color: var(--color-text-default);
}

.section--dark .team-section__title, .section--secondary .team-section__title {
  color: var(--color-white);
}

.section--dark .team-section__subtitle, .section--secondary .team-section__subtitle {
  color: var(--color-text-inverted-muted);
}

.team-section__navigation {
  position: absolute;
  top: 3rem;
  right: 2rem;
  display: flex;
  gap: 1rem;
}

.team-section__nav-button {
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.team-section__nav-button:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.section--dark .team-section__nav-button {
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--color-white);
}

.section--dark .team-section__nav-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Conteneur de la grille - utilise maintenant les classes grid globales */
.team-section__grid {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Définition de base de la carte membre */
.team-member {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
  width: 100%;
}

.team-member--portrait {
  aspect-ratio: 3 / 4;
  height: auto;
}

.team-member--carre {
  aspect-ratio: 1 / 1;
  height: auto;
}

.team-member--paysage {
  aspect-ratio: 4 / 3;
  height: auto;
}

.team-member:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.team-member__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Container pour l'effet de survol d'image */
.team-member__image-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Bouton LinkedIn */
.team-member__linkedin {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  background-color: #F7EA48;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 5;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.team-member__linkedin:hover {
  background-color: #ffffff;
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.team-member__linkedin svg {
  width: 20px;
  height: 20px;
  fill: #25282A;
  transition: fill 0.3s ease;
}

.team-member__linkedin:hover svg {
  fill: #25282A;
}

/* Image par défaut */
.team-member__image--default {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 1;
}

/* Image de survol */
.team-member__image--hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 1;
}

/* Effet au survol - seulement si une image de survol existe */
.team-member--has-hover:hover .team-member__image--default {
  opacity: 0;
  transform: scale(0.95);
}

.team-member--has-hover:hover .team-member__image--hover {
  opacity: 1;
  transform: scale(1);
}

/* Animation pour les infos */
.team-member__info {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  min-height: 80px;
  background-color: var(--color-white);
  padding: 16px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Animation pour la description et compétences */
.team-member__info2 {
  position: absolute;
  bottom: -120px; /* Initialement hors de vue */
  left: 16px;
  right: 16px;
  min-height: 100px;
  background-color: var(--color-white);
  padding: 20px 0px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  opacity: 0;
  z-index: 10;
  transition: transform 0.3s ease, opacity 0.3s ease, bottom 0.3s ease;
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* Description centrée */
.team-member__description {
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-text-default);
  text-align: center;
  margin: 0;
  font-weight: 400;
  padding: 0 16px;
}

/* Container des compétences */
.team-member__skills {
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* Défilement des compétences */
.team-member__skills-scroll {
  display: flex;
  gap: 8px;
  white-space: nowrap;
  animation: none; /* Pas d'animation par défaut */
}

/* Animation de défilement */
@keyframes scrollSkills {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Démarrage de l'animation au survol */
.team-member:hover .team-member__skills-scroll {
  animation: scrollSkills 25s linear infinite;
}

/* Style des compétences individuelles */
.team-member__skill {
  display: inline-block;
  background: #e9eeed;
  color: #25282a;
  padding: 0px 10px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Qualités avec rotation des textes */
.team-member__qualities {
  margin-top: 8px;
}

.team-member__quality {
  display: inline-block;
  background: #e9eeed;
  color: #25282a;
  padding: 0px 10px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  min-width: 80px;
  text-align: center;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

/* Animation de rotation des qualités - Gérée par JavaScript */
.team-member__quality.fade-out {
  opacity: 0;
}

.team-member__quality.fade-in {
  opacity: 1;
}

/* Effets au survol */
.team-member:hover .team-member__info {
  transform: translateY(100px);
  opacity: 0;
}

.team-member:hover .team-member__info2 {
  bottom: 16px;
  opacity: 1;
}

/* Styles pour les icônes de réseaux sociaux */
.team-member__social-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--tertiary-50);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-dark) !important;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.team-member__social-icon:hover {
  background-color: var(--primary-300);
  transform: translateY(-3px);
}

.team-member__social-icon svg {
    width: 18px;
    height: 18px;
}

.section--dark .team-member__info,
.section--dark .team-member__info .team-member__name,
.section--dark .team-member__info2 {
  color: var(--color-dark);
}

.section--secondary .team-member__info {
  background-color: var(--color-white);
  color: var(--color-dark);
}

.section--secondary .team-member__info2 {
  background-color: var(--color-white);
  color: var(--color-dark);
}

.team-member__name {
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  color: var(--color-text-default) !important;
  margin: 0;
}

.team-member__title {
  font-size: 14px;
  line-height: 20px;
      color: var(--color-text-muted);
  margin: 0;
}

.team-member__location {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-muted);
  margin: 0;
  font-weight: 400;
}

/* Responsive - nous utilisons maintenant les classes grid pour la responsivité */
@media (max-width: 992px) {
  
  .team-section__navigation {
    top: 2.5rem;
  }
}

@media (max-width: 576px) {
  .team-member {
    height: auto;
  }
  
  .team-member__info {
    width: calc(100% - 32px);
  }

  .team-member--portrait {
    aspect-ratio: 3 / 4 !important;
    height: auto !important;
}
  
  .team-section__navigation {
    position: relative;
    top: 0;
    right: 0;
    justify-content: flex-end;
    margin-bottom: 1.5rem;
  }
}

/* Navigation pour le slider - style simplifié des flèches */
.team-slider__navigation {
  display: flex;
  gap: 2rem;
  margin-top: 0.5rem;
}

.team-slider__nav-button {
  width: 2rem;
  height: 2rem;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  color: var(--color-dark, #000);
  padding: 0;
}

.team-slider__nav-button svg {
  width: 1.5rem;
  height: 1.5rem;
  stroke-width: 1.5;
}

.team-slider__nav-button:hover {
  background-color: transparent;
  transform: scale(1.2);
  color: var(--primary-500, #88cc16);
}

/* Style pour les boutons inactifs - version très explicite */
.team-slider__nav-button.inactive {
  opacity: 0.3 !important;
  color: var(--color-text-subtle) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Assurez-vous que les styles s'appliquent aussi à l'élément avec l'attribut disabled */
.team-slider__nav-button[disabled] {
  opacity: 0.3 !important;
  color: var(--color-text-subtle) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Ajustement pour le mode sombre */
.section--dark .team-slider__nav-button {
  color: var(--color-white);
}

.section--dark .team-slider__nav-button:hover {
  color: var(--primary-300);
}

.section--dark .team-slider__nav-button.inactive {
  opacity: 0.3 !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

.team-section.section--light .team-member-name {
    color: var(--color-text-default) !important;
}

.team-section.section--light .team-member-role {
    color: var(--color-text-muted);
}

.swiper-button-disabled {
    cursor: not-allowed !important;
    pointer-events: none !important;
    color: var(--color-text-subtle) !important;
}

.swiper-button-disabled.swiper-button-next {
    color: var(--color-text-subtle) !important;
}

/* =================================
   CTA CARDS
   ================================= */

/* Structure de base des CTA */
.team-cta {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.team-cta:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* Lien invisible couvrant toute la carte */
.team-cta__link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  text-decoration: none;
}

/* Contenu des CTA */
.team-cta__content {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
  position: relative;
  z-index: 1;
}

.team-cta__title {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 1rem 0;
  color: #ffffff;
}

.team-cta__description {
  font-size: 1rem;
  line-height: 1.5;
  margin: 0 0 1.5rem 0;
  color: rgba(255, 255, 255, 0.9);
}

/* =================================
   CTA STYLE 01 - Fond noir avec description et bouton
   ================================= */

.team-cta--style-01 {
  background-color: #25282A;
  color: #ffffff;
  padding: 0;
}

.team-cta--style-01 .team-cta__content {
  gap: 1rem;
}

.team-cta--style-01 .team-cta__title {
  font-size: 1.75rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

.team-cta--style-01 .team-cta__description {
  font-size: 1.125rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.team-cta--style-01 .team-cta__description p {
  margin: 0 0 1rem 0;
}

.team-cta--style-01 .team-cta__description p:last-child {
  margin-bottom: 0;
}

.team-cta--style-01 .team-cta__description strong {
  font-weight: 600;
  color: #ffffff;
}

.team-cta--style-01 .team-cta__description em {
  font-style: italic;
}

.team-cta--style-01 .team-cta__description ul,
.team-cta--style-01 .team-cta__description ol {
  margin: 0 0 1rem 0;
  padding-left: 1.5rem;
}

.team-cta--style-01 .team-cta__description li {
  margin-bottom: 0.5rem;
}

.team-cta__button {
  display: inline-block;
  padding: 0.75rem 2rem;
  background-color: #ffffff;
  color: #25282A;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 500;
  font-size: 1rem;
  transition: all 0.3s ease;
  position: relative;
  z-index: 3;
}

.team-cta__button:hover {
  background-color: #f8f9fa;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* =================================
   CTA STYLE 02 - Fond noir avec icône centrale
   ================================= */

.team-cta--style-02 {
  background-color: #25282A;
  color: #ffffff;
  padding: 0;
}

.team-cta--style-02 .team-cta__content {
  justify-content: center;
  gap: 2rem;
}

.team-cta--style-02 .team-cta__title {
  font-size: 2rem;
  font-weight: 400;
  margin-bottom: 0;
  text-align: center;
}

.team-cta__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.team-cta__icon i {
  width: 40px;
  height: 40px;
  color: #ffffff;
}

.team-cta--style-02:hover .team-cta__icon {
  background-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

/* =================================
   RESPONSIVE CTA
   ================================= */

@media (max-width: 768px) {
  .team-cta__content {
    padding: 1.5rem;
  }
  
  .team-cta--style-01 .team-cta__title {
    font-size: 1.5rem;
  }
  
  .team-cta--style-01 .team-cta__description {
    font-size: 1rem;
  }
  
  .team-cta--style-01 .team-cta__description ul,
  .team-cta--style-01 .team-cta__description ol {
    padding-left: 1.25rem;
  }
  
  .team-cta--style-02 .team-cta__title {
    font-size: 1.75rem;
  }
  
  .team-cta__icon {
    width: 60px;
    height: 60px;
  }
  
  .team-cta__icon i {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 480px) {
  .team-cta__content {
    padding: 1.25rem;
  }
  
  .team-cta--style-01 .team-cta__title {
    font-size: 1.375rem;
  }
  
  .team-cta--style-02 .team-cta__title {
    font-size: 1.5rem;
  }
  
  .team-cta__button {
    padding: 0.625rem 1.5rem;
    font-size: 0.875rem;
  }
}
/*------------------------------------
    Team Slider
    Présentation de l'équipe avec slider horizontal
------------------------------------*/

/* Variables spécifiques au composant */
:root {
  --team-slider-button-disabled-opacity: 0.4;
  --team-member-columns: 4;
  --team-member-gap: 24px;
  --team-member-width: calc((100% - (var(--team-member-columns) - 1) * var(--team-member-gap)) / var(--team-member-columns));
}

/* Conteneur principal du slider */
.team-slider {
  padding: 5rem 0;
  position: relative;
  contain: content;
}

/* Mise en page du header */
.team-slider__header {
  max-width: var(--container-max-width);
  margin: 0 auto 2rem;
  padding: 0 1rem;
}

/* Nouveau conteneur flexible pour aligner les éléments horizontalement */
.team-slider__header-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1.5rem;
}

/* Conteneur pour le titre et le sous-titre */
.team-slider__title-container {
  max-width: 70%;
  flex: 1 1 auto;
}

/* Style du titre */
.team-slider__title {
  margin-bottom: 1rem;
}

/* Style du sous-titre */
.team-slider__subtitle {
  font-size: 1.125rem;
  line-height: 1.5;
  max-width: 800px;
}

.section--secondary .team-slider__subtitle, .section--dark .team-slider__subtitle {
  color: var(--color-text-inverted-muted);
}

/* Navigation pour le slider - style simplifié des flèches */
.team-slider__navigation {
  display: flex;
  gap: 2rem;
  margin-top: 0.5rem;
  flex: 0 0 auto;
}

.team-slider__nav-button {
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, color 0.2s ease;
  color: var(--color-dark, #000);
  padding: 0;
  will-change: transform, color;
  touch-action: manipulation;
}

.team-slider__nav-button svg {
  width: 1.5rem;
  height: 1.5rem;
  stroke-width: 1.5;
}

.team-slider__nav-button:hover {
  background-color: transparent;
  transform: scale(1.2);
  color: var(--primary-500, #88cc16);
}

.team-slider__nav-button:focus-visible {
  outline: 2px solid var(--primary-500, #88cc16);
  outline-offset: 2px;
}

/* Style pour les boutons désactivés - Version renforcée */
.team-slider__nav-button.disabled {
  opacity: var(--team-slider-button-disabled-opacity) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
      color: var(--color-text-subtle) !important;
}

/* Ajustement pour le mode sombre */
.section--dark .team-slider__nav-button, .section--secondary .team-slider__nav-button {
  color: var(--color-white);
  border: none;
}

.section--dark .team-slider__nav-button:hover, .section--secondary .team-slider__nav-button:hover {
  background-color: transparent;
  color: var(--primary-300);
}

/* Style désactivé pour le mode sombre - Version renforcée */
.section--dark .team-slider__nav-button.disabled, .section--secondary .team-slider__nav-button.disabled {
  opacity: var(--team-slider-button-disabled-opacity) !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Container du slider */
.team-slider__container {
  position: relative;
  overflow: hidden;
  width: 100%;
  contain: content;
}

/* Le style disabled sera appliqué directement via JavaScript */

/* La piste de défilement - version améliorée */
.team-slider__track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  scroll-behavior: smooth;
  padding-bottom: 10px; /* Espace pour le shadow */
  padding-left: 1.5rem; /* Même padding horizontal que le header */
  padding-right: 1.5rem; /* Même padding horizontal que le header */
  max-width: var(--container-max-width);
  margin: 0 auto;
  /* Suppression du scroll snap pour éviter des conflits avec notre JS */
  scroll-snap-type: none;
} 

/* Masquer la scrollbar */
.team-slider__track::-webkit-scrollbar {
  display: none;
}

/* Carte membre d'équipe */
.team-member {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  flex: 0 0 var(--team-member-width);
  scroll-snap-align: start;
  box-sizing: border-box;
  will-change: transform;
  contain: content;
}

.team-member--portrait {
  aspect-ratio: 3 / 4;
  height: auto;
}

.team-member--carre {
  aspect-ratio: 1 / 1;
  height: auto;
}

.team-member--paysage {
  aspect-ratio: 4 / 3;
  height: auto;
}

.team-member:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.team-member__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* Container pour l'effet de survol d'image */
.team-member__image-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Bouton LinkedIn */
.team-member__linkedin {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  background-color: #F7EA48;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 5;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.team-member__linkedin:hover {
  background-color: #ffffff;
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.team-member__linkedin svg {
  width: 20px;
  height: 20px;
  fill: #25282A;
  transition: fill 0.3s ease;
}

.team-member__linkedin:hover svg {
  fill: #25282A;
}

/* Image par défaut */
.team-member__image--default {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 1;
}

/* Image de survol */
.team-member__image--hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 2;
}

/* Effet au survol - seulement si une image de survol existe */
.team-member--has-hover:hover .team-member__image--default {
  opacity: 0;
  transform: scale(0.95);
}

.team-member--has-hover:hover .team-member__image--hover {
  opacity: 1;
  transform: scale(1);
}

/* Effet par défaut si pas d'image de survol */
.team-member:not(.team-member--has-hover):hover .team-member__image {
  transform: scale(1.03);
}

/* Animation pour les infos */
.team-member__info {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  min-height: 80px;
  background-color: var(--color-white);
  padding: 16px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  z-index: 2;
}

/* Animation pour la description et compétences */
.team-member__info2 {
  position: absolute;
  bottom: -120px; /* Initialement hors de vue */
  left: 16px;
  right: 16px;
  min-height: 100px;
  background-color: var(--color-white);
  padding: 20px 0px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  opacity: 0;
  z-index: 10;
  transition: transform 0.3s ease, opacity 0.3s ease, bottom 0.3s ease;
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* Description centrée */
.team-member__description {
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-text-default);
  text-align: center;
  margin: 0;
  font-weight: 400;
  padding: 0 16px;
}

/* Container des compétences */
.team-member__skills {
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* Défilement des compétences */
.team-member__skills-scroll {
  display: flex;
  gap: 8px;
  white-space: nowrap;
  animation: none; /* Pas d'animation par défaut */
}

/* Animation de défilement */
@keyframes scrollSkills {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Démarrage de l'animation au survol */
.team-member:hover .team-member__skills-scroll {
  animation: scrollSkills 25s linear infinite;
}

/* Style des compétences individuelles */
.team-member__skill {
  display: inline-block;
  background: #e9eeed;
  color: #25282a;
  padding: 0px 10px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Qualités avec rotation des textes */
.team-member__qualities {
  margin-top: 8px;
}

.team-member__quality {
  display: inline-block;
  background: #e9eeed;
  color: #25282a;
  padding: 0px 10px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  min-width: 80px;
  text-align: center;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

/* Animation de rotation des qualités - Gérée par JavaScript */
.team-member__quality.fade-out {
  opacity: 0;
}

.team-member__quality.fade-in {
  opacity: 1;
}

/* Effets au survol */
.team-member:hover .team-member__info {
  transform: translateY(100px);
  opacity: 0;
}

.team-member:hover .team-member__info2 {
  bottom: 16px;
  opacity: 1;
}

/* Styles pour les icônes de réseaux sociaux */
.team-member__social-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--tertiary-50);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-dark) !important;
  transition: background-color 0.2s ease, transform 0.2s ease;
  will-change: transform;
}

.team-member__social-icon:hover {
  background-color: var(--primary-300);
  transform: translateY(-3px);
}

.team-member__social-icon:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

.section--dark .team-member__info,
.section--dark .team-member__info .team-member__name,
.section--dark .team-member__info2 {
  color: var(--color-dark);
}

.section--dark .team-member__social-icon {
  color: var(--color-dark);
  background-color: rgba(0, 0, 0, 0.05);
}

.section--dark .team-member__social-icon:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.team-member__name {
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
      color: var(--color-text-default) !important;
  margin: 0;
}

.team-member__title {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-muted);
  margin: 0;
}

.team-member__location {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-muted);
  margin: 0;
  font-weight: 400;
}

/* Styles spécifiques pour les différentes variantes */
.team-slider.section--dark {
  background-color: var(--color-background-dark);
  color: var(--color-white);
}

/* Mode responsive */
@media (max-width: 1200px) {
  :root {
    --team-member-columns: 3;
  }
}

@media (max-width: 900px) {
  :root {
    --team-member-columns: 2;
  }
  
  .team-slider__title-container {
    max-width: 100%;
    text-align: center;
  }
  
  .team-slider__header-inner {
    justify-content: center;
  }
}

@media (max-width: 576px) {
  :root {
    --team-member-columns: 1;
  }
  
  .team-slider__navigation {
    justify-content: center;
    width: 100%;
  }
  
}

.team-slider-section.section--light .team-member-name {
    color: var(--color-text-default) !important;
}

.team-slider-section.section--light .team-member-role {
    color: var(--color-text-muted);
}

.team-slider-section.section--dark .team-member-name {
    color: var(--color-text-default) !important;
}

.team-slider-section.section--dark .team-member-role {
    color: var(--color-text-muted);
}

.team-slider-section.section--dark .team-member-role {
  color: rgba(255, 255, 255, 0.8);
}

/* ================================
   STYLES POUR LE BOUTON CTA
   ================================ */

/* Wrapper du bouton d'action */
.team-slider__cta-wrapper {
  margin-top: 3rem;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding: 0 1.5rem;
}

/* Alignements du bouton */
.team-slider__cta-wrapper.text-left {
  text-align: left;
}

.team-slider__cta-wrapper.text-center {
  text-align: center;
}

.team-slider__cta-wrapper.text-right {
  text-align: right;
}

/* Responsive pour le bouton */
@media (max-width: 768px) {
  .team-slider__cta-wrapper {
    margin-top: 2rem;
    padding: 0 1rem;
  }
  
  /* Sur mobile, centrer le bouton par défaut */
  .team-slider__cta-wrapper {
    text-align: center;
  }
}

/* Speakers Section */
/*------------------------------------
    Speakers Section
    Module pour présenter les speakers d'un événement
    
    Design simple et épuré :
    - Fond transparent
    - Image 4:5 avec coins arrondis
    - Infos alignées à gauche avec padding 20px
------------------------------------*/

.speakers-section {
  padding: 5rem 0;
  position: relative;
}

.speakers-section__header {
    max-width: 1200px;
    padding: 0 1.5rem 3rem;
}

.speakers-section__title {
  margin-bottom: 1rem;
}

.speakers-section__subtitle {
  font-size: 1.125rem;
  line-height: 1.5;
  margin-bottom: 2rem;
}

/* Styles de couleur selon les modes de section */
.section--primary .speakers-section__title, .section--tertiary .speakers-section__title {
  color: var(--color-text-default);
}

.section--primary .speakers-section__subtitle, .section--tertiary .speakers-section__subtitle {
  color: var(--color-text-default);
}

.section--dark .speakers-section__title, .section--secondary .speakers-section__title {
  color: var(--color-white);
}

.section--dark .speakers-section__subtitle, .section--secondary .speakers-section__subtitle {
  color: var(--color-text-inverted-muted);
}

/* Conteneur de la grille - utilise les classes grid globales */
.speakers-section__grid {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  row-gap: 4rem; /* Augmente l'espace entre les lignes uniquement */
}

/* ==========================================
   SPEAKER CARD - Carte individuelle speaker NOUVEAU DESIGN
   ========================================== */

/* Définition de base de la carte speaker */
.speaker-card {
  position: relative;
  transition: all 0.3s ease;
  width: 100%;
  background-color: transparent;
  /* Pas de shadow ni border */
}

/* Les proportions sont maintenant gérées directement par l'image-container */

/* ==========================================
   IMAGE CONTAINER - Conteneur de l'image
   ========================================== */

.speaker-card__image-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 4 / 5; /* Proportion 4:5 par défaut */
}

/* Ratio carré quand sélectionné */
.speaker-card--carre .speaker-card__image-container {
  aspect-ratio: 1 / 1;
}

/* Ratio paysage quand sélectionné */
.speaker-card--paysage .speaker-card__image-container {
  aspect-ratio: 4 / 3;
}

.speaker-card__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.3s ease;
  border-radius: 12px;
}

.speaker-card:hover .speaker-card__image {
  transform: scale(1.05);
}

/* ==========================================
   INFO SECTION - Section des informations
   ========================================== */

.speaker-card__info {
  position: relative;
  background: transparent;
  padding: 20px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  transition: all 0.3s ease;
}

/* ==========================================
   TEXT ELEMENTS - Éléments textuels
   ========================================== */

.speaker-card__overtitle {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-600, #D4AF37);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}

.speaker-card__name {
  font-weight: 600;
  font-size: 22px;
  line-height: 28px;
  color: var(--color-text-default);
  margin: 0;
}

.speaker-card__position {
  font-size: 16px;
  line-height: 22px;
  color: var(--color-text-muted);
  margin: 0;
  font-weight: 400;
}

/* ==========================================
   MODES DE SECTION - Variants par mode
   ========================================== */

.section--dark .speaker-card__name {
  color: var(--color-white);
}

.section--dark .speaker-card__position {
  color: var(--color-text-inverted-muted);
}

.section--dark .speaker-card__overtitle {
  color: var(--primary-400, #F7EA48);
}

.section--secondary .speaker-card__name {
  color: var(--color-text-default);
}

.section--secondary .speaker-card__position {
  color: var(--color-text-muted);
}

.section--secondary .speaker-card__overtitle {
  color: var(--primary-600);
}

/* Mode light (par défaut) */
.section--primary .speaker-card__name,
.section--tertiary .speaker-card__name,
.speaker-card__name {
  color: var(--color-text-default);
}

.section--primary .speaker-card__position,
.section--tertiary .speaker-card__position,
.speaker-card__position {
  color: var(--color-text-muted);
}

.section--primary .speaker-card__overtitle,
.section--tertiary .speaker-card__overtitle,
.speaker-card__overtitle {
  color: var(--primary-600);
}

/* ==========================================
   RESPONSIVE - Adaptations mobiles
   ========================================== */

@media (max-width: 992px) {
  .speakers-section {
    padding: 4rem 0;
  }
  
  .speakers-section__header {
    margin-bottom: 2.5rem;
  }
}

@media (max-width: 768px) {
  .speakers-section {
    padding: 3rem 0;
  }
  
  .speakers-section__header {
    padding: 0 1rem;
    margin-bottom: 2rem;
  }
  
  .speakers-section__grid {
    padding: 0 1rem;
    row-gap: 2rem;
  }
  
  .speaker-card__info {
    padding: 16px 0 0 0;
  }
  
  .speaker-card__name {
    font-size: 20px;
    line-height: 26px;
  }
  
  .speaker-card__position {
    font-size: 15px;
    line-height: 20px;
  }
  
  .speaker-card__overtitle {
    font-size: 13px;
  }
}

@media (max-width: 576px) {
  .speakers-section {
    padding: 2.5rem 0;
  }
  
  .speaker-card__image-container {
    /* Maintenir la proportion par défaut sur mobile */
    aspect-ratio: 4 / 5;
  }
  
  .speaker-card--carre .speaker-card__image-container {
    aspect-ratio: 1 / 1;
  }
  
  .speaker-card--paysage .speaker-card__image-container {
    aspect-ratio: 4 / 3;
  }
  
  .speaker-card__info {
    padding: 12px 0 0 0;
  }
  
  .speaker-card__name {
    font-size: 18px;
    line-height: 24px;
  }
  
  .speaker-card__position {
    font-size: 14px;
    line-height: 18px;
  }
}

@media (max-width: 480px) {
  .speakers-section__header {
    padding: 0 0.75rem;
  }
  
  .speakers-section__grid {
    padding: 0 0.75rem;
  }
}

/* ==========================================
   ANIMATIONS & TRANSITIONS - Effets avancés
   ========================================== */

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

.speaker-card {
  animation: slideUp 0.6s ease-out;
}

/* Délai progressif pour l'animation d'entrée */
.speaker-card:nth-child(1) { animation-delay: 0.1s; }
.speaker-card:nth-child(2) { animation-delay: 0.2s; }
.speaker-card:nth-child(3) { animation-delay: 0.3s; }
.speaker-card:nth-child(4) { animation-delay: 0.4s; }
.speaker-card:nth-child(5) { animation-delay: 0.5s; }
.speaker-card:nth-child(6) { animation-delay: 0.6s; }
.speaker-card:nth-child(7) { animation-delay: 0.7s; }
.speaker-card:nth-child(8) { animation-delay: 0.8s; }

/* Préférer les animations réduites pour l'accessibilité */
@media (prefers-reduced-motion: reduce) {
  .speaker-card {
    animation: none;
  }
  
  .speaker-card:hover {
    transform: none;
  }
  
  .speaker-card__image {
    transition: none;
  }
}

/* Pricing Section */
/*------------------------------------
    Pricing Tickets Module
    Module pour afficher les tarifs d'événements
    
    Design avec cartes pricing modernes et responsive
------------------------------------*/

.pricing-section {
  padding: 5rem 0;
  position: relative;
}

.pricing-section__header {
  max-width: 1200px;
  margin: 0 auto 4rem;
  padding: 0 1.5rem;
}

.pricing-section__title {
  margin-bottom: 1rem;
}

.pricing-section__subtitle {
  font-size: 1.125rem;
  line-height: 1.5;
  margin-bottom: 2rem;
}

/* Styles de couleur selon les modes de section */
.section--primary .pricing-section__title, .section--tertiary .pricing-section__title {
  color: var(--color-text-default);
}

.section--primary .pricing-section__subtitle, .section--tertiary .pricing-section__subtitle {
  color: var(--color-text-default);
}

.section--dark .pricing-section__title, .section--secondary .pricing-section__title {
  color: var(--color-white);
}

.section--dark .pricing-section__subtitle, .section--secondary .pricing-section__subtitle {
  color: var(--color-text-inverted-muted);
}

/* Conteneur de la grille */
.pricing-section__grid {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
}

/* Force une seule colonne sur mobile */
@media (max-width: 768px) {
  .pricing-section__grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
  }
}

/* ==========================================
   PRICING CARD - Carte de tarification
   ========================================== */

.pricing-card {
  position: relative;
  background-color: var(--color-dark);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: center;
}

.pricing-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
}

/* Carte mise en avant */
.pricing-card--featured {
  border-color: #e6db56;
  border-width: 2px;
  box-shadow: 0 8px 20px rgba(255, 215, 0, 0.2);
}

.pricing-card--featured:hover {
  box-shadow: 0 16px 32px rgba(255, 215, 0, 0.3);
}

/* Badge promotionnel */
.pricing-card__badge {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #a4ca70, #eadc54);
  color: #1a1a1a;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* En-tête de la carte */
.pricing-card__header {
  text-align: center;
  margin-bottom: 2rem;
}

.pricing-card__name {
  font-size: 2rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 0.5rem 0;
}

.pricing-card__description {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 1rem 0;
}

.pricing-card__price {
  font-size: 3rem;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1;
  margin: 1rem 0 0 0;
}

/* Liste des fonctionnalités */
.pricing-card__features {
  flex: 1;
  margin-bottom: 2rem;
}

.pricing-card__features-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

.pricing-card__feature {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #ffffff;
}

.pricing-card__feature:last-child {
  margin-bottom: 0;
}

.pricing-card__feature-icon {
  width: 16px;
  height: 16px;
  color: #FFD700;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Bouton d'action */
.pricing-card__cta {
  margin-top: auto;
}

.pricing-card__button {
  width: 100%;
  text-align: center;
  font-weight: 600;
}

/* ==========================================
   MODES DE SECTION - Variants par mode
   ========================================== */

.section--dark .pricing-card {
  background-color: var(--color-dark);
  border-color: var(--secondary-700);
}

.section--dark .pricing-card__name {
  color: var(--color-white);
}

.section--dark .pricing-card__description {
  color: var(--color-text-inverted-muted);
}

.section--dark .pricing-card__feature {
  color: var(--color-text-inverted);
}

.section--secondary .pricing-card {
  background-color: var(--color-white);
  border-color: var(--secondary-200);
}

/* ==========================================
   RESPONSIVE - Adaptations mobiles
   ========================================== */

@media (max-width: 992px) {
  .pricing-section {
    padding: 4rem 0;
  }
  
  .pricing-section__header {
    margin-bottom: 3rem;
  }
  
  .pricing-section__title {
    font-size: 2.5rem;
  }
  
  .pricing-section__subtitle {
    font-size: 1rem;
  }
}

@media (max-width: 768px) {
  .pricing-section {
    padding: 3rem 0;
  }
  
  .pricing-section__header {
    padding: 0 1rem;
    margin-bottom: 2.5rem;
  }
  
  .pricing-section__title {
    font-size: 2rem;
    margin-bottom: 0.75rem;
  }
  
  .pricing-section__subtitle {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
  }
  
  .pricing-section__grid {
    padding: 0 1rem;
  }
  
  .pricing-card {
    padding: 1.5rem;
  }
  
  .pricing-card__header {
    margin-bottom: 1.5rem;
  }
  
  .pricing-card__name {
    font-size: 1.875rem;
  }
  
  .pricing-card__description {
    font-size: 0.925rem;
    margin-bottom: 0.75rem;
  }
  
  .pricing-card__price {
    font-size: 2.5rem;
    margin: 0.75rem 0 0 0;
  }
  
  .pricing-card__features {
    margin-bottom: 1.5rem;
  }
  
  .pricing-card__feature {
    font-size: 0.8rem;
    margin-bottom: 0.75rem;
  }
  
  .pricing-card__button {
    font-size: 0.9rem;
    padding: 0.875rem 1.5rem;
  }
  
  .pricing-card__badge {
    font-size: 11px;
    padding: 4px 12px;
    top: -22px;
  }
}

@media (max-width: 576px) {
  .pricing-section {
    padding: 2.5rem 0;
  }
  
  .pricing-section__header {
    padding: 0 0.75rem;
    margin-bottom: 2rem;
  }
  
  .pricing-section__title {
    font-size: 1.75rem;
    line-height: 1.2;
  }
  
  .pricing-section__subtitle {
    font-size: 0.875rem;
    line-height: 1.4;
  }
  
  .pricing-section__grid {
    padding: 0 0.75rem;
    grid-template-columns: 1fr !important;
    gap: 1.25rem;
  }
  
  .pricing-card {
    padding: 1.25rem;
    border-radius: 12px;
  }
  
  .pricing-card__header {
    margin-bottom: 1.25rem;
  }
  
  .pricing-card__name {
    font-size: 1.75rem;
    line-height: 1.3;
  }
  
  .pricing-card__description {
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
  }
  
  .pricing-card__price {
    font-size: 2rem;
    line-height: 1;
    margin: 0.5rem 0 0 0;
  }
  
  .pricing-card__features {
    margin-bottom: 1.25rem;
  }
  
  .pricing-card__feature {
    font-size: 0.75rem;
    margin-bottom: 0.625rem;
    gap: 10px;
  }
  
  .pricing-card__feature-icon {
    width: 14px;
    height: 14px;
    margin-top: 1px;
  }
  
  .pricing-card__button {
    font-size: 0.875rem;
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
  }
  
  .pricing-card__badge {
    font-size: 10px;
    padding: 3px 10px;
    top: -20px;
    border-radius: 16px;
  }
}

@media (max-width: 480px) {
  .pricing-section {
    padding: 2rem 0;
  }
  
  .pricing-section__header {
    padding: 0 0.5rem;
    margin-bottom: 1.5rem;
  }
  
  .pricing-section__title {
    font-size: 1.5rem;
  }
  
  .pricing-section__grid {
    padding: 0 0.5rem;
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }
  
  .pricing-card {
    padding: 1rem;
  }
  
  .pricing-card__header {
    margin-bottom: 1rem;
  }
  
  .pricing-card__name {
    font-size: 1.625rem;
  }
  
  .pricing-card__price {
    font-size: 1.75rem;
  }
  
  .pricing-card__features {
    margin-bottom: 1rem;
  }
  
  .pricing-card__feature {
    font-size: 0.7rem;
    margin-bottom: 0.5rem;
  }
  
  .pricing-card__button {
    font-size: 0.8rem;
    padding: 0.625rem 1rem;
  }
}

/* ==========================================
   ANIMATIONS & TRANSITIONS
   ========================================== */

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

.pricing-card {
  animation: slideUp 0.6s ease-out;
}

/* Délai progressif pour l'animation d'entrée */
.pricing-card:nth-child(1) { animation-delay: 0.1s; }
.pricing-card:nth-child(2) { animation-delay: 0.2s; }
.pricing-card:nth-child(3) { animation-delay: 0.3s; }

/* Préférer les animations réduites pour l'accessibilité */
@media (prefers-reduced-motion: reduce) {
  .pricing-card {
    animation: none;
  }
  
  .pricing-card:hover {
    transform: none;
  }
}

/* Newsletter */
/*------------------------------------
    Newsletter Section V1
    Composant de newsletter avec image et formulaire
------------------------------------*/

/* Variables spécifiques au composant */
:root {
  --newsletter-section-padding: 5rem 0;
  --newsletter-section-padding-mobile: 3rem 0;
  --newsletter-section-border-radius: 16px;
  --newsletter-image-height: 100%; /* Hauteur de l'image */
  --newsletter-content-padding: 3rem;
  --newsletter-content-padding-mobile: 2rem;
  --newsletter-title-margin: 0 0 1rem 0;
  --newsletter-description-margin: 0 0 2rem 0;
}

/* Base du composant */
.newsletter-section {
  position: relative;
  padding: 0;
  overflow: hidden;
}

/* Variante container (contenue dans une largeur max) */
.newsletter-section--container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Variante arrondie (uniquement si container) */
.newsletter-section--rounded {
  border-radius: var(--newsletter-section-border-radius);
}

.newsletter-section__image.right {
  border-radius: 0 var(--newsletter-section-border-radius) var(--newsletter-section-border-radius) 0;
}

.newsletter-section__image.left {
  border-radius: var(--newsletter-section-border-radius) 0 0 var(--newsletter-section-border-radius);
}

/* Variante fullwidth (s'étend sur toute la largeur) */
.newsletter-section--fullwidth {
  width: 100%;
}

/* Grille spécifique pour la version fullwidth avec répartition 40/60 */
.newsletter-section__grid--fullwidth {
  display: flex;
  flex-wrap: wrap;
}

.newsletter-section__grid--fullwidth .newsletter-section__content {
  width: 60%;
  flex: 0 0 60%;
  max-width: 800px;
  padding: 4rem 5rem;
}

.newsletter-section__grid--fullwidth .newsletter-section__image-container {
  width: 40%;
  flex: 0 0 40%;
}

@media (min-width: 768px) {

  .newsletter-section__image.left {
    clip-path: circle(99% at 0 99%);
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .newsletter-section__image.right {
    clip-path: circle(99% at 100% 99%);
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

}

/* Responsive pour la grille fullwidth */
@media (max-width: 767px) {
  .newsletter-section__grid--fullwidth .newsletter-section__image-container {
    width: 100%;
    flex: 0 0 100%;
  }
}

/* Conteneur de contenu interne */
.newsletter-section__inner {
  position: relative;
}

/* Image de la newsletter */
.newsletter-section__image-container {
  position: relative;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.newsletter-section__image-wrapper {
  height: 100%;
  width: 100%;
  position: relative;
}

.newsletter-section__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Style spécifique pour l'image en mode fullwidth */
.newsletter-section--fullwidth .newsletter-section__image-container {
  height: 100%;
  min-height: 540px;
}

.newsletter-section--fullwidth .newsletter-section__image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Contenu texte et formulaire */
.newsletter-section__content {
  padding: var(--newsletter-content-padding);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 800px;
}

/* Alignement conditionnel du contenu selon la position de l'image */
/* Quand l'image est à gauche (première colonne), le contenu est aligné à gauche */
.grid > .newsletter-section__image-container:first-child + .newsletter-section__content {
  margin-left: 0;
  margin-right: auto;
}

/* Quand l'image est à droite (dernière colonne), le contenu est aligné à droite */
.grid > .newsletter-section__content:first-child {
  margin-left: auto;
  margin-right: 0;
}

/* Cas spécifique pour la version fullwidth */
.newsletter-section__grid--fullwidth .newsletter-section__content {
  width: 60%;
  flex: 0 0 60%;
  max-width: 800px;
  padding: 4rem 5rem;
}

/* Si l'image est à droite dans la version fullwidth */
.newsletter-section__grid--fullwidth > .newsletter-section__content:first-child {
  margin-left: auto;
  margin-right: 0;
}

/* Si l'image est à gauche dans la version fullwidth */
.newsletter-section__grid--fullwidth > .newsletter-section__image-container:first-child + .newsletter-section__content {
  margin-left: 0;
  margin-right: auto;
}

/* Responsive pour le padding en mode fullwidth */
@media (max-width: 1024px) {
  .newsletter-section__grid--fullwidth .newsletter-section__content {
    padding: 3rem 4rem;
  }
}

@media (max-width: 767px) {
  .newsletter-section__grid--fullwidth .newsletter-section__content {
    padding: 2rem;
    width: 100%;
    flex: 0 0 100%;
  }
}

/* Titre */
.newsletter-section__title {
  margin: var(--newsletter-title-margin);
}

.section--dark .newsletter-section__title {
  color: var(--color-white);
}

/* Description */
.newsletter-section__description {
  font-size: var(--font-size-lg, 1.125rem);
  line-height: 1.6;
}


/* Formulaire */
.newsletter-section__form {
  display: flex;
  width: 100%;
  max-width: 500px;
}

.newsletter-section__form .hs_cos_wrapper_type_form{
 width: 100%; 
}

.newsletter-section__form .input-container {
  flex: 1;
  margin-right: 0.5rem;
}

/* Sur desktop, disposition du formulaire en ligne */
@media (min-width: 768px) {
  .newsletter-section__form {
    flex-direction: row;
  }
}

/* === Styles pour formulaire HubSpot === */
.newsletter-section__form .hs-form {
  display: flex;
  width: 100%;
  align-items: flex-end;
  gap: 0.5rem;
}

.newsletter-section__form .hs_email {
  flex: 1;
  margin-bottom: 0 !important;
}

.newsletter-section__form .hs_email label {
  display: none !important;
}

.newsletter-section__form .hs_submit {
  margin-bottom: 0 !important;
  flex-shrink: 0;
}

.newsletter-section__form .hs-input {
  width: 100% !important;
  padding: 0.75rem 1.25rem !important;
  border: 1px solid var(--gray-300) !important;
  border-radius: 9999px !important;
  background-color: #fff !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  color: var(--gray-800) !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
  box-shadow: none !important;
}

.newsletter-section__form .hs-input:focus {
  border-color: var(--primary) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--primary) 25%, transparent) !important;
}

.newsletter-section__form .hs-input::placeholder {
  color: var(--gray-500) !important;
  opacity: 1 !important;
}

.newsletter-section__form .hs-button {
  padding: 0.75rem 1.5rem !important;
  background-color: var(--secondary) !important;
  border: 1px solid var(--secondary) !important;
  border-radius: 9999px !important;
  color: var(--white) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.newsletter-section__form .hs-button:hover {
  background-color: var(--button-primary-hover-bg) !important;
  border-color: var(--button-primary-hover-bg) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}



/* Styles spécifiques pour les inputs sur sections sombres */
.section--dark .newsletter-section__form .hs-input,
.section--secondary .newsletter-section__form .hs-input {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: var(--color-white) !important;
}

.section--dark .newsletter-section__form .hs-input:focus,
.section--secondary .newsletter-section__form .hs-input:focus {
  border-color: var(--primary) !important;
  background-color: rgba(255, 255, 255, 0.15) !important;
}

.section--dark .newsletter-section__form .hs-input::placeholder,
.section--secondary .newsletter-section__form .hs-input::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Masquer les éléments inutiles du formulaire HubSpot */
.newsletter-section__form .hs-field-desc,
.newsletter-section__form .hs-form-required {
  display: none !important;
}

/* Masquer le titre H3 dans le formulaire */
.newsletter-section .newsletter-section__form h3 {
  display: none;
}

/* Supprimer le margin-top du bouton submit */
.newsletter-section .newsletter-section__form .hs_submit {
  margin-top: 0px !important;
}

/* ================================
   STYLES DE BOUTONS POUR FORMULAIRE NEWSLETTER
   ================================ */

/* ================================
   ICÔNE FLÈCHE SVG POUR BOUTON SUBMIT
   ================================ */

/* Icône par défaut (blanche pour contraste) */
.newsletter-section__form .hs-button::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform 0.2s ease;
  vertical-align: middle;
}

/* Animation au hover : la flèche se déplace légèrement vers la droite */
.newsletter-section__form .hs-button:hover::after {
  transform: translateX(3px);
}

/* ================================
   ICÔNES ADAPTÉES AUX STYLES DE BOUTONS
   ================================ */

/* Bouton Primary - Icône blanche */
.newsletter-form--btn-primary .hs-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}

/* Bouton Secondary - Icône blanche */
.newsletter-form--btn-secondary .hs-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}

/* Bouton Outline - Icône couleur primary */
.newsletter-form--btn-outline .hs-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23032C6D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}

.newsletter-form--btn-outline .hs-button:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}

/* Bouton Outline Dark - Icône sombre */
.newsletter-form--btn-outline-dark .hs-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23032C6D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}

.newsletter-form--btn-outline-dark .hs-button:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}

/* Bouton Solid White - Icône sombre */
.newsletter-form--btn-solid-white .hs-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23032C6D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}

/* Bouton Outline White - Icône blanche */
.newsletter-form--btn-outline-white .hs-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}

.newsletter-form--btn-outline-white .hs-button:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23032C6D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}

/* Bouton Primary */
.newsletter-form--btn-primary .hs-button {
  background-color: var(--button-primary-bg) !important;
  border-color: var(--button-primary-bg) !important;
  color: var(--button-primary-txt) !important;
}

.newsletter-form--btn-primary .hs-button:hover {
  background-color: var(--button-primary-hover-bg) !important;
  border-color: var(--button-primary-hover-bg) !important;
  color: var(--button-primary-hover-txt) !important;
}

/* Bouton Secondary */
.newsletter-form--btn-secondary .hs-button {
  background-color: var(--button-secondary-bg) !important;
  border-color: var(--button-secondary-bg) !important;
  color: var(--button-secondary-txt) !important;
}

.newsletter-form--btn-secondary .hs-button:hover {
  background-color: var(--button-secondary-hover-bg) !important;
  border-color: var(--button-secondary-hover-bg) !important;
  color: var(--button-secondary-hover-txt) !important;
}

/* Bouton Outline */
.newsletter-form--btn-outline .hs-button {
  background-color: var(--button-outline-bg) !important;
  border-color: var(--button-outline-border) !important;
  color: var(--button-outline-txt) !important;
}

.newsletter-form--btn-outline .hs-button:hover {
  background-color: var(--button-outline-hover-bg) !important;
  border-color: var(--button-outline-hover-border) !important;
  color: var(--button-outline-hover-txt) !important;
}

/* Bouton Outline Dark */
.newsletter-form--btn-outline-dark .hs-button {
  background-color: var(--button-outline-dark-bg) !important;
  border-color: var(--button-outline-dark-border) !important;
  color: var(--button-outline-dark-txt) !important;
}

.newsletter-form--btn-outline-dark .hs-button:hover {
  background-color: var(--button-outline-dark-hover-bg) !important;
  border-color: var(--button-outline-dark-hover-border) !important;
  color: var(--button-outline-dark-hover-txt) !important;
}

/* Bouton Solid White */
.newsletter-form--btn-solid-white .hs-button {
  background-color: var(--button-solid-white-bg) !important;
  border-color: var(--button-solid-white-bg) !important;
  color: var(--button-solid-white-txt) !important;
}

.newsletter-form--btn-solid-white .hs-button:hover {
  background-color: var(--button-solid-white-hover-bg) !important;
  border-color: var(--button-solid-white-hover-bg) !important;
  color: var(--button-solid-white-hover-txt) !important;
}

/* Bouton Outline White */
.newsletter-form--btn-outline-white .hs-button {
  background-color: var(--button-outline-white-bg) !important;
  border-color: var(--button-outline-white-border) !important;
  color: var(--button-outline-white-txt) !important;
}

.newsletter-form--btn-outline-white .hs-button:hover {
  background-color: var(--button-outline-white-hover-bg) !important;
  border-color: var(--button-outline-white-hover-border) !important;
  color: var(--button-outline-white-hover-txt) !important;
}

.newsletter-section__form .hs-error-msgs {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--error, #dc2626);
}

/* Responsive pour mobile */
@media (max-width: 767px) {
  .newsletter-section__form {
    flex-direction: column;
  }
  
  .newsletter-section__form .input-container {
    margin-right: 0;
    margin-bottom: 0.5rem;
  }
  
  .newsletter-section__content {
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Ajustements HubSpot pour mobile */
  .newsletter-section__form .hs-form {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .newsletter-section__form .hs_email {
    width: 100%;
  }
  
  .newsletter-section__form .hs_submit {
    width: 100%;
  }
  
  .newsletter-section__form .hs-button {
    width: 100% !important;
  }
}

/* Adaptations pour les variantes de couleurs */
/* Les héritages sont déjà gérés via les classes section--light, etc. */

/* Animation optionnelle de fade-in */
.newsletter-section--animate {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.newsletter-section--animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 767px) {
  .newsletter-section {
    padding: var(--newsletter-section-padding-mobile);
  }
  
  .newsletter-section__content {
    padding: var(--newsletter-content-padding-mobile);
  }
  
  .newsletter-section__image-container {
    min-height: 250px;
  }
  
  .newsletter-section__description {
    font-size: var(--font-size-base, 1rem);
  }
}

/* ================================
   BACKGROUND IMAGE STYLES - NEWSLETTER V1
   ================================ */

/* Conteneur avec background image */
.newsletter-section__inner.has-background-image {
  position: relative;
  background-attachment: scroll;
}

/* Overlay pour améliorer la lisibilité */
.newsletter-section__inner .background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
}

/* Contenu au-dessus de l'overlay */
.newsletter-section__inner.has-background-image > *:not(.background-overlay) {
  position: relative;
  z-index: 2;
}

/* Variantes d'overlay - Sombre */
.newsletter-section__inner .background-overlay--dark-light {
  background-color: rgba(0, 0, 0, 0.2);
}

.newsletter-section__inner .background-overlay--dark-medium {
  background-color: rgba(0, 0, 0, 0.4);
}

.newsletter-section__inner .background-overlay--dark-strong {
  background-color: rgba(0, 0, 0, 0.6);
}

/* Variantes d'overlay - Primary */
.newsletter-section__inner .background-overlay--primary-light {
  background-color: var(--primary-200);
  opacity: 0.3;
}

.newsletter-section__inner .background-overlay--primary-medium {
  background-color: var(--primary-400);
  opacity: 0.5;
}

/* Variantes d'overlay - Secondary */
.newsletter-section__inner .background-overlay--secondary-light {
  background-color: var(--secondary-200);
  opacity: 0.3;
}

.newsletter-section__inner .background-overlay--secondary-medium {
  background-color: var(--secondary-400);
  opacity: 0.5;
}

/* Optimisations mobiles */
@media (max-width: 768px) {
  .newsletter-section__inner.has-background-image {
    background-attachment: scroll !important;
  }
}
/*------------------------------------
    Newsletter Section V2
    Composant de newsletter simplifié et réutilisable
------------------------------------*/

/* Variables spécifiques au composant */
:root {
  --newsletter-v2-padding-y: 4rem;
  --newsletter-v2-padding-y-mobile: 3rem;
  --newsletter-v2-padding-x: 2rem;
  --newsletter-v2-max-width: 720px;
  --newsletter-v2-title-margin: 0 0 1rem 0;
  --newsletter-v2-description-margin: 0 0 2rem 0;
}

/* Base du composant */
.newsletter-section-v2 {
  position: relative;
  padding: var(--newsletter-v2-padding-y) var(--newsletter-v2-padding-x);
}

/* Application des variantes de largeur et radius via les classes existantes */
/* Ces classes sont déjà définies dans le système de thème principal */

/* Structure interne */
.newsletter-section-v2__inner {
  max-width: var(--newsletter-v2-max-width);
  margin: 0 auto;
  text-align: center;
}

/* Titre */
.newsletter-section-v2__title {
  font-size: var(--font-size-4xl, 1.875rem);
  line-height: 1.2;
  margin: var(--newsletter-v2-title-margin);
}

/* Icône au-dessus du titre */
.newsletter-section-v2__icon {
  display: block;
  height: auto;
  margin: 0 auto 1rem;
  padding-bottom: 0.5rem;
}

/* Description */
.newsletter-section-v2__description {
  font-size: var(--font-size-lg, 1.125rem);
  line-height: 1.6;
  margin: var(--newsletter-v2-description-margin);
}

/* Formulaire */
.newsletter-section-v2__form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

.newsletter-section-v2__form .hs_cos_wrapper_type_form{
 width: 100%; 
}


/* Sur desktop, disposition du formulaire en ligne */
@media (min-width: 768px) {
  .newsletter-section-v2__form {
    flex-direction: row;
  }
  
  .newsletter-section-v2__form .input-container {
    flex: 1;
    margin-right: 0.5rem;
  }
}

/* === Styles pour formulaire HubSpot === */
.newsletter-section-v2__form .hs-form {
  display: flex;
  width: 100%;
  align-items: flex-end;
  gap: 0.75rem;
}

.newsletter-section-v2__form .hs_email {
  flex: 1;
  margin-bottom: 0 !important;
}

.newsletter-section-v2__form .hs_email label {
  display: none !important;
}

.newsletter-section-v2__form .hs_submit {
  margin-bottom: 0 !important;
  flex-shrink: 0;
}

.newsletter-section-v2__form .hs-input {
  width: 100% !important;
  padding: 0.75rem 1.25rem !important;
  border: 1px solid var(--gray-300) !important;
  border-radius: 9999px !important;
  background-color: #fff !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  color: var(--gray-800) !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
  box-shadow: none !important;
}

.newsletter-section-v2__form .hs-input:focus {
  border-color: var(--primary) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--primary) 25%, transparent) !important;
}

.newsletter-section-v2__form .hs-input::placeholder {
  color: var(--gray-500) !important;
  opacity: 1 !important;
}

.newsletter-section-v2__form .hs-button {
  padding: 0.75rem 1.5rem !important;
  background-color: var(--secondary) !important;
  border: 1px solid var(--secondary) !important;
  border-radius: 9999px !important;
  color: var(--white) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.newsletter-section-v2__form .hs-button:hover {
  background-color: var(--button-primary-hover-bg) !important;
  border-color: var(--button-primary-hover-bg) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}



/* Styles spécifiques pour les inputs sur sections sombres */
.section--dark .newsletter-section-v2__form .hs-input,
.section--secondary .newsletter-section-v2__form .hs-input {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: var(--color-white) !important;
}

.section--dark .newsletter-section-v2__form .hs-input:focus,
.section--secondary .newsletter-section-v2__form .hs-input:focus {
  border-color: var(--primary) !important;
  background-color: rgba(255, 255, 255, 0.15) !important;
}

.section--dark .newsletter-section-v2__form .hs-input::placeholder,
.section--secondary .newsletter-section-v2__form .hs-input::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Masquer les éléments inutiles du formulaire HubSpot */
.newsletter-section-v2__form .hs-field-desc,
.newsletter-section-v2__form .hs-form-required {
  display: none !important;
}

.newsletter-section-v2__form .hs-error-msgs {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--error, #dc2626);
}

/* Ajustements pour les couleurs de fond sombres */
.section--dark .newsletter-section-v2__title,
.section--dark .newsletter-section-v2__description,
.section--secondary .newsletter-section-v2__title,
.section--secondary .newsletter-section-v2__description {
  color: var(--color-white);
}

/* Responsive */
@media (max-width: 767px) {
  .newsletter-section-v2 {
    padding: var(--newsletter-v2-padding-y-mobile) var(--newsletter-v2-padding-x);
  }
  
  .newsletter-section-v2__title {
    font-size: var(--font-size-2xl, 1.5rem);
  }
  
  .newsletter-section-v2__description {
    font-size: var(--font-size-base, 1rem);
  }
  
  .newsletter-section-v2__form .input-container {
    margin-right: 0;
    margin-bottom: 0.5rem;
  }

  /* Ajustements HubSpot pour mobile */
  .newsletter-section-v2__form .hs-form {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .newsletter-section-v2__form .hs_email {
    width: 100%;
  }
  
  .newsletter-section-v2__form .hs_submit {
    width: 100%;
  }
  
  .newsletter-section-v2__form .hs-button {
    width: 100% !important;
  }
}

/* ================================
   STYLES DE BOUTONS POUR FORMULAIRE NEWSLETTER V2
   ================================ */

/* ================================
   ICÔNE FLÈCHE SVG POUR BOUTON SUBMIT
   ================================ */

/* Icône par défaut (blanche pour contraste) */
.newsletter-section-v2__form .hs-button::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform 0.2s ease;
  vertical-align: middle;
}

/* Animation au hover : la flèche se déplace légèrement vers la droite */
.newsletter-section-v2__form .hs-button:hover::after {
  transform: translateX(3px);
}

/* ================================
   ICÔNES ADAPTÉES AUX STYLES DE BOUTONS
   ================================ */

/* Bouton Primary - Icône blanche */
.newsletter-form--btn-primary .hs-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}

/* Bouton Secondary - Icône blanche */
.newsletter-form--btn-secondary .hs-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}

/* Bouton Outline - Icône couleur primary */
.newsletter-form--btn-outline .hs-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23032C6D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}

.newsletter-form--btn-outline .hs-button:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}

/* Bouton Outline Dark - Icône sombre */
.newsletter-form--btn-outline-dark .hs-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23032C6D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}

.newsletter-form--btn-outline-dark .hs-button:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}

/* Bouton Solid White - Icône sombre */
.newsletter-form--btn-solid-white .hs-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23032C6D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}

/* Bouton Outline White - Icône blanche */
.newsletter-form--btn-outline-white .hs-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}

.newsletter-form--btn-outline-white .hs-button:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23032C6D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}

/* Bouton Primary */
.newsletter-form--btn-primary .hs-button {
  background-color: var(--button-primary-bg) !important;
  border-color: var(--button-primary-bg) !important;
  color: var(--button-primary-txt) !important;
}

.newsletter-form--btn-primary .hs-button:hover {
  background-color: var(--button-primary-hover-bg) !important;
  border-color: var(--button-primary-hover-bg) !important;
  color: var(--button-primary-hover-txt) !important;
}

/* Bouton Secondary */
.newsletter-form--btn-secondary .hs-button {
  background-color: var(--button-secondary-bg) !important;
  border-color: var(--button-secondary-bg) !important;
  color: var(--button-secondary-txt) !important;
}

.newsletter-form--btn-secondary .hs-button:hover {
  background-color: var(--button-secondary-hover-bg) !important;
  border-color: var(--button-secondary-hover-bg) !important;
  color: var(--button-secondary-hover-txt) !important;
}

/* Bouton Outline */
.newsletter-form--btn-outline .hs-button {
  background-color: var(--button-outline-bg) !important;
  border-color: var(--button-outline-border) !important;
  color: var(--button-outline-txt) !important;
}

.newsletter-form--btn-outline .hs-button:hover {
  background-color: var(--button-outline-hover-bg) !important;
  border-color: var(--button-outline-hover-border) !important;
  color: var(--button-outline-hover-txt) !important;
}

/* Bouton Outline Dark */
.newsletter-form--btn-outline-dark .hs-button {
  background-color: var(--button-outline-dark-bg) !important;
  border-color: var(--button-outline-dark-border) !important;
  color: var(--button-outline-dark-txt) !important;
}

.newsletter-form--btn-outline-dark .hs-button:hover {
  background-color: var(--button-outline-dark-hover-bg) !important;
  border-color: var(--button-outline-dark-hover-border) !important;
  color: var(--button-outline-dark-hover-txt) !important;
}

/* Bouton Solid White */
.newsletter-form--btn-solid-white .hs-button {
  background-color: var(--button-solid-white-bg) !important;
  border-color: var(--button-solid-white-bg) !important;
  color: var(--button-solid-white-txt) !important;
}

.newsletter-form--btn-solid-white .hs-button:hover {
  background-color: var(--button-solid-white-hover-bg) !important;
  border-color: var(--button-solid-white-hover-bg) !important;
  color: var(--button-solid-white-hover-txt) !important;
}

/* Bouton Outline White */
.newsletter-form--btn-outline-white .hs-button {
  background-color: var(--button-outline-white-bg) !important;
  border-color: var(--button-outline-white-border) !important;
  color: var(--button-outline-white-txt) !important;
}

.newsletter-form--btn-outline-white .hs-button:hover {
  background-color: var(--button-outline-white-hover-bg) !important;
  border-color: var(--button-outline-white-hover-border) !important;
  color: var(--button-outline-white-hover-txt) !important;
}
/*------------------------------------
    Newsletter Section V3
    Composant de newsletter en 2 colonnes
------------------------------------*/

/* Variables spécifiques au composant */
:root {
  --newsletter-v3-padding-y: 4rem;
  --newsletter-v3-padding-y-mobile: 3rem;
  --newsletter-v3-padding-x: 2rem;
  --newsletter-v3-padding-content: 2rem;
  --newsletter-v3-padding-content-mobile: 0 1rem;
  --newsletter-v3-container-max-width: var(--container-max-width, 1200px);
}

/* Base du composant */
.newsletter-section-v3 {
  position: relative;
  padding: var(--newsletter-v3-padding-y) var(--newsletter-v3-padding-x);
}

/* Structure interne */
.newsletter-section-v3__inner {
  height: 100%;
  width: 100%;
}

/* Grid et colonnes */
.newsletter-section-v3__inner .grid {
  height: 100%;
}

/* Contenu (titre) */
.newsletter-section-v3__content {
  align-items: center;
  padding: var(--newsletter-v3-padding-content);
}

.newsletter-section-v3__title {
  font-size: var(--font-size-4xl, 1.875rem);
  line-height: 1.2;
  margin: 0;
  padding-bottom: 10px;
}

/* Container du formulaire */
.newsletter-section-v3__form-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--newsletter-v3-padding-content);
}

/* Formulaire */
.newsletter-section-v3__form {
  width: 100%;
  max-width: 450px;
}

.newsletter-section-v3__form .input-container {
  flex: 1;
  margin-right: 0.75rem;
}

/* Styles pour formulaire HubSpot */
.newsletter-section-v3__form .hs-form {
  display: flex;
  width: 100%;
  align-items: flex-end;
  gap: 0.75rem;
}

.newsletter-section-v3__form .hs_email {
  flex: 1;
  margin-bottom: 0 !important;
}

.newsletter-section-v3__form .hs_email label {
  display: none !important;
}

.newsletter-section-v3__form .hs_submit {
  margin-bottom: 0 !important;
  flex-shrink: 0;
}

.newsletter-section-v3__form .hs-input {
  width: 100% !important;
  padding: 0.75rem 1rem !important;
  border: 1px solid var(--gray-300) !important;
  border-radius: 9999px !important;
  background-color: #fff !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  color: var(--gray-800) !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
  box-shadow: none !important;
}

.newsletter-section-v3__form .hs-input:focus {
  border-color: var(--primary) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--primary) 25%, transparent) !important;
}

.newsletter-section-v3__form .hs-input::placeholder {
  color: var(--gray-500) !important;
  opacity: 1 !important;
}

.newsletter-section-v3__form .hs-input::-webkit-input-placeholder {
  color: var(--gray-500) !important;
  opacity: 1 !important;
}

.newsletter-section-v3__form .hs-input::-moz-placeholder {
  color: var(--gray-500) !important;
  opacity: 1 !important;
}

.newsletter-section-v3__form .hs-button {
  padding: 0.75rem 1.5rem !important;
  background-color: var(--primary) !important;
  border: 1px solid var(--primary) !important;
  border-radius: 9999px !important;
  color: var(--secondary) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.newsletter-section-v3__form .hs-button:hover {
  background-color: var(--button-primary-hover-bg) !important;
  border-color: var(--button-primary-hover-bg) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}



/* Styles spécifiques pour les inputs sur sections sombres */
.section--dark .newsletter-section-v3__form .hs-input,
.section--secondary .newsletter-section-v3__form .hs-input {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: var(--color-white) !important;
}

.section--dark .newsletter-section-v3__form .hs-input:focus,
.section--secondary .newsletter-section-v3__form .hs-input:focus {
  border-color: var(--primary) !important;
  background-color: rgba(255, 255, 255, 0.15) !important;
}

.section--dark .newsletter-section-v3__form .hs-input::placeholder,
.section--secondary .newsletter-section-v3__form .hs-input::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}

.section--dark .newsletter-section-v3__form .hs-input::-webkit-input-placeholder,
.section--secondary .newsletter-section-v3__form .hs-input::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}

.section--dark .newsletter-section-v3__form .hs-input::-moz-placeholder,
.section--secondary .newsletter-section-v3__form .hs-input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}

.newsletter-section-v3__form .hs-error-msgs {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--error, #dc2626);
}

/* Masquer les éléments inutiles du formulaire HubSpot */
.newsletter-section-v3__form .hs-field-desc,
.newsletter-section-v3__form .hs-form-required {
  display: none !important;
}

/* Ajustements pour les couleurs de fond */
.section--primary .newsletter-section-v3__title {
  color: var(--color-dark);
}

/* Ajustements pour la version container */
.section--container .newsletter-section-v3__inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* Styles pour le container stylisé */
.newsletter-section-v3__container {
  width: 100%;
  max-width: var(--newsletter-v3-container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding: var(--newsletter-v3-padding-y) var(--newsletter-v3-padding-x);
  position: relative;
}

/* Styles des éléments internes pour chaque variante */
.section--dark .newsletter-section-v3__title,
.section--secondary .newsletter-section-v3__title {
  color: var(--color-white);
}

.section--primary .newsletter-section-v3__title {
  color: var(--color-dark);
}

.newsletter-section-v3__container.section--radius {
  border-radius: 20px;
  overflow: hidden;
}

.newsletter-section-v3__container .grid {
  height: 100%;
  gap: 0;
}

/* Responsive */
@media (max-width: 767px) {
  /* Ajustements pour mobile */
  .newsletter-section-v3 {
    padding: var(--newsletter-v3-padding-y-mobile) var(--newsletter-v3-padding-x);
    text-align:center;
  }
  
  .newsletter-section-v3__content,
  .newsletter-section-v3__form-container {
    padding: var(--newsletter-v3-padding-content-mobile);
  }
  
  .newsletter-section-v3__title {
    text-align: center;
  }
  
  .newsletter-section-v3__form {
    flex-direction: column;
    margin: 0 auto;
  }
  
  .newsletter-section-v3__form .input-container {
    margin-right: 0;
    margin-bottom: 0.75rem;
  }
  
  /* Ajustements HubSpot pour mobile */
  .newsletter-section-v3__form .hs-form {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .newsletter-section-v3__form .hs_email {
    width: 100%;
  }
  
  .newsletter-section-v3__form .hs_submit {
    width: 100%;
  }
  
  .newsletter-section-v3__form .hs-button {
    width: 100% !important;
  }
}

/* ================================
   BACKGROUND IMAGE STYLES - NEWSLETTER V3
   ================================ */

/* Conteneur avec background image */
.newsletter-section-v3__container.has-background-image {
  position: relative;
  background-attachment: scroll;
}

/* Overlay pour améliorer la lisibilité */
.newsletter-section-v3__container .background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
}

/* Contenu au-dessus de l'overlay */
.newsletter-section-v3__container .newsletter-content-wrapper {
  position: relative;
  z-index: 2;
}

/* Variantes d'overlay - Sombre */
.newsletter-section-v3__container .background-overlay--dark-light {
  background-color: rgba(0, 0, 0, 0.2);
}

.newsletter-section-v3__container .background-overlay--dark-medium {
  background-color: rgba(0, 0, 0, 0.4);
}

.newsletter-section-v3__container .background-overlay--dark-strong {
  background-color: rgba(0, 0, 0, 0.6);
}

/* Variantes d'overlay - Primary */
.newsletter-section-v3__container .background-overlay--primary-light {
  background-color: var(--primary-200);
  opacity: 0.3;
}

.newsletter-section-v3__container .background-overlay--primary-medium {
  background-color: var(--primary-400);
  opacity: 0.5;
}

/* Variantes d'overlay - Secondary */
.newsletter-section-v3__container .background-overlay--secondary-light {
  background-color: var(--secondary-200);
  opacity: 0.3;
}

.newsletter-section-v3__container .background-overlay--secondary-medium {
  background-color: var(--secondary-400);
  opacity: 0.5;
}

/* Optimisations mobiles */
@media (max-width: 768px) {
  .newsletter-section-v3__container.has-background-image {
    background-attachment: scroll !important;
  }
}

/* ================================
   STYLES DE BOUTONS POUR FORMULAIRE NEWSLETTER V3
   ================================ */

/* ================================
   ICÔNE FLÈCHE SVG POUR BOUTON SUBMIT
   ================================ */

/* Icône par défaut (blanche pour contraste) */
.newsletter-section-v3__form .hs-button::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform 0.2s ease;
  vertical-align: middle;
}

/* Animation au hover : la flèche se déplace légèrement vers la droite */
.newsletter-section-v3__form .hs-button:hover::after {
  transform: translateX(3px);
}

/* ================================
   ICÔNES ADAPTÉES AUX STYLES DE BOUTONS
   ================================ */

/* Bouton Primary - Icône blanche */
.newsletter-form--btn-primary .hs-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}

/* Bouton Secondary - Icône blanche */
.newsletter-form--btn-secondary .hs-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}

/* Bouton Outline - Icône couleur primary */
.newsletter-form--btn-outline .hs-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23032C6D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}

.newsletter-form--btn-outline .hs-button:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}

/* Bouton Outline Dark - Icône sombre */
.newsletter-form--btn-outline-dark .hs-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23032C6D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}

.newsletter-form--btn-outline-dark .hs-button:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}

/* Bouton Solid White - Icône sombre */
.newsletter-form--btn-solid-white .hs-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23032C6D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}

/* Bouton Outline White - Icône blanche */
.newsletter-form--btn-outline-white .hs-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}

.newsletter-form--btn-outline-white .hs-button:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23032C6D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}

/* Bouton Primary */
.newsletter-form--btn-primary .hs-button {
  background-color: var(--button-primary-bg) !important;
  border-color: var(--button-primary-bg) !important;
  color: var(--button-primary-txt) !important;
}

.newsletter-form--btn-primary .hs-button:hover {
  background-color: var(--button-primary-hover-bg) !important;
  border-color: var(--button-primary-hover-bg) !important;
  color: var(--button-primary-hover-txt) !important;
}

/* Bouton Secondary */
.newsletter-form--btn-secondary .hs-button {
  background-color: var(--button-secondary-bg) !important;
  border-color: var(--button-secondary-bg) !important;
  color: var(--button-secondary-txt) !important;
}

.newsletter-form--btn-secondary .hs-button:hover {
  background-color: var(--button-secondary-hover-bg) !important;
  border-color: var(--button-secondary-hover-bg) !important;
  color: var(--button-secondary-hover-txt) !important;
}

/* Bouton Outline */
.newsletter-form--btn-outline .hs-button {
  background-color: var(--button-outline-bg) !important;
  border-color: var(--button-outline-border) !important;
  color: var(--button-outline-txt) !important;
}

.newsletter-form--btn-outline .hs-button:hover {
  background-color: var(--button-outline-hover-bg) !important;
  border-color: var(--button-outline-hover-border) !important;
  color: var(--button-outline-hover-txt) !important;
}

/* Bouton Outline Dark */
.newsletter-form--btn-outline-dark .hs-button {
  background-color: var(--button-outline-dark-bg) !important;
  border-color: var(--button-outline-dark-border) !important;
  color: var(--button-outline-dark-txt) !important;
}

.newsletter-form--btn-outline-dark .hs-button:hover {
  background-color: var(--button-outline-dark-hover-bg) !important;
  border-color: var(--button-outline-dark-hover-border) !important;
  color: var(--button-outline-dark-hover-txt) !important;
}

/* Bouton Solid White */
.newsletter-form--btn-solid-white .hs-button {
  background-color: var(--button-solid-white-bg) !important;
  border-color: var(--button-solid-white-bg) !important;
  color: var(--button-solid-white-txt) !important;
}

.newsletter-form--btn-solid-white .hs-button:hover {
  background-color: var(--button-solid-white-hover-bg) !important;
  border-color: var(--button-solid-white-hover-bg) !important;
  color: var(--button-solid-white-hover-txt) !important;
}

/* Bouton Outline White */
.newsletter-form--btn-outline-white .hs-button {
  background-color: var(--button-outline-white-bg) !important;
  border-color: var(--button-outline-white-border) !important;
  color: var(--button-outline-white-txt) !important;
}

.newsletter-form--btn-outline-white .hs-button:hover {
  background-color: var(--button-outline-white-hover-bg) !important;
  border-color: var(--button-outline-white-hover-border) !important;
  color: var(--button-outline-white-hover-txt) !important;
}

/* Testimonials */
/*------------------------------------
    Testimonial Component
------------------------------------*/

:root {
  --testimonial-quote-size: rem;
  --testimonial-quote-line-height: 1.6;
  --testimonial-quote-weight: 500;
  --testimonial-author-size: 1.125rem;
  --testimonial-role-size: 0.875rem;
  --testimonial-gap: 136px;
  --testimonial-padding: 3rem;
  --testimonial-border-radius: 24px;
  --testimonial-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
  --testimonial-transition: all 0.3s ease;
  --testimonial-avatar-size: 3.5rem;
}

/* Section de base */
.testimonial-section {
  padding: 5rem 0;
  overflow: hidden;
}

/* Container pour le slider */
.testimonial-slider {
  position: relative;
  width: 100%;
  max-width: 1216px;
  margin: 0 auto;
}

/* Track du slider */
.testimonial-slider__track {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Item de témoignage */
.testimonial-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--testimonial-gap);
  opacity: 0;
  transition: var(--testimonial-transition);
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  visibility: hidden;
  padding: 1rem 0;
}

.testimonial-item.active {
  opacity: 1;
  position: relative;
  visibility: visible;
}

/* Media (image) du témoignage */
.testimonial-item__media {
  width: 480px;
  height: 650px;
  border-radius: var(--testimonial-border-radius);
  overflow: hidden;
  flex-shrink: 0;
}

.testimonial-item__media img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

/* Contenu du témoignage */
.testimonial-item__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 40px;
}

/* Wrapper du contenu */
.content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 592px;
}

/* Citation du témoignage */
.testimonial-item__quote {
  font-size: var(--testimonial-quote-size);
  line-height: var(--testimonial-quote-line-height);
  font-weight: var(--testimonial-quote-weight);
  color: var(--gray-900);
  max-width: 592px;
}

/* Section secondary, tertiary et dark */
.section--secondary .testimonial-item__quote,
.section--dark .testimonial-item__quote {
  color: var(--white);
}

/* Section tertiary spécifique */
.section--tertiary .testimonial-item__quote {
  color: var(--gray-900);
}

/* Auteur du témoignage */
.testimonial-item__author {
  display: flex;
  align-items: flex-start;
}

/* Info de l'auteur */
.testimonial-item__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Nom de l'auteur */
.testimonial-item__name {
  font-size: var(--testimonial-author-size);
  font-weight: 600;
  color: var(--gray-900);
}

.section--secondary .testimonial-item__name,
.section--dark .testimonial-item__name {
  color: var(--white);
}

.section--tertiary .testimonial-item__name {
  color: var(--gray-900);
}

/* Rôle de l'auteur */
.testimonial-item__role {
  font-size: var(--testimonial-role-size);
  color: var(--gray-500);
}

.section--secondary .testimonial-item__role,
.section--dark .testimonial-item__role {
  color: var(--gray-300);
}

.section--tertiary .testimonial-item__role {
  color: var(--gray-500);
}

/* Navigation du slider */
.testimonial-slider__nav {
  display: flex;
  gap: 16px;
  justify-content: flex-start;
  margin-top: 50px;
}

/* Boutons de navigation */
.testimonial-slider__nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: transparent;
  color: var(--gray-500);
  cursor: pointer;
  transition: var(--testimonial-transition);
}

/* Styles des boutons selon les variantes */
.section--primary .testimonial-slider__nav-btn {
  border-color: var(--gray-400);
  color: var(--gray-600);
}

.section--secondary .testimonial-slider__nav-btn,
.section--dark .testimonial-slider__nav-btn {
  border-color: var(--gray-700);
  color: var(--gray-300);
}

.section--tertiary .testimonial-slider__nav-btn {
  border-color: var(--tertiary-600);
  color: var(--tertiary-700);
}

.testimonial-slider__nav-btn:hover {
  background-color: var(--gray-100);
}

.section--secondary .testimonial-slider__nav-btn:hover,
.section--dark .testimonial-slider__nav-btn:hover {
  background-color: var(--gray-800);
}

.section--tertiary .testimonial-slider__nav-btn:hover {
  background-color: var(--tertiary-200);
}

.testimonial-slider__nav-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--primary-400);
}

.testimonial-slider__nav-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Icône dans les boutons */
.testimonial-slider__nav-btn .icon {
  width: 24px;
  height: 24px;
}

/* Responsive */
@media (max-width: 1200px) {
  :root {
    --testimonial-gap: 60px;
  }
  
  .testimonial-item__media {
    width: 400px;
    height: 500px;
  }
  
  .testimonial-item__content {
    height: auto;
    padding-top: 0;
  }
  
  .testimonial-slider__nav {
    margin-top: 60px;
  }
}

@media (max-width: 992px) {
  .testimonial-item {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }
  
  .testimonial-item__media {
    width: 100%;
    max-width: 488px;
    height: auto;
    aspect-ratio: 488/596;
    margin-bottom: 2rem;
  }
  
  .testimonial-item__content {
    width: 100%;
    height: auto;
    padding-top: 0;
  }
  
  .content-wrapper {
    align-items: center;
    max-width: 100%;
  }
  
  .testimonial-item__author {
    justify-content: center;
  }
  
  .testimonial-slider__nav {
    justify-content: center;
    margin-top: 20px;
  }
  
  .testimonial-item__quote {
    font-size: 1.5rem;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .testimonial-section {
    padding: 3rem 0;
  }
  
  .testimonial-item__quote {
    font-size: 1.25rem;
  }
}
/*------------------------------------
    Testimonial List Component
------------------------------------*/

/* Section de base */
.testimonial-list {
  padding: 5rem 0;
  width: 100%;
}

/* Container pour les éléments en full width */
.testimonial-list--full-width .testimonial-list__items {
  margin: 0 auto;
  padding: 0 2rem;
}

/* Conteneur des témoignages */
.testimonial-list__items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Élément de témoignage */
.testimonial-list__item {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  padding: 2rem 0;
}

/* Avatar */
.testimonial-list__avatar {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
}

.testimonial-list__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Contenu du témoignage */
.testimonial-list__content {
  flex: 1;
}

/* Citation */
.testimonial-list__quote {
  font-size: 1.8rem;
  line-height: 1.4;
  margin: 0 0 1.5rem 0;
  font-weight: 400;
}

/* Auteur */
.testimonial-list__author {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.testimonial-list__name {
  font-weight: 600;
  font-size: 1.125rem;
}

.testimonial-list__role {
  font-size: 0.875rem;
  opacity: 0.7;
}

/* Séparateur */
.testimonial-list__divider {
  height: 1px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.1);
}

/*------------------------------------
    Variantes de couleur
------------------------------------*/

/* 1. Variante white/light */
.testimonial-list.section--white,
.testimonial-list.section--light {
  background-color: var(--white);
}

.testimonial-list.section--white .testimonial-list__quote,
.testimonial-list.section--light .testimonial-list__quote {
  color: var(--gray-900);
}

.testimonial-list.section--white .testimonial-list__name,
.testimonial-list.section--light .testimonial-list__name {
  color: var(--gray-900);
}

.testimonial-list.section--white .testimonial-list__role,
.testimonial-list.section--light .testimonial-list__role {
  color: var(--gray-600);
}

.testimonial-list.section--white .testimonial-list__divider,
.testimonial-list.section--light .testimonial-list__divider {
  background-color: rgba(0, 0, 0, 0.1);
}

/* 2. Variante Primary */
.testimonial-list.section--primary {
  background-color: var(--primary);
}

.testimonial-list.section--primary .testimonial-list__quote {
  color: var(--gray-900);
}

.testimonial-list.section--primary .testimonial-list__name {
  color: var(--gray-900);
}

.testimonial-list.section--primary .testimonial-list__role {
  color: var(--gray-700);
}

.testimonial-list.section--primary .testimonial-list__divider {
  background-color: rgba(0, 0, 0, 0.2);
}

/* 3. Variante Secondary */
.testimonial-list.section--secondary {
  background-color: var(--secondary);
}

.testimonial-list.section--secondary .testimonial-list__quote {
  color: var(--white);
}

.testimonial-list.section--secondary .testimonial-list__name {
  color: var(--white);
}

.testimonial-list.section--secondary .testimonial-list__role {
  color: rgba(255, 255, 255, 0.7);
}

.testimonial-list.section--secondary .testimonial-list__divider {
  background-color: rgba(255, 255, 255, 0.2);
}

/* 4. Variante Tertiary */
.testimonial-list.section--tertiary {
  background-color: var(--tertiary, #FEF6EE);
}

.testimonial-list.section--tertiary .testimonial-list__quote {
  color: var(--gray-900);
}

.testimonial-list.section--tertiary .testimonial-list__name {
  color: var(--gray-900);
}

.testimonial-list.section--tertiary .testimonial-list__role {
  color: var(--gray-600);
}

.testimonial-list.section--tertiary .testimonial-list__divider {
  background-color: rgba(0, 0, 0, 0.1);
}

/* 5. Variante Dark */
.testimonial-list.section--dark {
  background-color: var(--section-bg-dark, #003829);
  color: var(--white);
}

.testimonial-list.section--dark .testimonial-list__quote {
  color: var(--white);
}

.testimonial-list.section--dark .testimonial-list__name {
  color: var(--white);
}

.testimonial-list.section--dark .testimonial-list__role {
  color: rgba(255, 255, 255, 0.7);
}

.testimonial-list.section--dark .testimonial-list__divider {
  background-color: rgba(255, 255, 255, 0.2);
}

/* Responsive */
@media (max-width: 768px) {
  .testimonial-list__item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
  }

  .testimonial-list__quote {
    font-size: 1.5rem;
  }

  .testimonial-list__author {
    align-items: center;
  }
}

@media (max-width: 480px) {
  .testimonial-list {
    padding: 3rem 0;
  }

  .testimonial-list__avatar {
    width: 80px;
    height: 80px;
  }
}
/*------------------------------------
    Testimonial Carousel Component
------------------------------------*/

:root {
  --testimonial-carousel-card-radius: 16px;
  --testimonial-carousel-card-text: #1d1f1e;
  --testimonial-carousel-star-color: #bef263;
  --testimonial-carousel-nav-size: 32px;
  --testimonial-carousel-card-shadow: 
    0 0 1px rgba(18, 105, 63, 0.08),
    0 1px 2px rgba(87, 93, 86, 0.16),
    0 24px 24px -12px rgba(54, 74, 54, 0.06);
  --testimonial-carousel-card-width: 400px;
  --testimonial-carousel-card-height: auto;
  --testimonial-carousel-card-padding: 32px;
  --testimonial-carousel-gap: 24px;
  --section-text-on-tertiary: var(--dark);
}

/* Section de base */
.testimonial-carousel {
  padding: 5rem 0;
  overflow: hidden;
}

/* Titre et sous-titre */
.testimonial-carousel__header {
  text-align: center;
  margin-bottom: 20px;
}

.testimonial-carousel__title {
  color: var(--color-headings-default);
  margin-bottom: 24px;
}

.testimonial-carousel__subtitle {
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--gray-600);
  opacity: 0.8;
}

.testimonial-carousel--light .testimonial-card{
  border: 1px solid var(--gray-200);
}

/* Ajustements des couleurs de texte pour les variantes */
.section--primary .testimonial-carousel__title,
.section--primary .testimonial-carousel__subtitle,
.section--secondary .testimonial-carousel__title,
.section--secondary .testimonial-carousel__subtitle,
.section--dark .testimonial-carousel__title,
.section--dark .testimonial-carousel__subtitle {
  color: var(--white);
}

.section--tertiary .testimonial-carousel__title {
  color: var(--gray-900);
}

.section--tertiary .testimonial-carousel__subtitle {
  color: var(--gray-600);
  opacity: 0.8;
}

/* Nouveau style pour le slider horizontal */
.testimonial-carousel__wrapper {
  position: relative;
  margin: 0 auto;
  padding: 40px 0;
  overflow: visible;
  max-width: 100%;
  width: 100%;
}

/* Container pour le carousel */
.testimonial-carousel__container {
  width: 100%;
  margin: 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; /* Défilement fluide sur iOS */
  scrollbar-width: none; /* Masquer la scrollbar pour Firefox */
  -ms-overflow-style: none; /* Masquer la scrollbar pour IE/Edge */
  padding-bottom: 30px; /* Espace pour la pagination */
  padding-top: 30px; /* Nouveau padding top de 30px */
  cursor: grab; /* Curseur indiquant que le contenu est glissable */
  scroll-behavior: smooth; /* Animation de défilement douce */
}

.testimonial-carousel__container::-webkit-scrollbar {
  display: none; /* Masquer la scrollbar pour Chrome/Safari */
}

/* Track du carousel - style horizontal */
.testimonial-carousel__track {
  display: flex;
  gap: var(--testimonial-carousel-gap);
  padding: 0 max(calc(28% - (var(--testimonial-carousel-card-width) / 3)), 1rem);
  position: relative;
  transition: transform 0.3s ease;
  width: fit-content;
  user-select: none; /* Empêcher la sélection de texte pendant le drag */
  align-items: stretch; /* Assure que toutes les cartes s'étirent à la même hauteur */
}

@media (max-width: 2200px) {
  .testimonial-carousel__track {
    padding: 0 max(calc(25% - (var(--testimonial-carousel-card-width) / 3)), 1rem);
  }
}

@media (max-width: 1850px) {
  .testimonial-carousel__track {
    padding: 0 max(calc(20% - (var(--testimonial-carousel-card-width) / 3)), 1rem);
  }
}

@media (max-width: 1650px) {
  .testimonial-carousel__track {
    padding: 0 max(calc(15% - (var(--testimonial-carousel-card-width) / 3)), 1rem);
  }
}

@media (max-width: 1500px) {
  .testimonial-carousel__track {
    padding: 0 50px;
  }
}


/* Media query pour supprimer le décalage sur les écrans de 1200px ou moins */
@media (max-width: 1200px) {
  .testimonial-carousel__track {
    padding-left: 3rem;
    padding-right: 100px;
  }
}

/* Style pendant le dragging */
.testimonial-carousel__track.dragging {
  transition: none; /* Désactiver la transition pendant le drag pour un mouvement fluide */
  cursor: grabbing;
  will-change: transform; /* Optimiser les performances d'animation */
}

/* Carte de témoignage */
.testimonial-card {
  background-color: #fff;
  border-radius: var(--testimonial-carousel-card-radius);
  padding: var(--testimonial-carousel-card-padding);
  width: var(--testimonial-carousel-card-width);
  min-width: var(--testimonial-carousel-card-width);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, opacity 0.3s ease;
  position: relative;
  height: auto;
  min-height: 320px; /* Hauteur minimale pour uniformité */
  text-decoration: none;
  color: inherit;
}

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

/* Styles pour les cartes cliquables */
.testimonial-card--clickable {
  cursor: pointer;
}

.testimonial-card--clickable:hover {
  text-decoration: none;
  color: inherit;
}

/* Logo de l'entreprise */
.testimonial-card__company-logo {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.testimonial-card__company-logo img {
  max-height: 40px;
  max-width: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.testimonial-card:hover .testimonial-card__company-logo img {
  transform: scale(1.1);
}

/* Icône arrow en haut à droite */
.testimonial-card__arrow {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  transition: all 0.3s ease;
  z-index: 2;
}

.testimonial-card__arrow svg {
  width: 20px;
  height: 20px;
  color: var(--color-dark);
  transition: all 0.3s ease;
}

/* Animation du cercle au survol */
.testimonial-card:hover .testimonial-card__arrow {
  background: var(--color-dark);
  transform: scale(1.1);
}

.testimonial-card:hover .testimonial-card__arrow svg {
  color: var(--primary);
  transform: scale(1.1);
}

/* Animation d'expansion du cercle */
.testimonial-card__arrow::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: var(--color-dark);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease;
  z-index: -1;
}

.testimonial-card:hover .testimonial-card__arrow::before {
  width: 100%;
  height: 100%;
}

/* Étoiles de notation - supprimé */
.testimonial-card__rating,
.stars,
.star {
  display: none;
}

/* Contenu du témoignage */
.testimonial-card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  /* Configuration pour placer l'auteur en bas */
  justify-content: space-between;
}

/* Citation */
.testimonial-card__quote {
  font-size: 20px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--gray-900);
  margin: 0;
  text-align: left;
  margin-bottom: 32px; /* Espace entre la citation et l'auteur */
}

/* Information sur l'auteur */
.testimonial-card__author {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  gap: 12px;
  text-align: left;
  margin-top: auto; /* Force l'auteur à rester en bas de la carte */
}

.testimonial-card__avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
}

.testimonial-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-card__name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 0;
}

.testimonial-card__role {
  font-size: 0.875rem;
  color: var(--gray-500);
  opacity: 0.7;
}

/* Pagination visuelle - style barre de défilement */
.testimonial-carousel__pagination {
  display: flex;
  justify-content: center;
  margin-top: 32px;
  width: 80%;
  padding: 0 16px;
  position: relative;
  height: 7px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--gray-200);
  border-radius: 2px;
  overflow: hidden;
}

/* Indicateur de position (curseur) */
.testimonial-carousel__scroll-indicator {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 30px; /* Réduit de 40px à 30px */
  background-color: var(--gray-800);
  border-radius: 2px;
  transition: transform 0.3s ease, width 0.3s ease;
}

/* Masquer les anciens indicateurs de pagination */
.testimonial-carousel__pagination-indicator {
  display: none;
}

/* Boutons de navigation (supprimés) */
.testimonial-carousel__nav-btn {
  display: none !important; /* Masquer complètement les boutons */
}

.testimonial-carousel__nav-btn--prev,
.testimonial-carousel__nav-btn--next {
  display: none !important;
}

/* Responsive */
@media (min-width: 992px) {
  :root {
    --testimonial-carousel-card-width: 380px;
    --testimonial-carousel-card-padding: 40px;
  }
  
}

@media (max-width: 768px) {
  :root {
    --testimonial-carousel-card-width: 340px;
    --testimonial-carousel-card-padding: 24px;
    --testimonial-carousel-gap: 16px;
  }
  
  .testimonial-carousel {
    padding: 64px 0;
  }
  
  
  .testimonial-carousel__header {
    margin-bottom: 40px;
  }

  
  .testimonial-carousel__container {
    scroll-snap-type: x proximity; /* Moins contraignant que 'mandatory' */
    scroll-padding-left: 3rem; /* Correspondre au padding du track */
  }
  
  .testimonial-card {
    scroll-snap-align: start; /* Aligner chaque carte sur le début */
    scroll-snap-stop: normal; /* Permet de glisser plus facilement entre les cartes */
  }
}

@media (max-width: 480px) {
  :root {
    --testimonial-carousel-card-width: 280px;
    --testimonial-carousel-card-padding: 20px;
  }
  
}

/*------------------------------------
    Variantes de couleur du testimonial carousel
------------------------------------*/

/* Variante blanche */
.testimonial-carousel.section--white {
  background-color: var(--section-bg-white);
}

.testimonial-carousel.section--white .testimonial-carousel__title {
  color: var(--section-text-on-white);
}

.testimonial-carousel.section--white .testimonial-carousel__subtitle {
  color: var(--section-text-secondary-on-white);
}

.testimonial-carousel.section--white .testimonial-card {
  background-color: var(--white);
  border: 1px solid var(--gray-200);
  box-shadow: var(--testimonial-carousel-card-shadow);
}

.testimonial-carousel.section--white .testimonial-card__quote {
  color: var(--gray-900);
}

.testimonial-carousel.section--white .testimonial-card__name {
  color: var(--dark);
}

.testimonial-carousel.section--white .testimonial-card__role {
  color: var(--secondary);
}

.testimonial-carousel.section--white .testimonial-carousel__pagination {
  background-color: var(--gray-200);
}

.testimonial-carousel.section--white .testimonial-carousel__scroll-indicator {
  background-color: var(--gray-800);
}

/* Variante vert primaire */
.testimonial-carousel.section--primary {
  background-color: var(--section-bg-primary);
}

.testimonial-carousel.section--primary .testimonial-carousel__title {
  color: var(--color-headings-default);
}

.testimonial-carousel.section--primary .testimonial-carousel__subtitle {
  color: var(--section-text-secondary-on-primary);
}

.testimonial-carousel.section--primary .testimonial-card {
  background-color: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: var(--testimonial-carousel-card-shadow);
}

.testimonial-carousel.section--primary .testimonial-card__quote {
  color: var(--gray-900);
}

.testimonial-carousel.section--primary .testimonial-card__name {
  color: var(--dark);
}

.testimonial-carousel.section--primary .testimonial-card__role {
  color: var(--secondary);
}

.testimonial-carousel.section--primary .testimonial-carousel__pagination {
  background-color: rgba(0, 0, 0, 0.1);
}

.testimonial-carousel.section--primary .testimonial-carousel__scroll-indicator {
  background-color: var(--gray-900);
}

/* Variante secondary */
.testimonial-carousel.section--secondary {
  background-color: var(--section-bg-secondary);
}

.testimonial-carousel.section--secondary .testimonial-carousel__title {
  color: var(--white);
}

.testimonial-carousel.section--secondary .testimonial-carousel__subtitle {
  color: rgba(255, 255, 255, 0.8);
}

.testimonial-carousel.section--secondary .testimonial-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.testimonial-carousel.section--secondary .testimonial-card__quote {
  color: var(--white);
}

.testimonial-carousel.section--secondary .testimonial-card__name {
  color: var(--white);
}

.testimonial-carousel.section--secondary .testimonial-card__role {
  color: rgba(255, 255, 255, 0.7);
}

.testimonial-carousel.section--secondary .testimonial-carousel__pagination {
  background-color: var(--white);
}

.testimonial-carousel.section--secondary .testimonial-carousel__scroll-indicator {
  background-color: var(--primary);
}

/* Variante tertiary */
.testimonial-carousel.section--tertiary {
  background-color: var(--section-bg-tertiary);
}

.testimonial-carousel.section--tertiary .testimonial-carousel__title {
  color: var(--section-text-on-tertiary);
}

.testimonial-carousel.section--tertiary .testimonial-carousel__subtitle {
  color: var(--section-text-secondary-on-tertiary);
}

.testimonial-carousel.section--tertiary .testimonial-card {
  background-color: var(--white);
}

.testimonial-carousel.section--tertiary .testimonial-card__quote {
  color: var(--gray-900);
}

.testimonial-carousel.section--tertiary .testimonial-card__name {
  color: var(--dark);
}

.testimonial-carousel.section--tertiary .testimonial-card__role {
  color: var(--secondary);
}

.testimonial-carousel.section--tertiary .testimonial-carousel__pagination {
  background-color: var(--white);
}

.testimonial-carousel.section--tertiary .testimonial-carousel__scroll-indicator {
  background-color: var(--primary);
}

/* Variante dark */
.testimonial-carousel.section--dark {
  background-color: var(--color-dark);
}

.testimonial-carousel.section--dark .testimonial-carousel__title {
  color: var(--white);
}

.testimonial-carousel.section--dark .testimonial-carousel__subtitle {
  color: rgba(255, 255, 255, 0.8);
}

.testimonial-carousel.section--dark .testimonial-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.testimonial-carousel.section--dark .testimonial-card__quote {
  color: var(--white);
}

.testimonial-carousel.section--dark .testimonial-card__name {
  color: var(--white);
}

.testimonial-carousel.section--dark .testimonial-card__role {
  color: rgba(255, 255, 255, 0.7);
}

.testimonial-carousel.section--dark .testimonial-carousel__pagination {
  background-color: rgba(255, 255, 255, 0.2);
}

.testimonial-carousel.section--dark .testimonial-carousel__scroll-indicator {
  background-color: var(--primary, #BEF264);
}

/* =================================
   NOUVEAUX ÉLÉMENTS: LOGO ET LIEN ÉTUDE DE CAS
   ================================= */

/* Logo de l'entreprise */
.testimonial-card__company-logo {
  margin-bottom: 1.5rem;
  text-align: left;
}

.testimonial-card__company-logo img {
  max-height: 60px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}

.testimonial-card:hover .testimonial-card__company-logo img {
  transform: scale(1.1);
}

/* Lien étude de cas */
.testimonial-card__case-study-link {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  width: 100%;
  text-align: center;
}

.testimonial-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--primary, #BEF264);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.testimonial-card__link:hover {
  color: var(--primary-dark, #A3E635);
  transform: translateX(4px);
}

.testimonial-card__link-icon {
  width: 14px;
  height: 14px;
  transition: transform 0.3s ease;
}

.testimonial-card__link:hover .testimonial-card__link-icon {
  transform: translateX(2px) translateY(-2px);
}

/* Styles pour le mode dark */
.testimonial-carousel.section--dark .testimonial-card__case-study-link {
  border-top-color: rgba(255, 255, 255, 0.2);
}

.testimonial-carousel.section--dark .testimonial-card__link {
  color: var(--primary, #BEF264);
}

.testimonial-carousel.section--dark .testimonial-card__link:hover {
  color: var(--primary-light, #D9F99D);
}
/*------------------------------------
    Testimonial Masonry Component
------------------------------------*/

:root {
  --testimonial-masonry-card-radius: 16px;
  --testimonial-masonry-card-text: #1d1f1e;
  --testimonial-masonry-card-shadow: 
    0 0 1px rgba(18, 105, 63, 0.08),
    0 1px 2px rgba(87, 93, 86, 0.16),
    0 24px 24px -12px rgba(54, 74, 54, 0.06);
  --testimonial-masonry-card-padding: 32px;
  --testimonial-masonry-gap-default: 24px;
  --section-text-on-tertiary: var(--dark);
}

/* Section de base */
.testimonial-masonry {
  padding: 5rem 0;
}

/* Titre et sous-titre */
.testimonial-masonry__header {
  text-align: center;
  margin-bottom: 60px;
}

.testimonial-masonry__title {
  color: var(--color-headings-default);
  margin-bottom: 24px;
}

.testimonial-masonry__subtitle {
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--gray-600);
  opacity: 0.8;
}

/* Ajustements des couleurs de texte pour les variantes */
.section--primary .testimonial-masonry__title,
.section--primary .testimonial-masonry__subtitle,
.section--secondary .testimonial-masonry__title,
.section--secondary .testimonial-masonry__subtitle,
.section--dark .testimonial-masonry__title,
.section--dark .testimonial-masonry__subtitle {
  color: var(--white);
}

.section--tertiary .testimonial-masonry__title {
  color: var(--gray-900);
}

.section--tertiary .testimonial-masonry__subtitle {
  color: var(--gray-600);
  opacity: 0.8;
}

/* Wrapper masonry */
.testimonial-masonry__wrapper {
  position: relative;
  margin: 0 auto;
  max-width: 100%;
  width: 100%;
}

/* Grid masonry - Utilisation de CSS columns pour un vrai masonry */
.testimonial-masonry__grid {
  /* Fallback pour les anciens navigateurs */
  display: flex;
  flex-wrap: wrap;
  gap: var(--testimonial-masonry-gap-default);
  
  /* CSS Columns pour un vrai masonry */
  column-count: 3;
  column-gap: var(--testimonial-masonry-gap-default);
  column-fill: balance;
  
  /* Optimisations pour le rendu masonry */
  orphans: 1;
  widows: 1;
}

/* Support CSS Columns */
@supports (column-count: 1) {
  .testimonial-masonry__grid {
    display: block;
  }
  
  .testimonial-card--masonry {
    width: 100%;
  }
}

/* Fallback flexbox pour les anciens navigateurs */
@supports not (column-count: 1) {
  .testimonial-card--masonry {
    flex: 1 1 calc(33.333% - var(--testimonial-masonry-gap-default));
    max-width: calc(33.333% - var(--testimonial-masonry-gap-default));
  }
  
  .testimonial-masonry__wrapper[data-columns="2"] .testimonial-card--masonry {
    flex: 1 1 calc(50% - var(--testimonial-masonry-gap-default));
    max-width: calc(50% - var(--testimonial-masonry-gap-default));
  }
  
  .testimonial-masonry__wrapper[data-columns="4"] .testimonial-card--masonry {
    flex: 1 1 calc(25% - var(--testimonial-masonry-gap-default));
    max-width: calc(25% - var(--testimonial-masonry-gap-default));
  }
  
  @media (max-width: 768px) {
    .testimonial-masonry__wrapper[data-columns="3"] .testimonial-card--masonry,
    .testimonial-masonry__wrapper[data-columns="4"] .testimonial-card--masonry {
      flex: 1 1 calc(50% - var(--testimonial-masonry-gap-default));
      max-width: calc(50% - var(--testimonial-masonry-gap-default));
    }
  }
  
  @media (max-width: 480px) {
    .testimonial-card--masonry {
      flex: 1 1 100%;
      max-width: 100%;
    }
  }
}

/* Configuration dynamique des colonnes basée sur l'attribut data-columns */
.testimonial-masonry__wrapper[data-columns="2"] .testimonial-masonry__grid {
  column-count: 2;
}

.testimonial-masonry__wrapper[data-columns="3"] .testimonial-masonry__grid {
  column-count: 3;
}

.testimonial-masonry__wrapper[data-columns="4"] .testimonial-masonry__grid {
  column-count: 4;
}

.testimonial-masonry__wrapper[data-columns="auto"] .testimonial-masonry__grid {
  column-count: auto;
  column-width: 320px;
}

/* Configuration dynamique du gap basée sur l'attribut data-gap */
.testimonial-masonry__wrapper[data-gap="16"] .testimonial-masonry__grid {
  column-gap: 16px;
}

.testimonial-masonry__wrapper[data-gap="16"] .testimonial-card--masonry {
  margin-bottom: 16px;
}

.testimonial-masonry__wrapper[data-gap="24"] .testimonial-masonry__grid {
  column-gap: 24px;
}

.testimonial-masonry__wrapper[data-gap="24"] .testimonial-card--masonry {
  margin-bottom: 24px;
}

.testimonial-masonry__wrapper[data-gap="32"] .testimonial-masonry__grid {
  column-gap: 32px;
}

.testimonial-masonry__wrapper[data-gap="32"] .testimonial-card--masonry {
  margin-bottom: 32px;
}

.testimonial-masonry__wrapper[data-gap="40"] .testimonial-masonry__grid {
  column-gap: 40px;
}

.testimonial-masonry__wrapper[data-gap="40"] .testimonial-card--masonry {
  margin-bottom: 40px;
}

/* Carte de témoignage masonry */
.testimonial-card--masonry {
  background-color: #fff;
  border-radius: var(--testimonial-masonry-card-radius);
  padding: var(--testimonial-masonry-card-padding);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  height: auto;
  width: 100%;
  margin-bottom: var(--testimonial-masonry-gap-default);
  background-color: #f7f7f7;
  
  /* Propriétés pour éviter les coupures dans les colonnes */
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  
  /* Pour assurer que les cartes restent ensemble */
  display: inline-block;
  vertical-align: top;
}

/* Supprime le margin-bottom de la dernière carte pour éviter les espaces inutiles */
.testimonial-card--masonry:last-child {
  margin-bottom: 0;
}

.testimonial-card--masonry:hover {
  transform: translateY(-5px);
  box-shadow: var(--testimonial-masonry-card-shadow);
}

/* Contenu du témoignage masonry */
.testimonial-card--masonry .testimonial-card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  justify-content: space-between;
}

/* Citation masonry - support du texte enrichi */
.testimonial-card--masonry .testimonial-card__quote {
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--gray-900);
  margin: 0 0 24px 0;
  text-align: left;
}

/* Support pour le texte enrichi dans la citation */
.testimonial-card--masonry .testimonial-card__quote p {
  margin: 0 0 16px 0;
}

.testimonial-card--masonry .testimonial-card__quote p:last-child {
  margin-bottom: 0;
}

.testimonial-card--masonry .testimonial-card__quote strong {
  font-weight: 600;
}

.testimonial-card--masonry .testimonial-card__quote em {
  font-style: italic;
}

.testimonial-card--masonry .testimonial-card__quote blockquote {
  border-left: 3px solid var(--primary);
  padding-left: 16px;
  margin: 16px 0;
  font-style: italic;
}

/* Information sur l'auteur masonry */
.testimonial-card--masonry .testimonial-card__author {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  gap: 12px;
  text-align: left;
  margin-top: auto;
}

.testimonial-card--masonry .testimonial-card__avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.testimonial-card--masonry .testimonial-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-card--masonry .testimonial-card__name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 0;
}

.testimonial-card--masonry .testimonial-card__role {
  font-size: 0.875rem;
  color: var(--gray-500);
  opacity: 0.7;
}

/* Responsive */
@media (min-width: 992px) {
  :root {
    --testimonial-masonry-card-padding: 40px;
  }
}

@media (max-width: 992px) {
  .testimonial-masonry__wrapper[data-columns="4"] .testimonial-masonry__grid {
    column-count: 3;
  }
  
  .testimonial-masonry__wrapper[data-columns="auto"] .testimonial-masonry__grid {
    column-width: 280px;
  }
}

@media (max-width: 768px) {
  :root {
    --testimonial-masonry-card-padding: 24px;
  }
  
  .testimonial-masonry {
    padding: 64px 0;
  }
  
  .testimonial-masonry__header {
    margin-bottom: 40px;
  }
  
  .testimonial-masonry__wrapper[data-columns="3"] .testimonial-masonry__grid,
  .testimonial-masonry__wrapper[data-columns="4"] .testimonial-masonry__grid {
    column-count: 2;
  }
  
  .testimonial-masonry__wrapper[data-columns="auto"] .testimonial-masonry__grid {
    column-width: 250px;
  }
}

@media (max-width: 480px) {
  :root {
    --testimonial-masonry-card-padding: 20px;
  }
  
  .testimonial-masonry__wrapper[data-columns="2"] .testimonial-masonry__grid,
  .testimonial-masonry__wrapper[data-columns="3"] .testimonial-masonry__grid,
  .testimonial-masonry__wrapper[data-columns="4"] .testimonial-masonry__grid,
  .testimonial-masonry__wrapper[data-columns="auto"] .testimonial-masonry__grid {
    column-count: 1;
  }
}

/*------------------------------------
    Variantes de couleur du testimonial masonry
------------------------------------*/

/* Variante blanche */
.testimonial-masonry.section--white {
  background-color: var(--section-bg-white);
}

.testimonial-masonry.section--white .testimonial-masonry__title {
  color: var(--section-text-on-white);
}

.testimonial-masonry.section--white .testimonial-masonry__subtitle {
  color: var(--section-text-secondary-on-white);
}

.testimonial-masonry.section--white .testimonial-card--masonry {
  background-color: var(--white);
  border: 1px solid var(--gray-200);
  box-shadow: var(--testimonial-masonry-card-shadow);
}

.testimonial-masonry.section--white .testimonial-card--masonry .testimonial-card__quote {
  color: var(--gray-900);
}

.testimonial-masonry.section--white .testimonial-card--masonry .testimonial-card__name {
  color: var(--dark);
}

.testimonial-masonry.section--white .testimonial-card--masonry .testimonial-card__role {
  color: var(--secondary);
}

/* Variante vert primaire */
.testimonial-masonry.section--primary {
  background-color: var(--section-bg-primary);
}

.testimonial-masonry.section--primary .testimonial-masonry__title {
  color: var(--color-headings-default);
}

.testimonial-masonry.section--primary .testimonial-masonry__subtitle {
  color: var(--section-text-secondary-on-primary);
}

.testimonial-masonry.section--primary .testimonial-card--masonry {
  background-color: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: var(--testimonial-masonry-card-shadow);
}

.testimonial-masonry.section--primary .testimonial-card--masonry .testimonial-card__quote {
  color: var(--gray-900);
}

.testimonial-masonry.section--primary .testimonial-card--masonry .testimonial-card__name {
  color: var(--dark);
}

.testimonial-masonry.section--primary .testimonial-card--masonry .testimonial-card__role {
  color: var(--secondary);
}

/* Variante secondary */
.testimonial-masonry.section--secondary {
  background-color: var(--section-bg-secondary);
}

.testimonial-masonry.section--secondary .testimonial-masonry__title {
  color: var(--white);
}

.testimonial-masonry.section--secondary .testimonial-masonry__subtitle {
  color: rgba(255, 255, 255, 0.8);
}

.testimonial-masonry.section--secondary .testimonial-card--masonry {
  background-color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.testimonial-masonry.section--secondary .testimonial-card--masonry .testimonial-card__quote {
  color: var(--gray-900);
}

.testimonial-masonry.section--secondary .testimonial-card--masonry .testimonial-card__name {
  color: var(--dark);
}

.testimonial-masonry.section--secondary .testimonial-card--masonry .testimonial-card__role {
  color: var(--secondary);
}

/* Variante tertiary */
.testimonial-masonry.section--tertiary {
  background-color: var(--section-bg-tertiary);
}

.testimonial-masonry.section--tertiary .testimonial-masonry__title {
  color: var(--section-text-on-tertiary);
}

.testimonial-masonry.section--tertiary .testimonial-masonry__subtitle {
  color: var(--section-text-secondary-on-tertiary);
}

.testimonial-masonry.section--tertiary .testimonial-card--masonry {
  background-color: var(--white);
}

.testimonial-masonry.section--tertiary .testimonial-card--masonry .testimonial-card__quote {
  color: var(--gray-900);
}

.testimonial-masonry.section--tertiary .testimonial-card--masonry .testimonial-card__name {
  color: var(--dark);
}

.testimonial-masonry.section--tertiary .testimonial-card--masonry .testimonial-card__role {
  color: var(--secondary);
}

/* Variante dark */
.testimonial-masonry.section--dark {
  background-color: var(--dark);
}

.testimonial-masonry.section--dark .testimonial-masonry__title {
  color: var(--white);
}

.testimonial-masonry.section--dark .testimonial-masonry__subtitle {
  color: rgba(255, 255, 255, 0.8);
}

.testimonial-masonry.section--dark .testimonial-card--masonry {
  background-color: #ffffff;
  box-shadow: 0 6px 30px rgb(0 0 0 / 20%);
}

.testimonial-masonry.section--dark .testimonial-card--masonry .testimonial-card__quote {
  color: var(--color-dark);
}

.testimonial-masonry.section--dark .testimonial-card--masonry .testimonial-card__name {
  color: var(--color-dark);
}

.testimonial-masonry.section--dark .testimonial-card--masonry .testimonial-card__role {
  color: #606868;
}
/*------------------------------------
    Testimonial 3D Carousel Component
------------------------------------*/

/* Styles de base du carousel */
.testimonial-3d-carousel {
  position: relative;
  padding: 80px 0;
  overflow: hidden;
  background-color: #003829; /* Fond vert foncé comme sur l'image */
  color: #fff;
}

.testimonial-3d-carousel__track {
  position: relative;
  perspective: 1000px;
  margin: 60px auto 20px;
  max-width: 1200px;
  min-height: 450px; /* Hauteur de base */
}

/* Titres de section */
.testimonial-3d-carousel .section-header {
  text-align: center;
  margin-bottom: 2rem;
}

.testimonial-3d-carousel .section__title {
  font-size: 3rem;
  color: #fff;
  margin-bottom: 1rem;
}

.testimonial-3d-carousel .section__subtitle {
  font-size: 1.125rem;
  color: #fff;
  opacity: 0.8;
}

/* Styles des cartes de témoignage */
.testimonial-3d-item {
  position: absolute;
  width: 800px; /* Largeur augmentée */
  left: calc(50% - 400px);
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.05);
  padding: 40px;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  opacity: 0;
  transform: scale(0.8);
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* État actif */
.testimonial-3d-item--active {
  opacity: 1;
  transform: scale(1) rotateY(0deg);
  z-index: 5;
}

/* Carte précédente - ajusté pour être plus éloignée */
.testimonial-3d-item--prev {
  opacity: 0.3;
  transform: translateX(-20%) scale(0.7) rotateY(10deg);
  z-index: 4;
  background-color: rgba(255, 255, 255, 0.7);
}

/* Supprimé l'affichage de cette carte */
.testimonial-3d-item--prev-2 {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-120%) scale(0.6) rotateY(30deg);
  z-index: 1;
}

/* Carte suivante - ajusté pour être plus éloignée */
.testimonial-3d-item--next {
  opacity: 0.3;
  transform: translateX(20%) scale(0.7) rotateY(-10deg);
  z-index: 4;
  background-color: rgba(255, 255, 255, 0.7);
}

/* Supprimé l'affichage de cette carte */
.testimonial-3d-item--next-2 {
  opacity: 0;
  visibility: hidden;
  transform: translateX(120%) scale(0.6) rotateY(-30deg);
  z-index: 1;
}

/* Navigation */
.testimonial-3d-carousel__nav {
  position: absolute;
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1152px;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 20px;
  pointer-events: none;
  z-index: 10;
}

/* Boutons de navigation */
.testimonial-3d-carousel__btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: transparent;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  pointer-events: auto;
}

.testimonial-3d-carousel__btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  transform: translateY(-2px);
}

/* Évaluation en étoiles */
.testimonial-3d-item__rating {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  gap: 5px;
}

.testimonial-3d-item__rating .icon--green {
  color: #BEF263;
  width: 24px;
  height: 24px;
}

/* Style pour les étoiles pleines */
.testimonial-3d-item__rating .icon--filled {
  fill: #BEF263;
  stroke: none;
}

/* Citation */
.testimonial-3d-item__quote {
  font-size: 1.5rem;
  line-height: 1.4;
  margin-bottom: 32px;
  color: var(--gray-900);
  text-align: center;
  font-weight: 400;
}

/* Auteur */
.testimonial-3d-item__author {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.testimonial-3d-item__avatar {
  display: none;
}

.testimonial-3d-item__name {
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--gray-900);
}

.testimonial-3d-item__role {
  color: var(--gray-600);
  font-size: 0.875rem;
}

/* Variantes de couleurs */

/* 1. Variante Light (par défaut) */
.testimonial-3d-carousel.section--white,
.testimonial-3d-carousel.section--light {
  background-color: var(--white);
  color: var(--gray-900);
}

.testimonial-3d-carousel.section--white .section__title,
.testimonial-3d-carousel.section--light .section__title {
  color: var(--gray-900);
}

.testimonial-3d-carousel.section--white .section__subtitle,
.testimonial-3d-carousel.section--light .section__subtitle {
  color: var(--gray-600);
}

.testimonial-3d-carousel.section--white .testimonial-3d-carousel__btn,
.testimonial-3d-carousel.section--light .testimonial-3d-carousel__btn {
  color: var(--gray-700);
}

.testimonial-3d-carousel.section--white .testimonial-3d-carousel__btn:hover,
.testimonial-3d-carousel.section--light .testimonial-3d-carousel__btn:hover {
  background-color: var(--gray-100);
  color: var(--gray-900);
}

.testimonial-3d-carousel.section--white .testimonial-3d-item__rating .icon--filled,
.testimonial-3d-carousel.section--light .testimonial-3d-item__rating .icon--filled {
  fill: var(--primary);
}

.testimonial-3d-carousel.section--white .testimonial-3d-item--prev,
.testimonial-3d-carousel.section--white .testimonial-3d-item--next,
.testimonial-3d-carousel.section--light .testimonial-3d-item--prev,
.testimonial-3d-carousel.section--light .testimonial-3d-item--next {
  border: 2px solid var(--gray-300);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

/* 2. Variante Primary */
.testimonial-3d-carousel.section--primary {
  background-color: var(--primary);
  color: var(--white);
}

.testimonial-3d-carousel.section--primary .section__title,
.testimonial-3d-carousel.section--primary .section__subtitle {
  color: var(--color-headings-default);
}

.testimonial-3d-carousel.section--primary .testimonial-3d-carousel__btn {
  color: var(--gray-500);
}

.testimonial-3d-carousel.section--primary .testimonial-3d-carousel__btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.testimonial-3d-carousel.section--primary .testimonial-3d-item__rating .icon--filled {
  fill: #BEF263; /* Vert clair comme les autres variantes */
}

/* 3. Variante Secondary */
.testimonial-3d-carousel.section--secondary {
  background-color: var(--secondary);
  color: var(--white);
}

.testimonial-3d-carousel.section--secondary .section__title,
.testimonial-3d-carousel.section--secondary .section__subtitle {
  color: var(--white);
}

.testimonial-3d-carousel.section--secondary .testimonial-3d-carousel__btn {
  color: var(--white);
}

.testimonial-3d-carousel.section--secondary .testimonial-3d-carousel__btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.testimonial-3d-carousel.section--secondary .testimonial-3d-item__rating .icon--filled {
  fill: #BEF263; /* Jaune doré pour la variante secondary */
}

/* 4. Variante Tertiary */
.testimonial-3d-carousel.section--tertiary {
  background-color: var(--tertiary);
  color: var(--gray-900);
}

.testimonial-3d-carousel.section--tertiary .section__title {
  color: var(--gray-900);
}

.testimonial-3d-carousel.section--tertiary .section__subtitle {
  color: var(--gray-700);
}

.testimonial-3d-carousel.section--tertiary .testimonial-3d-carousel__btn {
  color: var(--gray-900);
}

.testimonial-3d-carousel.section--tertiary .testimonial-3d-carousel__btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.testimonial-3d-carousel.section--tertiary .testimonial-3d-item__rating .icon--filled {
  fill: var(--primary);
}

/* 5. Variante Dark */
.testimonial-3d-carousel.section--dark {
  background-color: var(--section-bg-dark);
}

.testimonial-3d-carousel.section--dark .section__title,
.testimonial-3d-carousel.section--dark .section__subtitle {
  color: var(--white);
}

.testimonial-3d-carousel.section--dark .section__subtitle {
  color: rgba(255, 255, 255, 0.8);
}

.testimonial-3d-carousel.section--dark .testimonial-3d-carousel__btn {
  background-color: transparent;
  color: var(--white);
}

.testimonial-3d-carousel.section--dark .testimonial-3d-carousel__btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.testimonial-3d-carousel.section--dark .testimonial-3d-item {
  background-color: var(--white);
  border: 1px solid var(--gray-200);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.testimonial-3d-carousel.section--dark .testimonial-3d-item__quote {
  color: var(--gray-900);
}

.testimonial-3d-carousel.section--dark .testimonial-3d-item__name {
  color: var(--gray-900);
}

.testimonial-3d-carousel.section--dark .testimonial-3d-item__role {
  color: var(--gray-600);
}

.testimonial-3d-carousel.section--dark .testimonial-3d-item__rating .icon--filled {
  fill: var(--primary, #BEF263);
}

/* Spacer pour les variantes */
.variant-spacer {
  height: 100px;
}

/* Responsive */
@media (max-width: 1200px) {
  .testimonial-3d-carousel__nav {
    position: relative;
    top: auto;
    transform: none;
    justify-content: center;
    margin-top: 30px;
    gap: 20px;
  }
  
  .testimonial-3d-carousel__track {
    min-height: 400px;
  }
}

@media (max-width: 768px) {
  .testimonial-3d-item {
    width: 360px;
    left: calc(50% - 180px);
    padding: 30px;
  }
  
  .testimonial-3d-item--prev,
  .testimonial-3d-item--next {
    opacity: 0.4;
  }
  
  .testimonial-3d-item--prev-2,
  .testimonial-3d-item--next-2 {
    display: none;
  }
  
  .testimonial-3d-carousel .section__title {
    font-size: 2.5rem;
  }
  
  .testimonial-3d-carousel__nav {
    margin-top: 20px;
    position: static;
    padding: 0 20px;
  }
  
  .testimonial-3d-item__quote {
    font-size: 1.5rem;
  }
  
  .testimonial-3d-carousel__track {
    min-height: 350px;
  }
}

@media (max-width: 480px) {
  .testimonial-3d-carousel__track {
    min-height: 320px;
  }
  
  .testimonial-3d-item {
    width: 300px;
    left: calc(50% - 150px);
    padding: 25px;
  }
  
  .testimonial-3d-item__quote {
    font-size: 1.25rem;
    margin-bottom: 20px;
  }
}
/* Missing Template at Path: \'Nile-Theme-2025\/css\/components\/testimonials\/_carousel-steps-approach.css\' */
/*------------------------------------
    Study Case Carousel Component
------------------------------------*/

:root {
  --study-case-carousel-card-radius: 16px;
  --study-case-carousel-card-text: #1d1f1e;
  --study-case-carousel-star-color: #bef263;
  --study-case-carousel-nav-size: 32px;
  --study-case-carousel-card-shadow: 
    0 0 1px rgba(18, 105, 63, 0.08),
    0 1px 2px rgba(87, 93, 86, 0.16),
    0 24px 24px -12px rgba(54, 74, 54, 0.06);
  --study-case-carousel-card-width: 400px;
  --study-case-carousel-card-height: auto;
  --study-case-carousel-card-padding: 32px;
  --study-case-carousel-gap: 24px;
  --section-text-on-tertiary: var(--dark);
}

/* Section de base */
.study-case-carousel {
  padding: 5rem 0;
  overflow: hidden;
}

/* Titre et sous-titre */
.study-case-carousel__header {
  text-align: center;
  margin-bottom: 20px;
}

.study-case-carousel__title {
  color: var(--color-headings-default);
  margin-bottom: 24px;
}

.study-case-carousel__subtitle {
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--gray-600);
  opacity: 0.8;
}

/* Ajustements des couleurs de texte pour les variantes */
.section--primary .study-case-carousel__title,
.section--primary .study-case-carousel__subtitle,
.section--secondary .study-case-carousel__title,
.section--secondary .study-case-carousel__subtitle,
.section--dark .study-case-carousel__title,
.section--dark .study-case-carousel__subtitle {
  color: var(--white);
}

.section--tertiary .study-case-carousel__title {
  color: var(--gray-900);
}

.section--tertiary .study-case-carousel__subtitle {
  color: var(--gray-600);
  opacity: 0.8;
}

/* Nouveau style pour le slider horizontal */
.study-case-carousel__wrapper {
  position: relative;
  margin: 0 auto;
  padding: 40px 0;
  overflow: visible;
  max-width: 100%;
  width: 100%;
}

/* Container pour le carousel */
.study-case-carousel__container {
  width: 100%;
  margin: 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; /* Défilement fluide sur iOS */
  scrollbar-width: none; /* Masquer la scrollbar pour Firefox */
  -ms-overflow-style: none; /* Masquer la scrollbar pour IE/Edge */
  padding-bottom: 30px; /* Espace pour la pagination */
  padding-top: 30px; /* Nouveau padding top de 30px */
  cursor: grab; /* Curseur indiquant que le contenu est glissable */
  scroll-behavior: smooth; /* Animation de défilement douce */
}

.study-case-carousel__container::-webkit-scrollbar {
  display: none; /* Masquer la scrollbar pour Chrome/Safari */
}

/* Track du carousel - style horizontal */
.study-case-carousel__track {
  display: flex;
  gap: var(--study-case-carousel-gap);
  padding: 0 max(calc(30% - (var(--study-case-carousel-card-width) / 3)), 1rem);
  position: relative;
  transition: transform 0.3s ease;
  width: fit-content;
  user-select: none; /* Empêcher la sélection de texte pendant le drag */
  align-items: stretch; /* Assure que toutes les cartes s'étirent à la même hauteur */
}

/* Media query pour supprimer le décalage sur les écrans de 1200px ou moins */
@media (max-width: 1200px) {
  .study-case-carousel__track {
    padding-left: 3rem;
    padding-right: 100px;
  }
}

/* Style pendant le dragging */
.study-case-carousel__track.dragging {
  transition: none; /* Désactiver la transition pendant le drag pour un mouvement fluide */
  cursor: grabbing;
  will-change: transform; /* Optimiser les performances d'animation */
}

/* Carte d'étude de cas */
.study-case-card {
  background-color: #fff;
  border-radius: var(--study-case-carousel-card-radius);
  padding: var(--study-case-carousel-card-padding);
  width: var(--study-case-carousel-card-width);
  min-width: var(--study-case-carousel-card-width);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, opacity 0.3s ease;
  position: relative;
  height: auto;
  min-height: 320px; /* Hauteur minimale pour uniformité */
  text-decoration: none;
  color: inherit;
}

.study-case-card:hover {
  transform: translateY(-5px);
}

/* Styles pour les cartes cliquables */
.study-case-card--clickable {
  cursor: pointer;
}

.study-case-card--clickable:hover {
  text-decoration: none;
  color: inherit;
}

/* Logo de l'entreprise */
.study-case-card__company-logo {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.study-case-card__company-logo img {
  max-height: 40px;
  max-width: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: all 0.3s ease;
}

.study-case-card:hover .study-case-card__company-logo img {
  filter: grayscale(0%);
  opacity: 1;
}

/* Icône arrow en haut à droite */
.study-case-card__arrow {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  transition: all 0.3s ease;
  z-index: 2;
}

.study-case-card__arrow svg {
  width: 20px;
  height: 20px;
  color: var(--color-dark);
  transition: all 0.3s ease;
}

/* Animation du cercle au survol */
.study-case-card:hover .study-case-card__arrow {
  background: var(--color-dark);
  transform: scale(1.1);
}

.study-case-card:hover .study-case-card__arrow svg {
  color: var(--primary);
  transform: scale(1.1);
}

/* Animation d'expansion du cercle */
.study-case-card__arrow::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: var(--color-dark);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease;
  z-index: -1;
}

.study-case-card:hover .study-case-card__arrow::before {
  width: 100%;
  height: 100%;
}

/* Contenu de l'étude de cas */
.study-case-card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  /* Configuration pour placer l'auteur en bas */
  justify-content: space-between;
}

/* Citation */
.study-case-card__quote {
  font-size: 20px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--gray-900);
  margin: 0;
  text-align: left;
  margin-bottom: 32px; /* Espace entre la citation et l'auteur */
}

/* Information sur l'auteur */
.study-case-card__author {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  gap: 12px;
  text-align: left;
  margin-top: auto; /* Force l'auteur à rester en bas de la carte */
}

.study-case-card__avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
}

.study-case-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.study-case-card__name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 0;
}

.study-case-card__role {
  font-size: 0.875rem;
  color: var(--gray-500);
  margin-bottom: 0;
}

/* Responsive Design */
@media (max-width: 1200px) {
  :root {
    --study-case-carousel-card-width: 350px;
  }
  
  .study-case-carousel__track {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (max-width: 768px) {
  :root {
    --study-case-carousel-card-width: 280px;
    --study-case-carousel-card-padding: 24px;
  }
  
  .study-case-carousel {
    padding: 3rem 0;
  }
  
  .study-case-carousel__track {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .study-case-card__quote {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  :root {
    --study-case-carousel-card-width: 260px;
    --study-case-carousel-card-padding: 20px;
  }
  
  .study-case-card__quote {
    font-size: 16px;
    margin-bottom: 24px;
  }
  
  .study-case-card__avatar {
    width: 50px;
    height: 50px;
  }
}
/*------------------------------------
    Testimonial Slider Simple Component
------------------------------------*/

:root {
  --testimonial-simple-background: #FFF9C4;
  --testimonial-simple-quote-size: 1.125rem;
  --testimonial-simple-quote-line-height: 1.6;
  --testimonial-simple-author-name-size: 1rem;
  --testimonial-simple-author-role-size: 0.875rem;
  --testimonial-simple-company-size: 0.875rem;
  --testimonial-simple-padding: 3rem;
  --testimonial-simple-border-radius: 24px;
  --testimonial-simple-transition: all 0.3s ease;
  --testimonial-simple-avatar-size: 80px;
  --testimonial-simple-nav-btn-size: 48px;
}

/* Section de base */
.testimonial-slider-simple {
  padding: 2rem 0;
  overflow: hidden;
}

/* Container pour le slider */
.testimonial-slider-simple__container {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  background-color: var(--secondary-50, #F8F9FA);
  border-radius: var(--testimonial-simple-border-radius);
  padding: var(--testimonial-simple-padding);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
}

/* Track du slider */
.testimonial-slider-simple__track {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Item de témoignage */
.testimonial-simple-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 2rem;
  opacity: 0;
  transition: var(--testimonial-simple-transition);
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  visibility: hidden;
}

.testimonial-simple-item.active {
  opacity: 1;
  position: relative;
  visibility: visible;
}

/* Contenu principal du témoignage */
.testimonial-simple-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Citation du témoignage */
.testimonial-simple__quote {
  font-size: var(--testimonial-simple-quote-size);
  line-height: var(--testimonial-simple-quote-line-height);
  color: var(--gray-900);
  margin: 0;
}

.testimonial-simple__quote p {
  margin: 0;
}

/* Section auteur */
.testimonial-simple__author-section {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Photo de profil */
.testimonial-simple__author-photo {
  width: var(--testimonial-simple-avatar-size);
  height: var(--testimonial-simple-avatar-size);
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  background-color: var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
}

.testimonial-simple__author-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.testimonial-simple__author-placeholder {
  text-align: center;
  font-size: 0.75rem;
  color: var(--gray-500);
  line-height: 1.2;
}

/* Informations de l'auteur */
.testimonial-simple__author-info {
  display: flex;
  flex-direction: column;
}

.testimonial-simple__author-role {
    line-height: 20px;
}


/* Nom de l'auteur */
.testimonial-simple__author-name {
  font-size: var(--testimonial-simple-author-name-size);
  font-weight: 600;
  color: var(--gray-900);
  margin: 0;
}

/* Rôle de l'auteur */
.testimonial-simple__author-role {
  font-size: var(--testimonial-simple-author-role-size);
  color: var(--gray-600);
  margin: 0;
}

/* Entreprise */
.testimonial-simple__company {
  font-size: var(--testimonial-simple-company-size);
  color: var(--gray-700);
  margin: 0;
}

/* Taille de l'entreprise */
.testimonial-simple__company-size {
  font-size: var(--testimonial-simple-company-size);
  color: var(--gray-500);
  margin: 0;
}

/* Navigation du slider */
.testimonial-slider-simple__nav {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  flex-shrink: 0;
  align-self: center;
  margin-left: auto; /* Alignement à droite */
}

/* Boutons de navigation */
.testimonial-slider-simple__nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--testimonial-simple-nav-btn-size);
  height: var(--testimonial-simple-nav-btn-size);
  border-radius: 50%;
  background-color: var(--white);
  border: 1px solid var(--gray-300);
  color: var(--gray-600);
  cursor: pointer;
  transition: var(--testimonial-simple-transition);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.testimonial-slider-simple__nav-btn:hover {
  background-color: var(--gray-100);
  border-color: var(--gray-400);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.testimonial-slider-simple__nav-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--primary-400);
}

.testimonial-slider-simple__nav-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.testimonial-slider-simple__nav-btn.disabled:hover {
  transform: none;
  background-color: var(--white);
  border-color: var(--gray-300);
}

/* Icône dans les boutons */
.testimonial-slider-simple__nav-btn .icon,
.testimonial-slider-simple__nav-btn svg {
  width: 20px;
  height: 20px;
}

/* Variantes de couleur */
.section--primary .testimonial-slider-simple__container {
  background-color: var(--primary-50, var(--testimonial-simple-background));
}

.section--secondary .testimonial-slider-simple__container {
  background-color: var(--secondary-50, #F8F9FA);
}

.section--tertiary .testimonial-slider-simple__container {
  background-color: var(--tertiary-50, #FEF3C7);
}

.section--dark .testimonial-slider-simple__container {
  align-content: center;
  backdrop-filter: blur(10px);
  background-color: rgba(30, 33, 43, .6);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 40px;
  transition: transform .3s ease, box-shadow .3s ease;
}

.section--dark .testimonial-slider-simple__container:after {
    border-radius: 16px 0 0 0;
    background: radial-gradient(circle at top left, hsla(0, 0%, 100%, .15), transparent 60%);
    content: "";
    height: 150px;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 150px;
    z-index: 1;
}

.section--dark .testimonial-simple__quote,
.section--dark .testimonial-simple__author-name,
.section--dark .testimonial-simple__company {
  color: var(--white);
}

.section--dark .testimonial-simple__author-role,
.section--dark .testimonial-simple__company-size {
  color: var(--gray-300);
}

.section--dark .testimonial-slider-simple__nav-btn {
  background-color: var(--gray-700);
  border-color: var(--gray-600);
  color: var(--white);
}

.section--dark .testimonial-slider-simple__nav-btn:hover {
  background-color: var(--gray-600);
  border-color: var(--gray-500);
}

/* Responsive */
@media (max-width: 1200px) {
  :root {
    --testimonial-simple-padding: 2.5rem;
  }
}

@media (max-width: 992px) {

  .testimonial-slider-simple__container {
   transform: rotate(0deg);
  }

  .testimonial-simple-item {
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .testimonial-slider-simple__nav {
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
    align-self: stretch;
    margin-left: 0; /* Centrer sur mobile */
  }
  
  .testimonial-simple__author-section {
    justify-content: center;
  }
  
  .testimonial-simple__quote {
    text-align: center;
  }
}

@media (max-width: 768px) {
  :root {
    --testimonial-simple-padding: 2rem;
    --testimonial-simple-quote-size: 1rem;
    --testimonial-simple-nav-btn-size: 44px;
  }
  
  .testimonial-slider-simple {
    padding: 3rem 0;
  }
  
  .testimonial-simple__author-section {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
  
  .testimonial-simple__author-info {
    align-items: center;
    text-align: center;
  }
}

@media (max-width: 480px) {
  :root {
    --testimonial-simple-padding: 1.5rem;
    --testimonial-simple-avatar-size: 60px;
  }
  
  .testimonial-simple-item {
    gap: 1rem;
  }
  
  .testimonial-simple-content {
    gap: 1.5rem;
  }
}

/* Carousel */
/* ================================
   CAROUSEL STEPS APPROACH
   ================================ */

/* Le module utilise la structure du testimonial-carousel 
   mais avec un contenu différent pour les étapes */

/* Modification du comportement du testimonial-card__content */
.carousel-steps-approach .testimonial-card__content {
  justify-content: normal;
}



/* Numéro de l'étape */
.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--color-dark);
  color: var(--primary);
  font-size: 1.125rem;
  font-weight: 700;
  border-radius: 50%;
  margin-bottom: 1.25rem;
}

/* Titre de l'étape */
.step-title {
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 1rem 0;
  color: var(--color-dark) !important;
}

/* Description de l'étape */
.step-description {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text-default);
  margin: 0 0 1.5rem 0;
}

/* Liste des éléments de l'étape */
.step-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Élément de la liste */
.step-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-default);
}

/* Icône de l'élément - Cercle avec check */
.step-icon {
  flex-shrink: 0;
  margin-top: 0;
  width: 20px;
  height: 20px;
  background: var(--primary);
  border-radius: 50%;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Variantes de couleur */

/* Le step-number garde toujours le background secondary avec texte blanc */
/* Les step-icon gardent toujours le background primary avec icône check blanche */

/* Variante Primary */

.section--primary .step-icon {
  background: var(--primary);
  color: var(--white);
}

/* Variante Secondary */
.section--secondary .step-icon {
    background: var(--primary);
    color: var(--secondary);
}

/* Variante Tertiary */

.section--tertiary .step-icon {
  background: var(--primary);
  color: var(--white);
}

/* Variante Dark */
.section--dark .step-title {
  color: var(--color-text-default);
}

.section--dark .step-description {
  color: var(--color-text-default);
}

.section--dark .step-item {
  color: var(--color-text-default);
}

/* Responsive */
@media (max-width: 768px) {
  .step-number {
    width: 36px;
    height: 36px;
    font-size: 1rem;
    margin-bottom: 1rem;
  }
  
  .step-title {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
  }
  
  .step-description {
    font-size: 0.875rem;
    margin-bottom: 1rem;
  }
  
  .step-list {
    gap: 0.75rem;
  }
  
  .step-item {
    font-size: 0.8125rem;
  }
  
  .step-icon {
    width: 16px;
    height: 16px;
  }
}

/* ================================
   BACKGROUND IMAGE STYLES
   ================================ */

/* Section avec background image */
.testimonial-carousel.has-background-image {
  position: relative;
  background-attachment: scroll; /* Par défaut pour de meilleures performances */
}

/* Div avec background image (quand mode_section est désactivé) */
div.testimonial-carousel.has-background-image {
  position: relative;
  background-attachment: scroll;
  min-height: 400px; /* Hauteur minimum pour voir le background */
}

/* Overlay pour améliorer la lisibilité */
.background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
}

/* Contenu au-dessus de l'overlay */
.testimonial-carousel.has-background-image > *:not(.background-overlay) {
  position: relative;
  z-index: 2;
}

/* Variantes d'overlay - Sombre */
.background-overlay--dark-light {
  background-color: rgba(0, 0, 0, 0.2);
}

.background-overlay--dark-medium {
  background-color: rgba(0, 0, 0, 0.4);
}

.background-overlay--dark-strong {
  background-color: rgba(0, 0, 0, 0.6);
}

/* Variantes d'overlay - Primary */
.background-overlay--primary-light {
  background-color: var(--primary-200);
  opacity: 0.3;
}

.background-overlay--primary-medium {
  background-color: var(--primary-400);
  opacity: 0.5;
}

/* Variantes d'overlay - Secondary */
.background-overlay--secondary-light {
  background-color: var(--secondary-200);
  opacity: 0.3;
}

.background-overlay--secondary-medium {
  background-color: var(--secondary-400);
  opacity: 0.5;
}

/* Optimisations pour les performances */
@media (max-width: 768px) {
  /* Désactive le parallax sur mobile pour de meilleures performances */
  .testimonial-carousel.has-background-image {
    background-attachment: scroll !important;
  }
}

/* Optimisation pour les écrans à haute densité */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .testimonial-carousel.has-background-image {
    /* Améliore le rendu sur les écrans Retina */
    background-size: cover;
    image-rendering: -webkit-optimize-contrast;
  }
}

/* Comparison */
/* ===================================
   Comparison CRM Section
   =================================== */

.comparison-section {
  padding: 80px 0;
  position: relative;
  background-color: var(--color-white);
  overflow: hidden;
}

.comparison-section.section--secondary {
  background-color: var(--color-light);
}

.comparison-section.section--tertiary {
  background-color: var(--color-dark);
}

.comparison-section.section--dark {
  background-color: var(--color-dark);
}

.comparison-section.section--light {
  background-color: var(--color-white);
}

.comparison-section .section-highlight {
  background-image: linear-gradient(90deg, rgba(250, 228, 62, 0) 25%, rgba(250, 228, 62, 0.5) 50%, rgba(250, 228, 62, 0) 75%);
  width: 100%;
  height: 1px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.comparison-section .section-light {
  opacity: 0.2;
  background-image: radial-gradient(circle at 50% 0, rgb(250, 228, 62), rgba(250, 228, 62, 0) 30%);
  width: 100%;
  height: 150px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.comparison-section .container {
  position: relative;
  z-index: 2;
}

.comparison-surtitre {
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 auto 20px;
  text-align: center;
  color: var(--primary);
}

.comparison-subtitle {
  font-size: 20px;
  line-height: 1.6;
  margin: 0 auto 60px;
  text-align: center;
  color: var(--secondary-600);
  max-width: 600px;
}

.section--secondary .comparison-subtitle {
  color: var(--secondary-700);
}

.section--tertiary .comparison-subtitle {
  color: var(--secondary-300);
}

.section--dark .comparison-subtitle {
  color: var(--secondary-300);
}

.section--light .comparison-subtitle {
  color: var(--secondary-600);
}

.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 60px;
}

.comparison-column {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border: 2px solid var(--secondary-300);
  border-radius: 15px;
  padding: 30px;
  position: relative;
  background-color: var(--color-white);
}

.section--secondary .comparison-column {
  border-color: var(--secondary-400);
  background-color: var(--light);
}

.section--tertiary .comparison-column {
  border-color: var(--secondary-600);
  background-color: rgba(37, 40, 42, 0.5);
}

.section--dark .comparison-column {
  border-color: var(--secondary-600);
  background-color: rgba(37, 40, 42, 0.5);
}

.section--light .comparison-column {
  border-color: var(--secondary-300);
  background-color: var(--color-white);
}

.comparison-card {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  padding: 30px 30px;
  border: 1px solid var(--secondary-200);
  text-align: left;
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(10px);
}

.section--secondary .comparison-card {
  background-color: rgba(248, 249, 250, 0.8);
  border-color: var(--secondary-300);
}

.section--tertiary .comparison-card {
  background-color: rgba(37, 40, 42, 0.6);
  border-color: var(--secondary-600);
}

.section--dark .comparison-card {
  background-color: rgba(37, 40, 42, 0.6);
  border-color: var(--secondary-600);
}

.section--light .comparison-card {
  background-color: rgba(255, 255, 255, 0.8);
  border-color: var(--secondary-200);
}

.comparison-card.generic-crm,
.comparison-card.proprietary-crm {
  border-color: var(--secondary-200);
}

.section--secondary .comparison-card.generic-crm,
.section--secondary .comparison-card.proprietary-crm {
  border-color: var(--secondary-300);
}

.section--tertiary .comparison-card.generic-crm,
.section--tertiary .comparison-card.proprietary-crm {
  border-color: var(--secondary-600);
}

.section--dark .comparison-card.generic-crm,
.section--dark .comparison-card.proprietary-crm {
  border-color: rgb(255 255 255 / 20%);
}

.section--light .comparison-card.generic-crm,
.section--light .comparison-card.proprietary-crm {
  border-color: var(--secondary-200);
}

.comparison-card.our-solution {
  border-color: var(--primary);
  box-shadow: 0 0 30px rgba(250, 228, 62, 0.1);
  background-color: rgba(250, 228, 62, 0.05);
  height: 100%;
  position: relative;
  padding: 50px 40px;
  text-align: center;
  overflow: hidden;
}

.section--tertiary .comparison-card.our-solution {
  background-color: rgba(250, 228, 62, 0.1);
}

.section--dark .comparison-card.our-solution {
  background-color: rgba(37, 40, 42, 0.6);
}

.section--light .comparison-card.our-solution {
  background-color: rgba(250, 228, 62, 0.05);
}

.comparison-card.our-solution::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.15), transparent 60%);
  z-index: 1;
  pointer-events: none;
}

.comparison-card.our-solution h3,
.comparison-card.our-solution .comparison-list {
  position: relative;
  z-index: 2;
}

.comparison-card.our-solution h3 {
  font-size: 32px;
  margin-bottom: 40px;
  color: var(--color-dark);
  padding-bottom: 35px;
}

.section--tertiary .comparison-card.our-solution h3 {
  color: var(--color-white);
}

.section--dark .comparison-card.our-solution h3 {
  color: var(--color-white);
}

.section--light .comparison-card.our-solution h3 {
  color: var(--color-dark);
}

.comparison-card.our-solution .comparison-list {
  display: inline-block;
  text-align: left;
}

.comparison-list li {
  font-size: 16px;
  padding: 8px 0;
  color: var(--color-dark);
  display: flex;
  align-items: baseline;
  gap: 15px;
  margin-bottom: 2px;
}

.section--tertiary .comparison-list li {
  color: var(--color-white);
}

.section--dark .comparison-list li {
  color: var(--color-white);
}

.section--light .comparison-list li {
  color: var(--color-dark);
}

.comparison-card.our-solution .comparison-list li {
  font-size: 19px;
  padding: 16px 0;
  margin-bottom: 5px;
  font-weight: 500;
}

.comparison-card.our-solution .check-icon {
  width: 32px;
  height: 32px;
  font-size: 18px;
}

.comparison-card.our-solution:hover {
  transform: translateY(-10px);
  box-shadow: 0 0 40px rgba(250, 228, 62, 0.15);
}

.comparison-card:hover {
  transform: translateY(-10px);
}

.comparison-card-title {
  color: var(--color-dark);
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--secondary-200);
}

.section--secondary .comparison-card-title {
  color: var(--color-dark);
  border-bottom-color: var(--secondary-300);
}

.section--tertiary .comparison-card-title {
  color: var(--color-white);
  border-bottom-color: var(--secondary-600);
}

.section--dark .comparison-card-title {
  color: var(--color-white);
  border-bottom-color: rgb(255 255 255 / 10%);
}

.section--light .comparison-card-title {
  color: var(--color-dark);
  border-bottom-color: var(--secondary-200);
}

.our-solution .comparison-card-title {
  color: var(--primary);
}

.section--tertiary .our-solution .comparison-card-title {
  color: var(--primary);
}

.comparison-list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex-grow: 1;
}

.check-icon, .warning-icon, .cross-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 14px;
}

.check-icon {
  background-color: rgba(250, 228, 62, 0.2);
  color: var(--primary);
}

.warning-icon {
  background-color: rgba(255, 152, 0, 0.2);
  color: #ff9800;
}

.cross-icon {
  background-color: rgba(244, 67, 54, 0.2);
  color: #f44336;
}

/* Header alignment */
.comparison-header.text-align--left {
  text-align: left;
}

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

.comparison-header.text-align--right {
  text-align: right;
}

.comparison-header.text-align--left .comparison-subtitle {
  margin-left: 0;
  margin-right: auto;
}

.comparison-header.text-align--center .comparison-subtitle {
  margin-left: auto;
  margin-right: auto;
}

.comparison-header.text-align--right .comparison-subtitle {
  margin-left: auto;
  margin-right: 0;
}

/* Highlight text */
.comparison-section .highlight {
  color: var(--primary);
  font-weight: 600;
}

/* Responsive Styles */
@media (max-width: 992px) {
  .comparison-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .comparison-column, 
  .comparison-card.our-solution {
    grid-column: span 2;
    margin-top: 30px;
  }
  
  .comparison-card.our-solution {
    margin-top: 0;
  }
}

@media (max-width: 768px) {
  .comparison-section {
    padding: 60px 0;
  }
  
  .comparison-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .comparison-column {
    padding: 20px;
    gap: 20px;
  }
  
  .comparison-card {
    padding: 20px;
  }
  
  .comparison-card.our-solution {
    padding: 30px 20px;
  }
  
  .comparison-card.our-solution h3 {
    font-size: 24px;
    margin-bottom: 30px;
  }
  
  .comparison-card.our-solution .comparison-list li {
    font-size: 16px;
    padding: 12px 0;
  }
  
  .comparison-subtitle {
    font-size: 18px;
    margin-bottom: 40px;
  }
}

/* About */
/**
 * About Section 01 Styles
 * Styles pour la section About avec titre à gauche et contenu à droite
 */

/* =================================
   STRUCTURE DE BASE
   ================================= */

.about-section {
  position: relative;
  overflow: hidden;
}

/* Conteneur interne avec layout horizontal */
.about-section__inner {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}

/* Conteneur du titre de la section */
.about-section__title {
  flex: 0 0 350px;
}

/* Titre h2 à l'intérieur */
.about-section__title h1,
.about-section__title h2,
.about-section__title h3,
.about-section__title h4,
.about-section__title h5,
.about-section__title h6 {
  font-weight: var(--font-weight-normal);
  line-height: 1;
  letter-spacing: -0.05em;
  margin: 0;
  color: var(--color-headings-default);
}

/* Conteneur du contenu */
.about-section__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* Paragraphe de description */
.about-section__description {
  font-size: 1.5rem; /* 24px */
  line-height: 1.5; /* 36px */
  font-weight: var(--font-weight-normal);
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--color-text-default);
}

/* Conteneur des actions */
.about-section__actions {
  display: flex;
  align-items: center;
}

/* =================================
   VARIATIONS DE COULEURS
   ================================= */

/* Fond blanc (par défaut) */
.about-section--white {
  background-color: var(--color-background-white);
}

.about-section--white .about-section__title h1,
.about-section--white .about-section__title h2,
.about-section--white .about-section__title h3,
.about-section--white .about-section__title h4,
.about-section--white .about-section__title h5,
.about-section--white .about-section__title h6,
.about-section--white .about-section__description {
  color: var(--color-text-default);
}

/* Utilisation des classes existantes pour les variations */
.section--tertiary {
  background-color: var(--color-background-tertiary);
}

.section--secondary {
  background-color: var(--color-background-secondary);
}

.section--tertiary .about-section__title h1,
.section--tertiary .about-section__title h2,
.section--tertiary .about-section__title h3,
.section--tertiary .about-section__title h4,
.section--tertiary .about-section__title h5,
.section--tertiary .about-section__title h6,
.section--tertiary .about-section__description {
  color: var(--color-text-inverted);
}

/* Variation Primary (Vert clair) */
.section--primary {
  background-color: var(--color-background-primary);
}

.section--primary .about-section__title h1,
.section--primary .about-section__title h2,
.section--primary .about-section__title h3,
.section--primary .about-section__title h4,
.section--primary .about-section__title h5,
.section--primary .about-section__title h6,
.section--primary .about-section__description {
  color: var(--color-text-default);
}

/* Variation Dark (Sombre) */
.section--dark {
  background-color: var(--color-background-dark);
}

.section--dark .about-section__title h1,
.section--dark .about-section__title h2,
.section--dark .about-section__title h3,
.section--dark .about-section__title h4,
.section--dark .about-section__title h5,
.section--dark .about-section__title h6,
.section--dark .about-section__description {
  color: var(--color-text-inverted);
}

/* =================================
   RESPONSIVE
   ================================= */

/* Tablettes et plus petit */
@media (max-width: 1024px) {
  .about-section__inner {
    flex-direction: column;
    gap: 2rem;
  }
  
  .about-section__title {
    flex: none;
  }
  
}

/* Mobile */
@media (max-width: 768px) {
  
  
  .about-section__description {
    font-size: 1.125rem; /* 18px */
    line-height: 1.625; /* 29px */
  }
  
  .about-section__content {
    gap: 1.5rem;
  }
}

/* Petit mobile */
@media (max-width: 480px) {
  
  .about-section__description {
    font-size: 1rem; /* 16px */
    line-height: 1.5; /* 24px */
  }
}

/* =================================
   UTILITAIRES POUR SECTIONS
   ================================= */

/* Padding vertical pour les sections */
.py-section {
  padding-top: var(--section-padding-y);
  padding-bottom: var(--section-padding-y);
}

/* Ajustements responsive du padding */
@media (max-width: 768px) {
  .py-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

@media (max-width: 480px) {
  .py-section {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}
/**
 * About Section 02 Styles
 * Styles pour la section About avec contenu textuel et métriques
 */

/* =================================
   STRUCTURE DE BASE
   ================================= */

.about-section-02 {
  position: relative;
  overflow: hidden;
}



/* Conteneur interne avec layout horizontal */
.about-section-02__inner {
  display: flex;
  align-items: flex-start;
  gap: 15rem; /* 240px */
}

/* Conteneur du contenu textuel */
.about-section-02__content {
  flex: 1;
  max-width: 592px;
}

/* Titre de la section */
.about-section-02__title {
  font-weight: var(--font-weight-normal);
  line-height: 1;
  letter-spacing: -0.05em;
  margin: 0 0 1.5rem 0;
  color: var(--color-headings-default);
}

/* Paragraphe de description */
.about-section-02__description {
  font-size: 1.125rem; /* 18px */
  line-height: 1.625; /* 26px */
  font-weight: var(--font-weight-normal);
  letter-spacing: -0.004em;
  margin: 0;
  color: var(--color-text-inverted);
  opacity: 0.8;
}

/* Conteneur des métriques */
.about-section-02__metrics {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  min-width: 280px;
}

/* Styles spécifiques pour les métriques dans cette section */
.about-section-02__metrics .metric-item {
  text-align: left;
}

.about-section-02__metrics .metric-value {
  font-size: 3rem; /* 48px */
  font-weight: var(--font-weight-normal);
  line-height: 1.25;
  color: var(--color-text-inverted);
  margin-bottom: 0.5rem;
}

.about-section-02__metrics .metric-label {
  font-size: 1.125rem; /* 18px */
  line-height: 1.44; /* 26px */
  color: var(--color-text-inverted);
  opacity: 0.8;
}

/* =================================
   VARIATIONS DE COULEURS
   ================================= */

/* Fond blanc (par défaut) */
.section--light {
  background-color: var(--white);
}

.section--light .about-section-02__title,
.section--light .about-section-02__description,
.section--light .metric-value,
.section--light .metric-label {
  color: var(--color-text-default);
}

/* Variation Tertiary (fond beige) - texte sombre */
.section--tertiary .about-section-02__title,
.section--tertiary .about-section-02__description,
.section--tertiary .metric-value,
.section--tertiary .metric-label {
  color: var(--color-text-default);
}

/* Variation Secondary (fond vert foncé) - texte clair */
.section--secondary .about-section-02__title,
.section--secondary .about-section-02__description,
.section--secondary .metric-value,
.section--secondary .metric-label {
  color: var(--color-text-inverted);
}

/* Variation Primary (fond vert clair) - texte sombre */
.section--primary .about-section-02__title,
.section--primary .about-section-02__description,
.section--primary .metric-value,
.section--primary .metric-label {
  color: var(--color-text-default);
}

/* Variation Dark (fond sombre) - texte clair */
.section--dark .about-section-02__title,
.section--dark .about-section-02__description,
.section--dark .metric-value,
.section--dark .metric-label {
  color: var(--color-text-inverted);
}

/* =================================
   RESPONSIVE
   ================================= */

/* Tablettes et plus petit */
@media (max-width: 1024px) {
  .about-section-02__inner {
    flex-direction: column;
    gap: 3rem;
  }
  
  .about-section-02__metrics {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 3rem;
  }
  
  .about-section-02__metrics .metric-item {
    flex: 1 1 calc(50% - 1.5rem);
    min-width: 200px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .about-section-02__description {
    font-size: 1rem; /* 16px */
    line-height: 1.5;
  }
  
  .about-section-02__metrics {
    gap: 2rem;
  }
  
  .about-section-02__metrics .metric-value {
    font-size: 2.5rem; /* 40px */
  }
  
  .about-section-02__metrics .metric-label {
    font-size: 1rem; /* 16px */
  }
}

/* Petit mobile */
@media (max-width: 480px) {
  
  .about-section-02__metrics .metric-item {
    flex: 1 1 100%;
  }
  
  .about-section-02__metrics .metric-value {
    font-size: 2rem; /* 32px */
  }
  
  .about-section-02__metrics .metric-label {
    font-size: 0.875rem; /* 14px */
  }
}
/**
 * About Section 03 Styles
 * Styles pour la section About avec contenu textuel et galerie d'images
 */

/* =================================
   STRUCTURE DE BASE
   ================================= */

.about-section-03 {
  position: relative;
  overflow: hidden;
}

/* Conteneur interne avec layout horizontal */
.about-section-03__inner {
  display: flex;
  align-items: flex-start;
  gap: 2rem; /* 32px */
}

/* Zone du titre (largeur fixe) */
.about-section-03__title {
  flex: 0 0 488px;
  max-width: 488px;
}

.about-section-03__title h1,
.about-section-03__title h2,
.about-section-03__title h3,
.about-section-03__title h4,
.about-section-03__title h5,
.about-section-03__title h6 {
  font-weight: var(--font-weight-normal);
  line-height: 1;
  letter-spacing: -0.05em;
  margin: 0;
  color: var(--color-headings-default);
}

/* Zone du contenu (flexible) */
.about-section-03__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Empêche le bouton de prendre toute la largeur */
  gap: 2.5rem; /* 40px */
}

/* Paragraphe de description */
.about-section-03__description {
  font-size: 1.125rem; /* 18px */
  line-height: 1.625; /* 26px */
  font-weight: var(--font-weight-normal);
  letter-spacing: -0.004em;
  margin: 0;
  color: var(--color-text-default);
}

/* =================================
   GALERIE D'IMAGES
   ================================= */

/* Wrapper de la galerie - sort du container pour être pleine largeur */
.about-section-03__gallery-wrapper {
  margin-top: 6rem; /* 96px - espacement entre le contenu et la galerie */
  overflow: hidden;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Conteneur de la galerie avec défilement horizontal */
.about-section-03__gallery {
  display: flex;
  gap: 2rem; /* 32px */
  padding: 0 2rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  width: 100%;
  min-width: 100%;
  justify-content: center; /* Centre les images */
}

/* Masquer la scrollbar sur WebKit */
.about-section-03__gallery::-webkit-scrollbar {
  display: none;
}

/* Images de la galerie */
.about-section-03__gallery-image {
  flex: 0 0 280px;
  height: 356px;
  object-fit: cover;
  border-radius: 16px;
  transition: transform 0.3s ease;
}

.about-section-03__gallery-image:hover {
  transform: scale(1.02);
}

/* Animation infinie pour les sections avec la classe infini-slide */
.about-section-03.infini-slide .about-section-03__gallery {
  animation: infiniteScroll 60s linear infinite;
  gap: 4rem;
  width: max-content; /* Permet à la galerie de s'étendre selon son contenu */
  justify-content: flex-start; /* Override du centrage pour l'animation */
}

.about-section-03.infini-slide .about-section-03__gallery:hover {
  animation-play-state: paused;
}

/* Animation infinie - déplace de la moitié de la largeur totale pour créer l'effet de boucle */
@keyframes infiniteScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-280px * 5 - 2rem * 5)); /* Déplace exactement la largeur de 5 images pour boucle parfaite */
  }
}

/* =================================
   VARIATIONS DE COULEURS
   ================================= */

/* Fond blanc (par défaut) */
.about-section-03--white {
  background-color: var(--white);
}

.about-section-03--white .about-section-03__title h1,
.about-section-03--white .about-section-03__title h2,
.about-section-03--white .about-section-03__title h3,
.about-section-03--white .about-section-03__title h4,
.about-section-03--white .about-section-03__title h5,
.about-section-03--white .about-section-03__title h6,
.about-section-03--white .about-section-03__description {
  color: var(--color-text-default);
}

/* Variation Tertiary (fond beige) - texte sombre */
.section--tertiary .about-section-03__title h1,
.section--tertiary .about-section-03__title h2,
.section--tertiary .about-section-03__title h3,
.section--tertiary .about-section-03__title h4,
.section--tertiary .about-section-03__title h5,
.section--tertiary .about-section-03__title h6,
.section--tertiary .about-section-03__description {
  color: var(--color-text-default);
}

/* Variation Secondary (fond vert foncé) - texte clair */
.section--secondary .about-section-03__title h1,
.section--secondary .about-section-03__title h2,
.section--secondary .about-section-03__title h3,
.section--secondary .about-section-03__title h4,
.section--secondary .about-section-03__title h5,
.section--secondary .about-section-03__title h6,
.section--secondary .about-section-03__description {
  color: var(--color-text-inverted);
}

/* Variation Primary (fond vert clair) - texte sombre */
.section--primary .about-section-03__title h1,
.section--primary .about-section-03__title h2,
.section--primary .about-section-03__title h3,
.section--primary .about-section-03__title h4,
.section--primary .about-section-03__title h5,
.section--primary .about-section-03__title h6,
.section--primary .about-section-03__description {
  color: var(--color-text-default);
}

/* Variation Dark (fond sombre) - texte clair */
.section--dark .about-section-03__title h1,
.section--dark .about-section-03__title h2,
.section--dark .about-section-03__title h3,
.section--dark .about-section-03__title h4,
.section--dark .about-section-03__title h5,
.section--dark .about-section-03__title h6,
.section--dark .about-section-03__description {
  color: var(--color-text-inverted);
}

/* =================================
   RESPONSIVE
   ================================= */

/* Tablettes et plus petit */
@media (max-width: 1024px) {
  .about-section-03__inner {
    flex-direction: column;
    gap: 3rem;
  }
  
  .about-section-03__title {
    flex: none;
    max-width: none;
  }
  
  .about-section-03__gallery-wrapper {
    margin-top: 4rem;
  }
}

/* Mobile */
@media (max-width: 768px) {
  
  .about-section-03__description {
    font-size: 1rem; /* 16px */
    line-height: 1.5;
  }
  
  .about-section-03__content {
    gap: 2rem;
  }
  
  .about-section-03__gallery-wrapper {
    margin-top: 3rem;
  }
  
  .about-section-03__gallery {
    padding: 0 1rem;
    gap: 1rem;
  }
  
  .about-section-03__gallery-image {
    flex: 0 0 240px;
    width: 240px;
    height: 300px;
  }
}

/* Petit mobile */
@media (max-width: 480px) {
  
  .about-section-03__gallery-image {
    flex: 0 0 200px;
    width: 200px;
    height: 250px;
  }
}
/**
 * About Section 04 Styles
 * Styles pour la section About avec contenu textuel, checklist et image
 */

/* =================================
   STRUCTURE DE BASE
   ================================= */

.about-section-04 {
  position: relative;
  overflow: hidden;
}

/* Conteneur interne avec layout horizontal */
.about-section-04__inner {
  display: flex;
  align-items: center;
  gap: 8.5rem; /* 136px */
}

/* Zone du contenu (flexible) */
.about-section-04__content {
  flex: 1;
  max-width: 592px;
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 40px */
}

.about-section-04__content .section__overtitle {
        margin-bottom: 0;
    }

/* Zone du texte */
.about-section-04__text {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* 24px */
}

/* Titre de la section */
.about-section-04__title {
  font-weight: var(--font-weight-normal);
  line-height: 1;
  letter-spacing: -0.05em;
  margin: 0;
  color: var(--color-headings-default);
}

/* Paragraphe de description */
.about-section-04__description {
  font-size: 1.125rem; /* 18px */
  line-height: 1.625; /* 26px */
  font-weight: var(--font-weight-normal);
  letter-spacing: -0.004em;
  margin: 0;
  color: var(--color-text-muted);
}

/* =================================
   CHECKLIST
   ================================= */

/* Conteneur de la checklist */
.about-section-04__checklist {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 16px */
}

/* Item de check */
.about-section-04__check-item {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* 12px */
}

/* Icône de check */
.about-section-04__check-icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  background-color: var(--primary-400);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-default);
}

.about-section-04__check-icon .icon {
  width: 16px;
  height: 16px;
}

/* Texte de check */
.about-section-04__check-text {
  font-size: 1.125rem; /* 18px */
  line-height: 1.44; /* 26px */
  font-weight: var(--font-weight-normal);
  color: var(--color-text-default);
}

/* =================================
   BOUTON
   ================================= */

.about-section-04__actions {
  margin-top: 1rem;
}

/* =================================
   IMAGE
   ================================= */

/* Zone de l'image */
.about-section-04__image {
  flex: 0 0 488px;
  width: 488px;
  height: 620px;
}

/* Image */
.about-section-04__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
}

/* =================================
   VARIATIONS DE COULEURS
   ================================= */

/* Fond blanc (par défaut) */
.section--light {
  background-color: var(--white);
}

.section--light .about-section-04__title {
  color: var(--color-text-default);
}

.section--light .about-section-04__description {
  color: var(--color-text-muted);
}

.section--light .about-section-04__check-text {
  color: var(--color-text-default);
}

/* Variation Tertiary (fond beige) - texte sombre */
.section--tertiary .about-section-04__title {
  color: var(--color-text-default);
}

.section--tertiary .about-section-04__description {
  color: var(--color-text-muted);
}

.section--tertiary .about-section-04__check-text {
  color: var(--color-text-default);
}

/* Variation Secondary (fond vert foncé) - texte clair */
.section--secondary .about-section-04__title {
  color: var(--color-text-inverted);
}

.section--secondary .about-section-04__description {
  color: var(--color-text-inverted);
  opacity: 0.8;
}

.section--secondary .about-section-04__check-text {
  color: var(--color-text-inverted);
}

/* Variation Primary (fond vert clair) - texte sombre */
.section--primary .about-section-04__title {
  color: var(--color-text-default);
}

.section--primary .about-section-04__description {
  color: var(--color-text-muted);
}

.section--primary .about-section-04__check-text {
  color: var(--color-text-default);
}

/* Variation Dark (fond sombre) - texte clair */
.section--dark .about-section-04__title {
  color: var(--color-text-inverted);
}

.section--dark .about-section-04__description {
  color: var(--color-text-inverted);
  opacity: 0.8;
}

.section--dark .about-section-04__check-text {
  color: var(--color-text-inverted);
}

/* =================================
   RESPONSIVE
   ================================= */

/* Tablettes et plus petit */
@media (max-width: 1024px) {
  .about-section-04__inner {
    flex-direction: column;
    gap: 4rem;
    align-items: flex-start;
  }
  
  .about-section-04__content {
    max-width: none;
    width: 100%;
  }
  
  .about-section-04__image {
    flex: none;
    width: 100%;
    max-width: 600px;
    height: 400px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .about-section-04__inner {
    gap: 3rem;
  }
  
  
  .about-section-04__description {
    font-size: 1rem; /* 16px */
    line-height: 1.5;
  }
  
  .about-section-04__content {
    gap: 1rem;
  }
  
  .about-section-04__text {
    gap: 1rem;
  }
  
  .about-section-04__image {
    height: 300px;
  }
  
  .about-section-04__img {
    border-radius: 16px;
  }
  
  .about-section-04__check-text {
    font-size: 1rem; /* 16px */
  }
}

/* Petit mobile */
@media (max-width: 480px) {
  
  .about-section-04__image {
    height: 250px;
  }
  
  .about-section-04__check-icon {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
  }
  
  .about-section-04__check-icon .icon {
    width: 14px;
    height: 14px;
  }
  
  .about-section-04__check-text {
    font-size: 0.875rem; /* 14px */
  }
}
/**
 * About Section 04 Light Styles
 * Styles pour la section About simplifiée sans image - version centrée
 */

/* =================================
   STRUCTURE DE BASE
   ================================= */

.about-section-04-light {
  position: relative;
  overflow: hidden;
}

/* Conteneur interne centré (sans colonnes) */
.about-section-04-light__inner {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Zone du contenu centrée */
.about-section-04-light__content {
  max-width: 800px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2.5rem; /* 40px */
}

/* =================================
   HAUTEUR PERSONNALISÉE
   ================================= */

/* Section avec hauteur fixe */
.about-section-04-light--fixed-height {
  display: flex;
  align-items: center;
  min-height: auto;
}

/* Inner container centré verticalement */
.about-section-04-light__inner--centered {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  width: 100%;
}

/* Media query pour desktop uniquement - hauteur personnalisée */
@media (min-width: 769px) {
  .about-section-04-light--fixed-height[data-custom-height] {
    height: var(--custom-height);
  }
}

.about-section-04-light__content .section__overtitle {
  margin-bottom: 0;
}

/* Zone du texte */
.about-section-04-light__text {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* 24px */
}

/* Titre de la section */
.about-section-04-light__title {
  font-weight: var(--font-weight-normal);
  line-height: 1;
  letter-spacing: -0.05em;
  margin: 0;
  color: var(--color-headings-default);
}

/* Paragraphe de description */
.about-section-04-light__description {
  font-size: 1.125rem; /* 18px */
  line-height: 1.625; /* 26px */
  font-weight: var(--font-weight-normal);
  letter-spacing: -0.004em;
  margin: 0;
  color: var(--color-text-muted);
}

/* =================================
   CHECKLIST - ALIGNEMENT CORRIGÉ
   ================================= */

/* Conteneur de la checklist */
.about-section-04-light__checklist {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 16px */
}

/* Item de check - ALIGNEMENT CORRIGÉ */
.about-section-04-light__check-item {
  display: flex;
  align-items: flex-start; /* Alignement en haut pour éviter le décalage */
  gap: 0.75rem; /* 12px */
  line-height: 1.4; /* Hauteur de ligne cohérente */
}

/* Icône de check - TAILLE FIXE */
.about-section-04-light__check-icon {
  flex: 0 0 20px; /* Taille fixe pour éviter la déformation */
  width: 20px;
  height: 20px;
  min-width: 20px; /* Largeur minimale garantie */
  min-height: 20px; /* Hauteur minimale garantie */
  background-color: var(--primary-400);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-default);
  margin-top: 0.125rem; /* Petit décalage vers le haut pour alignement parfait */
}

.about-section-04-light__check-icon svg,
.about-section-04-light__check-icon i {
  width: 12px;
  height: 12px;
  stroke-width: 2.5;
}

/* Texte de check - ALIGNEMENT PARFAIT */
.about-section-04-light__check-text {
  flex: 1; /* Prend tout l'espace restant */
  font-size: 1.125rem; /* 18px */
  line-height: 1.4; /* Hauteur de ligne cohérente avec l'icône */
  font-weight: var(--font-weight-normal);
  color: var(--color-text-default);
  margin: 0; /* Supprime les marges par défaut */
  padding: 0; /* Supprime les paddings par défaut */
}

/* =================================
   BOUTONS
   ================================= */

.about-section-04-light__actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Sur écrans plus larges, afficher les boutons en ligne */
@media (min-width: 640px) {
  .about-section-04-light__actions {
    flex-direction: row;
  }
}

/* =================================
   VARIATIONS DE COULEURS
   ================================= */

/* Fond blanc (par défaut) */
.section--light .about-section-04-light__title {
  color: var(--color-text-default);
}

.section--light .about-section-04-light__description {
  color: var(--color-text-muted);
}

.section--light .about-section-04-light__check-text {
  color: var(--color-text-default);
}

/* Variation Tertiary (fond beige) - texte blanc */
.section--tertiary .about-section-04-light__title {
  color: var(--color-text-inverted);
}

.section--tertiary .about-section-04-light__description {
  color: var(--color-text-inverted);
  opacity: 0.9;
}

.section--tertiary .about-section-04-light__check-text {
  color: var(--color-text-inverted);
}

.section--tertiary .about-section-04-light__check-icon {
  background-color: var(--white);
  color: var(--color-text-default);
}

/* Variation Secondary (fond vert foncé) - texte clair */
.section--secondary .about-section-04-light__title {
  color: var(--color-text-inverted);
}

.section--secondary .about-section-04-light__description {
  color: var(--color-text-inverted);
  opacity: 0.8;
}

.section--secondary .about-section-04-light__check-text {
  color: var(--color-text-inverted);
}

/* Variation Primary (fond vert clair) - texte sombre */
.section--primary .about-section-04-light__title {
  color: var(--color-text-default);
}

.section--primary .about-section-04-light__description {
  color: var(--color-text-muted);
}

.section--primary .about-section-04-light__check-text {
  color: var(--color-text-default);
}

/* Variation Dark (fond sombre) - texte clair */
.section--dark .about-section-04-light__title {
  color: var(--color-text-inverted);
}

.section--dark .about-section-04-light__description {
  color: var(--color-text-inverted);
  opacity: 0.8;
}

.section--dark .about-section-04-light__check-text {
  color: var(--color-text-inverted);
}

/* =================================
   RESPONSIVE
   ================================= */

/* Tablettes */
@media (max-width: 1024px) {
  .about-section-04-light__content {
    max-width: 700px;
    gap: 2rem;
  }
  
  .about-section-04-light__checklist {
    max-width: 500px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .about-section-04-light__content {
    gap: 1.5rem;
    text-align: center; /* Centrer le contenu sur mobile */
  }
  
  .about-section-04-light__description {
    font-size: 1rem; /* 16px */
    line-height: 1.5; /* 24px */
  }
  
  .about-section-04-light__checklist {
    max-width: 100%;
    align-items: center; /* Centrer la checklist */
  }
  
  .about-section-04-light__check-text {
    font-size: 1rem; /* 16px */
  }
  
  .about-section-04-light__actions {
    flex-direction: column;
    align-items: center; /* Centrer les boutons */
  }
  
  /* Désactiver la hauteur personnalisée sur mobile */
  .about-section-04-light--fixed-height {
    height: auto !important; /* Annuler la hauteur fixe */
    min-height: auto !important;
    display: block; /* Retour au comportement normal */
  }
  
  .about-section-04-light__inner--centered {
    display: block; /* Retour au comportement normal */
    min-height: auto;
  }
}

/* Petit mobile */
@media (max-width: 480px) {
  .about-section-04-light__content {
    gap: 1.25rem;
  }
  
  .about-section-04-light__check-item {
    gap: 0.625rem; /* 10px */
  }
  
  .about-section-04-light__check-icon {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
  }
  
  .about-section-04-light__check-icon svg,
  .about-section-04-light__check-icon i {
    width: 10px;
    height: 10px;
  }
}
/**
 * About Section 05 Styles
 * Styles pour la section About avec disposition centrée et variables d'alignement
 */

/* =================================
   VARIABLES D'ALIGNEMENT
   ================================= */

:root {
  /* Variables d'alignement pour About Section 05 */
  --about-05-text-align: center; /* left | center | right */
  --about-05-items-align: center; /* flex-start | center | flex-end */
}

/* =================================
   STRUCTURE DE BASE
   ================================= */

.about-section-05 {
  position: relative;
  overflow: hidden;
}

/* Conteneur interne centré avec largeur maximale */
.about-section-05__inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: var(--about-05-text-align);
}

/* Titre de la section centré */
.about-section-05__title {
  font-weight: var(--font-weight-normal);
  line-height: 1;
  letter-spacing: -0.05em;
  margin: 0 0 2rem 0;
  color: var(--color-headings-default);
}

/* Conteneur du contenu */
.about-section-05__content {
  display: flex;
  flex-direction: column;
  align-items: var(--about-05-items-align);
  gap: 2.5rem;
}

/* Paragraphe de description */
.about-section-05__description {
  font-size: 1.5rem; /* 24px */
  line-height: 1.5; /* 36px */
  font-weight: var(--font-weight-normal);
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--color-text-default);
  text-align: var(--about-05-text-align);
}

/* Conteneur des actions */
.about-section-05__actions {
  display: flex;
  align-items: center;
  justify-content: var(--about-05-items-align);
}

/* =================================
   MODIFICATEURS D'ALIGNEMENT
   ================================= */

/* Alignement à gauche */
.about-section-05.align-left {
  --about-05-text-align: left;
  --about-05-items-align: flex-start;
}

/* Alignement centré (par défaut) */
.about-section-05.align-center {
  --about-05-text-align: center;
  --about-05-items-align: center;
}

/* Alignement à droite */
.about-section-05.align-right {
  --about-05-text-align: right;
  --about-05-items-align: flex-end;
}

.about-section-05.align-left .about-section-05__inner, .about-section-05.align-right .about-section-05__inner{
  max-width: 100%;
}

/* =================================
   VARIATIONS DE COULEURS
   ================================= */

/* Fond blanc (par défaut) */
.about-section-05--white {
  background-color: var(--color-background-white);
}

.about-section-05--white .about-section-05__title,
.about-section-05--white .about-section-05__description {
  color: var(--color-text-default);
}

/* Utilisation des classes existantes pour les variations */
.section--tertiary .about-section-05__title,
.section--tertiary .about-section-05__description {
  color: var(--color-text-default);
}

.section--secondary .about-section-05__title,
.section--secondary .about-section-05__description {
  color: var(--color-text-inverted);
}

/* Variation Primary (Vert clair) */
.section--primary .about-section-05__title,
.section--primary .about-section-05__description {
  color: var(--color-text-default);
}

/* Variation Dark (Sombre) */
.section--dark .about-section-05__title,
.section--dark .about-section-05__description {
  color: var(--color-text-inverted);
}

/* =================================
   RESPONSIVE
   ================================= */

/* Tablettes */
@media (max-width: 1024px) {
  .about-section-05__inner {
    max-width: 600px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .about-section-05__inner {
    max-width: 100%;
    padding: 0 1rem;
  }
  
  .about-section-05__description {
    font-size: 1.125rem; /* 18px */
    line-height: 1.625; /* 29px */
  }
  
  .about-section-05__content {
    gap: 1.5rem;
  }
}

/* Petit mobile */
@media (max-width: 480px) {
  
  .about-section-05__description {
    font-size: 1rem; /* 16px */
    line-height: 1.5; /* 24px */
  }
}

/* Logo Section */
/*------------------------------------
    Logo Section
    Section pour afficher les logos des partenaires
------------------------------------*/

/* Variables */
:root {
  --logo-size: 200px;
  --logo-size-mobile: 165px;
  --logo-spacing: 48px;
  --logo-spacing-mobile: 40px;
  --logo-section-title-size: 1.25rem;
  --logo-section-spacing-vertical: 2rem;
  --logo-section-spacing-vertical-mobile: 2rem;
}

/* Base styles */
.logo-section {
  position: relative;
  overflow: hidden;
}

.logo-section__title {
  font-size: var(--logo-section-title-size);
  font-weight: 500;
  margin: 0;
  line-height: 1.2;
}

/* Logo container */
.logo-section__logos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--logo-spacing);
  justify-content: center;
}

/* Système de colonnes pour les logos */
/* Utilise le système grid existant pour un contrôle précis du nombre de logos par ligne */
.logo-section__logos--grid {
  display: grid;
  align-items: center;
  gap: var(--logo-spacing);
  justify-items: center;
}

/* Classes pour le nombre de logos par ligne */
.logo-section__logos--grid.logo-section--cols-2 {
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
}

.logo-section__logos--grid.logo-section--cols-3 {
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
}

.logo-section__logos--grid.logo-section--cols-4 {
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
}

.logo-section__logos--grid.logo-section--cols-5 {
  grid-template-columns: repeat(5, 1fr);
  justify-items: center;
}

.logo-section__logos--grid.logo-section--cols-6 {
  grid-template-columns: repeat(6, 1fr);
  justify-items: center;
}

/* Classes shortcuts qui utilisent le système grid existant */
.logo-section__logos--2-cols {
  @extend .grid;
  @extend .grid-cols-2;
  justify-items: center;
}

.logo-section__logos--3-cols {
  @extend .grid;
  @extend .grid-cols-3;
  justify-items: center;
}

.logo-section__logos--4-cols {
  @extend .grid;
  @extend .grid-cols-4;
  justify-items: center;
}

.logo-section__logos--5-cols {
  @extend .grid;
  @extend .grid-cols-5;
  justify-items: center;
}

.logo-section__logos--6-cols {
  @extend .grid;
  @extend .grid-cols-6;
  justify-items: center;
}

/* Alternative avec classes directes (sans @extend) */
.logo-section__logos.logo-cols-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--logo-spacing);
  justify-items: center;
}

.logo-section__logos.logo-cols-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--logo-spacing);
  justify-items: center;
}

.logo-section__logos.logo-cols-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--logo-spacing);
  justify-items: center;
}

.logo-section__logos.logo-cols-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--logo-spacing);
  justify-items: center;
}

.logo-section__logos.logo-cols-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--logo-spacing);
  justify-items: center;
}

/* Logo item */
.logo-section__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: var(--logo-size);
  height: 150px;
}

.logo-section__logo img {
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: all var(--transition-duration-default, 0.2s) var(--transition-timing-default, ease-in-out);
}

.logo-section__logo:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

/* Options de style des couleurs des logos */

/* Couleurs toujours affichées */
.logo-always_color .logo-section__logo img {
  filter: grayscale(0%);
  opacity: 1;
}

.logo-always_color .logo-section__logo:hover img {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
}

/* Toujours monochrome */
.logo-always_monochrome .logo-section__logo img {
  filter: grayscale(100%);
  opacity: 0.7;
}

.logo-always_monochrome .logo-section__logo:hover img {
  filter: grayscale(100%);
  opacity: 0.9;
  transform: scale(1.05);
}

/* Mode 1: Horizontal (titre à gauche + logos à droite) */
.logo-section--horizontal .logo-section__grid {
  display: grid;
  grid-template-columns: 35% 65%; /* Colonnes fixes : 35% titre, 65% logos */
  align-items: center;
  gap: var(--logo-spacing);
}

.logo-section--horizontal .logo-section__header {
  min-width: unset; /* Supprimer la largeur minimale fixe */
}

.logo-section--horizontal .logo-section__logos {
  justify-content: flex-start;
}

/* Mode 2: Vertical (titre centré en haut + logos centrés en dessous) */
.logo-section--vertical .logo-section__content {
  text-align: center;
}

.logo-section--vertical .logo-section__title {
  /* margin-bottom supprimé - géré par le conteneur header */
}

.logo-section--vertical .logo-section__header {
  margin-bottom: var(--logo-section-spacing-vertical);
}

.logo-section--vertical .logo-section__logos {
  justify-content: space-between;
}

/* Ajustements pour les variantes de couleur */
.section--dark .logo-section__logo img,
.section--secondary .logo-section__logo img,
.section--black .logo-section__logo img {
  filter: grayscale(100%) brightness(0) invert(1);
  opacity: 0.6;
}

.section--dark .logo-section__logo:hover img,
.section--secondary .logo-section__logo:hover img,
.section--black .logo-section__logo:hover img {
  opacity: 1;
}

/* Ajustements pour sections sombres avec options de couleur */

/* Couleurs toujours affichées sur fond sombre */
.section--dark.logo-always_color .logo-section__logo img,
.section--secondary.logo-always_color .logo-section__logo img,
.section--black.logo-always_color .logo-section__logo img {
  filter: grayscale(0%);
  opacity: 1;
}

.section--dark.logo-always_color .logo-section__logo:hover img,
.section--secondary.logo-always_color .logo-section__logo:hover img,
.section--black.logo-always_color .logo-section__logo:hover img {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
}

/* Toujours monochrome sur fond sombre */
.section--dark.logo-always_monochrome .logo-section__logo img,
.section--secondary.logo-always_monochrome .logo-section__logo img,
.section--black.logo-always_monochrome .logo-section__logo img {
  filter: grayscale(100%) brightness(0) invert(1);
  opacity: 0.6;
}

.section--dark.logo-always_monochrome .logo-section__logo:hover img,
.section--secondary.logo-always_monochrome .logo-section__logo:hover img,
.section--black.logo-always_monochrome .logo-section__logo:hover img {
  filter: grayscale(100%) brightness(0) invert(1);
  opacity: 0.9;
  transform: scale(1.05);
}

/* Support pour les bordures */
.logo-section--bordered {
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
}

.section--dark.logo-section--bordered,
.section--secondary.logo-section--bordered,
.section--black.logo-section--bordered {
  border-color: rgba(255, 255, 255, 0.1);
}

/* Responsive */
@media (max-width: 1024px) {
  .logo-section__logos {
    gap: calc(var(--logo-spacing) * 0.75);
  }
  
  .logo-section__logos.logo-cols-6,
  .logo-section__logos.logo-cols-5 {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .logo-section__logos.logo-cols-4 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .logo-section--horizontal .logo-section__grid {
    grid-template-columns: 35% 65%; /* Maintenir le ratio sur tablette */
    gap: calc(var(--logo-spacing) * 0.75);
  }
}

@media (max-width: 768px) {
  .logo-section__logos {
    gap: var(--logo-spacing-mobile);
  }
  
  .logo-section__logos.logo-cols-6,
  .logo-section__logos.logo-cols-5,
  .logo-section__logos.logo-cols-4,
  .logo-section__logos.logo-cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .logo-section__logos.logo-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .logo-section__logo {
    width: var(--logo-size-mobile);
  }
  
  /* Mode horizontal devient vertical sur mobile */
  .logo-section--horizontal .logo-section__grid {
    grid-template-columns: 1fr; /* Passer en vertical sur mobile */
    gap: var(--logo-section-spacing-vertical-mobile);
    text-align: center;
  }
  
  .logo-section--horizontal .logo-section__logos {
    justify-content: center;
  }
  
  .logo-section--vertical .logo-section__title {
    margin-bottom: var(--logo-section-spacing-vertical-mobile);
  }
}

@media (max-width: 480px) {
  .logo-section__logos {
    gap: 1.5rem;
  }
  
  .logo-section__logos.logo-cols-6,
  .logo-section__logos.logo-cols-5,
  .logo-section__logos.logo-cols-4,
  .logo-section__logos.logo-cols-3,
  .logo-section__logos.logo-cols-2 {
    grid-template-columns: repeat(1, 1fr);
  }
  
  .logo-section__logo {
    width: 80px;
  }
  
  .logo-section__title {
    font-size: 1rem;
  }
}

/* Animation d'entrée optionnelle */
.logo-section--animated .logo-section__logo {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s ease-out forwards;
}

.logo-section--animated .logo-section__logo:nth-child(1) { animation-delay: 0.1s; }
.logo-section--animated .logo-section__logo:nth-child(2) { animation-delay: 0.2s; }
.logo-section--animated .logo-section__logo:nth-child(3) { animation-delay: 0.3s; }
.logo-section--animated .logo-section__logo:nth-child(4) { animation-delay: 0.4s; }
.logo-section--animated .logo-section__logo:nth-child(5) { animation-delay: 0.5s; }
.logo-section--animated .logo-section__logo:nth-child(6) { animation-delay: 0.6s; }

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/*------------------------------------
    Logo Section V2
    Section pour afficher les logos des partenaires avec boîtes
------------------------------------*/

/* Variables spécifiques à la v2 */
:root {
  --logo-v2-box-padding: 1.5rem;
  --logo-v2-box-border-radius: 8px;
  --logo-v2-title-size: 2rem;
  --logo-v2-title-size-mobile: 1.5rem;
}

/* Base styles v2 */
.logo-section-v2 {
  position: relative;
  overflow: hidden;
}

.logo-section-v2__title {
  margin: 0;
  line-height: 1.2;
}

/* Logo container v2 - style de base, override par les classes colonnes */
.logo-section-v2__logos {
  /* Les styles d'affichage sont définis par les classes logo-v2-cols-X */
}

/* Logo item v2 - avec boîte */
.logo-section-v2__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 90px;
  padding: var(--logo-v2-box-padding);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--logo-v2-box-border-radius);
  transition: all var(--transition-duration-default, 0.2s) var(--transition-timing-default, ease-in-out);
}

.logo-section-v2__logo:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: var(--gray-300);
}

.logo-section-v2__logo img {
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: all var(--transition-duration-default, 0.2s) var(--transition-timing-default, ease-in-out);
}

.logo-section-v2__logo:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

/* Options de style des couleurs des logos v2 */

/* Couleurs toujours affichées */
.logo-always_color .logo-section-v2__logo img {
  filter: grayscale(0%);
  opacity: 1;
}

.logo-always_color .logo-section-v2__logo:hover img {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
}

/* Toujours monochrome */
.logo-always_monochrome .logo-section-v2__logo img {
  filter: grayscale(100%);
  opacity: 0.7;
}

.logo-always_monochrome .logo-section-v2__logo:hover img {
  filter: grayscale(100%);
  opacity: 0.9;
  transform: scale(1.05);
}

/* Mode 1: Horizontal (titre à gauche + logos à droite) - Forcé sur 2 colonnes */
.logo-section-v2--horizontal .logo-section-v2__grid {
  display: grid;
  grid-template-columns: 35% 65%; /* Colonnes fixes : 35% titre, 65% logos */
  align-items: self-start;
  gap: 2rem;
}

.logo-section-v2--horizontal .logo-section-v2__header {
  min-width: unset; /* Supprimer la largeur minimale fixe */
}

.logo-section-v2--horizontal .logo-section-v2__logos {
  /* Les colonnes sont maintenant gérées par les classes logo-v2-cols-X */
}

.logo-section-v2--horizontal .logo-section-v2__logo {
  width: 100%;
  max-width: 220px;
  height: 100px;
}

/* Mode 2: Vertical (titre centré en haut + logos centrés en dessous) */
.logo-section-v2--vertical .logo-section-v2__content {
  /* text-align supprimé - maintenant respecte l'alignement configuré par l'utilisateur */
}

.logo-section-v2--vertical .logo-section-v2__title {
  /* margin-bottom supprimé - géré par le conteneur header */
}

.logo-section-v2--vertical .logo-section-v2__header {
  margin-bottom: var(--logo-section-spacing-vertical);
}

.logo-section-v2--vertical .logo-section-v2__logos {
  justify-content: center;
}

.logo-section-v2--vertical .logo-section-v2__logo {
  width: 100%;
  max-width: 360px;
  min-height: 90px;
}

/* Button wrapper pour le mode vertical */
.logo-section-v2--vertical .logo-section-v2__button-wrapper {
  width: 100%;
}

/* Système de colonnes pour les logos v2 */
.logo-section-v2__logos--grid {
  display: grid;
  align-items: center;
  gap: 2rem;
  justify-items: center;
}

/* Classes pour le nombre de logos par ligne v2 */
.logo-section-v2__logos.logo-v2-cols-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  justify-items: center;
}

/* Configuration dynamique du gap basée sur l'attribut data-gap */
.logo-section-v2__logos[data-gap="16"] {
  gap: 16px;
}

.logo-section-v2__logos[data-gap="24"] {
  gap: 24px;
}

.logo-section-v2__logos[data-gap="32"] {
  gap: 32px;
}

.logo-section-v2__logos[data-gap="40"] {
  gap: 40px;
}

.logo-section-v2__logos.logo-v2-cols-2 .logo-section-v2__logo {
  width: 100%;
  height: 100px;
}

.logo-section-v2__logos.logo-v2-cols-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  justify-items: center;
}

.logo-section-v2__logos.logo-v2-cols-3 .logo-section-v2__logo {
  width: 100%;
  height: 100px;
}

.logo-section-v2__logos.logo-v2-cols-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  justify-items: center;
}

.logo-section-v2__logos.logo-v2-cols-4 .logo-section-v2__logo {
  width: 100%;
  height: 80px;
}

.logo-section-v2__logos.logo-v2-cols-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem;
  justify-items: center;
}

.logo-section-v2__logos.logo-v2-cols-5 .logo-section-v2__logo {
  width: 100%;
  height: 80px;
}

.logo-section-v2__logos.logo-v2-cols-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2rem;
  justify-items: center;
}

.logo-section-v2__logos.logo-v2-cols-6 .logo-section-v2__logo {
  width: 100%;
  height: 80px;
}

/* Ajustements pour les variantes de couleur v2 */
.section--dark .logo-section-v2__logo,
.section--secondary .logo-section-v2__logo,
.section--black .logo-section-v2__logo {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.section--dark .logo-section-v2__logo:hover,
.section--secondary .logo-section-v2__logo:hover,
.section--black .logo-section-v2__logo:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.section--dark .logo-section-v2__logo img,
.section--secondary .logo-section-v2__logo img,
.section--black .logo-section-v2__logo img {
  filter: grayscale(100%) brightness(0) invert(1);
  opacity: 0.6;
}

.section--dark .logo-section-v2__logo:hover img,
.section--secondary .logo-section-v2__logo:hover img,
.section--black .logo-section-v2__logo:hover img {
  opacity: 1;
}

/* Ajustements pour sections sombres avec options de couleur v2 */

/* Couleurs toujours affichées sur fond sombre */
.section--dark.logo-always_color .logo-section-v2__logo img,
.section--secondary.logo-always_color .logo-section-v2__logo img,
.section--black.logo-always_color .logo-section-v2__logo img {
  filter: grayscale(0%);
  opacity: 1;
}

.section--dark.logo-always_color .logo-section-v2__logo:hover img,
.section--secondary.logo-always_color .logo-section-v2__logo:hover img,
.section--black.logo-always_color .logo-section-v2__logo:hover img {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
}

/* Toujours monochrome sur fond sombre */
.section--dark.logo-always_monochrome .logo-section-v2__logo img,
.section--secondary.logo-always_monochrome .logo-section-v2__logo img,
.section--black.logo-always_monochrome .logo-section-v2__logo img {
  filter: grayscale(100%) brightness(0) invert(1);
  opacity: 0.6;
}

.section--dark.logo-always_monochrome .logo-section-v2__logo:hover img,
.section--secondary.logo-always_monochrome .logo-section-v2__logo:hover img,
.section--black.logo-always_monochrome .logo-section-v2__logo:hover img {
  filter: grayscale(100%) brightness(0) invert(1);
  opacity: 0.9;
  transform: scale(1.05);
}

/* Support pour les bordures v2 */
.logo-section-v2--bordered {
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
}

.section--dark.logo-section-v2--bordered,
.section--secondary.logo-section-v2--bordered,
.section--black.logo-section-v2--bordered {
  border-color: rgba(255, 255, 255, 0.1);
}

/* Responsive v2 */
@media (max-width: 1024px) {
  .logo-section-v2__logos {
    gap: 1.5rem;
  }
  
  .logo-section-v2__logos.logo-v2-cols-6,
  .logo-section-v2__logos.logo-v2-cols-5 {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .logo-section-v2__logos.logo-v2-cols-4 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .logo-section-v2--horizontal .logo-section-v2__grid {
    grid-template-columns: 35% 65%; /* Maintenir le ratio sur tablette */
    gap: 1.5rem;
  }
  
  /* Mode horizontal reste sur 2 colonnes */
  .logo-section-v2--horizontal .logo-section-v2__logos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  
  .logo-section-v2--horizontal .logo-section-v2__logo {
    width: 100%;
    max-width: 220px;
    height: 100px;
  }
  
  .logo-section-v2--vertical .logo-section-v2__logo {
    width: 100%;
    max-width: 200px;
    height: 90px;
  }
  
  .logo-section-v2__logo {
    width: 180px;
    height: 80px;
  }
  
  /* Ajustements pour les colonnes en tablette */
  .logo-section-v2__logos.logo-v2-cols-2 .logo-section-v2__logo {
    width: 100%;
    height: 100px;
  }
  
  .logo-section-v2__logos.logo-v2-cols-3 .logo-section-v2__logo {
    width: 100%;
    height: 100px;
  }
  
  .logo-section-v2__logos.logo-v2-cols-4 .logo-section-v2__logo,
  .logo-section-v2__logos.logo-v2-cols-5 .logo-section-v2__logo,
  .logo-section-v2__logos.logo-v2-cols-6 .logo-section-v2__logo {
    width: 100%;
    height: 80px;
  }
}

@media (max-width: 768px) {
  
  .logo-section-v2__logos {
    gap: 1rem;
  }
  
  .logo-section-v2__logos.logo-v2-cols-6,
  .logo-section-v2__logos.logo-v2-cols-5,
  .logo-section-v2__logos.logo-v2-cols-4,
  .logo-section-v2__logos.logo-v2-cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .logo-section-v2__logos.logo-v2-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .logo-section-v2__logo {
    width: 160px;
    height: 70px;
    padding: 1rem;
  }
  
  /* Mode horizontal devient vertical sur mobile */
  .logo-section-v2--horizontal .logo-section-v2__grid {
    grid-template-columns: 1fr; /* Passer en vertical sur mobile */
    gap: var(--logo-section-spacing-vertical-mobile);
    text-align: center;
  }
  
  .logo-section-v2--horizontal .logo-section-v2__logos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    justify-items: center;
  }
  
  .logo-section-v2--horizontal .logo-section-v2__logo {
    width: 100%;
    max-width: 160px;
    height: 70px;
  }
  
  .logo-section-v2--vertical .logo-section-v2__logo {
    width: 100%;
    min-height: 70px;
  }
  
  /* Tous les logos ont la même taille sur mobile (2 colonnes max) */
  .logo-section-v2__logos.logo-v2-cols-2 .logo-section-v2__logo,
  .logo-section-v2__logos.logo-v2-cols-3 .logo-section-v2__logo,
  .logo-section-v2__logos.logo-v2-cols-4 .logo-section-v2__logo,
  .logo-section-v2__logos.logo-v2-cols-5 .logo-section-v2__logo,
  .logo-section-v2__logos.logo-v2-cols-6 .logo-section-v2__logo {
    width: 100%;
    height: 70px;
  }
  
  .logo-section-v2--vertical .logo-section-v2__title {
    margin-bottom: var(--logo-section-spacing-vertical-mobile);
  }
}

@media (max-width: 480px) {
  .logo-section-v2__logos {
    gap: 1rem;
  }
  
  .logo-section-v2__logos.logo-v2-cols-6,
  .logo-section-v2__logos.logo-v2-cols-5,
  .logo-section-v2__logos.logo-v2-cols-4,
  .logo-section-v2__logos.logo-v2-cols-3,
  .logo-section-v2__logos.logo-v2-cols-2 {
    grid-template-columns: repeat(1, 1fr);
  }
  
  /* Mode horizontal passe à 1 colonne sur petit mobile */
  .logo-section-v2--horizontal .logo-section-v2__logos {
    grid-template-columns: repeat(1, 1fr);
  }
  
  .logo-section-v2--horizontal .logo-section-v2__logo {
    width: 100%;
    max-width: 200px;
    height: 50px;
  }
  
  .logo-section-v2--vertical .logo-section-v2__logo {
    width: 100%;
    min-height: 50px;
  }
  
  .logo-section-v2__logo {
    width: 120px;
    height: 50px;
    padding: 0.75rem;
  }
  
  /* Une seule colonne sur petit mobile, tous les logos ont la même taille */
  .logo-section-v2__logos.logo-v2-cols-2 .logo-section-v2__logo,
  .logo-section-v2__logos.logo-v2-cols-3 .logo-section-v2__logo,
  .logo-section-v2__logos.logo-v2-cols-4 .logo-section-v2__logo,
  .logo-section-v2__logos.logo-v2-cols-5 .logo-section-v2__logo,
  .logo-section-v2__logos.logo-v2-cols-6 .logo-section-v2__logo {
    width: 100%;
    height: 60px;
  }
  
}

/* Animation d'entrée optionnelle v2 */
.logo-section-v2--animated .logo-section-v2__logo {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s ease-out forwards;
}

.logo-section-v2--animated .logo-section-v2__logo:nth-child(1) { animation-delay: 0.1s; }
.logo-section-v2--animated .logo-section-v2__logo:nth-child(2) { animation-delay: 0.2s; }
.logo-section-v2--animated .logo-section-v2__logo:nth-child(3) { animation-delay: 0.3s; }
.logo-section-v2--animated .logo-section-v2__logo:nth-child(4) { animation-delay: 0.4s; }
.logo-section-v2--animated .logo-section-v2__logo:nth-child(5) { animation-delay: 0.5s; }
.logo-section-v2--animated .logo-section-v2__logo:nth-child(6) { animation-delay: 0.6s; }
/*------------------------------------
    Logo Carousel
    Carrousel de logos avec défilement infini
------------------------------------*/

/* Variables */
:root {
  --logo-carousel-height: 100px;
  --logo-carousel-gap: 24px;
  --logo-carousel-padding-y: 5rem;
  --logo-carousel-padding-y-mobile: 3rem;
  --logo-carousel-animation-duration: 45s;
  --logo-carousel-title-margin-bottom: 4rem;
  --logo-carousel-shadow-width: 80px;
  --logo-carousel-shadow-width-mobile: 40px;
}

/* Base styles */
.logo-carousel {
  position: relative;
  overflow: hidden;
  padding: var(--logo-carousel-padding-y) 0;
}

.logo-carousel__container {
  max-width: var(--container-max-width, 1216px);
  margin: 0 auto;
  padding: 0 var(--container-padding, 2rem);
}

/* Option pleine largeur */
.logo-carousel--full-width .logo-carousel__container {
  max-width: 100%;
  padding: 0;
}

/* Header du carousel (englobe titre + paragraphe) */
.logo-carousel__header {
  text-align: center;
  margin-bottom: var(--logo-carousel-title-margin-bottom);
}

/* Titre */
.logo-carousel__title {
  text-align: center;
  margin: 0;
  line-height: 1.2;
}

/* Paragraphe descriptif */
.logo-carousel__description {
  margin: 1rem 0 0 0;
  text-align: center;
}

/* Wrapper avec overflow et shadows */
.logo-carousel__wrapper {
  position: relative;
  overflow: hidden;
  margin: 0 calc(-1 * var(--logo-carousel-shadow-width));
  padding: 20px var(--logo-carousel-shadow-width);
  width: calc(100% + 2 * var(--logo-carousel-shadow-width)); /* S'assurer que le wrapper a assez d'espace */
}

.logo-carousel--full-width .logo-carousel__wrapper {
  margin: 0;
  padding: 0;
  width: 100%;
}

/* Shadows sur les côtés */
.logo-carousel__wrapper::before,
.logo-carousel__wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--logo-carousel-shadow-width);
  z-index: 2;
  pointer-events: none;
}

.logo-carousel__wrapper::before {
  left: 0;
  background: linear-gradient(to right, var(--white), transparent);
}

.logo-carousel__wrapper::after {
  right: 0;
  background: linear-gradient(to left, var(--white), transparent);
}

/* Ajustement des shadows pour les variantes de couleur */
.section--light .logo-carousel__wrapper::before {
  background: linear-gradient(to right, var(--section-bg-light, var(--white)), transparent);
}

.section--light .logo-carousel__wrapper::after {
  background: linear-gradient(to left, var(--section-bg-light, var(--white)), transparent);
}

.section--primary .logo-carousel__wrapper::before {
  background: linear-gradient(to right, var(--section-bg-primary), transparent);
}

.section--primary .logo-carousel__wrapper::after {
  background: linear-gradient(to left, var(--section-bg-primary), transparent);
}

.section--secondary .logo-carousel__wrapper::before {
  background: linear-gradient(to right, var(--section-bg-secondary), transparent);
}

.section--secondary .logo-carousel__wrapper::after {
  background: linear-gradient(to left, var(--section-bg-secondary), transparent);
}

.section--tertiary .logo-carousel__wrapper::before {
  background: linear-gradient(to right, var(--section-bg-tertiary), transparent);
}

.section--tertiary .logo-carousel__wrapper::after {
  background: linear-gradient(to left, var(--section-bg-tertiary), transparent);
}

.section--dark .logo-carousel__wrapper::before {
  background: linear-gradient(to right, var(--color-dark), transparent);
}

.section--dark .logo-carousel__wrapper::after {
  background: linear-gradient(to left, var(--color-dark), transparent);
}

.section--white .logo-carousel__wrapper::before {
  background: linear-gradient(to right, var(--section-bg-white, var(--white)), transparent);
}

.section--white .logo-carousel__wrapper::after {
  background: linear-gradient(to left, var(--section-bg-white, var(--white)), transparent);
}

.section--black .logo-carousel__wrapper::before {
  background: linear-gradient(to right, var(--section-bg-black, var(--black)), transparent);
}

.section--black .logo-carousel__wrapper::after {
  background: linear-gradient(to left, var(--section-bg-black, var(--black)), transparent);
}

/* Track */
.logo-carousel__track {
  display: flex;
  animation: scroll-infinite var(--logo-carousel-animation-duration) linear infinite;
  gap: 0;
  white-space: nowrap;
  width: max-content;
}

/* Version container : s'assurer qu'il y a assez d'espace */
.logo-carousel:not(.logo-carousel--full-width) .logo-carousel__track {
  min-width: calc(200% + var(--logo-carousel-gap) * 12);
}

.logo-carousel--paused .logo-carousel__track {
  animation-play-state: paused;
}

/* Groupe de logos (dupliqué pour l'effet infini) */
.logo-carousel__group {
  display: flex;
  flex-shrink: 0;
  gap: var(--logo-carousel-gap);
  padding-right: var(--logo-carousel-gap);
  width: fit-content;
}

/* Logo item */
.logo-carousel__item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--logo-carousel-height);
  padding: 1rem 2rem; /* Réduire le padding pour des logos plus grands */
  background: var(--gray-50);
  border-radius: 8px;
  transition: all 0.3s ease;
  width: 220px; /* Largeur fixe pour tous les items */
  min-width: 220px;
  max-width: 220px;
}

.logo-carousel__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.logo-carousel__item img {
  max-height: 50px; /* Augmenter de 40px à 50px pour des logos plus grands */
  width: auto;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: all 0.3s ease;
}

.logo-carousel__item:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

/* Options de style des couleurs des logos carousel */

/* Couleurs toujours affichées */
.logo-always_color .logo-carousel__item img {
  filter: grayscale(0%);
  opacity: 1;
}

.logo-always_color .logo-carousel__item:hover img {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
}

/* Toujours monochrome */
.logo-always_monochrome .logo-carousel__item img {
  filter: grayscale(100%);
  opacity: 0.7;
}

.logo-always_monochrome .logo-carousel__item:hover img {
  filter: grayscale(100%);
  opacity: 0.9;
  transform: scale(1.05);
}

/* Ajustements pour les variantes de couleur */
.section--dark .logo-carousel__item,
.section--secondary .logo-carousel__item {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.section--dark .logo-carousel__item:hover,
.section--secondary .logo-carousel__item:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.section--dark .logo-carousel__item img,
.section--secondary .logo-carousel__item img {
  filter: grayscale(100%) brightness(0) invert(1);
  opacity: 0.6;
}

.section--dark .logo-carousel__item:hover img,
.section--secondary .logo-carousel__item:hover img {
  opacity: 1;
}

/* Ajustements pour sections sombres avec options de couleur carousel */

/* Couleurs toujours affichées sur fond sombre */
.section--dark.logo-always_color .logo-carousel__item img,
.section--secondary.logo-always_color .logo-carousel__item img {
  filter: grayscale(0%);
  opacity: 1;
}

.section--dark.logo-always_color .logo-carousel__item:hover img,
.section--secondary.logo-always_color .logo-carousel__item:hover img {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
}

/* Toujours monochrome sur fond sombre */
.section--dark.logo-always_monochrome .logo-carousel__item img,
.section--secondary.logo-always_monochrome .logo-carousel__item img {
  filter: grayscale(100%) brightness(0) invert(1);
  opacity: 0.6;
}

.section--dark.logo-always_monochrome .logo-carousel__item:hover img,
.section--secondary.logo-always_monochrome .logo-carousel__item:hover img {
  filter: grayscale(100%) brightness(0) invert(1);
  opacity: 0.9;
  transform: scale(1.05);
}

/* Section tertiary (fond clair beige) */
.section--tertiary .logo-carousel__item {
  background: var(--white);
  border: 1px solid var(--gray-200);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.section--tertiary .logo-carousel__item:hover {
  background: var(--gray-50);
  border-color: var(--gray-300);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}


.section--tertiary .logo-carousel__item:hover img {
  opacity: 1;
}

/* Section primary (fond vert clair) */
.section--primary .logo-carousel__item {
  background: var(--white);
  border: 1px solid var(--gray-200);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.section--primary .logo-carousel__item:hover {
  background: var(--gray-50);
  border-color: var(--gray-300);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}


/* Animation de défilement */
@keyframes scroll-infinite {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-50% - var(--logo-carousel-gap) / 2));
  }
}

/* Direction inversée */
.logo-carousel--reverse .logo-carousel__track {
  animation-direction: reverse;
}

/* Vitesses alternatives */
.logo-carousel--slow .logo-carousel__track {
  animation-duration: 60s;
}

.logo-carousel--fast .logo-carousel__track {
  animation-duration: 30s;
}

/* Responsive */
@media (max-width: 768px) {
  .logo-carousel {
    padding: var(--logo-carousel-padding-y-mobile) 0;
  }
  
  .logo-carousel__title {
    margin-bottom: 3rem;
  }
  
  .logo-carousel__wrapper::before,
  .logo-carousel__wrapper::after {
    width: var(--logo-carousel-shadow-width-mobile);
  }
  
  .logo-carousel__wrapper {
    margin: 0 calc(-1 * var(--logo-carousel-shadow-width-mobile));
    padding: 20px var(--logo-carousel-shadow-width-mobile);
  }
  
  .logo-carousel__item {
    padding: 0.75rem 1.5rem; /* Ajuster le padding pour tablet */
    height: 70px;
    width: 180px; /* Largeur fixe pour tablet */
    min-width: 180px;
    max-width: 180px;
  }
  
  .logo-carousel__item img {
    max-height: 35px; /* Augmenter de 30px à 35px */
  }
  
  .logo-carousel__track {
    animation-duration: 35s;
  }
  
  .logo-carousel--slow .logo-carousel__track {
    animation-duration: 50s;
  }
  
  .logo-carousel--fast .logo-carousel__track {
    animation-duration: 25s;
  }
}

@media (max-width: 480px) {
  .logo-carousel__title {
    margin-bottom: 2rem;
  }
  
  .logo-carousel__item {
    padding: 0.5rem 1rem; /* Réduire le padding pour mobile */
    height: 60px;
    width: 140px; /* Largeur fixe pour mobile */
    min-width: 140px;
    max-width: 140px;
  }
  
  .logo-carousel__item img {
    max-height: 28px; /* Augmenter de 24px à 28px */
  }
}

/* Variante avec largeur fixe identique */
.logo-carousel--fixed-width .logo-carousel__item {
  width: 200px; /* Largeur fixe pour tous les items */
  min-width: 200px;
  max-width: 200px;
}

/* Responsive pour largeur fixe */
@media (max-width: 768px) {
  .logo-carousel--fixed-width .logo-carousel__item {
    width: 160px;
    min-width: 160px;
    max-width: 160px;
  }
}

@media (max-width: 480px) {
  .logo-carousel__title {
    margin-bottom: 2rem;
  }
  
  .logo-carousel__item {
    padding: 0.5rem 1rem; /* Réduire le padding pour mobile */
    height: 60px;
    width: 140px; /* Largeur fixe pour mobile */
    min-width: 140px;
    max-width: 140px;
  }
  
  .logo-carousel__item img {
    max-height: 28px; /* Augmenter de 24px à 28px */
  }
}

/* Hero Banner */
/*------------------------------------
    Hero Banner
    Section hero immersive et engageante
------------------------------------*/

/* Variables Hubl depuis fields.json */




/* Variables */
:root {
  --hero-content-max-width: 1000px;
  --hero-padding-y: 5rem;
  --hero-padding-y-mobile: 3rem;
  
  /* Header height fixe - Desktop par défaut */
  --header-height-banner: 123px;
}

/* Ajustements de la hauteur du header selon les breakpoints */
@media (max-width: 1024px) and (min-width: 769px) {
  :root {
    --header-height-banner: 104px; /* Tablette */
  }
}

@media (max-width: 768px) {
  :root {
    --header-height-banner: 64px; /* Mobile */
  }
}

/* Base styles */
.hero-banner {
  position: relative;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  overflow: hidden;
  min-height: 400px;
  padding: var(--hero-padding-y) 0;
}

/* Hauteurs fixes en pixels */
.hero-height--1000 {
  min-height: 1000px;
}

.hero-height--900 {
  min-height: 900px;
}

.hero-height--800 {
  min-height: 800px;
}

.hero-height--700 {
  min-height: 700px;
}

.hero-height--600 {
  min-height: 600px;
}

.hero-height--500 {
  min-height: 500px;
}

.hero-height--400 {
  min-height: 400px;
}

.hero-height--300 {
  min-height: 300px;
}

/* Hauteurs en pourcentage de viewport */
.hero-height--100vh {
  padding: 3rem 0;
  /* Fallback pour navigateurs anciens sans support vh */
  min-height: 600px;
  min-height: calc(100vh - var(--header-height-banner));
  height: calc(100vh - var(--header-height-banner));
}

.hero-height--90vh {
  /* Fallback pour navigateurs anciens */
  min-height: 500px;
  min-height: 90vh;
}

.hero-height--80vh {
  /* Fallback pour navigateurs anciens */
  min-height: 450px;
  min-height: 80vh;
}

.hero-height--70vh {
  /* Fallback pour navigateurs anciens */
  min-height: 400px;
  min-height: 70vh;
}

.hero-height--60vh {
  /* Fallback pour navigateurs anciens */
  min-height: 350px;
  min-height: 60vh;
}

.hero-height--50vh {
  /* Fallback pour navigateurs anciens */
  min-height: 300px;
  min-height: 50vh;
}

/* Hauteur automatique */
.hero-height--auto {
  min-height: auto;
}

/* Mode full-height : alias pour 100vh */
.hero-banner--full-height {
  padding: 3rem 0;
  min-height: calc(100vh - var(--header-height-banner));
  height: calc(100vh - var(--header-height-banner));
}

/* Background layer */
.hero-banner__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Background image */
.hero-banner__background-image {
  width: 100%;
  height: 100%;
  /* Fallback pour navigateurs anciens */
  background-size: cover;
  background-position: center;
  -o-object-fit: cover;
  object-fit: cover;
  object-position: center;
}

/* Background video */
.hero-banner__background-video,
.hero-banner__desktop-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  object-position: center;
}

/* Overlay */
.hero-banner__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  /* Fallback pour navigateurs anciens */
  background-color: transparent;
  background-color: var(--overlay-color, transparent);
}

/* Overlay dégradé */
.hero-banner__overlay--gradient {
  background-color: transparent;
  background-image: linear-gradient(var(--gradient-direction, to bottom), var(--gradient-color1, transparent), var(--gradient-color2, transparent));
}


/* Content container */
.hero-banner__container {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--container-max-width, 1216px);
  margin: 0 auto;
  padding: 0 var(--container-padding, 2rem);
}

/* Content wrapper */
.hero-banner__content {
  max-width: var(--hero-content-max-width);
  margin: 0 auto;
}

/* Alignement horizontal */
.hero-banner--align-left .hero-banner__content {
  margin-left: 0;
  text-align: left;
}

.hero-banner--align-center .hero-banner__content {
  text-align: center;
}

.hero-banner--align-right .hero-banner__content {
  margin-right: 0;
  margin-left: auto;
  text-align: right;
}

/* Alignement vertical */
.hero-banner--valign-top {
  align-items: flex-start;
}

.hero-banner--valign-middle {
  align-items: center;
}

.hero-banner--valign-bottom {
  align-items: flex-end;
}

/* Title */
.hero-banner__title {
  font-size: 4rem;
  font-weight: 500;
  line-height: 1.1;
  margin: 0 0 1.5rem 0;
  color: var(--gray-900);
}

/* Subtitle/Text */
.hero-banner__text {
  font-size: 1.25rem;
  line-height: 1.6;
  margin: 0 0 2.5rem 0;
  color: var(--gray-700);
}

/* CTA Buttons container */
.hero-banner__cta {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

/* Fallbacks IE pour gap */
@supports not (gap: 1rem) {
  .hero-banner__cta > * + * {
    margin-left: 1rem;
  }
  
  @media (max-width: 768px) {
    .hero-banner__cta > * + * {
      margin-left: 0;
      margin-top: 1rem;
    }
  }
}

.hero-banner--align-center .hero-banner__cta {
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.hero-banner--align-right .hero-banner__cta {
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

/* Buttons stacked on mobile */
.hero-banner__cta--stacked {
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  max-width: 300px;
}

.hero-banner--align-center .hero-banner__cta--stacked {
  margin: 0 auto;
}

.hero-banner--align-right .hero-banner__cta--stacked {
  margin-left: auto;
  margin-right: 0;
}

/* Color variants for text on dark backgrounds */
.hero-banner--text-light .hero-banner__title {
  color: var(--white);
}

.hero-banner--text-light .hero-banner__text {
  color: rgba(255, 255, 255, 0.9);
}

/* Section dark text color override */
.section--dark .hero-banner__text {
  color: var(--section-text-secondary-on-dark);
}

/* Icône de scroll down pour full-height */
.hero-banner__scroll-indicator {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  z-index: 4;
  color: rgba(255, 255, 255, 0.8);
  -webkit-animation: scrollBounce 2s infinite;
  animation: scrollBounce 2s infinite;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  cursor: pointer;
  display: none; /* Masqué par défaut */
  text-decoration: none;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  display: -webkit-flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  /* Fallback pour navigateurs sans support backdrop-filter */
  background-color: rgba(0, 0, 0, 0.3);
  background-color: rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Afficher uniquement sur les sections full-height */
.hero-banner--full-height .hero-banner__scroll-indicator,
.hero-height--100vh .hero-banner__scroll-indicator {
  display: flex;
}

.hero-banner__scroll-indicator:hover {
  color: rgba(255, 255, 255, 1);
  transform: translateY(-2px);
  background-color: rgba(0, 0, 0, 0.2);
  text-decoration: none;
}

.hero-banner__scroll-indicator:focus {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

/* Variante pour texte sombre */
.hero-banner:not(.hero-banner--text-light) .hero-banner__scroll-indicator {
  color: rgba(0, 0, 0, 0.6);
  background-color: rgba(255, 255, 255, 0.1);
}

.hero-banner:not(.hero-banner--text-light) .hero-banner__scroll-indicator:hover {
  color: rgba(0, 0, 0, 0.8);
  background-color: rgba(255, 255, 255, 0.2);
}

.hero-banner:not(.hero-banner--text-light) .hero-banner__scroll-indicator:focus {
  outline: 2px solid rgba(0, 0, 0, 0.3);
}

/* Animation de l'icône */
@-webkit-keyframes scrollBounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
  60% {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
  }
}

@keyframes scrollBounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
  60% {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
  }
}

/* Responsive pour mobile */
@media (max-width: 768px) {
  .hero-banner {
    padding: var(--hero-padding-y-mobile) 0;
  }
  
  /* Full-height et 100vh mobile : padding encore plus réduit */
  .hero-banner--full-height,
  .hero-height--100vh {
    padding: 2rem 0;
  }
  
  .hero-banner__title {
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }
  
  .hero-banner__text {
    font-size: 1.125rem;
    margin-bottom: 2rem;
  }
  
  /* Stack buttons on mobile by default */
  .hero-banner__cta {
    flex-direction: column;
    align-items: stretch;
  }
  
  .hero-banner--align-left .hero-banner__cta,
  .hero-banner--align-right .hero-banner__cta {
    align-items: stretch;
  }
  
  /* Alignement horizontal mobile */
  .hero-banner--align-mobile-left .hero-banner__content {
    margin-left: 0;
    margin-right: auto;
    text-align: left;
  }
  
  .hero-banner--align-mobile-center .hero-banner__content {
    margin: 0 auto;
    text-align: center;
  }
  
  .hero-banner--align-mobile-right .hero-banner__content {
    margin-left: auto;
    margin-right: 0;
    text-align: right;
  }
  
  /* Alignement des boutons mobile */
  .hero-banner--align-mobile-left .hero-banner__cta {
    align-items: stretch;
  }
  
  .hero-banner--align-mobile-center .hero-banner__cta {
    align-items: stretch;
  }
  
  .hero-banner--align-mobile-right .hero-banner__cta {
    align-items: stretch;
  }
  
  /* Correction des marges pour les boutons stacked sur mobile */
  .hero-banner--align-mobile-left .hero-banner__cta--stacked {
    margin-left: 0;
    margin-right: auto;
  }
  
  .hero-banner--align-mobile-center .hero-banner__cta--stacked {
    margin-left: auto;
    margin-right: auto;
  }
  
  .hero-banner--align-mobile-right .hero-banner__cta--stacked {
    margin-left: auto;
    margin-right: 0;
  }
  
  /* Alignement vertical mobile */
  .hero-banner--valign-mobile-top {
    align-items: flex-start;
  }
  
  .hero-banner--valign-mobile-middle {
    align-items: center;
  }
  
  .hero-banner--valign-mobile-bottom {
    align-items: flex-end;
  }
  
  /* Ajustements des hauteurs pour mobile */
  .hero-height--1000 { min-height: 700px; }
  .hero-height--900 { min-height: 650px; }
  .hero-height--800 { min-height: 600px; }
  .hero-height--700 { min-height: 500px; }
  .hero-height--600 { min-height: 450px; }
  .hero-height--500 { min-height: 400px; }
  .hero-height--400 { min-height: 350px; }
  .hero-height--300 { min-height: 300px; }
  
  .hero-banner__scroll-indicator {
    bottom: 1.5rem;
    right: 1.5rem;
  }
}

/* Image LCP - prioritaire sur mobile */
.hero-banner__lcp-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}

/* Vidéo desktop - au-dessus de l'image sur desktop */
.hero-banner__desktop-video {
  z-index: 2;
}

/* Mobile (768px et moins) : image seule pour LCP optimal */
@media (max-width: 768px) {
  /* La vidéo est supprimée par JS, l'image reste seule et devient l'élément LCP */
  .hero-banner__lcp-image {
    z-index: 1; /* Élément LCP sur mobile */
  }
}

/* Desktop (769px et plus) : vidéo par-dessus l'image */
@media (min-width: 769px) {
  .hero-banner__desktop-video {
    z-index: 2; /* Vidéo visible sur desktop */
  }
  
  .hero-banner__lcp-image {
    z-index: 1; /* Image en fallback sous la vidéo */
  }
}

@media (max-width: 480px) {
  .hero-banner__title {
    font-size: 2rem;
  }
  
  .hero-banner__text {
    font-size: 1rem;
  }
}

/* Animations */
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

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

.hero-banner__title,
.hero-banner__text,
.hero-banner__cta {
  -webkit-animation: fadeInUp 0.8s ease-out;
  animation: fadeInUp 0.8s ease-out;
}

.hero-banner__text {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.hero-banner__cta {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* Accessibility - Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-banner__title,
  .hero-banner__text,
  .hero-banner__cta {
    animation: none;
  }
}
/**
 * HERO MODERN BANNER - MODULE HUBSPOT
 * Styles pour le module hero moderne avec carousel de logos
 */

 .hero-modern-banner {
    position: relative;
    height: calc(100vh - var(--header-height));
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  
/* =================================
   IMAGE DE FOND AVEC MARGINS ET BORDER-RADIUS
   ================================= */
.hero-background {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 1;
  border-radius: 20px;
  overflow: hidden;
}

.hero-bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.05); /* Légèrement plus grand pour l'effet parallaxe */
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.2) 50%,
    rgba(0, 0, 0, 0.3) 100%
  );
}

/* =================================
   CONTENU PRINCIPAL
   ================================= */
.hero-content {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120px 30px 60px;
  min-height: calc(100vh - 200px);
}

/* Badge principal */
.hero-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
  padding: 12px 24px;
  border-radius: 30px;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 40px;
  align-self: flex-start;
}

/* Contenu principal */
.hero-main-content {
  max-width: 800px;
  margin-bottom: 40px;
}

h1.hero-title {
  font-size: 4rem;
  font-weight: 300;
  line-height: 1;
  color: white;
  margin-bottom: 30px;
  letter-spacing: -2px;
}

.hero-subtitle {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 40px;
  max-width: 600px;
}

/* Boutons d'action */
.hero-actions {
  display: flex;
  gap: 0;
  align-items: center;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.hero-btn-primary {
  background: #F7EA48;
  color: #25282A;
  padding: 16px 32px;
  border-radius: 10px;
  border: none;
  margin-right: 60px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}



.hero-btn-primary svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform 0.3s ease;
}

.hero-btn-primary:hover {
  background: white;
  color: #25282A;
  transform: translateY(-2px);
}

.hero-btn-primary:hover svg {
  transform: translate(2px, -2px);
}

.hero-btn-primary::after {
  display: none;
}

.hero-btn-secondary {
  color: rgba(255, 255, 255, 0.7);
}

.hero-btn-secondary::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 30px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.5);
  transition: width 0.3s ease;
}

.hero-btn-secondary:hover {
  color: white;
}

.hero-btn-secondary:hover::after {
  width: 100%;
  background-color: white;
}

.hero-btn-icon {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

/* =================================
   CARD PROJET FLOTTANTE
   ================================= */
.hero-project-card {
  position: absolute;
  display: block;
  top: 35%;
  right: 10%;
  width: 250px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 10px;
  overflow: hidden;
  transform: translateY(0);
  transition: transform 0.3s ease;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.hero-project-card:hover {
  transform: translateY(-5px);
  text-decoration: none;
}

.hero-project-card:visited {
  color: inherit;
  text-decoration: none;
}

.hero-project-card:focus {
  outline: none;
  text-decoration: none;
}

.project-card-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-radius: 15px;
}

.project-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 0.3s ease;
}

.hero-project-card:hover .project-card-image img {
  transform: scale(1.05);
}

.project-card-content {
  padding: 24px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.project-card-title {
  font-size: 18px;
  font-weight: 400;
  color: white;
  line-height: 1.3;
}

.project-card-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.project-card-btn svg {
  width: 20px;
  height: 20px;
  stroke: white;
  stroke-width: 2;
  fill: white;
}

.hero-project-card:hover .project-card-btn {
  background: var(--primary);
  transform: scale(1.1);
}

.hero-project-card:hover .project-card-btn svg {
  stroke: black;
  fill: black;
}



/* =================================
   SECTION CAROUSEL DE LOGOS - INTÉGRÉE DANS L'IMAGE
   ================================= */
.hero-logos {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 15;
  background: white;
  border-radius: 25px 0px 0px 0px;
  padding: 40px 15px 20px;
  overflow: visible;
  width: auto;
  opacity: 1;
  transform: translateY(0);
}

.logos-title {
  font-size: 20px;
  font-weight: 400;
  color: #A2ACAB;
  margin: 0 0 10px 0;
  text-align: center;
  line-height: 1;
  letter-spacing: 1px;
  display: none;
}

/* Patterns décoratifs pour hero-logos */
.logos-pattern {
  position: absolute;
  width: 30px;
  height: 30px;
  z-index: 20;
}

/* Masquer les patterns décoratifs en dessous de 993px */
@media (max-width: 993px) {
  .logos-pattern {
    display: none;
  }
}

/* Styles pour le carousel de logos mobile - caché par défaut */
.hero-logos-mobile {
  display: none;
}

.logos-pattern svg {
  width: 100%;
  height: 100%;
}

.logos-pattern-bottom-left {
  bottom: -1px;
  left: -30px;
}

.logos-pattern-top-right {
  top: -30px;
  right: -1px;
}

.logos-carousel {
  position: relative;
  width: 675px;
  height: 120px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.logos-track {
  display: flex;
  align-items: center;
  gap: 75px;
  animation: logoScroll 35s linear infinite;
  width: fit-content;
}

.logo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.logo-item:hover {
  opacity: 1;
}

.logo-item img {
  max-width: 240px;
  max-height: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.logo-item:hover img {
  filter: grayscale(0%);
}

/* Estompages gauche et droite */
.carousel-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 90px;
  pointer-events: none;
  z-index: 2;
}

.carousel-fade-left {
  left: 0;
  background: linear-gradient(to right, white, transparent);
}

.carousel-fade-right {
  right: 0;
  background: linear-gradient(to left, white, transparent);
}

/* Animation de défilement infini */
@keyframes logoScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}



/* =================================
   RESPONSIVE
   ================================= */
@media (max-width: 1200px) {
  .hero-project-card {
    right: 2%;
    width: 260px;
  }
}

@media (max-width: 1180px) {
  .hero-logos {
    right: 10px;
    bottom: 10px;
    padding: 25px 20px;
  }
  
  .logos-carousel {
    width: 500px;
  }
}

@media (max-width: 992px) {
  .hero-project-card {
    position: static;
    display: block;
    width: 100%;
    max-width: 350px;
    margin: 40px auto 0;
  }
  
  .hero-content {
    padding: 100px 0 40px;
  }
  
  h1.hero-title {
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    text-align: center;
  }

  .hero-subtitle {
    margin: 0 auto 40px;
    text-align: center;
  }
  
  .hero-main-content {
    text-align: center;
    max-width: none;
  }
  
  .hero-badge {
    align-self: center;
    max-width: 300px;
    text-align: center;
  }
  
  .hero-actions {
    justify-content: center;
  }
  
  /* Masquer les patterns décoratifs */
  .logos-pattern {
    display: none;
  }
  
  /* Masquer le carousel de logos intégré */
  .hero-logos {
    display: none;
  }
  
  /* Afficher le carousel mobile externe */
  .hero-logos-mobile {
    display: block;
    background: white;
    padding: 40px 30px;
    width: 100%;
    position: relative;
  }
  
  .hero-logos-mobile .logos-title {
    display: block;
    font-size: 20px;
    font-weight: 400;
    color: #A2ACAB;
    margin: 0 0 10px 0;
    text-align: center;
    line-height: 1;
    letter-spacing: 1px;
  }

  .hero-logos-mobile .logos-carousel {
    width: 100%;
  }

}

@media (max-width: 1024px) and (min-width: 769px) {
  /* Tablette - Afficher seulement 2 métriques */
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .metric-item:nth-child(3) {
    display: none;
  }
}

@media (max-width: 768px) {
  .hero-modern-banner {
    height: auto;
  }
  
  .hero-content-container {
    padding: 16px;
  }

  .hero-content {
    padding: 80px 0 30px;
  }
  
  h1.hero-title {
    font-size: clamp(2rem, 8vw, 3rem);
    margin-bottom: 20px;
    font-size: 2.5rem;
  }
  
  .hero-subtitle {
    font-size: 18px;
    margin: 30px;
    max-width: 100%;
  }
  
  .hero-actions {
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }
  
  .hero-btn-primary {
    margin-right: 0;
    padding: 14px 28px;
    font-size: 14px;
  }
  
  .hero-project-card {
    width: 250px;
    margin: 30px auto;
  }
  
  /* Carousel de logos mobile */
  .hero-logos {
    bottom: 0px;
    right: 0px;
    left: 0px;
    padding: 20px;
    height: auto;
    position: relative;
    border-radius: 0px;
    width: 100%;
  }
  
  .logos-title {
    font-size: 14px;
    margin-bottom: 15px;
  }
  
  .logos-pattern {
    width: 22px;
    height: 22px;
  }
  
  .logos-pattern-bottom-left {
    top: -22px;
    left: 19px;
    rotate: 90deg;
  }
  
  .logos-pattern-top-right {
    top: -22px;
    right: 19px;
  }
  
  .logos-carousel {
    width: 100%;
    height: 105px;
  }
  
  .logo-item img {
    max-width: 210px;
    max-height: 105px;
  }
  
  .hero-project-card {
    margin: 30px auto;
  }
  
  .project-card-content {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .hero-badge {
    font-size: 12px;
    padding: 10px 20px;
    max-width: 300px;
    text-align: center;
  }
  
  h1.hero-title {
    font-size: 2.5rem;
  }

  .hero-subtitle {
    font-size: 14px;
    margin-bottom: 25px;
  }
  
  .project-card-image {
    height: 180px;
  }
  
  /* Carousel de logos sur très petits écrans */
  .hero-logos {
    padding: 15px 20px;
  }
  
  .logos-title {
    font-size: 14px;
    margin-bottom: 12px;
  }
  
  .logos-pattern {
    width: 17px;
    height: 17px;
  }
  
  .logos-pattern-bottom-left {
    top: -17px;
    left: 19px;
    rotate: 90deg;
  }
  
  .logos-pattern-top-right {
    top: -17px;
    right: 19px;
  }
  
  .logos-carousel {
    height: 90px;
  }
  
  .logo-item img {
    max-width: 180px;
    max-height: 90px;
  }
  

  

  

}

/* =================================
   ANIMATIONS AVANCÉES
   ================================= */


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

.hero-project-card {
  animation: float 6s ease-in-out infinite;
}

/* Effet de mouvement sur les métriques */
/* Effet glassmorphism amélioré */
.hero-badge,
.hero-project-card {
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* =================================
   HERO STATISTICS SECTION - DESKTOP
   ================================= */

.hero-stats {
  /* Les styles de base sont hérités de .hero-logos */
}

.stats-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 2rem;
}

.stat-item {
  text-align: center;
  transition: all 0.3s ease;
}

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

.stat-number {
  font-size: 4rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1;
  margin-bottom: 1rem;
  display: block;
}

.stat-description {
  font-size: 1rem;
  color: #666666;
  line-height: 1.4;
  max-width: 200px;
  margin: 0 auto;
}

/* =================================
   HERO STATISTICS SECTION - MOBILE
   ================================= */

.hero-stats-mobile {
  /* Les styles de base sont hérités de .hero-logos-mobile */
}

.stats-container-mobile {
  text-align: center;
}

.stat-display-mobile {
  position: relative;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
}

.stat-item-mobile {
  position: absolute;
  width: 100%;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
  pointer-events: none;
}

.stat-item-mobile.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.stat-number-mobile {
  font-size: 3.5rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stat-description-mobile {
  font-size: 0.95rem;
  color: #666666;
  line-height: 1.4;
  padding: 0 2rem;
}

/* Indicateurs de navigation */
.stats-indicators {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.stat-indicator {
  width: 60px;
  height: 5px;
  background-color: #e0e0e0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.stat-indicator.active {
  background-color: #1a1a1a;
  transform: scale(1.2);
}

.stat-indicator:hover {
  background-color: #666666;
}

/* =================================
   RESPONSIVE BREAKPOINTS
   ================================= */

/* Tablette */
@media (max-width: 992px) {
  .stats-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    max-width: 600px;
  }
  
  .stat-number {
    font-size: 3.5rem;
  }
  
  .stat-description {
    font-size: 0.95rem;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .hero-stats {
    display: none;
  }
  
  .hero-stats-mobile {
    display: block;
  }
}

/* Très petit mobile */
@media (max-width: 480px) {
  .stat-number-mobile {
    font-size: 3rem;
  }
  
  .stat-description-mobile {
    font-size: 0.9rem;
    padding: 0 1rem;
  }
  
  .hero-stats-mobile {
    padding: 2.5rem 0;
  }
}

/* Services */
/**
 * SERVICES SHOWCASE - MODULE HUBSPOT
 * Section de présentation de services avec disposition asymétrique
 */

/* =================================
   SECTION SERVICES
   ================================= */

/* Alignements de texte */
.services-section.align-left {
    text-align: left;
}

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

.services-section.align-right {
    text-align: right;
}

.services-section.align-justify {
    text-align: justify;
}

/* Classes utilitaires de couleur */
.txt-white {
    color: #fff !important;
}

.txt-black {
    color: #000 !important;
}

/* =================================
   EN-TÊTE SERVICES
   ================================= */

.services-header {
  text-align: center;
  max-width: 1000px;
  margin: 0 auto 50px;
  margin-bottom: var(--space-9);
}

/* Titre principal */
.services-title {
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-tight);
    color: var(--dark);
    margin-bottom: var(--space-5);
}

/* Sous-titre */
.services-subtitle {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    color: var(--gray-600);
}

/* =================================
   CONTENEUR PRINCIPAL
   ================================= */
.services-container {
    display: grid;
    grid-template-columns: 60% 40%;
    max-width: 1400px;
    margin: 0 auto;
    gap: var(--space-5);
    padding: 0 var(--space-5);
}

/* =================================
   COLONNE GAUCHE
   ================================= */
.services-left-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* =================================
   BLOCS DE SERVICES
   ================================= */
.service-block {
    display: flex;
    background-color: var(--color-dark);
    border-radius: 15px;
    overflow: hidden;
    transition: transform var(--transition-duration) var(--transition-timing), 
                box-shadow var(--transition-duration) var(--transition-timing);
}

.services-left-column .service-block {
    height: calc((100% - 40px) / 3); /* Divise l'espace disponible en 3 avec les gaps */
}

.service-block:hover {
    transform: translateY(-2px);
}

/* =================================
   IMAGES DES SERVICES
   ================================= */
.service-image {
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =================================
   CONTENU DES SERVICES
   ================================= */
.service-content {
    width: 60%;
    padding: 40px;
    display: flex;
    flex-direction: column;
}

.service-category {
    background:var(--color-dark);
    border-radius: 5px;
    color:var(--primary);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 15px;
    padding: 0 10px;
    text-transform: uppercase;
    width: max-content;
}


.service-content h3,
.hub-content h3 {
    font-weight: 400;
    color: var(--color-white);
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 15px;
    font-family: var(--font-family-base);
}

.hub-content h3 {
    font-size:2.5rem;
}

.service-content h4 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-3);
    color: var(--color-white);
}

.service-content p {
    font-size: var(--font-size-lg);
    color: var(--gray-300);
    margin-bottom: var(--space-5);
    flex-grow: 1;
}

.hub-content p {
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--gray-300);
    margin-bottom: 15px;
}

/* =================================
   TAGS DES SERVICES
   ================================= */
.service-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: 10px;
}

.service-tag {
    padding: 2px 15px;
    background-color:var(--secondary);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    color: var(--color-white);
    transition: all var(--transition-duration) var(--transition-timing);
}

.service-tag:hover {
    background-color: var(--gray-50);
    border-color: var(--primary);
}

/* =================================
   COLONNE DROITE (HUB)
   ================================= */
.services-right-column {
    display: flex;
}

.hub-block {
    flex-direction: column;
    background-color: var(--color-dark);
    height: 100%;
    border-radius: 15px;
    overflow: hidden;
}

.hub-image {
    height: 50%; /* 1/2 de la hauteur totale */
    overflow: hidden;
}

.hub-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hub-content {
    display: flex;
    flex-direction: column;
    padding: 40px;
    justify-content: center;
    height: 50%; /* 1/2 de la hauteur restante */
}

.hub-block .service-category, .service-category  {
    color: var(--primary);
    padding: 0;
    background:none;
}

/* =================================
   BOUTON DÉCOUVRIR (pour fallback)
   ================================= */
.discover-link {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    background: var(--primary);
    border-radius: var(--border-radius-sm);
    color: var(--dark);
    font-weight: var(--font-weight-semibold) !important;
    gap: var(--space-3);
    margin-top: var(--space-5);
    padding: var(--space-2) var(--space-5);
    text-decoration: none;
    transition: all 0.5s ease;
    box-sizing: border-box;
}

.discover-link i {
    transition: transform var(--transition-duration) var(--transition-timing);
}

.discover-link:hover {
    background: var(--dark);
    color: var(--color-white);
}

.discover-link:hover i {
    transform: translateX(5px);
}

/* =================================
   RESPONSIVE DESIGN
   ================================= */
@media (max-width: 1200px) {
    .services-container {
        grid: none;
    }
    
    .service-content {
        padding: var(--space-5);
    }
    
    .service-content h3 {
        font-size: 26px;
    }

    .hub-block {
        height: fit-content;
    }

}

@media (max-width: 992px) {
    .services-section {
        padding: var(--space-16) 0;
    }
    
    .services-header {
        padding: 0 var(--space-4);
    }
    
    .services-title {
        font-size: var(--font-size-4xl);
    }
    
    .services-container {
        padding: 0 var(--space-4);
    }
}

@media (max-width: 768px) {
    .services-section {
        padding: var(--space-12) 0;
    }
    
    .services-container {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }
    
    .service-block {
        flex-direction: column;
    }
    
    .service-image, .service-content {
        width: 100%;
    }
    
    .service-image {
        height: 200px;
    }
    
    .services-left-column .service-block {
        height: auto;
    }
    
    .hub-block {
        margin-top: var(--space-5);
    }
    
    .hub-content {
        padding: var(--space-8);
    }
    
    .service-content {
        padding: var(--space-6);
    }
    
    .services-title {
        font-size: var(--font-size-3xl);
    }
    
    .service-content h3 {
        font-size: 26px;
    }
}

@media (max-width: 480px) {
    .services-section {
        padding: var(--space-10) 0;
    }
    
    .services-container {
        padding: 0 var(--space-3);
    }
    
    .services-header {
        padding: 0 var(--space-3);
    }
    
    .hub-content {
        padding: var(--space-6);
    }
    
    .service-content {
        padding: var(--space-5);
    }
    
    .service-tags {
        gap: var(--space-2);
    }
    
    .service-tag {
        font-size: var(--font-size-xs);
        padding: var(--space-1) var(--space-2);
    }
}

/* =================================
GESTION DES VARIANTS DE COULEURS SECTION
================================= */

.services-section.section--dark .services-subtitle {
    color: var(--color-white);
}
/* Styles pour le texte enrichi de la page services */
.services-rich-text {
  line-height: 1.6;
}

.services-rich-text p {
  margin-bottom: 1.5rem;
  font-size: 26px;
  font-weight: 400;
  color: var(--dark);
}

.services-rich-text p:last-child {
  margin-bottom: 0;
}

.services-rich-text p b,
.services-rich-text p strong {
  font-weight: 700;
  color: var(--dark);
}

/* Responsive - Tablette */
@media (max-width: 1024px) {
  .services-rich-text p {
    font-size: 24px;
  }
}

/* Responsive - Mobile */
@media (max-width: 767px) {
  .services-rich-text p {
    font-size: 22px;
    line-height: 1.5;
  }
}
/* Styles pour la section équipe expertise */
.team-expertise-content {
  padding: 2rem 0;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

/* Centrage de l'image dans la section équipe */
.services-page .dnd-row img {
  display: block;
  margin: 0 auto;
}

.services-page .widget-type-linked_image {
  text-align: center;
}

.team-expertise-content h2 {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 1.5rem;
  line-height: 1.2;
  text-align: center;
}

.team-expertise-content p {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--gray-600);
  margin-bottom: 1.5rem;
  text-align: center;
}

.team-expertise-content p:last-child {
  margin-bottom: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .team-expertise-content {
    padding: 1.5rem 0;
  }
  
  .team-expertise-content h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  
  .team-expertise-content p {
    font-size: 1rem;
    margin-bottom: 1rem;
  }
}

/* Video Section */
/*------------------------------------
    Video Section
    Section vidéo basée sur la structure hero banner
    avec popup optimisé et support multi-plateforme
------------------------------------*/

/* Variables spécifiques au module vidéo */
:root {
  --video-overlay-opacity: 0.5;
  --video-content-max-width: 800px;
  --video-padding-y: var(--section-padding-y, 5rem);
  --video-padding-y-mobile: calc(var(--section-padding-y, 5rem) * 0.6);
  --video-play-btn-size: 80px;
  --video-play-btn-size-large: 100px;
  --video-modal-z-index: 9999;
  
  /* Header height pour full-height (même que hero banner) */
  --header-height-banner: 123px;
}

/* Ajustements de la hauteur du header selon les breakpoints */
@media (max-width: 1024px) and (min-width: 769px) {
  :root {
    --header-height-banner: 104px; /* Tablette */
  }
}

@media (max-width: 768px) {
  :root {
    --header-height-banner: 64px; /* Mobile */
  }
}

/* Base styles - hérite des styles hero banner */
.video-section {
  position: relative;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  overflow: hidden;
  min-height: 400px;
  padding: var(--video-padding-y) 0;
}

/* ================================
   HAUTEURS FIXES EN PIXELS
   ================================ */

.video-section.hero-height--1000 {
  min-height: 1000px;
}

.video-section.hero-height--900 {
  min-height: 900px;
}

.video-section.hero-height--800 {
  min-height: 800px;
}

.video-section.hero-height--700 {
  min-height: 700px;
}

.video-section.hero-height--600 {
  min-height: 600px;
}

.video-section.hero-height--500 {
  min-height: 500px;
}

.video-section.hero-height--400 {
  min-height: 400px;
}

.video-section.hero-height--300 {
  min-height: 300px;
}

/* ================================
   HAUTEURS EN POURCENTAGE DE VIEWPORT
   ================================ */

.video-section.hero-height--100vh {
  padding: var(--section-padding-y) 0;
  /* Fallback pour navigateurs anciens sans support vh */
  min-height: 600px;
  min-height: calc(100vh - var(--header-height-banner));
  height: calc(100vh - var(--header-height-banner));
}

.video-section.hero-height--90vh {
  /* Fallback pour navigateurs anciens */
  min-height: 500px;
  min-height: 90vh;
}

.video-section.hero-height--80vh {
  /* Fallback pour navigateurs anciens */
  min-height: 450px;
  min-height: 80vh;
}

.video-section.hero-height--70vh {
  /* Fallback pour navigateurs anciens */
  min-height: 400px;
  min-height: 70vh;
}

.video-section.hero-height--60vh {
  /* Fallback pour navigateurs anciens */
  min-height: 350px;
  min-height: 60vh;
}

.video-section.hero-height--50vh {
  /* Fallback pour navigateurs anciens */
  min-height: 300px;
  min-height: 50vh;
}

/* Hauteur automatique */
.video-section.hero-height--auto {
  min-height: auto;
}

/* Mode full-height : alias pour 100vh */
.video-section.video-section--full-height {
  padding: var(--section-padding-y) 0;
  min-height: calc(100vh - var(--header-height-banner));
  height: calc(100vh - var(--header-height-banner));
}

/* Background layer */
.video-section__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Background image */
.video-section__background-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  -o-object-fit: cover;
  object-fit: cover;
  object-position: center;
}

/* Background video */
.video-section__background-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -o-object-fit: cover;
  object-fit: cover;
}

/* Overlay */
.video-section__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  background-color: transparent;
  background-color: var(--overlay-color, transparent);
}

/* Content container */
.video-section__container {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* Content wrapper */
.video-section__content {
  text-align: center;
  max-width: var(--video-content-max-width);
  margin: 0 auto;
}

/* Title */
.video-section__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-text-default);
  margin-bottom: var(--spacing-md);
}

/* Subtitle */
.video-section__subtitle {
  font-family: var(--font-family-base);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-xl);
}

/* CTA container - toujours centré */
.video-section__cta {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

/* Color variants for text on dark backgrounds */
.video-section--text-light .video-section__title {
  color: var(--color-text-inverted);
}

.video-section--text-light .video-section__subtitle {
  color: var(--color-text-inverted-muted);
}

/* ================================
   BOUTON DE LECTURE VIDÉO
   ================================ */

.video-play-btn {
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: var(--video-play-btn-size);
  height: var(--video-play-btn-size);
  border: none;
  border-radius: 50%;
  background: var(--primary);
  color: var(--color-background-white);
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  position: relative;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.video-play-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  height: 150%;
  background-color: currentColor;
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%) scale(0);
  -ms-transform: translate(-50%, -50%) scale(0);
  transform: translate(-50%, -50%) scale(0);
  -webkit-transition: transform 0.3s ease;
  -o-transition: transform 0.3s ease;
  transition: transform 0.3s ease;
  opacity: 0.1;
  z-index: 1;
}

.video-play-btn:hover::before {
  -webkit-transform: translate(-50%, -50%) scale(1);
  -ms-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
}

.video-play-btn:hover {
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
}

.video-play-btn:focus {
  outline: 3px solid color-mix(in srgb, var(--primary) 50%, transparent);
  outline-offset: 4px;
}

.video-play-btn:active {
  -webkit-transform: scale(0.95);
  -ms-transform: scale(0.95);
  transform: scale(0.95);
}

/* Icône play */
.video-play-btn__icon {
  width: 24px;
  height: 24px;
  margin-left: 3px; /* Centrage visuel du triangle */
  fill: currentColor;
}

/* Texte du bouton - version icône seule (par défaut) */
.video-play-btn__text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Variante bouton avec texte visible */
.video-play-btn--with-text {
  width: auto;
  height: auto;
  border-radius: 50px;
  padding: 1rem 1.5rem;
  gap: 0.75rem;
}

.video-play-btn--with-text .video-play-btn__text {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  border: none;
  font-size: 1rem;
  font-weight: 600;
}

.video-play-btn--with-text .video-play-btn__icon {
  width: 20px;
  height: 20px;
  margin-left: 0;
}

/* Variante outline */
.video-play-btn--outline {
  background-color: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);
}

.video-play-btn--outline:hover {
  background-color: var(--primary);
  color: var(--secondary);
}

/* Variante large */
.video-play-btn--large {
  width: var(--video-play-btn-size-large);
  height: var(--video-play-btn-size-large);
}

.video-play-btn--large .video-play-btn__icon {
  width: 32px;
  height: 32px;
}

/* Variante glow pour sections sombres */
.video-play-btn--glow {
  box-shadow: 0 0 20px color-mix(in srgb, var(--primary) 30%, transparent), 0 4px 20px rgba(0, 0, 0, 0.1);
}

.video-play-btn--glow:hover {
  box-shadow: 0 0 30px color-mix(in srgb, var(--primary) 50%, transparent), 0 6px 25px rgba(0, 0, 0, 0.15);
}

/* ================================
   MODAL POPUP VIDÉO - VERSION SIMPLIFIÉE
   ================================ */

/* Overlay de fond */
#video-popup-overlay {
  display: none !important;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: var(--video-modal-z-index);
  cursor: pointer;
}

/* Container principal de la modal */
#video-popup-container {
  display: none !important;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 1000px;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  z-index: calc(var(--video-modal-z-index) + 1);
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}

/* Bouton de fermeture */
#video-popup-close {
  display: none !important;
  position: fixed;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, 0.9);
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: calc(var(--video-modal-z-index) + 10);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Quand la modal est active */
.video-modal-active #video-popup-overlay {
  display: block !important;
}

.video-modal-active #video-popup-container {
  display: block !important;
}

.video-modal-active #video-popup-close {
  display: flex !important;
}

#video-popup-close svg {
  width: 20px;
  height: 20px;
  stroke: white;
  transition: all 0.3s ease;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
  /* Assurer la visibilité de l'icône */
  opacity: 1;
  pointer-events: none;
}

#video-popup-close:hover {
  background: rgba(255, 255, 255, 0.9);
  color: #000;
  transform: scale(1.1);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.8);
}

#video-popup-close:active {
  transform: scale(0.95);
}

#video-popup-close:focus {
  outline: 3px solid rgba(255, 255, 255, 0.8);
  outline-offset: 3px;
}

/* Containers pour les différents types de vidéo */
#video-popup-iframe-container,
#video-popup-local-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* Ratio 16:9 */
  height: 0;
  overflow: hidden;
}

#video-popup-iframe-container iframe,
#video-popup-local-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Style pour la classe vpop */
.vpop {
  cursor: pointer;
  display: inline-block;
}

/* ================================
   RESPONSIVE
   ================================ */

@media (max-width: 768px) {
  .video-section {
    padding: var(--video-padding-y-mobile) 0;
  }
  
  /* Full-height et 100vh mobile : padding encore plus réduit */
  .video-section.video-section--full-height,
  .video-section.hero-height--100vh {
    padding: 2rem 0;
  }
  
  .video-section__title {
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }
  
  .video-section__subtitle {
    font-size: 1.125rem;
    margin-bottom: 2rem;
  }
  
  /* Ajustements des hauteurs pour mobile */
  .video-section.hero-height--1000 { min-height: 700px; }
  .video-section.hero-height--900 { min-height: 650px; }
  .video-section.hero-height--800 { min-height: 600px; }
  .video-section.hero-height--700 { min-height: 500px; }
  .video-section.hero-height--600 { min-height: 450px; }
  .video-section.hero-height--500 { min-height: 400px; }
  .video-section.hero-height--400 { min-height: 350px; }
  .video-section.hero-height--300 { min-height: 300px; }
  
  .video-play-btn {
    width: 70px;
    height: 70px;
  }
  
  .video-play-btn--large {
    width: 80px;
    height: 80px;
  }
  
  .video-play-btn__icon {
    width: 20px;
    height: 20px;
  }
  
  .video-play-btn--large .video-play-btn__icon {
    width: 24px;
    height: 24px;
  }
  
  .video-modal__container {
    padding: 1rem;
  }
  
  /* Styles pour le bouton de fermeture mobile */
  #video-popup-close {
    top: 15px;
    right: 15px;
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.95);
    border: 2px solid white;
  }
  
  #video-popup-close svg {
    width: 16px;
    height: 16px;
    stroke-width: 3;
  }
  
  /* Améliorer l'indicateur tactile sur mobile */
  .video-modal__backdrop::before {
    width: 80px;
    height: 80px;
  }
}

@media (max-width: 480px) {
  .video-section__title {
    font-size: 2rem;
  }
  
  .video-section__subtitle {
    font-size: 1rem;
  }
  
  .video-play-btn {
    width: 60px;
    height: 60px;
  }
  
  .video-play-btn--large {
    width: 70px;
    height: 70px;
  }
}

/* ================================
   ACCESSIBILITÉ
   ================================ */

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .video-play-btn,
  .video-play-btn::before,
  .video-modal,
  .video-modal__content {
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
  }
  
  .video-play-btn:hover {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}

/* Contraste élevé */
@media (prefers-contrast: high) {
  .video-play-btn {
    border: 2px solid currentColor;
  }
  
  .video-modal__backdrop {
    background-color: rgba(0, 0, 0, 0.95);
  }
}

/* ================================
   FALLBACKS IE
   ================================ */

/* Support IE pour flexbox */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .video-section {
    display: -ms-flexbox;
    -ms-flex-align: center;
    -ms-flex-pack: center;
  }
  
  .video-play-btn {
    display: -ms-inline-flexbox;
    -ms-flex-align: center;
    -ms-flex-pack: center;
  }
  
  .video-modal__container {
    display: -ms-flexbox;
    -ms-flex-align: center;
    -ms-flex-pack: center;
  }
}

/* Fallback pour les navigateurs sans support object-fit */
@supports not (object-fit: cover) {
  .video-section__background-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}

/* Blog */
/* ================================
   SECTION BLOG - Last Blog Posts
   ================================ */

   .blog-section, .ressources-blog-section {
    --blog-section-gap: 2rem;
    --blog-post-image-width: 240px;
    --blog-post-image-height: 240px;
    --blog-post-content-gap: 0.625rem;
    --blog-post-meta-gap: 1rem;
    --blog-author-avatar-size: 32px;
    --blog-divider-size: 4px;
  }
  
  .blog-section .blog-post {
      padding: 0 0 2rem;
  }
  
  
  /* Layout principal */
  .blog-section__inner {
    display: grid;
    grid-template-columns: 40% 1fr;
    gap: 6rem;
    align-items: start;
    max-width: 1440px;
    margin: 0 auto;
  }
  
  /* En-tête de la section */
  .blog-section__header {
    position: sticky;
    top: 6rem;
  }
  
  .blog-section__header-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

    .blog-section__header-content .section__overtitle {
        margin-bottom: 0;
    }
  
  
  .blog-section__title {
    font-weight: var(--font-weight-normal);
    margin: 0;
    max-width: 488px;
  }
  
  .blog-section__subtitle {
    font-size: 1.125rem;
    color: var(--color-dark);
    line-height: 1.4;
    font-weight: 400;
    margin: 0;
    opacity: 0.8;
    max-width: 488px;
  }
  
  .blog-section__actions {
    margin-top: 0.5rem;
  }
  
  /* Container des articles */
  .blog-section__articles {
    display: flex;
    flex-direction: column;
    gap: var(--blog-section-gap);
    max-width: 592px;
  }
  
  /* Article de blog */
  .blog-post {
    gap: var(--blog-section-gap);
    align-items: flex-start;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    color: inherit;
  }
  
  .blog-section .blog-post:hover {
    transform: translateY(-2px);
  }
  
  /* Image de l'article */
  .blog-post__image {
    flex-shrink: 0;
    width: var(--blog-post-image-width);
    height: var(--blog-post-image-height);
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
  }
  
  .blog-post__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }
  
  .blog-post:hover .blog-post__image img {
    transform: scale(1.05);
  }
  
  /* Contenu de l'article */
  .blog-post__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--blog-post-content-gap);
    min-height: var(--blog-post-image-height);
    justify-content: space-between;
    padding: 0.5rem 0;
  }
  
  .blog-post__title {
    font-size: 1.5rem;
    color: var(--color-dark);
    line-height: 1.3;
    font-weight: 500;
    margin: 0 0 5px;
    transition: color 0.2s ease;
  }
  
  
  .blog-post__excerpt {
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
    opacity: 0.8;
    flex-grow: 1;
  }
  
  /* Meta informations */
  .blog-post__meta {
    display: flex;
    align-items: center;
    gap: var(--blog-post-meta-gap);
    margin-top: auto;
  }
  
  .blog-post__author {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  
  .blog-post__author-avatar {
    width: var(--blog-author-avatar-size);
    height: var(--blog-author-avatar-size);
    border-radius: 50%;
    object-fit: cover;
  }
  
  .blog-post__author-name {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
  }
  
  .blog-post__divider {
    width: var(--blog-divider-size);
    height: var(--blog-divider-size);
    background-color: #929aa0;
    border-radius: 50%;
    flex-shrink: 0;
  }
  
  .blog-post__date {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1;
    color: inherit;
    opacity: 0.8;
  }
  
  /* ================================
     RESPONSIVE DESIGN
     ================================ */
  
  /* Tablettes */
  @media (max-width: 1024px) {
    .blog-section__inner {
      grid-template-columns: 1fr;
      gap: 3rem;
    }
  
    .blog-section__articles {
      margin:auto;
    }
    
    .blog-section__header {
      position: static;
      text-align: center;
    }
    
    .blog-section__title {
      max-width: none;
    }
    
    .blog-section__subtitle {
      max-width: none;
    }
  }
  
  /* Smartphones */
  @media (max-width: 768px) {
    .blog-section {
      --blog-section-gap: 1.5rem;
      --blog-post-image-width: 120px;
      --blog-post-image-height: 130px;
      --blog-post-meta-gap: 0.75rem;
      --blog-author-avatar-size: 28px;
    }
    
    .blog-section__inner {
      gap: 2rem;
    }
    
    
    .blog-section__subtitle {
      font-size: 1rem;
    }
    
    .blog-post {
      flex-direction: column;
      gap: 1rem;
    }
    
    .blog-post__image {
      width: 100%;
      height: 200px;
    }
    
    .blog-post__content {
      min-height: auto;
    }
    
    .blog-post__title {
      font-size: 1.5rem;
    }
    
    .blog-post__meta {
      flex-wrap: wrap;
      gap: 0.5rem 1rem;
    }
  }
  
  /* Très petits écrans */
  @media (max-width: 480px) {
    .blog-section {
      --blog-section-gap: 1rem;
    }
    
    
    .blog-post__title {
      font-size: 1.25rem;
    }
    
    .blog-post__excerpt {
      font-size: 0.875rem;
    }
  }
  
 
  
  /* ================================
     MODULE BLOG LAST POSTS
     ================================ */
  
  .blog-section__articles .blog-post {
    display: flex;
  }

/* Grid Cards */
/* ============================================
   Sectors Grid Cards Component
   ============================================ */

.sectors-grid {
    width: 100%;
}

.sectors-grid__wrapper {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -14px; /* Half of gap for proper spacing */
}

.sectors-grid__item {
    padding: 0 14px 28px; /* 28px bottom margin for vertical spacing */
}

.section-grid-cards .section__header {
    padding-bottom: 30px;
}



/* ============================================
   Sector Card Styles
   ============================================ */

.sector-card {
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: block; /* Important pour les liens */
    text-decoration: none; /* Enlever le soulignement des liens */
    color: inherit; /* Hériter de la couleur du parent */
}

.sector-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* ============================================
   Cartes Cliquables - Styles spécifiques
   ============================================ */

/* Styles pour les cartes cliquables uniquement */
.section-grid-cards--clickable .sector-card--link {
    cursor: pointer;
    position: relative;
}

.section-grid-cards--clickable .sector-card--link:hover {
    transform: translateY(-6px); /* Plus d'élévation pour les cartes cliquables */
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2);
}

.section-grid-cards--clickable .sector-card--link:active {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* Effet de focus pour l'accessibilité */
.section-grid-cards--clickable .sector-card--link:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Indicateur visuel pour les cartes cliquables */
.section-grid-cards--clickable .sector-card--link::after {
    content: '';
    position: absolute;
    bottom: 30px;
    right: 30px;
    width: 35px;
    height: 35px;
    border: 1px solid var(--white);
    border-radius: 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 3;
}

.section-grid-cards--clickable .sector-card--link::before {
    content: '→';
    position: absolute;
    bottom: 34px;
    right: 40px;
    color: var(--primary);
    font-weight: 500;
    font-size: 18px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 4;
}

.section-grid-cards--clickable .sector-card--link:hover::after,
.section-grid-cards--clickable .sector-card--link:hover::before {
    opacity: 1;
}

/* ============================================
   Styles de base pour les cartes
   ============================================ */

.sector-card__image {
    position: relative;
    height: 444px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px;
}

.sector-card__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, var(--secondary) 0%, transparent 100%);
    opacity: 0.9;
}

.sector-card__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: normal;
}

.sector-card__category {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary);
    margin-bottom: 4px;
}

h3.sector-card__title {
    font-size: 32px;
    font-weight: 500;
    line-height: 1.2;
    color: white;
    margin: 0 0 12px 0;
}

.sector-card__description {
    font-size: 16px;
    line-height: 1.5;
    color: white;
    margin: 0;
    opacity: 0.95;
}

/* ============================================
   Section Variants
   ============================================ */

/* Light Section */
.section--light .sector-card__overlay {
    background: linear-gradient(180deg, var(--secondary) 0%, transparent 100%);
}

/* Primary Section */
.section--primary .sector-card__overlay {
    background: linear-gradient(180deg, var(--secondary) 0%, transparent 100%);
}

/* Secondary Section */
.section--secondary .sector-card__overlay {
    background: linear-gradient(180deg, var(--secondary) 0%, transparent 100%);
}

/* Tertiary Section */
.section--tertiary .sector-card__overlay {
    background: linear-gradient(180deg, var(--secondary) 0%, transparent 100%);
}

/* Dark Section */
.section--dark .sector-card__overlay {
    background: linear-gradient(180deg, var(--secondary) 0%, transparent 100%);
}

/* ============================================
   Responsive Design
   ============================================ */

/* Large screens - 4 columns */
@media (min-width: 992px) {
    .sectors-grid__item {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

/* Medium screens - 2 columns */
@media (min-width: 576px) and (max-width: 991px) {
    .sectors-grid__item {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Small screens - 1 column */
@media (max-width: 575px) {
    .sectors-grid__item {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0 0 28px;
    }
    
    .sector-card__image {
        height: 380px;
        padding: 32px;
    }
    
    .sector-card__title {
        font-size: 28px;
    }
    
    .sector-card__description {
        font-size: 15px;
    }

    /* Ajustement de l'indicateur sur mobile */
    .section-grid-cards--clickable .sector-card--link::after {
        bottom: 30px;
        right: 30px;
        width: 35px;
        height: 35px;
    }

    .section-grid-cards--clickable .sector-card--link::before {
        bottom: 34px;
        right: 40px;
        font-size: 18px;
    }
}

/* ============================================
   Grid Column Classes Support
   ============================================ */

/* Support for custom column classes */
.sectors-grid__wrapper .col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.sectors-grid__wrapper .col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.sectors-grid__wrapper .col-3 { flex: 0 0 25%; max-width: 25%; }
.sectors-grid__wrapper .col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.sectors-grid__wrapper .col-6 { flex: 0 0 50%; max-width: 50%; }
.sectors-grid__wrapper .col-12 { flex: 0 0 100%; max-width: 100%; }

@media (min-width: 576px) {
    .sectors-grid__wrapper .col-sm-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .sectors-grid__wrapper .col-sm-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .sectors-grid__wrapper .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
    .sectors-grid__wrapper .col-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .sectors-grid__wrapper .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
    .sectors-grid__wrapper .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 768px) {
    .sectors-grid__wrapper .col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .sectors-grid__wrapper .col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .sectors-grid__wrapper .col-md-3 { flex: 0 0 25%; max-width: 25%; }
    .sectors-grid__wrapper .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .sectors-grid__wrapper .col-md-6 { flex: 0 0 50%; max-width: 50%; }
    .sectors-grid__wrapper .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

/* ============================================
   Navigation Section
   ============================================ */

.navigation-section {
    padding: 60px 0;
    background-color: var(--color-background-default);
}

.navigation-section .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.navigation-section .btn--primary {
    background-color: var(--primary);
    color: white;
}

.navigation-section .btn--primary:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Timeline */
/* ============================================
   TIMELINE HORIZONTAL HISTORY COMPONENT
   ============================================ */

.section-timeline-history {
    overflow: hidden;
}

.section-timeline-history .section__title {
    padding-top: 15px;
}

/* Container principal de la timeline */
.timeline-container {
    position: relative;
    width: 100%;
    overflow-x: scroll;
    padding: 60px 0 40px;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.timeline-container:active {
    cursor: grabbing;
}

/* Masquer la scrollbar native tout en gardant la fonctionnalité */
.timeline-container::-webkit-scrollbar {
    display: none;
}

.timeline-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Track de la timeline */
.timeline-track {
    position: relative;
    min-width: max-content;
    padding: 0 calc(35% - 150px);
    padding-bottom: 40px;
}

/* La ligne horizontale principale */
.timeline-line {
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    height: 5px;
    background-color: var(--gray-200);
    border-radius: 2px;
}

/* Container des événements */
.timeline-events {
    display: flex;
    gap: 100px;
    position: relative;
}

/* Style pour chaque événement */
.timeline-event {
    position: relative;
    width: 350px;
    flex-shrink: 0;
}

/* Marqueur de l'événement */
.event-marker {
    position: absolute;
    left: -30px;    
    bottom: 0;
    height: 100%;
}

/* Ligne verticale du marqueur */
.marker-line {
    width: 2px;
    height: 100%;
    background-color: var(--gray-200);
    margin: 0 auto;
    border-radius: 1px;
}

/* Point du marqueur */
.marker-dot {
    width: 30px;
    height: 30px;
    background-color: var(--primary-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
}

/* Point intérieur du marqueur */
.dot-inner {
    width: 18px;
    height: 18px;
    background-color: var(--secondary);
    border-radius: 50%;
}

/* Contenu de l'événement */
.event-content {
    padding-bottom: 80px;
    text-align: left;
    max-width: 350px;
}

/* Année de l'événement */
.event-year {
    display: inline-block;
    color: var(--primary);
    font-size: 48px;
    font-weight: 600;
    margin-bottom: 5px;
    line-height: 1.2;
}

/* Titre de l'événement */
.event-content h3 {
    color: var(--secondary);
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 12px;
    margin-top: 10px;
    line-height: 1.3;
    text-transform: uppercase;
}

/* Description de l'événement */
.event-content p {
    color: var(--text-primary);
    line-height: 1.6;
    font-size: 16px;
    margin: 0 0 10px 0;

}

/* ============================================
   BARRE DE SCROLL PERSONNALISÉE
   ============================================ */

.timeline-scrollbar {
    position: relative;
    height: 6px;
    background-color: var(--gray-200);
    margin: 30px auto 0;
    max-width: 900px;
    border-radius: 3px;
}

.scrollbar-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.scrollbar-thumb {
    position: absolute;
    height: 100%;
    background-color: var(--primary);
    border-radius: 3px;
    cursor: pointer; 
    min-width: 100px; 
    max-width: 200px; 
    width: 30%;
    transition: background-color 0.2s ease;
}

.scrollbar-thumb:hover {
    background-color: var(--primary-dark);
}

/* ============================================
   VARIANTES DE COULEUR
   ============================================ */

/* Section Light (par défaut - utilise les couleurs de base) */

/* Section Primary */
.section--primary .timeline-line {
    background-color:rgba(2, 44, 34, 0.4);
}

.section--primary .marker-line {
    background-color: var(--secondary-500);
}

.section--primary .marker-dot {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: var(--white);
}

.section--primary .dot-inner {
    background-color: var(--secondary-600);
}

.section--primary .event-year {
    color: var(--secondary-500);
}

.section--primary .event-content h3 {
    color: var(--secondary);
}

.section--primary .event-content p {
    color: var(--secondary);
}

.section--primary .timeline-scrollbar {
    background-color: rgba(255, 255, 255, 0.2);
}

.section--primary .scrollbar-thumb {
    background-color: var(--white);
}

.section--primary .scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.8);
}

/* Section Secondary */
.section--secondary .marker-line {
    background-color: var(--white);
}

.section--secondary .marker-dot {
    background-color: rgba(255, 255, 255, 0.2);
}

.section--secondary .dot-inner {
    background-color: var(--primary);
}

.section--secondary .event-year {
    color: var(--primary);
}

.section--secondary .event-content h3 {
    color: var(--white);
}

.section--secondary .scrollbar-thumb {
    background-color: var(--primary);
}

.section--secondary .scrollbar-thumb:hover {
    background-color: var(--primary-500);
}

/* Section Tertiary */
.section--tertiary .marker-line {
    background-color: var(--secondary);
}

.section--tertiary .marker-dot {
    background-color:rgba(2, 44, 34, 0.2);
}

.section--tertiary .dot-inner {
    background-color: var(--secondary);
}

.section--tertiary .event-year {
    color: var(--primary);
}

.section--tertiary .scrollbar-thumb {
    background-color: var(--primary);
}

.section--tertiary .scrollbar-thumb:hover {
    background-color: var(--primary-500);
}

/* Section Dark */
.section--dark .timeline-line {
    background-color: rgba(255, 255, 255, 0.1);
}

.section--dark .marker-line {
    background-color: var(--primary);
}

.section--dark .marker-dot {
    background-color:rgba(190, 242, 100, 0.2);
    border-color: var(--dark);
}

.section--dark .dot-inner {
    background-color: var(--primary);
}

.section--dark .event-year {
    color: var(--primary);
}

.section--dark .event-content h3 {
    color: var(--white);
}

.section--dark .event-content p {
    color: var(--gray-300);
}

.section--dark .timeline-scrollbar {
    background-color: rgba(255, 255, 255, 0.1);
}

.section--dark .scrollbar-thumb {
    background-color: var(--primary);
}

.section--dark .scrollbar-thumb:hover {
    background-color: var(--primary-500);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

 @media (max-width: 1400px) {

    .timeline-track {
        padding: 0 10%;
    }

}


@media (max-width: 950px) {
    .timeline-scrollbar {
        margin: 30px 50px 0;
    }
}

@media (max-width: 768px) {
    .timeline-line {
        bottom: 0;
    }

    .timeline-track {
        padding: 0 20%;
    }

    .timeline-events {
        gap: 80px;
    }

    .timeline-event {
        width: 280px;
    }

    .event-content {
        padding-bottom: 50px;
    }

    .event-year {
        font-size: 34px;
    }

    .event-content h3 {
        font-size: 18px;
    }

    .event-content p {
        font-size: 15px;
    }

    .marker-dot {
        width: 26px;
        height: 26px;
    }

    .dot-inner {
        width: 16px;
        height: 16px;
    }


}

@media (max-width: 480px) {
    .timeline-events {
        gap: 60px;
    }

    .timeline-event {
        width: 240px;
    }

    .timeline-track {
        padding: 0 5%;
    }

    .event-year {
        font-size: 22px;
    }

    .event-content h3 {
        font-size: 17px;
    }

    .event-content p {
        font-size: 14px;
    }
}

/* ============================================
   SÉLECTION DÉSACTIVÉE
   ============================================ */

.timeline-track,
.timeline-events,
.timeline-event,
.event-content {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Error */
/* ============================================
   ERROR PAGE GENERIC COMPONENT
   ============================================ */

.error-page-generic {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* ============================================
   CLASSES DE HAUTEUR (RÉUTILISATION DU SYSTÈME HERO)
   ============================================ */

/* Hauteurs fixes en pixels */
.error-page-generic.hero-height--1000 {
    min-height: 1000px;
}

.error-page-generic.hero-height--900 {
    min-height: 900px;
}

.error-page-generic.hero-height--800 {
    min-height: 800px;
}

.error-page-generic.hero-height--700 {
    min-height: 700px;
}

.error-page-generic.hero-height--600 {
    min-height: 600px;
}

.error-page-generic.hero-height--500 {
    min-height: 500px;
}

.error-page-generic.hero-height--400 {
    min-height: 400px;
}

.error-page-generic.hero-height--300 {
    min-height: 300px;
}

/* Hauteurs en viewport (vh) */
.error-page-generic.hero-height--100vh {
    min-height: calc(100vh - var(--header-height-banner, 0px));
    height: calc(100vh - var(--header-height-banner, 0px));
}

.error-page-generic.hero-height--90vh {
    min-height: 90vh;
    height: 90vh;
}

.error-page-generic.hero-height--80vh {
    min-height: 80vh;
    height: 80vh;
}

.error-page-generic.hero-height--70vh {
    min-height: 70vh;
    height: 70vh;
}

.error-page-generic.hero-height--60vh {
    min-height: 60vh;
    height: 60vh;
}

.error-page-generic.hero-height--50vh {
    min-height: 50vh;
    height: 50vh;
}

/* Hauteur automatique */
.error-page-generic.hero-height--auto {
    min-height: auto;
    height: auto;
}

.error-page-generic__content {
    max-width: 600px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* Code d'erreur - grand format */
.error-page-generic__code {
    font-size: 200px;
    font-weight: 800;
    line-height: 0.8;
    margin-bottom: 40px;
    color: var(--primary);
    letter-spacing: -0.02em;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Message d'erreur */
.error-page-generic__message {
    font-size: 18px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 40px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* Container des boutons d'action */
.error-page-generic__actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

/* Styles spécifiques pour les boutons */
.error-page-generic__btn-primary {
    min-width: 160px;
}

.error-page-generic__btn-secondary {
    min-width: 120px;
}

/* ============================================
   VARIANTES DE COULEUR
   ============================================ */

/* Section Light (par défaut - utilise les couleurs de base) */

/* Section Primary */
.section--primary .error-page-generic__code {
    color: var(--secondary);
}

.section--primary .error-page-generic__message {
    color: var(--text-on-primary);
}

/* Section Secondary */
.section--secondary .error-page-generic__code {
    color: var(--primary);
}

.section--secondary .error-page-generic__message {
    color: var(--white);
}

/* Section Tertiary */
.section--tertiary .error-page-generic__code {
    color: var(--primary);
}

.section--tertiary .error-page-generic__message {
    color: var(--text-secondary);
}

/* Section Dark */
.section--dark .error-page-generic__code {
    color: var(--primary);
}

.section--dark .error-page-generic__message {
    color: var(--gray-300);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Responsive pour les hauteurs fixes */
@media (max-width: 768px) {
    .error-page-generic.hero-height--1000 { min-height: 700px; }
    .error-page-generic.hero-height--900 { min-height: 650px; }
    .error-page-generic.hero-height--800 { min-height: 600px; }
    .error-page-generic.hero-height--700 { min-height: 500px; }
    .error-page-generic.hero-height--600 { min-height: 450px; }
    .error-page-generic.hero-height--500 { min-height: 400px; }
    .error-page-generic.hero-height--400 { min-height: 350px; }
    .error-page-generic.hero-height--300 { min-height: 300px; }
}

@media (max-width: 768px) {
    .error-page-generic {
        min-height: 80vh;
        padding: 40px 0;
    }

    .error-page-generic.hero-height--100vh {
        padding: 20px 0;
    }

    .error-page-generic__content {
        padding: 20px 15px;
    }

    .error-page-generic__code {
        font-size: 120px;
        margin-bottom: 30px;
    }

    .error-page-generic__message {
        font-size: 16px;
        margin-bottom: 30px;
    }

    .error-page-generic__actions {
        flex-direction: column;
        gap: 12px;
    }

    .error-page-generic__btn-primary,
    .error-page-generic__btn-secondary {
        width: 100%;
        max-width: 280px;
        min-width: auto;
    }
}

@media (max-width: 480px) {
    .error-page-generic__code {
        font-size: 100px;
        margin-bottom: 25px;
    }

    .error-page-generic__message {
        font-size: 15px;
        margin-bottom: 25px;
    }

    .error-page-generic__content {
        padding: 15px 10px;
    }
}

/* ============================================
   ANIMATIONS ET INTERACTIONS
   ============================================ */

/* Animation d'entrée pour le code d'erreur */
@keyframes errorCodeAppear {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.error-page-generic__code {
    animation: errorCodeAppear 0.6s ease-out;
}

/* Animation d'entrée pour le message */
@keyframes messageAppear {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.error-page-generic__message {
    animation: messageAppear 0.6s ease-out 0.2s both;
}

/* Animation d'entrée pour les boutons */
@keyframes actionsAppear {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.error-page-generic__actions {
    animation: actionsAppear 0.6s ease-out 0.4s both;
}

/* Effet hover sur les boutons */
.error-page-generic__actions .btn {
    transition: all 0.3s ease;
}

.error-page-generic__actions .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* ============================================
   ACCESSIBILITÉ
   ============================================ */

/* Focus visible pour les éléments interactifs */
.error-page-generic__actions .btn:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Réduction des animations pour les utilisateurs qui préfèrent moins de mouvement */
@media (prefers-reduced-motion: reduce) {
    .error-page-generic__code,
    .error-page-generic__message,
    .error-page-generic__actions {
        animation: none;
    }
    
    .error-page-generic__actions .btn:hover {
        transform: none;
    }
}

/* Formulaire */
/*------------------------------------
    Module Form 01
    Module de formulaire de contact avec différentes variantes
------------------------------------*/

/* Variables spécifiques au module Form 01 */
:root {
  --form-01-gap: 2rem;
  --form-01-gap-mobile: 1.5rem;
  --form-01-card-padding: 2rem;
  --form-01-card-padding-mobile: 1.5rem;
  --form-01-card-border-radius: 16px;
  --form-01-field-gap: 1rem;
  
  /* Couleurs de la carte de formulaire */
  --form-01-card-bg: var(--white);
  --form-01-card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --form-01-card-border: rgba(0, 0, 0, 0.05);
  
  /* Couleurs des labels et textes dans le formulaire */
  --form-01-label-color: var(--gray-700);
  --form-01-features-title-color: var(--gray-900);
  --form-01-form-title-color: var(--gray-900);
  
  /* Variables pour l'overlay avec image de fond */
  --form-01-overlay-opacity: 0.1;
  --form-01-overlay-color: 0, 0, 0; /* RGB sans alpha pour overlay noir par défaut */
}

/* Structure de base du module */
.form-01 {
  position: relative;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.form-01 .form-01__form-card fieldset {
    max-width: 100% !important;
}

.form-01__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--form-01-gap);
  align-items: start;
}

/* Section texte (gauche) */
.form-01__text {
  padding-right: 1rem;
}

.form-01__features {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.form-01__features-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--form-01-features-title-color);
}

.section--dark .section__description
.section--dark .section__description p,
.section--dark .section__description li,
.section--secondary .section__description,
.section--secondary .section__description p,
.section--secondary .section__description li {
    color: rgba(255, 255, 255, 0.7);
}

.form-01__features-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.form-01__feature-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

.form-01__feature-item .icon {
  flex-shrink: 0;
  margin-top: 0.125rem;
  stroke: var(--white);
  background-color: var(--secondary);
  border-radius: 50%;
  padding: 0.25rem;
  width: 1.5rem;
  height: 1.5rem;
}

.form-01__contact-info {
  margin-top: 2rem;
}

.form-01__contact-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

.form-01__contact-item .icon {
  flex-shrink: 0;
  stroke: var(--secondary);
}

/* Section Google Maps */
.form-01__google-maps {
  margin-top: 2rem;
}

/* Versions desktop et mobile pour les informations de contact et Google Maps */
.form-01__contact-info--mobile,
.form-01__google-maps--mobile {
  display: none;
}

.form-01__contact-info--desktop,
.form-01__google-maps--desktop {
  display: block;
}

.form-01__map-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.05);
}


.form-01__map-container iframe {
  width: 100% !important;
  height: 100% !important;
  border: none;
  display: block;
}

/* Section formulaire (droite) */
.form-01__form {
  position: relative;
}

.form-01__form-card {
  background: var(--form-01-card-bg);
  border-radius: var(--form-01-card-border-radius);
  padding: var(--form-01-card-padding);
  box-shadow: var(--form-01-card-shadow);
  border: 1px solid var(--form-01-card-border);
  position: relative;
}

.form-01__form-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: var(--gray-900) !important;
}

/* Styles pour les formulaires HubSpot intégrés */
.hs-form {
  width: 100%;
}

.hs-form .hs-form-field {
  margin-bottom: var(--form-01-field-gap);
}

.hs-form .hs-form-field label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.7rem;
  color: var(--gray-700) !important;
  
}

.hs-form .hs-input {
  width: 100% !important;
  display: block;
  padding: 0.75rem 1rem;
  border: 1px solid var(--gray-300);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.hs-form .hs-input:focus {
  outline: none;
  border-color: var(--primary);
}

.hs-form .hs-button {
  width: 100%;
  margin-top: 0.5rem;
}

/* Variante avec image de fond */
.form-01--with-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.form-01--with-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(var(--form-01-overlay-color), var(--form-01-overlay-opacity));
  backdrop-filter: blur(1px);
  z-index: 1;
}

.form-01--with-bg .container,
.form-01--with-bg .container-full-width {
  position: relative;
  z-index: 2;
}

.form-01--with-bg .form-01__form-card {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

/* Classes utilitaires pour personnaliser l'overlay */
.form-01--overlay-light {
  --form-01-overlay-opacity: 0.4;
  --form-01-overlay-color: 0, 0, 0; /* Noir léger */
}

.form-01--overlay-medium {
  --form-01-overlay-opacity: 0.6;
  --form-01-overlay-color: 0, 0, 0; /* Noir moyen */
}

.form-01--overlay-dark {
  --form-01-overlay-opacity: 0.8;
  --form-01-overlay-color: 0, 0, 0; /* Noir foncé */
}

/* Classes utilitaires pour overlay blanc */
.form-01--overlay-white-light {
  --form-01-overlay-opacity: 0.4;
  --form-01-overlay-color: 255, 255, 255; /* Blanc léger */
}

.form-01--overlay-white-medium {
  --form-01-overlay-opacity: 0.6;
  --form-01-overlay-color: 255, 255, 255; /* Blanc moyen */
}

.form-01--overlay-white-dark {
  --form-01-overlay-opacity: 0.8;
  --form-01-overlay-color: 255, 255, 255; /* Blanc foncé */
}

/* Adaptations pour les variantes de couleur */
/* Note: Les éléments du formulaire (.form-01__form) restent toujours en noir pour toutes les variantes */

/* Variante Primary */
.section--primary .form-01__features-title {
  color: var(--section-text-on-primary);
}

/* Icônes check pour primary: rond secondary, icône primary */
.section--primary .form-01__feature-item .icon {
  background-color: var(--secondary);
  stroke: var(--primary);
}

/* Icônes de contact pour primary: couleur secondary */
.section--primary .form-01__contact-item .icon {
  stroke: var(--secondary);
}

/* Variante Secondary */
.section--secondary .form-01__features-title {
  color: var(--section-text-on-secondary);
}

/* Icônes check pour secondary: rond primary, icône secondary */
.section--secondary .form-01__feature-item .icon {
  background-color: var(--primary);
  stroke: var(--secondary);
}

.section--secondary .form-01__contact-item .icon {
  stroke: var(--primary);
}

/* Variante Tertiary */
.section--tertiary .form-01__features-title {
  color: var(--section-text-on-tertiary);
}

/* Icônes check pour tertiary: rond secondary, icône primary */
.section--tertiary .form-01__feature-item .icon {
  background-color: var(--primary);
  stroke: var(--secondary);
}

/* Icônes de contact pour tertiary: couleur secondary */
.section--tertiary .form-01__contact-item .icon {
  stroke: var(--secondary);
}

/* Variante Dark */
.section--dark .form-01__features-title {
  color: var(--section-text-on-dark);
}

/* Icônes check pour dark: rond primary, icône secondary */
.section--dark .form-01__feature-item .icon {
  background-color: var(--primary);
  stroke: var(--secondary);
}

.section--dark .form-01__contact-item .icon {
  stroke: var(--primary);
}

/* Variante Light */
.section--light .form-01__features-title {
  color: var(--section-text-on-light);
}

/* Icônes check pour light: rond secondary, icône primary */
.section--light .form-01__feature-item .icon {
  background-color: var(--primary);
  stroke: var(--secondary);
}

/* Icônes de contact pour light: couleur secondary */
.section--light .form-01__contact-item .icon {
  stroke: var(--secondary);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .form-01__content {
    gap: var(--form-01-gap-mobile);
  }
  
  .form-01__text {
    padding-right: 0;
  }
}

@media (max-width: 768px) {
  .form-01__content {
    grid-template-columns: 1fr;
    gap: var(--form-01-gap-mobile);
  }
  
  .form-01__form-card {
    padding: var(--form-01-card-padding-mobile);
  }
  
  .form-01__features {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
  
  /* Masquer les versions desktop sur mobile */
  .form-01__contact-info--desktop,
  .form-01__google-maps--desktop {
    display: none;
  }

  /* Afficher les versions mobile */
  .form-01__contact-info--mobile,
  .form-01__google-maps--mobile {
    display: block;
  }

  /* Conteneur mobile pour les infos de contact et carte */
  .form-01__mobile-content {
    margin-top: 2rem;
  }

  .form-01__contact-info--mobile {
    margin-bottom: 2rem;
  }

  .form-01__google-maps--mobile {
    margin-top: 1.5rem;
  }
  
  .form-01__feature-item,
  .form-01__contact-item {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .form-01__form-card {
    padding: 1rem;
  }
  
  .form-01__features {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  
  .form-01__mobile-content {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
  }

  .form-01__contact-info--mobile {
    margin-bottom: 1.5rem;
  }

  .form-01__google-maps--mobile {
    margin-top: 1rem;
  }

  .form-01__map-container {
    min-height: 250px;
  }
  
  .hs-form .hs-form-field {
    margin-bottom: 0.875rem;
  }
}

/* Adaptations spécifiques pour les formulaires HubSpot selon les variantes de couleur */

/* Variante Primary - Adaptation des formulaires */
.section--primary .hs-form .hs-input:focus {
  border-color: var(--secondary);
}

.section--primary .hs-form .hs-button.primary {
  background-color: var(--color-dark);
  border-color: var(--color-dark);
}

.section--primary .hs-form .hs-button.primary:hover {
  background-color: var(--primary);
  border-color: var(--primary);
}

.section--primary .hs-form input[type="checkbox"].hs-input:checked {
  background-color: var(--secondary);
  border-color: var(--secondary);
}

.section--primary .hs-form input[type="radio"].hs-input:checked {
  border-color: var(--secondary);
}

.section--primary .hs-form input[type="radio"].hs-input:checked::before {
  background-color: var(--secondary);
}

/* Variante Secondary - Adaptation des formulaires */
.section--secondary .hs-form .hs-input:focus {
  border-color: var(--primary);
}

.section--secondary .hs-form .hs-button.primary {
  background-color: var(--primary);
  border-color: var(--primary);
}

.section--secondary .hs-form .hs-button.primary:hover {
  background-color: var(--primary-700);
  border-color: var(--primary-700);
}

.section--secondary .hs-form input[type="checkbox"].hs-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}

.section--secondary .hs-form input[type="radio"].hs-input:checked {
  border-color: var(--primary);
}

.section--secondary .hs-form input[type="radio"].hs-input:checked::before {
  background-color: var(--primary);
}

/* Variante Tertiary - Adaptation des formulaires */
.section--tertiary .hs-form .hs-input:focus {
  border-color: var(--secondary);
}

.section--tertiary .hs-form .hs-button.primary {
  background-color: var(--secondary);
  border-color: var(--secondary);
}

.section--tertiary .hs-form .hs-button.primary:hover {
  background-color: var(--secondary-700);
  border-color: var(--secondary-700);
}

.section--tertiary .hs-form input[type="checkbox"].hs-input:checked {
  background-color: var(--secondary);
  border-color: var(--secondary);
}

.section--tertiary .hs-form input[type="radio"].hs-input:checked {
  border-color: var(--secondary);
}

.section--tertiary .hs-form input[type="radio"].hs-input:checked::before {
  background-color: var(--secondary);
}

/* Variante Dark - Adaptation des formulaires */
.section--dark .hs-form .hs-input:focus {
  border-color: var(--primary);
}

.section--dark .hs-form .hs-button.primary {
  background-color: var(--primary);
  border-color: var(--primary);
}

.section--dark .hs-form .hs-button.primary:hover {
  background-color: var(--primary-700);
  border-color: var(--primary-700);
}

.section--dark .hs-form input[type="checkbox"].hs-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}

.section--dark .hs-form input[type="radio"].hs-input:checked {
  border-color: var(--primary);
}

.section--dark .hs-form input[type="radio"].hs-input:checked::before {
  background-color: var(--primary);
}

/* Variante Light - Adaptation des formulaires */
.section--light .hs-form .hs-input:focus {
  border-color: var(--secondary);
}

.section--light .hs-form .hs-button.primary {
  background-color: var(--secondary);
  border-color: var(--secondary);
}

.section--light .hs-form .hs-button.primary:hover {
  background-color: var(--secondary-700);
  border-color: var(--secondary-700);
}

.section--light .hs-form input[type="checkbox"].hs-input:checked {
  background-color: var(--secondary);
  border-color: var(--secondary);
}

.section--light .hs-form input[type="radio"].hs-input:checked {
  border-color: var(--secondary);
}

.section--light .hs-form input[type="radio"].hs-input:checked::before {
  background-color: var(--secondary);
}


.hs-form .hs-error-msgs {
  color: var(--hs-error-color) !important;
}

label.hs-error-msg.hs-main-font-element {
    color: var(--hs-error-color) !important;
}

/* Styles des boutons personnalisables du formulaire */

/* Style Primary - par défaut, suit les couleurs de la section */
.form-01__form.form__btn-btn-primary .hs-form .hs-button.primary {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--black);
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

.form-01__form.form__btn-btn-primary .hs-form .hs-button.primary:hover {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
  transform: translateY(-1px);
}

/* Style Secondary */
.form-01__form.form__btn-btn-secondary .hs-form .hs-button.primary {
  background-color: var(--secondary);
  border-color: var(--secondary);
  color: var(--white);
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

.form-01__form.form__btn-btn-secondary .hs-form .hs-button.primary:hover {
  background-color: var(--secondary-600);
  border-color: var(--secondary-600);
  transform: translateY(-1px);
}

/* Style Outline */
.form-01__form.form__btn-btn-outline .hs-form .hs-button.primary {
  background-color: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

.form-01__form.form__btn-btn-outline .hs-form .hs-button.primary:hover {
  background-color: var(--primary);
  color: var(--white);
  transform: translateY(-1px);
}

/* Style Outline Dark */
.form-01__form.form__btn-btn-outline-dark .hs-form .hs-button.primary {
  background-color: transparent;
  border: 2px solid var(--gray-800);
  color: var(--gray-800);
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

.form-01__form.form__btn-btn-outline-dark .hs-form .hs-button.primary:hover {
  background-color: var(--gray-800);
  color: var(--white);
  transform: translateY(-1px);
}

/* Tailles des boutons */

/* Small */
.form-01__form.form__btn-btn-sm .hs-form .hs-button.primary {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

/* Medium (par défaut) */
.form-01__form.form__btn-btn-md .hs-form .hs-button.primary {
  padding: 0.75rem 1.5rem;
  font-size: 0.9rem;
}

/* Large */
.form-01__form.form__btn-btn-lg .hs-form .hs-button.primary {
  padding: 1rem 2rem;
  font-size: 1rem;
}

/* Adaptations selon le mode de section */

/* Section Primary - ajustements pour bouton outline dans section primary */
.section--primary .form-01__form.form__btn-btn-outline .hs-form .hs-button.primary {
  border-color: var(--primary);
  color: var(--primary);
}

.section--primary .form-01__form.form__btn-btn-outline .hs-form .hs-button.primary:hover {
  background-color: var(--primary);
  color: var(--white);
}

/* Section Secondary - ajustements pour bouton outline dans section secondary */
.section--secondary .form-01__form.form__btn-btn-outline .hs-form .hs-button.primary {
  border-color: var(--secondary);
  color: var(--secondary);
}

.section--secondary .form-01__form.form__btn-btn-outline .hs-form .hs-button.primary:hover {
  background-color: var(--secondary);
  color: var(--white);
}

/* Section Tertiary - ajustements pour bouton outline dans section tertiary */
.section--tertiary .form-01__form.form__btn-btn-outline .hs-form .hs-button.primary {
  border-color: var(--tertiary);
  color: var(--tertiary);
}

.section--tertiary .form-01__form.form__btn-btn-outline .hs-form .hs-button.primary:hover {
  background-color: var(--tertiary);
  color: var(--white);
}

/* Section Dark - ajustements pour les boutons dans section dark */
.section--dark .form-01__form.form__btn-btn-outline .hs-form .hs-button.primary {
  border-color: var(--white);
  color: var(--white);
}

.section--dark .form-01__form.form__btn-btn-outline .hs-form .hs-button.primary:hover {
  background-color: var(--white);
  color: var(--gray-900);
}

.section--dark .form-01__form.form__btn-btn-outline-dark .hs-form .hs-button.primary {
  border-color: var(--gray-300);
  color: var(--gray-300);
}

.section--dark .form-01__form.form__btn-btn-outline-dark .hs-form .hs-button.primary:hover {
  background-color: var(--gray-300);
  color: var(--gray-900);
}

/* Section Light - s'assurer que les boutons foncés sont visibles */
.section--light .form-01__form.form__btn-btn-outline-dark .hs-form .hs-button.primary {
  border-color: var(--gray-800);
  color: var(--gray-800);
}

.section--light .form-01__form.form__btn-btn-outline-dark .hs-form .hs-button.primary:hover {
  background-color: var(--gray-800);
  color: var(--white);
}

/* Focus states pour l'accessibilité */
.form-01__form .hs-form .hs-button.primary:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.form-01__form.form__btn-btn-secondary .hs-form .hs-button.primary:focus {
  outline-color: var(--secondary);
}

.form-01__form.form__btn-btn-outline .hs-form .hs-button.primary:focus,
.form-01__form.form__btn-btn-outline-dark .hs-form .hs-button.primary:focus {
  outline-color: currentColor;
}

/* States disabled pour tous les styles */
.form-01__form .hs-form .hs-button.primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

.form-01__form .hs-form .hs-button.primary:disabled:hover {
  transform: none !important;
}

/* Règles importantes pour remplacer les styles existants */
.form-01__form .hs-form .hs-button.primary {
  border: 2px solid transparent !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  font-family: inherit !important;
  line-height: 1.25 !important;
  cursor: pointer !important;
  transition: all 0.2s ease-in-out !important;
}

/* Override des styles HubSpot par défaut */
.form-01__form .hs-form input[type="submit"].hs-button.primary,
.form-01__form .hs-form button[type="submit"].hs-button.primary {
  width: 100% !important;
  margin-top: 0.5rem !important;
}

/* Spécificité élevée pour les styles personnalisés */

/* Primary avec !important */
.form-01__form.form__btn-btn-primary .hs-form .hs-button.primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--black) !important;
}

.form-01__form.form__btn-btn-primary .hs-form .hs-button.primary:hover {
  background-color: var(--primary-600) !important;
  border-color: var(--primary-600) !important;
}

/* Secondary avec !important */
.form-01__form.form__btn-btn-secondary .hs-form .hs-button.primary {
  background-color: var(--secondary) !important;
  border-color: var(--secondary) !important;
  color: var(--white) !important;
}

.form-01__form.form__btn-btn-secondary .hs-form .hs-button.primary:hover {
  background-color: var(--secondary-600) !important;
  border-color: var(--secondary-600) !important;
}

/* Outline avec !important */
.form-01__form.form__btn-btn-outline .hs-form .hs-button.primary {
  background-color: transparent !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

.form-01__form.form__btn-btn-outline .hs-form .hs-button.primary:hover {
  background-color: var(--primary) !important;
  color: var(--white) !important;
}

/* Outline Dark avec !important */
.form-01__form.form__btn-btn-outline-dark .hs-form .hs-button.primary {
  background-color: transparent !important;
  border-color: var(--gray-800) !important;
  color: var(--gray-800) !important;
}

.form-01__form.form__btn-btn-outline-dark .hs-form .hs-button.primary:hover {
  background-color: var(--gray-800) !important;
  color: var(--white) !important;
}

/* Tailles avec !important */
.form-01__form.form__btn-btn-sm .hs-form .hs-button.primary {
  padding: 0.5rem 1rem !important;
  font-size: 0.875rem !important;
}

.form-01__form.form__btn-btn-md .hs-form .hs-button.primary {
  padding: 0.75rem 1.5rem !important;
  font-size: 0.9rem !important;
}

.form-01__form.form__btn-btn-lg .hs-form .hs-button.primary {
  padding: 1rem 2rem !important;
  font-size: 1rem !important;
}
/*------------------------------------
    Module Formulaire Unique
    Module de formulaire simplifié pour drag & drop
------------------------------------*/

.formulaire-unique {
  padding: 1rem 0;
}

.formulaire-unique .form-01__form-card fieldset {
    max-width: 100% !important;
}

.formulaire-unique__wrapper {
  max-width: 100%;
}

/* Classes utilitaires pour la largeur */
.formulaire-unique__wrapper.w-full {
  width: 100%;
}

.formulaire-unique__wrapper.w-3\/4 {
  width: 75%;
}

.formulaire-unique__wrapper.w-2\/3 {
  width: 66.666667%;
}

.formulaire-unique__wrapper.w-1\/2 {
  max-width: 800px;
}

.formulaire-unique__wrapper.w-1\/3 {
  width: 33.333333%;
}

.formulaire-unique__wrapper.w-1\/4 {
  width: 25%;
}

/* Classes utilitaires pour l'alignement */
.formulaire-unique__wrapper.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.formulaire-unique__wrapper.ml-auto {
  margin-left: auto;
  margin-right: 0;
}

/* Le module réutilise les styles existants de form-01__form-card */
/* définis dans css/components/formulaire/_formulaire-01.css */

/* Responsive pour les petits écrans */
@media (max-width: 768px) {
  .formulaire-unique__wrapper.w-3\/4,
  .formulaire-unique__wrapper.w-2\/3,
  .formulaire-unique__wrapper.w-1\/2,
  .formulaire-unique__wrapper.w-1\/3,
  .formulaire-unique__wrapper.w-1\/4 {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Styles des boutons personnalisables du formulaire */

/* Style Primary - par défaut, suit les couleurs de la section */
.formulaire-unique.form__btn-btn-primary .hs-form .hs-button.primary {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--black);
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

.formulaire-unique.form__btn-btn-primary .hs-form .hs-button.primary:hover {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
  color: var(--white) !important;
  transform: translateY(-1px);
}

/* Style Secondary */
.formulaire-unique.form__btn-btn-secondary .hs-form .hs-button.primary {
  background-color: var(--secondary);
  border-color: var(--secondary);
  color: var(--white);
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

.formulaire-unique.form__btn-btn-secondary .hs-form .hs-button.primary:hover {
  background-color: var(--secondary-600);
  border-color: var(--secondary-600);
  transform: translateY(-1px);
}

/* Style Outline */
.formulaire-unique.form__btn-btn-outline .hs-form .hs-button.primary {
  background-color: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

.formulaire-unique.form__btn-btn-outline .hs-form .hs-button.primary:hover {
  background-color: var(--primary);
  color: var(--white);
  transform: translateY(-1px);
}

/* Style Outline Dark */
.formulaire-unique.form__btn-btn-outline-dark .hs-form .hs-button.primary {
  background-color: transparent;
  border: 2px solid var(--gray-800);
  color: var(--gray-800);
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

.formulaire-unique.form__btn-btn-outline-dark .hs-form .hs-button.primary:hover {
  background-color: var(--gray-800);
  color: var(--white);
  transform: translateY(-1px);
}

/* Tailles des boutons */

/* Small */
.formulaire-unique.form__btn-btn-sm .hs-form .hs-button.primary {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

/* Medium (par défaut) */
.formulaire-unique.form__btn-btn-md .hs-form .hs-button.primary {
  padding: 0.75rem 1.5rem;
  font-size: 0.9rem;
}

/* Large */
.formulaire-unique.form__btn-btn-lg .hs-form .hs-button.primary {
  padding: 1rem 2rem;
  font-size: 1rem;
}

/* Adaptations selon le mode de section */

/* Section Primary - ajustements pour bouton outline dans section primary */
.section--primary .formulaire-unique.form__btn-btn-outline .hs-form .hs-button.primary {
  border-color: var(--primary);
  color: var(--primary);
}

.section--primary .formulaire-unique.form__btn-btn-outline .hs-form .hs-button.primary:hover {
  background-color: var(--primary);
  color: var(--white);
}

/* Section Secondary - ajustements pour bouton outline dans section secondary */
.section--secondary .formulaire-unique.form__btn-btn-outline .hs-form .hs-button.primary {
  border-color: var(--secondary);
  color: var(--secondary);
}

.section--secondary .formulaire-unique.form__btn-btn-outline .hs-form .hs-button.primary:hover {
  background-color: var(--secondary);
  color: var(--white);
}

/* Section Tertiary - ajustements pour bouton outline dans section tertiary */
.section--tertiary .formulaire-unique.form__btn-btn-outline .hs-form .hs-button.primary {
  border-color: var(--tertiary);
  color: var(--tertiary);
}

.section--tertiary .formulaire-unique.form__btn-btn-outline .hs-form .hs-button.primary:hover {
  background-color: var(--tertiary);
  color: var(--white);
}

/* Section Dark - ajustements pour les boutons dans section dark */
.section--dark .formulaire-unique.form__btn-btn-outline .hs-form .hs-button.primary {
  border-color: var(--white);
  color: var(--white);
}

.section--dark .formulaire-unique.form__btn-btn-outline .hs-form .hs-button.primary:hover {
  background-color: var(--white);
  color: var(--gray-900);
}

.section--dark .formulaire-unique.form__btn-btn-outline-dark .hs-form .hs-button.primary {
  border-color: var(--gray-300);
  color: var(--gray-300);
}

.section--dark .formulaire-unique.form__btn-btn-outline-dark .hs-form .hs-button.primary:hover {
  background-color: var(--gray-300);
  color: var(--gray-900);
}

/* Section Light - s'assurer que les boutons foncés sont visibles */
.section--light .formulaire-unique.form__btn-btn-outline-dark .hs-form .hs-button.primary {
  border-color: var(--gray-800);
  color: var(--gray-800);
}

.section--light .formulaire-unique.form__btn-btn-outline-dark .hs-form .hs-button.primary:hover {
  background-color: var(--gray-800);
  color: var(--white);
}

/* Focus states pour l'accessibilité */
.formulaire-unique .hs-form .hs-button.primary:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.formulaire-unique.form__btn-btn-secondary .hs-form .hs-button.primary:focus {
  outline-color: var(--secondary);
}

.formulaire-unique.form__btn-btn-outline .hs-form .hs-button.primary:focus,
.formulaire-unique.form__btn-btn-outline-dark .hs-form .hs-button.primary:focus {
  outline-color: currentColor;
}

/* States disabled pour tous les styles */
.formulaire-unique .hs-form .hs-button.primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

.formulaire-unique .hs-form .hs-button.primary:disabled:hover {
  transform: none !important;
}

/* Règles importantes pour remplacer les styles existants */
.formulaire-unique .hs-form .hs-button.primary {
  border: 2px solid transparent !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  font-family: inherit !important;
  line-height: 1.25 !important;
  cursor: pointer !important;
  transition: all 0.2s ease-in-out !important;
}

/* Override des styles HubSpot par défaut */
.formulaire-unique .hs-form input[type="submit"].hs-button.primary,
.formulaire-unique .hs-form button[type="submit"].hs-button.primary {
  width: 100% !important;
  margin-top: 0.5rem !important;
}

/* Spécificité élevée pour les styles personnalisés */

/* Primary avec !important */
.formulaire-unique.form__btn-btn-primary .hs-form .hs-button.primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--black) !important;
}

.formulaire-unique.form__btn-btn-primary .hs-form .hs-button.primary:hover {
  background-color: var(--primary-600) !important;
  border-color: var(--primary-600) !important;
  color: var(--white) !important;
}

/* Secondary avec !important */
.formulaire-unique.form__btn-btn-secondary .hs-form .hs-button.primary {
  background-color: var(--secondary) !important;
  border-color: var(--secondary) !important;
  color: var(--white) !important;
}

.formulaire-unique.form__btn-btn-secondary .hs-form .hs-button.primary:hover {
  background-color: var(--secondary-600) !important;
  border-color: var(--secondary-600) !important;
}

/* Outline avec !important */
.formulaire-unique.form__btn-btn-outline .hs-form .hs-button.primary {
  background-color: transparent !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

.formulaire-unique.form__btn-btn-outline .hs-form .hs-button.primary:hover {
  background-color: var(--primary) !important;
  color: var(--white) !important;
}

/* Outline Dark avec !important */
.formulaire-unique.form__btn-btn-outline-dark .hs-form .hs-button.primary {
  background-color: transparent !important;
  border-color: var(--gray-800) !important;
  color: var(--gray-800) !important;
}

.formulaire-unique.form__btn-btn-outline-dark .hs-form .hs-button.primary:hover {
  background-color: var(--gray-800) !important;
  color: var(--white) !important;
}

/* Tailles avec !important */
.formulaire-unique.form__btn-btn-sm .hs-form .hs-button.primary {
  padding: 0.5rem 1rem !important;
  font-size: 0.875rem !important;
}

.formulaire-unique.form__btn-btn-md .hs-form .hs-button.primary {
  padding: 0.75rem 1.5rem !important;
  font-size: 0.9rem !important;
}

.formulaire-unique.form__btn-btn-lg .hs-form .hs-button.primary {
  padding: 1rem 2rem !important;
  font-size: 1rem !important;
}
/*------------------------------------
    Module Form 02
    Module de formulaire en disposition verticale avec sur-titre, titre, description et formulaire
------------------------------------*/

/* Variables spécifiques au module Form 02 */
:root {
  --form-02-header-gap: 1.5rem;
  --form-02-content-gap: 3rem;
  --form-02-content-gap-mobile: 2rem;
}

/* Structure de base du module */
.form-02 {
  position: relative;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.form-02__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--form-02-content-gap);
}

/* Section header (sur-titre, titre, description) */
.form-02__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--form-02-header-gap);
  max-width: 700px;
  margin: 0 auto;
}

.form-02__header .section__overtitle {
  order: 1;
}

.form-02__header .section__title {
  order: 2;
  margin: 0;
}

.form-02__header .section__description {
  order: 3;
  margin: 0;
}

.section--dark .section__description
.section--dark .section__description p,
.section--dark .section__description li,
.section--secondary .section__description,
.section--secondary .section__description p,
.section--secondary .section__description li {
    color: rgba(255, 255, 255, 0.7);
}

/* Section formulaire */
.form-02__form {
  width: 100%;
  display: flex;
  justify-content: center;
}

.form-02__form-wrapper {
  width: 100%;
  max-width: 100%;
}

/* Classes utilitaires pour la largeur du formulaire */
.form-02__form-wrapper.w-full {
  width: 100%;
}

.form-02__form-wrapper.w-3\/4 {
  width: 75%;
}

.form-02__form-wrapper.w-2\/3 {
  width: 66.666667%;
}

.form-02__form-wrapper.w-1\/2 {
  width: 50%;
}

.form-02__form-wrapper.w-1\/3 {
  width: 33.333333%;
}

/* Le module réutilise les styles existants de form-01__form-card */
/* définis dans css/components/formulaire/_formulaire-01.css */

/* Variante avec image de fond */
.form-02--with-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.form-02--with-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(var(--form-01-overlay-color), var(--form-01-overlay-opacity));
  backdrop-filter: blur(1px);
  z-index: 1;
}

.form-02--with-bg .container,
.form-02--with-bg .container-full-width {
  position: relative;
  z-index: 2;
}

.form-02--with-bg .form-01__form-card {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

/* Classes utilitaires pour personnaliser l'overlay */
.form-02--overlay-light {
  --form-01-overlay-opacity: 0.3;
  --form-01-overlay-color: 0, 0, 0;
}

.form-02--overlay-medium {
  --form-01-overlay-opacity: 0.5;
  --form-01-overlay-color: 0, 0, 0;
}

.form-02--overlay-dark {
  --form-01-overlay-opacity: 0.75;
  --form-01-overlay-color: 0, 0, 0;
}

.form-02--overlay-white-light {
  --form-01-overlay-opacity: 0.3;
  --form-01-overlay-color: 255, 255, 255;
}

.form-02--overlay-white-medium {
  --form-01-overlay-opacity: 0.5;
  --form-01-overlay-color: 255, 255, 255;
}

.form-02--overlay-white-dark {
  --form-01-overlay-opacity: 0.75;
  --form-01-overlay-color: 255, 255, 255;
}

/* Responsive design */
@media (max-width: 1024px) {
  .form-02__content {
    gap: var(--form-02-content-gap-mobile);
  }
  
  .form-02__form-wrapper.w-3\/4,
  .form-02__form-wrapper.w-2\/3,
  .form-02__form-wrapper.w-1\/2,
  .form-02__form-wrapper.w-1\/3 {
    width: 90%;
  }
}

@media (max-width: 768px) {
  .form-02 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  
  .form-02__content {
    gap: 2rem;
  }
  
  .form-02__header {
    gap: 1rem;
  }
  
  .form-02__form-wrapper.w-3\/4,
  .form-02__form-wrapper.w-2\/3,
  .form-02__form-wrapper.w-1\/2,
  .form-02__form-wrapper.w-1\/3 {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .form-02 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  
  .form-02__content {
    gap: 1.5rem;
  }
}

/* Styles des boutons personnalisables du formulaire */

/* Style Primary - par défaut, suit les couleurs de la section */
.form-02__form.form__btn-btn-primary .hs-form .hs-button.primary {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--white);
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

.form-02__form.form__btn-btn-primary .hs-form .hs-button.primary:hover {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
  transform: translateY(-1px);
}

/* Style Secondary */
.form-02__form.form__btn-btn-secondary .hs-form .hs-button.primary {
  background-color: var(--secondary);
  border-color: var(--secondary);
  color: var(--white);
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

.form-02__form.form__btn-btn-secondary .hs-form .hs-button.primary:hover {
  background-color: var(--secondary-600);
  border-color: var(--secondary-600);
  transform: translateY(-1px);
}

/* Style Outline */
.form-02__form.form__btn-btn-outline .hs-form .hs-button.primary {
  background-color: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

.form-02__form.form__btn-btn-outline .hs-form .hs-button.primary:hover {
  background-color: var(--primary);
  color: var(--white);
  transform: translateY(-1px);
}

/* Style Outline Dark */
.form-02__form.form__btn-btn-outline-dark .hs-form .hs-button.primary {
  background-color: transparent;
  border: 2px solid var(--gray-800);
  color: var(--gray-800);
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

.form-02__form.form__btn-btn-outline-dark .hs-form .hs-button.primary:hover {
  background-color: var(--gray-800);
  color: var(--white);
  transform: translateY(-1px);
}

/* Tailles des boutons */

/* Small */
.form-02__form.form__btn-btn-sm .hs-form .hs-button.primary {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

/* Medium (par défaut) */
.form-02__form.form__btn-btn-md .hs-form .hs-button.primary {
  padding: 0.75rem 1.5rem;
  font-size: 0.9rem;
}

/* Large */
.form-02__form.form__btn-btn-lg .hs-form .hs-button.primary {
  padding: 1rem 2rem;
  font-size: 1rem;
}

/* Adaptations selon le mode de section */

/* Section Primary - ajustements pour bouton outline dans section primary */
.section--primary .form-02__form.form__btn-btn-outline .hs-form .hs-button.primary {
  border-color: var(--primary);
  color: var(--primary);
}

.section--primary .form-02__form.form__btn-btn-outline .hs-form .hs-button.primary:hover {
  background-color: var(--primary);
  color: var(--white);
}

/* Section Secondary - ajustements pour bouton outline dans section secondary */
.section--secondary .form-02__form.form__btn-btn-outline .hs-form .hs-button.primary {
  border-color: var(--secondary);
  color: var(--secondary);
}

.section--secondary .form-02__form.form__btn-btn-outline .hs-form .hs-button.primary:hover {
  background-color: var(--secondary);
  color: var(--white);
}

/* Section Tertiary - ajustements pour bouton outline dans section tertiary */
.section--tertiary .form-02__form.form__btn-btn-outline .hs-form .hs-button.primary {
  border-color: var(--tertiary);
  color: var(--tertiary);
}

.section--tertiary .form-02__form.form__btn-btn-outline .hs-form .hs-button.primary:hover {
  background-color: var(--tertiary);
  color: var(--white);
}

/* Section Dark - ajustements pour les boutons dans section dark */
.section--dark .form-02__form.form__btn-btn-outline .hs-form .hs-button.primary {
  border-color: var(--white);
  color: var(--white);
}

.section--dark .form-02__form.form__btn-btn-outline .hs-form .hs-button.primary:hover {
  background-color: var(--white);
  color: var(--gray-900);
}

.section--dark .form-02__form.form__btn-btn-outline-dark .hs-form .hs-button.primary {
  border-color: var(--gray-300);
  color: var(--gray-300);
}

.section--dark .form-02__form.form__btn-btn-outline-dark .hs-form .hs-button.primary:hover {
  background-color: var(--gray-300);
  color: var(--gray-900);
}

/* Section Light - s'assurer que les boutons foncés sont visibles */
.section--light .form-02__form.form__btn-btn-outline-dark .hs-form .hs-button.primary {
  border-color: var(--gray-800);
  color: var(--gray-800);
}

.section--light .form-02__form.form__btn-btn-outline-dark .hs-form .hs-button.primary:hover {
  background-color: var(--gray-800);
  color: var(--white);
}

/* Focus states pour l'accessibilité */
.form-02__form .hs-form .hs-button.primary:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.form-02__form.form__btn-btn-secondary .hs-form .hs-button.primary:focus {
  outline-color: var(--secondary);
}

.form-02__form.form__btn-btn-outline .hs-form .hs-button.primary:focus,
.form-02__form.form__btn-btn-outline-dark .hs-form .hs-button.primary:focus {
  outline-color: currentColor;
}

/* States disabled pour tous les styles */
.form-02__form .hs-form .hs-button.primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

.form-02__form .hs-form .hs-button.primary:disabled:hover {
  transform: none !important;
}

/* Règles importantes pour remplacer les styles existants */
.form-02__form .hs-form .hs-button.primary {
  border: 2px solid transparent !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  font-family: inherit !important;
  line-height: 1.25 !important;
  cursor: pointer !important;
  transition: all 0.2s ease-in-out !important;
}

/* Override des styles HubSpot par défaut */
.form-02__form .hs-form input[type="submit"].hs-button.primary,
.form-02__form .hs-form button[type="submit"].hs-button.primary {
  width: 100% !important;
  margin-top: 0.5rem !important;
}

/* Spécificité élevée pour les styles personnalisés */

/* Primary avec !important */
.form-02__form.form__btn-btn-primary .hs-form .hs-button.primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--white) !important;
}

.form-02__form.form__btn-btn-primary .hs-form .hs-button.primary:hover {
  background-color: var(--primary-600) !important;
  border-color: var(--primary-600) !important;
}

/* Secondary avec !important */
.form-02__form.form__btn-btn-secondary .hs-form .hs-button.primary {
  background-color: var(--secondary) !important;
  border-color: var(--secondary) !important;
  color: var(--white) !important;
}

.form-02__form.form__btn-btn-secondary .hs-form .hs-button.primary:hover {
  background-color: var(--secondary-600) !important;
  border-color: var(--secondary-600) !important;
}

/* Outline avec !important */
.form-02__form.form__btn-btn-outline .hs-form .hs-button.primary {
  background-color: transparent !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

.form-02__form.form__btn-btn-outline .hs-form .hs-button.primary:hover {
  background-color: var(--primary) !important;
  color: var(--white) !important;
}

/* Outline Dark avec !important */
.form-02__form.form__btn-btn-outline-dark .hs-form .hs-button.primary {
  background-color: transparent !important;
  border-color: var(--gray-800) !important;
  color: var(--gray-800) !important;
}

.form-02__form.form__btn-btn-outline-dark .hs-form .hs-button.primary:hover {
  background-color: var(--gray-800) !important;
  color: var(--white) !important;
}

/* Tailles avec !important */
.form-02__form.form__btn-btn-sm .hs-form .hs-button.primary {
  padding: 0.5rem 1rem !important;
  font-size: 0.875rem !important;
}

.form-02__form.form__btn-btn-md .hs-form .hs-button.primary {
  padding: 0.75rem 1.5rem !important;
  font-size: 0.9rem !important;
}

.form-02__form.form__btn-btn-lg .hs-form .hs-button.primary {
  padding: 1rem 2rem !important;
  font-size: 1rem !important;
}
/**
 * Formulaire Typeform Component
 * Module pour intégrer des formulaires Typeform avec optimisations responsive
 */

/* =================================
   STRUCTURE DE BASE
   ================================= */

.formulaire-typeform {
  position: relative;
  padding: 0;
}

.formulaire-typeform__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* =================================
   EN-TÊTE DU MODULE
   ================================= */

.formulaire-typeform__header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* Titre */
.formulaire-typeform__title {
  font-size: 2.5rem; /* 40px */
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-headings-default);
  margin: 0;
  letter-spacing: -0.02em;
}

/* Description */
.formulaire-typeform__description {
  font-size: 1.125rem; /* 18px */
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
  max-width: 600px;
}

/* Alignement centré */
.align-center .formulaire-typeform__header {
  text-align: center;
  align-items: center;
}

.align-center .formulaire-typeform__description {
  margin: 0 auto;
}

/* Alignement à droite */
.align-right .formulaire-typeform__header {
  text-align: right;
  align-items: flex-end;
}

.align-right .formulaire-typeform__description {
  margin-left: auto;
}

/* =================================
   CONTENEUR TYPEFORM
   ================================= */

.formulaire-typeform__container {
  position: relative;
  width: 100%;
  background: transparent;
  overflow: hidden;
}

/* Version avec bordure arrondie */
.formulaire-typeform__container--rounded {
  border-radius: 20px;
  border: 1px solid #25282A;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* =================================
   EMBED TYPEFORM
   ================================= */

.formulaire-typeform__embed {
  width: 100%;
  position: relative;
  background: transparent;
}

/* Optimisations pour l'iframe Typeform */
.formulaire-typeform__embed [data-tf-widget] {
  width: 100% !important;
  height: 100% !important;
}

.formulaire-typeform__embed iframe,
.tf-v1-widget iframe {
  width: 100% !important;
  border: none !important;
  background: transparent !important;
  transition: opacity 0.3s ease;
}

/* Hauteur minimale responsive */
.formulaire-typeform__embed {
  min-height: 1000px;
}

/* Loading state */
.formulaire-typeform__embed::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, #f0f0f0 25%, transparent 37%, #f0f0f0 63%);
  background-size: 400% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  z-index: 1;
  pointer-events: none;
}

.formulaire-typeform__embed iframe {
  position: relative;
  z-index: 2;
}

@keyframes shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

/* Masquer le shimmer quand l'iframe est chargée */
.formulaire-typeform__embed iframe[src] + ::before {
  display: none;
}

/* =================================
   VARIATIONS DE COULEURS
   ================================= */

/* Mode Light (par défaut) */
.section--light .formulaire-typeform__title {
  color: var(--color-text-default);
}

.section--light .formulaire-typeform__description {
  color: var(--color-text-muted);
}

.section--light .formulaire-typeform__container--rounded {
  background: #ffffff;
  border-color: #25282A;
}

/* Mode Dark */
.section--dark .formulaire-typeform__title {
  color: var(--color-text-inverted);
}

.section--dark .formulaire-typeform__description {
  color: var(--color-text-inverted);
  opacity: 0.8;
}

.section--dark .formulaire-typeform__container--rounded {
  background: var(--gray-900);
  border-color: var(--gray-700);
}

/* Mode Primary */
.section--primary .formulaire-typeform__title {
  color: var(--color-text-default);
}

.section--primary .formulaire-typeform__description {
  color: var(--color-text-muted);
}

.section--primary .formulaire-typeform__container--rounded {
  background: #ffffff;
  border-color: var(--primary-300);
}

/* Mode Secondary */
.section--secondary .formulaire-typeform__title {
  color: var(--color-text-inverted);
}

.section--secondary .formulaire-typeform__description {
  color: var(--color-text-inverted);
  opacity: 0.8;
}

.section--secondary .formulaire-typeform__container--rounded {
  background: var(--gray-800);
  border-color: var(--secondary-400);
}

/* Mode Tertiary */
.section--tertiary .formulaire-typeform__title {
  color: var(--color-text-inverted);
}

.section--tertiary .formulaire-typeform__description {
  color: var(--color-text-inverted);
  opacity: 0.8;
}

.section--tertiary .formulaire-typeform__container--rounded {
  background: rgba(255, 255, 255, 0.95);
  border-color: #25282A;
}

/* =================================
   RESPONSIVE
   ================================= */

/* Tablettes */
@media (max-width: 1024px) {
  .formulaire-typeform__inner {
    gap: 1.5rem;
  }
  
  .formulaire-typeform__title {
    font-size: 2.25rem; /* 36px */
  }
  
  .formulaire-typeform__embed {
    min-height: 900px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .formulaire-typeform {
    padding: 4rem 0;
  }
  
  .formulaire-typeform__inner {
    gap: 1.5rem;
  }
  
  .formulaire-typeform__title {
    font-size: 2rem; /* 32px */
  }
  
  .formulaire-typeform__description {
    font-size: 1rem; /* 16px */
  }
  
  .formulaire-typeform__embed {
    min-height: 800px;
  }
  
  /* Correction pour mobile - affichage forcé */
  .page-dnd_partial-8-column-4-hidden {
    display: block !important;
  }
  
  /* Optimisations iframe mobile */
  .formulaire-typeform__embed iframe,
  .tf-v1-widget iframe {
    min-height: 800px !important;
  }
}

/* Petit mobile */
@media (max-width: 480px) {
  .formulaire-typeform {
    padding: 3rem 0;
  }
  
  .formulaire-typeform__title {
    font-size: 1.75rem; /* 28px */
  }
  
  .formulaire-typeform__embed {
    min-height: 700px;
  }
  
  .formulaire-typeform__embed iframe,
  .tf-v1-widget iframe {
    min-height: 700px !important;
  }
  
  .formulaire-typeform__container--rounded {
    border-radius: 16px;
    margin: 0 -1rem;
  }
}

/* =================================
   AMÉLIORATIONS UX
   ================================= */

/* Smooth scroll pour les formulaires longs */
.formulaire-typeform__embed {
  scroll-behavior: smooth;
}

/* Focus states améliorés */
.formulaire-typeform__embed:focus-within {
  outline: 2px solid var(--primary, #BEF264);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Optimisation performance */
.formulaire-typeform__embed iframe {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Prévention des bugs visuels */
.formulaire-typeform__container {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Gestion du chargement */
.formulaire-typeform__embed[data-tf-loaded="true"]::before {
  opacity: 0;
  visibility: hidden;
}

/* Features */
/**
 * Liste Mise en Avant Component
 * Module de liste avec effets de survol personnalisés
 */

/* =================================
   STRUCTURE DE BASE
   ================================= */

.liste-mise-en-avant {
  position: relative;
  padding: 5rem 0;
}

.liste-mise-en-avant__inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

/* =================================
   EN-TÊTE DU MODULE
   ================================= */

.liste-mise-en-avant__header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Alignement centré */
.align-center .liste-mise-en-avant__header {
  text-align: center;
  align-items: center;
}

.align-center .liste-mise-en-avant__list {
  align-items: center;
}

.align-center .liste-mise-en-avant__item {
  justify-content: center;
  max-width: 800px;
  margin: 0 auto;
}

/* Alignement à droite */
.align-right .liste-mise-en-avant__header {
  text-align: right;
  align-items: flex-end;
}

.align-right .liste-mise-en-avant__list {
  align-items: flex-end;
}

.align-right .liste-mise-en-avant__item {
  justify-content: flex-end;
  max-width: 800px;
  margin-left: auto;
}

/* Sur-titre */
.liste-mise-en-avant__overtitle {
  font-size: 0.875rem; /* 14px */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary, #BEF264);
  margin-bottom: 0.5rem;
}

/* Titre principal */
.liste-mise-en-avant__title {
  font-size: 2.5rem; /* 40px */
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-headings-default);
  margin: 0;
  letter-spacing: -0.02em;
}

/* Sous-titre */
.liste-mise-en-avant__subtitle {
  font-size: 1.125rem; /* 18px */
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
  max-width: 600px;
}

/* =================================
   LISTE DES ÉLÉMENTS
   ================================= */

.liste-mise-en-avant__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Item de liste */
.liste-mise-en-avant__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.liste-mise-en-avant__item:last-child {
  border-bottom: none;
}

/* Trait décoratif */
.liste-mise-en-avant__line {
  width: 80px;
  height: 5px;
  background-color: var(--color-text-default);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  flex-shrink: 0;
  border-radius: 2px;
}

/* Texte de l'élément */
.liste-mise-en-avant__text {
  font-size: 1.75rem; /* 28px */
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text-default);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  flex: 1;
}

/* =================================
   EFFETS DE SURVOL
   ================================= */

.liste-mise-en-avant__item:hover .liste-mise-en-avant__line {
  width: 150px;
  background-color: var(--hover-color);
  transform: scaleY(1.1);
}

.liste-mise-en-avant__item:hover .liste-mise-en-avant__text {
  color: var(--hover-color);
  transform: translateX(10px);
}

.liste-mise-en-avant__item:hover {
  padding-left: 1rem;
}

/* =================================
   VARIATIONS DE COULEURS
   ================================= */

/* Mode Light (par défaut) */
.section--light .liste-mise-en-avant__title {
  color: var(--color-text-default);
}

.section--light .liste-mise-en-avant__subtitle {
  color: var(--color-text-muted);
}

.section--light .liste-mise-en-avant__text {
  color: var(--color-text-default);
}

.section--light .liste-mise-en-avant__line {
  background-color: var(--color-text-default);
}

.section--light .liste-mise-en-avant__item {
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

/* Mode Dark */
.section--dark .liste-mise-en-avant__title {
  color: var(--color-text-inverted);
}

.section--dark .liste-mise-en-avant__subtitle {
  color: var(--color-text-inverted);
  opacity: 0.8;
}

.section--dark .liste-mise-en-avant__text {
  color: var(--color-text-inverted);
}

.section--dark .liste-mise-en-avant__line {
  background-color: var(--color-text-inverted);
}

.section--dark .liste-mise-en-avant__item {
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

/* Mode Primary */
.section--primary .liste-mise-en-avant__title {
  color: var(--color-text-default);
}

.section--primary .liste-mise-en-avant__subtitle {
  color: var(--color-text-muted);
}

.section--primary .liste-mise-en-avant__text {
  color: var(--color-text-default);
}

.section--primary .liste-mise-en-avant__line {
  background-color: var(--color-text-default);
}

.section--primary .liste-mise-en-avant__item {
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

/* Mode Secondary */
.section--secondary .liste-mise-en-avant__title {
  color: var(--color-text-inverted);
}

.section--secondary .liste-mise-en-avant__subtitle {
  color: var(--color-text-inverted);
  opacity: 0.8;
}

.section--secondary .liste-mise-en-avant__text {
  color: var(--color-text-inverted);
}

.section--secondary .liste-mise-en-avant__line {
  background-color: var(--color-text-inverted);
}

.section--secondary .liste-mise-en-avant__item {
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

/* Mode Tertiary */
.section--tertiary .liste-mise-en-avant__title {
  color: var(--color-text-inverted);
}

.section--tertiary .liste-mise-en-avant__subtitle {
  color: var(--color-text-inverted);
  opacity: 0.8;
}

.section--tertiary .liste-mise-en-avant__text {
  color: var(--color-text-inverted);
}

.section--tertiary .liste-mise-en-avant__line {
  background-color: var(--color-text-inverted);
}

.section--tertiary .liste-mise-en-avant__item {
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

/* =================================
   SECTION FLÈCHE
   ================================= */

.liste-mise-en-avant__arrow-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0; /* Gap supprimé */
  margin-top: 3rem;
}

/* Icône flèche avec animation */
.liste-mise-en-avant__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background-color: #25282A;
  border: 1px solid var(--color-white, #ffffff);
  border-radius: 50%;
  animation: arrowBounce 2s ease-in-out infinite;
  transition: all 0.3s ease;
  z-index: 100;
}

.liste-mise-en-avant__arrow svg.scroll-arrow {
  color: #ffffff;
  width: 24px;
  height: 24px;
}

/* Animation de montée-descente */
@keyframes arrowBounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-8px);
  }
  60% {
    transform: translateY(-4px);
  }
}

/* Hover sur l'icône */
.liste-mise-en-avant__arrow:hover {
  background-color: var(--primary, #F7EA48);
  transform: scale(1.1);
  animation-play-state: paused;
}

.liste-mise-en-avant__arrow:hover svg.scroll-arrow {
  color: #25282A;
}

/* Texte sous la flèche */
.liste-mise-en-avant__arrow-text {
  max-width: 800px;
  text-align: center;
  font-size: 1.8rem;
  line-height: 1.6;
  color: var(--color-text-default);
  background-color: #25282A;
  color: #ffffff;
  padding: 2rem 2.5rem;
  border-radius: 12px;
  position: relative;
  top: -25px; /* Faire remonter le bloc */
}

/* Mise en surbrillance pour "accélérer leur croissance" */
.liste-mise-en-avant__arrow-text .highlight {
  color: var(--primary, #F7EA48);
  padding: 2px 4px;
  border-bottom: 1px solid var(--primary, #F7EA48);
  border-radius: 3px;
  font-weight: 500;
}

/* Alignement centré */
.align-center .liste-mise-en-avant__arrow-section {
  align-items: center;
}

.align-center .liste-mise-en-avant__arrow-text {
  text-align: center;
}

/* Alignement à gauche */
.align-left .liste-mise-en-avant__arrow-section {
  align-items: flex-start;
}

.align-left .liste-mise-en-avant__arrow-text {
  text-align: left;
}

.align-left .liste-mise-en-avant__arrow-text::before {
  left: 60px;
}

/* Alignement à droite */
.align-right .liste-mise-en-avant__arrow-section {
  align-items: flex-end;
}

.align-right .liste-mise-en-avant__arrow-text {
  text-align: right;
}

.align-right .liste-mise-en-avant__arrow-text::before {
  left: calc(100% - 60px);
}

/* Variations de couleurs pour la section flèche */
.section--light .liste-mise-en-avant__arrow {
  background-color: #25282A;
}

.section--light .liste-mise-en-avant__arrow i {
  color: #ffffff;
}

.section--light .liste-mise-en-avant__arrow-text {
  background-color: #25282A;
  color: #ffffff;
}

.section--light .liste-mise-en-avant__arrow-text::before {
  border-bottom-color: #25282A;
}

.section--dark .liste-mise-en-avant__arrow {
  background-color: #ffffff;
}

.section--dark .liste-mise-en-avant__arrow i {
  color: #25282A;
}

.section--dark .liste-mise-en-avant__arrow-text {
  background-color: #ffffff;
  color: #25282A;
}

.section--dark .liste-mise-en-avant__arrow-text::before {
  border-bottom-color: #ffffff;
}

.section--primary .liste-mise-en-avant__arrow {
  background-color: var(--primary, #F7EA48);
}

.section--primary .liste-mise-en-avant__arrow i {
  color: #25282A;
}

.section--secondary .liste-mise-en-avant__arrow {
  background-color: var(--secondary, #25282A);
}

.section--secondary .liste-mise-en-avant__arrow i {
  color: #ffffff;
}

.section--tertiary .liste-mise-en-avant__arrow {
  background-color: var(--tertiary, #25282A);
}

.section--tertiary .liste-mise-en-avant__arrow i {
  color: #ffffff;
}

/* =================================
   RESPONSIVE
   ================================= */

/* Tablettes */
@media (max-width: 1024px) {
  .liste-mise-en-avant__inner {
    max-width: 90%;
    gap: 2.5rem;
  }
  
  .liste-mise-en-avant__title {
    font-size: 2.25rem; /* 36px */
  }
  
  .liste-mise-en-avant__text {
    font-size: 1.5rem; /* 24px */
  }
}

/* Mobile */
@media (max-width: 768px) {
  .liste-mise-en-avant {
    padding: 4rem 0;
  }
  
  .liste-mise-en-avant__inner {
    gap: 2rem;
  }
  
  .liste-mise-en-avant__title {
    font-size: 2rem; /* 32px */
  }
  
  .liste-mise-en-avant__text {
    font-size: 1.375rem; /* 22px */
  }
  
  .liste-mise-en-avant__item {
    gap: 1.5rem;
    padding: 1.25rem 0;
  }
  
  .liste-mise-en-avant__line {
    width: 60px;
    height: 4px;
  }
  
  .liste-mise-en-avant__item:hover .liste-mise-en-avant__line {
    width: 120px;
  }
  
  .liste-mise-en-avant__item:hover .liste-mise-en-avant__text {
    transform: translateX(5px);
  }
  
  .liste-mise-en-avant__item:hover {
    padding-left: 0.5rem;
  }
  
  /* Section flèche responsive - Tablette */
  .liste-mise-en-avant__arrow-section {
    gap: 0; /* Gap maintenu à 0 */
    margin-top: 2.5rem;
  }
  
  .liste-mise-en-avant__arrow-text {
    font-size: 1.125rem; /* 18px - légèrement agrandi */
    padding: 1.75rem 2rem;
    max-width: 85%;
    top: -20px; /* Ajustement pour tablette */
  }
}

/* Petit mobile */
@media (max-width: 480px) {
  .liste-mise-en-avant {
    padding: 3rem 0;
  }
  
  .liste-mise-en-avant__title {
    font-size: 1.75rem; /* 28px */
  }
  
  .liste-mise-en-avant__text {
    font-size: 1.25rem; /* 20px */
  }
  
  .liste-mise-en-avant__item {
    gap: 1rem;
    padding: 1rem 0;
  }
  
  .liste-mise-en-avant__line {
    width: 50px;
    height: 3px;
  }
  
  .liste-mise-en-avant__item:hover .liste-mise-en-avant__line {
    width: 100px;
  }
  
  /* Section flèche responsive - Mobile */
  .liste-mise-en-avant__arrow-section {
    gap: 0; /* Gap maintenu à 0 */
    margin-top: 2rem;
  }
  
  .liste-mise-en-avant__arrow {
    width: 45px;
    height: 45px;
  }
  
  .liste-mise-en-avant__arrow i {
    width: 18px;
    height: 18px;
  }
  
  .liste-mise-en-avant__arrow-text {
    font-size: 1rem; /* 16px - agrandi pour mobile */
    padding: 1.25rem 1.5rem;
    max-width: 95%;
    top: -15px; /* Ajustement pour mobile */
  }
}

/* Links List Section */
/*------------------------------------
    Links List Section Component
------------------------------------*/

:root {
  --links-list-section-padding: 5rem 0;
  --links-list-header-gap: 1.5rem;
  --links-list-links-gap: 1rem;
  --links-list-link-padding: 2rem;
  --links-list-link-radius: 30px;
  --links-list-transition: all 0.3s ease;
  --links-list-icon-size: 24px;
}

/* Section de base */
.links-list-section {
  padding: var(--links-list-section-padding);
}

/* Header de la section */
.links-list-section__header {
  display: flex;
  flex-direction: column;
  gap: var(--links-list-header-gap);
  margin-bottom: 3rem;
}

/* Surtitre */
.links-list-section__header .section__overtitle {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary);
  margin: 0;
}

.section--secondary .links-list-section__header .section__overtitle,
.section--dark .links-list-section__header .section__overtitle {
  color: var(--primary);
}

.section--tertiary .links-list-section__header .section__overtitle {
  color: var(--tertiary-600);
}

/* Titre principal */
.links-list-section__titre {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--gray-900);
  margin: 0;
}

.section--secondary .links-list-section__titre,
.section--dark .links-list-section__titre {
  color: var(--white);
}

.section--tertiary .links-list-section__titre {
  color: var(--gray-900);
}

/* Sous-titre */
.links-list-section__sous-titre {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--gray-600);
  max-width: 600px;
}

/* Gestion de l'alignement du sous-titre via l'héritage naturel du text-align */
.links-list-section__header {
  /* Le text-align est hérité du style="" */
}

.links-list-section__header .links-list-section__sous-titre {
  /* Hérite de l'alignement du parent, mais on force le centrage visuel pour center et right */
  display: block;
}

/* Solution universelle : utilisation de CSS flexbox pour tous les alignements */
.links-list-section__header[style*="center"] .section__overtitle,
.links-list-section__header[style*="CENTER"] .section__overtitle,
.links-list-section__header[style*="center"] .links-list-section__sous-titre,
.links-list-section__header[style*="CENTER"] .links-list-section__sous-titre {
  margin-left: auto;
  margin-right: auto;
}
.links-list-section__header[style*="right"] .section__overtitle,
.links-list-section__header[style*="RIGHT"] .section__overtitle,
.links-list-section__header[style*="right"] .links-list-section__sous-titre,
.links-list-section__header[style*="RIGHT"] .links-list-section__sous-titre {
  margin-left: auto;
  margin-right: 0;
}
.links-list-section__header[style*="left"] .section__overtitle,
.links-list-section__header[style*="LEFT"] .section__overtitle,
.links-list-section__header[style*="left"] .links-list-section__sous-titre,
.links-list-section__header[style*="LEFT"] .links-list-section__sous-titre {
  margin-left: 0;
  margin-right: auto;
}

.links-list-section__sous-titre p {
  margin: 0;
}

.section--secondary .links-list-section__sous-titre,
.section--dark .links-list-section__sous-titre {
  color: var(--gray-300);
}

.section--tertiary .links-list-section__sous-titre {
  color: var(--gray-600);
}

/* Contenu principal */
.links-list-section__content {
  width: 100%;
}

/* Container des liens */
.links-list-section__links {
  display: flex;
  flex-direction: column;
  gap: var(--links-list-links-gap);
  width: 100%;
}

/* Lien de base */
.links-list-section__link {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  padding: var(--links-list-link-padding);
  border-radius: var(--links-list-link-radius);
  text-decoration: none;
  transition: var(--links-list-transition);
  position: relative;
  border: 1px solid transparent;
  cursor: pointer;
}

.links-list-section__link:hover {
  text-decoration: none;
  transform: translateY(-2px);
}

/* Contenu du lien */
.links-list-section__link-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-right: 1rem;
}

/* Titre du lien */
.links-list-section__link-titre {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  transition: var(--links-list-transition);
}

/* Sous-titre du lien */
.links-list-section__link-sous-titre {
  font-size: 1rem;
  line-height: 1.5;
  transition: var(--links-list-transition);
}

.links-list-section__link-sous-titre p {
  margin: 0;
}

/* Icône du lien */
.links-list-section__link-icon {
  width: var(--links-list-icon-size);
  height: var(--links-list-icon-size);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--links-list-transition);
}

.links-list-section__link-icon svg {
  width: 100%;
  height: 100%;
}

/*------------------------------------
    Variantes de style des liens
------------------------------------*/

/* Outline White */
.links-list-section__link--outline-white {
  background-color: transparent;
  border-color: var(--color-dark);
  color: var(--color-dark);
}

.links-list-section__link--outline-white .links-list-section__link-titre {
  color: var(--color-dark);
}

.links-list-section__link--outline-white .links-list-section__link-sous-titre {
  color: var(--gray-600);
}

.links-list-section__link--outline-white .links-list-section__link-icon {
  color: var(--color-dark);
}

.links-list-section__link--outline-white:hover {
  background-color: var(--color-dark);
  border-color: var(--color-dark);
}

.links-list-section__link--outline-white:hover .links-list-section__link-titre,
.links-list-section__link--outline-white:hover .links-list-section__link-sous-titre,
.links-list-section__link--outline-white:hover .links-list-section__link-icon {
  color: var(--white);
}

/* Outline Dark */
.links-list-section__link--outline-dark {
  background-color: transparent;
  border-color: var(--white);
  color: var(--white);
}

.links-list-section__link--outline-dark .links-list-section__link-titre {
  color: var(--white);
}

.links-list-section__link--outline-dark .links-list-section__link-sous-titre {
  color: var(--gray-300);
}

.links-list-section__link--outline-dark .links-list-section__link-icon {
  color: var(--white);
}

.links-list-section__link--outline-dark:hover {
  background-color: var(--primary);
  border-color: var(--primary);
}

.links-list-section__link--outline-dark:hover .links-list-section__link-titre,
.links-list-section__link--outline-dark:hover .links-list-section__link-sous-titre,
.links-list-section__link--outline-dark:hover .links-list-section__link-icon {
  color: var(--color-dark);
}

/* Primary */
.links-list-section__link--primary {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--color-dark);
}

.links-list-section__link--primary .links-list-section__link-titre {
  color: var(--color-dark);
}

.links-list-section__link--primary .links-list-section__link-sous-titre {
  color: var(--gray-700);
}

.links-list-section__link--primary .links-list-section__link-icon {
  color: var(--color-dark);
}

.links-list-section__link--primary:hover {
  background-color: var(--color-dark);
  border-color: var(--color-dark);
}

.links-list-section__link--primary:hover .links-list-section__link-titre,
.links-list-section__link--primary:hover .links-list-section__link-sous-titre,
.links-list-section__link--primary:hover .links-list-section__link-icon {
  color: var(--white);
}

/* Secondary */
.links-list-section__link--secondary {
  background-color: var(--secondary);
  border-color: var(--secondary);
  color: var(--white);
}

.links-list-section__link--secondary .links-list-section__link-titre {
  color: var(--white);
}

.links-list-section__link--secondary .links-list-section__link-sous-titre {
  color: var(--gray-200);
}

.links-list-section__link--secondary .links-list-section__link-icon {
  color: var(--white);
}

.links-list-section__link--secondary:hover {
  background-color: var(--primary);
  border-color: var(--primary);
}

.links-list-section__link--secondary:hover .links-list-section__link-titre,
.links-list-section__link--secondary:hover .links-list-section__link-sous-titre,
.links-list-section__link--secondary:hover .links-list-section__link-icon {
  color: var(--color-dark);
}

/* Noir */
.links-list-section__link--noir {
  background-color: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--white);
}

.links-list-section__link--noir .links-list-section__link-titre {
  color: var(--white);
}

.links-list-section__link--noir .links-list-section__link-sous-titre {
  color: var(--gray-300);
}

.links-list-section__link--noir .links-list-section__link-icon {
  color: var(--white);
}

.links-list-section__link--noir:hover {
  background-color: var(--primary);
  border-color: var(--primary);
}

.links-list-section__link--noir:hover .links-list-section__link-titre,
.links-list-section__link--noir:hover .links-list-section__link-sous-titre,
.links-list-section__link--noir:hover .links-list-section__link-icon {
  color: var(--color-dark);
}

/*------------------------------------
    Responsive Design
------------------------------------*/

@media (max-width: 768px) {
  :root {
    --links-list-section-padding: 3rem 0;
    --links-list-link-padding: 1.5rem;
    --links-list-links-gap: 0.75rem;
  }

  .links-list-section__header {
    margin-bottom: 2rem;
  }

  .links-list-section__titre {
    font-size: 2rem;
  }

  .links-list-section__link-titre {
    font-size: 1.25rem;
  }

  .links-list-section__link-sous-titre {
    font-size: 0.875rem;
  }

  .links-list-section__link-content {
    margin-right: 0.75rem;
  }
}

@media (max-width: 480px) {
  :root {
    --links-list-link-padding: 1.25rem;
    --links-list-link-radius: 20px;
  }

  .links-list-section__titre {
    font-size: 1.75rem;
  }

  .links-list-section__link {
    flex-direction: column;
    align-items: flex-start;
  }

  .links-list-section__link-content {
    margin-right: 0;
    margin-bottom: 1rem;
    width: 100%;
  }

  .links-list-section__link-icon {
    position: absolute;
    top: var(--links-list-link-padding);
    right: var(--links-list-link-padding);
  }
}

/* Shortlist Use Cases */
/* Shortlist Use Cases Module */

.use-cases-list {
  --use-cases-gap: 1.5rem;
  --use-cases-item-padding: 1.25rem;
  --use-cases-logo-size: 3rem;
  --use-cases-btn-size: 2.5rem;
  --use-cases-border-width: 1px;
  --use-cases-border-radius: 0.75rem;
}

/* Header */
.use-cases-list__header {
  margin-bottom: 3rem;
}

.use-cases-list__title {
  margin-bottom: 1rem;
}

.use-cases-list__sous-titre {
  max-width: 600px;
  color: var(--color-text-secondary);
}

/* Alignement conditionnel du header */
.use-cases-list__header[style*="center"] .use-cases-list__sous-titre,
.use-cases-list__header[style*="CENTER"] .use-cases-list__sous-titre {
  margin-left: auto;
  margin-right: auto;
}

.use-cases-list__header[style*="right"] .use-cases-list__sous-titre,
.use-cases-list__header[style*="RIGHT"] .use-cases-list__sous-titre {
  margin-left: auto;
  margin-right: 0;
}

.use-cases-list__header[style*="left"] .use-cases-list__sous-titre,
.use-cases-list__header[style*="LEFT"] .use-cases-list__sous-titre {
  margin-left: 0;
  margin-right: auto;
}

/* Container Grid */
.use-cases-list__container {
  display: grid;
  gap: var(--use-cases-gap);
  width: 100%;
}

/* Grid Layouts */
.use-cases-list__container--1 {
  grid-template-columns: 1fr;
}

.use-cases-list__container--2 {
  grid-template-columns: repeat(2, 1fr);
}

.use-cases-list__container--3 {
  grid-template-columns: repeat(3, 1fr);
}

.use-cases-list__container--4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Responsive Grid */
@media (max-width: 992px) {
  .use-cases-list__container--3,
  .use-cases-list__container--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .use-cases-list__container--2,
  .use-cases-list__container--3,
  .use-cases-list__container--4 {
    grid-template-columns: 1fr;
  }
}

/* Items */
.use-cases-list__item {
  display: block;
  border: var(--use-cases-border-width) solid;
  border-radius: var(--use-cases-border-radius);
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.use-cases-list__item:hover,
.use-cases-list__item:focus {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  color: inherit;
}

.use-cases-list__item:visited {
  color: inherit;
}

.use-cases-list__item-content {
  display: flex;
  align-items: center;
  padding: var(--use-cases-item-padding);
  gap: 1rem;
  min-height: 5rem;
}

/* Logo */
.use-cases-list__logo {
  flex-shrink: 0;
  width: var(--use-cases-logo-size);
  height: var(--use-cases-logo-size);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  overflow: hidden;
}

.use-cases-list__logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: 100%;
  max-height: 100%;
}

/* Company Name */
.use-cases-list__company-name {
  flex: 1;
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.3;
}

/* Action Button */
.use-cases-list__action {
  flex-shrink: 0;
}

.use-cases-list__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--use-cases-btn-size);
  height: var(--use-cases-btn-size);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  color: inherit;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.use-cases-list__item:hover .use-cases-list__btn {
  background-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.use-cases-list__btn i {
  width: 1.25rem;
  height: 1.25rem;
  stroke-width: 2;
}

/* Dark Theme Adjustments */
.section--dark .use-cases-list__logo {
  background-color: rgba(0, 0, 0, 0.1);
}

.section--dark .use-cases-list__btn {
  background-color: rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.2);
}

.section--dark .use-cases-list__btn:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  :root {
    --use-cases-gap: 1rem;
    --use-cases-item-padding: 1rem;
    --use-cases-logo-size: 2.5rem;
    --use-cases-btn-size: 2.25rem;
  }

  .use-cases-list__header {
    margin-bottom: 2rem;
  }

  .use-cases-list__company-name {
    font-size: 1rem;
  }

  .use-cases-list__btn i {
    width: 1rem;
    height: 1rem;
  }
}

/* Animation pour les éléments entrants */
.use-cases-list__item {
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards;
}

.use-cases-list__item:nth-child(1) { animation-delay: 0.1s; }
.use-cases-list__item:nth-child(2) { animation-delay: 0.2s; }
.use-cases-list__item:nth-child(3) { animation-delay: 0.3s; }
.use-cases-list__item:nth-child(4) { animation-delay: 0.4s; }
.use-cases-list__item:nth-child(5) { animation-delay: 0.5s; }
.use-cases-list__item:nth-child(6) { animation-delay: 0.6s; }

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

/* Services */
/**
 * Masonry Services Component
 * Module de présentation de services en layout Masonry
 */

/* =================================
   STRUCTURE DE BASE
   ================================= */

.masonry-section {
  position: relative;
  padding: 5rem 0;
}

.masonry-section__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* =================================
   EN-TÊTE DE LA SECTION
   ================================= */

.masonry-section__header {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 3rem;
}

/* Titre principal */
.masonry-section__title {
  font-size: 3rem; /* 48px */
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-headings-default);
  margin: 0;
  letter-spacing: -0.02em;
}

/* Sous-titre */
.masonry-section__subtitle {
  font-size: 1.125rem; /* 18px */
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
  max-width: 1000px;
}

/* Alignement centré */
.align-center .masonry-section__header {
  text-align: center;
  align-items: center;
}

.align-center .masonry-section__subtitle {
  margin: 0 auto;
}

/* Alignement à droite */
.align-right .masonry-section__header {
  text-align: right;
  align-items: flex-end;
}

.align-right .masonry-section__subtitle {
  margin-left: auto;
}

/* =================================
   GRILLE MASONRY
   ================================= */

.masonry-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: 1.25rem; /* 20px */
}

/* =================================
   CARTES MASONRY
   ================================= */

.masonry-item {
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #A2ACAB;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.masonry-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

/* Types de cartes */
.long-card {
  grid-column: span 1;
  grid-row: span 2;
  display: flex;
  flex-direction: column;
}

.premium-card {
  grid-column: span 1;
  grid-row: span 2;
}

.small-card {
  grid-column: span 1;
  grid-row: span 1;
}

.small-card .masonry-content {
  height: 100%;
}

/* =================================
   IMAGE DES CARTES
   ================================= */

.masonry-image {
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
}

.masonry-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.masonry-item:hover .masonry-image img {
  transform: scale(1.08);
}

/* =================================
   CONTENU DES CARTES
   ================================= */

.masonry-content {
  padding: 2.25rem 2.5rem; /* 35px 40px */
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  text-align: left;
  justify-content: center;
  gap: 1.25rem;
}

.masonry-content__title {
  font-size: 1.875rem; /* 30px */
  font-weight: 500;
  line-height: 1.3;
  margin: 0;
  color: var(--color-headings-default);
}

.masonry-content__description {
  font-size: 1.125rem; /* 18px */
  line-height: 1.5;
  color: var(--color-text-default);
  margin: 0;
}

.masonry-content__description p {
  margin: 0 0 1rem 0;
}

.masonry-content__description p:last-child {
  margin-bottom: 0;
}

/* Style pour le texte OBJECTIF */
.masonry-content__description strong {
  font-size: 0.875rem; /* 14px */
  font-weight: 500;
  color: var(--color-text-default);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* =================================
   CARTE HIGHLIGHT (JAUNE)
   ================================= */

.highlight-card {
  background-color: #F7EA48;
  border-color: #F7EA48;
}

.highlight-card .masonry-content__title {
  color: #25282A;
}

.highlight-card .masonry-content__description {
  color: #25282A;
}

/* =================================
   CARTE PREMIUM (NOIRE)
   ================================= */

.premium-card {
  background-color: #25282A;
  border-color: #25282A;
}

.premium-card .masonry-content {
  text-align: left;
}

.premium-card .masonry-content__title {
  color: #ffffff;
}

.premium-card .masonry-content__description {
  color: #ffffff;
  opacity: 0.9;
}

.premium-card .masonry-content__description strong {
  color: #F7EA48;
}

/* Label premium */
.premium-label {
  color: #F7EA48;
  font-size: 0.875rem; /* 14px */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

/* Bouton premium */
.premium-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.25rem;
  padding: 0.75rem 1.875rem; /* 12px 30px */
  background-color: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  align-self: flex-start;
}

.premium-button:hover {
  background-color: #ffffff;
  color: #25282A;
  transform: translateY(-2px);
}

/* =================================
   VARIATIONS DE COULEURS
   ================================= */

/* Mode Light (par défaut) */
.section--light .masonry-section__title {
  color: var(--color-text-default);
}

.section--light .masonry-section__subtitle {
  color: var(--color-text-muted);
}

/* Mode Dark */
.section--dark .masonry-section__title {
  color: var(--color-text-inverted);
}

.section--dark .masonry-section__subtitle {
  color: var(--color-text-inverted);
  opacity: 0.8;
}

.section--dark .masonry-item {
  background-color: var(--gray-800);
  border-color: var(--gray-700);
}

.section--dark .masonry-content__title {
  color: var(--color-text-inverted);
}

.section--dark .masonry-content__description {
  color: var(--color-text-inverted);
}

/* Mode Primary */
.section--primary .masonry-section__title {
  color: var(--color-text-default);
}

.section--primary .masonry-section__subtitle {
  color: var(--color-text-muted);
}

/* Mode Secondary */
.section--secondary .masonry-section__title {
  color: var(--color-text-inverted);
}

.section--secondary .masonry-section__subtitle {
  color: var(--color-text-inverted);
  opacity: 0.8;
}

.section--secondary h3.masonry-content__title {
  color: var(--color-dark);
}

.section--secondary .premium-card h3.masonry-content__title {
    color: var(--color-white);
}

.section--secondary a.premium-button:hover {
  background-color: var(--primary);
  transform: translateY(-2px);
  color: var(--color-dark);
  border: var(--primary);
}

/* Mode Tertiary */
.section--tertiary .masonry-section__title {
  color: var(--color-text-inverted);
}

.section--tertiary .masonry-section__subtitle {
  color: var(--color-text-inverted);
  opacity: 0.8;
}

/* =================================
   RESPONSIVE
   ================================= */

/* Tablettes */
@media (max-width: 1024px) {
  .masonry-section__inner {
    max-width: 95%;
    padding: 0 1rem;
  }
  
  .masonry-section__title {
    font-size: 2.5rem; /* 40px */
  }
  
  .masonry-grid {
    gap: 1rem;
  }
  
  .masonry-content {
    padding: 1.5rem 2rem; /* 24px 32px */
  }
  
  .masonry-content__title {
    font-size: 1.5rem; /* 24px */
  }
}

/* Mobile */
@media (max-width: 768px) {
  .masonry-section {
    padding: 4rem 0;
  }
  
  .masonry-section__header {
    margin-bottom: 2rem;
  }
  
  .masonry-section__title {
    font-size: 2rem; /* 32px */
  }
  
  .masonry-section__subtitle {
    font-size: 1rem; /* 16px */
  }
  
  .masonry-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .long-card {
    grid-column: span 1;
  }
  
  .masonry-image {
    height: 200px;
  }
  
  .masonry-content {
    padding: 1.25rem 1.5rem; /* 20px 24px */
  }
  
  .masonry-content__title {
    font-size: 1.375rem; /* 22px */
  }
  
  .masonry-content__description {
    font-size: 1rem; /* 16px */
  }
}

/* Petit mobile */
@media (max-width: 480px) {
  .masonry-section {
    padding: 3rem 0;
  }
  
  .masonry-section__title {
    font-size: 1.75rem; /* 28px */
  }
  
  .masonry-content {
    padding: 1rem 1.25rem; /* 16px 20px */
  }
  
  .masonry-content__title {
    font-size: 1.25rem; /* 20px */
  }
  
  .premium-button {
    padding: 0.625rem 1.5rem; /* 10px 24px */
    font-size: 0.875rem; /* 14px */
  }
}

/* Methodology */
/* Methodology Section */
.methodology-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: var(--dark-surface);
    padding: 80px 0;
}

.methodology-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
    padding: 0 20px;
}

.methodology-subtitle--dark {
    color: var(--color-white) !important;
}

.methodology-container {
    width: 100%;
    margin: 0 0 0 auto;
    position: relative;
}

.methodology-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 20px;
    padding: 20px 10px 40px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    scroll-behavior: smooth;
    position: relative;
    margin-left: 100px;
}

/* Blocs transparents au début et à la fin du slider */
.methodology-spacer {
    flex: 0 0 15%;
    height: 1px;
}

.deliverable-icon{
  height:24px;
}

@media (max-width: 1200px) {
    .methodology-spacer {
        flex: 0 0 10%;
    }
}

@media (max-width: 768px) {
    .methodology-spacer {
        display: none;
    }
    
    .methodology-slider{
        margin-left: 0;
    }
}

.methodology-slider::before,
.methodology-slider::after {
    content: '';
    display: block;
    flex: 0 0 15%;
    position: relative;
    height: 1px;
}

.methodology-slider::before {
    order: -1;
}

@media (max-width: 1200px) {
    .methodology-slider::before,
    .methodology-slider::after {
        flex: 0 0 10%;
    }
}

@media (max-width: 768px) {
    .methodology-slider::before,
    .methodology-slider::after {
        display: none;
    }
}

.methodology-slider::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Effet d'estompage sur les bords */
.methodology-slider::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 10;
    pointer-events: none;
    position: fixed;
}


.methodology-slider::after {
    right: 0;
    background: linear-gradient(-90deg, rgba(0, 0, 0, 0.5), transparent);
}

.methodology-arrows {
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    pointer-events: none;
    padding: 0 20px;
    z-index: 15;
}

.methodology-arrow {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    transition: all 0.3s ease;
    color: #111;
    position: relative;
}

.methodology-next-btn:hover {
    background-color: var(--primary);
    transform: scale(1.1);
}

.methodology-arrow:hover {
    background-color: var(--primary);
    transform: scale(1.1);
}

.methodology-slide {
    flex: 0 0 auto;
    width: 500px;
    height: 480px;
    scroll-snap-align: start;
    background-color: rgba(30, 33, 43, 0.8);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    position: relative;
    display: flex;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    scroll-margin-left: 10px;
}

.methodology-slide:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
    border-color: var(--primary);
}

.methodology-slide.active {
    border: 2px solid var(--primary);
    box-shadow: 0 0 30px rgba(255, 232, 76, 0.15);
}

.methodology-slide:first-child {
    margin-left: 10px;
}

.methodology-slide-inner {
    display: flex;
    flex-direction: column;
    padding: 40px;
    width: 100%;
    height: 100%;
    position: relative;
}

.methodology-slide-number {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 64px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.1);
    z-index: 0;
}

.methodology-slide-header {
    margin-bottom: 25px;
    position: relative;
    z-index: 1;
}

.methodology-slide-title {
    font-size: 28px;
    font-weight: 600;
    margin: 0 0 5px;
    color: white;
}

.methodology-slide-time {
    color: var(--primary);
    font-size: 16px;
    font-weight: 500;
}

.methodology-slide-subtitle {
    font-size: 18px;
    margin-bottom: 20px;
    color: var(--color-white);
}

.methodology-slide-points {
    list-style: none;
    padding: 0;
    margin: 0 0 auto;
    flex-grow: 1;
}

.methodology-slide-points li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 16px;
    color: var(--color-white);
    font-size: 15px;
    line-height: 1.5;
}

.methodology-slide-points li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--primary);
    font-size: 18px;
}

.methodology-slide-deliverable {
    display: flex;
    align-items: center;
    padding: 16px;
    background-color: rgba(255, 232, 76, 0.1);
    border-radius: 8px;
    margin-top: auto;
    gap: 10px;
    font-size: 16px;
    color: white;
}

.methodology-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.methodology-pagination-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.methodology-pagination-dot.active {
    background-color: var(--primary);
    transform: scale(1.2);
}

@media (max-width: 1200px) {
    .methodology-slide {
        width: 400px;
        height: 500px;
    }
    
    .methodology-arrows {
        display: flex;
        justify-content: center;
        position: static;
        transform: none;
        width: 100%;
        padding: 0;
        margin: 0 0 20px;
        gap: 20px;
    }
    
    .methodology-arrow {
        width: 45px;
        height: 45px;
    }
    
    .methodology-prev-btn, 
    .methodology-next-btn {
        margin: 0;
    }
    .methodology-slider{
        margin-left: 0;
    }
    /* Désactiver l'effet d'estompage en mode centré */
    .methodology-slider::after {
        display: none;
    }
}

@media (max-width: 768px) {
    .methodology-slide {
        width: 90%;
        min-width: 280px;
        height: auto;
        min-height: 480px;
    }
    
    .methodology-arrow {
        width: 40px;
        height: 40px;
    }
    
    .methodology-container {
        width: 100%;
        padding: 0;
    }
    
    .methodology-slider {
        padding: 20px 0 40px;
    }
}

 /* ------------------------------
  * 6. TEMPLATES
  * Styles spécifiques aux modèles de page
  * ------------------------------ */

/* Blog */
/* ------------------------------
 * BLOG TEMPLATE STYLES
 * Styles pour le template de blog
 * ------------------------------ */

/* Layout général du blog */
.blog-post {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem 0;
}

/* En-tête du blog */
.blog-header-banner {
  position: relative;
  width: auto;
  background-color: var(--color-dark);
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  padding: 5rem 0 8rem;
  text-align: center;
  margin-bottom: -5rem;
  z-index: 0;
}

.blog-header {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.blog-related-container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.blog-back-link {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 1.5rem;
  transition: color 0.2s ease;
  align-self: flex-start;
  text-align: left;
  position: relative;
  left: 0;
  width: 100%;
}

.blog-back-link:hover {
  color: rgba(255, 255, 255, 0.8);
}

.blog-back-link .icon {
  width: 16px;
  height: 16px;
  margin-right: 0.5rem;
}

.blog-category {
  display: inline-block;
  background: none;
  color: var(--primary);
  border: none;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
  text-decoration: none;
  transition: color 0.2s ease;
  margin-right: 0.5rem;
}

.blog-category:hover {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

/* Séparateur rond entre les tags sur les pages de blog */
.blog-category:not(:last-of-type)::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  background-color: var(--white);
  border-radius: 50%;
  margin-left: 0.5rem;
  vertical-align: middle;
}

.blog-title {
  font-size: 2.6rem;
  line-height: 1.2;
  font-weight: 500;
  color: var(--white);
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.blog-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  color: var(--white);
  margin-bottom: 0;
}

.blog-meta__separator {
  margin: 0 0.5rem;
  color: rgba(255, 255, 255, 0.7);
}

/* Layout du contenu principal */
.blog-content {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  gap: 2rem;
  align-items: start;
  position: relative;
  z-index: 1;
}

/* Auteur et outils de partage */
.blog-sidebar-right {
  position: sticky;
  top: 90px;
}

.blog-author {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2rem;
}

.blog-author__image {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 1rem;
}

.blog-author__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-author__name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 0.25rem;
  text-align: center;
}

.blog-author__title {
  font-size: 0.875rem;
  color: var(--gray-600);
  text-align: center;
}

.blog-share {
  display: flex;
  flex-direction: column;
  padding-left: 20px;
}

.blog-share__title {
  font-size: 0.75rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-300);
  margin: 0.75rem 0;
}

.blog-share__links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.blog-share__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--gray-100);
  color: var(--gray-700);
  transition: all 0.2s ease;
}

.blog-share__link:hover {
  background-color: var(--primary);
}

.blog-share__link .icon {
  width: 18px;
  height: 18px;
}

.hs-blog-social-share .hs-blog-social-share-item{
  margin-bottom: 10px;
  float: none !important;
}

/* Contenu principal du blog */
.blog-main {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--gray-800);
}

.blog-hero-image {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  margin-top: -3rem;
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}

.blog-hero-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.post_narration{
  margin-bottom: 2rem;
}

.blog-intro {
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--gray-700);
  margin-bottom: 2rem;
  font-weight: 500;
}

.blog-section-title {
  font-size: 1.75rem;
  font-weight: 500;
  color: var(--gray-900);
  margin: 2.5rem 0 1.5rem;
}

.blog-ordered-list {
  counter-reset: blog-list;
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
}

.blog-ordered-list li {
  counter-increment: blog-list;
  margin-bottom: 1.5rem;
  position: relative;
  padding-left: 2rem;
}

.blog-ordered-list li::before {
  content: counter(blog-list) ".";
  position: absolute;
  left: 0;
  font-weight: 500;
  color: var(--primary);
}

.blog-list-title {
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 0.5rem;
}

.blog-list-content {
  color: var(--gray-700);
}

.blog-inline-image {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  margin: 2rem 0;
}

.blog-inline-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}



/* Section CTA */
.blog-cta {
  background-color: var(--primary-dark);
  color: white;
  border-radius: 12px;
  padding: 2.5rem;
  margin: 3rem 0;
  text-align: center;
}

.blog-cta__title {
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

.blog-cta__text {
  font-size: 1rem;
  margin-bottom: 1.5rem;
  opacity: 0.9;
}

.blog-cta__form {
  display: flex;
  gap: 0.75rem;
  max-width: 450px;
  margin: 0 auto;
}

.blog-cta__input {
  flex-grow: 1;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
}

.blog-cta__button {
  background-color: var(--green-accent);
  color: var(--primary-dark);
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.blog-cta__button:hover {
  opacity: 0.9;
}

/* Section témoignage */
.blog-testimonial {
  background-color: var(--gray-50);
  border-radius: 12px;
  padding: 2rem;
  margin: 2.5rem 0;
  position: relative;
}

.blog-testimonial__quote {
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--gray-800);
  margin-bottom: 1.5rem;
  position: relative;
}

.blog-testimonial__quote::before {
  content: '"';
  font-size: 3rem;
  color: var(--primary-300);
  position: absolute;
  left: -1.5rem;
  top: -1rem;
  font-family: serif;
}

.blog-testimonial__author {
  display: flex;
  align-items: center;
}

.blog-testimonial__author-image {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 1rem;
}

.blog-testimonial__author-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-testimonial__author-info {
  display: flex;
  flex-direction: column;
}

.blog-testimonial__author-name {
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 0.25rem;
}

.blog-testimonial__author-title {
  font-size: 0.875rem;
  color: var(--gray-600);
}

/* Bio de l'auteur en fin d'article */
.blog-author-bio {
  margin-top: 4rem;
  margin-bottom: 2rem;
  padding: 2rem;
  background-color:var(--secondary);
  border-radius: 12px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.blog-author-bio__inner {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

.blog-author-bio__image {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.blog-author-bio__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-author-bio__content {
  flex-grow: 1;
}

.blog-author-bio__name {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--color-dark);
    margin-bottom: 0.8rem;
    line-height: 1.5rem;
    margin-top: 1rem;
}

.blog-author-bio__title {
  font-size: 0.875rem;
  color: var(--gray-600);
  margin-bottom: 1rem;
}

.blog-author-bio__text {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--gray-700);
  margin-bottom: 1rem;
}

.blog-author-bio__social {
  display: flex;
  gap: 0.75rem;
}

.blog-author-bio__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-dark);
  color: var(--white);
  transition: all 0.2s ease;
  text-decoration: none;
}

.blog-author-bio__social-link:hover {
  background-color: var(--primary);
  color: var(--color-dark);
  text-decoration: none;
}

.blog-author-bio__social-link .icon {
  height: 20px;
  width: 20px;
  fill: currentColor;
  stroke: transparent;
  stroke-width: 0;
}

/* Articles liés */
.blog-related {
  margin: 2rem 0 6rem;
  border-top: 1px solid var(--gray-200);
  padding-top: 3.5rem;
}

.blog-related__title {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-dark);
  margin-bottom: 2rem;
  text-align: left;
  text-transform: uppercase;
}

.blog-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.blog-card:hover {
  text-decoration: none;
  transform: translateY(-5px);
}

.blog-card__image {
  width: 100%;
  height: 220px;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 1rem;
  position: relative;
}

.blog-card__image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  z-index: 1;
  transition: background-color 0.4s ease;
}

.blog-card:hover .blog-card__image::before {
  background-color: rgba(0, 0, 0, 0.2);
}

.blog-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.blog-card:hover .blog-card__image img {
  transform: scale(1.08);
}

.blog-card__content {
  padding: 0;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.blog-card__title {
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--color-dark);
  margin-bottom: 1rem;
  line-height: 1.4;
}

.blog-card__excerpt {
  font-size: 1.2rem;
  color: var(--gray-700);
  margin-bottom: 1rem;
  line-height: 1.6;
  flex-grow: 1;
}

.blog-author-meta {
  display: flex;
  align-items: center;
  margin-top: 1rem;
}

.blog-card__author {
  display: flex;
  align-items: center;
  font-size: 0.95rem;
  margin-bottom: 0;
}

.blog-card__author-image {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 0.75rem;
}

.blog-card__author-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-card__author-name {
  font-weight: 500;
  color: var(--gray-800);
}

.blog-card__meta {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  color: var(--gray-500);
  margin-top: 0;
  margin-left: 0.75rem;
}

.blog-card__meta::before {
  content: '';
  width: 5px;
  height: 5px;
  background-color: var(--gray-400);
  border-radius: 50%;
  margin-right: 0.75rem;
  display: inline-block;
}

.blog-card__date {
  display: flex;
  align-items: center;
}

.blog-card__date .icon {
  display: none;
}


.main-content .blog-main img {
    border-radius: 12px;
    margin: 2rem 0;
}

/* Responsive */
@media (max-width: 1200px) and (min-width: 1025px) {
  .main-content {
    padding-left: 30px;
    padding-right: 30px;
  }

  .blog-content {
    gap: 1rem;
  }

  .blog-related__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1024px) and (min-width: 769px) {
  .main-content {
    padding-left: 25px;
    padding-right: 25px;
  }

  /* Réorganisation de la grille de contenu */
  .blog-content {
    grid-template-columns: 0.7fr 3.6fr 0.7fr;
    gap: 1.25rem;
  }

  /* Adaptation de la sidebar gauche */
  .blog-sidebar {
    position: relative;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 0.5rem;
    max-width: 100%;
  }

  .blog-author {
    margin-bottom: 1.5rem;
    width: 100%;
  }

  .blog-author__image {
    width: 65px;
    height: 65px;
    margin: 0 auto 0.8rem;
  }

  .blog-author__name {
    font-size: 0.85rem;
    margin-bottom: 0.15rem;
  }

  .blog-author__title {
    font-size: 0.75rem;
  }

  /* Réduction de la taille de la police pour le contenu principal */
  .blog-main {
    font-size: 1.05rem;
  }

  .blog-hero-image {
    margin-top: -2.5rem;
  }

  /* Styles pour la sidebar droite */
  .blog-sidebar-right {
    position: sticky;
    top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 0.5rem;
    max-width: 100%;
  }

  /* Déplacer les boutons de partage vers la sidebar droite */
  .blog-share {
    width: 100%;
  }

  .blog-share__links {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.65rem;
  }

  .blog-share__link {
    width: 30px;
    height: 30px;
  }

  .blog-share__link .icon {
    width: 16px;
    height: 16px;
  }

  .blog-share__title {
    margin-bottom: 1rem;
    font-size: 0.7rem;
  }

  /* Ajustement des articles liés */
  .blog-related__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
  
  .blog-card__title {
    font-size: 1.4rem;
  }
  
  .blog-card__excerpt {
    font-size: 1.1rem;
  }
}

@media (max-width: 768px) {
  .blog-title {
    font-size: 2rem;
  }

  .main-content {
    padding-left: 10px;
    padding-right: 10px;
  }

  .blog-content {
    grid-template-columns: 1fr;
  }
  
  /* Masquer l'auteur dans la sidebar gauche sur mobile */
  
  .hs-blog-social-share .hs-blog-social-share-item{
    margin-bottom: 10px;
    float: left !important;
  }
  
  .blog-sidebar .blog-author {
    display: none;
  }
  
  .blog-comments {
    padding: 20px;
    margin: 0;
  }
  
  .blog-sidebar {
    position: sticky;
    top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 0.5rem;
    max-width: 100%;
  }

  .blog-share {
    flex-direction: row;
    justify-content: center;
    margin-top: 1.5rem;
  }

  .blog-share__title {
    margin-right: 1rem;
    margin-bottom: 0;
  }
  
  .blog-share__links {
    flex-direction: row;
  }

  .blog-author {
    flex-direction: row;
    text-align: left;
    gap: 1rem;
  }

  .blog-author__info {
    text-align: left;
  }

  .blog-cta__form {
    flex-direction: column;
    width: 100%;
    max-width: 100%;
  }

  .blog-related__grid {
    grid-template-columns: 1fr;
  }

  .blog-header-banner {
    margin-bottom: -8rem;
    padding: 2rem 0 6rem;
  }
  
  .blog-hero-image {
    margin-top: -2rem;
  }
}

@media (max-width: 480px) {
  .blog-post {
    padding: 1rem;
  }

  .blog-title {
    font-size: 1.75rem;
  }

  .blog-testimonial {
    padding: 1.5rem;
  }

  .blog-author-bio__inner {
    flex-direction: column;
    text-align: center;
  }

  .blog-author-bio__social {
    justify-content: center;
  }
} 


/* Blog comments */

.blog-comments {
  margin-top: 1rem;
  margin-bottom: 4rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.blog-comments__title {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--gray-900);
  margin-bottom: 1.5rem;
  text-align: center;
}

.blog-comments .section.post-footer {
  background-color: #fff;
  border-radius: 12px;
  border:1px solid #e4e4e4;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 2rem;
}

.blog-comments .new-comments {
  margin-bottom: 2rem;
}

/* Styles pour le formulaire de HubSpot */
.blog-comments form.hs-form {
  font-family: var(--font-family-base);
}

.blog-comments .hs-form-field {
  margin-bottom: 1.5rem;
}

.blog-comments .hs-form-field label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--gray-700);
}

.blog-comments .hs-form-field label .hs-form-required {
  color: var(--primary);
  margin-left: 0.25rem;
}

.blog-comments input[type="text"],
.blog-comments input[type="email"],
.blog-comments input[type="url"],
.blog-comments textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color 0.2s ease;
}

.blog-comments input[type="text"]:focus,
.blog-comments input[type="email"]:focus,
.blog-comments input[type="url"]:focus,
.blog-comments textarea:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
}

.blog-comments textarea {
  min-height: 120px;
  resize: vertical;
}

.blog-comments .hs-button.primary {
  background-color: var(--secondary);
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.blog-comments .hs-button.primary:hover {
  background-color: var(--primary);
  color: var(--secondary);
}

/* ================================
   NOUVELLE MISE EN PAGE DEUX COLONNES
   ================================ */

/* Container principal pour la nouvelle mise en page */
.blog-content--two-columns {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* Sidebar gauche avec sommaire et CTA */
.blog-sidebar-left {
  position: relative;
}

/* Colonne principale élargie */
.blog-main--wide {
  max-width: none;
  padding: 0;
}

/* Responsive pour la nouvelle mise en page */
@media (max-width: 992px) {
  .blog-content--two-columns {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 30px 20px;
  }
  
  .blog-sidebar-left {
    order: 1; /* Sidebar en premier sur mobile */
  }
  
  .blog-main--wide {
    order: 2; /* Article après la sidebar sur mobile */
  }
}

@media (max-width: 768px) {
  .blog-content--two-columns {
    gap: 0px;
    padding: 20px 16px;
  }

  .blog-sidebar-left{
    position: initial !important;
  }
}

/* Ajustements pour la bio auteur dans la nouvelle mise en page */
.blog-content--two-columns + .blog-author-bio {
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 60px;
}

@media (max-width: 992px) {
  .blog-content--two-columns + .blog-author-bio {
    margin-top: 40px;
  }
}

/* Use Case */
/* ================================
   USE CASE TEMPLATE STYLES
   ================================ */

/* ================================
   LISTING PAGE STYLES
   ================================ */

/* Hero Listing */
.listing-hero {
  text-align: center;
}

.listing-hero__content {
  max-width: 800px;
  margin: 0 auto;
}

.listing-hero__title {
  font-size: 56px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 24px;
  color: white;
}

.listing-hero__subtitle {
  font-size: 20px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

/* Use Cases Grid */
.use-cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 32px;
  margin-top: 60px;
}

.use-case-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(37, 40, 42, 0.08);
}

.use-case-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.use-case-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.use-case-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 24px 0;
  margin-bottom: 16px;
}

.use-case-card__logo {
  height: 48px;
  display: flex;
  align-items: center;
}

.use-case-card__logo img {
  max-height: 36px;
  max-width: 120px;
  object-fit: contain;
}

.use-case-card__meta .badge--small {
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 12px;
  background: var(--primary);
  color: var(--dark);
  font-weight: 500;
}

.use-case-card__content {
  padding: 0 24px;
  margin-bottom: 20px;
}

.use-case-card__title {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 12px;
  color: var(--color-dark);
  font-family: var(--font-family-normal);
}

.use-case-card__excerpt {
  font-size: 14px;
  line-height: 1.6;
  color: #6b7280;
  margin: 0;
}

.use-case-card__metrics {
  padding: 0 24px;
  margin-bottom: 20px;
}

.use-case-card__metric {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  border: 1px solid rgba(37, 40, 42, 0.04);
}

.use-case-card__footer {
  padding: 0 24px 24px;
}

.use-case-card__cta {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.use-case-card:hover .use-case-card__cta {
  color: var(--dark);
}

/* ================================
   DETAIL PAGE STYLES
   ================================ */

/* Hero Section */
.use-case-hero {
  padding: 60px 0;
  color: white;
  background-image: url(https://49231539.fs1.hubspotusercontent-na1.net/hubfs/49231539/Nile-Theme/images/background/bg-50.jpg);
  background-size: cover;
  background-position: center;
  position: relative;
}

/* Bouton retour */
.use-case-hero__back-btn {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: white;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 10;
}

.use-case-hero__back-btn:hover {
  background: rgba(255, 255, 255, 0.4);
  transform: translateX(-2px);
  color: white;
  text-decoration: none;
}

.use-case-hero__back-btn svg {
  transition: transform 0.3s ease;
}

.use-case-hero__back-btn:hover svg {
  transform: translateX(-2px);
}

.use-case-hero__content {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.use-case-hero__collaboration {
  margin-bottom: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
}

.collaboration-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  min-width: 120px;
}

.collaboration-logo {
  max-height: 50px;
  max-width: 200px;
  object-fit: contain;
}

.collaboration-logo--client {
  /* Logo client en couleurs naturelles */
  filter: none;
}

.collaboration-logo--nile {
  /* Logo Nile inversé en blanc */
  filter: brightness(0) invert(1);
}

.collaboration-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.collaboration-separator svg {
  width: 24px;
  height: 24px;
}

.use-case-hero__title {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 24px;
  color: white;
}

.use-case-hero__meta {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.use-case-hero__meta .badge {
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
}

.use-case-hero__meta .badge--primary {
  background: transparent;
  color: var(--color-white);
  border: 1px solid var(--primary);
}

.use-case-hero__meta .badge--outline {
  background: transparent;
  color: white;
  border: 1px solid var(--secondary);
}

/* Hero Metrics Card - Liquid Glass Effect */
.hero-metrics-card {
  /* Liquid Glass Background */
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0.1) 25%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0.1) 75%,
    rgba(255, 255, 255, 0.2) 100%
  );
  
  /* Advanced Blur Effects */
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  
  /* Liquid Glass Borders */
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 24px;
  
  /* Advanced Shadow System */
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1);
  
  /* Layout */
  text-align: center;
  flex-flow: wrap;
  justify-content: center;
  align-items: flex-start;
  width: 90%;
  max-width: 1200px;
  margin: 40px auto 0;
  padding: 50px 30px 30px;
  display: flex;
  gap: 40px;
  
  /* Liquid Glass Animation */
  position: relative;
  overflow: hidden;
}

/* Liquid Glass Floating Particles */
.hero-metrics-card::after {
  content: '';
  position: absolute;
  top: 20%;
  right: 10%;
  width: 60px;
  height: 60px;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    transparent 100%
  );
  border-radius: 50%;
  animation: floatbg 4s ease-in-out infinite;
  z-index: 0;
}

@keyframes floatbg {
  0%, 100% {
    transform: translateY(0px) scale(1);
    opacity: 0.7;
  }
  50% {
    transform: translateY(-10px) scale(1.1);
    opacity: 1;
  }
}

/* Colonnes dynamiques selon le nombre de métriques */
.hero-metrics-columns-1 {
  grid-template-columns: 1fr;
}

.hero-metrics-columns-2 {
  grid-template-columns: repeat(2, 1fr);
}

.hero-metrics-columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

.hero-metric-item {
  flex: 1;
  min-width: 200px;
  position: relative;
  z-index: 2; /* Au-dessus des effets d'animation */
}

.hero-metric-item h3 {
  font-size: 48px;
  font-weight: 700;
  color: var(--primary); /* Chiffres en jaune */
  margin-bottom: 8px;
  line-height: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Ombre pour améliorer la lisibilité */
  font-family: var(--font-family-base);
}

.hero-metric-item p {
  font-size: 16px;
  color: white; /* Sous-texte en blanc */
  margin: 0;
  line-height: 1.4;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* Ombre pour améliorer la lisibilité */
}

/* Content Sections */
.content-section {
  padding: 40px 0;
}

.container--narrow {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.content-section__title {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 32px;
  color: var(--dark);
  position: relative;
  padding-bottom: 16px;
}

.content-section__title:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 4px;
  background: var(--primary);
  border-radius: 2px;
}

.content-section__text {
  font-size: 16px;
  line-height: 1.8;
  color: #4a5568;
}

.content-section__text h3 {
  font-size: 24px;
  font-weight: 600;
  margin: 32px 0 16px;
  color: var(--dark);
}

.content-section__text p {
  margin-bottom: 16px;
}

.content-section__text ul,
.content-section__text ol {
  margin: 24px 0;
  padding-left: 24px;
}

.content-section__text li {
  margin-bottom: 12px;
  line-height: 1.8;
}

.content-section__text li p {
  margin-bottom: 8px;
}

.content-section__text strong {
  font-weight: 600;
  color: var(--dark);
}

/* Results Section Special Styling */
.content-section--results .content-section__text {
  background: linear-gradient(135deg, #f6f9fc 0%, #ffffff 100%);
  border-radius: 16px;
  padding: 32px;
  border: 1px solid rgba(37, 40, 42, 0.08);
}

.content-section--results h3 {
  color: var(--color-dark);
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Metrics Section */
.metrics-use-case {
  padding: 40px 0;
}

.metrics-use-case__title {
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 48px;
  color: var(--dark);
}

.metrics-use-case__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
}

.metric-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 16px;
  padding: 40px 32px;
  text-align: center;
  border: 1px solid rgba(37, 40, 42, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.metric-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

.metric-card__content h3 {
  font-size: 48px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 8px;
  line-height: 1;
}

.metric-card__content p {
  font-size: 16px;
  color: #6b7280;
  margin: 0;
}

/* Testimonial Section */
.testimonial-use-case {
  padding: 40px 0;
}

.testimonial-use-case__content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.testimonial-use-case__quote {
  position: relative;
  margin-bottom: 32px;
}

.quote-icon {
  color: var(--primary);
  opacity: 0.3;
  margin-bottom: 24px;
}

.testimonial-use-case__text {
  font-size: 24px;
  line-height: 1.6;
  color: white;
  font-style: italic;
  margin: 0;
}

.testimonial-use-case__author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.testimonial-use-case__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

.testimonial-use-case__name {
  font-size: 16px;
  font-weight: 600;
  color: var(--primary);
  font-style: normal;
}

/* Error Message */
.error-message {
  text-align: center;
  padding: 100px 20px;
  max-width: 600px;
  margin: 0 auto;
}

.error-message h2 {
  font-size: 32px;
  margin-bottom: 16px;
  color: var(--dark);
}

.error-message p {
  font-size: 18px;
  color: #6b7280;
  margin-bottom: 32px;
}

/* Responsive */
@media (max-width: 992px) {
  .use-cases-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .metrics-use-case__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .metric-card {
    padding: 32px 24px;
  }
}

/* ================================
   PORTFOLIO GALLERY SECTION
   ================================ */

.portfolio-gallery-section {
  position: relative;
}

.portfolio-gallery__header {
  text-align: center;
  margin-bottom: 60px;
}

.portfolio-gallery__title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 16px;
  color: var(--dark);
}

.portfolio-gallery__subtitle {
  font-size: 18px;
  line-height: 1.6;
  color: #6b7280;
  max-width: 600px;
  margin: 0 auto;
}

/* Wrapper centré avec slider */
.portfolio-gallery__wrapper {
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  padding: 0 60px 20px;
}

.portfolio-gallery__track {
  display: flex;
  gap: 24px;
  justify-content: center;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.portfolio-gallery__item {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(37, 40, 42, 0.1);
  transition: all 0.4s ease;
  cursor: pointer;
  flex-shrink: 0;
  width: 400px;
}

.portfolio-gallery__item:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(37, 40, 42, 0.15);
}

.portfolio-gallery__image {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
  background: var(--secondary-50);
}

/* Navigation pour tous les devices */
.portfolio-gallery__navigation {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
}

.portfolio-gallery__nav {
  width: 50px;
  height: 50px;
  background: rgba(37, 40, 42, 0.1);
  border: 1px solid rgba(37, 40, 42, 0.1);
  border-radius: 50%;
  color: var(--dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.portfolio-gallery__nav:hover {
  background: var(--primary);
  color: white;
  transform: scale(1.1);
}

.portfolio-gallery__nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
}

.portfolio-gallery__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.portfolio-gallery__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(37, 40, 42, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.portfolio-gallery__item:hover .portfolio-gallery__overlay {
  opacity: 1;
}

.portfolio-gallery__item:hover .portfolio-gallery__image img {
  transform: scale(1.1);
}

.portfolio-gallery__zoom {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dark);
  backdrop-filter: blur(10px);
  transform: scale(0.8);
  transition: transform 0.3s ease;
}

.portfolio-gallery__item:hover .portfolio-gallery__zoom {
  transform: scale(1);
}

/* ================================
   PORTFOLIO LIGHTBOX
   ================================ */

.portfolio-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}

.portfolio-lightbox--active {
  display: flex;
}

.portfolio-lightbox__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
}

.portfolio-lightbox__content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
}

.portfolio-lightbox__close {
  position: absolute;
  top: -60px;
  right: 0;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.portfolio-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.portfolio-lightbox__image-container {
  max-width: 100%;
  max-height: calc(100% - 120px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.portfolio-lightbox__image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.portfolio-lightbox__navigation {
  position: absolute;
  top: 50%;
  left: -80px;
  right: -80px;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.portfolio-lightbox__nav {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  pointer-events: auto;
}

.portfolio-lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.portfolio-lightbox__nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
}

.portfolio-lightbox__counter {
  margin-top: 20px;
  color: white;
  font-size: 16px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.1);
  padding: 8px 16px;
  border-radius: 20px;
  backdrop-filter: blur(10px);
}

@media (max-width: 768px) {

  .testimonial-use-case{
    margin-left: 30px !important;
    margin-right: 30px !important;
  }
  /* Listing styles */
  .listing-hero__title {
    font-size: 36px;
  }
  
  .listing-hero__subtitle {
    font-size: 18px;
  }
  
  .use-cases-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 40px;
  }
  
  .use-case-card__header {
    padding: 20px 20px 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .use-case-card__content {
    padding: 0 20px;
  }
  
  .use-case-card__metrics {
    padding: 0 20px;
  }
  
  .use-case-card__footer {
    padding: 0 20px 20px;
  }
  
  /* Detail page styles */
  .use-case-hero__title {
    font-size: 32px;
  }
  
  .use-case-hero__collaboration {
    gap: 20px;
    margin-bottom: 30px;
  }
  
  .collaboration-item {
    height: 60px;
    min-width: 100px;
  }
  
  .collaboration-logo {
    max-height: 50px;
    max-width: 140px;
  }
  
  .collaboration-separator svg {
    width: 20px;
    height: 20px;
  }
  
  /* Bouton retour mobile */
  .use-case-hero__back-btn {
    top: 20px;
    left: 20px;
    width: 40px;
    height: 40px;
  }
  
  /* Hero metrics responsive */
  .hero-metrics-card {
    width: 95%;
    margin: 30px auto -40px;
    padding: 30px 20px 40px;
    gap: 20px;
    flex-direction: initial;
  }
  
  .hero-metric-item {
    min-width: auto;
    flex: none;
  }
  
  .hero-metric-item h3 {
    font-size: 36px;
  }
  
  .hero-metric-item p {
    font-size: 14px;
  }
  
  .content-section__title {
    font-size: 28px;
  }
  
  .content-section__text {
    font-size: 15px;
  }
  
  .content-section--results .content-section__text {
    padding: 24px;
  }
  
  /* Portfolio gallery responsive */
  .portfolio-gallery__wrapper {
    padding: 0 20px 20px;
  }
  
  .portfolio-gallery__track {
    gap: 16px;
    justify-content: flex-start;
  }
  
  .portfolio-gallery__item {
    width: 280px;
  }
  
  .portfolio-gallery__image {
    height: 250px;
  }
  
  .portfolio-gallery__zoom {
    width: 50px;
    height: 50px;
  }
  
  .portfolio-gallery__nav {
    width: 44px;
    height: 44px;
  }
  
  /* Lightbox mobile */
  .portfolio-lightbox__navigation {
    left: -60px;
    right: -60px;
  }
  
  .portfolio-lightbox__nav {
    width: 44px;
    height: 44px;
  }
  
  .portfolio-lightbox__close {
    top: -50px;
    width: 40px;
    height: 40px;
  }
  
  .container--narrow {
    padding: 0 16px;
  }
  
  .metrics-use-case__title {
    font-size: 28px;
  }
  
  .metric-card__content h3 {
    font-size: 36px;
  }
  
  .testimonial-use-case__text {
    font-size: 20px;
  }
  
  .testimonial-use-case__avatar {
    width: 56px;
    height: 56px;
  }
}

/* Layouts */
/* =================================
   LAYOUT DARK MODE STYLES
   ================================= */

.layout--dark {
  /* Background du body en mode dark */
  background-color: #25282A;
}

/* Header principal transparent */
.layout--dark .main-header {
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.layout--dark .site-header--landing-page, .layout--dark .site-header--landing-page .main-header{
  background-color: transparent !important;
  border-bottom: none !important;
}

/* Logo en blanc (inversion des couleurs) */
.layout--dark .site-header__logo img,
.layout--dark .main-header__logo img.logo-light {
  filter: brightness(0) invert(1);
}

/* Liens du menu en blanc */
.layout--dark .nav-menu__link {
  color: white !important;
}

/* Hover des liens du menu */
.layout--dark .nav-menu__link:hover {
  color: var(--primary) !important;
}

/* Main en mode scroll fixe - pas de padding-top */
.scroll-mode-fixed .layout--dark main {
  padding-top: 0px !important;
}

.layout--dark .header-lang-selector__button {
  color: var(--color-white) !important;
}

/* Header scrolled avec background noir et blur */
.layout--dark .site-header.scrolled {
  background-color: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Transition douce pour le header scrolled */
.layout--dark .site-header {
  transition: all 0.3s ease;
}

/* Liens actifs dans le menu */
.layout--dark .nav-menu__link.active {
  color: var(--primary) !important;
}

/* Boutons dans le menu header */
.layout--dark .main-header__actions .btn {
  background-color: var(--primary);
  color: var(--color-dark) !important;
  border-color: var(--primary);
}

.layout--dark .main-header__actions .btn:hover {
  background-color: white !important;
  color: var(--color-dark) !important;
  border-color: white;
}

/* Bouton CTA dans le header (si présent) */
.layout--dark .header-cta {
  background-color: var(--primary);
  color: white;
}

/* Mobile menu overlay en dark */
.layout--dark .mobile-menu-overlay {
  background-color: rgba(37, 40, 42, 0.95);
}

.layout--dark .mobile-toggle {
  color: var(--color-white);
}

.layout--dark .mobile-toggle:hover {
  color: var(--primary);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .layout--dark .site-header.scrolled {
    background-color: rgba(0, 0, 0, 0.3);
  }
}

 /* ------------------------------
  * 7. UTILITIES
  * Classes utilitaires avec priorité maximale
  * TOUJOURS À LA FIN pour garantir leur priorité
  * ------------------------------ */
/* 
 * CLASSES UTILITAIRES GÉNÉRALES
 * Ce fichier contient des classes utilitaires générales qui complètent
 * celles déjà définies dans global.css
 */

/* =================================
   POSITIONNEMENT AVANCÉ
   ================================= */

/* Classes pour le positionnement absolu avancé */
.absolute-center {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.absolute-fill {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
}

.absolute-top-center {
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.absolute-bottom-center {
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.absolute-middle-left {
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  transform: translateY(-50%) !important;
}

.absolute-middle-right {
  position: absolute !important;
  top: 50% !important;
  right: 0 !important;
  transform: translateY(-50%) !important;
}

/* =================================
   Z-INDEX SUPPLÉMENTAIRES
   ================================= */

.z-negative { z-index: -1 !important; }
.z-60 { z-index: 60 !important; }
.z-70 { z-index: 70 !important; }
.z-80 { z-index: 80 !important; }
.z-90 { z-index: 90 !important; }
.z-100 { z-index: 100 !important; }
.z-max { z-index: 9999 !important; }

/* =================================
   CURSEURS AVANCÉS
   ================================= */

.cursor-grab { cursor: grab !important; }
.cursor-grabbing { cursor: grabbing !important; }
.cursor-zoom-in { cursor: zoom-in !important; }
.cursor-zoom-out { cursor: zoom-out !important; }
.cursor-copy { cursor: copy !important; }
.cursor-move { cursor: move !important; }
.cursor-not-allowed { cursor: not-allowed !important; }
.cursor-context-menu { cursor: context-menu !important; }
.cursor-crosshair { cursor: crosshair !important; }
.cursor-text { cursor: text !important; }
.cursor-wait { cursor: wait !important; }
.cursor-progress { cursor: progress !important; }
.cursor-help { cursor: help !important; }

/* =================================
   TRANSFORMATIONS
   ================================= */

.translate-x-0 { transform: translateX(0) !important; }
.translate-x-full { transform: translateX(100%) !important; }
.translate-x-half { transform: translateX(50%) !important; }
.translate-x-negative-full { transform: translateX(-100%) !important; }
.translate-x-negative-half { transform: translateX(-50%) !important; }

.translate-y-0 { transform: translateY(0) !important; }
.translate-y-full { transform: translateY(100%) !important; }
.translate-y-half { transform: translateY(50%) !important; }
.translate-y-negative-full { transform: translateY(-100%) !important; }
.translate-y-negative-half { transform: translateY(-50%) !important; }

.scale-0 { transform: scale(0) !important; }
.scale-50 { transform: scale(0.5) !important; }
.scale-75 { transform: scale(0.75) !important; }
.scale-90 { transform: scale(0.9) !important; }
.scale-100 { transform: scale(1) !important; }
.scale-110 { transform: scale(1.1) !important; }
.scale-125 { transform: scale(1.25) !important; }
.scale-150 { transform: scale(1.5) !important; }

.rotate-0 { transform: rotate(0deg) !important; }
.rotate-45 { transform: rotate(45deg) !important; }
.rotate-90 { transform: rotate(90deg) !important; }
.rotate-180 { transform: rotate(180deg) !important; }
.rotate-270 { transform: rotate(270deg) !important; }
.rotate-negative-45 { transform: rotate(-45deg) !important; }
.rotate-negative-90 { transform: rotate(-90deg) !important; }

/* =================================
   FILTRES VISUELS
   ================================= */

.blur-sm { filter: blur(2px) !important; }
.blur { filter: blur(4px) !important; }
.blur-md { filter: blur(8px) !important; }
.blur-lg { filter: blur(16px) !important; }
.blur-xl { filter: blur(24px) !important; }
.blur-none { filter: blur(0) !important; }

.brightness-0 { filter: brightness(0) !important; }
.brightness-50 { filter: brightness(0.5) !important; }
.brightness-75 { filter: brightness(0.75) !important; }
.brightness-90 { filter: brightness(0.9) !important; }
.brightness-100 { filter: brightness(1) !important; }
.brightness-125 { filter: brightness(1.25) !important; }
.brightness-150 { filter: brightness(1.5) !important; }
.brightness-200 { filter: brightness(2) !important; }

.grayscale-0 { filter: grayscale(0) !important; }
.grayscale-50 { filter: grayscale(0.5) !important; }
.grayscale-100 { filter: grayscale(1) !important; }

.contrast-0 { filter: contrast(0) !important; }
.contrast-50 { filter: contrast(0.5) !important; }
.contrast-100 { filter: contrast(1) !important; }
.contrast-150 { filter: contrast(1.5) !important; }
.contrast-200 { filter: contrast(2) !important; }

/* =================================
   CLIPPING ET MASQUAGE
   ================================= */

.clip-circle {
  clip-path: circle(50%) !important;
}

.clip-ellipse {
  clip-path: ellipse(50% 25% at 50% 50%) !important;
}

.clip-triangle {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%) !important;
}

.clip-rhombus {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) !important;
}

.clip-hexagon {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%) !important;
}

/* =================================
   MIXINS UTILITAIRES AVANCÉS
   ================================= */

.inset-0 {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
}

.fixed-cover {
  position: fixed !important;
  inset: 0 !important; /* équivalent à top/right/bottom/left: 0 */
  width: 100% !important;
  height: 100% !important;
}

/* =================================
   ANIMATIONS PRÉDÉFINIES
   ================================= */

.animate-spin {
  animation: spin 1s linear infinite !important;
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

.animate-bounce {
  animation: bounce 1s infinite !important;
}

.animate-fade {
  animation: fade 1s ease-in-out !important;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

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

@keyframes fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* =================================
   GESTION DU SCROLL
   ================================= */

.scrollbar-hide {
  -ms-overflow-style: none !important; /* IE and Edge */
  scrollbar-width: none !important; /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none !important; /* Chrome, Safari and Opera */
}

.scroll-smooth {
  scroll-behavior: smooth !important;
}

/* =================================
   ACCESSIBILITÉ AVANCÉE
   ================================= */

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

.screen-reader-only.focusable:focus {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

.forced-colors-adjust-none {
  forced-color-adjust: none !important;
}

/* =================================
   IMPRESSION
   ================================= */

@media print {
  .print-hide {
    display: none !important;
  }

  .print-show {
    display: block !important;
  }

  .print-break-before {
    page-break-before: always !important;
  }

  .print-break-after {
    page-break-after: always !important;
  }

  .print-break-inside-avoid {
    page-break-inside: avoid !important;
  }
}

/* =================================
   CONTENEURS SPÉCIAUX
   ================================= */

.backdrop-blur-sm {
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

.backdrop-blur {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.backdrop-blur-md {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.backdrop-blur-lg {
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

.backdrop-blur-xl {
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

/* =================================
   COMPTEURS ET LISTES
   ================================= */

.list-counter {
  counter-reset: listCounter !important;
}

.list-counter > * {
  counter-increment: listCounter !important;
}

.list-counter > *::before {
  content: counter(listCounter) !important;
}

/* =================================
   STYLES DE SECTION
   ================================= */

.section-rounded {
  border-radius: 20px !important;
  margin: 20px !important;
}

/* =================================
   RESPONSIVE
   ================================= */

@media (max-width: 768px) {
  .md-pointer-events-none { pointer-events: none !important; }
  .md-blur { filter: blur(4px) !important; }
  .md-grayscale { filter: grayscale(1) !important; }
  .md-scale-90 { transform: scale(0.9) !important; }
  
  /* Styles de section responsifs */
  .section-rounded {
    margin: 16px !important;
  }
}

@media (max-width: 480px) {
  .sm-pointer-events-none { pointer-events: none !important; }
  .sm-blur { filter: blur(4px) !important; }
  .sm-grayscale { filter: grayscale(1) !important; }
  .sm-scale-90 { transform: scale(0.9) !important; }
  
  /* Styles de section responsifs */
  .section-rounded {
    margin: 16px !important;
  }
}
/* 
 * CLASSES UTILITAIRES D'ESPACEMENT
 * Ce fichier contient les classes utilitaires pour les marges et paddings
 * qui ne sont PAS déjà présentes dans global.css
 */

/* =================================
   MARGES (Margin)
   ================================= */

/* Toutes les directions */
.m-0 { margin: var(--space-0) !important; }
.m-1 { margin: var(--space-1) !important; }
.m-2 { margin: var(--space-2) !important; }
.m-3 { margin: var(--space-3) !important; }
.m-4 { margin: var(--space-4) !important; }
.m-5 { margin: var(--space-5) !important; }
.m-6 { margin: var(--space-6) !important; }
.m-7 { margin: var(--space-7) !important; }
.m-8 { margin: var(--space-8) !important; }
.m-9 { margin: var(--space-9) !important; }
.m-10 { margin: var(--space-10) !important; }

/* Axe Vertical (Y) */
.my-0 { margin-top: var(--space-0) !important; margin-bottom: var(--space-0) !important; }
.my-1 { margin-top: var(--space-1) !important; margin-bottom: var(--space-1) !important; }
.my-2 { margin-top: var(--space-2) !important; margin-bottom: var(--space-2) !important; }
.my-3 { margin-top: var(--space-3) !important; margin-bottom: var(--space-3) !important; }
.my-4 { margin-top: var(--space-4) !important; margin-bottom: var(--space-4) !important; }
.my-5 { margin-top: var(--space-5) !important; margin-bottom: var(--space-5) !important; }
.my-6 { margin-top: var(--space-6) !important; margin-bottom: var(--space-6) !important; }
.my-7 { margin-top: var(--space-7) !important; margin-bottom: var(--space-7) !important; }
.my-8 { margin-top: var(--space-8) !important; margin-bottom: var(--space-8) !important; }
.my-9 { margin-top: var(--space-9) !important; margin-bottom: var(--space-9) !important; }
.my-10 { margin-top: var(--space-10) !important; margin-bottom: var(--space-10) !important; }

/* Axe Horizontal (X) */
.mx-0 { margin-left: var(--space-0) !important; margin-right: var(--space-0) !important; }
.mx-1 { margin-left: var(--space-1) !important; margin-right: var(--space-1) !important; }
.mx-2 { margin-left: var(--space-2) !important; margin-right: var(--space-2) !important; }
.mx-3 { margin-left: var(--space-3) !important; margin-right: var(--space-3) !important; }
.mx-4 { margin-left: var(--space-4) !important; margin-right: var(--space-4) !important; }
.mx-5 { margin-left: var(--space-5) !important; margin-right: var(--space-5) !important; }
.mx-6 { margin-left: var(--space-6) !important; margin-right: var(--space-6) !important; }
.mx-7 { margin-left: var(--space-7) !important; margin-right: var(--space-7) !important; }
.mx-8 { margin-left: var(--space-8) !important; margin-right: var(--space-8) !important; }
.mx-9 { margin-left: var(--space-9) !important; margin-right: var(--space-9) !important; }
.mx-10 { margin-left: var(--space-10) !important; margin-right: var(--space-10) !important; }

/* Haut (Top) */
.mt-0 { margin-top: var(--space-0) !important; }
.mt-1 { margin-top: var(--space-1) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-5 { margin-top: var(--space-5) !important; }
.mt-6 { margin-top: var(--space-6) !important; }
.mt-7 { margin-top: var(--space-7) !important; }
.mt-8 { margin-top: var(--space-8) !important; }
.mt-9 { margin-top: var(--space-9) !important; }
.mt-10 { margin-top: var(--space-10) !important; }

/* Bas (Bottom) */
.mb-0 { margin-bottom: var(--space-0) !important; }
.mb-1 { margin-bottom: var(--space-1) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-5 { margin-bottom: var(--space-5) !important; }
.mb-6 { margin-bottom: var(--space-6) !important; }
.mb-7 { margin-bottom: var(--space-7) !important; }
.mb-8 { margin-bottom: var(--space-8) !important; }
.mb-9 { margin-bottom: var(--space-9) !important; }
.mb-10 { margin-bottom: var(--space-10) !important; }

/* Gauche (Left) */
.ml-0 { margin-left: var(--space-0) !important; }
.ml-1 { margin-left: var(--space-1) !important; }
.ml-2 { margin-left: var(--space-2) !important; }
.ml-3 { margin-left: var(--space-3) !important; }
.ml-4 { margin-left: var(--space-4) !important; }
.ml-5 { margin-left: var(--space-5) !important; }
.ml-6 { margin-left: var(--space-6) !important; }
.ml-7 { margin-left: var(--space-7) !important; }
.ml-8 { margin-left: var(--space-8) !important; }
.ml-9 { margin-left: var(--space-9) !important; }
.ml-10 { margin-left: var(--space-10) !important; }

/* Droite (Right) */
.mr-0 { margin-right: var(--space-0) !important; }
.mr-1 { margin-right: var(--space-1) !important; }
.mr-2 { margin-right: var(--space-2) !important; }
.mr-3 { margin-right: var(--space-3) !important; }
.mr-4 { margin-right: var(--space-4) !important; }
.mr-5 { margin-right: var(--space-5) !important; }
.mr-6 { margin-right: var(--space-6) !important; }
.mr-7 { margin-right: var(--space-7) !important; }
.mr-8 { margin-right: var(--space-8) !important; }
.mr-9 { margin-right: var(--space-9) !important; }
.mr-10 { margin-right: var(--space-10) !important; }

/* =================================
   PADDING
   ================================= */

/* Toutes les directions */
.p-0 { padding: var(--space-0) !important; }
.p-1 { padding: var(--space-1) !important; }
.p-2 { padding: var(--space-2) !important; }
.p-3 { padding: var(--space-3) !important; }
.p-4 { padding: var(--space-4) !important; }
.p-5 { padding: var(--space-5) !important; }
.p-6 { padding: var(--space-6) !important; }
.p-7 { padding: var(--space-7) !important; }
.p-8 { padding: var(--space-8) !important; }
.p-9 { padding: var(--space-9) !important; }
.p-10 { padding: var(--space-10) !important; }

/* Axe Vertical (Y) */
.py-0 { padding-top: var(--space-0) !important; padding-bottom: var(--space-0) !important; }
.py-1 { padding-top: var(--space-1) !important; padding-bottom: var(--space-1) !important; }
.py-2 { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
.py-3 { padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; }
.py-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
.py-5 { padding-top: var(--space-5) !important; padding-bottom: var(--space-5) !important; }
.py-6 { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }
.py-7 { padding-top: var(--space-7) !important; padding-bottom: var(--space-7) !important; }
.py-8 { padding-top: var(--space-8) !important; padding-bottom: var(--space-8) !important; }
.py-9 { padding-top: var(--space-9) !important; padding-bottom: var(--space-9) !important; }
.py-10 { padding-top: var(--space-10) !important; padding-bottom: var(--space-10) !important; }

/* Padding vertical spécifique pour les sections */
.py-section { padding-top: var(--space-10) !important; padding-bottom: var(--space-10) !important; }

/* Axe Horizontal (X) */
.px-0 { padding-left: var(--space-0) !important; padding-right: var(--space-0) !important; }
.px-1 { padding-left: var(--space-1) !important; padding-right: var(--space-1) !important; }
.px-2 { padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
.px-3 { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
.px-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
.px-5 { padding-left: var(--space-5) !important; padding-right: var(--space-5) !important; }
.px-6 { padding-left: var(--space-6) !important; padding-right: var(--space-6) !important; }
.px-7 { padding-left: var(--space-7) !important; padding-right: var(--space-7) !important; }
.px-8 { padding-left: var(--space-8) !important; padding-right: var(--space-8) !important; }
.px-9 { padding-left: var(--space-9) !important; padding-right: var(--space-9) !important; }
.px-10 { padding-left: var(--space-10) !important; padding-right: var(--space-10) !important; }

/* Haut (Top) */
.pt-0 { padding-top: var(--space-0) !important; }
.pt-1 { padding-top: var(--space-1) !important; }
.pt-2 { padding-top: var(--space-2) !important; }
.pt-3 { padding-top: var(--space-3) !important; }
.pt-4 { padding-top: var(--space-4) !important; }
.pt-5 { padding-top: var(--space-5) !important; }
.pt-6 { padding-top: var(--space-6) !important; }
.pt-7 { padding-top: var(--space-7) !important; }
.pt-8 { padding-top: var(--space-8) !important; }
.pt-9 { padding-top: var(--space-9) !important; }
.pt-10 { padding-top: var(--space-10) !important; }

/* Bas (Bottom) */
.pb-0 { padding-bottom: var(--space-0) !important; }
.pb-1 { padding-bottom: var(--space-1) !important; }
.pb-2 { padding-bottom: var(--space-2) !important; }
.pb-3 { padding-bottom: var(--space-3) !important; }
.pb-4 { padding-bottom: var(--space-4) !important; }
.pb-5 { padding-bottom: var(--space-5) !important; }
.pb-6 { padding-bottom: var(--space-6) !important; }
.pb-7 { padding-bottom: var(--space-7) !important; }
.pb-8 { padding-bottom: var(--space-8) !important; }
.pb-9 { padding-bottom: var(--space-9) !important; }
.pb-10 { padding-bottom: var(--space-10) !important; }

/* Gauche (Left) */
.pl-0 { padding-left: var(--space-0) !important; }
.pl-1 { padding-left: var(--space-1) !important; }
.pl-2 { padding-left: var(--space-2) !important; }
.pl-3 { padding-left: var(--space-3) !important; }
.pl-4 { padding-left: var(--space-4) !important; }
.pl-5 { padding-left: var(--space-5) !important; }
.pl-6 { padding-left: var(--space-6) !important; }
.pl-7 { padding-left: var(--space-7) !important; }
.pl-8 { padding-left: var(--space-8) !important; }
.pl-9 { padding-left: var(--space-9) !important; }
.pl-10 { padding-left: var(--space-10) !important; }

/* Droite (Right) */
.pr-0 { padding-right: var(--space-0) !important; }
.pr-1 { padding-right: var(--space-1) !important; }
.pr-2 { padding-right: var(--space-2) !important; }
.pr-3 { padding-right: var(--space-3) !important; }
.pr-4 { padding-right: var(--space-4) !important; }
.pr-5 { padding-right: var(--space-5) !important; }
.pr-6 { padding-right: var(--space-6) !important; }
.pr-7 { padding-right: var(--space-7) !important; }
.pr-8 { padding-right: var(--space-8) !important; }
.pr-9 { padding-right: var(--space-9) !important; }
.pr-10 { padding-right: var(--space-10) !important; }

/* =================================
   MARGES NÉGATIVES 
   ================================= */

.m-n1 { margin: calc(var(--space-1) * -1) !important; }
.m-n2 { margin: calc(var(--space-2) * -1) !important; }
.m-n3 { margin: calc(var(--space-3) * -1) !important; }
.m-n4 { margin: calc(var(--space-4) * -1) !important; }
.m-n5 { margin: calc(var(--space-5) * -1) !important; }
.m-n6 { margin: calc(var(--space-6) * -1) !important; }
.m-n7 { margin: calc(var(--space-7) * -1) !important; }
.m-n8 { margin: calc(var(--space-8) * -1) !important; }
.m-n9 { margin: calc(var(--space-9) * -1) !important; }
.m-n10 { margin: calc(var(--space-10) * -1) !important; }

.mx-n1 { margin-left: calc(var(--space-1) * -1) !important; margin-right: calc(var(--space-1) * -1) !important; }
.mx-n2 { margin-left: calc(var(--space-2) * -1) !important; margin-right: calc(var(--space-2) * -1) !important; }
.mx-n3 { margin-left: calc(var(--space-3) * -1) !important; margin-right: calc(var(--space-3) * -1) !important; }
.mx-n4 { margin-left: calc(var(--space-4) * -1) !important; margin-right: calc(var(--space-4) * -1) !important; }
.mx-n5 { margin-left: calc(var(--space-5) * -1) !important; margin-right: calc(var(--space-5) * -1) !important; }
.mx-n6 { margin-left: calc(var(--space-6) * -1) !important; margin-right: calc(var(--space-6) * -1) !important; }
.mx-n7 { margin-left: calc(var(--space-7) * -1) !important; margin-right: calc(var(--space-7) * -1) !important; }
.mx-n8 { margin-left: calc(var(--space-8) * -1) !important; margin-right: calc(var(--space-8) * -1) !important; }
.mx-n9 { margin-left: calc(var(--space-9) * -1) !important; margin-right: calc(var(--space-9) * -1) !important; }
.mx-n10 { margin-left: calc(var(--space-10) * -1) !important; margin-right: calc(var(--space-10) * -1) !important; }

.my-n1 { margin-top: calc(var(--space-1) * -1) !important; margin-bottom: calc(var(--space-1) * -1) !important; }
.my-n2 { margin-top: calc(var(--space-2) * -1) !important; margin-bottom: calc(var(--space-2) * -1) !important; }
.my-n3 { margin-top: calc(var(--space-3) * -1) !important; margin-bottom: calc(var(--space-3) * -1) !important; }
.my-n4 { margin-top: calc(var(--space-4) * -1) !important; margin-bottom: calc(var(--space-4) * -1) !important; }
.my-n5 { margin-top: calc(var(--space-5) * -1) !important; margin-bottom: calc(var(--space-5) * -1) !important; }
.my-n6 { margin-top: calc(var(--space-6) * -1) !important; margin-bottom: calc(var(--space-6) * -1) !important; }
.my-n7 { margin-top: calc(var(--space-7) * -1) !important; margin-bottom: calc(var(--space-7) * -1) !important; }
.my-n8 { margin-top: calc(var(--space-8) * -1) !important; margin-bottom: calc(var(--space-8) * -1) !important; }
.my-n9 { margin-top: calc(var(--space-9) * -1) !important; margin-bottom: calc(var(--space-9) * -1) !important; }
.my-n10 { margin-top: calc(var(--space-10) * -1) !important; margin-bottom: calc(var(--space-10) * -1) !important; }

/* =================================
   CLASSES DE MARGES AUTO
   ================================= */

.m-auto { margin: auto !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }
.mt-auto { margin-top: auto !important; }
.mb-auto { margin-bottom: auto !important; }
.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }

/* =================================
   ESPACEMENT RESPONSIVE
   ================================= */

/* Tablettes (max-width: 768px) */
@media (max-width: 768px) {
  /* Marges */
  .m-md-0 { margin: var(--space-0) !important; }
  .m-md-1 { margin: var(--space-1) !important; }
  .m-md-2 { margin: var(--space-2) !important; }
  .m-md-3 { margin: var(--space-3) !important; }
  .m-md-4 { margin: var(--space-4) !important; }
  .m-md-5 { margin: var(--space-5) !important; }
  .m-md-6 { margin: var(--space-6) !important; }
  .m-md-7 { margin: var(--space-7) !important; }
  .m-md-8 { margin: var(--space-8) !important; }
  .m-md-9 { margin: var(--space-9) !important; }
  .m-md-10 { margin: var(--space-10) !important; }

  .my-md-0 { margin-top: var(--space-0) !important; margin-bottom: var(--space-0) !important; }
  .my-md-1 { margin-top: var(--space-1) !important; margin-bottom: var(--space-1) !important; }
  .my-md-2 { margin-top: var(--space-2) !important; margin-bottom: var(--space-2) !important; }
  .my-md-3 { margin-top: var(--space-3) !important; margin-bottom: var(--space-3) !important; }
  .my-md-4 { margin-top: var(--space-4) !important; margin-bottom: var(--space-4) !important; }
  .my-md-5 { margin-top: var(--space-5) !important; margin-bottom: var(--space-5) !important; }
  .my-md-6 { margin-top: var(--space-6) !important; margin-bottom: var(--space-6) !important; }
  .my-md-7 { margin-top: var(--space-7) !important; margin-bottom: var(--space-7) !important; }
  .my-md-8 { margin-top: var(--space-8) !important; margin-bottom: var(--space-8) !important; }
  .my-md-9 { margin-top: var(--space-9) !important; margin-bottom: var(--space-9) !important; }
  .my-md-10 { margin-top: var(--space-10) !important; margin-bottom: var(--space-10) !important; }
  
  .mx-md-0 { margin-left: var(--space-0) !important; margin-right: var(--space-0) !important; }
  .mx-md-1 { margin-left: var(--space-1) !important; margin-right: var(--space-1) !important; }
  .mx-md-2 { margin-left: var(--space-2) !important; margin-right: var(--space-2) !important; }
  .mx-md-3 { margin-left: var(--space-3) !important; margin-right: var(--space-3) !important; }
  .mx-md-4 { margin-left: var(--space-4) !important; margin-right: var(--space-4) !important; }
  .mx-md-5 { margin-left: var(--space-5) !important; margin-right: var(--space-5) !important; }
  .mx-md-6 { margin-left: var(--space-6) !important; margin-right: var(--space-6) !important; }
  .mx-md-7 { margin-left: var(--space-7) !important; margin-right: var(--space-7) !important; }
  .mx-md-8 { margin-left: var(--space-8) !important; margin-right: var(--space-8) !important; }
  .mx-md-9 { margin-left: var(--space-9) !important; margin-right: var(--space-9) !important; }
  .mx-md-10 { margin-left: var(--space-10) !important; margin-right: var(--space-10) !important; }
  
  .mt-md-0 { margin-top: var(--space-0) !important; }
  .mt-md-1 { margin-top: var(--space-1) !important; }
  .mt-md-2 { margin-top: var(--space-2) !important; }
  .mt-md-3 { margin-top: var(--space-3) !important; }
  .mt-md-4 { margin-top: var(--space-4) !important; }
  .mt-md-5 { margin-top: var(--space-5) !important; }
  .mt-md-6 { margin-top: var(--space-6) !important; }
  .mt-md-7 { margin-top: var(--space-7) !important; }
  .mt-md-8 { margin-top: var(--space-8) !important; }
  .mt-md-9 { margin-top: var(--space-9) !important; }
  .mt-md-10 { margin-top: var(--space-10) !important; }
  
  .mb-md-0 { margin-bottom: var(--space-0) !important; }
  .mb-md-1 { margin-bottom: var(--space-1) !important; }
  .mb-md-2 { margin-bottom: var(--space-2) !important; }
  .mb-md-3 { margin-bottom: var(--space-3) !important; }
  .mb-md-4 { margin-bottom: var(--space-4) !important; }
  .mb-md-5 { margin-bottom: var(--space-5) !important; }
  .mb-md-6 { margin-bottom: var(--space-6) !important; }
  .mb-md-7 { margin-bottom: var(--space-7) !important; }
  .mb-md-8 { margin-bottom: var(--space-8) !important; }
  .mb-md-9 { margin-bottom: var(--space-9) !important; }
  .mb-md-10 { margin-bottom: var(--space-10) !important; }
  
  .ml-md-0 { margin-left: var(--space-0) !important; }
  .ml-md-1 { margin-left: var(--space-1) !important; }
  .ml-md-2 { margin-left: var(--space-2) !important; }
  .ml-md-3 { margin-left: var(--space-3) !important; }
  .ml-md-4 { margin-left: var(--space-4) !important; }
  .ml-md-5 { margin-left: var(--space-5) !important; }
  .ml-md-6 { margin-left: var(--space-6) !important; }
  .ml-md-7 { margin-left: var(--space-7) !important; }
  .ml-md-8 { margin-left: var(--space-8) !important; }
  .ml-md-9 { margin-left: var(--space-9) !important; }
  .ml-md-10 { margin-left: var(--space-10) !important; }
  
  .mr-md-0 { margin-right: var(--space-0) !important; }
  .mr-md-1 { margin-right: var(--space-1) !important; }
  .mr-md-2 { margin-right: var(--space-2) !important; }
  .mr-md-3 { margin-right: var(--space-3) !important; }
  .mr-md-4 { margin-right: var(--space-4) !important; }
  .mr-md-5 { margin-right: var(--space-5) !important; }
  .mr-md-6 { margin-right: var(--space-6) !important; }
  .mr-md-7 { margin-right: var(--space-7) !important; }
  .mr-md-8 { margin-right: var(--space-8) !important; }
  .mr-md-9 { margin-right: var(--space-9) !important; }
  .mr-md-10 { margin-right: var(--space-10) !important; }

  /* Paddings */
  .p-md-0 { padding: var(--space-0) !important; }
  .p-md-1 { padding: var(--space-1) !important; }
  .p-md-2 { padding: var(--space-2) !important; }
  .p-md-3 { padding: var(--space-3) !important; }
  .p-md-4 { padding: var(--space-4) !important; }
  .p-md-5 { padding: var(--space-5) !important; }
  .p-md-6 { padding: var(--space-6) !important; }
  .p-md-7 { padding: var(--space-7) !important; }
  .p-md-8 { padding: var(--space-8) !important; }
  .p-md-9 { padding: var(--space-9) !important; }
  .p-md-10 { padding: var(--space-10) !important; }
  
  .py-md-0 { padding-top: var(--space-0) !important; padding-bottom: var(--space-0) !important; }
  .py-md-1 { padding-top: var(--space-1) !important; padding-bottom: var(--space-1) !important; }
  .py-md-2 { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
  .py-md-3 { padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; }
  .py-md-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
  .py-md-5 { padding-top: var(--space-5) !important; padding-bottom: var(--space-5) !important; }
  .py-md-6 { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }
  .py-md-7 { padding-top: var(--space-7) !important; padding-bottom: var(--space-7) !important; }
  .py-md-8 { padding-top: var(--space-8) !important; padding-bottom: var(--space-8) !important; }
  .py-md-9 { padding-top: var(--space-9) !important; padding-bottom: var(--space-9) !important; }
  .py-md-10 { padding-top: var(--space-10) !important; padding-bottom: var(--space-10) !important; }
  
  .px-md-0 { padding-left: var(--space-0) !important; padding-right: var(--space-0) !important; }
  .px-md-1 { padding-left: var(--space-1) !important; padding-right: var(--space-1) !important; }
  .px-md-2 { padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
  .px-md-3 { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
  .px-md-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
  .px-md-5 { padding-left: var(--space-5) !important; padding-right: var(--space-5) !important; }
  .px-md-6 { padding-left: var(--space-6) !important; padding-right: var(--space-6) !important; }
  .px-md-7 { padding-left: var(--space-7) !important; padding-right: var(--space-7) !important; }
  .px-md-8 { padding-left: var(--space-8) !important; padding-right: var(--space-8) !important; }
  .px-md-9 { padding-left: var(--space-9) !important; padding-right: var(--space-9) !important; }
  .px-md-10 { padding-left: var(--space-10) !important; padding-right: var(--space-10) !important; }
  
  .pt-md-0 { padding-top: var(--space-0) !important; }
  .pt-md-1 { padding-top: var(--space-1) !important; }
  .pt-md-2 { padding-top: var(--space-2) !important; }
  .pt-md-3 { padding-top: var(--space-3) !important; }
  .pt-md-4 { padding-top: var(--space-4) !important; }
  .pt-md-5 { padding-top: var(--space-5) !important; }
  .pt-md-6 { padding-top: var(--space-6) !important; }
  .pt-md-7 { padding-top: var(--space-7) !important; }
  .pt-md-8 { padding-top: var(--space-8) !important; }
  .pt-md-9 { padding-top: var(--space-9) !important; }
  .pt-md-10 { padding-top: var(--space-10) !important; }
  
  .pb-md-0 { padding-bottom: var(--space-0) !important; }
  .pb-md-1 { padding-bottom: var(--space-1) !important; }
  .pb-md-2 { padding-bottom: var(--space-2) !important; }
  .pb-md-3 { padding-bottom: var(--space-3) !important; }
  .pb-md-4 { padding-bottom: var(--space-4) !important; }
  .pb-md-5 { padding-bottom: var(--space-5) !important; }
  .pb-md-6 { padding-bottom: var(--space-6) !important; }
  .pb-md-7 { padding-bottom: var(--space-7) !important; }
  .pb-md-8 { padding-bottom: var(--space-8) !important; }
  .pb-md-9 { padding-bottom: var(--space-9) !important; }
  .pb-md-10 { padding-bottom: var(--space-10) !important; }
  
  .pl-md-0 { padding-left: var(--space-0) !important; }
  .pl-md-1 { padding-left: var(--space-1) !important; }
  .pl-md-2 { padding-left: var(--space-2) !important; }
  .pl-md-3 { padding-left: var(--space-3) !important; }
  .pl-md-4 { padding-left: var(--space-4) !important; }
  .pl-md-5 { padding-left: var(--space-5) !important; }
  .pl-md-6 { padding-left: var(--space-6) !important; }
  .pl-md-7 { padding-left: var(--space-7) !important; }
  .pl-md-8 { padding-left: var(--space-8) !important; }
  .pl-md-9 { padding-left: var(--space-9) !important; }
  .pl-md-10 { padding-left: var(--space-10) !important; }
  
  .pr-md-0 { padding-right: var(--space-0) !important; }
  .pr-md-1 { padding-right: var(--space-1) !important; }
  .pr-md-2 { padding-right: var(--space-2) !important; }
  .pr-md-3 { padding-right: var(--space-3) !important; }
  .pr-md-4 { padding-right: var(--space-4) !important; }
  .pr-md-5 { padding-right: var(--space-5) !important; }
  .pr-md-6 { padding-right: var(--space-6) !important; }
  .pr-md-7 { padding-right: var(--space-7) !important; }
  .pr-md-8 { padding-right: var(--space-8) !important; }
  .pr-md-9 { padding-right: var(--space-9) !important; }
  .pr-md-10 { padding-right: var(--space-10) !important; }
}

/* Mobiles (max-width: 480px) */
@media (max-width: 480px) {
  /* Marges */
  .m-sm-0 { margin: var(--space-0) !important; }
  .m-sm-1 { margin: var(--space-1) !important; }
  .m-sm-2 { margin: var(--space-2) !important; }
  .m-sm-3 { margin: var(--space-3) !important; }
  .m-sm-4 { margin: var(--space-4) !important; }
  .m-sm-5 { margin: var(--space-5) !important; }
  .m-sm-6 { margin: var(--space-6) !important; }
  .m-sm-7 { margin: var(--space-7) !important; }
  .m-sm-8 { margin: var(--space-8) !important; }
  .m-sm-9 { margin: var(--space-9) !important; }
  .m-sm-10 { margin: var(--space-10) !important; }

  .my-sm-0 { margin-top: var(--space-0) !important; margin-bottom: var(--space-0) !important; }
  .my-sm-1 { margin-top: var(--space-1) !important; margin-bottom: var(--space-1) !important; }
  .my-sm-2 { margin-top: var(--space-2) !important; margin-bottom: var(--space-2) !important; }
  .my-sm-3 { margin-top: var(--space-3) !important; margin-bottom: var(--space-3) !important; }
  .my-sm-4 { margin-top: var(--space-4) !important; margin-bottom: var(--space-4) !important; }
  .my-sm-5 { margin-top: var(--space-5) !important; margin-bottom: var(--space-5) !important; }
  .my-sm-6 { margin-top: var(--space-6) !important; margin-bottom: var(--space-6) !important; }
  .my-sm-7 { margin-top: var(--space-7) !important; margin-bottom: var(--space-7) !important; }
  .my-sm-8 { margin-top: var(--space-8) !important; margin-bottom: var(--space-8) !important; }
  .my-sm-9 { margin-top: var(--space-9) !important; margin-bottom: var(--space-9) !important; }
  .my-sm-10 { margin-top: var(--space-10) !important; margin-bottom: var(--space-10) !important; }
  
  .mx-sm-0 { margin-left: var(--space-0) !important; margin-right: var(--space-0) !important; }
  .mx-sm-1 { margin-left: var(--space-1) !important; margin-right: var(--space-1) !important; }
  .mx-sm-2 { margin-left: var(--space-2) !important; margin-right: var(--space-2) !important; }
  .mx-sm-3 { margin-left: var(--space-3) !important; margin-right: var(--space-3) !important; }
  .mx-sm-4 { margin-left: var(--space-4) !important; margin-right: var(--space-4) !important; }
  .mx-sm-5 { margin-left: var(--space-5) !important; margin-right: var(--space-5) !important; }
  .mx-sm-6 { margin-left: var(--space-6) !important; margin-right: var(--space-6) !important; }
  .mx-sm-7 { margin-left: var(--space-7) !important; margin-right: var(--space-7) !important; }
  .mx-sm-8 { margin-left: var(--space-8) !important; margin-right: var(--space-8) !important; }
  .mx-sm-9 { margin-left: var(--space-9) !important; margin-right: var(--space-9) !important; }
  .mx-sm-10 { margin-left: var(--space-10) !important; margin-right: var(--space-10) !important; }
  
  .mt-sm-0 { margin-top: var(--space-0) !important; }
  .mt-sm-1 { margin-top: var(--space-1) !important; }
  .mt-sm-2 { margin-top: var(--space-2) !important; }
  .mt-sm-3 { margin-top: var(--space-3) !important; }
  .mt-sm-4 { margin-top: var(--space-4) !important; }
  .mt-sm-5 { margin-top: var(--space-5) !important; }
  .mt-sm-6 { margin-top: var(--space-6) !important; }
  .mt-sm-7 { margin-top: var(--space-7) !important; }
  .mt-sm-8 { margin-top: var(--space-8) !important; }
  .mt-sm-9 { margin-top: var(--space-9) !important; }
  .mt-sm-10 { margin-top: var(--space-10) !important; }
  
  .mb-sm-0 { margin-bottom: var(--space-0) !important; }
  .mb-sm-1 { margin-bottom: var(--space-1) !important; }
  .mb-sm-2 { margin-bottom: var(--space-2) !important; }
  .mb-sm-3 { margin-bottom: var(--space-3) !important; }
  .mb-sm-4 { margin-bottom: var(--space-4) !important; }
  .mb-sm-5 { margin-bottom: var(--space-5) !important; }
  .mb-sm-6 { margin-bottom: var(--space-6) !important; }
  .mb-sm-7 { margin-bottom: var(--space-7) !important; }
  .mb-sm-8 { margin-bottom: var(--space-8) !important; }
  .mb-sm-9 { margin-bottom: var(--space-9) !important; }
  .mb-sm-10 { margin-bottom: var(--space-10) !important; }
  
  .ml-sm-0 { margin-left: var(--space-0) !important; }
  .ml-sm-1 { margin-left: var(--space-1) !important; }
  .ml-sm-2 { margin-left: var(--space-2) !important; }
  .ml-sm-3 { margin-left: var(--space-3) !important; }
  .ml-sm-4 { margin-left: var(--space-4) !important; }
  .ml-sm-5 { margin-left: var(--space-5) !important; }
  .ml-sm-6 { margin-left: var(--space-6) !important; }
  .ml-sm-7 { margin-left: var(--space-7) !important; }
  .ml-sm-8 { margin-left: var(--space-8) !important; }
  .ml-sm-9 { margin-left: var(--space-9) !important; }
  .ml-sm-10 { margin-left: var(--space-10) !important; }
  
  .mr-sm-0 { margin-right: var(--space-0) !important; }
  .mr-sm-1 { margin-right: var(--space-1) !important; }
  .mr-sm-2 { margin-right: var(--space-2) !important; }
  .mr-sm-3 { margin-right: var(--space-3) !important; }
  .mr-sm-4 { margin-right: var(--space-4) !important; }
  .mr-sm-5 { margin-right: var(--space-5) !important; }
  .mr-sm-6 { margin-right: var(--space-6) !important; }
  .mr-sm-7 { margin-right: var(--space-7) !important; }
  .mr-sm-8 { margin-right: var(--space-8) !important; }
  .mr-sm-9 { margin-right: var(--space-9) !important; }
  .mr-sm-10 { margin-right: var(--space-10) !important; }

  /* Paddings */
  .p-sm-0 { padding: var(--space-0) !important; }
  .p-sm-1 { padding: var(--space-1) !important; }
  .p-sm-2 { padding: var(--space-2) !important; }
  .p-sm-3 { padding: var(--space-3) !important; }
  .p-sm-4 { padding: var(--space-4) !important; }
  .p-sm-5 { padding: var(--space-5) !important; }
  .p-sm-6 { padding: var(--space-6) !important; }
  .p-sm-7 { padding: var(--space-7) !important; }
  .p-sm-8 { padding: var(--space-8) !important; }
  .p-sm-9 { padding: var(--space-9) !important; }
  .p-sm-10 { padding: var(--space-10) !important; }

  .py-sm-0 { padding-top: var(--space-0) !important; padding-bottom: var(--space-0) !important; }
  .py-sm-1 { padding-top: var(--space-1) !important; padding-bottom: var(--space-1) !important; }
  .py-sm-2 { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
  .py-sm-3 { padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; }
  .py-sm-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
  .py-sm-5 { padding-top: var(--space-5) !important; padding-bottom: var(--space-5) !important; }
  .py-sm-6 { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }
  .py-sm-7 { padding-top: var(--space-7) !important; padding-bottom: var(--space-7) !important; }
  .py-sm-8 { padding-top: var(--space-8) !important; padding-bottom: var(--space-8) !important; }
  .py-sm-9 { padding-top: var(--space-9) !important; padding-bottom: var(--space-9) !important; }
  .py-sm-10 { padding-top: var(--space-10) !important; padding-bottom: var(--space-10) !important; }
  
  .px-sm-0 { padding-left: var(--space-0) !important; padding-right: var(--space-0) !important; }
  .px-sm-1 { padding-left: var(--space-1) !important; padding-right: var(--space-1) !important; }
  .px-sm-2 { padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
  .px-sm-3 { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
  .px-sm-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
  .px-sm-5 { padding-left: var(--space-5) !important; padding-right: var(--space-5) !important; }
  .px-sm-6 { padding-left: var(--space-6) !important; padding-right: var(--space-6) !important; }
  .px-sm-7 { padding-left: var(--space-7) !important; padding-right: var(--space-7) !important; }
  .px-sm-8 { padding-left: var(--space-8) !important; padding-right: var(--space-8) !important; }
  .px-sm-9 { padding-left: var(--space-9) !important; padding-right: var(--space-9) !important; }
  .px-sm-10 { padding-left: var(--space-10) !important; padding-right: var(--space-10) !important; }
  
  .pt-sm-0 { padding-top: var(--space-0) !important; }
  .pt-sm-1 { padding-top: var(--space-1) !important; }
  .pt-sm-2 { padding-top: var(--space-2) !important; }
  .pt-sm-3 { padding-top: var(--space-3) !important; }
  .pt-sm-4 { padding-top: var(--space-4) !important; }
  .pt-sm-5 { padding-top: var(--space-5) !important; }
  .pt-sm-6 { padding-top: var(--space-6) !important; }
  .pt-sm-7 { padding-top: var(--space-7) !important; }
  .pt-sm-8 { padding-top: var(--space-8) !important; }
  .pt-sm-9 { padding-top: var(--space-9) !important; }
  .pt-sm-10 { padding-top: var(--space-10) !important; }
  
  .pb-sm-0 { padding-bottom: var(--space-0) !important; }
  .pb-sm-1 { padding-bottom: var(--space-1) !important; }
  .pb-sm-2 { padding-bottom: var(--space-2) !important; }
  .pb-sm-3 { padding-bottom: var(--space-3) !important; }
  .pb-sm-4 { padding-bottom: var(--space-4) !important; }
  .pb-sm-5 { padding-bottom: var(--space-5) !important; }
  .pb-sm-6 { padding-bottom: var(--space-6) !important; }
  .pb-sm-7 { padding-bottom: var(--space-7) !important; }
  .pb-sm-8 { padding-bottom: var(--space-8) !important; }
  .pb-sm-9 { padding-bottom: var(--space-9) !important; }
  .pb-sm-10 { padding-bottom: var(--space-10) !important; }
  
  .pl-sm-0 { padding-left: var(--space-0) !important; }
  .pl-sm-1 { padding-left: var(--space-1) !important; }
  .pl-sm-2 { padding-left: var(--space-2) !important; }
  .pl-sm-3 { padding-left: var(--space-3) !important; }
  .pl-sm-4 { padding-left: var(--space-4) !important; }
  .pl-sm-5 { padding-left: var(--space-5) !important; }
  .pl-sm-6 { padding-left: var(--space-6) !important; }
  .pl-sm-7 { padding-left: var(--space-7) !important; }
  .pl-sm-8 { padding-left: var(--space-8) !important; }
  .pl-sm-9 { padding-left: var(--space-9) !important; }
  .pl-sm-10 { padding-left: var(--space-10) !important; }
  
  .pr-sm-0 { padding-right: var(--space-0) !important; }
  .pr-sm-1 { padding-right: var(--space-1) !important; }
  .pr-sm-2 { padding-right: var(--space-2) !important; }
  .pr-sm-3 { padding-right: var(--space-3) !important; }
  .pr-sm-4 { padding-right: var(--space-4) !important; }
  .pr-sm-5 { padding-right: var(--space-5) !important; }
  .pr-sm-6 { padding-right: var(--space-6) !important; }
  .pr-sm-7 { padding-right: var(--space-7) !important; }
  .pr-sm-8 { padding-right: var(--space-8) !important; }
  .pr-sm-9 { padding-right: var(--space-9) !important; }
  .pr-sm-10 { padding-right: var(--space-10) !important; }
}

/* Desktop et écrans larges (min-width: 769px) */
@media (min-width: 769px) {
  /* Marges */
  .m-lg-0 { margin: var(--space-0) !important; }
  .m-lg-1 { margin: var(--space-1) !important; }
  .m-lg-2 { margin: var(--space-2) !important; }
  .m-lg-3 { margin: var(--space-3) !important; }
  .m-lg-4 { margin: var(--space-4) !important; }
  .m-lg-5 { margin: var(--space-5) !important; }
  .m-lg-6 { margin: var(--space-6) !important; }
  .m-lg-7 { margin: var(--space-7) !important; }
  .m-lg-8 { margin: var(--space-8) !important; }
  .m-lg-9 { margin: var(--space-9) !important; }
  .m-lg-10 { margin: var(--space-10) !important; }
  
  .my-lg-0 { margin-top: var(--space-0) !important; margin-bottom: var(--space-0) !important; }
  .my-lg-1 { margin-top: var(--space-1) !important; margin-bottom: var(--space-1) !important; }
  .my-lg-2 { margin-top: var(--space-2) !important; margin-bottom: var(--space-2) !important; }
  .my-lg-3 { margin-top: var(--space-3) !important; margin-bottom: var(--space-3) !important; }
  .my-lg-4 { margin-top: var(--space-4) !important; margin-bottom: var(--space-4) !important; }
  .my-lg-5 { margin-top: var(--space-5) !important; margin-bottom: var(--space-5) !important; }
  .my-lg-6 { margin-top: var(--space-6) !important; margin-bottom: var(--space-6) !important; }
  .my-lg-7 { margin-top: var(--space-7) !important; margin-bottom: var(--space-7) !important; }
  .my-lg-8 { margin-top: var(--space-8) !important; margin-bottom: var(--space-8) !important; }
  .my-lg-9 { margin-top: var(--space-9) !important; margin-bottom: var(--space-9) !important; }
  .my-lg-10 { margin-top: var(--space-10) !important; margin-bottom: var(--space-10) !important; }
  
  .mx-lg-0 { margin-left: var(--space-0) !important; margin-right: var(--space-0) !important; }
  .mx-lg-1 { margin-left: var(--space-1) !important; margin-right: var(--space-1) !important; }
  .mx-lg-2 { margin-left: var(--space-2) !important; margin-right: var(--space-2) !important; }
  .mx-lg-3 { margin-left: var(--space-3) !important; margin-right: var(--space-3) !important; }
  .mx-lg-4 { margin-left: var(--space-4) !important; margin-right: var(--space-4) !important; }
  .mx-lg-5 { margin-left: var(--space-5) !important; margin-right: var(--space-5) !important; }
  .mx-lg-6 { margin-left: var(--space-6) !important; margin-right: var(--space-6) !important; }
  .mx-lg-7 { margin-left: var(--space-7) !important; margin-right: var(--space-7) !important; }
  .mx-lg-8 { margin-left: var(--space-8) !important; margin-right: var(--space-8) !important; }
  .mx-lg-9 { margin-left: var(--space-9) !important; margin-right: var(--space-9) !important; }
  .mx-lg-10 { margin-left: var(--space-10) !important; margin-right: var(--space-10) !important; }

  .mt-lg-0 { margin-top: var(--space-0) !important; }
  .mt-lg-1 { margin-top: var(--space-1) !important; }
  .mt-lg-2 { margin-top: var(--space-2) !important; }
  .mt-lg-3 { margin-top: var(--space-3) !important; }
  .mt-lg-4 { margin-top: var(--space-4) !important; }
  .mt-lg-5 { margin-top: var(--space-5) !important; }
  .mt-lg-6 { margin-top: var(--space-6) !important; }
  .mt-lg-7 { margin-top: var(--space-7) !important; }
  .mt-lg-8 { margin-top: var(--space-8) !important; }
  .mt-lg-9 { margin-top: var(--space-9) !important; }
  .mt-lg-10 { margin-top: var(--space-10) !important; }
  
  .mb-lg-0 { margin-bottom: var(--space-0) !important; }
  .mb-lg-1 { margin-bottom: var(--space-1) !important; }
  .mb-lg-2 { margin-bottom: var(--space-2) !important; }
  .mb-lg-3 { margin-bottom: var(--space-3) !important; }
  .mb-lg-4 { margin-bottom: var(--space-4) !important; }
  .mb-lg-5 { margin-bottom: var(--space-5) !important; }
  .mb-lg-6 { margin-bottom: var(--space-6) !important; }
  .mb-lg-7 { margin-bottom: var(--space-7) !important; }
  .mb-lg-8 { margin-bottom: var(--space-8) !important; }
  .mb-lg-9 { margin-bottom: var(--space-9) !important; }
  .mb-lg-10 { margin-bottom: var(--space-10) !important; }
  
  .ml-lg-0 { margin-left: var(--space-0) !important; }
  .ml-lg-1 { margin-left: var(--space-1) !important; }
  .ml-lg-2 { margin-left: var(--space-2) !important; }
  .ml-lg-3 { margin-left: var(--space-3) !important; }
  .ml-lg-4 { margin-left: var(--space-4) !important; }
  .ml-lg-5 { margin-left: var(--space-5) !important; }
  .ml-lg-6 { margin-left: var(--space-6) !important; }
  .ml-lg-7 { margin-left: var(--space-7) !important; }
  .ml-lg-8 { margin-left: var(--space-8) !important; }
  .ml-lg-9 { margin-left: var(--space-9) !important; }
  .ml-lg-10 { margin-left: var(--space-10) !important; }
  
  .mr-lg-0 { margin-right: var(--space-0) !important; }
  .mr-lg-1 { margin-right: var(--space-1) !important; }
  .mr-lg-2 { margin-right: var(--space-2) !important; }
  .mr-lg-3 { margin-right: var(--space-3) !important; }
  .mr-lg-4 { margin-right: var(--space-4) !important; }
  .mr-lg-5 { margin-right: var(--space-5) !important; }
  .mr-lg-6 { margin-right: var(--space-6) !important; }
  .mr-lg-7 { margin-right: var(--space-7) !important; }
  .mr-lg-8 { margin-right: var(--space-8) !important; }
  .mr-lg-9 { margin-right: var(--space-9) !important; }
  .mr-lg-10 { margin-right: var(--space-10) !important; }

  /* Paddings */
  .p-lg-0 { padding: var(--space-0) !important; }
  .p-lg-1 { padding: var(--space-1) !important; }
  .p-lg-2 { padding: var(--space-2) !important; }
  .p-lg-3 { padding: var(--space-3) !important; }
  .p-lg-4 { padding: var(--space-4) !important; }
  .p-lg-5 { padding: var(--space-5) !important; }
  .p-lg-6 { padding: var(--space-6) !important; }
  .p-lg-7 { padding: var(--space-7) !important; }
  .p-lg-8 { padding: var(--space-8) !important; }
  .p-lg-9 { padding: var(--space-9) !important; }
  .p-lg-10 { padding: var(--space-10) !important; }
  
  .py-lg-0 { padding-top: var(--space-0) !important; padding-bottom: var(--space-0) !important; }
  .py-lg-1 { padding-top: var(--space-1) !important; padding-bottom: var(--space-1) !important; }
  .py-lg-2 { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
  .py-lg-3 { padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; }
  .py-lg-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
  .py-lg-5 { padding-top: var(--space-5) !important; padding-bottom: var(--space-5) !important; }
  .py-lg-6 { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }
  .py-lg-7 { padding-top: var(--space-7) !important; padding-bottom: var(--space-7) !important; }
  .py-lg-8 { padding-top: var(--space-8) !important; padding-bottom: var(--space-8) !important; }
  .py-lg-9 { padding-top: var(--space-9) !important; padding-bottom: var(--space-9) !important; }
  .py-lg-10 { padding-top: var(--space-10) !important; padding-bottom: var(--space-10) !important; }
  
  .px-lg-0 { padding-left: var(--space-0) !important; padding-right: var(--space-0) !important; }
  .px-lg-1 { padding-left: var(--space-1) !important; padding-right: var(--space-1) !important; }
  .px-lg-2 { padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
  .px-lg-3 { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
  .px-lg-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
  .px-lg-5 { padding-left: var(--space-5) !important; padding-right: var(--space-5) !important; }
  .px-lg-6 { padding-left: var(--space-6) !important; padding-right: var(--space-6) !important; }
  .px-lg-7 { padding-left: var(--space-7) !important; padding-right: var(--space-7) !important; }
  .px-lg-8 { padding-left: var(--space-8) !important; padding-right: var(--space-8) !important; }
  .px-lg-9 { padding-left: var(--space-9) !important; padding-right: var(--space-9) !important; }
  .px-lg-10 { padding-left: var(--space-10) !important; padding-right: var(--space-10) !important; }
  
  .pt-lg-0 { padding-top: var(--space-0) !important; }
  .pt-lg-1 { padding-top: var(--space-1) !important; }
  .pt-lg-2 { padding-top: var(--space-2) !important; }
  .pt-lg-3 { padding-top: var(--space-3) !important; }
  .pt-lg-4 { padding-top: var(--space-4) !important; }
  .pt-lg-5 { padding-top: var(--space-5) !important; }
  .pt-lg-6 { padding-top: var(--space-6) !important; }
  .pt-lg-7 { padding-top: var(--space-7) !important; }
  .pt-lg-8 { padding-top: var(--space-8) !important; }
  .pt-lg-9 { padding-top: var(--space-9) !important; }
  .pt-lg-10 { padding-top: var(--space-10) !important; }
  
  .pb-lg-0 { padding-bottom: var(--space-0) !important; }
  .pb-lg-1 { padding-bottom: var(--space-1) !important; }
  .pb-lg-2 { padding-bottom: var(--space-2) !important; }
  .pb-lg-3 { padding-bottom: var(--space-3) !important; }
  .pb-lg-4 { padding-bottom: var(--space-4) !important; }
  .pb-lg-5 { padding-bottom: var(--space-5) !important; }
  .pb-lg-6 { padding-bottom: var(--space-6) !important; }
  .pb-lg-7 { padding-bottom: var(--space-7) !important; }
  .pb-lg-8 { padding-bottom: var(--space-8) !important; }
  .pb-lg-9 { padding-bottom: var(--space-9) !important; }
  .pb-lg-10 { padding-bottom: var(--space-10) !important; }
  
  .pl-lg-0 { padding-left: var(--space-0) !important; }
  .pl-lg-1 { padding-left: var(--space-1) !important; }
  .pl-lg-2 { padding-left: var(--space-2) !important; }
  .pl-lg-3 { padding-left: var(--space-3) !important; }
  .pl-lg-4 { padding-left: var(--space-4) !important; }
  .pl-lg-5 { padding-left: var(--space-5) !important; }
  .pl-lg-6 { padding-left: var(--space-6) !important; }
  .pl-lg-7 { padding-left: var(--space-7) !important; }
  .pl-lg-8 { padding-left: var(--space-8) !important; }
  .pl-lg-9 { padding-left: var(--space-9) !important; }
  .pl-lg-10 { padding-left: var(--space-10) !important; }
  
  .pr-lg-0 { padding-right: var(--space-0) !important; }
  .pr-lg-1 { padding-right: var(--space-1) !important; }
  .pr-lg-2 { padding-right: var(--space-2) !important; }
  .pr-lg-3 { padding-right: var(--space-3) !important; }
  .pr-lg-4 { padding-right: var(--space-4) !important; }
  .pr-lg-5 { padding-right: var(--space-5) !important; }
  .pr-lg-6 { padding-right: var(--space-6) !important; }
  .pr-lg-7 { padding-right: var(--space-7) !important; }
  .pr-lg-8 { padding-right: var(--space-8) !important; }
  .pr-lg-9 { padding-right: var(--space-9) !important; }
  .pr-lg-10 { padding-right: var(--space-10) !important; }
}
/* 
 * CLASSES UTILITAIRES D'AFFICHAGE
 * Ce fichier contient des classes utilitaires pour les propriétés display, flex, grid, etc.
 * qui ne sont PAS déjà présentes dans global.css
 */

/* =================================
   DISPLAY
   ================================= */
   .d-none { display: none !important; }
   .d-inline { display: inline !important; }
   .d-inline-block { display: inline-block !important; }
   .d-block { display: block !important; }
   .d-table { display: table !important; }
   .d-table-row { display: table-row !important; }
   .d-table-cell { display: table-cell !important; }
   .d-flex { display: flex !important; }
   .d-inline-flex { display: inline-flex !important; }
   .d-grid { display: grid !important; }
   .d-inline-grid { display: inline-grid !important; }
   
   /* =================================
      FLEX - BASE
      Classes de flexbox fondamentales
      ================================= */
   
   /* Flex Direction */
   .flex-row { flex-direction: row !important; }
   .flex-row-reverse { flex-direction: row-reverse !important; }
   .flex-column { flex-direction: column !important; }
   .flex-column-reverse { flex-direction: column-reverse !important; }
   
   /* Flex Wrap */
   .flex-wrap { flex-wrap: wrap !important; }
   .flex-nowrap { flex-wrap: nowrap !important; }
   .flex-wrap-reverse { flex-wrap: wrap-reverse !important; }
   
   /* Flex Justify Content */
   .justify-start { justify-content: flex-start !important; }
   .justify-end { justify-content: flex-end !important; }
   .justify-center { justify-content: center !important; }
   .justify-between { justify-content: space-between !important; }
   .justify-around { justify-content: space-around !important; }
   .justify-evenly { justify-content: space-evenly !important; }
   
   /* Flex Align Items */
   .align-start { align-items: flex-start !important; }
   .align-end { align-items: flex-end !important; }
   .align-center { align-items: center !important; }
   .align-baseline { align-items: baseline !important; }
   .align-stretch { align-items: stretch !important; }
   
   /* Flex Align Self */
   .self-start { align-self: flex-start !important; }
   .self-end { align-self: flex-end !important; }
   .self-center { align-self: center !important; }
   .self-baseline { align-self: baseline !important; }
   .self-stretch { align-self: stretch !important; }
   
   /* Flex Order */
   .order-first { order: -1 !important; }
   .order-0 { order: 0 !important; }
   .order-1 { order: 1 !important; }
   .order-2 { order: 2 !important; }
   .order-3 { order: 3 !important; }
   .order-4 { order: 4 !important; }
   .order-5 { order: 5 !important; }
   .order-last { order: 999 !important; }
   
   /* =================================
      FLEX - EXTENSIONS
      Complément aux classes flex de base
      ================================= */
   
   /* Flex Align Content */
   .content-start { align-content: flex-start !important; }
   .content-end { align-content: flex-end !important; }
   .content-center { align-content: center !important; }
   .content-between { align-content: space-between !important; }
   .content-around { align-content: space-around !important; }
   .content-stretch { align-content: stretch !important; }
   
   /* =================================
      GRID - BASE & EXTENSIONS
      Classes Grid fondamentales et extensions
      ================================= */
   
   /* Flux et auto-flow */
   .grid-flow-row { grid-auto-flow: row !important; }
   .grid-flow-col { grid-auto-flow: column !important; }
   .grid-flow-dense { grid-auto-flow: dense !important; }
   .grid-flow-row-dense { grid-auto-flow: row dense !important; }
   .grid-flow-col-dense { grid-auto-flow: column dense !important; }
   
   /* Lignes de grille */
   .grid-rows-1 { grid-template-rows: repeat(1, auto) !important; }
   .grid-rows-2 { grid-template-rows: repeat(2, auto) !important; }
   .grid-rows-3 { grid-template-rows: repeat(3, auto) !important; }
   .grid-rows-4 { grid-template-rows: repeat(4, auto) !important; }
   .grid-rows-5 { grid-template-rows: repeat(5, auto) !important; }
   .grid-rows-6 { grid-template-rows: repeat(6, auto) !important; }
   
   /* Lignes en span */
   .grid-row-span-1 { grid-row: span 1 !important; }
   .grid-row-span-2 { grid-row: span 2 !important; }
   .grid-row-span-3 { grid-row: span 3 !important; }
   .grid-row-span-4 { grid-row: span 4 !important; }
   .grid-row-span-5 { grid-row: span 5 !important; }
   .grid-row-span-6 { grid-row: span 6 !important; }
   .grid-row-span-full { grid-row: 1 / -1 !important; }
   
   /* =================================
      BREAKPOINTS RESPONSIVE
      Classes responsives pour les différentes tailles d'écran
      ================================= */
   
   /* Tablettes (max-width: 768px) */
   @media (max-width: 768px) {
     /* Display */
     .d-md-none { display: none !important; }
     .d-md-block { display: block !important; }
     .d-md-flex { display: flex !important; }
     .d-md-grid { display: grid !important; }
     .d-md-inline { display: inline !important; }
     .d-md-inline-block { display: inline-block !important; }
     .d-md-table { display: table !important; }
     .d-md-table-row { display: table-row !important; }
     .d-md-table-cell { display: table-cell !important; }
     .d-md-inline-flex { display: inline-flex !important; }
     .d-md-inline-grid { display: inline-grid !important; }
     
     /* Flex */
     .flex-md-row { flex-direction: row !important; }
     .flex-md-column { flex-direction: column !important; }
     .flex-md-row-reverse { flex-direction: row-reverse !important; }
     .flex-md-column-reverse { flex-direction: column-reverse !important; }
     .flex-md-wrap { flex-wrap: wrap !important; }
     .flex-md-nowrap { flex-wrap: nowrap !important; }
     .flex-md-wrap-reverse { flex-wrap: wrap-reverse !important; }
     
     /* Justify and align */
     .justify-md-start { justify-content: flex-start !important; }
     .justify-md-end { justify-content: flex-end !important; }
     .justify-md-center { justify-content: center !important; }
     .justify-md-between { justify-content: space-between !important; }
     .justify-md-around { justify-content: space-around !important; }
     .justify-md-evenly { justify-content: space-evenly !important; }
     
     .align-md-start { align-items: flex-start !important; }
     .align-md-end { align-items: flex-end !important; }
     .align-md-center { align-items: center !important; }
     .align-md-baseline { align-items: baseline !important; }
     .align-md-stretch { align-items: stretch !important; }
     
     /* Order */
     .order-md-first { order: -1 !important; }
     .order-md-0 { order: 0 !important; }
     .order-md-1 { order: 1 !important; }
     .order-md-2 { order: 2 !important; }
     .order-md-3 { order: 3 !important; }
     .order-md-4 { order: 4 !important; }
     .order-md-5 { order: 5 !important; }
     .order-md-last { order: 999 !important; }
   }
   
   /* Mobile (max-width: 480px) */
   @media (max-width: 480px) {
     /* Display */
     .d-sm-none { display: none !important; }
     .d-sm-block { display: block !important; }
     .d-sm-flex { display: flex !important; }
     .d-sm-grid { display: grid !important; }
     .d-sm-inline { display: inline !important; }
     .d-sm-inline-block { display: inline-block !important; }
     .d-sm-table { display: table !important; }
     .d-sm-table-row { display: table-row !important; }
     .d-sm-table-cell { display: table-cell !important; }
     .d-sm-inline-flex { display: inline-flex !important; }
     .d-sm-inline-grid { display: inline-grid !important; }
     
     /* Flex */
     .flex-sm-row { flex-direction: row !important; }
     .flex-sm-column { flex-direction: column !important; }
     .flex-sm-row-reverse { flex-direction: row-reverse !important; }
     .flex-sm-column-reverse { flex-direction: column-reverse !important; }
     .flex-sm-wrap { flex-wrap: wrap !important; }
     .flex-sm-nowrap { flex-wrap: nowrap !important; }
     .flex-sm-wrap-reverse { flex-wrap: wrap-reverse !important; }
     
     /* Justify and align */
     .justify-sm-start { justify-content: flex-start !important; }
     .justify-sm-end { justify-content: flex-end !important; }
     .justify-sm-center { justify-content: center !important; }
     .justify-sm-between { justify-content: space-between !important; }
     .justify-sm-around { justify-content: space-around !important; }
     .justify-sm-evenly { justify-content: space-evenly !important; }
     
     .align-sm-start { align-items: flex-start !important; }
     .align-sm-end { align-items: flex-end !important; }
     .align-sm-center { align-items: center !important; }
     .align-sm-baseline { align-items: baseline !important; }
     .align-sm-stretch { align-items: stretch !important; }
     
     /* Order */
     .order-sm-first { order: -1 !important; }
     .order-sm-0 { order: 0 !important; }
     .order-sm-1 { order: 1 !important; }
     .order-sm-2 { order: 2 !important; }
     .order-sm-3 { order: 3 !important; }
     .order-sm-4 { order: 4 !important; }
     .order-sm-5 { order: 5 !important; }
     .order-sm-last { order: 999 !important; }
   }
   
   /* Desktop (min-width: 769px) */
   @media (min-width: 769px) {
     /* Display */
     .d-lg-none { display: none !important; }
     .d-lg-block { display: block !important; }
     .d-lg-flex { display: flex !important; }
     .d-lg-grid { display: grid !important; }
     .d-lg-inline { display: inline !important; }
     .d-lg-inline-block { display: inline-block !important; }
     .d-lg-inline-flex { display: inline-flex !important; }
     .d-lg-inline-grid { display: inline-grid !important; }
     
     /* Flex */
     .flex-lg-row { flex-direction: row !important; }
     .flex-lg-column { flex-direction: column !important; }
     .flex-lg-row-reverse { flex-direction: row-reverse !important; }
     .flex-lg-column-reverse { flex-direction: column-reverse !important; }
     .flex-lg-wrap { flex-wrap: wrap !important; }
     .flex-lg-nowrap { flex-wrap: nowrap !important; }
     
     /* Justify and align */
     .justify-lg-start { justify-content: flex-start !important; }
     .justify-lg-center { justify-content: center !important; }
     .justify-lg-end { justify-content: flex-end !important; }
     .justify-lg-between { justify-content: space-between !important; }
     
     .align-lg-start { align-items: flex-start !important; }
     .align-lg-center { align-items: center !important; }
     .align-lg-end { align-items: flex-end !important; }
     
     /* Order */
     .order-lg-first { order: -1 !important; }
     .order-lg-0 { order: 0 !important; }
     .order-lg-1 { order: 1 !important; }
     .order-lg-2 { order: 2 !important; }
     .order-lg-last { order: 999 !important; }
   }
/* 
 * CLASSES UTILITAIRES FLEXBOX AVANCÉES
 * Ce fichier contient des classes utilitaires complémentaires pour flexbox,
 * apportant des fonctionnalités qui ne sont pas déjà présentes dans global.css
 */

/* =================================
   COMBINAISONS FLEXBOX COMMUNES
   ================================= */

/* Centre parfaitement les éléments horizontalement et verticalement */
.flex-center {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Distribution d'éléments sur l'axe principal avec espace entre eux */
.flex-between {
  display: flex !important;
  justify-content: space-between !important;
}

/* Distribution d'éléments sur l'axe principal avec espace autour d'eux */
.flex-around {
  display: flex !important;
  justify-content: space-around !important;
}

/* Distribution d'éléments sur l'axe principal avec espace égal */
.flex-evenly {
  display: flex !important;
  justify-content: space-evenly !important;
}

/* Eléments alignés au début (gauche ou haut selon l'axe) */
.flex-start {
  display: flex !important;
  justify-content: flex-start !important;
}

/* Eléments alignés à la fin (droite ou bas selon l'axe) */
.flex-end {
  display: flex !important;
  justify-content: flex-end !important;
}

/* =================================
   DISTRIBUTION DES ÉLÉMENTS
   ================================= */

/* Étire les éléments flexbox pour remplir l'espace disponible */
.flex-fill-children > * {
  flex: 1 1 0% !important;
}

/* Les enfants gardent leur taille intrinsèque */
.flex-auto-children > * {
  flex: 0 0 auto !important;
}

/* Distribution équitable sans considération de taille intrinsèque */
.flex-equal-children > * {
  flex: 1 !important;
}

/* =================================
   ALIGNEMENT SPÉCIFIQUE ET POSITIONNEMENT
   ================================= */

/* Aligne le premier élément au début et le reste à la fin */
.flex-justify-first-last {
  display: flex !important;
  justify-content: space-between !important;
}
.flex-justify-first-last > *:not(:first-child):not(:last-child) {
  display: none !important;
}

/* Positionnement du premier élément à gauche et les autres à droite */
.flex-first-left-rest-right {
  display: flex !important;
  justify-content: space-between !important;
}
.flex-first-left-rest-right > *:not(:first-child) {
  margin-left: auto !important;
}

/* =================================
   LAYOUTS RESPONSIFS
   ================================= */

/* Empile verticalement en responsive tout en restant horizontal sur desktop */
@media (max-width: 768px) {
  .flex-stack-md {
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Inverse l'ordre sur mobile */
  .flex-stack-reverse-md {
    display: flex !important;
    flex-direction: column-reverse !important;
  }
  
  /* Centre uniquement sur mobile */
  .flex-center-md {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
}

@media (max-width: 480px) {
  .flex-stack-sm {
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Inverse l'ordre sur petit mobile */
  .flex-stack-reverse-sm {
    display: flex !important;
    flex-direction: column-reverse !important;
  }
  
  /* Centre uniquement sur petit mobile */
  .flex-center-sm {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
}

/* =================================
   CARACTÉRISTIQUES SUPPLÉMENTAIRES
   ================================= */

/* Largeur initiale égale pour tous les éléments */
.flex-basis-equal > * {
  flex-basis: 0 !important;
}

/* Largeur initiale auto pour tous les éléments */
.flex-basis-auto > * {
  flex-basis: auto !important;
}

/* Largeur initiale en pourcentage pour les éléments */
.flex-basis-50 > * {
  flex-basis: 50% !important;
}
.flex-basis-33 > * {
  flex-basis: 33.333% !important;
}
.flex-basis-25 > * {
  flex-basis: 25% !important;
}
.flex-basis-20 > * {
  flex-basis: 20% !important;
}

/* Items qui ne rétrécissent pas */
.flex-no-shrink > * {
  flex-shrink: 0 !important;
}
/* 
 * CLASSES UTILITAIRES TEXTE
 * Ce fichier contient des classes utilitaires pour le texte qui complètent
 * celles déjà définies dans global.css.
 */

/* =================================
   TAILLE DE TEXTE SUPPLÉMENTAIRE
   ================================= */

/* Tailles de texte supplémentaires */
.text-xs { font-size: var(--font-size-xs, 0.75rem) !important; }
.text-2xl { font-size: var(--font-size-2xl, 1.75rem) !important; }
.text-3xl { font-size: var(--font-size-3xl, 2rem) !important; }
.text-4xl { font-size: var(--font-size-4xl, 2.5rem) !important; }
.text-5xl { font-size: var(--font-size-5xl, 3rem) !important; }
.text-6xl { font-size: var(--font-size-6xl, 3.75rem) !important; }

/* =================================
   POIDS DE POLICE SUPPLÉMENTAIRE
   ================================= */

/* Poids de police additionnels */
.font-thin { font-weight: 100 !important; }
.font-extralight { font-weight: 200 !important; }
.font-light { font-weight: 300 !important; }
.font-semibold { font-weight: 600 !important; }
.font-extrabold { font-weight: 800 !important; }
.font-black { font-weight: 900 !important; }

/* =================================
   TRANSFORMATION ET DÉCORATION
   ================================= */

/* Transformation de texte */
.text-lowercase { text-transform: lowercase !important; }
.text-capitalize { text-transform: capitalize !important; }

/* Décoration de texte */
.text-underline { text-decoration: underline !important; }
.text-overline { text-decoration: overline !important; }
.text-line-through { text-decoration: line-through !important; }
.text-no-decoration { text-decoration: none !important; }

/* =================================
   PROPRIÉTÉS DE LIGNE
   ================================= */

/* Hauteur de ligne */
.leading-none { line-height: 1 !important; }
.leading-tight { line-height: 1.25 !important; }
.leading-snug { line-height: 1.375 !important; }
.leading-relaxed { line-height: 1.625 !important; }
.leading-loose { line-height: 2 !important; }

/* Espacement des lettres */
.tracking-tighter { letter-spacing: -0.05em !important; }
.tracking-tight { letter-spacing: -0.025em !important; }
.tracking-normal { letter-spacing: 0 !important; }
.tracking-wide { letter-spacing: 0.025em !important; }
.tracking-wider { letter-spacing: 0.05em !important; }
.tracking-widest { letter-spacing: 0.1em !important; }

/* =================================
   TRONCATION ET WRAP
   ================================= */

/* Troncation à une ligne avec ellipsis */
.text-truncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Troncation à plusieurs lignes */
.line-clamp-2 {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.line-clamp-3 {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Gestion du wrap */
.text-nowrap { white-space: nowrap !important; }
.text-pre { white-space: pre !important; }
.text-pre-wrap { white-space: pre-wrap !important; }
.text-pre-line { white-space: pre-line !important; }
.text-break { word-break: break-word !important; }

/* =================================
   COULEURS DE TEXTE
   ================================= */

/* Couleurs de texte supplémentaires */
.text-warning { color: var(--warning-color, #f59e0b) !important; }
.text-info { color: var(--info-color, #3b82f6) !important; }
.text-light-muted { color: var(--light-muted-color, #9ca3af) !important; }
.text-dark-muted { color: var(--dark-muted-color, #4b5563) !important; }

/* =================================
   EFFETS DE TEXTE
   ================================= */

/* Ombres de texte */
.text-shadow-sm {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.text-shadow {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.text-shadow-lg {
  text-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

/* =================================
   STYLES DE POLICE
   ================================= */

/* Styles de police */
.font-italic { font-style: italic !important; }
.font-normal-style { font-style: normal !important; }

/* Variantes de police */
.font-small-caps { font-variant: small-caps !important; }

/* =================================
   RESPONSIVE
   ================================= */

/* Responsive font sizes (tablettes) */
@media (max-width: 768px) {
  .text-md-xs { font-size: var(--font-size-xs, 0.75rem) !important; }
  .text-md-sm { font-size: var(--font-size-sm, 0.875rem) !important; }
  .text-md-base { font-size: var(--font-size-base, 1rem) !important; }
  .text-md-lg { font-size: var(--font-size-lg, 1.125rem) !important; }
  .text-md-xl { font-size: var(--font-size-xl, 1.25rem) !important; }
  .text-md-2xl { font-size: var(--font-size-2xl, 1.75rem) !important; }
  
  .text-md-center { text-align: center !important; }
  .text-md-left { text-align: left !important; }
  .text-md-right { text-align: right !important; }
}

/* Responsive font sizes (mobile) */
@media (max-width: 480px) {
  .text-sm-xs { font-size: var(--font-size-xs, 0.75rem) !important; }
  .text-sm-sm { font-size: var(--font-size-sm, 0.875rem) !important; }
  .text-sm-base { font-size: var(--font-size-base, 1rem) !important; }
  .text-sm-lg { font-size: var(--font-size-lg, 1.125rem) !important; }
  .text-sm-xl { font-size: var(--font-size-xl, 1.25rem) !important; }
  
  .text-sm-center { text-align: center !important; }
  .text-sm-left { text-align: left !important; }
  .text-sm-right { text-align: right !important; }
}

/* Desktop uniquement */
@media (min-width: 769px) {
  .text-lg-left { text-align: left !important; }
  .text-lg-center { text-align: center !important; }
  .text-lg-right { text-align: right !important; }
}

/* =================================
   ALIGNEMENT DE TEXTE
   ================================= */

/* Alignement de texte standard */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-justify { text-align: justify !important; }

/* Alignement complet du contenu (texte + éléments) */
/* Cette classe est remplacée par les deux classes plus spécifiques ci-dessous */
.text-center-content {
  text-align: center !important;
}

/* Alignement centralisé pour les en-têtes de section */
.content-center-header .section-header {
  text-align: center !important;
}

/* Alignement centralisé pour la grille d'éléments */
.content-center-items .features-section__grid .feature-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.content-center-items .features-section__grid .feature-item__icon-wrapper {
  display: flex !important;
  justify-content: center !important;
}

/* Centrage du texte dans les paragraphes des feature-items */
.content-center-items .features-section__grid .feature-item__description {
  text-align: center !important;
}

/* Centrage des liens dans les feature-items */
.content-center-items .features-section__grid .feature-item__link {
  text-align: center !important;
}

/* Alignement centré pour tout le contenu */
.text-center-content .feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.text-center-content .feature-item__icon-wrapper {
  display: flex;
  justify-content: center;
  text-align: center;
}

.text-center-content .section-header {
  text-align: center;
}


/* =================================
   ALIGNEMENT DROITE (NOUVEAU)
   ================================= */

/* Alignement des en-têtes de section à droite */
.content-right-header .section-header {
  text-align: right !important;
}

/* Alignement des items dans la grille à droite */
.content-right-items .features-section__grid .feature-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
}

/* Alignement de l’icône à droite */
.content-right-items .features-section__grid .feature-item__icon-wrapper {
  display: flex !important;
  justify-content: flex-end !important;
}

/* Alignement du texte à droite */
.content-right-items .features-section__grid .feature-item__description {
  text-align: right !important;
}

/* Alignement du lien à droite */
.content-right-items .features-section__grid .feature-item__link {
  text-align: right !important;
}

/* Alignement global à droite */
.text-right-content .feature-item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.text-right-content .feature-item__icon-wrapper {
  display: flex;
  justify-content: flex-end;
  text-align: right;
}

.text-right-content .section-header {
  text-align: right;
}

/* Texte avec dégradé de couleurs */
.text-gradient {
  /* Fallback pour les navigateurs qui ne supportent pas les dégradés sur le texte */
  color: var(--secondary);
  
  /* Dégradé moderne utilisant les couleurs du thème */
  background: linear-gradient(90deg, var(--secondary) 0%, var(--primary) 41%, var(--secondary) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  /* Support pour Firefox */
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
}

/* Version verticale du dégradé */
.text-gradient--vertical {
  /* Fallback pour les navigateurs qui ne supportent pas les dégradés sur le texte */
  color: var(--secondary);
  
  /* Dégradé vertical utilisant les couleurs du thème */
  background: linear-gradient(180deg, var(--secondary) 0%, var(--primary) 41%, var(--secondary) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  /* Support pour Firefox */
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
}

/* Version diagonale du dégradé */
.text-gradient--diagonal {
  /* Fallback pour les navigateurs qui ne supportent pas les dégradés sur le texte */
  color: var(--secondary);
  
  /* Dégradé diagonal utilisant les couleurs du thème */
  background: linear-gradient(45deg, var(--secondary) 0%, var(--primary) 41%, var(--secondary) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  /* Support pour Firefox */
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
}

/* Amélioration pour les navigateurs qui ne supportent pas background-clip: text */
@supports not (background-clip: text) {
  .text-gradient,
  .text-gradient--vertical,
  .text-gradient--diagonal {
    color: var(--primary); /* Couleur centrale comme fallback */
  }
}
/* 
 * CLASSES UTILITAIRES POUR LES BACKGROUNDS
 * Ce fichier contient des classes utilitaires pour les backgrounds qui complètent
 * celles déjà définies dans global.css.
 */

/* =================================
   OPACITÉ DE FOND
   ================================= */

/* Niveaux d'opacité */
.bg-opacity-0 { background-color: rgba(var(--current-bg-rgb, 0, 0, 0), 0) !important; }
.bg-opacity-5 { background-color: rgba(var(--current-bg-rgb, 0, 0, 0), 0.05) !important; }
.bg-opacity-10 { background-color: rgba(var(--current-bg-rgb, 0, 0, 0), 0.1) !important; }
.bg-opacity-20 { background-color: rgba(var(--current-bg-rgb, 0, 0, 0), 0.2) !important; }
.bg-opacity-25 { background-color: rgba(var(--current-bg-rgb, 0, 0, 0), 0.25) !important; }
.bg-opacity-30 { background-color: rgba(var(--current-bg-rgb, 0, 0, 0), 0.3) !important; }
.bg-opacity-40 { background-color: rgba(var(--current-bg-rgb, 0, 0, 0), 0.4) !important; }
.bg-opacity-50 { background-color: rgba(var(--current-bg-rgb, 0, 0, 0), 0.5) !important; }
.bg-opacity-60 { background-color: rgba(var(--current-bg-rgb, 0, 0, 0), 0.6) !important; }
.bg-opacity-70 { background-color: rgba(var(--current-bg-rgb, 0, 0, 0), 0.7) !important; }
.bg-opacity-75 { background-color: rgba(var(--current-bg-rgb, 0, 0, 0), 0.75) !important; }
.bg-opacity-80 { background-color: rgba(var(--current-bg-rgb, 0, 0, 0), 0.8) !important; }
.bg-opacity-90 { background-color: rgba(var(--current-bg-rgb, 0, 0, 0), 0.9) !important; }
.bg-opacity-95 { background-color: rgba(var(--current-bg-rgb, 0, 0, 0), 0.95) !important; }
.bg-opacity-100 { background-color: rgba(var(--current-bg-rgb, 0, 0, 0), 1) !important; }

/* =================================
   PROPRIÉTÉS DE FOND SUPPLÉMENTAIRES
   ================================= */

/* Taille de fond */
.bg-auto { background-size: auto !important; }
.bg-cover { background-size: cover !important; }
.bg-contain { background-size: contain !important; }
.bg-50 { background-size: 50% !important; }
.bg-75 { background-size: 75% !important; }
.bg-100 { background-size: 100% !important; }
.bg-150 { background-size: 150% !important; }
.bg-200 { background-size: 200% !important; }

/* Position de fond */
.bg-center { background-position: center !important; }
.bg-top { background-position: top !important; }
.bg-right { background-position: right !important; }
.bg-bottom { background-position: bottom !important; }
.bg-left { background-position: left !important; }
.bg-top-left { background-position: top left !important; }
.bg-top-right { background-position: top right !important; }
.bg-bottom-left { background-position: bottom left !important; }
.bg-bottom-right { background-position: bottom right !important; }

/* Répétition de fond */
.bg-repeat { background-repeat: repeat !important; }
.bg-no-repeat { background-repeat: no-repeat !important; }
.bg-repeat-x { background-repeat: repeat-x !important; }
.bg-repeat-y { background-repeat: repeat-y !important; }
.bg-repeat-round { background-repeat: round !important; }
.bg-repeat-space { background-repeat: space !important; }

/* Attachment de fond */
.bg-fixed { background-attachment: fixed !important; }
.bg-local { background-attachment: local !important; }
.bg-scroll { background-attachment: scroll !important; }

/* Origine de fond */
.bg-origin-border { background-origin: border-box !important; }
.bg-origin-padding { background-origin: padding-box !important; }
.bg-origin-content { background-origin: content-box !important; }

/* Clip de fond */
.bg-clip-border { background-clip: border-box !important; }
.bg-clip-padding { background-clip: padding-box !important; }
.bg-clip-content { background-clip: content-box !important; }
.bg-clip-text { 
  background-clip: text !important; 
  -webkit-background-clip: text !important;
  color: transparent !important;
}

/* =================================
   GRADIENTS ADDITIONNELS
   ================================= */

/* Gradients prédéfinis - nuances de Primary */
.bg-gradient-primary-light {
  background-image: linear-gradient(to right, var(--primary-300, #6366f1), var(--primary-500, #4f46e5)) !important;
}
.bg-gradient-primary {
  background-image: linear-gradient(to right, var(--primary-500, #4f46e5), var(--primary-700, #4338ca)) !important;
}
.bg-gradient-primary-dark {
  background-image: linear-gradient(to right, var(--primary-700, #4338ca), var(--primary-900, #312e81)) !important;
}

/* Gradients directionnels */
.bg-gradient-to-t { background-image: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0)) !important; }
.bg-gradient-to-tr { background-image: linear-gradient(to top right, rgba(0,0,0,0.7), rgba(0,0,0,0)) !important; }
.bg-gradient-to-r { background-image: linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0)) !important; }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, rgba(0,0,0,0.7), rgba(0,0,0,0)) !important; }
.bg-gradient-to-b { background-image: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0)) !important; }
.bg-gradient-to-bl { background-image: linear-gradient(to bottom left, rgba(0,0,0,0.7), rgba(0,0,0,0)) !important; }
.bg-gradient-to-l { background-image: linear-gradient(to left, rgba(0,0,0,0.7), rgba(0,0,0,0)) !important; }
.bg-gradient-to-tl { background-image: linear-gradient(to top left, rgba(0,0,0,0.7), rgba(0,0,0,0)) !important; }

/* Gradients multicolores */
.bg-gradient-rainbow {
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet) !important;
  background-size: 200% auto !important;
}

.bg-gradient-sunset {
  background-image: linear-gradient(to bottom right, #fa709a, #fee140) !important;
}

.bg-gradient-ocean {
  background-image: linear-gradient(to bottom right, #2193b0, #6dd5ed) !important;
}

.bg-gradient-forest {
  background-image: linear-gradient(to bottom right, #134e5e, #71b280) !important;
}

/* =================================
   ANIMATIONS ET TRANSITIONS DE FOND
   ================================= */

/* Animation de dégradé */
.bg-gradient-animate {
  background-size: 400% 400% !important;
  animation: gradient-animation 15s ease infinite !important;
}

@keyframes gradient-animation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* =================================
   BACKGROUNDS SPÉCIAUX
   ================================= */

/* Fond avec texture subtile */
.bg-texture-dots {
  background-image: radial-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px) !important;
  background-size: 20px 20px !important;
}

.bg-texture-grid {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1) 1px, transparent 1px),
                   linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 1px, transparent 1px) !important;
  background-size: 20px 20px !important;
}

/* Fond avec motif diagonale */
.bg-texture-diagonal {
  background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 10px, transparent 10px, transparent 20px) !important;
}

/* =================================
   MODIFIEURS RESPONSIVE
   ================================= */

/* Tablettes */
@media (max-width: 768px) {
  .bg-md-cover { background-size: cover !important; }
  .bg-md-contain { background-size: contain !important; }
  .bg-md-center { background-position: center !important; }
  .bg-md-fixed { background-attachment: fixed !important; }
  .bg-md-no-repeat { background-repeat: no-repeat !important; }
}

/* Mobile */
@media (max-width: 480px) {
  .bg-sm-cover { background-size: cover !important; }
  .bg-sm-contain { background-size: contain !important; }
  .bg-sm-center { background-position: center !important; }
  .bg-sm-scroll { background-attachment: scroll !important; }
}