/* ------------------------------------------------------------------------------------
   MofLand : version mobile (téléphones et petites tablettes)
   Chargée après moflink.css par header.php et header_deco.php, avec la balise viewport.
   Tout est sous @media : rien ne change sur un écran d'ordinateur.
   Le menu « Mon compte » (bouton .mof-burger) est ouvert/fermé par la classe mof-nav-open sur <body>.
   ------------------------------------------------------------------------------------ */

/* Hors mobile : le bouton du menu et les avis « mobile » sont cachés */
.mof-burger, .mof-mobile-note { display: none; }

@media (max-width: 980px) {

  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { font-size: 13px; background: #fff; }
  /* moflink.css fixe tous les liens à 10px */
  a:link, a:visited, a:hover, a:active { font-size: inherit; }
  span.pseudo { font-size: inherit; }
  .petit { font-size: 11px; }
  /* iOS zoome sur les champs en dessous de 16px */
  input, textarea, select, .connex_input { font-size: 16px; max-width: 100%; box-sizing: border-box; }
  img { max-width: 100%; height: auto; }

  /* ---------- Conteneur : pleine largeur ---------- */
  .conteneur { width: auto; margin: 0; padding: 6px 8px; border: 0; border-radius: 0; overflow-x: hidden; }

  /* ---------- En-tête ---------- */
  #header { height: auto; background-size: auto 78px; background-position: left top; position: relative; }
  #header_haut { height: auto; min-height: 37px; }
  #header_haut_pseudo, #header_haut_droit { display: none; }
  /* Liens du compte (Amis, Profil, Boîte à lettre…) : repliés derrière le bouton ☰ */
  #header_haut_profil1, #header_haut_profil2, #header_haut_profil3 { display: none; }
  .mof-burger { display: block; position: absolute; top: 4px; right: 0; z-index: 101;
                min-width: 44px; height: 32px; padding: 0 10px; border: 1px solid #c9d6e8; border-radius: 6px;
                background: #fff; color: #1d4f8c; font: bold 14px Verdana, Arial, sans-serif; cursor: pointer; }
  .mof-burger .mof-burger-count { color: #c00; }
  body.mof-nav-open .mof-burger { background: #1d4f8c; color: #fff; }
  body.mof-nav-open .mof-burger .mof-burger-count { color: #ffd; }
  body.mof-nav-open #header_haut { padding-top: 44px; }
  body.mof-nav-open #header_haut_profil1,
  body.mof-nav-open #header_haut_profil2,
  body.mof-nav-open #header_haut_profil3 {
    display: block; float: none; width: auto; height: auto; background: #fff; padding: 0; line-height: normal;
  }
  body.mof-nav-open #header_haut_profil1 { border-top: 1px solid #e3e8ef; }
  body.mof-nav-open #header_haut_profil1 a,
  body.mof-nav-open #header_haut_profil2 a,
  body.mof-nav-open #header_haut_profil3 a {
    display: block; padding: 10px 8px; border-bottom: 1px solid #e3e8ef; font-size: 15px;
  }
  body.mof-nav-open #header_haut_profil1 br,
  body.mof-nav-open #header_haut_profil2 br { display: none; }
  /* compteurs (amis, partages, messages) collés au lien qui précède */
  body.mof-nav-open #header_haut span[id^="blocMaj"], body.mof-nav-open #majMess { float: right; margin-top: -32px; margin-right: 8px; }
  #header_haut_profil3 a[href="zone_deconnect.php"] { color: #a33; }

  /* Visiteur non connecté : formulaire de connexion sous le logo */
  #header_haut form { padding: 42px 0 6px; }
  #header_haut form .connex_input { display: block; width: 100%; margin: 0 0 6px; }

  #header_bas { height: auto; }
  #header_bas_infos { float: none; width: auto; padding: 4px 2px; }
  #header_bas_infos #connecte { display: none; }   /* liste des amis connectés : trop longue sur téléphone */
  #header_bas_menu { float: none; }
  #menu { margin: 4px 0 2px; }
  ul.menuPrincipal { height: auto; display: flex; max-width: 500px; } /* images du menu : ~125 px max, pas d'agrandissement flou */
  ul.menuPrincipal li.menu-level1 { float: none; flex: 1 1 0; min-width: 0; padding: 0; }
  ul.menuPrincipal li.menu-level1 img { display: block; width: 100%; height: auto; }
  .mg-news-badge { top: -7px; right: 0; font-size: 8px; padding: 0 4px; }

  /* ---------- Pied de page ---------- */
  #footer { height: auto; padding: 10px 4px; background-size: auto 100%; line-height: 1.8; }

  /* ---------- Mises en page à colonnes fixes ---------- */
  label { float: none; display: block; width: auto; margin: 6px 0 2px; padding: 0; text-align: left; }
  div.onglet, div.onglet-note { width: auto; float: none; line-height: 2.4; }
  div.bloc-onglet, div.bloc-onglet-current { height: auto; margin-bottom: 6px; }
  span.bloc-onglet, span.bloc-onglet-current { display: inline-block; margin: 0 4px 4px 0; padding: 6px 8px; border: 1px solid #cacaca; }

  /* Tableaux de largeur fixe (550, 600, 800 px…) : pleine largeur */
  .conteneur table[width] { width: 100% !important; }
  .tbg2, .tbgG { width: 100%; }
  .conteneur td[width] { width: auto; }
  /* Tableaux larges (classements, listes) : défilement horizontal plutôt que débordement */
  table.tbg, table.tbg2, table.sortable { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.sortable td { white-space: normal; }

  /* Accueil connecté (quick_links.php) : la grille 3 x 3 de blocs devient une colonne */
  table.ql-grid, table.ql-grid > tbody, table.ql-grid > tbody > tr, table.ql-grid > tbody > tr > td {
    display: block; width: auto !important;
  }
  table.ql-grid > tbody > tr > td { padding: 0 0 6px; }
  #bloc-1-1, #bloc-1-2, #bloc-1-3, #bloc-2-1, #bloc-2-2, #bloc-2-3 { float: none; }
  div#style-bloc { padding: 4px 0; }

  /* MofLink (zone_liens.php) : arborescence au-dessus de la liste des liens */
  #middle { width: auto; margin-left: 0; }
  #left, #right { float: none; width: auto; margin: 0 0 10px; }
  #left { max-height: 40vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }  /* la liste des liens reste en vue */
  #left a, #right a { line-height: 1.7; }
  #border { width: auto; }

  /* Accueil visiteur (zone_accueil_deconnecte.php) */
  #home_header { height: auto; background-size: cover; background-position: left center; text-align: center; padding: 10px 0; }
  #home_header_form { width: auto; padding: 120px 12px 10px; }
  #home_header_form form { max-width: 280px; margin: 0 auto; }
  #home_header_form .connex_input { width: 100%; }
  div.present_module { width: auto; padding: 0; margin: 10px 0; }
  div.present_moflink, div.present_mofgames, div.present_mofdate { float: none; width: auto; max-width: 320px; margin: 0 auto 14px; }

  div.connexion { margin: 30px 0 0; padding: 16px; }
  div#aide { margin: 0; }

  /* Fenêtres Modalbox (ajout de lien, onglets…) : pleine largeur */
  #MB_window { left: 0 !important; width: 100% !important; box-sizing: border-box; }
  #MB_content { max-height: calc(100vh - 60px); }
  #MB_content table, #MB_content form, #MB_content div { width: auto !important; max-width: 100%; }
  #MB_content table { width: 100% !important; }
  #MB_content td { white-space: normal; }
  #MB_content input:not([type]), #MB_content input[type="text"], #MB_content input[type="password"],
  #MB_content select, #MB_content textarea { width: 100%; }
  /* champs à size="30" dans des tableaux : sans ça, ils élargissent la page */
  .conteneur td input:not([type]), .conteneur td input[type="text"], .conteneur td textarea { width: 100%; }
  .mofpop #acces { float: none; width: auto; margin-top: 0; }
  .mofpop #head, .mofpop #content { margin: 6px 0; }

  /* Lecteurs Flash des anciens jeux : ne débordent plus de l'écran */
  object, embed { max-width: 100%; }

  /* ---------- Avis « jeu non jouable / peu adapté sur mobile » ---------- */
  .mof-mobile-note { display: block; margin: 8px 0 12px; padding: 10px 12px; border-radius: 8px;
                     background: #fff3cd; border: 1px solid #f2c14e; color: #5c4400; font-size: 13px; line-height: 1.45; }
  .mof-mobile-note b { color: #412402; }
  .mof-mobile-note.mof-mobile-ko { background: #fbe3e3; border-color: #efb4b4; color: #7a2323; }
  .mof-mobile-note.mof-mobile-ko b { color: #5a1414; }
}

/* Avis mobile aussi sur une tablette tactile plus large (pas de souris) */
@media (min-width: 981px) and (hover: none) and (pointer: coarse) {
  .mof-mobile-note { display: block; margin: 8px 0 12px; padding: 10px 12px; border-radius: 8px;
                     background: #fff3cd; border: 1px solid #f2c14e; color: #5c4400; font-size: 13px; line-height: 1.45; }
  .mof-mobile-note.mof-mobile-ko { background: #fbe3e3; border-color: #efb4b4; color: #7a2323; }
}