/* ====== Section / Shape ====== */
.menu-buttons-section,
.menu-buttons-shape-section {
  position: relative;
  padding: 2rem clamp(1rem, 4vw, 2rem);
}

.menu-buttons-shape-section {
  padding-top: clamp(2rem, 6vw, 3.8rem);
}

.menu-buttons-shape-section .shape-divider {
  position: absolute;
  inset: 0;
  background: var(--ast-global-color-1);
  clip-path: polygon(0% 0%, 100% 0%, 88% 100%, 0% 100%);
  z-index: -1;
}

/* ====== Grilles ====== */
.buttons-grid .grid {
  --btn-min-h: 88px; /* hauteur mini commune des boutons (ajuste librement) */

  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  grid-auto-rows: 1fr;          /* ✅ même hauteur par rangée */
  gap: clamp(0.75rem, 2vw, 1.2rem);
  align-items: stretch;          /* étire les items à la même hauteur */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Chaque item devient un conteneur flex pour permettre au lien de s'étirer */
.buttons-grid .grid > li,
.menu-buttons-item {
  display: flex;
  min-width: 0; /* évite les débordements quand le texte est long */
}

/* CTA : une seule colonne, centrée sur mobile, à droite en large écrans */
nav.cta-button .grid {
  grid-template-columns: 1fr;
  justify-items: end; /* à droite par défaut */
  display: flex;
  justify-content: center;
}
@media (max-width: 768px) {
  nav.cta-button .grid { justify-items: center; }
}

/* ====== Liens / Boutons ====== */
.menu-buttons-link {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: #333;
  background: #fff;
  border-radius: .375rem;
  padding: .9rem 1rem;

  min-height: var(--btn-min-h); /* ✅ hauteur mini commune */
  width: 100%;
  height: 100%;                 /* ✅ occupe toute la hauteur du li */
  flex: 1 1 auto;               /* ✅ s'étire pour égaliser la hauteur */
  box-sizing: border-box;

  box-shadow: 0 4px 6px rgba(0,0,0,.15);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
  overflow-wrap: anywhere;      /* évite les dépassements */
}

/* Icône */
.menu-buttons-link i {
  font-size: 1.6rem;
  line-height: 1;
  flex: 0 0 auto;               /* l’icône ne rétrécit pas */
}

/* Label */
.menu-label {
  text-transform: uppercase;
  line-height: 1.25;
  white-space: normal;          /* autorise les retours à la ligne */
  flex: 1 1 auto;               /* laisse le label prendre l’espace restant */
  min-width: 0;                 /* permet le wrap propre */
}

/* Hover / focus */
.menu-buttons-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0,0,0,.2);
}

/* Focus clair (accessibilité) */
.menu-buttons-link:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(33,150,243,.35),
    0 6px 12px rgba(0,0,0,.2);
  transform: translateY(-1px);
}

/* État “courant” (aria-current) */
.menu-buttons-link[aria-current="page"] {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(0,0,0,.15),
    0 6px 12px rgba(0,0,0,.18);
}

/* Ombres un peu plus douces au survol global */
.buttons-grid .grid li a:hover {
  box-shadow: 0 6px 10px rgba(0,0,0,.2);
}

/* ====== CTA wrapper ====== */
.cta-button {
  height: 100%;                /* prend toute la hauteur du parent */
  display: flex;
  align-items: center;         /* centre verticalement */
  justify-content: center;     /* centre horizontalement par défaut */
  margin-top: clamp(0rem, 2vw, -4rem);
  padding: clamp(1rem, 4vw, 3rem) clamp(1rem, 4vw, 2rem);
}

/* Large écran : garde le bouton à droite */
@media (min-width: 1025px) {
  .cta-button {
    justify-content: flex-end;
  }
}
/* ====== Réduction des animations si l’utilisateur l’a demandé ====== */
@media (prefers-reduced-motion: reduce) {
  .menu-buttons-link { transition: none; }
}


/* 1 colonne sur mobile */
@media (max-width: 640px) {
  .buttons-grid .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}