/* ============================================================
   LA BOUSSOLE — COLOR PASS (LOT A-bis · Partie 2 / LOT A-ter)
   Role matrix —— NAVY / ROYAL / BLUE (reinforced) / CORAL (targeted)
   Loaded AFTER every theme stylesheet (enqueue priority 21).
   No !important, no inline styles, no plugin.
   All colours come from tokens.css; the interactive SVG floor
   plan colours are NOT touched.
   ============================================================ */

/* ------------------------------------------------------------
   1 · SECTION BACKGROUND RHYTHM
   white → blue tint (~7 %) → navy → white, never two darks.
   .lbs-section-tint is applied per section in the templates;
   .lbs-section-gray is remapped onto the same blue tint so all
   light sections share one alternating white/tint rhythm.
   ------------------------------------------------------------ */
.lbs-section-tint { background: var(--lbs-blue-tint); }
.lbs-section-gray { background: var(--lbs-blue-tint); }
/* Partners wall (§10) becomes white instead of gray-50/tint */
.lbs-section-gray.lbs-section-partners { background: var(--lbs-white); }

/* Stats band — NAVY → ROYAL diagonal + subtle geometric blue
   pattern, low opacity (LOT A-ter · Part 5). Coral numbers stay. */
.lbs-section-stats {
	background-image:
		radial-gradient(circle at 8% -20%, rgba(27, 107, 201, 0.30) 0%, transparent 42%),
		radial-gradient(circle at 92% 118%, rgba(27, 107, 201, 0.24) 0%, transparent 48%),
		linear-gradient(135deg, var(--lbs-primary) 0%, var(--lbs-primary-royal) 100%);
}

/* ------------------------------------------------------------
   2 · SECTION TITLE ACCENT RULE (blue → coral · 80px · 5px)
   Centered headers: bar centered. Left titles: bar on the left.
   ------------------------------------------------------------ */
.lbs-section-title { position: relative; }
.lbs-section-title::after {
	content: ''; display: block; width: 80px; height: 5px;
	background: var(--lbs-accent-underline);
	border-radius: var(--lbs-radius-full);
	margin: var(--lbs-space-sm) 0 0;
}
.lbs-section-header .lbs-section-title::after,
.lbs-section-banner .lbs-section-title::after,
.lbs-banner .lbs-section-title::after { margin-left: auto; margin-right: auto; }

.lbs-about-content h2,
.lbs-contact-info h2,
.lbs-registration-info h2 {
	position: relative; padding-bottom: var(--lbs-space-md);
}
.lbs-about-content h2::after,
.lbs-contact-info h2::after,
.lbs-registration-info h2::after {
	content: ''; position: absolute; left: 0; bottom: 0;
	width: 80px; height: 5px;
	background: var(--lbs-accent-underline);
	border-radius: var(--lbs-radius-full);
}

.lbs-cta-content h2 { position: relative; padding-bottom: var(--lbs-space-md); }
.lbs-cta-content h2::after {
	content: ''; position: absolute; left: 50%; transform: translateX(-50%);
	bottom: 0; width: 80px; height: 5px;
	background: var(--lbs-accent-underline);
	border-radius: var(--lbs-radius-full);
}

/* ------------------------------------------------------------
   3 · EYEBROWS — coral (reinforced coral only as small markers)
   Strong coral (#D63030, 4.86:1) on light backgrounds;
   standard coral (#E84545) on navy/royal surfaces.
   LOT A-ter · Part 5 — bigger, wider tracking, bolder.
   ------------------------------------------------------------ */
.lbs-section-header .lbs-eyebrow,
.lbs-section .lbs-eyebrow,
.lbs-about-content .lbs-eyebrow,
.lbs-contact-info .lbs-eyebrow {
	color: var(--lbs-accent-text);
	font-size: var(--lbs-fs-xs);
	font-weight: var(--lbs-fw-bold);
	letter-spacing: 0.16em;
}

.lbs-section-dark .lbs-eyebrow,
.lbs-section-intervenants .lbs-eyebrow,
.lbs-registration-info .lbs-eyebrow,
.lbs-practical-lead .lbs-eyebrow,
.lbs-section-banner .lbs-eyebrow {
	color: var(--lbs-accent);
	font-size: var(--lbs-fs-xs);
	font-weight: var(--lbs-fw-bold);
	letter-spacing: 0.16em;
}

/* ------------------------------------------------------------
   4 · STAT NUMBERS — blue on light, coral on dark, larger.
   ------------------------------------------------------------ */
.lbs-stat-number:not(.lbs-section-dark .lbs-stat-number) { color: var(--lbs-blue-accent); }
.lbs-section-dark .lbs-stat-number {
	color: var(--lbs-accent);
	font-size: clamp(3rem, 6vw, 5rem);
}
@media (max-width: 600px) {
	.lbs-section-dark .lbs-stat-number { font-size: clamp(2.25rem, 9vw, 3rem); }
}

/* ------------------------------------------------------------
   5 · CARDS — top rule 3px blue by default, coral for featured.
       Hover: light-blue wash + stronger elevation (LOT A-ter).
   ------------------------------------------------------------ */
.lbs-panel-card { border-top: 3px solid var(--lbs-blue-accent); }
.lbs-panel-card:hover {
	border-top-color: var(--lbs-blue-accent);
	background: var(--lbs-blue-tint-strong);
	box-shadow: var(--lbs-shadow-xl);
}

.lbs-benefit-card {
	border-top: 3px solid var(--lbs-blue-accent);
	border-radius: var(--lbs-radius-lg);
}
.lbs-benefit-card.featured { border-top-color: var(--lbs-accent); box-shadow: var(--lbs-shadow-md); }
.lbs-benefit-card.featured:hover { box-shadow: var(--lbs-shadow-xl); }
.lbs-benefit-card:hover {
	background: var(--lbs-blue-tint-strong);
	box-shadow: var(--lbs-shadow-xl);
}

.lbs-pricing-card { border-top: 3px solid var(--lbs-blue-accent); }
.lbs-pricing-card.featured { border-top-color: var(--lbs-accent); }
.lbs-pricing-card:hover { background: var(--lbs-blue-tint-strong); }

/* ------------------------------------------------------------
   6 · ICONS — round light-blue pastille + navy-blue glyph
       (LOT A-ter · Part 5 — bigger pills, token soft is stronger)
   ------------------------------------------------------------ */
.lbs-intervenant-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 88px; height: 88px; border-radius: var(--lbs-radius-full);
	background: var(--lbs-blue-accent-soft); color: var(--lbs-blue-accent);
	margin-bottom: var(--lbs-space-md);
}
.lbs-section-intervenants .lbs-intervenant-icon {
	/* LOT E · Partie 5 — pastille blanche qui prévaut (ce fichier est chargé en dernier).
	   Les six images fournies sont opaques (sans canal alpha) : fond blanc neutre,
	   déposé sur pastille (jamais directement sur le navy), taille uniforme
	   (dimensions définies dans homepage-blocks.css). */
	background: var(--lbs-white);
	color: var(--lbs-blue-light);
}
.lbs-benefit-icon,
.lbs-about-feature-icon {
	width: 80px; height: 80px;
	border-radius: var(--lbs-radius-full);
	background: var(--lbs-blue-accent-soft);
}
.lbs-benefit-icon svg,
.lbs-about-feature-icon svg { width: 40px; height: 40px; color: var(--lbs-blue-accent); }

/* ------------------------------------------------------------
   7 · TEXT LINKS — blue + fine underline; coral on hover
   ------------------------------------------------------------ */
.lbs-section a:not(.lbs-btn):not(.lbs-hero-btn) {
	color: var(--lbs-blue-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: rgba(27, 107, 201, 0.35);
	transition: color var(--lbs-transition-fast), text-decoration-color var(--lbs-transition-fast);
}
.lbs-section a:not(.lbs-btn):not(.lbs-hero-btn):hover {
	color: var(--lbs-accent-text);
	text-decoration-color: currentColor;
}

/* ------------------------------------------------------------
   8 · SECTION SEPARATORS — blue → transparent gradient filet
       (light sections only; dark/banner surfaces excluded)
       LOT A-ter · Part 5 — more visible.
   ------------------------------------------------------------ */
.lbs-section { position: relative; }
.lbs-section:not(.lbs-section-banner):not(.lbs-section-dark):not(.lbs-section-intervenants)::after {
	content: ''; position: absolute; left: var(--lbs-gutter); right: var(--lbs-gutter);
	bottom: 0; height: 1px;
	background: var(--lbs-separator-accent);
	opacity: 0.65; pointer-events: none;
}

/* 8b · LISTS & EMPHASIS (LOT A-ter · Part 5)
        coral markers · 3px blue left border on quotes/emphasis */
.lbs-section ul li::marker,
.lbs-section ol li::marker { color: var(--lbs-accent-text); }
.lbs-about-content .lbs-text-accent {
	border-left: 3px solid var(--lbs-blue-accent);
	padding-left: var(--lbs-space-lg);
}

/* ------------------------------------------------------------
   9 · FOOTER — navy surface, blue-light column titles,
       coral accent line, blue-light hover links.
   ------------------------------------------------------------ */
.lbs-footer {
	background: var(--lbs-primary);
	border-top: 4px solid var(--lbs-accent);
}
.lbs-footer h4 { color: var(--lbs-blue-light); }
.lbs-footer-links a:hover { color: var(--lbs-blue-light); }
.lbs-footer-copyright { color: var(--lbs-gray-400); }

/* ------------------------------------------------------------
   10 · HEADER — fine blue bottom border on scroll
   ------------------------------------------------------------ */
.lbs-header.scrolled { border-bottom-color: var(--lbs-blue-accent); }

/* ------------------------------------------------------------
   11 · CONTEXTUAL BUTTON CONTRAST (LOT A-ter · Part 4)
   Règles par vraie surface, jamais de classes manuelles.
   FOND CORAL → primaire = blanc/navy ; ghost = blanc.
   FOND NAVY/ROYAL → primaire = coral (OK) ; ghost = blanc plein.
   Fonds clairs : système inchangé.
   ------------------------------------------------------------ */
/* Coral surfaces (bannières rouges, transitions coral) */
.lbs-banner--red .lbs-btn--primary,
.lbs-transition--coral .lbs-btn--primary {
	background: var(--lbs-white);
	border-color: var(--lbs-white);
	color: var(--lbs-primary);
}
.lbs-banner--red .lbs-btn--primary:hover,
.lbs-transition--coral .lbs-btn--primary:hover {
	background: var(--lbs-white);
	border-color: var(--lbs-white);
	color: var(--lbs-primary-royal);
}

/* Ghost on coral: navy ink on a pale white wash (AA ≥ 4.5 partout sur
   la bannière, y compris ses zones dégradées) — lève le doute du blanc
   à 4.0:1. Hover : remplissage navy plein, texte blanc. */
.lbs-banner--red .lbs-btn--ghost,
.lbs-transition--coral .lbs-btn--ghost {
	background: rgba(255, 255, 255, 0.15);
	border-color: var(--lbs-primary);
	color: var(--lbs-primary);
}
.lbs-banner--red .lbs-btn--ghost:hover,
.lbs-transition--coral .lbs-btn--ghost:hover {
	background: var(--lbs-primary);
	border-color: var(--lbs-primary);
	color: var(--lbs-white);
}

/* Ghost on every coloured/dark surface = solid white (replace the
   previous rgba(255,255,255,0.45) so borders read clearly) */
.lbs-section-dark .lbs-btn--ghost,
.lbs-section-intervenants .lbs-btn--ghost,
.lbs-banner--blue .lbs-btn--ghost,
.lbs-banner--blue-venue .lbs-btn--ghost,
.lbs-transition--navy .lbs-btn--ghost,
.lbs-hero-actions .lbs-btn--ghost,
.lbs-cta-actions .lbs-btn--ghost {
	border-color: var(--lbs-white);
	color: var(--lbs-white);
}
.lbs-section-dark .lbs-btn--ghost:hover,
.lbs-section-intervenants .lbs-btn--ghost:hover,
.lbs-banner--blue .lbs-btn--ghost:hover,
.lbs-banner--blue-venue .lbs-btn--ghost:hover,
.lbs-transition--navy .lbs-btn--ghost:hover,
.lbs-hero-actions .lbs-btn--ghost:hover,
.lbs-cta-actions .lbs-btn--ghost:hover {
	background: var(--lbs-white);
	border-color: var(--lbs-white);
	color: var(--lbs-primary);
}

/* ------------------------------------------------------------
   REDUCED MOTION — new transitions only
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.lbs-section a:not(.lbs-btn):not(.lbs-hero-btn) { transition: none; }
	.lbs-panel-card:hover,
	.lbs-benefit-card:hover,
	.lbs-pricing-card:hover { transform: none; }
}