* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Libre Franklin",serif; font-optical-sizing: auto; font-style: normal; } body { font-family: Arial,sans-serif; line-height: 1.6; } .image-section { position: relative; height: 100vh; background-size: cover; background-position: center; background-attachment: fixed; }            .content-section { display: flex; flex-wrap: wrap; padding: 50px 0; background-color: #fff; color: #333; max-width: 1024px;  margin: 0 auto;  } .content-section .column { width: 50%; padding: 20px; box-sizing: border-box; } .content-section .columntrois { width: 33%; padding: 20px; box-sizing: border-box; } .content-section .columnsix { width: 66%; padding: 20px; box-sizing: border-box; } .content-section .columnfull { width: 100%; padding: 20px; box-sizing: border-box; }  @media (min-width: 768px) and (max-width: 1024px) { .content-section .column { width: 50%; } .content-section .columntrois { width: 50%; } .content-section .columnsix { width: 50%; } }  @media (max-width: 767px) { .content-section .column { width: 100%; } .content-section .columntrois { width: 100%; } .content-section .columnsix { width: 100%; } } h2 { font-size: 2rem; margin-bottom: 20px; color: #008200; } .mois { text-align: center; } .mois h3 { font-size: 1.3rem; margin-bottom: 5px; text-transform: uppercase;  } .mois h4 { font-size: 1.1rem; margin-bottom: 10px; color: #008200; } .mois p { font-size: 0.9rem; line-height: 1.2rem; } p { font-size: 1rem; margin-bottom: 20px; } .menu { position: absolute; top: auto; bottom: 0; left: 0; width: 100%; height: 80px; background: #FFF; color: #333; padding: 10px 20px; z-index: 1000; display: flex; justify-content: space-between; align-items: center; transition: position 0.3s ease-in-out; -webkit-box-shadow: 0 15px 10px -10px rgba(0,0,0,0.5),0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset; -moz-box-shadow: 0 15px 10px -10px rgba(0,0,0,0.5),0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset; box-shadow: 0 15px 10px -10px rgba(0,0,0,0.5),0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset; } .menu.fixed { position: fixed; top: 0; bottom: auto; } .menu-items { display: flex; gap: 20px; }  .menu-burger { display: none;  font-size: 24px; background: none; border: none; cursor: pointer; }  @media screen and (max-width: 1200px) { .menu-items { display: none;  flex-direction: column;  position: absolute; top: 80px; left: 0; width: 100%; background: #FFF; padding: 10px 0; z-index: 1001; box-shadow: 0px 4px 6px rgba(0,0,0,0.1); } .menu-items.active { display: flex;  } .menu-burger { display: block;  } } .item-menu { color: #333; margin: 0 10px; text-decoration: none; text-transform: uppercase; padding: 10px; } .rezo { margin-left: 15px; vertical-align: middle; } .btn-item-menu { color: #FFF !important; background-color: #008200; border-radius: 30px; padding: 10px; text-decoration: none; text-transform: uppercase; height: 43px; } @media (max-width: 768px) { .image-section { background-attachment: scroll;  height: 50vh;  } } .initial-section { position: relative; height: calc(100vh - 50px); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; background: url('/medias/photos/agapanthe.webp') no-repeat center center/cover; } .uli { padding-left: 40px; } #contact input,#contact select,#contact textarea { color: #117911; border: 1px solid #b6b6b6; width: 100%; padding: 7px; margin: 7px; border-radius: 4px; } #contact textarea { min-height: 150px; } #contact #btnEnvoyer { color: #FFF; background-color: #117911; border: none; width: 100%; padding: 7px; margin: 7px; border-radius: 4px; } #contact #resultat { color: #117911; } footer { background-color: #FFF; color: #333; text-align: center;  font-size: 1rem; } footer .content-section { padding: 0px; } footer .column { padding-bottom: 0px !important; }