/* ==========================================================================
   Item 66 · Trouble dépressif, anxieux, adaptatif, TSPT, TOC — styles
   Charge après styles.css + components.css + item-63.css + item-64.css.
   Composants propres au 66 :
   • vignette-grid-3 (triptyque vignettes)
   • formes-grid (cards forme cliniques avec bordures distinctes)
   • table-scroll (wrap responsive des tables larges)
   • cercle-svg (cercle vicieux trouble panique)
   • alertes-grid (8 encadrés rouges urgences)
   • dsm-card-tspt (variante critères A-H)
   • record-banner-trauma (variante TSPT)
   • alert-bipolarite (encadré spécifique caractéristiques bipolaires)
   ========================================================================== */

.content { max-width: 1500px; }

/* ============================================================
   Triptyque vignettes (onglet 02)
   ============================================================ */
.vignette-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.vignette-grid-3 .vignette {
  font-size: 13px;
}
.vignette-grid-3 .vignette p {
  font-size: 13.5px;
  line-height: 1.5;
}
.vignette-grid-3 .vignette .vg-trap {
  font-size: 12px;
  line-height: 1.5;
}

/* ============================================================
   Tables responsive scrollable horizontalement
   ============================================================ */
.table-scroll {
  overflow-x: auto;
  width: 100%;
  margin-bottom: 6px;
}

.table-scroll table.matrix {
  min-width: 720px;
}

/* Tableau comparatif des 7 troubles · cellule tombabilité étoiles */
table.matrix-comparatif7 .tomb-cell {
  font-size: 12px;
  letter-spacing: -1.5px;
  color: var(--accent-yellow);
  font-weight: 500;
}

table.matrix-comparatif7 tbody tr.duree-rouge th,
table.matrix-comparatif7 tbody tr.duree-rouge td {
  background: #fbeee8;
}
table.matrix-comparatif7 tbody tr.duree-rouge .tomb-cell {
  color: var(--danger);
  font-weight: 600;
}
table.matrix-comparatif7 tbody tr.duree-violet th {
  box-shadow: inset 4px 0 0 var(--violet);
  padding-left: 18px;
}
table.matrix-comparatif7 tbody tr.duree-violet td {
  background: #f3e6ee;
}

/* ============================================================
   Formes-grid · cards formes cliniques (onglet 04, 06, 07, 08, 10, 13, 15)
   ============================================================ */
.formes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 14px 0;
}
.formes-grid-5 {
  grid-template-columns: repeat(5, 1fr);
}

.forme-card {
  background: #fff;
  border: 1px solid var(--rule, #d7ccb4);
  border-left: 4px solid var(--col, var(--ink));
  border-radius: 4px;
  padding: 14px 16px;
}

.forme-card.forme-vert    { --col: var(--ok);     background: #f0f3e3; }
.forme-card.forme-jaune   { --col: var(--jaune);  background: #fdf5dc; }
.forme-card.forme-orange  { --col: var(--orange); background: #fdf2e3; }
.forme-card.forme-rouge   { --col: var(--danger); background: #fbeee8; }
.forme-card.forme-violet  { --col: var(--violet); background: #f3e6ee; }

.forme-card .forme-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.forme-card h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 16px;
  color: var(--col);
  margin: 0;
  line-height: 1.15;
  letter-spacing: -.005em;
}
.forme-card .forme-rang {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3, #8a8270);
  white-space: nowrap;
}
.forme-card p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2, #524a3e);
}
.forme-card p b {
  color: var(--ink, #1a1713);
  font-weight: 600;
}
.forme-card .forme-doses {
  margin: 4px 0 8px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, .65);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .02em;
  color: var(--ink, #1a1713);
  line-height: 1.5;
  border-left: 2px solid var(--col, var(--ink));
}
.forme-card .forme-doses b {
  color: var(--col, var(--ink));
  font-weight: 600;
}

/* ============================================================
   Cog-grid 4 colonnes (onglet 06 · AP 13 sx)
   ============================================================ */
.cog-grid.cog-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* ============================================================
   Cercle vicieux SVG (onglet 06)
   ============================================================ */
.cercle-svg {
  max-width: 1100px;
}

.cercle-svg .cercle-title {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 500;
  fill: var(--fam-psy);
  letter-spacing: -.005em;
}

.cercle-svg .cercle-bg {
  fill: #fff;
  stroke: var(--rule, #d7ccb4);
  stroke-width: 1.5;
}
.cercle-svg .cercle-accent {
  fill: var(--fam-psy);
}

.cercle-svg .cercle-fo {
  font-family: var(--font-sans);
  text-align: center;
}
.cercle-svg .cercle-n {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fam-psy);
  font-weight: 600;
  margin-bottom: 4px;
}
.cercle-svg .cercle-h {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink, #1a1713);
  line-height: 1.2;
  margin-bottom: 4px;
}
.cercle-svg .cercle-s {
  font-size: 11px;
  color: var(--ink-2, #524a3e);
  font-style: italic;
  line-height: 1.3;
}

.cercle-svg .cercle-center {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .14em;
  fill: var(--danger);
  font-weight: 600;
}

/* ============================================================
   Record banner · variante TSPT (couleur trauma)
   ============================================================ */
.record-banner-trauma {
  background: linear-gradient(135deg, #f3dccf 0%, #e6d4dd 100%);
  border-left-color: var(--fam-record);
}
.record-banner-trauma .record-tag {
  color: var(--fam-record);
}

/* ============================================================
   DSM-card variante TSPT · accent rouge
   ============================================================ */
.dsm-card-tspt .dsm-letter {
  background: var(--fam-record);
  box-shadow: 0 0 0 1px var(--fam-record);
}

/* ============================================================
   Alerte bipolarité (onglet 04) · variante avec grille 2x2
   ============================================================ */
.alert-clinical.alert-bipolarite {
  background: #f8e8d8;
}
.alert-clinical.alert-bipolarite ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 24px;
  list-style: none;
  padding-left: 0;
}
.alert-clinical.alert-bipolarite ul li {
  position: relative;
  padding-left: 14px;
}
.alert-clinical.alert-bipolarite ul li::before {
  content: '▸';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--danger);
  font-weight: 600;
}

/* ============================================================
   Alertes & urgences · grille 8 encadrés (onglet 16)
   ============================================================ */
.alertes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 14px 0;
}

.alerte-card {
  background: #fbeee8;
  border: 1px solid var(--danger);
  border-left: 5px solid var(--danger);
  border-radius: 6px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
}

.alerte-card .al-head {
  border-bottom: 1px dashed var(--danger);
  padding-bottom: 10px;
  margin-bottom: 12px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.alerte-card .al-n {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--danger);
  font-weight: 600;
}
.alerte-card .al-head h3 {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--danger);
  margin: 0;
  letter-spacing: -.005em;
  line-height: 1.1;
  flex: 1;
}
.alerte-card .al-ref {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--ink-3, #8a8270);
  background: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid var(--rule);
}

.alerte-card .al-bloc {
  background: #fff;
  border-radius: 4px;
  padding: 10px 14px;
  margin-bottom: 10px;
}
.alerte-card .al-bloc:last-child {
  margin-bottom: 0;
}
.alerte-card .al-bloc-h {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3, #8a8270);
  font-weight: 600;
  margin-bottom: 6px;
}
.alerte-card .al-bloc-rep .al-bloc-h {
  color: var(--warn);
}
.alerte-card .al-bloc-cond .al-bloc-h {
  color: var(--ok);
}
.alerte-card .al-bloc ul {
  margin: 0;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2, #524a3e);
}
.alerte-card .al-bloc ul li {
  margin: 4px 0;
}
.alerte-card .al-bloc ul li b {
  color: var(--ink, #1a1713);
  font-weight: 600;
}

/* ============================================================
   Items connectés · variante avec lien (onglet 17)
   ============================================================ */
a.item-link {
  text-decoration: none;
  color: inherit;
  transition: background .2s, transform .15s;
}
a.item-link:hover {
  background: var(--bg-2, #ece5d6);
}

/* ============================================================
   Mots-clés · table compacte (onglet 17)
   ============================================================ */
table.matrix-motscles tbody th {
  font-weight: 400;
  color: var(--ink-2, #524a3e);
  font-size: 12.5px;
}
table.matrix-motscles tbody td {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink, #1a1713);
}

/* ============================================================
   Tables psy & sex-ratio (onglet 03 · 14)
   ============================================================ */
table.matrix-sexratio tbody th {
  font-size: 13.5px;
}
table.matrix-psy tbody td {
  font-size: 12.5px;
  line-height: 1.5;
}
table.matrix-psy tbody td b {
  color: var(--ok);
  font-weight: 600;
}

/* ============================================================
   Tableau phobie sociale vs personnalité évitante
   ============================================================ */
table.matrix-phsoc tbody tr.tbtb-alert th {
  background: #fff3d6;
  color: var(--warn);
  box-shadow: inset 4px 0 0 var(--warn);
  padding-left: 18px;
}
table.matrix-phsoc tbody tr.tbtb-alert td {
  background: #fff3d6;
  font-weight: 500;
}

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 1100px) {
  .vignette-grid-3        { grid-template-columns: 1fr 1fr; }
  .formes-grid            { grid-template-columns: repeat(2, 1fr); }
  .formes-grid-5          { grid-template-columns: repeat(3, 1fr); }
  .cog-grid.cog-grid-4    { grid-template-columns: repeat(2, 1fr); }
  .alertes-grid           { grid-template-columns: 1fr; }
  .alert-clinical.alert-bipolarite ul { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .vignette-grid-3        { grid-template-columns: 1fr; }
  .formes-grid            { grid-template-columns: 1fr; }
  .formes-grid-5          { grid-template-columns: 1fr 1fr; }
  .cog-grid.cog-grid-4    { grid-template-columns: 1fr; }
  .table-scroll table.matrix { min-width: 600px; }
  .cercle-svg             { min-width: 720px; }
}

/* ============================================================
   Print
   ============================================================ */
@media print {
  .alertes-grid           { grid-template-columns: 1fr; }
  .vignette-grid-3        { grid-template-columns: 1fr; }
  .formes-grid            { grid-template-columns: 1fr 1fr; }
}