/* =========================================================
   Surcharges CSS pour l'entête (logo, recherche, boutons)
   - Charger APRÈS les CSS framework u20-*.css
   ========================================================= */

/* Pas de bordure sous l'entête sur la page index-ora */
header.u20-entete {
  border-bottom: none;
}

/* ---------------------------------------------------------
   ≤800px — réorganisation cellulaire :
   - logo plus petit
   - barre de recherche pleine largeur sur sa propre ligne
   - boutons Bottin/Connexion réduits à de simples icônes
   --------------------------------------------------------- */
@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;
  }
}