:root {
  --color-1 : #EDEAE3;
  --color-2 : #000;
  --color-3 : #000;

  --btn-primary-bg : #000;
  --btn-primary-text : #FFF;
  
  --h1-xs: 36px;
  --h1: 72px;
  --h2-xs: 28px;
  --h2: 40px;
  --h3-xs: 20px;
  --h3: 24px;
  --h4-xs: 16px;
  --h4: 20px;
}


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

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



.cta-btn-outline {
  display: inline-block;
  padding: 10px 20px;
  border: 2px solid black;
  color: black;
  text-decoration: none;
  transition: all 0.3s ease;
}

.cta-btn-outline:hover {
  background: black;
  color: white;
}

.cta-btn-outline.active {
  background: black;
  color: white;
}

.cta-desc {
    font-size: 15px;
}

.main-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-radius: 0 0 0 1rem;
  background-image: url('../img/background.png'); /* <-- chemin relatif depuis le CSS */
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.cards-row {
  display: flex;
  flex-wrap: wrap; /* permet aux cartes de passer à la ligne */
  gap: 1rem;
  align-items: stretch; /* toutes les cartes ont la même hauteur */
}





/* NOUVELLE RÈGLE CSS POUR FORCER LA STRUCTURE 3 COLONNES SUR DESKTOP */

@media (min-width: 1024px) {
    /* Cible tous les éléments de colonne pour la vue desktop (1024px et plus) */
    .grid-col-24.s\:grid-col-12.m\:grid-col-6 {
        /* 3 cartes: 3 x 31.5% = 94.5%. Laisse de l'espace pour les deux 'gap: 1rem' */
        flex: 0 0 31.5% !important; 
        
        /* Assure que la hauteur est égale pour toutes les cartes */
        display: flex !important;
    }

    /* Force le lien interne à prendre 100% de la hauteur du conteneur flex */
    .grid-col-24.s\:grid-col-12.m\:grid-col-6 > a {
        height: 100% !important; 
        flex-direction: column !important;
        display: flex !important;
    }
    
}

.cards-row a {
    padding: 1.25rem !important;
    min-height: 240px !important;
}