/* Bascule clair/sombre des pages article (content/blog/*.html).
   Ces pages sont hors du design system du site — chacune garde ses tokens
   sombres par défaut dans son propre <style>. Ce fichier n'ajoute que la
   variante claire et l'habillage du bouton, pour ne pas dupliquer les tokens
   dans chaque article. */

:root[data-theme="light"] {
  --yn-bg:         #FAFBFC;
  --yn-surface:    #FFFFFF;
  --yn-surface-2:  #F1F3F5;
  --yn-border:     #DDE2E5;
  --yn-accent:     #00997A;
  --yn-accent-dim: rgba(0,153,122,0.10);
  --yn-accent-mid: rgba(0,153,122,0.20);
  --yn-text:       #14181B;
  --yn-muted:      #5B6572;
  --yn-label:      #333B42;
  --yn-blue:       #1D6FC2;
  --yn-blue-dim:   rgba(29,111,194,0.10);
  --yn-purple:     #6752C7;
  --yn-purple-dim: rgba(103,82,199,0.10);
  --yn-amber:      #8A5A0E;
  --yn-amber-dim:  rgba(138,90,14,0.10);
  --yn-red:        #B23433;
  --yn-red-dim:    rgba(178,52,51,0.10);
  --yn-header-bg:  rgba(255,255,255,.85);
}

/* Les diagrammes SVG (RIR, angles morts, migration DMARC) gardent leurs
   propres couleurs sombres codées en dur : ce sont des puces d'illustration,
   pas du texte, elles restent lisibles sur fond clair sans changer. */

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.article-theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--yn-muted);
  background: transparent;
  border: 0.5px solid var(--yn-border);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}

.article-theme-btn:hover {
  border-color: var(--yn-accent);
  color: var(--yn-accent);
}

.article-theme-btn svg {
  width: 15px;
  height: 15px;
  display: block;
}

/* Neutralise les transitions pendant la bascule : sinon chaque couleur
   redéfinie s'anime et la page clignote (même piège que theme-switcher.js
   sur le reste du site). */
html.article-theme-switching *,
html.article-theme-switching *::before,
html.article-theme-switching *::after {
  transition: none !important;
}