/* annonce-sexe-monaco.com — registre « rocher & carmin » (gabarit sexeannoncesastro, skin-2 « colonne », compo-2, fiche-1, dispo-chips) * Palette : carmin #b0204a (favicon) + carmin profond #7d1735 · pierre/crème #f6efe6 · #efe2d3 · ivoire #fffcf7 · encre #29201f · muet #6d5d54 * Composition : bandeau carmin bas et large posé sur une PLAQUE crème (logo à gauche, liens + actions dans la plaque) ; * liste en « fiches de casier » à coin coupé, photo en arche ; thèmes et âges en médaillons ; fiche = photo en arche * à gauche + identité à droite ; CTA en carte centrée à tête d'arche avec cœur en filigrane ; pied en socle de pierre. * Formes signature : coin coupé · arche · médaillon · filet de strates · cœur inline. * Contrastes mesurés : encre/crème 13,9 — muet/crème 5,5 — carmin/ivoire 6,5 — blanc/carmin 6,7 — ivoire/carmin profond 10,3 — pied 12,3. * Spécificité : préfixe .sa.sa (la classe du ) pour passer devant les règles .skin-2 du gabarit, sans !important. */ /* ---------- 1. palette ---------- */ .sa.sa { --sa-fond: #f6efe6; --sa-fond2: #efe2d3; --sa-surface: #fffcf7; --sa-texte: #29201f; --sa-muet: #6d5d54; --sa-bord: #e2d3c2; --sa-secondaire: #7d1735; --sa-secondaire-txt: #fff8f4; --sa-tete: #b0204a; --sa-tete-txt: #fff8f4; --sa-pied: #2a2120; --sa-pied-txt: #efe0d2; --sa-like: #b0204a; --sa-rayon: 10px; --sa-rayon-s: 8px; --sa-max: 1000px; --sa-ombre: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 14px 28px -22px rgba(41, 32, 31, .55); --mc-p: #7d1735; --mc-h: #96183f; --mc-filet: #ddcbb8; --mc-strates: repeating-linear-gradient(180deg, rgba(176, 32, 74, .5) 0 1px, transparent 1px 3px); --mc-ivoire: linear-gradient(180deg, #fffcf7 0, #f3e7d9 100%); --mc-coeur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23b0204a' 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"); background: var(--sa-fond); color: var(--sa-texte); } /* ---------- 2. titres au filet de strates ---------- */ .sa.sa .sa-main { padding-bottom: 3rem; } .sa.sa .sa-h2, .sa.sa .sa-tags__h, .sa.sa .sa-membres__h, .sa.sa .sa-dernieres__h { display: flex; align-items: center; gap: .6rem; color: var(--sa-texte); } .sa.sa .sa-h2::after, .sa.sa .sa-tags__h::after, .sa.sa .sa-membres__h::after, .sa.sa .sa-dernieres__h::after { content: ""; flex: 1 1 2rem; min-width: 1.5rem; height: 7px; background: var(--mc-strates); border-radius: 2px; } .sa.sa .sa-h2 .sa-ico, .sa.sa .sa-tags__h .sa-ico, .sa.sa .sa-membres__h .sa-ico, .sa.sa .sa-dispo__h .sa-ico { color: var(--sa-accent); margin-right: 0; } .sa.sa .sa-intro, .sa.sa .sa-compte, .sa.sa .sa-regions__intro, .sa.sa .sa-blog__intro, .sa.sa .sa-form__aide, .sa.sa .sa-regles { color: var(--sa-muet); } /* ---------- 3. boutons en pilule, ombre colorée ---------- */ .sa.sa .sa-btn { border-radius: 999px; letter-spacing: .07em; padding: .6em 1.35em; font-size: .8rem; } .sa.sa .sa-btn--accent, .sa.sa .sa-btn--carte { background: linear-gradient(180deg, #b82a52, #a51c44); border-color: #a51c44; color: #fff; box-shadow: 0 9px 18px -11px rgba(125, 23, 53, .8); } .sa.sa .sa-btn--accent:hover, .sa.sa .sa-btn--carte:hover { background: var(--mc-h); } .sa.sa .sa-btn--ghost { color: var(--sa-texte); border-color: #d9c7b4; background: rgba(255, 255, 255, .55); } .sa.sa .sa-btn--ghost:hover { border-color: var(--sa-accent); color: var(--mc-p); } .sa.sa .sa-btn--lg { min-height: 50px; font-size: .92rem; } .sa.sa .sa-btn--like { border-color: rgba(176, 32, 74, .45); color: var(--mc-p); background: var(--sa-surface); } /* ---------- 4. en-tête : bandeau carmin bas et large + plaque crème ---------- */ .sa.sa .sa-header { background: linear-gradient(180deg, #b52450 0, #a01a41 100%); border-bottom: 4px solid var(--mc-p); color: var(--sa-tete-txt); } .sa.sa .sa-header__in { flex-direction: column; align-items: stretch; gap: 0; padding-top: 0; min-height: 0; } .sa.sa .sa-logo { align-self: flex-start; align-items: center; margin: .6rem 0 .55rem; font-size: 1.35rem; font-style: italic; color: #fff8f4; max-width: calc(100% - 58px); } .sa.sa .sa-logo__mark { display: inline-flex; width: 30px; height: 34px; border-radius: 15px 15px 5px 5px; background: #fff8f4; color: var(--mc-p); font-size: .68rem; font-style: normal; letter-spacing: .04em; box-shadow: 0 3px 8px -4px rgba(41, 16, 24, .7); } .sa.sa .sa-burger { top: .62rem; right: var(--sa-gout); color: #fff8f4; } .sa.sa .sa-nav { background: var(--sa-fond); border: 0; border-radius: 12px 12px 0 0; padding: .2rem .7rem .35rem; box-shadow: 0 -2px 0 rgba(125, 23, 53, .22) inset; } .sa.sa .sa-nav li a { color: var(--sa-texte); border-top: 1px solid #e6d8c8; text-transform: uppercase; letter-spacing: .09em; font-size: .74rem; font-weight: 700; } .sa.sa .sa-nav li a:hover, .sa.sa .sa-nav li a.is-actif { color: var(--mc-p); background: none; } .sa.sa .sa-nav li a .sa-ico { color: var(--sa-accent); } .sa.sa .sa-header__actions { padding: .6rem 0 .4rem; gap: .45rem; } .sa.sa .sa-header__actions .sa-btn { white-space: nowrap; } /* desktop : les deux actions remontent à droite DANS le bandeau (la plaque ne porte que les liens, centrés) */ @media (min-width: 900px) { .sa.sa .sa-header__in { position: relative; } .sa.sa .sa-logo { margin: .7rem 0 .6rem; font-size: 1.6rem; } .sa.sa .sa-nav { flex-direction: row; align-items: center; justify-content: center; gap: .8rem; width: 100%; border: 0; padding: .25rem .8rem; } .sa.sa .sa-nav ul { justify-content: center; gap: 0; flex-wrap: wrap; } .sa.sa .sa-nav li a { border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: .5rem .42rem; font-size: .7rem; letter-spacing: .07em; } .sa.sa .sa-nav li a:hover, .sa.sa .sa-nav li a.is-actif { border-bottom-color: var(--sa-accent); } .sa.sa .sa-header__actions { position: absolute; top: .62rem; right: var(--sa-gout); flex-direction: row; padding: 0; gap: .5rem; } .sa.sa .sa-header__actions .sa-btn { min-height: 38px; padding: .45em 1.05em; font-size: .68rem; } .sa.sa .sa-header__actions .sa-btn--ghost { color: #fff8f4; border-color: rgba(255, 248, 244, .5); background: rgba(255, 255, 255, .1); } .sa.sa .sa-header__actions .sa-btn--ghost:hover { border-color: #fff8f4; background: rgba(255, 255, 255, .18); color: #fff; } .sa.sa .sa-header__actions .sa-btn--accent { background: #fff8f4; color: var(--mc-p); border-color: #fff8f4; box-shadow: 0 8px 16px -10px rgba(41, 16, 24, .8); } .sa.sa .sa-header__actions .sa-btn--accent:hover { background: #fff; color: #6a1129; } } /* ---------- 5. héros : plinthe de pierre, lueur carmin, étapes en médaillons ---------- */ .sa.sa .sa-page-home .sa-hero, .sa.sa.sa-page-home .sa-hero { background: radial-gradient(120% 90% at 50% 0, rgba(176, 32, 74, .11), rgba(176, 32, 74, 0) 62%), linear-gradient(180deg, #efe2d3 0, rgba(246, 239, 230, 0) 100%); padding: 2.2rem 0 1.8rem; } .sa.sa .sa-hero__h1 { color: var(--sa-texte); } .sa.sa .sa-hero__sous, .sa.sa .sa-hero__form-p { color: var(--sa-muet); } .sa.sa .sa-hero__etapes li::before { width: 2.3em; height: 2.3em; border-radius: 999px; border: 2px solid rgba(176, 32, 74, .38); background: var(--sa-surface); color: var(--sa-accent); font-size: 1.1rem; font-style: italic; box-shadow: 0 0 0 4px rgba(176, 32, 74, .07), 0 6px 12px -8px rgba(41, 32, 31, .5); } .sa.sa .sa-hero__form { background: var(--sa-surface); border: 1px solid var(--sa-bord); border-top: 3px solid var(--sa-accent); border-radius: 110px 110px 12px 12px; padding: 1.7rem 1.5rem 1.4rem; max-width: 470px; margin-inline: auto; box-shadow: 0 18px 32px -26px rgba(41, 32, 31, .6); } .sa.sa .sa-hero__form-h { font-style: italic; } /* ---------- 6. liste : fiches de casier à coin coupé ---------- */ .sa.sa .sa-grille { gap: .9rem; border-top: 0; margin: 1.2rem 0; } .sa.sa .sa-carte, .sa.sa .sa-blog__item, .sa.sa .sa-depot__bloc { position: relative; overflow: visible; background: linear-gradient(180deg, #fffcf7 0, #fdf5ec 100%); border: 1px solid var(--sa-bord); border-radius: 0 0 6px 6px; box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 12px 22px -18px rgba(41, 32, 31, .55); } .sa.sa .sa-carte::after, .sa.sa .sa-blog__item::after, .sa.sa .sa-depot__bloc::after { content: ""; position: absolute; top: -1px; right: -1px; width: 24px; height: 24px; pointer-events: none; background: linear-gradient(to bottom left, var(--sa-fond) 0 49.5%, var(--sa-bord) 49.5% 51.5%, transparent 51.5%); } .sa.sa .sa-carte { border-left: 5px solid var(--sa-accent); padding: .95rem 1.15rem .8rem 1rem; gap: 1.05rem; align-items: flex-start; } .sa.sa .sa-carte:hover { border-left-color: var(--mc-p); box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 16px 26px -18px rgba(125, 23, 53, .5); } .sa.sa .sa-carte__img { flex: 0 0 104px; width: 104px; aspect-ratio: 3 / 4; border-radius: 52px 52px 7px 7px; border: 3px solid #fff; background: var(--sa-fond2); overflow: hidden; box-shadow: 0 0 0 1px var(--sa-bord), 0 9px 16px -11px rgba(41, 32, 31, .6); } .sa.sa .sa-carte__new { top: auto; bottom: 0; left: 0; right: 0; transform: none; border-radius: 0; text-align: center; background: rgba(176, 32, 74, .93); color: #fff; font-size: .6rem; letter-spacing: .1em; padding: .18rem 0; } .sa.sa .sa-carte__qui { gap: .55rem; align-items: center; } .sa.sa .sa-carte__pseudo { color: var(--mc-p); text-transform: uppercase; letter-spacing: .07em; font-size: .78rem; } .sa.sa .sa-carte__age { background: var(--sa-surface); border: 1px solid rgba(176, 32, 74, .35); border-radius: 999px; padding: .08rem .55rem; color: var(--mc-p); font-weight: 700; font-size: .74rem; } .sa.sa .sa-carte__titre { font-size: 1.2rem; line-height: 1.2; margin: .15rem 0 .1rem; } .sa.sa .sa-carte__titre a:hover { color: var(--mc-p); } .sa.sa .sa-carte__extrait { color: var(--sa-texte); } .sa.sa .sa-carte__ville { color: var(--sa-muet); } .sa.sa .sa-carte__ville .sa-ico, .sa.sa .sa-carte__metas .sa-ico { color: var(--sa-accent); } .sa.sa .sa-carte__pied { border-top: 1px dotted var(--mc-filet); padding-top: .55rem; margin-top: .6rem; } .sa.sa .sa-btn--carte { border-radius: 999px; min-height: 40px; } .sa.sa .sa-dernieres__plus > span { color: var(--sa-muet); font-style: italic; } /* ---------- 7. thèmes en médaillons (blocs coiffés d'un banc de strates) ---------- */ .sa.sa .sa-tags, .sa.sa .sa-side, .sa.sa .sa-similaires { background: var(--mc-strates) left top / 100% 7px no-repeat; border: 0; border-radius: 0; padding: 1.5rem 0 .2rem; box-shadow: none; } .sa.sa .sa-tags__liste { flex-direction: row; flex-wrap: wrap; gap: .5rem; } .sa.sa .sa-tags__liste a { border: 1px solid var(--sa-bord); border-radius: 999px; background: var(--mc-ivoire); padding: .32rem .42rem .32rem .85rem; gap: .5rem; justify-content: flex-start; color: var(--sa-texte); font-size: .84rem; font-weight: 600; box-shadow: 0 0 0 3px rgba(176, 32, 74, .06), 0 1px 0 rgba(255, 255, 255, .9) inset; } .sa.sa .sa-tags__liste a:hover, .sa.sa .sa-tags__liste li.is-actif a { border-color: var(--sa-accent); color: var(--mc-p); box-shadow: 0 0 0 3px rgba(176, 32, 74, .17); } .sa.sa .sa-badge { background: var(--sa-accent); color: #fff; border-radius: 999px; min-width: 1.6em; padding: .16em .5em; font-size: .72rem; } .sa.sa .sa-tags--nuage .sa-tags__liste a { box-shadow: none; } .sa.sa .sa-side__liste a, .sa.sa .sa-side__liste li { border-color: var(--mc-filet); color: var(--sa-texte); } /* ---------- 8. villes et arrivées : tablettes de pierre, avatars en arche ---------- */ .sa.sa .sa-regions { background: none; border-top: 0; padding-top: 1.6rem; } .sa.sa .sa-pastille { background: linear-gradient(180deg, #fffcf7 0, #f2e6d7 100%); border: 1px solid var(--sa-bord); border-width: 1px; border-radius: 8px; padding: .5rem .7rem; font-weight: 600; box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 8px 14px -14px rgba(41, 32, 31, .6); } .sa.sa .sa-pastille:hover { border-color: var(--sa-accent); color: var(--mc-p); } .sa.sa .sa-membres { border-top: 0; padding-top: 1.4rem; } .sa.sa .sa-membres__avatar { border-radius: 34px 34px 7px 7px; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--sa-bord), 0 8px 14px -11px rgba(41, 32, 31, .6); } .sa.sa .sa-membres__nom a { color: var(--sa-texte); } .sa.sa .sa-membres__ville { color: var(--sa-muet); } /* ---------- 9. magazine ---------- */ .sa.sa .sa-blog { padding-top: 1.6rem; } .sa.sa .sa-blog__item { padding: 1.1rem 1.2rem 1.15rem; border-left: 5px solid #e3cfd6; } .sa.sa .sa-blog__titre { font-size: 1.12rem; } .sa.sa .sa-blog__date { color: var(--sa-muet); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; } /* ---------- 10. fiche : arche à gauche, identité à droite ---------- */ .sa.sa .sa-fiche { background: var(--sa-surface); border: 1px solid var(--sa-bord); border-top: 4px solid var(--sa-accent); border-radius: 0 0 10px 10px; padding: 1.3rem 1.4rem 1.5rem; box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 20px 36px -30px rgba(41, 32, 31, .7); } .sa.sa .sa-fiche__sur { color: var(--sa-muet); text-transform: uppercase; letter-spacing: .09em; font-size: .72rem; } .sa.sa .sa-fiche__titre { color: var(--sa-texte); font-style: italic; } .sa.sa .sa-fiche__photo { border-radius: 130px 130px 10px 10px; max-width: 260px; border: 4px solid #fff; background: var(--sa-fond2); box-shadow: 0 0 0 1px var(--sa-bord), 0 16px 28px -18px rgba(41, 32, 31, .65); } .sa.sa .sa-fiche__photo img { aspect-ratio: 4 / 5; } @media (min-width: 640px) { .sa.sa .sa-fiche--1 { grid-template-columns: 244px minmax(0, 1fr); } .sa.sa .sa-fiche--1 .sa-fiche__photo { max-width: 240px; } } .sa.sa .sa-fiche__id > div { border-top: 1px dotted var(--mc-filet); padding: .72rem 0; } .sa.sa .sa-fiche__id dt { color: var(--sa-muet); text-transform: uppercase; letter-spacing: .07em; font-size: .72rem; } .sa.sa .sa-fiche__id dd { color: var(--sa-texte); } .sa.sa .sa-fiche__id dd .sa-ico { color: var(--sa-accent); } .sa.sa .sa-fiche__texte { max-width: 68ch; } .sa.sa .sa-fiche__texte h2::after { display: none; } .sa.sa .sa-dispo { background: linear-gradient(180deg, #f3e7d9 0, #ece0d0 100%); border: 1px solid var(--sa-bord); border-radius: 10px; padding: 1rem 1.05rem 1.1rem; } .sa.sa .sa-dispo__h { display: flex; align-items: center; gap: .5rem; } .sa.sa .sa-dispo--chips .sa-dispo__jour { background: var(--sa-surface); border: 1px solid #e0d0bd; border-radius: 7px; padding: .45rem .7rem; box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset; } .sa.sa .sa-dispo--chips .sa-dispo__jour.is-aujourdhui { border-color: var(--sa-accent); box-shadow: 0 0 0 2px rgba(176, 32, 74, .15); } .sa.sa .sa-dispo__nom { color: var(--sa-texte); font-size: .88rem; } .sa.sa .sa-cta { background: linear-gradient(180deg, #fffcf7 0, #fdf0f2 100%); border: 1px solid rgba(176, 32, 74, .3); border-radius: 115px 115px 12px 12px; padding: 2.1rem 1.7rem 1.7rem; max-width: 520px; margin: 1rem auto 0; position: relative; overflow: hidden; box-shadow: 0 18px 32px -26px rgba(125, 23, 53, .8); } .sa.sa .sa-cta::before { content: ""; position: absolute; right: -8%; bottom: -20%; width: 220px; height: 220px; background: var(--mc-coeur) center / contain no-repeat; opacity: .07; pointer-events: none; } .sa.sa .sa-cta__q { font-family: var(--sa-police-titre); font-style: italic; font-size: 1.3rem; position: relative; } .sa.sa .sa-cta__fleche { color: var(--sa-muet); font-style: normal; } .sa.sa .sa-cta__btn { position: relative; } .sa.sa .sa-cta__btn .sa-btn { width: 100%; min-height: 52px; } .sa.sa .sa-cta__aide { color: var(--sa-muet); position: relative; } .sa.sa .sa-commentaires { border-top: 1px dotted var(--mc-filet); } .sa.sa .sa-commentaire { border-bottom: 1px dotted var(--mc-filet); } .sa.sa .sa-commentaires__note, .sa.sa .sa-vide { background: var(--sa-fond); border-color: var(--sa-bord); color: var(--sa-muet); } .sa.sa .sa-similaires__img { border-radius: 26px 26px 5px 5px; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--sa-bord); } .sa.sa .sa-similaires__titre a { color: var(--sa-texte); } .sa.sa .sa-similaires__liste li { border-color: var(--mc-filet); } .sa.sa .sa-fiche__barre { background: var(--sa-surface); border-top: 3px solid var(--sa-accent); box-shadow: 0 -6px 16px rgba(41, 32, 31, .16); } /* ---------- 11. médaillons de thèmes sur la fiche + formulaires ---------- */ .sa.sa .sa-chip { background: var(--mc-ivoire); border: 1px solid var(--sa-bord); border-radius: 999px; color: var(--sa-texte) !important; padding: .3em .85em; box-shadow: 0 0 0 3px rgba(176, 32, 74, .06); } .sa.sa a.sa-chip:hover { border-color: var(--sa-accent); box-shadow: 0 0 0 3px rgba(176, 32, 74, .17); } .sa.sa label.sa-chip:has(input:checked) { background: var(--sa-accent); color: #fff !important; border-color: var(--sa-accent); } .sa.sa .sa-form__lbl { color: var(--sa-texte); } .sa.sa .sa-form input[type="text"], .sa.sa .sa-form input[type="email"], .sa.sa .sa-form input[type="tel"], .sa.sa .sa-form input[type="number"], .sa.sa .sa-form input[type="search"], .sa.sa .sa-form select, .sa.sa .sa-form textarea { background: #fff; border-color: var(--mc-filet); border-radius: 8px; color: var(--sa-texte); } .sa.sa .sa-depot__bloc { padding: 1.1rem 1.2rem 1.25rem; border-left: 5px solid var(--sa-accent); } .sa.sa .sa-depot__bloc legend { color: var(--mc-p); font-family: var(--sa-police-titre); font-style: italic; } .sa.sa .sa-depot__dispo th, .sa.sa .sa-depot__dispo td { border-color: #e0d0bd; } .sa.sa .sa-depot__dispo thead th { background: var(--sa-fond2); } .sa.sa .sa-recherche { background: var(--sa-surface); border-color: var(--sa-bord); border-radius: 10px; } /* ---------- 12. bande d'inscription + pied en socle de pierre ---------- */ .sa.sa .sa-inscrire { background: linear-gradient(170deg, #8d1a3c 0, #6a1129 100%); color: #fff8f4; border-radius: 0; border-top: 4px solid var(--sa-accent); } .sa.sa .sa-inscrire__h, .sa.sa .sa-inscrire .sa-h2 { color: #fff; font-style: italic; } .sa.sa .sa-inscrire__h::after, .sa.sa .sa-inscrire .sa-h2::after { background: repeating-linear-gradient(180deg, rgba(255, 248, 244, .5) 0 1px, transparent 1px 3px); } .sa.sa .sa-inscrire p, .sa.sa .sa-inscrire .sa-form__lbl, .sa.sa .sa-inscrire .sa-form__check { color: #f7dfe4; } .sa.sa .sa-inscrire .sa-form__check a { color: #fff; } .sa.sa .sa-inscrire .sa-btn--accent { background: #fff8f4; color: #8d1a3c; border-color: #fff8f4; box-shadow: 0 10px 20px -12px rgba(20, 5, 10, .8); } .sa.sa .sa-inscrire .sa-btn--accent:hover { background: #fff; color: #6a1129; } .sa.sa .sa-liens { background: linear-gradient(180deg, #b0204a 0 5px, #7d1735 5px 9px, #2f2523 9px, #241c1b 100%); color: var(--sa-pied-txt); border-top: 0; padding-top: 2.2rem; } .sa.sa .sa-liens__marque { color: #fff8f4; } .sa.sa .sa-liens__h { color: #d9bfaf; } .sa.sa .sa-liens a, .sa.sa .sa-footer__legal a, .sa.sa .sa-footer__haut a { color: var(--sa-pied-txt); } .sa.sa .sa-liens a:hover { color: #fff; } .sa.sa .sa-liens .sa-btn--ghost { color: #fff8f4; border-color: rgba(255, 248, 244, .42); background: rgba(255, 255, 255, .06); } .sa.sa .sa-liens .sa-btn--ghost:hover { border-color: #fff8f4; color: #fff; } .sa.sa .sa-footer__tail { background: #241c1b; color: #cbb2a4; border-top: 1px solid rgba(255, 248, 244, .12); } .sa.sa .sa-footer__disclaimer { color: #b49c90; } /* ---------- 13. barre mobile, fil d'Ariane, pagination, modales ---------- */ .sa.sa .sa-barre-mobile { background: linear-gradient(90deg, #b0204a 0, #7d1735 100%); color: #fff; letter-spacing: .05em; box-shadow: 0 -3px 14px rgba(41, 16, 24, .38); } .sa.sa .sa-crumbs a { color: var(--sa-muet); } .sa.sa .sa-crumbs a:hover { color: var(--mc-p); } .sa.sa .sa-pagination li a, .sa.sa .sa-pagination li span { color: var(--sa-texte); } .sa.sa .sa-pagination li a:hover { color: var(--mc-p); border-bottom-color: rgba(176, 32, 74, .5); } .sa.sa .sa-consent__box, .sa.sa .sa-popup__box { border-radius: 0 0 14px 14px; border-top: 5px solid var(--sa-accent); box-shadow: 0 0 0 6px var(--sa-surface), 0 0 0 7px rgba(176, 32, 74, .3), 0 30px 60px -20px rgba(41, 32, 31, .6); } .sa.sa .sa-popup__croix { background: var(--sa-fond2); color: var(--sa-texte); } .sa.sa .sa-popup__croix:hover, .sa.sa .sa-popup__croix:focus-visible { background: var(--sa-accent); color: #fff; } /* ---------- 14. mouvement réduit ---------- */ @media (prefers-reduced-motion: reduce) { .sa.sa .sa-btn, .sa.sa .sa-carte, .sa.sa .sa-pastille, .sa.sa .sa-tags__liste a { transition: none; } .sa.sa .sa-btn:active { transform: none; } }