/* massage-nu.be — registre « Vert amande »
 * Accent #2f7d6a (favicon) · neutre chaud amande/lin #f6efe3 / #efe4d2 · encre #17322b.
 * Formes signature : feuille (coins opposés arrondis) sur cartes et fiche, arche sur les photos,
 * pilules sur boutons et thèmes, vague + cœur en filigrane sur le bandeau d'inscription et le pied.
 */
html:not(#_) body.sa {
  --sa-accent: #2f7d6a; --sa-accent-txt: #fff;
  --sa-fond: #f6efe3; --sa-fond2: #efe4d2; --sa-surface: #fffcf6;
  --sa-texte: #17322b; --sa-muet: #4f5e57; --sa-bord: #e2d5bf;
  --sa-secondaire: #17322b; --sa-secondaire-txt: #fdf8ee;
  --sa-tete: #fffcf6; --sa-tete-txt: #17322b;
  --sa-pied: #17322b; --sa-pied-txt: #efe6d6;
  --sa-ombre: 0 2px 4px rgba(47,125,106,.07), 0 18px 34px -18px rgba(47,125,106,.38);
  --sa-rayon: 22px; --sa-rayon-s: 12px;
  --sa-police-titre: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  background:
    radial-gradient(900px 420px at 92% -6%, rgba(47,125,106,.10), transparent 70%),
    radial-gradient(700px 380px at -8% 30%, rgba(214,180,130,.22), transparent 70%),
    var(--sa-fond);
}
html:not(#_) body.sa h1, html:not(#_) body.sa h2 { font-weight: 700; letter-spacing: -.01em; }
html:not(#_) body.sa h1 { color: var(--sa-texte); }
html:not(#_) body.sa h2 { position: relative; }

/* en-tête : pilule amande, fil de lin */
html:not(#_) .sa-header .sa-header__in {
  background: var(--sa-tete); border: 1px solid var(--sa-bord); border-radius: 999px;
  box-shadow: var(--sa-ombre);
}
html:not(#_) .sa-logo .sa-logo__mark {
  background: var(--sa-accent); color: #fff; border-radius: 50% 50% 50% 12%;
  box-shadow: 0 0 0 4px #e6f1ec;
}
html:not(#_) .sa-logo .sa-logo__txt { font-family: var(--sa-police-titre); color: var(--sa-texte); }
html:not(#_) .sa-nav a { color: var(--sa-texte); border-radius: 999px; }
html:not(#_) .sa-nav a:hover { background: #e6f1ec; text-decoration: none; }

/* boutons : pilules, ombre verte douce */
html:not(#_) .sa-btn.sa-btn--accent, html:not(#_) .sa-btn.sa-btn--carte {
  background: var(--sa-accent); color: #fff; border-radius: 999px; border: 0;
  box-shadow: 0 10px 22px -12px rgba(47,125,106,.75); transition: transform .2s, box-shadow .2s;
}
html:not(#_) .sa-btn.sa-btn--accent:hover, html:not(#_) .sa-btn.sa-btn--carte:hover {
  background: #256656; transform: translateY(-1px); text-decoration: none;
}
html:not(#_) .sa-btn.sa-btn--ghost { border-radius: 999px; border-color: var(--sa-accent); color: #22604f; background: #fffcf6; }

/* hero : tuile texte en feuille, photo en arche */
html:not(#_) .sa-hero .sa-hero__in > * { border-radius: 34px 10px 34px 10px; }
html:not(#_) .sa-hero .sa-hero__visuel { border-radius: 999px 999px 26px 26px; overflow: hidden; box-shadow: var(--sa-ombre); }
html:not(#_) .sa-hero .sa-hero__h { color: var(--sa-texte); }
html:not(#_) .sa-hero .sa-hero__etapes li::marker, html:not(#_) .sa-hero .sa-hero__etapes span { color: var(--sa-accent); }

/* cartes d'annonces : feuille + arche photo */
html:not(#_) .sa-grille .sa-carte {
  background: var(--sa-surface); border: 1px solid var(--sa-bord);
  border-radius: 28px 8px 28px 8px; box-shadow: var(--sa-ombre); overflow: hidden;
  transition: transform .25s, box-shadow .25s;
}
html:not(#_) .sa-grille .sa-carte:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -20px rgba(47,125,106,.5); }
html:not(#_) .sa-carte .sa-carte__img { border-radius: 0 0 46% 46% / 0 0 22px 22px; overflow: hidden; }
html:not(#_) .sa-carte .sa-carte__img img { transition: transform .5s; }
html:not(#_) .sa-carte:hover .sa-carte__img img { transform: scale(1.04); }
html:not(#_) .sa-carte .sa-carte__new {
  background: #fffcf6; color: #22604f; border-radius: 999px; font-weight: 700;
  box-shadow: 0 4px 10px -4px rgba(23,50,43,.4);
}
html:not(#_) .sa-carte .sa-carte__pseudo { color: #22604f; }
html:not(#_) .sa-carte .sa-carte__titre, html:not(#_) .sa-carte .sa-carte__titre a { color: var(--sa-texte); font-family: var(--sa-police-titre); }
html:not(#_) .sa-carte .sa-carte__extrait, html:not(#_) .sa-carte .sa-carte__ville { color: var(--sa-muet); }

/* thèmes en pilules amande */
html:not(#_) .sa-tags .sa-tags__liste a, html:not(#_) .sa-chips .sa-chip {
  background: #e6f1ec; color: #1d4d41; border: 1px solid #cfe3da; border-radius: 999px;
}
html:not(#_) .sa-tags .sa-tags__liste a:hover { background: var(--sa-accent); color: #fff; text-decoration: none; }
html:not(#_) .sa-side, html:not(#_) .sa-tags.sa-tags--bloc {
  background: var(--sa-surface); border: 1px solid var(--sa-bord); border-radius: 26px 8px 26px 8px;
  box-shadow: var(--sa-ombre);
}

/* fiche : feuille, photo en arche, CTA en carte centrée */
html:not(#_) .sa-fiche .sa-fiche__photo, html:not(#_) .sa-fiche .sa-fiche__media img {
  border-radius: 999px 999px 24px 24px; box-shadow: var(--sa-ombre);
}
html:not(#_) .sa-fiche .sa-fiche__titre { font-family: var(--sa-police-titre); color: var(--sa-texte); }
html:not(#_) .sa-layout__main > .sa-fiche, html:not(#_) .sa-similaires {
  background: var(--sa-surface); border-radius: 30px 10px 30px 10px;
}
html:not(#_) .sa-cta {
  background: linear-gradient(160deg, #e6f1ec, #f6efe3); border: 1px solid #cfe3da;
  border-radius: 28px; text-align: center; padding: 1.4rem 1.2rem; box-shadow: var(--sa-ombre);
}
html:not(#_) .sa-cta .sa-cta__q { color: var(--sa-texte); font-family: var(--sa-police-titre); }
html:not(#_) .sa-dispo .sa-dispo__jour { background: var(--sa-surface); border: 1px solid var(--sa-bord); border-radius: 999px; }
html:not(#_) .sa-similaires .sa-similaires__img { border-radius: 50%; }
html:not(#_) .sa-commentaire { background: var(--sa-fond); border-radius: 18px 18px 18px 4px; }

/* formulaires */
html:not(#_) .sa-form input:not([type=checkbox]):not([type=radio]):not([type=file]),
html:not(#_) .sa-form select, html:not(#_) .sa-form textarea {
  background: #fffcf6; border: 1px solid #d8c9b0; border-radius: 14px; color: var(--sa-texte);
}
html:not(#_) .sa-form input:focus, html:not(#_) .sa-form textarea:focus, html:not(#_) .sa-form select:focus {
  outline: 0; border-color: var(--sa-accent); box-shadow: 0 0 0 3px rgba(47,125,106,.18);
}
html:not(#_) .sa-depot__bloc { background: var(--sa-surface); border-radius: 22px 8px 22px 8px; border: 1px solid var(--sa-bord); }

/* membres : médaillons */
html:not(#_) .sa-membres .sa-membres__avatar { border-radius: 50%; box-shadow: 0 0 0 3px #fffcf6, 0 0 0 5px #cfe3da; }

/* bandeau d'inscription : encre verte, vague + cœur */
html:not(#_) .sa-inscrire {
  --sa-texte: #fdf8ee; --sa-muet: #d6e4dc;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' fill-opacity='.07' d='M12 21s-7-4.4-9.3-9C1.2 8.7 3 5 6.6 5c2 0 3.5 1.1 5.4 3 1.9-1.9 3.4-3 5.4-3C21 5 22.8 8.7 21.3 12 19 16.6 12 21 12 21z'/%3E%3C/svg%3E") right 4% center / 180px no-repeat,
    linear-gradient(135deg, #17322b, #22604f);
  color: #fdf8ee; border-radius: 34px 10px 34px 10px; box-shadow: 0 24px 44px -24px rgba(23,50,43,.7);
}
html:not(#_) .sa-inscrire h2, html:not(#_) .sa-inscrire .sa-inscrire__h { color: #fdf8ee; }
html:not(#_) .sa-inscrire a { color: #bfe3d6; }
html:not(#_) .sa-inscrire .sa-btn.sa-btn--accent { background: #f2d9a8; color: #17322b; }

/* pied de page : vague de lin */
html:not(#_) .sa-footer {
  --sa-texte: #efe6d6; --sa-muet: #c9d6cf;
  position: relative; background: #17322b; color: #efe6d6; margin-top: 3rem;
}
html:not(#_) .sa-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' preserveAspectRatio='none'%3E%3Cpath fill='%2317322b' d='M0 24V12C20 0 40 0 60 12s40 12 60 0v12z'/%3E%3C/svg%3E") 0 0 / 120px 24px repeat-x;
}
html:not(#_) .sa-footer a { color: #efe6d6; }
html:not(#_) .sa-footer .sa-liens__h, html:not(#_) .sa-footer h2, html:not(#_) .sa-footer h3 { color: #f2d9a8; }
html:not(#_) .sa-footer .sa-liens__grid > * { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); border-radius: 22px 6px 22px 6px; color: #efe6d6; }
html:not(#_) .sa-footer .sa-btn.sa-btn--ghost { background: transparent; color: #efe6d6; border-color: #9fc7b8; }

/* barre mobile : couleurs seulement */
html:not(#_) .sa-barre-mobile { background: var(--sa-accent); color: #fff; }
html:not(#_) .sa-barre-mobile a { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  html:not(#_) .sa-carte, html:not(#_) .sa-carte .sa-carte__img img, html:not(#_) .sa-btn { transition: none; }
}