/*
 * assets/css/tdah.css — PsyRisso Desktop
 * Rubrique TDAH : chapeau + volets.
 */

.tdh-content { max-width: none; }

/* Bloc-titre */
.tdh-titre { text-align: center; margin-bottom: 1.8rem; }
.tdh-oeil {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: Arial, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cat-rouge);
  background: rgba(192, 82, 74, 0.10);
  border: 1px solid rgba(192, 82, 74, 0.30);
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
}
.tdh-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cat-rouge); }
.tdh-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 0.4rem;
}
.tdh-sous { font-size: 1.05rem; color: #5c6b66; font-style: italic; margin: 0; }
.tdh-filet { width: 64px; height: 3px; background: var(--dore); margin: 1.4rem auto 0; border-radius: 2px; }

/* Texte */
.tdh-chapo { font-size: 1.02rem; margin: 1.6rem 0 1.1rem; color: #3a3a3a; line-height: 1.78; text-align: justify; text-indent: 1.6em; }
.tdh-chapo .tdh-lead { color: var(--bleu); }
.tdh-p {
  font-size: 0.95rem;
  color: #3a3a3a;
  line-height: 1.78;
  text-align: justify;
  text-indent: 1.6em;
  margin: 0 0 1.05rem;
}
.tdh-p strong { color: #1A1A1A; }

/* Chips de navigation du chapeau (5 chips avec numéro) */
/*.tdh-chips { margin: 1.8rem 0 1.4rem; padding-top: 1rem; border-top: 1px solid var(--gris-sep); }*/
.tdh-chips { margin: 0.2rem 0 0.2rem; }
.tdh-chips-label {
  margin: 0 0 0.85rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dore);
}
.tdh-chip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
}

.tdh-chip {
  flex: 0 1 calc(33.333% - 0.47rem);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  /*background: rgba(192, 82, 74, 0.10);/* était var(--blanc);*/
  background: #f6fbfa;
  border: 1px solid var(--dore);
  border-left: 4px solid var(--dore);
  border-radius: 6px;
  padding: 1.9rem 1.6rem;
  box-shadow: 0 2px 8px rgba(192, 82, 74, 0.08);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}




.tdh-chip:hover {
  border-top-width: 3px;
  border-right-width: 3px;
  border-bottom-width: 3px;
  border-left-width: 4px;
  box-shadow: 0 4px 14px rgba(27, 59, 53, 0.10);
  transform: translateY(-2px);
}
/*.tdh-chip-num { font-family: Arial, sans-serif; font-size: 0.72rem; color: var(--cat-rouge); letter-spacing: 0.08em; flex-shrink: 0; }*/
/* Numéro dans un rond rouge */
.tdh-chip-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--dore);
  color: var(--blanc);
  font-family: Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: bold;
  letter-spacing: 0;
  flex-shrink: 0;
}
.tdh-chip-txt { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; }
.tdh-chip-h3 { font-family: var(--font-heading, Georgia, 'Times New Roman', serif); font-size: 1.05rem; color: var(--bleu); }
.tdh-chip-p { font-size: 0.9rem; color: #5c6b66; }
.tdh-chip-arw { color: var(--dore); font-size: 1.3rem; line-height: 1; flex-shrink: 0; }

/* Chips désactivées (volets à venir) */
.tdh-chip-disabled {
  opacity: 0.5;
  border-color: var(--gris-sep);
  border-left-color: var(--gris-sep);
  box-shadow: none;
  cursor: default;
}
.tdh-chip-disabled:hover { box-shadow: none; transform: none; }

.tdh-chip-disabled .tdh-chip-num {
  background: var(--blanc);/*était var(--gris-sep);*/
  color: #8a938f;
}

/* Clôture (chapeau) */

.tdh-cloture {
  padding: 0;
  margin-top: 0;
}

.tdh-cloture-h2 {
  font-family: var(--font-heading, Georgia, 'Times New Roman', serif);
  font-size: 1.35rem;
  font-weight: normal;
  color: var(--bleu);
  margin: 0 0 1rem;
}
.tdh-cloture .tdh-p:last-child { margin-bottom: 0; }

/* Retour / titre de volet */
.tdh-retour {
  display: inline-block;
  font-size: 0.9rem;
  color: var(--dore);
  text-decoration: none;
  margin-bottom: 1rem;
}
.tdh-retour:hover { color: var(--bleu); }

/* Sous-titres de volet */
.tdh-h2 {
  font-family: var(--font-heading, Georgia, 'Times New Roman', serif);
  font-size: 1.35rem;
  font-weight: normal;
  color: var(--bleu);
  margin: 2rem 0 1rem;
}
.tdh-h3-accent {
  font-family: var(--font-heading, Georgia, 'Times New Roman', serif);
  font-size: 1.05rem;
  font-weight: normal;
  color: var(--bleu);
  
  margin: 0 0 0.5rem;
}
.tdh-h4 {
  font-family: var(--font-heading, Georgia, 'Times New Roman', serif);
  font-size: 1.02rem;
  font-weight: normal;
  color: var(--bleu);
  margin: 0 0 0.5rem;
}

/* Cadre simple (encadré blanc) */
.tdh-card {
  background: var(--blanc);
  border: 1px solid var(--gris-sep);
  border-radius: 6px;
  padding: 1.6rem 1.9rem;
  margin: 1.4rem 0;
}
.tdh-card .tdh-h2:first-child { margin-top: 0; }
.tdh-card .tdh-p:last-child { margin-bottom: 0; }
.cadre-lecture > .tdh-h2:first-child { margin-top: 0; }

/* Duo / trio de cadres */
.tdh-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  margin: 1.4rem 0;
}
.tdh-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.2rem 0;
}
.tdh-mini {
  background:#f6fbfa;
  border: 1px solid var(--gris-sep);
  border-top: 3px solid var(--dore);
  border-radius: 6px;
  padding: 1.2rem 1.35rem;
}
.tdh-mini p {
  font-size: 0.95rem;
  color: #3a3a3a;
  margin: 0;
  text-indent: 0;
}

/* Encadré accent (rouge clair) */
.tdh-accent {
  /*background: #fbf1f0;*/
  background: #f6fbfa;
  border: 1px solid var(--dore);
  border-left: 4px solid var(--dore);
  border-radius: 6px;
  padding: 1.8rem 2.1rem;
  margin: 1.4rem 0;
}
.tdh-accent .tdh-h2 { color: var(--bleu); margin-top: 0; }
.tdh-accent .tdh-p:last-child { margin-bottom: 0; }

/* Chip de navigation séquentielle en bas de volet (pattern .tda-chip) */
.tdh-nav-chip-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
}
.tdh-nav-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;
}
.tdh-nav-arw { margin-left: 0.4rem; color: var(--dore); transition: transform 0.18s ease; }
.tdh-nav-chip:hover { background: var(--bleu); color: var(--creme); border-color: var(--bleu); }
.tdh-nav-chip:hover .tdh-nav-arw { color: var(--creme); }

.tdh-sources {
  font-family: Arial, sans-serif;
  font-size: 0.78rem;
  color: #8a938f;
  font-style: italic;
  margin-top: 1rem;
}


.tdh-pill {
  display: inline-block;
  font-family: Arial, sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blanc);
  background:var(--dore);
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
}


/* Bloc 2 (Explorer) : conteneur sans cadre */
.tdh-bloc-sans-cadre {
  border: none !important;
  box-shadow: none !important;
}

/* Bloc 3 (Ce que change un repérage) : cadre gris retiré, bordure rouge sur le conteneur */
.tdh-bloc-cadre-rouge {
  border: none !important;
  border-top: 4px solid var(--dore) !important;
  box-shadow: none !important;
}

/* Cartes "Deux grandes dimensions" mises en valeur (tdah-comprendre) */
.tdh-dim-card {
  background: rgba(192, 82, 74, 0.06);
  border-color: rgba(192, 82, 74, 0.25);
  border-top: 4px solid var(--cat-rouge);
}
.tdh-dim-card .tdh-h3-accent {
  font-size: 1.15rem;
}

/* Encadré doré (note complémentaire, ex. haut potentiel) */
.tdh-note {
  background: #faf6ee;
  border: 1px solid #e7dcc4;
  border-left: 4px solid var(--dore);
  border-radius: 6px;
  padding: 1.8rem 2.1rem;
  margin: 1.4rem 0;
}
.tdh-note .tdh-h2 { color: #8a6a2c; margin-top: 0; }
.tdh-note .tdh-p:last-child { margin-bottom: 0; }


@media (max-width: 760px) {
  .tdh-duo { grid-template-columns: 1fr; }
  .tdh-trio { grid-template-columns: 1fr; }
  .tdh-chip { flex: 1 1 100%; }
}

/* Bloc 2 (Explorer) : conteneur sans cadre */
.cadre.tdh-bloc-sans-cadre,
.cadre-lecture.tdh-bloc-sans-cadre {
  border: none !important;
  box-shadow: none !important;
}

/* Bande compacte (bloc 2) : réduit le padding vertical de la section elle-même */

.tdh-bande-compacte {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.tdh-bande-respiree {
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}

/* Cartes "Deux écueils" — bord latéral rouge 4px (tdah-autres-troubles) */
.tdh-ecueil-card {
  border-left: 4px solid var(--cat-rouge);
}

/* Liste à puces diamant rouge (tdah-autres-troubles) */
.tdh-liste-diamant {
  list-style: none;
  margin: 0 0 1.05rem;
  padding: 0;
}
.tdh-liste-diamant li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.95rem;
  color: #3a3a3a;
  line-height: 1.78;
  margin-bottom: 0.5rem;
  text-align: justify;
}
.tdh-liste-diamant li::before {
  content: "◆";
  position: absolute;
  left: 0;
  color: var(--cat-rouge);
  font-size: 0.7rem;
  top: 0.3em;
}