:root {
  --grid-size: 150px;
  --point-size: 15px;
  --half-grid: 75px;
  --animation-duration-point: 0.2s;
  --animation-duration-line: 0.3s;
  --animation-duration-label: 0.3s;
}

.body-container-graphique {
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.container {
  width: 100%;
  max-width: 1200px;
  padding: 20px;
  box-sizing: border-box;
  overflow-x: hidden;
}

.hero-graph {
  position: relative;
  width: 100%;
  height: 450px;
  margin: 0 auto;
}

/*********************
Grille
**********************/
.grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: drawGrid 1.5s ease-in-out forwards;
}

.grid-line {
  position: absolute;
  background-color: var(--global-palette1);
}

.grid-line-horizontal {
  height: 1px;
  width: calc(100% - 2px);
  left: 1px;
}

.grid-line-vertical {
  width: 1px;
  height: calc(100% - 2px);
  top: 1px;
}

/*********************
Points du graphique
**********************/
.graph-point {
  position: absolute;
  width: var(--point-size);
  height: var(--point-size);
  background-color: var(--global-palette1);
  border-radius: 5px;
  transform: translate(-50%, -50%);
  z-index: 2;
  opacity: 0;
  animation: scaleIn var(--animation-duration-point) ease-out forwards;
}

/*********************
Points spécifiques
**********************/
.point-1 {
  left: calc(var(--grid-size) * 0.5 + var(--half-grid));
  top: calc(var(--grid-size) * 2);
  /* animation-delay défini dynamiquement par JS */
}

.point-2 {
  left: calc(var(--grid-size) * 1.5 + var(--half-grid));
  top: calc(var(--grid-size) * 1);
  /* animation-delay défini dynamiquement par JS */
}

.point-3 {
  left: calc(var(--grid-size) * 2.5 + var(--half-grid));
  top: calc(var(--grid-size) * 2);
  /* animation-delay défini dynamiquement par JS */
}

.point-4 {
  left: calc(var(--grid-size) * 3.5 + var(--half-grid));
  top: calc(var(--grid-size) * 1);
  /* animation-delay défini dynamiquement par JS */
}

.point-5 {
  left: calc(var(--grid-size) * 4.5 + var(--half-grid));
  top: calc(var(--grid-size) * 2);
  /* animation-delay défini dynamiquement par JS */
}

.point-6 {
  left: calc(var(--grid-size) * 5.5 + var(--half-grid));
  top: calc(var(--grid-size) * 1.5 - var(--half-grid));
  /* animation-delay défini dynamiquement par JS */
}

.point-7 {
  left: calc(var(--grid-size) * 6.5 + var(--half-grid));
  top: calc(var(--grid-size) * 0.5 - var(--half-grid));
  /* animation-delay défini dynamiquement par JS */
}

/*********************
Lignes du graphique
**********************/
.line {
  position: absolute;
  height: 1px;
  background-color: var(--global-palette1);
  transform-origin: 0 0;
  z-index: 1;
  width: 0;
  animation: drawLine var(--animation-duration-line) ease-in-out forwards;
}

/* Ligne 1: Point 1 à Point 2 */
.line-1 {
  left: calc(var(--grid-size) * 0.5 + var(--half-grid));
  top: calc(var(--grid-size) * 2);
  transform: rotate(-45deg);
  /* animation-delay défini dynamiquement par JS */
}

/* Ligne 2: Point 2 à Point 3 */
.line-2 {
  left: calc(var(--grid-size) * 1.5 + var(--half-grid));
  top: calc(var(--grid-size) * 1);
  transform: rotate(45deg);
  /* animation-delay défini dynamiquement par JS */
}

/* Ligne 3: Point 3 à Point 4 */
.line-3 {
  left: calc(var(--grid-size) * 2.5 + var(--half-grid));
  top: calc(var(--grid-size) * 2);
  transform: rotate(-45deg);
  /* animation-delay défini dynamiquement par JS */
}

/* Ligne 4: Point 4 à Point 5 */
.line-4 {
  left: calc(var(--grid-size) * 3.5 + var(--half-grid));
  top: calc(var(--grid-size) * 1);
  transform: rotate(45deg);
  /* animation-delay défini dynamiquement par JS */
}

/* Ligne 5: Point 5 à Point 6 */
.line-5 {
  left: calc(var(--grid-size) * 4.5 + var(--half-grid));
  top: calc(var(--grid-size) * 2);
  transform: rotate(-45deg);
  /* animation-delay défini dynamiquement par JS */
}

/* Ligne 6: Point 6 à Point 7 */
.line-6 {
  left: calc(var(--grid-size) * 5.5 + var(--half-grid));
  top: calc(var(--grid-size) * 1.5 - var(--half-grid));
  transform: rotate(-45deg);
  /* animation-delay défini dynamiquement par JS */
}

/*********************
Étiquettes
**********************/
.label {
  position: absolute;
  background-color: white;
  border: 1px solid #330CFD;
  border-radius: 3px;
  padding: 6px 12px;
  font-size: 18px;
  font-weight: bold;
  font-family: var(--global-heading-font-family);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  z-index: 10;
  transform: translateY(-50%);
  opacity: 0;
  animation: slideInLabel var(--animation-duration-label) ease-out forwards;
  /* animation-delay défini dynamiquement par JS */
}

.label.avant {
  left: calc(var(--grid-size) * 0.5 + var(--half-grid));
  top: calc(var(--grid-size) * 2);
}

.label.apres {
  right: calc(var(--grid-size) * 0.5);
  top: calc(var(--grid-size) * 0.5 - var(--half-grid));
}

/*********************
Animations
**********************/
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes drawLine {
  from {
    width: 0;
  }

  to {
    width: 212px;
  }
}

@keyframes drawLineResponsive {
  from {
    width: 0;
  }

  to {
    width: 100px;
  }
}

@keyframes drawGrid {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }

  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

@keyframes slideInLabel {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*********************
Mobile
**********************/
@media (max-width: 768px) {
  :root {
    --grid-size: 100px;
    --half-grid: 50px;
    --point-size: 12px;
  }

  .hero-graph {
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 0 var(--grid-size);
    box-sizing: border-box;
  }

  .label {
    font-size: 14px;
    padding: 4px 8px;
  }

  /* Masquer les points 6 et 7 et les lignes correspondantes */
  .point-6,
  .point-7,
  .line-5,
  .line-6 {
    display: none;
  }

  /* Ajuster le conteneur de la grille pour un meilleur centrage */
  .grid {
    left: 0;
    transform: none;
    width: 100%;
  }

  .graph-point {
    border-radius: 3px;
  }

  /* Décaler tous les points d'une case en bas et à gauche */
  .point-1 {
    left: calc(50% - var(--grid-size) * 2);
    top: calc(var(--grid-size) * 3 - 15px);
  }

  .point-2 {
    left: calc(50% - var(--grid-size));
    top: calc(var(--grid-size) * 2 - 15px);
  }

  .point-3 {
    left: calc(50%);
    top: calc(var(--grid-size) * 3 - 15px);
  }

  .point-4 {
    left: calc(50% + var(--grid-size));
    top: calc(var(--grid-size) * 2 - 15px);
  }

  /* Repositionner le point 5 en diagonale supérieure du point 4 */
  .point-5 {
    left: calc(50% + var(--grid-size) * 2);
    top: calc(var(--grid-size) * 1.5 - var(--half-grid) - 15px);
  }

  /* Ajuster les lignes pour relier les points décalés */
  .line-1 {
    left: calc(50% - var(--grid-size) * 2);
    top: calc(var(--grid-size) * 3 - 15px);
    transform: rotate(-45deg);
    animation: drawLineResponsive var(--animation-duration-line) ease-in-out forwards;
  }

  .line-2 {
    left: calc(50% - var(--grid-size));
    top: calc(var(--grid-size) * 2 - 15px);
    transform: rotate(45deg);
    animation: drawLineResponsive var(--animation-duration-line) ease-in-out forwards;
  }

  .line-3 {
    left: calc(50%);
    top: calc(var(--grid-size) * 3 - 15px);
    transform: rotate(-45deg);
    animation: drawLineResponsive var(--animation-duration-line) ease-in-out forwards;
  }

  .line-4 {
    left: calc(50% + var(--grid-size));
    top: calc(var(--grid-size) * 2 - 15px);
    transform: rotate(-45deg);
    animation: drawLineResponsive var(--animation-duration-line) ease-in-out forwards;
  }

  /* Repositionner les étiquettes */
  .label.avant {
    left: calc(50% - var(--grid-size) * 2.5);
    top: calc(var(--grid-size) * 3 - 15px);
  }

  .label.apres {
    right: auto;
    left: calc(30% + var(--grid-size) * 2);
    top: calc(var(--grid-size) * 1 - 15px);
    transform: translateY(-100%);
  }
}

@media (max-width: 480px) {
  :root {
    --grid-size: 70px;
    --half-grid: 35px;
    --point-size: 10px;
  }

  .hero-graph {
    height: 250px;
  }

  .label {
    font-size: 12px;
    padding: 3px 6px;
  }
}