/* ============================================
   CHAPITRE 7 : La Typographie
   Styles spécifiques à la démonstration
   ============================================ */

/* --- Démonstration font-weight --- */
.demo-font-weight {
  display: grid;
  gap: 0.75rem;
  padding: 1.5rem;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  margin-bottom: 1.5rem;
}

.demo-font-weight p {
  margin: 0;
  font-size: 1.15rem;
}

/* --- Démonstration font-variant --- */
.demo-font-variant {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  margin-bottom: 1.5rem;
}

.demo-font-variant p {
  margin: 0;
}

.variant-normal {
  font-variant: normal;
}

.variant-small-caps {
  font-variant: small-caps;
  font-size: 1.15rem;
}

.variant-all-small-caps {
  font-variant-caps: all-small-caps;
  font-size: 1.15rem;
}

/* --- Démonstration variable fonts --- */
.demo-variable-font {
  display: grid;
  gap: 0.5rem;
  padding: 1.5rem;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  margin-bottom: 1.5rem;
}

.demo-variable-font p {
  margin: 0;
  font-size: 1.3rem;
}

/* --- Démonstration line-height --- */
.demo-line-height {
  display: grid;
  gap: 1.5rem;
  padding: 1.5rem;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  margin-bottom: 1.5rem;
}

.lh-demo {
  padding: 1rem;
  background: #f8fafc;
  border-radius: 6px;
  border-left: 3px solid var(--couleur-primaire);
}

.lh-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--couleur-secondaire);
  margin-bottom: 0.5rem;
  font-family: var(--police-code);
}

.lh-unitless {
  line-height: 1.6;
  margin: 0;
}

.lh-em {
  line-height: 1.6em;
  margin: 0;
}

.lh-px {
  line-height: 24px;
  margin: 0;
}

/* --- Démonstration letter-spacing --- */
.demo-letter-spacing {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  margin-bottom: 1.5rem;
}

.demo-letter-spacing p {
  margin: 0;
  font-size: 1.1rem;
}

.ls-normal { letter-spacing: normal; }
.ls-wide { letter-spacing: 0.1em; }
.ls-tight { letter-spacing: -0.03em; }
.ls-caps {
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
}

/* --- Démonstration text-align --- */
.demo-text-align {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  margin-bottom: 1.5rem;
}

.demo-text-align p {
  margin: 0;
  padding: 0.75rem;
  background: #f8fafc;
  border-radius: 4px;
  border-left: 3px solid var(--couleur-primaire);
}

.ta-left { text-align: left; }
.ta-center { text-align: center; }
.ta-right { text-align: right; }
.ta-justify { text-align: justify; }

/* --- Démonstration text-transform --- */
.demo-text-transform {
  display: grid;
  gap: 0.75rem;
  padding: 1.5rem;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  margin-bottom: 1.5rem;
}

.demo-text-transform p {
  margin: 0;
  padding: 0.5rem 0.75rem;
  background: #f8fafc;
  border-radius: 4px;
}

.tt-upper { text-transform: uppercase; }
.tt-lower { text-transform: lowercase; }
.tt-capitalize { text-transform: capitalize; }
.tt-none { text-transform: none; }

/* --- Démonstration text-shadow --- */
.demo-text-shadow {
  display: grid;
  gap: 1.5rem;
  padding: 2rem;
  background: var(--couleur-code-bg);
  border-radius: var(--rayon);
  margin-bottom: 1.5rem;
}

.demo-text-shadow p {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.ts-simple {
  color: var(--couleur-blanc);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.ts-neon {
  color: #fff;
  text-shadow:
    0 0 10px #fff,
    0 0 20px #fff,
    0 0 30px #e60073,
    0 0 40px #e60073;
}

.ts-emboss {
  color: #64748b;
  background: #e2e8f0;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
  padding: 0.5rem 1rem;
  border-radius: 4px;
}

.ts-glow {
  color: #7c3aed;
  text-shadow:
    0 0 5px #7c3aed,
    0 0 10px #7c3aed,
    0 0 20px #7c3aed;
}

/* --- Démonstration white-space --- */
.demo-white-space {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  margin-bottom: 1.5rem;
}

.ws-demo {
  padding: 0.75rem;
  background: #f8fafc;
  border-radius: 4px;
  overflow: hidden;
}

.ws-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--couleur-secondaire);
  margin-bottom: 0.4rem;
  font-family: var(--police-code);
}

.ws-normal {
  white-space: normal;
}

.ws-nowrap {
  white-space: nowrap;
}

.ws-pre {
  white-space: pre;
  font-size: 0.9rem;
  margin: 0;
  background: transparent;
  color: inherit;
  border: none;
  padding: 0;
}

.ws-pre-wrap {
  white-space: pre-wrap;
  font-size: 0.9rem;
  margin: 0;
  background: transparent;
  color: inherit;
  border: none;
  padding: 0;
}

/* --- Démonstration word-break --- */
.demo-word-break {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  margin-bottom: 1.5rem;
}

.wb-demo {
  padding: 0.75rem;
  background: #f8fafc;
  border-radius: 4px;
  max-width: 300px;
}

.wb-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--couleur-secondaire);
  margin-bottom: 0.4rem;
  font-family: var(--police-code);
}

.wb-break-word {
  overflow-wrap: break-word;
  word-break: normal;
}

.wb-break-all {
  overflow-wrap: normal;
  word-break: break-all;
}

.wb-keep-all {
  overflow-wrap: normal;
  word-break: keep-all;
}

/* --- Démonstration text-decoration --- */
.demo-text-decoration {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  margin-bottom: 1.5rem;
}

.demo-text-decoration p {
  margin: 0;
  font-size: 1.1rem;
}

.td-underline {
  text-decoration: underline;
}

.td-line-through {
  text-decoration: line-through;
}

.td-overline {
  text-decoration: overline;
}

.td-wavy {
  text-decoration: underline wavy var(--couleur-secondaire);
  text-decoration-thickness: 2px;
}

.td-thick {
  text-decoration: underline thick dotted var(--couleur-erreur);
  text-decoration-thickness: 3px;
}

/* --- Démonstration text-overflow --- */
.demo-text-overflow {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  margin-bottom: 1.5rem;
}

.to-demo {
  padding: 0.75rem;
  background: #f8fafc;
  border-radius: 4px;
}

.to-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--couleur-secondaire);
  margin-bottom: 0.4rem;
  font-family: var(--police-code);
}

.to-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0.5rem 0.75rem;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: 4px;
}

.to-clip {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  padding: 0.5rem 0.75rem;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: 4px;
}

/* --- Démonstration vertical-align --- */
.demo-vertical-align {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 1.5rem;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
}

.demo-vertical-align span {
  padding: 0.25rem 0.5rem;
  background: #f1f5f9;
  border-radius: 4px;
  border: 1px solid var(--couleur-bordure);
}

.va-default { vertical-align: baseline; }
.va-top { vertical-align: top; font-size: 0.8rem; }
.va-middle { vertical-align: middle; font-size: 1.3rem; }
.va-bottom { vertical-align: bottom; font-size: 0.8rem; }
.va-super { vertical-align: super; font-size: 0.7rem; }
.va-sub { vertical-align: sub; font-size: 0.7rem; }

/* --- Démonstration échelle typographique --- */
.demo-echelle {
  display: grid;
  gap: 0.75rem;
  padding: 1.5rem;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  margin-bottom: 1.5rem;
}

.echelle-h1 {
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  font-weight: 700;
  color: var(--couleur-texte);
  margin: 0;
}

.echelle-h2 {
  font-size: clamp(1.5rem, 1.25rem + 1.25vw, 2.5rem);
  font-weight: 700;
  color: var(--couleur-texte);
  margin: 0;
}

.echelle-h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
  font-weight: 600;
  color: var(--couleur-texte);
  margin: 0;
}

.echelle-p {
  font-size: 1rem;
  color: var(--couleur-texte);
  margin: 0;
}

.echelle-small {
  font-size: 0.8rem;
  color: var(--couleur-texte-clair);
}

/* --- Démonstration lisibilité --- */
.demo-lisibilite {
  padding: 2rem;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  margin-bottom: 1.5rem;
}

.demo-lisibilite .paragraphe-lisible {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 1.125rem;
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: #1e293b;
  max-width: 65ch;
  text-align: justify;
  hyphens: auto;
  margin-bottom: 1.5em;
}

.demo-lisibilite .paragraphe-lisible + .paragraphe-lisible {
  text-indent: 2em;
  margin-top: 0;
}