@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700&display=swap");
/* ===== JEDEMO – Design responsive (iPhone-first) ===== */
*{ box-sizing:border-box; }
html,body{ height:100%; }

:root{
  --bgA:#e9eef7;
  --bgB:#f7f3ef;
  --card:#ffffff;
  --text:#0f172a;
  --muted:rgba(15,23,42,.65);
  --line:rgba(15,23,42,.10);
  --shadow:0 18px 45px rgba(15,23,42,.16);
  --radius:22px;

  --primary:#1f7aff;
  --primary2:#2b6cff;

  --ok:#1b7a3a;
  --ko:#b3261e;
}

body{
  margin:0;
  padding:18px;
  display:flex;
  justify-content:center;
  align-items:center;
  background:
    radial-gradient(1200px 500px at 20% 10%, rgba(31,122,255,.18), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(255,170,70,.18), transparent 55%),
    linear-gradient(135deg, var(--bgA), var(--bgB));
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
}

.app{
  width:100%;
  max-width:720px;
}

.card{
  width:100%;
  background:var(--card);
  border:1px solid rgba(15,23,42,.08);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* ===== Header / Logo ===== */
.header{
  display:flex;
  justify-content:center;
  padding-top:4px;
}
.logo-container{ display:flex; justify-content:center; align-items:center; }

.logo-img{
  width:160px;
  max-width:68vw;
  height:auto;
  filter: drop-shadow(0 10px 20px rgba(15,23,42,.20));
  animation: logoFloat 3.2s ease-in-out infinite;
}
@keyframes logoFloat{
  0%{ transform:translateY(0); }
  50%{ transform:translateY(-5px); }
  100%{ transform:translateY(0); }
}

/* ===== Mot ===== */
.zone-mot{
  border-radius:16px;
  background: linear-gradient(180deg, rgba(15,23,42,.92), rgba(15,23,42,.86));
  padding:12px 10px;
  border:1px solid rgba(255,255,255,.08);
}
.zone-mot__contenu{
  display:flex;
  gap:8px;
  justify-content:space-between;
  align-items:center;
}
.zone-mot__contenu span{
  flex:1;
  text-align:center;
  padding:6px 0;
  border-bottom:2px solid rgba(255,255,255,.14);
  color:#fff;
  letter-spacing:.12em;
  font-weight:900;
  font-size:clamp(1.05rem, 5vw, 1.85rem);
}

/* ===== Feedback ===== */
.feedback{
  min-height:22px;
  text-align:center;
  font-weight:900;
  color:var(--muted);
}
.feedback.ok{ color:var(--ok); }
.feedback.ko{ color:var(--ko); }

/* ===== Infos ===== */
.infos{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
}
.info{
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(15,23,42,.04), rgba(15,23,42,.02));
  border-radius:16px;
  padding:10px 10px;
}
.info__label{
  font-size:.92rem;
  color:var(--muted);
  font-weight:700;
}
.info__value{
  margin-top:4px;
  font-size:1.35rem;
  font-weight:900;
  letter-spacing:.02em;
}

/* ===== Buttons ===== */
.barre-actions{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}
.btn, .btn-secondaire{
  border:0;
  border-radius:14px;
  padding:12px 14px;
  font-weight:900;
  cursor:pointer;
  box-shadow: 0 10px 16px rgba(15,23,42,.10);
  transition: transform 120ms ease, filter 120ms ease;
}
.btn{
  color:#fff;
  background: linear-gradient(180deg, var(--primary), var(--primary2));
}
.btn-secondaire{
  color:var(--text);
  background: linear-gradient(180deg, rgba(15,23,42,.06), rgba(15,23,42,.03));
  border:1px solid var(--line);
  box-shadow:none;
}
.btn:hover, .btn-secondaire:hover{ transform:translateY(-1px); filter:brightness(.98); }
.btn:active, .btn-secondaire:active{ transform:translateY(0); }

/* ===== Panels ===== */
.panel{
  border:1px solid var(--line);
  border-radius:18px;
  padding:12px;
  background:linear-gradient(180deg, rgba(15,23,42,.025), rgba(15,23,42,.015));
}
.panel__title{
  font-weight:900;
  color:rgba(15,23,42,.72);
  font-size:.95rem;
  margin:0 0 10px;
  letter-spacing:.04em;
  text-transform:uppercase;
}

/* ===== Pioche ===== */
.pioche{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:10px;
}
.pioche button{
  padding:12px 6px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.18);
  background:rgba(255,255,255,.85);
  font-size:1.08rem;
  font-weight:900;
  cursor:pointer;
  transition: transform 120ms ease, filter 120ms ease;
}
.pioche button:hover{ transform:translateY(-1px); filter:brightness(.98); }
.pioche button:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
.pioche button.bonne{
  background:linear-gradient(180deg, rgba(27,122,58,.95), rgba(18,102,46,.95));
  border-color:rgba(27,122,58,.95);
  color:#fff;
}
.pioche button.mauvaise{
  background:linear-gradient(180deg, rgba(179,38,30,.95), rgba(135,24,20,.95));
  border-color:rgba(179,38,30,.95);
  color:#fff;
}

/* ===== Mur ===== */
.zone-mur{ padding:12px; }
.mur-wrap{
  position:relative;
  border-radius:16px;
  background: radial-gradient(900px 280px at 50% 0%, rgba(31,122,255,.08), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.35));
  border:1px solid rgba(15,23,42,.10);
  height:300px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  padding:12px 12px 16px;
}

#mur{
  width:100%;
  flex:1;
  display:flex;
  flex-direction:column-reverse; /* nouvelles lignes au-dessus */
  justify-content:flex-start;
}

.ligne-briques{
  width:100%;
  display:flex;
  justify-content:center; /* ligne centrée */
  gap:6px;
  margin-bottom:6px;
}

/* Brique réaliste */
.brique{
  width:54px; height:54px;
  border-radius:12px;
  position:relative;
  display:grid;
  place-items:center;
  user-select:none;
  background:
    linear-gradient(145deg, rgba(255,255,255,.22), rgba(0,0,0,.18)),
    radial-gradient(120% 80% at 30% 20%, rgba(255,255,255,.25), transparent 55%),
    linear-gradient(90deg, rgba(0,0,0,.12) 0 2px, transparent 2px 100%),
    linear-gradient(#b65a32, #8f3f1f);
  border: 2px solid rgba(60, 25, 10, .85);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.22),
    inset 0 -3px 0 rgba(0,0,0,.25),
    inset 2px 0 0 rgba(0,0,0,.18),
    inset -2px 0 0 rgba(255,255,255,.10),
    0 10px 14px rgba(0,0,0,.18);
  opacity:0;
  transform: translateY(18px) rotateX(18deg) scale(.98);
  animation: apparition .35s ease-out forwards;
}

.brique::before{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:10px;
  background:
    radial-gradient(12px 10px at 30% 35%, rgba(0,0,0,.10), transparent 60%),
    radial-gradient(12px 10px at 70% 55%, rgba(0,0,0,.12), transparent 60%),
    radial-gradient(10px 8px at 55% 25%, rgba(255,255,255,.12), transparent 60%);
  pointer-events:none;
  mix-blend-mode:multiply;
  opacity:.8;
}
.brique::after{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:14px;
  background: linear-gradient(180deg, rgba(255,255,255,.40), rgba(0,0,0,.08));
  filter: blur(.3px);
  opacity:.22;
  pointer-events:none;
}
@keyframes apparition{
  to{ opacity:1; transform: translateY(0) rotateX(0) scale(1); }
}

.chateau{
  font-size:2.35rem;
  margin-top:6px;
  filter: drop-shadow(0 10px 12px rgba(15,23,42,.18));
}

.ligne-sol{
  height:2px;
  width:calc(100% - 28px);
  background:rgba(15,23,42,.10);
  margin:10px auto 0;
  border-radius:2px;
}

/* Message sur le mur */
.mur-message{
  width:100%;
  margin:6px 0 10px;
  padding:10px 12px;
  background:rgba(15,23,42,.06);
  border:1px dashed rgba(15,23,42,.22);
  border-radius:14px;
  font-weight:900;
  text-align:center;
}

/* ===== Footer ===== */
.pied{
  text-align:center;
  color:var(--muted);
  line-height:1.25;
}

/* ===== Responsive ===== */
@media (max-width: 430px){
  body{ padding:14px; }
  .card{ padding:16px; border-radius:20px; }
  .infos{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .logo-img{ width:150px; }
  .mur-wrap{ height:280px; }
  .brique{ width:48px; height:48px; }
  .pioche{ gap:9px; }
  .pioche button{ padding:12px 4px; }
}

@media (min-width: 431px) and (max-width: 900px){
  .logo-img{ width:200px; }
}
@media (min-width: 901px){
  .logo-img{ width:240px; }
}


/* ===== Messages de victoire ===== */
.mur-message{
  width:100%;
  margin:8px 0 10px;
  padding:12px 14px;
  background:rgba(15,23,42,.08);
  border:2px dashed rgba(15,23,42,.25);
  border-radius:16px;
  font-weight:900;
  text-align:center;
  animation: popIn .35s ease-out;
}

.mur-message--big{
  font-size:clamp(1.8rem, 7vw, 3rem);
  padding:28px 22px;
  background:linear-gradient(180deg, rgba(31,122,255,.22), rgba(255,255,255,.6));
  border:3px solid rgba(31,122,255,.45);
  text-shadow:0 6px 18px rgba(31,122,255,.45);
}

@keyframes popIn{
  from{ transform:scale(.9); opacity:0; }
  to{ transform:scale(1); opacity:1; }
}


/* ===== Fix visibilité logo ===== */
.logo-container{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:10px 0 6px;
}

.logo-img{
  display:block;                 /* évite les bugs inline */
  width:min(260px, 78vw);
  height:auto;
  border-radius:14px;
  background:rgba(15,23,42,.04); /* si PNG transparent */
  outline:1px solid rgba(15,23,42,.10);
}


/* ===== Slogan sous le logo ===== */
.slogan{
  margin-top:6px;
  margin-bottom:6px;
  text-align:center;
  font-weight:800;
  letter-spacing:.08em;
  font-size:clamp(.9rem, 3.5vw, 1.1rem);
  color:rgba(15,23,42,.75);
}


/* ===== Position slogan entre logo et mot ===== */
.slogan{
  margin:10px 0 8px;
  text-align:center;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(15,23,42,.65);
}


/* ===== Bloc MOT couleur BRIQUE ===== */
.zone-mot{
  background: linear-gradient(180deg, #b65a32, #8f3f1f);
  border:2px solid rgba(60,25,10,.9);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.25),
    inset 0 -3px 0 rgba(0,0,0,.25),
    0 10px 18px rgba(0,0,0,.25);
}

.zone-mot__contenu span{
  border-bottom:2px solid rgba(255,255,255,.35);
  color:#fff;
}

/* ===== Bloc PIOCHE couleur BLEU LOGO ===== */
.panel[aria-label="Pioche de lettres"]{
  background: linear-gradient(180deg, rgba(31,122,255,.15), rgba(31,122,255,.05));
  border:2px solid rgba(31,122,255,.35);
}

.pioche button{
  background: linear-gradient(180deg, #1f7aff, #2b6cff);
  color:#fff;
  border:1px solid rgba(0,0,0,.15);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 6px 10px rgba(31,122,255,.35);
}

.pioche button:hover{
  filter:brightness(1.05);
}

.pioche button:disabled{
  background: linear-gradient(180deg, rgba(31,122,255,.45), rgba(31,122,255,.35));
  color:rgba(255,255,255,.7);
}

.pioche button.bonne{
  background: linear-gradient(180deg, #1b7a3a, #13622d);
}

.pioche button.mauvaise{
  background: linear-gradient(180deg, #b3261e, #871814);
}


/* ===== Texte nombre de cases cachées ===== */
.texte-cases{
  text-align:center;
  margin:4px 0 10px;
  font-weight:700;
  font-size:.95rem;
  color:rgba(15,23,42,.65);
}


/* ===== Fix visibilité du slogan ===== */
.slogan{
  color:#1f7aff;
  font-weight:900;
  text-shadow:0 2px 10px rgba(31,122,255,.20);
}


/* ===== Message final Champion des mots ===== */
.mur-message--big{
  text-align:center;
  line-height:1.3;
}

.mur-message--big::first-line{
  font-size:3.2rem;
}


/* ===== Messages sur le mur : overlay (toujours visibles) ===== */
.mur-wrap{ position:relative; } /* sécurité */

.mur-message--overlay{
  position:absolute;
  left:14px;
  right:14px;
  top:14px;
  z-index:5;
}

/* Le message final est centré verticalement */
.mur-message--big.mur-message--overlay{
  top:50%;
  transform:translateY(-50%);
}

.mur-message--overlay{ white-space:pre-line; }



/* Sur mobile : mur en bas */
@media (max-width: 640px){
  .jeu-container{
    grid-template-columns: 1fr;
  }
  .mur-wrap{
    order:2;
    margin-top:12px;
  }
}


/* ===== Disposition : mur à droite (desktop/tablette) ===== */
.jeu-container{
  display:grid;
  grid-template-columns: 1fr minmax(220px, 34%);
  gap:14px;
  align-items:start;
}

.zone-jeu{ min-width:0; }
.zone-mur-col{ min-width:0; }

/* Sur mobile : mur en dessous */
@media (max-width: 640px){
  .jeu-container{ grid-template-columns: 1fr; }
  .zone-mur-col{ margin-top:12px; }
}


/* ===== Message sous le mur ===== */
.mur-message-zone{
  margin-top:10px;
  display:flex;
  justify-content:center;
}

.mur-message--cartouche{
  max-width:90%;
  padding:14px 16px;
  background:#ffffff;
  border-radius:18px;
  border:2px solid rgba(31,122,255,.4);
  box-shadow:0 12px 24px rgba(15,23,42,.2);
  font-weight:900;
  text-align:center;
  white-space:pre-line;
  line-height:1.25;
  color:#0f172a;
}


/* ===== Aperçu 3D du château (4 murs) dans la cartouche ===== */
.castle3d{
  width: 140px;
  height: 90px;
  margin: 4px auto 12px;
  position: relative;
  perspective: 700px;
  filter: drop-shadow(0 12px 18px rgba(15,23,42,.18));
}

.wall3d{
  position:absolute;
  width: 58px;
  height: 38px;
  transform-style: preserve-3d;
  opacity: .22;
  transition: opacity 260ms ease, transform 260ms ease;
}

/* Placement isométrique */
.wall3d.w1{ left: 10px; top: 34px; transform: rotateX(55deg) rotateZ(-45deg); }
.wall3d.w2{ left: 70px; top: 34px; transform: rotateX(55deg) rotateZ(-45deg); }
.wall3d.w3{ left: 40px; top: 12px; transform: rotateX(55deg) rotateZ(-45deg); }
.wall3d.w4{ left: 40px; top: 56px; transform: rotateX(55deg) rotateZ(-45deg); }

.wall3d::before,
.wall3d::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:10px;
}

.wall3d::before{
  background:
    linear-gradient(145deg, rgba(255,255,255,.20), rgba(0,0,0,.18)),
    radial-gradient(120% 80% at 30% 20%, rgba(255,255,255,.22), transparent 55%),
    linear-gradient(#b65a32, #8f3f1f);
  border:2px solid rgba(60,25,10,.85);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.20),
    inset 0 -3px 0 rgba(0,0,0,.22);
  transform: translateZ(10px);
}

.wall3d::after{
  background: linear-gradient(#7a3519, #5a2511);
  transform: rotateY(90deg) translateZ(29px);
  transform-origin:right center;
  opacity:.9;
}

.wall3d{
  box-shadow: 0 -10px 0 0 rgba(255,255,255,.10) inset;
}

.castle3d[data-built="1"] .w1,
.castle3d[data-built="2"] .w1,
.castle3d[data-built="2"] .w2,
.castle3d[data-built="4"] .w1,
.castle3d[data-built="4"] .w2,
.castle3d[data-built="4"] .w3,
.castle3d[data-built="4"] .w4{ opacity: 1; }

.castle3d[data-built="1"] .w1,
.castle3d[data-built="2"] .w1,
.castle3d[data-built="2"] .w2,
.castle3d[data-built="4"] .w1,
.castle3d[data-built="4"] .w2,
.castle3d[data-built="4"] .w3,
.castle3d[data-built="4"] .w4{
  transform: translateY(-2px) rotateX(55deg) rotateZ(-45deg);
}

.mur-message__texte{
  white-space: pre-line;
  font-weight: 900;
}

/* Cartouche plus large pour texte long */
.mur-message-zone .mur-message--cartouche{ max-width: 420px; }
@media (max-width: 430px){
  .castle3d{ width: 130px; height: 86px; }
  .mur-message-zone .mur-message--cartouche{ max-width: 92%; }
}


/* ===== Message final : taille adaptée ===== */
.mur-message--big .mur-message__texte{
  font-size: clamp(1.1rem, 3.8vw, 1.6rem);
  line-height: 1.35;
  letter-spacing: .04em;
}

.mur-message--big .mur-message__texte::first-line{
  font-size: clamp(1.4rem, 5vw, 2rem); /* icône / première ligne un peu plus grande */
}


/* ===== Amélioration globale des espacements & proportions ===== */

/* Conteneur principal */
.jeu-container{
  gap:22px;
}

/* Zone de jeu (gauche) */
.zone-jeu{
  padding:10px 6px;
}

/* Logo */
.logo-img{
  width:min(220px, 70vw);
  margin-bottom:6px;
}

/* Slogan */
.slogan{
  margin:10px 0 14px;
}

/* Bloc mot */
.zone-mot{
  padding:16px 14px;
  margin-bottom:14px;
}

/* Lettres du mot */
.zone-mot span{
  min-width:34px;
  font-size:1.25rem;
}

/* Pioche */
.panel[aria-label="Pioche de lettres"]{
  padding:16px 14px;
  margin-top:14px;
}

.pioche{
  gap:10px;
}

/* Boutons lettres */
.pioche button{
  width:44px;
  height:44px;
  font-size:1.1rem;
}

/* Mur */
.zone-mur{
  padding:12px;
}

.ligne-briques{
  margin-bottom:6px;
}

/* Cartouche message */
.mur-message-zone{
  margin-top:16px;
}

.mur-message--cartouche{
  padding:18px 20px;
}

/* Boutons rejouer */
.actions{
  margin-top:20px;
  gap:14px;
}

/* Mobile optimisation */
@media (max-width: 480px){
  .zone-mot span{
    min-width:30px;
    font-size:1.15rem;
  }
  .pioche button{
    width:40px;
    height:40px;
  }
}


/* ===== Aération & mise en valeur des blocs d'information ===== */

/* Conteneur infos */
.infos{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap:14px;
  margin:18px 0 10px;
}

/* Carte info */
.info{
  background:#ffffff;
  border-radius:16px;
  padding:14px 12px;
  text-align:center;
  box-shadow:0 6px 16px rgba(15,23,42,.08);
  border:1px solid rgba(15,23,42,.06);
}

.info span{
  display:block;
  margin-top:6px;
  font-size:1.4rem;
  font-weight:900;
  color:#1f7aff;
}

/* Actions */
.actions{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  justify-content:center;
  margin:22px 0 10px;
}

.actions button{
  padding:12px 18px;
  border-radius:14px;
  font-size:1rem;
  min-width:180px;
}

/* Mobile */
@media (max-width: 480px){
  .infos{
    grid-template-columns: 1fr 1fr;
  }
  .actions button{
    min-width:150px;
  }
}


/* ===== Alignement horizontal des infos clés ===== */
.infos{
  grid-template-columns: repeat(3, 1fr); /* mêmes dimensions */
  align-items:stretch;
}

.info{
  min-height:90px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.info strong{
  font-size:.85rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#475569;
}

.info span{
  margin-top:8px;
}

/* Mobile : toujours alignés mais plus compacts */
@media (max-width: 480px){
  .infos{
    grid-template-columns: repeat(3, 1fr);
    gap:10px;
  }
  .info{
    min-height:78px;
    padding:10px 8px;
  }
  .info span{
    font-size:1.2rem;
  }
}


/* ===== Slogan avec pictogramme animal ===== */
.slogan{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:900;
}

.slogan::before{
  content:none;
}


/* ===== Correction débordement du mot ===== */
.zone-mot{
  max-width:100%;
  overflow:hidden;
}

.zone-mot span{
  white-space:nowrap;
  text-overflow:ellipsis;
}

/* ===== Nouvelle disposition : mot au-dessus, pioche + construction côte à côte ===== */

/* Regroupe pioche + mur */
.zone-actions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  align-items:start;
}

/* Bloc mot plus large et mis au-dessus */
.zone-mot{
  font-size:1.35rem;
  padding:18px 16px;
  margin-bottom:18px;
}

/* Mur (construction) à droite de la pioche */
.zone-mur{
  margin-top:0;
}

/* Mobile : empilement vertical */
@media (max-width: 640px){
  .zone-actions{
    grid-template-columns:1fr;
  }
}


/* ===== Bloc du mot : aucun débordement (fix définitif) ===== */
.zone-mot{
  width:100%;
  max-width:100%;
  padding:18px 16px;
  margin-bottom:18px;

  display:flex;
  flex-wrap:wrap;          /* autorise le retour à la ligne */
  justify-content:center;
  align-items:center;
  gap:8px;

  overflow:hidden;         /* empêche toute sortie du bloc */
}

/* Lettres du mot : une lettre = une case */
.zone-mot span{
  display:inline-flex;
  justify-content:center;
  align-items:center;

  min-width:34px;
  height:42px;

  font-size:1.3rem;
  font-weight:900;

  background:rgba(255,255,255,.15);
  border-radius:10px;

  white-space:nowrap;
}


/* ===== Bloc du mot mis en avant (au-dessus de tout) ===== */
.zone-mot{
  margin:18px auto 22px;
  max-width:900px;

  padding:26px 22px;
  border-radius:22px;

  font-size:1.55rem;
}

/* Lettres plus grandes */
.zone-mot span{
  min-width:40px;
  height:48px;
  font-size:1.45rem;
}

/* Mobile */
@media (max-width: 480px){
  .zone-mot{
    padding:20px 16px;
    font-size:1.35rem;
  }
  .zone-mot span{
    min-width:34px;
    height:42px;
    font-size:1.3rem;
  }
}


/* ===== Ordre des blocs : Pioche au-dessus des infos (CSS only) ===== */
.zone-jeu{
  display:flex;
  flex-direction:column;
}

/* Pioche remonte au-dessus */
.panel[aria-label^="Pioche"]{
  order:1;
  margin-bottom:18px;
}

/* Infos en dessous */
.infos{
  order:2;
}

/* Actions en bas */
.actions{
  order:3;
}


/* ===== Message final : texte seul (sans château) ===== */
.mur-message--big .castle3d{
  display:none;
}


/* ===== Fin de partie : masquer le mur quand message final affiché ===== */
.mur-message--big ~ .zone-mur,
.mur-message--big + .zone-mur,
.zone-mur:has(+ .mur-message--big){
  display:none;
}


/* ===== Messages de niveau : texte seul (sans dessin) ===== */
.castle3d{
  display:none !important;
}


/* ===== Réduction des espaces en haut (Logo / Slogan / Mot) ===== */

/* Logo */
header{
  margin-bottom:6px;
}

.logo-img{
  margin-bottom:4px;
}

/* Slogan */
.slogan{
  margin:4px 0 6px;
}

/* Texte cases cachées */
.texte-cases{
  margin:2px 0 8px;
}

/* Bloc mot */
.zone-mot{
  margin-top:6px;
  margin-bottom:14px;
  padding:20px 18px;
}


/* ===== Réduction hauteur conteneur logo JEDEMO ===== */
header{
  padding-top:6px;
  padding-bottom:4px;
}

.logo-img{
  max-height:60px;
}

@media (max-width: 480px){
  .logo-img{
    max-height:52px;
  }
}


/* ===== Logo texte JEDEMO ===== */
.logo-texte{
  font-size:2.4rem;
  font-weight:900;
  letter-spacing:.18em;
  color:#1f7aff; /* bleu JEDEMO */
  text-align:center;
  margin-bottom:4px;
}

@media (max-width: 480px){
  .logo-texte{
    font-size:2rem;
    letter-spacing:.14em;
  }
}


/* ===== Interligne 0 entre logo JEDEMO et slogan ===== */
.logo-texte{
  margin-bottom:0 !important;
  line-height:1;
}

.slogan{
  margin-top:0 !important;
}


/* ===== Minuteur (au-dessus de Construction) ===== */
.timer-panel{
  padding:12px 12px;
  margin-bottom:12px;
  text-align:center;
}

.timer-label{
  font-weight:800;
  font-size:.9rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(71,85,105,.95);
}

.timer-value{
  margin-top:6px;
  font-weight:900;
  font-size:2rem;
  line-height:1;
  color:#1f7aff;
}

.timer-value.timer-urgent{
  color:#ef4444;
}


/* ===== Temps total affiché dans message final ===== */
.mur-message__texte{
  line-height:1.25;
}


/* ===== Minuteur en cercle (anneau) ===== */
.timer-ring{
  position:relative;
  width:110px;
  height:110px;
  margin:10px auto 6px;
  display:grid;
  place-items:center;
}

.timer-svg{
  position:absolute;
  inset:0;
  transform:rotate(-90deg);
}

.timer-track{
  fill:none;
  stroke:rgba(15,23,42,.10);
  stroke-width:12;
}

.timer-progress{
  fill:none;
  stroke:#1f7aff;
  stroke-width:12;
  stroke-linecap:round;
  stroke-dasharray:326.73; /* 2*pi*52 */
  stroke-dashoffset:0;
  transition: stroke-dashoffset 250ms linear, stroke 250ms linear;
}

.timer-progress.timer-urgent-ring{
  stroke:#ef4444 !important;
}

.timer-value{
  font-weight:900;
  font-size:2rem;
  line-height:1;
  color:#1f7aff;
}

.timer-value.timer-urgent{
  color:#ef4444;
}


/* ===== Minuteur cercle réduit ===== */
.timer-ring{
  width:80px;
  height:80px;
  margin:6px auto 4px;
}

.timer-track,
.timer-progress{
  stroke-width:8;
}

.timer-value{
  font-size:1.4rem;
}

@media (max-width: 480px){
  .timer-ring{
    width:68px;
    height:68px;
  }
  .timer-value{
    font-size:1.2rem;
  }
}


/* ===== Minuteur nombre seul (sans cercle) ===== */
.timer-svg,
.timer-track,
.timer-progress{
  display:none !important;
}

.timer-ring{
  width:auto;
  height:auto;
}

.timer-value{
  font-size:2rem;
  font-weight:900;
}


/* ===== Pioche : lettres plus serrées ===== */
#pioche{
  gap:6px;              /* espace entre boutons */
}

#pioche button{
  min-width:40px;
  height:40px;
  padding:0;
  font-size:1.1rem;
  margin:0;
}

@media (max-width: 480px){
  #pioche{
    gap:4px;
  }
  #pioche button{
    min-width:34px;
    height:34px;
    font-size:1rem;
  }
}


/* ===== Header : logo + temps à droite ===== */
.header-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:4px 8px;
}

/* Petit bloc temps */
.bloc-temps{
  font-size:0.9rem;
  font-weight:800;
  color:#475569;
  background:#f1f5f9;
  padding:4px 8px;
  border-radius:10px;
  white-space:nowrap;
  box-shadow:0 6px 16px rgba(15,23,42,.06);
  border:1px solid rgba(15,23,42,.06);
}

@media (max-width:480px){
  .bloc-temps{
    font-size:0.8rem;
    padding:3px 6px;
  }
}


/* ===== Suppression du bloc final bas droite (TRÈS FORT + temps) ===== */
.mur-message--big,
#murMessageZone{
  position:absolute;
  inset:0;
  display:flex !important;
  justify-content:center;
  align-items:flex-start;
  padding-top:10px;
  pointer-events:none;
  z-index:999;
}


/* ===== Fin de partie : minuteur devient score temps ===== */
.timer-panel.score-mode .timer-value{
  font-size:1.4rem;
  letter-spacing:.02em;
}


/* ===== FIX : afficher la zone de message de fin de niveau ===== */
#murMessageZone{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  margin-top:10px !important;
}

/* ===== Messages de fin de niveau DANS le MUR ===== */
#mur{ position:relative; }
#murMessageZone{
  position:absolute;
  top:8px;
  left:50%;
  transform:translateX(-50%);
  width:min(92%, 320px);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:50;
  pointer-events:none;
}
#murMessageZone .mur-message,
#murMessageZone .mur-message--big{
  background:rgba(255,255,255,0.96);
  border:2px solid rgba(31,122,255,0.25);
  border-radius:14px;
  padding:10px 14px;
  font-weight:900;
  font-size:clamp(0.85rem, 3.4vw, 1.05rem);
  line-height:1.25;
  text-align:center;
  box-shadow:0 10px 22px rgba(15,23,42,.12);
}


/* ===== OVERRIDE FINAL : zone message dans le MUR (toujours visible) ===== */
#mur { position: relative; }
#murMessageZone{
  position:absolute !important;
  inset:0 !important;
  display:flex !important;
  justify-content:center !important;
  align-items:flex-start !important;
  padding-top:10px !important;
  pointer-events:none !important;
  z-index:999 !important;
  transform:none !important;
  margin:0 !important;
}
#murMessageZone .mur-message{
  width:auto !important;
  max-width:90% !important;
  font-size:clamp(0.9rem, 3.6vw, 1.1rem) !important;
  line-height:1.25 !important;
}


/* Message dans le mur (police adaptée) */
#murMessageZone .mur-message{
  font-size:clamp(0.9rem, 3.4vw, 1.05rem);
  line-height:1.25;
  padding:10px 14px;
  max-width:90%;
}


/* ===== Effet clignotant avec étoiles pour messages de fin de niveau ===== */
@keyframes jedemoBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(1.05); }
}

.mur-message--stars{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.mur-message--stars .star{
  font-size:1.1em;
  animation: jedemoBlink 0.9s infinite;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}

.mur-message--stars .star:nth-child(1){ animation-delay: 0s; }
.mur-message--stars .star:nth-child(3){ animation-delay: 0.25s; }

/* un petit glow sur le message */
#murMessageZone .mur-message{
  box-shadow: 0 10px 24px rgba(31,122,255,.18), 0 10px 24px rgba(0,0,0,.12);
}


/* ===== Étoiles clignotantes AGRANDIES ===== */
.mur-message--stars .star{
  font-size:1.6em;        /* plus grandes */
  line-height:1;
}


/* ===== FIX AFFICHAGE LOGO PNG (FORCÉ) ===== */
.logo-container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.logo-img{
  display:block !important;
  max-height:64px !important;
  width:auto !important;
  height:auto !important;
  opacity:1 !important;
  visibility:visible !important;
}


/* ===== Bloc mot non trouvé (sous le NOM) ===== */
.mot-rate{
  margin:4px auto 0;
  padding:6px 10px;
  max-width:92%;
  text-align:center;
  font-weight:800;
  font-size:0.85rem;
  color:#b3261e;
  background:rgba(179,38,30,.08);
  border:1px dashed rgba(179,38,30,.40);
  border-radius:10px;
  min-height:20px;
}


/* ===== MOTS LONGS : ne jamais dépasser, retour à la ligne intelligent ===== */
#zoneMot{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  align-items:center !important;
  gap:6px !important;
  width:100% !important;
  max-width:100% !important;
}

/* Les cases ne s'étirent plus sur toute la largeur */
#zoneMot span{
  flex:0 0 auto !important;
}

/* Retour à la ligne aux espaces */
#zoneMot .mot-break{
  flex-basis:100% !important;
  width:100% !important;
  height:0 !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
}

/* Mot long : cases plus petites */
#zoneMot.mot-long span{
  min-width:34px !important;
  height:40px !important;
  font-size:1.2rem !important;
}

/* Mot très long : encore plus compact */
#zoneMot.mot-tres-long span{
  min-width:28px !important;
  height:36px !important;
  font-size:1.05rem !important;
}

/* Mobile : compact supplémentaire */
@media (max-width: 480px){
  #zoneMot.mot-long span{
    min-width:30px !important;
    height:38px !important;
    font-size:1.1rem !important;
  }
  #zoneMot.mot-tres-long span{
    min-width:24px !important;
    height:34px !important;
    font-size:0.98rem !important;
  }
}


/* ===== Cases à découvrir : fond bleu ===== */
#zoneMot span{
  background: rgba(31,122,255,.15);
  border: 2px solid rgba(31,122,255,.55);
  color:#ffffff;
}

/* Lettre révélée : fond neutre */
#zoneMot span:not(:empty){
  background: rgba(255,255,255,.15);
}


/* ===== AFFICHAGE MOT (retour à l'affichage précédent) ===== */
/* Par défaut : cases neutres (comme avant) */
#zoneMot span{
  background: rgba(255,255,255,.15) !important;
  border: 2px solid rgba(255,255,255,.35) !important;
  color:#ffffff !important;
}

/* Uniquement les cases cachées : fond bleu + texte blanc */
#zoneMot span.case-cachee{
  background: rgba(31,122,255,.75) !important;
  border-color: rgba(31,122,255,.95) !important;
  color:#ffffff !important;
}

/* Les retours à la ligne restent invisibles */
#zoneMot .mot-break{
  background: transparent !important;
  border: 0 !important;
}


/* ===== Case cachée BLEUE : underscore + contour BLANC ===== */
#zoneMot span.case-cachee{
  background: rgba(31,122,255,.85) !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important; /* underscore blanc */
}


/* ===== Empêcher tout retour à la ligne dans le mot (ex: OURS-POLAIRE) ===== */
#zoneMot{
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}



/* =========================================================
   JEDEMO — FIX STRICT : Actions sous la Pioche
   ========================================================= */
.barre-actions{
  display:flex !important;
  gap:8px !important;
  justify-content:space-between !important;
  margin:8px 0 0 !important;
}
.barre-actions .btn,
.barre-actions .btn-secondaire{
  flex:1 1 0 !important;
  padding:8px 10px !important;
  font-size:0.85rem !important;
  border-radius:12px !important;
}



/* =========================================================
   JEDEMO — FIX AFFICHAGE : boutons rejouer SOUS la Pioche
   Cause : la Pioche a order:1 (flex), donc les boutons (order:0) restaient au-dessus.
   ========================================================= */

.zone-jeu{ display:flex; flex-direction:column; }

/* Pioche en premier (déjà le cas), puis boutons rejouer juste après */
.panel[aria-label^="Pioche"]{ order: 1 !important; }
.barre-actions{ order: 2 !important; }
.infos{ order: 3 !important; }



/* =========================================================
   JEDEMO — Minuteur AU-DESSUS DU MOT (ultra compact)
   ========================================================= */

/* Le minuteur devient un petit badge */
.timer-panel{
  max-width: 160px !important;
  margin: 4px auto 6px !important;
  padding: 4px 6px !important;
  border-radius: 12px !important;
}

.timer-label{
  font-size: 0.62rem !important;
  letter-spacing: .02em !important;
  margin: 0 !important;
  line-height: 1.05 !important;
}

.timer-ring{
  margin: 2px auto 0 !important;
  width: auto !important;
  height: auto !important;
}

.timer-value{
  font-size: 1.02rem !important;
  font-weight: 800 !important;
  margin: 2px 0 0 !important;
  line-height: 1.05 !important;
}

/* Sur écrans très étroits/hauteur faible */
@media (max-width: 390px), (max-height: 650px){
  .timer-panel{ max-width: 150px !important; padding: 3px 5px !important; }
  .timer-label{ font-size: 0.6rem !important; }
  .timer-value{ font-size: 0.95rem !important; }
}



/* =========================================================
   JEDEMO — SUPPRESSION boutons REJOUER DANS LA PIOCHE UNIQUEMENT
   ========================================================= */

/* Masquer les boutons Rejouer UNIQUEMENT s'ils sont dans le bloc Pioche */
.panel[aria-label^="Pioche"] .barre-actions{
  display: none !important;
}



/* =========================================================
   JEDEMO — MUR ULTRA COMPACT (iPhone)
   Réduction maximale mur + briques + polices
   ========================================================= */

/* Bloc Mur très réduit */
.mur-wrap{
  height: 110px !important;
  padding: 6px !important;
}

/* Briques mini */
.brique{
  width: 22px !important;
  height: 22px !important;
  border-radius: 6px !important;
}
.ligne-briques{
  gap: 4px !important;
  margin-bottom: 4px !important;
}

/* Icône château très discrète */
.chateau{
  font-size: 1.1rem !important;
  margin-top: 2px !important;
}

/* Messages du mur : police mini */
#murMessageZone .mur-message{
  font-size: 0.7rem !important;
  padding: 4px 6px !important;
  line-height: 1.15 !important;
}

/* Titre du panneau Mur */
.panel__title{
  font-size: 0.7rem !important;
  margin-bottom: 4px !important;
}

/* Mobile très petit : encore plus compact */
@media (max-width: 390px){
  .mur-wrap{ height: 95px !important; }
  .brique{ width: 20px !important; height: 20px !important; }
  #murMessageZone .mur-message{ font-size: 0.65rem !important; }
}



/* =========================================================
   JEDEMO — Mur juste sous Horloge / Score
   ========================================================= */
.timer-panel + .zone-mur{
  margin-top: 6px !important;
}



/* =========================================================
   JEDEMO — Minuteur aligné à DROITE
   ========================================================= */

/* Place le minuteur complètement à droite */
.timer-panel{
  margin-left: auto !important;
  margin-right: 0 !important;
  align-self: flex-end !important;
  text-align: right !important;
}

/* Centre interne conservé mais bloc à droite */
.timer-panel .timer-value,
.timer-panel .timer-label{
  text-align: right !important;
}



/* =========================================================
   JEDEMO — Minuteur sous le SCORE
   ========================================================= */
.bloc-temps + .timer-panel{
  margin-top: 4px !important;
}



/* =========================================================
   JEDEMO — Mur SOUS le minuteur + largeur ULTRA réduite
   ========================================================= */

/* Mur centré et très étroit */
.zone-mur{
  max-width: 180px !important;
  margin: 6px auto 8px !important;
  padding: 6px !important;
}

/* Contenu interne du mur */
.mur-wrap{
  width: 100% !important;
  height: 95px !important;
  padding: 4px !important;
}

/* Briques encore plus petites */
.brique{
  width: 18px !important;
  height: 18px !important;
}
.ligne-briques{
  gap: 3px !important;
  margin-bottom: 3px !important;
}

/* Message mur ultra compact */
#murMessageZone .mur-message{
  font-size: 0.62rem !important;
  padding: 3px 5px !important;
}

/* Très petits écrans */
@media (max-width: 390px){
  .zone-mur{ max-width: 160px !important; }
  .mur-wrap{ height: 85px !important; }
  .brique{ width: 16px !important; height: 16px !important; }
}



/* =========================================================
   JEDEMO — Minuteur à droite du slogan
   ========================================================= */
.slogan-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:6px 0 8px;
}
.slogan-row .slogan{
  margin:0 !important;
  flex:1;
  text-align:left;
}
.slogan-row .timer-panel{
  margin:0 !important;
  max-width:120px !important;
}



/* =========================================================
   JEDEMO — SCORE à droite du slogan
   ========================================================= */
.slogan-row{
  display:flex;
  align-items:center;
  gap:8px;
}

.slogan-row .bloc-temps{
  margin:0 !important;
  font-size:0.75rem !important;
  padding:3px 6px !important;
  white-space:nowrap;
}



/* =========================================================
   JEDEMO — FIX iPhone : MOT + PIOCHE toujours visibles
   ========================================================= */
.card{ overflow:auto !important; -webkit-overflow-scrolling: touch; }
.zone-jeu{ overflow:visible !important; }
.zone-mot{ overflow:visible !important; }
#zoneMot{ display:flex !important; flex-wrap:wrap !important; }
#pioche{ display:grid !important; }



/* =========================================================
   JEDEMO — Pioche en grille 3 colonnes x 4 lignes (3x4)
   ========================================================= */
#pioche{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important; /* 3 lettres horizontales */
  gap: 6px !important;
}

/* Boutons adaptés au format 3x4 */
#pioche button{
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  padding: 0 !important;
  font-size: 1rem !important;
  border-radius: 10px !important;
}

/* Petits écrans: encore un peu plus compact */
@media (max-width: 390px){
  #pioche{ gap: 5px !important; }
  #pioche button{ height: 32px !important; font-size: 0.95rem !important; }
}



/* =========================================================
   JEDEMO — Bloc unique Pioche + Mur (2 colonnes)
   ========================================================= */
.bloc-jeu-split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 8px 0;
  align-items: start;
}

/* Gauche : Pioche */
.bloc-jeu-split .bloc-gauche{
  display: block;
}

/* Droite : Mur */
.bloc-jeu-split .bloc-droit{
  display: block;
}

/* Mobile étroit : toujours 2 colonnes mais compact */
@media (max-width: 390px){
  .bloc-jeu-split{
    gap: 8px;
  }
}

/* Mot juste sous le logo */
.header + .zone-mot,
header + .zone-mot{
  margin-top: 6px;
}

/* Slogan entre logo et mot */
header + .slogan-row{
  margin-top: 6px;
  margin-bottom: 6px;
}

/* Slogan remonté sous le logo (header) */
.logo-container + .slogan-row,
.logo-container .slogan-row{
  margin-top: 4px;
}

/* =========================================================
   JEDEMO — Minuteur dans le bloc Mur (à droite du titre)
   ========================================================= */
.zone-mur .panel__title{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.zone-mur .timer-panel{
  margin: 0 !important;
  padding: 2px 6px !important;
  max-width: 90px !important;
}

.zone-mur .timer-label{
  display: none !important; /* on garde juste le chiffre */
}

.zone-mur .timer-value{
  font-size: 0.9rem !important;
  font-weight: 800;
}

/* Mot non trouvé juste au-dessus du Nom */
#motRate{
  margin-bottom: 6px;
}



/* =========================================================
   JEDEMO — Infos compactes (Lettres cachées / Niveau / Mots)
   ========================================================= */
.infos{
  gap: 6px !important;
}

.info{
  padding: 6px 6px !important;
  min-height: 54px !important;
}

.info__label{
  font-size: 0.65rem !important;
  line-height: 1.1 !important;
}

.info__value{
  font-size: 0.9rem !important;
  font-weight: 700 !important;
}

/* iPhone très compact */
@media (max-width: 390px){
  .info{
    padding: 5px 5px !important;
    min-height: 48px !important;
  }
  .info__label{ font-size: 0.6rem !important; }
  .info__value{ font-size: 0.85rem !important; }
}



/* =========================================================
   JEDEMO — Boutons Rejouer compacts
   ========================================================= */
.barre-actions{
  gap: 6px !important;
  margin-top: 6px !important;
}

.barre-actions .btn,
.barre-actions .btn-secondaire{
  padding: 6px 8px !important;
  font-size: 0.7rem !important;
  border-radius: 10px !important;
  line-height: 1.1 !important;
}

/* iPhone très compact */
@media (max-width: 390px){
  .barre-actions .btn,
  .barre-actions .btn-secondaire{
    padding: 5px 6px !important;
    font-size: 0.65rem !important;
  }
}



/* =========================================================
   JEDEMO — Logo encore plus compact
   ========================================================= */
.logo-img{
  height: 28px !important;
  width: auto !important;
  max-height: none !important;
}

/* iPhone très petit */
@media (max-width: 390px){
  .logo-img{
    height: 24px !important;
  }
}



/* =========================================================
   JEDEMO — Bloc NOM compact ("TROUVER L'ANIMAL")
   ========================================================= */
.slogan-row{
  margin: 4px 0 !important;
}

.slogan-row .slogan{
  font-size: 0.7rem !important;
  letter-spacing: 0.05em !important;
  line-height: 1.1 !important;
}

/* iPhone très compact */
@media (max-width: 390px){
  .slogan-row .slogan{
    font-size: 0.65rem !important;
  }
}

/* =========================================================
   JEDEMO — Mot non trouvé dans le bloc Score/Time
   ========================================================= */
.bloc-temps{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.bloc-temps #motRate{
  margin-top: 2px;
  font-size: 0.6rem;
  line-height: 1.1;
  opacity: 0.85;
}

/* =========================================================
   JEDEMO — Bloc Temps split (gauche / droite)
   ========================================================= */
.time-split{
  display: grid;
  grid-template-columns: 1fr 2fr; /* droite 2x plus large */
  gap: 8px;
  margin: 6px 0;
  align-items: center;
}

.time-left{
  text-align: right;
}

.time-right{
  font-size: 0.65rem;
  line-height: 1.2;
}

.time-right #motRate{
  display: block;
}



/* =========================================================
   JEDEMO — Timer / Score ULTRA compact
   ========================================================= */
.time-split{
  margin: 4px 0 !important;
  gap: 6px !important;
}

.time-left{
  font-size: 0.6rem !important;
  line-height: 1.1 !important;
}

.time-left .bloc-temps{
  padding: 4px 5px !important;
}

.time-left .bloc-temps span,
.time-left .bloc-temps{
  font-size: 0.65rem !important;
}

/* Encore plus petit sur très petit écran */
@media (max-width: 390px){
  .time-left{
    font-size: 0.55rem !important;
  }
  .time-left .bloc-temps{
    padding: 3px 4px !important;
  }
}



/* =========================================================
   JEDEMO — OPTIMISATION ESPACES (iPhone)
   Objectif: meilleur affichage sans débordement
   ========================================================= */

/* Espacement global de la carte */
.card{
  gap: 6px !important;
}

/* Header + slogan : marges mini */
.header-top{ padding-bottom: 2px !important; }
.slogan-row{ margin: 2px 0 4px !important; }

/* Bloc split temps: compact */
.time-split{ margin: 2px 0 4px !important; }

/* Mot non trouvé: compact */
#motRate{ margin: 0 !important; }

/* Bloc MOT: réduire marge */
.zone-mot{ margin: 2px auto 6px !important; }

/* Bloc Pioche+Mur (split): rapprocher */
.bloc-jeu-split{ margin: 4px 0 6px !important; gap: 8px !important; }

/* Boutons rejouer: marge réduite */
.barre-actions{ margin-top: 4px !important; }

/* Infos: rapprocher */
.infos{ margin: 6px 0 4px !important; }

/* Pied: rapprocher */
.pied{ margin-top: 4px !important; }

/* Sécurité iPhone petites hauteurs */
@media (max-height: 650px){
  .card{ gap: 5px !important; }
  .slogan-row{ margin: 2px 0 3px !important; }
  .bloc-jeu-split{ margin: 3px 0 5px !important; gap: 7px !important; }
  .infos{ margin: 5px 0 3px !important; }
}

/* ================================
   ÉCRANS (Accueil / Jeu)
   ================================ */
.screen[hidden] { display: none !important; }

.screen-start{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:18px 10px 8px;
  text-align:center;
}

.start-logo .logo-img{
  height:64px !important;
  width:auto !important;
  border-radius:14px;
}

.start-slogan{
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#1f7aff;
  text-shadow:0 2px 10px rgba(31,122,255,.20);
  font-size:clamp(.9rem, 3.6vw, 1.15rem);
}

.btn-start{
  width:min(320px, 88%);
  padding:14px 16px !important;
  border-radius:16px !important;
  font-size:1.05rem !important;
}

.start-rules{
  width:min(420px, 86%);
  margin-top:6px;
  padding:6px 8px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.14);
  background:linear-gradient(180deg, rgba(15,23,42,.03), rgba(15,23,42,.01));
  color:rgba(15,23,42,.72);
  font-size:0.62rem;
  line-height:1.25;
  box-shadow:0 8px 18px rgba(15,23,42,.06);
}


/* ================================
   Écran START : Exemple (design jeu)
   ================================ */
.start-example{
  width:min(420px, 88%);
  padding:10px 10px 8px;
  border-radius:18px;
  background: linear-gradient(180deg, #b65a32, #8f3f1f);
  border:2px solid rgba(60,25,10,.9);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.25),
              inset 0 -3px 0 rgba(0,0,0,.25),
              0 10px 18px rgba(0,0,0,.25);
}

.start-example__label{
  color:#ffffff;
  font-weight:800;
  letter-spacing:.08em;
  margin-bottom:10px;
  text-transform:uppercase;
  font-size:0.65rem;
}

.start-example__word{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px;
  margin-bottom:8px;
}

.start-example__word .ex-letter{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:32px;
  height:36px;
  border-radius:8px;
  font-weight:900;
  font-size:1.05rem;
  color:#ffffff;
  background: rgba(255,255,255,.15);
  border:2px solid rgba(255,255,255,.35);
}

.start-example__word .ex-letter.ex-hidden{
  background: rgba(31,122,255,.85);
  border:2px solid #ffffff;
  color:#ffffff;
}

.start-example__word .ex-letter.ex-hidden::before{
  content:"_";
}

.start-example__word .ex-letter.space{
  width:100%;
  height:0;
  background:transparent;
  border:0;
}

.start-example__hint{
  color:#ffffff;
  font-size:0.6rem;
  font-weight:800;
  opacity:.9;
}

@media (max-width: 390px){
  .start-example__word .ex-letter{ width:34px; height:38px; font-size:1.1rem; }
}
@media (max-width: 390px){
  .start-example__word .ex-letter{ width:36px; height:42px; font-size:1.2rem; border-radius:10px; }
}

/* Force exemple sur UNE seule ligne */
.start-example__word.one-line{
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

/* ================================
   Écran START : Mur illustration
   ================================ */
.start-wall-illustration{
  width:100%;
  display:flex;
  justify-content:center;
  margin:8px 0 6px;
}

.mur-illustration{
  height:90px;
  padding:6px;
  background: radial-gradient(900px 280px at 50% 0%, rgba(31,122,255,.08), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.35));
}

.mur-illustration .ligne-briques{
  justify-content:center;
}

.mur-illustration .brique{
  width:18px;
  height:18px;
  opacity:1;
  animation:none;
}

@media (max-width:390px){
  .mur-illustration{ height:80px; }
  .mur-illustration .brique{ width:16px; height:16px; }
}

/* FIX visibilité mur accueil */
.start-wall-illustration{
  display:block !important;
  opacity:1 !important;
}

.mur-illustration{
  display:block !important;
  height:110px !important;
}

.mur-illustration-inner{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.mur-illustration .ligne-briques{
  display:flex;
  justify-content:center;
  gap:4px;
}

@media (max-width:390px){
  .mur-wrap.mur-illustration{ width:min(240px, 82%); height:84px; padding:6px 6px 8px; }
  .mur-wrap.mur-illustration .brique{
  width:18px;
  height:18px;
  border-radius:5px;
  opacity:1;
  transform:none;
  animation:none;
}
  .mur-wrap.mur-illustration .ligne-briques{
  display:flex;
  justify-content:center;
  gap:5px;
  margin-bottom:4px;
}
}

@media (max-width:390px){
  .mur-wrap.mur-illustration{
    width:min(200px, 80%);
    height:72px;
    padding:5px 5px 6px;
  }
  .mur-wrap.mur-illustration .brique{
    width:16px;
    height:16px;
  }
}

/* ================================
   ÉCRAN FIN DE PARTIE
   ================================ */
.screen-end{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:18px 10px;
}

.end-card{
  width:min(420px, 92%);
  background:linear-gradient(180deg, #b65a32, #8f3f1f);
  border-radius:22px;
  padding:18px 16px 20px;
  border:2px solid rgba(60,25,10,.9);
  box-shadow:0 18px 35px rgba(0,0,0,.35);
  text-align:center;
}

.end-title{
  color:#ffffff;
  font-weight:900;
  letter-spacing:.08em;
  margin-bottom:14px;
  font-size:0.95rem;
}

.end-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:16px;
}

.end-stat{
  background:rgba(255,255,255,.12);
  border-radius:16px;
  padding:12px 10px;
}

.end-label{
  color:#ffffff;
  font-size:0.7rem;
  letter-spacing:.08em;
  font-weight:800;
  opacity:.9;
}

.end-value{
  color:#ffffff;
  font-size:1.6rem;
  font-weight:900;
  margin-top:6px;
}

/* Actions fin de partie */
.end-actions{
  display:flex;
  gap:12px;
  justify-content:center;
  margin-top:12px;
}

.btn-secondary{
  background:linear-gradient(180deg,#6b7280,#4b5563);
  color:#ffffff;
}

/* ================================
   Bloc "Mot non trouvé" (sous le MOT)
   ================================ */
.mot-non-trouve{
  width:min(520px, 92%);
  margin:8px auto 10px;
  padding:10px 12px;
  border-radius:16px;
  background:rgba(15,23,42,.06);
  border:1px solid rgba(15,23,42,.10);
  text-align:center;
}

.mot-non-trouve__label{
  font-size:0.7rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.75;
}

.mot-non-trouve__value{
  margin-top:6px;
  font-weight:900;
  color: rgba(220, 38, 38, .95);
}

/* Si vide, on cache tout le bloc */
.mot-non-trouve__value:empty{
  display:none;
}
.mot-non-trouve:has(.mot-non-trouve__value:empty){
  display:none;
}

/* ================================
   Minuteur au-dessus du mot
   ================================ */
.minuteur-top{
  display:flex;
  justify-content:center;
  margin:6px 0 8px;
}

.minuteur-top #tempsTotal{
  text-align:center;
}

/* ================================
   Minuteur 15s au-dessus du mot
   ================================ */
.timer-top{
  display:flex;
  justify-content:center;
  margin:6px 0 10px;
}

.timer-top .timer-panel{
  width:min(220px, 92%);
  margin:0;
}


/* =========================================================
   JEDEMO — Mur réduit (plus compact)
   ========================================================= */
.zone-mur{
  max-width: 200px !important;
  margin: 4px auto !important;
  padding: 6px !important;
}

.mur-wrap{
  height: 90px !important;
  padding: 4px !important;
}

/* Briques plus petites */
.brique{
  width: 16px !important;
  height: 16px !important;
}

.ligne-briques{
  gap: 3px !important;
  margin-bottom: 3px !important;
}

/* Texte message mur plus petit */
#murMessageZone .mur-message{
  font-size: 0.6rem !important;
  padding: 3px 5px !important;
}


/* =========================================================
   JEDEMO — Mur AU-DESSUS de la Pioche (CSS only)
   ========================================================= */
.bloc-jeu-split{
  display: flex !important;
  flex-direction: column !important;
}

.bloc-jeu-split .bloc-droit{ order: 1 !important; } /* Mur */
.bloc-jeu-split .bloc-gauche{ order: 2 !important; } /* Pioche */


/* =========================================================
   JEDEMO — Élargir les blocs MUR & PIOCHE
   ========================================================= */

/* Les 2 colonnes prennent toute la largeur disponible */
.bloc-jeu-split .bloc-gauche,
.bloc-jeu-split .bloc-droit{
  width: 100% !important;
}

/* Panneaux plus larges (quasi pleine largeur) */
.bloc-jeu-split .panel{
  width: min(560px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Mur : annule l'ancienne contrainte étroite */
.bloc-jeu-split .zone-mur{
  max-width: none !important;
  width: min(560px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Mur interne : plus large et un peu plus haut */
.bloc-jeu-split .zone-mur .mur-wrap{
  width: 100% !important;
  height: 120px !important;
}

/* Pioche : grille confortable sur largeur */
.bloc-jeu-split #pioche{
  width: 100% !important;
}


/* =========================================================
   JEDEMO — MUR ULTRA MINI (taille FIXE) + BRIQUES FIXES
   Objectif: réduire au maximum et garder des dimensions stables
   ========================================================= */

/* Bloc Mur : largeur/hauteur FIXES (ne pas étirer) */
.zone-mur{
  width: 180px !important;
  max-width: 180px !important;
  min-width: 180px !important;
  margin: 4px auto !important;
  padding: 6px !important;
}

.zone-mur .panel__title{
  font-size: 0.65rem !important;
  margin: 0 0 4px !important;
}

/* Fenêtre du mur : FIXE */
.zone-mur .mur-wrap{
  width: 100% !important;
  height: 78px !important;
  min-height: 78px !important;
  max-height: 78px !important;
  padding: 4px !important;
  overflow: hidden !important;
}

/* Briques : FIXES */
.zone-mur .brique{
  width: 14px !important;
  height: 14px !important;
  border-radius: 4px !important;
  border-width: 1px !important;
  box-shadow: none !important;
  animation: none !important;
  transform: none !important;
}

/* Lignes : espacement minimal */
.zone-mur .ligne-briques{
  gap: 3px !important;
  margin-bottom: 3px !important;
}

/* Château : mini */
.zone-mur .chateau{
  font-size: 0.9rem !important;
  margin-top: 2px !important;
}

/* Messages du mur : mini */
.zone-mur #murMessageZone{
  padding-top: 6px !important;
}
.zone-mur #murMessageZone .mur-message,
.zone-mur #murMessageZone .mur-message--big{
  font-size: 0.58rem !important;
  line-height: 1.15 !important;
  padding: 3px 5px !important;
  max-width: 92% !important;
}

/* Sol : discret */
.zone-mur .ligne-sol{
  height: 1px !important;
  margin-top: 4px !important;
}


/* =========================================================
   JEDEMO — FIX: Briques visibles même sans animation
   (La classe .brique est opacity:0 par défaut, l'animation la rend visible.
    Comme on coupe l'animation en mode "ultra mini", on force opacity:1.)
   ========================================================= */
.zone-mur .brique{
  opacity: 1 !important;
}


/* =========================================================
   JEDEMO — Minuteur à GAUCHE du Mur
   ========================================================= */

.mur-row{
  display: grid;
  grid-template-columns: 70px auto;
  align-items: start;
  gap: 6px;
  margin: 4px auto;
  width: max-content;
}

.mur-left{
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.mur-left .timer-panel{
  width: 64px;
  padding: 4px 4px;
  text-align: center;
}

.mur-left .timer-label{
  font-size: 0.55rem;
}

.mur-left .timer-value{
  font-size: 1.1rem;
  font-weight: 900;
}

.mur-right{
  display: block;
}


/* =========================================================
   JEDEMO — Mur + Minuteur STRICTEMENT côte à côte
   (même ligne verticale, alignement parfait)
   ========================================================= */
.mur-row{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;   /* alignement vertical identique */
  justify-content: center !important;
  gap: 8px !important;
  width: fit-content !important;
  margin: 6px auto !important;
}

.mur-left{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mur-right{
  display: flex !important;
  align-items: center !important;
}


/* =========================================================
   JEDEMO — Minuteur entre LOGO et TROUVER LE MOT
   ========================================================= */
.timer-under-logo{
  margin: 4px auto 6px !important;
  padding: 4px 8px !important;
  text-align: center;
}

.timer-under-logo .timer-label{
  font-size: 0.6rem !important;
  letter-spacing: .08em;
}

.timer-under-logo .timer-value{
  font-size: 1.4rem !important;
  font-weight: 900;
}

.timer-panel,
.timer-under-logo,
#timer,
#timerLabel,
#timerCircle,
.timer-top{
  display: none !important;
}


/* =========================================================
   JEDEMO — Petit timer sous "TROUVER LE MOT !"
   ========================================================= */
.mini-timer{
  position: relative;
  width: 84px;
  height: 44px;
  margin: 4px auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 14px;
  background: rgba(241,245,249,.9);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 8px 18px rgba(15,23,42,.08);
}

.mini-timer__label{
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: .08em;
  color: rgba(71,85,105,.95);
}

.mini-timer__value{
  font-size: 1.1rem;
  font-weight: 900;
  color: #1f7aff;
  line-height: 1;
}

/* Cercle discret (si tu veux l’activer plus tard) */
.mini-timer__svg{
  position: absolute;
  inset: 4px;
  transform: rotate(-90deg);
  pointer-events: none;
  opacity: .0; /* par défaut caché (mettre .25 si tu veux l’afficher) */
}

.mini-timer__track{
  fill: none;
  stroke: rgba(15,23,42,.10);
  stroke-width: 10;
}

.mini-timer__progress{
  fill: none;
  stroke: #1f7aff;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 326.73;
  stroke-dashoffset: 0;
}

/* Compat: si le JS ajoute .timer-urgent sur #timer */
#timer.timer-urgent{ color: #ef4444 !important; }


/* =========================================================
   JEDEMO — FIX affichage valeur du mini timer
   ========================================================= */
.mini-timer__value,
#timer{
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 2;
}


/* =========================================================
   JEDEMO — Timer et Mur côte à côte
   ========================================================= */
.timer-mur-row{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 6px auto 8px;
  width: fit-content;
}

.timer-col{
  display: flex;
  align-items: center;
  justify-content: center;
}

.mur-col{
  display: flex;
  align-items: center;
}


/* =========================================================
   JEDEMO — Bloc MOT : cases + lettres plus petites
   Objectif: TOUS les mots tiennent à l'horizontal dans le bloc
   ========================================================= */
#zoneMot{
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: hidden !important;
  gap: var(--case-gap, 5px) !important;
}

#zoneMot span{
  min-width: var(--case-w, 28px) !important;
  width: var(--case-w, 28px) !important;
  height: var(--case-h, 34px) !important;
  font-size: var(--case-font, 1.0rem) !important;
  line-height: 1 !important;
}


/* =========================================================
   JEDEMO — FIX DEFINITIF : MOTS LONGS NE DEPASSENT JAMAIS
   ========================================================= */

/* Le bloc MOT ne peut jamais déborder */
.zone-mot,
#zoneMot{
  max-width: 100% !important;
  overflow: hidden !important;
}

/* Autoriser le retour à la ligne + wrapping */
#zoneMot{
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

/* Largeur contrôlée pour forcer 2 lignes */
#zoneMot.mot-long{
  max-width: 260px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#zoneMot.mot-tres-long{
  max-width: 220px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Cases adaptatives (ne débordent jamais) */
#zoneMot span{
  flex: 0 0 auto !important;
  max-width: 100% !important;
}

/* Retour ligne artificiel */
#zoneMot .mot-break{
  flex-basis: 100% !important;
  width: 100% !important;
  height: 0 !important;
}

/* =========================================================
   JEDEMO — MOTS LONGS SUR 2 LIGNES (RÈGLE FINALE)
   ========================================================= */

#zoneMot{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  align-items:center !important;
  gap:6px !important;

  max-width:260px !important;   /* force 2 lignes */
  margin:0 auto !important;

  overflow:hidden !important;
}

#zoneMot span{
  width:30px !important;
  height:36px !important;

  display:inline-flex !important;
  justify-content:center !important;
  align-items:center !important;

  font-size:1rem !important;    /* taille fixe */
  font-weight:900 !important;
  line-height:1 !important;

  border-radius:8px !important;
}

/* =========================================================
   JEDEMO — START FIX (iPhone/Safari)
   ========================================================= */
#screenStart #btnStart{
  position: relative;
  z-index: 50;
}

/* Décorations start : ne capturent pas les clics */
#screenStart .start-example,
#screenStart .start-wall-illustration{
  pointer-events: none;
}

#screenStart .start-debug{
  margin-top: 8px;
  font-weight: 900;
  font-size: 0.72rem;
  opacity: .8;
}

/* =========================================================
   JEDEMO — MOT RESPONSIVE 1/2/3 LIGNES + MOTS COMPOSÉS
   ========================================================= */
#zoneMot{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  align-items:center !important;
  gap: var(--case-gap, 6px) !important;

  width:100% !important;
  max-width:100% !important;
  overflow:hidden !important;
}

#zoneMot span{
  flex:0 0 auto !important;
  width: var(--case-w, 32px) !important;
  min-width: var(--case-w, 32px) !important;
  height: var(--case-h, 38px) !important;

  display:inline-flex !important;
  justify-content:center !important;
  align-items:center !important;

  font-size: var(--case-font, 1.1rem) !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

/* retour ligne invisible */
#zoneMot .mot-break{
  flex-basis:100% !important;
  width:100% !important;
  height:0 !important;
}

/* =========================================================
   JEDEMO — MOT : police 1rem + CASES CARREES COMPACTES (FINAL)
   ========================================================= */

/* Police identique pour tous les mots */
#zoneMot span{
  font-size: 1rem !important;
}

/* Cases carrées plus ajustées (utilise --case-w) */
#zoneMot span{
  width: var(--case-w, 28px) !important;
  min-width: var(--case-w, 28px) !important;
  height: var(--case-w, 28px) !important;  /* carré */
  border-radius: 8px !important;
}

/* Optionnel : un peu moins d'espace entre cases */
#zoneMot{
  gap: var(--case-gap, 5px) !important;
}

/* ===== FOND D'ÉCRAN ANIMAUX (BASE INCHANGÉE) ===== */
body{
  background-image: var(--jedemo-bg-image, none);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}


/* ===== JEDEMO V1 - accueil multi-jeux et apprentissage ===== */
.intro-learning{font-weight:800;text-align:center;color:var(--muted);max-width:560px;margin:8px auto 16px}.games-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:12px 0 18px}.game-tile{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 12px 30px rgba(15,23,42,.12);cursor:pointer;padding:0;text-align:left;transition:transform .12s}.game-tile:hover{transform:translateY(-2px)}.game-tile .tile-img{display:block;height:95px;background-size:cover;background-position:center}.game-tile strong{display:block;padding:10px 12px 2px;font-size:1.05rem}.game-tile small{display:block;padding:0 12px 12px;color:var(--muted);font-weight:700}.current-game{text-align:center;font-weight:900;color:var(--primary);margin-top:4px}.learning-box{margin:16px 0;padding:16px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,rgba(31,122,255,.08),rgba(31,122,255,.03))}.learning-box h2{margin:0 0 6px}.missed-panel{margin-top:12px}.missed-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;list-style:none;padding:0;margin:0}.missed-list li{background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px}.missed-list a{float:right;font-weight:800;color:var(--primary)}.empty-missed{font-weight:900;color:var(--ok)}


/* ===== Optimisation accueil mobile : 2 jeux par ligne ===== */
.games-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:10px !important;
  width:100%;
}

.game-tile{
  border-radius:14px !important;
}

.game-tile .tile-img{
  height:70px !important;
}

.game-tile strong{
  font-size:0.9rem !important;
  padding:8px 8px 2px !important;
}

.game-tile small{
  font-size:0.75rem !important;
  padding:0 8px 8px !important;
}

@media (min-width:768px){
  .games-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    max-width:520px;
    margin-left:auto;
    margin-right:auto;
  }
  .game-tile .tile-img{
    height:90px !important;
  }
}

/* ===== Fond d'accueil JEDEMO : uniquement sur la première page ===== */
body:has(#screenStart:not([hidden])){
  background: url("fond-accueil.png") center center / cover no-repeat fixed;
}
body:has(#screenStart:not([hidden])) .card{
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(2px);
}

#murNiveaux,
.murs-niveaux,
.niveaux-murs{
  display:none !important;
}

/* =========================================================
   JEDEMO — Minuteur en haut à droite, sur la ligne du logo
   ========================================================= */
#screenGame .header-top{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 4px 8px 2px !important;
}

#screenGame .header-top .logo-container{
  width: auto !important;
  flex: 0 1 auto !important;
  justify-content: flex-start !important;
  padding: 0 !important;
}

#screenGame .header-top .logo-img{
  width: min(190px, 58vw) !important;
  max-width: 58vw !important;
}

#screenGame .header-top .mini-timer{
  flex: 0 0 auto !important;
  margin: 0 !important;
  display: flex !important;
}

#screenGame .timer-mur-row{
  margin-top: 4px !important;
}

@media (max-width: 430px){
  #screenGame .header-top{
    gap: 8px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  #screenGame .header-top .logo-img{
    width: min(150px, 52vw) !important;
    max-width: 52vw !important;
  }

  #screenGame .header-top .mini-timer{
    width: 76px !important;
    height: 40px !important;
    padding: 5px 7px !important;
  }
}

/* =========================================================
   JEDEMO — 4 murs indépendants alignés horizontalement
   ========================================================= */
#screenGame .zone-mur{
  width: min(360px, 100%) !important;
  max-width: min(360px, 100%) !important;
  min-width: 0 !important;
  margin: 4px auto !important;
  padding: 6px !important;
}

#screenGame .zone-mur .mur-wrap{
  width: 100% !important;
  height: 86px !important;
  min-height: 86px !important;
  max-height: 86px !important;
  padding: 5px 6px 4px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

#screenGame #mur{
  width: 100% !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: flex-end !important;
  gap: 7px !important;
  position: relative !important;
}

#screenGame .mur-niveau{
  width: 65px !important; /* 4 briques de 14px + 3 espaces de 3px */
  min-width: 65px !important;
  max-width: 65px !important;
  height: 54px !important;
  display: flex !important;
  flex-direction: column-reverse !important;
  justify-content: flex-start !important;
  align-items: center !important;
  padding: 2px !important;
  border-radius: 8px !important;
  border: 1px dashed rgba(15,23,42,.16) !important;
  background: rgba(255,255,255,.36) !important;
}

#screenGame .mur-niveau::before{
  content: attr(data-name);
  position: absolute;
  transform: translateY(-62px);
  font-size: .52rem;
  font-weight: 900;
  color: rgba(15,23,42,.50);
}

#screenGame .mur-niveau .ligne-briques{
  width: auto !important;
  display: flex !important;
  justify-content: center !important;
  gap: 3px !important;
  margin-bottom: 3px !important;
}

#screenGame .mur-niveau .brique{
  width: 14px !important;
  height: 14px !important;
  border-radius: 4px !important;
  border-width: 1px !important;
  flex: 0 0 14px !important;
}

#screenGame #murMessageZone{
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 !important;
  z-index: 999 !important;
  pointer-events: none !important;
}

#screenGame #murMessageZone .mur-level-message{
  background: rgba(255,255,255,.96) !important;
  border: 2px solid rgba(31,122,255,.25) !important;
  border-radius: 14px !important;
  padding: 5px 8px !important;
  font-weight: 900 !important;
  font-size: .72rem !important;
  line-height: 1.15 !important;
  text-align: center !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.12) !important;
}

@media (max-width: 430px){
  #screenGame .zone-mur{ width: min(330px, 100%) !important; }
  #screenGame #mur{ gap: 4px !important; }
  #screenGame .mur-niveau{
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
  }
  #screenGame .mur-niveau .brique{
    width: 12px !important;
    height: 12px !important;
    flex-basis: 12px !important;
  }
  #screenGame .mur-niveau .ligne-briques{ gap: 3px !important; }
}

.panel__title{
    text-align:center !important;
    color:blue !important;
    font-size:2rem !important;
    font-weight:bold !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:100% !important;
}

#murCategorie{
 color:#f4b400;
 font-size:2.1rem;
 font-weight:900;
 text-transform:uppercase;
 letter-spacing:.08em;
 text-shadow:0 2px 6px rgba(0,0,0,.25);
}

#screenGame .zone-mur .panel__title--categorie .current-game--mur{
 font-size:2rem !important;
 font-weight:900 !important;
 background:linear-gradient(180deg,#ffd86b,#f4b400);
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
 letter-spacing:.06em;
 text-shadow:none;
}

#screenGame .mur-niveau::before{
 font-size:.72rem !important;
 font-weight:800 !important;
 color:#24324a !important;
 letter-spacing:.04em;
 text-transform:uppercase;
}

.panel__title{
 display:flex;
 justify-content:center;
 align-items:center;
 text-align:center;
}


/* =========================================================
   Catégorie déplacée dans le bloc MURS
   ========================================================= */
#screenGame .zone-mur .panel__title--categorie{
  width: 100% !important;
  min-height: 34px !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

#screenGame .zone-mur .current-game--mur{
  margin: 0 !important;
  width: 100% !important;
  text-align: center !important;
  color: blue !important;
  font-size: clamp(1.25rem, 4vw, 2rem) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
}

#screenGame .bloc-gauche > .current-game{
  display: none !important;
}


/* Corrections demandées : suppression des pictogrammes dans la page de jeu */
.slogan::before{ content:none !important; }
.zone-mur .chateau, .chateau{ display:none !important; }

/* Suppression empreinte restante */
#screenGame .slogan, #screenGame .slogan-row{display:none !important;}
#screenGame .slogan::before, #screenGame .slogan::after{content:none !important; display:none !important;}



#screenGame .mur-niveau[data-level="1"] .brique{
  background:
    linear-gradient(145deg, rgba(255,255,255,.15), rgba(0,0,0,.18)),
    linear-gradient(#b7b7b7,#7f7f7f) !important;
  border:2px solid #5d5d5d !important;
}

#screenGame .mur-niveau[data-level="2"] .brique{
  background:
    linear-gradient(145deg, rgba(255,255,255,.22), rgba(0,0,0,.18)),
    linear-gradient(#cd7f32,#8c5523) !important;
  border:2px solid #5d3412 !important;
}

#screenGame .mur-niveau[data-level="3"] .brique{
  background:
    linear-gradient(145deg, rgba(255,255,255,.35), rgba(0,0,0,.12)),
    linear-gradient(#e5e5e5,#9a9a9a) !important;
  border:2px solid #6c6c6c !important;
}

#screenGame .mur-niveau[data-level="4"] .brique{
  background:
    linear-gradient(145deg, rgba(255,255,255,.40), rgba(0,0,0,.10)),
    linear-gradient(#ffd700,#c89b00) !important;
  border:2px solid #8a6a00 !important;
  box-shadow:
    0 0 12px rgba(255,215,0,.5),
    0 10px 14px rgba(0,0,0,.18) !important;
}

/* ===== Briques premium par niveau : pierre, bronze, argent, or ===== */
/* Textures CSS sans image externe : relief 3D, joints, reflets métalliques. */

#screenGame .mur-niveau .brique{
  position:relative;
  overflow:hidden;
  border-radius:7px;
  transform:translateZ(0);
  background-size:100% 100%, 22px 22px, 46px 46px, 100% 100% !important;
  box-shadow:
    inset 2px 2px 3px rgba(255,255,255,.35),
    inset -3px -4px 5px rgba(0,0,0,.33),
    0 4px 7px rgba(0,0,0,.28) !important;
}

#screenGame .mur-niveau .brique::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:5px;
  pointer-events:none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,0) 34%),
    linear-gradient(315deg, rgba(0,0,0,.22), rgba(0,0,0,0) 42%);
  mix-blend-mode:screen;
  opacity:.72;
}

#screenGame .mur-niveau .brique::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:7px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.38), rgba(255,255,255,0));
  transform:translateX(-125%) skewX(-18deg);
  opacity:.55;
}

/* Niveau 1 - Pierre : grain minéral, gris irrégulier */
#screenGame .mur-niveau[data-level="1"] .brique,
#screenGame .brique.niveau-1{
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.36) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 68%, rgba(0,0,0,.18) 0 2px, transparent 4px),
    repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 4px, rgba(0,0,0,.08) 5px 9px),
    linear-gradient(145deg, #d8d8d8 0%, #a8a8a8 42%, #777777 100%) !important;
  border:2px solid #595959 !important;
  box-shadow:
    inset 2px 2px 3px rgba(255,255,255,.42),
    inset -3px -4px 6px rgba(0,0,0,.34),
    0 5px 8px rgba(0,0,0,.28) !important;
}

/* Niveau 2 - Bronze : métal chaud, patine et reflets cuivrés */
#screenGame .mur-niveau[data-level="2"] .brique,
#screenGame .brique.niveau-2{
  background:
    radial-gradient(circle at 20% 25%, rgba(255,225,170,.42) 0 2px, transparent 4px),
    repeating-linear-gradient(105deg, rgba(255,224,150,.18) 0 5px, rgba(79,37,10,.15) 6px 13px),
    linear-gradient(90deg, rgba(255,255,255,.24), rgba(255,255,255,0) 22%, rgba(0,0,0,.18) 78%),
    linear-gradient(145deg, #f0a35c 0%, #bf6f2d 35%, #754016 100%) !important;
  border:2px solid #5b2f0d !important;
}

/* Niveau 3 - Argent : métal froid poli, stries et éclat */
#screenGame .mur-niveau[data-level="3"] .brique,
#screenGame .brique.niveau-3{
  background:
    linear-gradient(110deg, rgba(255,255,255,.68) 0 9%, transparent 10% 31%, rgba(255,255,255,.45) 32% 39%, transparent 40%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.18) 0 2px, rgba(0,0,0,.07) 3px 5px),
    radial-gradient(circle at 72% 28%, rgba(255,255,255,.55) 0 3px, transparent 9px),
    linear-gradient(145deg, #ffffff 0%, #cfcfcf 34%, #8f8f8f 74%, #efefef 100%) !important;
  border:2px solid #747474 !important;
  box-shadow:
    inset 2px 2px 3px rgba(255,255,255,.72),
    inset -3px -4px 7px rgba(0,0,0,.25),
    0 5px 8px rgba(0,0,0,.24) !important;
}

/* Niveau 4 - Or : métal précieux, éclats et halo */
#screenGame .mur-niveau[data-level="4"] .brique,
#screenGame .brique.niveau-4{
  background:
    radial-gradient(circle at 25% 22%, rgba(255,255,255,.75) 0 2px, transparent 7px),
    linear-gradient(115deg, rgba(255,255,255,.62) 0 11%, transparent 12% 34%, rgba(255,245,170,.43) 35% 45%, transparent 46%),
    repeating-linear-gradient(30deg, rgba(255,255,255,.16) 0 4px, rgba(106,75,0,.14) 5px 11px),
    linear-gradient(145deg, #fff4a3 0%, #ffd700 24%, #d49a00 58%, #8d6400 100%) !important;
  border:2px solid #8a6500 !important;
  box-shadow:
    inset 2px 2px 4px rgba(255,255,255,.78),
    inset -4px -5px 8px rgba(83,54,0,.36),
    0 0 12px rgba(255,215,0,.55),
    0 7px 12px rgba(0,0,0,.30) !important;
}

/* Petit scintillement premium uniquement pour l'or */
#screenGame .mur-niveau[data-level="4"] .brique::after,
#screenGame .brique.niveau-4::after{
  animation:briqueOrShine 2.6s ease-in-out infinite;
}

@keyframes briqueOrShine{
  0%, 38% { transform:translateX(-130%) skewX(-18deg); opacity:0; }
  50% { opacity:.65; }
  72%, 100% { transform:translateX(135%) skewX(-18deg); opacity:0; }
}



/* Correction MURS : afficher les noms des murs au lieu des chiffres */
#screenGame .mur-niveau::before{
  content: attr(data-name) !important;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  font-size: .58rem !important;
  font-family: "Baloo 2", cursive !important;
  font-weight: 700 !important;
  color: #CD7F32 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}


/* Bouton retour accueil actif et bien placé */
#btnHomeInGame{
  position: relative !important;
  z-index: 1000 !important;
  pointer-events: auto !important;
  flex-basis: 100% !important;
}


/* Compatibilité Firefox : le bouton reste au-dessus des blocs du jeu */
.barre-actions{
  position: relative !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
}
#btnHomeInGame{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 10000 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}


/* Médaille olympique affichée à la fin de chaque mur */
#screenGame #murMessageZone .mur-medaille{
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 150px !important;
  padding: 12px 14px 14px !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.97) !important;
  border: 2px solid rgba(31,122,255,.22) !important;
  box-shadow: 0 18px 42px rgba(15,23,42,.22), inset 0 1px 0 rgba(255,255,255,.85) !important;
  text-align: center !important;
  animation: medaillePop .55s cubic-bezier(.2,1.35,.35,1) both !important;
}
#screenGame #murMessageZone .mur-medaille__ruban{
  display:flex !important;
  gap:6px !important;
  margin-bottom:-4px !important;
  z-index: 1 !important;
}
#screenGame #murMessageZone .mur-medaille__ruban span{
  width:18px !important;
  height:36px !important;
  background: linear-gradient(180deg,#2563eb 0%,#fff 48%,#ef4444 100%) !important;
  clip-path: polygon(0 0,100% 0,82% 100%,50% 78%,18% 100%) !important;
  box-shadow: 0 4px 10px rgba(15,23,42,.18) !important;
}
#screenGame #murMessageZone .mur-medaille__piece{
  width:68px !important;
  height:68px !important;
  border-radius:50% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:34px !important;
  color:rgba(255,255,255,.92) !important;
  border:4px solid rgba(255,255,255,.7) !important;
  box-shadow: inset 0 6px 12px rgba(255,255,255,.45), inset 0 -8px 14px rgba(0,0,0,.18), 0 12px 22px rgba(15,23,42,.24) !important;
}
#screenGame #murMessageZone .mur-medaille--pierre .mur-medaille__piece{ background: linear-gradient(135deg,#9ca3af,#4b5563,#d1d5db) !important; }
#screenGame #murMessageZone .mur-medaille--bronze .mur-medaille__piece{ background: linear-gradient(135deg,#f59e0b,#92400e,#fbbf24) !important; }
#screenGame #murMessageZone .mur-medaille--argent .mur-medaille__piece{ background: linear-gradient(135deg,#f8fafc,#94a3b8,#e5e7eb) !important; color:#475569 !important; }
#screenGame #murMessageZone .mur-medaille--or .mur-medaille__piece{ background: linear-gradient(135deg,#fde047,#f59e0b,#fff7ad) !important; color:#7c2d12 !important; animation: medailleOrPulse 1.2s ease-in-out infinite alternate !important; }
#screenGame #murMessageZone .mur-medaille__titre{ margin-top:8px !important; font-weight:1000 !important; font-size:.9rem !important; color:#0f172a !important; }
#screenGame #murMessageZone .mur-medaille__nom{ font-weight:1000 !important; font-size:1.05rem !important; color:#1f7aff !important; text-transform:uppercase !important; letter-spacing:.04em !important; }
#screenGame #murMessageZone .mur-medaille__suite{ margin-top:3px !important; font-weight:800 !important; font-size:.72rem !important; color:#475569 !important; }
@keyframes medaillePop{ from{transform:scale(.55) translateY(10px); opacity:0;} to{transform:scale(1) translateY(0); opacity:1;} }
@keyframes medailleOrPulse{ from{transform:scale(1);} to{transform:scale(1.08);} }
@media (max-width:430px){
  #screenGame #murMessageZone .mur-medaille{ min-width:132px !important; padding:9px 10px 11px !important; }
  #screenGame #murMessageZone .mur-medaille__piece{ width:56px !important; height:56px !important; font-size:28px !important; }
  #screenGame #murMessageZone .mur-medaille__titre{ font-size:.78rem !important; }
  #screenGame #murMessageZone .mur-medaille__nom{ font-size:.9rem !important; }
}

/* =========================================================
   Correctif accueil catégories - scroll + icônes carrées
   Demande : faire défiler toutes les catégories et afficher
   le nom de chaque catégorie sous son image.
   ========================================================= */
.screen-start{
  justify-content:flex-start !important;
  max-height:calc(100dvh - 36px) !important;
  overflow:hidden !important;
  gap:8px !important;
  padding:10px 10px 8px !important;
}

.screen-start .start-logo,
.screen-start .start-slogan,
.screen-start .intro-learning,
.screen-start .start-rules{
  flex:0 0 auto !important;
}

.screen-start .start-logo .logo-img{
  height:58px !important;
  width:auto !important;
}

.screen-start .intro-learning{
  margin:4px auto 6px !important;
  font-size:.9rem !important;
  line-height:1.2 !important;
}

/* Zone défilable contenant toutes les catégories */
.games-grid{
  flex:1 1 auto !important;
  min-height:0 !important;
  max-height:calc(100dvh - 245px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior:contain !important;
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:10px !important;
  width:100% !important;
  margin:6px 0 8px !important;
  padding:2px 8px 12px !important;
}

.games-grid::-webkit-scrollbar{
  width:8px;
}
.games-grid::-webkit-scrollbar-thumb{
  background:rgba(31,122,255,.35);
  border-radius:999px;
}
.games-grid::-webkit-scrollbar-track{
  background:rgba(15,23,42,.06);
  border-radius:999px;
}

/* Tuile catégorie : image carrée + nom visible sous l'icône */
.game-tile{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  text-align:center !important;
  overflow:hidden !important;
  border-radius:16px !important;
}

.game-tile .tile-img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:1 / 1 !important;
  background-size:cover !important;
  background-position:center !important;
  flex:0 0 auto !important;
}

.game-tile strong{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:42px !important;
  padding:7px 6px 8px !important;
  font-size:.9rem !important;
  line-height:1.1 !important;
  color:var(--text) !important;
  background:#fff !important;
}

/* Les descriptions sont masquées sur l'accueil pour ne garder que le nom de catégorie sous l'icône. */
.game-tile small{
  display:none !important;
}

@media (min-width:768px){
  .screen-start{
    max-height:calc(100dvh - 36px) !important;
  }
  .games-grid{
    max-width:560px !important;
    max-height:calc(100dvh - 280px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

@media (max-width:380px){
  .games-grid{
    gap:8px !important;
    max-height:calc(100dvh - 225px) !important;
  }
  .game-tile strong{
    min-height:38px !important;
    font-size:.82rem !important;
  }
  .screen-start .intro-learning{
    display:none !important;
  }
}


/* Noms des catégories sous les icônes */
.game-tile{
 display:flex;
 flex-direction:column;
 align-items:center;
 text-align:center;
}
.game-tile .tile-img{
 width:140px !important;
 height:140px !important;
 display:block;
 background-size:cover;
 background-position:center;
 border-radius:12px;
}
.game-tile .cat-name{
 display:block;
 margin-top:8px;
 font-size:1rem;
 font-weight:700;
}


/* ===== Correctif définitif : noms des catégories admin sous les icônes ===== */
#screenStart .games-grid{
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch !important;
}
#screenStart .game-tile{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  text-align:center !important;
  padding:0 !important;
  background:#fff !important;
  overflow:hidden !important;
}
#screenStart .game-tile .tile-img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:1 / 1 !important;
  background-size:cover !important;
  background-position:center !important;
  border-radius:0 !important;
}
#screenStart .game-tile .cat-name,
#screenStart .game-tile strong.cat-name{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  min-height:42px !important;
  padding:8px 6px 10px !important;
  margin:0 !important;
  color:#111827 !important;
  background:#fff !important;
  font-size:.95rem !important;
  font-weight:800 !important;
  line-height:1.15 !important;
  white-space:normal !important;
  visibility:visible !important;
  opacity:1 !important;
}
#screenStart .game-tile small{display:none !important;}


/* =========================================================
   CORRECTION FINALE - libellés catégories visibles accueil
   Les noms viennent du champ `nom` géré dans admin-jedemo.
   ========================================================= */
#screenStart #gamesGrid.games-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:10px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  padding:4px 8px 14px !important;
  box-sizing:border-box !important;
}
#screenStart #gamesGrid .game-tile{
  display:grid !important;
  grid-template-rows:auto minmax(44px,auto) !important;
  align-items:stretch !important;
  justify-items:stretch !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  padding:0 !important;
  overflow:visible !important;
  border-radius:16px !important;
  background:#ffffff !important;
  color:#111827 !important;
  border:1px solid rgba(15,23,42,.12) !important;
}
#screenStart #gamesGrid .game-tile .tile-img{
  display:block !important;
  width:100% !important;
  aspect-ratio:1 / 1 !important;
  height:auto !important;
  min-height:0 !important;
  background-size:cover !important;
  background-position:center !important;
  border-radius:16px 16px 0 0 !important;
}
#screenStart #gamesGrid .game-tile .cat-name,
#screenStart #gamesGrid .game-tile strong.cat-name,
#screenStart #gamesGrid .game-tile span.cat-name{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  width:100% !important;
  min-height:44px !important;
  height:auto !important;
  padding:8px 6px 10px !important;
  margin:0 !important;
  overflow:visible !important;
  visibility:visible !important;
  opacity:1 !important;
  color:#111827 !important;
  background:#ffffff !important;
  font-size:.95rem !important;
  font-weight:900 !important;
  line-height:1.15 !important;
  text-align:center !important;
  white-space:normal !important;
  word-break:normal !important;
  text-transform:none !important;
}
#screenStart #gamesGrid .game-tile small{display:none !important;}

/* =========================================================
   ACCUEIL - blocs catégories image plein fond + texte overlay
   Demande : 2 blocs par ligne, icône de catégorie en fond complet,
   nom de catégorie affiché par-dessus.
   ========================================================= */
#screenStart #gamesGrid.games-grid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:12px !important;
  width:100% !important;
  padding:6px 8px 16px !important;
  margin:8px 0 10px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch !important;
}

#screenStart #gamesGrid .game-tile{
  position:relative !important;
  display:block !important;
  min-height:132px !important;
  aspect-ratio:1 / .78 !important;
  padding:0 !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:20px !important;
  background:#0f172a !important;
  box-shadow:0 14px 28px rgba(15,23,42,.18) !important;
  cursor:pointer !important;
  isolation:isolate !important;
}

#screenStart #gamesGrid .game-tile:hover{
  transform:translateY(-2px) !important;
}

#screenStart #gamesGrid .game-tile .tile-img{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-height:100% !important;
  aspect-ratio:auto !important;
  background-size:cover !important;
  background-position:center !important;
  border-radius:inherit !important;
  transform:scale(1.02) !important;
}

#screenStart #gamesGrid .game-tile::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  background:linear-gradient(180deg, rgba(15,23,42,.08), rgba(15,23,42,.62)) !important;
  pointer-events:none !important;
}

#screenStart #gamesGrid .game-tile .cat-name,
#screenStart #gamesGrid .game-tile strong.cat-name,
#screenStart #gamesGrid .game-tile span.cat-name{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  z-index:2 !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:center !important;
  width:100% !important;
  min-height:58px !important;
  height:auto !important;
  padding:26px 10px 12px !important;
  margin:0 !important;
  overflow:visible !important;
  color:#ffffff !important;
  background:linear-gradient(180deg, rgba(15,23,42,0), rgba(15,23,42,.78)) !important;
  text-shadow:0 2px 8px rgba(0,0,0,.70) !important;
  font-size:clamp(.9rem, 3.8vw, 1.1rem) !important;
  font-weight:1000 !important;
  line-height:1.12 !important;
  text-align:center !important;
  white-space:normal !important;
  text-transform:none !important;
  visibility:visible !important;
  opacity:1 !important;
}

#screenStart #gamesGrid .game-tile small{
  display:none !important;
}

@media (max-width:380px){
  #screenStart #gamesGrid.games-grid{
    gap:9px !important;
    padding-left:4px !important;
    padding-right:4px !important;
  }
  #screenStart #gamesGrid .game-tile{
    min-height:116px !important;
    border-radius:17px !important;
  }
  #screenStart #gamesGrid .game-tile .cat-name,
  #screenStart #gamesGrid .game-tile strong.cat-name,
  #screenStart #gamesGrid .game-tile span.cat-name{
    min-height:52px !important;
    padding:22px 7px 10px !important;
    font-size:.84rem !important;
  }
}

/* =========================================================
   CORRECTIF FIREFOX MOBILE - accueil catégories
   Problème observé : superposition des blocs dans Firefox.
   Solution : grille à lignes fixes, hauteur explicite des tuiles,
   sans dépendre de aspect-ratio pour le calcul de hauteur.
   ========================================================= */
#screenStart #gamesGrid.games-grid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows:132px !important;
  align-items:stretch !important;
  justify-items:stretch !important;
  gap:12px !important;
  width:100% !important;
  max-width:560px !important;
  margin:8px auto 10px !important;
  padding:6px 8px 16px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  box-sizing:border-box !important;
}

#screenStart #gamesGrid .game-tile{
  appearance:none !important;
  -webkit-appearance:none !important;
  position:relative !important;
  display:block !important;
  width:100% !important;
  height:132px !important;
  min-height:132px !important;
  max-height:132px !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:20px !important;
  background:#0f172a !important;
  box-shadow:0 14px 28px rgba(15,23,42,.18) !important;
  cursor:pointer !important;
  isolation:isolate !important;
  line-height:normal !important;
  box-sizing:border-box !important;
  transform:none;
}

#screenStart #gamesGrid .game-tile .tile-img{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-height:100% !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  background-size:cover !important;
  background-position:center !important;
  border-radius:inherit !important;
  transform:none !important;
  pointer-events:none !important;
}

#screenStart #gamesGrid .game-tile::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  background:linear-gradient(180deg, rgba(15,23,42,.08), rgba(15,23,42,.66)) !important;
  pointer-events:none !important;
}

#screenStart #gamesGrid .game-tile .cat-name,
#screenStart #gamesGrid .game-tile strong.cat-name,
#screenStart #gamesGrid .game-tile span.cat-name{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  z-index:2 !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:center !important;
  width:100% !important;
  min-height:56px !important;
  height:auto !important;
  max-height:78px !important;
  margin:0 !important;
  padding:24px 8px 11px !important;
  overflow:hidden !important;
  color:#fff !important;
  background:linear-gradient(180deg, rgba(15,23,42,0), rgba(15,23,42,.82)) !important;
  text-shadow:0 2px 8px rgba(0,0,0,.72) !important;
  font-size:clamp(.84rem, 3.6vw, 1.05rem) !important;
  font-weight:900 !important;
  line-height:1.12 !important;
  text-align:center !important;
  white-space:normal !important;
  word-break:normal !important;
  box-sizing:border-box !important;
  pointer-events:none !important;
}

#screenStart #gamesGrid .game-tile small{
  display:none !important;
}

@media (max-width:380px){
  #screenStart #gamesGrid.games-grid{
    grid-auto-rows:118px !important;
    gap:9px !important;
    padding-left:4px !important;
    padding-right:4px !important;
  }
  #screenStart #gamesGrid .game-tile{
    height:118px !important;
    min-height:118px !important;
    max-height:118px !important;
    border-radius:17px !important;
  }
  #screenStart #gamesGrid .game-tile .cat-name,
  #screenStart #gamesGrid .game-tile strong.cat-name,
  #screenStart #gamesGrid .game-tile span.cat-name{
    min-height:50px !important;
    max-height:70px !important;
    padding:20px 6px 9px !important;
    font-size:.8rem !important;
  }
}

@media (min-width:768px){
  #screenStart #gamesGrid.games-grid{
    grid-auto-rows:150px !important;
  }
  #screenStart #gamesGrid .game-tile{
    height:150px !important;
    min-height:150px !important;
    max-height:150px !important;
  }
}


/* ===== Overlay couleur tournante des catégories ===== */
.game-tile{position:relative !important; overflow:hidden !important;}
.game-tile::before{
 content:"";
 position:absolute; inset:0;
 background:rgba(0,0,0,.35);
 z-index:1;
}
.game-tile:nth-child(6n+1)::before{background:rgba(37,99,235,.45);}   /* bleu */
.game-tile:nth-child(6n+2)::before{background:rgba(22,163,74,.45);}   /* vert */
.game-tile:nth-child(6n+3)::before{background:rgba(249,115,22,.45);}  /* orange */
.game-tile:nth-child(6n+4)::before{background:rgba(236,72,153,.45);}  /* rose */
.game-tile:nth-child(6n+5)::before{background:rgba(147,51,234,.45);}  /* violet */
.game-tile:nth-child(6n+6)::before{background:rgba(79,70,229,.45);}   /* indigo */

.game-tile .tile-img{
 position:absolute !important;
 inset:0 !important;
 height:100% !important;
 z-index:0;
}
.game-tile strong,
.game-tile small{
 position:relative;
 z-index:2;
 color:#fff !important;
 text-shadow:0 2px 8px rgba(0,0,0,.5);
}

/* ===== JEDEMO accueil : overlay couleur par catégorie =====
   Overlay en dégradé : haut transparent, bas coloré.
   Couleurs répétées : bleu, orange, vert, rose, violet, indigo. */
#screenStart #gamesGrid .game-tile{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
}

#screenStart #gamesGrid .game-tile .tile-img{
  z-index:0 !important;
  transition:transform .22s ease, filter .22s ease !important;
}

#screenStart #gamesGrid .game-tile::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  pointer-events:none !important;
  background:linear-gradient(180deg,
    rgba(37,99,235,0) 0%,
    rgba(37,99,235,.08) 38%,
    rgba(37,99,235,.52) 68%,
    rgba(37,99,235,.92) 100%) !important;
}

#screenStart #gamesGrid .game-tile::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
  pointer-events:none !important;
  background:linear-gradient(180deg,
    rgba(255,255,255,.10) 0%,
    rgba(0,0,0,0) 42%,
    rgba(0,0,0,.16) 100%) !important;
}

#screenStart #gamesGrid .game-tile:nth-child(6n+1)::before{
  background:linear-gradient(180deg, rgba(37,99,235,0) 0%, rgba(37,99,235,.08) 38%, rgba(37,99,235,.52) 68%, rgba(37,99,235,.92) 100%) !important; /* bleu */
}
#screenStart #gamesGrid .game-tile:nth-child(6n+2)::before{
  background:linear-gradient(180deg, rgba(249,115,22,0) 0%, rgba(249,115,22,.08) 38%, rgba(249,115,22,.54) 68%, rgba(249,115,22,.94) 100%) !important; /* orange */
}
#screenStart #gamesGrid .game-tile:nth-child(6n+3)::before{
  background:linear-gradient(180deg, rgba(22,163,74,0) 0%, rgba(22,163,74,.08) 38%, rgba(22,163,74,.52) 68%, rgba(22,163,74,.92) 100%) !important; /* vert */
}
#screenStart #gamesGrid .game-tile:nth-child(6n+4)::before{
  background:linear-gradient(180deg, rgba(236,72,153,0) 0%, rgba(236,72,153,.08) 38%, rgba(236,72,153,.54) 68%, rgba(236,72,153,.94) 100%) !important; /* rose */
}
#screenStart #gamesGrid .game-tile:nth-child(6n+5)::before{
  background:linear-gradient(180deg, rgba(147,51,234,0) 0%, rgba(147,51,234,.08) 38%, rgba(147,51,234,.54) 68%, rgba(147,51,234,.94) 100%) !important; /* violet */
}
#screenStart #gamesGrid .game-tile:nth-child(6n+6)::before{
  background:linear-gradient(180deg, rgba(79,70,229,0) 0%, rgba(79,70,229,.08) 38%, rgba(79,70,229,.54) 68%, rgba(79,70,229,.94) 100%) !important; /* indigo */
}

#screenStart #gamesGrid .game-tile:hover .tile-img{
  transform:scale(1.04) !important;
  filter:saturate(1.08) contrast(1.03) !important;
}

#screenStart #gamesGrid .game-tile .cat-name,
#screenStart #gamesGrid .game-tile strong.cat-name,
#screenStart #gamesGrid .game-tile span.cat-name{
  z-index:3 !important;
  background:transparent !important;
  text-shadow:0 2px 10px rgba(0,0,0,.72), 0 1px 2px rgba(0,0,0,.65) !important;
}