/* Styles de rendu d'un verdict Maât.

   Module CSS PARTAGÉ entre l'app (views/home.ejs) et la page de verdict partagé
   (views/share.ejs), pour un rendu strictement identique. Pendant clé du module
   JS public/verdict-render.js : toute évolution du rendu se fait dans ces deux
   fichiers. Toutes les couleurs viennent de la palette du design system VNCT. */

/* Article ouvert, sans carte ; c'est la page qui défile. */
.maat-article { line-height: var(--leading-relaxed); }
.maat-article h1, .maat-article h2 { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-lg); }
/* Titre du verdict = la question reformulée (injectée par le pipeline, rendue en
   H1). Plus gros que les h2 internes, posé au-dessus de la pastille de verdict. */
.maat-article .maat-verdict-title {
  margin: 0 0 var(--space-4);
  font-size: var(--text-2xl, 1.6rem);
  font-weight: var(--font-bold, 700);
  line-height: var(--leading-tight, 1.2);
  color: var(--text-primary);
}
.maat-article p { margin: 0 0 var(--space-3); line-height: var(--leading-relaxed); }
.maat-article ul { margin: 0 0 var(--space-3); padding-left: var(--space-5); line-height: var(--leading-relaxed); }
.maat-article a { color: var(--accent); word-break: break-word; }
/* Note de fiabilité d'une source : 4 pastilles, pleines selon la note (/4),
   creuses sinon. Monochrome accent (palette stricte du DS). */
.maat-rating { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; margin: 0 2px; }
.maat-dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--accent); box-sizing: border-box; }
.maat-dot--on { background: var(--accent); }
/* Boussole de ligne éditoriale d'une source (Sema #58) : axe horizontal à
   9 positions (extrême gauche → extrême droite, paliers intermédiaires compris)
   avec repère central et curseur.
   Code couleur (retour bêta #75) : rouge à gauche, bleu à droite, blanc au centre
   (convention FR), l'intensité croissant vers les extrêmes — teinte franche = position
   marquée, teinte pâle = position modérée. La couleur RENFORCE sans la remplacer
   l'information primaire, qui reste la POSITION du curseur + le libellé (title /
   aria-label) : pas de régression d'accessibilité (daltonisme → la position suffit).
   Rendue seulement quand l'orientation du média est établie par la table curée
   côté serveur ; neutre / média hors table → rien du tout. */
.maat-compass {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 12px;
  vertical-align: middle;
  margin: 0 2px 0 6px;
  /* Teintes désaturées gauche/droite. Hors palette --accent : exception assumée,
     la couleur est ici SÉMANTIQUE (orientation politique), comme --warning l'est
     pour l'avertissement — pas une teinte décorative inventée. */
  --compass-left: #c04a5e;
  --compass-right: #4f7bb5;
}
/* Axe. --text-muted et non --border-default (retour bêta T-68) : la bordure
   par défaut du DS est une white-alpha à 8 %, quasi invisible sur le décor
   sombre (~1.1:1). --text-muted est le neutre LISIBLE du DS dans les deux
   thèmes (#837fa0 sur #06060c ≈ 5:1 en sombre, #69677e sur #eceaf6 ≈ 4.4:1 en
   clair) : la piste se lit nettement sans voler la vedette au curseur accent. */
.maat-compass::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: var(--text-muted);
  border-radius: 1px;
}
/* Repère central (position « centre »), pour lire la position d'un coup d'œil.
   Même neutre lisible que la piste (il doit se voir autant qu'elle). */
.maat-compass::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 8px;
  transform: translate(-50%, -50%);
  background: var(--text-muted);
  border-radius: 1px;
}
/* Curseur coloré selon la position (cf. code couleur en tête). Liseré neutre
   --text-muted (le neutre lisible du DS dans les deux thèmes, comme l'axe) : détache
   le point du fond quelle que soit sa teinte — indispensable pour le blanc central,
   sinon invisible sur le fond clair du thème light. Background par défaut = centre
   (blanc) ; chaque palier le surcharge ci-dessous. */
.maat-compass-cursor {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px var(--text-muted);
  transform: translate(-50%, -50%);
  z-index: 1;
}
/* 9 positions équiréparties (pas de 11 %, bornes 6 % / 94 %) ; le repère
   central (::after) reste à 50 %, aligné sur le palier « centre ». */
/* Position + couleur. Intensité maximale aux extrêmes (var pleine), dégradée vers
   le centre par color-mix avec du blanc ; le centre est blanc pur. */
.maat-compass--eg .maat-compass-cursor { left: 6%;  background: var(--compass-left); }
.maat-compass--gr .maat-compass-cursor { left: 17%; background: color-mix(in srgb, var(--compass-left) 72%, #fff); }
.maat-compass--g  .maat-compass-cursor { left: 28%; background: color-mix(in srgb, var(--compass-left) 48%, #fff); }
.maat-compass--cg .maat-compass-cursor { left: 39%; background: color-mix(in srgb, var(--compass-left) 24%, #fff); }
.maat-compass--c  .maat-compass-cursor { left: 50%; background: #fff; }
.maat-compass--cd .maat-compass-cursor { left: 61%; background: color-mix(in srgb, var(--compass-right) 24%, #fff); }
.maat-compass--d  .maat-compass-cursor { left: 72%; background: color-mix(in srgb, var(--compass-right) 48%, #fff); }
.maat-compass--dr .maat-compass-cursor { left: 83%; background: color-mix(in srgb, var(--compass-right) 72%, #fff); }
.maat-compass--ed .maat-compass-cursor { left: 94%; background: var(--compass-right); }

/* Séparateur d'article : trait fin qui s'estompe sur les bords. */
.maat-article hr {
  border: none;
  height: 1px;
  margin: var(--space-5) 0;
  background: linear-gradient(90deg, transparent, var(--border-default) 15%, var(--border-default) 85%, transparent);
}
.maat-verdict { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.maat-verdict .vnct-pill { font-size: var(--text-base); }
/* Point coloré devant le libellé du badge (cf. maquette : « ● Trompeur »).
   La couleur suit l'état (currentColor = la teinte sémantique du variant pill :
   ambre/rouge/vert/neutre) — PAS d'irisé : c'est une couleur d'état, pas un
   élément signature. Sur la pill neutre (sans variant), currentColor vaut
   --text-secondary, donc le point reste cohérent. */
.maat-verdict .vnct-pill::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
/* Encart « En réalité : … » - la mise au point qui ouvre le verdict.
   Bordure gauche IRISÉE (façon maquette) : on réutilise la recette PROTO du
   design system (--gradient-iris-loop + vnctShimmer, background-size:500% auto)
   plutôt qu'un violet uni. La bordure est portée par un pseudo-élément (bande
   verticale à gauche) : un border-image ne permet pas d'irisé sur un seul côté
   avec un radius propre, et garde le reste de la bordure neutre. */
.maat-reality {
  position: relative;
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm, 8px);
  overflow: hidden; /* la bande irisée épouse le radius du coin */
  /* Fond opaque (le fond animé de l'app transparaît sinon dans l'app). */
  background: var(--bg-secondary);
  color: var(--text-primary);
  line-height: var(--leading-relaxed);
}
.maat-reality::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  /* Bande irisée animée — recette proto : background-size:500% auto + animation
     vnctShimmer par élément (plus d'horloge partagée ni d'ancrage écran). */
  background-image: var(--gradient-iris-loop);
  background-size: 500% auto;
  animation: vnctShimmer 24s linear infinite;
  /* Glow violet (recette proto). */
  box-shadow: 0 0 8px rgba(180, 140, 255, .45);
}

/* Bannière de péremption (feature 2026-07-11) : posée EN TÊTE de l'article par
   verdict-render.js quand la « Validité estimée » du verdict est dépassée →
   visible partout où un verdict se rend (app, historique du compte, /v/:slug).
   Même langage visuel que les bandeaux d'état globaux de l'app (.maat-maintenance,
   home.ejs) : sémantique --warning fonctionnelle (avertissement, pas une teinte
   inventée), fond OPAQUE mêlé à --bg-secondary (le fond animé ne transparaît pas). */
.maat-stale {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent);
  border-left: 3px solid var(--warning);
  border-radius: var(--radius-md, 10px);
  background: color-mix(in srgb, var(--warning) 12%, var(--bg-secondary));
  color: var(--text-primary);
  font-size: var(--text-sm);
  line-height: 1.45;
}
.maat-stale > svg { flex: 0 0 auto; margin-top: 2px; color: var(--warning); }
.maat-stale__body { min-width: 0; }
.maat-stale__text { margin: 0 0 var(--space-2); }
.maat-stale__btn svg { flex: 0 0 auto; }