/* ============================================================================
   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)
   ============================================================================ */