/* ============================================================================
   BUNDLE: bundle-foundation.css
   Generated: 2026-02-24 16:19:29
   Sources: 4 files
   DO NOT EDIT — regenerate with: php scripts/build-css-bundles.php
   ============================================================================ */

/* === SOURCE: sxo-foundation.css === */
/* ============================================================================
   SXO FOUNDATION — ACLG
   ============================================================================

   ROLE : Source unique de verite (Design Tokens) pour TOUT le projet.
   Charge EN PREMIER dans base.html.twig, AVANT tous les autres CSS.

   ARCHITECTURE : Mobile First strict
   - Base (sans @media) = mobile 320px-767px
   - @media (min-width: 768px)  = Tablette portrait
   - @media (min-width: 992px)  = Tablette paysage / Laptop
   - @media (min-width: 1200px) = Desktop

   CONVENTION : Prefixe --sxo-* pour les tokens fondation.
   Les fichiers composants conservent leurs prefixes (--nav-*, --v5-*, --mm-*,
   --su-*, --fw-*) mais POINTENT vers les tokens --sxo-* via var().

   REGLES :
   - Mobile first exclusif (min-width uniquement)
   - clamp() pour toute typographie et espacement
   - 48px minimum sur tout element interactif sous 992px
   - env(safe-area-inset-*) pour les encoches

   DATE    : 2026-02-13
   VERSION : 1.0
   ============================================================================ */


/* ============================================================================
   1. DESIGN TOKENS — Palette & Couleurs
   Source unique. Toutes les variables composants DOIVENT pointer ici.
   ============================================================================ */

:root {
  /* --- 1a. Palette Navy Gold (Brand ACLG) --- */
  --sxo-navy-deep:   #0a1628;
  --sxo-navy-medium:  #1e3a5f;
  --sxo-navy-light:   #2d4a6f;
  --sxo-gold:         #c4a35a;
  --sxo-gold-light:   #d4b86a;
  --sxo-gold-glow:    rgba(196, 163, 90, 0.3);
  --sxo-white:        #ffffff;
  --sxo-black:        #000000;

  /* --- 1b. Texte --- */
  --sxo-text-on-dark:    rgba(255, 255, 255, 0.9);
  --sxo-text-muted-dark: rgba(255, 255, 255, 0.7);
  --sxo-text-on-light:   #1a202c;
  --sxo-text-muted-light:#64748b;

  /* --- 1c. Gris (echelle neutre) --- */
  --sxo-gray-50:  #f9fafb;
  --sxo-gray-100: #f3f4f6;
  --sxo-gray-200: #e5e7eb;
  --sxo-gray-300: #d1d5db;
  --sxo-gray-400: #9ca3af;
  --sxo-gray-500: #6b7280;
  --sxo-gray-600: #4b5563;
  --sxo-gray-700: #374151;
  --sxo-gray-800: #1f2937;
  --sxo-gray-900: #111827;

  /* --- 1d. Semantique --- */
  --sxo-success:  #059669;
  --sxo-warning:  #d97706;
  --sxo-error:    #dc2626;
  --sxo-info:     #2563eb;

  /* --- 1e. Surfaces Glass (Megamenu, Cards) --- */
  --sxo-glass-bg:           rgba(255, 255, 255, 0.03);
  --sxo-glass-border:       rgba(255, 255, 255, 0.08);
  --sxo-glass-hover-border: rgba(196, 163, 90, 0.4);
  --sxo-border-subtle:      rgba(255, 255, 255, 0.06);


  /* ============================================================================
     2. TYPOGRAPHIE FLUIDE — clamp(min, preferred, max)
     Lisibilite parfaite de 320px a 1200px+ sans palier brutal.
     ============================================================================ */

  /* --- 2a. Font Family --- */
  --sxo-font-sans: 'Poppins', -apple-system, BlinkMacSystemFont,
                    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* --- 2b. Font Sizes (fluid) --- */
  /* Formule : clamp(mobile-min, viewport-scale, desktop-max)             */
  /* Grille SXO 2026 obligatoire (voir obligations-imperatives.md L50-84) */
  --sxo-fs-display: clamp(1.5rem,  5vw + 0.5rem,  3rem);      /* Hero H1 : 1.5rem(360) -> 3rem(1200) */
  --sxo-fs-h1:      clamp(1.75rem, 3vw + 0.5rem,  2.5rem);    /* Section H2 : 1.75rem -> 2.5rem */
  --sxo-fs-h2:      clamp(1.75rem, 3vw + 0.5rem,  2.5rem);    /* Editorial H2 : 1.75rem -> 2.5rem */
  --sxo-fs-h3:      clamp(1rem,    2vw + 0.5rem,  1.5rem);     /* Subsection H3 : 1rem -> 1.5rem */
  --sxo-fs-h4:      clamp(1.125rem,1.5vw + 0.5rem,1.375rem);   /* H4 carte : 1.125rem -> 1.375rem */
  --sxo-fs-body:    clamp(0.875rem,1.2vw + 0.5rem, 1.125rem);  /* Corps : 0.875rem -> 1.125rem */
  --sxo-fs-small:   clamp(0.75rem, 1vw + 0.4rem,  0.875rem);   /* Labels : 0.75rem -> 0.875rem */
  --sxo-fs-xs:      clamp(0.6875rem,0.8vw + 0.3rem,0.75rem);   /* Caption : 0.6875rem -> 0.75rem */

  /* --- 2c. Font Weights --- */
  --sxo-fw-light:    300;
  --sxo-fw-regular:  400;
  --sxo-fw-medium:   500;
  --sxo-fw-semibold: 600;
  --sxo-fw-bold:     700;
  --sxo-fw-extrabold:800;

  /* --- 2d. Line Heights --- */
  --sxo-lh-tight:   1.2;
  --sxo-lh-snug:    1.35;
  --sxo-lh-normal:  1.5;
  --sxo-lh-relaxed: 1.7;


  /* ============================================================================
     3. ESPACEMENT FLUIDE — Echelle 8px base avec clamp()
     ============================================================================ */

  --sxo-space-2xs: clamp(0.125rem, 0.3vw,  0.25rem);  /*  2px ->  4px */
  --sxo-space-xs:  clamp(0.25rem,  0.5vw,  0.5rem);   /*  4px ->  8px */
  --sxo-space-sm:  clamp(0.5rem,   1vw,    0.75rem);   /*  8px -> 12px */
  --sxo-space-md:  clamp(0.75rem,  1.5vw,  1rem);      /* 12px -> 16px */
  --sxo-space-lg:  clamp(1rem,     2vw,    1.5rem);     /* 16px -> 24px */
  --sxo-space-xl:  clamp(1.5rem,   3vw,    2.5rem);     /* 24px -> 40px */
  --sxo-space-2xl: clamp(2rem,     4vw,    4rem);       /* 32px -> 64px */
  --sxo-space-3xl: clamp(3rem,     6vw,    6rem);       /* 48px -> 96px */


  /* ============================================================================
     4. LAYOUT — Conteneur, Grille, Limites
     ============================================================================ */

  --sxo-container-max:    1200px;
  --sxo-container-wide:   1400px;  /* Header, megapanel */
  --sxo-container-narrow:  800px;  /* Contenu editorial */
  --sxo-container-gutter: clamp(1rem, 4vw, 3rem); /* 16px -> 48px */

  /* Header */
  --sxo-header-height: 64px;  /* Mobile default */


  /* ============================================================================
     5. BORDURES & RAYONS
     ============================================================================ */

  --sxo-radius-sm:   4px;
  --sxo-radius-md:   8px;
  --sxo-radius-lg:   12px;
  --sxo-radius-xl:   16px;
  --sxo-radius-2xl:  24px;
  --sxo-radius-full: 9999px;


  /* ============================================================================
     6. OMBRES
     ============================================================================ */

  --sxo-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
  --sxo-shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --sxo-shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --sxo-shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --sxo-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);


  /* ============================================================================
     7. TRANSITIONS — Cubic-bezier standard (Material Design)
     ============================================================================ */

  --sxo-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --sxo-ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --sxo-ease-out:    cubic-bezier(0, 0, 0.2, 1);

  --sxo-duration-fast:   150ms;
  --sxo-duration-base:   250ms;
  --sxo-duration-slow:   400ms;

  --sxo-transition-fast: var(--sxo-duration-fast) var(--sxo-ease);
  --sxo-transition-base: var(--sxo-duration-base) var(--sxo-ease);
  --sxo-transition-slow: var(--sxo-duration-slow) var(--sxo-ease);


  /* ============================================================================
     8. Z-INDEX — Echelle unifiee (JAMAIS de valeur magique)
     ============================================================================ */

  --sxo-z-base:           0;
  --sxo-z-dropdown:       100;
  --sxo-z-sticky:         200;
  --sxo-z-urgencybar:     999;
  --sxo-z-header:         1000;
  --sxo-z-megapanel:      900;
  --sxo-z-drawer-overlay: 9000;
  --sxo-z-drawer:         9100;
  --sxo-z-search-overlay: 10000;
  --sxo-z-modal-backdrop: 10500;
  --sxo-z-modal:          10600;
  --sxo-z-tooltip:        11000;


  /* ============================================================================
     9. ERGONOMIE TACTILE
     ============================================================================ */

  --sxo-touch-min: 48px;  /* Google + WCAG AA : 48x48 CSS px */


  /* ============================================================================
     10. SAFE AREAS — Encoches (notch) iPhone X+, Galaxy Fold, etc.
     ============================================================================ */

  --sxo-safe-top:    env(safe-area-inset-top, 0px);
  --sxo-safe-right:  env(safe-area-inset-right, 0px);
  --sxo-safe-bottom: env(safe-area-inset-bottom, 0px);
  --sxo-safe-left:   env(safe-area-inset-left, 0px);
}


/* ============================================================================
   RESPONSIVE OVERRIDES — Ajustements par breakpoint
   ============================================================================ */

/* Tablette paysage / Laptop (992px+) : relacher touch target */
@media (min-width: 992px) {
  :root {
    --sxo-touch-min: 40px;
  }
}

/* Desktop (1200px+) : header plus grand */
@media (min-width: 1200px) {
  :root {
    --sxo-header-height: 80px;
  }
}


/* ============================================================================
   11. BACKWARD COMPATIBILITY ALIASES
   ============================================================================
   Les composants existants utilisent --nav-*, --v5-*, --aclg-*, --mm-*, --su-*.
   Ces aliases pointent vers les tokens --sxo-* pour eviter de tout reecrire.
   A SUPPRIMER progressivement lors des refactos composants.
   ============================================================================ */

:root {
  /* --- Navigation (--nav-*) --- */
  --nav-navy-deep:    var(--sxo-navy-deep);
  --nav-navy-medium:  var(--sxo-navy-medium);
  --nav-navy-light:   var(--sxo-navy-light);
  --nav-gold-primary: var(--sxo-gold);
  --nav-gold-light:   var(--sxo-gold-light);
  --nav-gold-glow:    var(--sxo-gold-glow);
  --nav-white:        var(--sxo-white);
  --nav-text-light:   var(--sxo-text-on-dark);
  --nav-text-muted:   var(--sxo-text-muted-dark);

  /* --- Header V5 (--v5-*) --- */
  --v5-gold:          var(--sxo-gold);
  --v5-gold-light:    var(--sxo-gold-light);
  --v5-navy-medium:   var(--sxo-navy-medium);
  --v5-bg-header:     var(--sxo-navy-deep);
  --v5-border-subtle: var(--sxo-border-subtle);

  /* --- Core ACLG (--aclg-*) --- */
  --aclg-blue:        var(--sxo-navy-medium);
  --aclg-accent:      var(--sxo-gold);
  --aclg-white:       var(--sxo-white);

  /* --- Search Ultimate (--su-*) --- */
  --su-primary:       var(--sxo-navy-medium);
  --su-primary-dark:  var(--sxo-navy-deep);
  --su-accent:        var(--sxo-gold);
  --su-touch-target:  var(--sxo-touch-min);

  /* --- Megamenu (--mm-*) --- */
  --mm-glass-bg:           var(--sxo-glass-bg);
  --mm-glass-border:       var(--sxo-glass-border);
  --mm-glass-hover-border: var(--sxo-glass-hover-border);

  /* --- Legacy Trust Blue (deprecated) --- */
  --trust-blue-dark:  var(--sxo-navy-deep);
  --trust-blue:       var(--sxo-navy-medium);
  --trust-turquoise:  var(--sxo-gold);
}


/* ============================================================================
   12. CONTENEUR FLUIDE — .sxo-container
   Transition sans rupture de 320px a 1200px+.
   Remplace les 20+ overrides .container disperses dans les sections.
   ============================================================================ */

.sxo-container {
  width: 100%;
  max-width: var(--sxo-container-max);
  margin-inline: auto;
  padding-inline: var(--sxo-container-gutter);
  /* Safe areas pour ecrans a encoche */
  padding-left: max(var(--sxo-container-gutter), var(--sxo-safe-left));
  padding-right: max(var(--sxo-container-gutter), var(--sxo-safe-right));
}

/* Variante large (header, megapanel) */
.sxo-container--wide {
  max-width: var(--sxo-container-wide);
}

/* Variante etroite (editorial, texte long) */
.sxo-container--narrow {
  max-width: var(--sxo-container-narrow);
}

/* Variante pleine largeur (hero, sections full-bleed) */
.sxo-container--full {
  max-width: none;
  padding-inline: 0;
}


/* ============================================================================
   13. TYPOGRAPHIE — Classes utilitaires .sxo-h* (opt-in)
   NE PAS appliquer sur body/h1-h4 globaux pour eviter la cascade
   avec core-2026.css et les templates existants.
   Les composants SXO utilisent ces classes explicitement.
   ============================================================================ */

.sxo-h1 { font-size: var(--sxo-fs-h1); font-weight: var(--sxo-fw-extrabold); line-height: var(--sxo-lh-tight); }
.sxo-h2 { font-size: var(--sxo-fs-h2); font-weight: var(--sxo-fw-bold);      line-height: var(--sxo-lh-tight); }
.sxo-h3 { font-size: var(--sxo-fs-h3); font-weight: var(--sxo-fw-semibold);  line-height: var(--sxo-lh-snug); }
.sxo-h4 { font-size: var(--sxo-fs-h4); font-weight: var(--sxo-fw-semibold);  line-height: var(--sxo-lh-snug); }

.sxo-h1, .sxo-h2, .sxo-h3, .sxo-h4 {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  font-family: var(--sxo-font-sans);
}


/* ============================================================================
   14. ERGONOMIE TACTILE — Zones de touche minimales
   Scope .sxo-2026-wrapper pour ne pas impacter EasyAdmin ni les formulaires legacy.
   ============================================================================ */

.sxo-2026-wrapper button,
.sxo-2026-wrapper [role="button"],
.sxo-2026-wrapper input[type="submit"],
.sxo-2026-wrapper input[type="button"],
.sxo-2026-wrapper select {
  min-height: var(--sxo-touch-min);
}

.sxo-2026-wrapper input[type="text"],
.sxo-2026-wrapper input[type="email"],
.sxo-2026-wrapper input[type="tel"],
.sxo-2026-wrapper input[type="search"],
.sxo-2026-wrapper input[type="url"],
.sxo-2026-wrapper input[type="password"],
.sxo-2026-wrapper input[type="number"],
.sxo-2026-wrapper textarea {
  min-height: var(--sxo-touch-min);
}

.sxo-touch-target {
  min-height: var(--sxo-touch-min);
  min-width: var(--sxo-touch-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* ============================================================================
   15. SAFE AREAS — Support encoches et barres systeme
   ============================================================================ */

.sxo-safe-header {
  padding-top: var(--sxo-safe-top);
}

.sxo-safe-footer {
  padding-bottom: var(--sxo-safe-bottom);
}

.sxo-safe-inline {
  padding-left: var(--sxo-safe-left);
  padding-right: var(--sxo-safe-right);
}


/* ============================================================================
   16. UTILITAIRES RESPONSIVE
   ============================================================================ */

.sxo-hidden-mobile {
  display: none;
}

@media (min-width: 768px) {
  .sxo-hidden-mobile {
    display: initial;
  }
}

.sxo-hidden-tablet-up {
  display: initial;
}

@media (min-width: 768px) {
  .sxo-hidden-tablet-up {
    display: none;
  }
}

.sxo-hidden-until-desktop {
  display: none;
}

@media (min-width: 1200px) {
  .sxo-hidden-until-desktop {
    display: initial;
  }
}


/* ============================================================================
   17. ACCESSIBILITE — Mouvement reduit, contraste eleve
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-contrast: high) {
  :root {
    --sxo-glass-border: rgba(255, 255, 255, 0.3);
    --sxo-glass-hover-border: rgba(196, 163, 90, 0.8);
    --sxo-border-subtle: rgba(255, 255, 255, 0.2);
  }
}


/* ============================================================================
   18. FOCUS VISIBLE — Anneau gold accessible
   ============================================================================ */

.sxo-2026-wrapper :focus-visible {
  outline: 3px solid var(--sxo-gold);
  outline-offset: 2px;
}

.sxo-2026-wrapper :focus:not(:focus-visible) {
  outline: none;
}


/* ============================================================================
   FIN — sxo-foundation.css

   MIGRATION (6 etapes) :
   1. Charger ce fichier EN PREMIER dans base.html.twig (avant core-2026.css)
   2. Supprimer les :root dupliques dans navigation-vars.css (couleurs, spacing)
   3. Supprimer les :root dupliques dans header-v5-unified.css (couleurs)
   4. Supprimer les :root dupliques dans core-2026.css (couleurs, spacing)
   5. Migrer les composants : remplacer --nav-gold-primary par --sxo-gold, etc.
   6. Archiver flywheel-variables-2025.css (supersede par unified-themes)
   ============================================================================ */


/* === SOURCE: core-2026.css === */
/* ============================================
   CORE-2026.CSS - Base CSS ACLG 2026
   Fusion: core-2025 + core-2026 (merge 2026-02-10)
   Palette: Trust Navy/Gold (#1e3a5f / #c4a35a)
   Architecture: Mobile-First, CSS Custom Properties
   ============================================ */

/* ===== FONT ===== */
/* Poppins self-hosted via build/vendor/fonts/poppins.css (base.html.twig L34) */
/* @import Google Fonts SUPPRIME 2026-02-16 (render-blocking 783ms) */

/* ===== CSS RESET 2026 ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #1e293b;
  background-color: #0a1628;
}

/* ===== DIALOG ELEMENT RESET ===== */
dialog {
    display: none;
    position: fixed;
    inset: 0;
    border: none;
    padding: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: white;
}

dialog[open] {
    display: block;
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

/* ===== CSS VARIABLES - ACLG 2026 NAVY/GOLD ===== */
:root {
  /* Couleurs principales ACLG 2026 (Navy/Gold) */
  --aclg-blue: #1e3a5f;
  --aclg-accent: #c4a35a;
  --aclg-white: #ffffff;
  --aclg-shadow: 0 2px 10px rgba(30, 58, 95, 0.18);

  /* Couleurs secondaires */
  --aclg-gray-50: #F8F9FA;
  --aclg-gray-100: #E9ECEF;
  --aclg-gray-200: #DEE2E6;
  --aclg-gray-300: #CED4DA;
  --aclg-gray-700: #495057;
  --aclg-gray-900: #212529;

  /* Typographie */
  --font-family-base: 'Poppins', sans-serif;
  --font-size-base: 16px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Espacements */
  --spacing-xs: 0.5rem;   /* 8px */
  --spacing-sm: 1rem;     /* 16px */
  --spacing-md: 1.5rem;   /* 24px */
  --spacing-lg: 2rem;     /* 32px */
  --spacing-xl: 3rem;     /* 48px */
  --spacing-2xl: 4rem;    /* 64px */

  /* Bordures & Radius */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;

  /* Ombres */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);

  /* Transitions */
  --transition-fast: 0.15s ease-in-out;
  --transition-base: 0.3s ease-in-out;
  --transition-slow: 0.5s ease-in-out;

  /* Z-index layers */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* ===== RESET ISOLATION FLYWHEEL 2026 ===== */
.flywheel-v2026-site * {
  box-sizing: border-box;
}

.flywheel-v2026-site {
  font-family: var(--font-family-base) !important;
}

/* Reset boutons legacy (exclut tous les boutons header v5- pour preserver leurs styles) */
.flywheel-v2026-site button:not([class*="v5-"]):not([class*="-2026"]),
.flywheel-v2026-site .btn:not([class*="-2026"]) {
  border: none;
  background: none;
  font-family: inherit;
}

/* Body layout */
body.flywheel-v2026-site {
  margin: 0;
  padding: 0;
  background-color: #0a1628;
}

/* Main content spacing */
.main-content-2026 {
  padding-top: 0;
  padding-bottom: 0;
}

/* ===== UTILITAIRES DE BASE ===== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }

.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }

/* ===== RESET SXO 2026 (ISOLATION PURE) ===== */
/* Reset doux des elements texte */
.sxo-2026-wrapper h1, .sxo-2026-wrapper h2, .sxo-2026-wrapper h3,
.sxo-2026-wrapper h4, .sxo-2026-wrapper h5, .sxo-2026-wrapper h6 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  font-family: inherit;
  background: transparent;
  text-shadow: none;
}

.sxo-2026-wrapper p, .sxo-2026-wrapper a, .sxo-2026-wrapper span {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  background: transparent;
  text-shadow: none;
}

.sxo-2026-wrapper ul,
.sxo-2026-wrapper ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sxo-2026-wrapper .container {
  background: transparent;
}

.sxo-2026-wrapper .row {
  background: transparent;
}

/* Section isolation (mobile-first, sans !important pour laisser les sections definir leur propre display/layout) */
.sxo-2026-wrapper > section {
    width: 100%;
    min-height: auto;
    padding: 48px 0;
    box-sizing: border-box;
    margin: 0;
    background-color: inherit;
    color: inherit;
}

@media (min-width: 768px) {
    .sxo-2026-wrapper > section {
        padding: 64px 0;
    }
}

@media (min-width: 1200px) {
    .sxo-2026-wrapper > section {
        padding: 80px 0;
    }
}

/* Accent Orange Energie pour elements speciaux */
.sxo-2026-wrapper .accent-orange-2026 {
    color: #ff6b35 !important;
}

/* ===== DATA MISSING INDICATOR (DEV) ===== */
.sxo-2026-wrapper .data-missing-2026 {
    background: linear-gradient(135deg, #fef3cd 0%, #fff8e1 100%) !important;
    border: 2px dashed #856404 !important;
    border-radius: 12px !important;
    padding: 40px 20px !important;
    text-align: center !important;
    color: #856404 !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    min-height: auto !important;
}

/* Hide legacy scrollUp */
#scrollUp {
    display: none !important;
}

/* ===== BREADCRUMB LISTING PAGES ===== */
.rs-breadcrumbs.sec-color {
    position: relative;
    margin-bottom: 2rem;
}
.rs-breadcrumbs .breadcrumbs-image {
    position: relative;
    overflow: hidden;
}

@media (min-width: 1px) {
    .rs-breadcrumbs .breadcrumbs-image {
        height: 200px;
    }
}

.rs-breadcrumbs .breadcrumbs-image > img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    filter: brightness(0.5);
}
.rs-breadcrumbs .breadcrumbs-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
}
.rs-breadcrumbs .breadcrumbs-title {
    color: #fff;
    font-size: 2rem;
    margin: 0;
}
.rs-breadcrumbs .breadcrumbs-subtitle {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: flex;
    gap: 0.5rem;
    color: rgba(255,255,255,0.8);
}
.rs-breadcrumbs .breadcrumbs-subtitle a {
    color: #c4a35a;
}

/* ===== BREADCRUMB SXO 2025 (WCAG AA Contrast Fix) ===== */
.breadcrumb-section-2025 {
    background: #0f1f38;
    padding: 8px 0;
    height: 36px;
    display: flex;
    align-items: center;
    font-size: 0.8125rem;
    line-height: 1;
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.breadcrumb-section-2025 .breadcrumb {
    background: transparent;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.breadcrumb-section-2025 .breadcrumb-item {
    white-space: nowrap;
}
.breadcrumb-section-2025 .breadcrumb-item a {
    color: #93c5fd;
    text-decoration: none;
}
.breadcrumb-section-2025 .breadcrumb-item a:hover {
    color: #ffffff;
}
.breadcrumb-section-2025 .breadcrumb-item.active {
    color: rgba(255, 255, 255, 0.7);
    overflow: hidden;
    text-overflow: ellipsis;
}
.breadcrumb-section-2025 .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.5);
}

/* ===== PRINT STYLES ===== */
@media print {
  .v5-header,
  .v5-burger,
  .v5-search-trigger,
  #scrollUp {
    display: none !important;
  }
}


/* === SOURCE: flywheel-variables-2025.css === */
/**
 * FLYWHEEL THEME VARIABLES - 2025
 * ================================
 * Variables CSS partagées pour les 3 thèmes FLYWHEEL
 *
 * Thèmes:
 * - Premium: Dark / Glassmorphism / Gold
 * - Trust: Light / Corporate / Navy
 * - Energy: Dynamic / Orange / Animated
 *
 * Convention: --{theme}-{property}
 * Exemple: --premium-bg, --trust-accent, --energy-cta
 *
 * @see CLAUDE.md Section 3.9 pour documentation complète
 */

:root {
    /* ═══════════════════════════════════════════════════════════════
       PREMIUM THEME - Dark / Glassmorphism / Gold (#FFD700)
       Usage: Pages premium, upsell, offres haut de gamme
       ═══════════════════════════════════════════════════════════════ */

    /* Backgrounds */
    --premium-bg: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    --premium-bg-solid: #1a1a2e;
    --premium-bg-card: rgba(255, 255, 255, 0.03);
    --premium-bg-card-hover: rgba(255, 255, 255, 0.08);
    --premium-glass: rgba(255, 255, 255, 0.05);
    --premium-glass-border: rgba(255, 255, 255, 0.1);

    /* Colors */
    --premium-accent: #FFD700;
    --premium-accent-light: #FFE55C;
    --premium-accent-dark: #B8860B;
    --premium-text: #ffffff;
    --premium-text-muted: rgba(255, 255, 255, 0.7);
    --premium-text-subtle: rgba(255, 255, 255, 0.5);

    /* Borders & Shadows */
    --premium-border: rgba(255, 215, 0, 0.2);
    --premium-border-subtle: rgba(255, 255, 255, 0.1);
    --premium-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    --premium-shadow-glow: 0 0 30px rgba(255, 215, 0, 0.15);

    /* CTA */
    --premium-cta-bg: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    --premium-cta-text: #1a1a2e;
    --premium-cta-hover: linear-gradient(135deg, #FFE55C 0%, #FFB733 100%);

    /* Badges */
    --premium-badge-bg: rgba(255, 215, 0, 0.15);
    --premium-badge-text: #FFD700;
    --premium-badge-border: rgba(255, 215, 0, 0.3);

    /* ═══════════════════════════════════════════════════════════════
       TRUST THEME - Light / Corporate / Navy (#1e3a5f)
       Usage: Pages institutionnelles, confiance, B2B corporate
       ═══════════════════════════════════════════════════════════════ */

    /* Backgrounds */
    --trust-bg: #ffffff;
    --trust-bg-alt: #f8fafc;
    --trust-bg-card: #ffffff;
    --trust-bg-card-hover: #f1f5f9;
    --trust-section-alt: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);

    /* Colors */
    --trust-accent: #1e3a5f;
    --trust-accent-light: #2d5a8a;
    --trust-accent-dark: #0f1d30;
    --trust-text: #1f2937;
    --trust-text-muted: #6b7280;
    --trust-text-subtle: #9ca3af;

    /* Borders & Shadows */
    --trust-border: #e5e7eb;
    --trust-border-accent: rgba(30, 58, 95, 0.2);
    --trust-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --trust-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    /* CTA */
    --trust-cta-bg: #1e3a5f;
    --trust-cta-text: #ffffff;
    --trust-cta-hover: #2d5a8a;
    --trust-cta-secondary-bg: transparent;
    --trust-cta-secondary-border: #1e3a5f;
    --trust-cta-secondary-text: #1e3a5f;

    /* Badges */
    --trust-badge-bg: rgba(30, 58, 95, 0.1);
    --trust-badge-text: #1e3a5f;
    --trust-badge-border: rgba(30, 58, 95, 0.2);

    /* ═══════════════════════════════════════════════════════════════
       ENERGY THEME - Dynamic / Orange (#FF6B35) / Animated
       Usage: Pages action, promo, conversion urgente
       ═══════════════════════════════════════════════════════════════ */

    /* Backgrounds */
    --energy-bg: linear-gradient(135deg, #fff5f0 0%, #ffffff 100%);
    --energy-bg-solid: #fff5f0;
    --energy-bg-card: #ffffff;
    --energy-bg-card-hover: #fff0e6;
    --energy-section-accent: linear-gradient(135deg, #FF6B35 0%, #FF8C5A 100%);

    /* Colors */
    --energy-accent: #FF6B35;
    --energy-accent-light: #FF8C5A;
    --energy-accent-dark: #E55A2B;
    --energy-pulse: #ff8c5a;
    --energy-text: #1f2937;
    --energy-text-muted: #4b5563;
    --energy-text-on-accent: #ffffff;

    /* Borders & Shadows */
    --energy-border: #fed7c7;
    --energy-border-accent: rgba(255, 107, 53, 0.3);
    --energy-shadow: 0 4px 14px rgba(255, 107, 53, 0.15);
    --energy-shadow-lg: 0 10px 25px rgba(255, 107, 53, 0.2);
    --energy-glow: 0 0 20px rgba(255, 107, 53, 0.3);

    /* CTA */
    --energy-cta-bg: linear-gradient(135deg, #FF6B35 0%, #FF8C5A 100%);
    --energy-cta-text: #ffffff;
    --energy-cta-hover: linear-gradient(135deg, #E55A2B 0%, #FF6B35 100%);
    --energy-cta-shadow: 0 4px 14px rgba(255, 107, 53, 0.4);

    /* Badges */
    --energy-badge-bg: rgba(255, 107, 53, 0.1);
    --energy-badge-text: #FF6B35;
    --energy-badge-border: rgba(255, 107, 53, 0.3);
    --energy-badge-urgent: #dc2626;

    /* ═══════════════════════════════════════════════════════════════
       SHARED VARIABLES - Communs aux 3 thèmes
       ═══════════════════════════════════════════════════════════════ */

    /* Spacing (Bootstrap 5 compatible) */
    --flywheel-spacing-xs: 0.5rem;   /* 8px */
    --flywheel-spacing-sm: 1rem;     /* 16px */
    --flywheel-spacing-md: 1.5rem;   /* 24px */
    --flywheel-spacing-lg: 2rem;     /* 32px */
    --flywheel-spacing-xl: 3rem;     /* 48px */
    --flywheel-spacing-xxl: 4rem;    /* 64px */

    /* Border Radius */
    --flywheel-radius-sm: 0.375rem;  /* 6px */
    --flywheel-radius-md: 0.5rem;    /* 8px */
    --flywheel-radius-lg: 0.75rem;   /* 12px */
    --flywheel-radius-xl: 1rem;      /* 16px */
    --flywheel-radius-full: 9999px;

    /* Typography */
    --flywheel-font-size-xs: 0.75rem;   /* 12px */
    --flywheel-font-size-sm: 0.875rem;  /* 14px */
    --flywheel-font-size-base: 1rem;    /* 16px */
    --flywheel-font-size-lg: 1.125rem;  /* 18px */
    --flywheel-font-size-xl: 1.25rem;   /* 20px */
    --flywheel-font-size-2xl: 1.5rem;   /* 24px */
    --flywheel-font-size-3xl: 1.875rem; /* 30px */
    --flywheel-font-size-4xl: 2.25rem;  /* 36px */
--flywheel-font-size-5xl: 2.5rem;   /* 40px */    --flywheel-font-size-6xl: 3rem;     /* 48px */    --flywheel-font-size-7xl: 3.5rem;   /* 56px */    /* Font weights SXO 2026 */    --flywheel-font-weight-normal: 400;    --flywheel-font-weight-medium: 500;    --flywheel-font-weight-semibold: 600;    --flywheel-font-weight-bold: 700;    --flywheel-font-weight-extrabold: 800;    /* Line heights SXO 2026 */    --flywheel-line-height-tight: 1.1;    --flywheel-line-height-heading: 1.2;    --flywheel-line-height-snug: 1.3;    --flywheel-line-height-normal: 1.6;

    /* Transitions */
    --flywheel-transition-fast: 150ms ease;
    --flywheel-transition-base: 300ms ease;
    --flywheel-transition-slow: 500ms ease;

    /* Z-index layers */
    --flywheel-z-base: 1;
    --flywheel-z-dropdown: 100;
    --flywheel-z-sticky: 200;
    --flywheel-z-modal: 300;
    --flywheel-z-tooltip: 400;
}

/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS PARTAGÉES
   ═══════════════════════════════════════════════════════════════ */

/* Pulse animation for Energy theme */
@keyframes flywheel-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

/* Glow animation for Premium theme */
@keyframes flywheel-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.2); }
    50% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.4); }
}

/* Fade in animation */
@keyframes flywheel-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Slide in from left */
@keyframes flywheel-slide-in-left {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Slide in from right */
@keyframes flywheel-slide-in-right {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* === SOURCE: flywheel-unified-themes.css === */
/* ============================================
   FLYWHEEL UNIFIED THEMES - CSS Variables
   Version: 1.0
   Date: 2026-01-16

   Permet d'appliquer des themes differents
   par section via l'attribut data-theme
   ============================================ */

/* ============================================
   VARIABLES PAR DEFAUT (Trust)
   ============================================ */
:root {
    --fw-bg: #ffffff;
    --fw-bg-alt: #f8fafc;
    --fw-accent: #1e3a5f;
    --fw-accent-light: #2d5a8f;
    --fw-accent-dark: #152a45;
    --fw-text: #333333;
    --fw-text-light: #666666;
    --fw-text-muted: #999999;
    --fw-border: #e5e7eb;
    --fw-card-bg: #f8fafc;
    --fw-card-border: #e5e7eb;
    --fw-badge-bg: #e8f4fc;
    --fw-badge-text: #1e3a5f;
    --fw-cta-bg: #1e3a5f;
    --fw-cta-text: #ffffff;
    --fw-cta-hover: #2d5a8f;
    --fw-success: #10b981;
    --fw-warning: #f59e0b;
    --fw-error: #c4a35a;
}

/* ============================================
   THEME TRUST (bleu professionnel)
   ============================================ */
[data-theme="trust"] {
    --fw-bg: #ffffff;
    --fw-bg-hero: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    --fw-bg-alt: #f8fafc;
    --fw-accent: #1e40af;
    --fw-accent-light: #3b82f6;
    --fw-accent-dark: #1e3a8a;
    --fw-text: #1e293b;
    --fw-text-light: #64748b;
    --fw-card-bg: #ffffff;
    --fw-card-border: #e2e8f0;
    --fw-badge-bg: #1e40af;
    --fw-badge-text: #ffffff;
    --fw-cta-bg: #f97316;
    --fw-cta-text: #ffffff;
    --fw-cta-hover: #ea580c;
}

/* ============================================
   THEME PREMIUM (dark/gold luxe)
   ============================================ */
[data-theme="premium"] {
    --fw-bg: #1a1a2e;
    --fw-bg-alt: #16213e;
    --fw-accent: #FFD700;
    --fw-accent-light: #ffdf4d;
    --fw-accent-dark: #b8860b;
    --fw-text: #ffffff;
    --fw-text-light: #cccccc;
    --fw-text-muted: #999999;
    --fw-border: rgba(255, 215, 0, 0.3);
    --fw-card-bg: rgba(255, 255, 255, 0.05);
    --fw-card-border: rgba(255, 215, 0, 0.2);
    --fw-badge-bg: rgba(255, 215, 0, 0.2);
    --fw-badge-text: #FFD700;
    --fw-cta-bg: #FFD700;
    --fw-cta-text: #1a1a2e;
    --fw-cta-hover: #ffdf4d;
}

/* ============================================
   THEME MODERN (teal/turquoise)
   ============================================ */
[data-theme="modern"] {
    --fw-bg: #ffffff;
    --fw-bg-alt: #f0fdfa;
    --fw-accent: #0d9488;
    --fw-accent-light: #14b8a6;
    --fw-accent-dark: #0f766e;
    --fw-text: #1f2937;
    --fw-text-light: #4b5563;
    --fw-text-muted: #9ca3af;
    --fw-border: #d1fae5;
    --fw-card-bg: #f0fdfa;
    --fw-card-border: #99f6e4;
    --fw-badge-bg: #ccfbf1;
    --fw-badge-text: #0d9488;
    --fw-cta-bg: #0d9488;
    --fw-cta-text: #ffffff;
    --fw-cta-hover: #14b8a6;
}

/* ============================================
   THEME ENERGY (orange dynamique)
   ============================================ */
[data-theme="energy"] {
    --fw-bg: #ffffff;
    --fw-bg-alt: #fff7ed;
    --fw-accent: #ea580c;
    --fw-accent-light: #f97316;
    --fw-accent-dark: #c2410c;
    --fw-text: #1f2937;
    --fw-text-light: #4b5563;
    --fw-text-muted: #9ca3af;
    --fw-border: #fed7aa;
    --fw-card-bg: #fff7ed;
    --fw-card-border: #fdba74;
    --fw-badge-bg: #ffedd5;
    --fw-badge-text: #ea580c;
    --fw-cta-bg: #ea580c;
    --fw-cta-text: #ffffff;
    --fw-cta-hover: #f97316;
}

/* ============================================
   COMPOSANTS GENERIQUES FLYWHEEL
   Utilisent les CSS Variables pour s'adapter
   automatiquement au theme de la section
   ============================================ */

/* Section wrapper */
.flywheel-section-2025 {
    background: var(--fw-bg);
    color: var(--fw-text);
    padding: 80px 0;
    position: relative;
    z-index: 1;
}

/* Hero Section Specifics */
.hero-unified.flywheel-section-2025 {
    background: #1e3a5f !important; /* Force background for visibility */
    background-image: var(--fw-bg-hero) !important;
    color: #ffffff !important;
}

.hero-unified.flywheel-section-2025 .fw-title,
.hero-unified.flywheel-section-2025 h1 {
    color: #ffffff !important;
}

.hero-unified.flywheel-section-2025 .fw-subtitle,
.hero-unified.flywheel-section-2025 p {
    color: rgba(255, 255, 255, 0.9) !important;
}

.hero-unified.flywheel-section-2025 .fw-list li {
    color: #ffffff !important;
}

/* Premium theme needs gradient background */
[data-theme="premium"].flywheel-section-2025 {
    background: linear-gradient(135deg, var(--fw-bg) 0%, var(--fw-bg-alt) 100%);
}

/* Section titles */
.flywheel-section-2025 .section-title-2025,
.flywheel-section-2025 .fw-title {
    color: var(--fw-accent);
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.flywheel-section-2025 .section-subtitle-2025,
.flywheel-section-2025 .fw-subtitle {
    color: var(--fw-text-light);
    font-size: 1.125rem;
    margin-bottom: 2rem;
}

/* Cards */
.flywheel-section-2025 .fw-card {
    background: var(--fw-card-bg);
    border: 1px solid var(--fw-card-border);
    border-radius: 12px;
    padding: 24px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.flywheel-section-2025 .fw-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

/* Badges */
.flywheel-section-2025 .fw-badge {
    display: inline-block;
    background: var(--fw-badge-bg);
    color: var(--fw-badge-text);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
}

/* CTA Buttons */
.flywheel-section-2025 .fw-cta,
.flywheel-section-2025 .cta-button-2025 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--fw-cta-bg);
    color: var(--fw-cta-text) !important;
    padding: 16px 32px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none !important;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    min-height: 48px;
}

.flywheel-section-2025 .fw-cta:hover,
.flywheel-section-2025 .cta-button-2025:hover {
    background: var(--fw-cta-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Secondary CTA (outline) */
.flywheel-section-2025 .fw-cta-secondary {
    display: inline-block;
    background: transparent;
    color: var(--fw-accent);
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid var(--fw-accent);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.flywheel-section-2025 .fw-cta-secondary:hover {
    background: var(--fw-accent);
    color: var(--fw-cta-text);
}

/* Links */
.flywheel-section-2025 a:not(.fw-cta):not(.fw-cta-secondary):not(.cta-button-2025) {
    color: var(--fw-accent);
    text-decoration: none;
    transition: color 0.2s ease;
}

.flywheel-section-2025 a:not(.fw-cta):not(.fw-cta-secondary):not(.cta-button-2025):hover {
    color: var(--fw-accent-light);
    text-decoration: underline;
}

/* Icons */
.flywheel-section-2025 .fw-icon {
    color: var(--fw-accent);
    font-size: 2rem;
    margin-bottom: 1rem;
}

/* Dividers */
.flywheel-section-2025 .fw-divider {
    border: none;
    border-top: 1px solid var(--fw-border);
    margin: 2rem 0;
}

/* Lists */
.flywheel-section-2025 .fw-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.flywheel-section-2025 .fw-list li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
}

.flywheel-section-2025 .fw-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: var(--fw-accent);
    border-radius: 50%;
}

/* ============================================
   RESPONSIVE - MOBILE FIRST
   ============================================ */

/* Tablet (768px+) */
@media (min-width: 768px) {
    .flywheel-section-2025 {
        padding: 64px 0;
    }

    .flywheel-section-2025 .section-title-2025,
    .flywheel-section-2025 .fw-title {
        font-size: 2.25rem;
    }

    .flywheel-section-2025 .fw-card {
        padding: 32px;
    }
}

/* Desktop (1200px+) */
@media (min-width: 1200px) {
    .flywheel-section-2025 {
        padding: 80px 0;
    }

    .flywheel-section-2025 .section-title-2025,
    .flywheel-section-2025 .fw-title {
        font-size: 2.5rem;
    }
}

/* Large Desktop (1200px+) */
@media (min-width: 1200px) {
    .flywheel-section-2025 {
        padding: 100px 0;
    }
}

/* ============================================
   UTILITAIRES
   ============================================ */

/* Text colors */
.flywheel-section-2025 .fw-text-accent {
    color: var(--fw-accent);
}

.flywheel-section-2025 .fw-text-light {
    color: var(--fw-text-light);
}

.flywheel-section-2025 .fw-text-muted {
    color: var(--fw-text-muted);
}

/* Background colors */
.flywheel-section-2025 .fw-bg-alt {
    background: var(--fw-bg-alt);
}

.flywheel-section-2025 .fw-bg-card {
    background: var(--fw-card-bg);
}

/* Border */
.flywheel-section-2025 .fw-border {
    border: 1px solid var(--fw-border);
}

.flywheel-section-2025 .fw-border-accent {
    border: 1px solid var(--fw-accent);
}