/* sexeannoncesphp — skins.css : SIX COMPOSITIONS (pas six palettes). : N = crc32('skin|domaine') % 6 + 1 ou `skin` de la config. Chaque skin change les variables ET la mise en page : en-tête, cartes (zones media / who / title / extrait / foot réordonnées), colonnes, tags, disponibilité, pied de page, barre mobile. Toutes différentes entre elles et des six du gabarit 1 (éditorial à filets / sombre profond / journal papier serif / arrondi flou / brutaliste / pastel). 1 feed — colonne unique façon réseau social, avatar rond, chips collantes, sans colonne latérale 2 magazine — serif, une carte « à la une », colonnes à filets, masthead centré 3 mosaïque — tuiles photo carrées à texte en superposition, tags en nuage typographique 4 vitrine — clair et aéré, rail de navigation vertical à gauche, cartes espacées, pilules 5 néon — sombre, panneaux bordés lumineux, en-tête centré, badges qui brillent 6 gazette — petites annonces denses : encadrés, petites capitales, rubriques, 4 colonnes La palette reste construite autour de --sx-accent (couleur du site). Sections « dispositions de fiche » (sx-fiche-1..3) en fin de fichier : indépendantes du skin. */ /* ================================================================ 1 — FEED */ body.skin-1 { --sx-bg: #f3f4f6; --sx-bg-2: #fff; --sx-bg-3: #e9ebef; --sx-ink: #15171c; --sx-ink-2: #454a55; --sx-ink-3: #6b7180; --sx-line: #e3e6eb; --sx-line-strong: #cfd4dc; --sx-radius: 18px; --sx-radius-s: 10px; --sx-btn-r: 999px; --sx-font: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; --sx-font-head: var(--sx-font); --sx-wrap: 1040px; --sx-shadow: 0 1px 2px rgba(15, 20, 30, .05); --sx-shadow-hover: 0 8px 26px rgba(15, 20, 30, .12); --sx-footer-bg: #fff; --sx-footer-ink: #454a55; --sx-footer-h: #15171c; } body.skin-1 .sx-header { border-bottom: 0; box-shadow: 0 1px 0 var(--sx-line); } body.skin-1 .sx-logo__mark { border-radius: 4px; transform: rotate(45deg); box-shadow: none; } body.skin-1 .sx-header__search { background: var(--sx-bg-3); } body.skin-1 .sx-header__signup { border-color: transparent; background: var(--sx-bg-3); } @media (min-width: 900px) { body.skin-1 .sx-nav__list { justify-content: flex-start; gap: 0; } body.skin-1 .sx-nav__list a { border-radius: 999px; padding: 8px 11px; font-size: .9rem; } body.skin-1 .sx-nav__item.is-on a { background: var(--sx-ink); color: #fff; } } /* feed : hero réduit à un panneau, grille = colonne unique centrée, chips collantes */ body.skin-1 .sx-hero { background: var(--sx-bg-2); color: var(--sx-ink); border-bottom: 1px solid var(--sx-line); } body.skin-1 .sx-hero__img { opacity: 0; } body.skin-1 .sx-hero__inner { max-width: 680px; padding-top: 30px; padding-bottom: 26px; text-align: center; } body.skin-1 .sx-hero__h1 { margin-left: auto; margin-right: auto; } body.skin-1 .sx-hero__intro { margin-left: auto; margin-right: auto; } body.skin-1 .sx-hero__cta { justify-content: center; } body.skin-1 .sx-hero .sx-btn--ghost { color: var(--sx-accent-ink); border-color: var(--sx-accent-line); } body.skin-1 .sx-hero--split .sx-hero__inner { max-width: var(--sx-wrap); text-align: left; } body.skin-1 .sx-hero--split .sx-hero__h1, body.skin-1 .sx-hero--split .sx-hero__intro { margin-left: 0; } body.skin-1 .sx-hero--split .sx-hero__cta { justify-content: flex-start; } body.skin-1 .sx-section__inner, body.skin-1 .sx-entete__inner { max-width: 680px; } body.skin-1 .sx-section--nuage .sx-section__inner, body.skin-1 .sx-duo .sx-section__inner, body.skin-1 .sx-hero--split .sx-hero__inner, body.skin-1 .sx-blog-bloc .sx-section__inner, body.skin-1 .sx-deposer .sx-section__inner, body.skin-1 .sx-recherche .sx-section__inner { max-width: var(--sx-wrap); } body.skin-1 .sx-grid, body.skin-1 .sx-grid--2 { grid-template-columns: 1fr; gap: 14px; } body.skin-1 .sx-cols { grid-template-columns: 1fr; } body.skin-1 .sx-cols__aside { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } body.skin-1 .sx-cols__aside .sx-side__bloc { margin: 0; } body.skin-1 .sx-card { grid-template-areas: "media who" "title title" "extrait extrait" "foot foot"; grid-template-columns: 56px 1fr; grid-template-rows: auto auto 1fr auto; padding: 14px 16px 10px; gap: 0 12px; border: 0; } body.skin-1 .sx-card__media { width: 56px; height: 56px; aspect-ratio: auto; border-radius: 50%; } body.skin-1 .sx-card__img { object-position: center 25%; } body.skin-1 .sx-card__new { position: static; display: inline-block; margin-left: 6px; padding: .1em .5em; } body.skin-1 .sx-card__who { padding: 4px 0 0; align-self: center; } body.skin-1 .sx-card__date { flex-basis: 100%; margin-left: 0; } body.skin-1 .sx-card__title { margin: 10px 0 4px; font-size: 1.12rem; } body.skin-1 .sx-card__extrait { margin: 0 0 10px; -webkit-line-clamp: 4; } body.skin-1 .sx-card__foot { padding: 8px 0 0; border-top: 1px solid var(--sx-line); } body.skin-1 .sx-card__contact { border-radius: 999px; } body.skin-1 .sx-card--sans-photo .sx-card__media { height: 56px; } body.skin-1 .sx-tags--bar { position: sticky; top: var(--sx-header-h); z-index: 30; margin: 0 -16px 14px; padding: 10px 16px; background: color-mix(in srgb, var(--sx-bg) 88%, transparent); backdrop-filter: blur(8px); } body.skin-1 .sx-tags--bar .sx-tags__list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } body.skin-1 .sx-tags--bar .sx-tags__list::-webkit-scrollbar { display: none; } body.skin-1 .sx-tags--bar .sx-tags__item { flex: none; } body.skin-1 .sx-tag { background: var(--sx-bg-2); border-color: transparent; box-shadow: var(--sx-shadow); } body.skin-1 .sx-regions { background: none; border: 0; } body.skin-1 .sx-regions__item a { border: 0; padding: .35em 0; } body.skin-1 .sx-membres__list { display: flex; overflow-x: auto; gap: 14px; padding-bottom: 6px; scrollbar-width: thin; } body.skin-1 .sx-membres__item { flex: none; width: 84px; } body.skin-1 .sx-membres__photo { width: 72px; height: 72px; box-shadow: 0 0 0 3px var(--sx-bg), 0 0 0 5px var(--sx-accent); } body.skin-1 .sx-articles__item { grid-template-columns: 96px 1fr; grid-template-rows: none; align-items: center; } body.skin-1 .sx-articles__photo { aspect-ratio: 1; height: 100%; } body.skin-1 .sx-articles { grid-template-columns: 1fr; } body.skin-1 .sx-etapes__item { border: 0; } body.skin-1 .sx-fiche-layout { grid-template-columns: 1fr; max-width: 760px; } body.skin-1 .sx-fiche__aside { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } body.skin-1 .sx-fiche__photo { border-radius: 24px; } body.skin-1 .sx-footer__inner { grid-template-columns: 1fr; gap: 12px; padding-top: 22px; } body.skin-1 .sx-footer__col { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; } body.skin-1 .sx-footer__h { margin: 0; width: 100%; } body.skin-1 .sx-footer__list { display: flex; flex-wrap: wrap; gap: 2px 14px; columns: auto; } body.skin-1 .sx-footer__list--geo { columns: auto; } body.skin-1 .sx-footer__brand { display: grid; gap: 6px; } body.skin-1 .sx-footer__btns { margin-top: 4px; } body.skin-1 .sx-mobilebar { left: 0; right: 0; bottom: 0; border-radius: 0; min-height: 60px; } /* ================================================================ 2 — MAGAZINE */ body.skin-2 { --sx-bg: #fbfaf7; --sx-bg-2: #fff; --sx-bg-3: #f1ede4; --sx-ink: #1f1a17; --sx-ink-2: #4d4540; --sx-ink-3: #77706a; --sx-line: #e6e0d6; --sx-line-strong: #c9bfb1; --sx-radius: 4px; --sx-radius-s: 3px; --sx-btn-r: 3px; --sx-font: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --sx-font-head: var(--sx-font); --sx-font-meta: "Segoe UI", system-ui, sans-serif; --sx-wrap: 1220px; --sx-shadow: none; --sx-shadow-hover: none; --sx-photo-r: 0; --sx-header-bg: #fff; --sx-footer-bg: #1f1a17; --sx-footer-ink: #cfc6bb; --sx-footer-h: #fff; } body.skin-2 h1, body.skin-2 h2, body.skin-2 h3, body.skin-2 .sx-section__h { letter-spacing: -.015em; font-weight: 700; } body.skin-2 .sx-section__h { font-size: 1.65rem; } body.skin-2 .sx-section__head { border-bottom: 3px double var(--sx-line-strong); padding-bottom: 8px; } body.skin-2 .sx-header { border-bottom: 1px solid var(--sx-ink); } body.skin-2 .sx-logo { font-size: 1.5rem; } body.skin-2 .sx-logo__mark { display: none; } body.skin-2 .sx-header__signup, body.skin-2 .sx-header__deposer { border-radius: 0; } body.skin-2 .sx-btn { font-family: var(--sx-font-meta); letter-spacing: .04em; text-transform: uppercase; font-size: .85rem; } body.skin-2 .sx-btn--big { font-size: .95rem; } body.skin-2 .sx-btn--main { box-shadow: none; } @media (min-width: 900px) { body.skin-2 .sx-header__inner { grid-template-columns: 1fr auto 1fr; grid-template-areas: "left logo right" "nav nav nav"; padding-top: 12px; row-gap: 0; } body.skin-2 .sx-logo { grid-area: logo; font-size: 2.1rem; text-align: center; } body.skin-2 .sx-header__actions { grid-area: right; justify-content: flex-end; } body.skin-2 .sx-nav { grid-area: nav; border-top: 1px solid var(--sx-line); margin-top: 10px; } body.skin-2 .sx-nav__list a { border-radius: 0; font-family: var(--sx-font-meta); text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; padding: 12px 14px; } body.skin-2 .sx-nav__item.is-on a { box-shadow: inset 0 -3px 0 var(--sx-accent); background: none; } body.skin-2 .sx-nav__list a:hover { background: none; text-decoration: underline; } } body.skin-2 .sx-hero { background: var(--sx-bg-3); color: var(--sx-ink); } body.skin-2 .sx-hero__img { opacity: 1; width: 42%; left: auto; right: 0; filter: none; mask-image: linear-gradient(90deg, transparent, #000 40%); } body.skin-2 .sx-hero__inner { padding-top: 54px; padding-bottom: 54px; } body.skin-2 .sx-hero__kicker { color: var(--sx-accent-ink); font-weight: 700; } body.skin-2 .sx-hero__h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 400; font-style: italic; } body.skin-2 .sx-hero .sx-btn--ghost { color: var(--sx-ink); border-color: var(--sx-ink); } body.skin-2 .sx-hero--split .sx-hero__img { display: none; } body.skin-2 .sx-signup-card { border: 1px solid var(--sx-ink); box-shadow: 6px 6px 0 var(--sx-accent-soft); } body.skin-2 .sx-entete { background: none; border-bottom: 3px double var(--sx-ink); } body.skin-2 .sx-entete__h1 { font-style: italic; font-weight: 400; } /* magazine : la première carte « à la une » sur 2 colonnes, les autres à filets, sans cadre */ body.skin-2 .sx-grid { gap: 0 28px; } body.skin-2 .sx-card { border: 0; border-radius: 0; border-bottom: 1px solid var(--sx-line); padding: 18px 0; background: none; } body.skin-2 .sx-card__media { aspect-ratio: 3 / 2; } body.skin-2 .sx-card__who, body.skin-2 .sx-card__title, body.skin-2 .sx-card__extrait { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } body.skin-2 .sx-card__who { padding-top: 12px; text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; } body.skin-2 .sx-card__pseudo { text-transform: none; letter-spacing: 0; font-size: .9rem; } body.skin-2 .sx-card__title { font-size: 1.25rem; line-height: 1.25; } body.skin-2 .sx-card__foot { padding: 8px 0 0; border-top: 0; } body.skin-2 .sx-card__contact { border: 0; background: none; color: var(--sx-accent-ink); padding-left: 0; padding-right: 0; text-decoration: underline; text-underline-offset: 3px; } body.skin-2 .sx-card__new { background: var(--sx-ink); } @media (min-width: 1000px) { body.skin-2 .sx-newest .sx-grid > .sx-card:first-child { grid-column: span 2; grid-template-areas: "media who" "media title" "media extrait" "media foot"; grid-template-columns: 1.1fr 1fr; grid-template-rows: auto auto 1fr auto; gap: 0 22px; border-bottom-width: 3px; border-bottom-style: double; } body.skin-2 .sx-newest .sx-grid > .sx-card:first-child .sx-card__media { aspect-ratio: 4 / 3; } body.skin-2 .sx-newest .sx-grid > .sx-card:first-child .sx-card__title { font-size: 1.9rem; } body.skin-2 .sx-newest .sx-grid > .sx-card:first-child .sx-card__extrait { font-size: 1.02rem; -webkit-line-clamp: 6; } } body.skin-2 .sx-tag { border-radius: 0; font-family: var(--sx-font-meta); font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; } body.skin-2 .sx-tags__h, body.skin-2 .sx-regions__h { font-size: 1.5rem; } body.skin-2 .sx-regions { background: none; border-top: 3px double var(--sx-line-strong); border-bottom: 0; } body.skin-2 .sx-regions__item a { font-family: var(--sx-font-meta); font-size: .9rem; } body.skin-2 .sx-articles__item { border: 0; border-radius: 0; background: none; } body.skin-2 .sx-articles__body { padding: 12px 0; } body.skin-2 .sx-articles__h { font-size: 1.2rem; } body.skin-2 .sx-membres { background: var(--sx-bg-3); } body.skin-2 .sx-membres__photo { border-radius: 0; box-shadow: none; width: 72px; height: 72px; } body.skin-2 .sx-etapes__item { border: 0; border-left: 3px solid var(--sx-accent); border-radius: 0; background: none; } body.skin-2 .sx-etapes__ico { border-radius: 0; background: var(--sx-ink); color: #fff; } body.skin-2 .sx-side__bloc { border: 0; border-top: 3px double var(--sx-ink); border-radius: 0; background: none; padding: 12px 0; } body.skin-2 .sx-pager__list a, body.skin-2 .sx-pager__list span { border-radius: 0; font-family: var(--sx-font-meta); } body.skin-2 .sx-fiche__h1 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); font-weight: 400; font-style: italic; } body.skin-2 .sx-fiche__who { font-family: var(--sx-font-meta); text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; } body.skin-2 .sx-fiche__pseudo { text-transform: none; letter-spacing: 0; } body.skin-2 .sx-like { border-radius: 0; } body.skin-2 .sx-cta { background: none; border-top: 3px double var(--sx-ink); border-bottom: 3px double var(--sx-ink); border-radius: 0; } body.skin-2 .sx-dispo__chips .sx-dispo__jour, body.skin-2 .sx-dispo__frise .sx-dispo__jour { border-radius: 0; } body.skin-2 .sx-chip { border-radius: 0; font-family: var(--sx-font-meta); } body.skin-2 .sx-footer__inner { border-top: 4px solid var(--sx-accent); } body.skin-2 .sx-footer__logo { font-size: 1.6rem; font-style: italic; font-weight: 400; } body.skin-2 .sx-footer .sx-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .5); } body.skin-2 .sx-footer__h { font-family: var(--sx-font-meta); } body.skin-2 .sx-mobilebar { border-radius: 0; left: 0; right: 0; bottom: 0; font-family: var(--sx-font-meta); text-transform: uppercase; letter-spacing: .06em; font-size: .9rem; } /* ================================================================ 3 — MOSAÏQUE */ body.skin-3 { --sx-bg: #f4f1ec; --sx-bg-2: #fff; --sx-bg-3: #e8e3db; --sx-ink: #1b1816; --sx-ink-2: #4a433e; --sx-ink-3: #6e665f; --sx-line: #e0d9cf; --sx-line-strong: #c4bbae; --sx-radius: 6px; --sx-radius-s: 4px; --sx-btn-r: 6px; --sx-font: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; --sx-font-head: var(--sx-font); --sx-wrap: 1280px; --sx-shadow: none; --sx-shadow-hover: 0 12px 30px rgba(0, 0, 0, .25); --sx-header-bg: #1b1816; --sx-header-ink: #fff; --sx-header-line: #2c2724; --sx-footer-bg: #1b1816; --sx-footer-ink: #b9b0a6; --sx-footer-h: #fff; } body.skin-3 .sx-header__inner { grid-template-columns: auto 1fr; } body.skin-3 .sx-logo { order: 3; text-align: right; } body.skin-3 .sx-logo__mark { display: none; } body.skin-3 .sx-logo__text { border-bottom: 3px solid var(--sx-accent); } body.skin-3 .sx-header__actions { order: 1; } body.skin-3 .sx-header__search:hover { background: rgba(255, 255, 255, .12); } body.skin-3 .sx-header__signup { color: #fff; border-color: rgba(255, 255, 255, .35); } body.skin-3 .sx-burger { order: 0; } @media (min-width: 900px) { body.skin-3 .sx-header__inner { grid-template-columns: auto 1fr auto; } body.skin-3 .sx-header__actions { order: 0; } body.skin-3 .sx-nav { order: 1; } body.skin-3 .sx-nav__list { justify-content: flex-start; } body.skin-3 .sx-nav__list a { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; } body.skin-3 .sx-nav__list a:hover { background: rgba(255, 255, 255, .12); } body.skin-3 .sx-nav__item.is-on a { color: var(--sx-accent-line); } } body.skin-3 .sx-hero__img { opacity: .6; } body.skin-3 .sx-hero__inner { padding-top: 70px; padding-bottom: 60px; text-align: center; } body.skin-3 .sx-hero__h1 { margin-left: auto; margin-right: auto; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(1.8rem, 5vw, 3.2rem); } body.skin-3 .sx-hero__intro { margin-left: auto; margin-right: auto; } body.skin-3 .sx-hero__cta { justify-content: center; } body.skin-3 .sx-hero--split .sx-hero__inner { text-align: left; } body.skin-3 .sx-hero--split .sx-hero__h1, body.skin-3 .sx-hero--split .sx-hero__intro { margin-left: 0; } body.skin-3 .sx-hero--split .sx-hero__cta { justify-content: flex-start; } body.skin-3 .sx-section__h { text-transform: uppercase; letter-spacing: .04em; font-size: 1.25rem; } body.skin-3 .sx-section__h::before { content: ""; display: inline-block; width: 10px; height: 10px; background: var(--sx-accent); margin-right: 10px; vertical-align: 2px; } /* mosaïque : tuiles carrées, texte en superposition */ body.skin-3 .sx-grid { gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 800px) { body.skin-3 .sx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1100px) { body.skin-3 .sx-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } body.skin-3 .sx-grid--2 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } body.skin-3 .sx-card { grid-template-areas: "media"; grid-template-rows: 1fr; aspect-ratio: 1; border: 0; background: var(--sx-ink); color: #fff; } body.skin-3 .sx-card__media { aspect-ratio: auto; height: 100%; } body.skin-3 .sx-card__img { transition: transform .4s; object-position: center 20%; } body.skin-3 .sx-card:hover .sx-card__img { transform: scale(1.05); } body.skin-3 .sx-card__who, body.skin-3 .sx-card__title, body.skin-3 .sx-card__extrait, body.skin-3 .sx-card__foot { grid-area: media; z-index: 2; pointer-events: none; } body.skin-3 .sx-card::after { content: ""; grid-area: media; z-index: 1; background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, .82)); pointer-events: none; } body.skin-3 .sx-card__who { align-self: end; margin: 0 12px 52px; padding: 0; color: rgba(255, 255, 255, .85); font-size: .78rem; } body.skin-3 .sx-card__pseudo { color: #fff; } body.skin-3 .sx-card__date { display: none; } body.skin-3 .sx-card__title { align-self: end; margin: 0 12px 12px; font-size: .98rem; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; pointer-events: auto; } body.skin-3 .sx-card__title a { color: #fff; } body.skin-3 .sx-card__extrait { display: none; } body.skin-3 .sx-card__foot { align-self: start; justify-content: flex-end; padding: 8px; border: 0; } body.skin-3 .sx-card__metas { color: #fff; background: rgba(0, 0, 0, .45); padding: 4px 8px; border-radius: 999px; font-size: .78rem; } body.skin-3 .sx-card__contact { display: none; } body.skin-3 .sx-card__new { top: 8px; left: 8px; z-index: 3; } body.skin-3 .sx-card--sans-photo .sx-card__media { height: 100%; } /* tags = nuage typographique, même en mode chips */ body.skin-3 .sx-tags__list { gap: 4px 18px; align-items: baseline; } body.skin-3 .sx-tag { border: 0; background: none; padding: 0; color: var(--sx-ink-2); font-weight: 700; } body.skin-3 .sx-tag:hover { color: var(--sx-accent-ink); text-decoration: underline; } body.skin-3 .sx-tag__n { font-weight: 400; } body.skin-3 [data-poids="2"] .sx-tag { font-size: 1.1rem; } body.skin-3 [data-poids="3"] .sx-tag { font-size: 1.35rem; color: var(--sx-ink); } body.skin-3 [data-poids="4"] .sx-tag { font-size: 1.7rem; color: var(--sx-ink); } body.skin-3 [data-poids="5"] .sx-tag { font-size: 2.1rem; color: var(--sx-accent-ink); } body.skin-3 .sx-tags--liste .sx-tag, body.skin-3 .sx-tags--liste [data-poids] .sx-tag { font-size: .95rem; font-weight: 400; display: flex; } body.skin-3 .sx-tags--bar .sx-tag, body.skin-3 .sx-tags--bar [data-poids] .sx-tag { font-size: .9rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; } body.skin-3 .sx-tagline .sx-tag { border: 1px solid var(--sx-line-strong); padding: .3em .7em; font-size: .9rem; font-weight: 600; } body.skin-3 .sx-regions { background: var(--sx-bg-2); } body.skin-3 .sx-regions__item a { border-bottom-style: dotted; } body.skin-3 .sx-articles { gap: 8px; } body.skin-3 .sx-articles__item { border: 0; background: var(--sx-ink); color: #fff; grid-template-rows: 1fr; } body.skin-3 .sx-articles__photo { grid-row: 1; aspect-ratio: 16 / 10; opacity: .75; } body.skin-3 .sx-articles__body { grid-row: 1; align-self: end; z-index: 1; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .85)); } body.skin-3 .sx-articles__h a, body.skin-3 .sx-articles__chapeau, body.skin-3 .sx-articles__lire a { color: #fff; } body.skin-3 .sx-membres__list { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 4px; } body.skin-3 .sx-membres__photo { width: 100%; height: auto; aspect-ratio: 1; border-radius: 0; box-shadow: none; } body.skin-3 .sx-membres__nom, body.skin-3 .sx-membres__ville { font-size: .75rem; } body.skin-3 .sx-etapes__item { background: var(--sx-ink); color: #fff; border: 0; } body.skin-3 .sx-etapes__ico { background: var(--sx-accent); color: #fff; border-radius: 0; } body.skin-3 .sx-fiche__photo { border-radius: 0; } body.skin-3 .sx-cta { background: var(--sx-ink); color: #fff; border-radius: 0; } body.skin-3 .sx-dispo__frise .sx-dispo__jour { border-radius: 0; } body.skin-3 .sx-footer__inner { padding-top: 40px; } body.skin-3 .sx-footer .sx-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .5); } body.skin-3 .sx-mobilebar { border-radius: 0; left: 0; right: 0; bottom: 0; background: var(--sx-ink); color: #fff; border-top: 3px solid var(--sx-accent); } /* ================================================================ 4 — VITRINE (rail gauche) */ body.skin-4 { --sx-bg: #fff; --sx-bg-2: #fff; --sx-bg-3: #f5f7fa; --sx-ink: #16202b; --sx-ink-2: #4b5766; --sx-ink-3: #6f7b8a; --sx-line: #e8ecf1; --sx-line-strong: #d3dae3; --sx-radius: 22px; --sx-radius-s: 12px; --sx-btn-r: 999px; --sx-font: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; --sx-font-head: var(--sx-font); --sx-wrap: 1120px; --sx-shadow: 0 2px 6px rgba(22, 32, 43, .04); --sx-shadow-hover: 0 14px 34px rgba(22, 32, 43, .1); --sx-header-bg: #fff; --sx-footer-bg: #f5f7fa; --sx-footer-ink: #4b5766; --sx-footer-h: #16202b; --sx-rail-w: 96px; } body.skin-4 .sx-header__signup { border-color: var(--sx-line-strong); color: var(--sx-ink); } body.skin-4 .sx-header__search { background: var(--sx-bg-3); } @media (min-width: 900px) { body.skin-4 { padding-left: var(--sx-rail-w); } body.skin-4 .sx-header { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sx-rail-w); border-bottom: 0; border-right: 1px solid var(--sx-line); overflow: auto; } body.skin-4 .sx-header__inner { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 14px 8px; height: 100%; max-width: none; } body.skin-4 .sx-logo { white-space: normal; text-align: center; font-size: .78rem; line-height: 1.2; } body.skin-4 .sx-logo a { flex-direction: column; gap: 6px; } body.skin-4 .sx-logo__mark { width: 40px; height: 40px; border-radius: 14px; box-shadow: none; } body.skin-4 .sx-nav { flex: 1; } body.skin-4 .sx-nav__list { flex-direction: column; gap: 2px; } body.skin-4 .sx-nav__list a { text-align: center; font-size: .72rem; padding: 10px 4px; border-radius: 12px; line-height: 1.15; } body.skin-4 .sx-nav__item.is-on a { background: var(--sx-accent-soft); color: var(--sx-accent-ink); } body.skin-4 .sx-header__actions { flex-direction: column; gap: 8px; } body.skin-4 .sx-header__signup span, body.skin-4 .sx-header__deposer span { display: none; } body.skin-4 .sx-header__signup, body.skin-4 .sx-header__deposer { width: 44px; height: 44px; min-height: 0; padding: 0; margin: 0 auto; } body.skin-4 .sx-header__search { width: 44px; height: 44px; margin: 0 auto; } body.skin-4 .sx-tags--bar { position: static; } } body.skin-4 .sx-section { padding: 40px 0; } body.skin-4 .sx-hero { background: var(--sx-bg-3); color: var(--sx-ink); } body.skin-4 .sx-hero__img { opacity: 1; width: 46%; left: auto; right: 0; filter: none; border-radius: 0 0 0 80px; } body.skin-4 .sx-hero__inner { padding-top: 64px; padding-bottom: 64px; } body.skin-4 .sx-hero__h1 { font-weight: 800; } body.skin-4 .sx-hero__intro, body.skin-4 .sx-hero__kicker, body.skin-4 .sx-hero__chiffres { max-width: 46%; color: var(--sx-ink-2); opacity: 1; } body.skin-4 .sx-hero .sx-btn--ghost { color: var(--sx-accent-ink); border-color: var(--sx-accent-line); background: #fff; } body.skin-4 .sx-hero--split .sx-hero__img { display: none; } body.skin-4 .sx-hero--split .sx-hero__intro, body.skin-4 .sx-hero--split .sx-hero__kicker, body.skin-4 .sx-hero--split .sx-hero__chiffres { max-width: none; } @media (max-width: 899px) { body.skin-4 .sx-hero__img { width: 100%; opacity: .18; border-radius: 0; } body.skin-4 .sx-hero__intro, body.skin-4 .sx-hero__kicker, body.skin-4 .sx-hero__chiffres { max-width: none; } } body.skin-4 .sx-signup-card { border-color: var(--sx-line); box-shadow: var(--sx-shadow-hover); } body.skin-4 .sx-section__h { font-size: 1.55rem; font-weight: 800; } body.skin-4 .sx-grid { gap: 22px; } body.skin-4 .sx-card { border-color: var(--sx-line); padding: 10px; gap: 0; } body.skin-4 .sx-card__media { border-radius: 16px; aspect-ratio: 1; } body.skin-4 .sx-card__img { object-position: center 25%; } body.skin-4 .sx-card__who { padding: 12px 6px 0; } body.skin-4 .sx-card__title { margin: 6px 6px 4px; } body.skin-4 .sx-card__extrait { margin: 0 6px 12px; } body.skin-4 .sx-card__foot { border-top: 0; padding: 0 6px 6px; } body.skin-4 .sx-card__contact { background: var(--sx-accent); color: var(--sx-on-accent); } body.skin-4 .sx-tag { border-color: var(--sx-line); background: var(--sx-bg-3); } body.skin-4 .sx-tag:hover { background: var(--sx-accent-soft); } body.skin-4 .sx-regions { border: 0; background: var(--sx-bg-3); border-radius: var(--sx-radius); margin: 0 var(--sx-gutter); } body.skin-4 .sx-regions__inner { padding-left: 24px; padding-right: 24px; } body.skin-4 .sx-regions__item a { border-bottom: 0; } body.skin-4 .sx-articles__item { border-color: var(--sx-line); padding: 10px; } body.skin-4 .sx-articles__photo { border-radius: 14px; } body.skin-4 .sx-membres__photo { border-radius: 20px; box-shadow: none; } body.skin-4 .sx-etapes__item { border: 0; background: var(--sx-bg-3); } body.skin-4 .sx-side__bloc { border-color: var(--sx-line); background: var(--sx-bg-3); } body.skin-4 .sx-like { background: var(--sx-bg-3); border-color: transparent; } body.skin-4 .sx-fiche__photo { border-radius: 22px; } body.skin-4 .sx-cta { background: var(--sx-bg-3); } body.skin-4 .sx-form__group { border-color: var(--sx-line); background: var(--sx-bg-3); } body.skin-4 .sx-footer { margin-top: 40px; } body.skin-4 .sx-footer__inner { padding-top: 44px; } body.skin-4 .sx-mobilebar { bottom: 14px; } /* ================================================================ 5 — NÉON */ body.skin-5 { --sx-bg: #0f0d13; --sx-bg-2: #17141e; --sx-bg-3: #1f1b28; --sx-ink: #f2eef8; --sx-ink-2: #c9c2d6; --sx-ink-3: #9d95ad; --sx-line: #2a2535; --sx-line-strong: #3d3650; --sx-radius: 10px; --sx-radius-s: 6px; --sx-btn-r: 6px; --sx-accent-ink: color-mix(in srgb, var(--sx-accent) 70%, #fff); --sx-accent-soft: color-mix(in srgb, var(--sx-accent) 18%, #17141e); --sx-accent-line: color-mix(in srgb, var(--sx-accent) 55%, #17141e); --sx-font: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; --sx-font-head: var(--sx-font); --sx-wrap: 1200px; --sx-shadow: 0 0 0 1px var(--sx-line); --sx-shadow-hover: 0 0 0 1px var(--sx-accent), 0 0 24px var(--sx-accent-glow); --sx-header-bg: #0f0d13; --sx-header-ink: #f2eef8; --sx-header-line: #2a2535; --sx-footer-bg: #0a090d; --sx-footer-ink: #9d95ad; --sx-footer-h: #f2eef8; --sx-card-bg: #17141e; --sx-card-line: #2a2535; --sx-mobilebar-bg: #17141e; --sx-mobilebar-ink: #f2eef8; } body.skin-5 a { color: var(--sx-accent-ink); } body.skin-5 .sx-header { border-bottom: 1px solid var(--sx-line); box-shadow: 0 1px 0 var(--sx-accent-glow); } body.skin-5 .sx-logo__mark { box-shadow: 0 0 12px var(--sx-accent), 0 0 0 3px var(--sx-accent-soft); } body.skin-5 .sx-logo__text { text-transform: uppercase; letter-spacing: .12em; font-size: .95rem; } body.skin-5 .sx-header__signup { color: var(--sx-ink); border-color: var(--sx-line-strong); } body.skin-5 .sx-header__search:hover { background: var(--sx-bg-3); } @media (min-width: 900px) { body.skin-5 .sx-header__inner { grid-template-columns: 1fr; grid-template-rows: auto auto; justify-items: center; padding-top: 14px; row-gap: 6px; } body.skin-5 .sx-logo { font-size: 1.4rem; } body.skin-5 .sx-header__actions { position: absolute; right: var(--sx-gutter); top: 14px; } body.skin-5 .sx-header__inner { position: relative; } body.skin-5 .sx-nav__list a { text-transform: uppercase; letter-spacing: .14em; font-size: .74rem; border-radius: 0; padding: 10px 14px; } body.skin-5 .sx-nav__list a:hover { background: none; color: var(--sx-accent-ink); text-shadow: 0 0 10px var(--sx-accent); text-decoration: none; } body.skin-5 .sx-nav__item.is-on a { color: var(--sx-accent-ink); box-shadow: inset 0 -2px 0 var(--sx-accent); } body.skin-5 { --sx-header-h: 96px; } } body.skin-5 .sx-btn--main { box-shadow: 0 0 18px var(--sx-accent-glow), inset 0 0 0 1px rgba(255, 255, 255, .15); } body.skin-5 .sx-btn--ghost { color: var(--sx-ink); } body.skin-5 .sx-btn--soft { background: var(--sx-accent-soft); color: var(--sx-accent-ink); box-shadow: inset 0 0 0 1px var(--sx-accent-line); } body.skin-5 .sx-pill { background: var(--sx-accent-soft); color: var(--sx-accent-ink); box-shadow: 0 0 0 1px var(--sx-accent-line), 0 0 12px var(--sx-accent-glow); } body.skin-5 .sx-hero { background: radial-gradient(ellipse at 30% 20%, var(--sx-accent-soft), transparent 55%), var(--sx-bg); } body.skin-5 .sx-hero__img { opacity: .28; mix-blend-mode: screen; } body.skin-5 .sx-hero__inner { padding-top: 60px; padding-bottom: 60px; text-align: center; } body.skin-5 .sx-hero__h1 { margin-left: auto; margin-right: auto; text-shadow: 0 0 30px var(--sx-accent-glow); } body.skin-5 .sx-hero__intro { margin-left: auto; margin-right: auto; color: var(--sx-ink-2); } body.skin-5 .sx-hero__kicker { color: var(--sx-accent-ink); } body.skin-5 .sx-hero__cta { justify-content: center; } body.skin-5 .sx-hero--split { background: var(--sx-bg); color: var(--sx-ink); } body.skin-5 .sx-hero--split .sx-hero__inner { text-align: left; } body.skin-5 .sx-hero--split .sx-hero__h1, body.skin-5 .sx-hero--split .sx-hero__intro { margin-left: 0; } body.skin-5 .sx-hero--split .sx-hero__cta { justify-content: flex-start; } body.skin-5 .sx-signup-card { box-shadow: 0 0 0 1px var(--sx-accent-line), 0 0 30px var(--sx-accent-glow); border-color: transparent; } body.skin-5 .sx-entete { background: var(--sx-bg-2); } body.skin-5 .sx-bandeau { background: linear-gradient(120deg, var(--sx-accent-ink), var(--sx-accent)); } body.skin-5 .sx-section__h { text-transform: uppercase; letter-spacing: .1em; font-size: 1.05rem; color: var(--sx-accent-ink); text-shadow: 0 0 14px var(--sx-accent-glow); } body.skin-5 .sx-card { border-color: var(--sx-line); } body.skin-5 .sx-card:hover { border-color: var(--sx-accent); } body.skin-5 .sx-card__title a { color: var(--sx-ink); } body.skin-5 .sx-card__pseudo { color: var(--sx-accent-ink); } body.skin-5 .sx-card__new { box-shadow: 0 0 12px var(--sx-accent); } body.skin-5 .sx-card__contact { background: transparent; box-shadow: inset 0 0 0 1px var(--sx-accent-line); } body.skin-5 .sx-card__contact:hover { background: var(--sx-accent); box-shadow: 0 0 16px var(--sx-accent-glow); } body.skin-5 .sx-tag { background: var(--sx-bg-2); border-color: var(--sx-line-strong); color: var(--sx-ink-2); } body.skin-5 .sx-tag:hover { border-color: var(--sx-accent); color: var(--sx-accent-ink); box-shadow: 0 0 12px var(--sx-accent-glow); } body.skin-5 .sx-tags--nuage .sx-tag, body.skin-5 .sx-tags--liste .sx-tag { background: none; } body.skin-5 .sx-regions { background: var(--sx-bg-2); } body.skin-5 .sx-regions__item a { color: var(--sx-ink-2); } body.skin-5 .sx-articles__item { border-color: var(--sx-line); } body.skin-5 .sx-articles__h a { color: var(--sx-ink); } body.skin-5 .sx-membres__photo { box-shadow: 0 0 0 2px var(--sx-bg), 0 0 0 4px var(--sx-accent), 0 0 14px var(--sx-accent-glow); } body.skin-5 .sx-membres__nom a { color: var(--sx-ink); } body.skin-5 .sx-etapes__item { border-color: var(--sx-line); } body.skin-5 .sx-etapes__ico { background: var(--sx-accent-soft); color: var(--sx-accent-ink); box-shadow: 0 0 14px var(--sx-accent-glow); } body.skin-5 .sx-vide { background: var(--sx-bg-2); } body.skin-5 .sx-side__list li a, body.skin-5 .sx-similaires__h a { color: var(--sx-ink-2); } body.skin-5 .sx-like { background: var(--sx-bg-2); color: var(--sx-accent-ink); box-shadow: 0 0 12px var(--sx-accent-glow); } body.skin-5 .sx-cta { background: var(--sx-bg-2); box-shadow: inset 0 0 0 1px var(--sx-accent-line), 0 0 30px var(--sx-accent-glow); } body.skin-5 .sx-chip { background: var(--sx-bg-3); } body.skin-5 .sx-chip--on { box-shadow: 0 0 10px var(--sx-accent-glow); } body.skin-5 .sx-dispo__chips .sx-dispo__jour, body.skin-5 .sx-dispo__frise .sx-dispo__jour { background: var(--sx-bg-2); } body.skin-5 .sx-dispo__pt.is-on { box-shadow: 0 0 8px var(--sx-accent); } body.skin-5 .sx-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), body.skin-5 .sx-form select, body.skin-5 .sx-form textarea { background-color: var(--sx-bg); border-color: var(--sx-line-strong); } body.skin-5 .sx-form__msg { background: var(--sx-bg-3); } body.skin-5 .sx-form__msg--err { background: #3a1a1e; color: #ffb3b3; } body.skin-5 .sx-pager__list a, body.skin-5 .sx-pager__list span { background: var(--sx-bg-2); border-color: var(--sx-line-strong); } body.skin-5 .sx-footer { border-top: 1px solid var(--sx-accent-line); box-shadow: 0 -1px 24px var(--sx-accent-glow); } body.skin-5 .sx-mobilebar { box-shadow: 0 0 0 1px var(--sx-accent), 0 0 24px var(--sx-accent-glow); } body.skin-5 .sx-popup__box, body.skin-5 .sx-consent__box { box-shadow: 0 0 0 1px var(--sx-accent-line), 0 0 40px var(--sx-accent-glow); } /* ================================================================ 6 — GAZETTE (petites annonces) */ body.skin-6 { --sx-bg: #f7f4ee; --sx-bg-2: #fffdf8; --sx-bg-3: #efe9dd; --sx-ink: #201d19; --sx-ink-2: #4a443c; --sx-ink-3: #6b6459; --sx-line: #d9d1c3; --sx-line-strong: #a89e8d; --sx-radius: 2px; --sx-radius-s: 2px; --sx-btn-r: 2px; --sx-font: "Segoe UI", "Helvetica Neue", Arial, sans-serif; --sx-font-head: Georgia, "Times New Roman", serif; --sx-font-meta: "Consolas", "Courier New", monospace; --sx-wrap: 1240px; --sx-shadow: none; --sx-shadow-hover: none; --sx-photo-r: 0; --sx-header-bg: #fffdf8; --sx-footer-bg: #fffdf8; --sx-footer-ink: #4a443c; --sx-footer-h: #201d19; } body.skin-6 { font-size: 15px; } body.skin-6 .sx-header { border-bottom: 3px double var(--sx-ink); } body.skin-6 .sx-logo { font-size: 1.35rem; font-family: var(--sx-font-head); } body.skin-6 .sx-logo__mark { display: none; } body.skin-6 .sx-btn { border-radius: 2px; text-transform: uppercase; font-size: .8rem; letter-spacing: .06em; } body.skin-6 .sx-btn--big { font-size: .9rem; } body.skin-6 .sx-btn--main { box-shadow: none; } body.skin-6 .sx-btn--ghost { border-color: var(--sx-ink); color: var(--sx-ink); } @media (min-width: 900px) { body.skin-6 .sx-header__inner { grid-template-columns: auto 1fr auto; grid-template-areas: "logo actions actions" "nav nav nav"; padding-top: 10px; row-gap: 4px; } body.skin-6 .sx-logo { grid-area: logo; font-size: 1.9rem; } body.skin-6 .sx-header__actions { grid-area: actions; justify-content: flex-end; } body.skin-6 .sx-nav { grid-area: nav; border-top: 1px solid var(--sx-ink); } body.skin-6 .sx-nav__list { justify-content: space-between; gap: 0; } body.skin-6 .sx-nav__list li { flex: 1; text-align: center; border-right: 1px solid var(--sx-line); } body.skin-6 .sx-nav__list li:last-child { border-right: 0; } body.skin-6 .sx-nav__list a { border-radius: 0; font-variant: small-caps; text-transform: lowercase; font-size: 1rem; letter-spacing: .05em; padding: 6px 4px; } body.skin-6 .sx-nav__list a:hover { background: var(--sx-bg-3); text-decoration: none; } body.skin-6 .sx-nav__item.is-on a { background: var(--sx-ink); color: #fff; } } body.skin-6 .sx-section { padding: 18px 0; } body.skin-6 .sx-section__h, body.skin-6 .sx-tags__h, body.skin-6 .sx-regions__h, body.skin-6 .sx-membres__h, body.skin-6 .sx-side__h { font-family: var(--sx-font); font-variant: small-caps; text-transform: lowercase; letter-spacing: .08em; font-size: 1.05rem; background: var(--sx-ink); color: #fff; padding: 3px 10px; display: block; width: 100%; margin-bottom: 10px; } body.skin-6 .sx-section__head { border: 0; padding: 0; display: block; } body.skin-6 .sx-section__head .sx-section__h { margin-bottom: 6px; } body.skin-6 .sx-section__lien { font-family: var(--sx-font-meta); font-size: .8rem; } body.skin-6 .sx-hero { background: var(--sx-bg-2); color: var(--sx-ink); border-bottom: 3px double var(--sx-ink); } body.skin-6 .sx-hero__img { display: none; } body.skin-6 .sx-hero__inner { padding-top: 22px; padding-bottom: 20px; } body.skin-6 .sx-hero__kicker { font-family: var(--sx-font-meta); opacity: 1; color: var(--sx-ink-3); } body.skin-6 .sx-hero__h1 { font-size: clamp(1.6rem, 4vw, 2.6rem); max-width: none; } body.skin-6 .sx-hero__intro { opacity: 1; color: var(--sx-ink-2); } body.skin-6 .sx-hero .sx-btn--ghost { color: var(--sx-ink); border-color: var(--sx-ink); } body.skin-6 .sx-hero__chiffres { font-family: var(--sx-font-meta); opacity: 1; color: var(--sx-ink-3); } body.skin-6 .sx-hero--split .sx-hero__inner { gap: 20px; } body.skin-6 .sx-signup-card { border: 1px solid var(--sx-ink); box-shadow: none; padding: 16px; } body.skin-6 .sx-entete { background: var(--sx-bg-2); border-bottom: 3px double var(--sx-ink); } /* gazette : encadrés denses, 4 colonnes, photo en vignette à gauche */ body.skin-6 .sx-grid { gap: 10px; } @media (min-width: 640px) { body.skin-6 .sx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { body.skin-6 .sx-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } body.skin-6 .sx-grid--2 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } body.skin-6 .sx-card { grid-template-areas: "who who" "media title" "media extrait" "foot foot"; grid-template-columns: 72px 1fr; grid-template-rows: auto auto 1fr auto; gap: 0 10px; border: 1px solid var(--sx-ink); border-radius: 0; padding: 8px 10px 6px; box-shadow: 3px 3px 0 var(--sx-line); } body.skin-6 .sx-card__media { width: 72px; height: 72px; aspect-ratio: auto; border-radius: 0; border: 1px solid var(--sx-line-strong); } body.skin-6 .sx-card__who { padding: 0 0 6px; margin-bottom: 6px; border-bottom: 1px dotted var(--sx-line-strong); font-family: var(--sx-font-meta); font-size: .74rem; } body.skin-6 .sx-card__pseudo { font-family: var(--sx-font); font-size: .9rem; } body.skin-6 .sx-card__new { position: static; border-radius: 0; padding: 0 .4em; font-size: .65rem; } body.skin-6 .sx-card__title { margin: 0 0 2px; font-size: .98rem; font-family: var(--sx-font-head); } body.skin-6 .sx-card__extrait { margin: 0; font-size: .85rem; -webkit-line-clamp: 4; } body.skin-6 .sx-card__foot { padding: 6px 0 0; margin-top: 6px; border-top: 1px dotted var(--sx-line-strong); } body.skin-6 .sx-card__metas { font-size: .74rem; } body.skin-6 .sx-card__contact { min-height: 30px; padding: .2em .6em; font-size: .72rem; } body.skin-6 .sx-card--sans-photo .sx-card__media { height: 72px; } body.skin-6 .sx-tags__list { gap: 4px 0; display: block; columns: 2; column-gap: 24px; } @media (min-width: 640px) { body.skin-6 .sx-tags__list { columns: 3; } } @media (min-width: 1000px) { body.skin-6 .sx-tags__list { columns: 5; } body.skin-6 .sx-duo .sx-tags__list, body.skin-6 .sx-side__bloc .sx-tags__list { columns: 2; } } body.skin-6 .sx-tags__item { break-inside: avoid; } body.skin-6 .sx-tag { display: flex; justify-content: space-between; border: 0; border-bottom: 1px dotted var(--sx-line-strong); border-radius: 0; background: none; padding: .3em 0; font-size: .9rem; } body.skin-6 .sx-tag::before { content: "›"; margin-right: .4em; color: var(--sx-accent); } body.skin-6 .sx-tags--bar .sx-tags__list { columns: auto; display: flex; flex-wrap: wrap; gap: 4px 14px; border: 1px solid var(--sx-ink); padding: 6px 10px; } body.skin-6 .sx-tags--bar .sx-tag { border: 0; padding: 0; display: inline-flex; } body.skin-6 .sx-tagline .sx-tag { border: 1px solid var(--sx-line-strong); padding: .2em .6em; display: inline-flex; } body.skin-6 .sx-tagline .sx-tag::before { content: none; } body.skin-6 .sx-tags--nuage .sx-tag, body.skin-6 .sx-tags--nuage [data-poids] .sx-tag { font-size: .9rem; font-weight: 400; color: var(--sx-ink); } body.skin-6 .sx-regions { background: var(--sx-bg-2); border: 1px solid var(--sx-ink); margin: 0 var(--sx-gutter); padding: 12px 0; } body.skin-6 .sx-regions__item a { border-bottom: 1px dotted var(--sx-line-strong); font-size: .9rem; padding: .3em 0; } body.skin-6 .sx-regions__list { columns: 2; } @media (min-width: 640px) { body.skin-6 .sx-regions__list { columns: 4; } } @media (min-width: 1000px) { body.skin-6 .sx-regions__list { columns: 6; } } body.skin-6 .sx-articles__item { border: 1px solid var(--sx-ink); border-radius: 0; box-shadow: 3px 3px 0 var(--sx-line); grid-template-columns: 90px 1fr; grid-template-rows: none; } body.skin-6 .sx-articles__photo { aspect-ratio: 1; height: 100%; } body.skin-6 .sx-articles__h { font-size: 1rem; } body.skin-6 .sx-membres__list { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px 4px; } body.skin-6 .sx-membres__photo { width: 52px; height: 52px; border-radius: 0; box-shadow: none; border: 1px solid var(--sx-ink); } body.skin-6 .sx-membres__nom, body.skin-6 .sx-membres__ville { font-size: .72rem; } body.skin-6 .sx-etapes__item { border: 1px solid var(--sx-ink); border-radius: 0; box-shadow: 3px 3px 0 var(--sx-line); } body.skin-6 .sx-etapes__ico { border-radius: 0; background: var(--sx-ink); color: #fff; } body.skin-6 .sx-side__bloc { border: 1px solid var(--sx-ink); border-radius: 0; padding: 0 10px 10px; box-shadow: 3px 3px 0 var(--sx-line); } body.skin-6 .sx-side__h { margin: 0 -10px 8px; width: auto; } body.skin-6 .sx-side__list li a { border-bottom-style: dotted; font-size: .9rem; } body.skin-6 .sx-pager__list a, body.skin-6 .sx-pager__list span { border-radius: 0; border-color: var(--sx-ink); font-family: var(--sx-font-meta); } body.skin-6 .sx-fiche__h1 { font-family: var(--sx-font-head); } body.skin-6 .sx-fiche__who { font-family: var(--sx-font-meta); font-size: .8rem; } body.skin-6 .sx-fiche__photo { border: 1px solid var(--sx-ink); } body.skin-6 .sx-like { border-radius: 0; border-color: var(--sx-ink); color: var(--sx-ink); } body.skin-6 .sx-cta { border: 1px solid var(--sx-ink); border-radius: 0; background: var(--sx-bg-2); box-shadow: 3px 3px 0 var(--sx-line); } body.skin-6 .sx-dispo__h, body.skin-6 .sx-h2, body.skin-6 .sx-h3 { font-family: var(--sx-font); font-variant: small-caps; text-transform: lowercase; letter-spacing: .08em; } body.skin-6 .sx-dispo__chips .sx-dispo__jour, body.skin-6 .sx-dispo__frise .sx-dispo__jour { border-radius: 0; border-color: var(--sx-line-strong); } body.skin-6 .sx-chip { border-radius: 0; font-family: var(--sx-font-meta); font-size: .78rem; } body.skin-6 .sx-form__group { border-radius: 0; border-color: var(--sx-ink); } body.skin-6 .sx-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), body.skin-6 .sx-form select, body.skin-6 .sx-form textarea { border-radius: 0; border-color: var(--sx-line-strong); } body.skin-6 .sx-footer { border-top: 3px double var(--sx-ink); margin-top: 24px; } body.skin-6 .sx-footer__inner { padding-top: 22px; padding-bottom: 16px; gap: 16px; } body.skin-6 .sx-footer__h { font-variant: small-caps; text-transform: lowercase; letter-spacing: .08em; font-size: .95rem; border-bottom: 1px solid var(--sx-ink); } body.skin-6 .sx-footer__list { font-size: .85rem; } body.skin-6 .sx-footer__tail { border-top: 1px solid var(--sx-ink); } body.skin-6 .sx-footer__tail-inner { font-family: var(--sx-font-meta); font-size: .75rem; } body.skin-6 .sx-footer__logo { font-family: var(--sx-font-head); } body.skin-6 .sx-mobilebar { border-radius: 0; left: 0; right: 0; bottom: 0; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; } /* ================================================================ dispositions de fiche (sx-fiche-N sur , tirées par site) */ /* 2 — bandeau photo pleine largeur : la photo centrée sur un fond accent sombre, identité dessous */ .sx-fiche-2 .sx-fiche { grid-template-areas: "media" "head" "corps"; grid-template-columns: 1fr; } .sx-fiche-2 .sx-fiche__media { position: relative; border-radius: var(--sx-radius); overflow: hidden; background: linear-gradient(135deg, var(--sx-accent-ink), color-mix(in srgb, var(--sx-accent) 40%, #000)); } .sx-fiche-2 .sx-fiche__photo { max-width: none; border-radius: 0; background: none; display: flex; justify-content: center; align-items: center; height: 300px; } .sx-fiche-2 .sx-fiche__photo img { width: auto; height: 100%; max-width: 100%; object-fit: contain; } .sx-fiche-2 .sx-fiche__thumbs { position: absolute; right: 10px; bottom: 10px; margin: 0; } .sx-fiche-2 .sx-fiche__thumbs img { border: 2px solid #fff; } @media (min-width: 900px) { .sx-fiche-2 .sx-fiche { grid-template-areas: "media" "head" "corps"; grid-template-columns: 1fr; } .sx-fiche-2 .sx-fiche__photo { height: 340px; } } /* 3 — colonne photo + CTA collante à droite, corps à gauche, colonne latérale en bandeau dessous */ .sx-fiche-3 .sx-fiche-layout { grid-template-columns: 1fr; } .sx-fiche-3 .sx-fiche__aside { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .sx-fiche-3 .sx-fiche__aside .sx-side__bloc { margin: 0; } @media (min-width: 900px) { .sx-fiche-3 .sx-fiche { grid-template-areas: "head media" "corps media"; grid-template-columns: minmax(0, 1fr) 340px; column-gap: 32px; } .sx-fiche-3 .sx-fiche__media { position: sticky; top: calc(var(--sx-header-h) + 16px); } .sx-fiche-3 .sx-fiche__photo { max-width: 340px; } }