/* style.css : l'apparence. Tout est réglé par quelques variables, en haut. */

:root {
  /* Palette : feuille blanche sur fond gris-vert, encre bleu nuit, crayon graphite */
  --fond: #dde5e3;
  --feuille: #fbfcfb;
  --encre: #16233b;
  --crayon: #59626e;
  --trait: #c3cdd0;
  --voisine: #e8efed;
  --meme: #b9dfcd;
  --selection: #f6d365;
  --conflit: #f4b6bf;
  --conflit-texte: #a3102b;

  /* Côté de la grille : jamais plus large que l'écran, ni plus haut que 68 % de sa hauteur */
  --taille: min(94vw, 68vh, 36rem);
}

html {
  /* Réserve la place de la barre de défilement même quand elle n'est pas affichée.
     Sans ça, son apparition (quand la page s'allonge en cours de saisie) réduit
     légèrement la largeur utile de la fenêtre, et donc --taille, qui en dépend. */
  scrollbar-gutter: stable;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}


.header {
  display: flex;
  /* NOTE : On a ENLEVÉ 'left: 0;' et 'width: 100%;' */
  
  /* Style du bandeau */
  background-color: #1eff00;   
  border-bottom: 15px solid #2ad0fa; 
  box-sizing: border-box;      /* content-box or border-box */

  /* Alignement et hauteur naturelle */

  padding: 15px 20px;   /* top/bottom left/right */
}
/* Positionnement du bloc en haut à gauche */
.user-access {
  /* float: right;    Ou 'fixed' si vous voulez qu'il reste visible lors du défilement */
  margin-left: auto;
  
  display: flex;      /* Aligne les liens et le séparateur sur une seule ligne */
  align-items: center;
}

/* Vos styles de liens modifiés avec le display: inline-block */
.user-access a {
  display: inline-block;
  margin: 0;
  padding: 0.5rem 0.8rem; /* Version légèrement réduite pour un coin de page */
  font-size: 1.2rem;
  font-weight: 600;
  text-decoration: none;
  color: #333; /* À adapter à votre charte graphique */
}

.user-access .separator {
  font-size: 1.2rem;
  color: #ccc;
}

.item-compte {
  display: flex;
  width: 10rem;
  margin-left: auto;
  justify-content: center;
  align-content: center;
  border: 4px solid #3a3b77; 
  cursor: pointer;
}

.icon-compte::before {
  content: "CO"
}

.texte-compte {
  color: #fff;
  display: block;
  font-size: 11px;
  font-weight: 500;
  opacity: .75;
  text-transform: uppercase;
}

.login-mini-box {
  display: none;
}

.login-mini-box::before /* affichage du triangle */
{
  border-bottom: 7px solid #fff;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  position: absolute;
  content: "";
  height: 0;
  /* right: 500px; */
  top: -7px;
  width: 0;
}

.login-mini-box.ouverte {
  display: flex;
  position: absolute;
  /* margin-left: auto; */
  top: 8%;
  left: 90%;
  /* transform: translateX(-50%); */
  border: 2px solid #9596aa; 
 }


a {
  display: inline-block;
  margin: 0;
  padding: 1rem 1.2rem 0;
  font-size: 1.5rem;
  font-weight: 600;
}

main {
  display: grid;
  gap: 1.2rem;
  justify-content: center;
  padding: 1rem 0.5rem 2rem;
}

/* Grand écran : la grille à gauche, les commandes à droite */
@media (min-width: 58rem) {
  main {
    grid-template-columns: var(--taille) 20rem;
    align-items: start;
    gap: 2rem;
  }

  /* width: min(94vw, 36rem); */
}

#liste {
  display: flex;
}