/* =============================================================
   KODAMA · RESPONSIVE (smartphone & tablette)
   Chargée par chaque page via <link rel="stylesheet" href="responsive.css">.
   Les pages sont en styles « inline » ; on cible les motifs rendus
   (colon + espace, ex. "grid-template-columns: repeat(3, 1fr)") + !important.
   ============================================================= */

/* ---------- Nav : hamburger masqué par défaut (desktop) ---------- */
.nav-burger { display: none; }
/* ---------- Nav : loupe — pastille sur mobile, bouton libellé sur desktop ---------- */
.nav-search-m { display: none; }

/* ---------- Nav : le libellé « Rechercher » cède la place à la loupe seule ---------- */
@media (max-width: 1024px) {
  .nav-links a { white-space: nowrap !important; }
  .nav-search-d span { display: none !important; }
  .nav-search-d { padding: 8px 10px !important; }
}

/* ---------- Tablette & petits écrans : on empile ---------- */
@media (max-width: 860px) {

  /* 2 colonnes asymétriques (héros, page jeu, encart studio, à-la-une,
     scénarios, presse, pied de page, cartes admin) → une colonne */
  [style*="grid-template-columns: 1.05fr"],
  [style*="grid-template-columns: 1.1fr"],
  [style*="grid-template-columns: 1.15fr"],
  [style*="grid-template-columns: 1.3fr"],
  [style*="grid-template-columns: 1.35fr"],
  [style*="grid-template-columns: 1.4fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1fr 500px"],
  [style*="grid-template-columns: 200px"],
  [style*="grid-template-columns: 288px"],
  [style*="grid-template-columns: 400px"],
  [style*="grid-template-columns: 96px 1fr"],
  [style*="grid-template-columns: 78px"] {
    grid-template-columns: 1fr !important;
  }

  /* Slider jeux (accueil) : 2 cartes sur tablette */
  [style*="scroll-snap-align"] { flex-basis: calc(50% - 11px) !important; }

  /* Grilles de cartes → 2 colonnes sur tablette */
  [style*="grid-template-columns: repeat(3, "],
  [style*="grid-template-columns: repeat(4, "],
  [style*="grid-template-columns: repeat(5, "] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Écarts trop grands une fois empilé */
  [style*="gap: 48px"],
  [style*="gap: 44px"],
  [style*="gap: 40px"],
  [style*="gap: 36px"],
  [style*="gap: 30px"] { gap: 22px !important; }

  /* Marges latérales des grands conteneurs */
  [style*="max-width: 1200px"],
  [style*="max-width: 1100px"],
  [style*="max-width: 1000px"],
  [style*="max-width: 980px"],
  [style*="max-width: 760px"],
  [style*="max-width: 720px"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Grands blocs colorés / cartes très rembourrés */
  [style*="padding: 52px 50px"],
  [style*="padding: 48px 44px"],
  [style*="padding: 46px 46px"],
  [style*="padding: 44px 46px"],
  [style*="padding: 44px 44px"],
  [style*="padding: 42px 44px"],
  [style*="padding: 40px 44px"],
  [style*="padding: 36px 24px"],
  [style*="padding: 32px 28px"],
  [style*="padding: 26px 30px"] {
    padding-left: 22px !important;
    padding-right: 22px !important;
    padding-top: 30px !important;
  }

  /* ----- Barre de navigation : menu hamburger ----- */
  .nav-bar { padding: 10px 16px !important; }
  .nav-burger { display: flex !important; }
  .nav-search-m { display: flex !important; }
  .nav-search-d { display: none !important; }
  .nav-back { display: none !important; }
  .nav-links {
    position: absolute !important;
    top: 100% !important; left: 0 !important; right: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: center !important;
    gap: 2px !important;
    background: #FFFDF7 !important;
    border-bottom: 1px solid #efe7d6 !important;
    box-shadow: 0 22px 34px rgba(0,0,0,.10) !important;
    padding: 12px 16px 16px !important;
    display: none !important;
  }
  .nav-bar[data-menu-open="true"] .nav-links { display: flex !important; }
  .nav-links a { padding: 13px 8px !important; font-size: 16px !important; text-align: center !important; }
  /* « Nos jeux » perd sa pastille verte pleine largeur : sur mobile elle se
     lisait comme « page en cours ». C'est la page ouverte qui est en noir. */
  .nav-links .nav-cta {
    background: none !important;
    color: #4A8B24 !important;
    font-weight: 800 !important;
    border-radius: 0 !important;
  }
  .nav-links .nav-cur {
    background: #1B1B1B !important;
    color: #fff !important;
    border-radius: 26px !important;
    margin: 2px 22px !important;
  }
  /* le filet rose devient inutile sous la pastille noire — on le rend
     transparent plutôt que de le masquer : le libellé est lui aussi dans
     un span, et un display:none l'emporterait avec lui. */
  .nav-links .nav-cur > span { background: transparent !important; }
  /* pastille « Nos jeux » : même largeur que les autres entrées, texte centré */
  .nav-links a > span { left: 50% !important; right: auto !important; width: 46px !important; transform: translateX(-50%) !important; }
  [style*="height: 54px"] { height: 44px !important; }
  /* Sous-titres manuscrits (Caveat) : coupures de lignes plus harmonieuses */
  [style*="Caveat"] { font-size: 19px !important; line-height: 1.4 !important; max-width: 26ch !important; text-wrap: balance; }
  [style*="Caveat"] > span { display: inline !important; text-wrap: balance; }
  [style*="Caveat"] > span + span::before { content: " "; }
}

/* ---------- Smartphone : lecture confortable en 1 colonne ---------- */
@media (max-width: 560px) {

  /* Cartes de contenu pleine largeur (jeux, articles, piliers, à-la-une) */
  [style*="grid-template-columns: repeat(3, "] {
    grid-template-columns: 1fr !important;
  }
  /* Slider jeux : 1 carte + aperçu de la suivante */
  [style*="scroll-snap-align"] { flex-basis: calc(100% - 34px) !important; }
  /* Vignettes / petites cartes (galerie, specs, esprits, auteurs) : 2 colonnes */
  [style*="grid-template-columns: repeat(4, "],
  [style*="grid-template-columns: repeat(5, "] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Grands titres : réduits (chaînage avec Fredoka pour ne toucher que le texte) */
  [style*="66px"][style*="Fredoka"] { font-size: 33px !important; }
  [style*="60px"][style*="Fredoka"] { font-size: 32px !important; }
  [style*="54px"][style*="Fredoka"] { font-size: 31px !important; }
  [style*="52px"][style*="Fredoka"] { font-size: 30px !important; }
  [style*="50px"][style*="Fredoka"] { font-size: 30px !important; }
  [style*="48px"][style*="Fredoka"] { font-size: 30px !important; }
  [style*="46px"][style*="Fredoka"] { font-size: 29px !important; }
  [style*="44px"][style*="Fredoka"] { font-size: 29px !important; }
  [style*="42px"][style*="Fredoka"] { font-size: 28px !important; }
  [style*="40px"][style*="Fredoka"] { font-size: 27px !important; }

  /* marges latérales encore réduites */
  [style*="max-width: 1200px"],
  [style*="max-width: 1100px"],
  [style*="max-width: 1000px"],
  [style*="max-width: 980px"],
  [style*="max-width: 760px"],
  [style*="max-width: 720px"] {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* ---------- La gazette (Pti Coin) ---------- */
@media (max-width: 860px) {
  /* colonne des brèves : le filet vertical disparaît, la colonne passe dessous */
  .gz-aside {
    border-left: none !important;
    border-top: 1px solid #dfd3b8 !important;
    padding-left: 0 !important;
    padding-top: 22px !important;
    margin-top: 22px !important;
  }
  .gz-lead { padding-right: 0 !important; }
  /* panneau gazette de l'accueil */
  [style*="padding: 40px 48px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 26px !important;
  }
}
@media (max-width: 560px) {
  /* le texte justifié devient illisible en colonne étroite */
  [style*="text-align: justify"] { text-align: left !important; }
}

/* ---------- Filtres de catégories : menu déroulant sur mobile ---------- */
.cat-select { display: none; }
@media (max-width: 640px) {
  .cat-chips { display: none !important; }
  .cat-select { display: flex !important; align-items: center; }
}

/* ---------- Catalogue : jeux en deux colonnes sur téléphone ---------- */
@media (max-width: 560px) {
  .cat-grid[style] { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .cat-grid > a { padding: 9px !important; border-radius: 18px !important; }
  /* visuel */
  .cat-grid > a > div:nth-child(1) { border-radius: 12px !important; padding: 8px !important; }
  /* étiquettes (catégorie, joueurs, durée) */
  .cat-grid > a > div:nth-child(2) { gap: 5px !important; margin-top: 10px !important; }
  .cat-grid > a > div:nth-child(2) > span { font-size: 9px !important; padding: 3px 7px !important; }
  /* titre */
  .cat-grid > a > div:nth-child(3) { font-size: 17px !important; line-height: 1.15 !important; margin: 9px 0 3px !important; }
  /* accroche : deux lignes maxi */
  .cat-grid > a > div:nth-child(4) {
    font-size: 12.5px !important; line-height: 1.35 !important; margin-bottom: 9px !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  /* pied de carte */
  .cat-grid > a > div:nth-child(5) { flex-wrap: wrap !important; gap: 7px !important; }
  .cat-grid > a > div:nth-child(5) > span { font-size: 12px !important; }
  .cat-grid > a > div:nth-child(5) span[style*="border-radius: 22px"] { padding: 4px 9px !important; font-size: 10.5px !important; }
}

/* ---------- Bannière d'accueil : pile de cartes ---------- */
@media (max-width: 860px) {
  [style*="padding: 56px 52px"] { padding: 30px 22px !important; }
  [style*="border-radius: 36px"] { border-radius: 26px !important; }
}
@media (max-width: 640px) {
  /* colonne visuelle de la bannière : hauteur réduite, carte à la largeur de l'écran */
  [style*="height: 392px"] { height: 340px !important; }
  [style*="width: 340px"][style*="position: absolute"] {
    width: 100% !important;
    left: 0 !important;
    top: 10px !important;
  }
  /* pastilles de navigation de la pile */
  [style*="width: 340px"][style*="bottom: -2px"] { width: 100% !important; left: 0 !important; }
  /* cercles décoratifs qui débordent */
  [style*="width: 280px"][style*="border-radius: 50%"] { width: 190px !important; height: 190px !important; }
}

@media (max-width: 640px) {
  /* colonne du formulaire newsletter */
  [style*="min-width: 340px"] { min-width: 0 !important; }
  /* mascottes flottantes de la bannière : masquées (elles débordent) */
  [style*="position: absolute"][style*="rotate(7deg)"],
  [style*="position: absolute"][style*="rotate(-8deg)"] { display: none !important; }
}

/* ---------- Popup créateur·rice : photo au-dessus, texte dessous sur mobile ---------- */
@media (max-width: 700px) {
  .pmodal { grid-template-columns: 1fr !important; gap: 16px !important; justify-items: center; }
  .pmodal-photo { width: 100% !important; max-width: 190px; }
  .pmodal-txt { padding-right: 0 !important; width: 100%; border-top: 1.5px solid #e9e1d0; padding-top: 16px; }
  .pmodal-txt h3 { text-align: center; }
  .pmodal-txt h3 + div { text-align: center; }
  .pmodal-box { padding: 22px 20px 24px !important; border-radius: 22px !important; }
}

/* ---------- Encart studio : l'illustration reprend sa hauteur naturelle ---------- */
@media (max-width: 860px) {
  .studio-img { min-height: 0 !important; margin: 0 !important; align-self: center !important; }
  .studio-img img { position: static !important; height: auto !important; max-height: 210px; object-fit: contain !important; }
}

/* ---------- Admin : rail des pages ----------
   Grand écran : le rail sort du bloc principal et se pose dans la marge
   gauche, fixe au scroll. Sous 1680px il n'y a plus la place : il reprend
   sa colonne à l'intérieur du bloc. */
@media (min-width: 1680px) {
  .adm-rail {
    position: fixed !important;
    top: 132px !important;
    left: calc((100vw - 1200px) / 2 - 230px) !important;
    width: 206px !important;
    max-height: calc(100dvh - 154px) !important;
  }
  .adm-body--list { grid-template-columns: 288px minmax(0, 1fr) !important; }
  .adm-body--nolist { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ---------- Admin : rail en ligne sur petit écran ---------- */
@media (max-width: 1000px) {
  .adm-body { grid-template-columns: 1fr !important; }
  .adm-rail { position: static !important; max-height: none !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center; }
  .adm-rail > div { width: 100%; }
}

/* ---------- Pti Coin : manchette et sous-titre manuscrit, bureau seulement ---------- */
@media (max-width: 640px) {
  .gz-masthead, .gz-sub { display: none !important; }
}

/* ---------- Page jeu : téléchargements en une colonne sur téléphone ---------- */
@media (max-width: 640px) {
  .dl-grid { grid-template-columns: 1fr !important; }
}