/* --- Badge de condition dans le hero ------------------------------- */
.wall-state-msg.is-error { color: var(--lvl-orange); }

#hero-state-badge { --teinte: var(--lvl-grey); }
#hero-state-badge::before {
  content: ""; display: inline-block; width: 9px; height: 9px;
  border-radius: 50%; background: var(--teinte); margin-right: 7px;
}

/* Niveau actif dans la bande des quatre niveaux. */
.levels-strip .lvl.is-active {
  outline: 2px solid var(--on-navy);
  outline-offset: 2px;
  border-radius: 6px;
}
/* Le marqueur du niveau du jour est annonce aux lecteurs d'ecran mais
   n'occupe aucune place : en bloc visible, il faisait 50 px contre 26
   pour les autres et cassait l'alignement de la legende sur une ligne.
   L'information reste portee visuellement par le contour et la graisse,
   donc jamais par la couleur seule. */
.lvl-actif {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}
/* WordPress injecte margin-block-start sur les enfants d'un groupe en
   disposition « flow ». Dans la bande des niveaux, seul le premier y
   echappe : les trois autres descendaient de 24 px et la legende ne
   tenait plus sur une ligne. L'espacement est deja porte par gap. */
.levels-strip { align-items: center; }
.levels-strip > * { margin-block-start: 0; }
.levels-strip .lvl.is-active { font-weight: 700; }

/* --- Separation editoriale des deux canaux ------------------------- */
.canal-titre { margin: 34px 0 14px; }
.canal-titre h2 { margin: 0 0 6px; font-size: 21px; }
.canal-note,
.canal-avertissement { margin: 0; max-width: 68ch; font-size: 14px; line-height: 1.6; }
.canal-note { color: var(--ink-dim); }

/* L'avertissement porte une information de methode : il est marque, pas
   decore. Bordure a gauche plutot que couleur seule. */
.canal-avertissement {
  padding: 10px 14px;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 6px 6px 0;
  color: var(--ink);
}


/* --- Grille du mur : 1 / 2 / 4 colonnes ---------------------------
   charte.css prevoit 2 / 3 / 4. La demande validee est 1 colonne sur
   mobile, 2 sur tablette, 4 sur ordinateur : on ajuste ici, dans la
   feuille de page, sans toucher a la charte. */
.wall-native { grid-template-columns: 1fr; }
@media (min-width: 560px) { .wall-native { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) { .wall-native { grid-template-columns: repeat(4, 1fr); } }

/* --- Bloc Challenge : composition horizontale ---------------------
   Le tableau n'occupait que la gauche d'un grand bloc sombre, laissant
   un vide a droite. Deux colonnes : resultats a gauche, question du
   jour a droite, separees par un filet discret. */
.qod-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
}
.qod-grid > * { margin-block-start: 0; min-width: 0; }

@media (min-width: 900px) {
  .qod-grid {
    grid-template-columns: 42fr 58fr;
    gap: 0 34px;
  }
  /* Filet de separation porte par la colonne de droite : pas d'element
     supplementaire dans le balisage. */
  .qod-col-question {
    padding-left: 34px;
    border-left: 1px solid var(--border);
  }
}

.qod-col-resultats,
.qod-col-question { min-width: 0; }

.qod-eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

/* La question doit rester lisible : pas de largeur artificiellement
   reduite, mais une mesure typographique confortable. */
.qod-question {
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 62ch;
}
.qod-question.est-absente { color: var(--lvl-orange); font-style: italic; }

.qod-bascule {
  display: inline-block;
  margin: 0 0 12px;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.qod-bascule:hover { color: var(--accent); }
.qod-bascule:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; border-radius: 4px; }

.qod-original {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-left: 3px solid var(--border);
  background: var(--page-bg);
  border-radius: 0 6px 6px 0;
}
/* La charte declare « #today-wall .qod-original-text { color:
   var(--ink-faint) } » : specificite 1,1,0, qui ramenait ce texte a
   2,88:1 sur le fond de l'encadre, sous le seuil AA. On egale la
   specificite par l'identifiant du bloc ; la feuille de page etant
   chargee apres la charte, c'est cette regle qui l'emporte. */
#qod-block .qod-original-text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-dim);
  max-width: 62ch;
}

.qod-note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-faint);
  max-width: 62ch;
}

/* Le tableau ne deborde jamais : il defile dans son propre conteneur. */
.challenge-table-wrap { overflow-x: auto; }
.challenge-table { width: 100%; }