/* ==========================================================================
   Bootstrap 5 theme remap — EPV EXCEL de Bingerville
   Loads AFTER bootstrap.min.css and variables.css, BEFORE base.css. Its job
   is to make Bootstrap's own components (navbar, forms, carousel, tabs,
   modal, accordion) inherit the site's maroon/terracotta brand automatically
   via Bootstrap 5.3's --bs-* CSS variable API, so component-level CSS in
   base.css doesn't need to restyle every Bootstrap class by hand.

   Breakpoints: Bootstrap's 576/768/992/1200/1400 scale is baked into the CDN
   build and can't be remapped via CSS variables (that's a Sass-only knob,
   out of scope for a no-build CDN setup). This file does NOT attempt to
   force Bootstrap's grid/utility breakpoints to match the site's existing
   ad hoc 640/900/980px values. Two different things coexist instead:
     - New Bootstrap-driven layout (.row/.col-*, forms) uses Bootstrap's own
       stock breakpoints. Minor reflow drift vs. the old 640/900px steps
       (e.g. a 2-col row collapsing at 576px instead of 640px) is accepted.
     - Load-bearing custom behavior that must keep its exact pixel value —
       the nav's mobile handoff, the gallery grid's column steps — keeps
       using base.css's own hand-authored @media rules, untouched, since
       those aren't .col-* layouts and don't need to participate in
       Bootstrap's scale at all.
   ========================================================================== */

:root {
  /* Semantic colors */
  --bs-primary: var(--color-orange-700);
  --bs-primary-rgb: 166, 79, 30;
  --bs-secondary: var(--color-maroon-800);
  --bs-secondary-rgb: 89, 23, 34;
  --bs-success: var(--color-success);
  --bs-success-rgb: 47, 107, 74;
  --bs-danger: var(--color-error);
  --bs-danger-rgb: 162, 59, 52;

  /* Body / typography */
  --bs-body-color: var(--color-ink);
  --bs-body-bg: var(--color-bg);
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size: 1rem;
  --bs-heading-color: var(--color-maroon-800);
  --bs-link-color: var(--color-orange-700);
  --bs-link-color-rgb: 166, 79, 30;
  --bs-link-hover-color: var(--color-orange-800);
  --bs-link-hover-color-rgb: 140, 72, 26;

  /* Radii */
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-md);
  --bs-border-radius-xl: var(--radius-lg);
  --bs-border-radius-2xl: var(--radius-lg);
  --bs-border-color: var(--color-border);

  /* Focus ring — replaces Bootstrap's default blue ring wherever a
     .form-control/.form-select/.btn-close etc. gets keyboard focus */
  --bs-focus-ring-color: rgba(166, 79, 30, 0.25);
}

/* Row gutter — matches the old .grid's `gap: var(--space-6)` (2rem) on both
   axes; Bootstrap's own default is 1.5rem on the X axis only. Set globally
   so every .row/.col-* pair reproduces the old spacing without needing a
   per-instance .g-* utility class. */
.row {
  --bs-gutter-x: 2rem;
  --bs-gutter-y: 2rem;
}

/* Accordion (Admissions mobile step list) — brand colors/radius instead of
   Bootstrap's default blue-tinted active state. */
:root {
  --bs-accordion-active-bg: var(--color-bg-alt);
  --bs-accordion-active-color: var(--color-maroon-800);
  --bs-accordion-border-color: var(--color-border);
  --bs-accordion-btn-focus-border-color: var(--color-orange-700);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(166, 79, 30, 0.25);
}

/* Modal backdrop (Vie-scolaire gallery lightbox) — matches the old lightbox's
   warmer, more opaque overlay (--color-ink at 92% instead of Bootstrap's
   default rgba(0,0,0,.5)). */
:root {
  --bs-backdrop-bg: var(--color-ink);
  --bs-backdrop-opacity: 0.92;
}

/* Step tabs (Admissions desktop steps list) — Bootstrap's compiled
   .nav-pills .nav-link.active hardcodes a blue pill background/white text
   that isn't driven by --bs-primary, so it outranks .step-tab.active's own
   (correct, transparent) styling in base.css. Neutralize the pill so only
   .step-tab's number-circle + label color change communicates "active". */
.steps-tabs .nav-link.active,
.steps-tabs .nav-link:hover {
  background-color: transparent;
  color: inherit;
}

/* Carousel (hero slideshow) — no controls/indicators shown, but keep the
   fade timing close to the old img crossfade (was 0.9s, Bootstrap default
   is 0.6s). */
.carousel-fade .carousel-item { transition: opacity 0.9s ease; }
@media (prefers-reduced-motion: reduce) {
  .carousel-fade .carousel-item { transition: none !important; }
}