/* ==========================================================================
   CABINET CONSEIL BEST LENS — Système visuel de la vitrine canadienne
   --------------------------------------------------------------------------
   Feuille **exclusivement canadienne**. Elle n'est chargée que lorsque
   `is_canada_market` est vrai (voir templates/includes/_head.html), donc
   elle ne peut pas affecter la vitrine du marché Global.

   Contraintes de charte respectées (agent.md) :
   - Palette officielle CCBL uniquement (#157DB2 #193153 #E31723 #6EBBE5 #F0F7FB)
   - Rayons bornés : max 8px. `border-radius: 50%` réservé aux pastilles et avatars.
   - Aucune teinte yellow/orange/amber/purple/indigo/pink/fuchsia/violet/rose
   - Emerald (#10b981) réservé à la validation / aux scores
   - Zéro emoji
   - Ombres sobres uniquement (pas de shadow-2xl, pas d'ombre teintée)

   Les jetons `--market-*` sont fournis par le bloc <style> de _head.html, qui
   les alimente depuis MarketSetting (dashboard administration). Les jetons
   `--ccbl-*` ci-dessous sont des replis locaux, jamais des valeurs de marque
   codées en dur dans le balisage.
   ========================================================================== */

:root {
  /* Jetons sémantiques CCBL disponibles par défaut */
  --ccbl-surface: #ffffff;
  --ccbl-surface-alt: #f0f7fb;
  --ccbl-canvas: #f7fafc;
  --ccbl-structure: #193153;
  --ccbl-tint: rgba(21, 125, 178, 0.06);
  --ccbl-text-strong: #193153;
  --ccbl-text-body: #3f5566;
  --ccbl-text-muted: #6b7b8c;
  --ccbl-rule-soft: rgba(25, 49, 83, 0.12);
  --ccbl-success: #10b981;
}

.ccbl-vitrine {
  /* --- Jetons de marché (replis si le contexte ne les fournit pas) --- */
  --market-primary: #157db2;
  --market-dark: #193153;
  --market-accent: #e31723;
  --market-light: #6ebbe5;
  --market-soft-bg: #f0f7fb;

  /* --- Jetons sémantiques : rôle plutôt que teinte --- */
  --ccbl-section-rule: var(--market-accent);
  --ccbl-surface: #ffffff;
  --ccbl-surface-alt: var(--market-soft-bg);
  --ccbl-canvas: #f7fafc;
  --ccbl-structure: var(--market-dark);
  --ccbl-tint: rgba(21, 125, 178, 0.06);
  --ccbl-text-strong: var(--market-dark);
  --ccbl-text-body: #3f5566;
  --ccbl-text-muted: #6b7b8c;
  --ccbl-rule-soft: rgba(25, 49, 83, 0.12);
  --ccbl-success: #10b981;

  --ccbl-radius: 4px;
  --ccbl-radius-md: 6px;
  --ccbl-radius-lg: 8px;

  --ccbl-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --ccbl-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.05);

  color: var(--ccbl-text-body);
}

/* ==========================================================================
   MODE SOMBRE (DARK MODE) — MARCHÉ CANADIEN
   ========================================================================== */
html.dark,
.dark,
html.dark .ccbl-vitrine,
.dark .ccbl-vitrine,
html.dark.ccbl-vitrine,
.dark.ccbl-vitrine {
  --market-soft-bg: rgba(21, 125, 178, 0.16);

  --ccbl-surface: #1e293b;
  --ccbl-surface-alt: #0f172a;
  --ccbl-canvas: #0b1329;
  --ccbl-structure: var(--market-dark, #193153);
  --ccbl-tint: rgba(38, 167, 224, 0.14);
  --ccbl-text-strong: #f8fafc;
  --ccbl-text-body: #cbd5e1;
  --ccbl-text-muted: #94a3b8;
  --ccbl-rule-soft: rgba(255, 255, 255, 0.12);

  --ccbl-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.35);
  --ccbl-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.45), 0 2px 4px -1px rgba(0, 0, 0, 0.35);

  color: var(--ccbl-text-body);
}

html.dark .ccbl-sec--canvas,
.dark .ccbl-sec--canvas {
  background: var(--ccbl-canvas) !important;
}
html.dark .ccbl-sec--surface,
.dark .ccbl-sec--surface {
  background: var(--ccbl-surface) !important;
}
html.dark .ccbl-sec--alt,
.dark .ccbl-sec--alt {
  background: var(--ccbl-surface-alt) !important;
}
html.dark .ccbl-sec--dark,
.dark .ccbl-sec--dark {
  background: var(--ccbl-structure) !important;
}

html.dark .ccbl-overline,
.dark .ccbl-overline {
  color: var(--market-light, #6ebbe5) !important;
}

html.dark .ccbl-h2,
.dark .ccbl-h2,
html.dark .ccbl-h3,
.dark .ccbl-h3 {
  color: var(--ccbl-text-strong) !important;
}

html.dark .ccbl-lead,
.dark .ccbl-lead {
  color: var(--ccbl-text-body) !important;
}

html.dark .ccbl-btn--outline-dark,
.dark .ccbl-btn--outline-dark {
  border-color: rgba(255, 255, 255, 0.2);
  color: #f8fafc;
}
html.dark .ccbl-btn--outline-dark:hover,
.dark .ccbl-btn--outline-dark:hover {
  border-color: var(--market-primary);
  color: var(--market-light);
}

html.dark .ccbl-credentials,
.dark .ccbl-credentials {
  background: var(--ccbl-surface) !important;
  border-bottom-color: var(--ccbl-rule-soft) !important;
}

html.dark .ccbl-rail-card,
.dark .ccbl-rail-card {
  background: var(--ccbl-surface);
  border-color: var(--ccbl-rule-soft);
}
html.dark .ccbl-rail-card p,
.dark .ccbl-rail-card p {
  color: var(--ccbl-text-body);
}
html.dark .ccbl-rail-card strong,
.dark .ccbl-rail-card strong {
  color: var(--ccbl-text-strong);
}

html.dark .ccbl-editorial-item,
.dark .ccbl-editorial-item {
  border-color: var(--ccbl-rule-soft);
}
html.dark .ccbl-editorial-thumb,
.dark .ccbl-editorial-thumb {
  background: var(--market-dark, #193153);
  border-color: var(--ccbl-rule-soft);
}
html.dark .ccbl-editorial-cat,
.dark .ccbl-editorial-cat {
  color: var(--market-light, #6ebbe5);
}

html.dark .ccbl-plan,
.dark .ccbl-plan {
  background: var(--ccbl-surface);
  border-color: var(--ccbl-rule-soft);
}

html.dark .ccbl-plan-selector button,
.dark .ccbl-plan-selector button {
  background: #1e293b;
  color: #cbd5e1;
  border-color: rgba(255, 255, 255, 0.12);
}
html.dark .ccbl-plan-selector button:hover,
.dark .ccbl-plan-selector button:hover {
  border-color: var(--market-primary);
  color: #fff;
}
html.dark .ccbl-plan-selector button.is-active,
.dark .ccbl-plan-selector button.is-active {
  background: var(--market-primary);
  border-color: var(--market-primary);
  color: #fff;
}

html.dark .ccbl-contact-card:hover,
.dark .ccbl-contact-card:hover {
  background-color: rgba(21, 125, 178, 0.16);
}

/* ==========================================================================
   RYTHME DE SECTION & SIGNATURES ÉDITORIALES
   ========================================================================== */
.ccbl-sec {
  position: relative;
  padding: 56px 0;
}
@media (min-width: 640px) {
  .ccbl-sec {
    padding: 64px 0;
  }
}
@media (min-width: 1024px) {
  .ccbl-sec {
    padding: 80px 0;
  }
}

.ccbl-sec--canvas {
  background: var(--ccbl-canvas);
}
.ccbl-sec--surface {
  background: var(--ccbl-surface);
}
.ccbl-sec--alt {
  background: var(--ccbl-surface-alt);
}
.ccbl-sec--dark {
  background: var(--ccbl-structure);
  color: #fff;
}
.ccbl-cta-section {
  background-color: var(--ccbl-canvas);
  transition: background-color 300ms ease;
}
html.dark .ccbl-cta-section,
.dark .ccbl-cta-section {
  background-color: #0b1329 !important;
  background: #0b1329 !important;
}

/* SIGNATURE 1 — Filet rouge de section */
.ccbl-rule {
  display: block;
  width: 56px;
  height: 3px;
  background-color: #e31723 !important;
  background-color: var(--market-accent, #e31723) !important;
  border-radius: var(--ccbl-radius, 4px);
  margin-bottom: 18px;
}

.ccbl-overline {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 700;
  color: var(--market-primary);
  margin-bottom: 10px;
}
.ccbl-sec--dark .ccbl-overline {
  color: var(--market-light);
}

.ccbl-h2 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ccbl-text-strong);
  margin: 0;
}
@media (min-width: 640px) {
  .ccbl-h2 {
    font-size: 26px;
  }
}
@media (min-width: 1024px) {
  .ccbl-h2 {
    font-size: 30px;
  }
}
.ccbl-sec--dark .ccbl-h2 {
  color: #fff;
}

.ccbl-h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--ccbl-text-strong);
  margin: 0 0 8px;
}

.ccbl-lead {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ccbl-text-body);
  margin: 0;
}
.ccbl-lead + .ccbl-lead {
  margin-top: 14px;
}
.ccbl-sec--dark .ccbl-lead {
  color: rgba(255, 255, 255, 0.72);
}

/* Signature : mot mis en exergue */
.ccbl-accent {
  color: var(--market-accent);
}

/* SIGNATURE 5 — Mention réglementaire en pied de bloc */
.ccbl-regfoot {
  border-top: 1px solid var(--ccbl-rule-soft);
  padding-top: 14px;
  margin-top: 28px;
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: var(--ccbl-text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ccbl-sec--dark .ccbl-regfoot {
  border-top-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.55);
}
.ccbl-regfoot svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ==========================================================================
   BOUTONS
   ========================================================================== */
.ccbl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  min-height: 44px;
  border-radius: var(--ccbl-radius);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
  white-space: nowrap;
}
.ccbl-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.ccbl-btn--primary {
  background: var(--market-accent);
  color: #fff;
}
.ccbl-btn--primary:hover {
  background: #cf191e;
}

.ccbl-btn--structure {
  background: var(--market-primary);
  color: #fff;
}
.ccbl-btn--structure:hover {
  background: #12699a;
}

.ccbl-btn--ghost {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.ccbl-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.22);
}

.ccbl-btn--outline-dark {
  background: transparent;
  border-color: var(--ccbl-rule-soft);
  color: var(--ccbl-text-strong);
}
.ccbl-btn--outline-dark:hover {
  border-color: var(--market-primary);
  color: var(--market-primary);
}

.ccbl-btn--light {
  background: #fff;
  color: var(--ccbl-structure);
}
.ccbl-btn--light:hover {
  background: #eaf1f7;
}

.ccbl-btn--outline-light {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.42);
  color: #fff;
}
.ccbl-btn--outline-light:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   HERO DE PAGE D'ACCUEIL
   ========================================================================== */
.ccbl-hero {
  position: relative;
  background: var(--ccbl-structure);
  color: #fff;
  overflow: hidden;
}

.ccbl-hero__grid {
  position: absolute;
  inset: 0;
  opacity: 0.1;
  pointer-events: none;
}

.ccbl-hero__photo {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ccbl-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ccbl-hero__photo--fallback {
  background: linear-gradient(135deg, #1b3a63 0%, #193153 55%, #142744 100%);
}

.ccbl-hero__veil {
  position: absolute;
  inset: 0;
  background: rgba(25, 49, 83, 0.55);
  pointer-events: none;
}

.ccbl-hero__inner {
  position: relative;
  z-index: 10;
  padding: 56px 0 48px;
}
@media (min-width: 1024px) {
  .ccbl-hero__inner {
    padding: 72px 0 60px;
  }
}

.ccbl-hero .ccbl-overline {
  color: var(--market-light, #6EBBE5) !important;
}

.ccbl-hero__title {
  color: #fff;
  font-size: 25px;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.015em;
  margin: 0 0 18px;
}
@media (min-width: 640px) {
  .ccbl-hero__title {
    font-size: 30px;
  }
}
@media (min-width: 1024px) {
  .ccbl-hero__title {
    font-size: 36px;
  }
}
.ccbl-hero__title .accent,
.ccbl-hero__title .ccbl-accent {
  color: var(--market-accent);
}

.ccbl-hero__desc {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  max-width: 560px;
  margin: 0 0 26px;
}
.ccbl-hero__desc strong {
  color: var(--market-accent);
  font-weight: 600;
}

.ccbl-hero__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 32px;
}

.ccbl-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 22px;
  max-width: 520px;
}
.ccbl-hero__stat {
  padding-right: 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.ccbl-hero__stat + .ccbl-hero__stat {
  padding-left: 16px;
}
.ccbl-hero__stat:last-child {
  border-right: none;
  padding-right: 0;
}
.ccbl-hero__stat-num {
  font-size: 24px;
  font-weight: 800;
  color: var(--market-accent);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 640px) {
  .ccbl-hero__stat-num {
    font-size: 28px;
  }
}
.ccbl-hero__stat-lbl {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.62);
  margin-top: 5px;
  line-height: 1.35;
}

/* ==========================================================================
   PANNEAU DE SPÉCIFICATION (colonne droite du hero)
   ========================================================================== */
.ccbl-spec {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--ccbl-radius-lg);
  overflow: hidden;
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ccbl-spec__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.ccbl-spec__head-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ccbl-spec__head-title svg {
  width: 17px;
  height: 17px;
  color: var(--market-light);
  flex-shrink: 0;
}
.ccbl-spec__head-title span {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.ccbl-spec__session {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--ccbl-radius);
  padding: 3px 8px;
  white-space: nowrap;
}
.ccbl-spec__body {
  padding: 6px 20px;
}
.ccbl-spec__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.ccbl-spec__row:last-child {
  border-bottom: none;
}
.ccbl-spec__row-label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.ccbl-spec__row-label svg {
  width: 16px;
  height: 16px;
  color: var(--market-light);
  flex-shrink: 0;
}
.ccbl-spec__row-label span {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.92);
}
.ccbl-spec__val {
  font-size: 11.5px;
  font-weight: 700;
  color: #8fe3b8;
  background: rgba(6, 78, 59, 0.5);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: var(--ccbl-radius);
  padding: 2px 8px;
  white-space: nowrap;
}
.ccbl-spec__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.78);
  flex-wrap: wrap;
}
.ccbl-spec__foot-left {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.ccbl-spec__foot-left svg {
  width: 15px;
  height: 15px;
  color: var(--ccbl-success);
  flex-shrink: 0;
}
.ccbl-spec__foot a {
  color: var(--market-light);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ccbl-spec__foot a:hover {
  text-decoration: underline;
}
.ccbl-spec__foot a svg {
  width: 13px;
  height: 13px;
}

/* --------------------------------------------------------------------------
   HERO D'ACCUEIL — panneau « Grille officielle IRCC » estompé.
   À la demande du client, le panneau de spécification de la page d'accueil
   est conservé mais rendu **plus discret** : il s'efface davantage pour
   laisser toute sa place à la photographie de fond. Portée strictement
   limitée à `section#hero` — le composant `.ccbl-spec` réutilisé ailleurs
   conserve son apparence d'origine. Au survol, le panneau reprend sa
   lisibilité pleine.
   -------------------------------------------------------------------------- */
.ccbl-hero#hero .ccbl-spec {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0.82;
  transform: scale(0.97);
  transform-origin: top right;
  transition: opacity 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}
.ccbl-hero#hero .ccbl-spec:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.09);
  transform: scale(1);
}
.ccbl-hero#hero .ccbl-spec__head {
  padding: 13px 18px;
}
.ccbl-hero#hero .ccbl-spec__body {
  padding: 4px 18px;
}
.ccbl-hero#hero .ccbl-spec__row {
  padding: 9px 0;
}
.ccbl-hero#hero .ccbl-spec__foot {
  padding: 12px 18px;
}

/* --------------------------------------------------------------------------
   HERO D'ACCUEIL — centrage vertical du panneau de spécification.
   À la demande du client : parqué **au milieu** de la colonne de gauche au
   lieu d'être collé en haut (`align-items:start`), afin qu'il ne masque plus
   le visage de la personne sur la photographie de fond.

   Pourquoi le milieu et non le bas : aligné en bas, le panneau arriverait au
   niveau de la barre de chiffres (+50 / NCLC 7+ / 100 %) et créerait deux
   blocs concurrents dans la moitié basse, en laissant un grand vide en haut.
   Centré, il occupe la bande médiane — exactement celle qui porte le visage —
   et libère celui-ci.

   Le décalage vient du centrage de grille, jamais d'un `margin-top` figé en
   pixels : la position du visage dépend de l'`object-fit: cover`, donc de la
   largeur d'écran. Sur mobile (une seule colonne) le panneau repasse sous le
   texte et le centrage n'a plus d'objet : on rétablit un flux normal.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .ccbl-hero#hero .ccbl-hero__cols {
    align-items: center;
  }
}

/* ==========================================================================
   BANDEAU D'AGRÉMENTS (remplace la barre de réassurance sur le marché CA)
   ========================================================================== */
.ccbl-credentials {
  background: var(--ccbl-surface);
  border-top: 3px solid var(--ccbl-section-rule);
  border-bottom: 1px solid var(--ccbl-rule-soft);
  padding: 28px 0;
}
.ccbl-cred-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 640px) {
  .ccbl-cred-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1024px) {
  .ccbl-cred-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.ccbl-cred-cell {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--ccbl-rule-soft);
}
@media (min-width: 640px) {
  .ccbl-cred-cell {
    border-right: 1px solid var(--ccbl-rule-soft);
  }
  .ccbl-cred-cell:nth-child(2n) {
    border-right: none;
  }
}
@media (min-width: 1024px) {
  .ccbl-cred-cell {
    border-bottom: none;
    border-right: 1px solid var(--ccbl-rule-soft);
  }
  .ccbl-cred-cell:nth-child(2n) {
    border-right: 1px solid var(--ccbl-rule-soft);
  }
  .ccbl-cred-cell:last-child {
    border-right: none;
  }
}
.ccbl-cred-ico {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--ccbl-radius);
  background: var(--ccbl-tint);
  border: 1px solid var(--ccbl-rule-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ccbl-cred-ico svg {
  width: 17px;
  height: 17px;
  color: var(--market-primary);
}
.ccbl-cred-t {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ccbl-text-strong);
  margin-bottom: 3px;
}
.ccbl-cred-d {
  font-size: 12px;
  color: var(--ccbl-text-muted);
  line-height: 1.45;
}

/* ==========================================================================
   COLONNES ÉDITORIALES & ENCADRÉS NUMÉROTÉS
   ========================================================================== */
.ccbl-cols-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 1024px) {
  .ccbl-cols-2 {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
}
.ccbl-cols-media {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
@media (min-width: 1024px) {
  .ccbl-cols-media {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
}

.ccbl-media-frame {
  position: relative;
  border: 1px solid var(--ccbl-rule-soft);
  border-radius: var(--ccbl-radius-lg);
  overflow: hidden;
  background: var(--ccbl-structure);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ccbl-media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ccbl-media-frame svg {
  width: 56px;
  height: 56px;
  color: rgba(255, 255, 255, 0.18);
}

.ccbl-fact-boxes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--ccbl-rule-soft);
  margin-top: 24px;
}
.ccbl-fact-box {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--ccbl-rule-soft);
}
.ccbl-fact-num {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: var(--ccbl-radius);
  background: var(--ccbl-tint);
  border: 1px solid var(--ccbl-rule-soft);
  color: var(--market-primary);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}
.ccbl-fact-t {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ccbl-text-strong);
  margin-bottom: 3px;
}
.ccbl-fact-d {
  font-size: 13.5px;
  color: var(--ccbl-text-body);
  line-height: 1.55;
}

/* ==========================================================================
   RAIL DE CHRONOLOGIE (section « Notre méthode »)
   ========================================================================== */
.ccbl-rail {
  position: relative;
}
.ccbl-rail::before {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 17px;
  width: 1px;
  background: var(--ccbl-rule-soft);
}
@media (min-width: 1024px) {
  .ccbl-rail::before {
    left: 19px;
  }
}
.ccbl-rail-item {
  position: relative;
  padding-left: 56px;
  padding-bottom: 28px;
}
.ccbl-rail-item:last-child {
  padding-bottom: 0;
}
.ccbl-rail-num {
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--ccbl-radius);
  background: var(--market-accent);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  z-index: 1;
}
@media (min-width: 1024px) {
  .ccbl-rail-num {
    width: 40px;
    height: 40px;
  }
}
.ccbl-rail-num--first {
  background: var(--market-primary);
}
.ccbl-rail-num--last {
  background: var(--ccbl-structure);
}
.ccbl-rail-card {
  background: var(--ccbl-surface);
  border: 1px solid var(--ccbl-rule-soft);
  border-radius: var(--ccbl-radius-md);
  padding: 20px;
  box-shadow: var(--ccbl-shadow-sm);
}
.ccbl-rail-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ccbl-text-body);
}

.ccbl-deliverables {
  border-top: 1px solid var(--ccbl-rule-soft);
  margin-top: 16px;
  padding-top: 14px;
}
.ccbl-dl-head {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--ccbl-text-muted);
  margin-bottom: 10px;
}
.ccbl-dl-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 6px 0;
  font-size: 13.5px;
  color: var(--ccbl-text-body);
  line-height: 1.55;
}
.ccbl-dl-row svg {
  width: 15px;
  height: 15px;
  color: var(--market-primary);
  flex-shrink: 0;
  margin-top: 3px;
}

/* ==========================================================================
   FORMULES — TABLEAU DE PRESTATIONS
   ========================================================================== */
.ccbl-plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 1024px) {
  .ccbl-plans {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
}
.ccbl-plans-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 640px) {
  .ccbl-plans-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .ccbl-plans-4 {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
}
.ccbl-plans-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 640px) {
  .ccbl-plans-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .ccbl-plans-2 {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
}
.ccbl-plan {
  background: var(--ccbl-surface);
  border: 1px solid var(--ccbl-rule-soft);
  border-radius: var(--ccbl-radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--ccbl-shadow-sm);
}
.ccbl-plan__head {
  background: var(--ccbl-structure);
  color: #fff;
  padding: 18px 20px;
  border-bottom: 3px solid var(--market-primary);
}
.ccbl-plan--featured .ccbl-plan__head {
  border-bottom-color: var(--market-accent);
}
.ccbl-plan__head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.ccbl-plan__name {
  font-size: 16.5px;
  font-weight: 700;
  color: #fff;
}
.ccbl-plan__tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: var(--ccbl-radius);
  background: var(--market-accent);
  color: #fff;
  white-space: nowrap;
}
.ccbl-plan__sub {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.68);
}
.ccbl-plan__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.ccbl-plan-selector {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 18px;
}
.ccbl-plan-selector--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ccbl-plan-selector button {
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 8px 4px;
  min-height: 36px;
  border-radius: var(--ccbl-radius);
  border: 1px solid var(--ccbl-rule-soft);
  background: var(--ccbl-surface);
  color: var(--ccbl-text-body);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.ccbl-plan-selector button:hover {
  border-color: var(--market-primary);
  color: var(--market-primary);
}
.ccbl-plan-selector button.is-active {
  background: var(--market-primary);
  border-color: var(--market-primary);
  color: #fff;
}
.ccbl-plan--featured .ccbl-plan-selector button.is-active {
  background: var(--market-accent);
  border-color: var(--market-accent);
}

.ccbl-plan-price {
  border-top: 1px solid var(--ccbl-rule-soft);
  border-bottom: 1px solid var(--ccbl-rule-soft);
  padding: 14px 0;
  margin-bottom: 16px;
  min-height: 92px;
}
.ccbl-plan-price__val {
  font-size: 34px;
  font-weight: 800;
  color: var(--ccbl-text-strong);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.ccbl-plan-price__cur {
  font-size: 14px;
  font-weight: 600;
  color: var(--ccbl-text-muted);
  margin-left: 6px;
}
.ccbl-plan-price__note {
  font-size: 12px;
  color: var(--ccbl-text-muted);
  margin-top: 4px;
}
.ccbl-plan-price__promo {
  font-size: 12.5px;
  color: var(--ccbl-text-muted);
  text-decoration: line-through;
  margin-left: 8px;
}

.ccbl-plan-table {
  border-top: 1px solid var(--ccbl-rule-soft);
  margin-bottom: 20px;
  flex-grow: 1;
}
.ccbl-plan-table__head {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--ccbl-text-muted);
  padding: 12px 0 8px;
}
.ccbl-pt-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 7px 0;
  border-bottom: 1px solid var(--ccbl-rule-soft);
  font-size: 13.5px;
  color: var(--ccbl-text-body);
  line-height: 1.55;
}
.ccbl-pt-row:last-child {
  border-bottom: none;
}
.ccbl-pt-row svg {
  width: 15px;
  height: 15px;
  color: var(--market-primary);
  flex-shrink: 0;
  margin-top: 3px;
}
.ccbl-plan--featured .ccbl-pt-row svg {
  color: var(--market-accent);
}
.ccbl-pt-row--muted {
  color: var(--ccbl-text-muted);
}
.ccbl-pt-row--muted svg {
  color: var(--ccbl-text-muted);
}

.ccbl-plan-cta {
  display: block;
  text-align: center;
  padding: 13px 20px;
  min-height: 44px;
  border-radius: var(--ccbl-radius);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  background: var(--market-primary);
  color: #fff;
  border: 1px solid transparent;
  transition: background-color 0.2s;
}
.ccbl-plan-cta:hover {
  background: #12699a;
}
.ccbl-plan--featured .ccbl-plan-cta {
  background: var(--market-accent);
}
.ccbl-plan--featured .ccbl-plan-cta:hover {
  background: #cf191e;
}

/* ==========================================================================
   DÉMO — ENCADRÉ DE PÉRIMÈTRE
   ========================================================================== */
.ccbl-demo-panel {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--ccbl-radius-md);
  overflow: hidden;
}
.ccbl-demo-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
}
.ccbl-demo-panel__head span:first-child {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.ccbl-tag-ok {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #8fe3b8;
  background: rgba(6, 78, 59, 0.55);
  border: 1px solid rgba(16, 185, 129, 0.32);
  border-radius: var(--ccbl-radius);
  padding: 3px 8px;
  white-space: nowrap;
}
.ccbl-demo-rows {
  padding: 4px 0;
}
.ccbl-demo-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.ccbl-demo-row:last-child {
  border-bottom: none;
}
.ccbl-demo-row__ico {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: var(--ccbl-radius);
  background: rgba(110, 187, 229, 0.14);
  border: 1px solid rgba(110, 187, 229, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ccbl-demo-row__ico svg {
  width: 15px;
  height: 15px;
  color: var(--market-light);
}
.ccbl-demo-row__t {
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 2px;
}
.ccbl-demo-row__d {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.45;
}

/* ==========================================================================
   INDEX ÉDITORIAL (blog) — GRILLE MODERNE 3 COLONNES
   ========================================================================== */
.ccbl-editorial-section {
  padding-top: 72px;
  padding-bottom: 84px;
}
.ccbl-editorial-header {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 44px;
}
@media (min-width: 768px) {
  .ccbl-editorial-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
}
.ccbl-editorial-header-left {
  max-width: 680px;
}
.ccbl-editorial-header-right {
  flex-shrink: 0;
  margin-bottom: 4px;
}
.ccbl-editorial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
@media (min-width: 640px) {
  .ccbl-editorial-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}
@media (min-width: 1024px) {
  .ccbl-editorial-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}
.ccbl-editorial-card {
  background: var(--ccbl-card-bg, #ffffff);
  border: 1px solid var(--ccbl-rule-soft, rgba(0, 0, 0, 0.08));
  border-radius: var(--ccbl-radius-lg, 12px);
  overflow: hidden;
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.03);
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.ccbl-editorial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -6px rgba(0, 0, 0, 0.1), 0 8px 16px -4px rgba(0, 0, 0, 0.05);
  border-color: rgba(38, 167, 224, 0.35);
}
.ccbl-editorial-card-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.ccbl-editorial-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ccbl-structure, #15264c);
}
.ccbl-editorial-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.ccbl-editorial-card:hover .ccbl-editorial-card-img {
  transform: scale(1.05);
}
.ccbl-editorial-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #15264c 0%, #1e3a6d 100%);
}
.ccbl-editorial-card-placeholder svg {
  width: 44px;
  height: 44px;
  color: rgba(255, 255, 255, 0.3);
}
.ccbl-editorial-card-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  background: rgba(21, 38, 76, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 11px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.ccbl-editorial-card-content {
  padding: 22px 24px 20px 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.ccbl-editorial-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ccbl-text-muted, #64748b);
  margin-bottom: 10px;
}
.ccbl-editorial-card-meta .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ccbl-text-muted, #64748b);
}
.ccbl-editorial-card-title {
  font-size: 17.5px;
  font-weight: 700;
  color: var(--ccbl-text-strong, #0f172a);
  margin: 0 0 10px 0;
  line-height: 1.4;
  transition: color 0.2s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ccbl-editorial-card:hover .ccbl-editorial-card-title {
  color: var(--market-primary, #26a7e0);
}
.ccbl-editorial-card-excerpt {
  font-size: 13.5px;
  color: var(--ccbl-text-body, #475569);
  margin: 0 0 16px 0;
  line-height: 1.6;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ccbl-editorial-card-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--ccbl-rule-soft, rgba(0, 0, 0, 0.08));
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ccbl-editorial-card-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--market-primary, #26a7e0);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s ease;
}
.ccbl-editorial-card-link svg {
  width: 15px;
  height: 15px;
  transition: transform 0.2s ease;
}
.ccbl-editorial-card:hover .ccbl-editorial-card-link svg {
  transform: translateX(4px);
}

/* Dark mode pour la carte éditoriale */
html.dark .ccbl-editorial-card,
.dark .ccbl-editorial-card {
  background: #1e293b !important;
  border-color: #334155 !important;
  box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.3) !important;
}
html.dark .ccbl-editorial-card:hover,
.dark .ccbl-editorial-card:hover {
  border-color: #475569 !important;
  box-shadow: 0 16px 32px -6px rgba(0, 0, 0, 0.5) !important;
}
html.dark .ccbl-editorial-card-title,
.dark .ccbl-editorial-card-title {
  color: #f8fafc !important;
}
html.dark .ccbl-editorial-card-excerpt,
.dark .ccbl-editorial-card-excerpt {
  color: #cbd5e1 !important;
}
html.dark .ccbl-editorial-card-footer,
.dark .ccbl-editorial-card-footer {
  border-top-color: #334155 !important;
}
html.dark .ccbl-editorial-card-meta,
.dark .ccbl-editorial-card-meta {
  color: #94a3b8 !important;
}

/* Rétro-compatibilité format liste */
.ccbl-editorial {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 1024px) {
  .ccbl-editorial {
    grid-template-columns: 4fr 8fr;
    gap: 48px;
  }
}
.ccbl-editorial-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 20px 0;
  border-bottom: 1px solid var(--ccbl-rule-soft);
  text-decoration: none;
}
@media (min-width: 640px) {
  .ccbl-editorial-item {
    grid-template-columns: 180px 1fr;
    gap: 20px;
    align-items: start;
  }
}
.ccbl-editorial-item:first-child {
  border-top: 1px solid var(--ccbl-rule-soft);
}
.ccbl-editorial-thumb {
  border-radius: var(--ccbl-radius-md);
  overflow: hidden;
  background: var(--ccbl-structure);
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ccbl-rule-soft);
  flex-shrink: 0;
}
.ccbl-editorial-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ccbl-editorial-thumb svg {
  width: 34px;
  height: 34px;
  color: rgba(255, 255, 255, 0.2);
}
.ccbl-editorial-cat {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--market-primary);
  margin-bottom: 6px;
}
.ccbl-editorial-t {
  font-size: 16px;
  font-weight: 700;
  color: var(--ccbl-text-strong);
  margin-bottom: 6px;
  line-height: 1.35;
}
.ccbl-editorial-item:hover .ccbl-editorial-t {
  color: var(--market-primary);
}
.ccbl-editorial-d {
  font-size: 13.5px;
  color: var(--ccbl-text-body);
  margin-bottom: 8px;
  line-height: 1.6;
}
.ccbl-editorial-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--ccbl-text-muted);
}
.ccbl-editorial-meta .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ccbl-text-muted);
}

/* ==========================================================================
   TÉMOIGNAGES
   ========================================================================== */
.ccbl-tst-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--ccbl-rule-soft);
}
@media (min-width: 1024px) {
  .ccbl-tst-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.ccbl-tst {
  padding: 22px 20px;
  border-bottom: 1px solid var(--ccbl-rule-soft);
  border-right: 1px solid var(--ccbl-rule-soft);
}
@media (min-width: 1024px) {
  .ccbl-tst {
    border-bottom: none;
  }
  .ccbl-tst:last-child {
    border-right: none;
  }
}
.ccbl-sec--dark .ccbl-tst-grid {
  border-top-color: rgba(255, 255, 255, 0.16);
}
.ccbl-sec--dark .ccbl-tst {
  border-color: rgba(255, 255, 255, 0.14);
}
.ccbl-tst__mark {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--market-accent);
  margin-bottom: 12px;
}
.ccbl-tst__q {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ccbl-text-body);
  margin: 0 0 16px;
}
.ccbl-sec--dark .ccbl-tst__q {
  color: rgba(255, 255, 255, 0.78);
}
.ccbl-tst__who {
  display: flex;
  align-items: center;
  gap: 11px;
  border-top: 1px solid var(--ccbl-rule-soft);
  padding-top: 14px;
}
.ccbl-sec--dark .ccbl-tst__who {
  border-top-color: rgba(255, 255, 255, 0.14);
}
.ccbl-tst__av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ccbl-structure);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.ccbl-sec--dark .ccbl-tst__av {
  background: rgba(255, 255, 255, 0.12);
}
.ccbl-tst__n {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ccbl-text-strong);
}
.ccbl-sec--dark .ccbl-tst__n {
  color: #fff;
}
.ccbl-tst__r {
  font-size: 11.5px;
  color: var(--ccbl-text-muted);
}
.ccbl-sec--dark .ccbl-tst__r {
  color: rgba(255, 255, 255, 0.55);
}

/* ==========================================================================
   CHIFFRES CLÉS (bandeau sombre)
   ========================================================================== */
.ccbl-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
@media (min-width: 1024px) {
  .ccbl-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.ccbl-stat-cell {
  padding: 24px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.ccbl-stats-grid > .ccbl-stat-cell:nth-child(2n) {
  border-right: none;
}
@media (min-width: 1024px) {
  .ccbl-stat-cell {
    border-bottom: none;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
  }
  .ccbl-stats-grid > .ccbl-stat-cell:nth-child(2n) {
    border-right: 1px solid rgba(255, 255, 255, 0.12);
  }
  .ccbl-stats-grid > .ccbl-stat-cell:last-child {
    border-right: none;
  }
}
.ccbl-stat-num {
  font-size: 32px;
  font-weight: 800;
  color: #fff;
  line-height: 1.05;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 640px) {
  .ccbl-stat-num {
    font-size: 38px;
  }
}
.ccbl-stat-lbl {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.66);
  line-height: 1.4;
}

/* ==========================================================================
   CTA FINAL — voir le composant partagé
   `templates/partials/components/_cta_final_canada.html`, qui porte sa propre
   feuille de style sous le préfixe `.ccbl-cta2` (carte navy d'un seul tenant,
   visuel débordant, contenu centré verticalement). L'ancienne carte à liseré
   rouge (`.ccbl-cta-band`) a été retirée : elle isolait le visuel dans une
   colonne bornée et traçait une séparation entre les deux colonnes.
   ========================================================================== */

/* ==========================================================================
   GRILLE DE VALEURS (page À propos)
   ========================================================================== */
.ccbl-val-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--ccbl-rule-soft);
}
.ccbl-val-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 18px 0;
  border-bottom: 1px solid var(--ccbl-rule-soft);
}
.ccbl-val-ico {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: var(--ccbl-radius-md);
  background: var(--ccbl-tint);
  border: 1px solid var(--ccbl-rule-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ccbl-val-ico svg {
  width: 18px;
  height: 18px;
  color: var(--market-primary);
}
.ccbl-val-item--accent .ccbl-val-ico svg {
  color: var(--market-accent);
}
.ccbl-val-t {
  font-size: 15px;
  font-weight: 700;
  color: var(--ccbl-text-strong);
  margin-bottom: 4px;
}
.ccbl-val-d {
  font-size: 13.5px;
  color: var(--ccbl-text-body);
  line-height: 1.6;
}

/* ==========================================================================
   HERO DES PAGES INTÉRIEURES
   Conforme à la norme de charte : pas de badge, image en opacité .40, voile
   navy rgba(21,38,76,.50), H1 en #e51c22, description blanc pur.
   ========================================================================== */
.ccbl-page-hero {
  position: relative;
  overflow: hidden;
  background: var(--ccbl-structure);
  color: #fff;
  min-height: 400px;
  display: flex;
  align-items: center;
  padding: 56px 0;
}
@media (min-width: 1024px) {
  .ccbl-page-hero {
    padding: 72px 0;
  }
}
.ccbl-page-hero__bg {
  position: absolute;
  inset: 0;
  opacity: 0.4;
}
.ccbl-page-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ccbl-page-hero__bg--fallback {
  background: linear-gradient(135deg, #1b3a63 0%, #193153 58%, #142744 100%);
}
/* Grille technique posée par-dessus la photo, commune aux heros CCBL */
.ccbl-page-hero__grid {
  position: absolute;
  inset: 0;
  opacity: 0.1;
  pointer-events: none;
  z-index: 1;
}
.ccbl-page-hero__veil {
  position: absolute;
  inset: 0;
  background-color: rgba(21, 38, 76, 0.5);
}
.ccbl-page-hero h1 {
  /* Charte CCBL : le titre des heros de pages intérieures prend le BLEU CLAIR
     institutionnel (--market-light), et non plus le rouge accent. Le filet
     rouge au-dessus du titre est conservé : il reste la signature de section
     du marché canadien. Le rouge accent est réservé aux actions (boutons). */
  color: var(--market-light);
  font-size: 27px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 20px;
}
@media (min-width: 640px) {
  .ccbl-page-hero h1 {
    font-size: 34px;
  }
}
@media (min-width: 1024px) {
  .ccbl-page-hero h1 {
    font-size: 42px;
  }
}
.ccbl-page-hero p {
  color: #ffffff;
  font-size: 17px;
  line-height: 1.6;
  max-width: 760px;
  margin: 0;
}
.ccbl-br-lg {
  display: none;
}
@media (min-width: 640px) {
  .ccbl-br-lg {
    display: inline;
  }
}

/* ==========================================================================
   SECTION D'APPEL FINAL DU BLOG / DIVERS
   ========================================================================== */
.ccbl-section-intro {
  margin-bottom: 32px;
  max-width: 680px;
}

/* ==========================================================================
   PAGE CONTACT — CARTES DE COORDONNÉES
   --------------------------------------------------------------------------
   Le marché Global fait « décoller » ses cartes au survol
   (`hover:-translate-y-1` + `hover:shadow-lg`). À la demande du client, le
   Canada s'en distingue par un signal **éditorial** plutôt que mécanique :
   le filet accent se dessine sur le bord gauche de la carte, le fond glisse
   vers le bleu pâle de la charte, et le filet de l'icône s'intensifie.
   Aucun déplacement, aucune ombre portée.

   Le filet est un pseudo-élément animé en `scaleY` (et non un `border-left`
   qui ferait sauter la largeur de la carte au survol) : la mise en page ne
   bouge donc jamais. Il est posé au bord gauche en `top/bottom` plutôt qu'en
   `height: 100%`, afin de rester correct quel que soit l'empilement interne.
   ========================================================================== */
.ccbl-contact-card {
  position: relative;
  transition: background-color 0.28s ease;
}
.ccbl-contact-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--market-accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.28s ease;
  pointer-events: none;
}
.ccbl-contact-card:hover {
  background-color: var(--market-soft-bg);
}
.ccbl-contact-card:hover::before {
  transform: scaleY(1);
}
/* Le filet de l'icône suit le filet accent de la carte. */
.ccbl-contact-card .ccbl-contact-card__icon {
  transition: background-color 0.28s ease;
}
.ccbl-contact-card:hover .ccbl-contact-card__icon {
  background-color: rgba(227, 23, 35, 0.09);
}

/* Respect du mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  .ccbl-vitrine *,
  .ccbl-vitrine *::before,
  .ccbl-vitrine *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}