/* =============================================================================
   kb.css — Centre de connaissances (sprint-vitrine-18, Lot C)
   -----------------------------------------------------------------------------
   Réutilise le système visuel existant : fond photo sombre + cartes translucides
   à texte clair, coins carrés (--card-radius:0), CTA cyan (--cta-primary-bg).
   Styles NEUFS minimes : le maillage « Voir aussi » (.related-links) et le bloc
   « En résumé » (.page-summary) réutilisent leurs styles de style.css.
   ============================================================================= */

/* ---- Dégagement de la topbar fixe (sprint-19, Lot 0.A) ---------------------
   Les pages KB rendent leur PROPRE hero (.kb-hero) / fil d'Ariane, sans la
   classe .main-title-construction qui porte le margin-top des autres pages
   (layout-b.css). Sans ce dégagement, le titre / le fil d'Ariane passaient
   SOUS la topbar fixe (défaut constaté sprint-18). On dégage le <main> KB —
   parité desktop/mobile avec les autres gabarits. */
/* TD-24-2 (sprint-25) : le hero KB était trop bas vs les pages d'offre → on le
   remonte (dégagement réduit). Valeur à affiner à l'œil avec Arnaud. */
/* sprint-26 : ≥ zone de fondu du mask (88px) pour que le hero/titre KB (margin-top:0)
   soit NET au repos et ne démarre pas dans la rampe du fondu. */
body.page-connaissances main#main { padding-top: 96px; }
@media (max-width: 768px) {
  body.page-connaissances main#main { padding-top: 96px; }
}

/* ---- Alignement CHARTE (sprint-19.1, retour Arnaud) ------------------------
   Mêmes fonds / flou / ombre / centrage que les tuiles .square-block du site
   (index + espace client = l'ADN visuel). Le KB du sprint-18 avait le bon fond
   mais SANS backdrop-filter → texte peu lisible sur la photo. On aligne. */
/* Panneaux de LECTURE (corps d'article + sommaire) : restent plus sombres pour
   la lisibilité du texte long sur la photo (validé Arnaud). */
.kb-article,
.kb-toc {
  /* CANON DU FONDU (sprint-26) : PAS de backdrop-filter sous le mask (il empêche le
     texte de se fondre sous les barres selon le navigateur — Edge). Panneaux de
     LECTURE : la teinte 0.42 suffit à la lisibilité ; ils se fondent maintenant. */
  background: rgba(0, 0, 0, .42) !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
}
/* CARTES (catégories + articles) : alignées sur le CANON de l'accueil
   (.landing-box) — fond 0.28, flou, bordure, survol 0.35. Sprint-24 harmonisation. */
.kb-cat-card,
.kb-article-card-link {
  background: var(--card-bg, rgba(0,0,0,.28)) !important;
  backdrop-filter: var(--card-blur, blur(2px));
  -webkit-backdrop-filter: var(--card-blur, blur(2px));
  border: var(--card-border, 1px solid rgba(255,255,255,.15));
  /* TD-24-1 (sprint-25, retour Arnaud) : PAS de box-shadow — le canon .landing-box
     de l'index n'en a AUCUNE. L'ombre portée faisait « flotter » la carte KB
     autrement que les boîtes de l'accueil. Idem survol : 0.45 comme l'index. */
}
a.kb-cat-card:hover, a.kb-cat-card:focus-visible,
.kb-article-card-link:hover, .kb-article-card-link:focus-visible {
  background: rgba(0, 0, 0, .45) !important;
}
/* sprint-25 (refonte centrale) : la rustine « frosted-glass » (pseudo + copie de
   photo floutée) est SUPPRIMÉE. Le mask du <main> étant retiré, le backdrop-filter
   du canon ci-dessus (var(--card-blur)) refonctionne nativement — les cartes KB
   floutent la vraie photo, comme la boîte de l'index. Une seule règle, zéro pseudo. */
/* L'encadré Synila garde sa teinte cyan (identité), on ajoute juste flou + ombre */
.kb-synila-box { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .28); }
/* Titres de tuiles centrés comme .square-block */
.kb-cat-title, .kb-cat-desc, .kb-cat-card .kb-cat-more { text-align: center; }
/* Corps d'article : paragraphes justifiés (retour Arnaud) */
.kb-article-body p { text-align: justify; }
/* Fil d'Ariane : bloc aligné sur le contenu (980px centré, comme la liste des
   cartes) — retour Arnaud T2 : aligné à gauche du bloc, au niveau de la photo.
   Lisibilité par ombre portée (pas de bandeau inline qui cassait l'alignement). */
.kb-breadcrumb { display: block; text-shadow: 0 1px 8px rgba(0, 0, 0, .85); }

/* ---- Robustesse mots longs (DE/LB) — sprint-19, Lot 0.A --------------------
   Les composés allemands (« Wohnungseigentümergemeinschaft ») débordaient les
   titres KB en mobile 375px. Sprint-24 (retour Arnaud) : on ne coupe PLUS un mot
   au milieu avec un trait d'union (« copropri-été » était inadmissible). On
   garde uniquement overflow-wrap comme filet pour les mots vraiment trop longs
   (coupure SANS trait d'union, en dernier recours), et on désactive la césure. */
.kb-hero-title, .kb-cat-title, .kb-article-title,
.kb-article-body h2, .kb-article-card-title {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
}

/* ---- Hero (index + catégorie) --------------------------------------------- */
.kb-hero {
  max-width: 980px;
  /* sprint-20 (retour Arnaud) : sous la topbar mais espace au-dessus RÉDUIT de
   * moitié (100→50px) — le titre était un peu trop bas. */
  margin: 50px auto 1.6rem;
  padding: 0 18px;
  text-align: center;
  color: #fff;
}
.kb-hero-title {
  /* Aligné sur .main-title-construction (4.2rem) — cohérence inter-pages. */
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  margin: 0 0 17px;
  text-shadow: var(--hero-text-shadow, 0 3px 15px rgba(0,0,0,.7));
}
.kb-hero-intro {
  font-size: 1.05rem;
  line-height: 1.55;
  max-width: 760px;
  margin: 0 auto;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
}

/* ---- Grille des rubriques (index) ----------------------------------------- */
.kb-cat-grid {
  max-width: 1100px;
  margin: 0 auto 2rem;
  padding: 0 18px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  /* Géométrie du couple badge + flèche, définie UNE fois et partagée par les
     deux (cf. .kb-badge et .kb-cat-more). Même hauteur + même base ⇒ centres
     alignés, sans `bottom` calculé à la main qui dériverait avec la police. */
  --kb-badge-h: calc(.72rem * 1.2 + .4rem + 2px);
  --kb-badge-bottom: calc(1rem - 5px);
  --kb-badge-right: calc(2.6rem - 24px);   /* T5-ter puis T5-quater : +14px au total */
}
.kb-cat-card {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 1.4rem 1.3rem 2.4rem;
  /* Fond/flou/bordure/ombre = règle CANON unique plus haut (.kb-cat-card,
     .kb-article-card-link, alignée sur .landing-box index). Rien ici pour éviter
     les doublons barrés dans l'inspecteur. */
  border-radius: var(--card-radius, 0);
  color: #fff;
  text-decoration: none;
  transition: var(--card-transition, background .3s, transform .25s);
}
a.kb-cat-card:hover,
a.kb-cat-card:focus-visible {
  background: rgba(0,0,0,.45);
  transform: translateY(-2px);
  outline: none;
}
.kb-cat-card.is-coming { opacity: .82; }
/* Titre/desc de carte = police du CANON accueil (.box-title / .box-desc).
   Sprint-24 (retour Arnaud) : desc en BLANC (plus de gris/opacity) + ombre. */
.kb-cat-title { font-size: 1.5em; font-weight: 700; margin: 0 0 .5rem; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.kb-cat-desc  { font-size: .9em; line-height: 1.6; margin: 0; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.9); }
/* Pas de mot seul sur la dernière ligne (retour Arnaud : « …pas à / pas. »).
   Deux couches : `text-wrap: pretty` là où le navigateur le supporte, et une
   espace insécable posée côté serveur (kb_no_orphan) qui, elle, marche partout.
   La seconde suffit ; la première améliore aussi l'équilibre des lignes. */
.kb-cat-title, .kb-cat-desc, .kb-hero-intro, .kb-article-card-title { text-wrap: pretty; }
/* Flèche : collée au bord (4 px, retour Arnaud T5-bis) et CENTRÉE VERTICALEMENT
   sur le badge. Le centrage n'est pas obtenu par un `bottom` calculé à la main
   (il dériverait au moindre changement de police) mais en donnant à la flèche
   EXACTEMENT la hauteur du badge — `--kb-badge-h`, partagée par les deux — et le
   même `bottom` : deux boîtes de même hauteur et de même base ont forcément le
   même centre. */
.kb-cat-more {
  /* Position finale, arbitrée par Arnaud en 4 passes (T5 → T5-quinquies) :
     8 px du bord, 4 px au-dessus de la base du badge. */
  position: absolute; right: 8px; bottom: calc(var(--kb-badge-bottom) + 4px);
  height: var(--kb-badge-h);
  display: flex; align-items: center;
  font-size: 1.5rem; line-height: 1; color: var(--cta-primary-bg, #009FCB);
}
a.kb-cat-card:hover .kb-cat-more { color: var(--cta-primary-bg-hover, #61C452); }
/* Badge d'état d'une catégorie — sprint-21 (Lot C), placement arbitré par Arnaud
   (planche T5 puis T5-bis, 2026-07-27) : ancré à DROITE, descendu de 5 px, puis
   avancé de 10 px vers la droite.
   Un `right` UNIQUE pour les deux états (« à venir » / « N articles ») : sur le
   croquis d'Arnaud leurs bords droits sont alignés. Une carte « à venir » n'a pas
   de flèche mais garde la même gouttière — sinon son badge avancerait et les
   cartes ne s'aligneraient plus entre elles, ce qui est le défaut d'origine. */
.kb-badge {
  position: absolute; right: var(--kb-badge-right); bottom: var(--kb-badge-bottom);
  height: var(--kb-badge-h); box-sizing: border-box;
  display: inline-flex; align-items: center;
  font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
  padding: 0 .55rem; border: 1px solid rgba(255,255,255,.4);
  color: rgba(255,255,255,.85);
}
/* Catégorie active : le compteur prend l'accent maison (elle est cliquable). */
.kb-badge-count { border-color: rgba(0,159,203,.55); color: rgba(255,255,255,.92); }
a.kb-cat-card:hover .kb-badge-count,
a.kb-cat-card:focus-visible .kb-badge-count { border-color: var(--cta-primary-bg, #009FCB); }

/* ---- Fil d'Ariane visible -------------------------------------------------- */
.kb-breadcrumb {
  max-width: 980px;
  margin: 0 auto .8rem;
  padding: 0 18px;
  font-size: .85rem;
  color: rgba(255,255,255,.85);
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.kb-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.kb-breadcrumb a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.kb-breadcrumb a:hover { color: var(--cta-primary-bg, #009FCB); }
.kb-bc-sep { margin: 0 .35rem; opacity: .6; }
.kb-breadcrumb [aria-current="page"] { opacity: .8; }

/* ---- Liste d'articles (catégorie) ----------------------------------------- */
.kb-article-list {
  max-width: 980px;
  margin: 0 auto 2rem;
  padding: 0 18px;
  list-style: none;
  display: grid;
  gap: 1rem;
}
.kb-article-card { margin: 0; }
.kb-article-card-link {
  display: grid;
  grid-template-columns: 200px 1fr; /* T2 : vignette étroite mais assez large pour un recadrage propre */
  align-items: stretch;
  /* Fond/flou/bordure = règle CANON unique plus haut (alignée sur .landing-box). */
  color: #fff;
  text-decoration: none;
  transition: var(--card-transition, background .3s, transform .25s);
}
.kb-article-card-link:hover,
.kb-article-card-link:focus-visible { background: rgba(0,0,0,.45); transform: translateY(-2px); outline: none; }
/* T2 : la vignette de carte est un FOND CSS (background-size:cover) → il remplit
   TOUTE la hauteur de la bande grise, quelle qu'elle soit, sans le quirk de
   propagation de hauteur des cellules de grille étirées (fiable tous navigateurs). */
.kb-article-card-cover {
  overflow: hidden; min-height: 150px;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.kb-article-card-body { padding: 1.1rem 1.2rem; display: flex; flex-direction: column; }
.kb-article-card-title { font-size: 1.2rem; margin: 0 0 .4rem; }
.kb-article-card-summary { font-size: .9em; line-height: 1.6; margin: 0 0 .6rem; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.9); }
.kb-article-card-meta { font-size: .82rem; color: rgba(255,255,255,.75); margin: 0 0 .5rem; }
.kb-dot { margin: 0 .4rem; opacity: .6; }
.kb-article-card-more { margin-top: auto; color: var(--cta-primary-bg, #009FCB); font-weight: 600; font-size: .9rem; }

.kb-empty {
  max-width: 700px; margin: 1rem auto 2rem; padding: 1.4rem;
  text-align: center; color: #fff;
  background: var(--card-bg, rgba(0,0,0,.28)); border: var(--card-border, 1px solid rgba(255,255,255,.15));
}

/* ---- Cover image + placeholder -------------------------------------------- */
.kb-cover { margin: 0 0 1.2rem; }
.kb-cover img { display: block; width: 100%; height: auto; }
.kb-cover-placeholder {
  display: flex; align-items: center; justify-content: center;
  min-height: 180px;
  background: linear-gradient(135deg, #12202f 0%, #1c3a4d 60%, #009FCB 100%);
}
.kb-article-card-cover .kb-cover-placeholder { min-height: 140px; }
.kb-cover-ph-mark {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 3rem; font-weight: 700; color: rgba(255,255,255,.85);
}

/* ---- Article (lecture longue) --------------------------------------------- */
.kb-article {
  max-width: 820px;
  margin: 0 auto;
  padding: 1.6rem 1.6rem 2rem;
  background: var(--card-bg, rgba(0,0,0,.30));
  border: var(--card-border, 1px solid rgba(255,255,255,.15));
  color: #fff;

  /* ── CANON de mise en forme des articles (sprint-24, retour Arnaud) ──────
     UN SEUL endroit pilote TOUTES les pages d'article. Tourner ces boutons met
     à jour les ~11 articles (et les suivants) d'un coup :
       --kb-lh          interligne (espace ENTRE LES LIGNES) — resserré ~30 %
       --kb-gap         espace vertical entre paragraphes (= « bon » prod : .7rem)
       --kb-title-gap   espace AVANT et APRÈS un titre H2 (symétrique, « espace 1 »)
       --kb-text-shadow ombre portée du texte sur la photo (lisibilité — validé)
       --kb-link        couleur des liens dans le corps (lisible sur photo) */
  --kb-lh: 1.3;
  --kb-gap: .7rem;
  --kb-title-gap: .85rem;
  --kb-text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 2px 14px rgba(0,0,0,.72);
  --kb-link: #57C4EA;
}
.kb-article-head { margin-bottom: 1.2rem; }
.kb-article-cat {
  display: inline-block; margin-bottom: .5rem;
  font-size: .8rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--cta-primary-bg, #009FCB); text-decoration: none;
}
.kb-article-cat:hover { color: var(--cta-primary-bg-hover, #61C452); }
.kb-article-title { font-size: clamp(1.7rem, 3.4vw, 2.3rem); margin: 0 0 .7rem; line-height: 1.2; }
.kb-article-meta { font-size: .85rem; color: rgba(255,255,255,.78); display: flex; flex-wrap: wrap; align-items: center; gap: .1rem; }
.kb-article-meta time { color: rgba(255,255,255,.9); }

/* Résumé (réutilise .page-summary de style.css ; ajustement pour paragraphe) */
.kb-summary.page-summary { margin: 1.2rem 0; }
.kb-summary.page-summary p { margin: 0; line-height: var(--kb-lh); }
/* « Les étapes en bref » (sprint-27) : même boîte + même rythme vertical 1.2rem que le
   résumé et le sommaire → écarts inter-boîtes cohérents (arbitrage Arnaud). */
.kb-inbrief.page-summary { margin: 1.2rem 0; }

/* Sommaire auto (TOC) */
.kb-toc {
  margin: 1.2rem 0 1.6rem;
  padding: 1rem 1.2rem;
  background: rgba(0,0,0,.25);
  border-left: 3px solid var(--cta-primary-bg, #009FCB);
}
.kb-toc-title { font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 .6rem; }
.kb-toc ol { margin: 0; padding-left: 1.2rem; }
.kb-toc li { margin: .2rem 0; }
.kb-toc a { color: rgba(255,255,255,.92); text-decoration: none; }
.kb-toc a:hover { color: var(--cta-primary-bg, #009FCB); text-decoration: underline; }

/* Corps de l'article — interligne/espaces pilotés par les variables du canon
   (.kb-article : --kb-lh / --kb-gap / --kb-text-shadow). Sprint-24 : −20 % sur
   l'interligne et les espaces (retour Arnaud), + ombre portée pour ressortir sur
   la photo (panneau photo inchangé). */
.kb-article-body { font-size: 1.05rem; line-height: var(--kb-lh); text-shadow: var(--kb-text-shadow); }
/* Espace 1 (retour Arnaud) : AVANT et APRÈS un titre = même taille (symétrique),
   restauré à un niveau confortable — l'espace sous le titre ne doit plus être écrasé. */
.kb-article-body h2 { font-size: 1.4rem; margin: var(--kb-title-gap) 0; scroll-margin-top: 80px; }
.kb-article-body h3 { font-size: 1.15rem; margin: calc(var(--kb-title-gap) * .7) 0 calc(var(--kb-title-gap) * .45); }
.kb-article-body p { margin: 0 0 var(--kb-gap); }
.kb-article-body ul, .kb-article-body ol { margin: 0 0 .8rem 1.4rem; }
.kb-article-body li { margin: .12rem 0; line-height: var(--kb-lh); }
/* Liens (retour Arnaud) : le cyan de marque #009FCB passait mal sur la photo →
   teinte plus claire + soulignement pour l'affordance et la lisibilité. */
.kb-article-body a { color: var(--kb-link); text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .14em; }
.kb-article-body a:hover { color: var(--cta-primary-bg-hover, #61C452); }

/* Encadré Synila (discret, reconfigurable — Lot G) */
.kb-synila-box {
  margin: 1.8rem 0 1rem;
  padding: 1.1rem 1.3rem;
  background: rgba(0, 159, 203, .14);
  border: 1px solid rgba(0, 159, 203, .5);
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
}
.kb-synila-text { margin: 0; flex: 1 1 260px; font-size: .98rem; }
.kb-synila-cta {
  flex: 0 0 auto;
  padding: .5rem 1rem;
  background: var(--cta-primary-bg, #009FCB); color: var(--cta-primary-color, #fff);
  text-decoration: none; font-weight: 600; font-size: .9rem;
  transition: var(--cta-transition, background .3s, transform .2s);
}
.kb-synila-cta:hover { background: var(--cta-primary-bg-hover, #61C452); }

.kb-article-cta { margin-top: 1.6rem; text-align: center; }

/* Maillage (réutilise .related-links de style.css) : recentrage sur la colonne */
.kb-related { max-width: 820px; }

/* ============================================================================
   Retours Arnaud sprint-19.1 (T1-T5)
   ============================================================================ */

/* T1 — sous-titre (intro) du hero sur un bandeau, comme .construction-subtitle */
.kb-hero-intro {
  display: inline-block;
  max-width: 900px;
  background: rgba(0, 0, 0, .58);
  padding: 10px 18px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .7);
}

/* T3/T5 — fil d'Ariane DÉPLACÉ dans le conteneur .kb-article (au-dessus de la
   cover) : plus de bandeau propre (le conteneur porte déjà le fond), juste une
   ligne lisible en tête. */
.kb-article .kb-breadcrumb {
  display: block;
  background: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: 0 0 .7rem;
}
/* T3/T5 — fil d'Ariane sur UNE seule ligne ; dernier crumb (titre) tronqué en … */
.kb-breadcrumb ol { flex-wrap: nowrap; overflow: hidden; }
.kb-breadcrumb li { flex-shrink: 0; min-width: 0; }
.kb-breadcrumb li:last-child { flex-shrink: 1; overflow: hidden; }
.kb-breadcrumb [aria-current="page"] {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}

/* T4 — le kicker « MICRO-COPROPRIÉTÉS » (catégorie) sur un petit label lisible */
.kb-article-cat {
  background: rgba(255, 255, 255, .12);
  padding: .22rem .6rem;
  font-weight: 700;
}
.kb-article-cat:hover { background: rgba(255, 255, 255, .18); }

/* T3/T4 — « Voir aussi » : même traitement carte que le reste (lisible sur photo) */
.related-links.kb-related {
  background: rgba(0, 0, 0, .42);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
  padding: 1.2rem 1.4rem;
  margin: 1.4rem auto 0;
}

/* ---- Responsive ------------------------------------------------------------ */
@media (max-width: 640px) {
  .kb-article-card-link { grid-template-columns: 1fr; }
  .kb-article-card-cover { min-height: 160px; }
  .kb-article { padding: 1.2rem 1rem 1.6rem; }
}

/* Avertissement juridique en pied d'article (relecture expert, T3) : présent sur
   TOUS les articles depuis le sprint-21 — discret mais lisible, il ne doit ni
   concurrencer le corps ni disparaître visuellement. */
.kb-article-disclaimer {
  margin: 1.6rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid rgba(255,255,255,.18);
  font-size: .86rem; line-height: var(--kb-lh);
  /* retour Arnaud : plus blanc + italique + ombre pour ressortir sur la photo */
  color: rgba(255,255,255,.95);
  font-style: italic;
  text-shadow: var(--kb-text-shadow);
}

/* sprint-23 — tableaux dans le corps d'article (ex. régimes de majorité AG) */
.kb-article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2rem 0;
  font-size: .95rem;
}
.kb-article-body th,
.kb-article-body td {
  border: 1px solid rgba(0, 0, 0, .12);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.kb-article-body thead th {
  background: rgba(0, 0, 0, .05);
  font-weight: 600;
}
.kb-article-body table + p { margin-top: .6rem; }
@media (max-width: 640px) {
  .kb-article-body table { font-size: .85rem; }
  .kb-article-body th, .kb-article-body td { padding: 6px 7px; }
}