.btn-link {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    margin-top: 20px;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: #0056b3;
}

.btn-container {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 50px;
}


/* Container */
.plaquette {
  max-width: auto;
  margin: 0 auto;
}

/* Hero de base */
.hero-container {
  position: relative;
  background: #fafafa;
  min-height: 500px;
  max-height: 700px;
  overflow: hidden;
  /* Optionnel : padding pour respirer à gauche */
  padding: 48px 24px;
}

/* Titre/sous-titre à gauche, hors triangle */
.hero-text {
  position: relative;
  z-index: 2;            /* au-dessus du fond, sous le triangle si besoin */
  max-width: 48ch;       /* limite la largeur pour une belle ligne */
}

.hero-text h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 0 0 .5rem;
  color: #0b1020;
}

.hero-text p {
  font-size: clamp(1rem, 2vw, 1.375rem);
  color: #333;
  margin: 0;
}

/* --- Triangle VRAI (remplace le ::after) --- */
.triangle {
  position: absolute;
  inset: 0 0 0 auto;   /* top:0; right:0; bottom:0 */
  width: 60vw;         /* 60% de la fenêtre */
  height: 100%;
  background: #8acfcc;
  clip-path: polygon(100% 0, 100% 100%, 0 0); /* angle droit en haut-droite */
  z-index: 1;
  display: flex;       /* pour centrer le contenu du triangle */
  justify-content: flex-start;
  align-items: flex-start;
  padding-left: clamp(20vw, 30vw, 35vw); /* adapte à la diagonale */
}

/* Texte dans le triangle */
.triangle-text {
    pointer-events: auto;  /* re-active les clics sur du texte/lien si besoin */
    padding: clamp(10px, 2.5vw, 48px);
    text-align: right;
    color: #fff;
    font-weight: 700;
    line-height: 1.8;
    /* Taille qui s’adapte à l’aire disponible */
    font-size: clamp(1rem, 2.4vw, 2rem);
    max-width: 40ch;
    /* Empêche le texte de dépasser s’il est trop long */
    overflow-wrap: anywhere;
}

/* Responsive : triangle moins large sur mobile */
@media (max-width: 900px) {
  .triangle { width: 75vw; }
}
@media (max-width: 640px) {
  .triangle { width: 100vw; }
  .hero-text { max-width: 100%; }
}