/* Overrides de base pour lisibilité mobile sans casser le desktop */

@media (max-width: 992px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  /* Masquer latérales, contenu pleine largeur */
  #left,
  #right {
    display: none !important;
  }
  #middle {
    margin: 0 !important;
  }
  /* Conteneur principal fluide */
  #principal {
    max-width: 100% !important;
    width: 100% !important;
  }
  .column_in,
  .column_in_accueil,
  .column_in_grey,
  .column_in_comment,
  .column_in_comment_grey,
  .column_in_comment_in,
  .column_in_pagination,
  .show_arbo,
  .title_h,
  .title_h_1,
  .title_h_2 {
    width: 100% !important;
  }

  /* Boxtop en pile */
  .one_third {
    width: 100% !important;
    float: none !important;
  }

  /* Images fluides */
  img {
    max-width: 100%;
    height: auto;
  }
  /* Conteneur: légère marge interne */
  #principal {
    padding: 0 12px;
    box-sizing: border-box;
    background: #ffffff;
  }
  #top_0 {
    background: #ffffff;
  }
  #boxtop,
  #main1,
  #middle {
    background: #ffffff;
  }
  #boxtop {
    margin-top: 60px !important;
  }
  /* Simplifier la zone header sur mobile */
  #top,
  #top1,
  #top3,
  #top4,
  #bg_menutop {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #top_0 {
    padding: 6px 12px !important;
    margin: 0 !important;
  }
  #top2 {
    margin: 0 !important;
    height: auto !important;
  }
  #principal {
    padding-top: 6px !important;
  }

  /* Footer responsive: éviter le texte coupé */
  #footer_bottom {
    height: auto !important;
    background-size: cover !important;
    padding: 12px 10px !important;
    margin-bottom: 0 !important; /* supprimer la bande blanche sous le footer */
  }
  #footer_bottom .txtfoot,
  .txtfoot {
    padding: 12px 0 28px 0 !important; /* espace sous le texte du footer (augmenté) */
    line-height: 1.4 !important;
  }
  /* Header: éviter recouvrement */
  #top,
  #top4,
  #bg_menutop {
    display: none !important;
  }
  #top_0 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
  }
  #top2 {
    margin-top: 6px;
    position: relative;
    z-index: 5;
    background: #ffffff;
  }
  /* Eléments à largeur fixe → fluides */
  .example-wrapper,
  .sites-slider,
  #menuin,
  .column_random2,
  .column_in_description_site_category,
  .column_in_description_site_category_item {
    width: 100% !important;
  }
  /* Réduction titres trop grands */
  #boxtop2,
  #boxtop3,
  #boxtop4 {
    font-size: 1.6em !important;
  }
  .t1,
  .t2 {
    font-size: 2.2em;
  }
  #top1 {
    height: auto;
  }
  /* Sections slider avec padding énorme → neutraliser sur mobile */
  .slide-1 .h2,
  .slide-1 .h3,
  .slide-1 .h4,
  .slide-1 .h5,
  .slide-1 .h6 {
    padding: 0 !important;
    text-align: center;
  }
}

@media (max-width: 768px) {
  /* Menu en pile (sécurité) */
  #menutop2 {
    height: auto;
    background: #ffffff;
    padding: 8px 12px;
  }
  #menutop2 ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #menutop2 li {
    float: none;
    width: 100%;
    margin: 0 0 8px 0;
  }
  #menutop2 li a {
    display: block;
    height: auto;
    line-height: 1.4;
    padding: 12px;
    font-size: 1.05em;
    text-align: center;
    color: #012d84;
    background: #ffffff;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
  }
  #menutop2 li a:hover {
    background: #f7f7f7;
  }
  /* Logo header: réduire et éviter dépassement */
  #titre {
    width: 200px;
    height: 50px;
    margin: 0;
    background-size: contain;
    background-position: left center;
  }
  /* Titres gros */
  .t1,
  .t2 {
    font-size: 2em;
  }
  #boxtop2,
  #boxtop3,
  #boxtop4 {
    font-size: 1.5em !important;
  }
  /* Colonne centrale: padding doux */
  .column_in,
  .column_in_accueil,
  .column_in_grey {
    padding-left: 10px;
    padding-right: 10px;
  }
  /* Images de contenu pleines largeur si besoin */
  img.website_image,
  img.website_image2,
  img.random_image {
    height: auto;
  }
  /* (déplacé sous 768px pour ne pas impacter le desktop étroit) */
}

/* Correctifs spécifiques à la page login webmasters (mobile uniquement) */
@media (max-width: 768px) {
  /* Normaliser les lignes de formulaire */
  #webmasterLoginForm .form,
  #registerLayer .form {
    width: 100% !important;
    float: none !important;
  }

  /* Mettre les labels sur une ligne au-dessus */
  #webmasterLoginForm label.title,
  #registerLayer label.title {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    padding: 0 0 6px 0 !important;
  }

  /* Forcer le wrapping du texte explicatif */
  #webmasterLoginForm .infos,
  #registerLayer .infos {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  /* Champs pleine largeur */
  #webmasterLoginForm input[type="text"],
  #webmasterLoginForm input[type="password"],
  #registerLayer input[type="text"],
  #registerLayer input[type="password"],
  #registerLayer select,
  #registerLayer textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 576px) {
  /* Typographies et espacements */
  h1,
  h2,
  h3 {
    line-height: 1.2;
  }
  body {
    font-size: 0.95em;
  }
  #boxtop2,
  #boxtop3,
  #boxtop4 {
    font-size: 1.4em !important;
  }
  .t1,
  .t2 {
    font-size: 1.8em;
  }
  #titre {
    width: 180px;
    height: 50px;
  }
  /* Panneau de recherche trop large → masquer sur très petit écran */
  #search {
    display: none !important;
  }

  /* Formulaires fluides */
  input[type="text"],
  input[type="email"],
  input[type="search"],
  select,
  textarea {
    width: 100% !important;
    max-width: 100%;
  }

  /* Listes/grilles → pleine largeur */
  .grid .item,
  .list .item,
  .items .item {
    width: 100% !important;
    float: none !important;
  }

  /* Overflow horizontal de secours */
  #middle {
    overflow-x: hidden;
  }
  /* Catégories: 1 colonne si très étroit */
  .menucategories li.maincat,
  .menucategories li.subcat,
  .menucategories li.keyword {
    width: 100% !important;
  }
}