Accueil.vue

<script setup>
import Header from '../components/Header.vue'
</script>

<template>
  <Header>
  </Header>
  <h1>Recherchez votre film</h1>
  <form>
    <input type="text" placeholder="Exemple : Cars">
    <button>Rechercher</button>
  </form>
  
</template>

<style scoped>
input {
    display: block;
    padding: 10px;
    font-size: 20px;
    border: none;
    outline: none;
    background-color: var(--color-background);
    color: var(--color-text);
    flex-grow:2;
    border-radius: 5px;
  }
  
  
  form {
    margin: 10px auto;
    width: 45%;
    display:flex;
    flex-direction:row;
    border:1px solid #e6007e;
    border-radius: 5px;
  }
  
  
  
  /* remove the input focus blue box, it will be in the wrong place. */
  input:focus {
    outline: none;
  }
  
  /* Add the focus effect to the form so it contains the button */
  form:focus-within { 
    outline: none; 
  }

button {
  /* Just a little styling to make it pretty */
  border:1px solid #e6007e;
  background:#e6007e;
  /* color: var(--color-text); */
  border-radius: 0 4px 4px 0;
}
</style>