/* === Barre de recherche === */
.search-container { display: flex; justify-content: center; align-items: center; margin: 10px auto; max-width: 450px; }

#searchInput { flex: 1; padding: 10px 12px;  border: 2px solid #ccc;
			   border-radius: 15px 0 0 15px; outline: none;
			   font-size: 12px; transition: 0.3s; }

#searchInput { padding: 6px 10px; border: 2px solid #ccc; border-radius: 25px 0 0 25px;
			   font-size: 14px; outline: none; transition: 0.3s; }

#searchInput:focus { border-color: #ff4da5; }

/* --- Champ de recherche dans l'entête --- */

.search-container button { padding: 6px 12px; border: 2px solid #ff4da5; background-color: #ff4da5;
						   color: white; border-radius: 0 25px 25px 0; cursor: pointer; font-size: 16px;
						   transition: 0.3s; }
						   
.search-container button:hover { background-color: #e83e8c; }

/* === Résultats === */
#searchResults { background: #f8f8f8; border-radius: 10px; padding: 10px;
				 margin-top: 10px; max-height: 300px; overflow-y: auto; font-family: Arial, sans-serif; }

/* --- Fenêtre modale --- */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex;
				 justify-content: center; align-items: center; z-index: 10000; }

.modal-box { background: #fff; border-radius: 10px; width: 90%; max-width: 900px;
			 max-height: 100vh; overflow: hidden; display: flex; flex-direction: column;
			 box-shadow: 0 0 20px rgba(0,0,0,0.3); }

.modal-header { background: #ff4da5; color: white; padding: 12px 20px; display: flex;
				justify-content: space-between; align-items: center; }

.modal-header h2 { margin: 0; font-size: 16px; }

.close-btn { background: none; border: none; color: white; font-size: 20px; cursor: pointer; }

.modal-content { padding: 15px; overflow-y: auto; }

/* --- Résultats --- */
.result-item { border-bottom: 1px solid #ddd; padding: 8px 0; }

.result-item:last-child { border-bottom: none; }

.result-title { font-weight: bold; color: #0078d7; text-decoration: none; }

.result-title:hover { text-decoration: underline; }

.result-snippet { font-size: 14px; color: #444; }

mark { background-color: yellow; color: black; }