@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Syne:wght@400;500;600;700;800&family=Fira+Code:wght@400;500;600&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Noto+Sans+Arabic:wght@300;400;500;600;700&display=swap');

/* ══════════════════════════════════════════════════════════════
   FOOTER BOTTOM HARMONIZATION — desktop/mobile/rtl
   ══════════════════════════════════════════════════════════════ */
/* Ne pas appliquer au bloc empilé (copyright + liens) : sinon en RTL « initial » = start → tout tasse à droite */
.footer-bottom-wrap:not(.footer-bottom-stack) {
  text-align: initial !important;
}

.footer-bottom-wrap .footer-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.25rem;
  flex-wrap: wrap;
  margin: .2rem 0 0;
}

.footer-bottom-wrap .footer-bottom-left {
  flex: 1 1 440px;
  min-width: 260px;
  text-align: left;
}

.footer-bottom-wrap .footer-bottom-right {
  flex: 1 1 320px;
  min-width: 260px;
  text-align: right;
}

.footer-bottom-wrap .footer-bottom-right p,
.footer-bottom-wrap .footer-bottom-right {
  margin: 0;
}

.footer-bottom-wrap .footer-bottom-right a {
  white-space: nowrap;
}

.footer-bottom-wrap .footer-bottom-row.is-rtl {
  flex-direction: row-reverse;
}

.footer-bottom-wrap .footer-bottom-row.is-rtl .footer-bottom-left {
  text-align: right;
}

.footer-bottom-wrap .footer-bottom-row.is-rtl .footer-bottom-right {
  text-align: left;
}

@media (max-width: 768px) {
  .footer-bottom-wrap .footer-bottom-row {
    flex-direction: column !important;
    align-items: flex-start;
    gap: .5rem;
  }

  .footer-bottom-wrap .footer-bottom-left,
  .footer-bottom-wrap .footer-bottom-right {
    min-width: 0;
    width: 100%;
    text-align: left !important;
  }

  .footer-bottom-wrap .footer-bottom-right p {
    justify-content: flex-start !important;
  }
}
/* ═══════════════════════════════════════════════════════════════
   BROC NUTRITION — broc-unified.css v6.1
   = broc.css (structure complète) + enhance.css (design system logo)
   Google Fonts : @import en tête de fichier (obligatoire navigateurs)
   Rouge logo exact : #E0001B | Taupe logo : #A09282
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   BROC NUTRITION — broc.css v5.0
   Stack  : Bootstrap 5.3 + AOS (no jQuery)
   Design : Editorial Premium · Rouge Broc / Blanc / Encre
   Fonts  : DM Serif Display · Syne · Fira Code
   Screens: 320px → 1920px+ (mobile-first, projector-ready)
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. CSS CUSTOM PROPERTIES ──────────────────────────────── */
:root {
  --red:      #c0392b;
  --red-d:    #8e1b10;
  --red-l:    #e74c3c;
  --red-pale: #fdf3f2;
  --red-a:    rgba(192,57,43,.12);
  --white:    #ffffff;
  --off:      #f7f5f2;
  --stone:    #ede9e4;
  --mid:      #d5cfc9;
  --ink:      #1c1a18;
  --ink2:     #3a3632;
  --ink3:     #3d3935;
  --ink4:     #5c5855;
  --nav-h:     68px;
  --nav-h-mob: 60px;
  --radius:    10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --ff-head: 'DM Serif Display', Georgia, serif;
  --ff-body: 'Syne', system-ui, sans-serif;
  --ff-mono: 'Fira Code', 'Courier New', monospace;
  --shadow-sm:  0 2px 12px rgba(0,0,0,.06);
  --shadow-md:  0 8px 32px rgba(0,0,0,.10);
  --shadow-red: 0 8px 30px rgba(192,57,43,.18);
  --tr: .28s cubic-bezier(.4,0,.2,1);
}

/* ── 2. RESET & BASE ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; }

/* CORRECTION : Ajout de width: 100% et position: relative */
body { font-family: var(--ff-body); color: var(--ink); background: var(--white); overflow-x: hidden; width: 100%; position: relative; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--off); }
::-webkit-scrollbar-thumb { background: var(--red); border-radius: 2px; }
a { color: inherit; text-decoration: none; transition: color var(--tr); }
a:hover { color: var(--red); }
::selection         { background: var(--red); color: #fff; text-shadow: none; }
::-moz-selection    { background: var(--red); color: #fff; text-shadow: none; }
img, video { max-width: 100%; height: auto; display: block; }
button, input, textarea, select { font-family: inherit; font-size: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 3px; }
:focus:not(:focus-visible) { outline: none; }

/* ── 2.b Touch responsiveness baseline ───────────────────────── */
html, body { overscroll-behavior-x: none; }
:where(a, button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"], label[for]) {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: none), (pointer: coarse) {
  :where(button, [role="button"], .btn, .btn-broc-red, .btn-broc-outline, .btn-broc-white, .btn-lang, .fab-arrow, .ev3d-btn, .events-filter-btn) {
    min-height: 44px;
    min-width: 44px;
  }
  :where(input, select, textarea) {
    min-height: 44px;
  }
}

/* ── 3. TYPOGRAPHY ──────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { font-family: var(--ff-head); line-height: 1.1; }
.section-tag {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--ff-mono); font-size: clamp(.7rem, 1.4vw, .75rem); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--red); margin-bottom: .9rem;
}
.section-tag::before { content: ''; display: block; width: 18px; height: 2px; background: var(--red); border-radius: 2px; flex-shrink: 0; }
.section-title { font-family: var(--ff-head); font-size: clamp(1.75rem, 3.2vw, 2.8rem); line-height: 1.1; color: var(--ink); }
.section-title em { color: var(--red); font-style: italic; }
.body-lg { font-size: clamp(.97rem, 1.5vw, 1.08rem); line-height: 1.82; color: var(--ink2); }
.body    { font-size: .92rem; line-height: 1.78; color: var(--ink3); }

/* ── 4. READ PROGRESS BAR ───────────────────────────────────── */
#read-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--red), var(--red-l));
  z-index: 9999; pointer-events: none; transition: width .1s linear;
}

/* ── 5. PAGE LOADER ─────────────────────────────────────────── */
/* Ne pas utiliser inset:0 : avec z-index 9998 le voile passait AU-DESSUS de #mainNav (1030)
   et bloquait la loupe / le menu. On masque tout sauf la bandeau de navigation. */
#page-loader {
  position: fixed;
  top: var(--nav-h, 68px);
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
#page-loader.loaded { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .5s ease, visibility .5s ease; }
#page-loader.loaded-done { display: none; }
#page-loader img { transform: none; transform-origin: center; }
.loader-brand { font-family: var(--ff-head); font-size: clamp(2rem, 6vw, 4rem); color: var(--ink); letter-spacing: .04em; }
.loader-brand em { color: var(--red); font-style: italic; }
.loader-bar { width: min(220px, 70vw); height: 2px; background: rgba(0,0,0,.12); border-radius: 2px; overflow: hidden; }
.loader-fill { height: 100%; background: var(--red); width: 0; animation: loaderFill 1.4s ease forwards; }
@keyframes loaderFill { to { width: 100%; } }
.loader-sub { font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(0,0,0,.35); }

/* ── 6. NAVBAR ──────────────────────────────────────────────── */
#mainNav {
  position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 10000;
  background: rgba(255,255,255,.97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--stone); transition: box-shadow var(--tr);
}
#mainNav.scrolled { box-shadow: var(--shadow-md); }
.navbar-brand-logo {
  width: auto; max-width: 200px; height: 64px;
  background: transparent; border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: visible;
  transition: opacity var(--tr), transform var(--tr);
}
/* navbar-brand hover overridden by Red Blade block below */
.navbar-brand-logo + .navbar-brand-text { display: none !important; }
.navbar-brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .1rem;
  line-height: 1;
  /* Pas de font-size/color propres — les enfants .brand-name et .brand-tag s'en chargent */
}
.navbar-brand-text small {
  display: block; font-family: var(--ff-mono); font-size: .58rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink4); font-style: normal; margin-top: .12rem;
}

/* Mobile navbar */


/* ── 7. BUTTONS ─────────────────────────────────────────────── */
.btn-broc-red, .btn-broc-outline, .btn-broc-white {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--ff-body); font-size: .8rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  border-radius: var(--radius-sm); padding: .72rem 1.6rem; cursor: pointer;
  transition: all var(--tr); text-decoration: none; white-space: nowrap; border: 2px solid transparent; line-height: 1.3;
}
.btn-broc-red     { color: var(--white); background: var(--red); border-color: var(--red); }
.btn-broc-red:hover { background: var(--red-d); border-color: var(--red-d); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-red); }
.btn-broc-outline { color: var(--red); background: transparent; border-color: var(--red); }
.btn-broc-outline:hover { background: var(--red); color: var(--white); transform: translateY(-2px); }
.btn-broc-white   { color: var(--red); background: var(--white); border-color: var(--white); }
.btn-broc-white:hover { background: var(--off); border-color: var(--off); transform: translateY(-2px); }
@media (max-width: 480px) {
  .btn-broc-red, .btn-broc-outline, .btn-broc-white { padding: .65rem 1.2rem; font-size: .75rem; }
}

/* ── 8. SECTIONS ────────────────────────────────────────────── */
.section-padding    { padding: clamp(1.6rem, 3vw, 2.8rem) 0; }
.section-padding-sm { padding: clamp(.9rem, 1.8vw, 1.6rem) 0; }
.section-off   { background: var(--off); }
.section-stone { background: var(--stone); }
.section-dark  { background: var(--ink); }

/* ── 9. PAGE HEADER ─────────────────────────────────────────── */
.page-header {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3.5rem);
  margin-top: var(--nav-h); position: relative; overflow: hidden;
}
@media (max-width: 1399px) { .page-header { margin-top: var(--nav-h-mob); } }
.page-header .section-tag { color: rgba(255,255,255,.38); }
.page-header .section-tag::before { background: rgba(255,255,255,.22); }
.page-header h1 { font-family: var(--ff-head); font-size: clamp(2rem, 5vw, 3.8rem); color: var(--white); line-height: 1.08; }
.page-header h1 em { color: var(--red-l); font-style: italic; }
.page-header p.lead { color: rgba(255,255,255,.78); font-size: clamp(.92rem, 1.5vw, 1.02rem); line-height: 1.78; max-width: 600px; margin-top: 1rem; }
.page-breadcrumb {
  font-family: var(--ff-mono); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.42); margin-bottom: 1.25rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
}
.page-breadcrumb a { color: rgba(255,255,255,.6); transition: color var(--tr); }
.page-breadcrumb a:hover { color: rgba(255,255,255,.8); }
.page-breadcrumb .sep { opacity: .25; }

/* ── 10. MARQUEE ─────────────────────────────────────────────── */
.marquee-wrap { background: var(--red); padding: .7rem 0; overflow: hidden; }
.marquee-track { display: flex; width: max-content; animation: marqueeScroll 38s linear infinite; will-change: transform; }
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }
.marquee-item { font-family: var(--ff-mono); font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.8); padding: 0 2.2rem; white-space: nowrap; }
.marquee-item::after { content: '·'; margin-left: 2.2rem; color: rgba(255,255,255,.3); }
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── 11. STAT BAR ─────────────────────────────────────────── */
.stat-bar { background: var(--ink); padding: clamp(.9rem, 1.8vw, 1.5rem) 0; }
.stat-item { text-align: center; padding: .75rem .5rem; }
.stat-num { font-family: var(--ff-head); font-size: clamp(1.7rem, 4vw, 2.6rem); color: var(--white); line-height: 1; }
.stat-lbl { font-family: var(--ff-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-top: .35rem; }

/* ── 12. HERO ─────────────────────────────────────────────── */
.hero-section {
  min-height: 46svh; background: var(--off); display: flex; align-items: center;
  padding-top: var(--nav-h); padding-bottom: 0; margin-bottom: -1.2rem; position: relative; overflow: hidden;
}
.hero-bg-shape {
  position: absolute; top: 0; right: 0; width: 52%; height: 100%;
  background: linear-gradient(145deg, var(--stone) 0%, var(--mid) 100%);
  clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
}
.hero-bg-grid {
  position: absolute; top: 0; right: 0; width: 52%; height: 100%;
  background: repeating-linear-gradient(45deg, transparent, transparent 30px, rgba(192,57,43,.035) 30px, rgba(192,57,43,.035) 31px);
  clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
}
.hero-badge {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--ff-mono); font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink3); background: var(--white); border: 1px solid var(--stone);
  border-radius: 50px; padding: .48rem 1rem; margin-bottom: 1.75rem; box-shadow: var(--shadow-sm);
}
.hero-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: heroDot 2s ease-in-out infinite; flex-shrink: 0; }
@keyframes heroDot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }
.hero-title { font-family: var(--ff-head); font-size: clamp(3.2rem, 8vw, 7rem); line-height: .92; color: var(--ink); letter-spacing: -.02em; margin-bottom: 1.4rem; }
.hero-title .outline { -webkit-text-stroke: 2px var(--ink); color: transparent; }
.hero-title .accent { color: var(--red); }
.hero-sub { font-size: clamp(.92rem, 1.5vw, 1.05rem); line-height: 1.76; color: var(--ink2); max-width: 510px; margin-bottom: 2.25rem; }
.hero-actions { display: flex; gap: .85rem; flex-wrap: wrap; margin-bottom: 3.2rem; }
.hero-kpi { display: flex; gap: 2.2rem; flex-wrap: wrap; }
.hero-kpi-num { font-family: var(--ff-head); font-size: 2rem; color: var(--ink); line-height: 1; }
.hero-kpi-lbl { font-family: var(--ff-mono); font-size: clamp(.7rem, 1.5vw, .75rem); letter-spacing: .08em; text-transform: uppercase; color: var(--ink4); margin-top: .2rem; }
/* Molecule */
.molecule-wrap { position: relative; width: min(42vw, 480px); height: min(42vw, 480px); }
.mol-sphere {
  width: 100%; height: 100%; border-radius: 50%;
  background: conic-gradient(from 180deg, #180806 0deg, #5c1c1c 90deg, var(--red) 200deg, #a52a1c 280deg, #180806 360deg);
  box-shadow: 0 0 80px rgba(192,57,43,.14), inset -50px -50px 100px rgba(0,0,0,.55), inset 22px 22px 50px rgba(192,57,43,.1);
  animation: molFloat 10s ease-in-out infinite; position: relative; overflow: hidden;
}
.mol-sphere::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: repeating-linear-gradient(0deg, transparent, transparent 22px, rgba(0,0,0,.065) 22px, rgba(0,0,0,.065) 23px); }
.mol-sphere::after { content: ''; position: absolute; top: 13%; left: 17%; width: 29%; height: 19%; background: rgba(255,255,255,.07); border-radius: 50%; filter: blur(8px); transform: rotate(-22deg); }
@keyframes molFloat { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-22px) rotate(3deg); } }
.mol-ring { position: absolute; border: 1px solid rgba(192,57,43,.13); border-radius: 50%; animation: ringPulse 4.5s ease-in-out infinite; }
.mol-ring:nth-child(1) { inset: -14%; }
.mol-ring:nth-child(2) { inset: -28%; animation-delay: .9s; opacity: .55; }
.mol-ring:nth-child(3) { inset: -42%; animation-delay: 1.8s; opacity: .28; }
@keyframes ringPulse { 0%,100% { opacity: .16; transform: scale(1); } 50% { opacity: .38; transform: scale(1.02); } }
.mol-badge { position: absolute; background: var(--white); border: 1px solid var(--stone); border-radius: 7px; padding: .38rem .75rem; font-family: var(--ff-mono); font-size: .62rem; font-weight: 600; letter-spacing: .07em; color: var(--ink2); white-space: nowrap; box-shadow: var(--shadow-sm); animation: badgeFloat 6s ease-in-out infinite; }
.mol-badge:nth-child(5) { top: 6%; right: -8%; animation-delay: 0s; }
.mol-badge:nth-child(6) { bottom: 14%; right: -10%; animation-delay: 1s; }
.mol-badge:nth-child(7) { top: 42%; left: -12%; animation-delay: 2s; }
@keyframes badgeFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.mol-formula { position: absolute; bottom: -2.5rem; left: 50%; transform: translateX(-50%); font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .12em; color: var(--ink3); white-space: nowrap; }
@media (max-width: 1399px) { .hero-section { min-height: auto; padding-top: var(--nav-h-mob); padding-bottom: 0; } .hero-bg-shape, .hero-bg-grid { display: none; } .molecule-wrap { display: none !important; } }
@media (max-width: 767px) { .hero-title { font-size: clamp(2.8rem, 11vw, 4.5rem); } .hero-kpi { gap: 1.4rem; } .hero-actions { flex-direction: column; align-items: flex-start; } .hero-actions .btn-broc-red, .hero-actions .btn-broc-outline { width: 100%; } }

/* ── 13. CARDS ──────────────────────────────────────────────── */
.card-broc { background: var(--white); border: 1px solid var(--stone); border-radius: var(--radius); padding: 2rem; transition: all var(--tr); position: relative; overflow: hidden; height: 100%; }
.card-broc::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: transparent; transition: background var(--tr); }
.card-broc:hover { border-color: var(--red); box-shadow: 0 12px 40px rgba(192,57,43,.09); transform: translateY(-4px); }
.card-broc:hover::before { background: var(--red); }
.card-icon { font-size: 2.1rem; margin-bottom: 1.2rem; display: block; }
.card-title { font-family: var(--ff-head); font-size: clamp(1.1rem, 2vw, 1.35rem); color: var(--ink); margin-bottom: .65rem; }
.card-text { font-size: .9rem; line-height: 1.72; color: var(--ink3); }
.exp-num { font-family: var(--ff-head); font-size: clamp(2.5rem, 5vw, 4rem); color: rgba(192,57,43,.35); line-height: 1; margin-bottom: .9rem; transition: color var(--tr); }
.card-broc:hover .exp-num { color: var(--red); }

/* ── 14. PRODUCT CARDS ──────────────────────────────────────── */
.prod-card { background: var(--off); border: 1.5px solid var(--stone); border-radius: var(--radius); padding: 1.75rem; transition: all var(--tr); cursor: pointer; height: 100%; display: flex; flex-direction: column; }
.prod-card:hover { background: var(--white); border-color: var(--red); box-shadow: var(--shadow-red); transform: translateY(-4px); }
.prod-stamp { display: inline-block; font-family: var(--ff-mono); font-size: .62rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--red); background: var(--red-pale); border-radius: 4px; padding: .22rem .6rem; margin-bottom: .9rem; width: fit-content; }
.prod-name { font-family: var(--ff-head); font-size: clamp(1.3rem, 2.5vw, 1.6rem); color: var(--ink); margin-bottom: .45rem; transition: color var(--tr); }
.prod-card:hover .prod-name { color: var(--red); }
.prod-desc { font-size: .9rem; line-height: 1.7; color: var(--ink3); flex: 1; }
.prod-meta { display: flex; align-items: center; gap: .5rem; font-family: var(--ff-mono); font-size: .65rem; color: var(--ink4); margin-top: 1.2rem; padding-top: .9rem; border-top: 1px solid var(--stone); }
.prod-meta::before { content: ''; width: 5px; height: 5px; background: var(--ink4); border-radius: 50%; flex-shrink: 0; }

/* ── 15. TESTIMONIAL CARDS ──────────────────────────────────── */
.testimonial-card { background: var(--white); border: 1px solid var(--stone); border-radius: var(--radius); padding: 2rem; position: relative; height: 100%; transition: all var(--tr); }
.testimonial-card::before { content: '"'; font-family: var(--ff-head); font-size: 5.5rem; color: var(--stone); position: absolute; top: .25rem; left: 1.4rem; line-height: 1; pointer-events: none; }
.testimonial-card:hover { border-color: var(--red); box-shadow: 0 8px 30px rgba(192,57,43,.08); }
.test-text { font-size: .89rem; line-height: 1.72; color: var(--ink2); padding-top: 2.4rem; font-style: italic; margin-bottom: 1.4rem; }
.test-author { display: flex; align-items: center; gap: .85rem; }
.test-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--red); display: flex; align-items: center; justify-content: center; font-family: var(--ff-head); font-size: .9rem; color: var(--white); flex-shrink: 0; }
.test-name { font-weight: 700; font-size: .86rem; color: var(--ink); }
.test-role { font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .05em; color: var(--ink4); margin-top: .14rem; }

/* ── 16. NOTICE BOX ─────────────────────────────────────────── */
.notice-box { display: flex; gap: 1rem; background: var(--off); border: 1px solid var(--stone); border-left: 4px solid var(--red); border-radius: 7px; padding: 1rem 1.2rem; }
.notice-icon { font-size: 1.15rem; flex-shrink: 0; margin-top: .1rem; }
.notice-text { font-size: .87rem; line-height: 1.62; color: var(--ink2); }

/* ── 17. TIMELINE ───────────────────────────────────────────── */
.timeline-wrap { position: relative; padding-left: 2rem; }
.timeline-wrap::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--stone); }
.tl-item { position: relative; margin-bottom: 2.25rem; padding-left: 1.25rem; }
.tl-dot { position: absolute; left: -2rem; top: .28rem; width: 13px; height: 13px; border-radius: 50%; background: var(--white); border: 2px solid var(--mid); transform: translateX(-5px); transition: all var(--tr); }
.tl-item:hover .tl-dot { background: var(--red); border-color: var(--red); }
.tl-year { font-family: var(--ff-mono); font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--red); margin-bottom: .3rem; }
.tl-title { font-family: var(--ff-head); font-size: 1.1rem; color: var(--ink); margin-bottom: .38rem; }
.tl-text { font-size: .9rem; line-height: 1.72; color: var(--ink3); }

/* ── 18. DATA TABLE ─────────────────────────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); }
.table-broc { width: 100%; border-collapse: collapse; min-width: 500px; }
.table-broc thead tr { background: var(--ink); }
.table-broc thead th { font-family: var(--ff-mono); font-size: .68rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.75); padding: .9rem 1rem; text-align: left; white-space: nowrap; }
.table-broc tbody td { padding: .8rem 1rem; border-bottom: 1px solid var(--stone); font-size: .86rem; color: var(--ink2); vertical-align: middle; }
.table-broc tbody tr:hover td, .table-broc tbody tr.tr-hover td { background: var(--off); }
.formula-cell { font-family: var(--ff-mono); font-size: .76rem; color: var(--red); }
.badge-double { background: var(--red); color: var(--white); font-family: var(--ff-mono); font-size: .6rem; font-weight: 600; letter-spacing: .04em; padding: .2rem .5rem; border-radius: 4px; white-space: nowrap; }
.badge-single { background: var(--stone); color: var(--ink3); font-family: var(--ff-mono); font-size: .6rem; font-weight: 600; letter-spacing: .04em; padding: .2rem .5rem; border-radius: 4px; white-space: nowrap; }
.icon-yes { color: #16a34a; font-size: 1.1rem; }
.icon-no  { color: var(--mid); font-size: 1.1rem; }

/* ── 19. BENEFIT LIST ───────────────────────────────────────── */
.benefit-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .7rem; }
.benefit-list li { display: flex; align-items: flex-start; gap: .7rem; font-size: .89rem; line-height: 1.55; color: var(--ink2); }
.benefit-list li::before { content: ''; width: 7px; height: 7px; background: var(--red); border-radius: 50%; margin-top: .35rem; flex-shrink: 0; }

/* ── 20. PROCESS STEPS ──────────────────────────────────────── */
.process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; position: relative; }
.process-grid::before { content: ''; position: absolute; top: 26px; left: 8%; right: 8%; height: 1px; background: var(--stone); z-index: 0; }
.step-item { position: relative; z-index: 1; text-align: center; padding: 0 .75rem; }
.step-num { width: 52px; height: 64px; border-radius: 50%; background: var(--white); border: 2px solid var(--stone); display: flex; align-items: center; justify-content: center; font-family: var(--ff-mono); font-size: .72rem; font-weight: 600; color: var(--ink3); margin: 0 auto 1.25rem; transition: all var(--tr); }
.step-item:hover .step-num { background: var(--red); border-color: var(--red); color: var(--white); }
.step-title { font-family: var(--ff-head); font-size: 1rem; color: var(--ink); margin-bottom: .4rem; }
.step-text { font-size: .85rem; line-height: 1.62; color: var(--ink3); }
@media (max-width: 767px) { .process-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; } .process-grid::before { display: none; } }
@media (max-width: 480px) { .process-grid { grid-template-columns: 1fr; } }

/* ── 21. WORLD MAP CHIPS ────────────────────────────────────── */
.continent-label { font-family: var(--ff-mono); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.36); margin-bottom: .9rem; display: flex; align-items: center; gap: .7rem; }
.continent-label::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.07); }
.chip-wrap { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 500; color: rgba(255,255,255,.75); background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.1); border-radius: 50px; padding: .32rem .85rem; transition: all var(--tr); }
.chip.chip-reg { border-color: rgba(192,57,43,.4); background: rgba(192,57,43,.1); }
.chip.chip-reg:hover { background: rgba(192,57,43,.2); border-color: var(--red); }
.chip.chip-pend { border-color: rgba(255,165,0,.28); background: rgba(255,165,0,.055); }
.chip-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.chip-dot-red { background: var(--red); }
.chip-dot-orange { background: #f59e0b; }

/* ── 22. TEAM CARDS ─────────────────────────────────────────── */
.dir-card { background: var(--white); border: 1px solid var(--stone); border-radius: var(--radius); padding: 1.75rem 2rem; display: flex; gap: 1.4rem; align-items: flex-start; transition: all var(--tr); }
.dir-card:hover { border-color: var(--red); box-shadow: 0 8px 30px rgba(192,57,43,.1); }
.dir-avatar { width: 62px; height: 62px; border-radius: 50%; background: var(--red); display: flex; align-items: center; justify-content: center; font-family: var(--ff-head); font-size: 1.4rem; color: var(--white); flex-shrink: 0; }
.dir-name { font-family: var(--ff-head); font-size: 1.3rem; color: var(--ink); margin-bottom: .18rem; }
.dir-role { font-family: var(--ff-mono); font-size: .67rem; letter-spacing: .09em; text-transform: uppercase; color: var(--red); margin-bottom: .8rem; }
.dir-tasks { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.dir-tasks li { font-size: .86rem; color: var(--ink3); display: flex; align-items: center; gap: .45rem; }
.dir-tasks li::before { content: '→'; color: var(--red); font-size: .72rem; }
@media (max-width: 576px) { .dir-card { flex-direction: column; gap: 1rem; } }
.member-card { background: var(--off); border: 1px solid var(--stone); border-radius: 8px; padding: 1.4rem; text-align: center; transition: all var(--tr); height: 100%; }
.member-card:hover { border-color: var(--red); background: var(--white); }
.member-avatar { width: 48px; height: 64px; border-radius: 50%; background: var(--stone); display: flex; align-items: center; justify-content: center; font-family: var(--ff-head); font-size: 1rem; color: var(--ink2); margin: 0 auto .85rem; }
.member-name { font-weight: 700; font-size: .88rem; color: var(--ink); margin-bottom: .22rem; }
.member-dept { font-family: var(--ff-mono); font-size: .67rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink4); }
.member-role { font-size: .77rem; color: var(--red); margin-top: .28rem; }

/* ── 23. SWOT ───────────────────────────────────────────────── */
.swot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; border-radius: var(--radius); overflow: hidden; }
.swot-cell { padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem); }
.swot-cell:nth-child(1) { background: var(--red-pale); }
.swot-cell:nth-child(2) { background: #fff8f0; }
.swot-cell:nth-child(3) { background: #f0f5ff; }
.swot-cell:nth-child(4) { background: #f0fff4; }
.swot-label { font-family: var(--ff-mono); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .9rem; display: flex; align-items: center; gap: .45rem; }
.swot-cell:nth-child(1) .swot-label { color: var(--red); }
.swot-cell:nth-child(2) .swot-label { color: #b45309; }
.swot-cell:nth-child(3) .swot-label { color: #1d4ed8; }
.swot-cell:nth-child(4) .swot-label { color: #15803d; }
.swot-items { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.swot-items li { font-size: .85rem; line-height: 1.55; color: var(--ink2); display: flex; gap: .6rem; }
.swot-items li::before { content: ''; width: 4px; height: 4px; background: currentColor; border-radius: 50%; margin-top: .55rem; flex-shrink: 0; opacity: .45; }
@media (max-width: 576px) { .swot-grid { grid-template-columns: 1fr; } }

/* ── 24. REGULATION ─────────────────────────────────────────── */
.reg-item { display: flex; gap: 1rem; padding: 1.2rem 1rem; border-bottom: 1px solid var(--stone); transition: background var(--tr); border-radius: var(--radius-sm); }
.reg-item:last-child { border-bottom: none; }
.reg-item:hover { background: var(--off); }
.reg-icon { font-size: 1.35rem; flex-shrink: 0; }
.reg-code { font-family: var(--ff-mono); font-size: .7rem; font-weight: 600; color: var(--red); letter-spacing: .05em; margin-bottom: .22rem; }
.reg-desc { font-size: .86rem; color: var(--ink2); line-height: 1.55; }

/* ── 25. CTA BAND ───────────────────────────────────────────── */
.cta-band { background: var(--red); padding: clamp(1.6rem, 3.2vw, 2.6rem) 0; }
.cta-band h2 { font-family: var(--ff-head); color: var(--white); font-size: clamp(1.6rem, 3vw, 2.5rem); }
.cta-band h2 em { color: rgba(255,255,255,.6); font-style: italic; }
.cta-band p { color: rgba(255,255,255,.7); font-size: clamp(.88rem, 1.5vw, .97rem); margin-top: .5rem; }
@media (max-width: 767px) { .cta-band .d-flex { flex-direction: column; text-align: center; align-items: center; } }

/* ── 26. CONTACT FORM ───────────────────────────────────────── */
.contact-info-item { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.6rem; }
.cii-icon { width: 42px; height: 42px; background: var(--red-pale); border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--red); flex-shrink: 0; }
.cii-label { font-family: var(--ff-mono); font-size: .67rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink4); margin-bottom: .25rem; }
.cii-value { font-size: .88rem; color: var(--ink2); line-height: 1.55; }
.contact-form-wrap { background: var(--off); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.5rem); }
.form-group { margin-bottom: 1.25rem; }
.form-label-broc { font-family: var(--ff-mono); font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); margin-bottom: .5rem; display: block; }
.form-control-broc { width: 100%; background: var(--white); border: 1.5px solid var(--mid); border-radius: var(--radius-sm); padding: .78rem 1rem; font-family: var(--ff-body); font-size: .92rem; color: var(--ink); outline: none; transition: border-color var(--tr), box-shadow var(--tr); -webkit-appearance: none; appearance: none; }
.form-control-broc:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(192,57,43,.08); }
.form-control-broc.is-invalid { border-color: var(--red) !important; }
.form-control-broc.is-valid   { border-color: #22c55e !important; }
select.form-control-broc { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235c5855' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; padding-right: 2.5rem; }
textarea.form-control-broc { resize: vertical; min-height: 120px; }
.form-success { display: none; background: #f0fdf4; border: 1px solid #86efac; border-radius: 8px; padding: 1.1rem; font-size: .88rem; color: #166534; margin-top: 1rem; }
#form-error { display: none; background: var(--red-pale); border: 1px solid rgba(192,57,43,.25); border-radius: 8px; padding: .8rem 1rem; font-size: .85rem; color: var(--red); margin-top: .75rem; font-family: var(--ff-mono); }

/* ── 27. DISTRIBUTOR CARDS ──────────────────────────────────── */
.dist-card { background: var(--white); border: 1px solid var(--stone); border-radius: var(--radius); padding: 1.75rem; text-align: center; height: 100%; transition: all var(--tr); }
.dist-card:hover { border-color: var(--red); box-shadow: 0 8px 30px rgba(192,57,43,.1); transform: translateY(-4px); }
.dist-icon { font-size: 2.4rem; margin-bottom: .9rem; display: block; }

/* ── 28. HORIZON CARDS ──────────────────────────────────────── */
.horizon-card { border-radius: var(--radius); padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 2.5vw, 2rem); position: relative; overflow: hidden; height: 100%; }
.horizon-card:nth-child(1) { background: var(--ink); color: var(--white); }
.horizon-card:nth-child(2) { background: var(--red); color: var(--white); }
.horizon-card:nth-child(3) { background: var(--off); border: 1px solid var(--stone); }
.horizon-big-num { font-family: var(--ff-head); font-size: clamp(3rem, 6vw, 5rem); opacity: .07; position: absolute; bottom: -.5rem; right: .5rem; line-height: 1; pointer-events: none; }
.horizon-period { font-family: var(--ff-mono); font-size: .67rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .42; margin-bottom: .7rem; }
.horizon-title { font-family: var(--ff-head); font-size: clamp(1.1rem, 2vw, 1.4rem); margin-bottom: .7rem; }
.horizon-text { font-size: .85rem; line-height: 1.65; opacity: .72; }

/* ── 29. NEW: RESOURCE CARDS ────────────────────────────────── */
.resource-card { background: var(--white); border: 1px solid var(--stone); border-radius: var(--radius); padding: 1.75rem; display: flex; gap: 1.2rem; align-items: flex-start; transition: all var(--tr); height: 100%; }
.resource-card:hover { border-color: var(--red); box-shadow: 0 8px 30px rgba(192,57,43,.09); transform: translateY(-3px); }
.resource-type-badge { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--ff-mono); font-size: .6rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: .22rem .6rem; border-radius: 4px; white-space: nowrap; flex-shrink: 0; margin-top: .15rem; }
.badge-wp    { background: #e8f0fe; color: #1a56c4; }
.badge-study { background: #ecfdf5; color: #065f46; }
.badge-paper { background: #fff7ed; color: #9a3412; }
.badge-video { background: #faf5ff; color: #6b21a8; }
.badge-blog  { background: var(--red-pale); color: var(--red); }
.resource-title { font-family: var(--ff-head); font-size: 1.05rem; color: var(--ink); margin-bottom: .4rem; }
.resource-meta { font-family: var(--ff-mono); font-size: .68rem; color: var(--ink4); letter-spacing: .04em; }
.resource-desc { font-size: .88rem; line-height: 1.68; color: var(--ink3); margin-top: .5rem; }

/* ── 30. NEW: ROI CALCULATOR ────────────────────────────────── */
.calc-wrap { background: var(--off); border: 1px solid var(--stone); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.5rem); }
.calc-result { background: var(--ink); border-radius: var(--radius); padding: 1.5rem; text-align: center; color: var(--white); }
.calc-result-num { font-family: var(--ff-head); font-size: clamp(2rem, 5vw, 3.5rem); color: var(--white); line-height: 1; }
.calc-result-lbl { font-family: var(--ff-mono); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-top: .4rem; }
.range-wrap { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.range-wrap label { font-family: var(--ff-mono); font-size: .68rem; color: var(--ink3); white-space: nowrap; min-width: 120px; }
.range-wrap input[type=range] { flex: 1; accent-color: var(--red); height: 4px; }
.range-val { font-family: var(--ff-mono); font-size: .78rem; font-weight: 600; color: var(--red); min-width: 55px; text-align: right; }
@media (max-width: 480px) { .range-wrap { flex-wrap: wrap; } .range-wrap label { min-width: auto; width: 100%; } .range-val { margin-left: auto; } }

/* ── 31. NEW: TABS ──────────────────────────────────────────── */
.tab-nav { display: flex; gap: .35rem; flex-wrap: nowrap; border-bottom: 2px solid var(--stone); margin-bottom: 2.5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tab-nav::-webkit-scrollbar { display: none; }
.tab-btn { font-family: var(--ff-mono); font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); background: none; border: none; border-bottom: 2px solid transparent; padding: .65rem .9rem; margin-bottom: -2px; cursor: pointer; transition: all var(--tr); white-space: nowrap; }
.tab-btn:hover { color: var(--red); }
.tab-btn.active { color: var(--red); border-bottom-color: var(--red); }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: tabFade .2s ease; }
@keyframes tabFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ── 32. FOOTER ─────────────────────────────────────────────── */
footer { background: var(--ink); padding: clamp(1.8rem, 4vw, 3rem) 0 1.2rem; }
.footer-brand { font-family: var(--ff-head); font-size: clamp(1.5rem, 3vw, 1.9rem); color: var(--white); margin-bottom: .38rem; }
.footer-brand em { color: var(--red); font-style: italic; }
.footer-sub { font-family: var(--ff-mono); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.42); margin-bottom: .9rem; }
.footer-desc { font-size: .83rem; line-height: 1.72; color: rgba(255,255,255,.48); }
.footer-heading { font-family: var(--ff-mono); font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.82); margin-bottom: 1.3rem; padding-bottom: .6rem; position: relative; display: inline-block; }
.footer-heading::after { content: ''; position: absolute; bottom: 0; left: 0; width: 20px; height: 2px; background: var(--red); border-radius: 2px; }
.footer-heading::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: rgba(255,255,255,.07); }
.footer-links { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.footer-links a { font-size: .83rem; color: rgba(255,255,255,.55); transition: color var(--tr); }
.footer-links a:hover { color: var(--red); }
.footer-divider { border-color: rgba(255,255,255,.06); margin: 1.2rem 0 .9rem; }
.footer-bottom-text { font-family: var(--ff-mono); font-size: .65rem; letter-spacing: .05em; color: rgba(255,255,255,.6); }
.footer-bottom-text a { color: rgba(255,255,255,.75) !important; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.3); transition: color .2s, text-decoration-color .2s; cursor: pointer; }
.footer-bottom-text a:hover { color: var(--red-l) !important; text-decoration-color: var(--red-l); }
.footer-cert { display: flex; align-items: center; gap: .45rem; font-family: var(--ff-mono); font-size: .65rem; letter-spacing: .06em; color: rgba(255,255,255,.42); }
.footer-cert-badge { background: var(--red); color: var(--white); font-size: .62rem; font-weight: 700; padding: .18rem .5rem; border-radius: 3px; }

/* ── 33. FLOATING ELEMENTS ──────────────────────────────────── */
#wa-float { display: none !important; visibility: hidden !important; }
#scroll-top { position: fixed; bottom: 5.4rem; right: 1.9rem; z-index: 900; width: 40px; height: 40px; border-radius: 50%; background: var(--white); border: 1.5px solid var(--stone); display: none; align-items: center; justify-content: center; font-size: 1rem; color: var(--ink2); cursor: pointer; transition: all var(--tr); box-shadow: var(--shadow-sm); }
#scroll-top:hover { background: var(--red); color: var(--white); border-color: var(--red); }
#scroll-top.show { display: flex; }

/* ── Offcanvas Mobile — Brand Header moderne ─────────────── */
.oc-brand-header {
  display: flex; align-items: center; gap: 12px;
  padding: .9rem 1.4rem; flex: 1; min-width: 0;
}
.oc-brand-monogram {
  width: 48px; height: 48px; flex-shrink: 0;
  background: linear-gradient(145deg, #0d0e14 0%, #1a0407 55%, #0d0e14 100%);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(220,30,20,.32),
    0 6px 22px rgba(0,0,0,.65),
    0 0 18px rgba(220,30,20,.14);
  transition: box-shadow .25s;
}
/* Liseré rouge dégradé — bord supérieur */
.oc-brand-monogram::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, transparent 0%, #c0392b 25%, #e0001b 50%, #ff4422 75%, transparent 100%);
}
/* Motif diagonal ultra-léger */
.oc-brand-monogram::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0px, transparent 7px,
    rgba(255,255,255,.025) 7px, rgba(255,255,255,.025) 8px
  );
}
.oc-brand-monogram img {
  position: relative; z-index: 1;
  width: 34px; height: 34px;
  object-fit: contain; display: block;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.oc-brand-header:hover .oc-brand-monogram {
  box-shadow:
    0 0 0 1px rgba(220,30,20,.55),
    0 8px 28px rgba(0,0,0,.7),
    0 0 24px rgba(220,30,20,.25);
}
.oc-brand-info { min-width: 0; }
.oc-brand-name-text {
  font-family: var(--ff-head); font-size: .98rem; font-weight: 900;
  color: #fff; letter-spacing: .07em; line-height: 1.1; margin-bottom: 5px;
}
.oc-brand-name-text em { color: #e0001b; font-style: normal; }
.oc-brand-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.oc-badge-gmp {
  background: rgba(224,0,27,.14); border: 1px solid rgba(224,0,27,.32);
  color: rgba(255,110,90,.95); font-size: .58rem; font-family: var(--ff-mono);
  letter-spacing: .1em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 4px; font-weight: 700;
}
.oc-brand-sub-text {
  color: rgba(255,255,255,.28); font-size: .59rem;
  font-family: var(--ff-mono); letter-spacing: .06em;
}
.oc-close-btn {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10);
  border-radius: 9px; width: 34px; height: 34px; cursor: pointer;
  color: rgba(255,255,255,.45); font-size: 1rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  margin-right: 1.4rem;
  transition: background .15s, color .15s, border-color .15s;
}
.oc-close-btn:hover { background: rgba(255,255,255,.13); color: #fff; border-color: rgba(255,255,255,.22); }
[dir="rtl"] .oc-close-btn { margin-right: 0; margin-left: 1.4rem; }

/* ── 33b. SEARCH HIGHLIGHT ──────────────────────────────────── */
mark.search-highlight {
  background: rgba(224,0,27,.38); color: inherit; border-radius: 3px;
  padding: 1px 4px; font-weight: 700;
  box-shadow: 0 0 0 1px rgba(224,0,27,.35);
  animation: search-hl-pulse 3s ease forwards;
}
@keyframes search-hl-pulse {
  0%   { background: rgba(224,0,27,.65); box-shadow: 0 0 14px rgba(224,0,27,.55); }
  30%  { background: rgba(224,0,27,.42); box-shadow: 0 0 8px rgba(224,0,27,.3); }
  70%  { background: rgba(224,0,27,.22); box-shadow: 0 0 4px rgba(224,0,27,.12); }
  100% { background: rgba(224,0,27,.08); box-shadow: none; }
}

/* ── 34. COOKIE BANNER ──────────────────────────────────────── */
#cookie-banner { position: fixed; bottom: 1.25rem; left: 1.25rem; max-width: 540px; background: var(--ink); border-radius: var(--radius); padding: 1.25rem 1.75rem; z-index: 951; box-shadow: 0 8px 36px rgba(0,0,0,.22); display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; transform: translateY(200%); transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
#cookie-banner.show { transform: translateY(0); }
#cookie-banner p { font-size: .8rem; line-height: 1.6; color: rgba(255,255,255,.55); flex: 1; margin: 0; min-width: 150px; }
.ck-accept { font-family: var(--ff-body); font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: var(--red); color: var(--white); border: none; border-radius: var(--radius-sm); padding: .5rem 1rem; cursor: pointer; transition: background var(--tr); white-space: nowrap; }
.ck-accept:hover { background: var(--red-d); }
.ck-decline { font-family: var(--ff-body); font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: none; color: rgba(255,255,255,.35); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-sm); padding: .5rem 1rem; cursor: pointer; transition: all var(--tr); white-space: nowrap; }
.ck-decline:hover { color: rgba(255,255,255,.65); border-color: rgba(255,255,255,.32); }
@media (max-width: 576px) { #cookie-banner { left: .75rem; right: .75rem; max-width: none; padding: 1rem 1.2rem; } }

/* ── 35. SEARCH OVERLAY — Command Palette v2 ────────────────── */

/* Fond flou */
#search-overlay {
  position: fixed; inset: 0;
  background: rgba(18,16,14,.72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  /* Au-dessus de la nav : fermé = ne doit jamais intercepter les clics (voir !important ci-dessous). */
  z-index: 10050;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 10vh 1rem 2rem;
  opacity: 0; visibility: hidden;
  pointer-events: none;
  /* Ouverture perçue comme instantanée (éviter ~0,4s cumul overlay + panneau). */
  transition: opacity .1s ease, visibility .1s ease;
}
#search-overlay:not(.open) {
  pointer-events: none !important;
}
#search-overlay.open {
  opacity: 1; visibility: visible;
  pointer-events: auto !important;
}

/* Panneau principal */
.search-inner {
  width: 100%; max-width: 660px;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 32px 80px rgba(0,0,0,.26);
  overflow: hidden;
  transform: translateY(-12px) scale(.98);
  transition: transform .14s cubic-bezier(.25,.8,.25,1);
  display: flex; flex-direction: column;
}
#search-overlay.open .search-inner { transform: translateY(0) scale(1); }

@media (prefers-reduced-motion: reduce) {
  #search-overlay { transition-duration: 0.01ms !important; transition-property: opacity, visibility; }
  .search-inner { transition-duration: 0.01ms !important; }
}

/* ── En-tête : champ de saisie ── */
.search-header { flex-shrink: 0; }
.search-input-wrap {
  display: flex; align-items: center; gap: .65rem;
  padding: .9rem 1.1rem;
  border-bottom: 1px solid var(--stone);
  background: var(--white);
}
.search-icon { color: var(--red); flex-shrink: 0; opacity: .7; }
#search-input {
  flex: 1; border: none; outline: none;
  font-family: var(--ff-body); font-size: 1rem; color: var(--ink);
  background: transparent; min-width: 0;
  caret-color: var(--red);
}
#search-input::placeholder { color: var(--ink4); }
.search-esc-hint {
  font-family: var(--ff-mono); font-size: .62rem; font-weight: 600;
  color: var(--ink4); background: var(--stone);
  border: 1px solid var(--mid); border-radius: 5px;
  padding: 2px 6px; white-space: nowrap; flex-shrink: 0;
  transition: opacity .15s;
}
.search-close {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--stone); border: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink3); cursor: pointer;
  transition: background var(--tr), color var(--tr); flex-shrink: 0;
}
.search-close:hover { background: var(--mid); color: var(--ink); }

/* ── Corps : résultats ou état accueil ── */
.search-body { overflow-y: auto; max-height: 420px; flex: 1; }

/* Scroll custom */
.search-body::-webkit-scrollbar { width: 4px; }
.search-body::-webkit-scrollbar-track { background: transparent; }
.search-body::-webkit-scrollbar-thumb { background: var(--mid); border-radius: 4px; }

/* ── Résultats groupés ── */
.search-results { display: none; }
.search-group { }
.search-group-header {
  display: flex; align-items: center; gap: .45rem;
  padding: .55rem 1.1rem .3rem;
  font-family: var(--ff-mono); font-size: .63rem;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink4);
  border-top: 1px solid var(--stone);
  background: var(--off);
}
.search-group:first-child .search-group-header { border-top: none; }
.search-group-header i, .search-group-header svg { width: 11px; height: 11px; opacity: .6; }

/* Résultat individuel */
@keyframes sriFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.search-result-item {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem 1.1rem;
  font-size: .875rem; font-weight: 500; color: var(--ink2);
  border-bottom: 1px solid var(--stone);
  text-decoration: none;
  transition: background .12s, color .12s;
  animation: sriFadeIn .22s ease both;
  position: relative;
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover,
.search-result-item.kbd-active {
  background: var(--red-pale); color: var(--red);
}
.search-result-item.kbd-active { outline: none; }
.sri-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--off); border: 1px solid var(--stone);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--red);
  transition: background .12s, border-color .12s;
}
.search-result-item:hover .sri-icon,
.search-result-item.kbd-active .sri-icon {
  background: rgba(192,57,43,.1); border-color: rgba(192,57,43,.2);
}
.sri-icon i, .sri-icon svg { width: 15px; height: 15px; }
.sri-body { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sri-title { font-weight: 600; font-size: .86rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sri-snippet {
  font-size: .71rem; color: var(--ink4); font-family: var(--ff-mono);
  line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .12s;
}
.search-result-item:hover .sri-snippet,
.search-result-item.kbd-active .sri-snippet { color: rgba(192,57,43,.65); }
.sri-arrow { color: var(--mid); flex-shrink: 0; opacity: 0; transform: translateX(-4px); transition: opacity .12s, transform .12s, color .12s; }
.sri-arrow i, .sri-arrow svg { width: 14px; height: 14px; }
.search-result-item:hover .sri-arrow,
.search-result-item.kbd-active .sri-arrow { opacity: 1; transform: translateX(0); color: var(--red); }

/* Highlight des correspondances */
.search-result-item mark {
  background: rgba(192,57,43,.14); color: var(--red);
  border-radius: 3px; padding: 0 2px; font-weight: 700;
}

/* ── Aucun résultat ── */
.search-no-result {
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  padding: 2.2rem 1.25rem; text-align: center;
  color: var(--ink4); font-size: .85rem;
}
.search-no-result i, .search-no-result svg { width: 32px; height: 32px; opacity: .3; }
.search-no-result strong { color: var(--ink2); font-weight: 700; }

/* ── État accueil : recents + suggestions ── */
.search-home { }
.search-recents-section,
.search-suggestions-section {
  padding: .6rem 0 .4rem;
  border-top: 1px solid var(--stone);
}
.search-recents-section:first-child,
.search-suggestions-section:first-child { border-top: none; }

.search-section-label {
  display: flex; align-items: center; gap: .4rem;
  padding: .3rem 1.1rem .5rem;
  font-family: var(--ff-mono); font-size: .63rem;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink4);
}
.search-section-label i, .search-section-label svg { width: 12px; height: 12px; opacity: .6; }
.search-clear-recents {
  margin-left: auto; background: none; border: none;
  font-family: var(--ff-mono); font-size: .6rem; font-weight: 600;
  color: var(--ink4); cursor: pointer; padding: 0;
  text-transform: uppercase; letter-spacing: .06em;
  transition: color .12s;
}
.search-clear-recents:hover { color: var(--red); }

/* Recherches récentes */
.search-recents-list { padding: 0 .55rem .35rem; }
.search-recent-item {
  display: flex; align-items: center; gap: .6rem;
  width: 100%; padding: .45rem .6rem;
  background: none; border: none; border-radius: 8px;
  font-family: var(--ff-body); font-size: .84rem; color: var(--ink2);
  cursor: pointer; text-align: left;
  transition: background .12s, color .12s;
}
.search-recent-item:hover { background: var(--red-pale); color: var(--red); }
.search-recent-item > i, .search-recent-item > svg { width: 13px; height: 13px; color: var(--ink4); flex-shrink: 0; }
.search-recent-item > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-recent-remove {
  width: 20px; height: 20px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink4); flex-shrink: 0; cursor: pointer;
  transition: background .1s, color .1s;
}
.search-recent-remove:hover { background: rgba(192,57,43,.12); color: var(--red); }
.search-recent-remove i, .search-recent-remove svg { width: 11px; height: 11px; }

/* Suggestions chips */
.search-suggestions-section .search-hints {
  display: flex; align-items: center; gap: .4rem;
  padding: 0 1.1rem .6rem; flex-wrap: wrap;
  border-top: none; background: none;
}
.search-hint-chip {
  background: var(--white); border: 1.5px solid var(--mid);
  border-radius: 20px; padding: .22rem .75rem;
  font-size: .72rem; font-family: var(--ff-mono); font-weight: 600;
  color: var(--ink3); cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.search-hint-chip:hover { border-color: var(--red); color: var(--red); background: var(--red-pale); }

/* ── Pied de page : raccourcis + compteur ── */
.search-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: .55rem 1.1rem;
  border-top: 1px solid var(--stone);
  background: var(--off);
  flex-shrink: 0;
}
.search-footer-keys {
  display: flex; align-items: center; gap: 1rem;
  font-family: var(--ff-mono); font-size: .65rem; color: var(--ink4);
}
.search-footer-keys span { display: flex; align-items: center; gap: .3rem; }
.search-footer-keys kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px; padding: 0 4px;
  background: var(--white); border: 1px solid var(--mid); border-radius: 4px;
  font-family: var(--ff-mono); font-size: .6rem; font-weight: 600;
  color: var(--ink3); line-height: 1;
}
.search-result-count {
  font-family: var(--ff-mono); font-size: .65rem; font-weight: 700;
  color: var(--white); background: var(--red);
  border-radius: 20px; padding: 1px 7px;
  min-width: 20px; text-align: center;
  opacity: 0; transform: scale(.8);
  transition: opacity .18s, transform .18s;
}
.search-result-count:not(:empty) { opacity: 1; transform: scale(1); }

/* RTL */
body.lang-ar #search-overlay          { direction: rtl; }
body.lang-ar .search-input-wrap       { flex-direction: row-reverse; }
body.lang-ar #search-input            { text-align: right; direction: rtl; }
body.lang-ar .search-result-item      { flex-direction: row-reverse; }
body.lang-ar .sri-body                { text-align: right; }
body.lang-ar .search-section-label   { flex-direction: row-reverse; }
body.lang-ar .search-section-label .search-clear-recents { margin-left: 0; margin-right: auto; }
body.lang-ar .search-recent-item     { flex-direction: row-reverse; }
body.lang-ar .search-hints           { flex-direction: row-reverse; justify-content: flex-end; }
body.lang-ar .search-footer-keys     { flex-direction: row-reverse; }
body.lang-ar .search-no-result       { direction: rtl; }
body.lang-ar .sri-arrow              { transform: scaleX(-1); }

/* ── 36. AOS CUSTOM ─────────────────────────────────────────── */
[data-aos="fade-up-broc"] { opacity: 0; transform: translateY(28px); transition-property: opacity, transform; }
[data-aos="fade-up-broc"].aos-animate { opacity: 1; transform: translateY(0); }

/* ── 37. RESPONSIVE & GLOBAL ────────────────────────────────── */
@media (min-width: 1400px) { .container-xl { max-width: 1320px; } }
@media (min-width: 1920px) { :root { --nav-h: 76px; } html { font-size: 17px; } }

/* Print */
@media print {
  #mainNav, #wa-float, #scroll-top, #cookie-banner, #read-progress, #search-overlay,
  .hero-bg-shape, .hero-bg-grid, .marquee-wrap, .cta-band,
  .btn-broc-red, .btn-broc-outline { display: none !important; }
  body { color: #000; background: #fff; font-size: 11pt; }
  footer { background: #fff; color: #333; padding: 1rem 0; }
  footer * { color: #333 !important; }
  a[href]::after { content: ' (' attr(href) ')'; font-size: 8pt; color: #666; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .loader-fill { width: 100%; animation: none; }
  .marquee-track { animation-play-state: paused; }
}







/* ══════════════════════════════════════════════════════════════
   BROC NUTRITION — v5.1 ADDITIONS
   • Dark Mode System
   • Timeline Scroll-Animated (histoire.html)
   • Product Comparator Interactive (gamme.html)
   • ROI Calculator Chart Enhanced
   ══════════════════════════════════════════════════════════════ */

/* ── DARK MODE TOGGLE BUTTON ────────────────────────────────── */
.btn-darkmode {
  width: 36px; height: 64px;
  border-radius: var(--radius-sm);
  background: none;
  border: 1.5px solid var(--mid);
  color: var(--ink3);
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; cursor: pointer;
  transition: all var(--tr); flex-shrink: 0;
  position: relative; overflow: hidden;
}
.btn-darkmode:hover { border-color: var(--red); color: var(--red); background: var(--red-pale); }
.btn-darkmode .dm-icon-sun,
.btn-darkmode .dm-icon-moon { position: absolute; transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .25s ease; }
.btn-darkmode .dm-icon-sun  { transform: rotate(0deg) scale(1); opacity: 1; }
.btn-darkmode .dm-icon-moon { transform: rotate(-90deg) scale(.5); opacity: 0; }
[data-theme="dark"] .btn-darkmode .dm-icon-sun  { transform: rotate(90deg) scale(.5); opacity: 0; }
[data-theme="dark"] .btn-darkmode .dm-icon-moon { transform: rotate(0deg) scale(1);  opacity: 1; }

/* ── DARK MODE THEME VARIABLES ──────────────────────────────── */
[data-theme="dark"] {
  --white:    #16161a;
  --off:      #1c1c21;
  --stone:    #2a2a32;
  --mid:      #3a3a45;
  --ink:      #f0ede8;
  --ink2:     #ccc8c2;
  --ink3:     #9b978f;
  --ink4:     #6b6760;
  --red-pale: rgba(192,57,43,.15);
  --shadow-sm:  0 2px 12px rgba(0,0,0,.3);
  --shadow-md:  0 8px 32px rgba(0,0,0,.4);
}

/* Dark mode specific overrides */
[data-theme="dark"] body { background: #16161a; }
[data-theme="dark"] #mainNav { background: rgba(22,22,26,.97); border-bottom-color: var(--stone); }
[data-theme="dark"] .navbar-brand-text { color: var(--ink); }
[data-theme="dark"] .nav-link { color: var(--ink2) !important; }
[data-theme="dark"] .nav-link:hover, [data-theme="dark"] .nav-link.is-active { color: var(--red-l) !important; }
[data-theme="dark"] .dropdown-menu { background: #1c1c21; border-color: var(--stone); }
[data-theme="dark"] .dropdown-item { color: var(--ink2); }
[data-theme="dark"] .dropdown-item:hover { background: var(--red-pale); color: var(--red-l); }
[data-theme="dark"] .hero-section { background: #1c1c21; }
[data-theme="dark"] .hero-bg-shape { background: linear-gradient(145deg, #1e1e24 0%, #24242e 100%); }
[data-theme="dark"] .hero-title { color: var(--ink); }
[data-theme="dark"] .section-title { color: var(--ink); }
[data-theme="dark"] .card-broc { background: #1c1c21; border-color: var(--stone); }
[data-theme="dark"] .card-broc:hover { border-color: var(--red); }
[data-theme="dark"] .prod-card { background: #1c1c21; border-color: var(--stone); }
[data-theme="dark"] .section-off { background: #1c1c21; }
[data-theme="dark"] .search-inner { background: #1c1c21; }
[data-theme="dark"] #search-input { color: var(--ink); }
[data-theme="dark"] .search-hints { background: var(--off); }
[data-theme="dark"] .table-broc tbody td { color: var(--ink2); border-bottom-color: var(--stone); }
[data-theme="dark"] .table-broc tbody tr:hover td { background: var(--off); }
[data-theme="dark"] .notice-box { background: var(--off); border-color: var(--stone); border-left-color: var(--red); }
[data-theme="dark"] .notice-text { color: var(--ink2); }
[data-theme="dark"] .page-header { background: #0f0f12; }
[data-theme="dark"] .navbar-toggler-icon { filter: invert(1); }
[data-theme="dark"] .btn-nav-lang { color: var(--ink3); border-color: var(--mid); }
[data-theme="dark"] .btn-nav-lang.active { color: var(--red-l); border-color: var(--red); background: var(--red-pale); }
[data-theme="dark"] .btn-broc-outline { color: var(--red-l); border-color: var(--red-l); }
[data-theme="dark"] .btn-broc-outline:hover { background: var(--red); color: var(--white); }
[data-theme="dark"] .table-wrap { background: #1c1c21; }
[data-theme="dark"] .mol-badge { background: #24242e; border-color: var(--stone); color: var(--ink2); }
[data-theme="dark"] .hero-badge { background: #1c1c21; border-color: var(--stone); color: var(--ink3); }

/* Dark mode smooth transition */
body, #mainNav, .card-broc, .prod-card, .dropdown-menu,
.notice-box, .search-inner, .table-broc tbody td,
.hero-section, .section-off, .hero-badge, .mol-badge,
.page-header, .navbar-brand-text {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: .32s;
  transition-timing-function: ease;
}

/* ── TIMELINE ANIMÉE — SCROLL-DRIVEN ────────────────────────── */
/* Remplace le style statique par une version cinématique */
.timeline-wrap-v2 {
  position: relative;
  padding-left: 0;
  counter-reset: tl-counter;
}
.timeline-wrap-v2::before { display: none; }

.tl-track {
  position: absolute;
  left: 28px;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--stone);
  border-radius: 2px;
  overflow: hidden;
}
.tl-track-fill {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0%;
  background: linear-gradient(to bottom, var(--red), var(--red-l));
  border-radius: 2px;
  transition: height .15s linear;
}

.tl-item-v2 {
  display: flex;
  gap: 1.6rem;
  padding: 0 0 2.5rem 0;
  opacity: 0;
  transform: translateX(-18px);
  transition: opacity .55s ease, transform .55s ease;
}
.tl-item-v2.tl-visible {
  opacity: 1;
  transform: translateX(0);
}

.tl-marker {
  flex-shrink: 0;
  width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding-top: .15rem;
}
.tl-dot-v2 {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--mid);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
  z-index: 2;
  position: relative;
}
.tl-item-v2.tl-visible .tl-dot-v2 {
  background: var(--red);
  border-color: var(--red);
  box-shadow: 0 0 0 5px rgba(192,57,43,.15);
}
.tl-year-v2 {
  font-family: var(--ff-mono);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
  white-space: nowrap;
}

.tl-content {
  flex: 1;
  background: var(--white);
  border: 1px solid var(--stone);
  border-radius: var(--radius);
  padding: 1.15rem 1.4rem;
  position: relative;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.tl-content::before {
  content: '';
  position: absolute;
  left: -7px; top: 18px;
  width: 13px; height: 13px;
  background: var(--white);
  border-left: 1px solid var(--stone);
  border-bottom: 1px solid var(--stone);
  transform: rotate(45deg);
  transition: background .3s ease, border-color .3s ease;
}
.tl-item-v2.tl-visible .tl-content {
  border-color: rgba(192,57,43,.25);
  box-shadow: var(--shadow-sm);
}
.tl-item-v2.tl-visible .tl-content::before {
  border-color: rgba(192,57,43,.25);
}
.tl-content-title {
  font-family: var(--ff-head);
  font-size: 1.05rem;
  color: var(--ink);
  margin-bottom: .3rem;
}
.tl-content-text {
  font-size: .84rem;
  line-height: 1.67;
  color: var(--ink3);
}
.tl-content-tag {
  display: inline-block;
  margin-top: .6rem;
  font-family: var(--ff-mono);
  font-size: .6rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--red);
  background: var(--red-pale);
  border-radius: 4px;
  padding: .18rem .55rem;
}

[data-theme="dark"] .tl-content { background: #1c1c21; border-color: var(--stone); }
[data-theme="dark"] .tl-content::before { background: #1c1c21; border-color: var(--stone); }
[data-theme="dark"] .tl-item-v2.tl-visible .tl-content { border-color: rgba(192,57,43,.3); }
[data-theme="dark"] .tl-item-v2.tl-visible .tl-content::before { border-color: rgba(192,57,43,.3); }
[data-theme="dark"] .tl-dot-v2 { background: #16161a; }
[data-theme="dark"] .tl-track { background: var(--stone); }

/* ── COMPARATEUR DE PRODUITS INTERACTIF ─────────────────────── */
.comparator-section { background: var(--off); }
[data-theme="dark"] .comparator-section { background: var(--off); }

.comparator-controls {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 2rem;
  align-items: center;
}
.comparator-label {
  font-family: var(--ff-mono);
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink4);
  margin-right: .4rem;
  flex-shrink: 0;
}
.filter-chip {
  font-family: var(--ff-mono);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  border: 1.5px solid var(--mid);
  border-radius: 50px;
  padding: .32rem .9rem;
  background: var(--white);
  color: var(--ink3);
  cursor: pointer;
  transition: all var(--tr);
}
.filter-chip:hover { border-color: var(--red); color: var(--red); }
.filter-chip.active {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}
[data-theme="dark"] .filter-chip { background: var(--stone); border-color: var(--mid); color: var(--ink3); }
[data-theme="dark"] .filter-chip.active { background: var(--red); color: #fff; border-color: var(--red); }

.comparator-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  transition: all .3s ease;
}
.cmp-card {
  background: var(--white);
  border: 2px solid var(--stone);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.2rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  position: relative;
  cursor: pointer;
  transition: all .3s cubic-bezier(.4,0,.2,1);
  transform-origin: center bottom;
}
.cmp-card:hover {
  border-color: var(--red);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(192,57,43,.14);
}
.cmp-card.cmp-selected {
  border-color: var(--red);
  background: var(--red-pale);
}
.cmp-card.cmp-faded {
  opacity: .35;
  transform: scale(.97);
  pointer-events: none;
}
.cmp-card-badge {
  position: absolute;
  top: .75rem; right: .75rem;
  font-family: var(--ff-mono);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .18rem .55rem;
  border-radius: 4px;
  background: var(--red);
  color: var(--white);
}
.cmp-card-badge.badge-premium { background: #b8860b; }
.cmp-card-badge.badge-slow { background: #2e7d32; color: #fff; }
.cmp-card-name {
  font-family: var(--ff-head);
  font-size: 1.3rem;
  color: var(--ink);
  line-height: 1;
  margin-top: .4rem;
}
.cmp-card-formula {
  font-family: var(--ff-mono);
  font-size: .65rem;
  color: var(--red);
  letter-spacing: .04em;
}
.cmp-card-bars { display: flex; flex-direction: column; gap: .45rem; margin-top: .4rem; }
.cmp-bar-row { display: flex; flex-direction: column; gap: .18rem; }
.cmp-bar-label {
  font-family: var(--ff-mono);
  font-size: .58rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink4);
  display: flex;
  justify-content: space-between;
}
.cmp-bar-track {
  height: 5px;
  background: var(--stone);
  border-radius: 3px;
  overflow: hidden;
}
.cmp-bar-fill {
  height: 100%;
  background: var(--red);
  border-radius: 3px;
  width: 0%;
  transition: width .7s cubic-bezier(.4,0,.2,1);
}
.cmp-bar-fill.fill-green { background: #2e7d32; }
.cmp-bar-fill.fill-amber { background: #b8860b; }
.cmp-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: .3rem;
}
.cmp-tag {
  font-family: var(--ff-mono);
  font-size: .58rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .15rem .5rem;
  border-radius: 3px;
  background: var(--stone);
  color: var(--ink3);
}
.cmp-tag.tag-gmp { background: var(--red-pale); color: var(--red); }

.cmp-compare-panel {
  margin-top: 2rem;
  background: var(--white);
  border: 1px solid var(--stone);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: none;
  animation: panelIn .35s cubic-bezier(.34,1.56,.64,1) both;
}
.cmp-compare-panel.visible { display: block; }
@keyframes panelIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.cmp-panel-header {
  display: grid;
  background: var(--ink);
  padding: 1rem 1.4rem;
  font-family: var(--ff-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.cmp-panel-row {
  display: grid;
  padding: .75rem 1.4rem;
  border-bottom: 1px solid var(--stone);
  align-items: center;
  font-size: .85rem;
}
.cmp-panel-row:last-child { border-bottom: none; }
.cmp-panel-row:nth-child(even) { background: var(--off); }
.cmp-row-label {
  font-family: var(--ff-mono);
  font-size: .65rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink4);
}
.cmp-row-val { color: var(--ink2); font-weight: 600; }
.cmp-row-val.val-best { color: var(--red); font-weight: 700; }
.cmp-row-val .cmp-check { color: #2e7d32; font-weight: 900; }
.cmp-row-val .cmp-cross { color: var(--mid); }

[data-theme="dark"] .cmp-card { background: #1c1c21; border-color: var(--stone); }
[data-theme="dark"] .cmp-card.cmp-selected { background: var(--red-pale); }
[data-theme="dark"] .cmp-compare-panel { background: #1c1c21; border-color: var(--stone); }
[data-theme="dark"] .cmp-panel-row:nth-child(even) { background: var(--off); }
[data-theme="dark"] .cmp-tag { background: var(--stone); color: var(--ink3); }
[data-theme="dark"] .cmp-bar-track { background: var(--mid); }

.cmp-hint {
  font-family: var(--ff-mono);
  font-size: .68rem;
  letter-spacing: .07em;
  color: var(--ink4);
  text-align: center;
  padding: 1rem;
}

/* ── ROI CALCULATOR ENHANCED ────────────────────────────────── */
.roi-v2 {
  background: var(--white);
  border: 1px solid var(--stone);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
[data-theme="dark"] .roi-v2 { background: #1c1c21; border-color: var(--stone); }

.roi-v2-header {
  background: var(--ink);
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.roi-v2-header-icon {
  width: 46px; height: 46px;
  background: var(--red);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.roi-v2-header-title {
  font-family: var(--ff-head);
  font-size: 1.3rem;
  color: var(--white);
  line-height: 1.1;
}
.roi-v2-header-sub {
  font-family: var(--ff-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  margin-top: .2rem;
}

.roi-v2-body {
  padding: 1.75rem 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
@media (max-width: 767px) { .roi-v2-body { grid-template-columns: 1fr; } }

.roi-v2-inputs { display: flex; flex-direction: column; gap: 1.25rem; }
.roi-input-group { display: flex; flex-direction: column; gap: .45rem; }
.roi-input-label {
  font-family: var(--ff-mono);
  font-size: .63rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink4);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.roi-input-val {
  font-family: var(--ff-head);
  font-size: 1rem;
  color: var(--red);
}
input[type="range"].roi-range {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  background: var(--stone);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  transition: background .2s;
}
input[type="range"].roi-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--red);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(192,57,43,.35);
  transition: transform .2s ease, box-shadow .2s ease;
}
input[type="range"].roi-range::-webkit-slider-thumb:hover {
  transform: scale(1.25);
  box-shadow: 0 3px 14px rgba(192,57,43,.5);
}
input[type="range"].roi-range::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%; border: none;
  background: var(--red); cursor: pointer;
}
[data-theme="dark"] input[type="range"].roi-range { background: var(--mid); }

.roi-v2-results { display: flex; flex-direction: column; gap: 1rem; }
.roi-result-main {
  background: var(--ink);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-align: center;
}
.roi-result-label {
  font-family: var(--ff-mono);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.90);
  margin-bottom: .6rem;
}
.roi-result-number {
  font-family: var(--ff-head);
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--white);
  line-height: 1;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.roi-result-number.pop {
  animation: roiPop .38s cubic-bezier(.34,1.56,.64,1);
}
@keyframes roiPop { 0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } }
.roi-result-sub {
  font-family: var(--ff-mono);
  font-size: .70rem;
  font-weight: 400;
  color: rgba(255,255,255,.80);
  margin-top: .5rem;
}

.roi-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
}
.roi-metric-box {
  background: var(--off);
  border: 1px solid var(--stone);
  border-radius: var(--radius-sm);
  padding: .85rem 1rem;
  text-align: center;
}
[data-theme="dark"] .roi-metric-box { background: var(--off); border-color: var(--stone); }
.roi-metric-num {
  font-family: var(--ff-head);
  font-size: 1.3rem;
  color: var(--red);
  line-height: 1;
}
.roi-metric-lbl {
  font-family: var(--ff-mono);
  font-size: .65rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink2);
  margin-top: .25rem;
}

/* Chart canvas */
.roi-chart-wrap {
  position: relative;
  height: 180px;
  width: 100%;
  margin-top: .5rem;
}

/* ── COMPARATOR RESPONSIVE ──────────────────────────────────── */
@media (max-width: 576px) {
  .comparator-grid { grid-template-columns: 1fr 1fr; }
  .roi-v2-body { padding: 1.2rem; }
  .roi-v2-header { padding: 1.2rem; }
}

/* ── LAZY SECTION LOADING ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  }

/* ── CMP PANEL — RESPONSIVE GRID FIX ───────────────────────── */
#cmp-panel {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.cmp-panel-header,
.cmp-panel-row {
  min-width: 360px; /* prevents collapse on narrow screens */
}
@media (max-width: 480px) {
  .cmp-card-bars { display: none; } /* simplify cards on very small screens */
  .cmp-card { padding: .85rem; }
}

/* ── TOAST CONTAINER OVERRIDE ───────────────────────────────── */
#broc-toast-container .toast {
  min-width: 280px;
  border-radius: 10px;
  font-family: var(--ff-body);
  font-size: .88rem;
}

/* ── ROI COUT INPUT GROUP ───────────────────────────────────── */
.roi-input-group small {
  display: block;
  font-size: .68rem;
  opacity: .45;
  font-family: var(--ff-mono);
  margin-top: .25rem;
}

/* ══════════════════════════════════════════════════════════════
   NAVBAR REDESIGN — Modern, fluid, Lucide icons
   ══════════════════════════════════════════════════════════════ */

/* ── Structure ──────────────────────────────────────────────── */
#mainNav {
  position: fixed; top: 0; left: 0; width: 100%;
  /* Au-dessus de #bn-smart-reveal (9900), sous l’offcanvas BS5 (~1045) : 1030 convient */
  z-index: 1030;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,.07);
  height: var(--nav-h);
  transition: box-shadow .2s, background .2s;
}
#mainNav.nav-scrolled {
  box-shadow: 0 2px 24px rgba(0,0,0,.08);
  background: rgba(255,255,255,.99);
}
.nav-inner {
  display: flex;
  align-items: center;
  width: 96%;
  max-width: 1600px;
  margin: 0 auto;
  height: 100%;
  gap: 2%;
}

/* ── Brand ──────────────────────────────────────────────────── */
.navbar-brand {
  display: flex; align-items: center; gap: .65rem;
  text-decoration: none; flex-shrink: 0;
  user-select: none;
}
.navbar-brand-logo {
  width: auto; max-width: 200px;
  height: 64px;
  background: transparent; border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: visible;
}
.brand-name {
  display: block;
  font-family: var(--ff-body); font-weight: 700;
  font-size: clamp(.82rem, 1.2vw, 1rem);
  color: var(--ink); line-height: 1.2; letter-spacing: -.01em;
}
.brand-tag {
  display: block;
  font-family: var(--ff-mono); font-size: clamp(.5rem, .7vw, .6rem);
  color: var(--ink4); letter-spacing: .09em; text-transform: uppercase;
  line-height: 1;
}

/* ── Desktop nav ────────────────────────────────────────────── */
.nav-desktop {
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 1%;
}
.nav-list {
  display: flex; align-items: center;
  list-style: none; margin: 0; padding: 0;
  gap: clamp(0px, .5vw, 6px);
  flex-wrap: nowrap;
}
.nav-lnk {
  display: flex; align-items: center; gap: .3rem;
  font-family: var(--ff-body);
  font-size: clamp(.68rem, .85vw, .82rem);
  font-weight: 600;
  letter-spacing: .025em;
  text-transform: uppercase;
  color: var(--ink2);
  text-decoration: none;
  padding: .42em clamp(.4rem, .6vw, .8rem);
  border-radius: 6px;
  transition: color .15s, background .15s;
  white-space: nowrap;
  position: relative;
}
.nav-lnk:hover,
.nav-lnk.is-active { color: var(--red); background: var(--red-pale); }
.nav-lnk.is-active::after {
  content: '';
  position: absolute; bottom: -1px; left: 15%; right: 15%; height: 2px;
  background: var(--red); border-radius: 2px;
}
.drop-arrow {
  width: clamp(10px, .85vw, 13px);
  height: clamp(10px, .85vw, 13px);
  transition: transform .2s;
  flex-shrink: 0;
}
.nav-has-drop:hover .drop-arrow { transform: rotate(180deg); }

/* ── Dropdown panel ─────────────────────────────────────────── */
.nav-has-drop { position: relative; }
.nav-dropdown-panel {
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 260px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  padding: .5rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s, transform .18s, visibility .18s;
  z-index: 9990;
}
.nav-has-drop:hover .nav-dropdown-panel,
.nav-has-drop:focus-within .nav-dropdown-panel {
  opacity: 1; visibility: visible; pointer-events: all;
  transform: translateX(-50%) translateY(0);
}
/* Bridge to prevent gap */
.nav-has-drop::after {
  content: ''; position: absolute;
  top: 100%; left: 0; right: 0; height: 12px;
}
.drop-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .75rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink);
  transition: background .14s;
}
.drop-item:hover { background: var(--off); }
.drop-item:hover .drop-icon i { color: var(--red); }
.drop-icon {
  width: 32px; height: 32px; flex-shrink: 0;
  background: var(--stone); border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.drop-icon i { width: 15px; height: 15px; color: var(--ink3); transition: color .14s; }
.drop-icon--star { background: #fff8e1; }
.drop-icon--star i { color: #f59e0b; }
.drop-text strong {
  display: block;
  font-size: .82rem; font-weight: 600; color: var(--ink); line-height: 1.3;
}
.drop-text em {
  display: block;
  font-size: .72rem; font-style: normal; color: var(--ink4); line-height: 1.2;
}
.drop-divider {
  height: 1px; background: var(--stone); margin: .35rem .5rem;
}

/* ── Right actions ──────────────────────────────────────────── */
.nav-actions {
  display: flex; align-items: center; gap: clamp(.35rem, .6vw, .75rem);
  flex-shrink: 0;
  position: relative;
  z-index: 3;
}
.nav-mobile-actions {
  position: relative;
  z-index: 3;
}
.btn-nav-icon {
  width: 34px; height: 34px;
  border: 1.5px solid var(--mid); border-radius: 8px;
  background: none; color: var(--ink3);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s; flex-shrink: 0;
}
.btn-nav-icon i { width: 16px; height: 16px; }
.btn-nav-icon:hover { border-color: var(--red); color: var(--red); background: var(--red-pale); }
.lang-switch {
  display: flex; align-items: center; gap: .2rem;
  background: var(--off); border-radius: 8px;
  padding: .2rem .35rem;
  border: 1px solid var(--stone);
}
.lang-sep { color: var(--mid); font-size: .75rem; line-height: 1; }
.btn-lang {
  font-family: var(--ff-mono); font-size: .68rem; font-weight: 700;
  letter-spacing: .06em; color: var(--ink3); background: none;
  border: none; border-radius: 5px; padding: .22rem .42rem;
  cursor: pointer; transition: all .14s; line-height: 1.4;
}
.btn-lang.active,
.btn-lang:hover { color: var(--red); background: var(--red-pale); }
.btn-nav-cta {
  display: flex; align-items: center; gap: .4rem;
  font-family: var(--ff-body);
  font-size: clamp(.68rem, .8vw, .78rem);
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: var(--red);
  border: 2px solid var(--red);
  border-radius: 8px;
  padding: .42em clamp(.6rem, .9vw, 1rem);
  text-decoration: none; white-space: nowrap;
  transition: all .15s;
}
.btn-nav-cta i { width: 14px; height: 14px; flex-shrink: 0; }
.btn-nav-cta:hover {
  background: var(--red-d); border-color: var(--red-d);
  color: #fff; transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(192,57,43,.3);
}

/* ── Mobile toggler ─────────────────────────────────────────── */
.nav-mobile-actions {
  display: flex; align-items: center; gap: .5rem; margin-left: auto;
}
.navbar-toggler {
  width: 38px; height: 38px;
  background: none; border: 1.5px solid var(--mid);
  border-radius: 8px; cursor: pointer;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px;
  transition: border-color .15s;
  padding: 0;
}
.navbar-toggler:hover { border-color: var(--red); }
.toggler-bar {
  display: block; width: 18px; height: 2px;
  background: var(--ink2); border-radius: 2px;
  transition: background .15s;
}
.navbar-toggler:hover .toggler-bar { background: var(--red); }

/* ── Scroll shadow ──────────────────────────────────────────── */
@media (max-width: 1399px) {
  #mainNav { height: var(--nav-h-mob); }
}

/* ── Dark mode ──────────────────────────────────────────────── */
[data-theme="dark"] #mainNav {
  background: rgba(18,18,20,.96);
  border-bottom-color: rgba(255,255,255,.07);
}
[data-theme="dark"] .nav-lnk { color: rgba(255,255,255,.75); }
[data-theme="dark"] .nav-lnk:hover,
[data-theme="dark"] .nav-lnk.is-active { color: var(--red-l); background: rgba(192,57,43,.12); }
[data-theme="dark"] .brand-name { color: #fff; }
[data-theme="dark"] .nav-dropdown-panel {
  background: #1e1e22; border-color: rgba(255,255,255,.1);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
[data-theme="dark"] .drop-item:hover { background: rgba(255,255,255,.05); }
[data-theme="dark"] .drop-icon { background: rgba(255,255,255,.07); }
[data-theme="dark"] .drop-text strong { color: rgba(255,255,255,.9); }
[data-theme="dark"] .drop-text em { color: rgba(255,255,255,.4); }
[data-theme="dark"] .lang-switch { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .btn-lang { color: rgba(255,255,255,.5); }
[data-theme="dark"] .btn-lang.active { color: var(--red-l); }
[data-theme="dark"] .btn-nav-icon { border-color: rgba(255,255,255,.15); color: rgba(255,255,255,.6); }
[data-theme="dark"] .navbar-toggler { border-color: rgba(255,255,255,.2); }
[data-theme="dark"] .toggler-bar { background: rgba(255,255,255,.8); }


/* ═══ ENHANCE DESIGN SYSTEM (surcharge logo-accurate) ═══════════ */

/* ═══════════════════════════════════════════════════════════════
   BROC NUTRITION — enhance.css v2.0
   Cohérence logo : Géométrique · Technique · Industriel · Élan
   Rouge exact logo : #E0001B
   Taupe logo       : #A09282
   Fonts FR/EN : Rajdhani (titres) + DM Sans (corps)
   Fonts AR    : IBM Plex Sans Arabic (titres) + Noto Sans Arabic (corps)
   ═══════════════════════════════════════════════════════════════ */

/* ── Variables — cohérence logo ──────────────────────────────── */
:root {
  /* Rouge logo exact */
  --red:      #e0001b;
  --red-d:    #a80014;
  --red-l:    #ff1f35;
  --red-pale: #fff0f1;
  --red-a:    rgba(224,0,27,.10);

  /* Taupe du logo — couleur signature */
  --taupe:      #a09282;
  --taupe-d:    #7a6e62;
  --taupe-l:    #c8bdb4;
  --taupe-pale: #f5f2ef;

  /* Fond blanc pur comme le logo */
  --white:  #ffffff;
  --off:    #f8f6f4;
  --stone:  #ede9e5;
  --mid:    #d4cec8;

  /* Encre profonde */
  --ink:    #1a1614;
  --ink2:   #352e2a;
  --ink3:   #3d3935;
  --ink4:   #5c5855;

  /* Typographies techniques */
  --ff-head: 'Rajdhani', 'Arial Narrow', sans-serif;
  --ff-body: 'DM Sans', system-ui, sans-serif;
  --ff-mono: 'JetBrains Mono', monospace;

  /* Ombres */
  --shadow-sm:  0 2px 14px rgba(26,22,20,.07);
  --shadow-md:  0 8px 36px rgba(26,22,20,.10);
  --shadow-red: 0 8px 32px rgba(224,0,27,.20);

  /* Rayons — style plus technique/net */
  --radius:    8px;
  --radius-sm: 5px;
  --radius-lg: 14px;

  --tr: .24s cubic-bezier(.4,0,.2,1);
}

/* ── Base ─────────────────────────────────────────────────────── */
body { font-family: var(--ff-body); background: var(--white); color: var(--ink); }
::selection      { background: var(--red); color: #fff; text-shadow: none; }
::-moz-selection { background: var(--red); color: #fff; text-shadow: none; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--off); }
::-webkit-scrollbar-thumb { background: var(--red); border-radius: 2px; }

/* ── Typographie ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-head) !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
}

.section-title {
  font-family: var(--ff-head) !important;
  font-size: clamp(2rem, 4vw, 3.4rem) !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  line-height: 1.05 !important;
  text-transform: uppercase !important;
}
.section-title em {
  color: var(--red) !important;
  font-style: italic !important;
  text-transform: none !important;
  font-family: var(--ff-body) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  font-size: .95em !important;
}

.section-tag {
  font-family: var(--ff-mono) !important;
  font-size: .65rem !important;
  letter-spacing: .2em !important;
  color: var(--taupe-d) !important;
  background: var(--taupe-pale) !important;
  padding: .28rem .85rem .28rem .6rem !important;
  border-radius: 3px !important;
  border: 1px solid rgba(160,146,130,.2) !important;
}
.section-tag::before { background: var(--taupe) !important; width: 12px !important; }

.body-lg, .body { font-family: var(--ff-body) !important; }

/* ── Ligne dynamique — motif logo en fond ───────────────────── */
/* Reproduit l'effet "rayons" du logo en très subtil sur certaines sections */
.section-padding:nth-of-type(odd)::after,
.section-off::after {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 40%; height: 100%;
  background:
    linear-gradient(145deg,
      transparent 30%,
      rgba(160,146,130,.04) 50%,
      rgba(160,146,130,.07) 55%,
      rgba(160,146,130,.04) 60%,
      transparent 70%
    );
  pointer-events: none; z-index: 0;
}
.section-padding { position: relative; }
.section-off     { position: relative; }

/* ── Navbar technique ─────────────────────────────────────────── */
#mainNav {
  background: rgba(255,255,255,.97) !important;
  border-bottom: 2px solid var(--stone) !important;
  transition: box-shadow .25s, border-color .25s !important;
}
#mainNav.nav-scrolled {
  box-shadow: 0 4px 24px rgba(26,22,20,.08) !important;
  border-bottom-color: var(--red) !important;
}

/* ── Logo animations ─────────────────────────────────────────── */
@keyframes broc-logo-enter {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes broc-logo-enter-footer {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Navbar logo — Red Blade ─────────────────────────────────── */
.navbar-brand-logo {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  background: transparent !important;
  background-image: none !important;
  border-left: 3px solid #e0001b !important;
  border-radius: 0 !important;
  padding: 2px 8px !important;
  box-shadow: none !important;
  width: auto !important;
  max-width: 180px !important;
  height: auto !important;
  overflow: visible !important;
  animation: broc-logo-enter .55s cubic-bezier(.22,1,.36,1) both !important;
  transition: transform .3s cubic-bezier(.22,1,.36,1) !important;
}
.navbar-brand-logo img {
  height: 46px !important;
  width: auto !important;
  display: block !important;
  transition: filter .3s ease, transform .3s cubic-bezier(.22,1,.36,1) !important;
}
.navbar-brand, .navbar-brand:hover, .navbar-brand:focus {
  color: inherit !important;
  text-decoration: none !important;
  outline: none !important;
}
.navbar-brand:hover .navbar-brand-logo {
  transform: translateX(2px) !important;
  filter: none !important;
  box-shadow: none !important;
  border-left-color: #e0001b !important;
}
.navbar-brand:hover .navbar-brand-logo img {
  filter: brightness(1.04) !important;
  transform: scale(1.04) !important;
}
.navbar-brand-logo + .navbar-brand-text { display: none !important; }
.brand-name {
  font-family: var(--ff-head) !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}
.brand-tag { font-family: var(--ff-mono) !important; font-size: .62rem !important; letter-spacing: .08em !important; color: var(--ink4) !important; }
@media (max-width: 767px) {
  .navbar-brand-logo { padding: 3px 7px !important; }
  .navbar-brand-logo img { height: 40px !important; }
}

/* Nav links */
.nav-lnk {
  font-family: var(--ff-head) !important;
  font-weight: 600 !important;
  font-size: .8rem !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--ink3) !important;
  border-radius: 4px !important;
  transition: color .18s, background .18s !important;
}
.nav-lnk:hover, .nav-lnk.is-active {
  color: var(--red) !important;
  background: var(--red-pale) !important;
}
.nav-lnk.is-active::after {
  content: '';
  position: absolute; bottom: -2px; left: 15%; right: 15%;
  height: 2px; background: var(--red); border-radius: 1px;
}

/* Dropdown panel */
.nav-dropdown-panel {
  border-radius: 6px !important;
  border: 1px solid var(--stone) !important;
  border-top: 2px solid var(--red) !important;
  box-shadow: 0 16px 48px rgba(26,22,20,.12) !important;
}
.drop-item { border-radius: 4px !important; }
.drop-item:hover { background: var(--off) !important; transform: translateX(4px) !important; }
.drop-icon { background: var(--off) !important; border-radius: 5px !important; }

/* CTA navbar */
.btn-nav-cta {
  font-family: var(--ff-head) !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  border-radius: 4px !important;
  background: var(--red) !important;
  border-color: var(--red) !important;
  transition: all .18s ease !important;
}
.btn-nav-cta:hover {
  background: var(--red-d) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-red) !important;
}

/* ════════════════════════════════════════════════════════════════
   HERO — Full HD 1920×1200 · Sinusoïdal · Palette gris logo
   Greys logo : #c8c8c8 (clair) · #8a8a8a (moyen) · #424246 (sombre)
   Animations : sin(x) 8 keyframes · fréquences non-harmoniques
   ════════════════════════════════════════════════════════════════ */

/*
  ── Onde sinusoïdale fond (période 22s · amplitude ±4%)
     8 points = sin(0°,45°,90°,135°,180°,225°,270°,315°)
     timing: linear → la courbe des keyframes trace le sinus
*/
@keyframes heroSine {
  0%     { background-position: center 33%;    }  /* sin(0)   = 0      */
  12.5%  { background-position: center 35.8%;  }  /* sin(45)  = +0.707 */
  25%    { background-position: center 37%;    }  /* sin(90)  = +1     */
  37.5%  { background-position: center 35.8%;  }  /* sin(135) = +0.707 */
  50%    { background-position: center 33%;    }  /* sin(180) = 0      */
  62.5%  { background-position: center 30.2%;  }  /* sin(225) = -0.707 */
  75%    { background-position: center 29%;    }  /* sin(270) = -1     */
  87.5%  { background-position: center 30.2%;  }  /* sin(315) = -0.707 */
  100%   { background-position: center 33%;    }  /* sin(360) = 0      */
}

/*
  ── Oscillation overlay (période 14s · fréquence ≠ fond)
     Deux fréquences non-harmoniques → effet battement naturel
*/
@keyframes overlayOscil {
  0%,100% { opacity: 1;   }
  25%     { opacity: .93; }
  50%     { opacity: .86; }
  75%     { opacity: .93; }
}

/*
  ── Flottement sinusoïdal collage (période 9s · amplitude ±7px)
     Indépendant des deux autres → 3 fréquences = richesse organique
*/
@keyframes hpcFloat {
  0%     { transform: translateY(0px);    }  /* sin(0)   — amplitude ±3.5px, souple */
  12.5%  { transform: translateY(-2.5px); }  /* sin(45)  */
  25%    { transform: translateY(-3.5px); }  /* sin(90)  */
  37.5%  { transform: translateY(-2.5px); }  /* sin(135) */
  50%    { transform: translateY(0px);    }  /* sin(180) */
  62.5%  { transform: translateY(2.5px);  }  /* sin(225) */
  75%    { transform: translateY(3.5px);  }  /* sin(270) */
  87.5%  { transform: translateY(2.5px);  }  /* sin(315) */
  100%   { transform: translateY(0px);    }  /* sin(360) */
}

/* ── Apparition one-shot du collage (entrée) ── */
@keyframes hpcSlideIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0px);  }
}

/* ── Pulsation douce dot rouge (période 3.2s) ── */
@keyframes hpcPulse {
  0%,100% { opacity:.9; transform:scale(1);   box-shadow:0 0 7px rgba(224,0,27,.7); }
  50%     { opacity:.5; transform:scale(.68); box-shadow:0 0 2px rgba(224,0,27,.3); }
}

/* Fond principal : bâtiment réel + onde sinusoïdale */
.hero-section {
  position: relative !important;
  overflow: hidden !important;
  aspect-ratio: unset !important;
  min-height: unset !important;
  max-height: none !important;
  height: auto !important;
  padding-top: calc(var(--nav-h, 68px) + 2.5rem) !important;
  padding-bottom: 2.5rem !important;
  background-color: #0d0e12 !important;
  background-image: none !important;
  animation: heroSine 22s linear infinite;
}
/* Photo de fond — flou fort + assombrie + désaturée pour rendu premium moderne */
.hero-bg-photo {
  position: absolute; inset: 0; z-index: 0;
  background-image: url('../img/hero-building.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 58%;
  filter: blur(1.5px) brightness(.92) saturate(1.08);
  transform: scale(1.04);   /* évite les halos de flou sur les bords */
  pointer-events: none;
}

/* Couche 1 : overlay multi-couches — vignette bords + gradient gris→noir */
.hero-section::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background:
    /* ① Voile global très léger — unifie sans étouffer */
    linear-gradient(0deg, rgba(4,6,16,.10) 0%, rgba(4,6,16,.10) 100%),
    /* ② Vignette douce — contours légèrement sombres */
    radial-gradient(ellipse 110% 95% at 50% 50%,
      transparent        38%,
      rgba(3,5,14,.14)  65%,
      rgba(2,4,12,.34) 100%
    ),
    /* ③ Dégradé bas → noir doux — séparation propre avec le reste de page */
    linear-gradient(180deg,
      transparent        0%,
      transparent       55%,
      rgba(2,4,12,.42)  84%,
      rgba(1,2,8,.58)  100%
    ),
    /* ④ Zone texte gauche — fond semi-opaque pour lisibilité maximale */
    linear-gradient(105deg,
      rgba(4,7,20,.64)   0%,
      rgba(4,7,20,.40)  30%,
      rgba(4,7,20,.10)  50%,
      transparent        62%
    ),
    /* ⑤ Halo rouge discret — accent de marque bas-gauche */
    radial-gradient(ellipse 45% 40% at 0% 92%, rgba(200,0,28,.22) 0%, transparent 60%);
  animation: overlayOscil 14s linear infinite;
  pointer-events: none;
}

/* Couche 2 : liseré bas gris→noir — prépare transition vers marquee */
.hero-section::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 56px;
  background: linear-gradient(180deg,
    transparent          0%,
    rgba(4,4,8,.72)     65%,
    rgba(2,2,4,.94)    100%
  );
  z-index: 1;
  pointer-events: none;
}

.hero-bg-shape { display: none !important; }
.hero-bg-grid  { display: none !important; }

/* ── Hero Slider FHD (colonne droite) ──────────────────────────── */
.hero-slider {
  position: relative;
  width: 100%;
  max-width: 560px;
  height: 420px;
  border-radius: 18px;
  overflow: hidden;
  margin-top: -8px;
  margin-left: auto;
  margin-right: -3%;      /* décalage léger vers droite → effet hors-cadre */
  box-shadow: 0 0 0 1px rgba(200,200,200,.12); /* outline subtil, pas de shadow */
  /* Entrance + flottement souple */
  animation: hpcSlideIn .75s .25s both ease-out, hpcFloat 11s 1.2s linear infinite;
}

/* Slides — crossfade souple */
.hs-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(.25,.46,.45,.94);
}
.hs-slide.active { opacity: 1; }

.hs-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Overlay sur chaque slide — encadrement naturel des photos */
.hs-slide::after {
  content: '';
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(180deg,
      rgba(10,11,16,.12)  0%,
      transparent         38%,
      rgba(10,11,16,.52) 100%
    ),
    linear-gradient(90deg,
      rgba(10,11,16,.10)  0%,
      transparent         20%,
      transparent         80%,
      rgba(10,11,16,.10) 100%
    );
  pointer-events: none;
  border-radius: inherit;
}

/* Ken Burns — zoom très doux sur la slide active */
.hs-slide.active img {
  animation: kenBurns 8s ease-out both;
}
@keyframes kenBurns {
  from { transform: scale(1.035); }
  to   { transform: scale(1.000); }
}

/* Caption */
.hs-caption {
  position: absolute;
  bottom: 48px; left: 16px; right: 16px;
  background: rgba(42,42,46,.78);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(200,200,200,.18);
  border-left: 3px solid #e0001b;
  color: #e8e8e8;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 6px;
  pointer-events: none;
  z-index: 4;
}

/* Badge qualité — gris argenté */
.hpc-badge {
  position: absolute;
  top: 16px; right: 16px;
  background: rgba(48,48,52,.82);
  border: 1.5px solid rgba(224,0,27,.38);
  backdrop-filter: blur(12px);
  color: #e8e8e8;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  z-index: 6;
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 4px 18px rgba(42,42,46,.45);
  transition: opacity .4s ease;
}
.hpc-badge .hpc-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #e0001b;
  flex-shrink: 0;
  animation: hpcPulse 3.2s ease-in-out infinite;
}

/* Barre de progression rouge en bas */
.hs-progress {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(200,200,200,.15);
  z-index: 8;
}
.hs-bar {
  height: 100%;
  width: 0%;
  background: #e0001b;
  border-radius: 0 2px 2px 0;
}

/* Dots — gris argenté + rouge actif */
.hs-dots {
  position: absolute;
  bottom: 10px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 7px; z-index: 7;
}
.hs-dots span {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(200,200,200,.40);
  cursor: pointer;
  transition: background .3s, width .3s;
}
.hs-dots span.active {
  background: #e0001b;
  width: 18px;
  border-radius: 4px;
}

/* ── Strip mobile (< lg) — HORS de la hero-section, sous le texte ─ */
.hero-mobile-strip {
  height: 200px;
  overflow: hidden;
  margin-top: 0;        /* collé à la hero-section qui finit juste au-dessus */
  position: relative;
  background: #0d0e12;  /* couleur fallback identique au bas de la hero */
}
.hero-mobile-strip img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 38%;
  display: block;
  opacity: .9;          /* plus visible sur mobile */
}
/* Dégradé haut (raccord avec hero) + bas (raccord avec marquee) */
.hero-mobile-strip::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(4,4,8,.80)    0%,     /* haut : noir profond = raccord hero */
      rgba(4,4,8,.20)   28%,
      transparent        50%,
      rgba(4,4,8,.18)   75%,
      rgba(4,4,8,.55)  100%     /* bas : fond sombre avant marquee */
    );
  pointer-events: none;
}

/* ── Responsive Hero — toutes tailles d'écran ───────────────────── */

/* xl 1200+ */
@media (min-width: 1200px) {
  .hero-slider { max-width: 440px; height: 340px; }
}

/* lg 992–1199px */
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-section { min-height: unset !important; height: auto !important; aspect-ratio: unset !important; }
  .hero-slider  { max-width: 340px; height: 260px; margin-right: 0; border-radius: 14px; }
  .hs-caption   { font-size: .62rem; padding: 6px 10px; bottom: 38px; }
  .hero-title   { font-size: clamp(2.6rem, 6vw, 5.2rem) !important; }
}

/* md 768–991px */
@media (min-width: 768px) and (max-width: 991px) {
  .hero-section { min-height: unset !important; height: auto !important; aspect-ratio: unset !important; }
  .hero-slider  { max-width: 280px; height: 215px; margin-right: 0; border-radius: 12px; }
  .hs-caption   { font-size: .60rem; padding: 5px 9px; bottom: 34px; }
  .hpc-badge    { font-size: .66rem; padding: 7px 12px; }
  .hero-title   { font-size: clamp(2.4rem, 7vw, 4.4rem) !important; }
}

/* < 768px mobile : animation arrêtée → image statique, position fixée */
@media (max-width: 767px) {
  .hero-section {
    min-height: unset !important;
    height: auto !important;
    aspect-ratio: unset !important;
    animation: none !important;
    padding-top: calc(var(--nav-h-mob, 58px) + 1.5rem) !important;
    padding-bottom: 2rem !important;
  }
  .hero-bg-photo {
    background-position: center 40% !important;        /* remonte légèrement → façade visible */
    animation: none !important;
  }
  .hero-title   { font-size: clamp(2.6rem, 11vw, 4.2rem) !important; }
  .hero-sub     { font-size: clamp(.82rem, 3vw, .96rem)  !important; }
  .hero-kpi     { gap: 1.2rem !important; }
  .hero-actions { flex-direction: column !important; align-items: flex-start !important; }
  .hero-actions .btn-broc-red,
  .hero-actions .btn-broc-outline { width: 100% !important; }
}

/* < 480px très petit mobile */
@media (max-width: 479px) {
  .hero-section { min-height: unset !important; height: auto !important; aspect-ratio: unset !important; }
  .hero-title   { font-size: clamp(2.2rem, 12vw, 3.4rem) !important; }
  .hero-badge   { font-size: .65rem !important; }
  .hero-kpi     { flex-wrap: wrap !important; gap: .9rem !important; }
}

.hero-title {
  font-family: var(--ff-head) !important;
  font-size: clamp(3rem, 6.5vw, 6rem) !important;    /* réduit : moins de hauteur, marquee visible */
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  line-height: .92 !important;
}
.hero-title {
  color: #ffffff !important;
  text-shadow:
    0 1px 5px rgba(0,0,0,.40),
    0 1px 2px rgba(0,0,0,.25) !important;
}
.hero-title .outline {
  -webkit-text-stroke: 2px rgba(255,255,255,.85) !important;
  color: transparent !important;
  text-shadow: none !important;
}
.hero-title .accent {
  color: #e0001b !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}

.hero-badge {
  font-family: var(--ff-mono) !important;
  border-radius: 6px !important;
  background: rgba(6,8,22,.78) !important;
  border-color: rgba(255,255,255,.28) !important;
  color: #ffffff !important;
  backdrop-filter: blur(12px) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.5) !important;
}
.hero-dot { background: #ff1a30 !important; }
.hero-sub {
  font-family: var(--ff-body) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 10px rgba(0,0,0,.80), 0 2px 24px rgba(0,0,0,.55) !important;
  font-size: clamp(.95rem, 1.6vw, 1.1rem) !important;
  line-height: 1.7 !important;
  font-weight: 500 !important;
}
/* KPI compteurs — blanc pur, lisible */
.hero-kpi { color: #ffffff !important; }
.hero-kpi-num { color: #ffffff !important; text-shadow: 0 2px 12px rgba(0,0,0,.60) !important; }
.hero-kpi-lbl { color: rgba(255,255,255,.80) !important; letter-spacing: .1em !important; font-weight: 600 !important; text-shadow: 0 1px 6px rgba(0,0,0,.55) !important; }

/* Animations d'entrée hero */
@keyframes techSlide {
  from { opacity: 0; transform: translateY(22px) skewY(.5deg); }
  to   { opacity: 1; transform: translateY(0) skewY(0); }
}
.hero-section .hero-badge   { animation: techSlide .6s .1s both ease-out; }
.hero-section .hero-title   { animation: techSlide .7s .22s both ease-out; }
.hero-section .hero-sub     { animation: techSlide .6s .38s both ease-out; }
.hero-section .hero-actions { animation: techSlide .6s .5s both ease-out; }
.hero-section .hero-kpi     { animation: techSlide .6s .62s both ease-out; }

/* ── Hero buttons — lisibles sur fond photo ──────────────────────── */
.hero-section .btn-broc-red {
  background: #e0001b !important;
  border-color: #e0001b !important;
  color: #ffffff !important;
  box-shadow: 0 4px 18px rgba(224,0,27,.50) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.30) !important;
}
.hero-section .btn-broc-red:hover {
  background: #b80017 !important;
  border-color: #b80017 !important;
  box-shadow: 0 6px 26px rgba(224,0,27,.65) !important;
}
.hero-section .btn-broc-outline {
  border-color: rgba(255,255,255,.75) !important;
  color: #ffffff !important;
  background: rgba(10,12,28,.45) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 2px 14px rgba(0,0,0,.35) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.55) !important;
}
.hero-section .btn-broc-outline:hover {
  background: #e0001b !important;
  border-color: #e0001b !important;
  color: #fff !important;
  box-shadow: 0 6px 22px rgba(224,0,27,.45) !important;
}

/* ── Buttons ───────────────────────────────────────────────────── */
.btn-broc-red, .btn-broc-outline, .btn-broc-white {
  font-family: var(--ff-head) !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  border-radius: var(--radius-sm) !important;
  transition: all .2s ease !important;
}
.btn-broc-red {
  background: var(--red) !important;
  border-color: var(--red) !important;
  box-shadow: 0 3px 14px rgba(224,0,27,.25) !important;
}
.btn-broc-red:hover {
  background: var(--red-d) !important;
  border-color: var(--red-d) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(224,0,27,.35) !important;
}
.btn-broc-outline {
  color: var(--red) !important;
  border-color: var(--red) !important;
}
.btn-broc-outline:hover {
  background: var(--red) !important;
  color: #fff !important;
  transform: translateY(-3px) !important;
}

/* ── Stat bar ──────────────────────────────────────────────────── */
.stat-bar {
  background: var(--ink) !important;
  border-top: 3px solid var(--red) !important;
  position: relative; overflow: hidden;
}
/* Lignes dynamiques dans le stat bar */
.stat-bar::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    90deg, transparent, transparent 120px,
    rgba(255,255,255,.015) 120px, rgba(255,255,255,.015) 121px
  );
}
.stat-num {
  font-family: var(--ff-head) !important;
  font-size: clamp(2rem, 4.5vw, 3rem) !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  color: var(--white) !important;
}
.stat-lbl {
  font-family: var(--ff-mono) !important;
  color: var(--taupe-l) !important;
  letter-spacing: .15em !important;
}
.stat-item::after {
  content: '';
  position: absolute; right: 0; top: 20%; bottom: 20%;
  width: 1px; background: rgba(255,255,255,.06);
}
.stat-item:last-child::after { display: none; }
.stat-item { position: relative; }

/* ── Marquee ───────────────────────────────────────────────────── */
.marquee-wrap {
  background: var(--red) !important;
  border-top: 1px solid rgba(255,255,255,.1) !important;
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
}
.marquee-item {
  font-family: var(--ff-mono) !important;
  color: rgba(255,255,255,.9) !important;
  letter-spacing: .2em !important;
}

/* ── Page header ───────────────────────────────────────────────── */
.page-header {
  background: var(--ink) !important;
  border-bottom: 3px solid var(--red) !important;
  position: relative; overflow: hidden;
}
/* Rayons logo dans le header */
.page-header::before {
  content: '';
  position: absolute; top: -30%; right: -5%;
  width: 60%; height: 200%;
  background:
    conic-gradient(from 210deg at 75% 50%,
      transparent 0deg,
      rgba(160,146,130,.08) 4deg, rgba(160,146,130,.14) 7deg,
      rgba(160,146,130,.08) 10deg, transparent 14deg,
      transparent 19deg,
      rgba(160,146,130,.06) 23deg, rgba(160,146,130,.11) 26deg,
      rgba(160,146,130,.06) 29deg, transparent 34deg,
      transparent 360deg
    );
  pointer-events: none; z-index: 1;
}
.page-header h1 {
  font-family: var(--ff-head) !important;
  font-size: clamp(2.2rem, 5.5vw, 4.5rem) !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
.page-header h1 em { text-transform: none; }

/* ── Section tag ───────────────────────────────────────────────── */
.section-tag {
  font-family: var(--ff-mono) !important;
  font-size: .65rem !important;
  letter-spacing: .14em !important;
  color: var(--taupe-d) !important;
  background: var(--taupe-pale) !important;
  padding: .3rem .9rem .3rem .65rem !important;
  border-radius: 3px !important;
  border: 1px solid rgba(160,146,130,.22) !important;
}
.section-tag::before {
  background: var(--taupe) !important;
  width: 12px !important;
  height: 2px !important;
}

/* ── Numéros 01 02 03 — VISIBLES ──────────────────────────────── */
.exp-num {
  font-family: var(--ff-head) !important;
  font-size: clamp(3.5rem, 6vw, 5.5rem) !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  color: rgba(160,146,130,.30) !important;
  line-height: 1 !important;
  margin-bottom: .75rem !important;
  transition: color .25s ease !important;
}
.card-broc:hover .exp-num {
  color: var(--red) !important;
}

/* ── Cards ─────────────────────────────────────────────────────── */
.card-broc {
  background: var(--white) !important;
  border: 1px solid var(--stone) !important;
  border-radius: var(--radius) !important;
  transition: all .22s ease !important;
  position: relative; overflow: hidden;
}
/* Barre rouge en haut qui apparaît au hover */
.card-broc::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--red);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.card-broc:hover::before { transform: scaleX(1); }
.card-broc:hover {
  border-color: rgba(224,0,27,.2) !important;
  box-shadow: 0 14px 44px rgba(224,0,27,.09) !important;
  transform: translateY(-5px) !important;
}
.card-title {
  font-family: var(--ff-head) !important;
  font-size: clamp(1.15rem, 2vw, 1.45rem) !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  margin-bottom: .6rem !important;
}
.card-text {
  font-family: var(--ff-body) !important;
  font-size: .89rem !important;
  color: var(--ink3) !important;
  line-height: 1.68 !important;
}

/* ── Product cards ─────────────────────────────────────────────── */
.prod-card {
  background: var(--off) !important;
  border: 1.5px solid var(--stone) !important;
  border-radius: var(--radius) !important;
  transition: all .22s ease !important;
  position: relative; overflow: hidden;
}
.prod-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--red);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.prod-card:hover::before { transform: scaleX(1); }
.prod-card:hover {
  background: var(--white) !important;
  border-color: rgba(224,0,27,.25) !important;
  box-shadow: 0 18px 56px rgba(224,0,27,.12) !important;
  transform: translateY(-6px) !important;
}
.prod-name {
  font-family: var(--ff-head) !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}
.prod-stamp {
  font-family: var(--ff-mono) !important;
  color: var(--red) !important;
  background: var(--red-pale) !important;
  border-radius: 3px !important;
}

/* ── CTA band — puissant ───────────────────────────────────────── */
.cta-band {
  background: var(--red) !important;
  position: relative; overflow: hidden;
}
/* Rayons logo dans le CTA */
.cta-band::before {
  content: '';
  position: absolute; top: -50%; right: -10%;
  width: 70%; height: 200%;
  background:
    conic-gradient(from 210deg at 70% 50%,
      transparent 0deg,
      rgba(255,255,255,.08) 4deg, rgba(255,255,255,.15) 7deg,
      rgba(255,255,255,.08) 10deg, transparent 14deg,
      transparent 19deg,
      rgba(255,255,255,.06) 23deg, rgba(255,255,255,.12) 26deg,
      rgba(255,255,255,.06) 29deg, transparent 34deg,
      transparent 360deg
    );
  pointer-events: none;
}
.cta-band h2 {
  font-family: var(--ff-head) !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
}
.cta-band h2 em { text-transform: none; }

/* ── Timeline ──────────────────────────────────────────────────── */
.timeline-wrap::before {
  background: linear-gradient(to bottom, var(--red), var(--taupe-l)) !important;
}
.tl-dot {
  border-color: var(--taupe-l) !important;
  background: var(--white) !important;
}
.tl-item:hover .tl-dot {
  background: var(--red) !important;
  border-color: var(--red) !important;
  transform: translateX(-5px) scale(1.3) !important;
  box-shadow: 0 0 0 5px rgba(224,0,27,.15) !important;
  transition: all .2s cubic-bezier(.34,1.56,.64,1) !important;
}
.tl-year {
  font-family: var(--ff-head) !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  font-size: .75rem !important;
}
.tl-title { font-family: var(--ff-head) !important; letter-spacing: .04em !important; text-transform: uppercase !important; }

/* ── Table ─────────────────────────────────────────────────────── */
.table-broc thead tr {
  background: var(--ink) !important;
  border-bottom: 2px solid var(--red) !important;
}
.table-broc thead th { font-family: var(--ff-head) !important; letter-spacing: .1em !important; }
.table-broc tbody tr:hover td { background: var(--red-pale) !important; }

/* ── Steps ─────────────────────────────────────────────────────── */
.step-num {
  font-family: var(--ff-head) !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  transition: all .22s cubic-bezier(.34,1.56,.64,1) !important;
}
.step-item:hover .step-num {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: #fff !important;
  transform: scale(1.1) !important;
  box-shadow: 0 6px 18px rgba(224,0,27,.3) !important;
}
.step-title { font-family: var(--ff-head) !important; letter-spacing: .05em !important; text-transform: uppercase !important; }

/* ── Testimonials ──────────────────────────────────────────────── */
.testimonial-card {
  border-radius: var(--radius) !important;
  transition: all .22s ease !important;
}
.testimonial-card:hover {
  border-color: rgba(224,0,27,.25) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(224,0,27,.09) !important;
}
.testimonial-card::before {
  font-family: var(--ff-head) !important;
  color: rgba(160,146,130,.18) !important;
  font-size: 7rem !important;
}
.test-avatar { background: var(--red) !important; border-radius: 4px !important; }
.test-role { font-family: var(--ff-mono) !important; color: var(--taupe-d) !important; }

/* ── Ressource cards ───────────────────────────────────────────── */
.resource-title { font-family: var(--ff-head) !important; text-transform: uppercase !important; letter-spacing: .04em !important; }
.resource-card { border-radius: var(--radius) !important; transition: all .22s ease !important; }
.resource-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(224,0,27,.2) !important;
  box-shadow: 0 12px 40px rgba(224,0,27,.09) !important;
}

/* ── Direction / Team cards ────────────────────────────────────── */
.dir-name  { font-family: var(--ff-head) !important; letter-spacing: .04em !important; text-transform: uppercase !important; }
.dir-role  { font-family: var(--ff-mono) !important; color: var(--taupe-d) !important; }
.dir-avatar { background: var(--red) !important; border-radius: 4px !important; font-family: var(--ff-head) !important; }
.dir-card { border-radius: var(--radius) !important; transition: all .22s ease !important; }
.dir-card:hover { transform: translateY(-3px) !important; border-color: rgba(224,0,27,.2) !important; box-shadow: 0 10px 36px rgba(224,0,27,.09) !important; }

/* ── Footer ─────────────────────────────────────────────────────── */
footer {
  background: var(--ink) !important;
  border-top: 3px solid var(--red) !important;
}
.footer-brand { font-family: var(--ff-head) !important; letter-spacing: .08em !important; text-transform: uppercase !important; }
.footer-brand em { color: var(--red) !important; }
.footer-heading { font-family: var(--ff-mono) !important; letter-spacing: .18em !important; color: rgba(255,255,255,.82) !important; display: inline-block !important; position: relative !important; padding-bottom: .6rem !important; }
.footer-links a { font-family: var(--ff-body) !important; transition: color .15s, padding-left .15s !important; }
.footer-links a:hover { color: var(--red) !important; padding-left: 5px !important; }
.footer-cert-badge { background: var(--red) !important; border-radius: 3px !important; font-family: var(--ff-mono) !important; }

/* ── Footer logo — Brand Badge ───────────────────────────────── */
.footer-logo-wrap {
  display: inline-block !important;
  background: #ffffff !important;
  background-image: none !important;
  border-radius: 6px !important;
  clip-path: none !important;
  padding: 8px 14px !important;
  border-top: 3px solid #e0001b !important;
  border-left: 1px solid rgba(224,0,27,.25) !important;
  border-right: 1px solid rgba(224,0,27,.25) !important;
  border-bottom: 1px solid rgba(224,0,27,.15) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.3) !important;
  text-decoration: none !important;
  line-height: 0 !important;
  animation: broc-logo-enter-footer .6s .2s cubic-bezier(.22,1,.36,1) both !important;
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease !important;
}
.footer-logo-img {
  height: 52px !important;
  width: auto !important;
  display: block !important;
  transition: filter .3s ease !important;
}
.footer-logo-wrap:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 12px 36px rgba(224,0,27,.35), 0 4px 16px rgba(0,0,0,.4) !important;
  filter: none !important;
}
.footer-logo-wrap:hover .footer-logo-img {
  filter: brightness(1.04) !important;
}

/* ── Form ──────────────────────────────────────────────────────── */
.form-control-broc {
  border-radius: var(--radius-sm) !important;
  font-family: var(--ff-body) !important;
  transition: border-color .18s, box-shadow .18s !important;
}
.form-control-broc:focus {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 3px rgba(224,0,27,.10) !important;
}
.form-label-broc { font-family: var(--ff-mono) !important; letter-spacing: .12em !important; }

/* ── Chips pays ────────────────────────────────────────────────── */
.chip.chip-reg { border-color: rgba(224,0,27,.35) !important; background: var(--red-pale) !important; color: var(--red) !important; }
.chip.chip-reg:hover { background: rgba(224,0,27,.12) !important; border-color: var(--red) !important; color: var(--red) !important; }
.chip:hover { transform: translateY(-2px) !important; }

/* ── Benefit list ──────────────────────────────────────────────── */
.benefit-list li::before { background: var(--red) !important; }

/* ── Notice box ────────────────────────────────────────────────── */
.notice-box { border-left-color: var(--red) !important; border-radius: var(--radius-sm) !important; }

/* ── Loader ────────────────────────────────────────────────────── */
.loader-brand { font-family: var(--ff-head) !important; letter-spacing: .12em !important; text-transform: uppercase !important; }
.loader-fill  { background: var(--red) !important; }

/* ── Read progress ─────────────────────────────────────────────── */
#read-progress { background: linear-gradient(90deg, var(--red-d), var(--red)) !important; }

/* ── Focus visible ─────────────────────────────────────────────── */
:focus-visible { outline-color: var(--red) !important; }

/* ── Scroll top ────────────────────────────────────────────────── */
#scroll-top:hover { background: var(--red) !important; border-color: var(--red) !important; color: #fff !important; }

/* ── Search ────────────────────────────────────────────────────── */
.search-inner { border-radius: var(--radius) !important; border-top: 2px solid var(--red) !important; }
.search-result-item:hover { background: var(--red-pale) !important; color: var(--red) !important; }
.search-hint-chip:hover { border-color: var(--red) !important; color: var(--red) !important; }

/* ── Badges ────────────────────────────────────────────────────── */
.badge-double { background: var(--red) !important; border-radius: 3px !important; font-family: var(--ff-mono) !important; }
.badge-single { border-radius: 3px !important; font-family: var(--ff-mono) !important; }
.formula-cell { font-family: var(--ff-mono) !important; color: var(--red) !important; }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .hero-title {
    font-size: clamp(3.2rem, 12vw, 5rem) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   GRADIENTS MODERNES — Couche décorative premium
   Principe : gradients sur body, sections, cartes, hero, footer
   Palette  : rouge #e0001b · taupe #a09282 · encre #1a1614
   ═══════════════════════════════════════════════════════════════ */

/* ── 0. SECTION-PADDING (blanc) — voiles gris haut/bas ──────── */
/* Overridden by !important on .section-dark / .section-off / .section-stone */
.section-padding {
  background:
    /* Voile gris en haut — raccord avec section sombre au-dessus */
    linear-gradient(180deg, rgba(185,188,212,.11) 0%, transparent 9%),
    /* Voile gris en bas — transition douce vers la section suivante */
    linear-gradient(0deg,   rgba(185,188,212,.09) 0%, transparent 7%),
    #ffffff;
}

/* ── Newsletter — padding réduit — toutes pages (homepage + page-newsletter) ─── */
#homepage-newsletter,
#page-newsletter { padding: clamp(.8rem, 1.8vw, 1.4rem) 0 !important; }

/* ── CTA band — position relative pour pseudo-elements ─────────── */
.cta-band { position: relative; }

/* ── CTA band → newsletter : fondu rouge vers noir en bas ─────── */
.cta-band::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 48px;
  background: linear-gradient(180deg, transparent 0%, rgba(6,7,12,.28) 100%);
  pointer-events: none; z-index: 1;
}

/* ── Newsletter dark : top fondu depuis cta-band — toutes pages ─── */
#homepage-newsletter,
#page-newsletter { position: relative; }
#homepage-newsletter::before,
#page-newsletter::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 70px;
  background: linear-gradient(180deg, rgba(6,7,12,.38) 0%, transparent 100%);
  pointer-events: none; z-index: 1;
}

/* ── 1. BODY — gradient mesh gris subtil sur blanc ──────────── */
body {
  background:
    /* Coins gris très légers pour donner de la profondeur aux pages blanches */
    radial-gradient(ellipse 90% 55% at 0% 0%,   rgba(190,192,210,.07)  0%, transparent 60%),
    radial-gradient(ellipse 65% 65% at 100% 25%, rgba(185,188,208,.06)  0%, transparent 55%),
    radial-gradient(ellipse 70% 40% at 50% 100%, rgba(190,192,210,.05)  0%, transparent 55%),
    radial-gradient(ellipse 80% 50% at 0% 0%,   rgba(224,0,27,.025)    0%, transparent 60%),
    #ffffff !important;
}

/* ── 2. HERO — renforcement image + sécurité toutes résolutions ── */
.hero-section {
  background-image:  url('../img/hero-building.jpg') !important; /* force affichage toutes tailles */
  background-size:   cover !important;
  background-repeat: no-repeat !important;
  background-color:  #0d0e12 !important;                         /* fallback si image absente */
  /* background-position intentionnellement absent ici → géré par heroSine ou media query */
}

/* ── 3. SECTION-OFF — gradient chaud + nuance gris haut/bas ─── */
.section-off {
  background:
    /* Voile gris en haut — raccord avec sections sombres au-dessus */
    linear-gradient(180deg, rgba(200,202,218,.12) 0%, transparent 7%),
    /* Voile gris en bas — transition douce vers la section suivante */
    linear-gradient(0deg,   rgba(200,202,218,.10) 0%, transparent 6%),
    /* Gradient chaud directionnel */
    linear-gradient(135deg, #f7f4f1 0%, #f1ece7 50%, #ece7e1 100%) !important;
  position: relative;
}
.section-off::before {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 50%; height: 100%;
  background:
    radial-gradient(ellipse at 80% 30%, rgba(160,146,130,.10) 0%, transparent 60%),
    radial-gradient(ellipse at 85% 80%, rgba(190,192,210,.06) 0%, transparent 50%);
  pointer-events: none;
}

/* ── 4. SECTION-STONE — gradient pierre + voiles gris ──────── */
.section-stone {
  background:
    linear-gradient(180deg, rgba(195,197,215,.10) 0%, transparent 6%),
    linear-gradient(0deg,   rgba(195,197,215,.08) 0%, transparent 5%),
    linear-gradient(120deg, #ece8e4 0%, #e4ded7 60%, #dcd6ce 100%) !important;
  position: relative;
}

/* ── 5. STAT BAR — gradient gris-bleu profond ───────────────── */
.stat-bar {
  background:
    radial-gradient(ellipse 55% 70% at 50% 50%, rgba(24,26,38,.85) 0%, transparent 65%),
    radial-gradient(ellipse 35% 40% at 12% 25%, rgba(180,185,215,.04) 0%, transparent 50%),
    linear-gradient(150deg,
      #0c0d12  0%,
      #141520 30%,
      #1a1b26 55%,
      #12131a 80%,
      #0c0d12 100%
    ) !important;
  border-top: 2px solid var(--red) !important;
  overflow: visible !important;
  box-shadow: 0 18px 55px rgba(6,7,12,.70) !important;
}
/* Photo du bâtiment en texture très subtile */
.stat-bar::after {
  content: '';
  position: absolute; inset: 0;
  background: url('../img/hero-building.jpg') center / cover no-repeat;
  opacity: .055;
  mix-blend-mode: luminosity;
  pointer-events: none; z-index: 0;
}

/* ── 6. PAGE HEADER — gradient gris-bleu avec halo rouge ─────── */
.page-header {
  background:
    radial-gradient(ellipse 48% 110% at 100% 50%, rgba(224,0,27,.16) 0%, transparent 58%),
    radial-gradient(ellipse 65% 55% at 0%   80%, rgba(180,185,215,.06) 0%, transparent 52%),
    linear-gradient(140deg,
      #0e0f14  0%,
      #181924 55%,
      #0e0f14 100%
    ) !important;
}

/* ── 7. CARDS — gradient subtil sur le fond ─────────────────── */
.card-broc {
  background:
    linear-gradient(145deg, #ffffff 0%, #faf8f6 100%) !important;
}
.card-broc:hover {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(192,57,43,.10) 0%, transparent 60%),
    rgba(255,255,255,.04) !important;
}

/* ── 8. PRODUCT CARDS — gradient chaud au hover ─────────────── */
.prod-card {
  background:
    linear-gradient(145deg, #f8f6f3 0%, #f2ede8 100%) !important;
}
.prod-card:hover {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(224,0,27,.05) 0%, transparent 55%),
    linear-gradient(145deg, #ffffff 0%, #fdf4f4 100%) !important;
}

/* ── 9. CTA BAND — gradient rouge cinématique ───────────────── */
.cta-band {
  background:
    radial-gradient(ellipse 70% 100% at 100% 50%, rgba(255,80,60,.3) 0%, transparent 55%),
    radial-gradient(ellipse 50% 80%  at 0%   30%, rgba(120,0,10,.35) 0%, transparent 55%),
    linear-gradient(135deg, #b8001a 0%, #e0001b 45%, #cc0018 100%) !important;
}

/* ── 10. FOOTER — gradient gris-bleu profond ─────────────────── */
footer {
  background:
    radial-gradient(ellipse 55% 45% at 100% 0%,  rgba(224,0,27,.11) 0%, transparent 52%),
    radial-gradient(ellipse 45% 35% at 0%   100%, rgba(180,185,215,.05) 0%, transparent 48%),
    linear-gradient(155deg,
      #0a0b10  0%,
      #121320 42%,
      #0e0f18 72%,
      #0a0b10 100%
    ) !important;
}

/* ── 11. TESTIMONIAL CARDS — gradient ivoire ─────────────────── */
.testimonial-card {
  background:
    linear-gradient(135deg, #ffffff 0%, #faf8f5 100%) !important;
}
.testimonial-card:hover {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(224,0,27,.04) 0%, transparent 60%),
    linear-gradient(135deg, #ffffff 0%, #fdf4f4 100%) !important;
}

/* ── 12. SEARCH OVERLAY — fond de verre blurré ───────────────── */
#search-overlay {
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, rgba(224,0,27,.08) 0%, transparent 55%),
    rgba(26,22,20,.72) !important;
}

/* ── 13. NAVBAR scrollée — bordure gradient ─────────────────── */
#mainNav.nav-scrolled {
  background:
    linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(252,250,248,.97) 100%) !important;
  box-shadow:
    0 4px 24px rgba(26,22,20,.08),
    0 1px 0 rgba(160,146,130,.12) !important;
}

/* ── 14. SECTION-DARK — gradient gris-bleu nuit ─────────────── */
.section-dark {
  background:
    radial-gradient(ellipse 65% 55% at 50% 0%,   rgba(24,26,40,.7) 0%, transparent 60%),
    radial-gradient(ellipse 45% 45% at 15% 80%,  rgba(180,185,215,.04) 0%, transparent 50%),
    linear-gradient(160deg,
      #0e0f14  0%,
      #14151e 45%,
      #1a1b28 65%,
      #0e0f14 100%
    ) !important;
}

/* ── 14b. SECTION-TESTIMONIALS — fond gris ardoise doux ────────── */
.section-testimonials {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(200,205,220,.10) 0%, transparent 60%),
    linear-gradient(160deg,
      #1e2030  0%,
      #252840 40%,
      #2a2d45 65%,
      #1e2030 100%
    ) !important;
}

/* ── 15. HORIZON CARDS — gradients distincts ─────────────────── */
.horizon-card:nth-child(1) {
  background:
    radial-gradient(ellipse at 80% 20%, rgba(180,185,215,.08) 0%, transparent 60%),
    linear-gradient(140deg, #0e0f14 0%, #181924 100%) !important;
}
.horizon-card:nth-child(2) {
  background:
    radial-gradient(ellipse at 80% 20%, rgba(255,80,60,.25) 0%, transparent 55%),
    linear-gradient(140deg, #b8001a 0%, #e0001b 100%) !important;
}
.horizon-card:nth-child(3) {
  background:
    linear-gradient(140deg, #f8f6f3 0%, #ede9e4 100%) !important;
}

/* ═══════════════════════════════════════════════════════════════
   TRANSITIONS ENTRE SECTIONS — fondu cohérent dark ↔ light
   ═══════════════════════════════════════════════════════════════ */

/* Marquee : ombre rouge vers le haut (continuité hero) */
.marquee-wrap {
  box-shadow:
    0 -6px 30px rgba(184,0,26,.55),  /* fondu vers le haut */
    0  6px 20px rgba(184,0,26,.30)   /* profondeur vers le bas */
  !important;
  position: relative; z-index: 2;
}

/* Section-off (Atouts) : fondu sombre en haut depuis stat-bar/section-dark */
.section-off::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 90px;
  background: linear-gradient(180deg, rgba(8,9,14,.18) 0%, transparent 100%);
  pointer-events: none; z-index: 1;
}

/* Section-dark : fondu entrant en haut + sortant en bas */
.section-dark { position: relative; }
.section-dark::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 80px;
  background: linear-gradient(180deg, rgba(6,7,12,.30) 0%, transparent 100%);
  pointer-events: none; z-index: 1;
}
.section-dark::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 80px;
  background: linear-gradient(0deg, rgba(6,7,12,.28) 0%, transparent 100%);
  pointer-events: none; z-index: 1;
}

/* Section-stone : raccord sombre en haut */
.section-stone::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 80px;
  background: linear-gradient(180deg, rgba(8,9,14,.14) 0%, transparent 100%);
  pointer-events: none; z-index: 1;
}

/* Section-padding (blanc) après section-off : fondu gris doux en haut */
.section-off + .section-padding::before,
.section-stone + .section-padding::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 55px;
  background: linear-gradient(180deg, rgba(180,183,208,.13) 0%, transparent 100%);
  pointer-events: none; z-index: 1;
}
/* Section-off / stone après blanc : raccord doux */
.section-padding + .section-off::before,
.section-padding + .section-stone::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 50px;
  background: linear-gradient(180deg, rgba(180,183,208,.11) 0%, transparent 100%);
  pointer-events: none; z-index: 1;
}
.section-off + .section-padding,
.section-stone + .section-padding,
.section-padding + .section-off,
.section-padding + .section-stone { position: relative; }

/* CTA band : texture photo machines en overlay subtil */
.cta-band::after {
  content: '';
  position: absolute; inset: 0;
  background: url('../img/hero-machines.jpg') center / cover no-repeat;
  opacity: .06;
  mix-blend-mode: luminosity;
  pointer-events: none; z-index: 0;
}

/* ── 16. MARQUEE — gradient rouge riche ──────────────────────── */
.marquee-wrap {
  background:
    radial-gradient(ellipse 70% 120% at 50% 50%, rgba(255,50,30,.2) 0%, transparent 60%),
    linear-gradient(90deg, #b8001a 0%, #e0001b 50%, #b8001a 100%) !important;
}

/* ── 17. LOADER — dark gradient ultra-moderne ─────────────────── */
#page-loader {
  background:
    radial-gradient(circle, rgba(255,255,255,.028) 1px, transparent 1px),
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(192,57,43,.07) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 80% 70%, rgba(80,90,140,.08) 0%, transparent 55%),
    linear-gradient(145deg, #0c0d14 0%, #111420 35%, #161825 65%, #0e0f18 100%) !important;
  background-size: 24px 24px, 100% 100%, 100% 100%, 100% 100% !important;
}
.loader-brand { color: rgba(240,240,244,.92) !important; letter-spacing: .12em !important; text-transform: uppercase !important; }
.loader-brand em { color: var(--red-l) !important; font-style: italic !important; }
.loader-bar { background: rgba(255,255,255,.08) !important; }
.loader-sub { color: rgba(255,255,255,.32) !important; }

/* ── 18. CALC WRAP — gradient subtil ─────────────────────────── */
.calc-wrap {
  background:
    linear-gradient(145deg, #f8f6f3 0%, #f0ebe5 100%) !important;
}
.calc-result {
  background:
    radial-gradient(ellipse 70% 80% at 50% 50%, rgba(224,0,27,.12) 0%, transparent 55%),
    radial-gradient(ellipse 60% 60% at 15% 80%, rgba(180,185,215,.06) 0%, transparent 50%),
    linear-gradient(150deg, #0e0f16 0%, #161728 55%, #0e0f16 100%) !important;
}

/* ── 19. DIR CARDS — gradient doux ───────────────────────────── */
.dir-card {
  background:
    linear-gradient(145deg, #ffffff 0%, #faf8f5 100%) !important;
}

/* ── 20. RESOURCE CARDS ───────────────────────────────────────── */
.resource-card {
  background:
    linear-gradient(145deg, #ffffff 0%, #faf8f5 100%) !important;
}

/* ── 21. SWOT — gradients par quadrant ───────────────────────── */
.swot-cell:nth-child(1) {
  background: linear-gradient(135deg, rgba(224,0,27,.08) 0%, rgba(224,0,27,.04) 100%) !important;
}
.swot-cell:nth-child(2) {
  background: linear-gradient(135deg, rgba(217,119,6,.07) 0%, rgba(217,119,6,.03) 100%) !important;
}
.swot-cell:nth-child(3) {
  background: linear-gradient(135deg, rgba(29,78,216,.07) 0%, rgba(29,78,216,.03) 100%) !important;
}
.swot-cell:nth-child(4) {
  background: linear-gradient(135deg, rgba(21,128,61,.07) 0%, rgba(21,128,61,.03) 100%) !important;
}

/* ── 22. COOKIE BANNER ────────────────────────────────────────── */
#cookie-banner {
  background:
    linear-gradient(135deg, #231e1b 0%, #1a1614 100%) !important;
}

/* ── 23. CONTACT FORM WRAP ───────────────────────────────────── */
.contact-form-wrap {
  background:
    linear-gradient(145deg, #f8f6f3 0%, #f2ece7 100%) !important;
}

/* ═══════════════════════════════════════════════════════════════
   ARABE — Identité visuelle Broc Nutrition · Marché MENA
   ───────────────────────────────────────────────────────────────
   Choix typographiques :
   · Titres   → IBM Plex Sans Arabic  (géométrique/technique, écho à Rajdhani)
   · Corps    → Noto Sans Arabic      (lisibilité optimale, neutre premium)
   · Mono     → JetBrains Mono        (codes, badges — inchangé)
   Design RTL cohérent avec l'identité rouge/taupe/encre de Broc
   ═══════════════════════════════════════════════════════════════ */

/* ── Variables surcharge arabe ──────────────────────────────── */
body.lang-ar {
  --ff-ar-head: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif;
  --ff-ar-body: 'Noto Sans Arabic', 'Arial', sans-serif;
  /* Ligne de base légèrement plus haute — confort lecture arabe */
  --lh-ar: 1.85;
}

/* ── Police universelle arabe ───────────────────────────────── */
body.lang-ar * {
  font-family: var(--ff-ar-body) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* ── Titres → IBM Plex Sans Arabic (caractère technique) ──────
   Conserve l'esprit "Rajdhani" industriel mais en arabe        */
body.lang-ar h1, body.lang-ar h2, body.lang-ar h3, body.lang-ar h4,
body.lang-ar h5, body.lang-ar h6,
body.lang-ar .section-title,
body.lang-ar .hero-title,
body.lang-ar .card-title,
body.lang-ar .prod-name,
body.lang-ar .stat-num,
body.lang-ar .footer-brand,
body.lang-ar .brand-name,
body.lang-ar .tl-title,
body.lang-ar .step-title,
body.lang-ar .page-header h1 {
  font-family: var(--ff-ar-head) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

/* ── Mono reste JetBrains pour les codes/badges (universel) ─── */
body.lang-ar .section-tag,
body.lang-ar .prod-stamp,
body.lang-ar .badge-double,
body.lang-ar .stat-lbl,
body.lang-ar .tl-year,
body.lang-ar .footer-heading,
body.lang-ar .btn-lang {
  font-family: var(--ff-ar-body) !important;
  font-weight: 600 !important;
}

/* ── Tailles typographiques adaptées à l'arabe ──────────────── */
body.lang-ar .hero-title {
  font-size: clamp(2.4rem, 6vw, 6rem) !important;
  line-height: 1.2 !important;
  word-spacing: .04em !important;
}
body.lang-ar .section-title {
  font-size: clamp(1.6rem, 3vw, 2.8rem) !important;
  line-height: 1.35 !important;
}
body.lang-ar .page-header h1 {
  font-size: clamp(1.8rem, 4vw, 3.6rem) !important;
  line-height: 1.25 !important;
}
body.lang-ar p, body.lang-ar li {
  font-size: 1rem !important;
  line-height: var(--lh-ar) !important;
}
body.lang-ar .card-title {
  font-size: clamp(1rem, 1.8vw, 1.3rem) !important;
  line-height: 1.4 !important;
}
body.lang-ar .card-text {
  font-size: .92rem !important;
  line-height: var(--lh-ar) !important;
}
body.lang-ar .nav-lnk {
  font-size: .82rem !important;
  font-weight: 600 !important;
}
body.lang-ar .stat-num {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem) !important;
}
body.lang-ar .body-lg { font-size: 1.08rem !important; line-height: var(--lh-ar) !important; }
body.lang-ar .hero-sub { font-size: clamp(.95rem, 1.5vw, 1.1rem) !important; line-height: var(--lh-ar) !important; }

/* ════════════════════════════════════════════════════════════════
   DIRECTION RTL — Cohérence complète
   ════════════════════════════════════════════════════════════════ */

/* ── Base HTML ──────────────────────────────────────────────── */
html[dir="rtl"] { direction: rtl; }
body.lang-ar { direction: rtl; text-align: right; }

/* ── Navbar RTL ─────────────────────────────────────────────── */

/* Force direction: ltr sur le nav pour que row-reverse soit prévisible
   (évite l'interférence de direction:rtl hérité du body) */
body.lang-ar #mainNav         { direction: ltr !important; }
/* Logo à droite, nav-actions à gauche via row-reverse */
body.lang-ar .nav-inner       { flex-direction: row-reverse !important; }
/* nav-desktop : nav-list à droite, actions à gauche */
body.lang-ar .nav-desktop     { flex-direction: row-reverse !important; }
/* Items menu : الرئيسية à l'extrême droite */
body.lang-ar .nav-list        { flex-direction: row-reverse !important; }
/* Actions : contact + langue inversés */
body.lang-ar .nav-actions     { flex-direction: row-reverse !important; }
/* Brand margin reset */
body.lang-ar .navbar-brand    { margin-left: 0 !important; margin-right: 0 !important; }

/* Liens nav — texte direction rtl pour l'arabe */
body.lang-ar .nav-lnk { direction: rtl; text-align: right; }
/* Dropdown text */
body.lang-ar .drop-text strong,
body.lang-ar .drop-text em    { direction: rtl; }

/* ── Dropdown RTL — positionnement et interaction ───────────── */

/* Annuler le left:50% + translateX(-50%) du LTR
   En RTL : le panel se positionne depuis la droite du nav-item */
body.lang-ar .nav-has-drop { position: relative; }

body.lang-ar .nav-dropdown-panel {
  left: auto !important;
  right: 50% !important;
  transform: translateX(50%) translateY(-6px) !important;
}

body.lang-ar .nav-has-drop:hover .nav-dropdown-panel,
body.lang-ar .nav-has-drop:focus-within .nav-dropdown-panel {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: all !important;
  transform: translateX(50%) translateY(0) !important;
}

/* S'assurer que le bridge hover fonctionne aussi en RTL */
body.lang-ar .nav-has-drop::after {
  left: 0; right: 0;
}

/* Drop items : icône à droite du texte en RTL */
body.lang-ar .drop-item {
  flex-direction: row-reverse;
  text-align: right;
}
body.lang-ar .drop-icon {
  margin-right: 0;
  margin-left: 0;
  flex-shrink: 0;
}
body.lang-ar .drop-text {
  flex: 1;
  text-align: right;
}
body.lang-ar .drop-text strong { text-align: right; }
body.lang-ar .drop-text em     { text-align: right; }
body.lang-ar .drop-arrow { margin-right: .35rem; margin-left: 0; }

/* Lang switch */
body.lang-ar .lang-switch { flex-direction: row-reverse; }

/* Compat anciennes règles (au cas où) */
body.lang-ar #mainNav .container-xl { flex-direction: row-reverse; }
body.lang-ar #mainNav .navbar-nav   { flex-direction: row-reverse !important; }
body.lang-ar #mainNav .nav-right    { flex-direction: row-reverse !important; }
body.lang-ar .brand-wrap            { flex-direction: row-reverse; }

/* ── Bouton AR actif ────────────────────────────────────────── */
body.lang-ar .btn-lang[data-lang="ar"] {
  color: var(--red) !important;
  background: var(--red-pale) !important;
  font-weight: 700 !important;
}

/* ── Offcanvas mobile RTL ───────────────────────────────────── */
body.lang-ar .offcanvas.offcanvas-end { right: auto !important; left: 0 !important; }
body.lang-ar .offcanvas-body          { direction: rtl; text-align: right; }
body.lang-ar .oc-link                 { flex-direction: row-reverse; gap: .7rem; }
body.lang-ar .oc-link i               { margin-right: 0; margin-left: 0; }
body.lang-ar .oc-section              { text-align: right; }

/* ── Hero RTL ───────────────────────────────────────────────── */
body.lang-ar .hero-section            { direction: ltr; }
/* row-reverse removed: using order: instead (avoids col-xl collision) */
body.lang-ar .hero-title              { text-align: right; direction: rtl; }
body.lang-ar .hero-sub                { text-align: right; direction: rtl; }
body.lang-ar .hero-actions            { flex-direction: row; justify-content: flex-start; }
body.lang-ar .hero-badge              { margin-left: auto; margin-right: 0; justify-content: flex-end; }
body.lang-ar .hero-kpi                { flex-direction: row-reverse; }
body.lang-ar .hero-kpi-lbl            { text-align: center; }
/* Badge/hero dot — à gauche en RTL */
body.lang-ar .hero-dot { order: 2; margin-left: .5rem; margin-right: 0; }

/* ── Stat bar RTL ───────────────────────────────────────────── */
body.lang-ar .stat-bar { direction: rtl; }
body.lang-ar .stat-item { flex-direction: column; }
body.lang-ar .stat-item::after { left: 0; right: auto; }

/* ── Sections RTL ───────────────────────────────────────────── */
body.lang-ar .section-padding,
body.lang-ar .section-off,
body.lang-ar .section-stone,
body.lang-ar .section-dark { direction: rtl; }
body.lang-ar .section-title { text-align: right; }
body.lang-ar .section-tag   {
  flex-direction: row-reverse;
  margin-right: 0;
  margin-left: auto;
}
body.lang-ar .section-tag::before { margin-right: 0; margin-left: .5rem; order: 2; }
body.lang-ar p, body.lang-ar .lead, body.lang-ar p.lead { text-align: right; }

/* ── Cards RTL ──────────────────────────────────────────────── */
body.lang-ar .card-broc  { direction: rtl; text-align: right; }
body.lang-ar .prod-card  { direction: rtl; text-align: right; }
body.lang-ar .card-broc::before { transform-origin: right !important; }
body.lang-ar .card-title { text-align: right; }
body.lang-ar .card-text  { text-align: right; }
body.lang-ar .exp-num    { text-align: right; }

/* Badges produit */
body.lang-ar .prod-stamp  { direction: rtl; }
body.lang-ar .prod-name   { text-align: right; }

/* ── Horizon cards RTL ──────────────────────────────────────── */
body.lang-ar .horizon-card { direction: rtl; text-align: right; }

/* ── Page header RTL ────────────────────────────────────────── */
body.lang-ar .page-header           { direction: rtl; }
body.lang-ar .page-header h1        { text-align: right; }
body.lang-ar .page-header .lead     { text-align: right; }
body.lang-ar .page-breadcrumb       { flex-direction: row-reverse; justify-content: flex-start; }
body.lang-ar .page-breadcrumb .sep  { transform: scaleX(-1); }

/* ── Marquee — texte arabe centré ───────────────────────────── */
body.lang-ar .marquee-wrap  { direction: rtl; }
body.lang-ar .marquee-track { animation-direction: reverse; }

/* ── Timeline RTL ───────────────────────────────────────────── */
body.lang-ar .timeline-wrap::before { right: 16px; left: auto; }
body.lang-ar .tl-item  { padding-right: 3rem; padding-left: 0; flex-direction: row-reverse; }
body.lang-ar .tl-dot   { right: 0; left: auto; }
body.lang-ar .tl-year  { text-align: right; }
body.lang-ar .tl-title { text-align: right; }
body.lang-ar .tl-text  { text-align: right; }

/* ── Step items RTL ─────────────────────────────────────────── */
body.lang-ar .step-item  { flex-direction: row-reverse; }
body.lang-ar .step-num   { margin-left: 1rem; margin-right: 0; }
body.lang-ar .step-title { text-align: right; }
body.lang-ar .step-text  { text-align: right; }

/* ── Benefit list RTL ───────────────────────────────────────── */
body.lang-ar .benefit-list li {
  flex-direction: row-reverse;
  text-align: right;
  padding-right: 0;
  padding-left: 1.2rem;
}
body.lang-ar .benefit-list li::before {
  margin-right: 0;
  margin-left: .7rem;
  order: 2;
}

/* ── KPI / Stats ────────────────────────────────────────────── */
body.lang-ar .kpi-item, body.lang-ar .kpi-wrap { direction: rtl; }

/* ── Testimonials RTL ───────────────────────────────────────── */
body.lang-ar .testimonial-card { direction: rtl; text-align: right; }
body.lang-ar .testimonial-card::before { right: 1rem; left: auto; }
body.lang-ar .test-meta  { flex-direction: row-reverse; }
body.lang-ar .test-avatar { margin-right: 0; margin-left: .75rem; }
body.lang-ar .test-role  { text-align: right; }
body.lang-ar .test-name  { text-align: right; }

/* ── Ressource / Direction cards RTL ───────────────────────── */
body.lang-ar .resource-card  { direction: rtl; text-align: right; }
body.lang-ar .dir-card       { direction: rtl; text-align: right; }
body.lang-ar .resource-title { text-align: right; }
body.lang-ar .dir-name       { text-align: right; }
body.lang-ar .dir-role       { text-align: right; }
body.lang-ar .dir-avatar     { margin-right: 0; margin-left: 1rem; }

/* ── CTA band RTL ───────────────────────────────────────────── */
body.lang-ar .cta-band          { direction: rtl; }
body.lang-ar .cta-band h2       { text-align: right; }
body.lang-ar .cta-band p        { text-align: right; }
body.lang-ar .cta-band .d-flex  { flex-direction: row-reverse; justify-content: flex-start; }

/* ── Formulaire RTL ─────────────────────────────────────────── */
body.lang-ar .form-label-broc   { text-align: right; display: block; }
body.lang-ar .form-control-broc { text-align: right; direction: rtl; }
body.lang-ar .form-group        { text-align: right; }
body.lang-ar .contact-form-wrap { direction: rtl; }
body.lang-ar #subject-banner    { flex-direction: row-reverse; }
/* Avec direction:rtl sur le body, « row » place le 1er enfant (icône) à droite ; « row-reverse » la mettait à gauche */
body.lang-ar .contact-info-item {
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: right;
}
body.lang-ar .contact-info-item > div:not(.cii-icon) {
  flex: 1 1 0;
  min-width: 0;
  text-align: right;
}
body.lang-ar .cii-label,
body.lang-ar .cii-value { text-align: right; }
body.lang-ar .cii-icon { margin-right: 0; margin-left: 0; flex-shrink: 0; }
/* Numéros / e-mails latins : lisibles LTR, alignés au bord visuel droit */
body.lang-ar .cii-value[dir="ltr"],
body.lang-ar .cii-value.cii-ltr {
  direction: ltr;
  text-align: right;
  unicode-bidi: isolate;
}
body.lang-ar .cii-value a[href^="mailto:"] { unicode-bidi: embed; direction: ltr; }
body.lang-ar select.form-control-broc { text-align: right; direction: rtl; }

/* ── Table RTL ──────────────────────────────────────────────── */
body.lang-ar .table-broc { direction: rtl; }
body.lang-ar .table-broc th,
body.lang-ar .table-broc td { text-align: right; }

/* ── Notice box RTL ─────────────────────────────────────────── */
body.lang-ar .notice-box {
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  border-left: none !important;
  border-right: 4px solid var(--red) !important;
  padding-left: 0 !important;
  padding-right: 1.25rem !important;
  text-align: right;
}
body.lang-ar .notice-box .notice-text { flex: 1; min-width: 0; }

/* ── Footer RTL ─────────────────────────────────────────────── */
body.lang-ar footer             { direction: rtl; }
body.lang-ar .footer-brand      { text-align: right; }
body.lang-ar .footer-heading    { text-align: right; }
body.lang-ar .footer-links      { text-align: right; padding-right: 0; }
body.lang-ar .footer-links a:hover { padding-left: 0; padding-right: 5px; }
body.lang-ar .footer-cert-badge { margin-right: 0; margin-left: .4rem; }
body.lang-ar .footer-bottom     { flex-direction: row-reverse; }
body.lang-ar .footer-bottom-text { text-align: right; }

/* Bande basse AR : même bande LTR (adresse gauche / liens droite) ; texte des liens en RTL */
body.lang-ar .footer-bottom-stack .footer-address-line,
body.lang-ar .footer-bottom-stack .footer-bottom-text.footer-address-line {
  text-align: left !important;
}
body.lang-ar .footer-bottom-text.footer-address-line {
  text-align: left !important;
}
body.lang-ar .footer-bottom-stack .footer-legal-line.footer-legal-inline {
  direction: rtl;
  unicode-bidi: isolate;
  text-align: right;
  justify-content: flex-end !important;
  align-content: flex-end;
  align-items: center !important;
}
body.lang-ar .footer-bottom-stack .footer-credit-line {
  text-align: center !important;
}

/* ── Search RTL — voir section 35 ──────────────────────────── */

/* ── Cookie banner RTL ──────────────────────────────────────── */
body.lang-ar #cookie-banner      { direction: rtl; text-align: right; }
body.lang-ar #cookie-banner .d-flex { flex-direction: row-reverse; }

/* ── Scroll top / Loader ────────────────────────────────────── */
body.lang-ar .loader-brand { direction: rtl; }

/* ── Buttons — inverser icône + texte en RTL ────────────────── */
body.lang-ar .btn-broc-red,
body.lang-ar .btn-broc-outline,
body.lang-ar .btn-broc-white,
body.lang-ar .btn-nav-cta,
body.lang-ar .btn-primary-red {
  flex-direction: row-reverse;
}
body.lang-ar .btn-broc-red   i,
body.lang-ar .btn-broc-outline i,
body.lang-ar .btn-nav-cta    i { margin-right: 0; margin-left: .5rem; }

/* ── Chips / badges RTL ─────────────────────────────────────── */
body.lang-ar .chip { direction: rtl; }

/* ── Row grids RTL ──────────────────────────────────────────── */
body.lang-ar .row { direction: rtl; }
body.lang-ar .row > [class*="col-"] { text-align: right; }

/* ── Specific: section-tag dans page-header ─────────────────── */
body.lang-ar .page-header .section-tag { margin-right: 0; margin-left: auto; }

/* ── SWOT RTL ───────────────────────────────────────────────── */
body.lang-ar .swot-cell { direction: rtl; text-align: right; }
body.lang-ar .swot-cell ul { padding-right: 1.2rem; padding-left: 0; }

/* ── Comparateur/ROI RTL ────────────────────────────────────── */
body.lang-ar .calc-wrap    { direction: rtl; text-align: right; }
body.lang-ar .calc-result  { direction: rtl; text-align: right; }

/* ── Distributeurs / représentants cards ────────────────────── */
body.lang-ar .dist-card { direction: rtl; text-align: right; }

/* ════════════════════════════════════════════════════════════════
   RAFFINEMENTS VISUELS — Cohérence marché MENA avec Broc
   ════════════════════════════════════════════════════════════════ */

/* ── Section-title : légère ombre de calligraphie arabe ─────── */
body.lang-ar .section-title {
  text-shadow: 0 1px 0 rgba(160,146,130,.15);
}

/* ── Hero badge en arabe — couleur inverse (taupe fond) ─────── */
body.lang-ar .hero-badge {
  background: rgba(160,146,130,.12) !important;
  border-color: rgba(160,146,130,.3) !important;
  color: var(--taupe-d) !important;
  direction: rtl;
}

/* ── Card numbers (01 02 03) — côté droit en arabe ──────────── */
body.lang-ar .exp-num {
  text-align: right;
  font-family: var(--ff-ar-head) !important;
}

/* ── Page header : dégradé depuis la gauche en RTL ──────────── */
body.lang-ar .page-header::before {
  left: -5%;
  right: auto;
  transform: scaleX(-1);
}

/* ── CTA band : rayons depuis la gauche ─────────────────────── */
body.lang-ar .cta-band::before {
  left: -10%;
  right: auto;
  transform: scaleX(-1);
}

/* ── Transition langue douce ────────────────────────────────── */
body { transition: direction .15s; }
html { transition: none; }

/* ════════════════════════════════════════════════════════════════
   RTL COMPLETIONS — Alignements manquants version arabe
   Couverture exhaustive de tous les composants non couverts
   ════════════════════════════════════════════════════════════════ */

/* ── Navbar brand tag ────────────────────────────────────────── */
body.lang-ar .brand-tag       { text-align: right; }
body.lang-ar .navbar-brand    { flex-direction: row-reverse; margin-right: 0; margin-left: auto; }

/* ── Loader ──────────────────────────────────────────────────── */
body.lang-ar .loader-sub      { text-align: right; direction: rtl; }

/* ── Notice box (avertissements) ────────────────────────────── */
body.lang-ar .notice-icon     { margin-right: 0; margin-left: 1rem; order: 2; flex-shrink: 0; }
body.lang-ar .notice-text     { text-align: right; }

/* ── Contact info items (cii) ───────────────────────────────── */
body.lang-ar .cii-label       { text-align: right; }
body.lang-ar .cii-value       { text-align: right; }

/* ── Footer desc / sub / cert ───────────────────────────────── */
body.lang-ar .footer-desc     { text-align: right; }
body.lang-ar .footer-sub      { text-align: right; letter-spacing: .06em; }
body.lang-ar .footer-cert     { flex-direction: row-reverse; justify-content: flex-end; }

/* ── Produit desc / meta ────────────────────────────────────── */
body.lang-ar .prod-desc       { text-align: right; }
body.lang-ar .prod-meta       { flex-direction: row-reverse; text-align: right; }
body.lang-ar .prod-meta::before { order: 2; margin-right: 0; margin-left: .5rem; }

/* ── Resource cards ─────────────────────────────────────────── */
body.lang-ar .resource-type-badge { flex-direction: row-reverse; }
body.lang-ar .resource-meta   { text-align: right; }
body.lang-ar .resource-desc   { text-align: right; }

/* ── Tabs (bps-plus, gamme…) ────────────────────────────────── */
body.lang-ar .tab-nav         { flex-direction: row-reverse; }
body.lang-ar .tab-btn         { text-align: right; }
body.lang-ar .tab-panel       { direction: rtl; text-align: right; }

/* ── Testimonials ───────────────────────────────────────────── */
body.lang-ar .test-text       { text-align: right; }
body.lang-ar .test-author     { flex-direction: row-reverse; }

/* ── Form success message ───────────────────────────────────── */
body.lang-ar .form-success    { text-align: right; direction: rtl; }

/* ── Badge types (ressources / blog) ────────────────────────── */
body.lang-ar .badge-blog,
body.lang-ar .badge-paper,
body.lang-ar .badge-single,
body.lang-ar .badge-study,
body.lang-ar .badge-wp        { direction: rtl; }

/* ── Marquee items ───────────────────────────────────────────── */
body.lang-ar .marquee-item    { direction: rtl; }

/* ── Search chips — voir section 35 ─────────────────────────── */

/* ── Molecule / formula badges ──────────────────────────────── */
body.lang-ar .formula-cell    { text-align: center; }
body.lang-ar .mol-badge       { direction: rtl; }
body.lang-ar .mol-formula     { text-align: center; }

/* ── Range inputs (ROI calculators) ─────────────────────────── */
body.lang-ar .range-wrap      { flex-direction: row-reverse; }
body.lang-ar .range-wrap label { text-align: right; }
body.lang-ar .range-val       { text-align: left; margin-left: 0; margin-right: auto; }

/* ── ROI v2 (gamme, temoignages) ────────────────────────────── */
body.lang-ar .roi-v2          { direction: rtl; }
body.lang-ar .roi-v2-header   { flex-direction: row-reverse; text-align: right; }
body.lang-ar .roi-v2-header-icon { margin-right: 0; margin-left: 1rem; }
body.lang-ar .roi-v2-header-title { text-align: right; }
body.lang-ar .roi-v2-header-sub   { text-align: right; }
body.lang-ar .roi-v2-inputs   { direction: rtl; }
body.lang-ar .roi-input-group { direction: rtl; }
body.lang-ar .roi-input-label { flex-direction: row-reverse; text-align: right; }
body.lang-ar .roi-input-val   { text-align: left; }   /* numbers: LTR */
body.lang-ar .roi-v2-results  { direction: rtl; }
body.lang-ar .roi-result-main { direction: rtl; }
body.lang-ar .roi-result-label { text-align: center; letter-spacing: .06em; }
body.lang-ar .roi-result-number { direction: ltr; text-align: center; } /* numbers always LTR */
body.lang-ar .roi-result-sub  { text-align: center; }
body.lang-ar .roi-metric-box  { direction: rtl; text-align: right; }
body.lang-ar .roi-metric-lbl  { text-align: right; }
body.lang-ar .roi-metric-num  { direction: ltr; text-align: right; }    /* numbers LTR */

/* ── Comparator (bps-plus) ───────────────────────────────────── */
body.lang-ar .comparator-grid  { direction: rtl; }
body.lang-ar .comparator-label { text-align: right; }
body.lang-ar .cmp-compare-panel { direction: rtl; text-align: right; }
body.lang-ar .cmp-hint         { text-align: right; }
body.lang-ar .icon-yes,
body.lang-ar .icon-no          { margin: 0 auto; }  /* centered check/cross icons */

/* ── Calc results (etudes-rentabilite) ──────────────────────── */
body.lang-ar .calc-result-lbl { text-align: right; }
body.lang-ar .calc-result-num { direction: ltr; text-align: left; } /* financial numbers: LTR */

/* ── dist-icon (representants, contact) ─────────────────────── */
body.lang-ar .dist-icon       { margin-right: 0; margin-left: auto; }

/* ── Numbers & units: always LTR regardless of RTL context ──── */
body.lang-ar .counter,
body.lang-ar .stat-num,
body.lang-ar .hero-kpi-num,
body.lang-ar [data-target],
body.lang-ar .roi2-val        { direction: ltr; unicode-bidi: embed; }

/* ── Table cells with numbers ───────────────────────────────── */
body.lang-ar .table-broc td:first-child { text-align: right; }
body.lang-ar .table-broc td:not(:first-child) { text-align: center; }

/* ── Offcanvas mobile: slide from left in RTL ────────────────── */
body.lang-ar .navbar-toggler  { margin-left: 0; margin-right: auto; }

/* ── Phone picker (contact form) ─────────────────────────────── */
body.lang-ar #tel-wrap        { flex-direction: row-reverse; }
body.lang-ar #tel-dial-btn    { border-right: none; border-left: 1.5px solid var(--stone); flex-direction: row-reverse; }
body.lang-ar #tel-number      { text-align: right; direction: ltr; } /* phone numbers: LTR */
body.lang-ar #tel-dropdown    { left: auto; right: 0; }
body.lang-ar #tel-list button { flex-direction: row-reverse; text-align: right; }
body.lang-ar #tel-list button span:last-child { margin-right: auto; margin-left: 0; }

/* ── Calendar picker (contact RDV) ───────────────────────────── */
body.lang-ar #rdv-calendar    { direction: rtl; }
body.lang-ar #cal-slots-grid  { flex-direction: row-reverse; flex-wrap: wrap-reverse; }
body.lang-ar #cal-summary     { direction: rtl; }
body.lang-ar #cal-summary-tags { direction: rtl; }
body.lang-ar #cal-clear       { margin-right: auto; margin-left: 0; }
body.lang-ar #cal-hint        { text-align: right; }
body.lang-ar #cal-month-label { direction: rtl; }
/* Calendar nav: swap prev/next arrows for RTL */
body.lang-ar #cal-prev::after { content: '›'; }
body.lang-ar #cal-prev        { font-size: 0; }
body.lang-ar #cal-prev::after { font-size: 1.2rem; }
body.lang-ar #cal-next::after { content: '‹'; }
body.lang-ar #cal-next        { font-size: 0; }
body.lang-ar #cal-next::after { font-size: 1.2rem; }

/* ── Subject banner (contact) ────────────────────────────────── */
body.lang-ar #subject-banner  { flex-direction: row-reverse; text-align: right; }
body.lang-ar #subject-banner-clear { margin-right: auto; margin-left: 0; }

/* ── Form validator errors/success ───────────────────────────── */
body.lang-ar .field-error     { text-align: right; direction: rtl; }
body.lang-ar .field-ok        { text-align: right; direction: rtl; }

/* ── RDV block header ────────────────────────────────────────── */
body.lang-ar #rdv-block > div > div:first-child { flex-direction: row-reverse; }
body.lang-ar #rdv-block span  { text-align: right; }


/* ═══ CORRECTIONS VISUELLES RTL — AR PAGES ═══════════════════ */

/* Hero: bg-shape switch for RTL */
body.lang-ar .hero-bg-shape,
body.lang-ar .hero-bg-grid {
  right: auto;
  left: 0;
  clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%);
}

/* Hero: colonne texte à gauche, image à droite (même qu'en LTR) */
body.lang-ar .hero-section .col-xl-6:first-child {
  order: 0;
}
body.lang-ar .hero-section .col-xl-6:last-child {
  order: 1;
}

/* Hero title: left-align in RTL (text starts from right) */
body.lang-ar .hero-title,
body.lang-ar .hero-sub,
body.lang-ar .hero-badge,
body.lang-ar .hero-kpi {
  text-align: right;
}

/* Search overlay RTL input — voir section 35 */

/* Fix marquee direction for AR */
body.lang-ar .marquee-track {
  animation-direction: reverse;
}

/* ════════════════════════════════════════════════════════════════
   GLOBAL DARK THEME HARMONISATION — ULTRA-MODERN
   Appliqué sur toutes les pages pour cohérence totale
   ════════════════════════════════════════════════════════════════ */

/* ── Corps de page : fond sombre bleuté ── */
body {
  background: linear-gradient(180deg, #0d0e15 0%, #0f1019 50%, #0c0d14 100%) !important;
  min-height: 100vh !important;
}

/* ── Sections contenu : gradients gris-bleutés ultra-modernes ── */
.section-padding {
  background: linear-gradient(145deg, #131520 0%, #181b28 30%, #1c1f2e 55%, #161824 80%, #12131e 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}
.section-off {
  background: linear-gradient(145deg, #0f1019 0%, #141722 35%, #191c2b 55%, #141620 80%, #0e0f18 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}
.section-stone {
  background: linear-gradient(145deg, #0c0d14 0%, #111320 35%, #161927 55%, #111320 80%, #0c0d14 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* ── Motif ultra-moderne : conic-gradient décoration gauche ── */
.section-padding::before,
.section-off::before,
.section-stone::before {
  content: '' !important;
  position: absolute !important;
  top: -25% !important; left: -8% !important;
  width: 55% !important; height: 150% !important;
  background: conic-gradient(
    from 28deg at 28% 50%,
    transparent 0deg,
    rgba(192,57,43,.04) 3deg,
    rgba(192,57,43,.08) 7deg,
    rgba(192,57,43,.04) 11deg,
    transparent 15deg,
    transparent 360deg
  ) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* ── Motif ultra-moderne : radial-glow décoration droite ── */
.section-padding::after,
.section-off::after,
.section-stone::after {
  content: '' !important;
  position: absolute !important;
  bottom: -20% !important; right: -8% !important;
  width: 50% !important; height: 120% !important;
  background: radial-gradient(
    ellipse 55% 45% at 80% 75%,
    rgba(192,57,43,.06) 0%,
    rgba(192,57,43,.02) 40%,
    transparent 65%
  ) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* ── Conteneurs toujours au-dessus des décorations ── */
.section-padding > .container-xl,
.section-padding > .container,
.section-off > .container-xl,
.section-off > .container,
.section-stone > .container-xl,
.section-stone > .container {
  position: relative !important;
  z-index: 1 !important;
}

/* ── Textes ── */
.section-title          { color: #f0f0f4 !important; }
.section-title em       { color: var(--red-l) !important; }
.section-tag            { color: rgba(255,255,255,.42) !important; }
.section-tag::before    { background: rgba(255,255,255,.28) !important; }
.body-lg                { color: rgba(240,240,244,.80) !important; }
.body                   { color: rgba(240,240,244,.65) !important; }
h2:not(.section-title)  { color: #f0f0f4; }
h3, h4                  { color: #e8e8ec; }

/* ── Cards broc ── */
.card-broc {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.09) !important;
}
.card-broc:hover        { background: rgba(255,255,255,.08) !important; border-color: var(--red) !important; box-shadow: 0 12px 40px rgba(192,57,43,.10) !important; }
.card-title             { color: #f0f0f4 !important; }
.card-text              { color: rgba(240,240,244,.60) !important; }
.exp-num                { color: var(--red-l) !important; }
.card-broc .section-tag { color: rgba(255,255,255,.40) !important; }
.card-broc .section-tag::before { background: rgba(255,255,255,.25) !important; }

/* ── Notice boxes ── */
.notice-box {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.08) !important;
  border-left-color: var(--red) !important;
}
.notice-text           { color: rgba(240,240,244,.72) !important; }
.notice-text strong    { color: #f0f0f4 !important; }
.notice-text a         { color: var(--red-l) !important; }

/* ── Timeline ── */
.tl-content {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.09) !important;
}
.tl-content::before {
  background: #111520 !important;
  border-color: rgba(255,255,255,.09) !important;
}
.tl-item-v2.tl-visible .tl-content {
  border-color: rgba(192,57,43,.28) !important;
  box-shadow: 0 4px 24px rgba(192,57,43,.08) !important;
}
.tl-item-v2.tl-visible .tl-content::before {
  background: #111520 !important;
  border-color: rgba(192,57,43,.28) !important;
}
.tl-content-title      { color: #f0f0f4 !important; }
.tl-content-text       { color: rgba(240,240,244,.60) !important; }
.tl-track              { background: rgba(255,255,255,.10) !important; }
.tl-dot-v2             { background: #111520 !important; }

/* ── Direction cards ── */
.dir-card {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.09) !important;
}
.dir-card:hover        { border-color: var(--red) !important; }
.dir-name              { color: #f0f0f4 !important; }
.dir-tasks li          { color: rgba(240,240,244,.62) !important; }

/* ── Member cards ── */
.member-card {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.09) !important;
}
.member-card:hover     { background: rgba(255,255,255,.07) !important; border-color: var(--red) !important; }
.member-name           { color: #f0f0f4 !important; }
.member-dept           { color: rgba(240,240,244,.42) !important; }
.member-role           { color: var(--red-l) !important; }

/* ── Product cards ── */
.prod-card {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.09) !important;
}
.prod-card:hover       { background: rgba(255,255,255,.08) !important; border-color: var(--red) !important; box-shadow: 0 12px 40px rgba(192,57,43,.10) !important; }
.prod-card .prod-name  { color: #f0f0f4 !important; }
.prod-card:hover .prod-name { color: var(--red-l) !important; }
.prod-card .prod-desc  { color: rgba(240,240,244,.60) !important; }
.prod-stamp { background: rgba(192,57,43,.15) !important; color: var(--red-l) !important; }
.prod-meta  { color: rgba(255,255,255,.35) !important; border-top-color: rgba(255,255,255,.08) !important; }
.prod-meta::before { background: rgba(255,255,255,.30) !important; }

/* ── Tables ── */
.table-broc            { color: #f0f0f4 !important; border-color: rgba(255,255,255,.07) !important; }
.table-broc thead th   { background: rgba(192,57,43,.15) !important; color: #f0f0f4 !important; border-color: rgba(255,255,255,.07) !important; }
.table-broc tbody tr   { background: transparent !important; }
.table-broc tbody tr:nth-child(odd)  { background: rgba(255,255,255,.03) !important; }
.table-broc tbody tr:hover           { background: rgba(192,57,43,.10) !important; }
/* Override line 2360 var(--red-pale) hover — force dark on all pages */
.table-broc tbody tr:hover td,
.table-broc tbody tr.tr-hover td    { background: rgba(192,57,43,.10) !important; color: rgba(232,233,240,.95) !important; border-bottom-color: rgba(192,57,43,.20) !important; }
.table-broc td, .table-broc th      { border-color: rgba(255,255,255,.07) !important; color: rgba(240,240,244,.78) !important; }

/* ── Accordéon ── */
.accordion-item {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.09) !important;
}
.accordion-button {
  background: rgba(255,255,255,.04) !important;
  color: #f0f0f4 !important;
}
.accordion-button:not(.collapsed) {
  background: rgba(192,57,43,.12) !important;
  color: #f0f0f4 !important;
  box-shadow: none !important;
}
.accordion-body        { color: rgba(240,240,244,.72) !important; background: rgba(255,255,255,.02) !important; }

/* ── Spec rows (pages produits) ── */
.spec-label            { color: rgba(240,240,244,.52) !important; }
.spec-value            { color: #f0f0f4 !important; }
.spec-row              { border-color: rgba(255,255,255,.07) !important; }

/* ── Comparateur ── */
.comparator-section    { background: linear-gradient(160deg, #0f1018 0%, #161724 50%, #0f1018 100%) !important; }
.comparator-pill       { background: rgba(255,255,255,.06) !important; color: rgba(240,240,244,.72) !important; border-color: rgba(255,255,255,.10) !important; }
.comparator-pill.active { background: var(--red) !important; color: #fff !important; border-color: var(--red) !important; }
.comp-card             { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.09) !important; }
.comp-card-title       { color: #f0f0f4 !important; }
.comp-value            { color: rgba(240,240,244,.70) !important; }

/* ── Horizon cards / section-alt ── */
.horizon-card {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.09) !important;
}
.horizon-card:hover    { border-color: var(--red) !important; }
.horizon-card h3       { color: #f0f0f4 !important; }
.horizon-card p        { color: rgba(240,240,244,.60) !important; }

/* ── Stat / KPI boxes inside sections ── */
.stat-box, .kpi-box    { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.09) !important; }
.stat-num              { color: var(--red-l) !important; }
.stat-label            { color: rgba(240,240,244,.55) !important; }

/* ── Lead paragraphs in sections ── */
.section-padding .lead,
.section-off .lead     { color: rgba(240,240,244,.75) !important; }

/* ── Page header (déjà sombre, renforcement) ── */
.page-header {
  background: linear-gradient(160deg, #08090d 0%, #0d0f18 50%, #08090d 100%) !important;
}

/* ── Scrollbar cohérente dark ── */
::-webkit-scrollbar-track { background: #0b0b0f !important; }

/* ── Contact page : form lisible sur fond sombre ── */
body[data-page="contact"] .contact-form-wrap {
  background: rgba(255,255,255,.05) !important;
  box-shadow: 0 4px 32px rgba(0,0,0,.35) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
}
body[data-page="contact"] .contact-form-wrap label,
body[data-page="contact"] .contact-form-wrap .form-label {
  color: rgba(240,240,244,.80) !important;
}
body[data-page="contact"] .contact-form-wrap input,
body[data-page="contact"] .contact-form-wrap textarea,
body[data-page="contact"] .contact-form-wrap select {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: #f0f0f4 !important;
}
body[data-page="contact"] .contact-form-wrap input::placeholder,
body[data-page="contact"] .contact-form-wrap textarea::placeholder {
  color: rgba(240,240,244,.35) !important;
}

/* ════════════════════════════════════════════════════════════════
   ULTRA-MODERN MOTIFS — Dot-grid · Gradient Mesh · Glow Effects
   ════════════════════════════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes gradientDrift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes scanLine {
  0%   { transform: translateY(-100%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(400%); opacity: 0; }
}
@keyframes pulseGlow {
  0%, 100% { opacity: .5; transform: scale(1); }
  50%       { opacity: .9; transform: scale(1.06); }
}
@keyframes gridFade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* ── Dot-grid pattern sur sections alternées ── */
.section-padding,
.section-off {
  background-image:
    radial-gradient(circle, rgba(255,255,255,.055) 1px, transparent 1px) !important;
  background-size:
    linear-gradient(160deg, #0d0e12 0%, #111520 55%, #0d0e12 100%),
    28px 28px !important;
}

/* Reconstruit les backgrounds combinés : dot-grid + gradient gris bleuté ultra-moderne */
.section-padding {
  background:
    radial-gradient(circle, rgba(255,255,255,.052) 1px, transparent 1px),
    linear-gradient(145deg, #131520 0%, #181b28 30%, #1c1f2e 55%, #161824 80%, #12131e 100%) !important;
  background-size: 26px 26px, 100% 100% !important;
}
.section-off {
  background:
    radial-gradient(circle, rgba(255,255,255,.042) 1px, transparent 1px),
    linear-gradient(145deg, #0f1019 0%, #141722 35%, #191c2b 55%, #141620 80%, #0e0f18 100%) !important;
  background-size: 26px 26px, 100% 100% !important;
}
.section-stone {
  background:
    radial-gradient(circle, rgba(255,255,255,.036) 1px, transparent 1px),
    linear-gradient(145deg, #0c0d14 0%, #111320 35%, #161927 55%, #111320 80%, #0c0d14 100%) !important;
  background-size: 26px 26px, 100% 100% !important;
}

/* ── Orbe lumineux animé en fond de chaque section ── */
.section-padding::before {
  background:
    radial-gradient(ellipse 70% 60% at 15% 40%, rgba(192,57,43,.10) 0%, transparent 55%),
    conic-gradient(from 28deg at 28% 50%,
      transparent 0deg, rgba(192,57,43,.05) 3deg,
      rgba(192,57,43,.10) 7deg, rgba(192,57,43,.05) 11deg,
      transparent 15deg, transparent 360deg) !important;
  animation: pulseGlow 9s ease-in-out infinite !important;
}
.section-off::before {
  background:
    radial-gradient(ellipse 65% 55% at 85% 60%, rgba(192,57,43,.09) 0%, transparent 55%),
    conic-gradient(from 200deg at 75% 50%,
      transparent 0deg, rgba(192,57,43,.04) 3deg,
      rgba(192,57,43,.09) 7deg, rgba(192,57,43,.04) 11deg,
      transparent 15deg, transparent 360deg) !important;
  animation: pulseGlow 11s ease-in-out infinite reverse !important;
}

/* (Ligne de scan ::after retirée : elle se superposait au décor radial plus bas et
   produisait une fausse « barre rouge » au milieu de l’écran après scroll / envoi formulaire.) */

/* ── Cards : glow border au hover ── */
.card-broc:hover {
  box-shadow:
    0 0 0 1px rgba(192,57,43,.40),
    0 8px 40px rgba(192,57,43,.15),
    0 0 60px rgba(192,57,43,.06) !important;
  transform: translateY(-3px) !important;
}
.prod-card:hover,
.horizon-card:hover {
  box-shadow:
    0 0 0 1px rgba(192,57,43,.40),
    0 8px 40px rgba(192,57,43,.15),
    0 0 60px rgba(192,57,43,.06) !important;
  transform: translateY(-3px) !important;
}
.dir-card:hover,
.member-card:hover {
  box-shadow:
    0 0 0 1px rgba(192,57,43,.35),
    0 6px 32px rgba(192,57,43,.12) !important;
}
.tl-item-v2.tl-visible .tl-content {
  box-shadow:
    0 0 0 1px rgba(192,57,43,.20),
    0 4px 24px rgba(192,57,43,.10) !important;
}

/* ── Gradient border top sur cards (accent rouge) ── */
.card-broc::before {
  background: linear-gradient(90deg,
    transparent 0%, var(--red) 35%,
    var(--red-l) 50%, var(--red) 65%,
    transparent 100%) !important;
  height: 2px !important;
  opacity: 0 !important;
  transition: opacity .3s ease !important;
}
.card-broc:hover::before { opacity: 1 !important; }

/* ── Section header : gradient text accent ── */
.section-title em {
  background: linear-gradient(90deg, var(--red-l) 0%, #ff6b5b 60%, var(--red) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── Page-header : motif mesh premium ── */
.page-header {
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(192,57,43,.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 20%, rgba(100,80,200,.07) 0%, transparent 50%),
    linear-gradient(160deg, #06070b 0%, #0c0e18 50%, #06070b 100%) !important;
}
.page-header::before {
  background:
    radial-gradient(circle, rgba(255,255,255,.03) 1px, transparent 1px) !important;
  background-size: 22px 22px !important;
  opacity: .7 !important;
}

/* ── Notice boxes : accent gradient gauche ── */
.notice-box {
  border-image: none !important;
  border-left: 3px solid transparent !important;
  border-left-color: var(--red) !important;
  background:
    linear-gradient(#0d0e12, #0d0e12) padding-box,
    linear-gradient(135deg, var(--red) 0%, var(--red-l) 100%) border-box !important;
  position: relative !important;
}

/* ── Separateur entre sections (gradient fade) ── */
.section-padding + .section-off::before,
.section-off + .section-padding::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 10% !important; right: 10% !important;
  height: 1px !important;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.07) 30%,
    rgba(255,255,255,.12) 50%,
    rgba(255,255,255,.07) 70%,
    transparent) !important;
  animation: none !important;
  pointer-events: none !important;
}

/* ── Stat/KPI numbers : gradient text ── */
.exp-num,
.stat-num {
  background: linear-gradient(135deg, var(--red-l) 0%, #ff7c6b 50%, var(--red) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── Boutons : glow au hover ── */
.btn-broc-red:hover {
  box-shadow: 0 0 20px rgba(192,57,43,.45), 0 4px 16px rgba(192,57,43,.30) !important;
}
.btn-broc-outline:hover {
  box-shadow: 0 0 16px rgba(255,255,255,.08) !important;
}

/* ── Scrollbar accent gradient ── */
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--red-l) 0%, var(--red) 100%) !important;
  border-radius: 4px !important;
}

/* ── Séparateur de footer : gradient ── */
.footer-divider {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.06) 20%,
    rgba(192,57,43,.25) 50%,
    rgba(255,255,255,.06) 80%,
    transparent) !important;
  margin: 2.5rem 0 !important;
}

/* ════════════════════════════════════════════════════════════════
   SECTION-TAG DARK FIX + FINAL POLISH
   ════════════════════════════════════════════════════════════════ */

/* Override section-tag chip : fond sombre, texte rouge/blanc */
.section-tag {
  background: rgba(192,57,43,.10) !important;
  border-color: rgba(192,57,43,.22) !important;
  color: rgba(240,240,244,.75) !important;
}
.section-tag::before {
  background: var(--red-l) !important;
  width: 14px !important;
}
/* Variante centrée (text-center parent) */
.text-center .section-tag,
.section-tag.text-center {
  justify-content: center !important;
}

/* Page-header section-tag */
.page-header .section-tag {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.15) !important;
  color: rgba(255,255,255,.70) !important;
}
.page-header .section-tag::before {
  background: rgba(255,255,255,.55) !important;
}

/* Taupe overrides (testimonials, etc.) */
.test-role,
.dir-role {
  color: var(--red-l) !important;
}

/* section-tag inside card */
.card-broc .section-tag,
#content-section .section-tag {
  background: rgba(192,57,43,.08) !important;
  border-color: rgba(192,57,43,.18) !important;
  color: rgba(240,240,244,.65) !important;
}

/* Stat-bar (bande chiffres clés) */
.stat-bar {
  background: linear-gradient(160deg, #0a0b10 0%, #0f1018 50%, #0a0b10 100%) !important;
}

/* ── body.lang-ar overrides pour dark ── */
body.lang-ar .section-tag {
  background: rgba(192,57,43,.10) !important;
  border-color: rgba(192,57,43,.22) !important;
  color: rgba(240,240,244,.75) !important;
}


/* ══════════════════════════════════════════════════════════════
   NAV ULTRA-MODERN: Glassmorphism . Glow icons . Dark unified
   ══════════════════════════════════════════════════════════════ */

/* Navbar fond sombre + blur */
#mainNav {
  background: rgba(10,10,16,.92) !important;
  backdrop-filter: blur(18px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.4) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
#mainNav.nav-scrolled {
  background: rgba(8,8,12,.97) !important;
  border-bottom-color: rgba(192,57,43,.18) !important;
  box-shadow: 0 4px 32px rgba(0,0,0,.45) !important;
}

/* Nav links desktop */
.nav-lnk {
  color: rgba(240,240,244,.72) !important;
  font-size: .82rem !important;
  letter-spacing: .04em !important;
  padding: .42rem .65rem !important;
  border-radius: 6px !important;
  position: relative !important;
  transition: color .18s, background .18s !important;
}
.nav-lnk:hover, .nav-lnk.is-active {
  color: #fff !important;
  background: rgba(192,57,43,.12) !important;
}
.nav-lnk.is-active::after {
  content: "" !important;
  position: absolute !important;
  bottom: 2px !important; left: 20% !important; right: 20% !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--red-l), transparent) !important;
  border-radius: 2px !important;
}

/* Dropdown panel glassmorphism */
.nav-dropdown-panel {
  background: rgba(12,13,20,.94) !important;
  backdrop-filter: blur(24px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.6) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 0 0 1px rgba(192,57,43,.10), 0 16px 48px rgba(0,0,0,.55), 0 4px 16px rgba(0,0,0,.30) !important;
  padding: .55rem !important;
  min-width: 270px !important;
}

/* Drop items */
.drop-item {
  color: rgba(240,240,244,.80) !important;
  border-radius: 9px !important;
  padding: .58rem .7rem !important;
  gap: .8rem !important;
  transition: background .15s, transform .15s !important;
  position: relative !important;
}
.drop-item:hover {
  background: rgba(192,57,43,.10) !important;
  transform: translateX(3px) !important;
}
.drop-item::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important; top: 20% !important; bottom: 20% !important;
  width: 2px !important;
  background: linear-gradient(180deg, transparent, var(--red-l), transparent) !important;
  border-radius: 2px !important;
  opacity: 0 !important;
  transition: opacity .18s !important;
}
.drop-item:hover::before { opacity: 1 !important; }

/* Drop icons colored */
.drop-icon {
  width: 34px !important; height: 34px !important;
  border-radius: 9px !important;
  background: rgba(192,57,43,.12) !important;
  border: 1px solid rgba(192,57,43,.20) !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .18s, border-color .18s, box-shadow .18s !important;
}
.drop-icon i {
  width: 15px !important; height: 15px !important;
  color: var(--red-l) !important;
  transition: color .14s !important;
}
.drop-item:hover .drop-icon {
  background: rgba(192,57,43,.20) !important;
  border-color: rgba(192,57,43,.40) !important;
  box-shadow: 0 0 12px rgba(192,57,43,.22) !important;
}
.drop-item:hover .drop-icon i { color: #ff7c6b !important; }

/* Star icon golden accent */
.drop-icon--star {
  background: rgba(245,158,11,.12) !important;
  border-color: rgba(245,158,11,.25) !important;
}
.drop-icon--star i { color: #f59e0b !important; }
.drop-item:hover .drop-icon--star {
  background: rgba(245,158,11,.22) !important;
  border-color: rgba(245,158,11,.45) !important;
  box-shadow: 0 0 14px rgba(245,158,11,.20) !important;
}
.drop-item:hover .drop-icon--star i { color: #fbbf24 !important; }

/* Drop text */
.drop-text strong { color: rgba(255,255,255,.90) !important; font-size: .83rem !important; font-weight: 600 !important; }
.drop-text em { color: rgba(255,255,255,.40) !important; font-size: .70rem !important; }
.drop-divider { background: rgba(255,255,255,.06) !important; margin: .3rem .4rem !important; }

/* Drop arrow */
.drop-arrow { width: 13px !important; height: 13px !important; color: rgba(255,255,255,.35) !important; transition: transform .22s, color .18s !important; }
.nav-has-drop:hover .drop-arrow { color: var(--red-l) !important; }

/* CTA button nav */
.btn-nav-cta {
  background: linear-gradient(135deg, var(--red) 0%, #e05540 100%) !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: .78rem !important;
  padding: .5rem 1rem !important;
  letter-spacing: .04em !important;
  box-shadow: 0 2px 12px rgba(192,57,43,.30) !important;
  transition: box-shadow .2s, transform .15s !important;
}
.btn-nav-cta:hover {
  box-shadow: 0 4px 20px rgba(192,57,43,.50) !important;
  transform: translateY(-1px) !important;
}

/* Lang switch — container + buttons dark */
.lang-switch { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.10) !important; }
.btn-lang { color: rgba(255,255,255,.45) !important; font-size: .72rem !important; padding: .3rem .5rem !important; border-radius: 5px !important; background: transparent !important; transition: color .15s, background .15s !important; }
.btn-lang:hover { color: rgba(255,255,255,.80) !important; background: rgba(255,255,255,.08) !important; }
.btn-lang.active { color: var(--red-l) !important; background: rgba(192,57,43,.15) !important; }
.lang-sep { color: rgba(255,255,255,.15) !important; }

/* Form controls dark */
.form-control-broc {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: rgba(240,240,244,.90) !important;
  color-scheme: dark;
}
.form-control-broc::placeholder { color: rgba(255,255,255,.28) !important; }
.form-control-broc:focus { background: rgba(255,255,255,.08) !important; border-color: var(--red) !important; box-shadow: 0 0 0 3px rgba(192,57,43,.12) !important; }
select.form-control-broc { background-color: #13141c !important; color: rgba(240,240,244,.90) !important; }
select.form-control-broc option { background: #13141c !important; color: rgba(240,240,244,.90) !important; }
.form-label-broc { color: rgba(255,255,255,.45) !important; }
/* Contact form wrap */
.contact-form-wrap { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 16px !important; }

/* Mobile offcanvas dark */
.oc-link { color: rgba(240,240,244,.70) !important; border-left-color: transparent !important; transition: background .14s, color .14s, border-left-color .14s !important; }
.oc-link:hover { background: rgba(192,57,43,.08) !important; color: #fff !important; border-left-color: var(--red) !important; }
.oc-link.oc-sub { color: rgba(240,240,244,.48) !important; }
.oc-link.oc-sub:hover { color: rgba(240,240,244,.85) !important; background: rgba(192,57,43,.06) !important; }
.oc-section { color: rgba(255,255,255,.22) !important; letter-spacing: .14em !important; }

/* Search + toggle buttons */
.btn-nav-icon { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.09) !important; border-radius: 8px !important; color: rgba(255,255,255,.65) !important; transition: background .15s, border-color .15s !important; }
.btn-nav-icon:hover { background: rgba(192,57,43,.12) !important; border-color: rgba(192,57,43,.30) !important; color: #fff !important; }
.navbar-toggler { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 8px !important; }
.navbar-toggler:hover { background: rgba(192,57,43,.12) !important; border-color: rgba(192,57,43,.35) !important; }
.toggler-bar { background: rgba(240,240,244,.75) !important; }

/* ══════════════════════════════════════════════════
   Calendrier ultra-moderne — dark compact lisible
   ══════════════════════════════════════════════════ */
#rdv-calendar {
  max-width: 310px !important;
  margin: 0 auto !important;
  font-size: .74rem !important;
  /* CSS var overrides so JS inline styles resolve correctly */
  --white: #fff;        /* selected-day text stays white */
  --off:   #161824;
  --stone: rgba(192,57,43,.18);
  --ink:   rgba(232,233,240,.88);   /* ← light text for dark bg */
  --ink2:  rgba(232,233,240,.95);
  --ink3:  rgba(192,57,43,.75);     /* DOW headers in brand red */
  --ink4:  rgba(232,233,240,.35);   /* disabled / weekend */
  background: #0d0e16 !important;
  border: 1px solid rgba(192,57,43,.22) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow:
    0 0 0 1px rgba(192,57,43,.08),
    0 8px 32px rgba(0,0,0,.55),
    0 0 40px rgba(192,57,43,.05) !important;
}
/* Header */
#rdv-calendar > div:first-child {
  background: linear-gradient(135deg, #14162200 0%, #1a1d2e 100%) !important;
  border-bottom: 1px solid rgba(192,57,43,.20) !important;
  padding: .45rem .75rem !important;
}
#cal-month-label { color: rgba(232,233,240,.95) !important; font-size: .74rem !important; letter-spacing: .10em !important; }
#cal-prev, #cal-next {
  color: rgba(232,233,240,.50) !important;
  width: 28px !important; height: 28px !important;
  border-radius: 6px !important;
  transition: background .15s, color .15s !important;
}
#cal-prev:hover, #cal-next:hover {
  background: rgba(192,57,43,.18) !important;
  color: rgba(232,233,240,.92) !important;
}
/* Day-of-week row */
#cal-dow {
  background: rgba(255,255,255,.025) !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
}
#cal-dow > div { padding: .32rem 0 !important; font-size: .57rem !important; }
/* Grid cells — force light text over JS inline color */
#cal-grid { gap: 1px !important; background: rgba(255,255,255,.03) !important; }
#cal-grid button {
  background: #0d0e16 !important;
  color: rgba(232,233,240,.85) !important;
  font-size: .72rem !important;
  max-height: 30px !important;
  min-height: 28px !important;
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  transition: background .15s, color .15s !important;
}
#cal-grid button[aria-disabled="true"] {
  color: rgba(232,233,240,.22) !important;
  background: #0d0e16 !important;
  opacity: 1 !important;
  cursor: default !important;
}
#cal-grid button:not([aria-disabled="true"]):hover {
  background: rgba(192,57,43,.20) !important;
  color: #fff !important;
}
/* Today ring */
#cal-grid button[aria-current="date"],
#cal-grid button.cal-today {
  border-color: rgba(192,57,43,.70) !important;
  color: var(--red) !important;
  font-weight: 700 !important;
  background: rgba(192,57,43,.06) !important;
}
/* Selected = red fill */
#cal-grid button.cal-selected,
#cal-grid button[data-selected="true"] {
  background: var(--red) !important;
  color: #fff !important;
  border-color: transparent !important;
}
/* Summary / clear bar */
#cal-summary {
  background: rgba(192,57,43,.08) !important;
  border-top: 1px solid rgba(192,57,43,.18) !important;
}
/* Time-slot panel */
#cal-slots {
  background: rgba(255,255,255,.025) !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
  padding: .7rem .9rem !important;
}
#cal-slots-label { color: rgba(192,57,43,.80) !important; font-size: .58rem !important; }
#cal-slots .slot-btn {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  color: rgba(232,233,240,.78) !important;
  padding: .28rem .55rem !important;
  font-size: .72rem !important;
  border-radius: 5px !important;
  transition: background .15s, border-color .15s !important;
}
#cal-slots .slot-btn:hover,
#cal-slots .slot-btn.slot-selected {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: #fff !important;
}
/* Calendar hint text */
#rdv-calendar p, #rdv-calendar small,
#cal-hint { color: rgba(232,233,240,.38) !important; font-size: .70rem !important; }
#cal-summary-label { color: var(--red) !important; }
#cal-clear { color: rgba(232,233,240,.45) !important; }
#cal-summary-tags .summary-tag {
  background: rgba(192,57,43,.18) !important;
  border: 1px solid rgba(192,57,43,.30) !important;
  color: rgba(232,233,240,.85) !important;
  border-radius: 4px !important;
  font-size: .65rem !important;
}

/* ── Logo nav : cadre ultra-moderne avec bordure gradient ── */
.navbar-brand-logo {
  position: relative !important;
  background: rgba(255,255,255,.97) !important;
  border-radius: 12px !important;
  padding: 5px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  box-shadow:
    0 0 0 1.5px rgba(192,57,43,.55),
    0 0 14px rgba(192,57,43,.20),
    0 4px 18px rgba(0,0,0,.40) !important;
  transition: box-shadow .25s ease !important;
}
.navbar-brand-logo:hover,
.navbar-brand:hover .navbar-brand-logo {
  box-shadow:
    0 0 0 2px rgba(192,57,43,.80),
    0 0 22px rgba(192,57,43,.32),
    0 6px 24px rgba(0,0,0,.50) !important;
}
/* Trait gradient rouge en bas du cadre */
.navbar-brand-logo::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important; left: 15% !important; right: 15% !important;
  height: 2px !important;
  border-radius: 0 0 4px 4px !important;
  background: linear-gradient(90deg, transparent, rgba(192,57,43,.8) 40%, rgba(220,80,60,.9) 60%, transparent) !important;
}
.navbar-brand-logo img,
.offcanvas .navbar-brand-logo img {
  content: normal !important;
  filter: none !important;
  opacity: 1 !important;
  height: 46px !important;
  width: auto !important;
  display: block !important;
}
/* Capsule blanche footer logo */
.footer-logo-wrap {
  display: inline-block !important;
  background: rgba(255,255,255,.95) !important;
  border-radius: 10px !important;
  padding: 6px 12px !important;
  box-shadow: 0 2px 14px rgba(0,0,0,.30) !important;
}
.footer-logo-img {
  content: normal !important;
  filter: none !important;
  opacity: 1 !important;
}
/* Loader img : capsule blanche */
#page-loader img {
  display: block !important;
  content: normal !important;
  filter: none !important;
  border-radius: 10px !important;
  padding: 3px 6px !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow:
    0 0 0 1.5px rgba(192,57,43,.45),
    0 0 16px rgba(192,57,43,.18),
    0 4px 20px rgba(0,0,0,.40) !important;
  height: 68px !important;
  width: auto !important;
  opacity: 1 !important;
}

/* ── Phone / tel input dark (inline style override) ── */
#tel-wrap {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.12) !important;
}
#tel-wrap:focus-within {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 3px rgba(192,57,43,.12) !important;
}
#tel-dial-select {
  background: rgba(255,255,255,.0) !important;
  color: rgba(240,240,244,.85) !important;
  border-right: 1px solid rgba(255,255,255,.10) !important;
  color-scheme: dark !important;
}
#tel-number {
  background: transparent !important;
  color: rgba(240,240,244,.90) !important;
}
#tel-number::placeholder { color: rgba(255,255,255,.28) !important; }

/* Subject select dark */
select#subject, select[name="subject"] {
  background: rgba(255,255,255,.05) !important;
  color: rgba(240,240,244,.90) !important;
  color-scheme: dark !important;
  border-color: rgba(255,255,255,.12) !important;
}
select#subject option,
#tel-dial-select option {
  background: #13141c !important;
  color: rgba(240,240,244,.90) !important;
}

/* ── dist-card dark ──────────────────────────────── */
.dist-card {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.08) !important;
}
.dist-card .card-title { color: rgba(232,233,240,.90) !important; }
.dist-card .card-text  { color: rgba(232,233,240,.55) !important; }
.dist-card:hover {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(192,57,43,.40) !important;
  box-shadow: 0 8px 30px rgba(192,57,43,.12) !important;
}

/* ── section-off dark override ───────────────────── */
.section-off {
  background:
    radial-gradient(circle, rgba(255,255,255,.038) 1px, transparent 1px),
    linear-gradient(145deg, #111320 0%, #151828 40%, #1a1d2e 60%, #12131f 100%) !important;
  background-size: 26px 26px, 100% 100% !important;
}
.section-off::before { display: none !important; }
.section-off::after  { display: none !important; }

/* ── tab-btn dark modern ─────────────────────────── */
.tab-btn {
  color: rgba(228,230,240,.38) !important;
  border-bottom: 2px solid transparent !important;
  letter-spacing: .10em !important;
  padding: .6rem .85rem !important;
  font-size: .66rem !important;
  position: relative !important;
  transition: color .18s, border-bottom-color .18s !important;
}
.tab-btn:hover {
  color: rgba(228,230,240,.72) !important;
  border-bottom-color: rgba(192,57,43,.28) !important;
}
.tab-btn.active {
  color: rgba(192,57,43,.95) !important;
  border-bottom-color: var(--red) !important;
}
/* Tab row container */
.tabs-row, [class*="tab-nav"], .tabs-bar {
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  background: transparent !important;
}

/* ── rdv-block dark + compact ────────────────────── */
#rdv-block {
  --off:   #111420 !important;
  --stone: rgba(192,57,43,.18) !important;
}
#rdv-block > div {
  background: #111420 !important;
  border-color: rgba(192,57,43,.18) !important;
  padding: .75rem 1rem !important;
}
#rdv-block > div > div:first-child {
  margin-bottom: .55rem !important;
}
#rdv-block span[style],
#rdv-block label {
  color: rgba(232,233,240,.88) !important;
  font-size: .72rem !important;
}
#rdv-block small,
#rdv-block p {
  color: rgba(232,233,240,.45) !important;
  font-size: .68rem !important;
}
#rdv-block .row { --bs-gutter-y: .4rem !important; }
#rdv-block .mb-3, #rdv-block .mb-2 { margin-bottom: .4rem !important; }

/* ── contact info icon containers dark ───────────── */
.cii-icon {
  background: rgba(192,57,43,.14) !important;
  border: 1px solid rgba(192,57,43,.28) !important;
}
.cii-label {
  color: rgba(232,233,240,.45) !important;
  font-size: .63rem !important;
}
.cii-value {
  color: rgba(232,233,240,.88) !important;
  font-size: .82rem !important;
}
.contact-info-item {
  padding: .55rem 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
}

/* ── card-broc dark override ─────────────────────── */
.card-broc {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.08) !important;
}
.card-broc .card-title { color: rgba(232,233,240,.92) !important; }
.card-broc .card-text  { color: rgba(232,233,240,.62) !important; }
.card-broc .card-icon  { filter: none !important; }
.card-broc:hover {
  background: rgba(192,57,43,.07) !important;
  border-color: rgba(192,57,43,.40) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,.38), 0 0 0 1px rgba(192,57,43,.18) !important;
  transform: translateY(-4px) !important;
}
.card-broc:hover .card-title { color: #ffffff !important; }
.card-broc:hover .card-text  { color: rgba(232,233,240,.82) !important; }

/* ── feature-card dark (reglementation pages) ────── */
.feature-card {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 10px !important;
  color: rgba(232,233,240,.82) !important;
}
.feature-card strong { color: rgba(192,57,43,.95) !important; }
.feature-card h4     { color: rgba(232,233,240,.92) !important; }
.feature-card small,
.feature-card .text-muted { color: rgba(232,233,240,.48) !important; }
/* Red-pale icon boxes inside feature-card */
.feature-card [style*="background:var(--red-pale)"],
.feature-card div[style*="var(--red-pale)"] {
  background: rgba(192,57,43,.14) !important;
}

/* ── Search panel — Dark Mode ────────────────────── */
.search-inner {
  background: #0f1018 !important;
  border: 1px solid rgba(192,57,43,.22) !important;
  box-shadow: 0 0 0 1px rgba(192,57,43,.08), 0 32px 80px rgba(0,0,0,.8) !important;
}
.search-input-wrap {
  background: #0f1018 !important;
  border-bottom-color: rgba(255,255,255,.07) !important;
}
#search-input {
  background: transparent !important;
  color: rgba(232,233,240,.92) !important;
  caret-color: rgba(192,57,43,.9) !important;
}
#search-input::placeholder { color: rgba(232,233,240,.25) !important; }
.search-icon { color: rgba(192,57,43,.75) !important; }
.search-esc-hint {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.10) !important;
  color: rgba(232,233,240,.35) !important;
}
.search-close {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: rgba(232,233,240,.55) !important;
}
.search-close:hover {
  background: rgba(192,57,43,.18) !important;
  color: rgba(232,233,240,.92) !important;
}
/* Groupe headers */
.search-group-header {
  background: rgba(255,255,255,.03) !important;
  border-top-color: rgba(255,255,255,.06) !important;
  color: rgba(232,233,240,.30) !important;
}
/* Items résultats */
.search-result-item {
  color: rgba(232,233,240,.80) !important;
  border-bottom-color: rgba(255,255,255,.05) !important;
}
.search-result-item:hover,
.search-result-item.kbd-active {
  background: rgba(192,57,43,.11) !important;
  color: rgba(192,57,43,.95) !important;
}
.sri-icon {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.08) !important;
}
.search-result-item:hover .sri-icon,
.search-result-item.kbd-active .sri-icon {
  background: rgba(192,57,43,.14) !important;
  border-color: rgba(192,57,43,.25) !important;
}
.sri-snippet { color: rgba(232,233,240,.35) !important; }
.search-result-item:hover .sri-snippet,
.search-result-item.kbd-active .sri-snippet { color: rgba(192,57,43,.55) !important; }
.search-result-item mark {
  background: rgba(192,57,43,.22) !important;
  color: rgba(192,57,43,.95) !important;
}
/* État accueil */
.search-recents-section,
.search-suggestions-section {
  border-top-color: rgba(255,255,255,.06) !important;
}
.search-section-label { color: rgba(232,233,240,.28) !important; }
.search-clear-recents { color: rgba(232,233,240,.28) !important; }
.search-clear-recents:hover { color: rgba(192,57,43,.9) !important; }
.search-recent-item { color: rgba(232,233,240,.72) !important; }
.search-recent-item:hover { background: rgba(192,57,43,.10) !important; color: rgba(192,57,43,.92) !important; }
.search-hint-chip {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.09) !important;
  color: rgba(232,233,240,.55) !important;
}
.search-hint-chip:hover {
  background: rgba(192,57,43,.14) !important;
  border-color: rgba(192,57,43,.42) !important;
  color: rgba(192,57,43,.95) !important;
}
/* Footer */
.search-footer {
  background: rgba(255,255,255,.025) !important;
  border-top-color: rgba(255,255,255,.06) !important;
}
.search-footer-keys { color: rgba(232,233,240,.25) !important; }
.search-footer-keys kbd {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.10) !important;
  color: rgba(232,233,240,.38) !important;
}
/* No result */
.search-no-result { color: rgba(232,233,240,.32) !important; }
.search-kbd {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--ff-mono);
  font-size: .62rem;
  color: rgba(232,233,240,.30);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 4px;
  padding: 1px 5px;
  line-height: 1.4;
}

/* ── Organigramme ────────────────────────────────────────── */
.oc-wrap { overflow-x: auto; padding: 1.5rem 0 2.5rem; }
.oc-root { display: flex; gap: 0; justify-content: center; align-items: flex-start; min-width: max-content; margin: 0 auto; }
.oc-branch { display: flex; flex-direction: column; align-items: center; padding: 0 2rem; }
.oc-divider { width: 1px; background: linear-gradient(180deg,transparent 0%,rgba(192,57,43,.45) 20%,rgba(192,57,43,.45) 80%,transparent 100%); align-self: stretch; flex-shrink: 0; }
/* nodes */
.oc-node { border-radius: 8px; padding: .45rem .9rem; text-align: center; display: inline-flex; flex-direction: column; align-items: center; gap: .1rem; position: relative; z-index: 1; }
.oc-node .oc-lbl { font-family: var(--ff-mono); font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(192,57,43,.8); }
.oc-node .oc-name { font-family: var(--ff-head); font-size: .88rem; font-weight: 700; color: rgba(232,233,240,.92); white-space: nowrap; }
.oc-node .oc-ppl { font-size: .65rem; color: rgba(232,233,240,.5); white-space: nowrap; }
/* head node (manager/director) */
.oc-head { background: rgba(192,57,43,.18); border: 1.5px solid rgba(192,57,43,.55); min-width: 170px; }
/* dept node */
.oc-dept { background: rgba(255,255,255,.06); border: 1px solid rgba(192,57,43,.28); min-width: 140px; }
/* leaf node */
.oc-leaf { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.10); min-width: 120px; }
/* connector lines */
.oc-vline { width: 1px; height: 1.4rem; background: rgba(192,57,43,.3); align-self: center; }
.oc-hline { height: 1px; background: rgba(192,57,43,.25); align-self: center; }
/* row of children */
.oc-row { display: flex; gap: 0; align-items: flex-start; }
.oc-row-item { display: flex; flex-direction: column; align-items: center; }
.oc-row-item .oc-top-h { height: 1px; background: rgba(192,57,43,.25); width: 50%; align-self: flex-start; margin-top: .7rem; }
.oc-row-item:first-child .oc-top-h { margin-left: 50%; }
.oc-row-item:last-child .oc-top-h { width: 50%; align-self: flex-end; margin-right: 50%; }
.oc-row-item:only-child .oc-top-h { width: 0; }


/* ═══════════════════════════════════════════════════════════════
   BROC NUTRITION — Uniformisation v7.0
   Offcanvas · Sections sombres · Motifs · Responsive · RTL
   ═══════════════════════════════════════════════════════════════ */

/* ── A. OFFCANVAS NAV LINKS (global — supprimé des <style> inline) */
.oc-link {
  display: flex; align-items: center; gap: .65rem;
  padding: .75rem 1.4rem;
  color: rgba(255,255,255,.75);
  font-family: var(--ff-body); font-size: .92rem; font-weight: 500;
  text-decoration: none;
  transition: background .15s, color .15s;
  border-left: 3px solid transparent;
}
.oc-link:hover, .oc-link:focus {
  background: rgba(255,255,255,.05); color: #fff;
  border-left-color: var(--red);
}
.oc-link.oc-sub { padding-left: 2.4rem; font-size: .85rem; color: rgba(255,255,255,.5); font-weight: 400; }
.oc-link.oc-sub:hover { color: rgba(255,255,255,.85); }
.oc-section {
  padding: .55rem 1.4rem .3rem;
  font-size: .65rem; font-family: var(--ff-mono);
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.28);
}
.offcanvas.offcanvas-end { width: min(320px, 90vw); border-left: 1px solid rgba(255,255,255,.06); }
[dir="rtl"] .offcanvas.offcanvas-end { border-left: none; border-right: 1px solid rgba(255,255,255,.06); }
[dir="rtl"] .oc-link { border-left: none; border-right: 3px solid transparent; padding-left: 1.4rem; padding-right: 1.4rem; }
[dir="rtl"] .oc-link:hover, [dir="rtl"] .oc-link:focus { border-right-color: var(--red); border-left-color: transparent; }
[dir="rtl"] .oc-link.oc-sub { padding-right: 2.4rem; padding-left: 1.4rem; }

/* ── B. DARK BACKGROUND SECTION UTILITY ── */
.dark-bg {
  background:
    radial-gradient(ellipse 65% 50% at 5% 10%, rgba(192,57,43,.09) 0%, transparent 52%),
    radial-gradient(ellipse 55% 50% at 95% 90%, rgba(192,57,43,.07) 0%, transparent 50%),
    linear-gradient(160deg, #06070b 0%, #0c0e18 30%, #111422 65%, #06070b 100%);
  position: relative;
  overflow: hidden;
  color: rgba(232,233,240,.82);
}
.dark-bg::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none; z-index: 0;
}
.dark-bg::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(192,57,43,.55) 30%, rgba(192,57,43,.85) 50%, rgba(192,57,43,.55) 70%, transparent 100%);
  pointer-events: none; z-index: 2;
}
.dark-bg > * { position: relative; z-index: 1; }
.dark-bg .section-title { color: var(--white); }
.dark-bg .section-title em { color: var(--red-l); }
.dark-bg .section-tag { color: rgba(255,255,255,.40); }
.dark-bg .section-tag::before { background: rgba(255,255,255,.25); }
.dark-bg .body-lg, .dark-bg .body { color: rgba(232,233,240,.72); }
.dark-bg .card-broc {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.09);
}
.dark-bg .card-broc:hover { border-color: rgba(192,57,43,.5); background: rgba(192,57,43,.06); }
.dark-bg .card-title { color: var(--white); }
.dark-bg .card-text { color: rgba(255,255,255,.55); }
.dark-bg .exp-num { color: rgba(192,57,43,.75); }
.dark-bg .notice-box {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
  border-left-color: var(--red);
}
.dark-bg .notice-text { color: rgba(232,233,240,.82); }
.dark-bg .notice-text strong { color: #ffffff; }
.dark-bg .notice-text a { color: var(--red-l); }

/* ── C. DOT PATTERN OVERLAY (utility) ── */
.dot-pattern {
  position: relative; overflow: hidden;
}
.dot-pattern::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none; z-index: 0;
}
.dot-pattern > * { position: relative; z-index: 1; }

/* ── D. GRADIENT DIVIDER ── */
.gradient-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(192,57,43,.45) 25%, rgba(192,57,43,.45) 75%, transparent 100%);
  margin: 3rem 0;
  border: none;
}

/* ── E. FOOTER TOP GRADIENT LINE ── */
footer {
  border-top: 1px solid rgba(255,255,255,.05);
  position: relative;
}
footer::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(192,57,43,.5) 20%, rgba(192,57,43,.85) 50%, rgba(192,57,43,.5) 80%, transparent 100%);
  z-index: 1;
}

/* ── F. PAGE HEADER IMPROVEMENTS ── */
.page-header {
  border-bottom: none;
}
.page-header::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(192,57,43,.4) 30%, rgba(192,57,43,.7) 50%, rgba(192,57,43,.4) 70%, transparent);
}
.page-header .container { position: relative; z-index: 1; }

/* ── G. SECTION ACCENT TOP LINE ── */
.section-accent-top {
  position: relative;
}
.section-accent-top::before {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(200px, 40%); height: 2px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  border-radius: 2px;
}

/* ── H. GLASS CARD (dark sections) ── */
.glass-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all var(--tr);
}
.glass-card:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(192,57,43,.35);
  box-shadow: 0 12px 40px rgba(0,0,0,.3);
  transform: translateY(-3px);
}

/* ── I. STAT CARD (KPI blocks) ── */
.stat-card {
  text-align: center;
  padding: 1.5rem 1rem;
}
.stat-card-num {
  font-family: var(--ff-head);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--red-l);
  line-height: 1;
  text-shadow: 0 0 24px rgba(192,57,43,.25);
}
.stat-card-lbl {
  font-family: var(--ff-mono);
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(232,233,240,.55);
  margin-top: .4rem;
}

/* ── J. RESPONSIVE IMPROVEMENTS ── */

/* Très petits écrans (320px - 480px) */
@media (max-width: 480px) {
  .section-padding { padding: 2.5rem 0; }
  .section-title { font-size: clamp(1.5rem, 7vw, 2rem); }
  .hero-kpi { gap: 1rem; }
  .hero-kpi-num { font-size: 1.6rem; }
  .card-broc { padding: 1.5rem; }
  .prod-card { padding: 1.4rem; }
  .page-header h1 { font-size: clamp(1.8rem, 8vw, 2.8rem); }
  .cta-band { text-align: center; }
  .stat-num { font-size: clamp(1.5rem, 6vw, 2rem); }
  footer .col-lg-4, footer .col-md-6 { margin-bottom: 1.5rem; }
}

/* Tablettes portrait (576px - 768px) */
@media (min-width: 576px) and (max-width: 768px) {
  .hero-actions { flex-wrap: wrap; }
  .tab-btn { font-size: .65rem; padding: .5rem .7rem; }
  .process-grid { grid-template-columns: 1fr 1fr; }
}

/* Tablettes paysage (768px - 992px) */
@media (min-width: 768px) and (max-width: 992px) {
  .hero-title { font-size: clamp(2.8rem, 7vw, 4.5rem); }
  .stat-num { font-size: clamp(1.8rem, 4vw, 2.4rem); }
}

/* Grands écrans (1400px+) */
@media (min-width: 1400px) {
  .section-padding { padding: 6rem 0; }
  .hero-title { font-size: clamp(4rem, 7vw, 7.5rem); }
}

/* Très grands écrans (1920px+) */
@media (min-width: 1920px) {
  html { font-size: 18px; }
  .container { max-width: 1400px; }
}

/* ── K. RTL IMPROVEMENTS (Arabic) ── */
[dir="rtl"] .section-tag { flex-direction: row-reverse; }
[dir="rtl"] .section-tag::before { transform: scaleX(-1); }
[dir="rtl"] .benefit-list li { flex-direction: row-reverse; }
[dir="rtl"] .benefit-list li::before { margin-top: .35rem; }
/* Même logique que body.lang-ar : en RTL natif, row place l’icône à droite */
[dir="rtl"] .notice-box { flex-direction: row; border-left: 1px solid var(--stone); border-right: 4px solid var(--red); }
[dir="rtl"] .footer-links { text-align: right; }
[dir="rtl"] .dir-tasks li { flex-direction: row-reverse; }
[dir="rtl"] .dir-tasks li::before { content: '←'; }
[dir="rtl"] .timeline-wrap { padding-left: 0; padding-right: 2rem; }
[dir="rtl"] .timeline-wrap::before { left: auto; right: 0; }
[dir="rtl"] .tl-item { padding-left: 0; padding-right: 1.25rem; }
[dir="rtl"] .tl-dot { left: auto; right: -2rem; transform: translateX(5px); }
[dir="rtl"] .page-breadcrumb { flex-direction: row-reverse; }
[dir="rtl"] .process-grid::before { left: 8%; right: 8%; }
[dir="rtl"] .tab-btn { letter-spacing: 0; }

/* ── L. TYPOGRAPHY UNIFORMISATION ── */
/* Assure une hiérarchie typographique uniforme sur toutes les pages */
h1 { font-size: clamp(2rem, 5vw, 3.8rem); line-height: 1.05; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.8rem); line-height: 1.1; }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.8rem); line-height: 1.2; }
h4 { font-size: clamp(1rem, 2vw, 1.35rem); line-height: 1.3; }
h5 { font-size: clamp(.9rem, 1.8vw, 1.1rem); line-height: 1.4; }
h6 { font-size: clamp(.85rem, 1.5vw, .95rem); line-height: 1.4; }

p { line-height: 1.78; }
strong { font-weight: 700; }

/* ── M. NAV IMPROVEMENT (mobile fine-tuning) ── */
@media (max-width: 1399px) {
  #mainNav { height: var(--nav-h-mob); }
}

/* Make nav smooth on scroll on all screen sizes */
#mainNav { will-change: box-shadow; }

/* ── N. PRINT STYLES ── */
@media print {
  #mainNav, footer, #wa-float, #scroll-top, #cookie-banner, #page-loader, #read-progress, #search-overlay { display: none !important; }
  body { font-size: 11pt; color: #000; background: #fff; }
  .section-padding { padding: 1rem 0; }
  a { color: #000; text-decoration: underline; }
  .btn-broc-red, .btn-broc-outline { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   BROC NUTRITION — v7.1 Newsletter · CTA · Sections sombres
   ═══════════════════════════════════════════════════════════════ */

/* ── NEWSLETTER FORM (dark background context) ── */
.nl-section {
  background:
    radial-gradient(ellipse 60% 55% at 5% 50%, rgba(192,57,43,.08) 0%, transparent 50%),
    radial-gradient(ellipse 50% 55% at 95% 50%, rgba(192,57,43,.06) 0%, transparent 50%),
    linear-gradient(160deg, #07080d 0%, #0d0f1a 45%, #07080d 100%);
  position: relative;
  overflow: hidden;
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.nl-section::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none; z-index: 0;
}
.nl-section > * { position: relative; z-index: 1; }

.nl-input {
  width: 100%;
  background: rgba(255,255,255,.07);
  border: 1.5px solid rgba(255,255,255,.14);
  border-radius: var(--radius-sm);
  padding: .62rem .9rem;
  font-family: var(--ff-body); font-size: .88rem;
  color: var(--white);
  outline: none;
  transition: border-color .2s;
}
.nl-input:focus { border-color: var(--red-l); }
.nl-input::placeholder { color: rgba(255,255,255,.32); }

.nl-select {
  background: rgba(255,255,255,.07);
  border: 1.5px solid rgba(255,255,255,.14);
  border-radius: var(--radius-sm);
  padding: .62rem .55rem;
  font-family: var(--ff-body); font-size: .82rem;
  color: var(--white);
  outline: none;
  -webkit-appearance: none; appearance: none;
  cursor: pointer;
  transition: border-color .2s;
}
.nl-select:focus { border-color: var(--red-l); }
.nl-select option { background: #1c1c1c; color: #fff; }

.nl-btn {
  background: var(--red);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  padding: .62rem 1rem;
  font-family: var(--ff-body); font-size: .82rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, transform .15s;
  display: flex; align-items: center; gap: .4rem;
  white-space: nowrap;
}
.nl-btn:hover { background: var(--red-d); transform: translateY(-1px); }

.nl-success {
  display: none;
  padding: .7rem;
  border: 1px solid rgba(74,222,128,.3);
  border-radius: var(--radius-sm);
  background: rgba(74,222,128,.07);
  margin-top: .5rem;
}
.nl-error {
  display: none;
  font-family: var(--ff-mono); font-size: .72rem;
  color: #f87171;
  margin-top: .4rem;
}
.nl-legal {
  font-family: var(--ff-mono); font-size: .56rem;
  color: rgba(255,255,255,.2);
  margin-top: .35rem; line-height: 1.5;
}

/* ── CTA DARK SECTION (contact / devis block) ── */
.cta-dark {
  background:
    radial-gradient(ellipse 70% 60% at 10% 50%, rgba(192,57,43,.10) 0%, transparent 55%),
    linear-gradient(135deg, #09090e 0%, #0e1020 50%, #09090e 100%);
  position: relative; overflow: hidden;
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.cta-dark::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none; z-index: 0;
}
.cta-dark::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(192,57,43,.7) 40%, rgba(192,57,43,.9) 50%, rgba(192,57,43,.7) 60%, transparent);
  pointer-events: none; z-index: 2;
}
.cta-dark > * { position: relative; z-index: 1; }
.cta-dark h2 { font-family: var(--ff-head); color: var(--white); font-size: clamp(1.4rem, 2.8vw, 2rem); line-height: 1.15; }
.cta-dark h2 em { color: var(--red-l); font-style: italic; }
.cta-dark p { color: rgba(255,255,255,.55); font-size: clamp(.85rem, 1.4vw, .95rem); line-height: 1.72; }
.cta-dark .sep-v {
  width: 1px; height: 140px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.12), transparent);
}

/* ── SECTION DIVIDER WITH DIAMOND ── */
.section-diamond-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(192,57,43,.4) 25%, rgba(192,57,43,.4) 75%, transparent 100%);
  margin: 3.5rem 0;
  position: relative; border: none;
}
.section-diamond-divider::after {
  content: '◆';
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  color: rgba(192,57,43,.55);
  font-size: .52rem;
  background: var(--off); /* adapts to background */
  padding: 0 .8rem;
}
.section-dark .section-diamond-divider::after { background: #0e1018; }

/* ── HERO KPI DIVIDER (between KPI items) ── */
.hero-kpi-item {
  display: flex; flex-direction: column;
}
.hero-kpi-item + .hero-kpi-item {
  padding-left: 2.2rem;
  border-left: 1px solid var(--mid);
}
[dir="rtl"] .hero-kpi-item + .hero-kpi-item {
  padding-left: 0; padding-right: 2.2rem;
  border-left: none; border-right: 1px solid var(--mid);
}

/* ── IMPROVED SECTION TAG (all pages) ── */
.section-tag {
  margin-bottom: 1rem;
}

/* ── CARD HOVER UNIFORM (standardisation) ── */
.card-broc, .prod-card, .testimonial-card, .dist-card,
.resource-card, .dir-card {
  will-change: transform, box-shadow;
}

/* ── NAV RESPONSIVE — very small screens ── */
@media (max-width: 380px) {
  .nav-inner { width: 100%; padding: 0 .75rem; }
  .navbar-brand-logo img { height: 44px !important; }
  .btn-nav-icon { width: 30px; height: 30px; }
  .navbar-toggler { width: 34px; height: 34px; }
}

/* ── FOOTER RESPONSIVE ── */
@media (max-width: 576px) {
  footer { padding: 2rem 0 1rem; }
  .footer-brand { font-size: 1.4rem; }
  .footer-desc { font-size: .8rem; }
  footer .row.g-5 { --bs-gutter-y: 1.5rem; }
}

/* ── OFFCANVAS HEADER RTL ── */
[dir="rtl"] .oc-brand-header { flex-direction: row-reverse; }
[dir="rtl"] .nav-mobile-actions { margin-left: 0; margin-right: auto; }

/* ── PAGE HEADER RTL ── */
[dir="rtl"] .page-breadcrumb a:first-child { order: 3; }
[dir="rtl"] .page-header h1 { text-align: right; }
[dir="rtl"] .page-header p.lead { text-align: right; }

/* ── SWOT RTL ── */
[dir="rtl"] .swot-items li { flex-direction: row-reverse; }

/* ── FORMS RTL ── */
[dir="rtl"] .form-control-broc { text-align: right; direction: rtl; }
[dir="rtl"] select.form-control-broc { background-position: left .9rem center; padding-right: 1rem; padding-left: 2.5rem; }
[dir="rtl"] .form-label-broc { text-align: right; display: block; }

/* ── DARK MODE ADDITIONS ── */
[data-theme="dark"] .dark-bg {
  background:
    radial-gradient(ellipse 65% 50% at 5% 10%, rgba(192,57,43,.12) 0%, transparent 52%),
    radial-gradient(ellipse 55% 50% at 95% 90%, rgba(192,57,43,.09) 0%, transparent 50%),
    linear-gradient(160deg, #020305 0%, #070810 30%, #0b0d18 65%, #020305 100%);
}
[data-theme="dark"] footer::before {
  background: linear-gradient(90deg, transparent 0%, rgba(192,57,43,.6) 20%, rgba(192,57,43,.9) 50%, rgba(192,57,43,.6) 80%, transparent 100%);
}
[data-theme="dark"] .glass-card {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.07);
}
[data-theme="dark"] .nl-input,
[data-theme="dark"] .nl-select {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.10);
  color: rgba(232,233,240,.9);
}

/* ── SECTION PATTERNS - Light pages ── */
.section-pattern-light {
  position: relative; overflow: hidden;
}
.section-pattern-light::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 40px, rgba(0,0,0,.015) 40px, rgba(0,0,0,.015) 41px),
    repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(0,0,0,.015) 40px, rgba(0,0,0,.015) 41px);
  pointer-events: none; z-index: 0;
}
.section-pattern-light > * { position: relative; z-index: 1; }

/* ── MARQUEE RTL ── */
[dir="rtl"] .marquee-track { animation-direction: reverse; }

/* ── HERO ACTIONS RTL ── */
[dir="rtl"] .hero-actions { flex-direction: row-reverse; }
[dir="rtl"] .hero-badge { flex-direction: row-reverse; }

/* ── STAT BAR RTL ── */
[dir="rtl"] .stat-lbl { font-size: .62rem; }

/* ── TESTIMONIAL RTL ── */
[dir="rtl"] .testimonial-card::before { left: auto; right: 1.4rem; }
[dir="rtl"] .test-author { flex-direction: row-reverse; }

/* ═══════════════════════════════════════════════════════════════
   SMALL TEXT READABILITY — global visibility improvements
   Augmente les tailles mini + renforce opacités textes secondaires
   ═══════════════════════════════════════════════════════════════ */

/* ── Labels mono (section-tag, stats, kpi, badges) ── */
.section-tag,
.stat-lbl,
.intl-kpi-lbl,
.intl-filter-label,
.country-region,
.resource-meta,
.tl-year,
.dir-role,
.member-dept,
.member-role,
.test-role,
.horizon-period,
.form-label-broc,
.reg-code,
.cii-label,
.loader-sub,
.marquee-item {
  font-size: max(.68rem, 10.5px) !important;
}

/* ── Chips & badges ── */
.chip,
.prod-stamp,
.badge-double,
.badge-single,
.resource-type-badge,
.country-status {
  font-size: max(.7rem, 11px) !important;
}

/* ── Boutons & labels de formulaire ── */
.btn-broc-red,
.btn-broc-outline,
.btn-broc-white,
.btn-nav-cta,
.filter-chip {
  font-size: max(.78rem, 12px) !important;
}

/* ── Corps des cards ── */
.card-text,
.prod-desc,
.prod-meta,
.tl-text,
.reg-desc,
.notice-text,
.body {
  font-size: max(.9rem, 13.5px) !important;
}

/* ── Textes secondaires sur fond sombre : opacité plancher ── */
.section-dark .card-text,
.section-dark p,
[style*="rgba(232,233,240,.5)"],
[style*="rgba(255,255,255,.35)"],
[style*="rgba(255,255,255,.38)"],
[style*="rgba(255,255,255,.4)"] {
  color: rgba(232,233,240,.7) !important;
}

/* ── Labels mono sur fond sombre : lisibilité ── */
.section-dark .section-tag,
.section-dark .continent-label,
.section-dark .stat-lbl,
.section-dark .intl-kpi-lbl {
  color: rgba(255,255,255,.72) !important;
  font-weight: 600 !important;
}

/* ── Résultats de count / petites légendes ── */
#results-count,
.footer-bottom-text,
.mol-formula,
.calc-result-lbl,
.range-wrap label {
  font-size: max(.72rem, 11px) !important;
}

/* ── Hero KPI labels ── */
.hero-kpi-lbl,
.stat-lbl {
  font-size: max(.68rem, 10.5px) !important;
  color: rgba(255,255,255,.72) !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
}

/* ══════════════════════════════════════════════════════════════
   HERO RESTYLED — dot grid · orbs · certs · accent bar · feats
   ══════════════════════════════════════════════════════════════ */

/* Dot grid pattern — tech / scientifique */
.hero-dot-grid {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: linear-gradient(135deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.25) 45%, transparent 70%);
  mask-image: linear-gradient(135deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.25) 45%, transparent 70%);
}

/* Orbes lumineux animés */
.hero-orb { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 1; }
.hero-orb-1 {
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(224,0,27,.16) 0%, transparent 68%);
  top: -120px; left: -140px;
  animation: heroOrb1 13s ease-in-out infinite;
}
.hero-orb-2 {
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(8,14,40,.55) 0%, transparent 68%);
  bottom: -80px; right: 18%;
  animation: heroOrb2 17s ease-in-out infinite reverse;
}
@keyframes heroOrb1 { 0%,100% { transform: translate(0,0) scale(1); opacity: 1; } 50% { transform: translate(50px,35px) scale(1.12); opacity: .8; } }
@keyframes heroOrb2 { 0%,100% { transform: translate(0,0) scale(1); opacity: 1; } 50% { transform: translate(-35px,-25px) scale(1.09); opacity: .7; } }

/* Certification pills */
.hero-certs {
  display: flex; flex-wrap: wrap; gap: .45rem;
  margin-bottom: 1.25rem;
}
.hero-cert-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .82rem;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 100px;
  font-family: var(--ff-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .2s, border-color .2s;
  cursor: default;
}
.hero-cert-pill:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.35); }
.hero-cert-pill.hero-cert-red {
  background: rgba(224,0,27,.16);
  border-color: rgba(224,0,27,.42);
  color: #ff5566;
}
.hero-cert-pill.hero-cert-red:hover { background: rgba(224,0,27,.26); }
.hero-cert-flag { height: 16px; border-radius: 2px; flex-shrink: 0; }
.hero-cert-icon { width: 12px; height: 12px; flex-shrink: 0; }

/* Title with left red accent bar */
.hero-title-wrap {
  display: flex; align-items: stretch; gap: .9rem;
  margin-bottom: .9rem;
}
.hero-accent-bar {
  width: 5px; min-height: 100%; flex-shrink: 0;
  background: linear-gradient(180deg, #e0001b 0%, rgba(224,0,27,.22) 100%);
  border-radius: 6px;
  margin-top: .1rem;
  box-shadow: 0 0 18px rgba(224,0,27,.45);
}

/* ── Feature tags bar — dark grey gradient + motif ────────────────── */
.hero-feats {
  display: inline-flex; flex-wrap: wrap; align-items: center;
  gap: 0;
  margin-bottom: 1.75rem;
  /* Conteneur bandeaux gris foncé gradient */
  background: linear-gradient(135deg,
    rgba(22,24,34,.92) 0%,
    rgba(30,32,44,.88) 50%,
    rgba(18,20,30,.95) 100%
  );
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 12px;
  padding: .4rem .2rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.40), 0 1px 0 rgba(255,255,255,.07) inset;
}
/* Motif lignes diagonales léger */
.hero-feats::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,.025) 0px,
      rgba(255,255,255,.025) 1px,
      transparent 1px,
      transparent 12px
    );
  border-radius: inherit;
}
/* Bordure rouge en haut */
.hero-feats::after {
  content: '';
  position: absolute; top: 0; left: 10%; right: 10%; height: 1.5px;
  background: linear-gradient(90deg, transparent, #e0001b 40%, #ff3352 60%, transparent);
  border-radius: 0 0 2px 2px;
}
.hero-feat {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--ff-mono); font-size: .78rem;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.88);
  text-shadow: 0 1px 6px rgba(0,0,0,.65);
  padding: .45rem .9rem;
  position: relative; z-index: 1;
  transition: color .2s;
}
/* Séparateur entre feats */
.hero-feat + .hero-feat::before {
  content: '';
  position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 1px;
  background: rgba(255,255,255,.15);
}
.hero-feat:hover { color: #ffffff; }
.hero-feat-icon {
  width: 16px; height: 16px; color: #e0001b; flex-shrink: 0;
  filter: drop-shadow(0 0 4px rgba(224,0,27,.55));
  transition: transform .2s;
}
.hero-feat:hover .hero-feat-icon { transform: scale(1.15); }

/* Hero container centering fix */
.hero-section > .container-xl {
  position: relative; z-index: 2;
}

/* ── Hero KPI redesign — gradient gris foncé + motif ── */
.hero-kpi {
  display: inline-flex !important;
  align-items: stretch;
  gap: 0;
  margin-top: 1.4rem;
  /* Fond gradient gris foncé cohérent avec feats bar */
  background: linear-gradient(135deg,
    rgba(22,24,34,.92) 0%,
    rgba(30,32,44,.88) 50%,
    rgba(18,20,30,.95) 100%
  );
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 14px;
  padding: .75rem 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.40), 0 1px 0 rgba(255,255,255,.07) inset;
}
/* Même motif diagonal que feats */
.hero-kpi::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,.022) 0px,
    rgba(255,255,255,.022) 1px,
    transparent 1px,
    transparent 12px
  );
  border-radius: inherit;
}
/* Ligne rouge top */
.hero-kpi::after {
  content: '';
  position: absolute; top: 0; left: 10%; right: 10%; height: 1.5px;
  background: linear-gradient(90deg, transparent, #e0001b 40%, #ff3352 60%, transparent);
  border-radius: 0 0 2px 2px;
}
.hero-kpi-item {
  display: flex !important; flex-direction: column; align-items: center;
  padding: .3rem 2rem;
  position: relative; z-index: 1;
  flex: 1;
}
/* Séparateur vertical entre items */
.hero-kpi-sep {
  width: 1px;
  background: rgba(255,255,255,.15);
  margin: .2rem 0;
  align-self: stretch;
  flex-shrink: 0;
}
.hero-kpi-num {
  font-family: var(--ff-head) !important;
  font-size: 2rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1 !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.40) !important;
  letter-spacing: -.01em;
}
.hero-kpi-lbl {
  font-family: var(--ff-mono) !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.60) !important;
  margin-top: .3rem !important;
  text-shadow: none !important;
  white-space: nowrap;
}

/* Responsive hero-certs & feats on mobile */
@media (max-width: 767px) {
  .hero-certs { gap: .35rem; }
  .hero-cert-pill { font-size: .6rem; padding: .25rem .6rem; }
  .hero-feats { gap: .45rem .9rem; justify-content: center; }
  .hero-accent-bar { width: 4px; }
  .hero-title-wrap { gap: .65rem; }
}

/* RTL adjustments for certs & feats */
body.lang-ar .hero-certs { flex-direction: row-reverse; }
body.lang-ar .hero-feats { flex-direction: row-reverse !important; }
body.lang-ar .hero-feat  { flex-direction: row-reverse !important; }
body.lang-ar .hero-title-wrap { flex-direction: row !important; }
body.lang-ar .hero-title-wrap .hero-accent-bar { order: 2 !important; }
body.lang-ar .hero-title-wrap h1                { order: 1 !important; }
body.lang-ar .hero-accent-bar { background: linear-gradient(180deg, #e0001b 0%, rgba(224,0,27,.22) 100%); }

/* ══════════════════════════════════════════════════════════════
   HERO PANEL — glassmorphism · gradient · dot pattern · dynamique
   ══════════════════════════════════════════════════════════════ */

/* Conteneur principal */
.hero-panel {
  position: relative;
  width: 500px; max-width: 100%;
  background: linear-gradient(145deg, rgba(8,10,26,.75) 0%, rgba(4,6,18,.82) 100%);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 24px;
  padding: 2rem;
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.07) inset,
    0 40px 90px rgba(0,0,0,.55),
    0 0 80px rgba(224,0,27,.10),
    0 -1px 0 rgba(255,255,255,.12) inset;
  transition: box-shadow .4s ease;
}
.hero-panel:hover {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 40px 90px rgba(0,0,0,.55),
    0 0 100px rgba(224,0,27,.18),
    0 -1px 0 rgba(255,255,255,.16) inset;
}

/* Glow rouge animé haut-droite */
.hero-panel-glow {
  position: absolute; width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(224,0,27,.28) 0%, rgba(160,0,20,.06) 55%, transparent 70%);
  top: -140px; right: -130px; border-radius: 50%;
  filter: blur(55px); pointer-events: none; z-index: 0;
  animation: panelGlow 6s ease-in-out infinite;
}
/* Second glow bleu-marine bas-gauche */
.hero-panel-glow::after {
  content: '';
  position: absolute; width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(30,60,140,.22) 0%, transparent 65%);
  bottom: -80px; left: -60px; border-radius: 50%;
  filter: blur(40px);
}
@keyframes panelGlow {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .72; transform: scale(1.08); }
}

/* Motif points intérieur animé */
.hero-panel-dots {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 20px 20px;
  animation: dotDrift 18s linear infinite;
}
@keyframes dotDrift { 0% { background-position: 0 0; } 100% { background-position: 20px 20px; } }

/* Bordure rouge top */
.hero-panel::before {
  content: '';
  position: absolute; top: 0; left: 12%; right: 12%; height: 2px;
  background: linear-gradient(90deg, transparent 0%, #e0001b 35%, #ff3352 65%, transparent 100%);
  border-radius: 0 0 2px 2px;
  opacity: .85;
  z-index: 2;
}

/* Tous les enfants au-dessus des layers déco */
.hero-panel > *:not(.hero-panel-glow):not(.hero-panel-dots) { position: relative; z-index: 1; }

/* ── Logo wrap ── */
.hero-panel-logo-wrap {
  display: flex; flex-direction: column; align-items: center; gap: .65rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.3rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.hero-panel-logo {
  max-width: 200px; width: 100%;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,.55));
  opacity: 1;
  border-radius: 8px;
  transition: filter .3s, transform .3s;
  animation: logoFloat 6s ease-in-out infinite;
}
.hero-panel:hover .hero-panel-logo { filter: drop-shadow(0 4px 18px rgba(0,0,0,.65)) drop-shadow(0 0 10px rgba(224,0,27,.25)); }
@keyframes logoFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.hero-panel-tagline {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--ff-mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.68);
  font-weight: 600;
}
.hero-panel-dot-pulse {
  width: 7px; height: 7px; border-radius: 50%; background: #e0001b; flex-shrink: 0;
  box-shadow: 0 0 8px rgba(224,0,27,.7);
  animation: heroDot 2s ease-in-out infinite;
}

/* ── Grille 2×2 de cartes ── */
.hero-panel-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: .6rem; margin-bottom: 0;
}
.hero-panel-card {
  display: flex; align-items: center; gap: .6rem;
  padding: .8rem .9rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  transition: background .25s, border-color .25s, transform .25s, box-shadow .25s;
  cursor: default;
}
.hero-panel-card:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.28);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.30);
}
.hero-panel-card--red {
  background: rgba(224,0,27,.12);
  border-color: rgba(224,0,27,.32);
}
.hero-panel-card--red:hover {
  background: rgba(224,0,27,.22);
  border-color: rgba(224,0,27,.55);
  box-shadow: 0 8px 24px rgba(224,0,27,.22);
}

/* Icônes et images */
.hero-panel-card-img {
  width: 32px; height: 32px; object-fit: cover;
  border-radius: 7px; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.hero-panel-card-icon {
  width: 26px; height: 26px; color: #e0001b; flex-shrink: 0;
  filter: drop-shadow(0 0 5px rgba(224,0,27,.45));
}

/* Textes cartes — agrandis + lisibles */
.hero-panel-card-title {
  font-family: var(--ff-mono);
  font-size: .80rem;           /* ← augmenté depuis .64rem */
  font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  color: #ffffff;
  line-height: 1.2;
  text-shadow: 0 1px 4px rgba(0,0,0,.50);
}
.hero-panel-card-sub {
  font-size: .74rem;           /* ← augmenté depuis max(.58rem,9px) */
  font-weight: 500;
  color: rgba(255,255,255,.68);
  margin-top: .18rem; line-height: 1.3;
}
.hero-panel-card--red .hero-panel-card-title { color: #ff6070; }
.hero-panel-card--red .hero-panel-card-sub   { color: rgba(255,180,185,.70); }

/* Cartes non-rouge : icône globe lisible */
.hero-panel-card:not(.hero-panel-card--red) .hero-panel-card-icon { color: rgba(180,210,255,.85); filter: none; }

/* Responsive — caché <992px car d-none d-lg-flex */
@media (max-width: 1399px) {
  .hero-panel { width: 440px; padding: 1.8rem; }
  .hero-panel-logo { max-width: 175px; }
}
@media (max-width: 1199px) {
  .hero-panel { width: 380px; padding: 1.5rem; }
  .hero-panel-card { padding: .65rem .75rem; }
  .hero-panel-card-title { font-size: .74rem; }
  .hero-panel-card-sub   { font-size: .68rem; }
  .hero-panel-logo { max-width: 155px; }
  .hero-panel-tagline { font-size: .70rem; }
}
/* RTL */
body.lang-ar .hero-panel-grid { direction: rtl; }
body.lang-ar .hero-panel-card { flex-direction: row-reverse; }

/* ════════════════════════════════════════════════════════════════
   LANDING PAGE — HARMONISATION GLOBALE v50
   Cohérence design : navy dark · dot pattern · accent rouge · typo
   ════════════════════════════════════════════════════════════════ */

/* ── 1. STAT-BAR — bordure rouge top restaurée + dot grid ────── */
.stat-bar {
  border-top: 2px solid transparent !important;
  border-image: linear-gradient(90deg,
    transparent,
    rgba(192,57,43,.55) 30%,
    rgba(192,57,43,.92) 50%,
    rgba(192,57,43,.55) 70%,
    transparent) 1 !important;
  background:
    radial-gradient(circle, rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(160deg, #07080d 0%, #0c0e18 50%, #07080d 100%) !important;
  background-size: 28px 28px, 100% 100% !important;
}
.stat-num  { font-size: clamp(1.6rem, 3.5vw, 2.4rem) !important; font-weight: 800 !important; color: #ffffff !important; }
.stat-lbl  { font-size: max(.62rem, 9.5px) !important; font-weight: 600 !important; color: rgba(255,255,255,.58) !important; letter-spacing: .1em !important; }
.stat-item { border-right: 1px solid rgba(255,255,255,.10) !important; }
.stat-item:last-child { border-right: none !important; }

/* ── 2. SECTION-DARK + TESTIMONIALS — navy unifié + dot + accent ─ */
.section-dark,
.section-testimonials {
  background:
    radial-gradient(circle, rgba(255,255,255,.02) 1px, transparent 1px),
    radial-gradient(ellipse 65% 50% at 50% 0%, rgba(192,57,43,.07) 0%, transparent 55%),
    linear-gradient(160deg, #08090e 0%, #0d0f1a 45%, #111422 70%, #08090e 100%) !important;
  background-size: 28px 28px, 100% 100%, 100% 100% !important;
  position: relative !important; overflow: hidden !important;
}
.section-dark::before,
.section-testimonials::before {
  content: '' !important; pointer-events: none !important; z-index: 0 !important;
  position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg,
    transparent, rgba(192,57,43,.5) 30%,
    rgba(192,57,43,.88) 50%,
    rgba(192,57,43,.5) 70%, transparent) !important;
}
.section-dark > .container-xl,
.section-testimonials > .container-xl { position: relative !important; z-index: 1 !important; }

/* ── 3. NEWSLETTER / CTA — dot grid + accent + cohérence ──────── */
#homepage-newsletter {
  background:
    radial-gradient(circle, rgba(255,255,255,.022) 1px, transparent 1px),
    radial-gradient(ellipse 70% 55% at 5% 10%, rgba(192,57,43,.09) 0%, transparent 55%),
    radial-gradient(ellipse 55% 50% at 95% 90%, rgba(192,57,43,.07) 0%, transparent 50%),
    linear-gradient(170deg, #06070b 0%, #0c0e18 30%, #101320 65%, #06070b 100%) !important;
  background-size: 28px 28px, 100% 100%, 100% 100%, 100% 100% !important;
}
#homepage-newsletter > div:first-child {
  top: 0 !important; height: 2px !important;
  background: linear-gradient(90deg,
    transparent, rgba(192,57,43,.5) 30%,
    rgba(192,57,43,.9) 50%,
    rgba(192,57,43,.5) 70%, transparent) !important;
  position: absolute !important; left: 0 !important; right: 0 !important;
}

/* ── 4. SECTION-TAGS — pill unifiée sur toutes les sections sombres */
#atouts-section .section-tag,
#produits-section .section-tag,
#appli-section .section-tag,
#homepage-events .section-tag,
.section-dark .section-tag,
.section-testimonials .section-tag {
  display: inline-flex !important; align-items: center !important; gap: .45rem !important;
  background: rgba(192,57,43,.10) !important;
  border: 1px solid rgba(192,57,43,.25) !important;
  color: rgba(240,240,244,.82) !important;
  padding: .28rem .85rem .28rem .6rem !important;
  border-radius: 4px !important;
  font-size: max(.68rem, 10.5px) !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
}

/* ── 5. SECTION-TITLES sur sections sombres — cohérence ─────── */
#atouts-section .section-title,
#produits-section .section-title,
#appli-section .section-title,
#homepage-events .section-title,
.section-dark .section-title,
.section-testimonials .section-title {
  color: #f0f2fa !important;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important;
}

/* ── 6. CARDS ATOUTS — glassmorphism net + hover dynamique ────── */
#atouts-section .card-broc {
  background: rgba(255,255,255,.038) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 16px !important;
  transition: background .25s, border-color .25s, transform .25s, box-shadow .25s !important;
  padding: 1.6rem !important;
}
#atouts-section .card-broc:hover {
  background: rgba(192,57,43,.08) !important;
  border-color: rgba(192,57,43,.32) !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.40), 0 0 0 1px rgba(192,57,43,.18) !important;
}
#atouts-section .exp-num {
  font-family: var(--ff-head) !important; font-size: 2.8rem !important; font-weight: 900 !important;
  color: rgba(192,57,43,.22) !important; line-height: 1 !important; margin-bottom: .6rem !important;
}
#atouts-section .card-title {
  color: rgba(240,242,250,.94) !important; font-size: 1.05rem !important; font-weight: 700 !important;
  margin-bottom: .55rem !important;
}
#atouts-section .card-text {
  color: rgba(200,204,225,.60) !important; font-size: max(.875rem, 13px) !important; line-height: 1.68 !important;
}

/* ── 7. PROD-CARDS — uniformisation bordure + hover ─────────── */
#produits-section .prod-card {
  background: rgba(255,255,255,.038) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 18px !important;
  padding: 1.8rem !important;
  transition: background .25s, border-color .25s, transform .25s, box-shadow .25s !important;
  position: relative !important; overflow: hidden !important;
}
#produits-section .prod-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.40) !important;
}
.prod-name { color: #f0f2fa !important; font-weight: 800 !important; }
.prod-desc { color: rgba(200,204,225,.65) !important; font-size: max(.875rem, 13px) !important; line-height: 1.72 !important; }
.prod-meta { color: rgba(192,57,43,.85) !important; font-family: var(--ff-mono) !important; font-size: max(.68rem, 10.5px) !important; font-weight: 600 !important; letter-spacing: .08em !important; }
.prod-stamp { border-radius: 5px !important; padding: .3rem .75rem !important; font-weight: 700 !important; }

/* ── 8. APPLICATION CARD — icône + titre cohérents ──────────── */
#appli-section .card-broc {
  background: rgba(255,255,255,.038) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 16px !important; transition: all .25s !important;
}
#appli-section .card-broc:hover {
  background: rgba(192,57,43,.07) !important;
  border-color: rgba(192,57,43,.28) !important;
  transform: translateY(-3px) !important;
}
#appli-section .card-icon { font-size: 2.2rem !important; margin-bottom: .6rem !important; }
#appli-section .card-title { color: rgba(240,242,250,.94) !important; font-weight: 700 !important; }
#appli-section .card-text  { color: rgba(200,204,225,.60) !important; font-size: max(.875rem, 13px) !important; }

/* ── 9. ÉVÉNEMENTS — header aligné + cards cohérentes ────────── */
#homepage-events .section-tag { margin-bottom: .5rem !important; }
#homepage-events .section-title { margin-bottom: .3rem !important; }
#homepage-events .body-lg { color: rgba(200,204,225,.65) !important; font-size: max(.9rem, 13.5px) !important; }
#hp-upcoming-banner {
  background: linear-gradient(135deg, #b80017, #8c0012) !important;
  border: 1px solid rgba(224,0,27,.25) !important;
  border-radius: 16px !important;
}

/* ── Réduction espace vertical : testimonials + events ── */
.section-testimonials,
#homepage-events {
  padding-top:    clamp(2rem, 3vw, 3.5rem) !important;
  padding-bottom: clamp(2rem, 3vw, 3.5rem) !important;
}
.section-testimonials + #homepage-events {
  padding-top: clamp(1.5rem, 2.5vw, 2.5rem) !important;
}
@media (min-width: 1400px) {
  .section-testimonials,
  #homepage-events { padding: 3.5rem 0 !important; }
}

/* ══════════════════════════════════════════════════════════════
   FAB CAROUSEL — ultra-moderne
   ══════════════════════════════════════════════════════════════ */

#fab-section {
  padding: clamp(2.5rem,4vw,4rem) 0;
}

/* Stage */
.fab-carousel { position: relative; width: 100%; }

.fab-car-stage {
  position: relative; width: 100%;
  aspect-ratio: 16 / 6.5;
  border-radius: 18px; overflow: hidden;
  background: #08090f;
  cursor: grab; user-select: none;
  box-shadow: 0 24px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
}
.fab-car-stage:active { cursor: grabbing; }

/* Track */
.fab-car-track {
  display: flex; height: 100%;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.fab-car-slide {
  min-width: 100%; position: relative; overflow: hidden;
}
.fab-car-slide img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 8s ease; display: block;
}
.fab-car-slide.active img { transform: scale(1.05); }

/* Info overlay */
.fab-car-info {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 3rem 2rem 1.5rem;
  background: linear-gradient(0deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.3) 55%,transparent 100%);
}
.fab-car-live {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--red); color: #fff;
  font-family: var(--ff-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .22rem .7rem; border-radius: 20px; margin-bottom: .55rem;
}
.fab-car-live span {
  width: 6px; height: 6px; border-radius: 50%; background: #fff;
  animation: heroDot 1.2s ease-in-out infinite;
}
.fab-car-cap {
  font-family: var(--ff-mono); font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.92); margin: 0; line-height: 1.4;
}

/* Prev / Next */
.fab-car-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(8,10,22,.70); border: 1px solid rgba(255,255,255,.18);
  color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: background .2s, transform .2s, border-color .2s;
  z-index: 10; outline: none;
}
.fab-car-btn:hover {
  background: var(--red); border-color: transparent;
  transform: translateY(-50%) scale(1.1);
}
.fab-car-btn svg { width: 20px; height: 20px; }
.fab-car-prev { left: 1.1rem; }
.fab-car-next { right: 1.1rem; }

/* Counter badge */
.fab-car-counter {
  position: absolute; top: 1.1rem; right: 1.4rem;
  font-family: var(--ff-mono); font-size: .62rem; letter-spacing: .1em; color: rgba(255,255,255,.72);
  background: rgba(0,0,0,.48); backdrop-filter: blur(8px);
  padding: .28rem .75rem; border-radius: 20px; z-index: 10;
}

/* Progress bar */
.fab-car-pgbar {
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: rgba(255,255,255,.12); z-index: 10;
}
.fab-car-pgfill {
  height: 100%; width: 0%;
  background: var(--red);
  transition: width 4.5s linear;
}

/* Thumbnails strip */
.fab-car-thumbs {
  display: flex; gap: .55rem;
  margin-top: .75rem;
  overflow-x: auto; padding-bottom: .2rem;
  scrollbar-width: none;
}
.fab-car-thumbs::-webkit-scrollbar { display: none; }

.fab-car-thumb {
  flex: 0 0 calc(20% - .44rem);
  border-radius: 10px; overflow: hidden;
  cursor: pointer; opacity: .45;
  border: 2px solid transparent;
  transition: opacity .25s, border-color .25s, transform .25s;
  position: relative;
}
.fab-car-thumb img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  display: block; pointer-events: none;
}
.fab-car-thumb-lbl {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,.65); padding: .25rem .4rem;
  font-family: var(--ff-mono); font-size: max(.52rem,8px);
  letter-spacing: .07em; text-transform: uppercase;
  color: rgba(255,255,255,.72); text-align: center;
}
.fab-car-thumb:hover { opacity: .75; transform: translateY(-2px); }
.fab-car-thumb.active {
  opacity: 1; border-color: var(--red);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(224,0,27,.28);
}
.fab-car-thumb.active .fab-car-thumb-lbl { color: #fff; }

/* Responsive */
@media (max-width: 991px) {
  .fab-car-stage { aspect-ratio: 16/8; border-radius: 14px; }
  .fab-car-thumb { flex: 0 0 calc(33.33% - .37rem); }
}
@media (max-width: 575px) {
  .fab-car-stage { aspect-ratio: 4/3; border-radius: 10px; }
  .fab-car-btn { width: 36px; height: 36px; }
  .fab-car-btn svg { width: 16px; height: 16px; }
  .fab-car-thumb { flex: 0 0 calc(50% - .28rem); }
  .fab-car-cap { font-size: .68rem; }
}

/* RTL */
body.lang-ar .fab-car-thumbs { flex-direction: row-reverse; }
body.lang-ar .fab-car-prev { left: auto; right: 1.1rem; }
body.lang-ar .fab-car-next { right: auto; left: 1.1rem; }

/* ══════════════════════════════════════════════════════════════
   HARMONISATION LANDING PAGE — v40
   Espacement · Cohérence · Hero height · Sections
   ══════════════════════════════════════════════════════════════ */

/* ── Hero : hauteur basée sur le contenu, plus de débordement ── */
.hero-section {
  aspect-ratio: unset !important;
  min-height: unset !important;
  max-height: unset !important;
  height: auto !important;
  padding-top: calc(var(--nav-h, 68px) + clamp(2rem, 4vw, 3.5rem)) !important;
  padding-bottom: clamp(2.5rem, 5vw, 4rem) !important;
}

/* ── Hero titre : BROC blanc, NUTRI outline blanc, TION rouge ── */
.hero-title {
  color: #ffffff !important;
  text-shadow: 0 2px 24px rgba(4,6,18,.50), 0 1px 4px rgba(0,0,0,.30) !important;
}
.hero-title .outline {
  -webkit-text-stroke: 2px rgba(255,255,255,.85) !important;
  color: transparent !important;
}
.hero-title .accent {
  color: var(--red) !important;
  text-shadow: none !important;
}

/* ── Sous-titre plus lisible ── */
.hero-sub {
  color: rgba(225,230,248,.90) !important;
  text-shadow: 0 1px 8px rgba(0,0,0,.35) !important;
  font-size: clamp(.95rem, 1.6vw, 1.1rem) !important;
  line-height: 1.65 !important;
  max-width: 520px;
}

/* ── Feats bar harmonisée ── */
.hero-feats {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .9rem;
  margin-top: 1.2rem;
  justify-content: space-between;
}
.hero-feat {
  display: inline-flex; align-items: center; gap: .38rem;
  padding: .32rem .75rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 20px;
  font-family: var(--ff-mono);
  font-size: max(.62rem, 10px);
  letter-spacing: .07em; text-transform: uppercase;
  color: rgba(255,255,255,.82);
  transition: background .2s;
}
.hero-feat:hover { background: rgba(255,255,255,.14); }
.hero-feat-icon { width: 13px; height: 13px; color: var(--red); }

/* ── Panel hero : logo sans filtre blanc ── */
.hero-panel-logo {
  filter: none !important;
  opacity: 1 !important;
  max-width: 180px !important;
  border-radius: 8px;
}

/* ── Marquee : réduire l'espace autour ── */
.marquee-wrap {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ── Fab section : padding harmonisé ── */
#fab-section {
  padding: clamp(2rem, 3.5vw, 3.5rem) 0 !important;
}

/* ── Toutes les sections content : padding uniforme ── */
.section-padding,
#atouts-section,
#produits-section,
#appli-section,
.section-testimonials,
#homepage-events {
  padding-top:    clamp(2.2rem, 3.5vw, 3.8rem) !important;
  padding-bottom: clamp(2.2rem, 3.5vw, 3.8rem) !important;
}

/* ── Section tags / titres : cohérence ── */
.section-tag {
  font-family: var(--ff-mono) !important;
  font-size: max(.65rem, 10.5px) !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--red) !important;
  margin-bottom: .55rem !important;
  display: flex; align-items: center; gap: .45rem;
  justify-content: center;
}
.section-tag::before {
  content: '';
  display: inline-block; width: 18px; height: 2px;
  background: var(--red); border-radius: 2px; flex-shrink: 0;
}
.section-title {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  color: #ffffff !important;
  margin-bottom: .4rem !important;
}
.section-title em {
  color: var(--red) !important;
  font-style: italic !important;
  font-weight: 800 !important;
}
.section-title span { color: #ffffff !important; }

/* ── Cards Broc : harmonisation ── */
.card-broc {
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  transition: transform .25s, box-shadow .25s, border-color .25s !important;
}
.card-broc:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.35) !important;
  border-color: rgba(224,0,27,.3) !important;
}

/* ── Produit cards : harmonisation ── */
.prod-card {
  border-radius: 14px !important;
  transition: transform .25s, box-shadow .25s !important;
}
.prod-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.4) !important;
}

/* ── Fab header ── */
.fab-header {
  margin-bottom: 1.6rem !important;
}
.fab-tag {
  font-family: var(--ff-mono) !important;
  font-size: max(.63rem, 10px) !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--red) !important;
  display: flex; align-items: center; gap: .4rem;
  margin-bottom: .5rem !important;
}
.fab-tag::before {
  content: '';
  width: 18px; height: 2px;
  background: var(--red); border-radius: 2px;
}
.fab-title {
  font-size: clamp(1.7rem, 3vw, 2.6rem) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.15 !important;
}
.fab-title em { color: var(--red) !important; font-style: italic !important; }

/* ── Responsive harmonisation ── */
@media (max-width: 767px) {
  .hero-section {
    padding-top: calc(var(--nav-h, 58px) + 1.5rem) !important;
    padding-bottom: 2rem !important;
  }
  .hero-sub { font-size: .9rem !important; }
  .section-title { font-size: clamp(1.4rem, 6vw, 2rem) !important; }
  .hero-panel { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   COVERFLOW CAROUSEL — 3D fan style
   ══════════════════════════════════════════════════════════════ */

.cov-wrap {
  position: relative;
  padding: 1rem 0 3rem;
  overflow: hidden;
  background: transparent;
}

/* Stage 3D */
.cov-stage {
  position: relative;
  height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1400px;
}

/* Chaque carte */
.cov-slide {
  position: absolute;
  width: clamp(260px, 28vw, 380px);
  height: clamp(180px, 19vw, 260px);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .55s cubic-bezier(.4,0,.2,1),
              opacity  .55s cubic-bezier(.4,0,.2,1),
              box-shadow .55s ease;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  user-select: none;
}
.cov-slide img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  pointer-events: none;
  transition: transform .55s ease;
}
.cov-slide.cov-active img { transform: scale(1.03); }

/* Caption overlay */
.cov-cap {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 2.5rem 1rem .9rem;
  background: linear-gradient(0deg, rgba(0,0,0,.80) 0%, transparent 100%);
  opacity: 0; transition: opacity .35s ease;
  text-align: center;
}
.cov-slide.cov-active .cov-cap { opacity: 1; }

.cov-live {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--red); color: #fff;
  font-family: var(--ff-mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .18rem .6rem; border-radius: 20px; margin-bottom: .45rem;
}
.cov-live span {
  width: 5px; height: 5px; border-radius: 50%; background: #fff;
  animation: heroDot 1.2s ease-in-out infinite;
}
.cov-cap p {
  font-family: var(--ff-mono); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.90); margin: 0;
}

/* Arrows */
.cov-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(8,10,22,.68); border: 1px solid rgba(255,255,255,.18);
  color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; backdrop-filter: blur(12px); z-index: 100;
  transition: background .2s, transform .2s;
}
.cov-btn:hover { background: var(--red); border-color: transparent; transform: translateY(-50%) scale(1.1); }
.cov-btn svg { width: 20px; height: 20px; }
.cov-prev { left: clamp(.5rem, 3vw, 2.5rem); }
.cov-next { right: clamp(.5rem, 3vw, 2.5rem); }

/* Dots */
.cov-dots {
  position: absolute; bottom: .8rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: .45rem; z-index: 10;
}
.cov-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,.3); border: none; padding: 0; cursor: pointer;
  transition: background .25s, transform .25s;
}
.cov-dot.active { background: var(--red); transform: scale(1.3); }

/* Responsive */
@media (max-width: 767px) {
  .cov-stage { height: 260px; }
  .cov-slide { width: clamp(200px, 68vw, 280px); height: clamp(140px, 47vw, 200px); }
}
@media (max-width: 480px) {
  .cov-stage { height: 220px; }
  .cov-slide { width: 75vw; height: 52vw; }
}

/* RTL */
body.lang-ar .cov-prev { left: auto; right: clamp(.5rem, 3vw, 2.5rem); }
body.lang-ar .cov-next { right: auto; left: clamp(.5rem, 3vw, 2.5rem); }

/* ══════════════════════════════════════════════════════════════
   COVERFLOW v2 — Polaroid 3D fan · dark stage · vignette
   ══════════════════════════════════════════════════════════════ */

/* Wrapper pleine largeur */
.cov-wrap {
  position: relative;
  background: #09090e;
  padding: 2.8rem 0 2.2rem;
  overflow: hidden;
}

/* Vignettes latérales */
.cov-wrap::before, .cov-wrap::after {
  content: '';
  position: absolute; top: 0; bottom: 0; width: 18%;
  z-index: 30; pointer-events: none;
}
.cov-wrap::before { left:  0; background: linear-gradient(90deg,  #09090e 0%, transparent 100%); }
.cov-wrap::after  { right: 0; background: linear-gradient(270deg, #09090e 0%, transparent 100%); }

/* Stage 3D */
.cov-stage {
  position: relative;
  height: clamp(280px, 32vw, 420px);
  perspective: 1600px;
  perspective-origin: 50% 45%;
  display: flex; align-items: center; justify-content: center;
  overflow: visible;
}

/* Carte */
.cov-slide {
  position: absolute;
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer;
  transition: transform .6s cubic-bezier(.4,0,.2,1),
              opacity  .6s cubic-bezier(.4,0,.2,1),
              filter   .6s ease;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  user-select: none;
}

/* Frame polaroid */
.cov-frame {
  background: rgba(255,255,255,.10);
  border: 2px solid rgba(255,255,255,.22);
  border-radius: 6px;
  padding: 8px 8px 32px;
  box-shadow: 0 20px 60px rgba(0,0,0,.70), 0 4px 16px rgba(0,0,0,.40);
  overflow: hidden;
  width:  clamp(200px, 26vw, 340px);
  transition: box-shadow .6s ease;
}
.cov-frame img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 3px;
  display: block;
}
.cov-slide.cov-active .cov-frame {
  border-color: rgba(255,255,255,.45);
  box-shadow: 0 32px 90px rgba(0,0,0,.75),
              0 0 0 1px rgba(255,255,255,.18) inset,
              0 0 40px rgba(224,0,27,.12);
}

/* Label sous la carte */
.cov-label {
  margin-top: .55rem;
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  opacity: 0; transition: opacity .4s;
  font-family: var(--ff-mono); font-size: max(.62rem,9px);
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.72); text-align: center;
}
.cov-slide.cov-active .cov-label { opacity: 1; }

/* Live badge */
.cov-live {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--red); color: #fff;
  font-size: .58rem; letter-spacing: .12em;
  padding: .18rem .6rem; border-radius: 20px;
}
.cov-live em {
  width: 5px; height: 5px; border-radius: 50%;
  background: #fff; flex-shrink: 0;
  animation: heroDot 1.2s ease-in-out infinite;
  font-style: normal; display: block;
}

/* Arrows */
.cov-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(12,14,24,.75); border: 1px solid rgba(255,255,255,.15);
  color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; backdrop-filter: blur(10px); z-index: 40;
  transition: background .2s, transform .2s;
}
.cov-btn:hover { background: var(--red); border-color: transparent; transform: translateY(-50%) scale(1.1); }
.cov-btn svg { width: 18px; height: 18px; }
.cov-prev { left:  clamp(.8rem, 4vw, 3rem); }
.cov-next { right: clamp(.8rem, 4vw, 3rem); }

/* Dots */
.cov-dots {
  display: flex; justify-content: center; gap: .5rem;
  margin-top: 1.2rem;
}
.cov-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,.25); border: none;
  cursor: pointer; padding: 0;
  transition: background .25s, transform .25s, width .25s;
}
.cov-dot.active { background: var(--red); transform: scale(1.35); width: 18px; border-radius: 4px; }

/* Responsive */
@media (max-width: 767px) {
  .cov-stage { height: clamp(240px, 58vw, 320px); }
  .cov-frame { width: clamp(160px, 55vw, 240px); }
}
@media (max-width: 480px) {
  .cov-stage { height: 230px; }
  .cov-frame { width: 70vw; }
  .cov-wrap::before, .cov-wrap::after { width: 10%; }
}

/* RTL */
body.lang-ar .cov-prev { left: auto; right: clamp(.8rem,4vw,3rem); }
body.lang-ar .cov-next { right: auto; left: clamp(.8rem,4vw,3rem); }

/* ── COVERFLOW v3 FIXES — cartes latérales visibles ────────── */
.cov-wrap {
  overflow: visible !important;      /* plus de clip sur les côtés */
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Vignettes plus légères pour laisser voir les cartes */
.cov-wrap::before { width: 12% !important; }
.cov-wrap::after  { width: 12% !important; }
.cov-stage {
  overflow: visible !important;
  width: 100% !important;
}
/* Cartes latérales plus lumineuses */
.cov-slide { filter: brightness(0.72); }
.cov-slide.cov-active { filter: brightness(1) !important; }

/* ── COVERFLOW — images plus larges horizontalement ─────── */
.cov-frame {
  width:  clamp(320px, 38vw, 520px) !important;
}
.cov-stage {
  height: clamp(280px, 30vw, 380px) !important;
}
@media (max-width: 767px) {
  .cov-frame { width: clamp(220px, 72vw, 360px) !important; }
  .cov-stage { height: clamp(220px, 56vw, 300px) !important; }
}
@media (max-width: 480px) {
  .cov-frame { width: 82vw !important; }
  .cov-stage { height: 56vw !important; }
}

/* ── COVERFLOW — grande surface + flèches collées à l'image ── */
.cov-frame {
  width:  clamp(420px, 50vw, 680px) !important;
  padding: 8px 8px 36px !important;
}
.cov-stage {
  height: clamp(320px, 36vw, 480px) !important;
}

/* Flèches repositionnées juste à côté de la carte active */
.cov-btn {
  position: absolute !important;
  top: 42% !important;
  transform: translateY(-50%) !important;
  /* centré ± (moitié largeur carte + 14px) */
  left:  unset !important;
  right: unset !important;
}
.cov-prev {
  left: calc(50% - clamp(210px, 25.5vw, 354px) - 52px) !important;
}
.cov-next {
  left: calc(50% + clamp(210px, 25.5vw, 354px) + 8px) !important;
}

@media (max-width: 991px) {
  .cov-frame { width: clamp(280px, 74vw, 480px) !important; }
  .cov-stage { height: clamp(260px, 50vw, 360px) !important; }
  .cov-prev { left: calc(50% - clamp(140px, 37.5vw, 248px) - 50px) !important; }
  .cov-next { left: calc(50% + clamp(140px, 37.5vw, 248px) + 8px) !important; }
}
@media (max-width: 480px) {
  .cov-frame { width: 82vw !important; }
  .cov-stage { height: 58vw !important; }
  .cov-prev { left: calc(50% - 41vw - 46px) !important; }
  .cov-next { left: calc(50% + 41vw + 6px) !important; }
}

/* ══════════════════════════════════════════════════════════════
   STACKED CARD SLIDER
   ══════════════════════════════════════════════════════════════ */
.stk-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 1rem 0 2rem;
}

/* Stack */
.stk-stack {
  position: relative;
  width: clamp(320px, 60vw, 720px);
  height: clamp(240px, 40vw, 500px);
}

/* Chaque carte */
.stk-card {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .55s cubic-bezier(.4,0,.2,1),
              opacity  .55s cubic-bezier(.4,0,.2,1),
              box-shadow .55s ease;
  transform-origin: center bottom;
  will-change: transform, opacity;
}
.stk-card img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  pointer-events: none;
}

/* Caption overlay */
.stk-info {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 3rem 1.4rem 1.2rem;
  background: linear-gradient(0deg, rgba(0,0,0,.82) 0%, transparent 100%);
  display: flex; flex-direction: column; gap: .4rem;
  opacity: 0; transition: opacity .4s .1s;
}
.stk-card[data-pos="0"] .stk-info { opacity: 1; }

.stk-live {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--red); color: #fff;
  font-family: var(--ff-mono); font-size: .6rem; letter-spacing: .12em;
  padding: .2rem .65rem; border-radius: 20px; width: fit-content;
}
.stk-live em {
  width: 6px; height: 6px; border-radius: 50%; background: #fff; flex-shrink: 0;
  animation: heroDot 1.2s ease-in-out infinite; font-style: normal; display: block;
}
.stk-cap {
  font-family: var(--ff-mono); font-size: max(.72rem,11px);
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.90); margin: 0;
}

/* Contrôles */
.stk-controls {
  display: flex; align-items: center; gap: 1.4rem;
}
.stk-btn {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15);
  color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s, transform .2s;
}
.stk-btn:hover { background: var(--red); border-color: transparent; transform: scale(1.08); }
.stk-btn svg { width: 18px; height: 18px; }
.stk-counter {
  font-family: var(--ff-mono); font-size: .8rem; letter-spacing: .1em;
  color: rgba(255,255,255,.55); display: flex; align-items: center; gap: .25rem;
}
#stkCur { color: #fff; font-size: 1.1rem; font-weight: 700; }
.stk-sep { color: rgba(255,255,255,.3); margin: 0 .1rem; }

/* Dots */
.stk-dots {
  display: flex; gap: .4rem; align-items: center;
}
.stk-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,.25); border: none; cursor: pointer; padding: 0;
  flex-shrink: 0;
  transition: background .25s, transform .25s, width .25s;
}
.stk-dot.active { background: var(--red); transform: scale(1.2); width: 14px; border-radius: 3px; }

/* Responsive */
@media (max-width: 767px) {
  .stk-stack { width: clamp(260px, 86vw, 480px); height: clamp(195px, 58vw, 340px); }
}
@media (max-width: 480px) {
  .stk-stack { width: 90vw; height: 62vw; }
}

/* ── STACKED SLIDER — vignettes latérales 25% semi-transparentes ── */
.stk-wrap {
  position: relative;
  overflow: visible;
}
.stk-wrap::before,
.stk-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 2.8rem; /* s'arrête avant les contrôles */
  width: 25%;
  z-index: 60;
  pointer-events: none;
}
.stk-wrap::before {
  left: -12%;
  background: linear-gradient(90deg,
    rgba(13,14,18,.55) 0%,
    rgba(13,14,18,.25) 55%,
    transparent 100%);
}
.stk-wrap::after {
  right: -12%;
  background: linear-gradient(270deg,
    rgba(13,14,18,.55) 0%,
    rgba(13,14,18,.25) 55%,
    transparent 100%);
}

/* ── STACKED SLIDER — transition linéaire ── */
.stk-card {
  transition: transform .45s linear,
              opacity   .45s linear,
              box-shadow .45s linear !important;
}

/* ── STACKED SLIDER — vignettes gauche ET droite ── */
.stk-wrap { overflow: hidden !important; position: relative; }
.stk-wrap::before,
.stk-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 22%;
  z-index: 60;
  pointer-events: none;
}
.stk-wrap::before {
  left: 0;
  background: linear-gradient(90deg,
    rgba(13,14,18,.80) 0%,
    rgba(13,14,18,.35) 50%,
    transparent 100%);
}
.stk-wrap::after {
  right: 0;
  background: linear-gradient(270deg,
    rgba(13,14,18,.80) 0%,
    rgba(13,14,18,.35) 50%,
    transparent 100%);
}

/* ── STACKED SLIDER — flèches latérales ── */
.stk-wrap { position: relative; }

/* Repositionner les boutons sur les côtés du stack */
.stk-controls {
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  transform: translateY(-60%);
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  padding: 0 .6rem;
  pointer-events: none;
  z-index: 70;
}
.stk-btn {
  pointer-events: all;
  width: 42px; height: 42px;
  background: rgba(10,11,20,.72) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  backdrop-filter: blur(10px);
  z-index: 70;
}
.stk-btn:hover { background: var(--red) !important; border-color: transparent !important; }

/* Masquer le counter (inutile au centre maintenant) */
.stk-counter { display: none !important; }

/* ── STACKED SLIDER — flèches très proches + transition fluide ── */
.stk-controls {
  padding: 0 !important;
  left: calc(50% - clamp(160px, 31vw, 370px)) !important;
  right: calc(50% - clamp(160px, 31vw, 370px)) !important;
}
.stk-card {
  transition: transform .35s linear,
              opacity   .35s linear,
              box-shadow .35s linear !important;
}

/* ── STACKED SLIDER — flèches à 40% ── */
.stk-controls {
  left:  calc(50% - 40%) !important;
  right: calc(50% - 40%) !important;
}

/* ── STACKED SLIDER — transition 0.70s ── */
.stk-card {
  transition: transform .70s linear,
              opacity   .70s linear,
              box-shadow .70s linear !important;
}

/* ── STACKED SLIDER — flèches plus lisibles ── */
.stk-btn {
  width: 50px !important;
  height: 50px !important;
  background: rgba(255,255,255,.18) !important;
  border: 2px solid rgba(255,255,255,.55) !important;
  color: #fff !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.45) !important;
}
.stk-btn svg {
  width: 24px !important;
  height: 24px !important;
  stroke-width: 2.5px !important;
}
.stk-btn:hover {
  background: var(--red) !important;
  border-color: var(--red) !important;
  box-shadow: 0 6px 24px rgba(224,0,27,.4) !important;
  transform: scale(1.12) !important;
}

/* ══════════════════════════════════════════════════════════════
   FAB SECTION MODERNE — gradient · dots · stacked slider v4
   ══════════════════════════════════════════════════════════════ */

/* Section background */
.fab-section-modern {
  background: #0b0c14;
}
.fab-bg-gradient {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 15% 50%, rgba(224,0,27,.08) 0%, transparent 65%),
    radial-gradient(ellipse 55% 50% at 85% 50%, rgba(20,30,80,.22) 0%, transparent 65%),
    linear-gradient(180deg, rgba(10,11,20,1) 0%, rgba(12,14,24,1) 100%);
}
.fab-bg-dots {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 26px 26px;
}

/* Section tag */
.fab-section-tag {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.fab-tag-line {
  display: block; width: 28px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224,0,27,.7), transparent);
}
.fab-section-title {
  font-family: var(--ff-head); font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 800;
  color: #fff; margin: 0;
  text-shadow: 0 2px 24px rgba(0,0,0,.4);
}
.fab-section-title em {
  font-style: italic; color: var(--red);
}

/* Layout principal : fleche | stack | fleche */
.fab-slider-layout {
  display: flex; align-items: center; gap: 1rem;
  justify-content: center;
}

/* Flèches latérales */
.fab-arrow {
  flex-shrink: 0;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.07);
  border: 1.5px solid rgba(255,255,255,.20);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 10;
  transition: background .25s, border-color .25s, transform .25s, box-shadow .25s;
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
}
.fab-arrow svg { width: 22px; height: 22px; stroke-width: 2.2px; }
.fab-arrow:hover {
  background: var(--red);
  border-color: var(--red);
  transform: scale(1.10);
  box-shadow: 0 6px 24px rgba(224,0,27,.40);
}

/* Stack wrapper */
.stk-wrap {
  flex: 1;
  max-width: 780px;
  overflow: hidden !important;
}

/* Vignettes internes */
.stk-vig {
  position: absolute; top: 0; bottom: 0; width: 18%; z-index: 5; pointer-events: none;
}
.stk-vig-l { left:  0; background: linear-gradient(90deg,  #0b0c14 0%, transparent 100%); }
.stk-vig-r { right: 0; background: linear-gradient(270deg, #0b0c14 0%, transparent 100%); }

/* Stack */
.stk-stack {
  position: relative;
  width: 100%;
  height: clamp(260px, 34vw, 460px);
}

/* Carte */
.stk-card {
  position: absolute; inset: 0;
  transition: transform .70s linear, opacity .70s linear, box-shadow .70s linear;
  cursor: pointer;
  will-change: transform, opacity;
}

/* Frame avec bordure gradient */
.stk-frame {
  width: 100%; height: 100%;
  border-radius: 14px; overflow: hidden;
  border: 2px solid transparent;
  background:
    linear-gradient(#0b0c14, #0b0c14) padding-box,
    linear-gradient(135deg, rgba(224,0,27,.6) 0%, rgba(40,60,140,.5) 50%, rgba(224,0,27,.2) 100%) border-box;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
}
.stk-frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .70s linear;
}
.stk-card.stk-active .stk-frame img { transform: scale(1.02); }
.stk-card.stk-active .stk-frame {
  box-shadow: 0 28px 80px rgba(0,0,0,.65), 0 0 0 1px rgba(224,0,27,.25);
}

/* Overlay caption */
.stk-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 3.5rem 1.4rem 1.2rem;
  background: linear-gradient(0deg, rgba(0,0,0,.85) 0%, transparent 100%);
  opacity: 0; transition: opacity .4s .15s;
  display: flex; flex-direction: column; gap: .4rem;
}
.stk-card.stk-active .stk-overlay { opacity: 1; }

.stk-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--red); color: #fff;
  font-family: var(--ff-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .2rem .7rem; border-radius: 20px; width: fit-content;
}
.stk-pulse {
  width: 6px; height: 6px; border-radius: 50%; background: #fff; flex-shrink: 0;
  animation: heroDot 1.2s ease-in-out infinite; display: block;
}
.stk-cap {
  font-family: var(--ff-mono); font-size: max(.72rem,11px);
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.90); margin: 0;
}

/* Barre progression */
.stk-progress {
  position: absolute; bottom: -6px; left: 10%; right: 10%;
  height: 2px; background: rgba(255,255,255,.10); border-radius: 2px; overflow: hidden;
}
.stk-progress-fill {
  height: 100%; width: 20%;
  background: linear-gradient(90deg, var(--red), rgba(224,0,27,.4));
  border-radius: 2px;
  transition: width .70s linear;
}

/* Dots */
.stk-dots { display: flex; gap: .4rem; align-items: center; }
.stk-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,.22); border: none; cursor: pointer; padding: 0;
  flex-shrink: 0;
  transition: background .3s, transform .3s, width .3s;
}
.stk-dot.active { background: var(--red); transform: scale(1.2); width: 14px; border-radius: 3px; }

/* Compteur badge */
.stk-count-badge {
  font-family: var(--ff-mono); font-size: .75rem; letter-spacing: .1em;
  color: rgba(255,255,255,.40); display: flex; align-items: center; gap: .15rem;
}
.stk-count-badge #stkCur { color: #fff; font-weight: 700; font-size: .95rem; }

/* Responsive */
@media (max-width: 991px) {
  .stk-stack { height: clamp(200px, 46vw, 360px); }
  .fab-arrow { width: 42px; height: 42px; }
  .fab-arrow svg { width: 18px; height: 18px; }
}
@media (max-width: 576px) {
  .stk-stack { height: clamp(180px, 58vw, 280px); }
  .fab-slider-layout { gap: .4rem; }
  .fab-arrow { width: 36px; height: 36px; }
}
/* RTL */
body.lang-ar .stk-vig-l { left: auto; right: 0; background: linear-gradient(270deg, #0b0c14 0%, transparent 100%); }
body.lang-ar .stk-vig-r { right: auto; left: 0; background: linear-gradient(90deg,  #0b0c14 0%, transparent 100%); }

/* ══════════════════════════════════════════════════════════════════
   COVERFLOW 3D v2 — Modern Premium Carousel
   ══════════════════════════════════════════════════════════════════ */

:root {
  --cvr-ease  : cubic-bezier(0.34, 1.10, 0.64, 1);
  --cvr-dur   : 0.72s;
  --cvr-radius: 16px;
}

/* 1 — Wrapper : scène perspective */
.stk-wrap {
  perspective        : 1300px !important;
  perspective-origin : 50% 50% !important;
  overflow           : hidden !important;
  background         : transparent !important;
  padding            : 20px 0 56px !important;
  -webkit-mask-image : none !important;
  mask-image         : none !important;
}
.stk-wrap::before, .stk-wrap::after { display: none !important; }
.stk-vig-l, .stk-vig-r             { display: none !important; }

/* 2 — Scène 3D */
.stk-stack {
  transform-style : preserve-3d !important;
  overflow        : visible !important;
  height          : clamp(220px, 28vw, 390px) !important;
}

/* 3 — Cartes */
.stk-card {
  transform-style     : preserve-3d !important;
  backface-visibility : hidden !important;
  will-change         : transform, opacity !important;
  cursor              : pointer !important;
  transition          :
    transform var(--cvr-dur) var(--cvr-ease),
    opacity   0.55s ease,
    filter    0.55s ease !important;
}

/* 4 — Frame : PAS de overflow:hidden → caption jamais rogné */
.stk-frame {
  border-radius : var(--cvr-radius) !important;
  position      : relative !important;
  box-shadow    :
    0 18px 55px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.06) !important;
}
.stk-card.stk-active .stk-frame {
  box-shadow:
    0 40px 100px rgba(0,0,0,.72),
    0 0 0 1.5px rgba(255,255,255,.14),
    0 0 70px rgba(192,57,43,.20) !important;
}

/* 5 — Image : border-radius sur l'image elle-même */
.stk-frame img {
  display       : block !important;
  width         : 100% !important;
  height        : 100% !important;
  object-fit    : cover !important;
  border-radius : var(--cvr-radius) !important;
  filter        : brightness(0.58) saturate(0.75) !important;
  transform     : scale(1) !important;
  transition    : filter 0.55s ease, transform 0.65s var(--cvr-ease) !important;
}
.stk-card.stk-active .stk-frame img {
  filter    : brightness(1) saturate(1.08) !important;
  transform : scale(1.025) !important;
}

/* 6 — Gloss diagonal sur carte active */
.stk-frame::after {
  content        : '' !important;
  position       : absolute !important;
  inset          : 0 !important;
  border-radius  : var(--cvr-radius) !important;
  background     : linear-gradient(
    140deg,
    rgba(255,255,255,.14) 0%,
    rgba(255,255,255,.04) 40%,
    transparent 65%
  ) !important;
  pointer-events : none !important;
  z-index        : 5 !important;
  opacity        : 0 !important;
  transition     : opacity 0.5s ease !important;
}
.stk-card.stk-active .stk-frame::after { opacity: 1 !important; }

/* 7 — Overlay caption */
.stk-overlay {
  position       : absolute !important;
  bottom         : 0 !important;
  left           : 0 !important;
  right          : 0 !important;
  padding        : 4rem 1.5rem 1.5rem !important;
  border-radius  : 0 0 var(--cvr-radius) var(--cvr-radius) !important;
  background     : linear-gradient(0deg,
    rgba(0,0,0,.90) 0%,
    rgba(0,0,0,.45) 55%,
    transparent 100%) !important;
  opacity        : 0 !important;
  transition     : opacity 0.45s ease 0.05s !important;
  z-index        : 6 !important;
  display        : flex !important;
  flex-direction : column !important;
  gap            : .35rem !important;
}
.stk-card.stk-active .stk-overlay { opacity: 1 !important; }

/* 8 — Badge */
.stk-badge {
  font-size      : .62rem !important;
  font-weight    : 700 !important;
  letter-spacing : .13em !important;
  padding        : .25rem .85rem !important;
  border-radius  : 30px !important;
  box-shadow     : 0 2px 14px rgba(224,0,27,.5) !important;
  width          : fit-content !important;
}

/* 9 — Caption */
.stk-cap {
  font-size      : clamp(.8rem, 1.4vw, .98rem) !important;
  font-weight    : 700 !important;
  color          : #fff !important;
  letter-spacing : .05em !important;
  text-shadow    : 0 1px 12px rgba(0,0,0,.9) !important;
  margin         : 0 !important;
}

/* 10 — Barre de progression */
.stk-progress {
  position      : absolute !important;
  bottom        : 0 !important;
  left          : 0 !important;
  right         : 0 !important;
  height        : 3px !important;
  background    : rgba(255,255,255,.07) !important;
  border-radius : 0 !important;
}
.stk-progress-fill {
  background : linear-gradient(90deg, var(--red), rgba(192,57,43,.5)) !important;
  transition : width 0.72s ease !important;
}

/* 11 — Espace reflet sol */
#stkWrap { padding-bottom: 44px !important; }

/* Responsive */
@media (max-width: 991px) {
  .stk-wrap  { perspective: 900px !important; }
  .stk-stack { height: clamp(175px, 40vw, 280px) !important; }
}
@media (max-width: 576px) {
  .stk-wrap  { perspective: 650px !important; }
  .stk-stack { height: clamp(145px, 55vw, 230px) !important; }
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE UPGRADE v2 — Broc Nutrition
   Couverture complète tous écrans :
   1400px / 1200px / 992px / 768px / 576px / 480px / 380px
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. TYPOGRAPHIE — clamp unifié ──────────────────────────── */
@media (max-width: 991px) {
  h1 { font-size: clamp(1.9rem, 5vw, 2.8rem) !important; }
  h2 { font-size: clamp(1.5rem, 4vw, 2.2rem) !important; }
  h3 { font-size: clamp(1.2rem, 3vw, 1.7rem) !important; }
  .display-1 { font-size: clamp(2.4rem, 7vw, 4rem)    !important; }
  .display-2 { font-size: clamp(2rem,   6vw, 3.2rem)  !important; }
  .lead      { font-size: clamp(.95rem, 2.5vw, 1.15rem) !important; }
}
@media (max-width: 576px) {
  h1 { font-size: clamp(1.6rem, 6.5vw, 2.2rem) !important; }
  h2 { font-size: clamp(1.3rem, 5.5vw, 1.8rem) !important; }
  h3 { font-size: clamp(1.1rem, 4.5vw, 1.4rem) !important; }
}

/* ─── 2. SECTION PADDINGS ────────────────────────────────────── */
@media (max-width: 1199px) {
  .py-6, .section-py { padding-top: 4rem !important; padding-bottom: 4rem !important; }
}
@media (max-width: 991px) {
  .py-6, .section-py { padding-top: 3rem !important; padding-bottom: 3rem !important; }
}
@media (max-width: 576px) {
  .py-6, .section-py { padding-top: 2.25rem !important; padding-bottom: 2.25rem !important; }
  .container, .container-xl, .container-fluid {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .gap-5 { gap: 1.5rem !important; }
  .gap-4 { gap: 1.25rem !important; }
  .mb-5  { margin-bottom: 2rem !important; }
  .mb-4  { margin-bottom: 1.5rem !important; }
  .mt-5  { margin-top: 2rem !important; }
  .mt-4  { margin-top: 1.5rem !important; }
  .py-5  { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  .py-4  { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
}
@media (max-width: 380px) {
  .container, .container-xl, .container-fluid {
    padding-left: .75rem !important;
    padding-right: .75rem !important;
  }
  .gap-5 { gap: 1.25rem !important; }
  .py-5  { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
}

/* ─── 3. NAVBAR ──────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .nav-lnk { font-size: .71rem !important; padding: .3rem .6rem !important; }
  .navbar-nav { gap: .1rem !important; }
}
@media (max-width: 991px) {
  #mainNav .container-xl { padding-left: 1rem; padding-right: 1rem; }
  .navbar-brand-logo { width: 42px !important; height: 42px !important; }
  /* Dropdowns accessibles au focus/touch */
  .nav-has-drop:hover .nav-dropdown-panel,
  .nav-has-drop:focus-within .nav-dropdown-panel { display: block !important; }
}
@media (max-width: 576px) {
  #mainNav { height: var(--nav-h-mob, 60px) !important; }
  .navbar-brand-logo { width: 38px !important; height: 38px !important; }
  .btn-nav-icon { width: 32px !important; height: 32px !important; }
}

/* ─── 4. PAGE HEADER ─────────────────────────────────────────── */
@media (max-width: 767px) {
  .page-header { padding: 2.5rem 0 1.5rem !important; text-align: center !important; }
  .page-header h1 { text-align: center !important; }
  .page-breadcrumb { justify-content: center !important; flex-wrap: wrap !important; }
}
@media (max-width: 480px) {
  .page-header { padding: 2rem 0 1.2rem !important; }
  .page-header .lead { font-size: .88rem !important; }
}

/* ─── 5. HERO SECTION ────────────────────────────────────────── */
@media (max-width: 1199px) {
  .hero-title { font-size: clamp(2.6rem, 6vw, 3.8rem) !important; }
}
@media (max-width: 991px) {
  .hero-section .row { flex-direction: column !important; }
  .hero-title { font-size: clamp(2.2rem, 7vw, 3.2rem) !important; line-height: 1.15 !important; }
  .hero-sub { font-size: clamp(.9rem, 3vw, 1.1rem) !important; }
  .hero-kpi { gap: 1.2rem !important; flex-wrap: wrap !important; }
  .hero-kpi-num { font-size: 1.6rem !important; }
}
@media (max-width: 767px) {
  .hero-title { font-size: clamp(1.9rem, 8vw, 2.8rem) !important; }
  .hero-kpi { gap: 1rem !important; }
  .hero-kpi-num { font-size: 1.4rem !important; }
  .hero-badge { flex-wrap: wrap !important; gap: .5rem !important; }
}
@media (max-width: 480px) {
  .hero-title { font-size: clamp(1.7rem, 9vw, 2.4rem) !important; }
  .hero-sub { font-size: .88rem !important; }
  .hero-kpi { gap: .75rem !important; }
  .hero-kpi-num { font-size: 1.25rem !important; }
  .hero-kpi-lbl { font-size: .6rem !important; }
  .hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .hero-actions .btn-broc-red,
  .hero-actions .btn-broc-outline {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* ─── 6. GRILLES BOOTSTRAP CARD ──────────────────────────────── */
@media (max-width: 991px) {
  .row.row-cols-lg-3 > * { flex: 0 0 50% !important; max-width: 50% !important; }
  .row.row-cols-lg-4 > * { flex: 0 0 50% !important; max-width: 50% !important; }
  .row.row-cols-md-3 > * { flex: 0 0 50% !important; max-width: 50% !important; }
}
@media (max-width: 576px) {
  .row.row-cols-lg-3 > *,
  .row.row-cols-lg-4 > *,
  .row.row-cols-md-3 > *,
  .row.row-cols-sm-2 > *,
  .row.row-cols-2    > * { flex: 0 0 100% !important; max-width: 100% !important; }
  .card-broc { padding: 1rem !important; }
  .card-broc .card-icon { font-size: 1.6rem !important; }
}

/* ─── 7. TABLEAU — scroll horizontal mobile ──────────────────── */
@media (max-width: 767px) {
  .table-responsive-broc,
  .table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  .table-broc { min-width: 480px !important; }
  .table-broc thead th { font-size: .62rem !important; padding: .7rem .75rem !important; }
  .table-broc tbody td { font-size: .8rem !important; padding: .65rem .75rem !important; }
}
@media (max-width: 480px) {
  .table-broc { min-width: 340px !important; }
  .table-broc thead th,
  .table-broc tbody td { padding: .55rem .6rem !important; font-size: .75rem !important; }
}

/* ─── 8. FORMULAIRE CONTACT ─────────────────────────────────── */
@media (max-width: 767px) {
  .contact-form-wrap .row { --bs-gutter-x: .75rem !important; }
  .contact-form-wrap .col-md-6 { flex: 0 0 100% !important; max-width: 100% !important; }
  .t-form-row { grid-template-columns: 1fr !important; gap: 0 !important; }
  .form-control-broc { padding: .72rem .9rem !important; font-size: .9rem !important; }
  select.form-control-broc { padding-right: 2.2rem !important; }
}
@media (max-width: 480px) {
  .form-control-broc { padding: .65rem .8rem !important; font-size: .88rem !important; }
  .contact-form-wrap { padding: 1.25rem !important; }
}
@media (max-width: 991px) {
  .contact-layout { flex-direction: column !important; }
  .contact-info-col, .contact-form-col {
    width: 100% !important; max-width: 100% !important;
  }
}

/* ─── 9. SIAM 2026 ───────────────────────────────────────────── */
@media (max-width: 991px) {
  .siam-meetup-wrap { flex-direction: column !important; gap: 1.5rem !important; }
  .siam-info-grid   { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 767px) {
  .siam-hero-wrap   { flex-direction: column !important; text-align: center !important; }
  .siam-info-grid   { grid-template-columns: 1fr !important; }
  .siam-card        { padding: 1.25rem !important; }
}
@media (max-width: 480px) {
  .siam-card { padding: 1rem !important; }
  .siam-meetup-sub { font-size: .88rem !important; }
}

/* ─── 10. PROCESS GRID ───────────────────────────────────────── */
@media (max-width: 991px) {
  .process-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 1.25rem !important; }
  .process-grid::before { display: none !important; }
}
@media (max-width: 767px) {
  .process-grid { grid-template-columns: 1fr 1fr !important; gap: 1rem !important; }
}
@media (max-width: 480px) {
  .process-grid { grid-template-columns: 1fr !important; gap: .75rem !important; }
  .process-step { padding: 1.25rem 1rem !important; }
}

/* ─── 11. PRODUITS (single-stamp, double-stamp) ──────────────── */
@media (max-width: 991px) {
  .prod-card { padding: 1.5rem 1.25rem !important; }
  .prod-badge-wrap { flex-wrap: wrap !important; gap: .4rem !important; }
}
@media (max-width: 767px) {
  .prod-card { padding: 1.25rem 1rem !important; }
  .prod-name { font-size: clamp(1.4rem, 6vw, 1.9rem) !important; }
}
@media (max-width: 480px) {
  .prod-card { padding: 1rem !important; }
  .prod-stat-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ─── 12. TÉMOIGNAGES ────────────────────────────────────────── */
@media (max-width: 767px) {
  .testimonial-card { padding: 1.5rem 1.25rem !important; }
  .test-author { gap: .75rem !important; }
}
@media (max-width: 480px) {
  .testimonial-card { padding: 1.25rem 1rem !important; }
  .testimonial-card .test-text { font-size: .88rem !important; }
}

/* ─── 13. CERTIFICATIONS ─────────────────────────────────────── */
@media (max-width: 991px) {
  .cert-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 1.25rem !important; }
}
@media (max-width: 576px) {
  .cert-grid { grid-template-columns: 1fr 1fr !important; gap: 1rem !important; }
  .cert-card { padding: 1.25rem .9rem !important; }
  .cert-logo { max-height: 52px !important; }
}
@media (max-width: 380px) {
  .cert-grid { grid-template-columns: 1fr !important; }
}

/* ─── 14. ÉQUIPE ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  .dir-card { flex-direction: column !important; text-align: center !important; }
  .dir-card .dir-photo { width: 80px !important; height: 80px !important; margin: 0 auto !important; }
  .team-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1.25rem !important; }
}
@media (max-width: 480px) {
  .team-grid { grid-template-columns: 1fr 1fr !important; gap: 1rem !important; }
  .team-card { padding: 1rem .75rem !important; }
}

/* ─── 15. TIMELINE (histoire) ────────────────────────────────── */
@media (max-width: 767px) {
  .timeline-wrap { padding-left: 1.25rem !important; }
  .timeline-item { margin-bottom: 2rem !important; }
  .timeline-year { font-size: clamp(1.3rem, 5vw, 1.8rem) !important; }
}
@media (max-width: 480px) {
  .timeline-wrap { padding-left: 1rem !important; }
  .timeline-wrap::before { left: 8px !important; }
}

/* ─── 16. INTERNATIONAL ──────────────────────────────────────── */
@media (max-width: 991px) {
  .intl-layout { flex-direction: column !important; }
  .intl-map-col, .intl-list-col { width: 100% !important; max-width: 100% !important; }
  .intl-kpi-row { gap: 1rem !important; flex-wrap: wrap !important; }
  .intl-kpi-item { flex: 1 1 calc(50% - .5rem) !important; }
}
@media (max-width: 576px) {
  .intl-kpi-item { flex: 1 1 100% !important; text-align: center !important; }
  .intl-filter-row { flex-wrap: wrap !important; gap: .5rem !important; }
}

/* ─── 17. RÉGLEMENTATION ─────────────────────────────────────── */
@media (max-width: 767px) {
  .feature-card { padding: 1.25rem !important; }
  .feature-card h4 { font-size: 1rem !important; }
}
@media (max-width: 480px) {
  .feature-card { padding: 1rem !important; }
}

/* ─── 18. RESSOURCES ─────────────────────────────────────────── */
@media (max-width: 767px) {
  .resource-card { flex-direction: column !important; }
  .resource-thumb { width: 100% !important; height: 160px !important; max-width: none !important; }
  .resource-body { padding: 1.1rem !important; }
}
@media (max-width: 480px) {
  .resource-thumb { height: 130px !important; }
  .resource-title { font-size: .95rem !important; }
}

/* ─── 19. ROI / COMPARATEUR ──────────────────────────────────── */
@media (max-width: 767px) {
  .roi-v2-body { grid-template-columns: 1fr !important; }
  .roi-metrics { grid-template-columns: 1fr 1fr !important; }
  .roi-chart-wrap { height: 150px !important; }
  .comparator-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 480px) {
  .comparator-grid { grid-template-columns: 1fr !important; }
  .cmp-card { padding: .85rem !important; }
}

/* ─── 20. CTA BAND ───────────────────────────────────────────── */
@media (max-width: 767px) {
  .cta-band { padding: 2rem 1.25rem !important; }
  .cta-band .d-flex {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 1.25rem !important;
  }
  .cta-band .btn-broc-red { width: 100% !important; max-width: 320px !important; }
}

/* ─── 21. SWOT GRID ──────────────────────────────────────────── */
@media (max-width: 576px) {
  .swot-grid { grid-template-columns: 1fr !important; gap: 2px !important; }
  .swot-item { padding: 1.5rem 1rem !important; }
}

/* ─── 22. FOOTER ─────────────────────────────────────────────── */
@media (max-width: 991px) {
  footer .row.g-5 { --bs-gutter-y: 2.5rem !important; }
  footer .col-lg-4, footer .col-lg-3, footer .col-lg-2 {
    flex: 0 0 50% !important; max-width: 50% !important;
  }
}
@media (max-width: 576px) {
  footer .col-lg-4, footer .col-lg-3,
  footer .col-lg-2, footer [class*="col-"] {
    flex: 0 0 100% !important; max-width: 100% !important;
  }
  /* Centrer le contenu des colonnes du footer, pas la bande copyright/liens (split gauche–droite) */
  footer .container-xl > .row,
  footer .row.g-5 {
    text-align: center !important;
  }
  .footer-brand { justify-content: center !important; }
  footer .d-flex.gap-3 { justify-content: center !important; }
  /* Ne pas cibler .footer-bottom-stack : ces .footer-bottom-text héritaient du centrage et cassaient le split */
  footer .row .footer-bottom-text {
    flex-direction: column !important;
    gap: .5rem !important;
    text-align: center !important;
  }
}

/* ─── 23. SCROLL-TO-TOP + COOKIE BANNER ─────────────────────── */
@media (max-width: 576px) {
  #scroll-top {
    bottom: 1.25rem !important;
    right: 1rem !important;
    width: 38px !important;
    height: 38px !important;
  }
  #cookie-banner {
    left: .5rem !important;
    right: .5rem !important;
    bottom: .75rem !important;
    padding: .9rem 1rem !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .75rem !important;
  }
  #cookie-banner .d-flex { width: 100% !important; justify-content: flex-end !important; }
}
@media (max-width: 380px) {
  #scroll-top { width: 34px !important; height: 34px !important; font-size: .85rem !important; }
}

/* ─── 24. NEWSLETTER POPUP ───────────────────────────────────── */
@media (max-width: 576px) {
  #nlp .nl-inner { padding: 1.75rem 1.25rem !important; }
  .nl-grid { grid-template-columns: 1fr !important; gap: .6rem !important; }
  .nl-input, .nl-select { font-size: .88rem !important; }
}

/* ─── 25. SEARCH OVERLAY ─────────────────────────────────────── */
@media (max-width: 576px) {
  .search-inner { max-height: 92dvh !important; }
  #search-input { font-size: 1rem !important; }
  .search-hint-chips { gap: .4rem !important; flex-wrap: wrap !important; }
  .search-hint-chip { font-size: .68rem !important; padding: .3rem .7rem !important; }
  .search-result-item { padding: .75rem 1rem !important; }
}

/* ─── 26. MARQUEE / LOGOS STRIP ──────────────────────────────── */
@media (max-width: 576px) {
  .marquee-track { gap: 1.75rem !important; animation-duration: 22s !important; }
  .marquee-logo img { height: 28px !important; }
}
@media (max-width: 380px) {
  .marquee-track { gap: 1.25rem !important; }
  .marquee-logo img { height: 22px !important; }
}

/* ─── 27. STAT STRIP / KPI ───────────────────────────────────── */
@media (max-width: 767px) {
  .stat-strip { gap: 1.5rem 1rem !important; flex-wrap: wrap !important; }
  .stat-item { flex: 1 1 calc(50% - .5rem) !important; }
  .stat-num  { font-size: clamp(1.6rem, 6vw, 2.2rem) !important; }
  .stat-lbl  { font-size: .62rem !important; }
}

/* ─── 28. ACTUALITÉS / EVENTS GRID ──────────────────────────── */
@media (max-width: 767px) {
  .event-card { flex-direction: column !important; }
  .event-card-img {
    width: 100% !important;
    height: 200px !important;
    border-radius: var(--radius) var(--radius) 0 0 !important;
  }
}
@media (max-width: 480px) {
  .event-card-img { height: 170px !important; }
  .event-card-body { padding: 1.1rem !important; }
}

/* ─── 29. APPLICATION — species tabs ────────────────────────── */
@media (max-width: 767px) {
  .species-tabs { flex-wrap: wrap !important; gap: .5rem !important; }
  .species-tab  {
    flex: 1 1 calc(50% - .25rem) !important;
    text-align: center !important;
    justify-content: center !important;
  }
}
@media (max-width: 480px) {
  .species-tab { flex: 1 1 100% !important; }
}

/* ─── 30. NOTICE BOX ─────────────────────────────────────────── */
@media (max-width: 576px) {
  .notice-box { padding: 1rem !important; }
  .notice-box.d-flex { flex-direction: column !important; gap: .75rem !important; }
}

/* ─── 31. BOUTONS touch-friendly ────────────────────────────── */
@media (max-width: 480px) {
  .btn-broc-red, .btn-broc-outline, .btn-broc-ghost {
    padding: .78rem 1.25rem !important;
    font-size: .8rem !important;
    min-height: 44px !important;
  }
  .btn-sm { padding: .5rem .9rem !important; font-size: .75rem !important; }
}

/* ─── 32. IMAGES — max-width 100% ────────────────────────────── */
img { max-width: 100%; height: auto; }
@media (max-width: 576px) {
  .img-fluid { width: 100% !important; }
  figure { margin: 0 !important; }
}

/* ─── 33. DIST-CARD ──────────────────────────────────────────── */
@media (max-width: 576px) {
  .dist-card { padding: 1.1rem 1rem !important; }
  .dist-card .d-flex.gap-3 { flex-direction: column !important; gap: .75rem !important; }
}

/* ── FIN RESPONSIVE UPGRADE v2 ───────────────────────────────── */
/* ══════════════════════════════════════════════════════════════
   RESPONSIVE PATCH v3 — Accessibilité & micro-corrections
   ══════════════════════════════════════════════════════════════ */

/* ─── A. Tab-nav : indicateur de scroll horizontal sur mobile ── */
@media (max-width: 767px) {
  .tab-nav-wrap { position: relative; }
  .tab-nav-wrap::after {
    content: '';
    position: absolute; top: 0; right: 0; bottom: 2px;
    width: 40px;
    background: linear-gradient(to right, transparent, var(--bg, #fff) 85%);
    pointer-events: none;
    border-radius: 0 var(--radius) 0 0;
  }
  .tab-nav { padding-bottom: 2px; }
  .tab-btn { font-size: .72rem !important; padding: .6rem .85rem !important; }
}
@media (max-width: 480px) {
  .tab-btn { font-size: .7rem !important; padding: .55rem .7rem !important; min-height: 36px; }
}

/* ─── B. fab-kpi-lbl (hero index) ────────────────────────────── */
.fab-kpi-lbl {
  font-size: clamp(.68rem, 1.4vw, .72rem) !important;
}

/* ─── C. stat-lbl lisibilité ─────────────────────────────────── */
@media (max-width: 767px) {
  .stat-lbl { font-size: .68rem !important; }
}
@media (max-width: 480px) {
  .stat-lbl { font-size: .65rem !important; }
}

/* ─── D. fab-card hauteurs ultimes (320px) ───────────────────── */
@media (max-width: 380px) {
  .fab-card.fab-main { height: 190px !important; }
  .fab-card:not(.fab-main) { height: 130px !important; }
  .fab-kpi-item { padding: .8rem .5rem !important; }
}

/* ─── E. table-wrap : hint de scroll visuel sur mobile ──────── */
@media (max-width: 767px) {
  .table-wrap { position: relative; }
  .table-wrap::after {
    content: '';
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 36px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,.08) 80%);
    pointer-events: none; border-radius: 0 var(--radius) var(--radius) 0;
  }
}

/* ─── F. hero-kpi à 380px ────────────────────────────────────── */
@media (max-width: 380px) {
  .hero-kpi { gap: .75rem !important; flex-wrap: wrap !important; }
  .hero-kpi-num { font-size: 1.35rem !important; }
  .hero-kpi-lbl { font-size: .68rem !important; }
}

/* ─── G. section-tag dans page-header sombre ─────────────────── */
@media (max-width: 480px) {
  .section-tag { font-size: .7rem !important; }
}

/* ─── H. Boutons touch-target minimum 44px ───────────────────── */
@media (max-width: 767px) {
  .btn-broc-red,
  .btn-broc-outline,
  .btn-broc-ghost { min-height: 44px !important; }
}

/* ─── I. Comparateur : scroll horizontal sécurisé ────────────── */
@media (max-width: 576px) {
  #cmp-panel { min-width: 0 !important; width: 100% !important; }
}

/* ─── J. Images dans sections événements ─────────────────────── */
@media (max-width: 380px) {
  .event-card-img { height: 150px !important; }
  .siam-card { padding: .85rem !important; }
}

/* ── FIN RESPONSIVE PATCH v3 ─────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   FOOTER SIGNATURE — MODERN / DYNAMIC / GRADIENT
   ═══════════════════════════════════════════════════════════════ */
footer {
  position: relative !important;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(1200px 380px at 12% 0%, rgba(231,76,60,.14) 0%, rgba(231,76,60,0) 58%),
    radial-gradient(900px 280px at 88% 100%, rgba(192,57,43,.16) 0%, rgba(192,57,43,0) 62%),
    linear-gradient(135deg, #090d1d 0%, #0f1325 40%, #12152c 100%) !important;
  border-top: 1px solid rgba(255,255,255,.08);
}

footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,.018) 0px,
      rgba(255,255,255,.018) 1px,
      transparent 1px,
      transparent 14px
    );
  opacity: .55;
}

footer::after {
  content: "";
  position: absolute;
  inset: -35% -20%;
  z-index: -1;
  pointer-events: none;
  background:
    conic-gradient(from 90deg, rgba(231,76,60,.0), rgba(231,76,60,.14), rgba(255,255,255,.02), rgba(231,76,60,.0));
  filter: blur(48px);
  animation: footerAuraShift 14s ease-in-out infinite alternate;
}

.footer-divider {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.1) 18%,
    rgba(231,76,60,.45) 50%,
    rgba(255,255,255,.1) 82%,
    transparent 100%
  ) !important;
  margin: 1.25rem 0 1rem !important;
}

.footer-bottom-wrap {
  position: relative;
  padding: .72rem 1rem .78rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 10px 32px rgba(0,0,0,.22);
}

/* Bloc copyright : ligne 1 = adresse (gauche) + liens (droite) ; ligne 2 = crédit CBC centré */
.footer-bottom-stack.footer-bottom-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: .5rem;
  text-align: inherit;
  padding: .62rem .65rem .7rem !important;
}
/* Colonne gauche = adresse, colonne droite = mentions légales ; dir=ltr sur le HTML pour garder gauche–droite même sur pages AR */
.footer-bottom-stack.footer-bottom-wrap .footer-bottom-split {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  column-gap: clamp(.5rem, 1.5vw, 1rem);
  row-gap: .55rem;
  width: 100% !important;
  box-sizing: border-box;
  unicode-bidi: isolate;
}
.footer-bottom-stack.footer-bottom-wrap .footer-bottom-col--address {
  flex: 1 1 12rem !important;
  min-width: 0 !important;
  max-width: 100%;
}
.footer-bottom-stack.footer-bottom-wrap .footer-bottom-sep {
  flex: 0 0 auto !important;
  align-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 .1rem !important;
  font-weight: 300 !important;
  color: rgba(255, 255, 255, .28) !important;
  user-select: none !important;
}
.footer-bottom-stack.footer-bottom-wrap .footer-bottom-col--legal {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 100%;
  margin-left: auto !important;
}
.footer-bottom-stack .footer-address-line,
.footer-bottom-stack .footer-bottom-text.footer-address-line {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: 100%;
  font-family: var(--ff-mono) !important;
  font-size: clamp(.52rem, 1.35vw, .58rem) !important;
  letter-spacing: .04em !important;
  line-height: 1.45 !important;
  color: rgba(245,248,255,.72) !important;
  margin: 0 !important;
  text-align: left !important;
}
.footer-bottom-stack .footer-legal-line {
  font-size: clamp(.52rem, 1.35vw, .58rem) !important;
  line-height: 1.45 !important;
  color: rgba(245,248,255,.78) !important;
  margin: 0 !important;
}
.footer-bottom-stack .footer-legal-inline {
  display: flex !important;
  flex-wrap: wrap;
  box-sizing: border-box;
  flex: 0 1 auto !important;
  min-width: min(100%, 12rem);
  max-width: 100%;
  margin: 0 !important;
  padding: 0;
  align-items: center;
  align-content: flex-end;
  justify-content: flex-end !important;
  gap: .22rem .4rem;
  text-align: right !important;
}
.footer-bottom-stack .footer-credit-line {
  margin: .2rem 0 0 !important;
  font-size: clamp(.48rem, 1.2vw, .54rem) !important;
  line-height: 1.4 !important;
  color: rgba(255,255,255,.38) !important;
  width: 100%;
  text-align: center;
}
.footer-bottom-stack .footer-credit-link {
  font-weight: 600;
  font-size: inherit !important;
}

.footer-bottom-wrap .footer-bottom-text {
  color: rgba(245,248,255,.82) !important;
  letter-spacing: .04em;
}

.footer-bottom-wrap .footer-bottom-right a,
.footer-bottom-text a {
  color: rgba(255,255,255,.9) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255,255,255,.22);
  transition: color .22s ease, border-color .22s ease, text-shadow .22s ease;
}

.footer-bottom-wrap .footer-bottom-right a:hover,
.footer-bottom-text a:hover {
  color: #ffd7d1 !important;
  border-color: rgba(231,76,60,.72);
  text-shadow: 0 0 14px rgba(231,76,60,.26);
}

@keyframes footerAuraShift {
  0%   { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  100% { transform: translate3d(1.5%, 1.5%, 0) scale(1.04); }
}

@media (max-width: 768px) {
  .footer-bottom-wrap {
    padding: .7rem .75rem;
    border-radius: 12px;
  }
  .footer-bottom-stack.footer-bottom-wrap {
    padding: .58rem .55rem .65rem !important;
  }
  .footer-bottom-split {
    flex-direction: column;
    align-items: stretch;
    gap: .55rem;
  }
  .footer-bottom-stack.footer-bottom-wrap .footer-bottom-sep {
    display: none !important;
  }
  .footer-bottom-stack.footer-bottom-wrap .footer-bottom-col--legal {
    margin-left: 0 !important;
  }
  .footer-bottom-stack .footer-address-line,
  .footer-bottom-stack .footer-bottom-text.footer-address-line {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
  }
  .footer-bottom-stack .footer-legal-inline {
    max-width: 100%;
    flex: 1 1 auto;
    justify-content: flex-start;
    text-align: left;
  }
  body.lang-ar .footer-bottom-stack .footer-legal-line.footer-legal-inline {
    justify-content: flex-end;
    text-align: right;
  }
}

@media (prefers-reduced-motion: reduce) {
  footer::after { animation: none; }
}

/* Footer compact spacing (fix large empty gap) */
footer .row.g-5 {
  --bs-gutter-y: 1.15rem !important;
}

footer .footer-heading {
  margin-bottom: .75rem !important;
}

footer .footer-links {
  gap: .28rem !important;
}

footer .footer-links a {
  line-height: 1.35;
}

footer .footer-desc {
  margin-bottom: .45rem;
  line-height: 1.55;
}

.footer-credit-centered {
  width: 100%;
  text-align: center !important;
  margin: .3rem auto 0 !important;
}

.site-footer,
footer {
  font-family: var(--ff-body) !important;
}
footer .footer-heading,
footer .footer-links,
footer .footer-desc,
footer .footer-sub,
footer .footer-brand,
footer .footer-cert {
  font-family: var(--ff-body) !important;
}

.footer-legal-line {
  font-family: var(--ff-body) !important;
  letter-spacing: .01em !important;
  color: rgba(245,248,255,.82) !important;
  font-size: .65rem !important;
  line-height: 1.6 !important;
}

.footer-bottom-wrap .footer-bottom-text,
footer .footer-bottom-text {
  font-family: var(--ff-body) !important;
  letter-spacing: .01em !important;
}

.footer-logo-box { margin-bottom: 1.1rem; }
.footer-logo-img-clean { height: 58px; width: auto; display: block; }
.footer-gmp-img { height: 36px; width: auto; border-radius: 4px; opacity: .9; vertical-align: middle; }
.footer-bottom-stack:not(.footer-bottom-wrap) { text-align: center; font-size: .62rem; color: rgba(255,255,255,.4); line-height: 1.7; }
.footer-address-line { margin: 0; }
.footer-legal-inline { margin: .25rem 0 0; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: .2rem .5rem; }
.footer-sep-dot { color: rgba(255,255,255,.15); }
.footer-sep-bar { color: rgba(255,255,255,.12); }
.footer-credit-line { margin: .2rem 0 0; }
.footer-credit-link { color: rgba(255,255,255,.7); font-weight: 600; text-decoration: none; }
.footer-credit-link:hover { color: #e8e9f0; }

/* Page header compact fix (remove excessive top gap) */
.page-header {
  margin-top: 0 !important;
  padding-top: calc(var(--nav-h, 68px) + 1.1rem) !important;
  padding-bottom: clamp(1.2rem, 2.4vw, 2rem) !important;
}

.page-header .page-breadcrumb {
  margin-bottom: .7rem !important;
}

@media (max-width: 1399px) {
  .page-header {
    padding-top: calc(var(--nav-h-mob, 60px) + .9rem) !important;
  }
}

/* Global fluid responsiveness (percentage-first) */
:root {
  --content-fluid-max: 100%;
  --content-fluid-pad: 2%;
}

.container,
.container-xl {
  width: calc(100% - (var(--content-fluid-pad) * 2)) !important;
  max-width: none !important;
}

#mainNav .nav-inner,
#mainNav .container,
#mainNav .container-xl {
  width: 96% !important;
  max-width: none !important;
}

/* Largeur au plus près du contenu (évite le vide à droite type « Réglementation ») */
.nav-dropdown,
.nav-dropdown-panel {
  width: fit-content !important;
  max-width: min(92vw, 420px) !important;
  box-sizing: border-box !important;
}

.hero-slider,
.hero-molecule,
.hero-visual {
  width: min(100%, 520px) !important;
  max-width: 100% !important;
  height: auto !important;
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-broc {
  min-width: clamp(260px, 84vw, 500px) !important;
}

img,
video,
svg {
  max-width: 100%;
  height: auto;
}

@media (max-width: 991px) {
  .hero-section .row > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  .page-header h1,
  .page-header .lead {
    max-width: 92%;
  }
}

@media (max-width: 576px) {
  #mainNav .nav-inner,
  #mainNav .container,
  #mainNav .container-xl {
    width: 98% !important;
  }
  .nav-dropdown,
  .nav-dropdown-panel {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: fit-content !important;
    max-width: min(94vw, 380px) !important;
  }
}

/* Readability hotfix: keep section-off in dark mode for product blocks */
.section-off {
  background:
    radial-gradient(120% 120% at 10% 0%, rgba(231,76,60,.12) 0%, rgba(231,76,60,0) 58%),
    linear-gradient(155deg, #0d101b 0%, #141826 55%, #0f1320 100%) !important;
}

.section-off .section-title,
.section-off .section-title span {
  color: #f0f0f4 !important;
}

.section-off .lead,
.section-off .body,
.section-off .body-lg {
  color: rgba(240,240,244,.78) !important;
}

.section-off .card-broc {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: 0 12px 38px rgba(0,0,0,.26) !important;
}

/* ── Logo nav — override final responsive (doit rester en dernier) ── */
@media (max-width: 1399px) {
  .navbar-brand-logo {
    width: auto !important;
    height: auto !important;
    padding: 4px 8px !important;
    overflow: visible !important;
  }
  .navbar-brand-logo img { height: 42px !important; }
}
@media (max-width: 576px) {
  .navbar-brand-logo {
    width: auto !important;
    height: auto !important;
    padding: 3px 6px !important;
    overflow: visible !important;
  }
  .navbar-brand-logo img { height: 36px !important; }
}
@media (max-width: 380px) {
  .navbar-brand-logo img { height: 32px !important; }
}