/*
 * IBC — Fiche individuelle (single-pathologie & single-protocole_kine)
 * Institut Basque du Coureur
 */

/* ═══════════════════════════════════════════
   HERO FICHE — sombre (RGAA AA : blanc sur #0D0D0D)
   ═══════════════════════════════════════════ */

.ibc-hero--pathologie {
  background: var(--ibc-noir, #0D0D0D);
  padding-block: 56px 48px;
  padding-top: calc(80px + 56px); /* 80px = offset nav sticky */
  margin-top: -80px;              /* colle au header, supprime la bande blanche */
  position: relative;
  overflow: hidden;
}

/* Trait décoratif rouge en bas du hero */
.ibc-hero--pathologie::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ibc-orange, #C8102E) 0%, transparent 100%);
}

/* Cercle décoratif en arrière-plan */
.ibc-hero--pathologie::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -120px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 16, 46,.08) 0%, transparent 70%);
  pointer-events: none;
}

.ibc-patho-hero__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

/* Breadcrumb sur fond sombre */
.ibc-hero--pathologie .ibc-breadcrumb {
  margin-bottom: 24px;
}
.ibc-hero--pathologie .ibc-breadcrumb a,
.ibc-hero--pathologie .ibc-breadcrumb span {
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
}
.ibc-hero--pathologie .ibc-breadcrumb a:hover {
  color: #fff;
}

/* Badge zone sur fond sombre */
.ibc-badge--zone-dark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,0.12);  /* pastille neutre translucide sur hero sombre */
  color: #fff;                        /* blanc sur fond translucide = ratio ≥ 4.5:1 */
  white-space: nowrap;
}

.ibc-patho-hero__time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
}

.ibc-patho-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 800;
  color: #ffffff;                    /* ratio 21:1 sur #0D0D0D ✓ RGAA */
  line-height: 1.1;
  margin: 0 0 12px;
}

.ibc-patho-hero__excerpt {
  font-family: var(--font-body);
  font-size: 17px;
  color: rgba(255, 255, 255, 0.75);  /* ratio > 4.5:1 sur #0D0D0D ✓ */
  max-width: 620px;
  line-height: 1.6;
  margin: 0;
}

/* Badge sévérité */
.ibc-badge--severite {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
}


/* ═══════════════════════════════════════════
   LAYOUT 2 COLONNES (classe unique pour single)
   Evite le conflit avec ibc-pages.css qui
   applique display:grid à .ibc-patho-layout
   ═══════════════════════════════════════════ */

.ibc-single-layout {
  padding-block: 72px;
  background: #fff;
}

/* ── Reveal animation ── */
[data-ibc-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
[data-ibc-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-ibc-reveal][data-delay="1"] { transition-delay: 0.1s; }
[data-ibc-reveal][data-delay="2"] { transition-delay: 0.15s; }
[data-ibc-reveal][data-delay="3"] { transition-delay: 0.22s; }
[data-ibc-reveal][data-delay="4"] { transition-delay: 0.32s; }

.ibc-patho-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 56px;
  align-items: start;
}

@media (max-width: 1024px) {
  .ibc-patho-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .ibc-toc { display: none; }
}


/* ═══════════════════════════════════════════
   TABLE OF CONTENTS
   ═══════════════════════════════════════════ */

.ibc-toc {
  position: sticky;
  top: 100px;
}

.ibc-toc__inner {
  background: var(--ibc-bg-light);
  border-radius: 12px;
  padding: 24px 20px;
}

.ibc-toc__title {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ibc-gray-text);
  margin-bottom: 16px;
}

.ibc-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ibc-toc__link {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ibc-gray-text);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 6px;
  border-left: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  line-height: 1.4;
}

.ibc-toc__link:hover,
.ibc-toc__link.is-active,
.ibc-toc__item.is-active .ibc-toc__link {
  color: var(--ibc-orange);
  border-left-color: var(--ibc-orange);
  background: rgba(200, 16, 46, 0.06);
  font-weight: 600;
}


/* ═══════════════════════════════════════════
   ARTICLE CONTENU
   ═══════════════════════════════════════════ */

.ibc-patho-content {
  min-width: 0; /* évite overflow en grid */
}

.ibc-patho-section {
  margin-bottom: 72px;
  scroll-margin-top: 110px;
}

/* ── Header de section : icône + titre alignés ── */
.ibc-section-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--ibc-orange, #C8102E);
}
.ibc-section-header__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: rgba(200, 16, 46, .10);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ibc-orange, #C8102E);
}
/* Le titre dans ce contexte : sans marge propre ni bordure double */
.ibc-section-header .ibc-section-title {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* ── Titre de section ── */
.ibc-section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.5vw, 1.9rem);
  font-weight: 700;
  color: var(--ibc-navy);
  margin-bottom: 24px;
  padding-bottom: 12px;
}

.ibc-section-title--orange {
  border-bottom: 2px solid var(--ibc-orange);
}


/* ═══════════════════════════════════════════
   PROSE (contenu WYSIWYG)
   ═══════════════════════════════════════════ */

.ibc-prose {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ibc-black);
  line-height: 1.75;
}

.ibc-prose--sm {
  font-size: 14px;
}

.ibc-prose p { margin-bottom: 16px; }
.ibc-prose p:last-child { margin-bottom: 0; }

.ibc-prose strong { font-weight: 700; }
.ibc-prose em     { font-style: italic; }

.ibc-prose h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ibc-navy);
  margin: 32px 0 12px;
}

.ibc-prose ul,
.ibc-prose ol {
  margin: 0 0 16px 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ibc-prose ul li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.ibc-prose ul li::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ibc-orange);
  margin-top: 8px;
  flex-shrink: 0;
}

.ibc-prose ol {
  counter-reset: ol-counter;
}
.ibc-prose ol li {
  counter-increment: ol-counter;
  display: flex;
  gap: 12px;
}
.ibc-prose ol li::before {
  content: counter(ol-counter) '.';
  font-weight: 700;
  color: var(--ibc-orange);
  flex-shrink: 0;
  min-width: 20px;
}

.ibc-prose img,
.ibc-prose figure {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: 8px auto 24px;
  border-radius: 14px;
  border: 1px solid var(--ibc-gray-border, #E5E3DD);
  box-shadow: 0 8px 24px rgba(13, 13, 13, 0.08);
}

.ibc-prose figure img {
  box-shadow: none;
  border: none;
  margin: 0;
}

.ibc-prose figcaption {
  text-align: center;
  font-size: 0.8rem;
  color: var(--ibc-gray-text, #6B6B6B);
  margin-top: 8px;
}


/* ═══════════════════════════════════════════
   ÉTAPES DE TRAITEMENT (repeater)
   ═══════════════════════════════════════════ */

.ibc-treatment-steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ibc-treatment-step {
  display: flex;
  gap: 24px;
  padding: 24px 28px;
  background: #fff;
  border-radius: 14px;
  border: 1.5px solid rgba(200, 16, 46,.15);
  border-left: 4px solid var(--ibc-orange, #C8102E);
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
  transition: box-shadow 0.25s, transform 0.25s;
}
.ibc-treatment-step:hover {
  box-shadow: 0 8px 28px rgba(200, 16, 46,.10);
  transform: translateY(-2px);
}

.ibc-treatment-step__num {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: var(--ibc-orange, #C8102E);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.1rem;
  box-shadow: 0 4px 12px rgba(200, 16, 46,.30);
}

.ibc-treatment-step__body {
  flex: 1;
  min-width: 0;
}

.ibc-treatment-step__title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ibc-navy);
  margin-bottom: 8px;
}


/* ── Variante compacte : timeline verticale ──
   Pour les listes de libellés courts (ex. objectifs
   thérapeutiques) où la carte pleine grandeur est
   disproportionnée par rapport au contenu. */

.ibc-treatment-steps--compact {
  gap: 0;
}

.ibc-treatment-steps--compact .ibc-treatment-step {
  position: relative;
  gap: 14px;
  padding: 0 0 20px;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.ibc-treatment-steps--compact .ibc-treatment-step:hover {
  box-shadow: none;
  transform: none;
}

.ibc-treatment-steps--compact .ibc-treatment-step:last-child {
  padding-bottom: 0;
}

.ibc-treatment-steps--compact .ibc-treatment-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 30px;
  bottom: 0;
  width: 2px;
  background: rgba(0, 122, 61, .18);
}

.ibc-treatment-steps--compact .ibc-treatment-step__num {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  font-size: .8rem;
  box-shadow: none;
  position: relative;
  z-index: 1;
}

.ibc-treatment-steps--compact .ibc-treatment-step__body {
  padding-top: 4px;
}

.ibc-treatment-steps--compact .ibc-treatment-step__title {
  font-size: .92rem;
  font-weight: 600;
  margin-bottom: 0;
  line-height: 1.4;
}


/* ═══════════════════════════════════════════
   FAQ FICHE (details / summary)
   ═══════════════════════════════════════════ */

.ibc-faq-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ibc-faq__item {
  background: #fff;
  border: 1.5px solid var(--ibc-gray-border, #e8e8e8);
  border-radius: 14px;
  overflow: visible; /* override ibc-design-system.css qui met overflow:hidden */
  transition: border-color 0.2s, box-shadow 0.2s;
}

.ibc-faq__item:hover {
  border-color: rgba(200, 16, 46,.25);
  box-shadow: 0 4px 16px rgba(200, 16, 46,.06);
}
.ibc-faq__item[open] {
  border-color: rgba(200, 16, 46,.40);
  box-shadow: 0 4px 20px rgba(200, 16, 46,.08);
}

.ibc-faq__question {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 20px 20px 24px; /* padding-right réduit pour laisser respirer le + */
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ibc-navy);
  user-select: none;
  /* .ibc-faq__item est en overflow:visible (cf plus haut) : sans son propre
     border-radius, le fond de hover (ibc-design-system.css) déborde des
     coins arrondis du conteneur et le bouton +/− semble "sortir" du cadre.
     Fermé : les 4 coins arrondissent comme l'item. Ouvert : seuls les 2 coins
     du haut, pour raccorder proprement avec la réponse en dessous. */
  border-radius: 14px;
  /* ibc-design-system.css met width:100% sur .ibc-faq__question (pensé pour
     son pattern bouton+div). Sur un <summary>, Chrome/Safari réservent en
     plus un "marker gutter" (la place de la puce de liste native) même une
     fois list-style:none appliqué : un width:100% se calcule alors sur la
     largeur totale de la ligne, gouttière comprise, et le contenu déborde
     du conteneur côté droit — exactement l'icône +/- qui semblait "sortir"
     du cadre. En display:flex (donc display extérieur "block"), width:auto
     occupe déjà toute la largeur disponible via l'algorithme de boîte bloc
     normal, qui lui tient compte de cette gouttière correctement. */
  width: auto;
}
.ibc-faq__item[open] .ibc-faq__question {
  border-radius: 14px 14px 0 0;
}

.ibc-faq__question::-webkit-details-marker { display: none; }
.ibc-faq__question::marker { content: ''; display: none; }

.ibc-faq__icon {
  color: var(--ibc-orange, #C8102E);
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(200, 16, 46, .08);
  border-radius: 50%;
  transition: background 0.2s;
}
.ibc-faq__item[open] .ibc-faq__icon,
.ibc-faq__item:hover .ibc-faq__icon {
  background: rgba(200, 16, 46, .15);
}

/* + visible quand fermé, — visible quand ouvert */
.ibc-faq__icon-plus  { display: block; }
.ibc-faq__icon-minus { display: none;  }
.ibc-faq__item[open] .ibc-faq__icon-plus  { display: none;  }
.ibc-faq__item[open] .ibc-faq__icon-minus { display: block; }

/* ibc-design-system.css met display:none sur .ibc-faq__answer —
   on réaffiche quand le <details> est ouvert (comportement natif HTML) */
.ibc-faq__item[open] .ibc-faq__answer { display: block; }

.ibc-faq__answer {
  padding: 0 24px 20px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ibc-black);
  line-height: 1.7;
  border-top: 1px solid var(--ibc-gray-border);
  padding-top: 16px;
}


/* ═══════════════════════════════════════════
   CTA PROTOCOLE KINÉ
   ═══════════════════════════════════════════ */

.ibc-kine-cta {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 32px;
  background: #E8F8EE;
  border-radius: 16px;
  border-left: 4px solid #007A3D;
  margin-bottom: 64px;
}

.ibc-kine-cta__icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  background: rgba(61, 184, 122, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #007A3D;
}

.ibc-kine-cta__body { flex: 1; min-width: 0; }

.ibc-kine-cta__title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ibc-navy);
  margin-bottom: 12px;
}

.ibc-kine-cta__desc {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ibc-black);
  line-height: 1.7;
  margin-bottom: 20px;
}

.ibc-kine-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Boutons verts spécifiques */
.ibc-btn--green {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: #007A3D;
  color: white;
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.2s;
}
.ibc-btn--green:hover { background: #2ea066; }

.ibc-btn--green-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: white;
  color: #007A3D;
  border: 2px solid #007A3D;
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.2s;
}
.ibc-btn--green-outline:hover { background: rgba(61, 184, 122, 0.1); }

@media (max-width: 640px) {
  .ibc-kine-cta { flex-direction: column; }
}


/* ═══════════════════════════════════════════
   PATHOLOGIES SIMILAIRES
   ═══════════════════════════════════════════ */

.ibc-patho-grid-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 900px) {
  .ibc-patho-grid-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .ibc-patho-grid-cards { grid-template-columns: 1fr; }
}

.ibc-patho-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: var(--ibc-white);
  border: 2px solid var(--ibc-gray-border);
  border-radius: 16px;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.ibc-patho-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--ibc-shadow-lg);
  border-color: rgba(200, 16, 46, 0.25);
}

.ibc-patho-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s;
  background: rgba(200, 16, 46, 0.08);  /* tint rouge discret (contexte pathologie) */
}
.ibc-patho-card__icon--vert { background: rgba(0, 122, 61, 0.08); }  /* tint vert (contexte protocole kiné) */
.ibc-patho-card:hover .ibc-patho-card__icon { transform: scale(1.1); }

.ibc-patho-card__body { flex: 1; }

.ibc-patho-card__title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ibc-navy);
  margin-bottom: 8px;
}

.ibc-patho-card__desc {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ibc-gray-text);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ibc-patho-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--ibc-gray-border);
  flex-wrap: wrap;
  gap: 8px;
}

.ibc-patho-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ibc-orange);
}


/* ═══════════════════════════════════════════
   HERO PROTOCOLE KINÉ
   ═══════════════════════════════════════════ */

.ibc-hero--green {
  background: #E8F8EE;
  padding-block: 48px;
}

.ibc-proto-hero__tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #007A3D;
  background: rgba(61, 184, 122, 0.15);
  border: 1px solid rgba(61, 184, 122, 0.3);
  padding: 6px 16px;
  border-radius: var(--ibc-radius-pill);
  margin-bottom: 20px;
}

.ibc-proto-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800;
  color: var(--ibc-navy);
  line-height: 1.15;
  margin-bottom: 16px;
}

.ibc-proto-hero__diagnostic {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--ibc-gray-text);
  max-width: 600px;
  line-height: 1.6;
  margin-bottom: 32px;
}

.ibc-proto-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ibc-proto-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ibc-navy);
  background: white;
  border: 1px solid rgba(61, 184, 122, 0.3);
  border-radius: var(--ibc-radius-pill);
  padding: 8px 16px;
}

.ibc-proto-chip--dl {
  background: #007A3D;
  color: white;
  border-color: #007A3D;
  text-decoration: none;
  transition: background 0.2s;
}
.ibc-proto-chip--dl:hover { background: #2ea066; }


/* ═══════════════════════════════════════════
   CONTENU PROTOCOLE
   ═══════════════════════════════════════════ */

.ibc-proto-layout {
  padding-block: 64px;
}

.ibc-proto-container {
  max-width: 860px;
}

.ibc-proto-section {
  margin-bottom: 56px;
}

.ibc-section-title--green {
  border-bottom: 2px solid #007A3D;
}

/* ── Objectifs ── */
.ibc-proto-objectifs {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ibc-proto-objectif {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 20px;
  background: var(--ibc-bg-light);
  border-radius: 10px;
}

.ibc-proto-objectif__num {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: #007A3D;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
}

.ibc-proto-objectif__text {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ibc-black);
  line-height: 1.5;
  margin: 0;
  padding-top: 5px;
}

/* ── Techniques ── */
.ibc-proto-techniques {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ibc-proto-technique {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: white;
  border: 1px solid var(--ibc-gray-border);
  border-radius: 10px;
}

.ibc-proto-technique__icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: rgba(61, 184, 122, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ibc-proto-technique__body { flex: 1; }

.ibc-proto-technique__titre {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ibc-navy);
  margin-bottom: 6px;
}

.ibc-proto-technique__detail {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ibc-gray-text);
  line-height: 1.5;
  margin: 0;
}

/* ── Pathologie liée ── */
.ibc-proto-related {
  padding: 24px;
  background: var(--ibc-bg-light);
  border-radius: 12px;
  border-left: 4px solid var(--ibc-orange);
}

.ibc-proto-related__label {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ibc-gray-text);
  margin-bottom: 8px;
}

.ibc-proto-related__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--ibc-orange);
  text-decoration: none;
}
.ibc-proto-related__link:hover { text-decoration: underline; }


/* ═══════════════════════════════════════════
   COMPOSANTS « DESIGN RICHE v2 » — test Périostite
   tibiale (piste B). Chaque section correspondante
   ne s'affiche que si son champ ACF est rempli, donc
   ces classes ne sont visibles nulle part ailleurs
   tant que le contenu docx v2 n'a pas été saisi.
   ═══════════════════════════════════════════ */

/* ── Encart « En savoir plus » (utilisable dans .ibc-prose, ex. Causes) ── */
.ibc-callout {
  display: flex;
  gap: 14px;
  padding: 18px 22px;
  background: var(--ibc-bg-light);
  border-left: 4px solid var(--ibc-navy);
  border-radius: 10px;
  margin: 24px 0;
}
.ibc-callout__icon { flex-shrink: 0; font-size: 1.3rem; line-height: 1; }
.ibc-callout__body { flex: 1; min-width: 0; }
.ibc-callout__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ibc-navy);
  margin: 0 0 6px;
}
.ibc-callout p { margin: 0 0 8px; font-family: var(--font-body); font-size: 14.5px; line-height: 1.65; color: var(--ibc-black); }
.ibc-callout p:last-child { margin-bottom: 0; }

/* ── Examens complémentaires : grille de cartes ── */
.ibc-exam-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.ibc-exam-card {
  background: #fff;
  border: 1.5px solid var(--ibc-gray-border, #E5E3DD);
  border-radius: 14px;
  padding: 20px 22px;
}
.ibc-exam-card--ref {
  border-color: rgba(200, 16, 46, .35);
  box-shadow: 0 4px 16px rgba(200, 16, 46, .08);
}
.ibc-exam-card__badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ibc-orange);
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.ibc-exam-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ibc-navy);
  margin: 0 0 8px;
}
.ibc-exam-card__text {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--ibc-gray-text);
  line-height: 1.6;
  margin: 0;
}

/* ── Diagnostics différentiels : liste de cartes ── */
.ibc-diff-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ibc-diff-item {
  display: flex;
  gap: 16px;
  padding: 18px 20px;
  background: var(--ibc-bg-light);
  border-radius: 12px;
}
.ibc-diff-item__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(200, 16, 46, .10);
  color: var(--ibc-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-family: var(--font-heading);
}
.ibc-diff-item__body { flex: 1; min-width: 0; }
.ibc-diff-item__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .95rem;
  color: var(--ibc-navy);
  margin: 0 0 6px;
}
.ibc-diff-item__text {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ibc-black);
  line-height: 1.6;
  margin: 0;
}

/* ── Classification / stades : cartes couleur ── */
.ibc-stage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}
.ibc-stage-card {
  background: #fff;
  border: 1.5px solid var(--ibc-gray-border, #E5E3DD);
  border-top: 4px solid var(--stage-color, var(--ibc-orange));
  border-radius: 14px;
  padding: 22px;
}
.ibc-stage-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1rem;
  color: var(--ibc-navy);
  margin: 0 0 10px;
}
.ibc-stage-card__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--stage-color, var(--ibc-orange));
  flex-shrink: 0;
}
.ibc-stage-card__text {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--ibc-gray-text);
  line-height: 1.6;
  margin: 0;
}

/* ── Traitements complémentaires : cartes avec statut ── */
.ibc-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.ibc-status-card {
  background: #fff;
  border: 1.5px solid var(--ibc-gray-border, #E5E3DD);
  border-radius: 14px;
  padding: 20px 22px;
}
.ibc-status-card__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.ibc-status-card__pill--recommande      { background: var(--ibc-vert-bg, #EAF4EE); color: var(--ibc-vert, #007A3D); }
.ibc-status-card__pill--optionnel       { background: var(--ibc-ivory); color: var(--ibc-gray-text); }
.ibc-status-card__pill--prudence        { background: #FFF4E5; color: #B45309; }
.ibc-status-card__pill--non-recommande  { background: var(--ibc-rouge-bg, #FDF2F4); color: var(--ibc-rouge); }
.ibc-status-card__pill--contre-indique  { background: var(--ibc-noir); color: #fff; }
.ibc-status-card__pill--experimental    { background: #F5F3FF; color: #7C3AED; }
.ibc-status-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .98rem;
  color: var(--ibc-navy);
  margin: 0 0 8px;
}
.ibc-status-card__text {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--ibc-gray-text);
  line-height: 1.6;
  margin: 0;
}

/* ── Erreurs fréquentes : liste d'alerte ── */
.ibc-mistakes-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ibc-mistake-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  background: var(--ibc-rouge-bg, #FDF2F4);
  border-left: 3px solid var(--ibc-rouge);
  border-radius: 12px;
}
.ibc-mistake-item__icon {
  flex-shrink: 0;
  color: var(--ibc-rouge);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.5;
}
.ibc-mistake-item__text {
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--ibc-black);
  line-height: 1.6;
  margin: 0;
}

/* ── « À retenir » : encart de synthèse sombre (fin de fiche) ── */
.ibc-patho-conclusion {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--ibc-noir) 0%, var(--ibc-noir-soft, #1E1E1E) 100%);
  border-radius: 20px;
  padding: 40px 44px;
}
.ibc-patho-conclusion::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 16, 46, .25) 0%, transparent 70%);
  pointer-events: none;
}
.ibc-patho-conclusion__pretitle {
  position: relative;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ibc-orange);
  margin: 0 0 14px;
}
.ibc-patho-conclusion__text {
  position: relative;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: rgba(255, 255, 255, .92);
  margin: 0;
}

@media (max-width: 640px) {
  .ibc-patho-conclusion { padding: 28px 26px; border-radius: 16px; }
}


/* ═══════════════════════════════════════════
   LIGHTBOX — image cliquable (schéma anatomie)
   Même pattern que le composant partagé injecté
   sur les pages articles (cf. inc/update-stress-
   mecanique-overview-top.php) : classe .ibc-lb sur
   l'<img>, overlay plein écran #ibc-lb-overlay.
   ═══════════════════════════════════════════ */

img.ibc-lb {
  cursor: zoom-in;
  transition: opacity .2s, transform .2s;
}
img.ibc-lb:hover { opacity: .92; transform: scale(1.015); }

.ibc-lb-hint {
  font-family: var(--font-body);
  font-size: .8rem;
  color: var(--ibc-gray-text, #999);
  margin: -16px 0 24px;
  text-align: center;
}

#ibc-lb-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, .88);
  align-items: center;
  justify-content: center;
  padding: 20px;
  cursor: zoom-out;
}
#ibc-lb-overlay.ibc-lb-open {
  display: flex;
  animation: ibcLbIn .18s ease;
}
@keyframes ibcLbIn { from { opacity: 0; } to { opacity: 1; } }

#ibc-lb-img {
  max-width: 90vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 8px 48px rgba(0, 0, 0, .6);
  cursor: default;
}

#ibc-lb-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
  opacity: .8;
  transition: opacity .2s;
}
#ibc-lb-close:hover,
#ibc-lb-close:focus { opacity: 1; }

#ibc-lb-caption {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .7);
  font-family: var(--font-body, sans-serif);
  font-size: .82rem;
  text-align: center;
  margin: 0;
  max-width: 80vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}