/* ==========================================================================
   _blc-offre.css — feuille UNIQUE des blocs d'offre partages (site + plaquette)
   Namespace .blc-* : ne depend ni de cosmo (site) ni de theme-pbnb-v2 (plaquette).
   Palette daVRan : bleu #1696d2 · bleu nuit #0a4c6a · orange #ca5b00 · jaune #fdbf11.

   Deux modes de lecture, pilotes par l'hote :
     · defaut         -> le detail d'une carte se deplie au survol (site web)
     · .blc-static    -> le detail est toujours visible (plaquette, PDF, mobile)
   Le print force toujours le detail visible : un PDF ne se survole pas.
   dcr 2026-09-29
   ========================================================================== */

.blc { --blc-bleu: #1696d2; --blc-nuit: #0a4c6a; --blc-orange: #ca5b00; --blc-jaune: #fdbf11;
       --blc-jaune-ink: #8a6a00; --blc-ink: #1f2a36; --blc-soft: #4a5563; --blc-faint: #8a92a0;
       --blc-rule: #e3e7ed; }

/* ---- Chapeau de bloc ---- */
.blc-intro { max-width: 74ch; margin: 0 0 1.2rem; font-size: 0.95rem; line-height: 1.58; color: var(--blc-soft); }
.blc-intro em { color: var(--blc-faint); }

/* ==========================================================================
   POINTS FORTS — cartes compactes, detail au survol
   ========================================================================== */
.blc-forces { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.95rem; margin: 1.3rem 0 2.2rem; }
.blc-force {
  position: relative; padding: 1.05rem 1.1rem 1rem; background: #fff;
  border: 1px solid var(--blc-rule); border-left: 3px solid var(--fc, var(--blc-bleu));
  border-radius: 5px; break-inside: avoid; page-break-inside: avoid;
  transition: box-shadow .18s ease, transform .18s ease;
}
.blc-force:hover { box-shadow: 0 8px 24px rgba(10, 76, 106, 0.12); transform: translateY(-2px); }
.blc-force > i { display: block; font-size: 1.2rem; color: var(--fc, var(--blc-bleu)); margin-bottom: 0.4rem; line-height: 1; }
.blc-force > b { display: block; font-size: 0.97rem; font-weight: 680; color: var(--blc-ink); letter-spacing: -0.012em; margin-bottom: 0.3rem; }
.blc-force > p { margin: 0; font-size: 0.87rem; line-height: 1.52; color: var(--blc-soft); }
.blc-force .blc-detail {
  max-height: 0; opacity: 0; overflow: hidden; margin-top: 0;
  font-size: 0.83rem; line-height: 1.5; color: var(--blc-faint);
  transition: max-height .3s ease, opacity .24s ease, margin-top .3s ease;
}
.blc-force:hover .blc-detail, .blc-force:focus-within .blc-detail { max-height: 20rem; opacity: 1; margin-top: 0.55rem; }
.blc-force .blc-detail b { color: var(--blc-soft); font-weight: 600; }

/* Detail toujours visible : plaquette, PDF, ecrans tactiles */
.blc-static .blc-force .blc-detail,
.blc-force.blc-open .blc-detail { max-height: none; opacity: 1; margin-top: 0.55rem; }
.blc-static .blc-force:hover { box-shadow: none; transform: none; }

@media (max-width: 1199.98px) { .blc-forces { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 899.98px)  { .blc-forces { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599.98px)  { .blc-forces { grid-template-columns: 1fr; }
  .blc-force .blc-detail { max-height: none; opacity: 1; margin-top: 0.55rem; } }

/* ==========================================================================
   MATRICE THEMATIQUE — genere depuis le ddict (sp-gen-blc-donnees)
   Un theme = une carte : compte d'indicateurs, indice synthetique, phares, bases.
   ========================================================================== */
.blc-matrix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem; margin: 1.2rem 0 1.2rem; }
.blc-theme {
  padding: 0.85rem 0.95rem 0.8rem; background: #fff;
  border: 1px solid var(--blc-rule); border-left: 3px solid var(--fc, var(--blc-bleu));
  border-radius: 5px; break-inside: avoid; page-break-inside: avoid;
}
.blc-theme .th { display: flex; align-items: center; gap: 0.55rem; font-weight: 680; font-size: 0.97rem; color: var(--blc-ink); letter-spacing: -0.01em; }
.blc-theme .th i {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 1.85rem; height: 1.85rem; border-radius: 50%; font-size: 0.9rem;
  color: var(--fc, var(--blc-bleu)); background: color-mix(in srgb, var(--fc, var(--blc-bleu)) 13%, #fff);
}
.blc-theme .meta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.6rem; align-items: center; margin: 0.45rem 0 0.55rem 2.4rem; font-size: 0.78rem; }
.blc-theme .n { font-weight: 640; color: var(--fc, var(--blc-bleu)); }
.blc-theme .idx {
  display: inline-block; padding: 0.06rem 0.5rem; border-radius: 3px;
  background: rgba(253, 191, 17, 0.22); color: var(--blc-jaune-ink); font-weight: 620; letter-spacing: 0.02em;
}
.blc-theme .idx::before { content: "\25C6\00A0"; font-size: 0.7em; }
.blc-theme .row { font-size: 0.83rem; line-height: 1.42; color: var(--blc-soft); margin: 0.2rem 0 0 2.4rem; }
.blc-theme .row .k { display: block; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.62rem; font-weight: 680; color: var(--blc-faint); margin-bottom: 1px; }
.blc-theme .row.bases { color: var(--blc-faint); font-size: 0.78rem; }
.blc-theme .reg { display: inline-block; margin: 0.4rem 0 0 2.4rem; font-size: 0.74rem; font-weight: 620; color: var(--blc-orange); }
.blc-theme .reg::before { content: "\2696\00A0"; }
.blc-matrix-note { margin: 0.2rem 0 2rem; font-size: 0.8rem; color: var(--blc-faint); }
.blc-matrix-note b { color: var(--blc-soft); font-weight: 600; }

@media (max-width: 991.98px) { .blc-matrix { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599.98px) { .blc-matrix { grid-template-columns: 1fr; } }

/* ==========================================================================
   PRINT — plaquette PDF (A4 portrait, ~700 px utiles) : 2 colonnes, detail ouvert.
   `screen and` sur les blocs mobiles ci-dessus n'est pas necessaire : le print
   redefinit explicitement les grilles.
   ========================================================================== */
@media print {
  .blc-forces, .blc-matrix { grid-template-columns: repeat(2, 1fr) !important; gap: 0.6rem; }
  .blc-force .blc-detail { max-height: none !important; opacity: 1 !important; margin-top: 0.5rem !important; }
  .blc-force, .blc-theme { box-shadow: none !important; transform: none !important; }
}

/* ==========================================================================
   PITCH — chapeau partage (site, plaquette, deck)
   Le logo est A CHEVAL sur le nom et le slogan : grille 2 colonnes, la marque
   occupe les deux premieres rangees. La description passe dessous, pleine largeur.
   ========================================================================== */
.blc-pitch {
  display: grid; grid-template-columns: auto 1fr;
  column-gap: 1.35rem; row-gap: 0.1rem;
  align-items: center; margin: 0 0 1.6rem;
}
.blc-pitch-mark { grid-row: 1 / 3; grid-column: 1; width: 104px; height: 104px; display: block; }
.blc-pitch-nom {
  grid-column: 2; align-self: end;
  font-size: clamp(2.3rem, 4.4vw, 3.2rem); font-weight: 700; line-height: 1;
  letter-spacing: -0.035em; color: var(--blc-nuit);
}
.blc-pitch-slogan {
  grid-column: 2; align-self: start;
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.62rem;
  margin-top: 0.5rem;
}
.blc-pitch-slogan span {
  font-size: 0.95rem; font-weight: 640; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--blc-bleu);
}
/* Separateur : un losange, echo du marqueur d'indice synthetique de la matrice */
.blc-pitch-slogan i { width: 5px; height: 5px; transform: rotate(45deg); background: var(--blc-jaune); }
.blc-pitch-desc {
  grid-column: 1 / -1; max-width: 68ch; margin: 1.15rem 0 0;
  font-size: 1.02rem; line-height: 1.6; color: var(--blc-soft);
}
.blc-pitch-desc b { color: var(--blc-ink); font-weight: 620; }

@media (max-width: 575.98px) {
  .blc-pitch { grid-template-columns: 1fr; }
  .blc-pitch-mark { grid-row: auto; width: 74px; height: 74px; margin-bottom: 0.5rem; }
  .blc-pitch-slogan span { font-size: 0.82rem; letter-spacing: 0.1em; }
}

/* ==========================================================================
   REGISTRES — trois tuiles, prestations CLIQUABLES avec detail au survol
   ========================================================================== */
.blc-registres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; margin: 1.5rem 0 2.6rem; }
.blc-reg {
  display: flex; flex-direction: column; padding: 1.45rem 1.35rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--fc) 22%, #fff);
  border-top: 3px solid var(--fc);
  background: color-mix(in srgb, var(--fc) 4%, #fff);
  border-radius: 5px; break-inside: avoid; page-break-inside: avoid;
  transition: box-shadow .18s ease, transform .18s ease;
}
.blc-reg:hover { box-shadow: 0 10px 28px color-mix(in srgb, var(--fc) 18%, transparent); transform: translateY(-3px); }
.blc-reg > i.ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; border-radius: 50%; margin-bottom: 0.75rem;
  background: color-mix(in srgb, var(--fc) 16%, #fff); color: var(--fc); font-size: 1.25rem;
}
.blc-reg > b { font-size: 1.28rem; font-weight: 680; letter-spacing: -0.02em; color: color-mix(in srgb, var(--fc) 80%, #000); }
.blc-reg > .sub { display: block; margin: 0.2rem 0 0.9rem; font-size: 0.92rem; line-height: 1.45; color: var(--blc-soft); }

/* Une prestation = un lien vers son ancre sur la page Offre. Le detail se deplie
   au survol de la LIGNE : on ne surcharge pas la tuile au repos. */
.blc-reg ul { list-style: none; margin: 0 0 auto; padding: 0; }
.blc-reg li { border-top: 1px solid color-mix(in srgb, var(--fc) 16%, #fff); }
.blc-reg li:first-child { border-top: none; }
.blc-reg li > a {
  display: block; padding: 0.42rem 0; text-decoration: none;
  font-size: 0.92rem; line-height: 1.35; color: var(--blc-ink); font-weight: 560;
}
.blc-reg li > a:hover { color: var(--fc); }
.blc-reg li > a .d {
  display: block; max-height: 0; opacity: 0; overflow: hidden;
  font-size: 0.82rem; line-height: 1.45; font-weight: 400; color: var(--blc-faint);
  transition: max-height .26s ease, opacity .2s ease, margin-top .26s ease;
}
.blc-reg li > a:hover .d, .blc-reg li > a:focus .d { max-height: 9rem; opacity: 1; margin-top: 0.22rem; }
.blc-reg .blc-fl {
  display: block; margin-top: 1rem; padding-top: 0.75rem;
  border-top: 1px solid color-mix(in srgb, var(--fc) 25%, #fff);
  font-size: 0.875rem; line-height: 1.5; color: #33506b;
}
.blc-reg .go {
  display: inline-block; margin-top: 0.85rem; font-size: 0.86rem; font-weight: 580;
  color: color-mix(in srgb, var(--fc) 80%, #000); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.blc-reg .go:hover { border-bottom-color: currentColor; }

/* Detail toujours ouvert : plaquette, PDF, mobile */
.blc-static .blc-reg li > a .d { max-height: none; opacity: 1; margin-top: 0.22rem; }
.blc-static .blc-reg:hover { box-shadow: none; transform: none; }

@media (max-width: 991.98px) { .blc-registres { grid-template-columns: 1fr; }
  .blc-reg li > a .d { max-height: none; opacity: 1; margin-top: 0.22rem; } }
@media print { .blc-registres { grid-template-columns: repeat(3, 1fr) !important; gap: 0.6rem; }
  .blc-reg li > a .d { max-height: none !important; opacity: 1 !important; }
  .blc-reg { box-shadow: none !important; transform: none !important; } }

/* ==========================================================================
   POINTS FORTS — constat visible, puis au survol : ce qui se pratique (croix
   rouge, avec sa SOURCE) et l'approche (fleche verte).
   La source de l'exemple est affichee : un ❌ sans source se conteste en reunion.
   ========================================================================== */
.blc-force > p.cst {
  margin: 0 0 0.45rem; padding-bottom: 0.45rem;
  border-bottom: 1px dashed color-mix(in srgb, var(--fc, var(--blc-bleu)) 30%, #fff);
  font-size: 0.855rem; line-height: 1.48; color: var(--blc-faint); font-style: italic;
}
.blc-force .blc-detail .ko,
.blc-force .blc-detail .ok {
  position: relative; padding-left: 1.6rem; margin-top: 0.6rem;
  font-size: 0.83rem; line-height: 1.5;
}
.blc-force .blc-detail b {
  display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; margin-bottom: 0.15rem;
}
/* Pastille ronde : croix rouge / fleche verte, dessinees en CSS (aucune police d'icone
   requise — le bloc doit tenir dans un PDF hors ligne). */
.blc-force .blc-detail .ko::before,
.blc-force .blc-detail .ok::before {
  content: "\2715"; position: absolute; left: 0; top: 0.02rem;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.62rem; font-weight: 700; line-height: 1;
  background: #fdecea; color: #c0392b; border: 1px solid #f0c2bc;
}
.blc-force .blc-detail .ok::before {
  content: "\27A4"; background: #eaf6ec; color: #2e7d32; border-color: #bfe0c6; font-size: 0.58rem;
}
.blc-force .blc-detail .ko { color: #7d6763; }
.blc-force .blc-detail .ko b { color: #c0392b; }
.blc-force .blc-detail .ok { color: var(--blc-soft); }
.blc-force .blc-detail .ok b { color: #2e7d32; }
.blc-force .blc-detail .ex { display: block; margin-top: 0.35rem; color: #8a6a00; }
.blc-force .blc-detail .ex .src {
  display: block; margin-top: 0.12rem; font-size: 0.73rem; font-style: italic; color: var(--blc-faint);
}
.blc-force .blc-detail a.pv {
  display: inline-block; margin-top: 0.6rem; font-size: 0.79rem; font-weight: 560;
  color: var(--fc, var(--blc-bleu)); text-decoration: none; border-bottom: 1px solid currentColor;
}
.blc-force .blc-detail a.pv::before { content: "\2192\00A0"; }
/* Le detail est plus long qu'avant : de la place pour se deplier. */
.blc-force:hover .blc-detail, .blc-force:focus-within .blc-detail { max-height: 42rem; }
.blc-static .blc-force .blc-detail { max-height: none; }

/* ==========================================================================
   V4 — 2026-10-01 : quatre registres, neuf forces, carte mentale
   ========================================================================== */

/* ---- Registres : quatre tuiles, mots-cles sous le verbe ---- */
.blc-registres { grid-template-columns: repeat(4, 1fr); gap: 1.05rem; }
.blc-reg { padding: 1.3rem 1.15rem 1.15rem; }
.blc-reg > b { font-size: 1.32rem; }
.blc-reg > .mots {
  display: block; margin: 0.15rem 0 0.35rem;
  font-size: 0.72rem; font-weight: 660; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fc);
}
.blc-reg > .sub { font-size: 0.95rem; font-weight: 520; color: #1f2a36; margin-bottom: 1rem; }
.blc-reg li > a { font-size: 0.88rem; }
@media (max-width: 1199.98px) { .blc-registres { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767.98px)  { .blc-registres { grid-template-columns: 1fr; } }
@media print { .blc-registres { grid-template-columns: repeat(2, 1fr) !important; } }

/* ---- Forces : neuf cartes, trois colonnes ---- */
.blc-forces { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 899.98px) { .blc-forces { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599.98px) { .blc-forces { grid-template-columns: 1fr; } }

/* ---- Indice synthetique : signale, pas crie ---- */
.blc-theme .idx, .blc-mind-pop .idx { background: none; padding: 0; color: var(--blc-jaune-ink); font-weight: 560; }

/* ---- Navbar : sur l'accueil le chapeau porte deja la marque, la navbar ne garde que le signe ---- */
body:has(.blc-pitch) .navbar-brand .bd-nom,
body:has(.blc-pitch) .navbar-brand .bd-sep,
body:has(.blc-pitch) .navbar-brand .bd-sub { display: none; }

/* ==========================================================================
   CARTE MENTALE — bulle-slogan au centre, un trait vers chaque theme.
   Le detail d'un theme s'ouvre AU CENTRE au survol de sa bulle : il remplace le
   slogan, donc il ne deborde jamais. Position calculee en unites de conteneur
   (cqw) a partir des coordonnees de la bulle (--x, --y en %). Sans JavaScript.
   Ecran large seulement : en mode statique, en print et sur mobile c'est la
   matrice de cartes (.blc-matrix) qui s'affiche — un PDF ne se survole pas.
   ========================================================================== */
.blc-mind {
  position: relative; width: 100%; aspect-ratio: 1000 / 620;
  container-type: inline-size; margin: 1.2rem 0 0.4rem;
}
.blc-mind svg.lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.blc-mind svg.lines line { stroke: #d5dde4; stroke-width: 1.4; }
.blc-mind-c {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 26cqw; aspect-ratio: 1; border-radius: 50%; padding: 6cqw 3.2cqw;
  background: var(--blc-nuit); color: #fff; text-align: center;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 34px rgba(10, 76, 106, 0.28); z-index: 2;
  transition: opacity .18s ease;
}
.blc-mind-c .slogan { font-size: clamp(0.85rem, 1.55cqw, 1.2rem); font-weight: 640; line-height: 1.3; letter-spacing: -0.01em; }
.blc-mind-c .slogan b { color: var(--blc-jaune); font-weight: 720; }
.blc-mind-c .det { display: none; font-size: clamp(0.72rem, 1.15cqw, 0.9rem); line-height: 1.45; color: #dbe7ee; }
.blc-mind-c .det b { color: #fff; }
.blc-mind-c:hover .slogan { display: none; }
.blc-mind-c:hover .det { display: block; }

.blc-mind-n {
  position: absolute; transform: translate(-50%, -50%); width: 19.5cqw;
  display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem 0.5rem 0.5rem;
  background: color-mix(in srgb, var(--fc) 7%, #fff);
  border: 1px solid color-mix(in srgb, var(--fc) 32%, #fff); border-radius: 999px;
  z-index: 3; transition: box-shadow .15s ease, transform .15s ease;
}
.blc-mind-n > i {
  flex: 0 0 auto; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem;
  background: color-mix(in srgb, var(--fc) 16%, #fff); color: var(--fc);
}
.blc-mind-n .lab { font-size: clamp(0.7rem, 1.05cqw, 0.84rem); font-weight: 620; color: var(--blc-ink); line-height: 1.2; }
.blc-mind-n .lab .n { display: block; font-size: 0.86em; font-weight: 500; color: var(--blc-faint); margin-top: 1px; }
.blc-mind-n:hover { box-shadow: 0 8px 22px color-mix(in srgb, var(--fc) 28%, transparent); transform: translate(-50%, -50%) scale(1.03); z-index: 5; }
.blc-mind:has(.blc-mind-n:hover) .blc-mind-c { opacity: 0.05; }

.blc-mind-pop {
  display: none; position: absolute; z-index: 6; cursor: auto;
  left: calc(50% + (50 - var(--x)) * 1cqw);
  top:  calc(50% + (50 - var(--y)) * 0.62cqw);      /* 620/1000 : le % vertical en cqw */
  transform: translate(-50%, -50%); width: 36cqw;
  padding: 1rem 1.15rem 0.95rem; text-align: left; background: #fff;
  border: 1px solid var(--blc-rule); border-top: 3px solid var(--fc); border-radius: 6px;
  box-shadow: 0 16px 44px rgba(10, 76, 106, 0.2);
}
.blc-mind-n:hover .blc-mind-pop { display: block; }
.blc-mind-pop .th { display: flex; align-items: center; gap: 0.55rem; font-weight: 680; font-size: 1rem; color: var(--blc-ink); }
.blc-mind-pop .th i {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 1.85rem; height: 1.85rem; border-radius: 50%; font-size: 0.9rem;
  color: var(--fc); background: color-mix(in srgb, var(--fc) 13%, #fff);
}
.blc-mind-pop .meta { display: flex; flex-wrap: wrap; gap: 0.3rem 0.7rem; margin: 0.45rem 0 0.5rem 2.4rem; font-size: 0.8rem; }
.blc-mind-pop .n { font-weight: 640; color: var(--fc); }
.blc-mind-pop .idx::before { content: "\25C6\00A0"; font-size: 0.7em; }
.blc-mind-pop .row { font-size: 0.85rem; line-height: 1.42; color: var(--blc-soft); margin: 0.2rem 0 0 2.4rem; }
.blc-mind-pop .row .k { display: block; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.62rem; font-weight: 680; color: var(--blc-faint); }
.blc-mind-pop .row.bases { color: var(--blc-faint); font-size: 0.8rem; }
.blc-mind-pop .reg { display: inline-block; margin: 0.4rem 0 0 2.4rem; font-size: 0.75rem; font-weight: 620; color: var(--blc-orange); }
.blc-mind-pop .reg::before { content: "\2696\00A0"; }

/* Quelle vue, selon le mode */
.blc-matrix { display: none; }
.blc-static .blc-mind { display: none; }
.blc-static .blc-matrix { display: grid; }
@media (max-width: 899.98px) { .blc-mind { display: none; } .blc-matrix { display: grid; } }
@media print { .blc-mind { display: none !important; } .blc-matrix { display: grid !important; } }

/* ==========================================================================
   V5 — 2026-10-01 : registres COMPACTS en trois niveaux
   Repos    : icone, type de prestation, question.            (~180 px)
   Survol tuile       : la liste des prestations se deplie.
   Survol prestation  : sa description apparait. Clic : page Offre, ancre.
   Avant, tout etait visible et en gras : la tuile faisait 600 px et la premiere
   phrase ne se distinguait pas des prestations.
   ========================================================================== */
.blc-reg { padding: 1.25rem 1.2rem 1.1rem; }
.blc-reg > b { font-size: 1.22rem; line-height: 1.2; }
.blc-reg > .mots { display: none; }                  /* garde en source, pas affiche */
.blc-reg > .q {
  display: block; margin: 0.45rem 0 0.2rem;
  font-size: 0.98rem; font-weight: 500; line-height: 1.4; color: #2f3b47;
}
.blc-reg > .hint { display: block; font-size: 0.72rem; color: var(--blc-faint); font-style: italic; margin-bottom: 0.1rem; }
.blc-reg ul {
  max-height: 0; opacity: 0; overflow: hidden; margin: 0;
  transition: max-height .32s ease, opacity .25s ease, margin .32s ease;
}
.blc-reg:hover ul, .blc-reg:focus-within ul { max-height: 32rem; opacity: 1; margin-top: 0.75rem; margin-bottom: 0.2rem; }
.blc-reg:hover > .hint { visibility: hidden; }
/* Les prestations ne sont plus en gras : c'est une liste, pas une suite de titres */
.blc-reg li > a { font-weight: 500; font-size: 0.9rem; color: #2f3b47; padding: 0.38rem 0; }
.blc-reg li > a:hover { color: var(--fc); font-weight: 560; }
.blc-reg li > a .d { font-size: 0.8rem; }
/* La promesse et le lien ne viennent qu'avec la liste */
.blc-reg .blc-fl, .blc-reg .go { display: none; }
.blc-reg:hover .blc-fl, .blc-reg:focus-within .blc-fl { display: block; margin-top: 0.75rem; }
.blc-reg:hover .go, .blc-reg:focus-within .go { display: inline-block; }
/* Statique, print, mobile : tout est ouvert, rien ne depend du survol */
.blc-static .blc-reg ul, .blc-static .blc-reg .blc-fl { max-height: none; opacity: 1; display: block; margin-top: 0.75rem; }
.blc-static .blc-reg .go { display: inline-block; }
.blc-static .blc-reg > .hint { display: none; }
@media (max-width: 991.98px) {
  .blc-reg ul, .blc-reg .blc-fl { max-height: none; opacity: 1; display: block; margin-top: 0.75rem; }
  .blc-reg .go { display: inline-block; } .blc-reg > .hint { display: none; } }
@media print {
  .blc-reg ul, .blc-reg .blc-fl { max-height: none !important; opacity: 1 !important; display: block !important; }
  .blc-reg .go { display: inline-block !important; } .blc-reg > .hint { display: none !important; } }

/* ==========================================================================
   V6 — 2026-10-01 soir : chapeau sans logo quand l'hote a une navbar, bulle
   centrale claire, question par theme, forces en trois familles.
   ========================================================================== */

/* ---- Chapeau : le site a deja le logo en haut a gauche, on ne le repete pas.
   La plaquette (pas de .navbar) garde le logo a cheval. ---- */
body:has(.navbar) .blc-pitch { grid-template-columns: 1fr; }
body:has(.navbar) .blc-pitch-mark { display: none; }
body:has(.navbar) .blc-pitch-nom, body:has(.navbar) .blc-pitch-slogan { grid-column: 1; }
body:has(.navbar) .blc-pitch-slogan { margin-top: 0.35rem; }
/* ...et la navbar reprend donc son texte sur l'accueil */
body:has(.blc-pitch) .navbar-brand .bd-nom,
body:has(.blc-pitch) .navbar-brand .bd-sep,
body:has(.blc-pitch) .navbar-brand .bd-sub { display: inline; }

/* ---- Bulle centrale : claire, plus petite, une question ---- */
.blc-mind-c {
  width: 21cqw; padding: 4.5cqw 2.4cqw;
  background: #fff; color: var(--blc-nuit);
  border: 2px solid var(--blc-nuit);
  box-shadow: 0 10px 28px rgba(10, 76, 106, 0.14);
}
.blc-mind-c .slogan { font-size: clamp(0.82rem, 1.45cqw, 1.1rem); color: var(--blc-nuit); }
.blc-mind-c .slogan b { color: var(--blc-orange); }
.blc-mind-c .det { color: var(--blc-soft); }
.blc-mind-c .det b { color: var(--blc-nuit); }

/* ---- Bulle de theme : question en tete, indicateurs maison, livrables ---- */
.blc-mind-pop .q, .blc-theme .q {
  margin: 0.4rem 0 0.1rem 2.4rem; font-size: 0.98rem; font-weight: 560; line-height: 1.35;
  color: var(--fc, var(--blc-nuit));
}
.blc-mind-pop .row.maison, .blc-theme .row.maison { color: var(--blc-soft); }
.blc-mind-pop .row.maison .k, .blc-theme .row.maison .k { color: var(--blc-jaune-ink); }
.blc-mind-pop .row.liv a, .blc-theme .row.liv a {
  color: var(--fc, var(--blc-bleu)); text-decoration: none; font-weight: 560;
  border-bottom: 1px solid color-mix(in srgb, var(--fc, var(--blc-bleu)) 40%, #fff);
}
.blc-mind-pop .row.liv a:hover, .blc-theme .row.liv a:hover { border-bottom-color: currentColor; }
.blc-mind-pop { width: 38cqw; }

/* ==========================================================================
   FORCES — trois familles en colonnes, lignes compactes, detail au survol
   ========================================================================== */
.blc-forces3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin: 1.2rem 0 2.4rem; }
.blc-fcol { border-top: 3px solid var(--fc); padding-top: 0.75rem; }
.blc-fhead {
  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fc);
}
.blc-fhead i { font-size: 0.95rem; }
.blc-frow {
  border-bottom: 1px solid var(--blc-rule); padding: 0.7rem 0.55rem 0.7rem 0.4rem;
  border-radius: 4px; transition: background .15s ease;
}
.blc-frow:last-child { border-bottom: none; }
.blc-frow:hover, .blc-frow:focus-within { background: color-mix(in srgb, var(--fc) 5%, #fff); }
.blc-fhd { display: grid; grid-template-columns: 1.5rem 1fr; column-gap: 0.55rem; }
.blc-fhd i { grid-row: 1 / 3; margin-top: 0.1rem; color: var(--fc); font-size: 1rem; }
.blc-fhd b { font-size: 0.97rem; font-weight: 660; color: var(--blc-ink); letter-spacing: -0.01em; line-height: 1.3; }
.blc-fhd .cst { font-size: 0.84rem; line-height: 1.45; color: var(--blc-faint); font-style: italic; margin-top: 0.1rem; }
.blc-fdet {
  max-height: 0; opacity: 0; overflow: hidden; margin: 0 0 0 2.05rem;
  transition: max-height .32s ease, opacity .25s ease, margin-top .32s ease;
}
.blc-frow:hover .blc-fdet, .blc-frow:focus-within .blc-fdet { max-height: 40rem; opacity: 1; margin-top: 0.55rem; }
.blc-fdet .mieux { margin: 0 0 0.5rem; font-size: 0.88rem; line-height: 1.5; color: var(--blc-ink); font-weight: 520; }
.blc-fdet .ko, .blc-fdet .ok { position: relative; padding-left: 1.55rem; margin-top: 0.5rem; font-size: 0.83rem; line-height: 1.5; }
.blc-fdet b.k, .blc-fdet .ko > b, .blc-fdet .ok > b {
  display: block; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 0.15rem;
}
.blc-fdet .ko::before, .blc-fdet .ok::before {
  content: "\2715"; position: absolute; left: 0; top: 0.02rem; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: 700; line-height: 1;
  background: #fdecea; color: #c0392b; border: 1px solid #f0c2bc;
}
/* 261003 : plus de pastille verte sur l approche. Une FLECHE nue, teintee par la colonne :
   la pastille mettait le constat et l approche sur le meme plan visuel ; la fleche dit ou
   on va, elle ne coche pas une case. */
.blc-fdet .ok::before { content: "\2192"; background: none; border: 0; color: var(--fc);
  font-size: 0.95rem; font-weight: 400; justify-content: flex-start; top: -0.05rem; }
.blc-fdet .ok > b { color: var(--fc) !important; }
.blc-fdet .ko { color: #7d6763; } .blc-fdet .ko > b { color: #c0392b; }
.blc-fdet .ok { color: var(--blc-soft); } .blc-fdet .ok > b { color: #2e7d32; }
.blc-fdet .ex { display: block; margin-top: 0.3rem; color: #8a6a00; }
.blc-fdet .ex .src { display: block; margin-top: 0.1rem; font-size: 0.72rem; font-style: italic; color: var(--blc-faint); }
.blc-fdet a.pv { display: inline-block; margin-top: 0.5rem; font-size: 0.78rem; font-weight: 560; color: var(--fc); text-decoration: none; border-bottom: 1px solid currentColor; }
.blc-fdet a.pv::before { content: "\2192\00A0"; }
/* statique, print, mobile : tout ouvert */
.blc-static .blc-fdet { max-height: none; opacity: 1; margin-top: 0.55rem; }
@media (max-width: 991.98px) { .blc-forces3 { grid-template-columns: 1fr; } .blc-fdet { max-height: none; opacity: 1; margin-top: 0.55rem; } }
@media print { .blc-forces3 { grid-template-columns: 1fr !important; } .blc-fdet { max-height: none !important; opacity: 1 !important; margin-top: 0.5rem !important; } .blc-frow { break-inside: avoid; } }

/* ===================================================================== V7 (261003)
   Retours utilisateur sur capture :
   - FORCES : plus de familles, donc plus de barre de couleur par colonne (elle suggerait une
     categorisation qui n existe plus) ; le descriptif sous le titre n est plus en italique.
   - CARTE MENTALE : la bulle centrale etait trop grosse et les pastilles trop petites ; les
     pastilles montrent desormais les BASES (ce qu on vend) et non le nombre d indicateurs.
   ===================================================================== */
.blc-fcol { border-top-color: var(--blc-rule); }
.blc-fhd .cst { font-style: normal; color: var(--blc-soft); }
.blc-mind-c { width: 16cqw; padding: 3cqw 1.8cqw; }
.blc-mind-c .slogan { font-size: clamp(0.72rem, 1.15cqw, 0.95rem); }
.blc-mind-n { width: 25cqw; padding: 0.6rem 0.95rem 0.6rem 0.6rem; gap: 0.6rem; }
.blc-mind-n .lab { font-size: clamp(0.78rem, 1.2cqw, 0.95rem); }
.blc-mind-n .lab .n { font-size: clamp(0.62rem, 0.9cqw, 0.74rem); color: var(--blc-soft); font-weight: 500; }

/* V8 (261004) : la ligne « ce qu'on y trouve » des tuiles registres est VISIBLE AU REPOS.
   Retour utilisateur : la phrase a verbe seule ne disait pas clairement ce qu'on propose. */
.blc-reg .blc-fl { display: block; margin-top: 0.6rem; font-size: 0.84rem; line-height: 1.45; color: var(--blc-soft); }

/* V9 (261004) : AXES des forces — couleur sur l'icone et la fleche, legende au-dessus. */
.blc-faxes { display: flex; gap: 1.4rem; flex-wrap: wrap; margin: 0.4rem 0 0.2rem; font-size: 0.8rem;
  font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blc-soft); }
.blc-faxes span { display: inline-flex; align-items: center; gap: 0.45rem; }
.blc-faxes i { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--fa); }
.blc-frow .blc-fhd > i { color: var(--fa) !important; }
.blc-frow { --fc: var(--fa); }

/* V10 (261004) : pastilles d'outils de la force « stack » */
.blc-fbdg { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.35rem 0 0 1.9rem; }
.blc-fbdg span { font-size: 0.7rem; font-weight: 650; letter-spacing: 0.02em; padding: 0.1rem 0.5rem;
  border-radius: 999px; background: color-mix(in srgb, var(--fa) 12%, #fff); color: var(--blc-ink);
  border: 1px solid color-mix(in srgb, var(--fa) 35%, #fff); }