/* ============================================================
   AlcalSpark — Glass Layer
   Dark glassmorphism, glows verts, containers d'icônes
   Charge APRÈS da-overrides.css sur toutes les pages.
   Palette stricte : #0A0D0B / #385144 / beige / blanc
   ============================================================ */

:root {
  --glass-bg:        rgba(255, 255, 255, 0.04);
  --glass-bg-hover:  rgba(255, 255, 255, 0.07);
  --glass-border:    rgba(255, 255, 255, 0.10);
  --glass-border-hi: rgba(255, 255, 255, 0.18);
  --glass-radius:    14px;
  --glass-blur:       blur(20px) saturate(180%);
  --glass-blur-hover: blur(24px) saturate(200%);
  --glow-green:      rgba(56, 81, 68, 0.35);
  --glow-green-soft: rgba(56, 81, 68, 0.18);
}

/* ============================================================
   1. ORBES GLOW — halos verts flottants derrière les sections
   ============================================================ */

.glow-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, var(--glow-green) 0%, transparent 65%);
  z-index: 0;
}

/* Glows automatiques sur les sections clés (pseudo-éléments, zéro markup) */
.philosophy-section,
.process-section,
.cta-section,
.pricing-section,
.portfolio-section,
.faq-section,
.products-cta-section,
.solo-section,
.manifesto-section,
.diagnostic-section {
  position: relative;
  overflow: hidden;
}

.philosophy-section::before,
.process-section::before,
.pricing-section::before,
.portfolio-section::before,
.faq-section::before,
.solo-section::before,
.manifesto-section::before,
.diagnostic-section::before {
  content: '';
  position: absolute;
  width: min(60vw, 780px);
  height: min(60vw, 780px);
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow-green-soft) 0%, transparent 62%);
  pointer-events: none;
  z-index: 0;
}

.philosophy-section::before { top: -22%; right: -18%; }
.process-section::before    { bottom: -28%; left: -20%; }
.pricing-section::before    { top: -14%; left: 50%; transform: translateX(-50%); }
.portfolio-section::before  { top: 8%; right: -22%; }
.faq-section::before        { bottom: -20%; right: -15%; }
.solo-section::before       { top: -10%; left: -18%; }
.manifesto-section::before  { bottom: -25%; right: -12%; }
.diagnostic-section::before { top: -18%; left: -16%; }

.cta-section::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(80vw, 1100px);
  height: min(55vw, 700px);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(56, 81, 68, 0.22) 0%, rgba(56, 81, 68, 0.08) 45%, transparent 72%);
  pointer-events: none;
  z-index: 0;
}

.philosophy-section > *,
.process-section > *,
.cta-section > *,
.pricing-section > *,
.portfolio-section > *,
.faq-section > *,
.products-cta-section > *,
.solo-section > *,
.manifesto-section > *,
.diagnostic-section > * {
  position: relative;
  z-index: 1;
}

/* Page heroes internes : halo vert cohérent avec le hero d'accueil */
.page-hero .ph-bg {
  background:
    radial-gradient(ellipse 55% 65% at 18% 42%, rgba(56, 81, 68, 0.30) 0%, transparent 62%),
    radial-gradient(ellipse 40% 50% at 78% 20%, rgba(56, 81, 68, 0.14) 0%, transparent 60%),
    transparent;
}
.page-hero .ph-bg::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 140px;
  background: linear-gradient(to bottom, transparent, #0A0D0B);
}

/* ============================================================
   2. CARTES GLASSMORPHISM — recette commune
   ============================================================ */

.card,
.pricing-card,
.abo-card,
.misc-card,
.pourquoi-card,
.value-card,
.product-card,
.estime-card,
.contact-card,
.contact-form-wrap,
.faq-item,
.skill-item,
.saas-mockup,
.seo-mockup,
.brand-mockup,
.seo-service-card,
.advantage-card {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease,
              background 0.3s ease,
              backdrop-filter 0.3s ease,
              -webkit-backdrop-filter 0.3s ease,
              box-shadow 0.3s ease,
              transform 0.45s var(--ease-out, ease);
}

/* Liseré lumineux en haut de chaque carte (reflet verre) */
.card::after,
.pricing-card::after,
.abo-card::after,
.pourquoi-card::after,
.value-card::after,
.product-card::after,
.estime-card::after,
.contact-card::after {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(248, 245, 242, 0.18), transparent);
  pointer-events: none;
}

.card:hover,
.pricing-card:hover,
.abo-card:hover,
.misc-card:hover,
.pourquoi-card:hover,
.value-card:hover,
.product-card:hover,
.estime-card:hover,
.contact-card:hover,
.contact-form-wrap:hover,
.faq-item:hover,
.skill-item:hover,
.saas-mockup:hover,
.seo-mockup:hover,
.brand-mockup:hover,
.seo-service-card:hover,
.advantage-card:hover {
  background: var(--glass-bg-hover) !important;
  -webkit-backdrop-filter: var(--glass-blur-hover);
  backdrop-filter: var(--glass-blur-hover);
  border-color: var(--glass-border-hi) !important;
  transform: translateY(-4px);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* Reflet lumineux (dégradé haut → bas) + spotlight suiveur de curseur
   (main.js pilote --mx/--my/--sg) superposés sur le même pseudo-élément */
.card::before,
.pricing-card::before,
.abo-card::before,
.misc-card::before,
.pourquoi-card::before,
.value-card::before,
.product-card::before,
.estime-card::before,
.contact-card::before,
.contact-form-wrap::before,
.faq-item::before,
.skill-item::before,
.saas-mockup::before,
.seo-mockup::before,
.brand-mockup::before,
.seo-service-card::before,
.advantage-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
      rgba(90, 138, 110, calc(0.10 * var(--sg, 0))), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 55%);
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 0;
}

.card > *,
.pricing-card > *,
.abo-card > *,
.misc-card > *,
.pourquoi-card > *,
.value-card > *,
.product-card > *,
.estime-card > *,
.contact-card > *,
.contact-form-wrap > *,
.faq-item > *,
.skill-item > *,
.saas-mockup > *,
.seo-mockup > *,
.brand-mockup > *,
.seo-service-card > *,
.advantage-card > * {
  position: relative;
  z-index: 1;
}

/* Fallback navigateurs sans support backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card,
  .pricing-card,
  .abo-card,
  .misc-card,
  .pourquoi-card,
  .value-card,
  .product-card,
  .estime-card,
  .contact-card,
  .contact-form-wrap,
  .faq-item,
  .skill-item,
  .saas-mockup,
  .seo-mockup,
  .brand-mockup,
  .seo-service-card,
  .advantage-card,
  .portfolio-item,
  .pf-item {
    background: rgba(15, 20, 30, 0.85) !important;
  }
}

/* ============================================================
   3. PRICING — plan mis en avant
   ============================================================ */

.pricing-card.featured {
  border-color: rgba(90, 138, 110, 0.38) !important;
  background: rgba(30, 43, 36, 0.55) !important;
  box-shadow:
    0 0 0 1px rgba(90, 138, 110, 0.18),
    0 24px 70px rgba(0, 0, 0, 0.5),
    0 0 70px rgba(56, 81, 68, 0.32);
}

.pricing-card.featured:hover {
  box-shadow:
    0 0 0 1px rgba(90, 138, 110, 0.3),
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 0 90px rgba(56, 81, 68, 0.42);
}

.pricing-card.featured::after {
  background: linear-gradient(to right, transparent, rgba(90, 138, 110, 0.55), transparent);
}

/* Pill réservé au label "Populaire" — repositionné À L'INTÉRIEUR de la
   carte (les cartes verre ont overflow:hidden, un pill à cheval sur le
   bord serait rogné) */
.pc-featured-label {
  position: absolute !important;
  top: 18px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: rgba(56, 81, 68, 0.92) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #F8F5F2 !important;
  border: 1px solid rgba(90, 138, 110, 0.4) !important;
  border-radius: 999px !important;
  letter-spacing: 0.14em;
  z-index: 2;
}

/* Catégorie de plan : label typographique, pas un pill.
   Un tiret vert introduit le texte, aucun fond qui déborde. */
.pc-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: none !important;
  border: none !important;
  color: rgba(248, 245, 242, 0.6) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.pc-badge::before {
  content: '';
  width: 1.4rem;
  height: 1px;
  background: rgba(90, 138, 110, 0.7);
  flex-shrink: 0;
}

/* La carte featured porte le pill absolu : on réserve l'espace en haut
   pour que le label de catégorie ne vienne jamais le toucher. */
.pricing-card.featured {
  padding-top: 68px !important;
}

/* ============================================================
   4. CONTAINERS D'ICÔNES — petits carrés arrondis
   ============================================================ */

.pq-icon,
.cc-icon,
.cp-icon,
.skill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(56, 81, 68, 0.22) !important;
  border: 1px solid rgba(90, 138, 110, 0.28) !important;
  color: #F8F5F2 !important;
  flex-shrink: 0;
}

/* ============================================================
   5. ACCUEIL — sections sous le hero
   ============================================================ */

/* Services : lignes verre au hover */
.service-item::before {
  background: linear-gradient(to right, rgba(56, 81, 68, 0.10), rgba(56, 81, 68, 0.02)) !important;
}

/* Philosophie : colonnes rehaussées d'un fond verre discret */
.philosophy-grid .phil-item {
  transition: background 0.4s ease;
}

/* Portfolio : cartes images arrondies + halo au hover */
.portfolio-item,
.pf-item {
  border-radius: var(--glass-radius);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: border-color 0.3s ease, background 0.3s ease,
              backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease,
              box-shadow 0.5s ease, transform 0.5s var(--ease-out, ease);
}

.portfolio-item:hover,
.pf-item:hover {
  border-color: var(--glass-border-hi);
  -webkit-backdrop-filter: var(--glass-blur-hover);
  backdrop-filter: var(--glass-blur-hover);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.5),
    0 0 50px rgba(56, 81, 68, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.pi-meta {
  background: rgba(20, 27, 23, 0.5);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* Process : numéros fantômes + carte verre au hover */
.process-step {
  border-radius: var(--glass-radius);
  transition: background 0.4s ease;
}
.process-step:hover {
  background: rgba(20, 27, 23, 0.4);
}

/* ============================================================
   6. FORMULAIRES — verre
   ============================================================ */

.contact-form input,
.contact-form textarea,
.contact-form select {
  background: rgba(20, 27, 23, 0.45) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 10px !important;
  color: #F8F5F2 !important;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  border-color: rgba(90, 138, 110, 0.5) !important;
  background: rgba(28, 38, 32, 0.55) !important;
  outline: none;
}

/* ============================================================
   7. FILTRES PORTFOLIO — pills verre
   ============================================================ */

.filter-btn {
  background: rgba(20, 27, 23, 0.4) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 999px !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: border-color 0.3s, background 0.3s, color 0.3s;
}

.filter-btn:hover,
.filter-btn.active {
  background: rgba(56, 81, 68, 0.35) !important;
  border-color: rgba(90, 138, 110, 0.45) !important;
  color: #F8F5F2 !important;
}

/* ============================================================
   8. TAGS & BADGES — verre
   ============================================================ */

.tag,
.stack-pill,
.product-card-tag,
.saas-badge {
  background: rgba(56, 81, 68, 0.18) !important;
  border: 1px solid rgba(90, 138, 110, 0.25) !important;
  border-radius: 999px !important;
  color: rgba(248, 245, 242, 0.75) !important;
}

/* ============================================================
   9. REVEALS CINÉMATIQUES — profondeur accrue
   ============================================================ */

.reveal        { opacity: 0; transform: translateY(34px); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-left   { opacity: 0; transform: translateX(-40px); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-right  { opacity: 0; transform: translateX(40px); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-scale  { opacity: 0; transform: scale(0.94); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }

.reveal.visible,
.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible {
  opacity: 1;
  transform: none;
}

.delay-1 { transition-delay: 0.08s !important; }
.delay-2 { transition-delay: 0.16s !important; }
.delay-3 { transition-delay: 0.24s !important; }
.delay-4 { transition-delay: 0.32s !important; }
.delay-5 { transition-delay: 0.40s !important; }

/* ============================================================
   10. HORS PALETTE — neutralisation des restes dorés
   ============================================================ */

.gold-line,
.gold-line-center {
  background: rgba(56, 81, 68, 0.5) !important;
}

/* Spotlight services.css utilisait un doré, réaligné vert */
.service-row::after {
  background: radial-gradient(160px circle at var(--mx, 50%) var(--my, 50%),
              rgba(90, 138, 110, calc(0.08 * var(--sg, 0))), transparent 70%) !important;
}

/* ============================================================
   9b. EN-TÊTES DE CARTES SERVICES — icône à gauche, numéro à
   droite, dans le flux : plus aucun chevauchement possible
   ============================================================ */

.ssc-head,
.si-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 22px;
}

.ssc-head .ssc-icon,
.si-head .si-icon {
  margin-bottom: 0;
}

/* Numéro fantôme : plus d'absolu, typo serif italique intentionnelle */
.ssc-num,
.si-num {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic;
  font-weight: 300 !important;
  font-size: 3rem !important;
  line-height: 0.9 !important;
  color: rgba(90, 138, 110, 0.30) !important;
  user-select: none;
  flex-shrink: 0;
}

/* ============================================================
   10a. LISTES À PUCES — la puce reste ancrée sur la 1re ligne
   même quand le texte passe sur plusieurs lignes
   ============================================================ */

.service-features li,
.pc-features li {
  align-items: flex-start !important;
}
.service-features li::before,
.pc-features li::before {
  margin-top: 0.5em;
  line-height: 1;
}

/* ============================================================
   10b. SECTIONS VERTES HÉRITÉES → dark + glow central
   ============================================================ */

.section-dark {
  background: transparent !important;
  color: var(--cream, #F8F5F2) !important;
  position: relative;
  overflow: hidden;
}

.section-dark::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(80vw, 1100px);
  height: min(55vw, 700px);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(56, 81, 68, 0.22) 0%, rgba(56, 81, 68, 0.08) 45%, transparent 72%);
  pointer-events: none;
  z-index: 0;
}

.section-dark > * { position: relative; z-index: 1; }

.section-dark .text-gradient {
  color: var(--green-bright, #5a8a6e) !important;
  -webkit-text-fill-color: var(--green-bright, #5a8a6e) !important;
}

.section-dark .btn-gold,
.section-dark .btn-primary {
  background: transparent !important;
  color: rgba(248, 245, 242, 0.85) !important;
  border: 1px solid rgba(248, 245, 242, 0.3) !important;
}
.section-dark .btn-gold:hover,
.section-dark .btn-primary:hover {
  border-color: rgba(248, 245, 242, 0.65) !important;
  color: #F8F5F2 !important;
  background: rgba(248, 245, 242, 0.04) !important;
}

/* ============================================================
   12. COMPOSITIONS ASYMÉTRIQUES — casser la grille uniforme
   (margin-top plutôt que transform : compatible reveals)
   ============================================================ */

@media (min-width: 1024px) {

  /* Accueil — philosophie : colonnes en escalier */
  .philosophy-grid .phil-item:nth-child(2) { margin-top: 2.75rem; }
  .philosophy-grid .phil-item:nth-child(3) { margin-top: 5.5rem; }

  /* Services — systèmes intelligents : première carte dominante,
     les suivantes descendent en cascade */
  .si-cards {
    grid-template-columns: 1.18fr 1fr 1fr !important;
    align-items: start !important;
  }
  .si-cards .si-card:nth-child(2) { margin-top: 2.75rem; }
  .si-cards .si-card:nth-child(3) { margin-top: 5.5rem; }

  /* Services — cartes 06/07 : duo décalé */
  .services-two-col {
    align-items: start !important;
  }
  .services-two-col .service-small-card:nth-child(2) { margin-top: 3rem; }

  /* Tarifs — le plan featured domine la composition */
  .pricing-grid {
    grid-template-columns: 1fr 1.16fr 1fr !important;
    align-items: start !important;
  }
  .pricing-grid .pricing-card:nth-child(1) { margin-top: 2rem; }
  .pricing-grid .pricing-card:nth-child(3) { margin-top: 2rem; }

  /* Tarifs — prestations complémentaires : rythme alterné */
  .misc-grid { align-items: start !important; }
  .misc-grid .misc-card:nth-child(even) { margin-top: 2rem; }

  /* À propos — cartes pourquoi : rythme alterné */
  .pourquoi-grid { align-items: start !important; }
  .pourquoi-grid .pourquoi-card:nth-child(even) { margin-top: 2.5rem; }

  /* Produits : carte à venir légèrement en retrait */
  .products-grid { align-items: start !important; }
  .products-grid > *:nth-child(2) { margin-top: 2.5rem; }
}

/* ============================================================
   13. RENDU DIFFÉRÉ — les sections sous le pli ne sont pas
   rendues tant qu'elles n'approchent pas du viewport
   ============================================================ */

.philosophy-section,
.portfolio-teaser,
.process-section,
.cta-section,
.faq-section,
.si-section,
.pricing-section,
.products-cta-section,
.solo-section,
.manifesto-section,
#footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 720px;
}

/* ============================================================
   11. RESPONSIVE & PERFORMANCE
   ============================================================ */

@media (max-width: 767px) {
  :root {
    --glass-blur: blur(10px);
  }

  /* Glows plus légers sur mobile */
  .philosophy-section::before,
  .process-section::before,
  .pricing-section::before,
  .portfolio-section::before,
  .faq-section::before,
  .solo-section::before,
  .manifesto-section::before,
  .cta-section::before {
    opacity: 0.6;
  }

  /* backdrop-filter très coûteux sur GPU mobile : fond quasi opaque
     à la place, rendu visuel équivalent sur fond sombre */
  .card,
  .pricing-card,
  .abo-card,
  .misc-card,
  .pourquoi-card,
  .value-card,
  .product-card,
  .estime-card,
  .contact-card,
  .contact-form-wrap,
  .faq-item,
  .skill-item,
  .saas-mockup,
  .seo-mockup,
  .brand-mockup {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(17, 23, 20, 0.92) !important;
  }
  .pi-meta,
  .filter-btn {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* Pas de lift au hover (tactile) */
  .card:hover,
  .pricing-card:hover,
  .abo-card:hover,
  .pourquoi-card:hover,
  .value-card:hover,
  .product-card:hover,
  .contact-card:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .card, .pricing-card, .abo-card, .pourquoi-card,
  .value-card, .product-card, .contact-card,
  .portfolio-item, .pf-item {
    transition: none !important;
  }
}

/* ============================================================
   14. VAGUE DE FOND — une seule vague en lignes fines qui
   s'estompe sur ses propres bords (pas un pavage), en filigrane
   sous tout le contenu, sur l'ensemble du site.

   z-index:-1 : place la vague sous tout élément non explicitement
   négatif, quel que soit le navigateur. Fonctionne de façon fiable
   ici car `main` (et #footer) déclarent leur propre contexte
   d'empilement via position:relative + z-index:1 — sans cela, un
   z-index négatif sur un ::before pouvait rester masqué par des
   éléments non positionnés qui peignent après le fond de la page
   mais avant tout contenu positionné (canvas de particules, anciens
   fonds de section opaques). Pas de will-change : sur certains
   moteurs (WebKit notamment), la promotion de calque combinée à une
   animation de transform sur un élément fixed peut faire dériver
   l'ordre d'empilement pendant l'animation. L'anim reste en
   transform seul (compositor only) sans ce hint.
   ============================================================ */

body::before {
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  width: 150vw;
  height: 26vh;
  background-image: url('../assets/bg-wave.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.75;
  z-index: -1;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(14deg);
  animation: bg-wave-sway 40s ease-in-out infinite alternate;
}

@keyframes bg-wave-sway {
  from { transform: translate(-50%, -50%) rotate(8deg); }
  to   { transform: translate(-50%, -50%) rotate(20deg); }
}

/* Desktop : balancement bien plus ample, lecture "elle tourne sur
   elle-même" en continu. Reste borné (jamais proche de 90deg) pour
   ne pas réduire la bande à une mince tranche verticale. */
@media (min-width: 768px) {
  body::before {
    animation: bg-wave-sway-desktop 55s ease-in-out infinite alternate;
  }
}

@keyframes bg-wave-sway-desktop {
  from { transform: translate(-50%, -50%) rotate(-20deg); }
  to   { transform: translate(-50%, -50%) rotate(50deg); }
}

@media (max-width: 767px) {
  body::before {
    width: 240vw;
    height: 16vh;
    opacity: 0.6;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    animation: none;
    transform: translate(-50%, -50%) rotate(-2deg);
  }
}

/* Tout le contenu de page (main) forme un unique contexte
   d'empilement au-dessus de la vague (z-index:-1), quel que soit
   le texte concerné et sans avoir à positionner chaque élément
   individuellement. #footer reçoit le même traitement de façon
   explicite et autonome (position + z-index déclarés ici, sans
   dépendre d'une règle position:relative définie ailleurs). */
main {
  position: relative;
  z-index: 1;
}
#footer {
  position: relative;
  z-index: 1;
}