/* ═══════════════════════════════════════════════
   therapies.css — Styles partagés : pages de thérapies
   ═══════════════════════════════════════════════ */

/* ── Hero ── */
.therapy-hero {
  padding: calc(var(--header-height, 64px) + 2.5rem) 2.5rem 3rem;
  position: relative; overflow: hidden;
}
.therapy-hero::before {
  content: ''; position: absolute; top: -120px; right: 300px;
  width: 500px; height: 500px; pointer-events: none;
}
.therapy-hero::after {
  content: ''; position: absolute; bottom: -100px; right: -80px;
  width: 380px; height: 380px; border-radius: 50%; pointer-events: none;
}
.therapy-hero__abbr {
  position: absolute; right: -0.05em; top: 50%; transform: translateY(-35%); z-index: 0;
  font-family: var(--font-sans);
  font-size: clamp(7rem, 14vw, 12rem); font-weight: 900;
  color: rgba(255,255,255,0.07); line-height: 0.85;
  letter-spacing: -0.06em; pointer-events: none; user-select: none;
}
.therapy-hero__inner {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 270px;
  align-items: center; gap: 4rem;
  position: relative; z-index: 1; padding-right: 7rem;
}
.therapy-hero__breadcrumb {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.72rem; color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 2px 12px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.15);
  border-radius: 99px; padding: 0.3rem 0.9rem;
  margin-bottom: 1.75rem; width: fit-content;
}
.therapy-hero__breadcrumb a { color: rgba(255,255,255,0.5); text-decoration: none; }
.therapy-hero__breadcrumb a:hover { color: #fff; }
.bc-sep { color: rgba(255,255,255,0.25); }
.therapy-hero__breadcrumb span:last-child { color: #fff; }
.therapy-hero__title {
  font-family: var(--font-sans);
  font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800;
  color: #fff; line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 1rem;
  overflow-wrap: break-word;
}
.therapy-hero__sub {
  font-size: 0.85rem; color: rgba(255,255,255,0.72);
  line-height: 1.5; margin-bottom: 0rem;
}

/* ── Layout 2 colonnes ── */
.article-toc {
  display: flex; flex-direction: column;
  height: calc(100vh - var(--header-height, 64px) - 1rem);
}
  font-size: 0.79rem; color: #7A8FA6; text-decoration: none;
  padding: 0.34rem 0 0.34rem 0.9rem;
  border-left: 2px solid #DDE6EF; line-height: 1.45;
  transition: color 0.15s, border-color 0.15s;
}

/* ── Corps article ── */
.article-body > h2 {
  font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 700;
  color: #0F1F33; margin: 3rem 0 1rem;
  letter-spacing: -0.02em; line-height: 1.2;
  scroll-margin-top: calc(var(--header-height, 64px) + 1.5rem);
}
.article-body > h2::before {
  content: ''; display: block; width: 26px; height: 3px;
  border-radius: 99px; margin-bottom: 0.65rem;
}
.article-body > h2:first-child { margin-top: 0; }

/* ── Opening block ── */
.opening-block { border-radius: 16px; padding: 1.75rem 2rem; margin-bottom: 2.5rem; }
.opening-block p { font-size: 0.88rem !important; line-height: 1.8 !important; color: #0F1F33 !important; font-weight: 500; margin: 0 !important; }
.opening-block p + p { margin-top: 0.6rem !important; }

/* ── Info box ── */
.info-box { border-radius: 14px; padding: 1.25rem 1.35rem; margin: 1.5rem 0; }
.info-box__title { font-size: 0.875rem; font-weight: 700; margin-top: 5px !important; margin-bottom: 30px !important; }
.info-box p, .info-box ul, .info-box li { font-size: 0.875rem; color: #354555; line-height: 1.65; margin: 0; }
.info-box ul { padding-left: 1.1rem; }
.info-box li { margin-bottom: 0.3rem; }

/* Info box color variants partagés */
.info-box--green  { background: #F0FDF4; border: 1.5px solid #BBF7D0; }
.info-box--green  .info-box__title { color: #15803D; }
.info-box--orange { background: #FFFBEB; border: 1.5px solid #FDE68A; }
.info-box--orange .info-box__title { color: #92400E; }



/* ════════════════════════════════════════════════
   THÈMES — couleurs et composants par page
   ════════════════════════════════════════════════ */

/* ── Thème TCC ── */
.theme-tcc .therapy-hero { background: linear-gradient(135deg, #1E3A6E 0%, #2D52A0 55%, #1A3060 100%); }
.theme-tcc .therapy-hero::before { background: radial-gradient(circle, rgba(27,110,194,0.22) 0%, transparent 65%); }
.theme-tcc .therapy-hero::after { background: rgba(27,110,194,0.08); }
.theme-tcc .therapy-hero__title span { color: #93C5FD; }
.theme-tcc .article-body > h2::before { background: #2D52A0; }
.theme-tcc .article-body strong { color: #2D52A0; }
.theme-tcc .article-body a { color: #2D52A0; }
.theme-tcc .opening-block { background: linear-gradient(135deg, rgba(45,82,160,0.05), rgba(45,82,160,0.02)); border: 1.5px solid #B8CDE8; border-left: 4px solid #2D52A0; }
.theme-tcc .info-box--indigo { background: #E8F1FA; border: 1.5px solid rgba(45,82,160,0.2); border-left: 4px solid #2D52A0; }
.theme-tcc .info-box--indigo .info-box__title { color: #2D52A0; }


/* TCC — encadré 1 : Indications validées */
.theme-tcc .info-box--green { background: #E8F1FA; border: 1.5px solid rgba(45,82,160,0.2); border-left: 4px solid #2D52A0; }
.theme-tcc .info-box--green .info-box__title { color: #2D52A0; margin-bottom: 0.5rem !important; }

/* TCC — encadré 2 : Quand d'autres approches */
.theme-tcc .info-box--orange { background: transparent; border: none; border-left: 3px solid #2D52A0; border-radius: 0; padding-left: 1.35rem; }
.theme-tcc .info-box--orange .info-box__title { color: #2D52A0; margin-bottom: 0.5rem !important; }

/* TCC — puces personnalisées dans les deux encadrés */
.theme-tcc .info-box--green ul,
.theme-tcc .info-box--orange ul { padding-left: 0; list-style: none; }
.theme-tcc .info-box--green li,
.theme-tcc .info-box--orange li { list-style: none; padding-left: 1.1rem; position: relative; margin-bottom: 0.45rem; }
.theme-tcc .info-box--green li::before,
.theme-tcc .info-box--orange li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: #2D52A0; }

/* TCC — composants */
.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem; margin: 1.5rem 0; }
.info-card { background: #fff; border: 1.5px solid #E8EDF3; border-radius: 16px; padding: 1.25rem; transition: border-color 0.15s, box-shadow 0.15s; }
.info-card:hover { border-color: #B8CDE8; box-shadow: 0 4px 16px rgba(45,82,160,0.08); }
.info-card__icon { width: 40px; height: 40px; border-radius: 11px; background: #E8F1FA; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; margin-bottom: 0.75rem; color: #2D52A0; }
.info-card__title { font-size: 0.85rem; font-weight: 700; color: #0F1F33; margin-bottom: 0.35rem; }
.info-card__desc { font-size: 0.8rem; color: #6B7280; line-height: 1.6; }
.steps-list { display: flex; flex-direction: column; gap: 0.85rem; margin: 1.5rem 0; }
.step-item { display: flex; gap: 1rem; align-items: flex-start; background: #fff; border: 1.5px solid #E8EDF3; border-radius: 14px; padding: 1.25rem; }
.step-item__num { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; background: #2D52A0; color: #fff; font-weight: 800; font-size: 1rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(45,82,160,0.3); }
.step-item__title { font-size: 0.88rem; font-weight: 700; color: #0F1F33; margin-bottom: 0.3rem; }
.step-item__desc { font-size: 0.82rem; color: #6B7280; line-height: 1.6; }
/* ── Thème EMDR ── */
.theme-emdr .therapy-hero { background: linear-gradient(135deg, #1E3A6E 0%, #2D52A0 55%, #1A3060 100%); }
.theme-emdr .therapy-hero::before { background: radial-gradient(circle, rgba(27,110,194,0.22) 0%, transparent 65%); }
.theme-emdr .therapy-hero::after { background: rgba(27,110,194,0.08); }
.theme-emdr .therapy-hero__title span { color: #93C5FD; }
.theme-emdr .article-body > h2::before { background: #2D52A0; }
.theme-emdr .article-body strong { color: #2D52A0; }
.theme-emdr .article-body a { color: #2D52A0; }
.theme-emdr .opening-block { background: linear-gradient(135deg, rgba(45,82,160,0.05), rgba(45,82,160,0.02)); border: 1.5px solid #B8CDE8; border-left: 4px solid #2D52A0; }
.theme-emdr .info-box--blue { background: #E8F1FA; border: 1.5px solid rgba(45,82,160,0.2); border-left: 4px solid #2D52A0; }
.theme-emdr .info-box--blue .info-box__title { color: #2D52A0; }
/* EMDR — step-item couleur */
.theme-emdr .step-item__num { background: linear-gradient(135deg, #2D52A0, #4472C4); box-shadow: 0 2px 8px rgba(45,82,160,0.3); }

/* EMDR — encadrés */
.theme-emdr .info-box--green { background: #E8F1FA; border: 1.5px solid rgba(45,82,160,0.2); }
.theme-emdr .info-box--green .info-box__title { color: #2D52A0; margin-bottom: 0.5rem !important; }
.theme-emdr .info-box--orange { background: transparent; border: none; border-left: 3px solid #2D52A0; border-radius: 0; padding-left: 1.35rem; }
.theme-emdr .info-box--orange .info-box__title { color: #2D52A0; margin-bottom: 0.5rem !important; }
.theme-emdr .info-box--green ul,
.theme-emdr .info-box--orange ul { padding-left: 0; list-style: none; }
.theme-emdr .info-box--green li,
.theme-emdr .info-box--orange li { list-style: none; padding-left: 1.1rem; position: relative; margin-bottom: 0.45rem; }
.theme-emdr .info-box--green li::before,
.theme-emdr .info-box--orange li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: #2D52A0; }


/* ── Thème ACT ── */
.theme-act .therapy-hero { background: linear-gradient(135deg, #1E3A6E 0%, #2D52A0 55%, #1A3060 100%); }
.theme-act .therapy-hero::before { background: radial-gradient(circle, rgba(27,110,194,0.22) 0%, transparent 65%); }
.theme-act .therapy-hero::after { background: rgba(27,110,194,0.08); }
.theme-act .therapy-hero__title span { color: #93C5FD; }
.theme-act .article-body > h2::before { background: #2D52A0; }
.theme-act .article-body strong { color: #2D52A0; }
.theme-act .article-body h3 { font-size: 0.95rem; font-weight: 700; color: #0F1F33; margin: 1.5rem 0 0.5rem; }
.theme-act .article-body a { color: #2D52A0; }
.theme-act .opening-block { background: linear-gradient(135deg, rgba(45,82,160,0.05), rgba(45,82,160,0.02)); border: 1.5px solid #B8CDE8; border-left: 4px solid #2D52A0; }

/* ACT — encadrés */
.theme-act .info-box--green { background: #E8F1FA; border: 1.5px solid rgba(45,82,160,0.2); border-left: 4px solid #2D52A0; }
.theme-act .info-box--green .info-box__title { color: #2D52A0; margin-bottom: 0.5rem !important; }
.theme-act .info-box--green ul { padding-left: 0; list-style: none; }
.theme-act .info-box--green li { list-style: none; padding-left: 1.1rem; position: relative; margin-bottom: 0.45rem; }
.theme-act .info-box--green li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: #2D52A0; }
.theme-act .info-box--orange { background: transparent; border: none; border-left: 3px solid #2D52A0; border-radius: 0; padding-left: 1.35rem; }
.theme-act .info-box--orange .info-box__title { color: #2D52A0; margin-bottom: 0.5rem !important; }
.theme-act .info-box--orange ul { padding-left: 0; list-style: none; }
.theme-act .info-box--orange li { list-style: none; padding-left: 1.1rem; position: relative; margin-bottom: 0.45rem; }
.theme-act .info-box--orange li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: #2D52A0; }


/* ACT — composants */
.hexagons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin: 1.5rem 0; }
.hex-card { background: #E8F1FA; border: 1.5px solid rgba(45,82,160,0.2); border-radius: 14px; padding: 1.1rem; text-align: center; }
.hex-card__icon { display: flex; justify-content: center; margin-bottom: 0.5rem; color: #2D52A0; }
.hex-card__icon svg { width: 1.5rem; height: 1.5rem; }
.hex-card__title { font-size: 0.8rem; font-weight: 700; color: #2D52A0; margin-bottom: 0.25rem; }
.hex-card__desc { font-size: 0.75rem; color: #6B7280; line-height: 1.5; }

/* ── Thème Sophrologie ── */
.theme-sophrologie .therapy-hero { padding-bottom: 5rem; background: linear-gradient(135deg, #1E3A6E 0%, #2D52A0 55%, #1A3060 100%); }
.theme-sophrologie .therapy-hero::before { background: radial-gradient(circle, rgba(27,110,194,0.22) 0%, transparent 65%); }
.theme-sophrologie .therapy-hero::after { background: rgba(27,110,194,0.08); }
.theme-sophrologie .article-body > h2::before { background: #2D52A0; }
.theme-sophrologie .article-body strong { color: #2D52A0; }
.theme-sophrologie .article-body a { color: #2D52A0; }
.theme-sophrologie .opening-block { background: linear-gradient(135deg, rgba(45,82,160,0.05), rgba(45,82,160,0.02)); border: 1.5px solid #B8CDE8; border-left: 4px solid #2D52A0; }
.theme-sophrologie .info-box { background: #E8F1FA; border: 1.5px solid rgba(45,82,160,0.2); border-left: 4px solid #2D52A0; }
.theme-sophrologie .info-box__title { color: #2D52A0; }
.theme-sophrologie .info-box--orange { background: transparent; border: none; border-left: 3px solid #2D52A0; border-radius: 0; padding-left: 1.35rem; }
.theme-sophrologie .info-box--orange .info-box__title { color: #2D52A0; margin-bottom: 0.5rem !important; }
.theme-sophrologie .info-box--orange ul { padding-left: 0; list-style: none; }
.theme-sophrologie .info-box--orange li { list-style: none; padding-left: 1.1rem; position: relative; margin-bottom: 0.45rem; }
.theme-sophrologie .info-box--orange li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: #2D52A0; }
.theme-sophrologie .info-box p { font-size: 0.82rem; color: #354555; }
/* Sophrologie — composants */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.5rem 0; }
.pillar-card { background: #E8F1FA; border: 1.5px solid rgba(45,82,160,0.2); border-radius: 16px; padding: 1.25rem; text-align: center; }
.pillar-card__icon { font-size: 2rem; margin-bottom: 0.6rem; display: block; }
.pillar-card__name { font-size: 0.85rem; font-weight: 700; color: #0F1F33; margin-bottom: 0.35rem; }
.pillar-card__desc { font-size: 0.78rem; color: #6B7280; line-height: 1.55; }
.seance-steps { display: flex; flex-direction: column; gap: 0.75rem; margin: 1.25rem 0; }
.step { display: grid; grid-template-columns: 32px 1fr; gap: 1rem; align-items: start; }
.step__num { width: 32px; height: 32px; border-radius: 50%; background: #2D52A0; color: #fff; font-size: 0.78rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.step__content h3 { font-size: 0.85rem; font-weight: 700; color: #0F1F33; margin: 0.25rem 0 0.2rem; }
.step__content p { font-size: 0.81rem; color: #6B7280; line-height: 1.55; margin: 0; }
.techniques-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; margin: 1.5rem 0; }
.tech-card { background: #fff; border: 1.5px solid rgba(45,82,160,0.2); border-radius: 14px; padding: 1.1rem; }
.tech-card__name { font-size: 0.85rem; font-weight: 700; color: #0F1F33; margin-bottom: 0.3rem; }
.tech-card__desc { font-size: 0.79rem; color: #6B7280; line-height: 1.55; }
.vs-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.vs-table th { font-size: 0.75rem; font-weight: 700; color: #0F1F33; padding: 0.75rem 1rem; background: #E8F1FA; text-align: left; }
.vs-table th:first-child { border-radius: 10px 0 0 0; }
.vs-table th:last-child { border-radius: 0 10px 0 0; }
.vs-table td { font-size: 0.8rem; color: #354555; padding: 0.7rem 1rem; border-bottom: 1px solid #E8EDF3; vertical-align: top; }
.vs-table tr:last-child td { border-bottom: none; }


/* ── Thème Médicaments (Rx) ── */
.theme-rx .therapy-hero { background: linear-gradient(135deg, #1E2840 0%, #2E3E58 55%, #243048 100%); }
.theme-rx .therapy-hero::before { background: radial-gradient(circle, rgba(148,163,184,0.15) 0%, transparent 65%); }
.theme-rx .therapy-hero::after { background: rgba(148,163,184,0.06); }
.theme-rx .article-body > h2::before { background: #2D52A0; }
.theme-rx .article-body strong { color: #2D52A0; }
.theme-rx .article-body a { color: #2D52A0; }
.theme-rx .opening-block { background: linear-gradient(135deg, rgba(45,82,160,0.05), rgba(45,82,160,0.02)); border: 1.5px solid #B8CDE8; border-left: 4px solid #2D52A0; }
/* Rx — info-box */
.theme-rx .info-box--blue { background: #E8F1FA; border: 1.5px solid rgba(45,82,160,0.2); border-left: 4px solid #2D52A0; }
.theme-rx .info-box--blue .info-box__title { color: #2D52A0; margin-bottom: 0.5rem !important; }
.theme-rx .info-box--blue p { font-size: 0.70rem; }
.theme-rx .info-box--blue p + p { margin-top: 0.5rem; }

/* Rx — puces article-body */
.theme-rx .article-body ul:not(.sources-list) { padding-left: 0; list-style: none; }
.theme-rx .article-body li:not(.sources-list li) { list-style: none; padding-left: 1.1rem; position: relative; margin-bottom: 0.45rem; }
.theme-rx .article-body li:not(.sources-list li)::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: #1B6EC2; }

/* Rx — composants */
.med-disclaimer { background: #E8F1FA; border: 1.5px solid rgba(45,82,160,0.2); border-left: 4px solid #2D52A0; border-radius: 14px; padding: 1.25rem 1.5rem; margin-bottom: 2rem; }
.med-disclaimer__title { font-size: 0.82rem; font-weight: 700; color: #2D52A0; margin-bottom: 0.4rem; }
.med-disclaimer p { font-size: 0.70rem; color: #354555; line-height: 1.6; margin: 0; }
.med-disclaimer p + p { margin-top: 0.5rem; }
.med-family { background: #fff; border: 1.5px solid #E2E8F0; border-radius: 18px; padding: 1.5rem; margin: 1.25rem 0; }
.med-family__header { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1rem; }
.med-family__icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.med-family__name { font-family: var(--font-sans); font-size: 1rem; font-weight: 700; color: #0F1F33; }
.med-family__type { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #9CA3AF; margin-top: 0.1rem; }
.med-props { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 1rem; }
.med-prop { background: #F8FAFC; border-radius: 10px; padding: 0.65rem 0.75rem; }
.med-prop__label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #9CA3AF; margin-bottom: 0.2rem; }
.med-prop__val { font-size: 0.82rem; font-weight: 600; color: #0F1F33; }
.med-family__body { font-size: 0.83rem; color: #6B7280; line-height: 1.65; }
.med-family__drugs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.drug-tag { background: #F1F5F9; color: #475569; border: 1px solid #E2E8F0; border-radius: 99px; padding: 0.2rem 0.65rem; font-size: 0.72rem; font-weight: 600; }
.med-family--isrs  .med-family__icon { background: #EFF6FF; color: #3B82F6; }
.med-family--benzo .med-family__icon { background: #FEF3C7; color: #D97706; }
.med-family--beta  .med-family__icon { background: #F0FDF4; color: #16A34A; }
.med-family--buspar .med-family__icon { background: #F5F3FF; color: #7C3AED; }
.combo-block { background: linear-gradient(135deg, #0F1F33, #1E3A5F); border-radius: 20px; padding: 2rem; color: #fff; margin: 2rem 0; }
.combo-block--light { background: #E8F1FA; color: inherit; }
.combo-block--light .combo-block__title { color: #1B6EC2; }
.combo-block--light .combo-block__sub { opacity: 1; color: #354555; }
.combo-block--light .combo-item { background: #fff; border-color: rgba(45,82,160,0.15); }
.combo-block--light .combo-item__title { color: #1B6EC2; }
.combo-block--light .combo-item__desc { opacity: 1; color: #354555; }
.combo-block__title { font-family: var(--font-sans); font-size: 1.1rem; font-weight: 700; margin-bottom: 0.5rem; }
.combo-block__sub { font-size: 0.82rem; opacity: 0.7; margin-bottom: 1.25rem; line-height: 1.6; }
.combo-items { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.combo-item { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 1rem; }
.combo-item__title { font-size: 0.85rem; font-weight: 700; margin-bottom: 0.3rem; }
.combo-item__desc { font-size: 0.78rem; opacity: 0.7; line-height: 1.5; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .therapy-hero__inner { grid-template-columns: 1fr; padding-right: 0; gap: 0; }
  .therapy-hero__card { display: none; }
  .info-grid { grid-template-columns: 1fr; }
  .hexagons { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; }
  .techniques-grid { grid-template-columns: 1fr; }
  .med-props { grid-template-columns: 1fr 1fr; }
  .combo-items { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .therapy-hero { padding-left: 1rem; padding-right: 1rem; }
}