/* =========================================================
   Surcharges CSS spécifiques aux petits écrans (≤800px)
   - Charger APRÈS u20-mobile.css et entete.css pour
     écraser leurs règles en mobile.
   ========================================================= */

@media all and (max-width: 800px) {
  /* Padding réduit pour rapprocher le contenu des bords */
  header.u20-entete {
    padding: 10px 12px;
  }

  /* Logo plus compact */
  header.u20-entete .zone-logouqtr,
  header.u20-entete .zone-logouqtr a.logouqtr,
  header.u20-entete .zone-logouqtr a.logouqtr img {
    width: 150px;
    height: 58px;
  }
  header.u20-entete .zone-logouqtr {
    height: auto;
    margin-right: 0;
  }

  /* Aplatir u20-entete-droite : ses enfants deviennent enfants directs
     du header flex (la recherche peut alors prendre toute la largeur) */
  header.u20-entete .u20-entete-droite {
    display: contents;
  }

  /* Recherche : sur sa propre ligne, pleine largeur */
  header.u20-entete #contenantRecherche {
    order: 3;
    flex: 1 1 100%;
    width: 100%;
    margin: 10px 0 0 0;
  }
  /* Lever le max-width: 500px imposé par u20-main.css sur le form Google CSE
     pour que la recherche s'étende sur toute la largeur disponible */
  header.u20-entete #contenantRecherche form.gsc-search-box,
  header.u20-entete #contenantRecherche .gsc-control-searchbox-only,
  header.u20-entete #contenantRecherche .gsc-input-box {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Boutons Bottin et Connexion : iconifiés (texte masqué, carrés 47×47) */
  header.u20-entete .zone-btn a.btn.bottin span,
  header.u20-entete .zone-btn .connexion button.list-btn span {
    display: none;
  }
  header.u20-entete .zone-btn a.btn.bottin,
  header.u20-entete .zone-btn .connexion button.list-btn {
    min-width: 47px;
    width: 47px;
    padding: 0;
  }
  /* Recentrer l'icône Connexion (par défaut elle est translatée pour le texte) */
  header.u20-entete .zone-btn .connexion button.list-btn img,
  header.u20-entete .zone-btn .connexion button.list-btn.btn-is-on img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  /* Boutons à droite, alignés verticalement avec le logo */
  header.u20-entete .zone-btn {
    order: 2;
    margin-left: auto;
    align-self: center;
    height: auto;
  }

  /* -----------------------------------------------------
     BOUTON LOUPE — micro-ajustements OS/navigateur ≤800px
     Le contexte mobile change le rendu de la loupe par
     rapport au desktop : on réapplique des corrections
     ciblées par OS/navigateur (les variantes Firefox sont
     placées hors du @media plus bas, l'imbrication
     @-moz-document dans @media n'est pas fiable).
     ----------------------------------------------------- */

  /* macOS + Chrome/Safari (défaut mobile) — pas de décalage vertical
     en mobile : le -1px du contexte desktop tire la loupe trop haut. */
  header.u20-entete #contenantRecherche .gsc-search-button-v2 {
    margin: -1px 0 0 -1px !important;
  }

  /* Windows + Chrome (mobile) — décalage de +1px conservé */
  html.os-windows header.u20-entete #contenantRecherche .gsc-search-button-v2 {
    margin: 1px 0 0 -1px !important;
  }
}

/* Firefox ≤800px — toutes plateformes */
@-moz-document url-prefix() {
  @media all and (max-width: 800px) {
    header.u20-entete #contenantRecherche .gsc-search-button-v2 {
      margin: 1px 0 0 -1px !important;
    }
    html.os-windows header.u20-entete #contenantRecherche .gsc-search-button-v2 {
      margin: 1px 0 0 -1px !important;
    }
  }
}