/* ===== RÉGLAGES DE BASE POUR LA PAGE ===== */

html, body {
  background: #111; /* Fond sombre uniforme */
  margin: 0;         /* Suppression des marges par défaut */
}

body {
  display: grid;              /* Mise en page en grille pour centrer les éléments */
  align-items: center;        /* Centre verticalement */
  justify-items: center;      /* Centre horizontalement */
  width: 100vw;               /* Largeur = largeur de la fenêtre */
  height: 100vh;              /* Hauteur = hauteur de la fenêtre */
  overflow: hidden;           /* Empêche le scroll si le canvas déborde */
}

/* Forcer la taille du canvas généré par p5.js */
.p5Canvas {
  width: 90vmin !important;   /* Taille responsive en fonction de la fenêtre (viewport minimum) */
  height: 90vmin !important;  /* Même chose pour la hauteur */
}

/* ===== LAYOUT PRINCIPAL : CANVAS + PANNEAU ===== */

/* Conteneur principal horizontal qui aligne le canvas et le panneau */
.layout {
  display: flex;                  /* Affichage horizontal */
  justify-content: center;       /* Centre les enfants horizontalement */
  align-items: flex-start;       /* Aligne les enfants en haut */
  gap: 30px;                     /* Espace entre le canvas et le panneau */
  padding: 40px;                 /* Marge intérieure */
}

/* Zone contenant le canvas P5 */
#canvas-container {
  width: 1080px;                 /* Largeur fixe du canvas */
  height: 1080px;                /* Hauteur fixe du canvas */
  position: relative;            /* Pour positionner d’autres éléments si besoin */
}

/* ===== PANNEAU D’INSTRUCTIONS (BEM) ===== */

/* Bloc panneau commun */
.panel {
  background-color: rgba(0, 0, 0, 0.7); /* Fond noir semi-transparent */
  color: white;                         /* Texte blanc */
  padding: 15px;                        /* Espace intérieur */
  border-radius: 12px;                  /* Coins arrondis */
  font-family: 'Arial', sans-serif;     /* Police simple et lisible */
  font-size: 14px;                      /* Taille de texte lisible */
  width: 240px;                         /* Largeur fixe */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); /* Ombre légère pour le relief */
  flex-shrink: 0;                       /* Ne se réduit pas quand l'espace manque */
}

/* Variante : panneau fixé en haut lors du scroll */
.panel--instructions {
  position: sticky; /* Reste en place si on scroll */
  top: 40px;        /* Distance du haut */
}

/* Titre du panneau */
.panel__title {
  margin-top: 0;               /* Supprime la marge du haut */
  font-size: 18px;             /* Taille plus grande pour le titre */
  border-bottom: 1px solid white; /* Ligne de séparation */
  padding-bottom: 5px;         /* Espace sous le titre */
  margin-bottom: 10px;         /* Espace entre le titre et la liste */
}

/* Liste des instructions */
.panel__list {
  list-style: none; /* Supprime les puces */
  padding-left: 0;  /* Supprime la marge gauche */
  margin: 0;        /* Supprime la marge par défaut */
}

/* Élément de liste (ligne d’instruction) */
.panel__item {
  margin-bottom: 8px; /* Espace vertical entre les lignes */
}