/* ============================================================================ annoncesphp — skins.css : six habillages, tirés par hachage du domaine (site.config.json → skin 0) ou imposés (skin 1..6). Le porte .skin-N. Chaque skin (1) redéfinit les variables --an-* de site.css et (2) change quelques dispositions : header, colonne latérale, pagination, pied de page, fiche d'annonce. Toutes les palettes se construisent AUTOUR de --an-accent (la couleur du site) par color-mix() : aucun skin n'impose sa propre teinte. 1 éditorial clair serif, liste à filets, nav centrée, sidebar droite, fiche photo à gauche + CTA collante 2 sombre profond surfaces sombres, logo centré sur deux rangées, sidebar gauche, fiche en bandeau photo 3 journal papier, petites capitales, encadrés, masthead centré, colonnes, footer à colonnes réglées 4 moderne arrondi fond teinté, chips, nav en pilule, sidebar droite, footer en carte, fiche en bandeau 5 brutaliste bordures épaisses, ombres dures, sidebar en bandeau sous la liste, footer noir 6 doux pastel cartes flottantes, ombres larges, header en pilule flottante, sidebar gauche ============================================================================ */ /* ============================================================ 1 — éditorial clair */ .skin-1 { --an-font-head: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; --an-font-meta: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --an-bg: #fcfbf9; --an-bg-2: #fff; --an-bg-3: #f3f1ed; --an-ink: #171514; --an-ink-2: #4a4744; --an-ink-3: #6e6964; --an-line: #e6e2dc; --an-line-strong: #c9c3ba; --an-radius: 6px; --an-radius-s: 4px; --an-radius-btn: 4px; --an-shadow: none; --an-shadow-hover: none; --an-header-bg: #fff; --an-footer-bg: #fcfbf9; --an-gate-bg: rgba(25, 21, 20, .9); --an-photo-w: 160px; } .skin-1 h1, .skin-1 h2 { font-weight: 700; letter-spacing: 0; } .skin-1 .an-titre__h1 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.7rem); } .skin-1 .an-titre { border-bottom: 1px solid var(--an-line-strong); padding-bottom: 1rem; } .skin-1 .an-header { border-bottom: 2px solid var(--an-ink); } .skin-1 .an-logo { font-size: 1.35rem; letter-spacing: -.01em; } .skin-1 .an-logo__mark { border-radius: 4px; } /* liste à filets : cartes sans cadre, un trait entre chaque */ .skin-1 .an-list { gap: 0; } .skin-1 .an-card { border: 0; border-bottom: 1px solid var(--an-line-strong); border-radius: 0; background: transparent; padding: .9rem 0; } .skin-1 .an-card:hover { transform: none; background: var(--an-bg-2); } .skin-1 .an-card__media { border-radius: 4px; overflow: hidden; } .skin-1 .an-card__body { padding: 0 .3rem 0 0; } .skin-1 .an-card__title { font-size: 1.15rem; font-weight: 700; } .skin-1 .an-card__cat { font-family: var(--an-font-head); font-style: italic; text-transform: none; letter-spacing: 0; font-size: .88rem; font-weight: 400; } .skin-1 .an-card__extrait { font-family: var(--an-font-head); font-size: .95rem; } .skin-1 .an-list--grid { gap: 0 2rem; } .skin-1 .an-cats__link { border-radius: 4px; } .skin-1 .an-bloc__h { border-top: 2px solid var(--an-ink); padding-top: .5rem; } .skin-1 .an-bloc__head { margin-bottom: 1.2rem; } .skin-1 .an-hero__signup { border-color: var(--an-ink); border-width: 1px; } .skin-1 .an-hero__kicker { background: none; padding: 0; border-bottom: 1px solid var(--an-accent); border-radius: 0; } .skin-1 .an-side__bloc { border: 0; border-top: 2px solid var(--an-ink); border-radius: 0; padding: .8rem 0 0; background: transparent; } .skin-1 .an-side__h { color: var(--an-ink); font-family: var(--an-font-head); text-transform: none; letter-spacing: 0; font-size: 1.05rem; font-weight: 700; } /* pagination texte */ .skin-1 .an-pager a, .skin-1 .an-pager span[aria-current] { border: 0; background: none; border-radius: 0; font-family: var(--an-font-head); font-size: 1.05rem; } .skin-1 .an-pager a:hover { text-decoration: underline; } .skin-1 .an-pager__cur { background: none !important; color: var(--an-accent-ink) !important; border-bottom: 2px solid var(--an-accent) !important; border-radius: 0; } .skin-1 .an-pager { border-top: 1px solid var(--an-line-strong); padding-top: .8rem; } /* fiche */ .skin-1 .an-fiche__h1 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem); } .skin-1 .an-fiche__texte { font-family: var(--an-font-head); font-size: 1.12rem; } .skin-1 .an-fiche__contact { border-color: var(--an-ink); } .skin-1 .an-fiche__partenaires { background: none; border-left-color: var(--an-ink); font-family: var(--an-font-head); font-style: italic; font-weight: 400; } .skin-1 .an-gallery__stage { border-radius: 4px; } /* footer : filet épais + colonnes */ .skin-1 .an-footer { border-top: 3px double var(--an-ink); } .skin-1 .an-footer__h { color: var(--an-ink); font-family: var(--an-font-head); text-transform: none; letter-spacing: 0; font-size: 1rem; } .skin-1 .an-footer__logo { font-size: 1.4rem; } .skin-1 .an-gate__box, .skin-1 .an-popup__box { border-radius: 4px; border-top: 5px solid var(--an-accent); } .skin-1 .an-gate__h, .skin-1 .an-popup__h { font-weight: 700; } @media (min-width: 900px) { .skin-1 .an-header__inner { display: grid; grid-template-columns: auto 1fr auto; } .skin-1 .an-nav__list { justify-content: center; gap: .1rem .6rem; } .skin-1 .an-nav__list a { border-radius: 0; border-bottom: 2px solid transparent; padding-left: .2em; padding-right: .2em; } .skin-1 .an-nav__list a:hover { background: none; border-bottom-color: var(--an-accent); } .skin-1 .an-list--grid .an-card { grid-template-columns: 110px minmax(0, 1fr); } .skin-1 .an-hero { gap: 2rem; } } /* ============================================================ 2 — sombre profond */ .skin-2 { --an-accent-ink: color-mix(in srgb, var(--an-accent) 62%, #fff); --an-accent-soft: color-mix(in srgb, var(--an-accent) 18%, #1a1820); --an-accent-line: color-mix(in srgb, var(--an-accent) 45%, #1a1820); --an-bg: color-mix(in srgb, var(--an-accent) 5%, #121116); --an-bg-2: color-mix(in srgb, var(--an-accent) 7%, #1c1a22); --an-bg-3: color-mix(in srgb, var(--an-accent) 9%, #26232d); --an-ink: #f3f0f5; --an-ink-2: #c6c1cc; --an-ink-3: #8f8997; --an-line: #2f2c37; --an-line-strong: #4a4654; --an-radius: 14px; --an-radius-s: 8px; --an-radius-btn: 10px; --an-shadow: 0 1px 0 rgba(255, 255, 255, .03), 0 8px 24px -16px rgba(0, 0, 0, .8); --an-shadow-hover: 0 14px 34px -14px rgba(0, 0, 0, .9), 0 0 0 1px var(--an-accent-line); --an-header-bg: #141319; --an-header-ink: #f3f0f5; --an-header-line: #2a2731; --an-footer-bg: #0f0e12; --an-footer-ink: #e6e2ea; --an-footer-ink-2: #8f8997; --an-gate-bg: rgba(0, 0, 0, .86); --an-gate-box: #1c1a22; } .skin-2 a:hover { color: var(--an-accent-ink); } .skin-2 .an-btn--second { background: transparent; color: var(--an-accent-ink); border-color: var(--an-accent-line); } .skin-2 .an-btn--second:hover { background: var(--an-accent-soft); border-color: var(--an-accent); } .skin-2 .an-btn--ghost { color: var(--an-ink-2); } .skin-2 .an-btn--main:hover { background: var(--an-accent-ink); border-color: var(--an-accent-ink); color: #111; } .skin-2 input, .skin-2 select, .skin-2 textarea { background-color: #121116; border-color: var(--an-line-strong); color: var(--an-ink); } .skin-2 select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 5l4 4 4-4' fill='none' stroke='%23bbb' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); } .skin-2 .an-form__radios--seg span { background: #121116; } .skin-2 .an-form__msg { background: #3a3218; border-color: #6b5c1e; color: #f7e9b0; } .skin-2 .an-form__msg--err { background: #3d1a1a; border-color: #7a2c2c; color: #ffd0d0; } .skin-2 .an-form__msg--info { background: #17303d; border-color: #2a5670; color: #cfe9fa; } .skin-2 .an-form__err { color: #ff8a8a; } .skin-2 .an-card__cat { background: var(--an-accent-soft); color: var(--an-accent-ink); padding: .2em .6em; border-radius: 6px; } .skin-2 .an-card__media { background: #0f0e12; } .skin-2 .an-hero__signup { background: linear-gradient(160deg, var(--an-accent-soft), var(--an-bg-2) 60%); border-color: var(--an-accent-line); } .skin-2 .an-hero__kicker { background: var(--an-accent); color: var(--an-on-accent); } .skin-2 .an-deposer-cta { background: linear-gradient(135deg, var(--an-accent-soft), var(--an-bg-2)); } .skin-2 .an-cats__link .an-count { background: #121116; } .skin-2 .an-chip { background: var(--an-bg-3); border-color: var(--an-line-strong); } .skin-2 .an-fiche__partenaires { background: var(--an-accent-soft); } .skin-2 .an-gallery__stage { border-color: var(--an-line-strong); } .skin-2 .an-popup__close { background: var(--an-bg-3); color: var(--an-ink-2); } .skin-2 .an-popup__box, .skin-2 .an-gate__box { border: 1px solid var(--an-line-strong); } .skin-2 .an-gate__art-fond { fill: var(--an-accent); } .skin-2 .an-fiche__bar, .skin-2 .an-bar { background: #141319; border-top-color: var(--an-line-strong); } .skin-2 .an-footer { border-top: 1px solid var(--an-line); } .skin-2 .an-footer__bottom { border-top-color: var(--an-line); } .skin-2 .an-skip:focus { background: #000; color: #fff; } /* pagination en pilules */ .skin-2 .an-pager a, .skin-2 .an-pager span[aria-current] { border-radius: 999px; background: var(--an-bg-2); border-color: var(--an-line-strong); } /* header : logo centré, nav sur une seconde rangée */ @media (min-width: 900px) { .skin-2 { --an-header-h: 112px; } .skin-2 .an-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "gauche logo cta" "nav nav nav"; padding-top: .7rem; padding-bottom: 0; row-gap: .4rem; } .skin-2 .an-logo { grid-area: logo; font-size: 1.5rem; max-width: 100%; } .skin-2 .an-header__cta { grid-area: cta; justify-self: end; margin: 0; } .skin-2 .an-nav { grid-area: nav; border-top: 1px solid var(--an-header-line); } .skin-2 .an-nav__list { justify-content: center; gap: .1rem .4rem; padding: .35rem 0; } .skin-2 .an-nav__list a:hover { background: var(--an-accent-soft); } /* sidebar à gauche */ .skin-2 .an-layout { grid-template-columns: var(--an-side-w) minmax(0, 1fr); } .skin-2 .an-layout .an-side { order: -1; } .skin-2 .an-layout--annonce { grid-template-columns: minmax(0, 1fr); } .skin-2 .an-layout--annonce .an-side { order: 0; } /* fiche : la disposition (photo à gauche / bandeau / contact en bandeau) est tirée par site : body.an-fiche-N dans site.css */ .skin-2 .an-gallery__thumb { width: 80px; height: 80px; } .skin-2 .an-fiche--sans-photo .an-gallery__main { object-fit: contain; } /* footer : marque en bandeau, listes en dessous */ .skin-2 .an-footer__inner { grid-template-columns: repeat(3, 1fr); } .skin-2 .an-footer__brand { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 1rem 2rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--an-line); } .skin-2 .an-footer__logo, .skin-2 .an-footer__apropos, .skin-2 .an-footer__membres, .skin-2 .an-footer__actions { margin: 0; } .skin-2 .an-footer__apropos { grid-column: 1; } .skin-2 .an-footer__logo { grid-column: 1; } } /* ============================================================ 3 — journal d'annonces */ .skin-3 { --an-font: "Charter", "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif; --an-font-head: Georgia, "Times New Roman", Times, serif; --an-font-meta: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --an-bg: #f6f1e6; --an-bg-2: #fffdf7; --an-bg-3: #eee7d7; --an-ink: #1e1a14; --an-ink-2: #4b4438; --an-ink-3: #726a5a; --an-line: #d8cfbb; --an-line-strong: #a89c82; --an-radius: 0; --an-radius-s: 0; --an-radius-btn: 0; --an-shadow: none; --an-shadow-hover: none; --an-header-bg: #fffdf7; --an-footer-bg: #f6f1e6; --an-gate-bg: rgba(30, 26, 20, .9); --an-gate-box: #fffdf7; --an-photo-w: 120px; } .skin-3 body, .skin-3 { font-size: 16.5px; } .skin-3 h1, .skin-3 h2, .skin-3 h3 { font-weight: 700; letter-spacing: 0; } .skin-3 .an-titre__h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); text-align: center; } .skin-3 .an-titre__intro { text-align: center; margin: 0 auto; font-style: italic; } .skin-3 .an-titre { border-top: 3px double var(--an-ink); border-bottom: 1px solid var(--an-ink); padding: 1rem 0; } .skin-3 .an-crumbs__list { justify-content: center; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; } .skin-3 .an-bloc__h { font-variant: small-caps; letter-spacing: .05em; font-size: 1.25rem; } .skin-3 .an-bloc__head { border-bottom: 1px solid var(--an-ink); padding-bottom: .35rem; } .skin-3 .an-bloc__lien { font-family: var(--an-font-meta); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; } .skin-3 .an-count { font-size: .72rem; } .skin-3 .an-header { border-bottom: 3px double var(--an-ink); } .skin-3 .an-logo { font-size: 1.4rem; font-weight: 700; } .skin-3 .an-logo__mark { border-radius: 0; } .skin-3 .an-btn { text-transform: uppercase; letter-spacing: .08em; font-size: .9rem; font-family: var(--an-font-meta); } .skin-3 .an-btn--big { font-size: 1rem; } .skin-3 .an-hero__signup, .skin-3 .an-hero__moteur { border: 1px solid var(--an-ink); box-shadow: inset 0 0 0 4px var(--an-bg-2), inset 0 0 0 5px var(--an-line-strong); padding: 1.8rem 1.6rem; } .skin-3 .an-hero__kicker { background: none; border: 1px solid var(--an-ink); color: var(--an-ink); font-family: var(--an-font-meta); } .skin-3 .an-hero__compteurs strong { font-family: var(--an-font-meta); font-size: 1.2rem; } /* cartes : encadrés compacts, deux colonnes sur desktop */ .skin-3 .an-card { border: 1px solid var(--an-line-strong); background: var(--an-bg-2); padding: .5rem; gap: .7rem; } .skin-3 .an-card:hover { transform: none; border-color: var(--an-ink); } .skin-3 .an-card__media { border: 1px solid var(--an-line-strong); } .skin-3 .an-card__body { padding: 0 .2rem 0 0; } .skin-3 .an-card__title { font-size: 1.08rem; } .skin-3 .an-card__cat { font-size: .68rem; } .skin-3 .an-card__extrait { font-size: .92rem; } .skin-3 .an-card__new { border-radius: 0; } .skin-3 .an-card__photos { border-radius: 0; } .skin-3 .an-cats__link { border-color: var(--an-line-strong); font-family: var(--an-font-head); } .skin-3 .an-cats__link .an-count { background: transparent; border: 1px solid var(--an-line-strong); } .skin-3 .an-geo li { border-bottom-style: dotted; } .skin-3 .an-etapes__item, .skin-3 .an-reassurance__item, .skin-3 .an-faq__item { border-color: var(--an-line-strong); } .skin-3 .an-etapes__ico, .skin-3 .an-reassurance__ico { border-radius: 0; background: var(--an-ink); color: var(--an-bg-2); } .skin-3 .an-deposer-cta { background: var(--an-bg-2); border: 1px solid var(--an-ink); box-shadow: inset 0 0 0 4px var(--an-bg-2), inset 0 0 0 5px var(--an-line-strong); } .skin-3 .an-side__bloc { border: 1px solid var(--an-ink); padding: .9rem 1rem; } .skin-3 .an-side__h { font-family: var(--an-font-head); font-variant: small-caps; letter-spacing: .06em; color: var(--an-ink); font-size: 1rem; border-bottom: 1px solid var(--an-ink); padding-bottom: .3rem; } .skin-3 .an-side__list li { border-bottom-style: dotted; } .skin-3 .an-filters { border-color: var(--an-line-strong); } .skin-3 .an-filters__field span { font-family: var(--an-font-meta); } .skin-3 .an-list__count { font-family: var(--an-font-meta); font-size: .85rem; } /* pagination : cases monospace */ .skin-3 .an-pager a, .skin-3 .an-pager span[aria-current] { border: 1px solid var(--an-ink); background: var(--an-bg-2); font-family: var(--an-font-meta); } .skin-3 .an-pager__cur { background: var(--an-ink) !important; border-color: var(--an-ink) !important; color: var(--an-bg-2) !important; } /* fiche : photo montée sous passe-partout, CTA encadré */ .skin-3 .an-fiche__h1 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); } .skin-3 .an-gallery__stage { border: 1px solid var(--an-line-strong); padding: 6px; background: var(--an-bg-2); } .skin-3 .an-gallery__thumb { border: 1px solid var(--an-line-strong); padding: 2px; } .skin-3 .an-gallery__thumb.is-active { border-color: var(--an-ink); } .skin-3 .an-fiche__contact { border: 1px solid var(--an-ink); box-shadow: inset 0 0 0 4px var(--an-bg-2), inset 0 0 0 5px var(--an-line-strong); padding: 1.4rem; } .skin-3 .an-fiche__texte { font-size: 1.08rem; } .skin-3 .an-fiche__texte p:first-child::first-letter { font-size: 3.1em; float: left; line-height: .85; padding: .08em .1em 0 0; font-family: var(--an-font-head); font-weight: 700; color: var(--an-accent-ink); } .skin-3 .an-fiche__partenaires { background: none; border: 1px solid var(--an-line-strong); border-left: 4px solid var(--an-ink); font-style: italic; font-weight: 400; } .skin-3 .an-fiche__physique > div { border-color: var(--an-line-strong); } .skin-3 .an-fiche__h2 { color: var(--an-ink); font-family: var(--an-font-head); font-variant: small-caps; text-transform: none; letter-spacing: .06em; font-size: 1rem; } .skin-3 .an-chip { border-radius: 0; border-color: var(--an-line-strong); font-family: var(--an-font-meta); font-size: .8rem; } .skin-3 .an-reponse { border-color: var(--an-line-strong); } .skin-3 fieldset { border-color: var(--an-line-strong); } .skin-3 .an-form__radios--seg span { border-radius: 0; font-family: var(--an-font-meta); font-size: .85rem; } /* footer : colonnes réglées, une ligne en bas */ .skin-3 .an-footer { border-top: 3px double var(--an-ink); } .skin-3 .an-footer__h { font-family: var(--an-font-head); font-variant: small-caps; text-transform: none; letter-spacing: .06em; color: var(--an-ink); font-size: 1rem; border-bottom: 1px solid var(--an-ink); padding-bottom: .3rem; } .skin-3 .an-footer__logo { font-size: 1.5rem; } .skin-3 .an-footer__bottom { border-top: 1px solid var(--an-ink); font-family: var(--an-font-meta); font-size: .72rem; } .skin-3 .an-gate__box, .skin-3 .an-popup__box { border: 1px solid var(--an-ink); box-shadow: inset 0 0 0 5px var(--an-gate-box), inset 0 0 0 6px var(--an-line-strong); } .skin-3 .an-gate__logo, .skin-3 .an-popup__marque { font-family: var(--an-font-head); font-variant: small-caps; text-transform: none; letter-spacing: .1em; font-size: 1rem; color: var(--an-ink); } .skin-3 .an-gate__art-fond { fill: var(--an-ink); } .skin-3 .an-fiche__bar, .skin-3 .an-bar { border-top: 3px double var(--an-ink); } @media (min-width: 900px) { .skin-3 { --an-header-h: 118px; } .skin-3 .an-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "gauche logo cta" "nav nav nav"; padding-top: .8rem; padding-bottom: 0; row-gap: .5rem; align-items: center; } .skin-3 .an-logo { grid-area: logo; justify-self: center; font-size: 2rem; letter-spacing: -.01em; max-width: 100%; } .skin-3 .an-nav { grid-area: nav; border-top: 1px solid var(--an-ink); } .skin-3 .an-header__cta { grid-area: cta; justify-self: end; margin: 0; } .skin-3 .an-nav__list { justify-content: center; gap: 0; padding: .3rem 0; } .skin-3 .an-nav__list a { border-radius: 0; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-family: var(--an-font-meta); font-weight: 600; padding: .55em .8em; border-right: 1px solid var(--an-line); } .skin-3 .an-nav__list li:last-child a { border-right: 0; } .skin-3 .an-nav__list a:hover { background: var(--an-ink); color: var(--an-bg-2); } .skin-3 .an-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; } .skin-3 .an-list--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .skin-3 .an-list--grid .an-card { grid-template-columns: 110px minmax(0, 1fr); } .skin-3 .an-card { grid-template-columns: 120px minmax(0, 1fr); } .skin-3 .an-card__foot { display: none; } .skin-3 .an-card__extrait { -webkit-line-clamp: 3; } .skin-3 .an-footer__inner { gap: 0; } .skin-3 .an-footer__col { padding: 0 1.4rem; border-left: 1px solid var(--an-line-strong); } .skin-3 .an-footer__col:first-child { padding-left: 0; border-left: 0; } } @media (min-width: 1100px) { .skin-3 .an-list--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ============================================================ 4 — moderne arrondi */ .skin-4 { --an-bg: color-mix(in srgb, var(--an-accent) 6%, #f6f6fa); --an-bg-2: #fff; --an-bg-3: color-mix(in srgb, var(--an-accent) 6%, #f1f1f6); --an-ink: #1b1b26; --an-ink-2: #50505f; --an-ink-3: #6b6a78; --an-line: color-mix(in srgb, var(--an-accent) 8%, #e8e8ef); --an-line-strong: color-mix(in srgb, var(--an-accent) 16%, #d4d4de); --an-radius: 20px; --an-radius-s: 12px; --an-radius-btn: 999px; --an-shadow: 0 2px 10px -6px color-mix(in srgb, var(--an-accent) 30%, rgba(0, 0, 0, .3)); --an-shadow-hover: 0 14px 30px -14px color-mix(in srgb, var(--an-accent) 45%, rgba(0, 0, 0, .4)); --an-header-bg: rgba(255, 255, 255, .86); --an-header-line: transparent; --an-footer-bg: transparent; --an-gate-bg: color-mix(in srgb, var(--an-accent) 40%, rgba(20, 16, 30, .85)); --an-photo-w: 150px; } .skin-4 .an-header { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .skin-4 .an-logo__mark { border-radius: 12px; } .skin-4 .an-burger { border-radius: 999px; } .skin-4 .an-nav__list a { border-radius: 999px; } .skin-4 input, .skin-4 select, .skin-4 textarea { border-radius: 14px; background-color: var(--an-bg-3); border-color: transparent; padding: .8em 1em; } .skin-4 input:focus, .skin-4 select:focus, .skin-4 textarea:focus { background-color: #fff; } .skin-4 fieldset { border: 0; box-shadow: var(--an-shadow); padding: 1.3em 1.3em .6em; } .skin-4 .an-form__radios--seg { box-shadow: none; padding: 0; background: none; } .skin-4 .an-hero__signup, .skin-4 .an-hero__moteur, .skin-4 .an-side__bloc, .skin-4 .an-filters, .skin-4 .an-reponse, .skin-4 .an-fiche__contact, .skin-4 .an-etapes__item, .skin-4 .an-reassurance__item, .skin-4 .an-faq__item, .skin-4 .an-legal, .skin-4 .an-contact, .skin-4 .an-tchat, .skin-4 .an-merci { border: 0; } .skin-4 .an-hero__signup { background: linear-gradient(150deg, var(--an-accent-soft), #fff 55%); } .skin-4 .an-card { border: 0; padding: .55rem; gap: .9rem; } .skin-4 .an-card__media { border-radius: 14px; overflow: hidden; } .skin-4 .an-card__body { padding: .25rem .4rem .25rem 0; } .skin-4 .an-card__cat { background: var(--an-accent-soft); color: var(--an-accent-ink); padding: .25em .7em; border-radius: 999px; font-size: .68rem; } .skin-4 .an-card__new, .skin-4 .an-card__photos { border-radius: 999px; left: 8px; } .skin-4 .an-card__new { top: 8px; } .skin-4 .an-card__photos { bottom: 8px; } .skin-4 .an-card__who { gap: .3em .45em; } .skin-4 .an-card__lieu { background: var(--an-bg-3); border-radius: 999px; padding: .05em .6em; } /* catégories en chips */ .skin-4 .an-cats { display: flex; flex-wrap: wrap; gap: .5rem; } .skin-4 .an-cats__link { border-radius: 999px; border: 0; padding: .55em 1em .55em 1.1em; min-height: 44px; } .skin-4 .an-cats__link .an-count { background: var(--an-accent-soft); color: var(--an-accent-ink); } .skin-4 .an-etapes__ico, .skin-4 .an-reassurance__ico { border-radius: 999px; background: var(--an-accent); color: var(--an-on-accent); } .skin-4 .an-geo li { border-bottom: 0; padding: .2em 0; } .skin-4 .an-geo a { background: var(--an-bg-2); border-radius: 999px; padding: .15em .8em; flex: 1; box-shadow: var(--an-shadow); } .skin-4 .an-geo .an-count { align-self: center; } .skin-4 .an-deposer-cta { border: 0; background: linear-gradient(135deg, var(--an-accent), var(--an-accent-ink)); color: var(--an-on-accent); } .skin-4 .an-deposer-cta p, .skin-4 .an-deposer-cta .an-bloc__h, .skin-4 .an-deposer-cta__t { color: var(--an-on-accent); } .skin-4 .an-deposer-cta .an-btn--main { background: #fff; color: var(--an-accent-ink); border-color: #fff; } .skin-4 .an-side__h { color: var(--an-accent-ink); } .skin-4 .an-side__list li { border-bottom: 0; } .skin-4 .an-side__list a { padding: .1em .6em; border-radius: 999px; } .skin-4 .an-side__list a:hover { background: var(--an-accent-soft); } .skin-4 .an-side__cur a { background: var(--an-accent); color: var(--an-on-accent); } /* pagination en chips */ .skin-4 .an-pager a, .skin-4 .an-pager span[aria-current] { border-radius: 999px; border: 0; box-shadow: var(--an-shadow); } .skin-4 .an-pager a:hover { background: var(--an-accent-soft); } /* fiche : bandeau photo arrondi + colonne CTA */ .skin-4 .an-gallery__stage { border: 0; border-radius: 24px; } .skin-4 .an-gallery__thumb { border-radius: 12px; } .skin-4 .an-fiche__partenaires { border-radius: 999px; border-left: 0; padding: .6em 1.2em; } .skin-4 .an-fiche__physique > div { border: 0; border-radius: 14px; box-shadow: var(--an-shadow); } .skin-4 .an-chip { border: 0; background: var(--an-accent-soft); color: var(--an-accent-ink); } .skin-4 .an-fiche__contact { background: linear-gradient(160deg, var(--an-accent-soft), #fff 60%); } .skin-4 .an-fiche__bar, .skin-4 .an-bar { border-top: 0; border-radius: 22px 22px 0 0; box-shadow: 0 -10px 30px -16px rgba(0, 0, 0, .35); } /* footer en carte */ .skin-4 .an-footer { border-top: 0; padding-top: 0; } .skin-4 .an-footer__inner { background: #fff; border-radius: 28px; padding: 2rem 1.5rem; box-shadow: var(--an-shadow); } .skin-4 .an-footer__bottom { border-top: 0; text-align: center; } .skin-4 .an-footer__bottom p { margin-left: auto; margin-right: auto; } .skin-4 .an-gate__box, .skin-4 .an-popup__box { border-radius: 28px; } .skin-4 .an-popup__close { background: var(--an-accent-soft); color: var(--an-accent-ink); } .skin-4 .an-form__radios--seg span { border: 0; background: var(--an-bg-3); } @media (min-width: 900px) { .skin-4 .an-header__inner { gap: 1.2rem; } .skin-4 .an-nav { display: flex; justify-content: center; } .skin-4 .an-nav__list { background: var(--an-bg-3); border-radius: 999px; padding: .3rem; gap: .15rem; } .skin-4 .an-nav__list a { padding: .4em .75em; font-size: .86rem; } .skin-4 .an-nav__list a:hover { background: #fff; box-shadow: var(--an-shadow); color: var(--an-accent-ink); } .skin-4 .an-gallery__thumb { width: 84px; height: 84px; } .skin-4 .an-fiche--sans-photo .an-gallery__main { object-fit: contain; } .skin-4 .an-footer__inner { padding: 2.6rem 2.4rem; } } /* ============================================================ 5 — brutaliste net */ .skin-5 { --an-font-meta: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --an-accent-soft: color-mix(in srgb, var(--an-accent) 14%, #fff); --an-bg: #fff; --an-bg-2: #fff; --an-bg-3: #f1f1f1; --an-ink: #000; --an-ink-2: #222; --an-ink-3: #555; --an-line: #000; --an-line-strong: #000; --an-radius: 0; --an-radius-s: 0; --an-radius-btn: 0; --an-border-w: 3px; --an-shadow: 5px 5px 0 #000; --an-shadow-hover: 8px 8px 0 var(--an-accent); --an-header-bg: #fff; --an-header-line: #000; --an-footer-bg: #000; --an-footer-ink: #fff; --an-footer-ink-2: #b5b5b5; --an-gate-bg: color-mix(in srgb, var(--an-accent) 85%, #000); --an-photo-w: 160px; } .skin-5 h1, .skin-5 h2 { font-weight: 900; letter-spacing: -.02em; text-transform: uppercase; } .skin-5 h3 { font-weight: 800; } .skin-5 .an-titre__h1 { font-size: clamp(1.9rem, 1.2rem + 3vw, 3.4rem); line-height: 1.05; } .skin-5 .an-header { border-bottom: 4px solid #000; } .skin-5 .an-logo { font-size: 1.15rem; text-transform: uppercase; font-weight: 900; letter-spacing: -.02em; max-width: 76%; } .skin-5 .an-logo__mark { border-radius: 0; border: 3px solid #000; } .skin-5 .an-burger { border: 3px solid #000; } .skin-5 .an-btn { border-width: 3px; border-color: #000; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; box-shadow: 4px 4px 0 #000; } .skin-5 .an-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #000; } .skin-5 .an-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #000; } .skin-5 .an-btn--main { background: var(--an-accent); color: var(--an-on-accent); } .skin-5 .an-btn--main:hover { background: var(--an-accent-ink); border-color: #000; } .skin-5 .an-btn--second { color: #000; background: #fff; } .skin-5 .an-btn--second:hover { background: var(--an-accent-soft); color: #000; } .skin-5 .an-btn--ghost { box-shadow: none; border-color: #000; color: #000; } .skin-5 input, .skin-5 select, .skin-5 textarea { border: 3px solid #000; } .skin-5 input:focus, .skin-5 select:focus, .skin-5 textarea:focus { outline-offset: 3px; box-shadow: 4px 4px 0 var(--an-accent); } .skin-5 fieldset { border: 3px solid #000; box-shadow: var(--an-shadow); } .skin-5 legend { text-transform: uppercase; font-weight: 900; background: #000; color: #fff; padding: .1em .6em; } .skin-5 .an-crumbs__list { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; } .skin-5 .an-count { color: #000; font-weight: 700; } .skin-5 .an-badge, .skin-5 .an-card__new, .skin-5 .an-card__photos, .skin-5 .an-hero__kicker, .skin-5 .an-chip, .skin-5 .an-form__radios--seg span, .skin-5 .an-form__previews img, .skin-5 .an-gallery__thumb { border-radius: 0; } .skin-5 .an-card__new { background: #000; color: #fff; border: 2px solid #fff; } .skin-5 .an-card__photos { background: #fff; color: #000; border: 2px solid #000; } .skin-5 .an-card { gap: 0; } .skin-5 .an-card__media { border-right: 3px solid #000; } .skin-5 .an-card__body { padding: .7rem .9rem; } .skin-5 .an-card__title { font-size: 1.1rem; font-weight: 900; } .skin-5 .an-card__cat { background: #000; color: #fff; padding: .2em .5em; } .skin-5 .an-card:hover { transform: translate(-2px, -2px); } .skin-5 .an-list { gap: 1.2rem; } .skin-5 .an-cats { gap: .8rem; } .skin-5 .an-cats__link { border: 3px solid #000; font-weight: 800; } .skin-5 .an-cats__link:hover { transform: translate(-2px, -2px); } .skin-5 .an-cats__link .an-count { background: #000; color: #fff; border-radius: 0; } .skin-5 .an-hero__kicker { background: #000; color: #fff; } .skin-5 .an-hero__signup { box-shadow: 8px 8px 0 var(--an-accent); } .skin-5 .an-hero__compteurs strong { font-family: var(--an-font-meta); } .skin-5 .an-etapes__ico, .skin-5 .an-reassurance__ico { border-radius: 0; background: #000; color: #fff; } .skin-5 .an-etapes, .skin-5 .an-reassurance { gap: 1.2rem; } .skin-5 .an-geo li { border-bottom: 2px solid #000; } .skin-5 .an-bloc__h { display: inline-block; background: #000; color: #fff; padding: .1em .5em; } .skin-5 .an-bloc__h .an-count { color: #fff; } .skin-5 .an-deposer-cta { background: var(--an-accent); color: #fff; border: 3px solid #000; box-shadow: var(--an-shadow); } .skin-5 .an-deposer-cta p, .skin-5 .an-deposer-cta__t { color: #fff; } .skin-5 .an-deposer-cta .an-bloc__h { background: #fff; color: #000; } .skin-5 .an-deposer-cta .an-btn--main { background: #000; color: #fff; } .skin-5 .an-side__bloc { border: 3px solid #000; } .skin-5 .an-side__h { color: #000; font-weight: 900; } .skin-5 .an-side__list li { border-bottom: 1px solid #000; } .skin-5 .an-filters { gap: 1rem; } .skin-5 .an-list__count { font-family: var(--an-font-meta); } .skin-5 .an-vide { border: 3px dashed #000; } /* pagination : cases pleines */ .skin-5 .an-pager { gap: .5rem; } .skin-5 .an-pager a, .skin-5 .an-pager span[aria-current] { border: 3px solid #000; font-family: var(--an-font-meta); font-weight: 700; box-shadow: 3px 3px 0 #000; } .skin-5 .an-pager a:hover { background: #000; color: #fff; } .skin-5 .an-pager__cur { box-shadow: 3px 3px 0 #000 !important; border-color: #000 !important; } /* fiche */ .skin-5 .an-fiche__cat { background: #000; color: #fff; padding: .2em .6em; } .skin-5 .an-fiche__h1 { font-size: clamp(1.7rem, 1.1rem + 2.6vw, 3rem); } .skin-5 .an-gallery__stage { border: 3px solid #000; box-shadow: var(--an-shadow); } .skin-5 .an-gallery__thumb { border: 3px solid #000; } .skin-5 .an-gallery__thumb.is-active { border-color: var(--an-accent); } .skin-5 .an-fiche__contact { border: 3px solid #000; box-shadow: 8px 8px 0 var(--an-accent); } .skin-5 .an-fiche__partenaires { border: 3px solid #000; border-left-width: 12px; background: #fff; } .skin-5 .an-fiche__physique > div { border: 2px solid #000; } .skin-5 .an-chip { border: 2px solid #000; background: #fff; font-family: var(--an-font-meta); font-size: .8rem; } .skin-5 .an-fiche__h2 { color: #000; font-weight: 900; } .skin-5 .an-reponse { border: 3px solid #000; box-shadow: var(--an-shadow); } .skin-5 .an-form__radios--seg input:checked + span { background: #000; border-color: #000; } .skin-5 .an-form__radios--seg span { border: 2px solid #000; } .skin-5 .an-fiche__bar, .skin-5 .an-bar { border-top: 4px solid #000; } /* footer noir, filet accent */ .skin-5 .an-footer { border-top: 8px solid var(--an-accent); } .skin-5 .an-footer__h { color: #fff; font-weight: 900; } .skin-5 .an-footer a:hover { color: var(--an-accent-soft); } .skin-5 .an-footer .an-count { color: #b5b5b5; } .skin-5 .an-footer__bottom { border-top: 1px solid #444; } .skin-5 .an-footer .an-logo__mark { border-color: #fff; } .skin-5 .an-footer .an-btn--main { border-color: #fff; box-shadow: 4px 4px 0 #fff; } .skin-5 .an-gate__box, .skin-5 .an-popup__box { border: 4px solid #000; box-shadow: 12px 12px 0 #000; } .skin-5 .an-gate__art-fond { fill: #000; } .skin-5 .an-gate__h, .skin-5 .an-popup__h { text-transform: uppercase; } .skin-5 .an-popup__close { border: 2px solid #000; background: #fff; border-radius: 0; } .skin-5 .an-legal, .skin-5 .an-contact, .skin-5 .an-tchat, .skin-5 .an-merci { box-shadow: var(--an-shadow); } @media (min-width: 900px) { .skin-5 { --an-header-h: 118px; } .skin-5 .an-header__inner { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "logo cta" "nav nav"; padding-top: .6rem; padding-bottom: 0; row-gap: .5rem; align-items: center; } .skin-5 .an-logo { grid-area: logo; font-size: 2rem; max-width: 100%; } .skin-5 .an-header__cta { grid-area: cta; margin: 0; } .skin-5 .an-nav { grid-area: nav; border-top: 3px solid #000; padding: .5rem 0 .6rem; } .skin-5 .an-nav__list { gap: .4rem; } .skin-5 .an-nav__list a { border: 2px solid #000; border-radius: 0; text-transform: uppercase; font-size: .78rem; font-weight: 800; letter-spacing: .04em; padding: .5em .7em; } .skin-5 .an-nav__list a:hover { background: #000; color: #fff; } .skin-5 .an-nav__list .an-nav__deposer { background: var(--an-accent); color: #fff; border-color: #000; } .skin-5 .an-header__cta { box-shadow: 4px 4px 0 #000; } /* sidebar sous la liste, en bandeau à trois colonnes */ .skin-5 .an-layout { grid-template-columns: minmax(0, 1fr); } .skin-5 .an-layout .an-side { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; align-items: start; border-top: 4px solid #000; padding-top: 1.6rem; } .skin-5 .an-layout .an-side__bloc { margin: 0; } .skin-5 .an-layout--annonce .an-side { border-top: 0; padding-top: 0; } .skin-5 .an-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .skin-5 .an-card { grid-template-columns: 140px minmax(0, 1fr); } .skin-5 .an-list--grid .an-card { grid-template-columns: 120px minmax(0, 1fr); } .skin-5 .an-card__foot { display: none; } .skin-5 .an-card__extrait { -webkit-line-clamp: 3; } .skin-5 .an-fiche__grid { gap: 2.2rem; } .skin-5 .an-hero { gap: 2rem; } .skin-5 .an-footer__inner { grid-template-columns: 1.2fr 1fr 1fr 1fr; } } @media (min-width: 1100px) { .skin-5 .an-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ============================================================ 6 — doux / pastel */ .skin-6 { --an-font-head: ui-rounded, "SF Pro Rounded", "Segoe UI", "Nunito", system-ui, -apple-system, sans-serif; --an-accent-soft: color-mix(in srgb, var(--an-accent) 10%, #fff); --an-bg: color-mix(in srgb, var(--an-accent) 5%, #fbf8f6); --an-bg-2: #fffdfc; --an-bg-3: color-mix(in srgb, var(--an-accent) 7%, #f5f0ee); --an-ink: #38313d; --an-ink-2: #6a616f; --an-ink-3: #757079; --an-line: color-mix(in srgb, var(--an-accent) 10%, #ece6e4); --an-line-strong: color-mix(in srgb, var(--an-accent) 18%, #d9d1cf); --an-radius: 24px; --an-radius-s: 14px; --an-radius-btn: 16px; --an-shadow: 0 14px 34px -18px color-mix(in srgb, var(--an-accent) 38%, rgba(60, 40, 60, .6)); --an-shadow-hover: 0 24px 46px -18px color-mix(in srgb, var(--an-accent) 48%, rgba(60, 40, 60, .7)); --an-header-bg: transparent; --an-header-line: transparent; --an-footer-bg: transparent; --an-gate-bg: color-mix(in srgb, var(--an-accent) 22%, rgba(40, 28, 44, .82)); --an-photo-w: 160px; } .skin-6 h1, .skin-6 h2, .skin-6 h3 { font-weight: 800; letter-spacing: -.015em; } .skin-6 .an-header { border-bottom: 0; background: transparent; padding: .7rem .75rem 0; } .skin-6 .an-header__inner { background: var(--an-bg-2); border-radius: 999px; box-shadow: var(--an-shadow); padding: 0 .6rem 0 .9rem; min-height: 56px; } .skin-6 .an-logo__mark { border-radius: 999px; } .skin-6 .an-burger { border: 0; background: var(--an-bg-3); border-radius: 999px; } .skin-6 .an-nav { top: calc(var(--an-header-h) + .7rem); border-top: 0; background: var(--an-bg); } .skin-6 .an-nav__list a { border-radius: 14px; } .skin-6 .an-btn { box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--an-accent) 60%, transparent); } .skin-6 .an-btn--ghost { box-shadow: none; } .skin-6 .an-btn--main:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--an-accent) 70%, transparent); } .skin-6 input, .skin-6 select, .skin-6 textarea { border-radius: 16px; border-color: transparent; background-color: var(--an-bg-3); padding: .8em 1em; } .skin-6 input:focus, .skin-6 select:focus, .skin-6 textarea:focus { background-color: #fff; } .skin-6 fieldset { border: 0; box-shadow: var(--an-shadow); padding: 1.4em 1.4em .6em; } .skin-6 .an-form__radios--seg { box-shadow: none; padding: 0; background: none; } .skin-6 .an-hero__signup, .skin-6 .an-hero__moteur, .skin-6 .an-side__bloc, .skin-6 .an-filters, .skin-6 .an-reponse, .skin-6 .an-fiche__contact, .skin-6 .an-etapes__item, .skin-6 .an-reassurance__item, .skin-6 .an-faq__item, .skin-6 .an-legal, .skin-6 .an-contact, .skin-6 .an-tchat, .skin-6 .an-merci, .skin-6 .an-cats__link, .skin-6 .an-card, .skin-6 .an-fiche__physique > div { border: 0; } .skin-6 .an-hero__signup { background: radial-gradient(120% 100% at 100% 0%, var(--an-accent-soft), var(--an-bg-2) 60%); } .skin-6 .an-card { padding: .6rem; gap: .9rem; } .skin-6 .an-card:hover { transform: translateY(-4px); } .skin-6 .an-card__media { border-radius: 18px; overflow: hidden; } .skin-6 .an-card__body { padding: .3rem .4rem .3rem 0; } .skin-6 .an-card__cat { background: var(--an-accent-soft); color: var(--an-accent-ink); padding: .25em .75em; border-radius: 999px; font-size: .68rem; letter-spacing: .04em; } .skin-6 .an-card__new, .skin-6 .an-card__photos { left: 8px; } .skin-6 .an-card__new { top: 8px; } .skin-6 .an-card__photos { bottom: 8px; } .skin-6 .an-cats { gap: .8rem; } .skin-6 .an-cats__link { border-radius: 18px; padding: .9em 1.1em; } .skin-6 .an-cats__link .an-count { background: var(--an-accent-soft); color: var(--an-accent-ink); } .skin-6 .an-etapes__ico, .skin-6 .an-reassurance__ico { border-radius: 16px; background: var(--an-accent-soft); } .skin-6 .an-etapes, .skin-6 .an-reassurance { gap: 1.2rem; } .skin-6 .an-geo li { border-bottom-color: var(--an-line); } .skin-6 .an-deposer-cta { border: 0; box-shadow: var(--an-shadow); background: linear-gradient(135deg, var(--an-accent-soft), #fff); } .skin-6 .an-side__h { color: var(--an-accent-ink); letter-spacing: .06em; } .skin-6 .an-side__list li { border-bottom-color: var(--an-line); } .skin-6 .an-side__cur a { color: var(--an-accent-ink); } .skin-6 .an-vide { border: 0; box-shadow: var(--an-shadow); } /* pagination douce */ .skin-6 .an-pager a, .skin-6 .an-pager span[aria-current] { border: 0; border-radius: 14px; box-shadow: var(--an-shadow); } .skin-6 .an-pager a:hover { background: var(--an-accent-soft); } /* fiche : photo arrondie, carte de contact flottante */ .skin-6 .an-gallery__stage { border: 0; border-radius: 28px; box-shadow: var(--an-shadow); } .skin-6 .an-gallery__thumb { border-radius: 14px; } .skin-6 .an-fiche__partenaires { border-left: 0; border-radius: 16px; padding: .8em 1.2em; } .skin-6 .an-fiche__physique > div { box-shadow: var(--an-shadow); } .skin-6 .an-chip { border: 0; background: var(--an-accent-soft); color: var(--an-accent-ink); } .skin-6 .an-fiche__contact { padding: 1.5rem; } .skin-6 .an-fiche__bar, .skin-6 .an-bar { border-top: 0; border-radius: 24px 24px 0 0; box-shadow: 0 -14px 34px -18px color-mix(in srgb, var(--an-accent) 50%, rgba(0, 0, 0, .6)); } /* footer en carte centrée */ .skin-6 .an-footer { border-top: 0; padding-top: 0; } .skin-6 .an-footer__inner { background: var(--an-bg-2); border-radius: 32px; padding: 2rem 1.5rem; box-shadow: var(--an-shadow); } .skin-6 .an-footer__h { color: var(--an-accent-ink); } .skin-6 .an-footer__bottom { border-top: 0; text-align: center; } .skin-6 .an-footer__bottom p { margin-left: auto; margin-right: auto; } .skin-6 .an-gate__box, .skin-6 .an-popup__box { border-radius: 32px; } .skin-6 .an-gate__art-fond { fill: var(--an-accent); } .skin-6 .an-popup__close { background: var(--an-accent-soft); color: var(--an-accent-ink); } .skin-6 .an-form__radios--seg span { border: 0; background: var(--an-bg-3); } .skin-6 .an-form__msg { border: 0; } @media (min-width: 900px) { .skin-6 { --an-header-h: 72px; } .skin-6 .an-header { padding: .9rem 1.5rem 0; } .skin-6 .an-header__inner { padding: 0 .6rem 0 1.4rem; min-height: 62px; } .skin-6 .an-nav { display: flex; justify-content: center; background: transparent; top: auto; } .skin-6 .an-nav__list a { padding: .45em .8em; } .skin-6 .an-header__cta { border-radius: 999px; } .skin-6 .an-layout { grid-template-columns: var(--an-side-w) minmax(0, 1fr); } .skin-6 .an-layout .an-side { order: -1; } .skin-6 .an-layout--annonce { grid-template-columns: minmax(0, 1fr); } .skin-6 .an-layout--annonce .an-side { order: 0; } .skin-6 .an-list--grid { gap: 1.1rem; } .skin-6 .an-list { gap: 1.1rem; } .skin-6 .an-footer__inner { padding: 2.6rem 2.6rem; } .skin-6 .an-fiche__aside { top: calc(var(--an-header-h) + 1.6rem); } }