/* Le main-content peut grandir si on empile le texte */
#main-content{
  min-height:590px;   /* garde le "look" initial */
  height:auto;        /* au lieu de height:450px */
  overflow:hidden;    /* clearfix simple pour contenir les floats */
}

#main-content > div{
  margin:0;
}


/* Colonne de droite : reste à droite */
#main-content #home-right{
  float:right;
  width:230px;
  margin:0 10px 0 0;
  
}

/* Colonne de gauche : une seule colonne (les 3 blocs empilés) */
#main-content .txt-accueil{
  float:left;
  width:700px;          /* 960 - 230 - 10(marge droite) - 20 approx */
  margin:0 0 0 10px;
  height:auto;          /* au lieu de height:450px */
  padding-top:25px;     /* tu l'avais déjà */
  position:relative;
}



/* Les blocs de texte ne doivent pas être bloqués en hauteur */
#main-content .txt-accueil{
  height: auto;        /* au lieu de 450px */
}

/* Ligne de 3 blocs côte à côte */
#main-content .activites-row{
  display: flex;
  justify-content: space-between;
  gap: 10px;              /* espace entre blocs */
  margin-top: 20px;
}

/* On neutralise l'ancienne règle qui mettait le bouton en absolute en bas */
#main-content .txt-accueil .bt-activite{
  position: relative;     /* au lieu de absolute */
  bottom: auto;
  display: block;
  width: 220px;
  height: 180px;
  text-decoration: none;
  background-size: cover;
  background-position: center;
}

/* On garde ton look existant */
#main-content .txt-accueil .bt-activite p{
  width:100%;
  height:58px;
  font:18px 'basenine';
  color:#ffffff;
  background:url('images/bg-black.png');
  text-align:center;
  line-height:58px;
}

#main-content .txt-accueil .bt-activite img{
  display:block;
  margin: 50px auto 0 auto; /* centre la flèche */
}

/* Colonnes à hauteur égale */
#main-content{
  display: flex;
  align-items: stretch;   /* hauteur identique automatique */
  gap: 10px;
  height: auto;
  overflow: visible;      /* plus besoin du clearfix */
}

/* Colonne gauche */
#main-content .txt-accueil{
  float: none;
  width: 700px;           /* garde tes largeurs actuelles */
  margin: 0 0 0 10px;
}

/* Colonne droite */
#main-content #home-right{
  float: none;
  width: 230px;
  margin: 0 10px 0 0;
}
#main-content #home-right{
  background: #494949;
}

#main-content .txt-accueil .bt-activite p{
  font-size: 11px;
  line-height: 15px;
  padding: 10px 8px;
  text-align: center;

  min-height: 50px;        /* force tous les bandeaux à la même hauteur */
  display: flex;           /* centre verticalement le texte */
  align-items: center;
  justify-content: center;

  height: auto;            /* ok, min-height fait le job */
}






/* PAGE ACTIVITÉ : laisser le bloc grandir avec le texte */
#main-content-activite{
  height: 470px;        /* au lieu de 407px */
  margin-bottom: 50px;
}



/* Header plus compact */
#txt-activite > header{
  height: 40px;        /* au lieu de 58px */
  margin-bottom: 10px; /* au lieu de 15px */
}

#txt-activite > header p{
  font-size: 14px;     /* au lieu de 18px */
  line-height: 40px;   /* aligné sur 40px */
  padding-left: 10px;  /* un peu moins que 20px */
}

/* Sous-menu plus large */
.slider-wrapper nav > ul li .niveau2{
  width: 320px;      /* ajuste (ex: 280, 300, 340...) */
}

/* Items du sous-menu sur toute la largeur */
.slider-wrapper nav > ul > li > .niveau2 > li{
  width: 320px;      /* doit matcher la largeur ci-dessus */
}

/* Pas de retour à la ligne */
.slider-wrapper nav > ul > li > .niveau2 > li a{
  display: block;
  width: 100%;
  white-space: nowrap;
}
.slider-wrapper nav > ul > li > .niveau2 > li a{
  font-size: 14px;   /* optionnel */
  padding: 0 10px;   /* optionnel */
}
.slider-wrapper nav > ul li:hover .niveau2{
  height:160px;
}


.social-links{
  margin-top: 12px;
  display: flex;
  gap: 8px;
}

.social-link{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  text-decoration: none;

  transition: 0.2s ease-out;
}

.social-link svg{
  width: 18px;
  height: 18px;
  fill: #cecece;           /* discret */
  transition: 0.2s ease-out;
}

.social-link:hover{
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.25);
}

.social-link:hover svg{
  fill: #ffffff;
}