/* ==========================================================================
   ACPE — glass.css
   Direction artistique « glassmorphisme » inspirée d'Apple (Liquid Glass).
   Chargé APRÈS bootstrap.min.css. Contient :
     1. Thèmes : CLAIR (par défaut, :root / [data-theme="light"]) et SOMBRE
        ([data-theme="dark"]). L'attribut data-theme est posé sur <html> par le
        script du <head> (choix mémorisé, sinon réglage du système) et modifié
        par l'interrupteur du header. Sans JavaScript, le système décide.
     2. Fond global (mesh + orbes)
     3. Classes .glass*
     4. Surcharges Bootstrap documentées (navbar, card, btn, form, accordion,
        modal, carousel, offcanvas, dropdown, breadcrumb)
     5. Animations (reveal, float) + prefers-reduced-motion
     6. Fallback sans backdrop-filter
   ========================================================================== */

/* 1. VARIABLES — THÈME CLAIR (défaut) ------------------------------------ */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* Accents */
  --acpe-blue: #0A84FF;          /* bleu Apple (décor, focus, icônes) */
  --acpe-blue-strong: #0071E3;   /* fond de bouton : contraste 4.6:1 avec blanc */
  --acpe-blue-deep: #0051B5;
  --acpe-link: #0062CC;          /* liens texte : contraste ≥ 5:1 sur fond clair */
  --acpe-orange: #F97316;
  --acpe-orange-strong: #C2410C; /* bouton urgence : contraste 5.2:1 avec blanc */
  --acpe-orange-deep: #9A3412;

  /* Une couleur par métier */
  --c-clim: #06B6D4;
  --c-clim-text: #0E7490;
  --c-chauffage: #F97316;
  --c-chauffage-text: #C2410C;
  --c-plomberie: #2563EB;
  --c-plomberie-text: #1D4ED8;
  --c-elec: #F59E0B;
  --c-elec-text: #B45309;

  /* Texte */
  --text-strong: #1D1D1F;
  --text: #424245;
  --text-muted: #5F5F66;         /* reste ≥ 4.5:1 sur verre clair */

  /* Fond */
  --bg: #F5F8FF;
  --mesh-1: #E8F1FF;
  --mesh-2: #D6F3FF;
  --mesh-3: #FFE9D6;
  --mesh-4: #EEF0FF;

  /* Verre */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.78);
  --glass-bg-subtle: rgba(255, 255, 255, 0.30);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-highlight: rgba(255, 255, 255, 0.65);
  --glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.12);
  --glass-shadow-hover: 0 18px 48px rgba(31, 38, 135, 0.18);
  --glass-blur: 24px;
  --glass-sat: 180%;
  --glass-fallback: rgba(255, 255, 255, 0.92);

  /* Formes & mouvement */
  --radius-sm: 14px;
  --radius: 24px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: 320ms;

  /* Typo */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Bootstrap : on aligne ses variables sur la charte */
  --bs-body-font-family: var(--font-sans);
  --bs-body-color: var(--text);
  --bs-body-bg: var(--bg);
  --bs-emphasis-color: var(--text-strong);
  --bs-heading-color: var(--text-strong);
  --bs-link-color: var(--acpe-link);
  --bs-link-color-rgb: 0, 98, 204;
  --bs-link-hover-color: var(--acpe-blue-deep);
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-lg: var(--radius);
  --bs-primary: var(--acpe-blue-strong);
  --bs-primary-rgb: 0, 113, 227;
  --bs-focus-ring-color: rgba(10, 132, 255, .35);
}

/* THÈME SOMBRE ------------------------------------------------------------- */
:root[data-theme="dark"] {
    color-scheme: dark;
    --acpe-link: #6CB4FF;
    --text-strong: #F5F5F7;
    --text: #D1D1D6;
    --text-muted: #A1A1AA;
    --c-clim-text: #67E8F9;
    --c-chauffage-text: #FDBA74;
    --c-plomberie-text: #93C5FD;
    --c-elec-text: #FCD34D;

    --bg: #0B1020;
    --mesh-1: #0F1A36;
    --mesh-2: #0B2533;
    --mesh-3: #2A1A12;
    --mesh-4: #141432;

    --glass-bg: rgba(22, 26, 44, 0.55);
    --glass-bg-strong: rgba(22, 26, 44, 0.80);
    --glass-bg-subtle: rgba(22, 26, 44, 0.32);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-highlight: rgba(255, 255, 255, 0.10);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    --glass-shadow-hover: 0 18px 48px rgba(0, 0, 0, 0.55);
    --glass-fallback: rgba(18, 22, 38, 0.95);

    --bs-link-color-rgb: 108, 180, 255;
    --bs-link-hover-color: #9DCBFF;
    --bs-border-color: rgba(255, 255, 255, .14);
    --bs-secondary-color: var(--text-muted);
  }

/* Repli sans JavaScript : sans attribut data-theme, on suit le réglage du système */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
      --acpe-link: #6CB4FF;
      --text-strong: #F5F5F7;
      --text: #D1D1D6;
      --text-muted: #A1A1AA;
      --c-clim-text: #67E8F9;
      --c-chauffage-text: #FDBA74;
      --c-plomberie-text: #93C5FD;
      --c-elec-text: #FCD34D;
  
      --bg: #0B1020;
      --mesh-1: #0F1A36;
      --mesh-2: #0B2533;
      --mesh-3: #2A1A12;
      --mesh-4: #141432;
  
      --glass-bg: rgba(22, 26, 44, 0.55);
      --glass-bg-strong: rgba(22, 26, 44, 0.80);
      --glass-bg-subtle: rgba(22, 26, 44, 0.32);
      --glass-border: rgba(255, 255, 255, 0.12);
      --glass-highlight: rgba(255, 255, 255, 0.10);
      --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
      --glass-shadow-hover: 0 18px 48px rgba(0, 0, 0, 0.55);
      --glass-fallback: rgba(18, 22, 38, 0.95);
  
      --bs-link-color-rgb: 108, 180, 255;
      --bs-link-hover-color: #9DCBFF;
      --bs-border-color: rgba(255, 255, 255, .14);
      --bs-secondary-color: var(--text-muted);
    }
}

/* 2. FOND GLOBAL ---------------------------------------------------------- */
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body {
  font-family: var(--font-sans);
  font-size: 1.0625rem;          /* 17px */
  line-height: 1.6;
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  min-height: 100vh;
}
body::before {                   /* mesh gradient fixe, sans coût de repaint */
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60% 50% at 10% 0%, var(--mesh-1) 0%, transparent 70%),
    radial-gradient(50% 45% at 95% 10%, var(--mesh-2) 0%, transparent 70%),
    radial-gradient(45% 40% at 85% 95%, var(--mesh-3) 0%, transparent 70%),
    radial-gradient(55% 50% at 0% 90%, var(--mesh-4) 0%, transparent 70%),
    var(--bg);
}
.bg-orbs { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg-orbs span {
  position: absolute;
  width: 42vmax; height: 42vmax;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .38;
  will-change: transform;
  animation: orb-float 26s var(--ease) infinite alternate;
}
.bg-orbs .orb-clim  { background: #7DD3FC; top: -14vmax; left: -10vmax; }
.bg-orbs .orb-heat  { background: #FDBA74; bottom: -16vmax; right: -12vmax; animation-duration: 30s; animation-delay: -6s; }
.bg-orbs .orb-water { background: #93C5FD; top: 30%; right: -18vmax; width: 32vmax; height: 32vmax; animation-duration: 24s; animation-delay: -12s; }
.bg-orbs .orb-elec  { background: #FDE68A; bottom: 10%; left: -14vmax; width: 28vmax; height: 28vmax; animation-duration: 28s; animation-delay: -3s; opacity: .3; }
[data-theme="dark"] .bg-orbs span { opacity: .18; }
@keyframes orb-float {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(4vmax, 3vmax, 0) scale(1.06); }
  100% { transform: translate3d(-3vmax, 5vmax, 0) scale(.96); }
}

/* Typographie Apple-like */
h1, h2, h3, h4, .h1, .h2, .h3, .h4, .display-title {
  color: var(--text-strong);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
h1, .h1 { font-size: clamp(2.2rem, 5vw, 4rem); }
h2, .h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); font-weight: 650; }
h3, .h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); font-weight: 600; }
.lead { font-size: clamp(1.08rem, 1.5vw, 1.3rem); color: var(--text); font-weight: 400; }
.text-muted-2 { color: var(--text-muted) !important; }
a { text-underline-offset: .18em; }

/* Focus clavier très visible (WCAG 2.4.7) */
:focus-visible {
  outline: 3px solid var(--acpe-blue) !important;
  outline-offset: 3px !important;
  border-radius: 8px;
  box-shadow: none;
}

/* 3. CLASSES GLASS -------------------------------------------------------- */
.glass,
.glass-strong,
.glass-subtle,
.glass-dark {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}
.glass        { background: var(--glass-bg); }
.glass-strong { background: var(--glass-bg-strong); -webkit-backdrop-filter: blur(32px) saturate(180%); backdrop-filter: blur(32px) saturate(180%); }
.glass-subtle { background: var(--glass-bg-subtle); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); }
.glass-dark   { background: rgba(20, 20, 30, 0.45); border-color: rgba(255, 255, 255, 0.12); color: #F5F5F7; }
.glass-dark h2, .glass-dark h3, .glass-dark a:not(.btn) { color: #fff; }

/* Voile de lecture pour les textes longs */
.glass-read { background: var(--glass-bg-strong); }

/* Carte interactive : élévation + reflet qui suit le curseur (--x / --y via JS) */
.glass-hover {
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
  overflow: hidden;
}
.glass-hover::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  background: radial-gradient(420px circle at var(--x, 50%) var(--y, 0%), rgba(255, 255, 255, .45), transparent 45%);
}
[data-theme="dark"] .glass-hover::after { background: radial-gradient(420px circle at var(--x, 50%) var(--y, 0%), rgba(255, 255, 255, .08), transparent 45%); }
@media (hover: hover) {
  .glass-hover:hover { transform: translateY(-4px); box-shadow: var(--glass-shadow-hover), inset 0 1px 0 var(--glass-highlight); background-color: var(--glass-bg-strong); }
  .glass-hover:hover::after { opacity: 1; }
}

/* Pastille d'icône en verre colorée */
.icon-pill {
  --pill: var(--acpe-blue);
  display: inline-grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: 18px;
  font-size: 1.6rem;
  color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--pill) 92%, #fff), color-mix(in srgb, var(--pill) 80%, #000));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--pill) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, .45);
  flex-shrink: 0;
}
.icon-pill.sm { width: 42px; height: 42px; border-radius: 14px; font-size: 1.2rem; }
.pill-clim      { --pill: var(--c-clim); }
.pill-chauffage { --pill: var(--c-chauffage); }
.pill-plomberie { --pill: var(--c-plomberie); }
.pill-elec      { --pill: var(--c-elec); }
.pill-blue      { --pill: var(--acpe-blue); }

/* Glow métier au survol des cartes services */
.service-card { --glow: var(--acpe-blue); }
.service-card.clim      { --glow: var(--c-clim); }
.service-card.chauffage { --glow: var(--c-chauffage); }
.service-card.plomberie { --glow: var(--c-plomberie); }
.service-card.elec      { --glow: var(--c-elec); }
@media (hover: hover) {
  .service-card:hover { box-shadow: 0 18px 50px color-mix(in srgb, var(--glow) 32%, transparent), inset 0 1px 0 var(--glass-highlight); border-color: color-mix(in srgb, var(--glow) 45%, var(--glass-border)); }
}

/* 4. SURCHARGES BOOTSTRAP --------------------------------------------------- */

/* Boutons — forme pilule */
.btn { border-radius: var(--radius-pill); font-weight: 600; padding: .72rem 1.35rem; letter-spacing: -0.005em; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.btn-lg { padding: .9rem 1.7rem; font-size: 1.06rem; }
.btn-sm { padding: .45rem .95rem; }
.btn:active { transform: scale(.98); }

/* .btn-primary-glass : bleu dégradé + brillance */
.btn-primary-glass {
  color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 50%), linear-gradient(135deg, var(--acpe-blue-strong), var(--acpe-blue-deep));
  border: 1px solid rgba(255, 255, 255, .28);
  box-shadow: 0 10px 26px rgba(0, 113, 227, .35), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.btn-primary-glass:hover, .btn-primary-glass:focus-visible { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0, 113, 227, .45), inset 0 1px 0 rgba(255, 255, 255, .4); }

/* .btn-call : orange profond (urgence) */
.btn-call {
  color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 50%), linear-gradient(135deg, var(--acpe-orange-strong), var(--acpe-orange-deep));
  border: 1px solid rgba(255, 255, 255, .25);
  box-shadow: 0 10px 26px rgba(194, 65, 12, .32), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.btn-call:hover, .btn-call:focus-visible { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 34px rgba(194, 65, 12, .42); }

/* .btn-glass : translucide + bordure claire */
.btn-glass {
  color: var(--text-strong);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  box-shadow: 0 6px 20px rgba(31, 38, 135, .10), inset 0 1px 0 var(--glass-highlight);
}
.btn-glass:hover, .btn-glass:focus-visible { color: var(--text-strong); background: var(--glass-bg-strong); transform: translateY(-2px); }

/* Navbar flottante */
.navbar-glass-wrap { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; padding: 12px 12px 0; transition: padding var(--dur) var(--ease); }
.navbar-glass {
  max-width: 1320px; margin: 0 auto;
  padding: .7rem 1rem;
  border-radius: 22px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  transition: padding var(--dur) var(--ease), background-color var(--dur) var(--ease), -webkit-backdrop-filter var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease);
}
.is-scrolled .navbar-glass-wrap { padding-top: 8px; }
.is-scrolled .navbar-glass {
  padding-top: .45rem; padding-bottom: .45rem;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(30px) saturate(190%);
  backdrop-filter: blur(30px) saturate(190%);
}
.navbar-glass .nav-link { white-space: nowrap; color: var(--text-strong); font-weight: 500; font-size: .98rem; padding: .5rem .8rem !important; border-radius: 12px; }
.navbar-glass .nav-link:hover, .navbar-glass .nav-link.active, .navbar-glass .nav-link[aria-current="page"] { color: var(--acpe-link); background: rgba(10, 132, 255, .08); }
.navbar-glass .navbar-toggler { border: 1px solid var(--glass-border); border-radius: 14px; padding: .45rem .6rem; background: var(--glass-bg-subtle); }
.navbar-glass .navbar-toggler-icon { width: 1.3em; height: 1.3em; }
[data-theme="dark"] .navbar-glass .navbar-toggler-icon { filter: invert(1); }

/* Dropdown */
.dropdown-menu {
  border-radius: 20px; padding: .5rem;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-hover);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
}
.dropdown-item { border-radius: 12px; padding: .55rem .8rem; color: var(--text-strong); display: flex; gap: .65rem; align-items: center; }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(10, 132, 255, .10); color: var(--text-strong); }

/* Offcanvas (menu mobile) en panneau glass */
.offcanvas.offcanvas-glass {
  margin: 10px; height: calc(100% - 20px); max-width: calc(100% - 20px); border-radius: 26px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow-hover);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  color: var(--text);
}
@media (min-width: 1200px) {
  .navbar-expand-xl .offcanvas.offcanvas-glass { margin: 0; height: auto; border-radius: 0; background: transparent; border: 0 !important; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
[data-theme="dark"] .offcanvas .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.offcanvas-backdrop.show { opacity: .25; }

/* Cartes */
.card { --bs-card-bg: var(--glass-bg); --bs-card-border-color: var(--glass-border); --bs-card-border-radius: var(--radius); color: var(--text); }
.card.glass, .card.glass-strong { background: var(--glass-bg); }
.card.glass-strong { background: var(--glass-bg-strong); }

/* Formulaires en verre */
.form-control, .form-select {
  border-radius: 14px;
  padding: .75rem 1rem;
  color: var(--text-strong);
  background-color: rgba(255, 255, 255, .62);
  border: 1px solid rgba(60, 60, 67, .18);
  box-shadow: inset 0 2px 4px 1px rgba(0, 0, 0, 0.1) ;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.form-control::placeholder { color: #6E6E73; }
.form-control:focus, .form-select:focus {
  color: var(--text-strong);
  background-color: rgba(255, 255, 255, .9);
  border-color: var(--acpe-blue);
  box-shadow: 0 0 0 4px rgba(10, 132, 255, .25), 0 0 24px rgba(10, 132, 255, .25);
}
.form-label { font-weight: 600; color: var(--text-strong); font-size: .95rem; margin-bottom: .35rem; }
.form-check-input { width: 1.2em; height: 1.2em; border-color: rgba(60, 60, 67, .35); }
.form-check-input:checked { background-color: var(--acpe-blue-strong); border-color: var(--acpe-blue-strong); }
[data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35); }
[data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: rgba(255, 255, 255, .10); }
[data-theme="dark"] .form-control::placeholder { color: #8E8E93; }
[data-theme="dark"] .form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23d1d1d6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
[data-theme="dark"] .form-select option { background: #161a2c; }

/* Accordéon (FAQ) */
.accordion-glass { --bs-accordion-bg: transparent; --bs-accordion-border-color: transparent; --bs-accordion-btn-focus-box-shadow: none; --bs-accordion-active-bg: transparent; --bs-accordion-active-color: var(--text-strong); --bs-accordion-color: var(--text); --bs-accordion-btn-color: var(--text-strong); }
.accordion-glass .accordion-item {
  margin-bottom: .75rem;
  border-radius: 20px !important;
  overflow: hidden;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: 0 4px 18px rgba(31, 38, 135, .08), inset 0 1px 0 var(--glass-highlight);
}
.accordion-glass .accordion-button { font-weight: 600; font-size: 1.04rem; padding: 1.1rem 1.3rem; background: transparent; border-radius: 20px !important; }
.accordion-glass .accordion-button:not(.collapsed) { box-shadow: none; color: var(--acpe-link); }
.accordion-glass .accordion-body { padding: 0 1.3rem 1.2rem; }
[data-theme="dark"] .accordion-glass .accordion-button::after { filter: invert(1) brightness(1.6); }

/* Modal (lightbox) */
.modal-content.glass-strong { border-radius: var(--radius-lg); overflow: hidden; }
.modal-backdrop.show { opacity: .55; }

/* Carousel (avis) */
.carousel-glass .carousel-indicators { position: static; margin: 1.5rem 0 0; }
.carousel-glass .carousel-indicators [data-bs-target] { width: 10px; height: 10px; border-radius: 50%; background-color: var(--acpe-blue); border: 0; opacity: .3; }
.carousel-glass .carousel-indicators .active { opacity: 1; }
.carousel-glass .carousel-control-prev, .carousel-glass .carousel-control-next { position: static; width: 48px; height: 48px; opacity: 1; }
.carousel-glass .carousel-control-prev-icon, .carousel-glass .carousel-control-next-icon { filter: invert(1); width: 1.1rem; height: 1.1rem; }
[data-theme="dark"] .carousel-glass .carousel-control-prev-icon, [data-theme="dark"] .carousel-glass .carousel-control-next-icon { filter: none; }

/* Breadcrumb */
.breadcrumb { --bs-breadcrumb-divider-color: var(--text-muted); --bs-breadcrumb-item-active-color: var(--text-muted); font-size: .9rem; margin: 0; }
.breadcrumb a { color: var(--acpe-link); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* Pastille / badge glass */
.badge-glass {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .85rem;
  border-radius: var(--radius-pill);
  font-size: .9rem; font-weight: 600;
  color: var(--text-strong);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 4px 14px rgba(31, 38, 135, .08);
}
.badge-glass i { color: var(--acpe-blue); }

/* Interrupteur de thème clair / sombre (header) ---------------------------- */
.theme-switch {
  --w: 58px; --h: 32px; --pad: 3px; --knob: calc(var(--h) - 2 * var(--pad));
  position: relative; flex-shrink: 0;
  width: var(--w); height: var(--h);
  padding: 0; border-radius: var(--radius-pill);
  border: 1px solid var(--glass-border);
  background: linear-gradient(135deg, #BFE6FF, #FFE3C2);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .12), 0 4px 14px rgba(31, 38, 135, .10);
  cursor: pointer;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.theme-switch::before {                         /* petites étoiles, visibles la nuit */
  content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0;
  background:
    radial-gradient(1.2px 1.2px at 22% 35%, #fff 99%, transparent),
    radial-gradient(1px 1px at 34% 68%, #fff 99%, transparent),
    radial-gradient(1.4px 1.4px at 14% 60%, #fff 99%, transparent),
    radial-gradient(1px 1px at 42% 28%, #fff 99%, transparent);
  transition: opacity var(--dur) var(--ease);
}
.theme-switch-thumb {
  position: absolute; top: var(--pad); left: var(--pad);
  width: var(--knob); height: var(--knob); border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #fff, #F2F4F8);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: transform 360ms cubic-bezier(.34, 1.4, .64, 1), background var(--dur) var(--ease);
}
.theme-switch-thumb i { position: absolute; font-size: .85rem; line-height: 1; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.theme-switch-thumb .bi-sun-fill { color: #F59E0B; }
.theme-switch-thumb .bi-moon-stars-fill { color: #6CB4FF; opacity: 0; transform: rotate(-60deg) scale(.6); }
.theme-switch[aria-checked="true"] { background: linear-gradient(135deg, #0F1A36, #2B2F6B); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .35); }
.theme-switch[aria-checked="true"]::before { opacity: .9; }
.theme-switch[aria-checked="true"] .theme-switch-thumb { transform: translateX(calc(var(--w) - var(--knob) - 2 * var(--pad) - 2px)); background: linear-gradient(180deg, #2A3150, #1A2038); }
.theme-switch[aria-checked="true"] .bi-sun-fill { opacity: 0; transform: rotate(60deg) scale(.6); }
.theme-switch[aria-checked="true"] .bi-moon-stars-fill { opacity: 1; transform: none; }
@media (hover: hover) { .theme-switch:hover .theme-switch-thumb { box-shadow: 0 3px 10px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .9); } }
@media (max-width: 380px) { .theme-switch { --w: 50px; --h: 30px; } }

/* Transition douce lors du changement de thème (désactivée si mouvement réduit) */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color 400ms var(--ease), color 400ms var(--ease), border-color 400ms var(--ease), box-shadow 400ms var(--ease), transform 360ms cubic-bezier(.34, 1.4, .64, 1), opacity 300ms var(--ease) !important;
}

/* 5. ANIMATIONS ------------------------------------------------------------ */
.reveal { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 80ms; }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .bg-orbs span { animation: none; }
  .glass-hover:hover, .btn:hover { transform: none !important; }
}

/* 6. FALLBACK sans backdrop-filter ---------------------------------------- */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass, .glass-strong, .glass-subtle, .navbar-glass, .dropdown-menu, .offcanvas.offcanvas-glass,
  .accordion-glass .accordion-item, .btn-glass, .badge-glass, .mobile-callbar, .cookie-card { background: var(--glass-fallback) !important; }
  .glass-dark { background: rgba(20, 20, 30, .94) !important; }
}

/* Mode contraste élevé (Windows) */
@media (forced-colors: active) {
  .glass, .glass-strong, .glass-subtle, .navbar-glass, .btn { border: 1px solid CanvasText; }
}