/* Édition 27 — harmonisation chromatique des seules cartes spéciales de l’accueil.
   Les dimensions, espacements, cadres, ombres, animations et typographies restent ceux des éditions précédentes. */

/* Crème douce : les modes 06/08 gardent le vert vedette ; AMC reçoit un accent miel. */
html:not([data-appearance]) #home :is(#mode-6, #mode-8),
html[data-appearance="cream"] #home :is(#mode-6, #mode-8) {
  background: #174e3c;
  color: #f6f3e9;
}
html:not([data-appearance]) #home :is(#mode-6, #mode-8) :is(.mode-number, strong, small, .arrow),
html[data-appearance="cream"] #home :is(#mode-6, #mode-8) :is(.mode-number, strong, small, .arrow) {
  color: #f6f3e9;
}
html:not([data-appearance]) #home :is(#mode-6, #mode-8) :is(.mode-number, .arrow),
html[data-appearance="cream"] #home :is(#mode-6, #mode-8) :is(.mode-number, .arrow) {
  color: #dceca1;
}
html:not([data-appearance]) #home :is(#mode-6, #mode-8):is(:hover, :focus-visible),
html[data-appearance="cream"] #home :is(#mode-6, #mode-8):is(:hover, :focus-visible) {
  background: #236449;
}
html:not([data-appearance]) #home #mode-covered26,
html[data-appearance="cream"] #home #mode-covered26 {
  background: #f1d39b;
  color: #163d31;
}
html:not([data-appearance]) #home #mode-covered26 :is(.mode-number, strong, small, .arrow),
html[data-appearance="cream"] #home #mode-covered26 :is(.mode-number, strong, small, .arrow) {
  color: #163d31;
}
html:not([data-appearance]) #home #mode-covered26 :is(.mode-number, .arrow),
html[data-appearance="cream"] #home #mode-covered26 :is(.mode-number, .arrow) {
  color: #78480d;
}
html:not([data-appearance]) #home #mode-covered26:is(:hover, :focus-visible),
html[data-appearance="cream"] #home #mode-covered26:is(:hover, :focus-visible) {
  background: #e8c278;
}

/* Sombre sculpté : les deux modes reprennent le vert profond des cartes vedettes. */
html[data-appearance="dark"] #home :is(#mode-6, #mode-8) {
  background: #004d40;
  color: rgba(255, 255, 255, .87);
}
html[data-appearance="dark"] #home :is(#mode-6, #mode-8) :is(.mode-number, strong, small, .arrow) {
  color: rgba(255, 255, 255, .87);
}
html[data-appearance="dark"] #home :is(#mode-6, #mode-8) :is(.mode-number, .arrow) {
  color: #81c784;
}
html[data-appearance="dark"] #home :is(#mode-6, #mode-8):is(:hover, :focus-visible) {
  background: #07594c;
}
html[data-appearance="dark"] #home #mode-covered26 {
  background: #614a21;
  color: rgba(255, 255, 255, .92);
}
html[data-appearance="dark"] #home #mode-covered26 :is(.mode-number, strong, small, .arrow) {
  color: rgba(255, 255, 255, .92);
}
html[data-appearance="dark"] #home #mode-covered26 :is(.mode-number, .arrow) {
  color: #ffe19a;
}
html[data-appearance="dark"] #home #mode-covered26:is(:hover, :focus-visible) {
  background: #735a2b;
}

/* Verre émeraude : 06/08 ont la même surface givrée ; AMC se distingue en bleu pétrole. */
html[data-appearance="glass"] #home :is(#mode-6, #mode-8) {
  background: linear-gradient(145deg, rgba(255, 255, 255, .21), rgba(255, 255, 255, .09));
  color: #fff;
}
html[data-appearance="glass"] #home :is(#mode-6, #mode-8) :is(.mode-number, strong, small, .arrow) {
  color: #fff;
}
html[data-appearance="glass"] #home :is(#mode-6, #mode-8) :is(.mode-number, .arrow) {
  color: #c4ffe5;
}
html[data-appearance="glass"] #home :is(#mode-6, #mode-8):is(:hover, :focus-visible) {
  background: linear-gradient(145deg, rgba(255, 255, 255, .27), rgba(255, 255, 255, .14));
}
html[data-appearance="glass"] #home #mode-covered26 {
  background: linear-gradient(145deg, rgba(5, 47, 75, .92), rgba(28, 44, 113, .88));
  color: #fff;
}
html[data-appearance="glass"] #home #mode-covered26 :is(.mode-number, strong, small, .arrow) {
  color: #fff;
}
html[data-appearance="glass"] #home #mode-covered26 :is(.mode-number, .arrow) {
  color: #c4ffe5;
}
html[data-appearance="glass"] #home #mode-covered26:is(:hover, :focus-visible) {
  background: linear-gradient(145deg, rgba(7, 65, 94, .96), rgba(40, 56, 136, .94));
}

/* Jaune solaire : 06/08 sont jaunes ensemble ; AMC porte le vert acide de la palette. */
html[data-appearance="brutal"] #home :is(#mode-6, #mode-8) {
  background: #ffd000;
  color: #111;
}
html[data-appearance="brutal"] #home :is(#mode-6, #mode-8) :is(.mode-number, strong, small, .arrow) {
  color: #111;
}
html[data-appearance="brutal"] #home :is(#mode-6, #mode-8):is(:hover, :focus-visible) {
  background: #f2bd00;
}
html[data-appearance="brutal"] #home #mode-covered26 {
  background: #39ff14;
  color: #111;
}
html[data-appearance="brutal"] #home #mode-covered26 :is(.mode-number, strong, small, .arrow) {
  color: #111;
}
html[data-appearance="brutal"] #home #mode-covered26:is(:hover, :focus-visible) {
  background: #29e600;
}