/*
 * differentiel-tdah.css — PsyRisso Desktop
 * Chapeau du différentiel HQI/TDA/H (pages/differentiel-tdah/differentiel-tdah.php)
 * Layout générique (.bande, .cadre, .cadre-lecture) dans layout.css.
 * Mêmes règles que differentiels.css : largeur standard 760px, typo réelle,
 * text-indent sur les paragraphes, chips réduites.
 */
.tda-content { max-width: none; }
.tda-h1 {
  font-family: var(--font-heading, Georgia, 'Times New Roman', serif);
  font-size: clamp(1.3rem, 3vw, 1.75rem);
  font-weight: normal;
  color: var(--bleu);
  line-height: 1.3;
  margin: 0 0 1.5rem;
}

.tda-p {
  /* font-size: 0.95rem; line-height: 1.78; text-align: justify; -- valeurs d'origine */
  font-family: Calibri, Carlito, Arial, sans-serif;
  color: #3a3a3a;
  font-size: 16px;
  line-height: 1.5;
  text-indent: 1.6em;
  margin: 0 0 1rem;
}
/* ── Chips vers les sous-pages ── */
/*.tda-chips { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--gris-sep); }*/
.tda-chips {
  margin: 0.2rem 0 0.2rem;
  border-top: 1px solid var(--gris-sep);
  padding-top: 0.8rem;
}
.tda-chips-label {
  margin: 0 0 0.85rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dore);
}
.tda-chip-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }
.tda-chip {
  display: block;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--gris-sep);
  border-radius: 999px;
  background: var(--blanc);
  color: var(--bleu);
  font-family: var(--font-heading, Georgia, 'Times New Roman', serif);
  font-size: 0.85rem;
  text-align: center;
  text-decoration: none;
  transition: all 0.18s ease;
}
.tda-arw { margin-left: 0.4rem; color: var(--dore); transition: transform 0.18s ease; }
.tda-chip:hover { background: var(--bleu); color: var(--creme); border-color: var(--bleu); }
.tda-chip:hover .tda-arw { color: var(--creme); }

/* ── Références (hors cadre central) — non concernées par le chantier justify,
   restent alignées à gauche partout sur le site ── */
.tda-refs { margin: 1.6rem 0 0; max-width: none; padding: 0 0.3rem; }
.tda-refs-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dore);
  margin: 0 0 0.6rem;
}
.tda-refs ul { list-style: none; margin: 0; padding: 0; }
.tda-refs li {
  /* font-size: 0.82rem; line-height: 1.55; color: #5f5f5f; -- valeurs d'origine */
  font-family: Calibri, Carlito, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: #359C95;
  padding-left: 1.3em;
  text-indent: -1.3em;
  margin: 0 0 0.55rem;
}

.tda-backlink {
  display: inline-block;
  margin: 0 0 1.3rem;
  font-size: 0.9rem;
  color: var(--dore);
  text-decoration: none;
}
.tda-backlink:hover { color: var(--bleu); }

.tda-h2 {
  font-family: var(--font-heading, Georgia, 'Times New Roman', serif);
  font-size: 1.1rem;
  font-weight: normal;
  color: var(--bleu);
  line-height: 1.3;
  margin: 2rem 0 0.6rem;
}

.tda-chip.active {
  background: var(--bleu);
  color: var(--creme);
  border-color: var(--bleu);
  pointer-events: none;
}
.tda-chip.active .tda-arw { color: var(--creme); }

.tda-table { width: 100%; border-collapse: collapse; margin: 1.2rem 0 0.4rem; font-size: 0.9rem; }
.tda-table th, .tda-table td { border: 1px solid var(--gris-sep); padding: 0.55rem 0.7rem; text-align: left; vertical-align: top; }
.tda-table th {
  /* font-family: var(--font-heading); font-weight: normal; -- valeurs d'origine */
  font-family: Calibri, Carlito, Arial, sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
}
.tda-table td {
  /* line-height: 1.6; -- valeur d'origine */
  font-family: Calibri, Carlito, Arial, sans-serif;
  font-size: 0.95rem;
  line-height: 1.55;
}
.tda-table caption { caption-side: top; text-align: left; font-style: italic; color: #777; font-size: 0.85rem; margin-bottom: 0.35rem; }

/* pour les liens de retour */
.tda-backlinks {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 1.3rem;
}
.tda-backlinks .tda-backlink { margin: 0; }

/* mise en forme tableau volet 4 */
/* Tableau comparatif — hqi-tdah-differentiel.php */
.tda-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1.5rem 0;
  font-size: 0.9rem;
  border: 1px solid #e3e0d8;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(27, 59, 53, 0.06);
}

.tda-table caption {
  text-align: left;
  font-style: italic;
  color: #6a6a6a;
  font-size: 0.85rem;
  margin-bottom: 0.6rem;
}

.tda-table th {
  background: var(--bleu);
  color: #FAFAF7;
  font-family: var(--font-heading);
  font-weight: normal;
  text-align: center;
  padding: 0.85rem 1.1rem;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

/* Colonne "Caractéristique" un peu plus étroite et neutre */
/* APRÈS */
.tda-table th:first-child {
  width: 16%;
  font-weight: 600;
  color: #FAFAF7;
  background: var(--bleu);
}

.tda-table td:first-child {
  width: 16%;
  font-weight: 600;
  color: var(--bleu);
  background: #F3F1EA;
}

/* Accent doré en haut de la colonne HQI, ocre pour TDA/H */
.tda-table th:nth-child(2) {
  background: #F2E7D3;
  color: #5C4419;
  font-weight: 600;
}
.tda-table th:nth-child(3) {
  background: #DDE8F2;
  color: #1B3F5C;
  font-weight: 600;
}
.tda-table td {
  padding: 0.9rem 1.1rem;
  vertical-align: top;
  line-height: 1.6;
}

.tda-table tr:nth-child(even) td {
  background: #FCFBF8;
}

.tda-table tr:hover td {
  background: #F5F2EA;
}

/* APRÈS */
.tda-table td:nth-child(2) {
  background: color-mix(in srgb, var(--dore) 6%, white);
}

.tda-table td:nth-child(3) {
  background: color-mix(in srgb, var(--ocre) 6%, white);
}

.tda-table th:nth-child(2) {
  background: color-mix(in srgb, var(--dore) 18%, white);
  color: color-mix(in srgb, var(--dore) 65%, black);
}
.tda-table th:nth-child(3) {
  background: color-mix(in srgb, var(--ocre) 18%, white);
  color: color-mix(in srgb, var(--ocre) 65%, black);
}

/* légende tableau */
.tda-table-header-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-bottom: 0.6rem;
}

.tda-table-caption {
  font-style: italic;
  color: #6a6a6a;
  font-size: 0.85rem;
}

.tda-table-legende {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  font-size: 0.85rem;
  color: #3a3a3a;
  flex-shrink: 0;
}

.tda-table-legende .pastille {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
}

.tda-table-legende .pastille-hqi {
  background: #C9A05C; /* même famille que le fond th, mais plus saturé pour rester visible en petit format */
}
.tda-table-legende .pastille-tdah {
  background: #5B93B8;
}

/* couleurs fixes pour le tableau */
.tda-table th:nth-child(2) {
  background: #F2E7D3;
  color: #7A5A26;
}
.tda-table th:nth-child(3) {
  background: #DDE8F2;
  color: #2A5578;
}

.tda-table td:nth-child(2) {
  background: #FAF6EF;
}
.tda-table td:nth-child(3) {
  background: #DDE8F2;
}

/* Séparateurs de lignes et colonnes renforcés (31 juillet 2026) —
   le tableau utilisait border-collapse: separate sans filet vertical
   entre colonnes, et un border-top très clair (#ece9e1) entre lignes,
   peu visible sur les fonds teintés. Cette section, volontairement en
   dernier pour primer sur les déclarations précédentes, ajoute un
   filet vertical entre les 3 colonnes et renforce le filet horizontal
   entre les lignes du corps du tableau. */
.tda-table th {
  border-right: 1px solid rgba(255, 255, 255, 0.28);
}
.tda-table th:last-child {
  border-right: 0;
}
.tda-table td {
  border-top: 1px solid #cfc9b8;
  border-right: 1px solid #cfc9b8;
}
.tda-table td:last-child {
  border-right: 0;
}
.tda-table tbody tr:first-child td {
  border-top: 1px solid #cfc9b8;
}

/* Fonds pleins et uniformes des colonnes 2 et 3 (31 juillet 2026) —
   remplace toute autre couleur/dégradé/rayure déclarée plus haut pour
   ces cellules. Sélecteur volontairement plus spécifique (via tbody)
   pour primer sur .tda-table tr:nth-child(even) td notamment. Même
   teinte que l'en-tête de chaque colonne, sur toutes les lignes. */
.tda-table tbody tr td:nth-child(2) {
  background: #F2E7D3;
}
.tda-table tbody tr td:nth-child(3) {
  background: #DDE8F2;
}

.cadre.tda-bloc-sans-cadre {
  border: none !important;
  box-shadow: none !important;
}

.tda-bande-respiree {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}