/* Mobile fixes v5 */
@media (max-width: 768px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  *, *::before, *::after { box-sizing: border-box; }

  /* Tighten common paddings */
  .max-w-6xl.mx-auto.px-4 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
  .py-10 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  .p-6 { padding: 1rem !important; }     /* many cards */
  .p-5 { padding: 1rem !important; }     /* topic cards */
  .rounded-3xl { border-radius: 1.25rem !important; }

  /* Ensure flex children can shrink */
  .min-w-0 { min-width: 0 !important; }
  .flex > * { min-width: 0; }

  /* Topic list: make title/meta wrap (no forced single-line) */
  a[href^="/topic"] .truncate {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* Badge / meta blocks should wrap */
  a[href^="/topic"] .flex { flex-wrap: wrap; }

  /* Contact form + any embedded anti-bot widget */
  form, .contact, .contact-form { width: 100% !important; max-width: 100% !important; }
  input, textarea, select, button { max-width: 100% !important; }

  /* If Cloudflare Turnstile is present, keep it inside viewport */
  .cf-turnstile, .cf-turnstile * { max-width: 100% !important; }
  .cf-turnstile { overflow: hidden; }
  @media (max-width: 360px) {
    .cf-turnstile { transform: scale(0.92); transform-origin: left top; }
  }

  /* Responsive video embeds */
  iframe, video { max-width: 100% !important; width: 100% !important; height: auto !important; }
  .video, .embed, .embed-video, .prose iframe { max-width: 100% !important; }

  /* Forum posts: prevent any content from forcing horizontal scroll */
  .post-body, .prose, .prose * {
    max-width: 100% !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .post-body img, .prose img { max-width: 100% !important; height: auto !important; }
  .post-body iframe, .prose iframe { max-width: 100% !important; }
  .post-body pre, .prose pre { max-width: 100% !important; overflow-x: auto !important; }
  .post-body code, .prose code { word-break: break-word; }
  .post-body table, .prose table { display: block; max-width: 100% !important; overflow-x: auto !important; }
}


/* Patch approfondi mobile + thème crème v10 */
html, body { width:100%; max-width:100%; overflow-x:hidden !important; }
*, *::before, *::after { box-sizing:border-box; }
body { color:#3f2b1f !important; }

/* Header mobile propre : aucune sortie d'écran */
.hn-topbar { min-width:0; }
.hn-brand { min-width:0; max-width:100%; }
.hn-brand img { flex:0 0 auto; }
.hn-brand .leading-tight { min-width:0; }
.hn-brand .text-lg { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hn-auth { min-width:0; }

@media (max-width: 768px) {
  header { position:sticky; top:0; }
  .hn-topbar { padding:10px 12px !important; gap:8px !important; flex-wrap:nowrap !important; }
  .hn-brand { gap:8px !important; flex:1 1 auto !important; min-width:0 !important; }
  .hn-brand img { width:50px !important; height:50px !important; border-radius:14px !important; padding:4px !important; }
  .hn-brand .text-lg { font-size:20px !important; line-height:1.1 !important; }
  .hn-brand .text-xs { display:none !important; }
  .hn-auth { flex:0 0 auto !important; gap:6px !important; }
  .hn-login, .hn-register, .hn-auth button { padding:9px 12px !important; font-size:14px !important; border-radius:14px !important; white-space:nowrap !important; }
  .hn-auth button.lg\:hidden { display:inline-flex !important; }
}
@media (max-width: 430px) {
  .hn-topbar { padding:8px 10px !important; }
  .hn-brand img { width:46px !important; height:46px !important; }
  .hn-brand .text-lg { font-size:18px !important; max-width:142px !important; }
  .hn-login, .hn-register, .hn-auth button { padding:8px 10px !important; font-size:13px !important; }
}
@media (max-width: 380px) {
  .hn-brand .text-lg { max-width:118px !important; }
  .hn-register { display:none !important; }
}

/* Conteneurs mobile */
@media (max-width: 768px) {
  .max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl { max-width:100% !important; }
  .mx-auto { margin-left:auto !important; margin-right:auto !important; }
  .px-4 { padding-left:14px !important; padding-right:14px !important; }
  .py-10 { padding-top:24px !important; padding-bottom:24px !important; }
  .mt-12 { margin-top:28px !important; }
  .rounded-\[2rem\] { border-radius:22px !important; }
  .rounded-3xl { border-radius:20px !important; }
  h1 { font-size:42px !important; line-height:1.05 !important; }
  h2 { font-size:26px !important; line-height:1.15 !important; }
  p { overflow-wrap:anywhere; }
  .grid { min-width:0; }
  .grid > * { min-width:0; }
  .flex { min-width:0; }
}
@media (max-width: 430px) {
  h1 { font-size:34px !important; }
  h2 { font-size:24px !important; }
}

/* Bannière accueil */
@media (max-width: 768px) {
  img[src*="hamsternain-banner"] { width:100% !important; max-width:100% !important; height:auto !important; display:block !important; }
}

/* Section contact : mobile sans débordement */
#contact { overflow:hidden !important; }
#contact .grid { width:100% !important; }
#contact form { width:100% !important; max-width:100% !important; min-width:0 !important; }
#contact input, #contact textarea, #contact select, #contact button { width:100% !important; max-width:100% !important; min-width:0 !important; }
#contact input[type="file"] { font-size:14px !important; line-height:1.4 !important; color:#3f2b1f !important; background:#fffaf5 !important; border-radius:14px !important; padding:8px !important; }
#contact .hn-contact-logo { max-width:180px !important; max-height:180px !important; }
#contact .hn-turnstile-wrap { width:100% !important; max-width:100% !important; overflow:hidden !important; justify-content:center !important; }
#contact .cf-turnstile { max-width:100% !important; transform-origin:left center !important; }
@media (max-width: 768px) {
  #contact { padding:18px !important; margin-left:0 !important; margin-right:0 !important; }
  #contact .grid { display:block !important; }
  #contact .flex.flex-col { align-items:flex-start !important; }
  #contact .hn-contact-logo { width:130px !important; height:130px !important; padding:10px !important; margin-bottom:18px !important; }
  #contact form { margin-top:22px !important; padding:16px !important; border-radius:22px !important; }
  #contact input, #contact textarea { padding:14px 16px !important; font-size:16px !important; }
  #contact textarea { min-height:150px !important; }
}
@media (max-width: 390px) {
  #contact .cf-turnstile { transform:scale(.86); }
  #contact .hn-turnstile-wrap { justify-content:flex-start !important; }
}

/* Lisibilité forum / badges */
.text-slate-100,.text-slate-200,.text-slate-300,.text-white { color:#3f2b1f !important; }
.text-slate-400,.text-slate-500 { color:#6f5a4b !important; }
.text-indigo-200,.text-cyan-200,.text-sky-200,.text-emerald-200 { color:#4b2b18 !important; }
span[class*="bg-indigo-500"], span[class*="bg-cyan-500"], span[class*="bg-emerald-500"], span[class*="bg-sky-500"] {
  color:#3f2b1f !important; background:#ead8c8 !important; border-color:#c9aa8e !important; font-weight:700 !important;
}
a { color:#6f442b; }
a:hover { color:#3f2b1f; }

/* Page outils et cartes */
.bg-slate-950,.bg-slate-900,.bg-slate-800,
.bg-slate-950\/40,.bg-slate-950\/60,.bg-slate-900\/40,.bg-slate-800\/60 {
  background-color:#fff7ef !important; color:#3f2b1f !important;
}
.border-slate-800,.border-slate-700 { border-color:#d8c2af !important; }


/* Correction ciblée Cloudflare Turnstile mobile v12
   Ne touche pas aux chemins /public des images. */
#contact .hn-turnstile-wrap{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow:visible !important;
  display:block !important;
  padding:12px !important;
  background:#fffaf5 !important;
  border:1px solid #d8c2af !important;
  border-radius:22px !important;
}
#contact .hn-turnstile-wrap .cf-turnstile{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
}
#contact .hn-turnstile-wrap .cf-turnstile > div{
  width:100% !important;
  max-width:100% !important;
}
#contact .hn-turnstile-wrap iframe{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  border-radius:12px !important;
}
@media (max-width: 768px){
  #contact .hn-turnstile-wrap{
    padding:10px !important;
    border-radius:20px !important;
  }
  #contact .cf-turnstile{
    transform:none !important;
    transform-origin:center center !important;
  }
}
@media (max-width: 390px){
  #contact .cf-turnstile{
    transform:none !important;
  }
  #contact .hn-turnstile-wrap{
    justify-content:center !important;
  }
}