/* Édition 30 — hiérarchie légère de l’accueil et micro-retours sûrs.
   Charger après theme-refine30.css. Aucun changement de contenu ou de logique.
   Les cartes 06/08 restent une paire de dimensions identiques par breakpoint. */

/* Gradation de hauteur, sans agrandir la zone cliquable par transform :
   02/03/04 conservent 132 px desktop / 112 px mobile ; 06/08 font 138/126 px ;
   AMC fait 146/134 px. Pas de 6–8 px au-dessus des cartes spéciales, perceptible
   sans rendre l’accueil disproportionné. */
#home :is(#mode-6, #mode-8) {
  box-sizing: border-box;
  height: 138px;
  min-height: 138px;
}
#home #mode-covered26 {
  box-sizing: border-box;
  min-height: 146px;
}
#home #mode-covered26 strong {
  font-size: 22px;
  line-height: 1.3;
}

/* Le contrat mobile existant conserve 126 px pour les deux cartes 06/08. */
@media (max-width: 700px) {
  #home :is(#mode-6, #mode-8) {
    height: 126px;
    min-height: 126px;
  }
  #home #mode-covered26 { min-height: 134px; }
  #home #mode-covered26 strong { font-size: 20px; }
}
@media (max-width: 350px) {
  /* Hauteur commune qui absorbe le retour à la ligne en très petite largeur,
     y compris Sombre sculpté où la carte 08 avait une exception historique. */
  #home :is(#mode-6, #mode-8) {
    height: 134px;
    min-height: 134px;
  }
  #home #mode-covered26 { min-height: 142px; }
  #home #mode-covered26 strong { font-size: 18px; }
}

/* Animations d’état existantes conservées : seules les couleurs/contours reçoivent
   une transition; aucune nouvelle translation, échelle ou apparition ne déplace
   ou ne masque une commande. Le rebond/pressage reste celui de style.css + ui20. */
#home .mode-card {
  transition: transform .18s ease, box-shadow .18s ease,
              background-color .18s ease, color .18s ease,
              border-color .18s ease;
}

/* Jaune solaire — 06/08 vert clair, AMC vert foncé. Les cadres noirs sont préservés. */
html[data-appearance="brutal"] #home :is(#mode-6, #mode-8) {
  background: #39ff14;
  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: #2fe600;
}
html[data-appearance="brutal"] #home #mode-covered26 {
  background: #146b0b;
  color: #fff;
}
html[data-appearance="brutal"] #home #mode-covered26 :is(.mode-number, strong, small, .arrow) {
  color: #fff;
}
html[data-appearance="brutal"] #home #mode-covered26 :is(.mode-number, .arrow) {
  color: #b9ff97;
}
html[data-appearance="brutal"] #home #mode-covered26:is(:hover, :focus-visible) {
  background: #1b7d11;
}

/* Crème douce — surface feuillage claire pour 06/08, vert vedette pour AMC. */
html:not([data-appearance]) #home :is(#mode-6, #mode-8),
html[data-appearance="cream"] #home :is(#mode-6, #mode-8) {
  background: #e6eccf;
  color: #163d31;
}
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: #163d31;
}
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: #174e3c;
}
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: #dceca1;
}
html:not([data-appearance]) #home #mode-covered26,
html[data-appearance="cream"] #home #mode-covered26 {
  background: #174e3c;
  color: #fffef8;
}
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: #fffef8;
}
html:not([data-appearance]) #home #mode-covered26 :is(.mode-number, .arrow),
html[data-appearance="cream"] #home #mode-covered26 :is(.mode-number, .arrow) {
  color: #dceca1;
}
html:not([data-appearance]) #home #mode-covered26:is(:hover, :focus-visible),
html[data-appearance="cream"] #home #mode-covered26:is(:hover, :focus-visible) {
  background: #236449;
}

/* Sombre sculpté — 06/08 en vert clair sur encre, AMC vert forêt profond. */
html[data-appearance="dark"] #home :is(#mode-6, #mode-8) {
  background: #81c784;
  color: #111;
}
html[data-appearance="dark"] #home :is(#mode-6, #mode-8) :is(.mode-number, strong, small, .arrow) {
  color: #111;
}
html[data-appearance="dark"] #home :is(#mode-6, #mode-8) :is(.mode-number, .arrow) {
  color: #004d40;
}
html[data-appearance="dark"] #home :is(#mode-6, #mode-8):is(:hover, :focus-visible) {
  background: #a5d6a7;
}
html[data-appearance="dark"] #home #mode-covered26 {
  background: #004d40;
  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: #81c784;
}
html[data-appearance="dark"] #home #mode-covered26:is(:hover, :focus-visible) {
  background: #07594c;
}

/* Verre émeraude — accent menthe déjà présent, éclairci sur 06/08 ; AMC marine profonde. */
html[data-appearance="glass"] .app #home :is(#mode-6, #mode-8) {
  background: #c4ffe5;
  color: #052f4b;
}
html[data-appearance="glass"] #home :is(#mode-6, #mode-8) :is(.mode-number, strong, small, .arrow) {
  color: #052f4b;
}
html[data-appearance="glass"] #home :is(#mode-6, #mode-8) :is(.mode-number, .arrow) {
  color: #052f4b;
}
html[data-appearance="glass"] .app #home :is(#mode-6, #mode-8):is(:hover, :focus-visible) {
  background: #b3f0d5;
}
html[data-appearance="glass"] #home #mode-covered26 {
  background: #052f4b;
  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: #073955;
}

/* Contraste stable : ne pas composer une ancienne transparence de libellé avec
   les nouveaux fonds clairs/foncés. Seules ces trois cartes sont concernées. */
#home :is(#mode-6, #mode-8, #mode-covered26) :is(.mode-number, strong, small, .arrow) {
  opacity: 1;
}

/* CR1658-CONTRASTE-CLASSIQUES-01 : pas de couleur ni de taille nouvelle.
   Retirer uniquement l'ancienne transparence des petites descriptions Crème. */
html:not([data-appearance]) #home :is(#mode-2, #mode-3, #mode-4) small,
html[data-appearance="cream"] #home :is(#mode-2, #mode-3, #mode-4) small {
  opacity: 1;
}

/* Hors accueil : un retour de luminosité de 2,5 %, sans déplacement, uniquement
   dans les menus de choix (ni listes, ni caméra/QR, ni secret, ni chronomètre).
   Les réductions appareil + réglage existant gardent la main. */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="reduce"])
  :is(#two-choice, #three-choice, #four-choice) .mode-card:is(:hover, :focus-visible):not(:disabled) {
    filter: brightness(1.025);
  }
}

/* Seuls les dessins décoratifs flottent : les commandes ne se déplacent pas.
   La carte centrale existante garde sa rotation, avec un flottement renforcé ;
   les deux cartes secondaires l'accompagnent plus discrètement. */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="reduce"]) #home .secret-card {
    animation: home30-float 4.8s ease-in-out infinite;
  }
  html:not([data-motion="reduce"]) #home .left-card {
    animation: home30-left 5.4s ease-in-out infinite;
  }
  html:not([data-motion="reduce"]) #home .right-card {
    animation: home30-right 5.4s ease-in-out -.9s infinite;
  }
}
@keyframes home30-float {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-11px) rotate(-3deg); }
}
@keyframes home30-left {
  0%, 100% { transform: translateY(0) rotate(-14deg); }
  50% { transform: translateY(-5px) rotate(-13deg); }
}
@keyframes home30-right {
  0%, 100% { transform: translateY(0) rotate(13deg); }
  50% { transform: translateY(-5px) rotate(12deg); }
}
html[data-motion="reduce"] #home :is(.secret-card, .mini-card) {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  #home :is(.secret-card, .mini-card) { animation: none !important; }
  #home .mode-card { transition: none !important; }
}