/**
 * ========================================
 * 🎨 BCS Design System - Charte Graphique Centralisée
 * ========================================
 * 
 * Ce fichier centralise TOUTES les couleurs et styles du site BCS.
 * Pour modifier une couleur, changez-la ICI et elle se propagera partout.
 * Source de vérité visuelle unique : ne pas créer de second design system.
 *
 * 📋 STATUT DES TOKENS (charte BCS, LOT 1 du 2026-09-26) :
 *
 * CURRENT : ce qui fonctionne aujourd'hui dans l'existant (section 1).
 * LEGACY  : partie de CURRENT autorisée temporairement, uniquement pour
 *           préserver l'existant pendant la migration : vert #2BA84A
 *           (+ #239140, #4BC066), bleu #0072CE et famille, Poppins
 *           (--bcs-font-family-base).
 * TARGET  : norme officielle pour tout nouveau développement (section 1b,
 *           --bcs-brand-*, --bcs-gray-dark, --bcs-gray-light).
 *
 * 📐 RÈGLES D'APPLICATION (en vigueur à la validation du LOT 1) :
 * 1. Nouveaux univers, sous-domaines, modules, pages, vues et composants :
 *    TARGET directement. LEGACY interdit sauf nécessité technique justifiée
 *    par écrit dans le rapport du lot.
 * 2. Interfaces existantes : aucune modification brutale ; migration vers
 *    TARGET par lots dédiés, validés avant généralisation.
 * 3. Interdit à tout nouvel univers : palette ou typographie indépendante,
 *    second design system, couleur choisie localement hors tokens officiels.
 *    Un besoin non couvert se traite en ajoutant un token ici, après validation.
 * Convention agent : docs/agents/technical-delivery/ui-ux.md.
 *
 * Palette TARGET : vert foncé #2F8F3A, vert #3FAE3D, vert clair #74D33D,
 * gris foncé #4D4D4D, gris clair #F4F4F4, blanc #FFFFFF.
 * Typographie TARGET : titres Montserrat, actions Montserrat SemiBold,
 * texte courant Inter.
 *
 * 🔧 USAGE : var(--bcs-nom-variable). Les nouveaux composants utilisent les
 * tokens et jamais une couleur hexadécimale en dur.
 */

/* ========================================
   1. VARIABLES RACINE - PALETTE BCS
   ======================================== */
:root {
    /* ===== COULEURS PRINCIPALES ===== */
    
    /* Vert BCS - Identité de marque — LEGACY (TARGET : --bcs-brand-green*) */
    --bcs-green: #2BA84A;
    --bcs-green-rgb: 43, 168, 74;
    --bcs-green-dark: #239140;
    --bcs-green-light: #4BC066;
    --bcs-green-pale: #E8F5E9;
    
    /* Bleu BCS - Accent et interactivité — LEGACY (#0072CE, hors palette TARGET) */
    --bcs-blue: #0072CE;
    --bcs-blue-rgb: 0, 114, 206;
    --bcs-blue-dark: #005BA3;
    --bcs-blue-light: #2196F3;
    --bcs-blue-pale: #E3F2FD;
    
    /* Blanc */
    --bcs-white: #FFFFFF;
    --bcs-white-rgb: 255, 255, 255;
    
    /* Gris - Textes et fonds */
    --bcs-gray-100: #F4F4F4;  /* Fond secondaire */
    --bcs-gray-200: #E0E0E0;  /* Bordures légères */
    --bcs-gray-300: #BDBDBD;  /* Texte désactivé */
    --bcs-gray-400: #9E9E9E;  /* Texte secondaire */
    --bcs-gray-500: #757575;  /* Texte muted */
    --bcs-gray-600: #616161;  /* Sous-titres */
    --bcs-gray-700: #424242;  /* Texte normal */
    --bcs-gray-800: #333333;  /* Texte principal / Titres */
    --bcs-gray-900: #212121;  /* Texte très foncé */
    
    /* Couleurs d'état */
    --bcs-success: var(--bcs-green);
    --bcs-success-rgb: var(--bcs-green-rgb);
    --bcs-info: var(--bcs-blue);
    --bcs-info-rgb: var(--bcs-blue-rgb);
    --bcs-warning: #FFC107;
    --bcs-warning-rgb: 255, 193, 7;
    --bcs-danger: #DC3545;
    --bcs-danger-rgb: 220, 53, 69;
    
    /* ===== SÉMANTIQUE - USAGE PAR CONTEXTE ===== */
    
    /* Titres et textes */
    --bcs-heading-color: #1A1A2E;
    --bcs-text-color: var(--bcs-gray-700);
    --bcs-text-muted: var(--bcs-gray-500);
    --bcs-text-light: var(--bcs-white);
    
    /* Liens */
    --bcs-link-color: var(--bcs-blue);
    --bcs-link-hover: var(--bcs-blue-dark);
    
    /* Boutons primaires */
    --bcs-btn-primary-bg: var(--bcs-green);
    --bcs-btn-primary-hover: var(--bcs-green-dark);
    --bcs-btn-primary-text: var(--bcs-white);
    
    /* Boutons secondaires */
    --bcs-btn-secondary-bg: var(--bcs-blue);
    --bcs-btn-secondary-hover: var(--bcs-blue-dark);
    --bcs-btn-secondary-text: var(--bcs-white);
    
    /* Fonds */
    --bcs-bg-primary: var(--bcs-white);
    --bcs-bg-secondary: var(--bcs-gray-100);
    --bcs-bg-dark: var(--bcs-gray-800);
    --bcs-bg-accent: var(--bcs-green);
    
    /* Bordures */
    --bcs-border-color: var(--bcs-gray-200);
    --bcs-border-light: var(--bcs-gray-100);
    --bcs-border-subtle: #E8EDF4;

    /* ===== SHELL / LAYOUT TOKENS ===== */
    --bcs-shell-bg: #F3F6FB;
    --bcs-page-max-width: none;
    --bcs-header-bg: var(--bcs-white);
    --bcs-header-height: 3.75rem;
    --bcs-header-height-mobile: 3.25rem;
    --bcs-footer-height: 2.35rem;
    --bcs-sidebar-width-expanded: 17.5rem;
    --bcs-sidebar-width-collapsed: 5rem;
    --bcs-sidebar-width-mobile: min(17.5rem, calc(100vw - 1rem));
    --bcs-sidebar-bg: #111C44;
    --bcs-sidebar-bg-soft: #162453;
    --bcs-sidebar-border: rgba(255, 255, 255, 0.08);
    --bcs-sidebar-text: rgba(226, 232, 240, 0.78);
    --bcs-sidebar-text-muted: rgba(226, 232, 240, 0.5);
    --bcs-sidebar-text-active: var(--bcs-white);
    --bcs-sidebar-accent: #22C55E;
    --bcs-content-padding-x: 1rem;
    --bcs-content-padding-y: 0.7rem;
    --bcs-content-padding-x-mobile: 0.75rem;
    --bcs-content-padding-x-compact: 0.55rem;
    --bcs-content-padding-bottom: 1rem;
    --bcs-text-primary: #172033;
    --bcs-text-secondary: #64748B;
    
    /* Ombres */
    --bcs-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --bcs-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --bcs-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
    --bcs-shadow-green: 0 4px 15px rgba(var(--bcs-green-rgb), 0.3);
    --bcs-shadow-blue: 0 4px 15px rgba(var(--bcs-blue-rgb), 0.3);
    --bcs-shadow-header: 0 10px 28px rgba(15, 23, 42, 0.12);
    --bcs-shadow-card: 0 4px 12px rgba(15, 23, 42, 0.035);
    --bcs-shadow-panel: 0 8px 20px rgba(15, 23, 42, 0.04);
    --bcs-shadow-flyout: 0 18px 45px rgba(0, 0, 0, 0.28);
    
    /* Espacements */
    --bcs-space-0: 0;
    --bcs-space-1: 0.25rem;
    --bcs-space-2: 0.5rem;
    --bcs-space-3: 0.75rem;
    --bcs-space-4: 1rem;
    --bcs-space-5: 1.5rem;
    --bcs-space-6: 2rem;
    --bcs-space-7: 3rem;
    --bcs-spacing-xs: 0.25rem;
    --bcs-spacing-sm: 0.5rem;
    --bcs-spacing-md: 1rem;
    --bcs-spacing-lg: 1.5rem;
    --bcs-spacing-xl: 2rem;
    --bcs-spacing-xxl: 3rem;
    
    /* Bordures arrondies */
    --bcs-radius-xs: 4px;
    --bcs-radius-sm: 4px;
    --bcs-radius-control: 6px;
    --bcs-radius-md: 8px;
    --bcs-radius-lg: 12px;
    --bcs-radius-xl: 20px;
    --bcs-radius-pill: 999px;
    --bcs-radius-full: 50%;
    --bcs-radius: var(--bcs-radius-md);

    /* Typographie */
    /* LEGACY : Poppins, token non consommé ; TARGET : --bcs-brand-font-* */
    --bcs-font-family-base: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --bcs-font-size-xs: 0.72rem;
    --bcs-font-size-sm: 0.78rem;
    --bcs-font-size-md: 0.84rem;
    --bcs-font-size-lg: 0.94rem;
    --bcs-font-size-xl: 1.02rem;
    --bcs-font-size-2xl: 1.14rem;
    --bcs-line-height-tight: 1.15;
    --bcs-line-height-base: 1.32;
    --bcs-font-weight-medium: 600;
    --bcs-font-weight-semibold: 700;
    --bcs-font-weight-bold: 800;

    /* Z-index */
    --bcs-z-footer: 19;
    --bcs-z-header: 1030;
    --bcs-z-sidebar: 1045;
    --bcs-z-modal-backdrop: 1080;
    --bcs-z-modal: 1090;
    --bcs-z-sidebar-flyout: 1100;
    --bcs-z-loader: 9999;
    
    /* Transitions */
    --bcs-transition: all 0.3s ease;
    --bcs-transition-fast: all 0.15s ease;
    --bcs-transition-base: all 0.18s ease;
    --bcs-transition-shell: all 0.3s ease;

    /* Breakpoints - aliases documentaires Bootstrap */
    --bcs-breakpoint-mobile-max: 575.98px;
    --bcs-breakpoint-tablet-max: 991.98px;
    --bcs-breakpoint-desktop-min: 992px;
    /* Palier xl Bootstrap (décision 10 du LOT 2, validée le 2026-09-26) */
    --bcs-breakpoint-xl-min: 1200px;

    /* ========================================
       1b. TARGET - IDENTITÉ OFFICIELLE BCS (LOT 1, 2026-09-26)
       ========================================
       Norme par défaut de tout NOUVEAU développement (voir règles en tête).
       Appliqués à aucun sélecteur existant : aucun impact visuel sur l'existant.
       Le préfixe --bcs-brand-* évite de modifier --bcs-green / -dark / -light
       (CURRENT), consommés partout. À la bascule validée, les tokens CURRENT
       pointeront vers ces valeurs.
       Contrastes WCAG mesurés (texte normal AA = 4.5:1, UI/focus = 3:1) :
       blanc/#3FAE3D 2.86 ; blanc/#2F8F3A 4.11 ; blanc/#74D33D 1.89 ;
       #4D4D4D/blanc 8.45 ; #4D4D4D/#F4F4F4 7.69 ; #2F8F3A/#F4F4F4 3.74. */

    /* Palette TARGET */
    --bcs-brand-green-dark: #2F8F3A;
    --bcs-brand-green-dark-rgb: 47, 143, 58;
    --bcs-brand-green: #3FAE3D;
    --bcs-brand-green-rgb: 63, 174, 61;
    --bcs-brand-green-light: #74D33D;
    --bcs-brand-green-light-rgb: 116, 211, 61;
    --bcs-brand-gray-dark: #4D4D4D;
    --bcs-brand-gray-dark-rgb: 77, 77, 77;
    --bcs-brand-gray-light: #F4F4F4;
    --bcs-brand-gray-light-rgb: 244, 244, 244;
    --bcs-brand-white: #FFFFFF;
    --bcs-brand-white-rgb: 255, 255, 255;
    /* Variante accessible de la charte (décision P3, 2026-09-26) : vert des
       boutons et du texte vert sur fond blanc. Blanc sur #2C8637 = 4.59:1 (AA).
       #3FAE3D reste la couleur de marque (logo, icônes, accents, décor). */
    --bcs-brand-green-action: #2C8637;
    --bcs-brand-green-action-rgb: 44, 134, 55;
    /* Noms charte libres (aucun usage existant) : alias directs TARGET */
    --bcs-gray-dark: var(--bcs-brand-gray-dark);
    --bcs-gray-light: var(--bcs-brand-gray-light);

    /* Typographie TARGET : Inter et Montserrat (500, 600) sont déjà chargées
       par le thème YNEX (styles.min.css) dans les layouts ERP. */
    --bcs-brand-font-heading: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bcs-brand-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bcs-brand-font-action: var(--bcs-brand-font-heading);
    --bcs-brand-font-weight-action: 600; /* Montserrat SemiBold */

    /* Texte TARGET */
    --bcs-brand-text-primary: var(--bcs-brand-gray-dark);
    --bcs-brand-text-on-dark: var(--bcs-brand-white);
    /* PENDING : pas de valeur charte, reprend provisoirement la valeur CURRENT */
    --bcs-brand-text-secondary: var(--bcs-text-secondary);
    /* LOT 3a : valeur validée (gris foncé, décision 2) appliquée dans la
       portée .bcs-brand (section 20) ; la valeur globale reste CURRENT. */

    /* Arrière-plans TARGET */
    --bcs-brand-bg: var(--bcs-brand-white);
    --bcs-brand-bg-subtle: var(--bcs-brand-gray-light);
    --bcs-brand-bg-inverse: var(--bcs-brand-gray-dark);
    --bcs-brand-bg-accent: var(--bcs-brand-green);

    /* Bordures TARGET */
    --bcs-brand-border-accent: var(--bcs-brand-green-dark);
    /* PENDING : pas de valeur charte, reprend provisoirement la valeur CURRENT */
    --bcs-brand-border-color: var(--bcs-border-color);

    /* Rayons, ombres, espacements : les échelles CURRENT ci-dessus
       (--bcs-radius-*, --bcs-shadow-*, --bcs-space-*) sont partagées par
       TARGET. Alias sémantiques pour les futurs composants : */
    --bcs-brand-radius-control: var(--bcs-radius-control);
    --bcs-brand-radius-card: var(--bcs-radius-lg);
    --bcs-brand-shadow-card: var(--bcs-shadow-card);
    --bcs-brand-shadow-raised: var(--bcs-shadow-panel);
    --bcs-brand-space-control-x: var(--bcs-space-4);
    --bcs-brand-space-control-y: var(--bcs-space-2);

    /* États TARGET (hover / active / focus / disabled) */
    /* Fond d'action = vert accessible (P3). Hover/active gardent ce fond :
       #2F8F3A (4.11:1) ne tient pas AA avec du blanc ; l'état se signale par
       un indice non coloré (soulignement, ombre interne). */
    --bcs-brand-action-bg: var(--bcs-brand-green-action);
    --bcs-brand-action-bg-hover: var(--bcs-brand-green-action);
    --bcs-brand-action-bg-active: var(--bcs-brand-green-action);
    --bcs-brand-action-text: var(--bcs-brand-white);
    --bcs-brand-hover-bg-subtle: var(--bcs-brand-gray-light);
    /* Focus : #2F8F3A atteint 4.11:1 sur blanc et 3.74:1 sur #F4F4F4 (>= 3:1) */
    --bcs-brand-focus-ring-color: var(--bcs-brand-green-dark);
    --bcs-brand-focus-ring-width: 2px;
    --bcs-brand-focus-ring-offset: 2px;
    --bcs-brand-focus-ring: 0 0 0 var(--bcs-brand-focus-ring-width) var(--bcs-brand-focus-ring-color);
    --bcs-brand-disabled-bg: var(--bcs-brand-gray-light);
    --bcs-brand-disabled-text: var(--bcs-brand-gray-dark);
    --bcs-brand-disabled-opacity: 0.65; /* aligné sur Bootstrap 5 */
    --bcs-brand-disabled-cursor: not-allowed;

    /* Décisions de design du LOT 2, validées le 2026-09-26 (promotion LOT 3a).
       Tokens nouveaux, sans consommateur hors .bcs-brand. Les tokens existants
       dont la valeur change (--bcs-brand-text-secondary, --bcs-brand-focus-ring)
       sont redéfinis dans la portée .bcs-brand (section 20). */
    --bcs-brand-font-weight-heading: 700; /* décision 7 : Montserrat Bold */
    --bcs-brand-fs-h1: clamp(1.5rem, 1.15rem + 1.4vw, 2rem);
    --bcs-brand-fs-h2: clamp(1.25rem, 1.05rem + 0.8vw, 1.5rem);
    --bcs-brand-fs-h3: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
    --bcs-brand-fs-subtitle: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
    --bcs-brand-fs-body: 1rem;
    --bcs-brand-fs-display: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
    --bcs-brand-field-border: var(--bcs-brand-gray-dark); /* décision 3 : 8.45:1 */
    --bcs-brand-link: var(--bcs-brand-green-action); /* décision 5 : 4.59:1, souligné */
    --bcs-brand-success: var(--bcs-brand-green-action); /* décision 4 */
    --bcs-brand-danger: var(--bcs-danger);
    --bcs-brand-warning: var(--bcs-warning); /* fond ; texte en gris foncé */
    --bcs-brand-info: var(--bcs-brand-gray-dark);
    --bcs-brand-radius-button: var(--bcs-radius-md); /* décision 9 : 8px */

    /* ===== OVERRIDE BOOTSTRAP ===== */
    /* CURRENT : primary = bleu LEGACY, success = vert LEGACY.
       Stratégie de migration progressive (NON appliquée dans le LOT 1) :
       1. ne jamais remapper --bs-* globalement en une fois ;
       2. appliquer la palette TARGET par portée (classe conteneur, ex. futur
          .bcs-brand) en redéfinissant --bs-primary(-rgb), --bs-success(-rgb),
          --bs-body-font-family et les variables de composant
          (--bs-btn-bg, --bs-btn-hover-bg, --bs-btn-disabled-bg...) : Bootstrap 5
          compile les couleurs des .btn-* en dur, remapper --bs-primary seul ne
          suffit pas ;
       3. basculer ces overrides globaux vers --bcs-brand-* seulement après
          validation écran par écran et décision WCAG. */
    --bs-primary: var(--bcs-blue);
    --bs-primary-rgb: var(--bcs-blue-rgb);
    --bs-success: var(--bcs-green);
    --bs-success-rgb: var(--bcs-green-rgb);
    --bs-body-color: var(--bcs-text-color);
    --bs-body-bg: var(--bcs-bg-primary);
    --bs-link-color: var(--bcs-link-color);
    --bs-link-hover-color: var(--bcs-link-hover);
}

/* ========================================
   2. RESET & BASE STYLES
   ======================================== */

body {
    color: var(--bcs-text-color);
    background-color: var(--bcs-bg-primary);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--bcs-heading-color);
}

/* ✅ FIX: Titres blancs sur fonds sombres/colorés (sinon #333 invisible) */
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4, .section-dark h5, .section-dark h6,
.section-green h1, .section-green h2, .section-green h3, .section-green h4, .section-green h5, .section-green h6,
.footer-bcs h1, .footer-bcs h2, .footer-bcs h3, .footer-bcs h4, .footer-bcs h5, .footer-bcs h6,
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6,
.bg-success h1, .bg-success h2, .bg-success h3, .bg-success h4, .bg-success h5, .bg-success h6,
.bg-primary h1, .bg-primary h2, .bg-primary h3, .bg-primary h4, .bg-primary h5, .bg-primary h6,
.bg-bcs-green h1, .bg-bcs-green h2, .bg-bcs-green h3, .bg-bcs-green h4, .bg-bcs-green h5, .bg-bcs-green h6,
.bg-bcs-dark h1, .bg-bcs-dark h2, .bg-bcs-dark h3, .bg-bcs-dark h4, .bg-bcs-dark h5, .bg-bcs-dark h6,
.bg-bcs-blue h1, .bg-bcs-blue h2, .bg-bcs-blue h3, .bg-bcs-blue h4, .bg-bcs-blue h5, .bg-bcs-blue h6 {
    color: var(--bcs-white);
}

a {
    color: var(--bcs-link-color);
    transition: var(--bcs-transition-fast);
}

a:hover {
    color: var(--bcs-link-hover);
}

/* ========================================
   3. CLASSES UTILITAIRES - COULEURS
   ======================================== */

/* Textes */
.text-bcs-green { color: var(--bcs-green) !important; }
.text-bcs-green-dark { color: var(--bcs-green-dark) !important; }
.text-bcs-blue { color: var(--bcs-blue) !important; }
.text-bcs-blue-dark { color: var(--bcs-blue-dark) !important; }
.text-bcs-gray { color: var(--bcs-gray-800) !important; }
.text-bcs-muted { color: var(--bcs-text-muted) !important; }

/* Fonds */
.bg-bcs-green { background-color: var(--bcs-green) !important; }
.bg-bcs-green-dark { background-color: var(--bcs-green-dark) !important; }
.bg-bcs-green-pale { background-color: var(--bcs-green-pale) !important; }
.bg-bcs-blue { background-color: var(--bcs-blue) !important; }
.bg-bcs-blue-pale { background-color: var(--bcs-blue-pale) !important; }
.bg-bcs-gray-light { background-color: var(--bcs-gray-100) !important; }
.bg-bcs-white { background-color: var(--bcs-white) !important; }
.bg-bcs-dark { background-color: var(--bcs-gray-800) !important; }

/* Bordures */
.border-bcs-green { border-color: var(--bcs-green) !important; }
.border-bcs-blue { border-color: var(--bcs-blue) !important; }
.border-bcs-gray { border-color: var(--bcs-border-color) !important; }

/* ========================================
   8. SECTIONS - HERO & BANNIÈRES
   ======================================== */

.hero-bcs,
.banner-bcs {
    background: linear-gradient(135deg, 
        rgba(var(--bcs-green-rgb), 0.95) 0%, 
        rgba(35, 145, 64, 0.95) 100%);
    color: var(--bcs-white);
}

.hero-bcs h1,
.hero-bcs h2,
.hero-bcs p,
.banner-bcs h1,
.banner-bcs h2,
.banner-bcs p {
    color: var(--bcs-white);
}

.cta-bcs {
    background: linear-gradient(135deg, var(--bcs-green) 0%, var(--bcs-green-dark) 100%);
    color: var(--bcs-white);
}

.cta-bcs h1,
.cta-bcs h2,
.cta-bcs h3,
.cta-bcs p {
    color: var(--bcs-white);
}

/* ========================================
   9. SECTIONS - FONDS
   ======================================== */

.section-light {
    background-color: var(--bcs-bg-secondary);
}

.section-white {
    background-color: var(--bcs-bg-primary);
}

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

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

/* ========================================
   10. NAVIGATION
   ======================================== */

.navbar-bcs {
    background-color: var(--bcs-white);
    box-shadow: var(--bcs-shadow-sm);
}

.navbar-bcs .nav-link {
    color: var(--bcs-gray-800);
    transition: var(--bcs-transition-fast);
}

.navbar-bcs .nav-link:hover,
.navbar-bcs .nav-link.active {
    color: var(--bcs-green);
}

/* Top bar */
.topbar-bcs {
    background-color: var(--bcs-green);
    color: var(--bcs-white);
}

/* ========================================
   11. FOOTER
   ======================================== */

.footer-bcs {
    background-color: var(--bcs-gray-800);
    color: var(--bcs-white);
}

.footer-bcs a {
    color: rgba(255, 255, 255, 0.8);
}

.footer-bcs a:hover {
    color: var(--bcs-green);
}

/* ========================================
   12. ICÔNES & ÉLÉMENTS DÉCORATIFS
   ======================================== */

.icon-circle-green {
    width: 70px;
    height: 70px;
    background-color: var(--bcs-green);
    color: var(--bcs-white);
    border-radius: var(--bcs-radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.icon-circle-blue {
    width: 70px;
    height: 70px;
    background-color: var(--bcs-blue);
    color: var(--bcs-white);
    border-radius: var(--bcs-radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ========================================
   13. OVERRIDE BOOTSTRAP (classes standards)
   ======================================== */

.bg-success { background-color: var(--bcs-green) !important; }
.bg-primary { background-color: var(--bcs-blue) !important; }
.bg-light { background-color: var(--bcs-gray-100) !important; }
.bg-dark { background-color: var(--bcs-gray-800) !important; }

.text-success { color: var(--bcs-green) !important; }
.text-primary { color: var(--bcs-blue) !important; }
.text-dark { color: var(--bcs-gray-800) !important; }
.text-muted { color: var(--bcs-text-muted) !important; }

.border-success { border-color: var(--bcs-green) !important; }
.border-primary { border-color: var(--bcs-blue) !important; }

/* ========================================
   14. ANIMATIONS
   ======================================== */

.hover-lift {
    transition: var(--bcs-transition);
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: var(--bcs-shadow-lg);
}

.hover-green:hover {
    color: var(--bcs-green) !important;
}

.hover-blue:hover {
    color: var(--bcs-blue) !important;
}

/* ========================================
   15. RESPONSIVE - SYSTÈME COMPLET
   ======================================== */

/* ----- BREAKPOINTS -----
   xs: 0 - 575px (mobile portrait)
   sm: 576px - 767px (mobile landscape)
   md: 768px - 991px (tablet)
   lg: 992px - 1199px (desktop)
   xl: 1200px+ (large desktop)
--------------------------*/

/* ===== MOBILE PORTRAIT (xs) ===== */
@media (max-width: 575.98px) {
    :root {
        --bcs-spacing-xl: 1rem;
        --bcs-spacing-xxl: 1.5rem;
    }
    
    /* Typographie mobile */
    h1 { font-size: 1.75rem !important; }
    h2 { font-size: 1.5rem !important; }
    h3 { font-size: 1.25rem !important; }
    h4 { font-size: 1.1rem !important; }
    
    /* Container padding */
    .container, .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Boutons mobile - full width */
    .btn-mobile-full {
        width: 100%;
        margin-bottom: 10px;
    }
    
    /* Stack buttons vertically on mobile */
    .btn-group-mobile {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .btn-group-mobile .btn {
        width: 100%;
    }
    
    /* Hero section mobile */
    .hero-bcs, .banner-bcs {
        min-height: 300px !important;
        padding: 40px 15px !important;
    }
    
    .hero-bcs h1, .banner-bcs h1 {
        font-size: 1.5rem !important;
    }
    
    .hero-bcs p, .banner-bcs p {
        font-size: 0.9rem !important;
    }
    
    /* Cards mobile */
    .card {
        margin-bottom: 15px;
    }
    
    /* Footer mobile */
    .footer-bcs .footer-item {
        text-align: center;
        margin-bottom: 30px;
    }
    
    /* Hide on mobile */
    .d-mobile-none {
        display: none !important;
    }
    
}

/* ===== MOBILE LANDSCAPE (sm) ===== */
@media (min-width: 576px) and (max-width: 767.98px) {
    :root {
        --bcs-spacing-xl: 1.25rem;
        --bcs-spacing-xxl: 1.75rem;
    }
    
    h1 { font-size: 2rem !important; }
    h2 { font-size: 1.75rem !important; }
    
    .hero-bcs, .banner-bcs {
        min-height: 350px !important;
    }
}

/* ===== TABLET (md) ===== */
@media (min-width: 768px) and (max-width: 991.98px) {
    :root {
        --bcs-spacing-xl: 1.5rem;
        --bcs-spacing-xxl: 2rem;
    }
    
    /* Navbar tablet */
    .navbar-expand-lg .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bcs-white);
        box-shadow: var(--bcs-shadow);
        z-index: 1000;
    }
    
    /* Two columns on tablet */
    .col-tablet-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    /* Footer tablet */
    .footer-bcs .row > div {
        margin-bottom: 20px;
    }
}

/* ===== DESKTOP (lg+) ===== */
@media (min-width: 992px) {
    /* Full spacing on desktop */
    :root {
        --bcs-spacing-xl: 2rem;
        --bcs-spacing-xxl: 3rem;
    }
    
    /* Show only on desktop */
    .d-desktop-only {
        display: block !important;
    }
}

/* ===== LARGE DESKTOP (xl+) ===== */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

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

/* Images responsive */
.img-responsive,
.img-fluid {
    max-width: 100%;
    height: auto;
}

/* Ratio containers */
.ratio-16x9 {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
}

.ratio-4x3 {
    position: relative;
    width: 100%;
    padding-bottom: 75%;
}

.ratio-1x1 {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
}

.ratio-16x9 > *,
.ratio-4x3 > *,
.ratio-1x1 > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Text responsive */
.text-responsive {
    font-size: clamp(0.875rem, 2vw, 1rem);
}

.heading-responsive {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
}

/* Spacing responsive */
.py-responsive {
    padding-top: clamp(2rem, 5vw, 4rem);
    padding-bottom: clamp(2rem, 5vw, 4rem);
}

.my-responsive {
    margin-top: clamp(1.5rem, 4vw, 3rem);
    margin-bottom: clamp(1.5rem, 4vw, 3rem);
}

/* Flex responsive */
.flex-column-mobile {
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .flex-column-mobile {
        flex-direction: row;
    }
}

/* Gap responsive */
.gap-responsive {
    gap: clamp(0.5rem, 2vw, 1.5rem);
}

/* Width utilities */
.w-100-mobile {
    width: 100%;
}

@media (min-width: 768px) {
    .w-100-mobile {
        width: auto;
    }
}

/* Text alignment responsive */
.text-center-mobile {
    text-align: center;
}

@media (min-width: 768px) {
    .text-center-mobile {
        text-align: left;
    }
}

/* Order responsive */
.order-mobile-first {
    order: -1;
}

@media (min-width: 768px) {
    .order-mobile-first {
        order: 0;
    }
}

/* ========================================
   17. NAVBAR MOBILE AMÉLIORÉE
   ======================================== */

/* Hamburger menu animation */
.navbar-toggler {
    border: none;
    padding: 10px;
    position: relative;
    z-index: 1001;
}

.navbar-toggler:focus {
    box-shadow: none;
    outline: none;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23333333' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Mobile menu styling */
@media (max-width: 991.98px) {
    .navbar-collapse {
        position: fixed;
        top: 0;
        left: -100%;
        width: 80%;
        max-width: 300px;
        height: 100vh;
        background: var(--bcs-white);
        z-index: 1000;
        transition: left 0.3s ease;
        padding: 80px 20px 20px;
        box-shadow: var(--bcs-shadow-lg);
        overflow-y: auto;
    }
    
    .navbar-collapse.show {
        left: 0;
    }
    
    /* Overlay when menu open */
    .navbar-collapse.show::before {
        content: '';
        position: fixed;
        top: 0;
        left: 300px;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: -1;
    }
    
    .navbar-nav {
        flex-direction: column;
        width: 100%;
    }
    
    .navbar-nav .nav-item {
        border-bottom: 1px solid var(--bcs-gray-100);
    }
    
    .navbar-nav .nav-link {
        padding: 15px 0;
        font-size: 1rem;
        color: var(--bcs-gray-800);
    }
    
    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link.active {
        color: var(--bcs-green);
    }
    
}

/* ========================================
   18. TOUCH-FRIENDLY ELEMENTS
   ======================================== */

/* Minimum touch target size (44x44px) */
@media (max-width: 991.98px) {
    .btn,
    .nav-link,
    .dropdown-item,
    a.clickable {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Form elements */
    .form-control,
    .form-select {
        min-height: 48px;
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    /* Checkboxes and radios */
    .form-check-input {
        width: 24px;
        height: 24px;
    }
    
    .form-check-label {
        padding-left: 8px;
        line-height: 24px;
    }
}

/* ========================================
   19. PRINT STYLES
   ======================================== */

@media print {
    .navbar,
    .footer-bcs,
    .btn,
    .no-print {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }
    
    a {
        color: #000;
        text-decoration: underline;
    }
    
    .container {
        width: 100%;
        max-width: none;
}
/* ========================================
   12. PAGE BANNER - Bannière de page unifiée
   ======================================== */

/**
 * Composant .page-banner
 * Bannière avec image de fond + filtre vert transparent.
 * Structure : sub-header (46px, fixed top:0) + navbar (~70px, fixed top:40px)
 * Bord inférieur navbar ≈ 110px. On ajoute 0px de marge = 110px total.
 * 
 * Usage : <section class="page-banner" style="background-image: url('...')"> ... </section>
 * L'image est définie en inline, le filtre vert est ajouté via ::before.
 */
.page-banner {
    background-color: #1a1a1a !important; /* Fond noir par défaut si image ne charge pas */
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    min-height: 430px;
    display: flex;
    align-items: center;
    margin-top: 0; /* Plus de margin-top car géré par le spacer du header */
    padding: 96px 0 82px;
    position: relative;
    overflow: hidden;
}

/* FILTRE NOIR FONCÉ - Assure la lisibilité du texte blanc */
.page-banner::before,
section.page-banner::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.60) !important; /* Noir 60% pour meilleur contraste */
    z-index: 1 !important;
    pointer-events: none;
}

/* Le contenu passe au-dessus du filtre */
.page-banner > .container {
    position: relative;
    z-index: 2;
}

.page-banner .badge {
    font-size: 0.9rem;
}

/* TITRES - Spécificité maximale pour override Bootstrap */
.page-banner h1,
.page-banner h2,
.page-banner h3,
.page-banner h4,
.page-banner h5,
.page-banner h6,
.page-banner .display-1,
.page-banner .display-2,
.page-banner .display-3,
.page-banner .display-4,
.page-banner .display-5,
.page-banner .display-6,
section.page-banner h1,
section.page-banner h1.display-4,
section.page-banner .display-4 {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7), 0 0 40px rgba(0, 0, 0, 0.5) !important;
}

.page-banner h1,
section.page-banner h1 {
    font-size: clamp(2rem, 3.5vw, 2.45rem) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-bottom: 20px !important;
    color: #ffffff !important;
}

.page-banner h1 span,
section.page-banner h1 span {
    color: #ffffff !important;
    opacity: 1 !important;
    display: inline;
}

/* PARAGRAPHES - Override bcs.css qui définit p { color: #666 } */
.page-banner .lead,
.page-banner p,
section.page-banner .lead,
section.page-banner p,
.page-banner .lead.mb-4,
.page-banner p.lead {
    font-size: 1.15rem !important;
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7), 0 0 30px rgba(0, 0, 0, 0.5) !important;
    margin-bottom: 15px !important;
    opacity: 1 !important;
}

/* Override Bootstrap text-success dans les boutons du page-banner */
.page-banner .btn {
    font-weight: 600;
    text-shadow: none;
}

.page-banner .btn-light {
    background-color: #fff;
    color: #2BA84A !important; /* Vert BCS pour le texte du bouton */
    border: none;
}

.page-banner .btn-light:hover {
    background-color: #f8f9fa;
    color: #228B22 !important;
}

.page-banner .btn-outline-light {
    color: #fff !important;
    border-color: #fff;
    background: transparent;
}

.page-banner .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff !important;
}

/* Badge dans le page-banner - fond blanc avec texte BCS */
.page-banner .badge.bg-light {
    background-color: rgba(255, 255, 255, 0.95) !important;
    color: #2BA84A !important; /* Override text-success */
    font-weight: 600;
}

.page-banner .badge {
    text-shadow: none;
}

@media (max-width: 768px) {
    .page-banner {
        min-height: 250px;
        margin-top: 0;
        padding: 54px 0 48px;
    }

    .page-banner h1 {
        font-size: 1.6rem !important;
    }

    .page-banner .lead {
        font-size: 1rem;
    }
}

/* Fermeture du bloc @media print (section 19), resté sans accolade fermante.
   Ajoutée en fin de fichier (LOT 3a, 2026-09-26) pour garder le comportement
   actuel : la section 12 PAGE BANNER reste limitée à l'impression. La vraie
   correction est un lot séparé (suivi dans release-manager.md). */
}

/* ========================================
   20. COMPOSANTS TARGET (LOT 3a, 2026-09-26)
   ========================================
   Composants validés de la Référence UI (/dashboard/ui-reference), promus
   sous la portée .bcs-brand : aucun effet hors d'un conteneur .bcs-brand.
   Tokens uniquement, aucune couleur hexadécimale. Script clavier des
   onglets : reste dans la page de référence (bcs-tabs.js = lot ultérieur). */

/* Portée et base typographique */
.bcs-brand {
    /* Décision 2 : texte secondaire en gris foncé (8.45:1 sur blanc, 7.69:1 sur gris clair). */
    --bcs-brand-text-secondary: var(--bcs-brand-gray-dark);
    /* Anneau de focus double en box-shadow : YNEX impose a,button{outline:0!important}. */
    --bcs-brand-focus-ring: 0 0 0 var(--bcs-brand-focus-ring-offset) var(--bcs-brand-bg), 0 0 0 calc(var(--bcs-brand-focus-ring-offset) + var(--bcs-brand-focus-ring-width)) var(--bcs-brand-focus-ring-color);
    font-family: var(--bcs-brand-font-body);
    font-size: var(--bcs-brand-fs-body);
    line-height: 1.55;
    color: var(--bcs-brand-text-primary);
}
.bcs-brand *, .bcs-brand *::before, .bcs-brand *::after { box-sizing: border-box; }
/* !important limité à .bcs-brand : les tailles h1-h4 !important CURRENT sous
   768px (section 15) casseraient l'échelle TARGET (décision 7). */
.bcs-brand h1, .bcs-brand h2, .bcs-brand h3, .bcs-brand h4 {
    font-family: var(--bcs-brand-font-heading);
    font-weight: var(--bcs-brand-font-weight-heading);
    color: var(--bcs-brand-text-primary);
    line-height: 1.25;
    margin: 0 0 var(--bcs-space-3);
    overflow-wrap: break-word;
}
.bcs-brand h1 { font-size: var(--bcs-brand-fs-h1) !important; }
.bcs-brand h2 { font-size: var(--bcs-brand-fs-h2) !important; }
.bcs-brand h3 { font-size: var(--bcs-brand-fs-h3) !important; }
.bcs-brand h4 { font-size: var(--bcs-brand-fs-body) !important; }
.bcs-brand p { margin: 0 0 var(--bcs-space-3); }
.bcs-brand code {
    font-size: var(--bcs-font-size-md);
    color: var(--bcs-brand-text-primary);
    background: var(--bcs-brand-bg-subtle);
    padding: 0 var(--bcs-space-1);
    border-radius: var(--bcs-radius-xs);
    overflow-wrap: anywhere;
}
.bcs-brand a:not(.bcs-btn) {
    color: var(--bcs-brand-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.bcs-brand a:not(.bcs-btn):hover { text-decoration-thickness: 2px; }
.bcs-brand :is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: none;
    box-shadow: var(--bcs-brand-focus-ring);
}
.bcs-brand .bcs-subtitle { font-family: var(--bcs-brand-font-heading); font-weight: 500; font-size: var(--bcs-brand-fs-subtitle); }
.bcs-brand .bcs-text-secondary { font-size: var(--bcs-font-size-md); color: var(--bcs-brand-text-secondary); }
.bcs-brand .bcs-text-small { font-size: var(--bcs-font-size-md); }
.bcs-brand .bcs-text-action { font-family: var(--bcs-brand-font-action); font-weight: var(--bcs-brand-font-weight-action); }

/* Boutons (décisions 1 et 9) : hover/active gardent un fond AA et se
   signalent par un indice non coloré. .is-hover/.is-active/.is-focus/
   .is-disabled forcent l'état pour la démonstration. */
.bcs-brand .bcs-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--bcs-space-2);
    min-height: 44px; padding: var(--bcs-brand-space-control-y) var(--bcs-brand-space-control-x);
    font-family: var(--bcs-brand-font-action); font-weight: var(--bcs-brand-font-weight-action);
    font-size: var(--bcs-brand-fs-body); line-height: 1.2; text-decoration: none; white-space: nowrap;
    border: 2px solid transparent; border-radius: var(--bcs-brand-radius-button);
    cursor: pointer; transition: var(--bcs-transition-fast);
}
.bcs-brand .bcs-btn--primary { background: var(--bcs-brand-action-bg); color: var(--bcs-brand-action-text); }
.bcs-brand .bcs-btn--primary:hover, .bcs-brand .bcs-btn--primary.is-hover { background: var(--bcs-brand-action-bg-hover); text-decoration: underline; text-underline-offset: 3px; box-shadow: inset 0 -3px 0 rgba(var(--bcs-brand-gray-dark-rgb), .45); }
.bcs-brand .bcs-btn--primary:active, .bcs-brand .bcs-btn--primary.is-active { background: var(--bcs-brand-action-bg-active); box-shadow: inset 0 3px 0 rgba(var(--bcs-brand-gray-dark-rgb), .55); transform: translateY(1px); }
.bcs-brand .bcs-btn--secondary { background: var(--bcs-brand-bg); color: var(--bcs-brand-green-action); border-color: var(--bcs-brand-green-action); }
.bcs-brand .bcs-btn--secondary:hover, .bcs-brand .bcs-btn--secondary.is-hover { background: var(--bcs-brand-hover-bg-subtle); }
.bcs-brand .bcs-btn--secondary:active, .bcs-brand .bcs-btn--secondary.is-active { background: var(--bcs-brand-hover-bg-subtle); box-shadow: inset 0 2px 0 rgba(var(--bcs-brand-gray-dark-rgb), .25); }
.bcs-brand .bcs-btn--text { background: transparent; color: var(--bcs-brand-green-action); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; padding-inline: var(--bcs-space-2); }
.bcs-brand .bcs-btn--text:hover, .bcs-brand .bcs-btn--text.is-hover { background: var(--bcs-brand-hover-bg-subtle); text-decoration-thickness: 2px; }
.bcs-brand .bcs-btn--text:active, .bcs-brand .bcs-btn--text.is-active { text-decoration-thickness: 3px; background: var(--bcs-brand-hover-bg-subtle); }
.bcs-brand .bcs-btn--sm { min-height: 32px; padding: var(--bcs-space-1) var(--bcs-space-3); font-size: var(--bcs-font-size-md); }
.bcs-brand .bcs-btn--lg { min-height: 52px; padding: var(--bcs-space-3) var(--bcs-space-5); font-size: var(--bcs-font-size-2xl); }
.bcs-brand .bcs-btn.is-focus { box-shadow: var(--bcs-brand-focus-ring); }
.bcs-brand .bcs-btn:disabled, .bcs-brand .bcs-btn.is-disabled {
    background: var(--bcs-brand-disabled-bg); color: var(--bcs-brand-disabled-text); border-color: var(--bcs-brand-disabled-bg);
    opacity: var(--bcs-brand-disabled-opacity); cursor: var(--bcs-brand-disabled-cursor); box-shadow: none; text-decoration: none; transform: none;
}

/* Cartes */
.bcs-brand .bcs-card {
    display: grid; gap: var(--bcs-space-2); align-content: start;
    background: var(--bcs-brand-bg); border: 1px solid var(--bcs-brand-border-color);
    border-radius: var(--bcs-brand-radius-card); box-shadow: var(--bcs-brand-shadow-card);
    padding: var(--bcs-space-5);
}
.bcs-brand .bcs-card--raised { box-shadow: var(--bcs-brand-shadow-raised); }
.bcs-brand .bcs-card--cta { background: var(--bcs-brand-bg-subtle); }
.bcs-brand .bcs-card-icon {
    width: 44px; height: 44px; display: grid; place-items: center; font-size: 1.5rem;
    border-radius: var(--bcs-radius-md); color: var(--bcs-brand-green);
    background: var(--bcs-brand-bg-subtle);
}
.bcs-brand .bcs-card h3 { margin-bottom: 0; }
.bcs-brand .bcs-stat-value { font-family: var(--bcs-brand-font-heading); font-weight: var(--bcs-brand-font-weight-heading); font-size: var(--bcs-brand-fs-h1); line-height: 1.1; }

/* Formulaires (décision 3 : contour des champs 8.45:1) */
.bcs-brand .bcs-form { display: grid; gap: var(--bcs-space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.bcs-brand .bcs-field { display: grid; gap: var(--bcs-space-1); align-content: start; min-width: 0; }
.bcs-brand .bcs-field > label, .bcs-brand .bcs-field legend { font-weight: 600; font-size: var(--bcs-font-size-lg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bcs-brand .bcs-input {
    width: 100%; min-height: 44px; font: inherit; color: var(--bcs-brand-text-primary); background: var(--bcs-brand-bg);
    border: 1px solid var(--bcs-brand-field-border);
    border-radius: var(--bcs-brand-radius-control); padding: var(--bcs-brand-space-control-y) var(--bcs-space-3);
}
.bcs-brand textarea.bcs-input { min-height: 96px; resize: vertical; }
.bcs-brand .bcs-input.is-focus, .bcs-brand .bcs-input:focus-visible { border-color: var(--bcs-brand-green-action); outline: none; box-shadow: var(--bcs-brand-focus-ring); }
.bcs-brand .bcs-input[aria-invalid="true"] { border: 2px solid var(--bcs-brand-danger); }
.bcs-brand .bcs-input.is-valid { border: 2px solid var(--bcs-brand-success); }
.bcs-brand .bcs-input:disabled { background: var(--bcs-brand-disabled-bg); color: var(--bcs-brand-disabled-text); opacity: var(--bcs-brand-disabled-opacity); cursor: var(--bcs-brand-disabled-cursor); }
.bcs-brand .bcs-help { font-size: var(--bcs-font-size-md); color: var(--bcs-brand-text-secondary); }
.bcs-brand .bcs-msg { display: flex; gap: var(--bcs-space-1); align-items: flex-start; font-size: var(--bcs-font-size-md); }
.bcs-brand .bcs-msg i { font-size: 1.1rem; line-height: 1.2; }
.bcs-brand .bcs-msg--error i { color: var(--bcs-brand-danger); }
.bcs-brand .bcs-msg--success i { color: var(--bcs-brand-success); }
.bcs-brand .bcs-choice { display: flex; align-items: center; gap: var(--bcs-space-2); min-height: 32px; }
.bcs-brand .bcs-choice input { width: 18px; height: 18px; accent-color: var(--bcs-brand-green-action); margin: 0; flex: 0 0 auto; }
.bcs-brand fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }

/* Badges (décision 4) : texte gris foncé, état porté par l'icône et le libellé */
.bcs-brand .bcs-badge {
    --badge-accent: var(--bcs-brand-info);
    display: inline-flex; align-items: center; gap: var(--bcs-space-1); white-space: nowrap;
    padding: var(--bcs-space-1) var(--bcs-space-3); border-radius: var(--bcs-radius-pill);
    border: 1px solid var(--badge-accent); background: var(--bcs-brand-bg-subtle); color: var(--bcs-brand-text-primary);
    font-size: var(--bcs-font-size-md); font-weight: 600;
}
.bcs-brand .bcs-badge i { color: var(--badge-accent); font-size: 1rem; }
.bcs-brand .bcs-badge[data-tone="success"] { --badge-accent: var(--bcs-brand-success); }
.bcs-brand .bcs-badge[data-tone="danger"] { --badge-accent: var(--bcs-brand-danger); }
.bcs-brand .bcs-badge[data-tone="warning"] { background: var(--bcs-brand-warning); border-color: var(--bcs-brand-gray-dark); }

/* Alertes (décision 4) */
.bcs-brand .bcs-alert {
    --alert-accent: var(--bcs-brand-info);
    display: flex; gap: var(--bcs-space-3); align-items: flex-start;
    padding: var(--bcs-space-4); background: var(--bcs-brand-bg-subtle); color: var(--bcs-brand-text-primary);
    border: 1px solid var(--bcs-brand-border-color); border-left: 6px solid var(--alert-accent); border-radius: var(--bcs-radius-md);
}
.bcs-brand .bcs-alert i { font-size: 1.4rem; color: var(--alert-accent); line-height: 1.2; }
.bcs-brand .bcs-alert p { margin: 0; }
.bcs-brand .bcs-alert[data-tone="success"] { --alert-accent: var(--bcs-brand-success); }
.bcs-brand .bcs-alert[data-tone="danger"] { --alert-accent: var(--bcs-brand-danger); }
.bcs-brand .bcs-alert[data-tone="warning"] { background: var(--bcs-brand-warning); }

/* Tableaux (colonne Actions : mécanisme CURRENT bcs-table-actions.js) */
.bcs-brand .bcs-table-wrap { overflow-x: auto; border: 1px solid var(--bcs-brand-border-color); border-radius: var(--bcs-brand-radius-card); }
.bcs-brand .bcs-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--bcs-font-size-lg); }
.bcs-brand .bcs-table caption { caption-side: top; text-align: left; padding: var(--bcs-space-3) var(--bcs-space-4); font-family: var(--bcs-brand-font-heading); font-weight: 600; color: var(--bcs-brand-text-primary); }
.bcs-brand .bcs-table th, .bcs-brand .bcs-table td { padding: var(--bcs-space-3) var(--bcs-space-4); text-align: left; border-top: 1px solid var(--bcs-brand-border-color); }
.bcs-brand .bcs-table thead th { background: var(--bcs-brand-bg-subtle); font-family: var(--bcs-brand-font-heading); font-weight: 600; white-space: nowrap; }
.bcs-brand .bcs-table tbody tr:hover td { background: var(--bcs-brand-hover-bg-subtle); }

/* Navigation : menu, fil d'Ariane, onglets, pagination */
.bcs-brand .bcs-menu, .bcs-brand .bcs-breadcrumb ol, .bcs-brand .bcs-pagination ul, .bcs-brand .bcs-tabs { display: flex; list-style: none; margin: 0; padding: 0; }
.bcs-brand .bcs-menu, .bcs-brand .bcs-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.bcs-brand .bcs-menu { gap: var(--bcs-space-1); border-bottom: 1px solid var(--bcs-brand-border-color); }
.bcs-brand .bcs-menu a, .bcs-brand .bcs-tab {
    display: inline-flex; align-items: center; gap: var(--bcs-space-2); min-height: 44px; padding: var(--bcs-space-2) var(--bcs-space-3);
    font-family: var(--bcs-brand-font-action); font-weight: 500; color: var(--bcs-brand-text-primary) !important; white-space: nowrap;
    text-decoration: none !important; border: 0; border-bottom: 3px solid transparent; background: transparent; cursor: pointer;
}
.bcs-brand .bcs-menu a:hover, .bcs-brand .bcs-tab:hover { background: var(--bcs-brand-hover-bg-subtle); }
.bcs-brand .bcs-menu a[aria-current="page"], .bcs-brand .bcs-tab[aria-selected="true"] { font-weight: var(--bcs-brand-font-weight-action); border-bottom-color: var(--bcs-brand-green-action); }
.bcs-brand .bcs-breadcrumb ol { flex-wrap: wrap; gap: var(--bcs-space-2); align-items: center; font-size: var(--bcs-font-size-lg); }
.bcs-brand .bcs-breadcrumb li { display: inline-flex; align-items: center; gap: var(--bcs-space-2); white-space: nowrap; }
.bcs-brand .bcs-breadcrumb [aria-current="page"] { font-weight: 600; }
.bcs-brand .bcs-tabs { border-bottom: 1px solid var(--bcs-brand-border-color); }
.bcs-brand .bcs-tabpanel { padding: var(--bcs-space-4) 0; }
.bcs-brand .bcs-pagination ul { flex-wrap: wrap; gap: var(--bcs-space-1); }
.bcs-brand .bcs-pagination-item {
    display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 var(--bcs-space-2); white-space: nowrap;
    font-family: var(--bcs-brand-font-action); font-weight: 500; color: var(--bcs-brand-text-primary);
    background: var(--bcs-brand-bg); border: 1px solid var(--bcs-brand-field-border); border-radius: var(--bcs-brand-radius-control); cursor: pointer;
}
.bcs-brand .bcs-pagination-item:hover { background: var(--bcs-brand-hover-bg-subtle); }
.bcs-brand .bcs-pagination-item[aria-current="page"] { background: var(--bcs-brand-bg-inverse); color: var(--bcs-brand-text-on-dark); font-weight: var(--bcs-brand-font-weight-action); }
.bcs-brand .bcs-pagination-item:disabled { opacity: var(--bcs-brand-disabled-opacity); cursor: var(--bcs-brand-disabled-cursor); background: var(--bcs-brand-disabled-bg); }

@media (max-width: 575.98px) {
    .bcs-brand .bcs-btn--lg { font-size: var(--bcs-brand-fs-body); padding-inline: var(--bcs-space-4); }
}

/* Shop lot 2: accessibility fixes for existing public catalogue controls only.
   TARGET tokens; no change to the principal site or other universes. */
.bcs-shop .btn-success,
.bcs-shop .bg-success,
.bcs-shop #shop-categories .list-group-item.active {
    background-color: var(--bcs-brand-green-action) !important;
    border-color: var(--bcs-brand-green-action) !important;
    color: var(--bcs-brand-white) !important;
}
.bcs-shop .bg-success :is(p, h3, h5) { color: var(--bcs-brand-white) !important; }
.bcs-shop .text-success { color: var(--bcs-brand-green-action) !important; }
.bcs-shop .text-muted,
.bcs-shop .bg-light .text-success { color: var(--bcs-brand-gray-dark) !important; }
.bcs-shop .btn-outline-success {
    background-color: var(--bcs-brand-white);
    color: var(--bcs-brand-green-action);
    border-color: var(--bcs-brand-green-action);
}
.bcs-shop :is(.btn, button, .bcs-menu a, #shop-categories a, footer:not(.bcs-site-footer) a) {
    min-height: 44px;
    min-width: 44px;
}
.bcs-shop :is(.btn, .bcs-btn) { white-space: normal; }
.bcs-shop footer:not(.bcs-site-footer) a { display: inline-flex; align-items: center; }
.bcs-shop :is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--bcs-brand-green-action) !important;
    outline-offset: 3px;
    box-shadow: 0 0 0 3px var(--bcs-brand-white) !important;
}
.bcs-shop .alert a { text-decoration: underline !important; }
.bcs-shop .card-title,
.bcs-shop #shop-categories a { overflow-wrap: anywhere; }
.bcs-shop #shop-categories .list-group-item { gap: var(--bcs-space-2); }
.bcs-shop #shop-categories .badge { flex-shrink: 0; }

.bcs-shop .bg-success .btn-outline-light { color: var(--bcs-brand-white); border-color: var(--bcs-brand-white); }

/* 21. PUBLIC STRUCTURES — UI Reference L/M, Shop alignment 2026-09-26.
 * Existing official website composition; Bootstrap md/lg/xl breakpoints.
 * Production classes replace demonstration-only bcs-cg/bcs-rs names.
 * All rules scoped to bcs-brand. Existing principal website is unaffected.
 */
.bcs-brand .bcs-site-header { background: var(--bcs-brand-bg); box-shadow: var(--bcs-shadow-sm); }
.bcs-brand .bcs-site-navbar { display:flex; align-items:center; justify-content:space-between; gap:var(--bcs-space-4); padding-block:var(--bcs-space-3); }
.bcs-brand .bcs-site-brand { display:flex; align-items:center; gap:var(--bcs-space-3); color:var(--bcs-brand-text-primary); text-decoration:none; flex-shrink:0; }
.bcs-brand .bcs-site-brand img { width:auto; height:44px; }
.bcs-brand .bcs-site-brand span { font-family:var(--bcs-brand-font-action); font-weight:var(--bcs-brand-font-weight-action); font-size:var(--bcs-font-size-md); max-width:5em; }
.bcs-brand .bcs-site-navbar .bcs-menu { border:0; gap:var(--bcs-space-2); margin:0; }
.bcs-brand .bcs-site-navbar .bcs-menu a { font-size:var(--bcs-font-size-md); padding-inline:var(--bcs-space-2); }
.bcs-brand .bcs-site-return { font-size:var(--bcs-font-size-sm); display:inline-flex; align-items:center; min-height:44px; gap:var(--bcs-space-1); }
.bcs-brand .bcs-site-menu-toggle { display:inline-grid; place-items:center; flex-shrink:0; width:44px; height:44px; padding:0; border:0; border-radius:var(--bcs-radius-md); background:var(--bcs-brand-bg); color:var(--bcs-brand-text-primary); font-size:1.5rem; cursor:pointer; }
.bcs-brand .bcs-site-menu-toggle:hover { background:var(--bcs-brand-hover-bg-subtle); }
.bcs-brand .bcs-site-overlay { position:fixed; inset:0; z-index:1050; background:rgba(var(--bcs-brand-gray-dark-rgb),.6); }
.bcs-brand .bcs-site-drawer { position:fixed; inset:0 0 0 auto; z-index:1051; width:min(88%, 380px); overflow-y:auto; display:flex; flex-direction:column; gap:var(--bcs-space-3); padding-bottom:var(--bcs-space-5); background:var(--bcs-brand-bg); box-shadow:var(--bcs-shadow-lg); }
.bcs-brand .bcs-site-drawer[hidden], .bcs-brand .bcs-site-overlay[hidden] { display:none; }
.bcs-brand .bcs-site-drawer-head { display:flex; align-items:center; justify-content:space-between; gap:var(--bcs-space-3); padding:var(--bcs-space-3); border-bottom:1px solid var(--bcs-brand-border-color); }
:is(.bcs-brand .bcs-site-drawer, .bcs-site-drawer.bcs-brand) ul { list-style:none; margin:0; padding:0 var(--bcs-space-3); display:grid; gap:var(--bcs-space-1); }
:is(.bcs-brand .bcs-site-drawer, .bcs-site-drawer.bcs-brand) ul a { display:flex; align-items:center; gap:var(--bcs-space-3); min-height:44px; padding:var(--bcs-space-2) var(--bcs-space-3); border-radius:var(--bcs-radius-md); color:var(--bcs-brand-text-primary); text-decoration:none; }
:is(.bcs-brand .bcs-site-drawer, .bcs-site-drawer.bcs-brand) ul a[aria-current] { background:var(--bcs-brand-bg-subtle); font-weight:var(--bcs-brand-font-weight-heading); box-shadow:inset 4px 0 0 var(--bcs-brand-green-action); }
.bcs-brand .bcs-site-drawer > .bcs-btn { margin:var(--bcs-space-3); }
.bcs-brand .bcs-site-drawer-return { margin:auto var(--bcs-space-5) 0; padding-block:var(--bcs-space-3); }
.bcs-brand .bcs-site-main { padding-block:var(--bcs-space-6) var(--bcs-space-7); }
.bcs-brand .bcs-site-hero { position:relative; isolation:isolate; overflow:hidden; border-radius:var(--bcs-radius-md); box-shadow:var(--bcs-shadow-sm); background:var(--bcs-brand-bg); min-height:400px; margin-bottom:var(--bcs-space-5); }
.bcs-brand .bcs-site-hero-photo { position:absolute; inset:0 0 0 auto; width:60%; height:100%; object-fit:cover; }
.bcs-brand .bcs-site-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--bcs-brand-bg) 45%,rgba(var(--bcs-brand-white-rgb),.75) 58%,rgba(var(--bcs-brand-white-rgb),0) 80%); }
.bcs-brand .bcs-site-hero-text { position:relative; z-index:1; width:62%; padding:var(--bcs-space-7); display:grid; gap:var(--bcs-space-4); }
.bcs-brand .bcs-site-hero h1 { font-size:var(--bcs-brand-fs-display); line-height:1.15; }
.bcs-brand .bcs-site-hero-text p { margin:0; }
.bcs-brand .bcs-site-eyebrow { font-size:var(--bcs-font-size-xs); letter-spacing:.14em; text-transform:uppercase; font-weight:var(--bcs-brand-font-weight-action); margin-bottom:var(--bcs-space-2); }
.bcs-brand .bcs-site-search { display:flex; gap:var(--bcs-space-3); align-items:end; margin-bottom:var(--bcs-space-7); }
.bcs-brand .bcs-site-search .bcs-field { min-width:0; }
.bcs-brand .bcs-site-search .bcs-btn { min-height:48px; }
.bcs-brand .bcs-product-card { align-content:start; grid-template-rows:auto auto auto 1fr auto auto; min-width:0; }
.bcs-brand .bcs-product-card h3, .bcs-brand .bcs-product-card p { margin:0; overflow-wrap:anywhere; }
.bcs-brand .bcs-product-card h3 { line-height:1.25; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.bcs-brand .bcs-product-features { font-size:var(--bcs-font-size-md); }
.bcs-brand .bcs-product-features ul { list-style:none; padding:0; margin:0; }
.bcs-brand .bcs-product-features li { line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bcs-brand .bcs-product-contact { color:var(--bcs-brand-link); padding-block:var(--bcs-space-2); }
.bcs-brand .bcs-product-card h3 a { color:var(--bcs-brand-text-primary); text-decoration:none; }
.bcs-brand .bcs-product-card h3 a:hover { color:var(--bcs-brand-link); text-decoration:underline; }
.bcs-brand .bcs-product-image { position:relative; display:block; width:100%; aspect-ratio:4/3; object-fit:contain; background:var(--bcs-brand-bg); border-radius:var(--bcs-brand-radius-card); overflow:hidden; }
.bcs-brand .bcs-product-image img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.bcs-brand .bcs-product-actions { display:flex; flex-wrap:wrap; gap:var(--bcs-space-2); margin-top:var(--bcs-space-2); }
.bcs-brand .bcs-product-actions .bcs-btn { flex:1 1 auto; }
.bcs-brand .bcs-products-list .produit-item { width:100%; }
.bcs-brand .bcs-products-list .bcs-product-image { max-height:260px; }
.bcs-brand .bcs-category-menu { display:grid; list-style:none; padding:0; margin:0; gap:var(--bcs-space-1); }
.bcs-brand .bcs-category-menu a { display:flex; align-items:center; justify-content:space-between; gap:var(--bcs-space-2); min-height:44px; padding:var(--bcs-space-2); border-radius:var(--bcs-radius-md); color:var(--bcs-brand-text-primary); text-decoration:none; overflow-wrap:anywhere; }
.bcs-brand .bcs-category-menu a[aria-current] { background:var(--bcs-brand-bg-subtle); box-shadow:inset 3px 0 0 var(--bcs-brand-green-action); font-weight:var(--bcs-brand-font-weight-action); }
.bcs-brand .bcs-category-menu a:hover { background:var(--bcs-brand-hover-bg-subtle); text-decoration:underline; }
.bcs-brand .bcs-category-menu .bcs-badge { flex-shrink:0; }
.bcs-brand .bcs-pre-line { white-space:pre-line; overflow-wrap:anywhere; }
.bcs-site-shop .bcs-breadcrumb { flex-wrap:wrap; overflow-wrap:anywhere; margin-bottom:var(--bcs-space-5); }
.bcs-brand .bcs-site-footer { padding-block:var(--bcs-space-7) var(--bcs-space-5); background:var(--bcs-brand-bg-inverse); color:var(--bcs-brand-text-on-dark); }
.bcs-brand .bcs-site-footer-cols { display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)); gap:var(--bcs-space-6); }
.bcs-brand .bcs-site-footer h2 { font-size:var(--bcs-font-size-lg); color:var(--bcs-brand-text-on-dark); margin-bottom:var(--bcs-space-3); }
.bcs-brand .bcs-site-footer p,.bcs-brand .bcs-site-footer li { color:var(--bcs-brand-text-on-dark); font-size:var(--bcs-font-size-md); overflow-wrap:anywhere; }
.bcs-brand .bcs-site-footer ul { list-style:none; margin:0; padding:0; }
.bcs-brand .bcs-site-footer a:not(.bcs-btn) { color:var(--bcs-brand-text-on-dark); text-decoration:none; min-height:44px; display:inline-flex; align-items:center; }
.bcs-brand .bcs-site-footer a:hover { text-decoration:underline; }
.bcs-brand .bcs-site-footer a:focus-visible { outline-color:var(--bcs-brand-white) !important; }
.bcs-brand .bcs-site-footer-logo { width:150px; height:auto; margin-bottom:var(--bcs-space-4); }
.bcs-brand .bcs-site-footer-contact li { display:flex; align-items:center; gap:var(--bcs-space-2); padding-block:var(--bcs-space-1); }
.bcs-brand .bcs-site-footer-contact i { flex-shrink:0; }
.bcs-brand .bcs-site-footer-legal { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--bcs-space-3); border-top:1px solid rgba(var(--bcs-brand-white-rgb),.3); padding-top:var(--bcs-space-4); margin-top:var(--bcs-space-6); }
.bcs-brand .bcs-site-footer-legal p { margin:0; font-size:var(--bcs-font-size-sm); }
@media (min-width:992px) { .bcs-brand .bcs-site-navbar > .bcs-site-menu-toggle { display:none; } }
@media (max-width:1199.98px) { .bcs-brand .bcs-site-navbar { gap:var(--bcs-space-2); } .bcs-brand .bcs-site-brand span { max-width:4em; } .bcs-brand .bcs-site-return { max-width:6em; } }
@media (max-width:991.98px) { .bcs-brand .bcs-site-desktop { display:none; } .bcs-brand .bcs-site-contact { margin-left:auto; } .bcs-brand .bcs-site-footer-cols { grid-template-columns:repeat(2,minmax(0,1fr)); } .bcs-brand .bcs-site-hero-text { padding:var(--bcs-space-5); width:65%; } }
@media (max-width:767.98px) { .bcs-brand .bcs-site-contact { display:none; } .bcs-brand .bcs-site-brand span { max-width:none; } .bcs-brand .bcs-site-main { padding-top:var(--bcs-space-4); } .bcs-brand .bcs-site-hero-photo { position:static; width:100%; height:200px; } .bcs-brand .bcs-site-hero::after { display:none; } .bcs-brand .bcs-site-hero-text { width:100%; padding:var(--bcs-space-5); } .bcs-brand .bcs-site-hero h1 { font-size:var(--bcs-brand-fs-h1); } .bcs-brand .bcs-site-search { flex-direction:column; align-items:stretch; margin-bottom:var(--bcs-space-6); } .bcs-brand .bcs-site-footer-cols { grid-template-columns:1fr; } }

/* CURRENT gallery, preserved interaction; TARGET surface for Shop only. */

.bcs-site-shop .product-gallery {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: var(--bcs-space-4);
    align-items: start;
}
.bcs-site-shop .product-gallery.single-image {
    grid-template-columns: 1fr;
}
.bcs-site-shop .product-gallery-thumbs {
    display: flex;
    flex-direction: column;
    gap: var(--bcs-space-3);
    max-height: 520px;
    overflow-y: auto;
    padding: calc(var(--bcs-space-1) / 2);
}
.bcs-site-shop .product-gallery-thumb, .bcs-site-shop .gallery-lightbox-thumb {
    border: 1px solid var(--bcs-brand-border-color);
    background: var(--bcs-brand-bg);
    border-radius: var(--bcs-radius-md);
    padding: var(--bcs-space-1);
    width: 72px;
    height: 72px;
    cursor: pointer;
}
.bcs-site-shop .product-gallery-thumb.is-active, .bcs-site-shop .gallery-lightbox-thumb.is-active {
    border-color: var(--bcs-brand-text-primary);
    box-shadow: 0 0 0 2px rgba(var(--bcs-brand-gray-dark-rgb), .12);
}
.bcs-site-shop .product-gallery-thumb img, .bcs-site-shop .gallery-lightbox-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.bcs-site-shop .product-gallery-main {
    position: relative;
    min-height: 520px;
    background: var(--bcs-brand-bg-subtle);
    border-radius: var(--bcs-radius-md);
    overflow: hidden;
}
.bcs-site-shop .product-gallery-zoom {
    width: 100%;
    height: 520px;
    border: 0;
    background: var(--bcs-brand-bg);
    padding: var(--bcs-space-4);
    cursor: zoom-in;
}
.bcs-site-shop .product-gallery-zoom img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.bcs-site-shop .gallery-zoom-icon {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--bcs-radius-full);
    background: rgba(var(--bcs-brand-white-rgb), .95);
    color: var(--bcs-brand-text-primary);
    box-shadow: 0 8px 20px rgba(var(--bcs-brand-gray-dark-rgb), .14);
}
.bcs-site-shop .gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: 1px solid var(--bcs-brand-border-color);
    border-radius: var(--bcs-radius-full);
    background: rgba(var(--bcs-brand-white-rgb), .95);
    color: var(--bcs-brand-text-primary);
}
.bcs-site-shop .gallery-nav-prev { left: 16px; }
.bcs-site-shop .gallery-nav-next { right: 16px; }
.bcs-site-shop .gallery-counter {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    padding: var(--bcs-space-1) var(--bcs-space-3);
    border-radius: var(--bcs-radius-pill);
    background: rgba(var(--bcs-brand-gray-dark-rgb), 0.78);
    color: var(--bcs-brand-bg);
    font-size: 13px;
}
.bcs-site-shop .product-gallery-lightbox[hidden] {
    display: none;
}
.bcs-site-shop .product-gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
}
.bcs-site-shop .gallery-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(var(--bcs-brand-gray-dark-rgb), 0.86);
}
.bcs-site-shop .gallery-lightbox-dialog {
    position: relative;
    z-index: 1;
    width: min(1120px, calc(100vw - 48px));
    height: min(780px, calc(100vh - 72px));
    margin: 36px auto;
    color: var(--bcs-brand-bg);
}
.bcs-site-shop .gallery-lightbox-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--bcs-radius-full);
    background: rgba(var(--bcs-brand-white-rgb), .95);
    color: var(--bcs-brand-text-primary);
}
.bcs-site-shop .gallery-lightbox-count {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    font-weight: 600;
}
.bcs-site-shop .gallery-lightbox-body {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: var(--bcs-space-4);
    height: 100%;
    align-items: center;
    padding-top: 42px;
}
.bcs-site-shop .gallery-lightbox-thumbs {
    display: flex;
    flex-direction: column;
    gap: var(--bcs-space-3);
    max-height: 100%;
    overflow-y: auto;
}
.bcs-site-shop .gallery-lightbox-image-wrap {
    height: 100%;
    background: var(--bcs-brand-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.bcs-site-shop .gallery-lightbox-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
@media (max-width: 767.98px) {
    .bcs-site-shop .product-gallery {
        grid-template-columns: 1fr;
    }
    .bcs-site-shop .product-gallery-thumbs {
        order: 2;
        flex-direction: row;
        max-height: none;
        overflow-x: auto;
    }
    .bcs-site-shop .product-gallery-main {
        min-height: 360px;
    }
    .bcs-site-shop .product-gallery-zoom {
        height: 360px;
    }
    .bcs-site-shop .gallery-lightbox-dialog {
        width: calc(100vw - 24px);
        height: calc(100vh - 48px);
        margin: 24px auto;
    }
    .bcs-site-shop .gallery-lightbox-body {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr) auto;
    }
    .bcs-site-shop .gallery-lightbox-thumbs {
        order: 2;
        flex-direction: row;
        overflow-x: auto;
    }
}

/* Integration states: readable links on muted surfaces, real long catalogue titles. */
.bcs-brand .bcs-site-brand:not(.bcs-btn) { color:var(--bcs-brand-text-primary); text-decoration:none; }
.bcs-brand .bcs-site-footer h2 { font-size:var(--bcs-font-size-lg) !important; }
.bcs-site-shop .bcs-alert a:not(.bcs-btn) { color:var(--bcs-brand-text-primary); text-decoration:underline; }
.bcs-site-shop .bcs-breadcrumb li { white-space:normal; overflow-wrap:anywhere; }
.bcs-site-shop .bcs-product-card { transition:box-shadow .2s ease; }
.bcs-site-shop .bcs-product-card:hover { box-shadow:var(--bcs-shadow-lg); }
.bcs-site-shop .bcs-product-card:focus-within { border-color:var(--bcs-brand-field-border); }
.bcs-site-shop [aria-pressed="true"].bcs-btn--secondary { background:var(--bcs-brand-bg-subtle); color:var(--bcs-brand-text-primary); }

/* Shop fidelity: public components L and responsive behaviours M (2026-09-26).
 * Values transposed from ui_reference/index.php, not the ERP preview frame.
 * Canonical reference unchanged; scope restricted to the existing Shop shell. */
.bcs-site-shop .bcs-site-header { box-shadow:none; }
.bcs-site-shop .bcs-site-main { padding-top:0; }
.bcs-site-shop .bcs-site-navbar { background:var(--bcs-brand-bg); gap:var(--bcs-space-4); flex-wrap:wrap; padding:var(--bcs-space-2) var(--bcs-space-4); border-radius:var(--bcs-radius-md); box-shadow:var(--bcs-shadow-sm); margin-bottom:var(--bcs-space-4); }
.bcs-site-shop .bcs-site-navbar nav { min-width:0; max-width:100%; }
.bcs-site-shop .bcs-site-navbar .bcs-menu { gap:var(--bcs-space-1); }
.bcs-site-shop .bcs-site-navbar .bcs-menu a { padding:var(--bcs-space-2) var(--bcs-space-3); }
.bcs-site-shop .bcs-site-navbar .bcs-menu a[aria-current="page"] { color:var(--bcs-brand-green-action) !important; }
.bcs-site-shop .bcs-site-hero { min-height:250px; }
.bcs-site-shop .bcs-site-hero-text { width:auto; max-width:62%; padding:var(--bcs-space-4); gap:var(--bcs-space-2); }
.bcs-site-shop .bcs-site-hero h1 { font-size:clamp(1.25rem, 1rem + 1vw, 1.625rem) !important; line-height:1.2; margin:0; }
.bcs-site-shop .bcs-site-hero h1 span { color:var(--bcs-brand-green-action); }
.bcs-site-shop .bcs-site-eyebrow { margin:0; font-weight:600; }
.bcs-site-shop .bcs-site-hero-note { font-size:var(--bcs-font-size-md); color:var(--bcs-brand-text-secondary); }
.bcs-site-shop .bcs-site-hero-actions { display:flex; flex-wrap:wrap; gap:var(--bcs-space-3); align-items:center; }
.bcs-site-shop .bcs-site-hero-badge { position:absolute; z-index:1; right:var(--bcs-space-3); bottom:var(--bcs-space-3); max-width:150px; margin:0; padding:var(--bcs-space-2) var(--bcs-space-3); font-size:var(--bcs-font-size-sm); color:var(--bcs-brand-white); background:rgba(var(--bcs-brand-gray-dark-rgb),.92); border-radius:var(--bcs-radius-md); }
.bcs-site-shop .bcs-site-footer { border-radius:var(--bcs-radius-md); padding:var(--bcs-space-5); }
.bcs-site-shop .bcs-site-footer-cols { grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)) minmax(0,1fr); gap:var(--bcs-space-5); }
.bcs-site-shop .bcs-site-footer-logo { margin-bottom:var(--bcs-space-2); }
.bcs-site-shop .bcs-site-footer ul { display:grid; gap:var(--bcs-space-1); }
.bcs-site-shop .bcs-site-footer a:not(.bcs-btn) { min-height:0; display:inline; }
.bcs-site-shop .bcs-site-footer-section { min-width:0; }
.bcs-site-shop .bcs-site-footer-section summary { list-style:none; font-family:var(--bcs-brand-font-heading); font-weight:var(--bcs-brand-font-weight-heading); font-size:var(--bcs-font-size-lg); margin-bottom:var(--bcs-space-3); }
.bcs-site-shop .bcs-site-footer-section summary::-webkit-details-marker { display:none; }
.bcs-site-shop .bcs-site-footer-section summary i { display:none; }
.bcs-site-shop .bcs-site-social { grid-auto-flow:column; justify-content:start; gap:var(--bcs-space-2) !important; margin-top:var(--bcs-space-3) !important; }
.bcs-site-shop .bcs-site-social a:not(.bcs-btn) { font-size:1.15rem; display:inline-grid; place-items:center; width:36px; height:36px; min-width:36px !important; min-height:36px !important; border-radius:var(--bcs-radius-full); background:rgba(var(--bcs-brand-white-rgb),.15); }
.bcs-site-shop .bcs-site-footer-contact li { align-items:flex-start; gap:var(--bcs-space-2); padding:0; }
.bcs-site-shop .bcs-site-footer-deco { color:rgba(var(--bcs-brand-white-rgb),.45); display:grid; gap:var(--bcs-space-2); align-content:center; }
.bcs-site-shop .bcs-site-footer-deco svg { width:100%; max-width:180px; }
.bcs-site-shop .bcs-site-footer-deco p { color:var(--bcs-brand-text-on-dark); text-align:right; }
.bcs-site-shop .bcs-site-footer-legal { gap:var(--bcs-space-3); align-items:normal; margin-top:var(--bcs-space-4); padding-top:var(--bcs-space-3); }
@media (max-width:991.98px) {
    .bcs-site-shop .bcs-site-footer { padding:var(--bcs-space-4); }
    .bcs-site-shop .bcs-site-footer-cols { grid-template-columns:140px 1fr; gap:var(--bcs-space-3); align-items:start; }
    .bcs-site-shop .bcs-site-footer-cols > div:first-child { grid-row:1 / span 3; }
    .bcs-site-shop .bcs-site-footer-section { grid-column:2; border:1px solid rgba(var(--bcs-brand-white-rgb),.3); border-radius:var(--bcs-radius-md); }
    .bcs-site-shop .bcs-site-footer-section summary { display:flex; justify-content:space-between; align-items:center; min-height:44px; padding:0 var(--bcs-space-3); margin:0; cursor:pointer; font-family:inherit; font-size:inherit; font-weight:600; gap:var(--bcs-space-2); }
    .bcs-site-shop .bcs-site-footer-section summary i { display:inline; }
    .bcs-site-shop .bcs-site-footer-section[open] summary i { transform:rotate(180deg); }
    .bcs-site-shop .bcs-site-footer-section summary:focus-visible { outline:none; box-shadow:0 0 0 2px var(--bcs-brand-white); }
    .bcs-site-shop .bcs-site-footer-section ul { padding:0 var(--bcs-space-3) var(--bcs-space-3); }
    .bcs-site-shop .bcs-site-footer-logo { width:120px; }
    .bcs-site-shop .bcs-site-footer-deco { grid-column:1 / -1; }
}
@media (max-width:767.98px) {
    /* M mobile hero: text and primary CTA, no secondary image or action. */
    .bcs-site-shop .bcs-site-hero-photo, .bcs-site-shop .bcs-site-hero-badge, .bcs-site-shop .bcs-site-hero .bcs-btn--secondary { display:none; }
    .bcs-site-shop .bcs-site-hero-text { max-width:100%; }
    .bcs-site-shop .bcs-site-footer-cols { grid-template-columns:1fr; }
    .bcs-site-shop .bcs-site-footer-cols > div:first-child { grid-row:auto; }
    .bcs-site-shop .bcs-site-footer-section { grid-column:auto; }
}

@media (min-width:992px) {
    .bcs-site-shop .bcs-site-contact.bcs-btn--sm,
    .bcs-site-shop .bcs-site-hero .bcs-btn--sm { min-height:32px !important; }
}

/* Match the rendered paragraph spacing inherited by L's hero. */
.bcs-site-shop .bcs-site-hero h1,
.bcs-site-shop .bcs-site-hero-text .bcs-site-eyebrow,
.bcs-site-shop .bcs-site-hero-text .bcs-site-hero-note,
.bcs-site-shop .bcs-site-hero-badge { margin-bottom:var(--bcs-space-3); }

/* Explicit user exception to L, 2026-09-26: full viewport hero surface,
 * with unchanged container, text width and typography inside. No 100vw breakout. */
.bcs-site-shop .bcs-site-hero { width:100%; margin:0; border-radius:0; box-shadow:none; }
.bcs-site-shop .bcs-site-hero-inner { position:relative; z-index:1; min-height:250px; }
.bcs-site-shop .bcs-site-hero + .bcs-site-content { padding-top:var(--bcs-space-5); }

/* Same explicit exception for the navbar envelope; inner alignment unchanged. */
.bcs-site-shop .bcs-site-header { width:100%; margin:0; border-radius:0; background:var(--bcs-brand-bg); box-shadow:var(--bcs-shadow-sm); }
.bcs-site-shop .bcs-site-navbar { margin:0 auto; border-radius:0; box-shadow:none; }

/* User clarification, 2026-09-26: only the outer background spans the viewport.
 * L's photo, gradient and text share one centred, constrained media block. */
.bcs-site-shop .bcs-site-hero::after { content:none; }
.bcs-site-shop .bcs-site-hero-media { position:relative; isolation:isolate; overflow:hidden; min-height:250px; border-radius:var(--bcs-radius-md); box-shadow:var(--bcs-shadow-sm); background:var(--bcs-brand-bg); }
.bcs-site-shop .bcs-site-hero-media::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--bcs-brand-bg) 45%,rgba(var(--bcs-brand-white-rgb),.75) 58%,rgba(var(--bcs-brand-white-rgb),0) 80%); }
@media (max-width:767.98px) {
    .bcs-site-shop .bcs-site-hero-media::after { display:none; }
}

/* Navbar Shop : maquette « BCS Shop – Barre de navigation » v1.0 (2026-09), tokens TARGET existants. */
.bcs-shop-nav-frame { container-type: inline-size; max-width: 100%; background: var(--bcs-brand-bg); border-bottom: 1px solid var(--bcs-brand-border-color); font-family: var(--bcs-brand-font-body); }
.bcs-shop-nav-sticky { position: sticky; top: 0; z-index: 100; }
.bcs-shop-nav-bar { background: var(--bcs-brand-action-bg); color: var(--bcs-brand-action-text); display: flex; align-items: center; gap: var(--bcs-space-5); padding: var(--bcs-space-4) max(var(--bcs-space-6), calc((100% - 1440px) / 2)); }
.bcs-shop-nav-brand { display: flex; align-items: center; gap: var(--bcs-space-4); flex: none; color: inherit; text-decoration: none; }
.bcs-shop-nav-brand img { width: 170px; height: auto; display: block; }
.bcs-shop-nav-brand strong { font-family: var(--bcs-brand-font-heading); font-weight: var(--bcs-brand-font-weight-action); font-size: 1.6rem; line-height: 1; padding-left: var(--bcs-space-4); border-left: 1px solid rgba(var(--bcs-brand-white-rgb), .6); }
.bcs-shop-nav-tagline { flex: none; max-width: 165px; font-size: var(--bcs-font-size-sm); line-height: 1.4; padding-left: var(--bcs-space-4); border-left: 1px solid rgba(var(--bcs-brand-white-rgb), .6); }
.bcs-shop-nav-search { flex: 1 1 auto; min-width: 0; display: flex; align-items: stretch; min-height: 58px; background: var(--bcs-brand-bg); color: var(--bcs-brand-text-primary); border: 3px solid var(--bcs-brand-bg); border-radius: var(--bcs-radius-pill); overflow: hidden; }
.bcs-shop-nav-search-icon { align-self: center; flex: none; padding-left: var(--bcs-space-4); font-size: 1.35rem; }
.bcs-shop-nav-search input { flex: 1; width: 0; min-width: 0; border: 0; padding: 0 var(--bcs-space-3); background: transparent; color: inherit; font-size: var(--bcs-font-size-lg); }
.bcs-shop-nav-search input::placeholder { color: var(--bcs-brand-text-primary); opacity: .8; }
.bcs-shop-nav-select { position: relative; flex: none; display: flex; width: 215px; max-width: 34%; background: var(--bcs-brand-bg-subtle); }
.bcs-shop-nav-select select { width: 100%; min-width: 0; appearance: none; border: 0; background: transparent; padding: 0 calc(var(--bcs-space-4) + 1.5rem) 0 var(--bcs-space-4); color: var(--bcs-brand-text-primary); font-size: var(--bcs-font-size-lg); text-overflow: ellipsis; cursor: pointer; }
.bcs-shop-nav-select i { position: absolute; right: var(--bcs-space-4); top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 1.1rem; }
.bcs-shop-nav-search .bcs-btn { flex: none; display: flex; align-items: center; justify-content: center; gap: var(--bcs-space-2); margin: 0; border: 0; border-radius: 0 var(--bcs-radius-pill) var(--bcs-radius-pill) 0; padding: 0 var(--bcs-space-6); font-size: var(--bcs-font-size-2xl); }
.bcs-shop-nav-search .bcs-btn i { display: none; font-size: 1.35rem; }
.bcs-shop-nav-actions { display: flex; align-items: center; gap: var(--bcs-space-6); margin-left: auto; flex: none; }
.bcs-shop-nav-bar .bcs-shop-nav-icon { position: relative; color: inherit; background: transparent; border: 0; padding: 0; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: var(--bcs-space-3); text-decoration: none; }
.bcs-shop-nav-icon > i { font-size: 2.25rem; line-height: 1; }
.bcs-shop-nav-contact-label { display: flex; flex-direction: column; text-align: left; line-height: 1.35; font-size: var(--bcs-font-size-lg); white-space: nowrap; }
.bcs-shop-nav-contact-label strong { font-weight: var(--bcs-brand-font-weight-action); font-size: var(--bcs-font-size-2xl); }
.bcs-shop-nav-bar .bcs-shop-nav-cart { flex-direction: column; gap: 0; }
.bcs-shop-nav-cart-label { font-size: var(--bcs-font-size-lg); }
.bcs-shop-nav-badge { position: absolute; top: -8px; right: -10px; min-width: 22px; height: 22px; padding: 0 var(--bcs-space-1); border-radius: var(--bcs-radius-pill); background: var(--bcs-brand-bg); color: var(--bcs-brand-green-action); font-size: var(--bcs-font-size-xs); font-weight: 700; display: grid; place-items: center; }
.bcs-shop-nav-burger { display: none !important; }
.bcs-shop-nav-icon.bcs-shop-nav-burger > i { font-size: 2rem; }

.bcs-shop-nav-categories { display: flex; align-items: center; justify-content: space-between; gap: var(--bcs-space-3); min-height: 64px; padding: var(--bcs-space-2) max(var(--bcs-space-6), calc((100% - 1440px) / 2)); background: var(--bcs-brand-bg-subtle); }
.bcs-shop-nav-list { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; column-gap: var(--bcs-space-3); height: 48px; overflow: hidden; }
.bcs-shop-nav-list > :is(a, button), .bcs-shop-nav-categories summary { display: flex; align-items: center; gap: var(--bcs-space-2); min-width: 0; min-height: 44px; padding: var(--bcs-space-2); border: 0; background: transparent; color: var(--bcs-brand-text-primary); font-size: var(--bcs-font-size-lg); text-decoration: none; white-space: nowrap; cursor: pointer; }
.bcs-shop-nav-list > :is(a, button) { flex: none; height: 48px; }
.bcs-shop-nav-categories summary { list-style: none; }
.bcs-shop-nav-categories summary::-webkit-details-marker { display: none; }
.bcs-shop-nav-cat-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--bcs-brand-green-action); font-size: 1.5rem; }
.bcs-shop-nav-categories details { position: relative; flex: none; }
.bcs-shop-nav-all > summary, .bcs-shop-nav-more > summary { font-weight: 700; }
.bcs-shop-nav-all .bcs-shop-nav-cat-icon { color: var(--bcs-brand-text-primary); }
.bcs-shop-nav-more { display: none; }
.bcs-shop-nav-categories--overflow .bcs-shop-nav-more { display: block; }
.bcs-shop-nav-more .bcs-shop-nav-cat-icon { display: none; }
.bcs-shop-nav-chevron { font-size: 1rem; }
.bcs-shop-nav-categories a[aria-current="page"] { font-weight: 700; text-decoration: underline; }
.bcs-shop-nav-options { position: absolute; z-index: 3; top: 100%; left: 0; min-width: 240px; max-width: min(320px, 85vw); max-height: 50vh; overflow-y: auto; background: var(--bcs-brand-bg); border: 1px solid var(--bcs-brand-border-color); border-radius: var(--bcs-radius-md); padding: var(--bcs-space-2); box-shadow: var(--bcs-brand-shadow-raised); }
.bcs-shop-nav-options :is(a, button) { display: block; width: 100%; min-height: 44px; padding: var(--bcs-space-2) var(--bcs-space-3); border: 0; background: transparent; color: var(--bcs-brand-text-primary); font-size: var(--bcs-font-size-lg); text-align: left; text-decoration: none; overflow-wrap: anywhere; }
.bcs-shop-nav-more .bcs-shop-nav-options { left: auto; right: 0; }
.bcs-shop-nav-frame :is(button, summary, input, select):focus-visible { outline: 3px solid var(--bcs-brand-text-primary); outline-offset: -3px; }
.bcs-shop-nav-frame a:focus-visible { outline: 3px solid currentColor; outline-offset: -3px; }
.bcs-shop-nav-frame :is(a, button, summary):hover .bcs-shop-nav-cat-label, .bcs-shop-nav-options :is(a, button):hover { text-decoration: underline; }
.bcs-shop-nav-status { margin: 0; padding: var(--bcs-space-3); font-size: var(--bcs-font-size-sm); }

/* Tablette : sans slogan ni separateurs, cinq categories puis « Plus ». */
@container (max-width: 1199px) {
 .bcs-shop-nav-bar { gap: var(--bcs-space-4); padding-inline: var(--bcs-space-5); }
 .bcs-shop-nav-tagline { display: none; }
 .bcs-shop-nav-brand { gap: var(--bcs-space-3); }
 .bcs-shop-nav-brand img { width: 150px; }
 .bcs-shop-nav-brand strong { padding-left: 0; border-left: 0; }
 .bcs-shop-nav-actions { gap: var(--bcs-space-5); }
 .bcs-shop-nav-categories { padding-inline: var(--bcs-space-5); }
 .bcs-shop-nav-all { padding-right: var(--bcs-space-4); border-right: 1px solid var(--bcs-brand-border-color); }
 .bcs-shop-nav-contact-label { display: none; }
 .bcs-shop-nav-more { display: block; }
}
@container (max-width: 991px) {
 .bcs-shop-nav-brand img { width: 125px; }
 .bcs-shop-nav-brand strong { font-size: 1.35rem; }
 .bcs-shop-nav-search .bcs-btn { padding-inline: var(--bcs-space-4); }
 .bcs-shop-nav-select { width: 170px; }
 .bcs-shop-nav-cart-label { display: none; }
}
@container (max-width: 859px) {
 .bcs-shop-nav-select { display: none; }
}

/* Mobile : burger, logo, contact ; recherche pleine largeur ; pastilles de categories. */
@container (max-width: 575px) {
 .bcs-shop-nav-bar { flex-wrap: wrap; gap: var(--bcs-space-3); padding: var(--bcs-space-3) var(--bcs-space-4) var(--bcs-space-4); }
 .bcs-shop-nav-burger { display: flex !important; }
 .bcs-shop-nav-brand { gap: var(--bcs-space-2); }
 .bcs-shop-nav-brand img { width: 115px; }
 .bcs-shop-nav-actions { gap: var(--bcs-space-3); }
 .bcs-shop-nav-cart-label { display: none; }
 .bcs-shop-nav-icon > i { font-size: 1.9rem; }
 .bcs-shop-nav-search { order: 5; flex-basis: 100%; min-height: 52px; border-radius: var(--bcs-radius-md); }
 .bcs-shop-nav-search .bcs-btn { width: 52px; padding: 0; border-radius: var(--bcs-radius-control); }
 .bcs-shop-nav-search .bcs-btn i { display: inline; }
 .bcs-shop-nav-search-label { display: none; }
 .bcs-shop-nav-categories { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; gap: var(--bcs-space-1); min-height: 0; padding: var(--bcs-space-3) var(--bcs-space-2); background: var(--bcs-brand-bg); }
 .bcs-shop-nav-all { display: none; padding: 0; border: 0; }
 .bcs-shop-nav-all[open] { display: block; grid-column: 1 / -1; }
 .bcs-shop-nav-list { display: contents; }
 .bcs-shop-nav-list > :is(a, button):nth-of-type(n+6) { display: none; }
 .bcs-shop-nav-list > :is(a, button), .bcs-shop-nav-more > summary { height: auto; flex-direction: column; gap: var(--bcs-space-2); padding: var(--bcs-space-1) 0; font-size: var(--bcs-font-size-sm); font-weight: 400; white-space: normal; text-align: center; line-height: 1.25; }
 .bcs-shop-nav-list .bcs-shop-nav-cat-label, .bcs-shop-nav-more .bcs-shop-nav-cat-label { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-width: 100%; overflow: hidden; overflow-wrap: break-word; }
 .bcs-shop-nav-list .bcs-shop-nav-cat-icon, .bcs-shop-nav-more .bcs-shop-nav-cat-icon { display: inline-flex; width: 50px; height: 50px; border-radius: var(--bcs-radius-full); background: var(--bcs-brand-bg-subtle); }
 .bcs-shop-nav-more .bcs-shop-nav-cat-icon i { font-weight: 700; }
 .bcs-shop-nav-chevron { display: none; }
}
@container (max-width: 439px) {
 .bcs-shop-nav-categories { grid-template-columns: repeat(5, minmax(0, 1fr)); }
 .bcs-shop-nav-list > :is(a, button), .bcs-shop-nav-more > summary { font-size: var(--bcs-font-size-xs); }
 .bcs-shop-nav-list > :is(a, button):nth-of-type(n+5) { display: none; }
}
@container (max-width: 350px) {
 .bcs-shop-nav-bar { column-gap: var(--bcs-space-2); padding-inline: var(--bcs-space-3); }
 .bcs-shop-nav-brand img { width: 90px; }
 .bcs-shop-nav-brand strong { font-size: 1.1rem; }
 .bcs-shop-nav-categories { grid-template-columns: repeat(4, minmax(0, 1fr)); }
 .bcs-shop-nav-list > :is(a, button):nth-of-type(n+4) { display: none; }
}

/* Match shared link specificity so the inverse navbar keeps readable links. */
.bcs-brand .bcs-shop-nav-bar a:not(.bcs-btn) { color: var(--bcs-brand-action-text); text-decoration: none; }
.bcs-brand .bcs-shop-nav-categories a:not(.bcs-btn), .bcs-brand .bcs-shop-nav-options a:not(.bcs-btn) { color: var(--bcs-brand-text-primary); text-decoration: none; }
.bcs-brand .bcs-shop-nav-categories a[aria-current="page"] { text-decoration: underline; }

/* Corps Shop : gabarit valide le 2026-09-26 (corps large aligne sur la navbar, rayons, bandeaux, pagination). */
@media (min-width: 992px) {
 .bcs-site-shop .container { max-width: 1504px; padding-inline: var(--bcs-space-5); }
 .bcs-site-shop .bcs-site-hero { padding-top: var(--bcs-space-5); }
 .bcs-site-shop .bcs-site-hero-inner, .bcs-site-shop .bcs-site-hero-media { min-height: 420px; }
 .bcs-site-shop .bcs-site-hero-media { display: flex; align-items: center; }
 .bcs-site-shop .bcs-site-hero-photo { width: 62%; }
 .bcs-site-shop .bcs-site-hero-text { max-width: 50%; padding: var(--bcs-space-7); gap: var(--bcs-space-3); }
 .bcs-site-shop .bcs-site-hero h1 { font-size: clamp(1.75rem, 1rem + 1.6vw, 2.75rem) !important; }
 .bcs-site-shop .bcs-site-hero-note { font-size: var(--bcs-font-size-2xl); line-height: 1.5; }
 .bcs-site-shop .bcs-site-hero .bcs-btn--sm { min-height: 44px !important; padding-inline: var(--bcs-space-5); font-size: var(--bcs-font-size-lg); }
 .bcs-site-shop .bcs-site-hero-badge { max-width: 200px; right: var(--bcs-space-5); bottom: var(--bcs-space-5); font-size: var(--bcs-font-size-md); }
}
@media (min-width: 1200px) { .bcs-site-shop .container { padding-inline: var(--bcs-space-6); } }

.bcs-shop-rail { margin-block: var(--bcs-space-6); }
.bcs-shop-rail-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--bcs-space-3); margin-bottom: var(--bcs-space-4); }
.bcs-shop-rail-head :is(h2, h3, h4) { margin: 0; font-size: var(--bcs-brand-fs-h2); }
.bcs-shop-rail-tools { display: flex; align-items: center; gap: var(--bcs-space-2); }
.bcs-shop-rail-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--bcs-brand-field-border); border-radius: var(--bcs-radius-full); background: var(--bcs-brand-bg); color: var(--bcs-brand-text-primary); font-size: 1.25rem; cursor: pointer; }
.bcs-shop-rail-btn:hover:not(:disabled) { background: var(--bcs-brand-hover-bg-subtle); }
.bcs-shop-rail-btn:disabled { opacity: var(--bcs-brand-disabled-opacity); cursor: var(--bcs-brand-disabled-cursor); }
.bcs-shop-rail-btn:focus-visible, .bcs-shop-rail-track:focus-visible { outline: 3px solid var(--bcs-brand-focus-ring-color); outline-offset: 2px; }
.bcs-shop-rail-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, calc((100% - 4 * var(--bcs-space-4)) / 5)); gap: var(--bcs-space-4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--bcs-space-1); scroll-behavior: smooth; padding: var(--bcs-space-1) var(--bcs-space-1) var(--bcs-space-3); scrollbar-width: thin; }
.bcs-shop-rail-item { scroll-snap-align: start; min-width: 0; display: flex; }
.bcs-shop-rail-item > .bcs-product-card { width: 100%; }
@media (max-width: 767.98px) {
 .bcs-shop-rail-track { grid-auto-columns: 72%; }
 .bcs-shop-rail-btn { display: none; }
}

.bcs-shop-band { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bcs-space-4) var(--bcs-space-5); margin-block: var(--bcs-space-6); padding: var(--bcs-space-6); border-radius: var(--bcs-brand-radius-card); }
.bcs-shop-band :is(h2, h3, h4) { margin: 0 0 var(--bcs-space-1); font-size: var(--bcs-brand-fs-h3); }
.bcs-shop-band p { margin: 0; max-width: 60ch; }
.bcs-shop-band-text { flex: 1 1 320px; min-width: 0; }
.bcs-shop-band-icon { display: inline-grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: var(--bcs-radius-full); font-size: 1.75rem; }
.bcs-shop-band-actions { display: flex; flex-wrap: wrap; gap: var(--bcs-space-3); }
.bcs-shop-band--subtle { background: var(--bcs-brand-bg-subtle); color: var(--bcs-brand-text-primary); }
.bcs-shop-band--subtle .bcs-shop-band-icon { background: var(--bcs-brand-bg); color: var(--bcs-brand-green-action); }
.bcs-shop-band--action { background: var(--bcs-brand-action-bg); color: var(--bcs-brand-action-text); }
.bcs-shop-band--action :is(h2, h3, h4) { color: inherit; }
.bcs-shop-band--action .bcs-shop-band-icon { background: rgba(var(--bcs-brand-white-rgb), .15); color: inherit; }
.bcs-brand .bcs-shop-band--action .bcs-btn { background: var(--bcs-brand-bg); color: var(--bcs-brand-green-action); border-color: var(--bcs-brand-bg); }
.bcs-brand .bcs-shop-band--action .bcs-btn:focus-visible { outline: 3px solid var(--bcs-brand-bg); outline-offset: 2px; }
@media (max-width: 575.98px) { .bcs-shop-band { padding: var(--bcs-space-5); } .bcs-shop-band-actions, .bcs-shop-band-actions .bcs-btn { width: 100%; } }

.bcs-shop-pagination { margin-top: var(--bcs-space-6); }
.bcs-shop-pagination ul { justify-content: center; align-items: center; }
.bcs-brand .bcs-shop-pagination .bcs-pagination-item { display: inline-flex; gap: var(--bcs-space-1); text-decoration: none; }
.bcs-brand .bcs-shop-pagination .bcs-pagination-item[aria-disabled="true"] { opacity: var(--bcs-brand-disabled-opacity); cursor: var(--bcs-brand-disabled-cursor); background: var(--bcs-brand-disabled-bg); }
.bcs-shop-pagination-gap { display: inline-grid; place-items: center; min-width: 32px; min-height: 44px; }
@media (max-width: 575.98px) { .bcs-shop-pagination-word { display: none; } }
.bcs-site-shop .bcs-breadcrumb a { display: inline-flex; align-items: center; gap: var(--bcs-space-1); }

/* Site principal : gabarit « www » (Reference UI #ref-public-www, maquette du 2026-09-26).
 * Portee .bcs-site-www, container queries pour les cadres de la reference ; tokens existants.
 * --bcs-brand-green-deep : teinte derivee du vert d'action pour le footer de la maquette (a valider). */
.bcs-site-www { --bcs-brand-green-deep: color-mix(in srgb, var(--bcs-brand-green-action) 32%, #06140e); container-type: inline-size; background: var(--bcs-brand-bg); color: var(--bcs-brand-text-primary); }
.bcs-site-www .bcs-site-unconfirmed { --badge-accent: var(--bcs-brand-warning); margin-left: var(--bcs-space-1); background: var(--bcs-brand-warning); color: var(--bcs-brand-gray-dark); border-color: var(--bcs-brand-warning); font-size: var(--bcs-font-size-xs); white-space: nowrap; vertical-align: middle; }
.bcs-site-www .container { max-width: 1440px; }

.bcs-site-www .bcs-site-topbar { background: var(--bcs-brand-action-bg); color: var(--bcs-brand-action-text); font-size: var(--bcs-font-size-md); }
.bcs-site-www .bcs-site-topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--bcs-space-4); min-height: 40px; }
.bcs-site-www .bcs-site-topbar ul { display: flex; align-items: center; flex-wrap: wrap; gap: var(--bcs-space-2) var(--bcs-space-5); list-style: none; margin: 0; padding: 0; }
.bcs-site-www .bcs-site-topbar li { display: inline-flex; align-items: center; gap: var(--bcs-space-2); }
.bcs-site-www .bcs-site-topbar a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: var(--bcs-space-2); min-height: 40px; }
.bcs-site-www .bcs-site-topbar a:hover { text-decoration: underline; }
.bcs-site-www .bcs-site-topbar-social { font-size: 1.15rem; min-width: 32px; justify-content: center; }
.bcs-site-www .bcs-site-topbar a:focus-visible { outline: 2px solid var(--bcs-brand-white); outline-offset: 2px; }

.bcs-site-www .bcs-site-header--www { position: relative; z-index: 5; }
.bcs-site-www .bcs-site-header--www .bcs-site-navbar { gap: var(--bcs-space-4); padding-block: var(--bcs-space-3); }
.bcs-site-www .bcs-site-header--www .bcs-site-brand img { height: 60px; }
.bcs-site-www .bcs-site-header--www .bcs-site-desktop { margin-inline: auto; }
.bcs-site-www .bcs-site-header--www .bcs-menu { gap: var(--bcs-space-4); overflow: visible; }
.bcs-site-www .bcs-site-header--www .bcs-menu > li > a, .bcs-site-www .bcs-site-dropdown > summary { display: inline-flex; align-items: center; gap: var(--bcs-space-1); min-height: 44px; padding: 0 var(--bcs-space-1); font-size: var(--bcs-font-size-xl); font-weight: 500; color: var(--bcs-brand-text-primary); text-decoration: none; border-bottom: 2px solid transparent; cursor: pointer; list-style: none; white-space: nowrap; }
.bcs-site-www .bcs-site-dropdown > summary::-webkit-details-marker { display: none; }
.bcs-site-www .bcs-site-header--www .bcs-menu [aria-current="page"] { color: var(--bcs-brand-green-action); border-bottom-color: var(--bcs-brand-green-action); font-weight: var(--bcs-brand-font-weight-action); }
.bcs-site-www .bcs-site-header--www .bcs-menu > li > a:hover, .bcs-site-www .bcs-site-dropdown > summary:hover { color: var(--bcs-brand-green-action); background: transparent; }
.bcs-site-www .bcs-site-dropdown { position: relative; }
.bcs-site-www .bcs-site-dropdown[open] > summary i { transform: rotate(180deg); }
.bcs-site-www .bcs-site-dropdown-menu { position: absolute; top: calc(100% + var(--bcs-space-2)); left: 0; z-index: 10; min-width: 280px; list-style: none; margin: 0; padding: var(--bcs-space-2); background: var(--bcs-brand-bg); border: 1px solid var(--bcs-brand-border-color); border-radius: var(--bcs-radius-md); box-shadow: var(--bcs-shadow-lg); }
.bcs-site-www .bcs-site-dropdown-menu a { display: flex; align-items: center; gap: var(--bcs-space-3); min-height: 44px; padding: var(--bcs-space-2) var(--bcs-space-3); border-radius: var(--bcs-radius-md); color: var(--bcs-brand-text-primary); text-decoration: none; }
.bcs-site-www .bcs-site-dropdown-menu a:hover { background: var(--bcs-brand-bg-subtle); }
.bcs-site-www .bcs-site-dropdown-menu i { color: var(--bcs-brand-green-action); font-size: 1.2rem; }
.bcs-site-www .bcs-site-www-search { position: relative; flex: none; }
.bcs-site-www .bcs-site-www-search > summary { display: inline-grid; place-items: center; width: 44px; height: 44px; list-style: none; cursor: pointer; color: var(--bcs-brand-green-action); font-size: 1.5rem; border-radius: var(--bcs-radius-md); }
.bcs-site-www .bcs-site-www-search > summary::-webkit-details-marker { display: none; }
.bcs-site-www .bcs-site-www-search > summary:hover { background: var(--bcs-brand-bg-subtle); }
.bcs-site-www .bcs-site-www-search form { position: absolute; right: 0; top: calc(100% + var(--bcs-space-2)); z-index: 10; display: flex; gap: var(--bcs-space-2); width: min(420px, 90cqi); padding: var(--bcs-space-3); background: var(--bcs-brand-bg); border: 1px solid var(--bcs-brand-border-color); border-radius: var(--bcs-radius-md); box-shadow: var(--bcs-shadow-lg); }
.bcs-site-www .bcs-site-www-search input { flex: 1; min-width: 0; min-height: 44px; padding: 0 var(--bcs-space-3); border: 1px solid var(--bcs-brand-field-border); border-radius: var(--bcs-radius-md); }
.bcs-site-www .bcs-site-quote { display: inline-flex; align-items: center; gap: var(--bcs-space-2); flex: none; min-height: 52px; padding-inline: var(--bcs-space-5); font-size: var(--bcs-font-size-xl); }
.bcs-site-www .bcs-site-header--www > .bcs-site-navbar > .bcs-site-menu-toggle { display: none; }
.bcs-site-www .bcs-site-header--www :is(a, summary, button):focus-visible { outline: 3px solid var(--bcs-brand-focus-ring-color); outline-offset: 2px; }

.bcs-site-www .bcs-site-hero--www { position: relative; margin: 0; border-radius: 0; box-shadow: none; min-height: 0; overflow: hidden; background: var(--bcs-brand-bg); }
.bcs-site-www .bcs-site-hero--www::after { content: none; }
.bcs-site-www .bcs-site-hero--www .bcs-site-hero-inner { max-width: none; padding: 0; }
.bcs-site-www .bcs-site-hero--www .bcs-site-hero-media { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); min-height: 460px; border-radius: 0; box-shadow: none; overflow: hidden; }
.bcs-site-www .bcs-site-hero--www .bcs-site-hero-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.bcs-site-www .bcs-site-hero--www .bcs-site-hero-media::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--bcs-brand-bg) 0%, rgba(var(--bcs-brand-white-rgb), .92) 38%, rgba(var(--bcs-brand-white-rgb), 0) 62%); }
.bcs-site-www .bcs-site-hero--www .bcs-site-hero-text { position: relative; width: auto; max-width: 720px; padding: var(--bcs-space-7) var(--bcs-space-6) var(--bcs-space-6) max(var(--bcs-space-6), calc((100cqi - 1440px) / 2 + var(--bcs-space-4))); display: grid; gap: var(--bcs-space-4); align-content: center; }
.bcs-site-www .bcs-site-hero--www h1, .bcs-site-www .bcs-site-hero--www :is(h2, h3) { margin: 0; font-size: clamp(1.75rem, 1rem + 2.2cqi, 3rem) !important; line-height: 1.12; font-weight: var(--bcs-brand-font-weight-heading); color: var(--bcs-brand-text-primary); }
.bcs-site-www .bcs-site-hero--www :is(h1, h2, h3) span { color: inherit; display: block; }
.bcs-site-www .bcs-site-hero--www .bcs-site-hero-note { margin: 0; font-size: var(--bcs-font-size-2xl); line-height: 1.55; color: var(--bcs-brand-text-primary); max-width: 58ch; }
.bcs-site-www .bcs-site-hero--www .bcs-site-eyebrow, .bcs-site-www .bcs-site-universes--home .bcs-site-eyebrow { margin: 0; padding-left: var(--bcs-space-3); border-left: 4px solid var(--bcs-brand-green-action); color: var(--bcs-brand-green-action); }
.bcs-site-www .bcs-site-hero--www .bcs-site-hero-actions { display: flex; flex-wrap: wrap; gap: var(--bcs-space-3); }
.bcs-site-www .bcs-site-hero--www .bcs-site-hero-actions .bcs-btn { min-height: 52px; padding-inline: var(--bcs-space-5); font-size: var(--bcs-font-size-xl); }
.bcs-site-www .bcs-site-hero-features { display: flex; flex-wrap: wrap; gap: var(--bcs-space-4) var(--bcs-space-6); list-style: none; margin: var(--bcs-space-2) 0 0; padding: 0; }
.bcs-site-www .bcs-site-hero-features li { display: flex; align-items: center; gap: var(--bcs-space-3); }
.bcs-site-www .bcs-site-hero-features i { font-size: 2rem; color: var(--bcs-brand-green-action); }
.bcs-site-www .bcs-site-hero-features span { display: grid; font-size: var(--bcs-font-size-md); }
.bcs-site-www .bcs-site-hero-features strong { color: var(--bcs-brand-green-action); font-size: var(--bcs-font-size-lg); }
.bcs-site-www .bcs-site-hero-aside { position: relative; display: grid; align-content: center; gap: var(--bcs-space-4); padding: var(--bcs-space-7) max(var(--bcs-space-6), calc((100cqi - 1440px) / 2 + var(--bcs-space-4))) var(--bcs-space-7) 18%; color: var(--bcs-brand-white); background: linear-gradient(135deg, rgba(var(--bcs-brand-green-action-rgb), .92), var(--bcs-brand-green-deep)); clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); }
.bcs-site-www .bcs-site-hero-aside .bcs-site-eyebrow { border: 0; padding: 0; color: var(--bcs-brand-white); font-size: var(--bcs-font-size-xs); }
.bcs-site-www .bcs-site-hero-aside-title { margin: 0; font-family: var(--bcs-brand-font-heading); font-weight: var(--bcs-brand-font-weight-heading); font-size: clamp(1.4rem, 1rem + 1.2cqi, 2.25rem); line-height: 1.2; color: var(--bcs-brand-white); }
.bcs-site-www .bcs-site-hero-video { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bcs-space-3); margin: 0; }
.bcs-site-www .bcs-site-hero-video :is(a, span:first-child) { display: inline-flex; align-items: center; gap: var(--bcs-space-3); color: var(--bcs-brand-white); }
.bcs-site-www .bcs-site-hero-video i { display: inline-grid; place-items: center; width: 52px; height: 52px; border: 2px solid var(--bcs-brand-white); border-radius: var(--bcs-radius-full); font-size: 1.4rem; }

.bcs-site-www .bcs-site-service-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--bcs-space-4); list-style: none; margin: 0 auto; padding: var(--bcs-space-5) var(--bcs-space-4); max-width: 1440px; }
.bcs-site-www .bcs-site-service-cards a.bcs-site-service-card { position: relative; display: flex; align-items: flex-start; gap: var(--bcs-space-3); height: 100%; padding: var(--bcs-space-4) var(--bcs-space-5) var(--bcs-space-4) var(--bcs-space-4); background: var(--bcs-brand-bg); border: 1px solid var(--bcs-brand-border-color); border-radius: var(--bcs-radius-md); box-shadow: var(--bcs-shadow-card); color: var(--bcs-brand-text-primary); text-decoration: none; }
.bcs-site-www .bcs-site-service-cards a.bcs-site-service-card:hover { box-shadow: var(--bcs-shadow-lg); }
.bcs-site-www .bcs-site-service-cards a.bcs-site-service-card:hover strong { color: var(--bcs-brand-green-action); }
.bcs-site-www .bcs-site-service-card:focus-visible { outline: 3px solid var(--bcs-brand-focus-ring-color); outline-offset: 2px; }
.bcs-site-www .bcs-site-service-icon { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--bcs-radius-full); background: var(--bcs-brand-bg-subtle); color: var(--bcs-brand-green-action); font-size: 1.5rem; }
.bcs-site-www .bcs-site-service-text { display: grid; gap: var(--bcs-space-1); min-width: 0; font-size: var(--bcs-font-size-sm); }
.bcs-site-www .bcs-site-service-text strong { font-size: var(--bcs-font-size-md); }
.bcs-site-www .bcs-site-service-arrow { position: absolute; right: var(--bcs-space-2); bottom: var(--bcs-space-3); color: var(--bcs-brand-green-action); }

.bcs-site-www .bcs-site-stats { background: var(--bcs-brand-bg-subtle); }
.bcs-site-www .bcs-site-stats-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--bcs-space-5); padding-block: var(--bcs-space-5); }
.bcs-site-www .bcs-site-stats ul { display: flex; flex-wrap: wrap; gap: var(--bcs-space-5) var(--bcs-space-7); list-style: none; margin: 0; padding: 0; }
.bcs-site-www .bcs-site-stats li { display: flex; align-items: center; gap: var(--bcs-space-3); }
.bcs-site-www .bcs-site-stats li > i { font-size: 2.5rem; color: var(--bcs-brand-green-action); }
.bcs-site-www .bcs-site-stats li > span { display: grid; justify-items: start; }
.bcs-site-www .bcs-site-stats strong { font-family: var(--bcs-brand-font-heading); font-size: 1.5rem; color: var(--bcs-brand-green-action); line-height: 1.1; }
.bcs-site-www .bcs-site-stats blockquote { display: flex; gap: var(--bcs-space-3); margin: 0; padding-left: var(--bcs-space-5); border-left: 1px solid var(--bcs-brand-field-border); font-style: italic; max-width: 360px; }
.bcs-site-www .bcs-site-stats blockquote i { font-size: 2rem; color: var(--bcs-brand-green-action); }
.bcs-site-www .bcs-site-stats blockquote p { margin: 0; }

.bcs-site-www .bcs-site-footer--www { background: var(--bcs-brand-green-deep); color: var(--bcs-brand-text-on-dark); padding-block: var(--bcs-space-7) var(--bcs-space-4); }
.bcs-site-www .bcs-site-footer--www .bcs-site-footer-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: var(--bcs-space-6); }
.bcs-site-www .bcs-site-x { font-size: 1.05rem; font-weight: 700; line-height: 1; }
.bcs-site-www .bcs-site-footer--www .bcs-site-footer-section { grid-column: auto; min-width: 0; border: 0; border-radius: 0; }
.bcs-site-www .bcs-site-footer--www :is(p, li, span) { color: var(--bcs-brand-text-on-dark); font-size: var(--bcs-font-size-md); }
.bcs-site-www .bcs-site-footer--www .bcs-site-unconfirmed { color: var(--bcs-brand-gray-dark); font-size: var(--bcs-font-size-xs); }
.bcs-site-www .bcs-site-footer--www ul { list-style: none; margin: 0; padding: 0; }
.bcs-site-www .bcs-site-footer--www a:not(.bcs-btn) { color: var(--bcs-brand-text-on-dark); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.bcs-site-www .bcs-site-footer--www a:not(.bcs-btn):hover { text-decoration: underline; }
.bcs-site-www .bcs-site-footer--www a:focus-visible { outline: 2px solid var(--bcs-brand-white); outline-offset: 2px; }
.bcs-site-www .bcs-site-footer--www .bcs-site-footer-section summary, .bcs-site-www .bcs-site-footer-title { list-style: none; margin: 0 0 var(--bcs-space-3); font-family: var(--bcs-brand-font-heading); font-weight: var(--bcs-brand-font-weight-heading); font-size: var(--bcs-font-size-xl); color: var(--bcs-brand-white); }
.bcs-site-www .bcs-site-footer--www .bcs-site-footer-section summary::-webkit-details-marker { display: none; }
.bcs-site-www .bcs-site-footer--www .bcs-site-footer-section summary i { display: none; }
.bcs-site-www .bcs-site-footer-list li::before { content: "\203A"; margin-right: var(--bcs-space-2); }
.bcs-site-www .bcs-site-footer--www .bcs-site-social { display: flex; flex-wrap: wrap; gap: var(--bcs-space-3); margin-top: var(--bcs-space-4); }
.bcs-site-www .bcs-site-footer--www .bcs-site-social li { display: inline-flex; align-items: center; }
.bcs-site-www .bcs-site-footer--www .bcs-site-social :is(a, span[aria-label]) { display: inline-grid; place-items: center; width: 40px; height: 40px; min-height: 40px; border-radius: var(--bcs-radius-full); background: var(--bcs-brand-white); color: var(--bcs-brand-green-deep); font-size: 1.2rem; }
.bcs-site-www .bcs-site-footer--www .bcs-site-social :is(a, span[aria-label]) i { color: var(--bcs-brand-green-deep); }
.bcs-site-www .bcs-site-footer-contact li { display: flex; align-items: flex-start; gap: var(--bcs-space-3); padding-block: var(--bcs-space-1); }
.bcs-site-www .bcs-site-footer--www .bcs-site-footer-contact i { color: var(--bcs-brand-green-light); font-size: 1.3rem; }
.bcs-site-www .bcs-site-newsletter { padding-left: var(--bcs-space-5); border-left: 1px solid rgba(var(--bcs-brand-white-rgb), .25); }
.bcs-site-www .bcs-site-newsletter-form { display: flex; margin-top: var(--bcs-space-3); border-radius: var(--bcs-radius-md); overflow: hidden; background: var(--bcs-brand-white); }
.bcs-site-www .bcs-site-newsletter-form input { flex: 1; min-width: 0; min-height: 48px; padding: 0 var(--bcs-space-3); border: 0; background: var(--bcs-brand-white); }
.bcs-site-www .bcs-site-newsletter-form .bcs-btn { border-radius: 0; min-width: 52px; }
.bcs-site-www .bcs-site-footer--www .bcs-site-footer-legal { margin-top: var(--bcs-space-6); padding-top: var(--bcs-space-4); border-top: 1px solid rgba(var(--bcs-brand-white-rgb), .2); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--bcs-space-3); }
.bcs-site-www .bcs-site-footer--www .bcs-site-footer-legal p { margin: 0; font-size: var(--bcs-font-size-sm); }

.bcs-site-drawer.bcs-site-drawer--www details > summary { display: flex; align-items: center; gap: var(--bcs-space-3); min-height: 44px; padding: var(--bcs-space-2) var(--bcs-space-3); list-style: none; cursor: pointer; }
.bcs-site-drawer.bcs-site-drawer--www details > summary::-webkit-details-marker { display: none; }
.bcs-site-drawer.bcs-site-drawer--www details > summary .ti-chevron-down { margin-left: auto; }
.bcs-site-drawer.bcs-site-drawer--www details ul { padding-left: var(--bcs-space-6); }

@container (max-width: 1399px) {
 .bcs-site-www .bcs-site-header--www .bcs-menu { gap: var(--bcs-space-2); }
 .bcs-site-www .bcs-site-header--www .bcs-menu > li > a, .bcs-site-www .bcs-site-dropdown > summary { font-size: var(--bcs-font-size-lg); }
 .bcs-site-www .bcs-site-service-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 .bcs-site-www .bcs-site-footer--www .bcs-site-footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 .bcs-site-www .bcs-site-newsletter { padding-left: 0; border-left: 0; }
}
@container (max-width: 1199px) {
 .bcs-site-www .bcs-site-header--www .bcs-site-desktop { display: none; }
 .bcs-site-www .bcs-site-header--www .bcs-site-www-search { margin-left: auto; }
 .bcs-site-www .bcs-site-header--www > .bcs-site-navbar > .bcs-site-menu-toggle { display: inline-grid; }
 .bcs-site-www .bcs-site-hero--www .bcs-site-hero-media { grid-template-columns: 1fr; }
 .bcs-site-www .bcs-site-hero--www .bcs-site-hero-media::before { background: rgba(var(--bcs-brand-white-rgb), .9); }
 .bcs-site-www .bcs-site-hero-aside { clip-path: none; padding: var(--bcs-space-6); }
 .bcs-site-www .bcs-site-stats-inner { flex-direction: column; align-items: flex-start; }
 .bcs-site-www .bcs-site-stats blockquote { padding-left: 0; border-left: 0; max-width: none; }
}
@container (max-width: 767px) {
 .bcs-site-www .bcs-site-topbar-contact li:not(:nth-child(2)) { display: none; }
 .bcs-site-www .bcs-site-topbar-links .bcs-site-topbar-social { display: none; }
 .bcs-site-www .bcs-site-topbar-links li:has(> .bcs-site-topbar-social) { display: none; }
 .bcs-site-www .bcs-site-header--www .bcs-site-brand img { height: 48px; }
 .bcs-site-www .bcs-site-quote { min-height: 44px; padding-inline: var(--bcs-space-3); }
 .bcs-site-www .bcs-site-quote span { display: none; }
 .bcs-site-www .bcs-site-hero--www .bcs-site-hero-photo { display: none; }
 .bcs-site-www .bcs-site-hero--www .bcs-site-hero-media::before { background: var(--bcs-brand-bg-subtle); }
 .bcs-site-www .bcs-site-hero--www .bcs-site-hero-text { padding: var(--bcs-space-6) var(--bcs-space-4); }
 .bcs-site-www .bcs-site-hero--www .bcs-site-hero-actions .bcs-btn { width: 100%; justify-content: center; }
 .bcs-site-www .bcs-site-hero-features { display: grid; gap: var(--bcs-space-3); }
 .bcs-site-www .bcs-site-service-cards { grid-template-columns: 1fr; padding-inline: var(--bcs-space-3); }
 .bcs-site-www .bcs-site-stats ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bcs-space-4); }
 .bcs-site-www .bcs-site-footer--www .bcs-site-footer-cols { grid-template-columns: 1fr; gap: var(--bcs-space-5); }
 .bcs-site-www .bcs-site-footer--www .bcs-site-footer-legal { flex-direction: column; }
 .bcs-site-www .bcs-site-footer--www .bcs-site-footer-section { border-bottom: 1px solid rgba(var(--bcs-brand-white-rgb), .2); }
 .bcs-site-www .bcs-site-footer--www .bcs-site-footer-section summary { display: flex; justify-content: space-between; align-items: center; min-height: 44px; margin: 0; cursor: pointer; }
 .bcs-site-www .bcs-site-footer--www .bcs-site-footer-section summary i { display: inline; }
 .bcs-site-www .bcs-site-footer--www .bcs-site-footer-section[open] summary i { transform: rotate(180deg); }
 .bcs-site-www .bcs-site-footer--www .bcs-site-footer-section ul { padding: 0 0 var(--bcs-space-3); }
}
@container (min-width: 768px) and (max-width: 1199px) {
 .bcs-site-www .bcs-site-topbar-contact li:nth-child(3) { display: none; }
}
.bcs-site-www .bcs-site-footer--www .bcs-site-social .bcs-site-x { color: var(--bcs-brand-green-deep); }

/* Public catalogue: common cards, centered incomplete rows, long search values. */
.bcs-public-product-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--bcs-space-4); }
.bcs-public-product-grid > .produit-item { flex:0 0 100%; min-width:0; max-width:100%; }
.bcs-public-product-grid .bcs-product-card { width:100%; overflow-wrap:anywhere; }
.bcs-shop-search-results { flex-wrap:wrap; min-width:0; overflow-wrap:anywhere; }
.bcs-shop-search-results > * { min-width:0; max-width:100%; overflow-wrap:anywhere; }
@media (min-width:768px) { .bcs-public-product-grid > .produit-item { flex-basis:calc((100% - var(--bcs-space-4)) / 2); max-width:calc((100% - var(--bcs-space-4)) / 2); } }
@media (min-width:1024px) { .bcs-public-product-grid > .produit-item { flex-basis:calc((100% - 3 * var(--bcs-space-4)) / 4); max-width:calc((100% - 3 * var(--bcs-space-4)) / 4); } }
.bcs-public-product-grid.bcs-products-list > .produit-item { flex-basis:100%; max-width:100%; }

/* Shared universe footer: existing TARGET design, only the 4/2/1 content grid differs. */
.bcs-site-www .bcs-site-footer--universes .bcs-site-footer-cols { grid-template-columns: minmax(0,1.5fr) repeat(3,minmax(0,1fr)); }
.bcs-site-www .bcs-site-footer--universes .bcs-site-footer-cols > div:first-child { grid-row: auto; }
@container (max-width: 991.98px) {
 .bcs-site-www .bcs-site-footer--universes .bcs-site-footer-cols { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@container (max-width: 767.98px) {
 .bcs-site-www .bcs-site-footer--universes .bcs-site-footer-cols { grid-template-columns: minmax(0,1fr); }
}

/* User-approved footer treatment: soften white only, retain green accents. */
.bcs-site-www .bcs-site-footer--universes .bcs-site-footer-logo { opacity: .60; }
.bcs-site-www .bcs-site-footer--universes :is(p, li, span, summary, a:not(.bcs-btn)) { color: rgba(var(--bcs-brand-white-rgb), .88); }

/* Connexion (Reference UI #ref-public-login, page /login) : carte en deux panneaux, tokens existants. */
.bcs-site-www .bcs-site-login { padding: var(--bcs-space-7) var(--bcs-space-4); background: var(--bcs-brand-bg-subtle); }
.bcs-site-www .bcs-site-login-card { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); max-width: 960px; margin: 0 auto; overflow: hidden; background: var(--bcs-brand-bg); border: 1px solid var(--bcs-brand-border-color); border-radius: var(--bcs-brand-radius-card); box-shadow: var(--bcs-shadow-lg); }
.bcs-site-www .bcs-site-login-aside { display: grid; align-content: center; gap: var(--bcs-space-3); padding: var(--bcs-space-7) var(--bcs-space-6); color: var(--bcs-brand-white); background: linear-gradient(135deg, var(--bcs-brand-action-bg), var(--bcs-brand-green-deep)); }
.bcs-site-www .bcs-site-login-aside img { width: 150px; height: auto; }
.bcs-site-www .bcs-site-login-aside p { margin: 0; color: var(--bcs-brand-white); }
.bcs-site-www .bcs-site-login-aside-title { font-family: var(--bcs-brand-font-heading); font-weight: var(--bcs-brand-font-weight-heading); font-size: clamp(1.4rem, 1rem + 1.2cqi, 2rem); line-height: 1.2; }
.bcs-site-www .bcs-site-login-main { display: grid; gap: var(--bcs-space-4); padding: var(--bcs-space-7) var(--bcs-space-6); }
.bcs-site-www .bcs-site-login-main :is(h1, h2, h3) { margin: 0; font-size: var(--bcs-brand-fs-h2) !important; }
.bcs-site-www .bcs-site-login-lead { margin: calc(var(--bcs-space-3) * -1) 0 0; color: var(--bcs-brand-text-secondary); }
.bcs-site-www .bcs-site-login-form { display: grid; gap: var(--bcs-space-4); }
.bcs-site-www .bcs-site-login-input { position: relative; display: flex; align-items: center; }
.bcs-site-www .bcs-site-login-input > i { position: absolute; left: var(--bcs-space-3); color: var(--bcs-brand-text-secondary); font-size: 1.2rem; pointer-events: none; }
.bcs-site-www .bcs-site-login-input .bcs-input { width: 100%; min-height: 48px; padding-left: calc(var(--bcs-space-3) * 2 + 1.2rem); }
.bcs-site-www .bcs-site-login-input .bcs-input[type="password"], .bcs-site-www .bcs-site-login-input:has(.bcs-site-login-toggle) .bcs-input { padding-right: 52px; }
.bcs-site-www .bcs-site-login-toggle { position: absolute; right: 2px; display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; color: var(--bcs-brand-text-primary); font-size: 1.25rem; cursor: pointer; border-radius: var(--bcs-radius-md); }
.bcs-site-www .bcs-site-login-toggle:focus-visible { outline: 3px solid var(--bcs-brand-focus-ring-color); outline-offset: -3px; }
.bcs-site-www .bcs-site-login-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--bcs-space-2) var(--bcs-space-4); }
.bcs-site-www .bcs-site-login-check { display: inline-flex; align-items: center; gap: var(--bcs-space-2); min-height: 44px; cursor: pointer; }
.bcs-site-www .bcs-site-login-check input { width: 18px; height: 18px; accent-color: var(--bcs-brand-green-action); }
.bcs-site-www .bcs-site-login-submit { display: inline-flex; justify-content: center; align-items: center; gap: var(--bcs-space-2); width: 100%; min-height: 52px; font-size: var(--bcs-font-size-xl); }
.bcs-site-www .bcs-site-login-register { margin: 0; text-align: center; }
@container (max-width: 767px) {
 .bcs-site-www .bcs-site-login { padding: var(--bcs-space-5) var(--bcs-space-3); }
 .bcs-site-www .bcs-site-login-card { grid-template-columns: 1fr; }
 .bcs-site-www .bcs-site-login-aside { padding: var(--bcs-space-5); }
 .bcs-site-www .bcs-site-login-aside-title { font-size: 1.25rem; }
 .bcs-site-www .bcs-site-login-main { padding: var(--bcs-space-5) var(--bcs-space-4); }
}

/* Drawer www : deplace sous <body> a l'ouverture (hors ancetre .bcs-brand sur www), il porte lui-meme .bcs-brand. */
.bcs-site-overlay.bcs-brand { position:fixed; inset:0; z-index:1050; background:rgba(var(--bcs-brand-gray-dark-rgb),.6); }
.bcs-site-drawer.bcs-brand { position:fixed; inset:0 0 0 auto; z-index:1051; width:min(88%, 380px); overflow-y:auto; display:flex; flex-direction:column; gap:var(--bcs-space-3); padding-bottom:var(--bcs-space-5); background:var(--bcs-brand-bg); box-shadow:var(--bcs-shadow-lg); }
.bcs-site-drawer.bcs-brand[hidden], .bcs-site-overlay.bcs-brand[hidden] { display:none; }
.bcs-site-drawer.bcs-brand > .bcs-btn { margin:var(--bcs-space-3); display:inline-flex; justify-content:center; align-items:center; gap:var(--bcs-space-2); }

/* Hero partage sur les pages publiques (templates/*) : hauteur reduite sans panneau lateral ;
 * neutralise l'espacement generique #content-section section > .container (bcs-public-spacing.css). */
#page-wrapper #content-section .bcs-site-page-hero .bcs-site-hero--www .bcs-site-hero-inner { max-width: none; padding: 0; margin: 0; }
#page-wrapper #content-section .bcs-site-page-hero .bcs-site-hero--www { padding: 0; margin: 0; }
.bcs-site-www .bcs-site-hero--www .bcs-site-hero-media:not(:has(.bcs-site-hero-aside)) { min-height: 380px; }

/* Hero www : panneau vert semi-transparent (photo visible derriere) et fondu entre plusieurs photos. */
.bcs-site-www .bcs-site-hero-aside { background: linear-gradient(135deg, rgba(var(--bcs-brand-green-action-rgb), .62), color-mix(in srgb, var(--bcs-brand-green-deep) 72%, transparent)); text-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.bcs-site-www [data-hero-slides] .bcs-site-hero-photo { opacity: 0; transition: opacity 1.2s ease; }
.bcs-site-www [data-hero-slides] .bcs-site-hero-photo.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .bcs-site-www [data-hero-slides] .bcs-site-hero-photo { transition: none; } }

/* Cartes des univers (accueil www) : memes cartes que les services ; univers non pret sans lien. */
.bcs-site-www .bcs-site-universes { padding: var(--bcs-space-6) 0 var(--bcs-space-2); background: var(--bcs-brand-bg); }
.bcs-site-www .bcs-site-universes-title { margin: 0 0 var(--bcs-space-4); font-size: var(--bcs-brand-fs-h2) !important; }
.bcs-site-www .bcs-site-universes .bcs-site-service-cards { padding: 0; max-width: none; }
.bcs-site-www .bcs-site-service-cards li { display: flex; }
.bcs-site-www .bcs-site-service-cards div.bcs-site-service-card[aria-disabled="true"] { position: relative; display: flex; align-items: flex-start; gap: var(--bcs-space-3); width: 100%; height: 100%; padding: var(--bcs-space-4) var(--bcs-space-5) var(--bcs-space-4) var(--bcs-space-4); background: var(--bcs-brand-bg-subtle); border: 1px solid var(--bcs-brand-border-color); border-radius: var(--bcs-radius-md); color: var(--bcs-brand-text-primary); cursor: default; }
.bcs-site-www .bcs-site-service-card[aria-disabled="true"] .bcs-site-service-icon { background: var(--bcs-brand-bg); color: var(--bcs-brand-text-secondary); }
.bcs-site-www .bcs-site-universe-soon { display: inline-flex; align-items: center; gap: var(--bcs-space-1); color: var(--bcs-brand-text-secondary); }
.bcs-site-www .bcs-site-service-cards a.bcs-site-service-card { width: 100%; }

/* « Nos services » de l'accueil (maquette du 2026-09-27) : en-tete + grille 3/2/1, carte entiere cliquable. */
.bcs-site-www .bcs-site-universes--home { padding-top: var(--bcs-space-7); }
.bcs-site-www .bcs-site-universes-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--bcs-space-4) var(--bcs-space-6); margin-bottom: var(--bcs-space-6); }
.bcs-site-www .bcs-site-universes--home .bcs-site-eyebrow { margin-bottom: var(--bcs-space-2); }
.bcs-site-www .bcs-site-universes--home .bcs-site-universes-title { margin-bottom: var(--bcs-space-2); }
.bcs-site-www .bcs-site-universes-intro { max-width: 62ch; margin: 0; color: var(--bcs-brand-text-secondary); font-size: var(--bcs-brand-fs-body); }
.bcs-site-www .bcs-site-universes-all, .bcs-site-trust .bcs-site-trust-all { display: inline-flex; align-items: center; gap: var(--bcs-space-1); flex: none; min-height: 44px; color: var(--bcs-brand-link); font-family: var(--bcs-brand-font-action); font-weight: var(--bcs-brand-font-weight-action); text-decoration: none; }
.bcs-site-www .bcs-site-universes-all:hover, .bcs-site-trust .bcs-site-trust-all:hover { text-decoration: underline; text-underline-offset: 4px; }
.bcs-site-www .bcs-site-universes-all:focus-visible, .bcs-site-trust .bcs-site-trust-all:focus-visible { outline: 3px solid var(--bcs-brand-focus-ring-color); outline-offset: 2px; }
.bcs-site-www .bcs-site-universes--home .bcs-site-service-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bcs-space-5); }
.bcs-site-www .bcs-site-universes--home .bcs-site-service-cards a.bcs-site-service-card { flex-direction: column; gap: var(--bcs-space-2); padding: var(--bcs-space-5); border-radius: var(--bcs-brand-radius-card); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.bcs-site-www .bcs-site-universes--home .bcs-site-service-cards a.bcs-site-service-card:hover,
.bcs-site-www .bcs-site-universes--home .bcs-site-service-cards a.bcs-site-service-card:focus-visible { border-color: var(--bcs-brand-green); box-shadow: var(--bcs-brand-shadow-raised); transform: translateY(-2px); }
.bcs-site-www .bcs-site-universes--home .bcs-site-service-icon { width: 48px; height: 48px; margin-bottom: var(--bcs-space-2); border-radius: var(--bcs-radius-lg); background: rgba(var(--bcs-brand-green-rgb), .12); color: var(--bcs-brand-green-action); }
.bcs-site-www .bcs-site-universes--home .bcs-site-service-card strong { font-family: var(--bcs-brand-font-heading); font-size: var(--bcs-brand-fs-h3); line-height: 1.3; }
.bcs-site-www .bcs-site-service-desc { color: var(--bcs-brand-text-secondary); font-size: var(--bcs-font-size-lg); line-height: 1.6; }
.bcs-site-www .bcs-site-service-more { display: inline-flex; align-items: center; gap: var(--bcs-space-1); margin-top: auto; padding-top: var(--bcs-space-2); color: var(--bcs-brand-link); font-family: var(--bcs-brand-font-action); font-weight: var(--bcs-brand-font-weight-action); font-size: var(--bcs-font-size-lg); }
@container (max-width: 991px) { .bcs-site-www .bcs-site-universes--home .bcs-site-service-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 767px) {
 .bcs-site-www .bcs-site-universes--home { padding-top: var(--bcs-space-6); }
 .bcs-site-www .bcs-site-universes-head { flex-direction: column; align-items: flex-start; margin-bottom: var(--bcs-space-5); }
 .bcs-site-www .bcs-site-universes--home .bcs-site-service-cards { grid-template-columns: 1fr; gap: var(--bcs-space-4); }
}
@media (prefers-reduced-motion: reduce) { .bcs-site-www .bcs-site-universes--home .bcs-site-service-cards a.bcs-site-service-card { transition: none; } }

/* Hero www : fondu vers le gris clair de la charte (bande distincte des sections blanches). Accueil : conteneurs a 1440 px. */
.bcs-site-www .bcs-site-hero--www .bcs-site-hero-media::before { background: linear-gradient(90deg, var(--bcs-brand-bg-subtle) 0%, rgba(var(--bcs-brand-gray-light-rgb), .94) 38%, rgba(var(--bcs-brand-gray-light-rgb), 0) 62%); }
.bcs-site-www .bcs-site-hero--www { border-bottom: 1px solid var(--bcs-brand-border-color); }
@container (max-width: 1199px) { .bcs-site-www .bcs-site-hero--www .bcs-site-hero-media::before { background: rgba(var(--bcs-brand-gray-light-rgb), .92); } }
@container (max-width: 767px) { .bcs-site-www .bcs-site-hero--www .bcs-site-hero-media::before { background: var(--bcs-brand-bg-subtle); } }
.bcs-home > section > .container { max-width: 1440px; }
.bcs-site-www .bcs-site-hero--www .bcs-site-hero-text { max-width: calc(700px + max(var(--bcs-space-6), calc((100cqi - 1440px) / 2 + var(--bcs-space-4)))); }
@container (max-width: 767px) { .bcs-site-www .bcs-site-hero--www .bcs-site-hero-text { max-width: none; } }

/* Accueil www : titres de section au style de la Reference UI, etapes illustrees, references courtes, logos de confiance. */
#page-wrapper .bcs-home h2 { font-family: var(--bcs-brand-font-heading); font-weight: var(--bcs-brand-font-weight-heading); font-size: var(--bcs-brand-fs-h2); line-height: 1.25; color: var(--bcs-brand-text-primary); margin: 0 0 var(--bcs-space-4); }
#page-wrapper .bcs-home .bcs-references p { margin-bottom: 0; }
.bcs-home .bcs-site-step { list-style: none; }
.bcs-home .bcs-site-step > * { position: relative; }
.bcs-home .home-steps .bcs-site-step { display: flex; flex-direction: column; gap: var(--bcs-space-2); }
.bcs-home .bcs-site-step-icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: var(--bcs-radius-full); background: var(--bcs-brand-bg); color: var(--bcs-brand-green-action); font-size: 1.75rem; box-shadow: var(--bcs-shadow-card); }
.bcs-reference-more { display: inline-flex; align-items: center; gap: var(--bcs-space-1); min-height: 44px; margin-top: var(--bcs-space-2); color: var(--bcs-brand-green-action); font-weight: var(--bcs-brand-font-weight-action); text-decoration: underline; text-underline-offset: 4px; }
.bcs-site-trust { padding: var(--bcs-space-7) 0; background: var(--bcs-brand-bg); }
.bcs-site-trust-viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.bcs-site-trust-track { display: flex; width: max-content; animation: bcs-trust-scroll 40s linear infinite; }
.bcs-site-trust-viewport:hover .bcs-site-trust-track, .bcs-site-trust-viewport:focus-within .bcs-site-trust-track { animation-play-state: paused; }
.bcs-site-trust-logos { display: flex; gap: var(--bcs-space-4); list-style: none; margin: 0; padding: 0 var(--bcs-space-4) 0 0; }
.bcs-site-trust-logos li { display: grid; place-items: center; width: 190px; height: 116px; padding: var(--bcs-space-3); background: var(--bcs-brand-bg); border: 1px solid var(--bcs-brand-border-color); border-radius: var(--bcs-radius-md); box-shadow: var(--bcs-shadow-card); }
.bcs-site-trust-logos img { max-width: 100%; max-height: 80px; object-fit: contain; }
@keyframes bcs-trust-scroll { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .bcs-site-trust-track { animation: none; width: auto; flex-wrap: wrap; } .bcs-site-trust-logos[aria-hidden="true"] { display: none; } .bcs-site-trust-logos { flex-wrap: wrap; } .bcs-site-trust-viewport { -webkit-mask-image: none; mask-image: none; } }
@media (max-width: 575.98px) { .bcs-site-trust-logos li { width: 150px; height: 96px; } .bcs-site-trust-logos img { max-height: 64px; } }
.bcs-home > .bcs-site-trust > .container { max-width: 1440px; }

/* Etapes de l'accompagnement : cartes au style des cartes de services de la Reference UI. */
.bcs-home .home-steps .bcs-site-step { display: flex; }
.bcs-home .bcs-site-step-card { display: grid; align-content: start; gap: var(--bcs-space-3); width: 100%; height: 100%; padding: var(--bcs-space-5); background: var(--bcs-brand-bg); border: 1px solid var(--bcs-brand-border-color); border-radius: var(--bcs-radius-md); box-shadow: var(--bcs-shadow-card); }
.bcs-home .bcs-site-step-card .bcs-site-step-icon { background: var(--bcs-brand-bg-subtle); box-shadow: none; }
#page-wrapper .bcs-home .bcs-site-step-card h3 { margin: 0; font-family: var(--bcs-brand-font-heading); font-weight: var(--bcs-brand-font-weight-heading); font-size: var(--bcs-font-size-2xl); color: var(--bcs-brand-text-primary); }
#page-wrapper .bcs-home .bcs-site-step-card h3::before { color: var(--bcs-brand-green-action); }
#page-wrapper .bcs-home .bcs-site-step-card p { margin: 0; font-family: var(--bcs-brand-font-body); font-size: var(--bcs-font-size-lg); color: var(--bcs-brand-text-primary); }

/* References de l'accueil (version courte) : 5 cartes compactes sur une ligne, 3 sur tablette, 2 sur telephone. */
.bcs-references .bcs-references-compact { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--bcs-space-4); margin: 0; }
.bcs-references .bcs-references-compact > [class*="col-"] { width: auto; max-width: none; padding: 0; margin: 0; }
.bcs-references .bcs-references-compact .bcs-reference { display: flex; flex-direction: column; padding: var(--bcs-space-3); border-radius: var(--bcs-radius-md); box-shadow: var(--bcs-shadow-card); }
.bcs-references .bcs-references-compact .bcs-reference-figure { margin: 0 0 var(--bcs-space-2); }
.bcs-references .bcs-references-compact .bcs-reference-image { aspect-ratio: 4 / 3; }
.bcs-references .bcs-references-compact figcaption { font-size: var(--bcs-font-size-xs); margin-top: var(--bcs-space-1); }
.bcs-references .bcs-references-compact .bcs-reference-context { margin: 0 0 var(--bcs-space-1); font-size: var(--bcs-font-size-sm); }
#page-wrapper .bcs-references .bcs-references-compact h3 { margin: 0 0 var(--bcs-space-1); font-family: var(--bcs-brand-font-heading); font-weight: var(--bcs-brand-font-weight-heading); font-size: var(--bcs-font-size-xl); line-height: 1.3; color: var(--bcs-brand-text-primary); }
.bcs-references .bcs-references-compact .bcs-reference > p.fw-bold { margin: 0 0 var(--bcs-space-2); font-size: var(--bcs-font-size-md); }
.bcs-references .bcs-references-compact .bcs-reference-label { align-self: flex-start; font-size: var(--bcs-font-size-xs); }
.bcs-references .bcs-references-compact .bcs-reference-more { margin-top: auto; padding-top: var(--bcs-space-2); font-size: var(--bcs-font-size-md); }
@media (max-width: 1199.98px) { .bcs-references .bcs-references-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .bcs-references .bcs-references-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bcs-space-3); } }
@media (max-width: 399.98px) { .bcs-references .bcs-references-compact { grid-template-columns: 1fr; } }

/* Navbar Shop plus compacte (demande utilisateur du 2026-09-26) : marges verticales et champ de recherche reduits. */
.bcs-shop-nav-bar { padding-block: var(--bcs-space-2); }
.bcs-shop-nav-search { min-height: 46px; }
.bcs-shop-nav-search input, .bcs-shop-nav-select select { font-size: var(--bcs-font-size-md); }
.bcs-shop-nav-search .bcs-btn { font-size: var(--bcs-font-size-xl); padding-inline: var(--bcs-space-5); }
@container (max-width: 575px) {
 .bcs-shop-nav-bar { padding-block: var(--bcs-space-2) var(--bcs-space-3); row-gap: var(--bcs-space-2); }
 .bcs-shop-nav-search { min-height: 44px; }
 .bcs-shop-nav-search .bcs-btn { width: 44px; padding: 0; }
}

/* Navbar Shop, 2e passe : logo et ligne des categories reduits ; bouton de recherche en vert de marque, texte vert tres fonce (contraste ~6.5:1). */
.bcs-shop-nav-brand img { width: 140px; }
.bcs-shop-nav-brand strong { font-size: 1.35rem; }
.bcs-shop-nav-categories { min-height: 52px; padding-block: var(--bcs-space-1); }
.bcs-shop-nav-list { height: 40px; }
.bcs-shop-nav-list > :is(a, button) { height: 40px; }
.bcs-shop-nav-list > :is(a, button), .bcs-shop-nav-categories summary { min-height: 40px; font-size: var(--bcs-font-size-md); gap: var(--bcs-space-2); }
.bcs-shop-nav-cat-icon { font-size: 1.2rem; }
.bcs-shop-nav-search .bcs-btn, .bcs-brand .bcs-shop-nav-search .bcs-btn { background: var(--bcs-brand-green); border-color: var(--bcs-brand-green); color: #06140e; }
.bcs-shop-nav-search .bcs-btn:hover, .bcs-brand .bcs-shop-nav-search .bcs-btn:hover { background: var(--bcs-brand-green-light); border-color: var(--bcs-brand-green-light); color: #06140e; }
@container (max-width: 1199px) { .bcs-shop-nav-brand img { width: 125px; } }
@container (max-width: 991px) { .bcs-shop-nav-brand img { width: 110px; } .bcs-shop-nav-brand strong { font-size: 1.2rem; } }
@container (max-width: 575px) {
 .bcs-shop-nav-brand img { width: 100px; }
 .bcs-shop-nav-brand strong { font-size: 1.15rem; }
 .bcs-shop-nav-categories { padding-block: var(--bcs-space-2); }
 .bcs-shop-nav-list > :is(a, button), .bcs-shop-nav-more > summary { height: auto; font-size: var(--bcs-font-size-xs); }
 .bcs-shop-nav-list .bcs-shop-nav-cat-icon, .bcs-shop-nav-more .bcs-shop-nav-cat-icon { width: 42px; height: 42px; font-size: 1.2rem; }
}

/* Navbar Shop, 3e passe : barre, recherche et categories encore reduites ; texte du bouton en blanc (choix utilisateur, contraste 2.9:1). */
.bcs-shop-nav-bar { padding-block: var(--bcs-space-1); }
.bcs-shop-nav-search { min-height: 40px; border-width: 2px; }
.bcs-shop-nav-search-icon { font-size: 1.15rem; padding-left: var(--bcs-space-3); }
.bcs-shop-nav-search .bcs-btn, .bcs-brand .bcs-shop-nav-search .bcs-btn { color: var(--bcs-brand-white); font-size: var(--bcs-font-size-lg); padding-inline: var(--bcs-space-4); }
.bcs-shop-nav-search .bcs-btn:hover, .bcs-brand .bcs-shop-nav-search .bcs-btn:hover { color: var(--bcs-brand-white); background: var(--bcs-brand-green-action); border-color: var(--bcs-brand-green-action); }
.bcs-shop-nav-select select { padding-inline-start: var(--bcs-space-3); }
.bcs-shop-nav-categories { min-height: 44px; padding-block: 0; }
.bcs-shop-nav-list, .bcs-shop-nav-list > :is(a, button) { height: 36px; }
.bcs-shop-nav-list > :is(a, button), .bcs-shop-nav-categories summary { min-height: 36px; padding-block: var(--bcs-space-1); }
@container (max-width: 575px) {
 .bcs-shop-nav-bar { padding-block: var(--bcs-space-1) var(--bcs-space-2); }
 .bcs-shop-nav-search { min-height: 40px; }
 .bcs-shop-nav-search .bcs-btn { width: 40px; }
 .bcs-shop-nav-categories { padding-block: var(--bcs-space-1); }
 .bcs-shop-nav-list, .bcs-shop-nav-list > :is(a, button) { height: auto; }
}
.bcs-shop-nav-search .bcs-btn, .bcs-brand .bcs-shop-nav-search .bcs-btn { min-height: 36px; }
#page-wrapper .bcs-shop-nav-search .bcs-btn { min-height: 36px; }

/* Etat vide partage — Reference UI #ref-public-empty-state (cloture UNIV-24). */
.bcs-brand .bcs-empty-state h6 { font-family:var(--bcs-brand-font-heading); font-weight:var(--bcs-brand-font-weight-heading); color:var(--bcs-brand-text-primary); }