/* ===== Conteneur principal ===== */
.decor-main {
  max-width: 1200px;
  margin: 0 auto 4rem;
  padding-inline: clamp(16px, 4vw, 40px); /* gouttières fluides */
  box-sizing: border-box;
}

/* ===== Bloc avec fond dégradé animé (inversé) ===== */
.decor-block {
  display: grid;
  grid-template-columns: 60% 1fr; /* image + contact à gauche, texte à droite */
  gap: 2rem;
  align-items: center;
  width: 100%;
  margin-bottom: 4rem;
  padding: 2rem;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--box-shadow-default);
  color: var(--white);

  background: linear-gradient(-45deg, var(--dark-blue), var(--light-blue), var(--dark-blue));
  background-size: 200% 200%;
  animation: decorGradientShift 8s ease infinite;
  animation-direction: reverse; /* inversion subtile par rapport à À propos */
}

@keyframes decorGradientShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ===== Container image + contact ===== */
.decor-image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ===== Image ===== */
.decor-image {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--box-shadow-default);
  margin: 1rem 0;
}
.decor-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* ===== Bloc contact sous l'image ===== */
.contact-bloc{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;     /* choisis ton écart ici */
  margin-top: 3rem;
}

.contact-bloc h3{
  margin-bottom: 0; /* important : on retire la marge du h3 */
}

.contact-bloc .btn{
  font-size: 1.1rem; /* optionnel */
}


/* ===== Texte ===== */
.decor-text {
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  margin-top: 2rem;
  max-width: 600px;
}
.decor-text h3 {
  margin: 0 0 0.75rem;
  font-weight: 700;
  font-size: 1.6rem;
}
.decor-text p {
  margin-bottom: 1rem;
  text-align: justify;
}
.decor-link {
  color: var(--yellow);
  text-decoration: none;
  font-weight: 600;
  transition: color .3s ease;
}
.decor-link:hover,
.decor-link:focus {
  color: var(--cta-hover);
  outline: none;
}
.spacer {
  display: block;
  margin: 4rem 0; /* adapte la valeur */
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .decor-block {
    grid-template-columns: 1fr; /* empile */
    gap: 1.5rem;
    padding: 1.75rem;
    margin-bottom: 2.5rem;
  }
  .decor-image-container { align-items: center; }
  .decor-image { margin: 0.5rem 0 1.25rem; }
  .decor-text {
    width: 100%;
    max-width: 65ch;
    margin-inline: auto;
  }
}

@media (max-width: 600px) {
  .decor-main { padding-inline: 1.25rem; }
  .decor-text { width: 100%; }
}

@media (max-width: 480px) {
  .decor-main { padding-inline: 1rem; }
  .decor-block { padding: 1rem; }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
  .decor-block { animation: none; }
}