/* annonces-sex-monaco.com — registre « terrasse & corail » (sexeannoncesastro, skin-2 « colonne »).
 * Palette : accent framboise #d81b60 (favicon, inchangé) · framboise profond #b8194f · corail #f2726f (DÉCOR seul,
 * jamais sous du texte : 3:1) · corail pâle #ffe4dc · pêche #fff5ef / #ffe9df · crème #fffaf7 · encre #2f2024 ·
 * muet chaud #6e565c · sable pêche #f4d9cf.
 * Composition : store rayé corail sous un en-tête large LOGO À DROITE (nav à gauche) ; hero en deux colonnes avec
 * photo en ARCHE voilée de corail ; étapes en MÉDAILLONS ; annonces en cartes-lignes aérées à ombre framboise et
 * photo en arche ; thèmes en PILULES corail ; titres soulignés d'une VAGUE ; fiche en carte centrée, CTA en carte
 * au cœur filigrané ; pied de page en cartouche crème sur bande pêche.
 * skin-2 est austère (serif, zéro ombre, logo centré, photos rondes, thèmes en liste) : tout se joue contre ses
 * règles en 0,2,1 (body.sa.skin-2 …). Deux !important seulement, pour défaire ceux du gabarit sur le hero.
 * Aucun display/position de mécanisme (barres fixes, consentement, tiroir) touché. */

/* --- 1. variables (sur body.sa.skin-2 : bat .skin-2 ; --sa-accent reste celui du favicon) --- */
body.sa.skin-2 {
  --tc-a: #d81b60; --tc-af: #b8194f; --tc-c: #f2726f; --tc-cp: #ffe4dc; --tc-s: #fffaf7; --tc-e: #2f2024;
  --tc-store: repeating-linear-gradient(90deg, #f2726f 0 15px, #ffd9cf 15px 30px);
  --tc-o: 0 1px 2px rgba(120, 40, 60, .05), 0 16px 34px -20px rgba(216, 27, 96, .34);
  --tc-oh: 0 2px 5px rgba(120, 40, 60, .07), 0 26px 46px -22px rgba(216, 27, 96, .5);
  --tc-coeur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d81b60' fill-opacity='.1' d='M12 21s-8-5.3-8-11a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 10c0 5.7-8 11-8 11z'/%3E%3C/svg%3E");
  --tc-vague: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 9' preserveAspectRatio='none'%3E%3Cpath d='M0 6 Q15 1 30 6 T60 6 T90 6 T120 6' fill='none' stroke='%23f2726f' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --sa-max: 880px; --sa-rayon: 18px; --sa-rayon-s: 12px;
  --sa-fond: #fff5ef; --sa-fond2: #ffe9df; --sa-surface: #fffaf7;
  --sa-texte: #2f2024; --sa-muet: #6e565c; --sa-bord: #f4d9cf;
  --sa-ombre: 0 1px 2px rgba(120, 40, 60, .05), 0 16px 34px -20px rgba(216, 27, 96, .34);
  --sa-tete: #fffaf7; --sa-pied: #ffe9df; --sa-pied-txt: #56434a;
  --sa-secondaire: #b8194f; --sa-secondaire-txt: #fff; --sa-like: #d81b60;
  background-image: radial-gradient(120% 620px at 50% -12%, #ffe2d6 0%, rgba(255, 226, 214, 0) 70%);
  background-repeat: no-repeat;
}

/* --- 2. boutons : pilules accueillantes, casse normale, ombre colorée --- */
body.sa.skin-2 .sa-btn { border-radius: 999px; text-transform: none; letter-spacing: 0; font-size: .94rem; font-weight: 700; }
body.sa.skin-2 .sa-btn--accent {
  background: linear-gradient(135deg, #d81b60 0%, #ab1748 100%); color: #fff; border-color: transparent;
  box-shadow: 0 10px 22px -12px rgba(216, 27, 96, .8);
}
body.sa.skin-2 .sa-btn--accent:hover { box-shadow: 0 14px 28px -12px rgba(216, 27, 96, .9); }
body.sa.skin-2 .sa-btn--lg { min-height: 52px; padding: .7em 1.9em; }
body.sa.skin-2 .sa-btn--ghost { background: var(--tc-s); border-color: var(--sa-bord); color: var(--tc-e); }
body.sa.skin-2 .sa-btn--ghost:hover { border-color: var(--tc-c); color: var(--tc-af); }
body.sa.skin-2 .sa-btn--carte, body.sa.skin-2 .sa-btn--like {
  background: var(--tc-cp); border-color: var(--tc-c); color: var(--tc-af); border-radius: 999px;
}
body.sa.skin-2 .sa-btn--carte:hover { background: var(--tc-a); border-color: var(--tc-a); color: #fff; }
body.sa.skin-2 .sa-pastille {
  background: var(--tc-s); border: 1px solid var(--sa-bord); border-radius: 999px; padding: .45rem 1rem;
  box-shadow: 0 6px 14px -10px rgba(216, 27, 96, .45);
}
body.sa.skin-2 .sa-pastille:hover { border-color: var(--tc-c); }
body.sa.skin-2 .sa-badge { background: #fff; color: var(--tc-af); box-shadow: inset 0 0 0 1px var(--tc-c); }
body.sa.skin-2 .sa-badge--ok { background: var(--tc-cp); color: var(--tc-af); box-shadow: none; }

/* --- 3. en-tête : store rayé, logo à DROITE sur desktop (à gauche sur mobile), nav compacte --- */
body.sa.skin-2 .sa-header {
  background: var(--tc-store) bottom center / 100% 7px no-repeat, var(--sa-tete); padding-bottom: 7px;
}
body.sa.skin-2 .sa-header__in { padding-top: 1rem; }
body.sa.skin-2 .sa-logo { color: var(--tc-e); }
@media (max-width: 899px) {
  body.sa.skin-2 .sa-header__in { align-items: flex-start; padding-right: 52px; padding-top: .9rem; }
  body.sa.skin-2 .sa-logo { font-size: 1.55rem; }
}
@media (min-width: 900px) {
  body.sa.skin-2 .sa-header__in {
    flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between;
    gap: .9rem; padding-block: 1rem .9rem;
  }
  body.sa.skin-2 .sa-logo { order: 3; flex: none; font-size: 1.45rem; }
  body.sa.skin-2 .sa-nav {
    order: 1; flex: 1 1 auto; width: auto; min-width: 0; flex-direction: row; justify-content: flex-start;
    border: 0; padding: 0;
  }
  body.sa.skin-2 .sa-nav ul { justify-content: flex-start; gap: 0; }
  body.sa.skin-2 .sa-header .sa-wrap { max-width: 1060px; }
  body.sa.skin-2 .sa-nav li a {
    text-transform: none; letter-spacing: 0; font-size: .8rem; padding: .4rem .34rem;
    border-bottom: 2px solid transparent; color: var(--sa-muet);
  }
  body.sa.skin-2 .sa-nav li a:hover, body.sa.skin-2 .sa-nav li a.is-actif {
    color: var(--tc-af); border-bottom-color: var(--tc-c);
  }
  body.sa.skin-2 .sa-header__actions { order: 2; flex: none; padding: 0; gap: .4rem; }
  body.sa.skin-2 .sa-header__placer, body.sa.skin-2 .sa-header__compte { font-size: .85rem; padding-inline: .95em; }
}

/* --- 4. hero : deux colonnes, photo en ARCHE voilée corail, étapes en MÉDAILLONS --- */
body.sa.skin-2 .sa-hero { padding-top: 2rem; }
body.sa.skin-2 .sa-hero__h1 { color: var(--tc-e); }
body.sa.skin-2 .sa-hero__visuel {
  display: block !important; /* ponctuel : skin-2 masque le visuel en !important, or la photo fait la chaleur du hero */
  width: min(100%, 250px); aspect-ratio: 1 / 1; margin-inline: auto;
  border: 8px solid var(--tc-s); border-radius: 130px 130px 24px 24px;
  background-color: var(--sa-fond2);
  background-image: linear-gradient(168deg, rgba(242, 114, 111, .26), rgba(171, 23, 72, .18)), var(--sa-hero, none);
  background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat;
  background-clip: padding-box; background-origin: padding-box;
  box-shadow: 0 2px 5px rgba(120, 40, 60, .08), 0 28px 50px -28px rgba(216, 27, 96, .55);
}
body.sa.skin-2 .sa-hero__etapes { grid-template-columns: minmax(0, 1fr); gap: .7rem; max-width: none; }
body.sa.skin-2 .sa-hero__etapes li { flex-direction: row; align-items: center; text-align: left; gap: .8rem; font-size: 1rem; }
body.sa.skin-2 .sa-hero__etapes li::before {
  width: 2.5em; height: 2.5em; border: 2px solid var(--tc-c); border-radius: 50%; background: var(--tc-s);
  color: var(--tc-af); font-family: var(--sa-police-titre); font-style: normal; font-size: 1.05rem; font-weight: 700;
  box-shadow: 0 8px 16px -10px rgba(216, 27, 96, .6);
}
@media (min-width: 900px) {
  body.sa.skin-2 .sa-hero--photo .sa-hero__in {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr) !important; /* ponctuel : skin-2 force 1fr en !important */
    justify-items: stretch; align-items: center; gap: 2.2rem; text-align: left;
  }
  body.sa.skin-2 .sa-hero--photo .sa-hero__txt { text-align: left; }
  body.sa.skin-2 .sa-hero--photo .sa-hero__h1 { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.9rem); }
  body.sa.skin-2 .sa-hero--photo .sa-hero__visuel { width: 100%; max-width: 300px; margin-inline: 0 auto; }
}

/* --- 5. titres de section : VAGUE corail --- */
body.sa.skin-2 .sa-dernieres__h::after, body.sa.skin-2 .sa-regions .sa-h2::after,
body.sa.skin-2 .sa-blog .sa-h2::after, body.sa.skin-2 .sa-membres__h::after,
body.sa.skin-2 .sa-fiche__texte h2::after {
  content: ""; display: block; width: 102px; height: 9px; margin-top: .5rem;
  background: var(--tc-vague) left center / 102px 9px no-repeat;
}

/* --- 6. annonces : cartes-lignes aérées, ombre framboise, photo en ARCHE --- */
body.sa.skin-2 .sa-grille { gap: .95rem; border-top: 0; margin-top: 1.1rem; }
body.sa.skin-2 .sa-carte {
  background: var(--tc-s); border: 1px solid var(--sa-bord); border-radius: 22px; padding: 1rem 1.15rem;
  box-shadow: var(--tc-o); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body.sa.skin-2 .sa-carte:hover { transform: translateY(-3px); border-color: var(--tc-c); box-shadow: var(--tc-oh); }
body.sa.skin-2 .sa-carte__img {
  border-radius: 58px 58px 16px 16px; align-self: flex-start;
  box-shadow: 0 8px 18px -12px rgba(216, 27, 96, .6);
}
body.sa.skin-2 .sa-carte__img img { transition: transform .35s ease; }
body.sa.skin-2 .sa-carte:hover .sa-carte__img img { transform: scale(1.06); }
body.sa.skin-2 .sa-carte__new {
  bottom: 0; background: var(--tc-af); color: #fff; border-radius: 999px;
  box-shadow: 0 6px 14px -8px rgba(171, 23, 72, .8);
}
body.sa.skin-2 .sa-carte__titre a { color: var(--tc-e); }
body.sa.skin-2 .sa-carte__pied { border-top: 1px dotted var(--sa-bord); padding-top: .6rem; }

/* --- 7. thèmes en PILULES corail (skin-2 les met en liste à filets) --- */
body.sa.skin-2 .sa-tags, body.sa.skin-2 .sa-side, body.sa.skin-2 .sa-similaires, body.sa.skin-2 .sa-blog__item,
body.sa.skin-2 .sa-depot__bloc, body.sa.skin-2 .sa-recherche, body.sa.skin-2 .sa-hero__form {
  background: var(--tc-s); border: 1px solid var(--sa-bord); border-top: 3px solid var(--tc-c);
  border-radius: 20px; padding: 1.15rem 1.25rem 1.3rem; box-shadow: var(--tc-o);
}
body.sa.skin-2 .sa-tags__liste { flex-direction: row; flex-wrap: wrap; gap: .5rem; }
body.sa.skin-2 .sa-tags__liste a {
  border: 1px solid var(--tc-c); border-radius: 999px; background: var(--tc-cp); color: var(--tc-e);
  padding: .38rem .8rem; gap: .45rem; justify-content: center; box-shadow: 0 5px 12px -8px rgba(216, 27, 96, .55);
}
body.sa.skin-2 .sa-tags__liste a:hover, body.sa.skin-2 .sa-tags__liste li.is-actif a {
  background: var(--tc-a); border-color: var(--tc-a); color: #fff;
}
body.sa.skin-2 .sa-side__liste li { border-top-color: var(--sa-bord); }
body.sa.skin-2 .sa-similaires__liste li { border-bottom-color: var(--sa-bord); }
body.sa.skin-2 .sa-similaires__img { border-radius: 26px 26px 8px 8px; }
body.sa.skin-2 .sa-chip { background: var(--tc-cp); border-color: var(--tc-c); }
body.sa.skin-2 label.sa-chip { background: var(--tc-s); border-color: var(--sa-bord); }

/* --- 8. villes : bande pêche sous un store rayé ; avatars en arche --- */
body.sa.skin-2 .sa-regions {
  background: var(--tc-store) top center / 100% 6px no-repeat, var(--sa-fond2);
  border-top: 0; margin-top: 2rem; padding: 2.2rem 0 2.4rem;
}
body.sa.skin-2 .sa-blog { padding-top: 2.2rem; }
body.sa.skin-2 .sa-membres__avatar {
  border-radius: 34px 34px 10px 10px; border: 3px solid var(--tc-s);
  box-shadow: 0 0 0 2px var(--tc-c), 0 10px 20px -14px rgba(216, 27, 96, .7);
}
body.sa.skin-2 .sa-membres__nom a { color: var(--tc-e); }

/* --- 9. bloc inscription : aplat framboise chaud, bouton crème --- */
body.sa.skin-2 .sa-inscrire {
  background: var(--tc-coeur) right -30px bottom -40px / 240px 240px no-repeat,
              linear-gradient(135deg, #c4174f 0%, #8f123c 100%);
  color: #fff; border-radius: 26px; margin-inline: var(--sa-gout); padding: 2.2rem 1.4rem;
  box-shadow: 0 20px 44px -26px rgba(143, 18, 60, .85);
}
@media (min-width: 1240px) { body.sa.skin-2 .sa-inscrire { max-width: var(--sa-max); margin-inline: auto; } }
body.sa.skin-2 .sa-inscrire__h, body.sa.skin-2 .sa-inscrire p { color: #fff; }
body.sa.skin-2 .sa-inscrire .sa-btn--accent {
  background: var(--tc-s); color: var(--tc-af); border-color: transparent; box-shadow: 0 12px 24px -14px rgba(0, 0, 0, .55);
}
body.sa.skin-2 .sa-inscrire .sa-btn--accent:hover { background: #fff; }

/* --- 10. pied de page : cartouche crème sur bande pêche --- */
body.sa.skin-2 .sa-liens {
  background: var(--tc-store) top center / 100% 6px no-repeat, var(--sa-pied); border-top: 0; padding: 2.4rem 0 1.6rem;
}
body.sa.skin-2 .sa-liens__grid {
  background: var(--tc-s); border: 1px solid var(--sa-bord); border-radius: 24px; padding: 1.6rem 1.4rem;
  box-shadow: var(--tc-o); max-width: 720px; margin-inline: auto;
}
body.sa.skin-2 .sa-liens__marque { color: var(--tc-af); }
body.sa.skin-2 .sa-liens__h { color: var(--sa-muet); }
body.sa.skin-2 .sa-liens a { color: var(--tc-e); }
body.sa.skin-2 .sa-liens a:hover { color: var(--tc-af); }
body.sa.skin-2 .sa-footer__tail { border-top: 1px solid var(--sa-bord); color: var(--sa-muet); }
body.sa.skin-2 .sa-footer__legal a, body.sa.skin-2 .sa-footer__haut a { color: var(--tc-e); }

/* --- 11. barres fixes (habillage seul : ni position ni display) --- */
body.sa.skin-2 .sa-barre-mobile {
  background: linear-gradient(135deg, #d81b60 0%, #ab1748 100%); color: #fff;
  box-shadow: 0 -6px 18px rgba(143, 18, 60, .45);
}
body.sa.skin-2 .sa-fiche__barre {
  background: var(--tc-s); border-top: 2px solid var(--tc-c); box-shadow: 0 -6px 18px rgba(143, 18, 60, .22);
}

/* --- 12. fiche : carte centrée, photo en arche, CTA en carte au cœur filigrané --- */
body.sa.skin-2 .sa-fiche {
  background: var(--tc-s); border: 1px solid var(--sa-bord); border-radius: 26px;
  padding: 1.4rem 1.4rem 1.5rem; box-shadow: var(--tc-o);
}
@media (min-width: 640px) { body.sa.skin-2 .sa-fiche { padding: 1.8rem 1.9rem 2rem; } }
body.sa.skin-2 .sa-fiche__titre { color: var(--tc-e); }
body.sa.skin-2 .sa-fiche__photo {
  border-radius: 148px 148px 22px 22px; max-width: 272px; border: 7px solid #fff; background-clip: padding-box;
  box-shadow: 0 2px 5px rgba(120, 40, 60, .08), 0 24px 44px -24px rgba(216, 27, 96, .6);
}
body.sa.skin-2 .sa-fiche--2 .sa-fiche__photo { border-radius: 22px; }
body.sa.skin-2 .sa-fiche__id > div { border-top-color: var(--sa-bord); }
body.sa.skin-2 .sa-dispo { background: var(--sa-fond2); border-radius: 18px; padding: 1rem 1.1rem 1.1rem; }
body.sa.skin-2 .sa-dispo--chips .sa-dispo__jour {
  background: var(--tc-s); border: 1px solid var(--sa-bord); box-shadow: 0 5px 12px -9px rgba(216, 27, 96, .5);
}
body.sa.skin-2 .sa-dispo--chips .sa-dispo__creneaux li { border-color: var(--tc-c); }
body.sa.skin-2 .sa-dispo__jour.is-aujourdhui .sa-dispo__nom { color: var(--tc-af); }
body.sa.skin-2 .sa-cta {
  background: var(--tc-coeur) center / 128px 128px no-repeat, var(--tc-cp);
  border: 1px solid var(--tc-c); border-radius: 24px; padding: 1.6rem 1.4rem; box-shadow: var(--tc-o); text-align: center;
}
body.sa.skin-2 .sa-cta__q { color: var(--tc-e); font-size: 1.2rem; }
body.sa.skin-2 .sa-cta .sa-btn { width: 100%; max-width: 380px; min-height: 50px; }
body.sa.skin-2 .sa-commentaires { border-top-color: var(--sa-bord); }
body.sa.skin-2 .sa-commentaire { border-bottom-color: var(--sa-bord); }
body.sa.skin-2 .sa-commentaires__note { background: var(--sa-fond2); border-color: var(--tc-c); color: var(--sa-muet); }

/* --- 13. formulaires et dépôt : cartes crème, légendes en cartouche --- */
body.sa.skin-2 .sa-form input[type="text"], body.sa.skin-2 .sa-form input[type="email"],
body.sa.skin-2 .sa-form input[type="tel"], body.sa.skin-2 .sa-form input[type="number"],
body.sa.skin-2 .sa-form input[type="search"], body.sa.skin-2 .sa-form select, body.sa.skin-2 .sa-form textarea {
  background: #fff; border-color: var(--sa-bord); border-radius: 14px; color: var(--tc-e);
}
body.sa.skin-2 .sa-form input::placeholder, body.sa.skin-2 .sa-form textarea::placeholder { color: var(--sa-muet); }
body.sa.skin-2 .sa-depot__bloc legend {
  background: var(--tc-cp); color: var(--tc-e); border: 1px solid var(--tc-c); border-radius: 999px; padding: .28rem .95rem;
}
body.sa.skin-2 .sa-depot__dispo th, body.sa.skin-2 .sa-depot__dispo td { border-color: var(--sa-bord); }
body.sa.skin-2 .sa-depot__dispo thead th { background: var(--sa-fond2); }
body.sa.skin-2 .sa-vide { background: var(--tc-s); border-color: var(--tc-c); color: var(--sa-muet); }

/* --- 14. pagination, fil d'Ariane, modales --- */
body.sa.skin-2 .sa-pagination li a, body.sa.skin-2 .sa-pagination li span {
  background: var(--tc-s); border: 1px solid var(--sa-bord); border-radius: 999px; color: var(--tc-e);
}
body.sa.skin-2 .sa-pagination li.is-actif span { background: var(--tc-a); border-color: var(--tc-a); color: #fff; }
body.sa.skin-2 .sa-pagination li.is-off span { background: none; border-color: transparent; color: var(--sa-muet); }
body.sa.skin-2 .sa-consent__box, body.sa.skin-2 .sa-popup__box {
  border-radius: 26px; box-shadow: 0 24px 64px rgba(80, 20, 40, .55);
}
body.sa.skin-2 .sa-popup__titre, body.sa.skin-2 .sa-consent__titre { color: var(--tc-e); }
body.sa.skin-2 .sa-popup__croix { background: var(--tc-cp); color: var(--tc-af); }
body.sa.skin-2 .sa-popup__croix:hover, body.sa.skin-2 .sa-popup__croix:focus-visible { background: var(--tc-a); color: #fff; }
body.sa.skin-2 .sa-spin { border-color: var(--sa-bord); border-top-color: var(--tc-a); }

/* --- 15. mouvement réduit --- */
@media (prefers-reduced-motion: reduce) {
  body.sa.skin-2 .sa-carte, body.sa.skin-2 .sa-carte__img img { transition: none; }
  body.sa.skin-2 .sa-carte:hover, body.sa.skin-2 .sa-carte:hover .sa-carte__img img { transform: none; }
}