body {
  margin: 0;
  background: #e6e9f3; /* gris clair légèrement bleuté : fait ressortir l'app et les cases blanches */
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* l'app sous l'en-tête et le fil d'Ariane (mise à l'échelle par js/layout.js) */
.app {
  margin: 14px 24px 24px;
}
.app {
  transform-origin: top center; /* mise à l'échelle par js/layout.js */
  flex-shrink: 0;
  font-family: "Outfit", system-ui, sans-serif;
  background: #f6f7fb;
  border-radius: 16px;
  padding: 12px;
  color: #1b1d36;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.hd {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.pill {
  font-size: 12px;
  background: #fff3cf; /* crème du logo */
  color: #6b4a00;
  padding: 3px 9px;
  border-radius: 999px;
}
a.tb {
  text-decoration: none;
}
.tb {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
  font-size: 13px;
  color: #3b3f73;
  background: #fff;
  border: 1px solid #e3e6f2;
  padding: 5px 9px;
  border-radius: 9px;
  cursor: pointer;
}
.bdg {
  font-size: 13px;
  font-weight: 500;
  padding: 3px 11px;
  border-radius: 999px;
  background: #fff3cf;
  color: #8a6a1f;
  transition:
    background 0.3s,
    color 0.3s;
  white-space: nowrap;
}
/* ---------- Jauge du combo = cadre de la grille ----------
   Le contour de la grille (5 px) se remplit à chaque mot trouvé pendant un combo, puis se vide
   avec le temps restant (js/game.js règle stroke-dashoffset). On le voit sans quitter la grille des yeux. */
.cadre {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  overflow: visible;
  color: #f2a93b; /* couleur du halo et de la tête (réglée par js/game.js) */
  opacity: 0;
  transition: opacity 0.4s;
}
.cadre.actif {
  opacity: 1;
}
.cadre-fond {
  fill: none;
  stroke: currentColor;
  stroke-opacity: 0.12; /* piste discrète : le tour complet */
  stroke-width: 2.5;
}
.cadre-j {
  fill: none;
  stroke: url(#cadre-deg);
  stroke-width: 2.5; /* discret (retour utilisateur : la jauge prenait trop de place) */
  stroke-linecap: round;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100; /* vide */
  filter: drop-shadow(0 0 2.5px currentColor);
}
.cadre-tete {
  fill: #fff;
  stroke: currentColor;
  stroke-width: 2;
  filter: drop-shadow(0 0 3px currentColor);
  transition: opacity 0.3s;
}
.cadre.recharge .cadre-j {
  animation: cadre-elan 0.5s cubic-bezier(0.3, 1.4, 0.5, 1);
}
@keyframes cadre-elan {
  40% {
    stroke-width: 4;
  }
}
.cadre.x5 .cadre-j,
.cadre.x5 .cadre-tete {
  animation: cadre-x5 1.1s ease-in-out infinite;
}
@keyframes cadre-x5 {
  50% {
    filter: drop-shadow(0 0 6px currentColor);
  }
}
.clue {
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #e3e6f2;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  color: #1b1d36;
}
.gw {
  position: relative;
  margin: 5px; /* place pour l'anneau-jauge du combo autour de la grille */
  border-radius: 10px;
  transition: box-shadow 0.4s;
}
.g {
  display: grid;
  grid-template-columns: repeat(14, 44px);
  grid-auto-rows: 44px;
  gap: 2px;
  background: #dce0ee;
  padding: 3px;
  border-radius: 10px;
}
.c {
  position: relative;
  background: #fff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 500;
  color: #5b63e6;
  cursor: pointer;
  user-select: none;
  transition:
    color 0.3s,
    background 0.2s;
}
.d {
  background: #eef0ff;
  flex-direction: column;
  align-items: stretch;
  cursor: default;
}
.dp {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 1px 2px;
  cursor: pointer;
  color: #3b3f73;
  transition:
    background 0.2s,
    color 0.2s;
}
.dp span {
  display: block;
  max-width: 100%;
  font-size: var(--clue, 10px); /* taille commune calculée par fit() dans js/game.js */
  line-height: 1.05;
  text-transform: uppercase;
  hyphens: auto;
  overflow-wrap: anywhere;
}
.g.nobreak .dp span {
  hyphens: manual;
  overflow-wrap: normal;
}
/* trait entre deux définitions d’une même case (« ~ » : même si une flèche est insérée entre les deux) */
.dp ~ .dp {
  border-top: 1.5px solid #8f97d6;
}
.dp:first-child {
  border-radius: 4px 4px 0 0;
}
.dp:last-of-type {
  border-radius: 0 0 4px 4px;
}
.ar,
.ba {
  position: absolute;
  width: 0;
  height: 0;
  z-index: 4;
}
.ar.r {
  right: -5px;
  margin-top: -4px;
  border-left: 5px solid #5b63e6;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.ar.dn {
  bottom: -5px;
  left: 50%;
  margin-left: -4px;
  border-top: 5px solid #5b63e6;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.ba {
  top: 3px;
  left: 3px;
}
.ba.dn {
  border-top: 5px solid #5b63e6;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.ba.r {
  border-left: 5px solid #5b63e6;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
/* définition active : jaune, comme la case active (tout ce qui concerne le mot en cours est jaune) */
.dp.on {
  background: #ffcb45;
  color: #1b1d36;
}
.dp.done {
  color: #b3b8d6;
}
.c.w {
  background: #fff3cf;
}
.c.cur {
  background: #ffcb45;
}
.c.ok {
  color: #1b1d36;
}
.c.rv {
  color: #e0742b;
}
.c.l.fin {
  background: #e7f8ee;
}
.lt {
  display: inline-block;
}
@keyframes pop {
  35% {
    transform: translateY(-8px) scale(1.35);
  }
  70% {
    transform: translateY(1px) scale(0.94);
  }
  100% {
    transform: none;
  }
}
.pop .lt {
  animation: pop 0.55s cubic-bezier(0.3, 1.4, 0.5, 1) both;
}
@keyframes tp {
  50% {
    transform: scale(1.14);
  }
}
.tp .lt {
  animation: tp 0.14s ease-out;
}
.sh {
  position: absolute;
  pointer-events: none;
  border-radius: 6px;
  overflow: hidden;
  z-index: 5;
}
.sh::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 45%;
  left: -45%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
  animation: sw 0.75s ease-out forwards;
}
.sh.v::after {
  width: auto;
  left: 0;
  right: 0;
  height: 45%;
  top: -45%;
  bottom: auto;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.9), transparent);
  animation: swv 0.75s ease-out forwards;
}
@keyframes sw {
  to {
    left: 110%;
  }
}
@keyframes swv {
  to {
    top: 110%;
  }
}
.pt {
  position: absolute;
  pointer-events: none;
  z-index: 6;
}
.tt {
  position: absolute;
  z-index: 7;
  pointer-events: none;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: #1b1d36;
  padding: 5px 12px;
  border-radius: 99px;
  white-space: nowrap;
}
.pts {
  position: absolute;
  z-index: 7;
  pointer-events: none;
  font-size: 18px;
  font-weight: 500;
  color: #c98500;
}
.ov {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 8;
  background: rgba(246, 247, 251, 0.8);
  border-radius: 10px;
  opacity: 0;
  transition: opacity 0.45s;
  pointer-events: none;
}
.ov.on {
  opacity: 1;
  pointer-events: auto;
}
.card {
  background: #fff;
  border-radius: 16px;
  padding: 20px 28px;
  text-align: center;
  border: 1px solid #e3e6f2;
  transform: scale(0.85);
  transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.ov.on .card {
  transform: scale(1);
}
#k {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  left: 0;
  top: 0;
  border: 0;
  padding: 0;
}
/* Anciens styles inline de index.html */
/* Logo compact dans la barre du jeu : les tuiles I (jaune) et F (crème) seules */
.mini-logo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: #1b1d36;
  font-family: "Fredoka", "Outfit", sans-serif;
}
.ml-paire {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(59, 63, 115, 0.12);
}
.ml-t {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}
.ml-i {
  background: #ffcb45;
}
.ml-f {
  background: #fff3cf;
}
.ml-coin {
  position: absolute;
  top: 3px;
  left: 4px;
  border-top: 4px solid #1b1d36;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
}
.mini-logo:hover .ml-paire {
  transform: rotate(-3deg);
  transition: transform 0.2s;
}
.score {
  margin-left: auto;
  font-size: 14px;
  font-weight: 500;
}
.tb-static {
  cursor: default;
}
#t {
  font-variant-numeric: tabular-nums;
}
.count {
  margin-left: auto;
  font-size: 13px;
  color: #6b7096;
  white-space: nowrap;
}
#ci {
  font-size: 17px;
  color: #1b1d36;
}
#cn {
  margin-left: auto;
  font-size: 13px;
  color: #8a8fb3;
}
.card-title {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 6px;
}
#st {
  font-size: 15px;
  color: #6b7096;
  margin-bottom: 14px;
}
#br {
  margin: 0 auto;
}
/* Bouton Solution : état « confirmation » et boutons désactivés en fin de partie */
.tb.confirm {
  background: #fff3cf;
  border-color: #e0742b;
  color: #9a3a10;
}
.tb:disabled {
  opacity: 0.45;
  cursor: default;
}
/* Bouton actif (mode zen) */
.tb.on {
  background: #e7f8ee;
  border-color: #3cc48b;
  color: #1f7a52;
}
/* Écran de pause : opaque, pour ne pas chercher les mots pendant la pause */
#pv {
  background: #f6f7fb;
}
.card-sub {
  font-size: 15px;
  color: #6b7096;
  margin-bottom: 14px;
}
#bres {
  margin: 0 auto;
}
/* Mode zen : pas de chrono ni de combo */
.zen #tbox,
.zen #bp,
.zen #bdg,
.zen .cadre {
  display: none;
}
.zen .count {
  margin-left: auto;
}
/* Plein écran : la grille seule, agrandie au maximum (js/layout.js) */
/* on garde la ligne du combo (badge coloré + jauge + compteur) et le bouton pour sortir */
.seul-focus {
  display: none;
}
.focus .seul-focus {
  display: inline-flex;
}
.focus .hd:not(.hd-combo),
.focus .clue {
  display: none;
}
/* Mot en plusieurs parties (TAM-TAM) : pointillé entre les parties, dans l'espace entre deux cases */
.c.sep-l::before,
.c.sep-t::after {
  content: "";
  position: absolute;
  z-index: 3;
  pointer-events: none;
}
.c.sep-l::before {
  left: -2px;
  top: 10%;
  bottom: 10%;
  border-left: 2px dashed #5b63e6;
}
.c.sep-t::after {
  top: -2px;
  left: 10%;
  right: 10%;
  border-top: 2px dashed #5b63e6;
}
/* ---------- Loader au chargement d'une grille : tuiles I (jaune) et F (crème) qui sautent ---------- */
.chargement {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: #e6e9f3;
  transition: opacity 0.45s;
}
.chargement.fini {
  opacity: 0;
  pointer-events: none;
}
.chargement p {
  margin: 0;
  font-family: "Outfit", sans-serif;
  color: #6b7096;
}
.ch-tuiles {
  display: flex;
  gap: 5px;
  padding: 6px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(59, 63, 115, 0.14);
}
.ch-t {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 38px "Fredoka", "Outfit", sans-serif;
  color: #1b1d36;
  animation: saut 1.1s cubic-bezier(0.3, 0, 0.3, 1) infinite;
}
.ch-i {
  background: #ffcb45;
}
.ch-f {
  background: #fff3cf;
  animation-delay: 0.55s;
}
.ch-coin {
  position: absolute;
  top: 8px;
  left: 9px;
  border-top: 8px solid #1b1d36;
  border-left: 5.5px solid transparent;
  border-right: 5.5px solid transparent;
}
@keyframes saut {
  0%,
  55%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  20% {
    transform: translateY(-16px) rotate(-6deg);
  }
  38% {
    transform: translateY(2px) rotate(2deg) scaleY(0.94);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ch-t {
    animation: none;
  }
}
/* Mot faux pendant un combo : le cadre clignote en rouge */
.cadre.perte .cadre-j,
.cadre.perte .cadre-tete {
  animation: perte-j 0.6s ease-out;
}
@keyframes perte-j {
  0%,
  60% {
    stroke: #e5484d;
    filter: drop-shadow(0 0 8px #e5484d);
  }
}

/* ==================== Version mobile (js/mobile.js) ====================
   Écran tactile : l'app occupe tout l'écran, grille zoomée qui défile, clavier intégré en bas. */
.mobile {
  padding: 0;
  height: 100dvh;
  overflow: hidden;
  background: #f6f7fb;
  -webkit-tap-highlight-color: transparent;
}
.mobile .app {
  width: 100%;
  height: 100dvh;
  box-sizing: border-box;
  border-radius: 0;
  padding: max(8px, env(safe-area-inset-top)) 8px max(6px, env(safe-area-inset-bottom));
  gap: 7px;
  align-items: stretch;
  transform: none !important;
  margin: 0 !important;
}
.mobile .c,
.mobile .dp,
.mobile .tb,
.mobile .touche {
  touch-action: manipulation; /* pas de zoom au double tap, pas de délai */
}
/* En-tête compact : logo, Force, score, chrono, pause, menu */
.mobile .hd:not(.hd-combo) {
  position: relative;
  gap: 5px;
}
.mobile .hd .tb {
  padding: 7px 9px;
  font-size: 15px;
}
.mobile #bmenu {
  margin-left: auto;
}
.mobile .score {
  font-size: 15px;
}
.menu {
  display: none;
}
.mobile .menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  min-width: 190px;
  background: #fff;
  border: 1px solid #e3e6f2;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(27, 29, 54, 0.16);
  opacity: 0;
  transform: translateY(-6px) scale(0.97);
  transform-origin: top right;
  pointer-events: none;
  transition:
    opacity 0.18s,
    transform 0.18s;
}
.mobile .menu.on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.mobile .menu .tb {
  border: 0;
  justify-content: flex-start;
  gap: 10px;
  padding: 11px 12px;
  font-size: 16px;
  border-radius: 10px;
}
.mobile .menu .tb i {
  font-size: 19px;
}
.mobile .menu .tb.on {
  background: #fff3cf;
  color: #6b4a00;
}
.mobile .seul-focus {
  display: none !important;
}
/* Barre de définition : plus grande, sur 2 lignes si besoin, avec mot précédent / suivant */
.mobile .clue {
  font-size: 16px;
  line-height: 1.2;
  min-height: 50px;
  padding: 4px;
  gap: 6px;
}
.mobile #ct {
  flex: 1;
}
.mobile #cn {
  font-size: 12px;
  white-space: nowrap;
}
.mobile #ci {
  font-size: 20px;
  padding: 6px 2px;
  cursor: pointer;
}
.nav-mot {
  display: none;
}
.mobile .nav-mot {
  display: inline-flex;
  border: 0;
  background: #f1f3fa;
  padding: 10px 7px;
  font-size: 18px;
  flex-shrink: 0;
}
/* Grille : zone qui défile, grille zoomée à l'intérieur */
.mobile .gzo {
  position: relative;
  flex: 1;
  min-height: 0;
}
.mobile .gz {
  position: absolute;
  inset: 9px; /* place pour l'anneau-jauge du combo autour */
  overflow: auto;
  display: flex;
  align-items: safe center;
  scrollbar-width: none;
  overscroll-behavior: contain;
}
.mobile .gz::-webkit-scrollbar {
  display: none;
}
.mobile .gzi {
  flex-shrink: 0;
  margin: 0 auto;
}
.mobile .gw {
  margin: 0;
  transform-origin: 0 0;
  width: max-content;
}
.mobile .ov {
  border-radius: 12px;
}
.mobile .loupe {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 6;
  padding: 9px;
  font-size: 20px;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(27, 29, 54, 0.15);
}
/* Clavier intégré */
.clavier {
  display: none;
}
.mobile .clavier {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 2px;
  user-select: none;
  -webkit-user-select: none;
}
.mobile .rang {
  display: flex;
  gap: 5px;
  justify-content: center;
}
.mobile .touche {
  flex: 1 1 0;
  max-width: 52px;
  height: 50px;
  padding: 0;
  font-family: "Fredoka", "Outfit", system-ui, sans-serif;
  font-size: 21px;
  font-weight: 500;
  color: #1b1d36;
  background: #fff;
  border: 0;
  border-radius: 9px;
  box-shadow: 0 1px 0 #d3d7e6;
  cursor: pointer;
  transition:
    background 0.08s,
    transform 0.08s;
}
.mobile .touche:active {
  background: #ffcb45;
  transform: scale(0.94);
}
.mobile .touche.efface {
  flex-grow: 1.6;
  max-width: 80px;
  background: #e6e9f3;
  font-size: 22px;
}
.mobile .rang #bj {
  flex: 1.6 1 0;
  max-width: 80px;
  height: 50px;
  justify-content: center;
  padding: 0 4px;
  gap: 3px;
  font-size: 0; /* on garde l'icône et le nombre, pas le mot « Joker » */
  border: 0;
  background: #fff3cf;
  color: #6b4a00;
  box-shadow: 0 1px 0 #e9d59a;
}
.mobile .rang #bj i,
.mobile .rang #bj #jn {
  font-size: 19px;
}
/* Téléphone à l'horizontale : clavier à droite de la grille */
.mobile.paysage .app {
  display: grid;
  grid-template-columns: 1fr minmax(0, 330px);
  grid-template-rows: auto auto auto 1fr;
  column-gap: 10px;
  row-gap: 5px;
  padding-left: max(8px, env(safe-area-inset-left));
  padding-right: max(8px, env(safe-area-inset-right));
}
.mobile.paysage .app > *:not(.clavier) {
  grid-column: 1;
}
.mobile.paysage .clavier {
  grid-column: 2;
  grid-row: 1 / span 4;
  justify-content: flex-end;
}
.mobile.paysage .touche,
.mobile.paysage .rang #bj {
  height: 42px;
}
.mobile.paysage .clue {
  min-height: 40px;
}

/* ---------- Navigation du site dans la page de jeu ----------
   En plein écran : la grille seule. Sur mobile : la barre du jeu porte le ☰ (js/mobile.js). */
.focus .site-tete,
.focus .fil,
.mobile .site-tete,
.mobile .fil {
  display: none;
}
.mobile #bnav {
  padding: 7px 8px;
  font-size: 17px;
}
/* sur ordinateur, l'en-tête du site porte déjà le logo et le retour à l'accueil */
body:not(.mobile):not(.focus) .hd .mini-logo,
body:not(.mobile):not(.focus) #bh {
  display: none;
}

/* Paillettes du combo x5 (js/effects.js, poussiereOr) */
.pa {
  position: absolute;
  pointer-events: none;
  z-index: 10;
  will-change: transform, opacity;
}
.pa.etoile {
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}