:root {
    --step--2: clamp(0.5002rem, 0.4626rem + 0.1876vw, 0.6877rem);
    --step--1: clamp(0.7072rem, 0.6542rem + 0.2652vw, 0.9724rem);
    --step-0: clamp(1rem, 0.925rem + 0.375vw, 1.375rem);
    --step-1: clamp(1.414rem, 1.308rem + 0.5303vw, 1.9443rem);
    --step-2: clamp(1.9994rem, 1.8494rem + 0.7498vw, 2.7492rem);
    --step-3: clamp(2.8271rem, 2.6151rem + 1.0602vw, 3.8873rem);
    --step-4: clamp(3.9976rem, 3.6978rem + 1.4991vw, 5.4967rem);
    --step-5: clamp(5.6526rem, 5.2286rem + 2.1197vw, 7.7723rem);

    --fluid-150-400: clamp(9.375rem, 6.25rem + 15.625vw, 25rem);

    --space-s: clamp(1rem, 0.925rem + 0.375vw, 1.375rem);
    --space-m: clamp(1.4375rem, 1.3375rem + 0.5vw, 1.9375rem);
    --space-l: clamp(2rem, 1.85rem + 0.75vw, 2.75rem);
    --space-xl: clamp(3rem, 2.775rem + 1.125vw, 4.125rem);
    --space-2xl: clamp(4rem, 3.7rem + 1.5vw, 5.5rem);

    --space--m: clamp(-1.4375rem, 1.3375rem - 0.5vw, -1.9375rem);
}

body {
    background-color: #37ff00;
    font-family: "Atkinson Hyperlegible Mono", serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: var(--space-m);
}

.container {
    max-width: 1500px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#phrases {
    width: fit-content;
}

p {
    color: #000000;
    font-size: var(--step-0);
    font-weight: 800;
    width: fit-content;
    max-width: var(--fluid-150-400);
    margin-bottom: var(--space-s);
    line-height: 140%;
}

.intro {
    font-size: var(--step-1);
    margin-bottom: var(--space-2xl);
    font-weight: 300;
    max-width: none;
}

.sonnet1 {
    position: relative; /*ChatGPT*/
}

.sonnet1::before { /*ChatGPT + changements personnels*/
    content: "";
    position: absolute;
    top: var(--space--m);
    left: 0;
    width: var(--fluid-150-400);
    height: 2px;
    background: black;
}

.sonnet4 {
    margin-bottom: var(--space-xl);
}

.select__form {
    margin-bottom: var(--space-2xl);

    display: flex;
    flex-direction: row;
    align-items: center;
}

.select__button {
    width: fit-content;
    height: fit-content;
  
    display: flex;
    justify-content: center;
    align-items: center;
  
    font-size: var(--step-2);
  
    padding: var(--space-s);
    margin-right: var(--space-m);
  
    background-color: transparent;
    outline: -5px solid #000000;
  
    cursor: pointer;
  
    margin-top: var(--space-s);
    font-family: "Atkinson Hyperlegible Mono", serif;
}

.select__button:hover {
    background-color: #000000;
    color: #FFFFFF;
}

#speed {
    appearance: none; /* Supprime le style natif du select */
    background-color: white;
    border: 2px solid black;
    border-radius: 5px;
    padding: 10px 15px;
    font-size: var(--step-0);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
    
    /* Empêcher la modification de la taille */
    flex-shrink: 0;
    flex-grow: 0;
    width: 120px;
    text-align: center;

    font-family: "Atkinson Hyperlegible Mono", serif;
}

/* Ajouter une flèche personnalisée */
#speed {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='black'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 15px;
}

/* Effet au survol */
#speed:hover {
    background-color: black;
    color: white;
}

/* Effet au focus */
#speed:focus {
    border-color: #37ff00;
    box-shadow: 0 0 5px rgba(55, 255, 0, 0.7);
}