* {
  margin: 0;
  box-sizing: border-box;
}


body {
  font-family: Roboto, sans-serif;
}

body.modal-open,
body.articleModal-open {
  overflow: hidden;
}


/* Taille des titres */
h1 {
  color: var(--color-noirTitre);
  font-size: var(--size-title-h1);
  font-weight: bold;
}

h2 {
  color: var(--color-noirTitre);
  font-size: var(--size-title-h2);
  font-weight: bold;
}

h3 {
  color: var(--color-noirTitre);
  font-size: var(--size-title-h3);
  font-weight: bold;
}

h4 {
  color: var(--color-noirTitre);
  font-size: var(--size-title-h4);
  font-weight: bold;
}

h5 {
  color: var(--color-noirTitre);
  font-size: var(--size-title-h5);
  font-weight: bold;
}

h6 {
  color: var(--color-noirTitre);
  font-size: var(--size-title-h6);
  font-weight: bold;
}

/* Complément titre des pages */
.contenu-titre div {
  display: flex;
  align-items: center;
  gap: calc(10 / var(--base-width) * 100vw);
}

/* Bouton radio du titre (listings) */
.titre-btnRadio {
  color: var(--color-noirTexte);
  font-size: var(--size-button-1);
  font-weight: bold;
  cursor: pointer;
}

/* valeur du numéro devis */
a.titre-complement {
  display: inline-block;
  color: var(--color-noirTitre);
  font-size: var(--size-title-h2);
  /* permet de fixer largeur/hauteur tout en restant "inline" */
  text-align: center;
  font-weight: bold;
  padding-left: calc(20 / var(--base-width) * 100vw);
  padding-right: calc(20 / var(--base-width) * 100vw);
  padding-top: calc(10 / var(--base-width) * 100vw);
  padding-bottom: calc(10 / var(--base-width) * 100vw);
  border-style: solid;
  border-width: calc(2 / var(--base-width) * 100vw);
  border-color: var(--color-noirTexte);
}

/* Titre des pages */
.titre-contenu {
  display: flex;
  height: calc(160 / var(--base-width) * 100vw);
  margin-left: calc(340 / var(--base-width) * 100vw);
  width: calc(1032 / var(--base-width) * 100vw);
  align-items: center;
}

/* Titre des pages */
.titre-contenu h1 {
  margin-left: 0;
}

/* Complément titre page */
.titre-contenu {
  justify-content: space-between;
  gap: calc(100 / var(--base-width) * 100vw);
}

/* Complément titre page */
.titre-contenu h1 {
  flex: 1;
  /* prend tout l’espace dispo au centre */
  text-align: center;
  /* centre le texte dans cet espace */
}

.titre-contenu div {
  display: flex;
  gap: calc(10 / var(--base-width) * 100vw);
  align-items: center;
}

/* Titre des contenus */
.titre-contenu h2 {
  display: flex;
  text-align: center;
}


/* Hauteur des tables */
.listingPage .table-corps-contenu {
  max-height: calc(490 / var(--base-width) * 100vw);
}

.listingModal .table-corps-contenu {
  max-height: calc(294 / var(--base-width) * 100vw);
}


/* Menu des clics droits */
#contextMenu {
  z-index: 2000;
}

.hidden {
  display: none !important;
}

/* Contenu de la modale de confirmation (appModal) */
.modal-contenu {
  background: var(--color-blanc);
  padding: calc(20 / var(--base-width) * 100vw);
  border-radius: calc(8 / var(--base-width) * 100vw);
  min-width: calc(300 / var(--base-width) * 100vw);
  text-align: center;
}



/* Titre */
.modal h2 {
  margin-bottom: calc(40 / var(--base-width) * 100vw);
}


/* Boutons */
.bouton-modal {
  color: white;
  padding-left: calc(25 / var(--base-width) * 100vw);
  padding-right: calc(25 / var(--base-width) * 100vw);
  padding-top: calc(10 / var(--base-width) * 100vw);
  padding-bottom: calc(10 / var(--base-width) * 100vw);
  font-size: var(--size-button-3);
  background-color: var(--color-bleuButtonClair);
  border-color: var(--color-bleuButtonClair);
  border-width: calc(2 / var(--base-width) * 100vw);
  cursor: pointer;
}

.bouton-modal:hover {
  background-color: var(--color-bleuButtonFonce);
  border-color: var(--color-jaune);
  border-width: calc(2 / var(--base-width) * 100vw);
}

/* Boutons */
.modal-boutons {
  margin-top: calc(40 / var(--base-width) * 100vw);
  display: flex;
  justify-content: space-around;
  gap: calc(20 / var(--base-width) * 100vw);
}


.hamburger {
  display: none;
  font-size: calc(55 / var(--base-width) * 100vw);
  cursor: copy;
  background: none;
  border: none;
  color: var(--color-blanc);
}



/* RESPONSIVE */
@media (max-width: 768px) {
  /* Cacher le menu en version mobile */

  .navbar-liens {
    position: absolute;
    top: 60px;
    right: 0;
    background-color: var(--color-noir);
    flex-direction: column;
    width: 200px;
    padding: 10px;
    display: none;
  }

  .navbar-liens.show {
    display: flex;
  }

  /* Afficher le hamburger */
  .hamburger {
    display: block;
  }
}