/* ============================================================
   Intégration des composants WiseWand (classes .wwc-*)

   Cette feuille ne redéfinit rien : elle se contente de piloter
   les variables CSS exposées par wwc.min.css pour que les
   composants adoptent l'identité du site, et d'ajuster leur
   insertion dans le flux rédactionnel.
   Chargée uniquement sur les pages qui contiennent un composant.
   ============================================================ */

/* ------------------------------------------------------------
   1. Indispensable : masquer les composants tant qu'Alpine n'a
   pas pris la main. Sans cette règle, le gabarit brut du quiz
   s'affiche une fraction de seconde au chargement.
   wwc.min.css ne fournit pas cette règle.
   ------------------------------------------------------------ */
[x-cloak] { display: none !important; }

/* ------------------------------------------------------------
   2. Thème — les 129 variables de wwc.min.css dérivent toutes
   de cette poignée de valeurs.
   ------------------------------------------------------------ */
.wwc,
.prose .wwc {
  --wwc-primary:     #6d28d9;   /* violet du site, au lieu du turquoise par défaut */
  --wwc-gray:        #6f6879;
  --wwc-success:     #15803d;
  --wwc-danger:      #b91c1c;
  --wwc-white:       #ffffff;

  --wwc-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --wwc-font-mono:   ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wwc-line-height: 1.6;
  --wwc-radius:      0.85em;
  --wwc-border-width: 1px;
  --wwc-shadow:      0 1px 2px rgba(27, 23, 32, .05), 0 8px 24px rgba(27, 23, 32, .06);
}

/* Les titres des composants reprennent la serif du site */
.prose .wwc-title,
.prose .wwc-header { font-family: var(--font-serif); letter-spacing: -.01em; }

/* ------------------------------------------------------------
   3. Insertion dans le flux de l'article
   ------------------------------------------------------------ */

/* .prose applique une marge à tous les enfants directs ; on donne
   aux composants une respiration cohérente avec les encarts du site. */
.prose .wwc { margin-block: 2.2em; }

/* Le contenu interne d'un composant ne doit pas hériter des marges
   verticales de .prose, qui doublent les espacements. */
.prose .wwc > * + *,
.prose .wwc p + p { margin-top: 0; }

/* Les tableaux WiseWand gardent le défilement horizontal sur mobile */
.prose .wwc-table { display: block; overflow-x: auto; }
.prose .wwc-table table { width: 100%; }

/* Les images à l'intérieur d'un composant ne prennent pas la
   marge de 1.8em appliquée aux images d'article. */
.prose .wwc img { margin-block: 0; }

/* Grille de composants : une colonne sur mobile */
@media (max-width: 620px) {
  .prose .wwc-grid { grid-template-columns: 1fr !important; }
}

/* ------------------------------------------------------------
   4. Accessibilité — l'anneau de focus du site prime
   ------------------------------------------------------------ */
.prose .wwc button:focus-visible,
.prose .wwc [role="button"]:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   5. Impression : un quiz interactif n'a pas de sens sur papier,
   mais son énoncé reste utile.
   ------------------------------------------------------------ */
@media print {
  .prose .wwc button { display: none; }
  .prose .wwc { break-inside: avoid; border: 1px solid #ddd; }
}