/* ===== POLICES ===== */ /* Mettre les liens dans le plutôt que @import pour Chrome */ :root { --primary: #095f75; --primary-light: #1a7d99; --accent: #ffffff; --accent-soft: #f8f9fa; --highlight: #e07a5f; --overlay: rgba(9, 95, 117, 0.9); --font-main: "Lora", serif; --font-title: "Newsreader", serif; --transition: all 0.3s ease; } /* ===== BASE ===== */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-main); background-color: var(--accent-soft); color: var(--primary); line-height: 1.6; width: 100%; overflow-x: hidden; } /* ===== HEADER ===== */ header { width: 100%; background-color: var(--overlay); color: var(--accent); z-index: 1000; padding: 1rem 0; transition: var(--transition); } header:hover { background-color: rgba(9, 95, 117, 0.95); } .container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; } /* Logo et titre */ .logo-title { display: flex; align-items: center; gap: 0.5rem; width: 100%; justify-content: center; } .logo-title h1 { font-family: var(--font-title); font-size: 2.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; line-height: 1.1; color: var(--accent); margin: 0; padding: 0.4rem 0.8rem; border-left: 4px solid var(--highlight); border-right: 4px solid var(--highlight); background: linear-gradient(90deg, var(--primary-light), var(--accent), var(--primary-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: var(--transition); } .logo-title h1:hover { text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4), 2px 2px 5px rgba(9, 95, 117, 0.3); transform: translateY(-3px); border-left: 4px solid var(--accent); border-right: 4px solid var(--accent); } .logo { height: 50px; width: auto; filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3)); } /* Navigation principale */ nav { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; width: 100%; } /* Menu central */ .menu-centre { display: flex; gap: 1.5rem; list-style: none; justify-content: center; flex-wrap: wrap; width: 100%; padding: 0; } .menu-centre li { list-style: none; } .menu-centre a { text-decoration: none; color: var(--accent); font-weight: 600; transition: var(--transition); padding: 0.5rem 0; position: relative; font-family: var(--font-main); } .menu-centre a:hover { color: var(--highlight); } .menu-centre a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--highlight); transition: var(--transition); } .menu-centre a:hover::after { width: 100%; } /* Conteneur recherche + actions utilisateur */ .user-actions-container { display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%; } /* Formulaire recherche */ .search-form { display: flex; flex-direction: column; width: 100%; max-width: 500px; gap: 0.5rem; } .search-input { padding: 0.6rem 1rem; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.15); color: var(--primary); font-family: var(--font-main); transition: var(--transition); } .search-input:focus { outline: none; background: rgba(255, 255, 255, 0.25); border-color: var(--highlight); } .search-input::placeholder { color: rgba(255, 255, 255, 0.7); } .search-button { padding: 0.6rem 1.2rem; border: none; border-radius: 20px; background-color: var(--highlight); color: var(--accent); font-weight: bold; cursor: pointer; transition: var(--transition); width: 100%; } .search-button:hover { background-color: #d16c4f; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } /* ===== BOUTONS CONNEXION/PROFIL ===== */ .connecter { display: flex; align-items: center; justify-content: center; width: 100%; } .btn-co { padding: 0.6rem 1.2rem; border: none; border-radius: 20px; background-color: var(--highlight); color: var(--accent); font-weight: bold; font-family: var(--font-main); font-size: 0.9rem; cursor: pointer; transition: var(--transition); white-space: nowrap; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); border: 1px solid transparent; } .btn-co:hover { background-color: #d16c4f; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); color: var(--accent); } .btn-co:active { transform: scale(0.98); box-shadow: 0 1px 2px rgba(0,0,0,0.1); } /* Animation pulse */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.03); } 100% { transform: scale(1); } } /* Ajouter la classe pulse via PHP ou JS si utilisateur non connecté */ .btn-co.pulse { animation: pulse 2s infinite; } /* ===== RESPONSIVE ===== */ @media (max-width: 768px) { .btn-co { width: 100%; padding: 0.7rem; font-size: 1rem; } .connecter { margin-top: 0.5rem; } .container { padding: 1rem; } .logo-title h1 { font-size: 2rem; padding: 0.3rem 0.5rem; border-left: none; border-right: none; } .menu-centre { justify-content: space-around; flex-wrap: wrap; } .search-form { width: 100%; flex-direction: column; } .search-input { width: 100%; } } @media (min-width: 769px) { nav { flex-direction: row; justify-content: space-between; align-items: center; } .menu-centre { justify-content: center; } .user-actions-container { flex-direction: row; justify-content: flex-end; gap: 1rem; } .search-form { flex-direction: row; max-width: 400px; } .search-input { min-width: 250px; width: auto; } .search-button { width: auto; } .logo-title { justify-content: flex-start; } }