/* Adaptations téléphone et tablette, chargées après commun.css sur toutes les pages.
   Accueil : grille d'icônes compacte sur téléphone. Jeux : pas de rebond ni de zoom parasite.
   Publicité : emplacements réservés, invisibles tant que js/pub.js ne les active pas. */

/* ---------- Toutes les pages ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button { -webkit-tap-highlight-color: transparent; }

/* ---------- Pages de jeu ---------- */
/* Glisser sur le plateau ne doit ni recharger la page (tirer vers le bas) ni la faire rebondir */
body.jeu { overscroll-behavior: none; }
/* Double-tap rapide sur les boutons : pas de zoom */
body.jeu .btn { touch-action: manipulation; }
body.jeu canvas { touch-action: none; }
/* Encoche et barre d'accueil des téléphones récents */
body.jeu { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); padding-bottom: max(20px, env(safe-area-inset-bottom)); }

/* ---------- Accueil : téléphone ---------- */
@media (max-width: 600px) {
  .page { padding: 18px 12px 32px; gap: 16px; }
  .page .entete { align-items: center; gap: 10px; }
  .page .entete h1 { font-size: 30px; }
  .page .entete p { font-size: 13.5px; margin-top: 6px; }

  /* Catégories : une seule ligne qui défile au doigt, collée en haut de l'écran */
  .page .outils {
    position: sticky; top: 0; z-index: 10;
    margin: 0 -12px; padding: 8px 12px;
    background: var(--bg);
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  }
  .page .outils::-webkit-scrollbar { display: none; }
  .page .outils .segment { flex-wrap: nowrap; flex-shrink: 0; }
  .page .outils .segment .btn { white-space: nowrap; }

  /* Grille d'icônes : 3 par ligne, nom en dessous, rien d'autre */
  .page .grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .page .bloc { aspect-ratio: auto; border-radius: 14px; box-shadow: none; }
  .page .bloc .visuel { aspect-ratio: 1; flex: none; margin: 6px 6px 0; padding: 18%; border-radius: 10px; }
  .page .bloc .bas { padding: 6px 4px 8px; }
  .page .bloc .ligne { flex-direction: column; align-items: center; gap: 0; }
  .page .bloc .nom {
    font-size: 12.5px; font-weight: 600; line-height: 1.2; text-align: center;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em;
  }
  .page .bloc .rec, .page .bloc .accroche { display: none; }
  .page .bloc:hover svg, .page .bloc.sel svg { transform: none; }
  .page .bloc:active { border-color: var(--accent); }
  .page .apropos { font-size: 14px; }
}
/* Très petits écrans (iPhone SE, 320 px) */
@media (max-width: 350px) {
  .page .grille { gap: 8px; }
  .page .bloc .nom { font-size: 11.5px; }
}

/* ---------- Accueil : tablette ---------- */
@media (min-width: 601px) and (max-width: 1024px) {
  .page { padding-left: 24px; padding-right: 24px; }
  .page .bloc .accroche { font-size: 12px; }
}

/* ---------- Emplacements publicitaires ---------- */
.pub { display: none; }
html.pub-on .pub {
  display: block;
  width: 100%;
  max-width: 980px;
  margin: 8px auto;
  text-align: center;
  /* Hauteur réservée : la page ne saute pas quand la pub arrive */
  min-height: 120px;
}
html.pub-on .pub::before {
  content: "Publicité";
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
  letter-spacing: .02em;
}
html.pub-on .pub ins.adsbygoogle { display: block; min-height: 100px; }
@media (max-width: 600px) { html.pub-on .pub { min-height: 270px; } }

/* Lien « Gérer les cookies » : visible seulement quand la pub (et donc le consentement) est active */
[data-cookies] { display: none; }
html.pub-on [data-cookies] { display: inline; cursor: pointer; }