.overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.7) 100%
  );
}

.merci-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
}

.merci-content {
  text-align: center;
  color: var(--white);
  max-width: 600px;
}
.merci-content h1 {
  color: var(--white);
}

.merci-icon {
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 2rem;
}

.merci-icon svg {
  width: 50px;
  height: 50px;
  fill: var(--white);
}

.merci-info {
  background: rgba(255, 255, 255, 0.1);
  padding: 1.5rem;
  border-radius: 12px;
  margin-bottom: 2rem;
}

.merci-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.merci-actions .btn {
  padding: 1rem 2rem;
  font-size: 1rem;
}
.btn-white {
  background: white;
  color: #0277bd;
}
.btn-white:hover {
  background: #f5f5f5;
  transform: translateY(-2px);
}
.btn-outline {
  background: transparent;
  color: white;
  border: 2px solid white;
}
.btn-outline:hover {
  background: white;
  color: #0277bd;
}
.merci-phone {
  color: var(--secondary);
  font-weight: bold;
  text-decoration: none;
}

.hero-spacing {
  padding-top: var(--header-height);
}

.pluginPadding {
  padding-block: 80px;
}

@media (max-width: 1024px) {
  .pluginPadding {
    padding-block: 60px;
  }
}

/* Haut seulement : une page dont la dernière section porte son propre
   espacement (pages des réalisations, close par accroche-devis-1) ne doit
   pas ajouter un vide avant le pied de page. */
.pluginPadding.pluginPadding--haut {
  padding-bottom: 0;
}

/* ============================================================
   VAGUE DE BAS — [data-vague]
   Le bas du composant ondule et deborde sur la section suivante : les
   creux laissent voir le haut de cette section, quelle qu'elle soit. La
   vague est decoupee DANS le composant (masque), elle porte donc son
   propre fond — aplat, degrade ou photo — sans supposer la couleur de la
   section d'en dessous, que la variante ne connait pas.
   Meme mouvement que la lisiere de hero-16 : on glisse d'une periode,
   aller-retour, sur 14 s.

   Opt-in : la variante pose `data-vague` sur sa racine. Contrat :
   - sa marge basse est reprise (le chevauchement), et elle passe au-dessus
     de la section suivante (z-index) ;
   - son padding bas doit couvrir --vague-h : les creux mangent le bas du
     composant, jamais son contenu ;
   - tout ce qui sort de sa boite est coupe par le masque (ombre portee,
     badge qui deborde).
   ============================================================ */
[data-vague] {
    /* Une periode du motif : bosse puis creux, raccord sans couture. */
    --vague-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 50Q50 -30 100 50T200 50V0H0Z'/%3E%3C/svg%3E");
    --vague-h: clamp(20px, 2.8vw, 40px);
    --vague-l: clamp(260px, 32vw, 520px);

    position: relative;
    z-index: 1;
    margin-bottom: calc(-1 * var(--vague-h));

    -webkit-mask:
        linear-gradient(black, black) top left / 100% calc(100% - var(--vague-h) + 1px) no-repeat,
        var(--vague-motif) 0 100% / var(--vague-l) var(--vague-h) repeat-x;
    mask:
        linear-gradient(black, black) top left / 100% calc(100% - var(--vague-h) + 1px) no-repeat,
        var(--vague-motif) 0 100% / var(--vague-l) var(--vague-h) repeat-x;
    animation: mclVagueMaree 14s ease-in-out infinite alternate;
}

@keyframes mclVagueMaree {
    from {
        -webkit-mask-position: top left, 0 100%;
        mask-position: top left, 0 100%;
    }
    to {
        -webkit-mask-position: top left, var(--vague-l) 100%;
        mask-position: top left, var(--vague-l) 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-vague] {
        animation: none;
    }
}