/*
 * ============================================================
 *  USER.CSS v5 — Charte graphique "Un Cours en Miracles"
 *  Pour Joomla 6 / Template Cassiopeia
 *  Fichier à placer dans : /templates/cassiopeia/css/user.css
 * ============================================================
 */

/* ── Google Fonts ────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,400;1,600&family=Lato:wght@300;400;500;700&display=swap');

.ucm-logo:focus,
.ucm-logo:focus-visible {
  outline: none !important;
}

/* ── Variables globales ──────────────────────────────────── */
:root {
  --blue-deep:   #0f2d5e;
  --blue-mid:    #1a4480;
  --blue-light:  #1e4f96;
  --gold:        #c9a84c;
  --gold-light:  #e8d5a3;
  --gold-subtle: rgba(201,168,76,0.08);
  --cream:       #e4ecf7;
  --cream-dark:  #d8e5f4;
  --border:      #e8d5a3;
  --text:        #1c2b3a;
  --muted:       #6b7d8f;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Lato', system-ui, sans-serif;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;

  --shadow-hover:       0 10px 36px rgba(15,45,94,0.13), 0 3px 10px rgba(15,45,94,0.07);
  --transition:         0.2s ease;
  --transition-organic: 0.5s cubic-bezier(0.25,0.46,0.45,0.94);
}

/* ══════════════════════════════════════════════════════════
   BASE
   ══════════════════════════════════════════════════════════ */
body {
  font-family:      var(--font-body);
  background-color: #e4ecf7;
  color:            var(--text);
  font-size:        16px;
  line-height:      1.85;
}
a:not([class]) {
    text-decoration: none !important;
}

/* ══════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════ */
#sp-header, .sp-header, header.header {
  background-color: var(--blue-deep) !important;
  border-bottom:    2px solid var(--gold) !important;
  box-shadow:       none !important;
}
.container-header {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow:       none !important;
  position:         sticky !important;
  top:              0 !important;
  z-index:          1000 !important;
}
.sp-header .logo a, .navbar-brand, #sp-header .logo {
  font-family:     var(--font-display) !important;
  font-size:       1.5rem !important;
  font-weight:     400 !important;
  color:           var(--gold) !important;
  letter-spacing:  0.06em !important;
  text-decoration: none !important;
}

/* ══════════════════════════════════════════════════════════
   MENU NATIF CASSIOPEIA
   ══════════════════════════════════════════════════════════ */
.navbar.navbar-expand-md {
  background-color: var(--blue-deep) !important;
  padding:          0 1.5rem !important;
  border-bottom:    2px solid var(--gold) !important;
  min-height:       48px !important;
  box-shadow:       none !important;
}
.navbar-nav { align-items: center !important; }
.navbar-nav > .nav-item > .nav-link,
.navbar-nav > .nav-item > a {
  font-family:     var(--font-body) !important;
  font-size:       0.72rem !important;
  font-weight:     400 !important;
  letter-spacing:  0.1em !important;
  text-transform:  uppercase !important;
  color:           var(--gold-light) !important;
  text-decoration: none !important;
  padding:         0.875rem 1rem !important;
  display:         flex !important;
  align-items:     center !important;
  gap:             0.3rem !important;
  transition:      color var(--transition), background var(--transition) !important;
  border-bottom:   2px solid transparent !important;
  white-space:     nowrap !important;
  box-shadow:      none !important;
}
.navbar-nav > .nav-item > .nav-link:hover,
.navbar-nav > .nav-item > a:hover,
.navbar-nav > .nav-item.active > .nav-link {
  color:               var(--gold) !important;
  background:          rgba(201,168,76,0.07) !important;
  border-bottom-color: var(--gold) !important;
}
.navbar-nav > .nav-item.dropdown > .nav-link::after,
.navbar-nav > .nav-item.dropdown > a::after {
  content:        "" !important;
  display:        inline-block !important;
  width:          0 !important;
  height:         0 !important;
  border-left:    4px solid transparent !important;
  border-right:   4px solid transparent !important;
  border-top:     4px solid currentColor !important;
  margin-left:    0.3rem !important;
  transition:     transform var(--transition) !important;
  vertical-align: middle !important;
}
.navbar-nav > .nav-item.dropdown.show > .nav-link::after,
.navbar-nav > .nav-item.dropdown.show > a::after { transform: rotate(180deg) !important; }
.navbar-nav .dropdown-menu {
  background-color: var(--blue-deep) !important;
  border:           1px solid rgba(201,168,76,0.25) !important;
  border-top:       2px solid var(--gold) !important;
  border-radius:    0 0 var(--radius-md) var(--radius-md) !important;
  box-shadow:       0 8px 32px rgba(10,22,40,0.25) !important;
  padding:          0.5rem 0 !important;
  min-width:        200px !important;
  margin-top:       0 !important;
  animation:        dropdownFade 0.2s ease !important;
}
@keyframes dropdownFade {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}
.navbar-nav .dropdown-menu .nav-item > a,
.navbar-nav .dropdown-menu .dropdown-item {
  font-size:       0.8rem !important;
  color:           var(--gold-light) !important;
  text-decoration: none !important;
  padding:         0.55rem 1.25rem !important;
  display:         flex !important;
  align-items:     center !important;
  gap:             0.5rem !important;
  transition:      color var(--transition), background var(--transition), padding-left var(--transition) !important;
  border-bottom:   0.5px solid rgba(201,168,76,0.1) !important;
  background:      transparent !important;
  box-shadow:      none !important;
}
.navbar-nav .dropdown-menu .nav-item:last-child > a,
.navbar-nav .dropdown-menu .dropdown-item:last-child { border-bottom: none !important; }
.navbar-nav .dropdown-menu .nav-item > a::before,
.navbar-nav .dropdown-menu .dropdown-item::before {
  content:     "›" !important;
  color:       var(--gold) !important;
  font-size:   1rem !important;
  flex-shrink: 0 !important;
  transition:  transform var(--transition) !important;
}
.navbar-nav .dropdown-menu .nav-item > a:hover,
.navbar-nav .dropdown-menu .dropdown-item:hover {
  color:        var(--gold) !important;
  background:   rgba(201,168,76,0.08) !important;
  padding-left: 1.5rem !important;
}
.navbar-nav .dropdown-menu .nav-item > a:hover::before,
.navbar-nav .dropdown-menu .dropdown-item:hover::before { transform: translateX(3px) !important; }
.navbar-toggler {
  border:        1px solid rgba(201,168,76,0.5) !important;
  border-radius: var(--radius-sm) !important;
  background:    transparent !important;
  box-shadow:    none !important;
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23c9a84c' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
@media (max-width:767.98px) {
  .navbar-collapse {
    background-color: var(--blue-deep) !important;
    border-top:       1px solid rgba(201,168,76,0.2) !important;
    padding:          0.5rem 0 !important;
    margin:           0 -1.5rem !important;
  }
  .navbar-nav > .nav-item > .nav-link,
  .navbar-nav > .nav-item > a {
    padding:       0.6rem 1.5rem !important;
    border-bottom: 0.5px solid rgba(201,168,76,0.1) !important;
    border-left:   none !important;
  }
  .navbar-nav .dropdown-menu {
    border:        none !important;
    border-left:   3px solid var(--gold) !important;
    border-radius: 0 !important;
    box-shadow:    none !important;
    background:    rgba(0,0,0,0.15) !important;
    margin-left:   1.5rem !important;
    animation:     none !important;
  }
}


/* ══════════════════════════════════════════════════════════
   MENU PERSONNALISÉ UCM — Nav principale + Jour/Nuit
   ══════════════════════════════════════════════════════════ */
/* ── Fix wrapper Cassiopeia ── */
.container-header .grid-child.container-nav {
  padding:   0 !important;
  max-width: 100% !important;
  width:     100% !important;
  margin:    0 !important;
  display:   block !important;
}
.container-header .mod-custom,
.container-header #mod-custom173 {
  width: 100% !important;
}

/* ── Nav principale ── */
.ucm-nav {
  --blue-deep:    #0f2d5e;
  --blue-mid:     #1a4480;
  --gold:         #c9a84c;
  --gold-light:   #e8d5a3;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Lato', system-ui, sans-serif;
  --radius:       6px;
  --tr:           0.25s cubic-bezier(0.25,0.46,0.45,0.94);

  display:         flex;
  align-items:     center;
  justify-content: space-between;
  background:      var(--blue-deep);
  min-height:      64px;
  width:           100%;
  box-sizing:      border-box;
  position:        relative;
}

/* ── Logo texte ── */
.ucm-logo {
  display:         flex;
  align-items:     center;
  flex-shrink:     0;
  padding:         0 1.5rem;
  text-decoration: none;
  line-height:     1;
}
.ucm-logo-text {
  font-family:    var(--font-display);
  font-size:      1.35rem;
  font-weight:    400;
  color:          var(--gold);
  letter-spacing: 0.06em;
  white-space:    nowrap;
  line-height:    1;
  transition:     color var(--tr), opacity var(--tr);
}
.ucm-logo-text strong {
  font-weight:    700;
  letter-spacing: 0.1em;
}
.ucm-logo:hover .ucm-logo-text {
  color:   var(--gold-light);
  opacity: 0.9;
}
.ucm-logo:focus,
.ucm-logo:focus-visible { outline: none !important; }

/* ── Items principaux ── */
.ucm-items {
  display:     flex;
  align-items: center;
  list-style:  none;
  margin:      0 auto;
  padding:     0;
  gap:         0.25rem;
}
.ucm-items > li { position: relative; }

.ucm-items > li > a {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             0.3rem;
  padding:         0.75rem 0.75rem;
  border-radius:   var(--radius);
  color:           var(--gold-light);
  text-decoration: none;
  transition:      color var(--tr), background var(--tr);
  position:        relative;
}
.ucm-items > li > a svg.ucm-icon {
  width:           32px;
  height:          32px;
  stroke:          currentColor;
  fill:            none;
  stroke-width:    1.4;
  stroke-linecap:  round;
  stroke-linejoin: round;
  flex-shrink:     0;
}
.ucm-items > li > a svg.ucm-chevron {
  width:          14px;
  height:         14px;
  stroke:         var(--gold);
  fill:           none;
  stroke-width:   2.5;
  stroke-linecap: round;
  flex-shrink:    0;
  opacity:        0.7;
  transition:     transform var(--tr), opacity var(--tr);
}
.ucm-items > li.open > a svg.ucm-chevron {
  transform: rotate(180deg);
  opacity:   1;
}
.ucm-items > li > a:hover {
  color:      var(--gold);
  background: rgba(201,168,76,0.1);
}
.ucm-items > li > a:hover svg.ucm-chevron { opacity: 1; }

/* Don — gold direct */
.ucm-items > li.ucm-don > a       { color: var(--gold); }
.ucm-items > li.ucm-don > a:hover { background: rgba(201,168,76,0.15); }

/* ── Tooltip ── */

/* ── Tooltips icônes Q&R ── */
.qr-action-btn {
  position: relative;
}
.qr-action-btn::after {
  content:        attr(data-tooltip);
  position:       absolute;
  bottom:         calc(100% + 8px);
  left:           50%;
  transform:      translateX(-50%) translateY(4px);
  background:     #0f2d5e;
  color:          #e8d5a3;
  font-family:    var(--font-body);
  font-size:      0.68rem;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space:    nowrap;
  padding:        4px 10px;
  border-radius:  4px;
  border:         1px solid rgba(201,168,76,0.3);
  pointer-events: none;
  opacity:        0;
  transition:     opacity 0.2s ease, transform 0.2s ease;
  z-index:        100;
}
.qr-action-btn:hover::after {
  opacity:   1;
  transform: translateX(-50%) translateY(0);
}
.ucm-items > li > a .ucm-tooltip {
  position:       absolute;
  top:            calc(100% + 10px);
  left:           50%;
  transform:      translateX(-50%) translateY(-4px);
  background:     var(--blue-deep);
  color:          var(--gold-light);
  font-family:    var(--font-body);
  font-size:      0.65rem;
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space:    nowrap;
  padding:        4px 10px;
  border-radius:  4px;
  border:         1px solid rgba(201,168,76,0.3);
  pointer-events: none;
  opacity:        0;
  transition:     opacity 0.2s ease, transform 0.2s ease;
  z-index:        1002;
  box-shadow:     0 4px 12px rgba(10,22,40,0.2);
}
.ucm-items > li > a .ucm-tooltip::before {
  content:             '';
  position:            absolute;
  bottom:              100%;
  left:                50%;
  transform:           translateX(-50%);
  border:              4px solid transparent;
  border-bottom-color: var(--gold);
}
.ucm-items > li > a:hover .ucm-tooltip {
  opacity:   1;
  transform: translateX(-50%) translateY(0);
}
.ucm-items > li.open > a .ucm-tooltip { display: none; }

/* ── Dropdown ── */
.ucm-dropdown {
  display:        none;
  position:       absolute;
  top:            calc(100% + 6px);
  left:           50%;
  transform:      translateX(-50%) translateY(-8px);
  background:     var(--blue-deep);
  border:         1px solid rgba(201,168,76,0.25);
  border-top:     2px solid var(--gold);
  border-radius:  0 0 var(--radius) var(--radius);
  min-width:      220px;
  padding:        0.4rem 0;
  list-style:     none;
  margin:         0;
  box-shadow:     0 8px 32px rgba(10,22,40,0.3);
  opacity:        0;
  transition:     opacity 0.25s var(--tr), transform 0.25s var(--tr);
  pointer-events: none;
  z-index:        1001;
}
.ucm-items > li.open .ucm-dropdown {
  display:        block;
  opacity:        1;
  transform:      translateX(-50%) translateY(0);
  pointer-events: auto;
}
.ucm-items > li.ucm-outils .ucm-dropdown {
  left:      auto;
  right:     0;
  transform: translateY(-8px);
}
.ucm-items > li.ucm-outils.open .ucm-dropdown { transform: translateY(0); }

.ucm-dropdown li a {
  display:         flex;
  align-items:     center;
  gap:             0.5rem;
  font-family:     var(--font-body);
  font-size:       0.85rem;
  color:           var(--gold-light);
  text-decoration: none;
  padding:         0.6rem 1.25rem;
  border-bottom:   0.5px solid rgba(201,168,76,0.1);
  transition:      color var(--tr), background var(--tr), padding-left var(--tr);
}
.ucm-dropdown li:last-child a    { border-bottom: none; }
.ucm-dropdown li a::before       { content:"›"; color:var(--gold); font-size:1rem; flex-shrink:0; transition:transform var(--tr); }
.ucm-dropdown li a:hover         { color:var(--gold); background:rgba(201,168,76,0.08); padding-left:1.5rem; }
.ucm-dropdown li a:hover::before { transform:translateX(3px); }

/* ── Bouton jour/nuit ── */
.ucm-theme-btn {
  display:        flex;
  align-items:    center;
  justify-content: center;
  width:          36px;
  height:         36px;
  border:         none;
  background:     transparent;
  cursor:         pointer;
  padding:        0;
  margin-right:   0.75rem;
  flex-shrink:    0;
  border-radius:  50%;
  transition:     background var(--tr);
}
.ucm-theme-btn:hover { background: rgba(201,168,76,0.1); }
.ucm-theme-btn svg {
  width:          20px;
  height:         20px;
  stroke:         var(--gold);
  fill:           none;
  stroke-width:   1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition:     opacity var(--tr), transform 0.4s var(--tr);
}
.ucm-theme-btn .icon-sun  { display: block; }
.ucm-theme-btn .icon-moon { display: none; }
body.dark-mode .ucm-theme-btn .icon-sun  { display: none; }
body.dark-mode .ucm-theme-btn .icon-moon { display: block; }

/* ── Hamburger ── */
.ucm-burger {
  display:        none;
  flex-direction: column;
  gap:            5px;
  cursor:         pointer;
  padding:        0.5rem 1.5rem;
  border:         none;
  background:     transparent;
}
.ucm-burger span {
  display:    block;
  width:      22px;
  height:     1.5px;
  background: var(--gold);
  transition: transform var(--tr), opacity var(--tr);
}
.ucm-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.ucm-burger.open span:nth-child(2) { opacity: 0; }
.ucm-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Mobile ── */
@media (max-width:768px) {
  .ucm-logo          { padding: 0 1rem; }
  .ucm-logo-text     { font-size: 1.1rem; }
  .ucm-burger        { display: flex; }
  .ucm-theme-btn     { margin-right: 0.25rem; }

  .ucm-items {
    display:        none;
    flex-direction: column;
    align-items:    stretch;
    position:       absolute;
    top:            100%;
    left:           0;
    right:          0;
    background:     var(--blue-deep);
    border-top:     1px solid rgba(201,168,76,0.2);
    padding:        0.5rem 0;
    z-index:        1001;
    margin:         0;
    gap:            0;
  }
  .ucm-items.open { display: flex; }

  .ucm-items > li > a {
    width:           100% !important;
    height:          auto !important;
    border-radius:   0 !important;
    justify-content: space-between !important;
    padding:         0.65rem 1.5rem !important;
    border-bottom:   0.5px solid rgba(201,168,76,0.1) !important;
    gap:             0 !important;
  }
  .ucm-items > li > a svg.ucm-icon    { display: none !important; }
  .ucm-items > li > a svg.ucm-chevron {
    width:   14px !important;
    height:  14px !important;
    opacity: 0.7 !important;
  }
  .ucm-items > li > a .ucm-tooltip {
    position:       static !important;
    opacity:        1 !important;
    transform:      none !important;
    background:     transparent !important;
    border:         none !important;
    box-shadow:     none !important;
    padding:        0 !important;
    font-size:      0.82rem !important;
    color:          var(--gold-light) !important;
    pointer-events: auto !important;
    letter-spacing: 0.08em !important;
    flex:           1 !important;
    text-align:     left !important;
    display:        block !important;
  }
  .ucm-items > li > a .ucm-tooltip::before      { display: none !important; }
  .ucm-items > li > a:hover .ucm-tooltip        { color: var(--gold) !important; }
  .ucm-items > li.open > a .ucm-tooltip         { display: block !important; }

  .ucm-dropdown {
    position:       static !important;
    border:         none !important;
    border-radius:  0 !important;
    box-shadow:     none !important;
    background:     rgba(0,0,0,0.2) !important;
    min-width:      auto !important;
    opacity:        1 !important;
    transform:      none !important;
    pointer-events: auto !important;
    display:        none !important;
    transition:     none !important;
    left:           auto !important;
    right:          auto !important;
  }
  .ucm-items > li.open .ucm-dropdown { display: block !important; }
  .ucm-dropdown li a {
    padding:       0.5rem 2rem !important;
    font-size:     0.8rem !important;
    border-bottom: 0.5px solid rgba(255,255,255,0.05) !important;
  }
}

/* ══════════════════════════════════════════════════════════
   FIL D'ARIANE
   ══════════════════════════════════════════════════════════ */
#sp-breadcrumbs, .breadcrumb-wrapper, nav[aria-label="breadcrumb"] {
  background-color: var(--cream-dark) !important;
  border-bottom:    0.5px solid var(--border) !important;
  padding:          0.5rem 1.5rem !important;
}
.breadcrumb {
  background: transparent !important;
  margin:     0 !important;
  padding:    0 !important;
  font-size:  0.7rem !important;
  box-shadow: none !important;
}
.breadcrumb-item a {
    color:           var(--blue-light) !important;
    font-weight:     400 !important;
    text-decoration: none !important;
    transition:      color var(--transition) !important;
    pointer-events:  none;
    cursor: default;
    color: inherit;
    text-decoration: none;
}
.breadcrumb-item a:hover          { color: var(--gold) !important; }
.breadcrumb-item.active           { color: var(--template-link-hover-color) !important; font-weight: 700 !important; text-transform: uppercase;}
.breadcrumb-item + .breadcrumb-item::before {
  color:   var(--gold) !important;
  content: "›" !important;
}

/* ══════════════════════════════════════════════════════════
   CONTENU PRINCIPAL
   ══════════════════════════════════════════════════════════ */
#sp-main-body, .sp-main-body, main { background: #e4ecf7 !important; }

h1,h2,h3,h4 {
  color:       var(--blue-deep) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}
h1 { font-size: clamp(1.6rem,4vw,2.4rem) !important; }
h2 { font-size: 1.6rem !important; }
h3 { font-size: 1.3rem !important; }
h4 { font-size: 1.1rem !important; }
h5 { font-size: 1rem !important; font-family: var(--font-body) !important; font-weight: 700 !important; }

/* Titre article Q&R */
.item-page h5, .article-body h5 {
  font-family:    var(--font-display) !important;
  font-size:      1.6rem !important;
  font-weight:    600 !important;
  color:          var(--blue-deep) !important;
  line-height:    1.3 !important;
  margin-bottom:  1.5rem !important;
  padding-bottom: 1rem !important;
  border-bottom:  1px solid var(--border) !important;
}

/* Corps de texte */
.item-page p, .article-body p {
  font-size:     16px !important;
  font-weight:   500 !important;
  line-height:   1.75 !important;
  margin-bottom: 0.75rem !important;
  color:         #1a2535 !important;
}

/* Liens contenu */
.item-page a, .article-body a {
  text-decoration: none !important;
  font-weight:     500 !important;
  color: var(--template-bg-dark-40);
}
.item-page a:hover, .article-body a:hover {
  color: var(--template-bg-dark-70) !important;
}

/* Blockquotes */
.item-page blockquote, .article-body blockquote {
    padding: 1rem 1.25rem !important;
    margin: 1.5rem 0 !important;
    border: 0px solid white !important;
    border-left: 3px solid var(--gold) !important;
    border-radius: 4px !important;
    font-family: var(--font-display) !important;
    font-size: 1.2rem !important;
    font-style: italic !important;
    color: var(--blue-deep) !important;
    line-height: 1.8 !important;
    box-shadow: none !important;
}

/* Paragraphes dans blockquotes */
.item-page blockquote p, .article-body blockquote p {
  font-weight: 700 !important;
  font-size:   1.2rem !important;
  font-family: var(--font-display) !important;
  font-style:  italic !important;
}

/* Images */
.item-page img, .article-body img {
  max-width:     50% !important;
  height:        auto !important;
  border-radius: var(--radius-sm) !important;
  transition:    transform var(--transition-organic), box-shadow var(--transition-organic) !important;
}
.item-page img:hover, .article-body img:hover {
  transform:  translateY(-3px) scale(1.02) !important;
  box-shadow: var(--shadow-hover) !important;
}

/* Tables */
.table { border-collapse: collapse !important; width: 100% !important; box-shadow: none !important; }
.table td, .table th {
  padding:       0.5rem 0.75rem !important;
  border-bottom: 0.5px solid var(--border) !important;
  font-size:     16px !important;
  color:         var(--text) !important;
}
.table-hover tbody tr:hover { background-color: rgba(201,168,76,0.06) !important; }

/* Suppression fond bleu ciel hérité */
table[style*="#eaf6ff"], td[style*="#eaf6ff"], tr[style*="#eaf6ff"] {
  background-color: transparent !important;
  border-left:      none !important;
}

/* ══════════════════════════════════════════════════════════
   INTRO CARD — v2 (remplace le bloc existant)
   ══════════════════════════════════════════════════════════ */
.intro-card {
  background:    #cddaf0 !important;
  border:        1px solid white !important;
  border-radius: var(--radius-lg) !important;
  padding:       1.5rem !important;
  margin-bottom: 1.5rem !important;
  display:       flex !important;
  gap:           1.25rem !important;
  align-items:   flex-start !important;
  box-shadow:    0 2px 10px rgba(15,45,94,0.08) !important;
}
.intro-card .intro-icon {
  width:         60px !important;
  height:        60px !important;
  border-radius: var(--radius-md) !important;
  flex-shrink:   0 !important;
  overflow:      hidden !important;
}
.intro-card .intro-icon img {
  width:         100% !important;
  height:        100% !important;
  object-fit:    cover !important;
  border-radius: var(--radius-md) !important;
}
.intro-card .intro-text {
  font-size:   0.9rem !important;
  line-height: 1.7 !important;
  color:       var(--text) !important;
}
.intro-card .intro-text a {
    color: #ffffff;
    font-weight: 500 !important;
    text-decoration: none !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid #ffffff !important;
    padding-bottom: 1px !important;
}
.intro-card .intro-text a:hover { color: var(--blue-mid) !important; }

/* ── Avatar rond (nouveau) ── */
.intro-avatar {
  width:            56px !important;
  min-width:        56px !important;
  height:           56px !important;
  border-radius:    50% !important;
  background-color: var(--blue-deep) !important;
  display:          flex !important;
  align-items:      center !important;
  justify-content:  center !important;
  flex-shrink:      0 !important;
}
.intro-avatar svg {
  width:        28px !important;
  height:       28px !important;
  stroke:       var(--gold-light) !important;
  stroke-width: 1.2 !important;
  fill:         none !important;
}

/* ── En-tête titre + badge ── */
.intro-header {
  display:       flex !important;
  align-items:   center !important;
  gap:           0.6rem !important;
  flex-wrap:     wrap !important;
  margin-bottom: 0.5rem !important;
}
.intro-title {
  font-family: var(--font-display) !important;
  font-size:   1.1rem !important;
  font-weight: 600 !important;
  color:       var(--blue-deep) !important;
  margin:      0 !important;
}
.intro-badge {
    font-family: var(--font-body) !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
    border-radius: 20px !important;
    padding: 0.15rem 0.6rem !important;
}

/* ── Corps texte ── */
.intro-body {
  font-size:   0.9rem !important;
  color:       #3a4a5a !important;
  line-height: 1.7 !important;
  margin:      0 0 0.85rem 0 !important;
}

/* ── Lien nouvelles ── */
.intro-link {
  font-family:     var(--font-body) !important;
  font-size:       0.75rem !important;
  font-weight:     500 !important;
  letter-spacing:  0.1em !important;
  text-transform:  uppercase !important;
  color:           var(--gold) !important;
  text-decoration: none !important;
  transition:      color var(--transition-organic), letter-spacing var(--transition-organic) !important;
  border-bottom:   1px solid rgba(201,168,76,0.4) !important;
  padding-bottom:  1px !important;
}
.intro-link:hover {
  color:          var(--blue-mid) !important;
  letter-spacing: 0.13em !important;
}

/* ── Citation ── */
.intro-quote cite {
  display:        block !important;
  font-style:     normal !important;
  font-family:    var(--font-body) !important;
  font-size:      0.7rem !important;
  font-weight:    700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color:          var(--gold) !important;
  margin-top:     0.5rem !important;
}

/* ── Lien New Age v4 — aligné à droite ── */
.intro-newage {
  display:         flex !important;
  justify-content: flex-end !important;
  align-items:     center !important;
  gap:             0.4rem !important;
  background:      transparent !important;
  border:          none !important;
  border-radius:   0 !important;
  padding:         0 !important;
  text-decoration: none !important;
  color:           var(--blue-mid) !important;
  font-family:     var(--font-body) !important;
  font-size:       0.85rem !important;
  font-weight:     400 !important;
  letter-spacing:  normal !important;
  text-transform:  none !important;
  border-bottom:   none !important;
  padding-bottom:  0 !important;
  margin-top:      1.5rem !important;
  margin-bottom:   2rem !important;
  box-shadow:      none !important;
  transition:      color var(--transition-organic) !important;
}
.intro-newage:hover {
  color:      var(--gold) !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Seul "mouvance New Age" est le lien visible */
.intro-newage .intro-newage-highlight {
  font-weight:     500 !important;
  color:           var(--gold) !important;
  border-bottom:   1px solid rgba(201,168,76,0.4) !important;
  padding-bottom:  1px !important;
  transition:      color var(--transition-organic) !important;
}
.intro-newage:hover .intro-newage-highlight { color: var(--blue-mid) !important; }
.intro-newage em           { color: inherit !important; font-style: italic !important; }
.intro-newage-label        { display: none !important; }
.intro-newage-arrow {
  display:     inline-block !important;
  margin-left: 0.2rem !important;
  color:       var(--gold) !important;
  font-size:   0.85rem !important;
  animation:   ucm-arrow-pulse 2.5s ease-in-out infinite !important;
  transition:  none !important;
}
@keyframes ucm-arrow-pulse {
  0%, 100% { transform: translateX(0px); opacity: 1;   }
  50%       { transform: translateX(5px); opacity: 0.5; }
}
.intro-newage:hover .intro-newage-arrow {
  animation:  none !important;
  transform:  translateX(3px) !important;
  transition: transform var(--transition-organic) !important;
}
.intro-newage-hover {
  display:    inline !important;
  transition: letter-spacing var(--transition-organic) !important;
}

/* ══════════════════════════════════════════════════════════
   CARD
   ══════════════════════════════════════════════════════════ */
.card {
    --card-spacer-y
    --card-spacer-x: 1rem;
    --card-title-spacer-y: .5rem;
    --card-title-color: ;
    --card-subtitle-color: ;
    --card-border-width: var(--border-width);
    --card-border-color: #ffffff;
    --card-border-radius: 8px;
    --card-box-shadow: ;
    --card-inner-border-radius: calc(var(--border-radius) - (var(--border-width)));
    --card-cap-padding-y: .5rem;
    --card-cap-padding-x: 1rem;
    --card-cap-bg: rgba(var(--body-color-rgb), .03);
    --card-cap-color: ;
    --card-height: ;
    --card-color: ;
    --card-bg: #d8e5f4;
    --card-img-overlay-padding: 1rem;
    --card-group-margin: .5em;
    min-width: 0;
    height: var(--card-height);
    color: var(--body-color);
    word-wrap: break-word;
    background-color: #d8e5f4 !important;
    border: 0.5px solid #ffffff !important;
    border-radius: 8px;
    background-clip: border-box;
    flex-direction: column;
    display: flex;
    position: relative;
	}

	/* ══════════════════════════════════════════════════════════
   TUILES SITEMAP
   ══════════════════════════════════════════════════════════ */
.tk-grid-sitemap {
  display:               grid !important;
  grid-template-columns: repeat(6,1fr) !important;
  gap:                   5px !important;
 
}
.tk-tile-sitemap {
    background: #cddaf0 !important;
    border: 1px solid white !important;
    border-radius: var(--radius-lg) !important;
    padding: 15px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-decoration: none !important;
    box-shadow: 0 2px 10px rgba(15, 45, 94, 0.10) !important;
    transition: box-shadow var(--transition-organic), transform var(--transition-organic) !important;
}
.tk-tile-sitemap:hover { 
transform: translateY(-4px) !important; box-shadow: var(--shadow-hover) !important; 
}

/* ══════════════════════════════════════════════════════════
   TUILES HOMEPAGE — v2 agrandies
   ══════════════════════════════════════════════════════════ */
.tk-grid-home {
  display:               grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  gap:                   20px !important;
  margin-top:            1.5rem !important;
}
.tk-tile-home {
  background:      #cddaf0 !important;
  border:          1px solid white !important;
  border-radius:   var(--radius-lg) !important;
  padding:         36px 24px 28px !important;
  display:         flex !important;
  flex-direction:  column !important;
  align-items:     center !important;
  gap:             16px !important;
  text-decoration: none !important;
  box-shadow:      0 2px 10px rgba(15,45,94,0.10) !important;
  transition:      box-shadow var(--transition-organic), transform var(--transition-organic) !important;
}
.tk-tile-home:hover { transform: translateY(-4px) !important; box-shadow: var(--shadow-hover) !important; }
.tk-icon-home {
  width:            76px !important;
  height:           76px !important;
  background-color: var(--blue-mid) !important;
  border-radius:    var(--radius-md) !important;
  display:          flex !important;
  align-items:      center !important;
  justify-content:  center !important;
  transition:       transform var(--transition-organic) !important;
}
.tk-tile-home:hover .tk-icon-home { transform: scale(1.06) !important; }
.tk-icon-home svg {
  width:           38px !important;
  height:          38px !important;
  stroke:          #ffffff !important;
  fill:            none !important;
  stroke-width:    1.6 !important;
  stroke-linecap:  round !important;
  stroke-linejoin: round !important;
}
.tk-sep-home { width:36px !important; height:1px !important; background:rgba(201,168,76,0.5) !important; }
.tk-label-home {
  font-family:    var(--font-display) !important;
  font-size:      17px !important;
  font-weight:    600 !important;
  color:          #0a1628 !important;
  letter-spacing: 0.06em !important;
  text-align:     center !important;
  text-transform: uppercase !important;
  line-height:    1.3 !important;
}
.tk-desc-home { font-size:13px !important; color:var(--muted) !important; text-align:center !important; line-height:1.6 !important; margin-top:-4px !important; }
@media (max-width:600px) { .tk-grid-home { grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width:380px) { .tk-grid-home { grid-template-columns: 1fr !important; } }

/* ══════════════════════════════════════════════════════════
   TUILES ACCUEIL — État inactif
   ══════════════════════════════════════════════════════════ */
.tk-tile-home--inactive {
  cursor:         default !important;
  pointer-events: none !important;
  background:     #d8e5f4 !important;
}

.tk-tile-home--inactive .tk-icon-home {
  background-color: #bababa !important;   /* bleu-gris doux, même famille */
}
.tk-tile-home--inactive .tk-label-home {
  color: #9aaabb !important;
}
.tk-tile-home--inactive .tk-desc-home {
  color: #b0bfcc !important;
}
.tk-tile-home--inactive .tk-sep-home {
  background-color: rgba(180,200,220,0.4) !important;
}

/* Pas de hover sur les inactives */
.tk-tile-home--inactive:hover {
  box-shadow: none !important;
  transform:  none !important;
}

/* ══════════════════════════════════════════════════════════
   SIDEBAR DROITE
   ══════════════════════════════════════════════════════════ */
.grid-child.container-sidebar-right {
  background-color: #d8e5f4 !important;
  border:           1px solid white !important;
  padding:          1rem !important;
  margin-top:       52px;
  border-radius:    8px;
  margin-bottom:    50px;
  box-shadow:       0 2px 10px rgba(15,45,94,0.08) !important;
}
.sidebar-right.card {
  background: transparent !important;
  border:     none !important;
  box-shadow: none !important;
  margin-bottom: 1.5rem !important;
}
.sidebar-right .card-header,
p.card-header {
  font-size:      0.7rem !important;
  font-weight:    700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color:          var(--blue-deep) !important;
  background:     transparent !important;
  border:         none !important;
  border-bottom:  1px solid var(--gold) !important;
  padding:        0 0 0.5rem 0 !important;
  margin-bottom:  0.875rem !important;
  display:        flex !important;
  align-items:    center !important;
  gap:            0.4rem !important;
  box-shadow:     none !important;
}
.sidebar-right .card-header::before,
p.card-header::before {
  content:       '' !important;
  display:       block !important;
  width:         3px !important;
  height:        11px !important;
  background:    var(--gold) !important;
  border-radius: 1px !important;
  flex-shrink:   0 !important;
}
.sidebar-right .card-body { padding: 0 !important; }
.sidebar-right .mod-list  { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.sidebar-right .mod-list li { border-bottom: 0.5px solid rgba(201,168,76,0.25) !important; }
.sidebar-right .mod-list li:last-child { border-bottom: none !important; }
.sidebar-right .mod-list li a {
  font-size:       0.9rem !important;
  color:           var(--blue-mid) !important;
  font-weight:     400 !important;
  text-decoration: none !important;
  display:         flex !important;
  align-items:     flex-start !important;
  gap:             0.4rem !important;
  padding:         0.375rem 0 !important;
  line-height:     1.5 !important;
  transition:      color var(--transition) !important;
}
.sidebar-right .mod-list li a::before { content:"›" !important; color:var(--gold) !important; font-size:0.95rem !important; line-height:1.4 !important; flex-shrink:0 !important; }
.sidebar-right .mod-list li a:hover   { color: var(--gold) !important; }
.sidebar-right .nav                   { flex-direction: column !important; }
.sidebar-right .nav-item a {
  font-size:       0.9rem !important;
  color:           var(--blue-mid) !important;
  font-weight:     400 !important;
  text-decoration: none !important;
  display:         flex !important;
  align-items:     flex-start !important;
  gap:             0.4rem !important;
  padding:         0.375rem 0 !important;
  border-bottom:   0.5px solid rgba(201,168,76,0.25) !important;
  transition:      color var(--transition) !important;
}
.sidebar-right .nav-item a::before { content:"›" !important; color:var(--gold) !important; font-size:0.95rem !important; line-height:1.4 !important; flex-shrink:0 !important; }
.sidebar-right .nav-item a:hover   { color: var(--gold) !important; }

/* ══════════════════════════════════════════════════════════
   PAGE Q&R — Accordéon + Onglets Bootstrap natifs
   ══════════════════════════════════════════════════════════ */
#accordion > div {
  margin-bottom: 0.625rem !important;
  border-radius: var(--radius-md) !important;
  overflow:      hidden !important;
  border:        0.5px solid var(--border) !important;
  box-shadow:    none !important;
}
#accordion .btn.btn-block {
  background-color: var(--blue-deep) !important;
  color:            var(--gold-light) !important;
  font-size:        1.2rem !important;
  font-weight:      700 !important;
  letter-spacing:   0.08em !important;
  text-transform:   uppercase !important;
  text-align:       left !important;
  padding:          1rem 1.25rem !important;
  border:           none !important;
  border-radius:    0 !important;
  width:            100% !important;
  box-shadow:       none !important;
  transition:       background var(--transition), color var(--transition) !important;
}
#accordion .btn.btn-block:hover { background-color: var(--blue-mid) !important; color: var(--gold) !important; }
#accordion .collapse.show, #accordion .collapsing {
  background: #fff !important;
  border-top: 1px solid rgba(201,168,76,0.2) !important;
  box-shadow: none !important;
}

/* Onglets */
#nav-tab.nav-tabs, .nav.nav-tabs {
  background-color:   #f5f5f5 !important;
  border:             1px solid #dfe3e7 !important;
  border-radius:      0.25rem 0.25rem 0 0 !important;
  margin:             0 !important;
  box-shadow:         none !important;
  overflow-x:         auto !important;
  overflow-y:         hidden !important;
  scrollbar-width:    none !important;
  -ms-overflow-style: none !important;
  flex-wrap:          nowrap !important;
  display:            flex !important;
}
#nav-tab.nav-tabs::-webkit-scrollbar, .nav.nav-tabs::-webkit-scrollbar { display: none !important; }
#nav-tab .nav-link {
  font-size:      0.7rem !important;
  font-weight:    700 !important;
  letter-spacing: 0.06em !important;
  color:          var(--muted) !important;
  border:         none !important;
  border-radius:  0 !important;
  padding:        0.625rem 0.875rem !important;
  white-space:    nowrap !important;
  flex-shrink:    0 !important;
  margin-bottom:  -1px !important;
  background:     transparent !important;
  box-shadow:     none !important;
  transition:     color var(--transition), border-color var(--transition) !important;
}
#nav-tab .nav-link:hover  { color: var(--blue-mid) !important; }
#nav-tab .nav-link.active { color: var(--blue-mid) !important; border-bottom-color: var(--gold) !important; background: #fff !important; box-shadow: none !important; }

/* Contenu onglets */
.tab-content .tab-pane p {
  padding:       0.25rem 0.75rem !important;
  margin-bottom: 0 !important;
  line-height:   1rem !important;
}
.tab-content .tab-pane p a {
  display:         block !important;
  font-size:       16px !important;
  font-weight:     500 !important;
  text-decoration: none !important;
  padding:         0.5rem 0.75rem !important;
  border-bottom:   0.5px solid rgba(201,168,76,0.2) !important;
  border-radius:   var(--radius-sm) !important;
  box-shadow:      none !important;
  background:      transparent !important;
  transition:      color var(--transition-organic), padding-left var(--transition-organic) !important;
}
.tab-content .tab-pane p a:hover,
.tab-content .tab-pane p a:focus,
.tab-content .tab-pane p a.active {
  color:           var(--gold) !important;
  background:      transparent !important;
  padding-left:    1.25rem !important;
  text-decoration: none !important;
  outline:         none !important;
}
.tab-content .tab-pane p a::after {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════
   COMPOSANTS PAGES SPÉCIFIQUES
   ══════════════════════════════════════════════════════════ */
.section-title {
  font-family:    var(--font-display) !important;
  font-size:      1.125rem !important;
  font-weight:    600 !important;
  color:          var(--blue-deep) !important;
  margin-bottom:  1rem !important;
  padding-bottom: 0.625rem !important;
  border-bottom:  1px solid var(--border) !important;
  display:        flex !important;
  align-items:    center !important;
  gap:            0.625rem !important;
}
.section-title::before {
  content:       '' !important;
  display:       block !important;
  width:         3px !important;
  height:        18px !important;
  background:    var(--gold) !important;
  border-radius: 1px !important;
  flex-shrink:   0 !important;
}

/* Navigation années */
.year-grid { display:flex !important; flex-wrap:wrap !important; gap:0.5rem !important; margin-bottom:2rem !important; }
.year-btn {
  background:      #fff !important;
  border:          0.5px solid var(--border) !important;
  border-radius:   var(--radius-md) !important;
  padding:         0.625rem 1.125rem !important;
  text-decoration: none !important;
  box-shadow:      none !important;
  transition:      background var(--transition-organic), border-color var(--transition-organic), transform var(--transition-organic) !important;
}
.year-btn:hover { background:var(--blue-mid) !important; border-color:var(--blue-mid) !important; transform:translateY(-2px) !important; }
.year-num { font-family:var(--font-display) !important; font-size:1.125rem !important; font-weight:600 !important; color:var(--blue-mid) !important; display:block !important; transition:color var(--transition) !important; }
.year-btn:hover .year-num { color:#fff !important; }

/* Liste vidéos */
.video-list { list-style:none !important; padding:0 !important; margin:0 !important; }
.video-item { border-bottom:0.5px solid rgba(201,168,76,0.2) !important; padding:0.25rem 0 !important; }
.video-item:last-child { border-bottom:none !important; }
.video-link {
  display:         flex !important;
  align-items:     center !important;
  gap:             0.75rem !important;
  padding:         0.4375rem 0.375rem !important;
  border-radius:   var(--radius-md) !important;
  text-decoration: none !important;
  color:           var(--blue-mid) !important;
  box-shadow:      none !important;
  transition:      background var(--transition-organic) !important;
}
.video-link:hover { background:rgba(201,168,76,0.07) !important; }
.video-play {
  width:            30px !important;
  height:           30px !important;
  background-color: var(--blue-mid) !important;
  border-radius:    50% !important;
  display:          flex !important;
  align-items:      center !important;
  justify-content:  center !important;
  flex-shrink:      0 !important;
  box-shadow:       none !important;
  transition:       background var(--transition-organic), transform var(--transition-organic) !important;
}
.video-play svg { width:13px !important; height:13px !important; margin-left:2px !important; }
.video-link:hover .video-play { background-color:var(--gold) !important; transform:scale(1.08) !important; }
.video-title { font-size:16px !important; font-weight:700 !important; color:var(--blue-mid) !important; transition:color var(--transition) !important; }
.video-link:hover .video-title { color:var(--gold) !important; }
.video-en { font-size:0.7rem !important; color:var(--muted) !important; font-style:italic !important; }
.video-ext svg { width:13px !important; height:13px !important; stroke:var(--muted) !important; fill:none !important; stroke-width:2 !important; stroke-linecap:round !important; opacity:0.5 !important; transition:stroke var(--transition), opacity var(--transition) !important; }
.video-link:hover .video-ext svg { stroke:var(--gold) !important; opacity:1 !important; }

/* Glossaire */
.alpha-nav { display:flex !important; flex-wrap:wrap !important; gap:0.375rem !important; margin-bottom:2rem !important; padding:1rem !important; background:#fff !important; border:0.5px solid var(--border) !important; border-radius:var(--radius-md) !important; box-shadow:none !important; }
.alpha-btn {
  width:           36px !important;
  height:          36px !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  border-radius:   var(--radius-sm) !important;
  text-decoration: none !important;
  font-family:     var(--font-display) !important;
  font-size:       1.05rem !important;
  font-weight:     600 !important;
  color:           var(--blue-mid) !important;
  border:          0.5px solid var(--border) !important;
  box-shadow:      none !important;
  transition:      background var(--transition-organic), color var(--transition-organic), transform 0.15s !important;
}
.alpha-btn:hover { background:var(--blue-mid) !important; color:#fff !important; border-color:var(--blue-mid) !important; transform:translateY(-2px) !important; }
.alpha-btn.empty { color:var(--muted) !important; border-color:transparent !important; pointer-events:none !important; opacity:0.35 !important; }
.gloss-entry { margin-bottom:22px !important; padding-bottom:22px !important; border-bottom:0.5px solid rgba(201,168,76,0.2) !important; }
.gloss-entry:last-child { border-bottom:none !important; margin-bottom:0 !important; padding-bottom:0 !important; }
.gloss-term { font-size:16px !important; font-weight:700 !important; color:var(--blue-deep) !important; margin-bottom:12px !important; }
.gloss-def { display:flex !important; gap:12px !important; margin-bottom:10px !important; font-size:16px !important; line-height:1.85 !important; }
.gloss-def-label { flex-shrink:0 !important; min-width:150px !important; }
.gloss-def-label.connaissance { color:var(--blue-mid) !important; font-style:italic !important; font-weight:600 !important; }
.gloss-def-label.perception   { color:#1a6896 !important; font-style:italic !important; font-weight:600 !important; }
.gloss-simple { font-size:16px !important; line-height:1.85 !important; color:var(--text) !important; }

/* Navigation Q&R article */
.pg-nav-qr { display:flex !important; justify-content:space-between !important; margin-top:1.5rem !important; gap:0.625rem !important; }
.pg-nav-btn {
  font-size:       0.75rem !important;
  letter-spacing:  0.06em !important;
  text-transform:  uppercase !important;
  color:           var(--blue-mid) !important;
  border:          1.5px solid var(--blue-mid) !important;
  border-radius:   var(--radius-sm) !important;
  padding:         0.5rem 0.875rem !important;
  text-decoration: none !important;
  font-weight:     500 !important;
  display:         inline-block !important;
  box-shadow:      none !important;
  transition:      background var(--transition), color var(--transition) !important;
}
.pg-nav-btn:hover { background:var(--blue-mid) !important; color:#fff !important; }

/* Player audio */
.pg-player { background:var(--blue-deep) !important; border-radius:var(--radius-md) !important; padding:0.875rem 1.125rem !important; display:flex !important; align-items:center !important; gap:0.875rem !important; box-shadow:none !important; }
.pg-play { width:38px !important; height:38px !important; background-color:var(--gold) !important; border-radius:50% !important; display:flex !important; align-items:center !important; justify-content:center !important; flex-shrink:0 !important; cursor:pointer !important; box-shadow:none !important; }

/* ══════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════ */
#sp-footer, footer, .footer-wrapper {
  background-color: var(--blue-deep) !important;
  border-top:       2px solid var(--gold) !important;
  color:            var(--muted) !important;
  box-shadow:       none !important;
}
#sp-footer a, footer a { color:var(--gold-light) !important; transition:color var(--transition) !important; }
#sp-footer a:hover, footer a:hover { color:var(--gold) !important; }
.footer {
    background-color: transparent;
    background-image: none;
    margin-top: 1em;
}

/* ══════════════════════════════════════════════════════════
   BOUTONS BOOTSTRAP
   ══════════════════════════════════════════════════════════ */
.btn-primary { background-color:var(--blue-mid) !important; border-color:var(--blue-mid) !important; color:#fff !important; font-weight:700 !important; box-shadow:none !important; transition:background var(--transition), border-color var(--transition) !important; }
.btn-primary:hover { background-color:var(--blue-deep) !important; border-color:var(--blue-deep) !important; }
.btn-outline-primary { color:var(--blue-mid) !important; border-color:var(--blue-mid) !important; box-shadow:none !important; }
.btn-outline-primary:hover { background-color:var(--blue-mid) !important; color:#fff !important; }

/* ══════════════════════════════════════════════════════════
   DIVERS
   ══════════════════════════════════════════════════════════ */
.jquery-arrow, .fa-angle-down { display: none !important; }

/* ══════════════════════════════════════════════════════════
   PAGE BIBLIOGRAPHIE
   ══════════════════════════════════════════════════════════ */

/* ── Bloc intro ── */
.bib-intro {
  display:       flex;
  align-items:   flex-start;
  gap:           1.25rem;
  background:    #fff;
  border:        1px solid rgba(201,168,76,0.25);
  border-left:   4px solid var(--gold);
  border-radius: var(--radius-lg);
  padding:       1.25rem 1.5rem;
  margin-bottom: 2rem;
}
.bib-intro-icon {
  width:            64px;
  height:           64px;
  min-width:        64px;
  background-color: var(--blue-mid);
  border-radius:    var(--radius-md);
  display:          flex;
  align-items:      center;
  justify-content:  center;
}
.bib-intro-icon svg {
  width:           32px;
  height:          32px;
  stroke:          var(--gold);
  fill:            none;
  stroke-width:    1.6;
  stroke-linecap:  round;
  stroke-linejoin: round;
}
.bib-intro p {
  margin:      0;
  font-size:   0.95rem;
  color:       #3a4a5a;
  line-height: 1.6;
}

/* ── Titres de section ── */
.bib-nav-title,
.bib-section-title {
  font-family:  var(--font-display);
  font-size:    1.3rem;
  font-weight:  600;
  color:        var(--blue-deep);
  border-left:  3px solid var(--gold);
  padding-left: 0.75rem;
  margin:       0 0 1rem 0;
}
.bib-section-title { margin-top: 2.5rem; }

/* ── Navigation années ── */
.bib-nav-years {
  display:       flex;
  flex-wrap:     wrap;
  gap:           0.5rem;
  margin-bottom: 2.5rem;
}
.bib-nav-years a {
  display:         inline-block;
  padding:         0.4rem 1rem;
  border:          1px solid rgba(201,168,76,0.4);
  border-radius:   var(--radius-md);
  font-family:     var(--font-display);
  font-size:       1rem;
  font-weight:     600;
  color:           var(--blue-mid);
  text-decoration: none;
  letter-spacing:  0.05em;
  transition:      background var(--transition-organic), color var(--transition-organic), border-color var(--transition-organic);
}
.bib-nav-years a:hover {
  background:   var(--blue-mid) !important;
  color:        var(--gold-light) !important;
  border-color: var(--blue-mid) !important;
}

/* ── Carte livre ── */
.bib-book {
    background: #d8e5f4;
    border-radius: var(--radius-lg);
    border: 1px solid #ffffff;
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 2px 12px rgba(15, 45, 94, 0.08);
}
.bib-book-anchor {
  display:     flex;
  align-items: flex-start;
  gap:         1.25rem;
}
.bib-year-badge {
  display:        inline-flex;
  align-items:    center;
  background:     var(--blue-mid);
  color:          var(--gold-light);
  font-size:      0.75rem;
  font-weight:    700;
  letter-spacing: 0.08em;
  padding:        0.25rem 0.6rem;
  border-radius:  4px;
  margin-bottom:  0.75rem;
  width:          fit-content;
}
.bib-cover {
  width:         120px;
  min-width:     120px;
  height:        178px;
  border-radius: var(--radius-md);
  object-fit:    cover;
  box-shadow:    0 4px 16px rgba(15,45,94,0.15);
}
.bib-cover-placeholder {
  width:            120px;
  min-width:        120px;
  height:           178px;
  border-radius:    var(--radius-md);
  background-color: var(--blue-mid);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  box-shadow:       0 4px 16px rgba(15,45,94,0.15);
}
.bib-cover-placeholder svg {
  width:           44px;
  height:          44px;
  stroke:          var(--gold);
  fill:            none;
  stroke-width:    1.4;
  stroke-linecap:  round;
  stroke-linejoin: round;
}
.bib-book-body   { flex: 1; min-width: 0; }
.bib-book-title  {
  font-family: var(--font-display);
  font-size:   1.25rem;
  font-weight: 600;
  color:       var(--blue-deep);
  margin:      0 0 0.2rem 0;
  line-height: 1.3;
}
.bib-book-author {
  font-size:      0.7rem;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  0.75rem;
}
.bib-book-desc {
  font-size:   0.9rem;
  color:       #3a4a5a;
  line-height: 1.65;
  margin:      0 0 1rem 0;
}

/* ── Métadonnées ── */
.bib-book-meta {
  border-top:     1px solid rgba(201,168,76,0.15);
  padding-top:    0.75rem;
  display:        flex;
  flex-direction: column;
  gap:            0.3rem;
}
.bib-book-meta-row {
  display:   flex;
  gap:       0.5rem;
  font-size: 0.82rem;
}
.bib-meta-label {
  color:       var(--muted);
  min-width:   120px;
  flex-shrink: 0;
}
.bib-meta-value a {
  color:           var(--blue-mid);
  text-decoration: none;
  font-weight:     600;
  transition:      color var(--transition-organic);
}
.bib-meta-value a:hover        { color: var(--gold); }
.bib-amazon-links              { display: flex; gap: 0.4rem; }
.bib-amazon-links a {
  background:    var(--blue-deep);
  color:         var(--gold-light) !important;
  padding:       0.15rem 0.5rem;
  border-radius: 4px;
  font-size:     0.75rem;
  font-weight:   700;
  transition:    background var(--transition-organic), color var(--transition-organic);
}
.bib-amazon-links a:hover { background: var(--gold); color: var(--blue-deep) !important; }

/* ── Responsive ── */
@media (max-width: 600px) {
  .bib-book-anchor              { flex-direction: column; }
  .bib-cover,
  .bib-cover-placeholder        { width: 100%; min-width: auto; height: 200px; }
  .bib-cover                    { height: auto; }
  .bib-meta-label               { min-width: 90px; }
}

/* ══════════════════════════════════════════════════════════
   PAGE ENTRETIENS
   ══════════════════════════════════════════════════════════ */

/* ── Carte entretien ── */
.ent-book {
    background: #d8e5f4;
    border-radius: var(--radius-lg);
    border: 1px solid #ffffff;
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 2px 12px rgba(15, 45, 94, 0.08);
}
.ent-year-header {
  display:     flex;
  align-items: center;
  gap:         0.75rem;
  margin-bottom: 1rem;
}
.ent-year-badge {
  display:        inline-flex;
  align-items:    center;
  background:     var(--blue-mid);
  color:          var(--gold-light);
  font-size:      0.75rem;
  font-weight:    700;
  letter-spacing: 0.08em;
  padding:        0.25rem 0.6rem;
  border-radius:  4px;
  width:          fit-content;
  flex-shrink:    0;
}
.ent-year-heading {
  font-family:  var(--font-display);
  font-size:    1.2rem;
  font-weight:  600;
  color:        var(--blue-deep);
  margin:       0;
  line-height:  1.3;
}
.ent-meta {
  font-size:      0.7rem;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  0.75rem;
}
.ent-meta span { color: var(--muted); margin: 0 0.4rem; }
.ent-desc {
  font-size:   0.9rem;
  color:       #3a4a5a;
  line-height: 1.65;
  margin:      0 0 1rem 0;
}

/* Citation */
.ent-quote {
  border-left:  3px solid var(--gold);
  margin:       0.75rem 0 1.25rem 0;
  padding:      0.5rem 1rem;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.ent-quote p {
  margin:     0;
  font-style: italic;
  color:      #4a5a6a;
  font-size:  0.9rem;
  line-height: 1.6;
}

/* Pied de carte */
.ent-footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  border-top:      1px solid rgba(201,168,76,0.15);
  padding-top:     0.75rem;
  margin-top:      0.5rem;
}
.ent-permission {
  font-size:  0.75rem;
  color:      var(--muted);
  font-style: italic;
}
.ent-read-link {
  display:         flex;
  align-items:     center;
  gap:             0.3rem;
  font-size:       0.85rem;
  font-weight:     700;
  color:           var(--blue-mid);
  text-decoration: none;
  letter-spacing:  0.03em;
  transition:      color var(--transition-organic);
}
.ent-read-link:hover   { color: var(--gold); }

/* ══════════════════════════════════════════════════════════
   PAGE GLOSSAIRE
   ══════════════════════════════════════════════════════════ */

/* ── Navigation alphabétique ── */
.glo-alpha-nav {
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.glo-alpha-nav a,
.glo-alpha-nav span {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           38px;
  height:          38px;
  border:          1px solid rgba(201,168,76,0.35);
  border-radius:   var(--radius-md);
  font-family:     var(--font-display);
  font-size:       1rem;
  font-weight:     600;
  letter-spacing:  0.05em;
  text-decoration: none;
  transition:      background var(--transition-organic), color var(--transition-organic), border-color var(--transition-organic);
}
.glo-alpha-nav a {
  color: var(--blue-mid);
}
.glo-alpha-nav a:hover {
  background:   var(--blue-light);
  color:        var(--gold-light) !important;
  border-color: var(--blue-light);
}
.glo-alpha-nav span {
  color:        rgba(15,45,94,0.2);
  border-color: rgba(201,168,76,0.1);
  cursor:       default;
}

/* ── Section lettre ── */
.glo-letter-section { margin-bottom: 2.5rem; }

.glo-letter-header {
  display:     flex;
  align-items: center;
  gap:         1rem;
  margin-bottom: 1.5rem;
}
.glo-letter-char {
  font-family:  var(--font-display);
  font-size:    3.5rem;
  font-weight:  400;
  color:        var(--blue-deep);
  line-height:  1;
  flex-shrink:  0;
}
.glo-letter-line {
  flex:             1;
  height:           1px;
  background:       linear-gradient(to right, rgba(201,168,76,0.5), transparent);
}
.glo-letter-count {
  font-size:      0.65rem;
  font-weight:    700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--muted);
  flex-shrink:    0;
}

/* ── Terme ── */
.glo-term {
  margin-bottom: 1.75rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid rgba(201,168,76,0.12);
}
.glo-term:last-child { border-bottom: none; }

.glo-term-name {
  font-family:  var(--font-body, 'Lato', sans-serif);
  font-size:    1rem;
  font-weight:  700;
  color:        var(--blue-deep);
  margin-bottom: 0.5rem;
}
.glo-term-body {
  font-size:   0.9rem;
  color:       #3a4a5a;
  line-height: 1.7;
}

/* Sous-entrée (connaissance / perception) */
.glo-sub {
  display:    grid;
  grid-template-columns: 180px 1fr;
  gap:        0.25rem 1rem;
  margin:     0.4rem 0;
}
.glo-sub-label {
  font-style:  italic;
  color:       var(--blue-mid);
  font-size:   0.88rem;
  padding-top: 0.05rem;
}
.glo-sub-text {
  font-size:   0.88rem;
  color:       #3a4a5a;
  line-height: 1.65;
}

/* Note / Voir */
.glo-note {
  font-size:   0.82rem;
  color:       var(--muted);
  margin-top:  0.4rem;
  font-style:  normal;
}
.glo-note strong { color: var(--blue-deep); }
.glo-note em     { color: var(--blue-mid); font-style: italic; }

/* Indentation niveau II */
.glo-indent {
  padding-left: 1.25rem;
  border-left:  2px solid rgba(201,168,76,0.2);
  margin:       0.35rem 0;
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .glo-sub { grid-template-columns: 1fr; gap: 0.15rem; }
  .glo-sub-label { margin-bottom: 0.1rem; }
  .glo-letter-char { font-size: 2.5rem; }
}

/* ══════════════════════════════════════════════════════════
   PAGE MÉTAPHYSIQUE
   ══════════════════════════════════════════════════════════ */

/* ── En-tête de page ── */
.meta-header {
  margin-bottom: 2rem;
}
.meta-breadcrumb {
  font-size:      0.65rem;
  font-weight:    700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  0.5rem;
}
.meta-page-title {
  font-family:  var(--font-display);
  font-size:    2.2rem;
  font-weight:  400;
  color:        var(--blue-deep);
  margin:       0 0 1rem 0;
  line-height:  1.2;
}
.meta-divider {
  height:     1px;
  background: linear-gradient(to right, rgba(201,168,76,0.4), transparent);
  margin-bottom: 1.75rem;
}

/* ── Sections ── */
.meta-section { margin-bottom: 2.5rem; }

.meta-section-title {
  font-family:    var(--font-body, 'Lato', sans-serif);
  font-size:      1rem;
  font-weight:    700;
  color:          var(--blue-deep);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin:         0 0 1rem 0;
  padding-bottom: 0.4rem;
  border-bottom:  1px solid rgba(201,168,76,0.2);
}

/* ── Corps de texte ── */
.meta-body p {
  font-size:     0.95rem;
  color:         #2a3a4a;
  line-height:   1.8;
  margin-bottom: 1.1rem;
}
.meta-body p:last-child { margin-bottom: 0; }

/* ── Bloc références ── */
.meta-refs {
  display:       flex;
  flex-wrap:     wrap;
  gap:           0.75rem 1.5rem;
  border-left:   3px solid var(--gold);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding:       0.75rem 1.25rem;
  margin:        1rem 0 1.25rem 0;
}
.meta-refs span {
  font-family:    var(--font-body, 'Lato', sans-serif);
  font-size:      0.82rem;
  font-weight:    700;
  color:          var(--blue-mid);
  letter-spacing: 0.04em;
}

/* ── Diagramme ── */
.meta-diagram {
  text-align: center;
  margin:     1.5rem 0;
}
.meta-diagram img {
  max-width:    100%;
  border-radius: var(--radius-lg);
  box-shadow:   0 4px 20px rgba(15,45,94,0.1);
}

/* ── Lien PDF ── */
.meta-pdf {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    padding: 1rem 1.25rem;
    border: 1px solid #ffffff;
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: box-shadow var(--transition-organic), transform var(--transition-organic);
    width: fit-content;
    background: #d8e5f4;
}
.meta-pdf:hover {
  box-shadow: 0 4px 16px rgba(15,45,94,0.1);
  transform:  translateY(-2px);
}
.meta-pdf img  { width: 40px; height: auto; }
.meta-pdf span {
  font-size:   0.85rem;
  font-weight: 600;
  color:       var(--blue-mid);
}
.meta-pdf:hover span { 
  color: #ffffff; 
}

/* ══════════════════════════════════════════════════════════
   PAGE ARTICLE Q&R
   ══════════════════════════════════════════════════════════ */
/* ── Badge TNO — Traduction non officielle ── */
.qr-tno-banner {
  background:      #c9a84c;
  padding:         7px 18px;
  display:         flex;
  align-items:     center;
  gap:             8px;
  border-radius:   8px 8px 0 0;
  margin-bottom:   0;
}
.qr-tno-banner i {
  font-size: 15px;
  color:     #0f2d5e;
}
.qr-tno-banner span {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: #ffffff;
    text-transform: uppercase;
    margin-left: 4rem;
}
.qr-tno-banner + .qr-article .qr-card:first-child {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
}
body.dark-mode .qr-tno-banner {
  background:  #7a6020;
  border-bottom: 1px solid #c9a84c;
}
body.dark-mode .qr-tno-banner i,
body.dark-mode .qr-tno-banner span {
  color: #f0d080;
}

/* ── Cartes ── */
.qr-card {
  background:    #e4f1ff !important;
  border:        1px solid white !important;
  border-radius: var(--radius-lg) !important;
  padding:       1.25rem 1.5rem !important;
  margin-bottom: 1rem !important;
  box-shadow:    0 2px 10px rgba(15,45,94,0.06) !important;
  display:       flex !important;
  gap:           1.25rem !important;
  align-items:   flex-start !important;
}

/* ── Icônes ── */
.qr-icon {
  width:           46px !important;
  min-width:       46px !important;
  height:          46px !important;
  border-radius:   50% !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  flex-shrink:     0 !important;
  font-family:     var(--font-display) !important;
  font-size:       1.4rem !important;
  font-weight:     600 !important;
  line-height:     1 !important;
  align-self:      flex-start !important;
  margin-top:      0.15rem !important;
}
.qr-icon--q { 
  background: var(--template-bg-dark-60) !important;
  color: var(--gold-light) !important;
}
.qr-icon--r { 
  background: var(--template-bg-dark-60) !important;
  color: var(--gold-light) !important;
}

/* ── Corps ── */
.qr-body { flex: 1 !important; min-width: 0 !important; }
.qr-body p {
  font-family:   var(--font-body) !important;
  font-size:     1rem !important;
  line-height:   1.85 !important;
  color:         #2a3a4a !important;
  margin-bottom: 0.9rem !important;
}
.qr-body p:last-child { margin-bottom: 0 !important; }

/* ── Titre + lecteur ── */
.qr-heading-wrap {
  display:         flex !important;
  align-items:     center !important;
  justify-content: flex-start !important;
  gap:             1.5rem !important;
  flex-wrap:       wrap !important;
  margin-bottom:   0.75rem !important;
}
.qr-heading {
  font-family:    var(--font-display) !important;
  font-size:      1.25rem !important;
  font-weight:    700 !important;
  color:          var(--blue-deep) !important;
  margin:         0 !important;
  line-height:    1.2 !important;
  flex:           none !important;
}
.qr-heading-num {
  color:        var(--blue-mid) !important;
  font-family:  var(--font-body) !important;
  font-size:    1.1rem !important;
  font-weight:  700 !important;
  margin-right: 0.5rem !important;
}

/* ── Lecteur AllVideos ── */
.qr-heading-wrap .avPlayerWrapper {
  width:       300px !important;
  flex-shrink: 0 !important;
}
.avPlayerWrapper .avPlayerContainer .avPlayerBlock audio {
  border-radius:    8px !important;
  box-shadow: 0 1px 4px rgba(15, 45, 94, 0.08) !important;
  background-color: #efefed !important;
}
.qr-heading-wrap .avPlayerWrapper {
  flex-shrink: 0 !important;
  margin-top:  2px !important;
}

/* ── Citation ── */
.qr-citation cite {
  display:        block !important;
  font-style:     normal !important;
  font-family:    var(--font-body) !important;
  font-size:      0.7rem !important;
  font-weight:    700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color:          var(--gold) !important;
  margin-top:     0.4rem !important;
}

/* ── Dark mode ── */
body.dark-mode .qr-card           { background: #152338 !important; border-color: rgba(201,168,76,0.12) !important; }
body.dark-mode .qr-card--question { background: rgba(26,68,128,0.15) !important; }
body.dark-mode .qr-heading        { color: #e8d5a3 !important; }
body.dark-mode .qr-body p         { color: #c8d4e8 !important; }
body.dark-mode .qr-citation       { color: #b8c8e0 !important; }

/* ── Responsive ── */
@media (max-width: 600px) {
  .qr-card         { gap: 0.75rem !important; padding: 1rem !important; }
  .qr-icon         { width: 38px !important; min-width: 38px !important; height: 38px !important; font-size: 1.1rem !important; }
  .qr-heading-wrap { flex-direction: column !important; align-items: flex-start !important; }
  .qr-heading-wrap .avPlayerWrapper { width: 100% !important; }
}

/* ══════════════════════════════════════════════════════════
   PAGE Q&R — en-tête
   ══════════════════════════════════════════════════════════ */
.qr-header {
  display:         flex;
  align-items:     flex-end;
  justify-content: space-between;
  gap:             1.5rem;
  margin-bottom:   1rem;
  flex-wrap:       wrap;
}
.qr-header-left { flex: 1; min-width: 0; }
.qr-header-left .meta-page-title { margin-bottom: 0; }

.qr-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--template-sidebar-bg);
    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.65rem 1.25rem;
    border-radius: var(--radius-md);
    white-space: nowrap;
    flex-shrink: 0;
    transition: background var(--transition-organic), color var(--transition-organic);
}
.qr-search-btn svg {
  width:  15px;
  height: 15px;
  stroke: var(--gold);
  flex-shrink: 0;
}
.qr-search-btn:hover {
  background: var(--blue-mid);
  color:      var(--gold);
}

@media (max-width: 600px) {
  .qr-header        { flex-direction: column; align-items: flex-start; }
  .qr-search-btn    { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════
   PAGE Q&R — Sous-catégories (0001-0200 / 0201-0400)
   ══════════════════════════════════════════════════════════ */
.com-content-category-blog__children {
  margin:  0 !important;
  padding: 0 !important;
}
.com-content-category-blog__child {
  border-top: 0.5px solid rgba(201,168,76,0.2) !important;
  padding:    0 !important;
  margin:     0 !important;
}
.com-content-category-blog__child:last-child {
  border-bottom: 0.5px solid rgba(201,168,76,0.2) !important;
}
.com-content-category-blog__child .page-header {
  margin:  0 !important;
  padding: 0 !important;
  border:  none !important;
}
.com-content-category-blog__child .item-title a {
  display:         block !important;
  padding:         0.9rem 0.5rem !important;
  font-family:     var(--font-body) !important;
  font-size:       0.95rem !important;
  font-weight:     600 !important;
  text-decoration: none !important;
  transition:      color var(--transition-organic), padding-left var(--transition-organic) !important;
}
.com-content-category-blog__child .item-title a:hover {
  color:        var(--gold) !important;
  padding-left: 1rem !important;
}


/* ══════════════════════════════════════════════════════════
   PAGE MOTS-CLÉS — Nuage de tags
   ══════════════════════════════════════════════════════════ */
ul.com-tags__category {
  display:        flex !important;
  flex-wrap:      wrap !important;
  gap:            0.65rem !important;
  padding:        0 !important;
  margin:         0 !important;
  border:         none !important;
  list-style:     none !important;
  flex-direction: row !important;
}

ul.com-tags__category .list-group-item {
    width: fit-content !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    border: 1px solid #ffffff !important;
    border-radius: 20px !important;
    padding: 0.5rem 1.25rem !important;
    background: #ebf0f7 !important;
    margin: 0.4rem;
    transition: background var(--transition-organic), border-color var(--transition-organic) !important;
}
ul.com-tags__category .list-group-item:hover {
  background:   var(--blue-mid) !important;
  border-color: var(--blue-mid) !important;
}
ul.com-tags__category .list-group-item h3 {
  margin:      0 !important;
  font-family: var(--font-body) !important;
  font-size:   0.85rem !important;
  font-weight: 400 !important;
}
ul.com-tags__category .list-group-item a {
font-size: 0.95rem !important;
  color:           var(--blue-mid) !important;
  text-decoration: none !important;
  white-space:     nowrap !important;
}
ul.com-tags__category .list-group-item:hover a {
  color: var(--gold-light) !important;
}

/* ── Tags Joomla — style pill charte ── */
.btn.btn-sm.btn-info {
  border:          1px solid #ffffff !important;
  border-radius:   20px !important;
  font-family:     var(--font-body) !important;
  font-size:       0.65rem !important;
  font-weight:     500 !important;
  letter-spacing:  0.1em !important;
  text-transform:  uppercase !important;
  padding:         0.2rem 0.75rem !important;
  text-decoration: none !important;
  transition:      background var(--transition-organic), color var(--transition-organic) !important;
  background:      #dde9fa !important;
}
.btn.btn-sm.btn-info:hover {
  background: var(--blue-mid) !important;
  color:      var(--gold-light) !important;
}
body.dark-mode .btn.btn-sm.btn-info {
  background:   #1a3a6e !important;
  color:        #a8c4e8 !important;
  border-color: #2a5a9e !important;
}
body.dark-mode .btn.btn-sm.btn-info:hover {
  background:   var(--blue-mid) !important;
  color:        var(--gold-light) !important;
  border-color: var(--gold-light) !important;
}

/* ══════════════════════════════════════════════════════════
   VUE TAG — Liste des articles par tag
   ══════════════════════════════════════════════════════════ */
.com-tags-tag-list__category {
  border:          none !important;
  border-collapse: collapse !important;
  width:           100% !important;
}
.com-tags-tag-list__category thead th {
  background:     var(--blue-deep) !important;
  color:          var(--gold-light) !important;
  font-family:    var(--font-body) !important;
  font-size:      0.7rem !important;
  font-weight:    700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding:        0.75rem 1.25rem !important;
  border:         none !important;
}
.com-tags-tag-list__category thead th a {
  color:           var(--gold-light) !important;
  text-decoration: none !important;
}
.com-tags-tag-list__category thead th a:hover {
  color: var(--gold) !important;
}
.com-tags-tag-list__category tbody tr {
  border-bottom: 0.5px solid rgba(201,168,76,0.15) !important;
  background:    rgba(15,45,94,0.04) !important;
  transition:    background var(--transition-organic) !important;
}
.com-tags-tag-list__category tbody tr:nth-child(even) {
  background: rgba(15,45,94,0.09) !important;
}
.com-tags-tag-list__category tbody tr:hover {
  background: rgba(26,68,128,0.16) !important;
}
.com-tags-tag-list__category tbody td,
.com-tags-tag-list__category tbody th {
  padding:     0.7rem 1.25rem !important;
  border:      none !important;
  font-size:   0.9rem !important;
  color:       var(--blue-deep) !important;
  font-weight: 400 !important;
}
.com-tags-tag-list__category tbody th a {
  color:           var(--blue-mid) !important;
  text-decoration: none !important;
  font-weight:     600 !important;
  transition:      color var(--transition-organic) !important;
}
.com-tags-tag-list__category tbody th a:hover {
  color: var(--gold) !important;
}

/* ── Index Q&R — sous-entrées ── */
.idx-sub {
  font-size:   0.85rem !important;
  color:       #3a4a5a !important;
  line-height: 1.6 !important;
  margin:      0.2rem 0 0.2rem 1rem !important;
  padding-left: 0.75rem !important;
  border-left: 1px solid rgba(201,168,76,0.2) !important;
}
.idx-sub a {
  color:           var(--blue-mid) !important;
  font-weight:     600 !important;
  text-decoration: none !important;
}
.idx-sub a:hover  { color: var(--gold) !important; }



/* ══════════════════════════════════════════════════════════
   PAGE ASSISTANT — Interface chat pleine page
   Module mod_ucem_chat_page
   ══════════════════════════════════════════════════════════ */

.ucempage {
    display: flex !important;
    flex-direction: column !important;
    min-height: calc(100vh - 200px) !important;
    max-width: 90% !important;
    margin: 0 auto !important;
    padding: 0 16px 32px !important;
    background: #cddaf0;
    border-radius: 8px;
    border: 1px solid #ffffff;
    box-shadow: 0 2px 10px rgba(15, 45, 94, 0.08) !important;
}

/* ── Intro contemplatif ── */
.ucempage__intro {
  text-align: center !important;
  padding:    48px 24px 32px !important;
  transition: opacity 0.3s ease, max-height 0.3s ease !important;
}
.ucempage__intro.hidden {
  opacity:        0 !important;
  pointer-events: none !important;
  max-height:     0 !important;
  overflow:       hidden !important;
  padding:        0 !important;
}
.ucempage__logo {
  font-family:   var(--font-display) !important;
  font-size:     2rem !important;
  color:         var(--gold) !important;
  margin-bottom: 16px !important;
  display:       block !important;
}
.ucempage__title {
  font-family:   var(--font-display) !important;
  font-size:     2rem !important;
  font-weight:   500 !important;
  color:         var(--blue-deep) !important;
  margin-bottom: 6px !important;
  letter-spacing: 0.02em !important;
}
.ucempage__subtitle {
  font-family:    var(--font-body) !important;
  font-size:      0.8rem !important;
  font-weight:    300 !important;
  color:          var(--muted) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-bottom:  32px !important;
}
.ucempage__quote {
  font-family:   var(--font-display) !important;
  font-size:     1.25rem !important;
  font-style:    italic !important;
  font-weight:   400 !important;
  color:         var(--blue-deep) !important;
  line-height:   1.7 !important;
  max-width:     520px !important;
  margin:        0 auto 12px !important;
  padding:       0 24px !important;
  border:        none !important;
  position:      relative !important;
}
.ucempage__quote::before {
  content:     "\201C" !important;
  font-size:   3rem !important;
  color:       var(--gold) !important;
  opacity:     0.4 !important;
  position:    absolute !important;
  top:         -12px !important;
  left:        0 !important;
  line-height: 1 !important;
  font-family: var(--font-display) !important;
}
.ucempage__author {
  font-family:    var(--font-body) !important;
  font-size:      0.78rem !important;
  color:          var(--muted) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin-bottom:  32px !important;
}
.ucempage__author::before { content: "— " !important; }
.ucempage__intro::after {
  content:    "" !important;
  display:    block !important;
  width:      60px !important;
  height:     1px !important;
  background: linear-gradient(90deg, transparent, var(--gold), transparent) !important;
  margin:     0 auto 32px !important;
}

/* ── Suggestions ── */
.ucempage__suggestions {
  display:         flex !important;
  flex-wrap:       wrap !important;
  gap:             10px !important;
  justify-content: center !important;
  margin-top:      8px !important;
}
.ucempage__pill {
    font-family: var(--font-body) !important;
    font-size: 0.82rem !important;
    color: var(--blue-mid) !important;
    background: #fff !important;
    border: 1px solid #ffffff !important;
    border-radius: 24px !important;
    padding: 8px 18px !important;
    cursor: pointer !important;
    transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s !important;
    line-height: 1.4 !important;
}
.ucempage__pill:hover {
  background:   var(--blue-deep) !important;
  color:        #fff !important;
  border-color: var(--blue-deep) !important;
  box-shadow:   0 2px 12px rgba(15,45,94,0.15) !important;
}

/* ── Messages ── */
.ucempage__messages {
  flex:           1 !important;
  display:        flex !important;
  flex-direction: column !important;
  gap:            20px !important;
  padding:        8px 0 24px !important;
}
.ucempage__msg {
  display:        flex !important;
  flex-direction: column !important;
  max-width:      85% !important;
  animation:      ucemp-msg-in 0.3s ease-out both !important;
}
@keyframes ucemp-msg-in {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}
.ucempage__msg--user { align-self:flex-end !important; align-items:flex-end !important; }
.ucempage__msg--bot  { align-self:flex-start !important; align-items:flex-start !important; }

.ucempage__bubble {
  padding:      12px 18px !important;
  border-radius: var(--radius-lg) !important;
  font-size:    0.925rem !important;
  line-height:  1.75 !important;
  word-break:   break-word !important;
}
.ucempage__msg--user .ucempage__bubble {
  background:           var(--blue-deep) !important;
  color:                #fff !important;
  border-radius: var(--radius-lg) !important;
  box-shadow:    0 2px 10px rgba(15,45,94,0.22) !important;
}
.ucempage__msg--bot .ucempage__bubble {
  background:                #eef1f8 !important;
  color:                     var(--text) !important;
  border:                    1px solid #ffffff !important;
  border-bottom-left-radius: 2px !important;
  box-shadow:                none !important;
}
.ucempage__msg--bot .ucempage__bubble em {
  font-family: var(--font-body) !important;
  font-style:  italic !important;
  font-size:   inherit !important;
  color:       var(--blue-mid) !important;
}
.ucempage__msg--bot .ucempage__bubble strong {  
  font-weight: 600 !important;
  color:       var(--blue-deep) !important;
}
.ucempage__bubble p              { margin:0 0 0.6em !important; }
.ucempage__bubble p:last-child   { margin-bottom:0 !important; }

.ucempage__avatar {
  width:           28px !important;
  height:          28px !important;
  border-radius:   50% !important;
  background:      var(--blue-deep) !important;
  border:          1.5px solid var(--gold) !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  font-family:     var(--font-display) !important;
  font-size:       0.75rem !important;
  font-style:      italic !important;
  color:           var(--gold) !important;
  margin-bottom:   5px !important;
  flex-shrink:     0 !important;
}

/* Typing */
.ucempage__typing {
  display:              flex !important;
  align-items:          center !important;
  gap:                  5px !important;
  padding:              12px 16px !important;
  background:           #fff !important;
  border:               1px solid var(--border) !important;
  border-radius:        var(--radius-lg) !important;
  border-bottom-left-radius: 2px !important;
  width:                fit-content !important;
  box-shadow:           0 1px 4px rgba(15,45,94,0.06) !important;
}
.ucempage__typing span {
  display:       block !important;
  width:         6px !important;
  height:        6px !important;
  background:    var(--blue-mid) !important;
  border-radius: 50% !important;
  opacity:       0.4 !important;
  animation:     ucemp-dot 1.2s ease-in-out infinite !important;
}
.ucempage__typing span:nth-child(2) { animation-delay:0.2s !important; }
.ucempage__typing span:nth-child(3) { animation-delay:0.4s !important; }
@keyframes ucemp-dot {
  0%,60%,100% { transform:translateY(0); opacity:0.4; }
  30%          { transform:translateY(-5px); opacity:1; }
}

.ucempage__limit {
  text-align:    center !important;
  font-size:     0.85rem !important;
  color:         var(--muted) !important;
  padding:       16px !important;
  background:    var(--cream-dark) !important;
  border-radius: var(--radius-md) !important;
  border:        1px solid var(--border) !important;
}

/* ── Zone de saisie ── */
.ucempage__input-zone {
    position: sticky !important;
    bottom: 0 !important;
    padding: 16px 0 8px !important;
}
.ucempage__input-row {
  display:       flex !important;
  gap:           12px !important;
  align-items:   center !important;
  background:    white !important;
  border:        1px solid #dce6f4 !important;
  border-radius: 16px !important;
  padding:       14px 14px 14px 20px !important;
  box-shadow:    0 4px 20px rgba(15,45,94,0.12), 0 1px 4px rgba(15,45,94,0.06) !important;
  transition:    border-color 0.2s, box-shadow 0.2s !important;
}
.ucempage__input-row:focus-within {
  border-color: var(--blue-mid) !important;
  box-shadow:   0 4px 24px rgba(15,45,94,0.12) !important;
}
.ucempage__textarea {
  flex:        1 !important;
  border:      none !important;
  background:  transparent !important;
  resize:      none !important;
  font-family: var(--font-body) !important;
  font-size:   0.925rem !important;
  line-height: 1.5 !important;
  color:       var(--text) !important;
  outline:     none !important;
  max-height:  140px !important;
  min-height:  26px !important;
  overflow-y:  auto !important;
}
.ucempage__textarea::placeholder { color:rgba(107,125,143,0.5) !important; }
.ucempage__send {
  width:           38px !important;
  height:          38px !important;
  border-radius:   var(--radius-md) !important;
  background:      var(--blue-deep) !important;
  border:          none !important;
  cursor:          pointer !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  color:           #fff !important;
  flex-shrink:     0 !important;
  transition:      background 0.2s, transform 0.15s !important;
  padding:         0 !important;
}
.ucempage__send svg      { width:15px !important; height:15px !important; }
.ucempage__send:hover    { background:var(--blue-mid) !important; }
.ucempage__send:active   { transform:scale(0.94) !important; }
.ucempage__send:disabled { background:rgba(15,45,94,0.25) !important; cursor:not-allowed !important; transform:none !important; }

.ucempage__footer-note {
  margin-top:     8px !important;
  text-align:     center !important;
  font-size:      0.68rem !important;
  color:          rgba(107,125,143,0.45) !important;
  letter-spacing: 0.03em !important;
}

/* ── Markdown rendu dans les bulles bot ── */
.ucempage__bubble p,
.ucempage__bubble li {
  font-family: var(--font-body) !important;
  font-size:   0.925rem !important;
  line-height: 1.85 !important;
  color:       var(--text) !important;
}
.ucempage__h2 {
  font-family:   var(--font-body) !important;
  font-size:     0.95rem !important;
  font-weight:   700 !important;
  color:         var(--blue-deep) !important;
  margin:        1.2rem 0 0.5rem !important;
  line-height:   1.4 !important;
  letter-spacing: 0.02em !important;
}
.ucempage__h3 {
  font-family:    var(--font-body) !important;
  font-size:      0.85rem !important;
  font-weight:    700 !important;
  color:          var(--blue-mid) !important;
  margin:         1rem 0 0.4rem !important;
}
.ucempage__blockquote {
  border-left:   3px solid #0f2d5e !important;
  margin:        1rem 0 !important;
  padding:       0.75rem 1.25rem !important;
  background:    #e8ecf5 !important;
  border-radius: 4px !important;
  font-family:   var(--font-display) !important;
  font-style:    italic !important;
  font-size:     1rem !important;
  color:         var(--blue-deep) !important;
  line-height:   1.8 !important;
}
.ucempage__list {
  list-style:  none !important;
  padding:     0 !important;
  margin:      0.5rem 0 !important;
}
.ucempage__list li {
  font-family: var(--font-body) !important;
  font-size:   0.925rem !important;
  padding:     0.3rem 0 0.3rem 1.4rem !important;
  position:    relative !important;
  line-height: 1.75 !important;
  color:       var(--text) !important;
}
.ucempage__list li::before {
  content:   "›" !important;
  position:  absolute !important;
  left:      0 !important;
  color:     var(--gold) !important;
  font-size: 1.1rem !important;
}

/* Dark mode markdown */
body.dark-mode .ucempage__h2              { color: #e8d5a3 !important; }
body.dark-mode .ucempage__h3              { color: #c9a84c !important; }
body.dark-mode .ucempage__blockquote      { color: #c8c0b0 !important; background: rgba(201,168,76,0.05) !important; }
body.dark-mode .ucempage__list li         { color: #d8d0c4 !important; }
body.dark-mode .ucempage__bubble p        { color: #d8d0c4 !important; }

/* ── Dark mode — ucempage ── */
body.dark-mode .ucempage {
  background:   #0d1b2e !important;
  border-color: rgba(201,168,76,0.2) !important;
}

/* Intro */
body.dark-mode .ucempage__title   { color: #e8d5a3 !important; }
body.dark-mode .ucempage__subtitle { color: #6b7d8f !important; }
body.dark-mode .ucempage__quote   { color: #c8d4e8 !important; }
body.dark-mode .ucempage__author  { color: #6b7d8f !important; }

/* Suggestions */
body.dark-mode .ucempage__pill {
  background:   #1a2e4a !important;
  border-color: rgba(201,168,76,0.25) !important;
  color:        #a8c4e8 !important;
}
body.dark-mode .ucempage__pill:hover {
  background:   #0f2d5e !important;
  color:        #e8d5a3 !important;
  border-color: rgba(201,168,76,0.5) !important;
}

/* Bulles bot */
body.dark-mode .ucempage__msg--bot .ucempage__bubble {
  background:   #152338 !important;
  border-color: rgba(201,168,76,0.15) !important;
  color:        #c8d4e8 !important;
}
body.dark-mode .ucempage__msg--bot .ucempage__bubble em     { color: #a8c4e8 !important; }
body.dark-mode .ucempage__msg--bot .ucempage__bubble strong { color: #e8d5a3 !important; }
body.dark-mode .ucempage__bubble p,
body.dark-mode .ucempage__bubble li                         { color: #c8d4e8 !important; }

/* Typing */
body.dark-mode .ucempage__typing {
  background:   #152338 !important;
  border-color: rgba(201,168,76,0.15) !important;
}

/* Limite */
body.dark-mode .ucempage__limit {
  background:   #152338 !important;
  border-color: rgba(201,168,76,0.15) !important;
  color:        #6b7d8f !important;
}

/* Zone de saisie */
body.dark-mode .ucempage__input-row {
  background:   #0f1e32 !important;
  border-color: rgba(201,168,76,0.25) !important;
  box-shadow:   0 4px 20px rgba(0,0,0,0.3) !important;
}
body.dark-mode .ucempage__textarea,
body.dark-mode .ucempage__input-row {
  background: #0f1e32 !important;
  color:      #c8d4e8 !important;
}
body.dark-mode .ucempage__input-row:focus-within {
  border-color: rgba(201,168,76,0.5) !important;
}
body.dark-mode .ucempage__textarea {
  color: #c8d4e8 !important;
}
body.dark-mode .ucempage__textarea::placeholder {
  color: rgba(107,125,143,0.5) !important;
}
body.dark-mode .ucempage__send {
  background: #1a4480 !important;
}
body.dark-mode .ucempage__send:hover {
  background: var(--gold) !important;
  color:      #0d1b2e !important;
}
body.dark-mode .ucempage__send:disabled {
  background: rgba(26,68,128,0.3) !important;
}


@media (max-width:640px) {
  .ucempage           { padding:0 12px 24px !important; }
  .ucempage__intro    { padding:32px 16px 24px !important; }
  .ucempage__title    { font-size:1.6rem !important; }
  .ucempage__quote    { font-size:1.1rem !important; }
  .ucempage__msg      { max-width:92% !important; }
  .ucempage__bubble   { font-size:0.875rem !important; }
}

/* ══════════════════════════════════════════════════════════
   MODE NUIT — body.dark-mode
   Affecte uniquement le contenu, pas le menu navy
   ══════════════════════════════════════════════════════════ */

body.dark-mode {
  background-color: #0d1b2e !important;
  color:            #c8d4e8 !important;
  transition:       background-color 0.4s ease, color 0.4s ease;
}

/* ── Fond de page Cassiopeia ── */
body.dark-mode .site-grid,
body.dark-mode #sp-main-body,
body.dark-mode .container-component,
body.dark-mode main {
  background-color: #0d1b2e !important;
}

/* ── Conteneur principal du contenu ── */
body.dark-mode .item-page,
body.dark-mode .blog,
body.dark-mode .com-content-article {
  background-color: #0d1b2e !important;
  color:            #c8d4e8 !important;
}

/* ── Texte général ── */
body.dark-mode p,
body.dark-mode li,
body.dark-mode td,
body.dark-mode th,
body.dark-mode span,
body.dark-mode div {
  color: #c8d4e8 !important;
}
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5 {
  color: #e8d5a3 !important;
}

/* ── Liens ── */
body.dark-mode a       { color: #d4d1c2 !important; }
body.dark-mode a:hover { color: #c9a84c !important; }

/* ── Cartes blanches ── */
body.dark-mode .bib-book,
body.dark-mode .ent-book,
body.dark-mode .intro-card,
body.dark-mode .tk-tile-home,
body.dark-mode .video-link,
body.dark-mode .bib-intro,
body.dark-mode .meta-pdf,
body.dark-mode .intro-newage,
body.dark-mode .glo-alpha-nav {
  background-color: #152338 !important;
  border-color:     rgba(201,168,76,0.2) !important;
}

/* ── Texte dans les cartes ── */
body.dark-mode .bib-book-title,
body.dark-mode .bib-book-desc,
body.dark-mode .ent-year-heading,
body.dark-mode .ent-desc,
body.dark-mode .intro-body,
body.dark-mode .intro-title,
body.dark-mode .glo-term-name,
body.dark-mode .glo-term-body,
body.dark-mode .glo-sub-text,
body.dark-mode .idx-sub,
body.dark-mode .meta-body p {
  color: #c8d4e8 !important;
}

/* ── Éléments gold préservés ── */
body.dark-mode .bib-book-author,
body.dark-mode .ent-meta,
body.dark-mode .bib-nav-title,
body.dark-mode .bib-section-title,
body.dark-mode .meta-breadcrumb,
body.dark-mode .intro-badge,
body.dark-mode .glo-letter-count,
body.dark-mode .intro-quote cite {
  color: #c9a84c !important;
}
body.dark-mode .glo-letter-char { color: #e8d5a3 !important; }

/* ── Navigation alphabétique ── */
body.dark-mode .glo-alpha-nav a {
  color:        #c8d4e8 !important;
  border-color: rgba(201,168,76,0.25) !important;
}
body.dark-mode .glo-alpha-nav a:hover {
  background: #1a4480 !important;
  color:      #e8d5a3 !important;
}
body.dark-mode .glo-alpha-nav span {
  color:        rgba(200,212,232,0.2) !important;
  border-color: rgba(201,168,76,0.08) !important;
}

/* ── Navigation années bibliographie ── */
body.dark-mode .bib-nav-years a {
  color:        #c8d4e8 !important;
  border-color: rgba(201,168,76,0.25) !important;
}
body.dark-mode .bib-nav-years a:hover {
  background: #1a4480 !important;
  color:      #e8d5a3 !important;
}

/* ── Citations ── */
body.dark-mode .intro-quote,
body.dark-mode .ent-quote {
  background: rgba(201,168,76,0.04) !important;
  color:      #b8c8e0 !important;
}
body.dark-mode .ent-quote p { color: #b8c8e0 !important; }

/* ── Tuiles accueil ── */
body.dark-mode .tk-label-home { color: #e8d5a3 !important; }
body.dark-mode .tk-desc-home  { color: #8a9ab5 !important; }

/* ── Vidéos ── */
body.dark-mode .video-item   { border-color: rgba(201,168,76,0.12) !important; }
body.dark-mode .video-title  { color: #c8d4e8 !important; }
body.dark-mode .video-en     { color: #7a8a9f !important; }

/* ── Métadonnées bibliographie ── */
body.dark-mode .bib-meta-label   { color: #7a8a9f !important; }
body.dark-mode .bib-meta-value a { color: #a8c4e8 !important; }

/* ── Accordéon Q&R ── */
body.dark-mode .accordion,
body.dark-mode .card,
body.dark-mode .card-body,
body.dark-mode .card-header {
  background-color: #152338 !important;
  border-color:     rgba(201,168,76,0.15) !important;
  color:            #c8d4e8 !important;
}
body.dark-mode .btn-block {
  color:            #e8d5a3 !important;
  background-color: #1a2e4a !important;
}

/* ── Onglets Q&R (nav-tabs) ── */
body.dark-mode #nav-tab,
body.dark-mode .nav-tabs {
  background-color:    #0d1b2e !important;
  border-bottom-color: rgba(201,168,76,0.2) !important;
}
body.dark-mode .nav-tabs .nav-link {
  color:            #5b8ab5 !important;
  background-color: #0a1628 !important;
  border-color:     rgba(201,168,76,0.15) !important;
}
body.dark-mode .nav-tabs .nav-link:hover {
  color:            var(--gold) !important;
  background-color: #0f2d5e !important;
  border-color:     rgba(201,168,76,0.15) !important;
}
body.dark-mode .nav-tabs .nav-link.active,
body.dark-mode .nav-tabs .nav-link.active:focus,
body.dark-mode .nav-tabs .nav-link.active:hover {
  color:            #e8d5a3 !important;
  background-color: #0d1b2e !important;
  border-color:     rgba(201,168,76,0.3) rgba(201,168,76,0.3) #0d1b2e !important;
}
body.dark-mode .tab-content {
  background-color: #0d1b2e !important;
}

/* ── Fil d'Ariane ── */
body.dark-mode .breadcrumb,
body.dark-mode .breadcrumb-item,
body.dark-mode .breadcrumb-item a {
  color:            #8a9ab5 !important;
  background-color: transparent !important;
}

/* ── Séparateurs ── */
body.dark-mode hr,
body.dark-mode .meta-divider,
body.dark-mode .glo-letter-line {
  background:   rgba(201,168,76,0.15) !important;
  border-color: rgba(201,168,76,0.15) !important;
}

/* ── Topbar bandeau ── */
body.dark-mode .container-topbar,
body.dark-mode .ucm-topbar {
  background-color: #0a1628 !important;
}

/* ── Sidebar droite ── */
body.dark-mode .grid-child.container-sidebar-right {
  background-color: #152338 !important;
  border:           1px solid rgba(201,168,76,0.2) !important;
  padding:          1rem !important;
  margin-top:       52px;
  border-radius:    8px;
  margin-bottom:    50px;
  box-shadow:       0 2px 10px rgba(15,45,94,0.08) !important;
}
body.dark-mode .sidebar-right.card,
body.dark-mode .container-sidebar-right .card {
  background-color: transparent !important;
  border-color:     rgba(201,168,76,0.15) !important;
}
body.dark-mode .sidebar-right .card-header,
body.dark-mode .container-sidebar-right .card-header,
body.dark-mode p.card-header {
  color:        #e8d5a3 !important;
  border-color: rgba(201,168,76,0.3) !important;
}
body.dark-mode .sidebar-right .mod-list li,
body.dark-mode .mod-articles-item {
  border-color: rgba(201,168,76,0.1) !important;
}
body.dark-mode .sidebar-right .mod-list li a,
body.dark-mode .sidebar-right .nav-item a,
body.dark-mode .mod-articles-title a {
  color: #c8d4e8 !important;
}
body.dark-mode .sidebar-right .mod-list li a:hover,
body.dark-mode .sidebar-right .nav-item a:hover,
body.dark-mode .mod-articles-title a:hover {
  color: #c9a84c !important;
}

/* ── Nuage de tags ── */
body.dark-mode ul.com-tags__category .list-group-item {
  background:   #152338 !important;
  border-color: rgba(201,168,76,0.2) !important;
}
body.dark-mode ul.com-tags__category .list-group-item a { color: #c8d4e8 !important; }
body.dark-mode ul.com-tags__category .list-group-item:hover {
  background:   #1a4480 !important;
  border-color: #1a4480 !important;
}

/* ── Page Don ── */
body.dark-mode .don-list li     { color: #c8d4e8 !important; border-color: rgba(201,168,76,0.1) !important; }
body.dark-mode .don-paypal-text { color: #c8d4e8 !important; }

/* ══════════════════════════════════════════════════════════
   DARK MODE — Page Mots-clés (com_tags)
   ══════════════════════════════════════════════════════════ */

body.dark-mode .com-tags-compact__items,
body.dark-mode .com-tags-tag-list__items {
  background-color: transparent !important;
  color:            #c8d4e8 !important;
}

body.dark-mode #filter-search {
  background-color: #1a2e4a !important;
  color:            #c8d4e8 !important;
  border-color:     rgba(201,168,76,0.3) !important;
}
body.dark-mode #filter-search::placeholder {
  color: #6b7d8f !important;
}

body.dark-mode #limit {
  background-color: #1a2e4a !important;
  color:            #c8d4e8 !important;
  border-color:     rgba(201,168,76,0.3) !important;
}

body.dark-mode .com-tags-tag-list__category {
  background-color: transparent !important;
  border:           none !important;
  color:            #c8d4e8 !important;
}

body.dark-mode .com-tags-tag-list__category thead tr {
  background-color: #0f2d5e !important;
}
body.dark-mode .com-tags-tag-list__category thead th a {
  color:           #e8d5a3 !important;
  text-decoration: none !important;
}

/* Bootstrap table-striped override */
body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-striped-bg: transparent;
  background-color:      transparent !important;
  color:                 #c8d4e8 !important;
}
body.dark-mode .table-striped > tbody > tr:nth-of-type(even) > * {
  background-color: transparent !important;
  color:            #c8d4e8 !important;
}
body.dark-mode .table-hover > tbody > tr:hover > * {
  --bs-table-hover-bg: rgba(201,168,76,0.06);
  background-color:    rgba(201,168,76,0.06) !important;
}
body.dark-mode .table-bordered > :not(caption) > * > * {
  border-color: rgba(201,168,76,0.1) !important;
}

body.dark-mode .cat-list-row0,
body.dark-mode .cat-list-row1 {
  background-color: transparent !important;
}
body.dark-mode .cat-list-row0:hover,
body.dark-mode .cat-list-row1:hover {
  background-color: rgba(201,168,76,0.06) !important;
}

body.dark-mode .cat-list-row0 th,
body.dark-mode .cat-list-row0 td,
body.dark-mode .cat-list-row1 th,
body.dark-mode .cat-list-row1 td {
  border-bottom-color: rgba(201,168,76,0.1) !important;
  border-left:         none !important;
  border-right:        none !important;
  border-top:          none !important;
  color:               #c8d4e8 !important;
}

body.dark-mode .list-title a {
  color:           #a8c4e8 !important;
  text-decoration: none !important;
}
body.dark-mode .list-title a:hover {
  color: var(--gold) !important;
}

body.dark-mode .list-date {
  color: #6b7d8f !important;
}

/* ══════════════════════════════════════════════════════════
   DARK MODE — Liste Q&R (com-content-blog__links)
   ══════════════════════════════════════════════════════════ */

body.dark-mode .com-content-blog__links {
  background-color: transparent !important;
}
body.dark-mode .com-content-blog__link {
  border-bottom-color: rgba(201,168,76,0.1) !important;
}
body.dark-mode .com-content-blog__link a {
  color:           #a8c4e8 !important;
  text-decoration: none !important;
}
body.dark-mode .com-content-blog__link a:hover {
  color:        var(--gold) !important;
  padding-left: 1rem !important;
}
/* ── Blockquotes génériques article ── */
body.dark-mode .item-page blockquote,
body.dark-mode .article-body blockquote {
  background:        #0f2040 !important;
  border-left-color: var(--gold) !important;
  color:             #b8c8e0 !important;
}

/* ── Citations Q&R spécifiques ── */
body.dark-mode blockquote.qr-citation {
  background: #0f2040 !important;
  color:      #b8c8e0 !important;
}
body.dark-mode blockquote.qr-citation cite {
  color: var(--gold) !important;
}



/* ── Chat page ── */
body.dark-mode .ucempage__title    { color:#e8d5a3 !important; }
body.dark-mode .ucempage__subtitle { color:#8a9ab0 !important; }
body.dark-mode .ucempage__quote    { color:#c8c0b0 !important; }
body.dark-mode .ucempage__author   { color:#8a9ab0 !important; }

body.dark-mode .ucempage__pill {
  background:   #1a2332 !important;
  border-color: rgba(201,168,76,0.25) !important;
  color:        #c8c0b0 !important;
}
body.dark-mode .ucempage__pill:hover {
  background:   var(--blue-mid) !important;
  color:        var(--gold-light) !important;
  border-color: rgba(201,168,76,0.5) !important;
}
body.dark-mode .ucempage__msg--user .ucempage__bubble {
  background: #1a4480 !important;
  color:      #f0ede6 !important;
}
body.dark-mode .ucempage__msg--bot .ucempage__bubble {
  background:   #1a2332 !important;
  color:        #d8d0c4 !important;
  border-color: rgba(201,168,76,0.12) !important;
  box-shadow:   0 1px 4px rgba(0,0,0,0.3) !important;
}
body.dark-mode .ucempage__msg--bot .ucempage__bubble em     { color:#c9a84c !important; }
body.dark-mode .ucempage__msg--bot .ucempage__bubble strong { color:#e8d5a3 !important; }
body.dark-mode .ucempage__typing {
  background:   #1a2332 !important;
  border-color: rgba(201,168,76,0.12) !important;
}
body.dark-mode .ucempage__typing span { background:#c9a84c !important; }
body.dark-mode .ucempage__input-zone  { background:linear-gradient(to bottom, transparent, #0d1b2e 30%) !important; }
body.dark-mode .ucempage__input-row {
  background:   #1a2332 !important;
  border-color: rgba(201,168,76,0.2) !important;
  box-shadow:   0 2px 16px rgba(0,0,0,0.3) !important;
}
body.dark-mode .ucempage__input-row:focus-within {
  border-color: var(--gold) !important;
  box-shadow:   0 4px 24px rgba(201,168,76,0.1) !important;
}
body.dark-mode .ucempage__textarea            { color:#e8e6e0 !important; }
body.dark-mode .ucempage__textarea::placeholder { color:rgba(200,192,176,0.35) !important; }
body.dark-mode .ucempage__send                { background:#1a4480 !important; }
body.dark-mode .ucempage__send:hover          { background:#2255a0 !important; }
body.dark-mode .ucempage__limit {
  background:   #1a2332 !important;
  border-color: rgba(201,168,76,0.12) !important;
  color:        #8a9ab0 !important;
}

/* ══════════════════════════════════════════════════════════
   ANIMATION LIENS — effet premium sur textes uniquement
   ══════════════════════════════════════════════════════════ */
.item-page p a,
.article-body p a,
.item-page blockquote a,
.article-body blockquote a {
  position:   relative !important;
  transition: color var(--transition-organic) !important;
}
.item-page p a::after,
.article-body p a::after,
.item-page blockquote a::after,
.article-body blockquote a::after {
  content:    '' !important;
  position:   absolute !important;
  bottom:     -1px !important;
  left:       0 !important;
  width:      0 !important;
  height:     1px !important;
  background: var(--gold) !important;
  transition: width var(--transition-organic) !important;
}
.item-page p a:hover::after,
.article-body p a:hover::after,
.item-page blockquote a:hover::after,
.article-body blockquote a:hover::after {
  width: 100% !important;
}

/* ══════════════════════════════════════════════════════════
   LISTE Q&R — Vue catégorie blog
   ══════════════════════════════════════════════════════════ */
.com-content-blog__links {
  list-style:  none !important;
  padding:     0 !important;
  margin:      0 !important;
}
.com-content-blog__link {
  border-bottom: 0.5px solid rgba(201,168,76,0.2) !important;
  padding:       0 !important;
}
.com-content-blog__link:last-child {
  border-bottom: none !important;
}
.com-content-blog__link a {
  display:         flex !important;
  align-items:     center !important;
  gap:             0.75rem !important;
  padding:         0.75rem 0.5rem !important;
  text-decoration: none !important;
  color:           var(--blue-mid) !important;
  font-family:     var(--font-body) !important;
  font-size:       0.95rem !important;
  font-weight:     600 !important;
  transition:      color var(--transition-organic), padding-left var(--transition-organic) !important;
}
.com-content-blog__link a:hover {
  color:        var(--gold) !important;
  padding-left: 1rem !important;
  background:   transparent !important;
}
/* Supprimer le surlignement actif Joomla */
.com-content-blog__link.active a,
.com-content-blog__link a.active,
.com-content-blog__link a:focus {
  background:  transparent !important;
  color:       var(--blue-mid) !important;
  outline:     none !important;
  box-shadow:  none !important;
}

/* ══════════════════════════════════════════════════════════
   PAGE DON
   ══════════════════════════════════════════════════════════ */

/* ── Liste des bénéficiaires ── */
.don-list {
  list-style:  none !important;
  padding:     0 !important;
  margin:      0.75rem 0 0 0 !important;
}
.don-list li {
  font-family:  var(--font-body) !important;
  font-size:    0.9rem !important;
  color:        #3a4a5a !important;
  padding:      0.35rem 0 0.35rem 1.25rem !important;
  position:     relative !important;
  border-bottom: 0.5px solid rgba(201,168,76,0.15) !important;
}
.don-list li:last-child { border-bottom: none !important; }
.don-list li::before {
  content:    '›' !important;
  position:   absolute !important;
  left:       0 !important;
  color:      var(--gold) !important;
  font-size:  1rem !important;
}

/* ── Bloc PayPal ── */
.don-paypal {
  margin-top:  2rem !important;
  text-align:  center !important;
}
.don-paypal-text {
  font-family:  var(--font-body) !important;
  font-size:    0.9rem !important;
  color:        #3a4a5a !important;
  margin-bottom: 1rem !important;
}

/* ── Bouton don ── */
.don-btn {
  display:         inline-flex !important;
  align-items:     center !important;
  gap:             0.6rem !important;
  background:      var(--blue-deep) !important;
  color:           var(--gold-light) !important;
  font-family:     var(--font-body) !important;
  font-size:       0.85rem !important;
  font-weight:     500 !important;
  letter-spacing:  0.1em !important;
  text-transform:  uppercase !important;
  border:          none !important;
  border-radius:   var(--radius-md) !important;
  padding:         0.85rem 2rem !important;
  cursor:          pointer !important;
  transition:      background var(--transition-organic), color var(--transition-organic) !important;
}
.don-btn svg {
  width:        18px !important;
  height:       18px !important;
  stroke:       var(--gold) !important;
  flex-shrink:  0 !important;
}
.don-btn:hover {
  background: var(--blue-mid) !important;
  color:      var(--gold) !important;
}

/* ── Icône cœur dans intro-avatar ── */
.intro-avatar svg {
  stroke: var(--gold-light) !important;
}

/* ══════════════════════════════════════════════════════════
   SCROLL TO TOP — Bouton premium avec anneau de progression
   ══════════════════════════════════════════════════════════ */
#ucm-scroll-top {
  position:        fixed;
  bottom:          2rem;
  right:           2rem;
  width:           44px;
  height:          44px;
  border:          none;
  background:      var(--blue-deep);
  border-radius:   50%;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  z-index:         900;
  opacity:         0;
  transform:       translateY(12px) scale(0.9);
  pointer-events:  none;
  transition:      opacity 0.4s cubic-bezier(0.25,0.46,0.45,0.94),
                   transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
  box-shadow:      0 4px 16px rgba(15,45,94,0.25),
                   0 1px 4px rgba(201,168,76,0.15);
}
#ucm-scroll-top.visible {
  opacity:        1;
  transform:      translateY(0) scale(1);
  pointer-events: auto;
}
#ucm-scroll-top:hover {
  background:  var(--blue-mid);
  box-shadow:  0 6px 20px rgba(15,45,94,0.35),
               0 2px 6px rgba(201,168,76,0.25);
  transform:   translateY(-2px) scale(1.05);
}

/* Flèche */
#ucm-scroll-top .stt-arrow {
  width:    18px;
  height:   18px;
  stroke:   var(--gold);
  position: relative;
  z-index:  2;
  flex-shrink: 0;
}

/* Anneau SVG */
#ucm-scroll-top .stt-ring {
  position: absolute;
  top:      0;
  left:     0;
  width:    44px;
  height:   44px;
  transform: rotate(-90deg);
}
#ucm-scroll-top .stt-ring-bg {
  fill:         none;
  stroke:       rgba(201,168,76,0.15);
  stroke-width: 2;
}
#ucm-scroll-top .stt-ring-progress {
  fill:             none;
  stroke:           var(--gold);
  stroke-width:     2;
  stroke-linecap:   round;
  transition:       stroke-dashoffset 0.1s linear;
}

/* Tooltip */
#ucm-scroll-top .stt-tooltip {
  position:       absolute;
  right:          calc(100% + 10px);
  top:            50%;
  transform:      translateY(-50%);
  background:     var(--blue-deep);
  color:          var(--gold-light, #e8d5a3);
  font-family:    var(--font-body);
  font-size:      0.65rem;
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space:    nowrap;
  padding:        4px 10px;
  border-radius:  4px;
  border:         1px solid rgba(201,168,76,0.3);
  opacity:        0;
  pointer-events: none;
  transition:     opacity 0.2s ease;
}
#ucm-scroll-top:hover .stt-tooltip {
  opacity: 1;
}

/**
 * Embellissement formulaire contact — com_contact / Joomla 6 / Cassiopeia
 * Charte : #0f2d5e (marine), #c9a84c (or), #1a4480 (boutons)
 * Polices : Cormorant Garamond + Lato (cohérent avec le reste du site)
 * À coller dans : Système > Templates > Cassiopeia > user.css
 */

/* ============================================================
   1. CARTE FORMULAIRE
   ============================================================ */
#contact-form {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #dde3ee;
    box-shadow: 0 4px 28px rgba(15, 45, 94, 0.08), 0 1px 4px rgba(15, 45, 94, 0.04);
    padding: 2.25rem 2rem 1.75rem;
    max-width: 740px;
    margin: 1.5rem auto 2.5rem;
    font-family: 'Lato', sans-serif;
}

/* Titre "Envoyer un e-mail" */
#contact-form h2,
.com-contact-mail h2,
.contact .page-header h1 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: 1.85rem;
    color: #0f2d5e;
    letter-spacing: 0.02em;
    margin-bottom: 0.2rem;
}

/* Séparateur doré sous le titre */
.com-contact-mail h2::after,
#contact-form h2::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: #c9a84c;
    margin-top: 8px;
    border-radius: 2px;
}

/* Texte "* Champ requis" */
#contact-form .required-fields-note,
#contact-form > .required {
    font-size: 12px;
    color: #8a96a8;
    margin-bottom: 1.5rem;
    display: block;
}

/* ============================================================
   2. GROUPES DE CHAMPS
   ============================================================ */
#contact-form .control-group {
    margin-bottom: 1.25rem;
    position: relative;
}

/* ============================================================
   3. LABELS
   ============================================================ */
#contact-form .control-label label,
#contact-form .control-group > label {
    display: block;
    font-family: 'Lato', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #0f2d5e;
    margin-bottom: 6px;
    opacity: 0.75;
}

/* Étoile obligatoire */
#contact-form .control-label label .star {
    color: #c9a84c;
    margin-left: 2px;
    opacity: 1;
}

/* ============================================================
   4. INPUTS & TEXTAREA
   ============================================================ */
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form input[type="tel"],
#contact-form input[type="number"],
#contact-form input[type="url"],
#contact-form textarea,
#contact-form select {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #0f2d5e;
    background: #f4f6fb;
    border: 1px solid #dde3ee;
    border-radius: 6px;
    padding: 11px 14px;
    outline: none;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    -webkit-appearance: none;
    appearance: none;
}

#contact-form input[type="text"]:focus,
#contact-form input[type="email"]:focus,
#contact-form input[type="tel"]:focus,
#contact-form input[type="number"]:focus,
#contact-form textarea:focus,
#contact-form select:focus {
    background: #ffffff;
    border-color: #1a4480;
    box-shadow: 0 0 0 3px rgba(26, 68, 128, 0.12);
}

#contact-form textarea {
    resize: vertical;
    min-height: 130px;
    line-height: 1.65;
}

/* Masquer flèches du champ number (captcha) */
#contact-form input[type="number"]::-webkit-outer-spin-button,
#contact-form input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
#contact-form input[type="number"] {
    -moz-appearance: textfield;
}

/* ============================================================
   5. CHECKBOX "Envoyer une copie"
   ============================================================ */
#contact-form .control-group.contact-emailcopy {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f4f6fb;
    border: 1px solid #dde3ee;
    border-radius: 6px;
    padding: 11px 14px;
}

#contact-form .control-group.contact-emailcopy label {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    text-transform: none;
    letter-spacing: 0;
    color: #374151;
    font-weight: 400;
    opacity: 1;
    margin-bottom: 0;
    cursor: pointer;
}

#contact-form input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: #1a4480;
    cursor: pointer;
    flex-shrink: 0;
}

/* ============================================================
   6. BLOC CAPTCHA
   ============================================================ */
#contact-form .captchamath-field.control-group {
    background: #f0f4fa;
    border: 1px solid #c9d8ef;
    border-left: 3px solid #c9a84c;
    border-radius: 6px;
    padding: 14px 16px;
}

#contact-form .captchamath-field .control-label label {
    color: #1a4480;
    opacity: 1;
}

/* Bulle question (surcharge captchamath.css) */
#contact-form .captchamath-question {
    background: #0f2d5e;
    color: #ffffff;
    border-radius: 6px;
    font-size: 0.93rem;
    padding: 0.4rem 0.9rem;
}

/* Champ réponse captcha */
#contact-form .captchamath-input {
    background: #ffffff;
    border: 1px solid #c9d8ef;
    border-radius: 6px;
    max-width: 100px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f2d5e;
    padding: 9px 12px;
    box-shadow: none;
}

#contact-form .captchamath-input:focus {
    border-color: #c9a84c;
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.18);
    background: #fffdf5;
}

/* ============================================================
   7. BOUTON ENVOYER
   ============================================================ */
#contact-form .contact-submit,
#contact-form .btn-toolbar {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #eaecf3;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

#contact-form .btn.btn-primary,
#contact-form button[type="submit"],
#contact-form input[type="submit"] {
    font-family: 'Lato', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: #1a4480;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 12px 30px;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.1s ease, box-shadow 0.18s ease;
    -webkit-appearance: none;
    appearance: none;
}

#contact-form .btn.btn-primary:hover,
#contact-form button[type="submit"]:hover {
    background: #0f2d5e;
    box-shadow: 0 4px 14px rgba(15, 45, 94, 0.25);
}

#contact-form .btn.btn-primary:active,
#contact-form button[type="submit"]:active {
    transform: scale(0.98);
}

/* ============================================================
   8. MESSAGES D'ERREUR JOOMLA
   ============================================================ */
#contact-form .alert-error,
#contact-form .invalid-feedback {
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    font-size: 13px;
    padding: 8px 12px;
    margin-top: 5px;
}

#contact-form input.invalid,
#contact-form textarea.invalid {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
    background: #fff8f8;
}

/* ============================================================
   9. MODE NUIT — body.dark-mode (toggle via localStorage)
   Palette : fond carte #0e1e38, champs #162845, bordures #1e3a5f
   Or #c9a84c conservé comme accent principal
   ============================================================ */
body.dark-mode #contact-form {
    background: #0e1e38;
    border-color: #1e3a5f;
    box-shadow: 0 4px 28px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.2);
}

body.dark-mode #contact-form h2,
body.dark-mode .com-contact-mail h2,
body.dark-mode .contact .page-header h1 {
    color: #c8d8f0;
}

body.dark-mode #contact-form .required-fields-note,
body.dark-mode #contact-form > .required {
    color: #6b7f9a;
}

body.dark-mode #contact-form .control-label label,
body.dark-mode #contact-form .control-group > label {
    color: #a8bdd8;
    opacity: 1;
}

body.dark-mode #contact-form input[type="text"],
body.dark-mode #contact-form input[type="email"],
body.dark-mode #contact-form input[type="tel"],
body.dark-mode #contact-form input[type="number"],
body.dark-mode #contact-form input[type="url"],
body.dark-mode #contact-form textarea,
body.dark-mode #contact-form select {
    color: #dce8f8;
    background: #162845;
    border-color: #1e3a5f;
}

body.dark-mode #contact-form input[type="text"]:focus,
body.dark-mode #contact-form input[type="email"]:focus,
body.dark-mode #contact-form input[type="tel"]:focus,
body.dark-mode #contact-form input[type="number"]:focus,
body.dark-mode #contact-form textarea:focus,
body.dark-mode #contact-form select:focus {
    background: #1a3055;
    border-color: #c9a84c;
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.18);
}

body.dark-mode #contact-form input::placeholder,
body.dark-mode #contact-form textarea::placeholder {
    color: #4a6282;
}

body.dark-mode #contact-form .control-group.contact-emailcopy {
    background: #162845;
    border-color: #1e3a5f;
}

body.dark-mode #contact-form .control-group.contact-emailcopy label {
    color: #a8bdd8;
}

body.dark-mode #contact-form input[type="checkbox"] {
    accent-color: #c9a84c;
}

body.dark-mode #contact-form .captchamath-field.control-group {
    background: #111f35;
    border-color: #1e3a5f;
    border-left-color: #c9a84c;
}

body.dark-mode #contact-form .captchamath-field .control-label label {
    color: #a8bdd8;
}

body.dark-mode #contact-form .captchamath-question {
    background: #1a4480;
}

body.dark-mode #contact-form .captchamath-input {
    background: #162845;
    border-color: #1e3a5f;
    color: #dce8f8;
}

body.dark-mode #contact-form .captchamath-input:focus {
    background: #1a3055;
    border-color: #c9a84c;
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.18);
}

body.dark-mode #contact-form .contact-submit,
body.dark-mode #contact-form .btn-toolbar {
    border-top-color: #1e3a5f;
}

body.dark-mode #contact-form .btn.btn-primary,
body.dark-mode #contact-form button[type="submit"],
body.dark-mode #contact-form input[type="submit"] {
    background: #c9a84c;
    color: #0e1e38;
}

body.dark-mode #contact-form .btn.btn-primary:hover,
body.dark-mode #contact-form button[type="submit"]:hover {
    background: #dbbf6a;
    box-shadow: 0 4px 14px rgba(201, 168, 76, 0.3);
}

body.dark-mode #contact-form .alert-error,
body.dark-mode #contact-form .invalid-feedback {
    color: #fca5a5;
    background: #2d1515;
    border-color: #7f1d1d;
}

body.dark-mode #contact-form input.invalid,
body.dark-mode #contact-form textarea.invalid {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
    background: #1e1010;
}

/* ============================================================
   10. RESPONSIVE MOBILE
   ============================================================ */
@media (max-width: 600px) {
    #contact-form {
        padding: 1.5rem 1.1rem 1.25rem;
        border-radius: 8px;
        margin: 1rem 0 1.5rem;
    }

    #contact-form .contact-submit,
    #contact-form .btn-toolbar {
        justify-content: stretch;
    }

    #contact-form .btn.btn-primary,
    #contact-form button[type="submit"] {
        width: 100%;
        text-align: center;
    }
}



/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width:768px) {
  body { font-size: 14px !important; }
  .gloss-def { flex-direction:column !important; gap:0.25rem !important; }
  .gloss-def-label { min-width:auto !important; }
  .pg-nav-qr { flex-direction:column !important; }
  .pg-nav-btn { text-align:center !important; }
}
@media (max-width:480px) {
  h1 { font-size:1.4rem !important; }
  h2 { font-size:1.2rem !important; }
  .alpha-btn { width:32px !important; height:32px !important; font-size:0.9rem !important; }
}

   NAVIGATION Q&R — Recherche + Catégories
   ============================================================ */

#qr-nav-ui { margin-bottom: 2rem; }

.qr-nav-wrap {
  font-family: var(--font-body);
}

/* ── Recherche ── */
.qr-nav-search-row {
  display:         flex;
  align-items:     center;
  gap:             12px;
  margin-bottom:   16px;
}
.qr-nav-search-wrap {
  position:   relative;
  flex:       1;
}
.qr-nav-search-wrap > i {
  position:  absolute;
  left:      14px;
  top:       50%;
  transform: translateY(-50%);
  color:     var(--muted);
  font-size: 16px;
  pointer-events: none;
}
.qr-nav-search-wrap input {
  width:         100%;
  box-sizing:    border-box;
  background:    white;
  border:        1px solid #dce6f4;
  border-radius: 12px;
  padding:       11px 40px 11px 42px;
  font-family:   var(--font-body);
  font-size:     0.9rem;
  color:         var(--text);
  box-shadow:    0 2px 8px rgba(15,45,94,0.08);
  transition:    border-color 0.2s, box-shadow 0.2s;
}
.qr-nav-search-wrap input:focus {
  outline:      none;
  border-color: var(--blue-mid);
  box-shadow:   0 4px 16px rgba(15,45,94,0.12);
}
.qr-nav-search-wrap input::placeholder { color: #9aaabb; }
.qr-nav-clear {
  position:        absolute;
  right:           10px;
  top:             50%;
  transform:       translateY(-50%);
  background:      none;
  border:          none;
  cursor:          pointer;
  color:           var(--muted);
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         4px;
  font-size:       14px;
}
.qr-nav-clear:hover { color: var(--blue-deep); }
.qr-nav-count {
  font-size:   0.8rem;
  color:       var(--muted);
  white-space: nowrap;
  min-width:   80px;
  text-align:  right;
}

/* ── Catégories ── */
.qr-cats-scroll {
  display:         flex;
  flex-wrap:       wrap;
  gap:             8px;
  margin-bottom:   20px;
}
.qr-cat-btn {
  display:        flex;
  align-items:    center;
  gap:            6px;
  background:     #d8e5f4;
  border:         1px solid white;
  border-radius:  20px;
  padding:        7px 14px;
  font-family:    var(--font-body);
  font-size:      0.8rem;
  font-weight:    500;
  color:          var(--blue-mid);
  cursor:         pointer;
  transition:     background 0.2s, color 0.2s;
  white-space:    nowrap;
}
.qr-cat-btn i { font-size: 15px; }
.qr-cat-btn:hover { background: #c8d8ee; }
.qr-cat-btn.active {
  background:   var(--blue-deep);
  color:        white;
  border-color: var(--blue-deep);
}
.qr-cat-btn.active i { color: var(--gold); }

/* ── Liste des questions ── */
.qr-nav-list {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}
.qr-nav-item {
  display:         flex;
  align-items:     center;
  gap:             12px;
  background:      #d8e5f4;
  border:          1px solid white;
  border-radius:   8px;
  padding:         10px 14px;
  text-decoration: none;
  box-shadow:      0 1px 3px rgba(15,45,94,0.05);
  transition: background var(--transition-organic), box-shadow var(--transition-organic), padding-left var(--transition-organic), color var(--transition-organic);
}
.qr-nav-item:hover {
  padding-left: 1rem;
  background:  #c8d8ee;
  box-shadow:  0 2px 10px rgba(15,45,94,0.10);
  color: var(--gold);
}
.qr-nav-num {
  font-size:  14px;
  font-weight: 700;
  color:       #77a7f3;
  min-width:   40px;
  font-family: monospace;
  flex-shrink: 0;
}

.qr-nav-title {
  flex:        1;
  font-size:   0.875rem;
  line-height: 1.35;
}
.qr-nav-tag {
    font-size: 12px;
    color: #fbf3c7;
    background: var(--template-bg-dark-50);
    border-radius: 4px;
    padding: 2px 7px;
    white-space: nowrap;
    flex-shrink: 0;
}
.qr-nav-arrow {
  color:       #9aaabb;
  font-size:   14px;
  flex-shrink: 0;
}

/* ── État vide ── */
.qr-nav-empty {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            10px;
  padding:        40px 20px;
  color:          var(--muted);
  font-size:      0.875rem;
}
.qr-nav-empty i { font-size: 32px; opacity: 0.5; }

/* ── Responsive ── */
@media (max-width: 640px) {
  .qr-cats-scroll { gap: 6px; }
  .qr-cat-btn { font-size: 0.75rem; padding: 6px 10px; }
  .qr-cat-btn span { display: none; }
  .qr-cat-btn i { font-size: 18px; }
  .qr-nav-tag { display: none; }
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width:768px) {
  body { font-size: 14px !important; }
  .gloss-def { flex-direction:column !important; gap:0.25rem !important; }
  .gloss-def-label { min-width:auto !important; }
  .pg-nav-qr { flex-direction:column !important; }
  .pg-nav-btn { text-align:center !important; }
}
@media (max-width:480px) {
  h1 { font-size:1.4rem !important; }
  h2 { font-size:1.2rem !important; }
  .alpha-btn { width:32px !important; height:32px !important; font-size:0.9rem !important; }
}
/* ══════════════════════════════════════════════════════════
   MENU UCM — Améliorations desktop uniquement
   ══════════════════════════════════════════════════════════ */
@media (min-width: 769px) {

  /* État actif persistant — plus visible */
  .ucm-items > li > a.ucm-active,
  .ucm-items > li.current-menu-item > a,
  .ucm-items > li.active > a {
    color:      var(--gold);
    background: rgba(201, 168, 76, 0.35);
    border:     1px solid rgba(201, 168, 76, 0.70);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4),
                0 2px 6px rgba(201, 168, 76, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform:  translateY(-1px);
  }

  /* Relief premium au hover */
  .ucm-items > li > a:hover {
    color:      var(--gold) !important;
    background: rgba(255, 255, 255, 0.25) !important;
    border:     1px solid rgba(201, 168, 76, 0.35) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3),
                0 1px 3px rgba(201, 168, 76, 0.2) !important;
    transform:  translateY(-1px) !important;
  }

  /* Transition organique + margin sur les icônes */
  .ucm-items > li > a {
    margin:     1rem 0.5rem !important;
    transition: background var(--transition-organic),
                border-color var(--transition-organic),
                box-shadow var(--transition-organic),
                transform var(--transition-organic),
                color var(--transition-organic) !important;
    border:     1px solid transparent;
    align-self: center;
  }

  .ucm-items > li {
    display:     flex;
    align-items: center;
    align-self:  stretch;
    position:    relative;
  }
}

/* ══════════════════════════════════════════════════════════
   MP3 — Lecteur
   ══════════════════════════════════════════════════════════ */
.ucm-listen-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 1.5em;
    padding: 0 0.6em;
    border-radius: 1em;
    border: 1px solid rgba(201, 168, 76, 0.5);
    background: rgba(15, 45, 94, 0.06);
    color: #0f2d5e;
    font-family: 'Lato', sans-serif;
    font-size: 0.7em;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    vertical-align: middle;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1;
    border: 1px solid #ffffff !important;
}

/* ══════════════════════════════════════════════════════════
   Q&R — Barre de partage + favoris
   ══════════════════════════════════════════════════════════ */
.qr-share-bar {
  display:     flex;
  align-items: center;
  gap:         6px;
  flex-shrink: 0;
}
.qr-share-btn {
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  width:           30px !important;
  height:          30px !important;
  min-width:       30px !important;
  border-radius:   50%;
  border:          1px solid #ffffff;
  background:      rgba(15,45,94,0.05);
  color:           #1a4480;
  cursor:          pointer;
  text-decoration: none;
  transition:      background var(--transition-organic), border-color var(--transition-organic), color var(--transition-organic);
  flex-shrink:     0;
}
.qr-share-btn svg {
  width:        14px !important;
  height:       14px !important;
  stroke:       #1a4480 !important;
  fill:         none !important;
  stroke-width: 1.5px !important;
}
.qr-share-btn:hover {
  background:   #0f2d5e !important;
  border-color: #0f2d5e !important;
  color:        #c9a84c !important;
}
.qr-share-btn:hover svg {
  stroke: #c9a84c !important;
}
.qr-fav-btn.active {
  background:   rgba(201,168,76,0.15) !important;
  border-color: rgba(201,168,76,0.6) !important;
  color:        #c9a84c !important;
}
.qr-fav-btn.active svg {
  stroke: #c9a84c !important;
  fill:   #c9a84c !important;
}


/* ============================================================
   PREMIUM SLIDER — Joomla 6 / Cassiopeia
   Fichier : media/templates/site/cassiopeia/css/user.css
   ============================================================ */

.premium-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 7;
  border-radius: 10px;
  overflow: hidden;
  background: #2a69b8;
  border: 1.5px solid #ffffff;
  user-select: none;
  cursor: grab;
}

.premium-slider:active {
  cursor: grabbing;
}

.premium-slider .ps-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.premium-slider .ps-slide.active {
  opacity: 1;
  pointer-events: auto;
}

.premium-slider .ps-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.3);
  transition: transform 10s ease;
  transform: scale(1);
}

.premium-slider .ps-slide.active .ps-bg {
  transform: scale(1.05);
}

.premium-slider .ps-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(12, 20, 48, 0.96) 0%,
    rgba(12, 20, 48, 0.6) 45%,
    transparent 100%
  );
}

.premium-slider .ps-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 6%;
  max-width: 520px;
}

/* ============================================================
   MASQUAGE STRICT — priorité maximale
   Les éléments des slides INACTIVES sont invisibles
   instantanément, sans aucune transition de sortie
   ============================================================ */

.premium-slider .ps-slide .ps-badge,
.premium-slider .ps-slide .ps-title,
.premium-slider .ps-slide .ps-desc,
.premium-slider .ps-slide .ps-cta {
  opacity: 0 !important;
  transform: translateY(10px) !important;
  transition: none !important;
  visibility: hidden !important;
}

/* --- Entrée en cascade sur la slide ACTIVE uniquement --- */

.premium-slider .ps-slide.active .ps-badge {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: visibility 0s 0.2s,
              opacity 0.5s 0.2s,
              transform 0.5s 0.2s !important;
}

.premium-slider .ps-slide.active .ps-title {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: visibility 0s 0.35s,
              opacity 0.6s 0.35s,
              transform 0.6s 0.35s !important;
}

.premium-slider .ps-slide.active .ps-desc {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: visibility 0s 0.5s,
              opacity 0.6s 0.5s,
              transform 0.6s 0.5s !important;
}

.premium-slider .ps-slide.active .ps-cta {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: visibility 0s 0.65s,
              opacity 0.6s 0.65s,
              transform 0.6s 0.65s,
              background 0.2s !important;
}

/* --- Styles visuels fixes --- */

.premium-slider .ps-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e8c96a;
  border: 1px solid rgba(232, 201, 106, 0.38);
  padding: 4px 13px;
  border-radius: 20px;
  margin-bottom: 14px;
}

.premium-slider .ps-title {
  font-size: clamp(1.1rem, 2.4vw, 1.7rem);
  font-weight: 700;
  color: #e8c96a;
  line-height: 1.25;
  margin: 0 0 10px;
  font-family: Georgia, serif;
}

.premium-slider .ps-desc {
  font-size: clamp(0.75rem, 1.3vw, 0.88rem);
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.65;
  margin: 0 0 20px;
  font-weight: 600;
}

.premium-slider .ps-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  background: #e8c96a;
  color: #0f1832;
  font-size: 12px;
  font-weight: 700;
  padding: 9px 20px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  letter-spacing: 0.03em;
  text-decoration: none;
}

.premium-slider .ps-cta:hover {
  background: #ffffff;
  color: #0f1832;
  text-decoration: none;
}

/* --- Points de navigation --- */

.premium-slider .ps-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.premium-slider .ps-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.3s, width 0.3s, border-radius 0.3s;
}

.premium-slider .ps-dot.active {
  background: #e8c96a;
  width: 24px;
  border-radius: 4px;
}

.premium-slider .ps-dot:hover:not(.active) {
  background: rgba(255, 255, 255, 0.5);
}

body.dark-mode .premium-slider .ps-cta {
  background:  #c9a84c !important;
  color:       #0d1b2e !important;
  font-weight: 700 !important;
}
body.dark-mode .premium-slider .ps-cta:hover {
  background: #e8d5a3 !important;
  color:      #0d1b2e !important;
}
body.dark-mode .premium-slider {
  background: #0d1f3c !important;
  border-color: rgba(201,168,76,0.3) !important;
}

/* --- Responsive tablette --- */
@media (max-width: 768px) {
  .premium-slider {
    aspect-ratio: 16 / 7;
  }
  .premium-slider .ps-content {
    max-width: 80%;
  }
}

/* --- Responsive mobile --- */
@media (max-width: 480px) {
  .premium-slider {
    aspect-ratio: 4 / 3;
    border-radius: 6px;
  }
  .premium-slider .ps-content {
    max-width: 100%;
    padding: 0 5%;
  }
  .premium-slider .ps-gradient {
    background: linear-gradient(
      180deg,
      transparent 0%,
      rgba(12, 20, 48, 0.88) 50%,
      rgba(12, 20, 48, 0.97) 100%
    );
  }
}

/* Masquer le lecteur média natif du navigateur */
.premium-slider::-webkit-media-controls {
  display: none !important;
}

/* --- Accessibilité : réduction de mouvement --- */
@media (prefers-reduced-motion: reduce) {
  .premium-slider .ps-slide,
  .premium-slider .ps-bg {
    transition: none !important;
  }
  .premium-slider .ps-slide.active .ps-badge,
  .premium-slider .ps-slide.active .ps-title,
  .premium-slider .ps-slide.active .ps-desc,
  .premium-slider .ps-slide.active .ps-cta {
    transition: none !important;
    transform: none !important;
  }
}



/* ══════════════════════════════════════════════════════════
   MODE NUIT — Compléments page Q&R + Assistant + Accueil
   ══════════════════════════════════════════════════════════ */

/* ── Page Q&R — lignes ── */
body.dark-mode .qr-nav-item {
  background:   #152338 !important;
  border-color: rgba(201,168,76,0.15) !important;
}
body.dark-mode .qr-nav-item:hover {
  background: #3d6080 !important;
}
body.dark-mode .qr-nav-num {
  color: #c9a84c !important;
}
body.dark-mode .qr-nav-title {
  color: #c8d4e8 !important;
}
body.dark-mode .qr-nav-item:hover .qr-nav-title,
body.dark-mode .qr-nav-item:hover .qr-nav-num {
  color: #c9a84c !important;  
}
body.dark-mode .qr-nav-tag {
  background: rgba(15,45,94,0.4) !important;
  color:      #8a9ab5 !important;
}
body.dark-mode .qr-nav-search-wrap {
  background:   #152338 !important;
  border-color: rgba(201,168,76,0.2) !important;
}
body.dark-mode .qr-nav-search-wrap input {
  background: transparent !important;
  color:      #c8d4e8 !important;
}
body.dark-mode .qr-nav-count {
  color: #8a9ab5 !important;
}
body.dark-mode .qr-cat-btn {
  background:   #152338 !important;
  border-color: rgba(201,168,76,0.3) !important;
  color:        #c8d4e8 !important;
}
body.dark-mode .bib-intro {
  background:   #152338 !important;
  border-color: rgba(201,168,76,0.2) !important;
}

/* ── Page Assistant ── */
body.dark-mode .ucempage {
  background: #0d1b2e !important;
}
body.dark-mode .ucempage__title {
  color: #e8d5a3 !important;
}
body.dark-mode .ucempage__subtitle,
body.dark-mode .ucempage__author {
  color: #8a9ab5 !important;
}
body.dark-mode .ucempage__quote {
  color: #c8d4e8 !important;
}
body.dark-mode .ucempage__logo {
  color: #c9a84c !important;
}
body.dark-mode .ucempage__suggestion {
  background:   #152338 !important;
  border-color: rgba(201,168,76,0.3) !important;
  color:        #c8d4e8 !important;
}
body.dark-mode .ucempage__input-wrap {
  background:   #152338 !important;
  border-color: rgba(201,168,76,0.2) !important;
}
body.dark-mode .ucempage__input {
  background: transparent !important;
  color:      #c8d4e8 !important;
}
body.dark-mode .ucempage__messages {
  background: transparent !important;
}
body.dark-mode .ucempage__msg--user .ucempage__bubble {
  background: #1a4480 !important;
  color:      #e8d5a3 !important;
}
body.dark-mode .ucempage__msg--assistant .ucempage__bubble {
  background:   #152338 !important;
  border-color: rgba(201,168,76,0.15) !important;
  color:        #c8d4e8 !important;
}

/* ── Sitemap ── */
body.dark-mode .sitemap-section-title {
  color: #e8d5a3 !important;
}
body.dark-mode .sitemap-meta {
  color: #6b7d8f !important;
}
body.dark-mode .tk-tile-sitemap {
  background:   #1a2e4a !important;
  border-color: rgba(201,168,76,0.2) !important;
  color:        #a8c4e8 !important;
}
body.dark-mode .tk-tile-sitemap:hover {
  background:   #0f2d5e !important;
  color:        var(--gold) !important;
  border-color: rgba(201,168,76,0.4) !important;
}



/* =====================================================
   PAGE D'ACCUEIL — Bloc Nouveautés (ucm-news)
   ===================================================== */
.ucm-news { margin: 0 0 1.5rem 0; }
.ucm-news__header {
  display:     flex;
  align-items: center;
  gap:         1rem;
  margin-bottom: 1rem;
}
.ucm-news__label {
  font-family:    var(--font-body);
  font-size:      0.62rem;
  font-weight:    700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--gold);
  white-space:    nowrap;
}
.ucm-news__line {
  flex:       1;
  height:     1px;
  background: rgba(201,168,76,0.3);
}
.ucm-news__grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1rem;
}
.ucm-news__card {
  background:      #d8e5f4;
  border:          1px solid white;
  border-radius:   8px;
  padding:         1.25rem 1.5rem;
  display:         flex;
  flex-direction:  row;
  align-items:     center;
  justify-content: space-between;
  gap:             1rem;
  box-shadow:      0 1px 4px rgba(15,45,94,0.07);
  transition:      background var(--transition-organic, 0.3s), box-shadow var(--transition-organic, 0.3s);
  position:        relative;
  text-decoration: none;
  cursor:          pointer;
  overflow:        visible;
}
.ucm-news__card:hover {
  background:  #cddaf0;
  box-shadow:  0 3px 12px rgba(15,45,94,0.12);
}
.ucm-news__card-body {
  display:        flex;
  flex-direction: column;
  gap:            3px;
  min-width:      0;
  flex:           1;
}
.ucm-news__date {
  font-family:    var(--font-body);
  font-size:      0.75rem;
  font-weight:    700;
  letter-spacing: 0.06em;
  color:          var(--gold);
  text-transform: uppercase;
}
.ucm-news__title {
  font-family:   var(--font-display);
  font-size:     1.1rem;
  font-weight:   600;
  color:         var(--blue-deep);
  line-height:   1.3;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  transition:    color var(--transition-organic, 0.3s);
}
.ucm-news__card:hover .ucm-news__title {
  color: var(--blue-deep);
}
.ucm-news__info {
  order:           -1;
  width:           24px;
  height:          24px;
  border-radius:   50%;
  border:          1px solid rgba(201,168,76,0.5);
  color:           var(--gold);
  font-family:     var(--font-body);
  font-size:       0.75rem;
  font-weight:     700;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

/* ── Tooltip générique ── */
.ucm-tooltip-box {
  display:        none !important;
  position:       absolute !important;
  top:            calc(100% + 10px) !important;
  bottom:         auto !important;
  left:           50%;
  transform:      translateX(-50%) translateY(-4px);
  background:     var(--blue-deep, #0f2d5e);
  color:          #e8d5a3;
  font-family:    var(--font-body);
  font-size:      0.78rem;
  line-height:    1.5;
  padding:        10px 14px;
  border-radius:  8px;
  border:         1px solid rgba(201,168,76,0.3);
  border-bottom:  2px solid var(--gold, #c9a84c);
  width:          220px;
  box-shadow:     0 8px 24px rgba(10,22,40,0.25);
  opacity:        0;
  pointer-events: none;
  transition:     opacity 0.3s, transform 0.3s;
  z-index:        200;
  white-space:    normal;
}
.ucm-tooltip-box::after {
  content:             '';
  position:            absolute;
  bottom:              100%;
  top:                 auto;
  left:                50%;
  transform:           translateX(-50%);
  border:              6px solid transparent;
  border-bottom-color: rgba(201,168,76,0.3);
  border-top-color:    transparent;
}

/* Tuiles du bas — position relative pour tooltip */
.tk-tile-home { position: relative !important; overflow: visible !important; }
.tk-tile-home:hover { z-index: 10 !important; }

.tk-tile-home .ucm-tooltip-box {
  z-index:        9999 !important;
  background:     #0f2d5e !important;
  color:          #e8d5a3 !important;
  border:         1px solid rgba(201,168,76,0.3) !important;
  border-bottom:  2px solid #c9a84c !important;
  border-radius:  8px !important;
  font-size:      0.78rem !important;
  font-family:    var(--font-body) !important;
  padding:        10px 14px !important;
  box-shadow:     0 8px 24px rgba(10,22,40,0.25) !important;
  width:          220px !important;
  white-space:    normal !important;
  pointer-events: none !important;
}

/* Colonne gauche — tooltip aligné à gauche */
.ucm-news__grid > :nth-child(3n+1) .ucm-tooltip-box,
.tk-grid-home > :nth-child(3n+1) .ucm-tooltip-box {
  left:      0 !important;
  transform: translateX(0) translateY(-4px);
}
.ucm-news__grid > :nth-child(3n+1) .ucm-tooltip-box::after,
.tk-grid-home > :nth-child(3n+1) .ucm-tooltip-box::after {
  left:      20px;
  transform: none;
}
/* Colonne droite — tooltip aligné à droite */
.ucm-news__grid > :nth-child(3n) .ucm-tooltip-box,
.tk-grid-home > :nth-child(3n) .ucm-tooltip-box {
  left:      auto !important;
  right:     0 !important;
  transform: translateX(0) translateY(-4px);
}
.ucm-news__grid > :nth-child(3n) .ucm-tooltip-box::after,
.tk-grid-home > :nth-child(3n) .ucm-tooltip-box::after {
  left:      auto;
  right:     20px;
  transform: none;
}

/* Affichage au survol */
.ucm-news__card:hover .ucm-tooltip-box,
.tk-tile-home:hover .ucm-tooltip-box {
  display:   block !important;
  opacity:   1 !important;
  transform: translateX(-50%) translateY(0) !important;
}
.ucm-news__grid > :nth-child(3n+1):hover .ucm-tooltip-box,
.tk-grid-home > :nth-child(3n+1):hover .ucm-tooltip-box {
  transform: translateX(0) translateY(0) !important;
}
.ucm-news__grid > :nth-child(3n):hover .ucm-tooltip-box,
.tk-grid-home > :nth-child(3n):hover .ucm-tooltip-box {
  transform: translateX(0) translateY(0) !important;
}

@media (max-width: 768px) {
  .ucm-news__grid { grid-template-columns: 1fr; }
}

/* ── Page Accueil — Nouveautés ── */
body.dark-mode .ucm-news__card {
  background:   #152338 !important;
  border-color: rgba(201,168,76,0.2) !important;
}
body.dark-mode .ucm-news__card:hover {
  background: #1a2f4e !important;
}
body.dark-mode .ucm-news__title {
  color: #e8d5a3 !important;
}
body.dark-mode .ucm-news__card:hover .ucm-news__title {
  color: #e8d5a3 !important;
}
body.dark-mode .ucm-news__date {
  color: #c9a84c !important;
}
body.dark-mode .ucm-news__info {
  border-color: rgba(201,168,76,0.5) !important;
  color:        #c9a84c !important;
}

/* ── Barre partage Q&R ── */
body.dark-mode .qr-share-btn {
  background:   rgba(255,255,255,0.05) !important;
  border-color: rgba(201,168,76,0.3) !important;
}
body.dark-mode .qr-share-btn svg {
  stroke: #8a9ab5 !important;
}
body.dark-mode .qr-share-btn:hover {
  background:   #1a4480 !important;
  border-color: #1a4480 !important;
}
body.dark-mode .qr-share-btn:hover svg {
  stroke: #c9a84c !important;
}

/* ══════════════════════════════════════════════════════════
   PAGE CONNEXION — Design premium
   ══════════════════════════════════════════════════════════ */

.com-users-login {
  max-width: 480px !important;
  margin:    3rem auto !important;
  padding:   0 1rem !important;
}

.com-users-login__form {
  background:    #cddaf0 !important;
  border:        1px solid #fff !important;
  border-radius: var(--radius-lg) !important;
  padding:       2.5rem 2rem !important;
  box-shadow:    0 2px 10px rgba(15,45,94,0.08) !important;
  transition:    transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94),
                 box-shadow 0.4s cubic-bezier(0.25,0.46,0.45,0.94) !important;
  will-change: transform !important;
}
.com-users-login__form:hover {
  transform:  translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(15,45,94,0.15), 0 3px 8px rgba(15,45,94,0.08) !important;
}

/* ── Labels ── */
.com-users-login .control-label label {
  font-family:    var(--font-body) !important;
  font-size:      0.78rem !important;
  font-weight:    700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color:          var(--blue-deep) !important;
}
.com-users-login .control-label label .star { display: none !important; }
.com-users-login .control-label label.required::after {
  content: " *" !important;
  color:   var(--gold) !important;
}

/* ── Champs ── */
.com-users-login .form-control {
  background:    rgba(255,255,255,0.6) !important;
  border:        1px solid #fff !important;
  border-radius: var(--radius-md) !important;
  padding:       0.75rem 1rem !important;
  font-family:   var(--font-body) !important;
  font-size:     0.925rem !important;
  color:         var(--text) !important;
  transition:    border-color 0.2s, background 0.2s, box-shadow 0.2s !important;
  box-shadow:    none !important;
}
.com-users-login .form-control:focus {
  border-color: var(--blue-mid) !important;
  box-shadow:   0 0 0 3px rgba(26,68,128,0.1) !important;
  background:   #fff !important;
  outline:      none !important;
}

/* ── Groupe mot de passe ── */
.com-users-login .input-group {
  display: flex !important;
  gap:     0 !important;
}
.com-users-login .input-group .form-control {
  border-right:  none !important;
  border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
}
.com-users-login .input-password-toggle {
  background:    rgba(255,255,255,0.6) !important;
  border:        1px solid #fff !important;
  border-left:   none !important;
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
  color:         var(--muted) !important;
  padding:       0 0.875rem !important;
  transition:    background 0.2s !important;
}
.com-users-login .input-password-toggle:hover {
  background: rgba(255,255,255,0.9) !important;
  color:      var(--blue-deep) !important;
}

/* ── Se rappeler de moi ── */
.com-users-login__remember { margin: 1rem 0 !important; }
.com-users-login .form-check-label {
  font-family: var(--font-body) !important;
  font-size:   0.875rem !important;
  color:       var(--muted) !important;
}

/* ── Bouton passkey ── */
.plg_system_webauthn_login_button {
  background:      rgba(255,255,255,0.5) !important;
  border:          1px solid #fff !important;
  border-radius:   var(--radius-md) !important;
  color:           var(--muted) !important;
  font-family:     var(--font-body) !important;
  font-size:       0.85rem !important;
  padding:         0.65rem 1rem !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  gap:             0.6rem !important;
  width:           100% !important;
  transition:      background 0.2s, color 0.2s !important;
  margin-bottom:   0.75rem !important;
}
.plg_system_webauthn_login_button svg {
  width:  20px !important;
  height: 20px !important;
}
.plg_system_webauthn_login_button:hover {
  background: rgba(255,255,255,0.85) !important;
  color:      var(--blue-mid) !important;
}

/* ── Bouton connexion ── */
.com-users-login .btn-primary {
  background:     var(--blue-deep) !important;
  border:         none !important;
  border-radius:  var(--radius-md) !important;
  color:          #fff !important;
  font-family:    var(--font-body) !important;
  font-size:      0.85rem !important;
  font-weight:    700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding:        0.85rem 2rem !important;
  width:          100% !important;
  transition:     background var(--transition-organic),
                  transform 0.2s cubic-bezier(0.25,0.46,0.45,0.94) !important;
}
.com-users-login .btn-primary:hover {
  background: var(--blue-mid) !important;
  transform:  translateY(-2px) !important;
}

/* ── Liens mot de passe / identifiant oublié ── */
.com-users-login__options {
  margin-top:    1.5rem !important;
  border:        1px solid rgba(255,255,255,0.8) !important;
  border-radius: var(--radius-md) !important;
  overflow:      hidden !important;
}
.com-users-login__options .list-group-item {
  font-family:     var(--font-body) !important;
  font-size:       0.875rem !important;
  color:           var(--blue-mid) !important;
  padding:         0.875rem 1.25rem !important;
  text-decoration: none !important;
  background:      rgba(255,255,255,0.5) !important;
  border-bottom:   1px solid rgba(255,255,255,0.6) !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: space-between !important;
  transition:      background 0.2s, color 0.2s, padding-left 0.3s cubic-bezier(0.25,0.46,0.45,0.94) !important;
}
.com-users-login__options .list-group-item:last-child { border-bottom: none !important; }
.com-users-login__options .list-group-item:hover {
  background:   rgba(255,255,255,0.85) !important;
  color:        var(--gold) !important;
  padding-left: 1.75rem !important;
}
.com-users-login__options .list-group-item {
  background: rgba(205,218,240,0.5) !important;
}

/* ── Dark mode ── */
body.dark-mode .com-users-login__form {
  background:   #152338 !important;
  border-color: rgba(201,168,76,0.2) !important;
}
body.dark-mode .com-users-login__form:hover {
  box-shadow: 0 12px 32px rgba(0,0,0,0.3) !important;
}
body.dark-mode .com-users-login .control-label label { color: #e8d5a3 !important; }
body.dark-mode .com-users-login .form-control {
  background:   #0f1e32 !important;
  border-color: rgba(201,168,76,0.2) !important;
  color:        #c8d4e8 !important;
}
body.dark-mode .com-users-login .form-control:focus {
  border-color: rgba(201,168,76,0.5) !important;
  box-shadow:   0 0 0 3px rgba(201,168,76,0.08) !important;
  background:   #0f1e32 !important;
}
body.dark-mode .com-users-login .input-password-toggle {
  background:   #0f1e32 !important;
  border-color: rgba(201,168,76,0.2) !important;
  color:        #6b7d8f !important;
}
body.dark-mode .com-users-login .form-check-label   { color: #6b7d8f !important; }
body.dark-mode .plg_system_webauthn_login_button {
  background:   #1a2e4a !important;
  border-color: rgba(201,168,76,0.2) !important;
  color:        #6b7d8f !important;
}
body.dark-mode .com-users-login__options {
  border-color: rgba(201,168,76,0.15) !important;
}
body.dark-mode .com-users-login__options .list-group-item {
  background:   #152338 !important;
  border-color: rgba(201,168,76,0.1) !important;
  color:        #a8c4e8 !important;
}
body.dark-mode .com-users-login__options .list-group-item:hover {
  background: #0f2d5e !important;
  color:      var(--gold) !important;
}

/* ══════════════════════════════════════════════════════════
   PAGE PROFIL — Design premium
   ══════════════════════════════════════════════════════════ */

.com-users-profile__edit {
  max-width: 560px !important;
  margin:    3rem auto !important;
  padding:   0 1rem !important;
}

.com-users-profile__edit-form {
  background:    #cddaf0 !important;
  border:        1px solid #fff !important;
  border-radius: var(--radius-lg) !important;
  padding:       2.5rem 2rem !important;
  box-shadow:    0 2px 10px rgba(15,45,94,0.08) !important;
  transition:    transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94),
                 box-shadow 0.4s cubic-bezier(0.25,0.46,0.45,0.94) !important;
  will-change:   transform !important;
}
.com-users-profile__edit-form:hover {
  transform:  translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(15,45,94,0.15), 0 3px 8px rgba(15,45,94,0.08) !important;
}

/* ── Légendes fieldset ── */
.com-users-profile__edit-form legend {
  font-family:    var(--font-display) !important;
  font-size:      1.1rem !important;
  font-weight:    400 !important;
  color:          var(--blue-deep) !important;
  letter-spacing: 0.04em !important;
  border-bottom:  1.5px solid rgba(201,168,76,0.4) !important;
  padding-bottom: 0.5rem !important;
  margin-bottom:  1.5rem !important;
  width:          100% !important;
}

/* ── Labels ── */
.com-users-profile__edit .control-label label {
  font-family:    var(--font-body) !important;
  font-size:      0.78rem !important;
  font-weight:    700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color:          var(--blue-deep) !important;
}
.com-users-profile__edit .control-label label .star { display: none !important; }
.com-users-profile__edit .control-label label.required::after {
  content: " *" !important;
  color:   var(--gold) !important;
}

/* ── Champs ── */
.com-users-profile__edit .form-control {
  background:    rgba(255,255,255,0.6) !important;
  border:        1px solid #fff !important;
  border-radius: var(--radius-md) !important;
  padding:       0.75rem 1rem !important;
  font-family:   var(--font-body) !important;
  font-size:     0.925rem !important;
  color:         var(--text) !important;
  transition:    border-color 0.2s, background 0.2s, box-shadow 0.2s !important;
  box-shadow:    none !important;
}
.com-users-profile__edit .form-control:focus {
  border-color: var(--blue-mid) !important;
  box-shadow:   0 0 0 3px rgba(26,68,128,0.1) !important;
  background:   #fff !important;
  outline:      none !important;
}
.com-users-profile__edit .form-control[readonly] {
  background: rgba(255,255,255,0.3) !important;
  color:      var(--muted) !important;
  cursor:     not-allowed !important;
}

/* ── Texte d'aide ── */
.com-users-profile__edit .form-text {
  font-size:  0.78rem !important;
  color:      var(--muted) !important;
  margin-top: 0.35rem !important;
}

/* ── Exigences mot de passe ── */
.com-users-profile__edit .small.text-muted {
  font-size:     0.78rem !important;
  color:         var(--muted) !important;
  margin-bottom: 0.4rem !important;
}

/* ── Groupe mot de passe ── */
.com-users-profile__edit .input-group {
  display: flex !important;
  gap:     0 !important;
}
.com-users-profile__edit .input-group .form-control {
  border-right:  none !important;
  border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
}
.com-users-profile__edit .input-password-toggle {
  background:    rgba(255,255,255,0.6) !important;
  border:        1px solid #fff !important;
  border-left:   none !important;
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
  color:         var(--muted) !important;
  padding:       0 0.875rem !important;
  transition:    background 0.2s !important;
}
.com-users-profile__edit .input-password-toggle:hover {
  background: rgba(255,255,255,0.9) !important;
  color:      var(--blue-deep) !important;
}

/* ── Select ── */
.com-users-profile__edit .form-select {
  background:    rgba(255,255,255,0.6) !important;
  border:        1px solid #fff !important;
  border-radius: var(--radius-md) !important;
  padding:       0.75rem 1rem !important;
  font-family:   var(--font-body) !important;
  font-size:     0.925rem !important;
  color:         var(--text) !important;
  transition:    border-color 0.2s, background 0.2s !important;
}
.com-users-profile__edit .form-select:focus {
  border-color: var(--blue-mid) !important;
  box-shadow:   0 0 0 3px rgba(26,68,128,0.1) !important;
  background:   #fff !important;
  outline:      none !important;
}

/* ── Tableau webauthn ── */
.com-users-profile__edit-form .table thead th {
  background-color: var(--blue-deep) !important;
  color:            var(--gold-light) !important;
  border-color:     rgba(201,168,76,0.2) !important;
}
.com-users-profile__edit-form .table tbody td {
  background:   rgba(255,255,255,0.6) !important;
  color:        var(--text) !important;
  border-color: rgba(255,255,255,0.6) !important;
}

/* ── Bouton ajouter clé d'accès ── */
.com-users-profile__edit-form .btn-success {
  background:    var(--blue-deep) !important;
  border-color:  var(--blue-deep) !important;
  border-radius: var(--radius-md) !important;
  color:         #fff !important;
  font-family:   var(--font-body) !important;
  font-size:     0.85rem !important;
  font-weight:   700 !important;
  transition:    background var(--transition-organic),
                 transform 0.2s cubic-bezier(0.25,0.46,0.45,0.94) !important;
}
.com-users-profile__edit-form .btn-success:hover {
  background: var(--blue-mid) !important;
  transform:  translateY(-2px) !important;
}

/* ── Bouton submit ── */
.com-users-profile__edit .btn-primary {
  background:     var(--blue-deep) !important;
  border:         none !important;
  border-radius:  var(--radius-md) !important;
  color:          #fff !important;
  font-family:    var(--font-body) !important;
  font-size:      0.85rem !important;
  font-weight:    700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding:        0.85rem 2rem !important;
  transition:     background var(--transition-organic),
                  transform 0.2s cubic-bezier(0.25,0.46,0.45,0.94) !important;
}
.com-users-profile__edit .btn-primary:hover {
  background: var(--blue-mid) !important;
  transform:  translateY(-2px) !important;
}

/* ══════════════════════════════════════════════════════════
   DARK MODE — Page profil
   ══════════════════════════════════════════════════════════ */

body.dark-mode .com-users-profile__edit-form {
  background:   #152338 !important;
  border-color: rgba(201,168,76,0.2) !important;
}
body.dark-mode .com-users-profile__edit-form:hover {
  box-shadow: 0 12px 32px rgba(0,0,0,0.3) !important;
}
body.dark-mode .com-users-profile__edit-form legend {
  color:        #e8d5a3 !important;
  border-color: rgba(201,168,76,0.3) !important;
}
body.dark-mode .com-users-profile__edit .control-label label {
  color: #e8d5a3 !important;
}
body.dark-mode .com-users-profile__edit .form-control,
body.dark-mode .com-users-profile__edit .form-select {
  background:   #0f1e32 !important;
  border-color: rgba(201,168,76,0.2) !important;
  color:        #c8d4e8 !important;
}
body.dark-mode .com-users-profile__edit .form-control:focus,
body.dark-mode .com-users-profile__edit .form-select:focus {
  border-color: rgba(201,168,76,0.5) !important;
  box-shadow:   0 0 0 3px rgba(201,168,76,0.08) !important;
  background:   #0f1e32 !important;
}
body.dark-mode .com-users-profile__edit .form-control[readonly] {
  background: rgba(15,30,50,0.5) !important;
  color:      #6b7d8f !important;
}
body.dark-mode .com-users-profile__edit .input-password-toggle {
  background:   #0f1e32 !important;
  border-color: rgba(201,168,76,0.2) !important;
  color:        #6b7d8f !important;
}
body.dark-mode .com-users-profile__edit .form-text { color: #6b7d8f !important; }
body.dark-mode .com-users-profile__edit-form .table tbody td {
  background:   #0f1e32 !important;
  color:        #c8d4e8 !important;
  border-color: rgba(201,168,76,0.1) !important;
}
/* ── Dark mode — Fancy select (fuseau horaire) ── */
body.dark-mode joomla-field-fancy-select .choices {
  background:   #0f1e32 !important;
  border-color: rgba(201,168,76,0.2) !important;
}
body.dark-mode joomla-field-fancy-select .choices__inner {
  background:   #0f1e32 !important;
  border-color: rgba(201,168,76,0.2) !important;
  color:        #c8d4e8 !important;
}
body.dark-mode joomla-field-fancy-select .choices__input {
  background:   #0f1e32 !important;
  color:        #c8d4e8 !important;
}
body.dark-mode joomla-field-fancy-select .choices__list--dropdown {
  background:   #0f1e32 !important;
  border-color: rgba(201,168,76,0.2) !important;
}
body.dark-mode joomla-field-fancy-select .choices__item {
  color: #c8d4e8 !important;
}
body.dark-mode joomla-field-fancy-select .choices__item--selectable.is-highlighted {
  background: #1a4480 !important;
  color:      #e8d5a3 !important;
}
body.dark-mode joomla-field-fancy-select .choices__placeholder {
  color: #6b7d8f !important;
}
body.dark-mode joomla-field-fancy-select .choices__button {
  filter: invert(0.7) !important;
}
/* ══════════════════════════════════════════════════════════
   PAGE INSCRIPTION — Design premium
   ══════════════════════════════════════════════════════════ */

.com-users-registration {
  max-width: 520px !important;
  margin:    3rem auto !important;
  padding:   0 1rem !important;
}

.com-users-registration__form {
  background:    #cddaf0 !important;
  border:        1px solid #fff !important;
  border-radius: var(--radius-lg) !important;
  padding:       2.5rem 2rem !important;
  box-shadow:    0 2px 10px rgba(15,45,94,0.08) !important;
  transition:    transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94),
                 box-shadow 0.4s cubic-bezier(0.25,0.46,0.45,0.94) !important;
  will-change:   transform !important;
}
.com-users-registration__form:hover {
  transform:  translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(15,45,94,0.15), 0 3px 8px rgba(15,45,94,0.08) !important;
}

/* ── Légende fieldset ── */
.com-users-registration__form legend {
  font-family:    var(--font-display) !important;
  font-size:      1.1rem !important;
  font-weight:    400 !important;
  color:          var(--blue-deep) !important;
  letter-spacing: 0.04em !important;
  border-bottom:  1.5px solid rgba(201,168,76,0.4) !important;
  padding-bottom: 0.5rem !important;
  margin-bottom:  1.5rem !important;
  width:          100% !important;
}

/* ── Champ requis notice ── */
.com-users-registration__form .field-spacer .spacer {
  font-size: 0.78rem !important;
  color:     var(--muted) !important;
}
.com-users-registration__form .field-spacer .red {
  color: var(--gold) !important;
}

/* ── Labels ── */
.com-users-registration .control-label label {
  font-family:    var(--font-body) !important;
  font-size:      0.78rem !important;
  font-weight:    700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color:          var(--blue-deep) !important;
}
.com-users-registration .control-label label .star { display: none !important; }
.com-users-registration .control-label label.required::after {
  content: " *" !important;
  color:   var(--gold) !important;
}

/* ── Champs ── */
.com-users-registration .form-control {
  background:    rgba(255,255,255,0.6) !important;
  border:        1px solid #fff !important;
  border-radius: var(--radius-md) !important;
  padding:       0.75rem 1rem !important;
  font-family:   var(--font-body) !important;
  font-size:     0.925rem !important;
  color:         var(--text) !important;
  transition:    border-color 0.2s, background 0.2s, box-shadow 0.2s !important;
  box-shadow:    none !important;
}
.com-users-registration .form-control:focus {
  border-color: var(--blue-mid) !important;
  box-shadow:   0 0 0 3px rgba(26,68,128,0.1) !important;
  background:   #fff !important;
  outline:      none !important;
}

/* ── Texte d'aide mot de passe ── */
.com-users-registration .small.text-muted {
  font-size:     0.78rem !important;
  color:         var(--muted) !important;
  margin-bottom: 0.4rem !important;
}

/* ── Groupe mot de passe ── */
.com-users-registration .input-group {
  display: flex !important;
  gap:     0 !important;
}
.com-users-registration .input-group .form-control {
  border-right:  none !important;
  border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
}
.com-users-registration .input-password-toggle {
  background:    rgba(255,255,255,0.6) !important;
  border:        1px solid #fff !important;
  border-left:   none !important;
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
  color:         var(--muted) !important;
  padding:       0 0.875rem !important;
  transition:    background 0.2s !important;
}
.com-users-registration .input-password-toggle:hover {
  background: rgba(255,255,255,0.9) !important;
  color:      var(--blue-deep) !important;
}

/* ── Bouton S'inscrire ── */
.com-users-registration__register {
  background:     var(--blue-deep) !important;
  border:         none !important;
  border-radius:  var(--radius-md) !important;
  color:          #fff !important;
  font-family:    var(--font-body) !important;
  font-size:      0.85rem !important;
  font-weight:    700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding:        0.85rem 2rem !important;
  transition:     background var(--transition-organic),
                  transform 0.2s cubic-bezier(0.25,0.46,0.45,0.94) !important;
}
.com-users-registration__register:hover {
  background: var(--blue-mid) !important;
  transform:  translateY(-2px) !important;
}

/* ══════════════════════════════════════════════════════════
   DARK MODE — Page inscription
   ══════════════════════════════════════════════════════════ */

body.dark-mode .com-users-registration__form {
  background:   #152338 !important;
  border-color: rgba(201,168,76,0.2) !important;
}
body.dark-mode .com-users-registration__form:hover {
  box-shadow: 0 12px 32px rgba(0,0,0,0.3) !important;
}
body.dark-mode .com-users-registration__form legend {
  color:        #e8d5a3 !important;
  border-color: rgba(201,168,76,0.3) !important;
}
body.dark-mode .com-users-registration .control-label label {
  color: #e8d5a3 !important;
}
body.dark-mode .com-users-registration .form-control {
  background:   #0f1e32 !important;
  border-color: rgba(201,168,76,0.2) !important;
  color:        #c8d4e8 !important;
}
body.dark-mode .com-users-registration .form-control:focus {
  border-color: rgba(201,168,76,0.5) !important;
  box-shadow:   0 0 0 3px rgba(201,168,76,0.08) !important;
  background:   #0f1e32 !important;
}
body.dark-mode .com-users-registration .input-password-toggle {
  background:   #0f1e32 !important;
  border-color: rgba(201,168,76,0.2) !important;
  color:        #6b7d8f !important;
}
body.dark-mode .com-users-registration .small.text-muted {
  color: #6b7d8f !important;
}

/* ══════════════════════════════════════════════════════════
   PAGE RESET MOT DE PASSE + IDENTIFIANT PERDU
   ══════════════════════════════════════════════════════════ */

.com-users-reset,
.com-users-remind {
  max-width: 480px !important;
  margin:    3rem auto !important;
  padding:   0 1rem !important;
}

.com-users-reset__form,
.com-users-remind__form {
  background:    #cddaf0 !important;
  border:        1px solid #fff !important;
  border-radius: var(--radius-lg) !important;
  padding:       2.5rem 2rem !important;
  box-shadow:    0 2px 10px rgba(15,45,94,0.08) !important;
  transition:    transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94),
                 box-shadow 0.4s cubic-bezier(0.25,0.46,0.45,0.94) !important;
  will-change:   transform !important;
}
.com-users-reset__form:hover,
.com-users-remind__form:hover {
  transform:  translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(15,45,94,0.15), 0 3px 8px rgba(15,45,94,0.08) !important;
}

/* ── Légende / description ── */
.com-users-reset__form legend,
.com-users-remind__form legend {
  font-family:    var(--font-display) !important;
  font-size:      1rem !important;
  font-weight:    400 !important;
  color:          var(--blue-deep) !important;
  letter-spacing: 0.02em !important;
  border-bottom:  1.5px solid rgba(201,168,76,0.4) !important;
  padding-bottom: 0.75rem !important;
  margin-bottom:  1.25rem !important;
  width:          100% !important;
  line-height:    1.6 !important;
}

/* ── Texte descriptif ── */
.com-users-reset__form p,
.com-users-remind__form p {
  font-size:     0.875rem !important;
  color:         var(--muted) !important;
  margin-bottom: 1.5rem !important;
  line-height:   1.7 !important;
}

/* ── Labels ── */
.com-users-reset .control-label label,
.com-users-remind .control-label label {
  font-family:    var(--font-body) !important;
  font-size:      0.78rem !important;
  font-weight:    700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color:          var(--blue-deep) !important;
}
.com-users-reset .control-label label .star,
.com-users-remind .control-label label .star { display: none !important; }
.com-users-reset .control-label label.required::after,
.com-users-remind .control-label label.required::after {
  content: " *" !important;
  color:   var(--gold) !important;
}

/* ── Champ email ── */
.com-users-reset .form-control,
.com-users-remind .form-control {
  background:    rgba(255,255,255,0.6) !important;
  border:        1px solid #fff !important;
  border-radius: var(--radius-md) !important;
  padding:       0.75rem 1rem !important;
  font-family:   var(--font-body) !important;
  font-size:     0.925rem !important;
  color:         var(--text) !important;
  transition:    border-color 0.2s, background 0.2s, box-shadow 0.2s !important;
  box-shadow:    none !important;
}
.com-users-reset .form-control:focus,
.com-users-remind .form-control:focus {
  border-color: var(--blue-mid) !important;
  box-shadow:   0 0 0 3px rgba(26,68,128,0.1) !important;
  background:   #fff !important;
  outline:      none !important;
}

/* ── Bouton Envoyer ── */
.com-users-reset__submit .btn-primary,
.com-users-remind__submit .btn-primary {
  background:     var(--blue-deep) !important;
  border:         none !important;
  border-radius:  var(--radius-md) !important;
  color:          #fff !important;
  font-family:    var(--font-body) !important;
  font-size:      0.85rem !important;
  font-weight:    700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding:        0.85rem 2rem !important;
  transition:     background var(--transition-organic),
                  transform 0.2s cubic-bezier(0.25,0.46,0.45,0.94) !important;
}
.com-users-reset__submit .btn-primary:hover,
.com-users-remind__submit .btn-primary:hover {
  background: var(--blue-mid) !important;
  transform:  translateY(-2px) !important;
}

/* ══════════════════════════════════════════════════════════
   DARK MODE — Reset + Remind
   ══════════════════════════════════════════════════════════ */

body.dark-mode .com-users-reset__form,
body.dark-mode .com-users-remind__form {
  background:   #152338 !important;
  border-color: rgba(201,168,76,0.2) !important;
}
body.dark-mode .com-users-reset__form:hover,
body.dark-mode .com-users-remind__form:hover {
  box-shadow: 0 12px 32px rgba(0,0,0,0.3) !important;
}
body.dark-mode .com-users-reset__form legend,
body.dark-mode .com-users-remind__form legend {
  color:        #e8d5a3 !important;
  border-color: rgba(201,168,76,0.3) !important;
}
body.dark-mode .com-users-reset__form p,
body.dark-mode .com-users-remind__form p {
  color: #6b7d8f !important;
}
body.dark-mode .com-users-reset .control-label label,
body.dark-mode .com-users-remind .control-label label {
  color: #e8d5a3 !important;
}
body.dark-mode .com-users-reset .form-control,
body.dark-mode .com-users-remind .form-control {
  background:   #0f1e32 !important;
  border-color: rgba(201,168,76,0.2) !important;
  color:        #c8d4e8 !important;
}
body.dark-mode .com-users-reset .form-control:focus,
body.dark-mode .com-users-remind .form-control:focus {
  border-color: rgba(201,168,76,0.5) !important;
  box-shadow:   0 0 0 3px rgba(201,168,76,0.08) !important;
  background:   #0f1e32 !important;
}