/* ══════════ GUESSINO · LE RELIEF ══════════
   Les boutons ont une vraie épaisseur (une tranche colorée) et s'enfoncent sous le doigt, puis remontent
   avec un petit rebond. Les cartes s'inclinent vers le doigt. Les fiches et les bulles surgissent en 3D.
   Feuille chargée après jeu.css : elle ne fait qu'ajouter. Tout est coupé si le joueur a réduit les animations. */
:root {
  --ressort: cubic-bezier(0.3, 1.7, 0.5, 1);
  --h: 5px;                    /* épaisseur de la tranche */
  --tranche-jaune: color-mix(in srgb, var(--jaune) 66%, #5A2A00);
  --tranche-blanc: color-mix(in srgb, var(--blanc) 68%, #2A2F8F);
  --tranche-rose: color-mix(in srgb, var(--rose) 66%, #5A0030);
  --tranche-tomate: color-mix(in srgb, var(--tomate) 66%, #3A0800);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --ressort: linear(0, 0.36 8%, 0.82 17%, 1.08 26%, 1.14 32%, 1.08 41%, 0.98 54%, 0.99 68%, 1); }
}

/* ── Les boutons en relief ── */
.bouton-principal:not([aria-disabled="true"]):not(.colle),
.bouton-valider, .bouton-indice, .bouton-joker, .carte-jeu,
.mode-btn[aria-checked="true"], .defi-bas .bouton-valider {
  --tranche: var(--tranche-jaune);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), 0 var(--h) 0 var(--tranche), 0 calc(var(--h) + 3px) 0 var(--ombre);
  transition: translate 420ms var(--ressort), scale 420ms var(--ressort), box-shadow 140ms ease-out, transform 480ms var(--ressort);
}
.bouton-indice, .carte-jeu, .mode-btn[aria-checked="true"] { --tranche: var(--tranche-blanc); }
.bouton-joker { --tranche: var(--tranche-rose); }
.mode-btn[data-mode="expert"][aria-checked="true"] { --tranche: var(--tranche-tomate); }
.mode-btn[data-mode="facile"][aria-checked="true"] { --tranche: var(--tranche-jaune); }
.bouton-principal:not([aria-disabled="true"]):not(.colle) { --h: 7px; }
.carte-jeu { --h: 6px; }
.mode-btn[aria-checked="true"] { --h: 4px; }

/* Sous le doigt : le bouton descend de toute sa tranche, vite ; il remonte en rebondissant. */
.bouton-principal:not([aria-disabled="true"]):not(.colle):active,
.bouton-valider:active, .bouton-indice:active, .bouton-joker:active, .carte-jeu:active,
.mode-btn[aria-checked="true"]:active {
  translate: 0 var(--h); scale: .985;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), 0 0 0 var(--tranche), 0 2px 0 var(--ombre);
  transition-duration: 70ms; transition-timing-function: ease-out;
}

/* Les petits boutons : même rebond au relâchement. */
.outil, .bouton-suivant, .mode-btn, .case, .pourquoi summary::before {
  transition: scale 380ms var(--ressort), rotate 380ms var(--ressort), translate 380ms var(--ressort), opacity 200ms ease, transform 480ms var(--ressort);
}
.outil:active { scale: .8; rotate: -10deg; transition-duration: 70ms; }
.bouton-suivant:active, .mode-btn:not([aria-checked="true"]):active { scale: .94; translate: 0 2px; transition-duration: 70ms; }
.case:active { scale: .92; transition-duration: 70ms; }
.jeton-btn .pile { transition: translate 380ms var(--ressort), rotate 380ms var(--ressort), scale 380ms var(--ressort); }
.jeton-btn:active .pile { scale: .88; translate: 0 4px; transition-duration: 70ms; }

/* ── Les cartes qui s'inclinent vers le doigt (les angles viennent de decor.js) ── */
.incline {
  transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
}
.acc-defi.incline, .acc-pochette.incline, .carte-r.incline, .savais.incline {
  transition: transform 480ms var(--ressort);
}
.incline.touchee { transition-duration: 90ms !important; transition-timing-function: ease-out !important; }

/* ── Les fiches surgissent en 3D, le voile arrive en fondu ── */
.fiche[open] { animation: fiche-surgit 460ms var(--ressort) both; }
.fiche[open]::backdrop { animation: voile-arrive 220ms ease-out both; }
@keyframes fiche-surgit {
  from { opacity: 0; transform: perspective(900px) rotateX(-22deg) translateY(36px) scale(.84); }
  35% { opacity: 1; }
  to { opacity: 1; transform: perspective(900px) rotateX(0deg) translateY(0) scale(1); }
}
@keyframes voile-arrive { from { opacity: 0; } to { opacity: 1; } }

/* La bulle bascule du haut de l'écran, comme un panneau. */
.bulle { --tranche: var(--tranche-jaune); transform-origin: 50% 0; box-shadow: 0 4px 0 var(--tranche), 0 7px 0 var(--ombre); }
.bulle:not([hidden]) { animation: bulle-bascule 420ms var(--ressort) both; }
@keyframes bulle-bascule {
  from { opacity: 0; transform: perspective(600px) rotateX(-80deg) translateY(-14px); }
  40% { opacity: 1; }
  to { opacity: 1; transform: perspective(600px) rotateX(0deg) translateY(0); }
}

/* Les étincelles qui partent d'un bouton touché (posées par decor.js). */
.etincelle {
  position: fixed; z-index: 60; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 3px; background: var(--jaune); border: 2px solid var(--encre);
  pointer-events: none;
}
.etincelle:nth-child(3n) { background: var(--rose); border-radius: 50%; }
.etincelle:nth-child(3n + 1) { background: var(--blanc); }

@media (hover: hover) {
  .bouton-principal:not([aria-disabled="true"]):not(.colle):hover, .bouton-valider:hover, .bouton-indice:hover,
  .bouton-joker:hover, .carte-jeu:hover { translate: 0 -2px; }
  .outil:hover { scale: 1.1; }
}

@media (prefers-reduced-motion: reduce) {
  .bouton-principal, .bouton-valider, .bouton-indice, .bouton-joker, .carte-jeu, .mode-btn, .outil, .bouton-suivant, .case, .jeton-btn .pile, .incline { transition: none !important; }
  .incline { transform: none; }
  .fiche[open], .fiche[open]::backdrop, .bulle:not([hidden]) { animation: none; }
}
.instantane .fiche[open], .instantane .fiche[open]::backdrop, .instantane .bulle:not([hidden]) { animation: none; }

/* ══════════ LISIBILITÉ ══════════
   Hugo (14/11) : on garde les couleurs et les pointillés d'origine ; on garde seulement les textes plus gros et plus gras.
   (Essai abandonné : panneaux pleins et stickers colorés pour les boutons secondaires.) */
.bouton-suivant, .mode-btn:not([aria-checked="true"]), .bouton-principal[aria-disabled="true"] { font-weight: 700; }
.fiche .bouton-suivant { border-color: currentColor; color: inherit; }
.sem-texte, .acc-mode-texte, .rappel-pari { color: var(--texte); opacity: .95; }
.acc-gratuit { font-size: 14px; font-weight: 600; color: var(--texte); opacity: .9; }
.acc-mode-texte { font-size: 15px; }
.face-aide { font-weight: 700; font-size: 15px; }

/* ══════════ REFONTE DE L'ACCUEIL (choix d'Hugo, 15/11 : piste A) ══════════
   Le cerveau du joueur, en volume, est la chose colorée de l'écran ; le nom du jeu passe dessous, en petit.
   Le menu est une barre en bas, toujours sous le pouce. Les icônes dessinées remplacent les émojis. */
.ic { width: 24px; height: 24px; flex: none; fill: none; stroke: var(--encre); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.fj { fill: var(--jaune); } .fr { fill: var(--rose); } .ft { fill: var(--tomate); } .fm { fill: #7CE0B5; } .fi { fill: #8FB8FF; }
.fv { fill: #C9A3FF; } .fb { fill: var(--blanc); } .fc { fill: #FFF4D6; } .fe { fill: var(--encre); }

.b3d-scene { display: block; aspect-ratio: 132 / 122; perspective: 560px; }
.b3d { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; animation: b3d-pivote 6s ease-in-out infinite; }
.b3d svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: translateZ(calc(var(--k) * -2.4px)); }
@keyframes b3d-pivote { 0%, 100% { transform: rotateY(-24deg) rotateX(8deg); } 50% { transform: rotateY(24deg) rotateX(-5deg); } }

.acc-heros { display: grid; justify-items: center; gap: 2px; margin-top: 4px; text-align: center; }
.heros-cerveau { display: block; transition: scale 380ms var(--ressort); }
.heros-cerveau:active { scale: .94; transition-duration: 70ms; }
.heros-mot { margin: -6px 0 0; font: italic 900 30px/1 var(--police-titre); color: #FFF4D6; text-shadow: 0 3px 0 var(--encre); }
.heros-mot i { color: var(--jaune); font-style: inherit; }
.heros-niv { margin: 8px 0 4px; font: 600 14px/1.2 var(--police-texte); color: var(--texte-doux); }
.heros-niv b { margin-right: 6px; font: italic 900 17px/1 var(--police-titre); color: var(--jaune); }
.heros-barre { width: min(220px, 62%); height: 14px; }
.heros-pts { margin: 3px 0 0; font: 600 12px/1.2 var(--police-texte); color: var(--texte-doux); }
.planche[data-ecran="accueil"] .acc-logo, .acc-liens { display: none; }
.compte-btn .cerveau-niveau { display: none; }
.compte-btn { min-height: 34px; padding: 0 12px; border: 2px solid var(--trait); border-radius: 17px; }
.compte-btn small { font-size: 13px; }

.barre-menu {
  position: fixed; z-index: 30; left: 50%; bottom: 0; translate: -50% 0;
  width: min(100%, 480px); height: calc(66px + env(safe-area-inset-bottom, 0px));
  padding: 0 6px env(safe-area-inset-bottom, 0px); display: flex;
  background: color-mix(in srgb, var(--fond) 62%, #000); border-top: 2px solid var(--trait);
}
.barre-menu[hidden] { display: none; }
.bm-onglet { flex: 1; min-width: 0; display: grid; justify-items: center; align-content: center; gap: 3px; font: 600 11px/1 var(--police-texte); color: var(--texte-doux); }
.bm-onglet .ic { width: 28px; height: 28px; border-radius: 50%; transition: translate 420ms var(--ressort), scale 420ms var(--ressort); }
.bm-onglet[aria-current="page"] { color: var(--texte); font-weight: 700; }
.bm-onglet[aria-current="page"] .ic { background: var(--jaune); box-shadow: 0 0 0 7px var(--jaune), 0 0 0 9px var(--blanc), 0 6px 0 9px var(--ombre-pleine); translate: 0 -14px; }
.bm-onglet:active .ic { scale: .86; transition-duration: 70ms; }
.planche[data-ecran="accueil"], .planche[data-ecran="cerveau"], .planche[data-ecran="album"], .planche[data-ecran="boutique"], .planche[data-ecran="stats"] { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
#ecran-album .pied, #ecran-cerveau .pied, #ecran-boutique .pied, #ecran-stats .pied { display: none; }

/* Les cartes et les articles : un dessin, plus d'émoji */
.cr-picto, .carte-emoji { display: grid; place-items: center; --pa: var(--tomate); --pb: var(--jaune); --pc: var(--rose); --pw: var(--blanc); --pe: var(--encre); }
.cr-picto svg { width: 58%; max-width: 110px; aspect-ratio: 1; height: auto; }
.carte-emoji svg { width: 34px; height: 34px; }
.bq-emoji, .alb-bientot-emoji { background: var(--dos); }
.bq-emoji .ic, .alb-bientot-emoji .ic { width: 32px; height: 32px; }
.bq-bientot .bq-emoji { background: rgba(255, 255, 255, .9); }
@media (prefers-reduced-motion: reduce) { .b3d { animation: none; transform: rotateY(-14deg) rotateX(6deg); } .bm-onglet .ic, .heros-cerveau { transition: none; } }
.instantane .b3d { animation: none; transform: rotateY(-14deg) rotateX(6deg); }

/* ══════════ COULEUR DES ÉCRITURES (Hugo, 15/11 : « pas tout le temps du blanc ») ══════════
   Seulement les mots importants, jamais un paragraphe entier : les mots en gras, les titres de bloc,
   la réponse et l'onglet ouvert. Les couleurs sont celles du site (jaune des jetons, menthe, crème du logo).
   Pour revenir en arrière : supprimer ce bloc. */
:root { --menthe: #8FE8C2; --creme: #FFF4D6; }   /* menthe un peu claire : lisible aussi sur le bleu */
.question .quoi strong, .rappel-pari b, .acc-etat b, .la-reponse strong { color: var(--jaune); }
.sem-texte b, .acc-gratuit { color: var(--menthe); }
.acc-gratuit { opacity: 1; }
.acc-titre, .recap h2, .partage h2, .demain h2 { color: var(--creme); }
.bm-onglet[aria-current="page"] { color: var(--jaune); }

/* ══════════ SON ET THÈME AUSSI SUR L'ACCUEIL (15/11) ══════════ */
[data-outil="son"][aria-pressed="false"] .son-ondes, [data-outil="son"][aria-pressed="true"] .son-coupe { display: none; }
.acc-haut { flex-wrap: wrap; row-gap: 6px; }
.acc-haut .outil:not(.compte-btn) { width: 30px; height: 40px; }
.acc-haut .compte-btn { padding: 0 9px; }
.acc-haut .acc-compteurs { gap: 6px; }
.acc-haut .outil svg { width: 22px; height: 22px; }
.acc-haut .compteur > span:not(.jeton-mini) { display: none; }   /* le jeton et l'étoile dessinés suffisent : on gagne la place des 2 boutons */
.acc-haut .acc-compteurs { margin-right: auto; }
.acc-haut { justify-content: flex-end; }