/* Habillage « claire », tiré de la direction C du design system
 * (design/directions/c-claire-ludique.html) : fond crème, traits noirs
 * francs, pastilles pastel, esprit jeu de société. */

:root[data-theme='claire'] {
  --fond: #faf5ec;
  --fond-carte: #ffffff;
  --fond-champ: #f1e9db;
  --encre: #2b2622;
  --encre-douce: #8a7f72;
  --accent: #f25c3d;
  --accent-sombre: #d94a2c;
  --ok: #3f9a3a;
  --erreur: #d7372b;

  --r1: #ffb3a7;
  --r2: #a7d8ff;
  --r3: #ffe08a;
  --r4: #c5f0a4;

  --rayon: 22px;
  --ombre: 0 4px 0 #2b2622;
}

:root[data-theme='claire'] body {
  background: var(--fond);
  color: var(--encre);
}

:root[data-theme='claire'] .marque span { color: var(--accent); }

:root[data-theme='claire'] .bouton {
  color: #ffffff;
  border: 3px solid #2b2622;
  box-shadow: var(--ombre);
}
/* Bouton sans fond : texte à l'encre, sinon blanc sur blanc. */
:root[data-theme='claire'] .bouton.secondaire { color: var(--encre); }

/* Réponses : carte blanche cernée de noir, pastille pastel. */
:root[data-theme='claire'] .reponse,
:root[data-theme='claire'] .reponse[data-i] {
  background: #ffffff;
  color: #2b2622;
  border: 3px solid #2b2622;
  box-shadow: var(--ombre);
  font-weight: 800;
}
:root[data-theme='claire'] .reponse .lettre {
  border: 3px solid #2b2622;
  border-radius: 12px;
  color: #2b2622;
  font-weight: 900;
}
:root[data-theme='claire'] .reponse[data-i="0"] .lettre { background: var(--r1); }
:root[data-theme='claire'] .reponse[data-i="1"] .lettre { background: var(--r2); }
:root[data-theme='claire'] .reponse[data-i="2"] .lettre { background: var(--r3); }
:root[data-theme='claire'] .reponse[data-i="3"] .lettre { background: var(--r4); }