/* =========================================================
   CPE — Centre de Publications Évangéliques
   Custom styles layered on Bootstrap 5.3
   Direction: Warm literary publisher
   ========================================================= */

:root {
  --cpe-navy:        #1A4A78;   /* deep navy in the CPE logo's blue family */
  --cpe-navy-soft:   #225A92;
  --cpe-navy-deep:   #0F3157;   /* darker shade for overlays needing contrast */
  --cpe-logo-blue:   #4A9DD4;   /* the logo's bright sky-blue, used as light accent */
  --cpe-accent:      #C8553D;   /* terracotta */
  --cpe-accent-dk:   #A8412D;
  --cpe-accent-soft: #E8B7A8;
  --cpe-cream:       #FAF6EE;
  --cpe-paper:       #FFFFFF;
  --cpe-sand:        #F2EBDA;   /* warm sand — same family as cream, a touch deeper */
  --cpe-ink:         #1C1A18;
  --cpe-muted:       #5C5552;
  --cpe-border:      #E6DFD2;
  --cpe-gold:        #C9A66B;

  --cpe-radius:      14px;
  --cpe-shadow-sm:   0 4px 14px rgba(26, 74, 120, 0.07);
  --cpe-shadow-md:   0 14px 30px rgba(26, 74, 120, 0.11);
  --cpe-shadow-lg:   0 24px 60px rgba(15, 49, 87, 0.20);
}

/* -------- Base -------- */
html { scroll-behavior: smooth; }

body {
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  color: var(--cpe-ink);
  background-color: var(--cpe-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .btn, .eyebrow, .stat__number {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: -0.01em;
}

h1 { font-weight: 800; }
h2 { font-weight: 700; }
h3, h4, h5, h6 { font-weight: 600; }

a { color: var(--cpe-accent); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--cpe-accent-dk); }

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

::selection { background: var(--cpe-accent); color: #fff; }

.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 2000;
  background: var(--cpe-navy); color: #fff; padding: .5rem .9rem;
  border-radius: 8px; font-family: 'Inter', sans-serif;
}
.skip-link:focus { left: 8px; color: #fff; }

/* -------- Sections -------- */
.page-section {
  padding: clamp(4rem, 8vw, 7rem) 0;
  position: relative;
}
.section-cream { background-color: var(--cpe-cream); }
.section-paper { background-color: var(--cpe-paper); }
.section-sand  { background-color: var(--cpe-sand); }
.section-navy  { background-color: var(--cpe-navy); color: #fff; }

.section-title {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  color: var(--cpe-navy);
  margin: 0 0 1rem;
}
.section-navy .section-title { color: #fff; }

.eyebrow {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .78rem;
  color: var(--cpe-accent);
  margin-bottom: .6rem;
}
.eyebrow-light { color: var(--cpe-accent-soft); }

.lead-body {
  font-size: 1.06rem;
  line-height: 1.85;
  color: var(--cpe-muted);
  margin-bottom: 1rem;
}
.section-navy .lead-body { color: rgba(255,255,255,.85); }
.text-white-90 { color: rgba(255,255,255,.9); }

.divider {
  display: inline-block;
  width: 3.5rem;
  height: 3px;
  margin: 0 auto 1.6rem;
  background: var(--cpe-accent);
  border-radius: 3px;
}
.divider-accent { background: var(--cpe-accent); }

/* -------- Navigation -------- */
#mainNav {
  background-color: rgba(250, 246, 238, 0.0);
  backdrop-filter: blur(0);
  transition: background-color .3s ease, box-shadow .3s ease, padding .25s ease;
  padding: 1.1rem 0;
}
#mainNav .navbar-brand {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  line-height: 1;
  padding: .25rem 0;
}
/* Generous gap from the brand to the first menu item on xl+ screens */
@media (min-width: 1200px) {
  #mainNav .navbar-brand { margin-right: 2.5rem; }
}
/* "Éditions" — terracotta tile, refined size */
#mainNav .brand-mark {
  display: inline-flex;
  align-items: center;
  background: var(--cpe-accent);
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
  padding: .35rem .75rem;
  border-radius: 7px;
  letter-spacing: .04em;
  line-height: 1.1;
  box-shadow: 0 4px 12px rgba(200, 85, 61, 0.24);
}
/* "CPE" — sized to match the "Éditions" tile */
#mainNav .brand-sub {
  color: #fff;
  font-weight: 800;
  font-size: .92rem;
  letter-spacing: .05em;
  text-shadow: 0 1px 2px rgba(15, 49, 87, 0.30);
}
#mainNav .nav-link {
  color: rgba(255,255,255,.92);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: .94rem;
  padding: .5rem .9rem !important;
  position: relative;
}
#mainNav .nav-link::after {
  content: "";
  position: absolute;
  left: .9rem; right: .9rem; bottom: .35rem;
  height: 2px;
  background: var(--cpe-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
}
#mainNav .nav-link:hover::after,
#mainNav .nav-link.active::after { transform: scaleX(1); }
#mainNav .nav-link:hover { color: #fff; }

#mainNav .navbar-toggler {
  border: 1px solid rgba(255,255,255,.4);
  padding: .35rem .55rem;
}
#mainNav .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255,255,255,0.9%29' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

#mainNav.navbar-shrink {
  background-color: rgba(250, 246, 238, 0.96);
  backdrop-filter: blur(10px);
  box-shadow: var(--cpe-shadow-sm);
  padding: .55rem 0;
}
#mainNav.navbar-shrink .nav-link { color: var(--cpe-navy); }
#mainNav.navbar-shrink .nav-link:hover { color: var(--cpe-accent); }
/* On cream, drop the light blue down to navy-soft so CPE stays readable. */
#mainNav.navbar-shrink .brand-sub {
  color: var(--cpe-navy-soft);
  text-shadow: none;
}
/* Slight softening of the tile shadow on the lighter background */
#mainNav.navbar-shrink .brand-mark {
  box-shadow: 0 3px 10px rgba(200, 85, 61, 0.20);
}
#mainNav.navbar-shrink .navbar-toggler {
  border-color: rgba(26, 74, 120, .28);
}
#mainNav.navbar-shrink .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%231A4A78' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* -------- Navbar search -------- */
.nav-search { min-width: 0; }
.nav-search__wrap {
  position: relative;
  width: 100%;
}
.nav-search__input {
  width: 100%;
  min-width: 220px;
  height: 40px;
  padding: 0 2.2rem 0 2.4rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: .92rem;
  outline: none;
  /* Soft drop-shadow to give the input similar visual weight to the
     terracotta brand tile on the opposite end of the navbar. */
  box-shadow: 0 4px 12px rgba(15, 49, 87, 0.22);
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.nav-search__input::placeholder { color: rgba(255, 255, 255, 0.82); }
.nav-search__input:focus {
  background: rgba(255, 255, 255, 0.96);
  color: var(--cpe-navy);
  border-color: var(--cpe-accent);
  box-shadow: 0 0 0 .2rem rgba(200, 85, 61, .18);
}
.nav-search__input:focus::placeholder { color: var(--cpe-muted); }
/* Remove the native clear "x" on Webkit so our custom one is the only one */
.nav-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.nav-search__icon {
  position: absolute;
  left: .85rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  pointer-events: none;
}
.nav-search__input:focus ~ .nav-search__icon { color: var(--cpe-accent); }

.nav-search__clear {
  position: absolute;
  right: .55rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  padding: .2rem;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  line-height: 1;
}
.nav-search__input:focus ~ .nav-search__clear { color: var(--cpe-muted); }
.nav-search__clear:hover { color: var(--cpe-accent); }

/* Results dropdown */
.nav-search__results {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  left: 0;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--cpe-paper);
  border: 1px solid var(--cpe-border);
  border-radius: var(--cpe-radius);
  box-shadow: var(--cpe-shadow-md);
  z-index: 1050;
  padding: .35rem;
}
.nav-search__result {
  display: block;
  width: 100%;
  padding: .55rem .8rem;
  background: transparent;
  border: 0;
  border-radius: 8px;
  text-align: left;
  font-family: 'Inter', sans-serif;
  font-size: .92rem;
  color: var(--cpe-ink);
  cursor: pointer;
  line-height: 1.35;
}
.nav-search__result + .nav-search__result { margin-top: 2px; }
.nav-search__result:hover,
.nav-search__result.is-active {
  background: rgba(200, 85, 61, .10);
  color: var(--cpe-navy);
}
.nav-search__result mark {
  background: var(--cpe-cream);
  color: var(--cpe-accent-dk);
  font-weight: 600;
  padding: 0 1px;
  border-radius: 2px;
}
.nav-search__title { display: block; color: var(--cpe-navy); font-weight: 600; }
.nav-search__section {
  display: block;
  margin-top: 2px;
  font-size: .78rem;
  color: var(--cpe-muted);
}
.nav-search__none {
  padding: .85rem 1rem;
  font-family: 'Inter', sans-serif;
  font-size: .9rem;
  color: var(--cpe-muted);
}

/* Shrunk navbar: search adapts to the cream background, keeps its weight */
#mainNav.navbar-shrink .nav-search__input {
  border-color: rgba(26, 74, 120, 0.25);
  background: #FFFFFF;
  color: var(--cpe-navy);
  box-shadow: 0 4px 12px rgba(26, 74, 120, 0.12);
}
#mainNav.navbar-shrink .nav-search__input::placeholder { color: var(--cpe-muted); }
#mainNav.navbar-shrink .nav-search__icon { color: var(--cpe-navy); }
#mainNav.navbar-shrink .nav-search__clear { color: var(--cpe-muted); }

/* When user lands on a search result, flash a soft terracotta outline */
.is-search-target {
  animation: cpe-search-pulse 2s ease-out;
  border-radius: var(--cpe-radius);
}
@keyframes cpe-search-pulse {
  0%   { box-shadow: 0 0 0 0    rgba(200, 85, 61, 0.55); }
  50%  { box-shadow: 0 0 0 14px rgba(200, 85, 61, 0.00); }
  100% { box-shadow: 0 0 0 0    rgba(200, 85, 61, 0.00); }
}

/* Burger-menu surface — navbar collapses below xl (1200px) so search has room
   alongside the menu on standard laptop widths. */
@media (max-width: 1199.98px) {
  /* Inside the burger drawer, give the search a compact pill width
     rather than stretching across the full drawer row. */
  .nav-search { width: auto; max-width: 300px; }
  .nav-search__input { min-width: 0; }

  #mainNav .navbar-collapse {
    background: rgba(15, 49, 87, .96);
    margin-top: .8rem;
    padding: 1rem;
    border-radius: var(--cpe-radius);
  }
  #mainNav.navbar-shrink .navbar-collapse {
    background: var(--cpe-paper);
    box-shadow: var(--cpe-shadow-md);
  }
  #mainNav .nav-link { padding: .65rem .9rem !important; }

  /* Inside the burger drawer the nav-link spans the full row width, so the
     desktop full-width underline looks wrong. Hide that pseudo-element and
     use a native text-decoration underline, which only fits under the text. */
  #mainNav .nav-link::after { display: none; }
  #mainNav .nav-link:hover,
  #mainNav .nav-link.active {
    text-decoration: underline;
    text-decoration-color: var(--cpe-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
  }
}

/* -------- Hero -------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-image: url("../assets/img/bg-masthead.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
  isolation: isolate;
}
.hero__overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(200, 85, 61, 0.22), transparent 55%),
    linear-gradient(180deg, rgba(26, 74, 120, .40) 0%, rgba(15, 49, 87, .72) 100%);
  z-index: -1;
}
.hero .container { position: relative; padding-top: 6rem; padding-bottom: 4rem; }
.hero__logo {
  width: 120px; height: auto;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
  background: rgba(255,255,255,.92);
  padding: .6rem;
  border-radius: 14px;
}
.hero__eyebrow {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-size: .78rem;
  color: var(--cpe-accent-soft);
  margin-bottom: .9rem;
}
.hero__title {
  font-size: clamp(2.1rem, 5.5vw, 4.2rem);
  line-height: 1.05;
  margin-bottom: 1.4rem;
  font-weight: 800;
  text-wrap: balance;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
.hero__lede {
  font-family: 'Source Serif 4', serif;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.75;
  color: rgba(255,255,255,.95);
  max-width: 56ch;
  margin: 0 auto 2rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.40);
}
.hero__actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.hero__scroll {
  position: absolute;
  bottom: 1.8rem; left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.85);
  font-size: 1.8rem;
  animation: bob 2.2s ease-in-out infinite;
}
.hero__scroll:hover { color: #fff; }
@keyframes bob { 0%,100%{ transform: translate(-50%, 0);} 50%{ transform: translate(-50%, 8px);} }

/* -------- Buttons -------- */
.btn {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: 999px;
  padding: .7rem 1.5rem;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn-lg { padding: .85rem 1.8rem; font-size: 1rem; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-accent {
  background: var(--cpe-accent);
  color: #fff;
  border: 1px solid var(--cpe-accent);
  box-shadow: 0 8px 22px rgba(200,85,61,.30);
}
.btn-accent:hover { background: var(--cpe-accent-dk); border-color: var(--cpe-accent-dk); color: #fff; }
.btn-accent:focus-visible {
  outline: 3px solid var(--cpe-accent-soft);
  outline-offset: 2px;
}

.btn-outline-light {
  color: #fff; border: 1px solid rgba(255,255,255,.7); background: transparent;
}
.btn-outline-light:hover { background: #fff; color: var(--cpe-navy); border-color: #fff; }

.btn-outline-navy {
  color: var(--cpe-navy); border: 1px solid var(--cpe-navy); background: transparent;
}
.btn-outline-navy:hover { background: var(--cpe-navy); color: #fff; }

/* -------- Stats -------- */
.stats { margin-top: 2.5rem; }
.stat__number {
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  font-weight: 800;
  color: var(--cpe-accent);
  line-height: 1;
}
.stat__label {
  font-family: 'Inter', sans-serif;
  font-size: .9rem;
  color: var(--cpe-muted);
  margin-top: .4rem;
}

/* -------- Service cards -------- */
.services-grid .col-lg-4 { margin-top: 1.5rem; }
.service-card {
  background: var(--cpe-paper);
  border: 1px solid var(--cpe-border);
  border-radius: var(--cpe-radius);
  padding: 2rem 1.6rem;
  text-align: left;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  height: 100%;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--cpe-shadow-md);
  border-color: transparent;
}
.service-card__icon {
  font-size: 1.8rem;
  width: 3.2rem; height: 3.2rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(200, 85, 61, 0.10);
  color: var(--cpe-accent);
  border-radius: 12px;
  margin-bottom: 1rem;
}
.service-card__title {
  font-size: 1.12rem;
  color: var(--cpe-navy);
  margin-bottom: .5rem;
}
.service-card__text {
  color: var(--cpe-muted);
  font-size: .96rem;
  margin: 0;
  line-height: 1.7;
}

/* -------- Book grid -------- */
.book-grid { margin-top: 1.5rem; }
.book-card {
  display: block;
  background: var(--cpe-paper);
  border-radius: var(--cpe-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--cpe-shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
  height: 100%;
}
.book-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--cpe-shadow-lg);
}
.book-card__cover {
  position: relative;
  aspect-ratio: 2 / 3;
  background:
    linear-gradient(160deg, rgba(26, 74, 120, .05), rgba(200, 85, 61, .06));
  overflow: hidden;
}
.book-card__cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .6s ease;
  display: block;
}
.book-card:hover .book-card__cover img { transform: scale(1.04); }
.book-card__body {
  padding: 1rem 1.1rem 1.2rem;
}
.book-card__title {
  font-size: 1.02rem;
  color: var(--cpe-navy);
  margin: 0 0 .4rem;
  line-height: 1.3;
}
.book-card__desc {
  font-size: .9rem;
  color: var(--cpe-muted);
  margin: 0;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.book-card__badge {
  position: absolute;
  top: .8rem; left: .8rem;
  background: rgba(15, 49, 87, 0.92);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .3rem .55rem;
  border-radius: 6px;
}
.book-card--coming { cursor: default; }
.book-card--coming:hover { transform: translateY(-3px); }

/* -------- Event cards -------- */
.events-grid { margin-top: 1.5rem; }
.event-card {
  display: flex;
  flex-direction: column;
  background: var(--cpe-paper);
  border: 1px solid var(--cpe-border);
  border-radius: var(--cpe-radius);
  overflow: hidden;
  box-shadow: var(--cpe-shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
  height: 100%;
}
.event-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--cpe-shadow-md);
}

.event-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(26, 74, 120, .06), rgba(200, 85, 61, .06));
}
/* Poster variant — portrait images (book covers, affiches) need their own
   aspect ratio so `object-fit: cover` doesn't crop them. Card width is also
   capped so a tall poster doesn't dominate the section. */
.event-card--poster {
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}
.event-card--poster .event-card__media { aspect-ratio: 5 / 8; }
.event-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .6s ease;
}
.event-card:hover .event-card__media img { transform: scale(1.04); }

/* Calendar-tile date badge overlapping the bottom-left of the image */
.event-card__date {
  position: absolute;
  left: 1rem;
  bottom: -1.25rem;
  width: 64px;
  background: var(--cpe-paper);
  border-radius: 10px;
  box-shadow: 0 10px 22px rgba(15, 49, 87, 0.22);
  text-align: center;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
  border: 1px solid var(--cpe-border);
}
.event-card__date-day {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.05;
  color: var(--cpe-navy);
  padding: .5rem .25rem .15rem;
}
.event-card__date-month {
  display: block;
  background: var(--cpe-accent);
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .2rem .25rem .25rem;
}

.event-card__body {
  padding: 2.2rem 1.4rem 1.4rem; /* extra top padding for the date-tile overlap */
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.event-card__title {
  font-family: 'Inter', sans-serif;
  font-size: 1.18rem;
  color: var(--cpe-navy);
  margin: 0 0 .55rem;
  line-height: 1.3;
}
.event-card__desc {
  font-size: .95rem;
  color: var(--cpe-muted);
  line-height: 1.65;
  margin: 0 0 1rem;
  flex: 1 1 auto;
}
.event-card__meta {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--cpe-border);
  padding-top: .8rem;
}
.event-card__meta li {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: 'Inter', sans-serif;
  font-size: .88rem;
  color: var(--cpe-ink);
  padding: .25rem 0;
}
.event-card__meta li i {
  color: var(--cpe-accent);
  font-size: 1rem;
  width: 1.2rem;
  text-align: center;
}

/* -------- Network cards -------- */
.network-card {
  display: block;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--cpe-radius);
  padding: 1.6rem 1.5rem;
  color: rgba(255,255,255,.9);
  text-decoration: none;
  height: 100%;
  transition: transform .25s ease, background-color .25s ease, border-color .25s ease;
  margin-bottom: 1rem;
}
.network-card:hover {
  background: rgba(255,255,255,.10);
  border-color: var(--cpe-accent);
  color: #fff;
  transform: translateY(-3px);
}
.network-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; flex-wrap: wrap;
  margin-bottom: .6rem;
}
.network-card__head h3 {
  font-size: 1.18rem;
  color: #fff;
  margin: 0;
}
.network-card__badge {
  background: var(--cpe-accent);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  padding: .25rem .65rem;
  border-radius: 999px;
}
.network-card p {
  font-size: .95rem;
  line-height: 1.65;
  margin-bottom: 1rem;
  color: rgba(255,255,255,.78);
}
.network-card__cta {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: var(--cpe-accent-soft);
}
.network-card:hover .network-card__cta { color: #fff; }

/* -------- Représentants section: chip clouds + request form -------- */
.reps-panel {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--cpe-radius);
  padding: 1.5rem 1.5rem 1.25rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.reps-panel__head {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.reps-panel__head h3 {
  color: #fff;
  font-size: 1.12rem;
  margin: 0;
}
.reps-panel__badge {
  background: var(--cpe-accent);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  padding: .25rem .65rem;
  border-radius: 999px;
  white-space: nowrap;
}
/* Footer pinned to the bottom of the panel — equal vertical position in both
   panels thanks to align-items-stretch on the row + h-100 on each panel. */
.reps-panel__footer {
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .10);
  display: flex;
  justify-content: center;
}
.reps-panel__cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .35);
  color: rgba(255, 255, 255, 0.92);
  font-family: 'Inter', sans-serif;
  font-size: .9rem;
  font-weight: 500;
  padding: .55rem 1.25rem;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
.reps-panel__cta:hover {
  background: var(--cpe-accent);
  border-color: var(--cpe-accent);
  color: #fff;
  transform: translateY(-1px);
}
.reps-panel__cta i { font-size: .9em; }
.reps-panel__cta .bi-arrow-right { transition: transform .2s ease; }
.reps-panel__cta:hover .bi-arrow-right { transform: translateX(3px); }
.reps-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .55rem;
  align-content: flex-start;
}
.reps-chip {
  display: inline-block;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: .86rem;
  padding: .38rem .85rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
  line-height: 1.3;
}
.reps-chip:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.32);
  color: #fff;
  transform: translateY(-1px);
}
.reps-chip:focus-visible {
  outline: 2px solid var(--cpe-accent-soft);
  outline-offset: 2px;
}
.reps-chip.is-selected {
  background: var(--cpe-accent);
  border-color: var(--cpe-accent);
  color: #fff;
  box-shadow: 0 6px 16px rgba(200, 85, 61, .28);
}

/* Sand form card embedded in the navy section, so the form reads cleanly */
.reps-form-card {
  background: var(--cpe-sand);
  border-radius: var(--cpe-radius);
  padding: 1.75rem 1.5rem 1.5rem;
  box-shadow: 0 10px 30px rgba(15, 49, 87, .25);
}
.reps-form-card__title {
  color: var(--cpe-navy);
  font-size: 1.18rem;
  margin: 0 0 .35rem;
}
.reps-form-card__desc {
  color: var(--cpe-muted);
  font-size: .92rem;
  margin: 0 0 1.25rem;
  line-height: 1.55;
}
.reps-form .form-control,
.reps-form .form-select {
  background: var(--cpe-paper);
  border-radius: 10px;
  border: 1px solid var(--cpe-border);
}
.reps-form .form-control:focus,
.reps-form .form-select:focus {
  border-color: var(--cpe-accent);
  box-shadow: 0 0 0 .2rem rgba(200, 85, 61, .15);
}
.reps-form .form-floating > label {
  color: var(--cpe-muted);
  font-family: 'Inter', sans-serif;
  font-size: .92rem;
}
.reps-form .form-floating > .form-control,
.reps-form .form-floating > .form-select {
  /* Higher specificity than Bootstrap's `.form-floating > .form-control` */
}
.reps-form .form-floating > .reps-form__message { min-height: 7rem; }
.reps-form__note {
  font-size: .82rem;
  color: var(--cpe-muted);
  margin: .8rem 0 1.2rem;
}
.reps-form__note a { color: var(--cpe-accent); }

/* Modal containing the contact request form */
.reps-modal .modal-header {
  background: var(--cpe-cream);
  border-bottom: 1px solid var(--cpe-border);
  padding: 1rem 1.25rem;
}
.reps-modal .modal-title {
  color: var(--cpe-navy);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1.08rem;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
.reps-modal .modal-title i { color: var(--cpe-accent); font-size: 1.1em; }
.reps-modal .modal-body { background: var(--cpe-paper); padding: 1.4rem 1.5rem 1rem; }
.reps-modal .modal-footer {
  background: var(--cpe-cream);
  border-top: 1px solid var(--cpe-border);
  padding: .85rem 1.25rem;
}
.reps-modal__intro {
  color: var(--cpe-muted);
  font-size: .92rem;
  line-height: 1.55;
  margin: 0 0 1.1rem;
}
.reps-modal__location {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem .85rem;
  background: var(--cpe-sand);
  border: 1px solid var(--cpe-border);
  border-radius: 10px;
  padding: .8rem 1rem;
  margin-bottom: 1.1rem;
}
.reps-modal__loc-label {
  color: var(--cpe-muted);
  font-family: 'Inter', sans-serif;
  font-size: .85rem;
}
.reps-modal__loc-value {
  color: var(--cpe-accent);
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  flex: 1 1 auto;
}
.reps-modal__change {
  background: transparent;
  border: 1px solid transparent;
  color: var(--cpe-navy-soft);
  font-family: 'Inter', sans-serif;
  font-size: .85rem;
  font-weight: 500;
  padding: .25rem .65rem;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: background-color .2s ease, color .2s ease;
}
.reps-modal__change:hover {
  color: var(--cpe-accent);
  background: rgba(200, 85, 61, .08);
  text-decoration: none;
}
/* On phones the fullscreen modal benefits from slightly tighter padding */
@media (max-width: 575.98px) {
  .reps-modal .modal-body { padding: 1.1rem 1.1rem .75rem; }
}

/* -------- Tour carousel -------- */
.tour-carousel {
  border-radius: var(--cpe-radius);
  overflow: hidden;
  box-shadow: var(--cpe-shadow-md);
  background: var(--cpe-cream);
}
.tour-carousel .carousel-item img {
  aspect-ratio: 16/10;
  object-fit: cover;
  width: 100%;
}
/* Replace BS5's default caption bar with a compact pill chip
   anchored to the bottom-left of the frame. */
.tour-carousel .carousel-caption {
  bottom: 1.1rem;
  left: 1.1rem;
  right: auto;
  top: auto;
  padding: .4rem 1rem;
  background: rgba(15, 49, 87, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: calc(100% - 2.2rem);
  box-shadow: 0 6px 18px rgba(15, 49, 87, 0.30);
  text-align: left;
}
.tour-carousel .carousel-caption h5 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  margin: 0;
  font-size: .9rem;
  letter-spacing: .02em;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tour-carousel .carousel-indicators [data-bs-target] {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.6);
  border: none;
  opacity: 1;
}
.tour-carousel .carousel-indicators .active {
  background: var(--cpe-accent);
  transform: scale(1.15);
}

/* -------- Catalogue card (inline PDF preview beside the form) -------- */
.catalogue-card {
  background: var(--cpe-paper);
  border: 1px solid var(--cpe-border);
  border-radius: var(--cpe-radius);
  padding: 1.25rem;
  text-align: left;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.catalogue-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.catalogue-card__title {
  color: var(--cpe-navy);
  font-size: 1.15rem;
}
.catalogue-card__text {
  color: var(--cpe-muted);
  font-size: .9rem;
  line-height: 1.5;
}
.catalogue-card__preview {
  position: relative;
  flex: 1 1 auto;
  min-height: 420px;
  border: 1px solid var(--cpe-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--cpe-cream);
}
.catalogue-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.catalogue-card__expand {
  position: absolute;
  top: .55rem;
  right: .55rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(15, 49, 87, 0.82);
  color: #fff;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .2s ease, transform .15s ease;
  box-shadow: 0 6px 14px rgba(15, 49, 87, 0.28);
}
.catalogue-card__expand:hover {
  background: var(--cpe-accent);
  transform: translateY(-1px);
}
.catalogue-card__hint {
  font-size: .78rem;
  color: var(--cpe-muted);
  margin: 0;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.catalogue-card__hint i { color: var(--cpe-accent); }

.catalogue-frame {
  width: 100%;
  height: 70vh;
  border: 0;
  display: block;
}

/* Fallback content inside <object> — shown when the browser can't render
   the PDF inline (some Firefox + file:// setups, iOS Safari, etc.). */
.catalogue-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  background: var(--cpe-cream);
  color: var(--cpe-ink);
  gap: .5rem;
}
.catalogue-fallback i {
  font-size: 3rem;
  color: var(--cpe-accent);
}
.catalogue-fallback h4 {
  font-size: 1.05rem;
  color: var(--cpe-navy);
  margin: 0;
}
.catalogue-fallback p {
  color: var(--cpe-muted);
  font-size: .9rem;
  line-height: 1.55;
  max-width: 34ch;
  margin: 0 0 .5rem;
}
.catalogue-fallback__actions {
  display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center;
}

/* On small screens we want the preview present but more compact, since
   the form will sit just below. */
@media (max-width: 991.98px) {
  .catalogue-card__preview { min-height: 340px; }
}

/* -------- Order form -------- */
.order-form {
  background: var(--cpe-paper);
  border: 1px solid var(--cpe-border);
  border-radius: var(--cpe-radius);
  padding: 2rem;
}
.order-form .form-control {
  border-radius: 10px;
  border: 1px solid var(--cpe-border);
  background: var(--cpe-cream);
}
.order-form .form-control:focus {
  border-color: var(--cpe-accent);
  box-shadow: 0 0 0 .2rem rgba(200, 85, 61, .15);
  background: #fff;
}
.order-form .form-floating > label {
  color: var(--cpe-muted);
  font-family: 'Inter', sans-serif;
  font-size: .92rem;
}
/* Higher specificity than Bootstrap's `.form-floating > .form-control`,
   otherwise its built-in min-height beats this rule. */
.order-form .form-floating > .order-form__message { min-height: 9rem; }

/* -------- Submit button: idle / loading states with inline spinner -------- */
.submit-btn { position: relative; }
.submit-btn .submit-btn__idle { display: inline-flex; align-items: center; gap: .35rem; }
.submit-btn .submit-btn__loading {
  display: none;
  align-items: center;
  gap: .5rem;
}
.submit-btn.is-loading .submit-btn__idle { display: none; }
.submit-btn.is-loading .submit-btn__loading { display: inline-flex; }
.submit-btn:disabled {
  opacity: 1; /* keep the colored button visible even when disabled */
  cursor: progress;
}
/* Small white spinner used inside the submit button */
.btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  animation: cpe-spin .7s linear infinite;
}

/* -------- Dynamic order items list -------- */
.order-items {
  border: 0;
  padding: 0;
  margin-bottom: 1rem;
}
.order-items__legend {
  font-family: 'Inter', sans-serif;
  font-size: .92rem;
  font-weight: 600;
  color: var(--cpe-navy);
  margin-bottom: .6rem;
  padding: 0;
}
.order-items__list {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  margin-bottom: .75rem;
}
.order-items__row {
  display: grid;
  grid-template-columns: 1fr 110px 36px;
  gap: .5rem;
  align-items: stretch;
}
.order-items__title-wrap { min-width: 0; }
.order-items__qty-wrap { min-width: 0; }
.order-items__remove {
  align-self: stretch;
  background: transparent;
  border: 1px solid var(--cpe-border);
  border-radius: 10px;
  color: var(--cpe-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.order-items__remove:hover {
  background: rgba(200, 85, 61, .10);
  color: var(--cpe-accent);
  border-color: var(--cpe-accent);
}
/* The single remaining row hides its remove button — there must always be
   at least one line in the order. */
.order-items__list:has(> .order-items__row:only-child) .order-items__remove {
  visibility: hidden;
  pointer-events: none;
}
.order-items__add {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

@media (max-width: 575.98px) {
  /* On phones the 3-column grid squeezes the title input down to ~110px,
     causing the floating label "Code ou nom du livre *" to overflow. Switch
     to a wrap layout: title spans the full row, qty + remove sit below. */
  .order-items__row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
  }
  .order-items__title-wrap { flex: 1 1 100%; }
  .order-items__qty-wrap   { flex: 0 0 90px; }
  .order-items__remove     { flex: 0 0 40px; align-self: stretch; }
}
/* Small help text shown under a floating-label field. Used where the label
   alone is too short to convey what to type (e.g. "Adresse d'expédition"
   — we tell the user what info goes inside). */
.form-hint {
  display: block;
  margin-top: .35rem;
  padding-left: .25rem;
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--cpe-muted);
}
.form-note {
  font-size: .82rem;
  color: var(--cpe-muted);
  margin: .8rem 0 1.2rem;
}
/* Honeypot — visually & accessibly hidden but submitted */
.hp-field {
  position: absolute;
  left: -10000px; top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* -------- Contact -------- */
.contact-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--cpe-radius);
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
}
.contact-card .contact-list {
  display: flex;
  flex-direction: column;
}

/* On large screens, the right column matches the map's height — split it
   between the two cards with an even gap, and let each card's list
   center itself to balance the extra vertical room. On mobile the cards
   stack at their natural content height (no height: 100%, no centering). */
@media (min-width: 992px) {
  .contact-card { height: 100%; }
  .contact-card .contact-list {
    flex: 1 1 auto;
    justify-content: center;
  }
  .contact-grid > .col-lg-5 {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .contact-grid > .col-lg-5 > .contact-card {
    flex: 1 1 0;
    margin-bottom: 0 !important;
  }
}
.contact-card__title {
  color: #fff;
  font-size: 1.15rem;
  margin-bottom: 1rem;
}
.contact-list {
  list-style: none; padding: 0; margin: 0;
}
.contact-list li {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .6rem 0;
  color: rgba(255,255,255,.88);
  font-family: 'Inter', sans-serif;
  font-size: .96rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.contact-list li:last-child { border-bottom: 0; }
.contact-list li i {
  color: var(--cpe-accent);
  font-size: 1.1rem;
  width: 1.4rem;
}
.contact-list a {
  display: flex; align-items: center; gap: .8rem;
  color: rgba(255,255,255,.88);
  width: 100%;
}
.contact-list a:hover { color: var(--cpe-accent-soft); }

/* Email obfuscation: inline JS-assembled mailto link */
.contact-list .email-link,
.contact-list .email-obf {
  color: rgba(255,255,255,.88);
  word-break: break-all;
}
.contact-list .email-link:hover { color: var(--cpe-accent-soft); }
.email-obf { user-select: none; }

/* -------- Map -------- */
.map-card {
  background: var(--cpe-paper);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--cpe-radius);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: var(--cpe-shadow-md);
}
.cpe-map {
  flex: 1 1 auto;
  min-height: 380px;
  width: 100%;
  background: var(--cpe-cream);
}
/* Warm-tint the Carto Positron tiles to match the palette */
.cpe-map .leaflet-tile {
  filter: sepia(.18) saturate(.85) hue-rotate(-8deg) brightness(1.02);
}
.cpe-map .leaflet-control-attribution {
  background: rgba(255,255,255,.85);
  color: var(--cpe-muted);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  padding: 2px 8px;
}
.cpe-map .leaflet-control-attribution a { color: var(--cpe-accent); }

.cpe-map .leaflet-control-zoom a {
  background: var(--cpe-paper);
  color: var(--cpe-navy);
  border-color: var(--cpe-border);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
}
.cpe-map .leaflet-control-zoom a:hover {
  background: var(--cpe-cream);
  color: var(--cpe-accent);
}

.cpe-pin { background: transparent !important; border: 0 !important; }
.cpe-pin svg { filter: drop-shadow(0 6px 10px rgba(15, 49, 87, .38)); transition: transform .25s ease; }
.cpe-pin:hover svg { transform: translateY(-3px) scale(1.05); }

.cpe-map .leaflet-popup-content-wrapper {
  background: var(--cpe-navy);
  color: #fff;
  border-radius: 10px;
  box-shadow: var(--cpe-shadow-md);
}
.cpe-map .leaflet-popup-content {
  font-family: 'Inter', sans-serif;
  font-size: .92rem;
  margin: .8rem 1rem;
  line-height: 1.5;
}
.cpe-map .leaflet-popup-tip { background: var(--cpe-navy); }
.cpe-map .leaflet-popup-close-button { color: rgba(255,255,255,.7) !important; }
.cpe-map .leaflet-popup-close-button:hover { color: #fff !important; }

.map-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 1.2rem;
  background: var(--cpe-paper);
  color: var(--cpe-ink);
  font-family: 'Inter', sans-serif;
  font-size: .95rem;
  border-top: 1px solid var(--cpe-border);
}
.map-card__addr { color: var(--cpe-muted); font-size: .88rem; }
.map-card__footer .btn-sm { padding: .45rem 1rem; font-size: .85rem; }

@media (max-width: 575.98px) {
  .cpe-map { min-height: 300px; }
  .map-card__footer { justify-content: center; text-align: center; }
}

/* -------- Footer -------- */
.site-footer {
  background: var(--cpe-paper);
  border-top: 1px solid var(--cpe-border);
  padding: 1.6rem 0;
  font-family: 'Inter', sans-serif;
  font-size: .92rem;
  color: var(--cpe-muted);
}
.site-footer .footer-top {
  color: var(--cpe-navy);
  font-weight: 600;
}
.site-footer .footer-top:hover { color: var(--cpe-accent); }

.footer-links {
  list-style: none; padding: 0; margin: 0;
  display: inline-flex; flex-wrap: wrap; gap: 1.25rem;
  justify-content: center;
}
.footer-links li { display: inline-block; }
.footer-links a {
  color: var(--cpe-navy);
  font-weight: 500;
}
.footer-links a:hover { color: var(--cpe-accent); }

@media (min-width: 768px) {
  .footer-links { justify-content: flex-end; }
}

/* Hide the floating reCAPTCHA v3 badge so it doesn't fight with the consent
   banner at the bottom-right. Google permits this when the required
   attribution text is shown elsewhere in the user flow — which we do, in
   the order-form note ("Ce formulaire est protégé par reCAPTCHA…"). */
.grecaptcha-badge { visibility: hidden !important; }

/* -------- Top announcement banner -------- */
:root { --top-banner-height: 44px; }

.top-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1031; /* above navbar (1030) */
  height: var(--top-banner-height);
  background: var(--cpe-sand);
  color: var(--cpe-navy);
  border-bottom: 1px solid var(--cpe-border);
  box-shadow: 0 2px 8px rgba(15, 49, 87, 0.10);
  transition: transform .3s ease;
}
.top-banner.is-hidden { transform: translateY(-100%); }

.top-banner__inner {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 1rem;
}
.top-banner__icon {
  font-size: 1rem;
  flex-shrink: 0;
  color: var(--cpe-accent);
}
.top-banner__text {
  margin: 0;
  flex: 1 1 auto;
  font-family: 'Inter', sans-serif;
  font-size: .9rem;
  line-height: 1.3;
  color: var(--cpe-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-banner__cta {
  color: var(--cpe-accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--cpe-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  margin-left: .35rem;
  white-space: nowrap;
}
.top-banner__cta i { font-size: .85em; vertical-align: -1px; margin-left: .2rem; }
.top-banner__cta:hover { color: var(--cpe-accent-dk); }

.top-banner__close {
  background: transparent;
  border: 0;
  color: var(--cpe-muted);
  cursor: pointer;
  padding: .35rem .55rem;
  border-radius: 6px;
  line-height: 1;
  flex-shrink: 0;
  transition: background-color .2s ease, color .2s ease;
}
.top-banner__close:hover {
  background: rgba(26, 74, 120, .10);
  color: var(--cpe-navy);
}

/* Push the fixed navbar below the banner while it's visible. */
body:not(.banner-dismissed) #mainNav { top: var(--top-banner-height); }
body.banner-dismissed #mainNav { top: 0; }

@media (max-width: 575.98px) {
  /* On narrow phones, allow the text to wrap onto a second line and grow the strip */
  :root { --top-banner-height: 58px; }
  .top-banner__text { white-space: normal; font-size: .82rem; }
  .top-banner__inner { gap: .55rem; }
}

/* -------- Consent banner -------- */
.consent-banner {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 2000;
  background: rgba(15, 49, 87, 0.96);
  color: #fff;
  border-radius: var(--cpe-radius);
  box-shadow: var(--cpe-shadow-lg);
  padding: 1rem 1.2rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .25s ease, transform .25s ease;
}
.consent-banner.is-visible { opacity: 1; transform: translateY(0); }
.consent-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}
.consent-banner__text {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: .9rem;
  line-height: 1.55;
  color: rgba(255,255,255,.92);
  flex: 1 1 320px;
}
.consent-banner__text i {
  color: var(--cpe-accent-soft);
  margin-right: .35rem;
}
.consent-banner__text a {
  color: var(--cpe-accent-soft);
  text-decoration: underline;
}
.consent-banner__text a:hover { color: #fff; }
.consent-banner__actions { flex: 0 0 auto; }

@media (max-width: 575.98px) {
  .consent-banner {
    left: .6rem; right: .6rem; bottom: .6rem;
    padding: .9rem 1rem;
  }
  .consent-banner__inner { gap: .8rem; }
  .consent-banner__text { font-size: .85rem; }
}

/* -------- Legal pages -------- */
body.legal-page {
  background-color: var(--cpe-cream);
}
.legal-main {
  padding-top: 80px; /* leave room for the fixed navbar */
}
.legal-content {
  font-family: 'Source Serif 4', Georgia, serif;
  color: var(--cpe-ink);
  line-height: 1.85;
  margin-top: 2rem;
}
.legal-content h2 {
  font-family: 'Inter', sans-serif;
  color: var(--cpe-navy);
  font-size: 1.25rem;
  margin: 2.2rem 0 .8rem;
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--cpe-border);
}
.legal-content h2:first-of-type { margin-top: 1rem; }
.legal-content h3 {
  font-family: 'Inter', sans-serif;
  color: var(--cpe-navy-soft);
  font-size: 1rem;
  margin: 1.4rem 0 .5rem;
  font-weight: 600;
}
.legal-content p, .legal-content ul, .legal-content ol {
  font-size: 1rem;
  color: var(--cpe-ink);
  margin-bottom: 1rem;
}
.legal-content ul, .legal-content ol { padding-left: 1.5rem; }
.legal-content ul li, .legal-content ol li { margin-bottom: .35rem; }
.legal-content strong { color: var(--cpe-navy); }
/* Inline links inside legal text — but NOT buttons (`a.btn`), so the
   terracotta CTA at the bottom keeps its white text on terracotta. */
.legal-content a:not(.btn) {
  color: var(--cpe-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.legal-content a:not(.btn):hover { color: var(--cpe-accent-dk); }
.legal-updated {
  font-style: italic;
  color: var(--cpe-muted);
  font-size: .9rem;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--cpe-border);
}
.legal-back { margin-top: 2.5rem; }

/* -------- SimpleLightbox tweaks -------- */
.sl-overlay { background: #0F3157 !important; opacity: .94 !important; }
.sl-wrapper .sl-image img { border-radius: 8px; }

/* -------- Form validation visual state -------- */
.was-validated .form-control:invalid,
.form-control.is-invalid {
  border-color: #c8553d;
}
.was-validated .form-control:valid,
.form-control.is-valid {
  border-color: #6b8e23;
}

/* -------- Reduced motion -------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__scroll { animation: none; }
  .book-card:hover .book-card__cover img { transform: none; }
  * { transition: none !important; }
}