/* @link https://utopia.fyi/type/calculator?c=320,18,1.25,1920,34,1.25,5,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --step--3: clamp(0.576rem, 0.4736rem + 0.512vw, 1.088rem);
  --step--2: clamp(0.72rem, 0.592rem + 0.64vw, 1.36rem);
  --step--1: clamp(0.9rem, 0.74rem + 0.8vw, 1.7rem);
  --step-0: clamp(1.125rem, 0.925rem + 1vw, 2.125rem);
  --step-1: clamp(1.4063rem, 1.1563rem + 1.25vw, 2.6563rem);
  --step-2: clamp(1.7578rem, 1.4453rem + 1.5625vw, 3.3203rem);
  --step-3: clamp(2.1973rem, 1.8066rem + 1.9531vw, 4.1504rem);
  --step-4: clamp(2.7466rem, 2.2583rem + 2.4414vw, 5.188rem);
  --step-5: clamp(3.4332rem, 2.8229rem + 3.0518vw, 6.485rem);
}
html{
  scroll-behavior: smooth;
}
body {
 font-family: "ivypresto-display",serif;
 background-color: #f0f0f0;
 color: #0b0b0b;
 display: flex;
 flex-direction: column;
 align-items: center;
 margin-left: 1.2em;
}
.container{
  align-self: baseline;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: clamp(20rem, 15.25rem + 23.75vi, 43.75rem);

}
#combinaisons{
  margin: 0;
}
.box2{
  display: flex;
  justify-content: center;
  width: 100%;
}
.box2 p{
  font-size: var(--step--2);
  margin-block-start: 10px;
  margin-block-end: 0;
  height: fit-content;
  /*width: 2ch;*/
}
p{
  font-size: var(--step-0);
  font-weight: 300;
  font-style: normal;
  border-bottom: 2px dotted black;
  line-height: 160%;
  margin-bottom: 1em;
}
.container p{
font-size: var(--step--1);
}
i{
  color: mediumblue;
}
span{
  font-weight: 200;
  font-style: italic;
  margin-right: 1em;
}
span#ensemble-id{
  margin-right: 0;
  margin-left: .2em;
  font-style: normal;
}

  .grid-container {
    display: grid;
    grid-template-columns: auto 1fr; /* Colonne gauche fixe à 100px, droite flexible */
    gap: 1em; /* Espacement entre les colonnes */
    align-items: baseline; /* Alignement vertical des items */
    margin-bottom: 1em; /* Espacement entre les phrases */
  }

  button {
    font-family: "ivypresto-display", serif;
    background-color: rgba(0, 0, 205, 0.8);
    color:#f0f0f0;
    border: 1px solid mediumblue;
    border-radius: 40px;
    font-size: var(--step--2);
    cursor: pointer;
    max-height: 80px;
    width: clamp(8.125rem, 6.989rem + 5.682vi, 10.625rem);
  }
  button:hover{
    background-color: #f0f0f0;
    color: mediumblue;
    transition: .15s linear;
  }
  button#random-ensemble{
    padding: 5px 15px;
  }
.input{
    display: flex;
    position: fixed;
    flex-direction: column-reverse;
    bottom: 10px;
    background-color: rgba(216, 216, 216, 0.482);
    padding: 15px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    width: clamp(18.75rem, 11.648rem + 35.511vi, 34.375rem);
    justify-content: space-between;
    height: fit-content;
}
label{
    display: flex;
    flex-direction: column;
    font-size: var(--step--2);
    margin-bottom: 10px;
}
.Controls{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

}
.input input{
    border: 1px solid grey;
    border-radius: 20px;
    height: 25px;
    margin-top: 5px;
    padding-left: 20px;
}
input::placeholder{
    font-family: 'ivypresto-display', serif;
}
input:focus{
 outline-color: mediumblue;
}
[id]{
    scroll-margin-top: 25px;
}
.grid-container:last-of-type{
    margin-bottom: 200px;
}
@media (min-width: 1024px){
  .container{
    width: 62%;
  }
}
@media (min-width: 1440px){
  .container{
    width: 50%;
  }
}
@media (min-width: 1920px){
  .container{
    width: 45%;
  }
}