/* plans-cul-monaco.com — registre « NÉON CORAIL » (sexeannonces, base skin-5 « polaroid », compo 3) * PALETTE : le corail du favicon #ff5a63 reste la LUEUR NÉON (halos, filets, anneaux) ; la même teinte en * profondeur, braise #c81f38, porte tout le texte (blanc sur #ff5a63 = 3,0:1 → échec AA ; blanc sur * #c81f38 = 5,7:1 et #c81f38 sur blanc chaud = 5,5:1). Neutre chaud : blanc chaud #fff7f4, pêche #ffeee9, * ivoire ; encre chaude #2a1619. UNE bande nuit #26101a (inscription + pied) : là le corail vif devient * lisible (5,9:1) et le néon s'allume. L'accent est inline sur → seul !important de couleur ici. * COMPOSITION (contre skin-5 : ni papier quadrillé, ni inclinaison, ni cursive) : en-tête CENTRÉ (logo à * médaillon + filet néon, nav en rail-pilule pêche dessous), cartes droites à photo vignettée (une colonne * photo-à-gauche sous 640 px), badge NOUVEAU en pilule ivoire cerclée, villes en ARCHES, thèmes en PILULES * PLEINES, ville + thèmes en pleine largeur (la colonne creuse de skin-5 disparaît), mag en carte-note * centrée, fiche à photo EN ARCHE cerclée néon, CTA en carte centrée à cœur filigrané. * FORMES : arche · pilule pleine · médaillon néon · filet néon · cœur SVG inline. * Préfixes : body.sa suffit contre .skin-5 ; html:not(#_) là où skin-5 tire des :nth-child. */ /* ---- 1. palette et fond ---- */ html:not(#_) body.sa { --sa-accent: #c81f38 !important; --co-neon: #ff5a63; --co-braise: #c81f38; --co-braise-f: #a8162a; --co-page: #fff7f4; --co-page2: #ffeee9; --co-ivoire: #fffaf8; --co-encre: #2a1619; --co-muet: #6d565a; --co-nuit: #26101a; --co-clair: #ffeee9; --co-clair2: #e9c9c6; --co-bord: #f3d8d2; --co-bord2: #f7ddd7; --co-bord3: #f0cdc6; --co-lueur: 0 0 0 1px rgba(255,90,99,.5), 0 9px 26px -9px rgba(255,90,99,.8); --co-lueur-f: 0 0 0 2px rgba(255,90,99,.55), 0 14px 34px -10px rgba(255,90,99,.85); --co-coeur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff5a63' fill-opacity='.13' 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"); --sa-fond: var(--co-page); --sa-fond2: var(--co-page2); --sa-surface: #fff; --sa-texte: var(--co-encre); --sa-muet: var(--co-muet); --sa-bord: var(--co-bord); --sa-secondaire: var(--co-nuit); --sa-secondaire-txt: var(--co-clair); --sa-tete: var(--co-page); --sa-tete-txt: var(--co-encre); --sa-pied: transparent; --sa-pied-txt: var(--co-muet); --sa-like: var(--co-braise); --sa-rayon: 18px; --sa-rayon-s: 12px; --sa-police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --sa-police-titre: "Avenir Next", "Segoe UI Semibold", Seravek, system-ui, "Segoe UI", sans-serif; --sa-ombre: 0 1px 2px rgba(168,22,42,.06), 0 16px 34px -20px rgba(168,22,42,.32); font-size: 16px; background-color: var(--co-page); background-repeat: no-repeat; background-image: radial-gradient(1100px 420px at 50% -180px, rgba(255,90,99,.17), transparent 70%); } body.sa h1, body.sa h2, body.sa h3 { letter-spacing: -.015em; } body.sa .sa-h1, body.sa .sa-hero__h1 { letter-spacing: -.025em; } /* pas une inclinaison : le registre est net, la chaleur vient des formes et des lueurs */ html:not(#_) .sa-logo, html:not(#_) .sa-hero__txt, html:not(#_) .sa-grille > .sa-carte, html:not(#_) .sa-tags--grille, html:not(#_) .sa-tags__liste a, html:not(#_) .sa-blog__item, html:not(#_) .sa-membres__avatar, html:not(#_) .sa-inscrire__in, html:not(#_) .sa-liens__grid, html:not(#_) .sa-fiche__photo, html:not(#_) .sa-chip, html:not(#_) .sa-cta, html:not(#_) .sa-btn { transform: none; } /* ---- 2. boutons : pilules pleines à lueur néon ---- */ body.sa .sa-btn { border-radius: 999px; font-family: var(--sa-police); font-weight: 700; box-shadow: 0 1px 2px rgba(168,22,42,.08); } body.sa .sa-btn--accent { background: var(--co-braise); border-color: var(--co-braise); color: #fff; box-shadow: var(--co-lueur); } body.sa .sa-btn--accent:hover { background: var(--co-braise-f); box-shadow: var(--co-lueur-f); } body.sa .sa-btn--ghost { background: var(--co-ivoire); border-color: var(--co-bord3); color: var(--co-encre); box-shadow: none; } body.sa .sa-btn--ghost:hover { border-color: var(--co-neon); color: var(--co-braise-f); box-shadow: var(--co-lueur); } body.sa .sa-btn--carte { width: 100%; background: var(--co-braise); color: #fff; border-color: transparent; min-height: 42px; } body.sa .sa-btn--carte:hover { background: var(--co-braise-f); box-shadow: var(--co-lueur); } body.sa .sa-btn--like { background: var(--co-ivoire); border-color: var(--co-bord3); color: var(--co-braise); } body.sa .sa-btn--like:hover { border-color: var(--co-neon); color: var(--co-braise-f); } body.sa .sa-btn:focus-visible { outline: 3px solid var(--co-neon); outline-offset: 2px; } /* ---- 3. en-tête CENTRÉ : médaillon + filet néon, nav en rail-pilule ---- */ body.sa .sa-header { background: transparent; border-bottom: 0; padding-top: .5rem; } body.sa .sa-header__in { display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; align-items: center; row-gap: .55rem; min-height: 0; padding-block: .35rem .7rem; } body.sa .sa-logo { grid-column: 2; justify-self: center; max-width: 100%; background: none; padding: 0 0 .3rem; box-shadow: none; font-family: var(--sa-police-titre); font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: var(--co-encre); border-bottom: 2px solid var(--co-neon); } body.sa .sa-logo__mark { display: inline-flex; width: 32px; height: 32px; border-radius: 50%; background: var(--co-braise); color: #fff; font-size: .76rem; font-weight: 900; box-shadow: var(--co-lueur); } body.sa .sa-burger { grid-column: 3; color: var(--co-braise); } body.sa .sa-nav { grid-column: 1 / -1; background: var(--co-page2); border: 1px solid var(--co-bord2); border-radius: 20px; padding: .45rem .55rem; box-shadow: 0 0 0 1px rgba(255,90,99,.18), 0 10px 26px -18px rgba(168,22,42,.5); } body.sa .sa-nav li a { border-top: 1px solid rgba(200,31,56,.14); color: var(--co-encre); border-radius: 12px; padding-inline: .7rem; } body.sa .sa-nav li:first-child a { border-top: 0; } body.sa .sa-nav li a:hover, body.sa .sa-nav li a.is-actif { color: var(--co-braise-f); background: rgba(255,255,255,.8); } body.sa .sa-nav li a .sa-ico { color: var(--co-braise); } body.sa .sa-header__actions { padding-top: .6rem; } @media (min-width: 900px) { body.sa .sa-header__in { grid-template-columns: minmax(0,1fr); padding-block: .6rem .8rem; } body.sa .sa-logo { grid-column: 1; font-size: 1.85rem; padding-bottom: .35rem; } body.sa .sa-burger { grid-column: 1; } body.sa .sa-nav { display: flex; justify-content: space-between; gap: .9rem; border-radius: 999px; padding: .4rem .5rem .4rem 1rem; } body.sa .sa-nav ul { flex: 1 1 auto; min-width: 0; justify-content: center; gap: .1rem; } body.sa .sa-nav li a { border-top: 0; font-size: .85rem; border-radius: 999px; padding: .45rem .62rem; } body.sa .sa-header__actions { padding-top: 0; gap: .45rem; flex: none; } body.sa .sa-header__actions .sa-btn { font-size: .9rem; padding-inline: 1rem; } } /* ---- 4. annonces : cartes droites, photo vignettée, badge en pilule ivoire ---- */ body.sa .sa-grille { gap: 1.15rem; padding: 0; } html:not(#_) .sa-grille > .sa-carte { background: #fff; border: 1px solid var(--co-bord2); border-radius: var(--sa-rayon); padding: 0; box-shadow: var(--sa-ombre); transition: transform .18s ease, box-shadow .18s ease; } html:not(#_) .sa-grille > .sa-carte:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(255,90,99,.45), 0 20px 40px -18px rgba(200,31,56,.55); } body.sa .sa-carte__img { border-radius: 17px 17px 0 0; background: var(--co-page2); } body.sa .sa-carte__img::after { content: ""; position: absolute; inset: auto 0 0; height: 42%; background: linear-gradient(to top, rgba(38,16,26,.42), transparent); pointer-events: none; } body.sa .sa-carte--sans-photo .sa-carte__img::after { content: none; } body.sa .sa-carte__new { background: var(--co-ivoire); color: var(--co-braise-f); border-radius: 999px; padding: .26rem .7rem; box-shadow: var(--co-lueur); } body.sa .sa-carte__corps { padding: .85rem 1rem 1rem; gap: .4rem; } body.sa .sa-carte__titre { font-family: var(--sa-police-titre); font-size: 1.04rem; line-height: 1.25; } body.sa .sa-carte__ville .sa-ico, body.sa .sa-carte__metas .sa-ico { color: var(--co-braise); } body.sa .sa-carte__pied { padding-top: .6rem; gap: .6rem; } @media (max-width: 639px) { /* 390 px : une colonne, photo pleine hauteur à gauche */ html:not(#_) .sa-grille { grid-template-columns: minmax(0,1fr); gap: .85rem; } html:not(#_) .sa-grille > .sa-carte { flex-direction: row; align-items: stretch; } html:not(#_) .sa-grille > .sa-carte .sa-carte__img { flex: 0 0 40%; aspect-ratio: auto; align-self: stretch; border-radius: 17px 0 0 17px; } html:not(#_) .sa-grille > .sa-carte .sa-carte__img img { height: 100%; } html:not(#_) .sa-grille > .sa-carte .sa-carte__corps { flex: 1 1 auto; padding: .75rem .85rem .85rem; } html:not(#_) .sa-grille > .sa-carte .sa-carte__titre { font-size: 1rem; } } /* ---- 5. « Ça marche comme ça » : bande pêche à filet néon, médaillons pleins ---- */ body.sa .sa-hero--etapes { background: var(--co-page2); border-top: 2px solid var(--co-neon); border-bottom: 1px solid var(--co-bord2); margin-top: 2rem; } body.sa .sa-hero--etapes .sa-hero__txt { background: #fff; border-radius: var(--sa-rayon); padding: 1.6rem 1.5rem 1.5rem; box-shadow: var(--sa-ombre); } body.sa .sa-hero__etapes li { color: var(--co-encre); } body.sa .sa-hero__etapes li::before { border: 0; background: var(--co-braise); color: #fff; font-family: var(--sa-police); box-shadow: var(--co-lueur); } /* ---- 6. villes en ARCHES + thèmes en PILULES PLEINES, plus de colonne creuse ---- */ body.sa .sa-deux-colonnes { grid-template-columns: minmax(0,1fr); gap: 1.3rem; } body.sa .sa-regions__liste { gap: .6rem; } body.sa .sa-pastille { background: var(--co-ivoire); border: 1px solid var(--co-bord); border-radius: 26px 26px 8px 8px; box-shadow: 0 1px 2px rgba(168,22,42,.06); font-family: var(--sa-police); font-weight: 700; color: var(--co-encre); min-height: 50px; } body.sa .sa-pastille:hover { border-color: var(--co-neon); box-shadow: var(--co-lueur); } body.sa .sa-pastille .sa-badge { background: var(--co-page2); color: var(--co-braise-f); } body.sa .sa-tags, body.sa .sa-side, body.sa .sa-similaires, body.sa .sa-recherche, body.sa .sa-fiche { background: #fff; border: 1px solid var(--co-bord2); border-radius: var(--sa-rayon); box-shadow: var(--sa-ombre); } body.sa .sa-tags { padding: 1.3rem 1.4rem 1.4rem; } body.sa .sa-tags__liste { gap: .5rem; } html:not(#_) .sa-tags__liste a { background: var(--co-braise); color: #fff; border: 0; border-radius: 999px; padding: .42rem .5rem .42rem .9rem; font-family: var(--sa-police); box-shadow: 0 1px 2px rgba(168,22,42,.16); } html:not(#_) .sa-tags__liste a:hover, html:not(#_) .sa-tags__liste li.is-actif a { background: var(--co-braise-f); color: #fff; box-shadow: var(--co-lueur); } html:not(#_) .sa-tags__liste a .sa-badge { background: rgba(255,255,255,.95); color: var(--co-braise-f); } html:not(#_) .sa-tags--nuage .sa-tags__liste a { background: none; color: var(--co-braise); box-shadow: none; padding: .1rem .25rem; } /* ---- 7. le mag : carte-note centrée (un seul article ne laisse plus deux tiers de vide) ---- */ body.sa .sa-blog__liste { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.1rem; } body.sa .sa-blog__item { flex: 1 1 300px; max-width: 560px; background: #fff; border: 1px solid var(--co-bord2); border-radius: var(--sa-rayon); box-shadow: var(--sa-ombre); padding: 1.3rem 1.4rem; } body.sa .sa-blog__titre { font-family: var(--sa-police-titre); } /* ---- 8. LA BANDE NUIT : inscription + pied de page, le néon s'y allume ---- */ body.sa .sa-inscrire { background: none; padding: 2.2rem 0 1.6rem; } body.sa .sa-inscrire__in, body.sa .sa-liens__grid { background: var(--co-nuit); background-image: radial-gradient(600px 200px at 12% 0%, rgba(255,90,99,.22), transparent 70%); border-radius: 26px; border-top: 2px solid var(--co-neon); box-shadow: 0 18px 44px -22px rgba(38,16,26,.8); color: var(--co-clair); padding: 1.8rem 1.6rem; max-width: 960px; margin-inline: auto; --sa-texte: var(--co-clair); --sa-muet: var(--co-clair2); --sa-bord: rgba(255,90,99,.38); } body.sa .sa-inscrire__h { color: var(--co-clair); font-family: var(--sa-police-titre); font-size: 1.55rem; } body.sa .sa-inscrire__txt p { color: var(--co-clair2); } body.sa .sa-inscrire .sa-form__lbl, body.sa .sa-inscrire .sa-form__check, body.sa .sa-inscrire .sa-form__aide { color: var(--co-clair); } body.sa .sa-inscrire .sa-form__check a { color: var(--co-clair); text-decoration: underline; } /* piège : --sa-texte est clair dans cette bande, le champ garde donc de l'encre sur blanc */ body.sa .sa-inscrire input[type="email"], body.sa .sa-inscrire input[type="text"] { background: #fff; color: var(--co-encre); border: 1px solid rgba(255,90,99,.5); border-radius: 999px; padding-inline: 1rem; } body.sa .sa-inscrire input::placeholder { color: #8b7377; } body.sa .sa-liens { background: none; padding: 1rem 0 2rem; } body.sa .sa-liens__col { background: none; padding: 0; box-shadow: none; } body.sa .sa-liens__marque { color: var(--co-clair); font-family: var(--sa-police-titre); display: inline-block; border-bottom: 2px solid var(--co-neon); padding-bottom: .2rem; } body.sa .sa-liens__h { color: var(--co-neon); font-family: var(--sa-police); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; } body.sa .sa-liens a { color: var(--co-clair2); } body.sa .sa-liens a:hover { color: #fff; } body.sa .sa-liens p { color: var(--co-clair2); } body.sa .sa-liens .sa-btn--ghost { background: transparent; color: var(--co-clair); border-color: rgba(255,90,99,.6); } body.sa .sa-liens .sa-btn--ghost:hover { background: rgba(255,90,99,.16); color: #fff; border-color: var(--co-neon); } body.sa .sa-footer__tail { background: none; color: var(--co-muet); border-top: 0; text-align: center; } body.sa .sa-footer__legal a, body.sa .sa-footer__haut a { color: var(--co-braise); } body.sa .sa-footer__important { color: var(--co-encre); } html:not(#_) .sa-membres__avatar { border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(255,90,99,.65), 0 8px 18px -10px rgba(168,22,42,.6); } body.sa .sa-membres__h { font-family: var(--sa-police-titre); } /* ---- 9. fiche : photo EN ARCHE, CTA en carte centrée à cœur filigrané ---- */ body.sa .sa-fiche { padding: 1.4rem; } body.sa .sa-fiche__titre, body.sa .sa-side__h, body.sa .sa-similaires__h, body.sa .sa-tags__h, body.sa .sa-dispo__h { font-family: var(--sa-police-titre); } html:not(#_) .sa-fiche__photo { background: #fff; padding: 6px; border-radius: 48% 48% 16px 16px / 32% 32% 16px 16px; box-shadow: 0 0 0 2px rgba(255,90,99,.55), 0 18px 40px -20px rgba(168,22,42,.65); } html:not(#_) .sa-fiche__photo img { border-radius: 46% 46% 12px 12px / 30% 30% 12px 12px; } body.sa .sa-fiche__id > div { border-top: 1px solid var(--co-bord); } body.sa .sa-fiche__id dd .sa-ico, body.sa .sa-like__compte .sa-ico { color: var(--co-braise); } body.sa .sa-dispo { background: var(--co-page2); border: 0; border-left: 3px solid var(--co-neon); border-radius: 6px var(--sa-rayon) var(--sa-rayon) 6px; padding: 1rem 1.1rem; } body.sa .sa-dispo__jour.is-aujourdhui .sa-dispo__nom { color: var(--co-braise-f); } body.sa .sa-dispo--puces .sa-dispo__creneaux li.is-on::before { color: var(--co-braise); } body.sa .sa-dispo--puces .sa-dispo__jour { border-top-color: rgba(200,31,56,.18); } html:not(#_) .sa-chip { background: var(--co-page2); color: var(--co-encre) !important; border: 1px solid var(--co-bord2); border-radius: 999px; } html:not(#_) a.sa-chip:hover { border-color: var(--co-neon); box-shadow: var(--co-lueur); } html:not(#_) label.sa-chip:has(input:checked) { background: var(--co-braise); color: #fff !important; border-color: var(--co-braise); } html:not(#_) .sa-cta { background: #fff var(--co-coeur) no-repeat right -18px bottom -22px / 150px; border: 1px solid rgba(255,90,99,.45); border-radius: 22px; box-shadow: 0 0 0 1px rgba(255,90,99,.18), 0 16px 36px -18px rgba(200,31,56,.5); padding: 1.4rem 1.3rem; text-align: center; } body.sa .sa-cta__q { font-family: var(--sa-police-titre); font-size: 1.18rem; color: var(--co-encre); } body.sa .sa-cta__fleche { color: var(--co-braise); } body.sa .sa-cta .sa-btn { width: 100%; } body.sa .sa-similaires__liste li, body.sa .sa-commentaire { border-color: var(--co-bord); } body.sa .sa-similaires__img { border-radius: 14px 14px 6px 6px; } body.sa .sa-side__liste li, body.sa .sa-commentaires { border-top-color: var(--co-bord); } @media (max-width: 767px) { /* la photo ne mange plus tout l'écran : titre et identité arrivent tout de suite */ html:not(#_) .sa-fiche__photo img { max-height: 44vh; object-fit: cover; } body.sa .sa-fiche { padding: 1rem; } } @media (min-width: 900px) { html:not(#_) .sa-fiche--3 .sa-fiche__media { max-width: 250px; } } /* ---- 10. barres fixes (couleurs seules), pagination, formulaires, dépôt ---- */ body.sa .sa-barre-mobile { background: var(--co-braise); color: #fff; box-shadow: 0 -2px 18px rgba(200,31,56,.55), 0 0 0 1px rgba(255,90,99,.5); } html:not(#_) .sa-fiche__barre { background: var(--co-ivoire); border-top: 2px solid var(--co-neon); } body.sa .sa-pagination li a, body.sa .sa-pagination li span { border-radius: 999px; border-color: var(--co-bord); background: #fff; color: var(--co-encre); } body.sa .sa-pagination li.is-actif span { background: var(--co-braise); color: #fff; border-color: var(--co-braise); box-shadow: var(--co-lueur); } body.sa .sa-pagination li.is-off span { color: var(--co-muet); background: none; } body.sa .sa-form input[type="text"], body.sa .sa-form input[type="email"], body.sa .sa-form input[type="tel"], body.sa .sa-form input[type="number"], body.sa .sa-form input[type="search"], body.sa .sa-form select, body.sa .sa-form textarea { border-color: var(--co-bord3); border-radius: 14px; background: #fff; } body.sa .sa-form input:focus, body.sa .sa-form select:focus, body.sa .sa-form textarea:focus { outline-color: var(--co-neon); } body.sa .sa-depot__bloc { background: #fff; border: 1px solid var(--co-bord2); border-radius: var(--sa-rayon); box-shadow: var(--sa-ombre); padding: 1.2rem 1.3rem 1.4rem; } body.sa .sa-depot__bloc legend { font-family: var(--sa-police-titre); color: var(--co-braise-f); } body.sa .sa-depot__dispo th, body.sa .sa-depot__dispo td { border-color: var(--co-bord); } body.sa .sa-depot__dispo thead th { background: var(--co-page2); color: var(--co-encre); } body.sa .sa-badge { background: var(--co-page2); color: var(--co-braise-f); } body.sa .sa-badge--ok { background: #e4f3ea; color: #1f6b43; } body.sa .sa-vide, body.sa .sa-commentaires__note { border-color: var(--co-bord3); background: var(--co-ivoire); color: var(--co-muet); } /* ---- 11. porte de consentement et pop-up d'inscription (couleurs seules) ---- */ body.sa .sa-consent__box, body.sa .sa-popup__box { border-radius: 24px; border-top: 3px solid var(--co-neon); box-shadow: 0 24px 70px rgba(38,16,26,.6); } body.sa .sa-consent__titre, body.sa .sa-popup__titre { font-family: var(--sa-police-titre); color: var(--co-encre); } body.sa .sa-consent__quitter, body.sa .sa-popup__refus a { color: var(--co-muet); } body.sa .sa-popup__croix { background: var(--co-page2); color: var(--co-braise-f); } body.sa .sa-popup__croix:hover, body.sa .sa-popup__croix:focus-visible { background: var(--co-braise); color: #fff; } /* ---- 12. mouvement réduit ---- */ @media (prefers-reduced-motion: reduce) { body.sa * { transition: none !important; animation: none !important; } html:not(#_) .sa-grille > .sa-carte:hover { transform: none; } }