React build looks different than React dev

I just finished the dev of my react app and ran
npm run build to get my production version.

Everything works but some CSS styling…

Everything just looks perfect in my dev version but for some reason it doesn’t in my build version.

Here are the problems :

My popup in dev :

My popup in build :

Here’s the code for my popup :

import styles from "./DeletePopUp.module.css";
import { useContext, useState } from "react";
import { useHistory } from "react-router-dom";
import { deletePopUpContext } from "./../../../contexts/shared/deletePopUpContext";
import notificationContext from "../../../contexts/notificationContext";
import authContext from "../../../contexts/authContext";

import { ReactComponent as Close } from "./close.svg";

import Cookies from "js-cookie";
import api from "./../../../services/api";

const DeletePopUp = () => {
  const { setIsAuthenticated } = useContext(authContext);
  const { deletePopUp, setDeletePopUp } = useContext(deletePopUpContext);
  const { setNotification } = useContext(notificationContext);
  const [correct, setCorrect] = useState(false);
  let history = useHistory();
  const handleChange = (value) => {
    if (value === deletePopUp.textToEnter) {
      setCorrect(true);
    } else {
      setCorrect(false);
    }
  };

  const handleDelete = () => {
    if (correct) {
      api.delete(deletePopUp.link).then((res) => {
        if (res.data.ok) {
          if (deletePopUp.toDelete === "asso") {
            Cookies.set("hasAssociation", false);
            Cookies.remove("association_id");
            Cookies.remove("association_uuid");
            setNotification({
              type: "success",
              state: "isShown",
              mesage: "Votre association a bien été supprimé",
            });
          }

          if (deletePopUp.toDelete === "user") {
            Cookies.remove("x-access-token");
            Cookies.remove("x-refresh-token");
            Cookies.remove("authenticated");
            Cookies.remove("hasAssociation");
            Cookies.remove("association_id");
            Cookies.remove("association_uuid");
            setIsAuthenticated(false);
            setNotification({
              type: "success",
              state: "isShown",
              mesage: "Votre compte a bien été supprimé",
            });
          }
          setDeletePopUp({});

          history.push("/");
        }
      });
    }
  };

  if (deletePopUp.isShown) {
    return (
      <div
        className={`${styles.popup} ${
          deletePopUp.isShown === false ? styles.vanishPopup : ""
        } ${deletePopUp.isShown === true ? styles.activePopup : ""}`}
      >
        <Close className={styles.close} onClick={() => setDeletePopUp({})} />
        <div>
          <h1 className={styles.title}>{deletePopUp.title}</h1>
          <p>{deletePopUp.text}</p>
          <input
            className="secondary-input"
            type="text"
            onChange={(e) => handleChange(e.target.value)}
            placeholder={deletePopUp.textToEnter}
          />
        </div>
        <button
          className={`${
            correct ? "red-outlined-button" : "disabled-outlined-button"
          } ${styles.btn}`}
          onClick={correct ? handleDelete : null}
          disabled={correct ? false : true}
        >
          {deletePopUp.buttonText}
        </button>
      </div>
    );
  } else {
    return <div></div>;
  }
};

export default DeletePopUp;

And the CSS that is not working :

.popup {
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: white !important;
  width: clamp(200px, 75%, 750px);
  height: 300px;
  z-index: 200;
  top: 50% !important;
  left: 50% !important;
  border-radius: 15px;
  white-space: pre-wrap;
  padding: 50px;
}

.activePopup {
  animation: showPopUp 0.5s ease-in-out forwards !important;
}

.vanishPopup {
  animation: hidePopUp 0.5s ease-in-out backwards !important;
}

@keyframes showPopUp {
  0% {
    opacity: 0;
    transform: translate(-50%, -150%);
  }

  100% {
    box-shadow: 0 0 10000px 10000px rgba(0, 0, 0, 0.25);
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

@keyframes hidePopUp {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -150%);
  }
}

My footer in dev :

My footer in build :

I tried to prioritize some CSS properties by adding !important on them but it doesn’t work.

Here’s the code for my footer :

import styles from "./Footer.module.css";

import { Link } from "react-router-dom";
import { ReactComponent as Shape } from "./footer.svg";
import { ReactComponent as Web } from "./Web.svg";
import { ReactComponent as Facebook } from "./Facebook.svg";
import { ReactComponent as Instagram } from "./Instagram.svg";

const Footer = () => {
  return (
    <div className={styles.footerContainer}>
      <Shape className={styles.shape} />
      <footer className={styles.footer}>
        <div>
          <div className={styles.logo}>
            Anima<span>Z</span>one
          </div>
          <ul>
            <li>
              <Link to="/adopt-me">Adoptez-moi</Link>
            </li>
            <li>
              <Link to="/about">A propos</Link>
            </li>
            <li>
              <Link to="/associations/create">Espace associations</Link>
            </li>
          </ul>
        </div>
        <div>
          <div className={styles.logo}>
            Les <span>Z</span>animalistes
          </div>
          <ul>
            <li>Visiter le site</li>
            <li>A propos</li>
          </ul>
          <div className={styles.socials}>
            <a
              href="https://www.linkedin.com/in/louis-lecouturier-21b90b204/"
              target="_blank"
              rel="noreferrer"
            >
              <Web />
            </a>
            <a
              href="https://www.facebook.com/Leszanimalistes"
              target="_blank"
              rel="noreferrer"
            >
              <Facebook />
            </a>
            <a
              href="https://www.linkedin.com/in/louis-lecouturier-21b90b204/"
              target="_blank"
              rel="noreferrer"
            >
              <Instagram />
            </a>
          </div>
        </div>
      </footer>
      <div className={styles.credits}>
        <span>Les Zanimalistes - tous droits réservés</span>
        <span className={styles.separator}></span>
        <span>
          Site codé par{" "}
          <a
            href="https://www.linkedin.com/in/louis-lecouturier-21b90b204/"
            target="_blank"
            rel="noreferrer"
          >
            Louis Lecouturier
          </a>
        </span>
      </div>
    </div>
  );
};

export default Footer;

And it’s CSS sheet (the properties that aren’t applying in build) :

.footerContainer {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end;
  z-index: 100;
}

It looks like there are no CSS properties applied to my div in chrome dev tools but when I check the class name, it does have properties assigned to it in my compiled CSS file.

I am using CSS modules and I am not using any CSS frameworks.

Does anybody know how can I solve this problem ?

Thanks by advance for your help !