/**
 * COMPOSANTS ÉDITORIAUX « ia-* » · articles de cluster (agilité & suivants)
 * ---------------------------------------------------------------------------
 * Source : GUIDE-THEME-WORDPRESS-cluster-agile.md + cas supplémentaires.
 * Les articles importés (JSON → markdown + HTML inline) utilisent ces
 * classes ; ce fichier est chargé sur tous les contenus (is_singular).
 *
 * Ajouts par rapport au guide d'origine (« cas supplémentaires ») :
 *   - variantes de callout : --info / --warning / --danger / --success
 *   - réponses FAQ riches : listes, plusieurs paragraphes, div wrapper
 *   - checklist : liens, items imbriqués, variante ✗ (.ia-checklist--non)
 *   - takeaway contenant des listes ou des liens
 *   - CTA : bouton secondaire (.ia-cta--secondary), plusieurs boutons
 *   - stats : très petits écrans, valeurs longues (99,9 %…)
 *   - accessibilité : focus visible sur les accordéons, reduced-motion
 *   - ancres du sommaire : scroll-margin (le header sticky ne masque plus
 *     les H2 quand on clique dans le sommaire)
 *   - liens/URLs longs dans les sources : coupure propre
 *   - tableaux : aussi stylés sur les PAGES (pas seulement les articles)
 */

:root {
  --ia-violet: #8E2183;   /* = --primary du thème */
  --ia-jaune:  #FFD466;   /* = --accent du thème  */
  --ia-encre:  #1a1a2e;
  --ia-fond:   #faf7fb;
}

/* ---- Stats ---- */
.ia-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; margin: 2rem 0; }
.ia-stat { background: var(--ia-fond); border-left: 4px solid var(--ia-violet); padding: 1.25rem; border-radius: 8px; }
.ia-stat-number { display: block; font-size: 2.4rem; font-weight: 800; color: var(--ia-violet); line-height: 1.1;
  /* Cas supplémentaire : valeurs longues (« 99,9 % », « ×4,6 ») ne débordent pas */
  overflow-wrap: break-word; }
.ia-stat-label { display: block; font-weight: 700; margin: .35rem 0 .5rem; color: var(--ia-encre); }
.ia-stat p { margin: 0; font-size: .92rem; }

/* ---- Cards numérotées ---- */
.ia-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; margin: 2rem 0; }
.ia-card { background: #fff; border: 1px solid #eee; border-top: 4px solid var(--ia-jaune); border-radius: 8px; padding: 1.25rem; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.ia-card-number { display: inline-block; font-size: 1.6rem; font-weight: 800; color: var(--ia-jaune); -webkit-text-stroke: 1px var(--ia-violet); }
.ia-card h4 { margin: .4rem 0 .5rem; font-size: 1.05rem; }
.ia-card p { margin: 0; font-size: .92rem; }
/* Cas supplémentaire : card SANS numéro (le h4 ne colle pas au bord haut) */
.ia-card h4:first-child { margin-top: 0; }
/* Cas supplémentaire : liste dans une card */
.ia-card ul, .ia-card ol { margin: .5rem 0 0 1.1rem; padding: 0; font-size: .92rem; }
.ia-card li { margin-bottom: .3rem; }

/* ---- Callout (+ variantes) ---- */
.ia-callout { background: #fff8e6; border-left: 4px solid var(--ia-jaune); padding: 1rem 1.25rem; border-radius: 8px; margin: 2rem 0; }
.ia-callout p { margin: 0 0 .6rem; }
.ia-callout p:last-child { margin: 0; }
/* Cas supplémentaires : tonalités. Utiliser ia-callout ia-callout--info etc. */
.ia-callout--info    { background: #eef4fd; border-left-color: #3b82f6; }
.ia-callout--success { background: #ecfdf5; border-left-color: #10b981; }
.ia-callout--warning { background: #fff8e6; border-left-color: #f59e0b; }
.ia-callout--danger  { background: #fef2f2; border-left-color: #ef4444; }
/* Cas supplémentaire : liste dans un callout */
.ia-callout ul, .ia-callout ol { margin: .4rem 0 0 1.1rem; }

/* ---- Checklist ---- */
.ia-checklist { list-style: none; padding: 0; margin: 1.5rem 0; }
.ia-checklist li { position: relative; padding: .45rem 0 .45rem 2rem; border-bottom: 1px solid #f0eaf2; }
.ia-checklist li::before { content: "✓"; position: absolute; left: .25rem; color: var(--ia-violet); font-weight: 800; }
.ia-checklist li:last-child { border-bottom: none; }
/* Cas supplémentaire : liens dans la checklist */
.ia-checklist a { color: var(--ia-violet); font-weight: 600; }
/* Cas supplémentaire : sous-liste imbriquée (pas de coche, retrait simple) */
.ia-checklist li ul { list-style: disc; margin: .4rem 0 0 1rem; padding: 0; }
.ia-checklist li ul li { padding: .2rem 0; border: none; }
.ia-checklist li ul li::before { content: none; }
/* Cas supplémentaire : variante « à éviter » — <ul class="ia-checklist ia-checklist--non"> */
.ia-checklist--non li::before { content: "✗"; color: #ef4444; }

/* ---- FAQ accordéon ---- */
.ia-faq { margin: 2.5rem 0; }
.ia-faq-item { border: 1px solid #eee; border-radius: 8px; margin-bottom: .6rem; background: #fff; }
.ia-faq-item summary { cursor: pointer; padding: 1rem 1.25rem; font-weight: 700; color: var(--ia-encre); list-style: none; position: relative; padding-right: 3rem; }
.ia-faq-item summary::after { content: "+"; position: absolute; right: 1.25rem; top: 1rem; color: var(--ia-violet); font-weight: 800; transition: transform .2s; }
.ia-faq-item[open] summary::after { transform: rotate(45deg); }
.ia-faq-item summary::-webkit-details-marker { display: none; }
.ia-faq-item p { padding: 0 1.25rem 1rem; margin: 0; }
/* Cas supplémentaire : réponse riche (plusieurs <p>, liste, div wrapper) */
.ia-faq-item p + p { padding-top: 0; }
.ia-faq-item ul, .ia-faq-item ol { margin: 0; padding: 0 1.25rem 1rem 2.4rem; }
.ia-faq-item > div { padding: 0 1.25rem 1rem; }
.ia-faq-item > div p, .ia-faq-item > div ul { padding: 0 0 .6rem; }
/* Cas supplémentaire : summary contenant un h3/h4 (certains générateurs) */
.ia-faq-item summary h3, .ia-faq-item summary h4 { display: inline; font-size: inherit; margin: 0; color: inherit; }
/* Cas supplémentaire : accessibilité clavier */
.ia-faq-item summary:focus-visible { outline: 3px solid var(--ia-jaune); outline-offset: 2px; border-radius: 8px; }

/* ---- Takeaway ---- */
.ia-takeaway { background: var(--ia-encre); color: #fff; border-radius: 10px; padding: 1.75rem; margin: 2.5rem 0; }
.ia-takeaway-title { font-weight: 800; color: var(--ia-jaune); text-transform: uppercase; letter-spacing: .05em; font-size: .9rem; margin: 0 0 .75rem; }
.ia-takeaway p { color: #fff; }
.ia-takeaway p:last-child { margin-bottom: 0; }
/* Cas supplémentaires : listes et liens dans le takeaway (lisibles sur fond sombre) */
.ia-takeaway ul, .ia-takeaway ol { color: #fff; margin: 0 0 .5rem 1.2rem; }
.ia-takeaway li { color: #fff; margin-bottom: .35rem; }
.ia-takeaway a { color: var(--ia-jaune); font-weight: 700; }

/* ---- CTA bouton ---- */
.ia-cta { text-align: center; margin: 2.5rem 0; }
.ia-cta a { display: inline-block; background: var(--ia-violet); color: #fff; font-weight: 700; padding: .9rem 1.8rem; border-radius: 999px; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.ia-cta a:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(142,33,131,.35); color: #fff; }
/* Cas supplémentaire : plusieurs boutons côte à côte */
.ia-cta a + a { margin-left: .75rem; }
/* Cas supplémentaire : bouton secondaire — <a class="ia-cta-secondary"> */
.ia-cta a.ia-cta-secondary { background: transparent; color: var(--ia-violet); border: 2px solid var(--ia-violet); }
.ia-cta a.ia-cta-secondary:hover { background: var(--ia-fond); box-shadow: none; }

/* ---- Auteur ---- */
.ia-author { display: block; background: var(--ia-fond); border-radius: 10px; padding: 1.5rem; margin: 2.5rem 0; border: 1px solid #f0e0ee; }
.ia-author-title { font-weight: 800; color: var(--ia-violet); margin: 0 0 .5rem; }
.ia-author p:last-child { margin: 0; font-size: .95rem; }

/* ---- Sources ---- */
.ia-sources { border-top: 2px solid var(--ia-fond); margin-top: 2.5rem; padding-top: 1.25rem; font-size: .88rem; }
.ia-sources-title { font-weight: 800; margin-bottom: .5rem; }
.ia-sources a { color: var(--ia-violet);
  /* Cas supplémentaire : URLs longues coupées proprement (pas de débordement mobile) */
  overflow-wrap: anywhere; word-break: break-word; }
/* Cas supplémentaire : <ol> de sources numérotées, pas seulement <ul> */
.ia-sources ol, .ia-sources ul { margin: 0 0 0 1.2rem; padding: 0; }
.ia-sources li { margin-bottom: .35rem; }

/* ---- Tableaux markdown ----
   Cas supplémentaire : stylés sur les articles ET les pages (le guide ne
   couvrait que .single-post ; les composants peuvent vivre sur une page). */
.single-post table, .page .post-content table, .page .entry-content table {
  width: 100%; border-collapse: collapse; margin: 2rem 0; font-size: .95rem; }
.single-post table th, .page .post-content table th, .page .entry-content table th {
  background: var(--ia-encre); color: #fff; text-align: left; padding: .7rem .9rem; }
.single-post table td, .page .post-content table td, .page .entry-content table td {
  border: 1px solid #eee; padding: .7rem .9rem; vertical-align: top; }
.single-post table tr:nth-child(even) td, .page .post-content table tr:nth-child(even) td,
.page .entry-content table tr:nth-child(even) td { background: var(--ia-fond); }

/* ---- Cas supplémentaire : ancres du sommaire ----
   Le header du site est sticky : sans ceci, cliquer un H2 dans le sommaire
   cache le titre sous le header. 96px ≈ hauteur header + marge. */
.single-post h2[id], .single-post h3[id],
.page h2[id], .page h3[id] { scroll-margin-top: 96px; }

/* ---- Cas supplémentaire : images dans les composants ---- */
.ia-card img, .ia-callout img, .ia-takeaway img { max-width: 100%; height: auto; border-radius: 6px; }

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .ia-stats, .ia-cards { grid-template-columns: 1fr; }
  .single-post table, .page .post-content table, .page .entry-content table { display: block; overflow-x: auto; }
  /* Cas supplémentaire : plusieurs CTA s'empilent proprement */
  .ia-cta a { display: block; margin: 0 0 .6rem; }
  .ia-cta a + a { margin-left: 0; }
}
@media (max-width: 380px) {
  /* Cas supplémentaire : très petits écrans, les gros chiffres restent lisibles */
  .ia-stat-number { font-size: 1.9rem; }
}

/* ---- Cas supplémentaire : préférence « moins d'animations » ---- */
@media (prefers-reduced-motion: reduce) {
  .ia-cta a, .ia-faq-item summary::after { transition: none; }
  .ia-cta a:hover { transform: none; }
}