:root {
  --color-1 : #FFF;
  --color-2 : #0f0f14;
  --color-3 : #A01600;
  --color-4 : #000000;

  --btn-primary-bg : #0032fa;
  --btn-primary-text : #fff;
  --btn-secondary-bg : #FFF;
  --btn-secondary-text : #000000;
  --btn-black-bg : #000000;
  --btn-red-text : #A01600;
  --btn-red-bg : #A01600;
  --btn-white-text: #fff;

  .cta-btn-outline.active {
  background: #000000;
  color: #fff;
  border-color: #000000;
}


--bg-color-1 :  #FFF;
--bg-color-4 : #000;

  --h1-xs: 36px;
  --h1: 72px;
  --h2-xs: 28px;
  --h2: 40px;
  --h3-xs: 20px;
  --h3: 24px;
  --h4-xs: 16px;
  --h4: 16px;
}


@font-face {
	font-family: BrutGrotesque-Regular;
	font-weight: 400;
	font-style: normal;
	font-display: auto;
	src: url(../fonts/BrutGrotesque-Regular.otf) format("otf"), url(../fonts/BrutGrotesque-Regular.otf) format("otf");
}

@font-face {
	font-family: BrutGrotesque-Bold;
	font-weight: 700;
	font-style: normal;
	font-display: auto;
	src: url(../fonts/BrutGrotesque-Bold.otf) format("otf"), url(../fonts/BrutGrotesque-Bold.otf) format("otf");
}

.wysiwyg small {
  font-size: inherit;
  display: inline;
  opacity: 1;
}

/* Masquer par défaut sur mobile */
.desktop-only {
  display: none;
}

/* Afficher sur desktop à partir de 768px (ou ce que tu veux) */
@media (min-width: 768px) {
  .desktop-only {
    display: block;
  }

  .desktop-only small {
  font-size: 1.2rem; /* Ajuste cette valeur selon tes besoins */
}