header { text-align: center; /*padding-top: 5px;*/ /*padding-bottom: 10px;*/ background-size: cover; /* largeur du bloc_page */ background-position: center; } #nav_zone { /*margin: auto;*/ /*max-width: 1200px;*/ display: flex; /*align-items: center;*/ /* conflit possible avec .social align-self */ justify-content: center; } .nav_button{ display: none; } .background_button { max-height: 24px; } .header_additional_inputs { display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: center; margin-top: 10px; } .header_content { margin-top: 10px; padding-bottom: 20px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; } /*.header_left_col {}*/ .header_center_col { background-color: #ffffff7f; border-radius: 10px; padding: 1px; /* pour que les marges de h1 et h2 ne mordent pas le bloc parent */ } header h1 { font-size: x-large; margin: 10px; } header h2 { font-size: medium; /* défaut = x-large */ margin: 10px; } @media screen and (max-width: 1000px){ header h1, header h2 { margin: 8px; } } header img { vertical-align: bottom; /* supprime espace sous l'image */ max-width: 180px; max-height: 100px; } header a { color: unset; /* ne plus hériter */ text-decoration: none; } /*.header_right_col {}*/ #header_social { display: flex; justify-content: center; } #header_social_content { display: flex; gap: 4px; flex-wrap: wrap; } #header_social_content img { width: 28px; } #header_social_content a img { width: 28px; background-color: #ffffffb3; border-radius: 50%; } #header_social_content .action_icon { width: 24px; } #header_social_content img:hover { background-color: yellow; } #header_social_input { background-color: #ffffff7f; border-radius: 10px; padding: 5px; } @media screen and (max-width: 1000px){ .header_content { padding: 15px 0; } header img { max-width: 160px; } } @media screen and (max-width: 800px){ .header_content { grid-template-columns: 2fr 1fr; /* on vire la colonne de gauche et on permet au deux autres de "se pousser" si besoin */ padding: 10px; } .header_left_col { display: none; } } @media screen and (max-width: 600px){ .header_content { display: block; } }