/* Style des blocs riches (directives estampillées) — écrit sur les design
 * tokens du template, AUCUNE police en dur : la feuille est template-agnostique.
 * Versionnée avec directives-core : la forme HTML (.dir-*, builders du
 * registre) et cette feuille évoluent ensemble ; le serveur la copie dans
 * chaque site (styles/directives.css) à la création et à ses déploiements. */

.dir-label {
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 .6rem;
  color: hsl(var(--accent));
}

/* Chapô */
.dir-intro {
  font-size: 1.22rem;
  line-height: 1.7;
  color: hsl(var(--muted-foreground));
  margin: 0 0 2rem;
}

/* Encadrés génériques */
.dir-avertissement,
.dir-definition,
.dir-reference,
.dir-a-retenir {
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  margin: 1.8rem 0;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
}
.dir-avertissement { border-left: 3px solid hsl(var(--destructive) / .7); }
.dir-avertissement .dir-label { color: hsl(var(--destructive) / .9); }
.dir-definition { border-left: 3px solid hsl(var(--accent)); }
.dir-a-retenir { border-left: 3px solid hsl(var(--accent) / .7); }
.dir-reference { font-size: .92rem; }
.dir-reference ul { margin: 0; padding-left: 1.2rem; }
.dir-avertissement :last-child,
.dir-definition :last-child,
.dir-a-retenir :last-child,
.dir-reference :last-child { margin-bottom: 0; }

/* Étapes (procédure chronologique numérotée) */
.dir-etapes {
  margin: 2rem 0;
  padding: 0;
  list-style: none;
  counter-reset: dir-etape;
}
.dir-etapes > li {
  position: relative;
  padding: 0 0 1.4rem 3.2rem;
  counter-increment: dir-etape;
}
.dir-etapes > li::before {
  content: counter(dir-etape);
  position: absolute;
  left: 0;
  top: -.15rem;
  width: 2.1rem;
  height: 2.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid hsl(var(--accent));
  border-radius: 50%;
  color: hsl(var(--accent));
  font-weight: 600;
  font-size: .95rem;
}
.dir-etapes > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.02rem;
  top: 2.15rem;
  bottom: .2rem;
  width: 1px;
  background: hsl(var(--border));
}

/* Checklist (points à vérifier, non ordonnés) */
.dir-checklist {
  margin: 2rem 0;
  padding: 0;
  list-style: none;
}
.dir-checklist > li {
  position: relative;
  padding: .25rem 0 .25rem 2rem;
}
.dir-checklist > li::before {
  content: "✓";
  position: absolute;
  left: .2rem;
  color: hsl(var(--accent));
  font-weight: 700;
}

/* Chiffre clé */
.dir-chiffre-cle {
  margin: 2rem 0;
  padding: 1.6rem;
  text-align: center;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
}
.dir-chiffre-cle .dir-valeur {
  display: block;
  font-size: 2.6rem;
  color: hsl(var(--accent));
  line-height: 1.1;
}
.dir-chiffre-cle figcaption {
  margin-top: .5rem;
  font-size: .9rem;
  color: hsl(var(--muted-foreground));
}

/* FAQ (details natif : accessible, crawlable, zéro JS) */
/* padding:0 — le CSS legacy du template pose un `section{padding:96px 0}`
   (bande de landing) qui frapperait ce <section> dans le corps d'article. */
.dir-faq { margin: 2rem 0; padding: 0; }
.dir-faq-item {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  margin-bottom: .6rem;
  background: hsl(var(--card));
}
.dir-faq-item summary {
  cursor: pointer;
  padding: .9rem 1.2rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  list-style: none;
  position: relative;
}
.dir-faq-item summary::after {
  content: "+";
  position: absolute;
  right: 1.1rem;
  color: hsl(var(--accent));
}
.dir-faq-item[open] summary::after { content: "–"; }
.dir-faq-item .dir-faq-answer { padding: 0 1.2rem .9rem; }
.dir-faq-item .dir-faq-answer :last-child { margin-bottom: 0; }

/* Figure & vidéo */
.dir-figure { margin: 2rem 0; }
.dir-figure img { width: 100%; border-radius: var(--radius); }
.dir-figure figcaption {
  margin-top: .5rem;
  font-size: .85rem;
  color: hsl(var(--muted-foreground));
  text-align: center;
}
.dir-figure .dir-credit { opacity: .75; font-style: italic; }
.dir-video {
  margin: 2rem 0;
  padding: 2.2rem;
  text-align: center;
  background: hsl(var(--card));
  border: 1px dashed hsl(var(--border));
  border-radius: var(--radius);
}

/* Citation en exergue */
.dir-pull-quote {
  margin: 2.4rem 0;
  padding: 0 0 0 1.4rem;
  border-left: 3px solid hsl(var(--accent));
  font-size: 1.35rem;
  font-style: italic;
  line-height: 1.5;
  color: hsl(var(--foreground));
}

/* Téléchargement PDF */
.dir-pdf {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 1.8rem 0;
  padding: 1rem 1.3rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  text-decoration: none;
  color: hsl(var(--foreground));
}
.dir-pdf:hover { border-color: hsl(var(--accent)); }
.dir-pdf .dir-pdf-icon { font-size: 1.3rem; color: hsl(var(--accent)); }

/* CTA */
.dir-cta { margin: 2.4rem 0; text-align: center; }
.dir-cta-subtitle {
  margin: 0 0 .8rem;
  color: hsl(var(--muted-foreground));
  font-size: .95rem;
}
.dir-cta-btn {
  display: inline-block;
  padding: .9rem 2.2rem;
  border: 1px solid hsl(var(--accent));
  border-radius: var(--radius);
  color: hsl(var(--accent));
  font-size: .9rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.dir-cta-btn:hover {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}
.dir-cta-btn--secondary {
  border-color: hsl(var(--border));
  color: hsl(var(--foreground));
}
.dir-cta-btn--secondary:hover {
  background: hsl(var(--card));
  color: hsl(var(--foreground));
}

/* Points de montage interactifs (tool / form) */
.dir-tool, .dir-form, .dir-form-button {
  margin: 2rem 0;
}
.dir-tool .dir-placeholder, .dir-form .dir-placeholder {
  padding: 2rem;
  text-align: center;
  background: hsl(var(--card));
  border: 1px dashed hsl(var(--accent) / .5);
  border-radius: var(--radius);
  color: hsl(var(--muted-foreground));
  font-size: .95rem;
}
.dir-form-button { text-align: center; }

/* Bloc inconnu (dégradation du stamper : fallback visible, pas invisible) */
.dir-unknown {
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  margin: 1.8rem 0;
  background: hsl(var(--card));
  border: 1px dashed hsl(var(--border));
}

/* Variantes de mise en page des images (barre contextuelle de l'éditeur).
 * Tailles et habillage prédéfinis : responsive et cohérent, contrairement
 * au redimensionnement pixel libre. */
.dir-figure--s { max-width: 33%; }
.dir-figure--m { max-width: 60%; }
.dir-figure--center { margin-left: auto; margin-right: auto; }
.dir-figure--left { float: left; margin: .4rem 1.8rem 1rem 0; }
.dir-figure--right { float: right; margin: .4rem 0 1rem 1.8rem; }
.dir-figure--left:not(.dir-figure--s):not(.dir-figure--m),
.dir-figure--right:not(.dir-figure--s):not(.dir-figure--m) { max-width: 45%; }
.hv-article h2 { clear: both; } /* les sections repartent sous l'habillage */
@media (max-width: 640px) {
  .dir-figure--left, .dir-figure--right { float: none; margin: 2rem 0; }
  .dir-figure--s, .dir-figure--m { max-width: 100%; }
}

/* Couverture d'article (articleMeta.cover) — figure injectée par le renderer
 * dans le hero ; sert aussi de vignette d'index et d'og:image. */
.hv-article-cover { margin: 1.6rem 0 0; }
.hv-article-cover img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--radius, 8px);
}

/* Intégration externe (custom-embed) — l'iframe est créée au runtime par
 * scripts/hv-embed.js ; le placeholder n'est visible que sans JS. */
.dir-embed { margin: 2rem 0; }
.dir-embed iframe { display: block; width: 100%; border: 0; min-height: 120px; border-radius: var(--radius); }
.dir-embed .dir-placeholder {
  padding: 2rem;
  text-align: center;
  background: hsl(var(--card));
  border: 1px dashed hsl(var(--accent) / .5);
  border-radius: var(--radius);
  color: hsl(var(--muted-foreground));
  font-size: .95rem;
}