#header-sticky-ad { z-index: 100000; } /* Fond ivoire uniforme sur la page d'accueil et les pages de liste par catégorie (body.cn-bg-ivory, posé conditionnellement dans base.html.twig). !important nécessaire pour passer au-dessus du style inline sur (background-color: #F5F4EF), qui reste la valeur par défaut de tout le reste du site. Réutilise la variable --cn-bg-ivory déjà utilisée par .homepage-refresh, plutôt qu'une nouvelle couleur codée en dur, pour une continuité totale avec le header et les sections d'annonces. */ body.cn-bg-ivory { background-color: var(--cn-bg-ivory, #f7f2e8) !important; } .tp-login-right { border: 1px solid var(--tp-border-1); background-color: white; } body { color: black; } /* Empêche le geste "page précédente" à deux doigts (Chrome/macOS) de se déclencher quand on survole un carrousel catégorie et qu'on dépasse son début — le JS (home.js, attachHoverScroll) intercepte déjà chaque événement wheel du geste, mais Chrome peut malgré tout enclencher la navigation native sur les tout premiers ticks avant leur reconnaissance comme geste horizontal. Scopé à la homepage (seule page avec des carrousels) plutôt qu'au site entier, pour ne pas désactiver ce geste de navigation là où il n'entre pas en conflit avec quoi que ce soit. */ body.cn-homepage-bg { overscroll-behavior-x: none; } .multiple-items div { vertical-align: middle; display: flex; justify-content: center; align-items: center; } .text-grey { color: rgba(0, 0, 0, 0.1); } .ad-swiper-pictures img { width: 100%; } .tp-btn-home:hover { color: white !important; background-color: black !important; } #filter-canvas { padding: 0px; left: -100%; background-color: white; /*right:inherit;*/ } #filter-canvas.opened { left: 0; -webkit-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86); -moz-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition-duration: 0.6s; } #filter-close-btn { color: black; z-index: 99999; top: 15px; right: 15px; } .tp-btn-home { z-index: 1; } .ts-dropdown { z-index: 1000 !important; } .ts-dropdown-content { max-height: 240px; overflow-y: scroll; scrollbar-width: auto; } .ts-dropdown-content::-webkit-scrollbar { width: 10px; } .ts-dropdown-content::-webkit-scrollbar-thumb { background-color: #c2b8a3; border-radius: 6px; } .ts-dropdown-content::-webkit-scrollbar-track { background-color: #f5f4ef; } .has-items .ts-control > input { width: 0px; height: 0px; } .profile__wrap::after { position: absolute; content: ""; top: 0; left: -40px; height: 100%; width: 0px; background-color: var(--tp-border-1); } .tp-btn-border-sm i { font-size: 1em; } .tp-btn-border-sm { font-size: 1em !important; } .profile-container { border-radius: 14px; border: 1px solid var(--tp-border-1); } .tp-store-contact-icon > span { font-size: 14px; height: 40px; width: 40px; line-height: 35px; border-radius: 50%; display: inline-block; text-align: center; margin-right: 15px; border: 1px solid black; } .tp-store-input-box > button { color: var(--tp-common-white); background-color: black; } .form-check-input:checked { background-color: black; border-color: black; } .form-check { display: block; min-height: 1.5rem; padding-left: 0; margin-bottom: 0; } #city-select { z-index: 10; width: 200px; } #city-select-ts-dropdown { max-height: 250px !important; } #home { background-color: transparent !important; } .tp-category-2-content { margin-left: auto; margin-right: auto; left: 0 !important; right: 0 !important; text-align: center; } .tp-category-2-item { margin-bottom: 20px; } .tp-category-2-thumb-2 { border-radius: 14px; position: relative; overflow: hidden; } .tp-category-2-thumb-2 img { width: 100%; border-radius: 14px; transition: 1.3s all ease; } .tp-category-2-thumb-2::after { position: absolute; content: ""; top: 0; left: 0; height: 100%; width: 100%; border-radius: 14px; opacity: 0.6; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%); } .tp-brand-item { border-radius: 14px; transition: 0.3s; margin-bottom: 20px; border: 0px; border: 1px solid var(--tp-border-1); } .tp-brand-title { padding: 20px; } .tp-brand-item:hover > .brand-redirections { display: inline-block !important; padding: 10px; } .tp-brand-item:hover > .tp-brand-title { display: none !important; } .tp-hero-tab ul li button::after { background-color: black; } .sidebar__search input { width: 100%; height: 54px; line-height: 54px; background: white; border: 1px solid black; text-transform: capitalize; outline: none; padding-right: 70px; } .back-to-top-btn { background-color: #A51E16; } .tp-fea-ads-item { margin-bottom: 20px; } .tp-btn-border { text-transform: none; height: 40px; line-height: 35px; padding: 0 20px; color: white; border-radius: 15px; background-color: black; border: 2px solid black; } .tp-btn-border-sm { height: 30px; line-height: 30px; font-size: 0.8em; padding: 0 20px; color: white; background-color: black; border: 2px solid black; border-radius: 10px; } .tp-btn-border:hover, .tp-btn-border-sm:hover { color: black; background-color: white; border: 2px solid black; } /* Flèches de navigation des 6 rangées catégorie de l'accueil (une seule classe partagée posée dans templates/home/_category_row.html.twig, plutôt que d'énumérer chaque {swiperKey}-category-prev/next). 500 reste sous le header sticky (999 effectif) et très en dessous des modales (1055) et de l'offcanvas de filtres (999999) — juste au-dessus des cartes/photos du carrousel (swiper : 1) et du bouton favori (20). */ .cn-category-arrow { z-index: 500; } .tp-category-2-arrow-box span { background-color: #A51E16 !important; color: white !important; } .tp-category-2-arrow-box button:hover span { background-color: #86150F !important; color: white !important; } .tp-fea-ads-2-price span { color: black; } .tp-fea-ads-2-title { height: 75px; overflow: hidden; } .tp-btn-border { padding: 0 20px; } .tp-category-2-title:hover::after { width: 50%; right: auto; left: auto; } .tp-section-title { font-weight: 200; } .tp-section-subtitle { font-weight: 800; } .tp-category-2-title::after { content: ""; position: absolute; bottom: 0%; right: auto; left: auto; height: 1px; width: 0; background-color: var(--tp-common-white); transition: 0.7s; display: inline-block; } .tp-section-subtitle { color: black; } .star-active { color: #FFD700 !important; } .star-hover { cursor: pointer; /* color: #FFD700 !important; */ color: #F07B42 !important; } .rate-star, .star { stroke: black; } .text-theme { color: #F07B42 !important; /*color: #FFD700 !important;*/ } .tp-brand-thumb { height: 100px; line-height: 100px; } .ls-1 { letter-spacing: 2.8px; } .breadcrumb__list span { font-size: 10px; } .tp-fea-ads-2-content { margin-bottom: 5px; display: flex; flex-direction: column; /* Pas de height:100% ni de min-height fixe : la carte suit sa hauteur de contenu naturelle. Avec un titre en une ligne (ellipsis) et les mêmes champs renseignés d'une carte à l'autre, les cartes d'une même rangée se retrouvent déjà à la même hauteur sans avoir besoin de l'imposer, et sans laisser de vide en bas. */ /* Espacement unique entre titre/sous-titre/specs/prix/séparateur/pied de carte : remplace une pile de margins individuelles qui s'additionnaient et créaient trop de vide vertical entre chaque ligne. */ gap: 4px; } /* Le thème (main.css) fixe .tp-fea-ads-title à 18px + 9px de padding-bottom : hérité de l'ancienne maquette, ça ajoute un vide important sous le titre de la carte compacte. On resserre pour coller à l'échelle des autres lignes ; l'espacement vient maintenant uniquement du gap du conteneur parent. nowrap/ellipsis : un titre long ne doit jamais passer sur 2 lignes, sous peine de casser la hauteur uniforme calculée pour la carte. */ .tp-fea-ads-title { padding-bottom: 0; margin-bottom: 0 !important; font-size: 0.94rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tp-fea-ads-specs { display: flex; flex-wrap: wrap; gap: 2px 6px; color: #6c757d; font-size: 0.7rem; margin: 0; } .tp-fea-ads-specs span { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; } /* Prix de la carte annonce en noir plutôt qu'en orange ou en rouge (la classe .text-orange reste inchangée : utilisée ailleurs sur le site). */ .tp-fea-ads-2-price { color: var(--cn-text-dark, #171717) !important; } .tp-fea-ads-price-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .tp-fea-ads-price-drop { color: #1a9c4b; margin-left: 4px; display: inline-flex; align-items: center; vertical-align: -2px; } .tp-fea-ads-price-drop svg { width: 15px; height: 15px; fill: currentColor !important; } /* Le prix (et sa flèche) passe en vert quand l'annonce vient de baisser. */ .tp-fea-ads-2-price:has(.tp-fea-ads-price-drop), .fw-bold.text-orange:has(.tp-fea-ads-price-drop), .cn-mobile-ad-price:has(.tp-fea-ads-price-drop) { color: #1a9c4b !important; } .tp-fea-ads-type { background-color: #F5F4EF; border-radius: 5px; padding: 2px 8px; font-size: 0.68rem; font-weight: 700; color: #171717; white-space: nowrap; } .tp-fea-ads-divider { border-top: 1px solid #e4e0d8; margin: 0; } .tp-fea-ads-footer { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding-top: 0; } .tp-fea-ads-seller { display: flex; flex-direction: row; align-items: center; gap: 6px; min-width: 0; max-width: 100%; } .tp-fea-ads-seller strong { font-size: 0.78rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; } .tp-fea-ads-location { display: inline-flex; align-items: center; gap: 3px; color: #6c757d; font-size: 0.74rem; white-space: nowrap; flex: none; } .tp-fea-ads-date { color: #6c757d; font-size: 0.72rem; white-space: nowrap; flex: none; } /*//HEADER*/ .product__details-info > ul > li:nth-child(2n) { background-color: transparent !important; } a.tp-btn-theme { color: black !important; } a.tp-btn-theme:hover { color: white !important; } .tp-category-border { padding-top: 30px; padding-bottom: 0px; border-top: 1px solid var(--tp-border-2); } .tp-hero-input-wrap .ts-wrapper { max-width: 200px !important; } .tp-login-right { padding: 0px; padding-bottom: 50px; } .tp-btn-black { text-transform: none; } .tp-btn-black:hover { color: black; } .tp-hero-tab ul li button.active { background-color: rgb(244, 244, 247); } .tp-hero-input-box input { border-radius: 14px; } .tp-hero-content-wrap .tp-hero-input-wrap { background-color: rgb(244, 244, 247);; } .tp-hero-input-wrap { background-color: rgb(244, 244, 247); } .tp-hero-input-box input { background-color: white; } .tp-hero-content-wrap { boder: 5px solid rgb(244, 244, 247); border-radius: 0px 10px 10px 10px; box-shadow: none; background-color: rgb(244, 244, 247); } .tp-btn-theme { color: white; text-transform: none !important; height: 40px; line-height: 40px; } .tp-btn-theme:hover { color: white; border: 1px solid white; } .tp-btn-black { text-transform: none; } .tp-btn-transparent { text-transform: none; border: 2px solid white; color: white; font-weight: bold; background-color: transparent; height: 50px; line-height: 50px; padding: 0 30px; overflow: hidden; display: inline-block; font-weight: 600; font-size: 14px; border-radius: 25px; position: relative; z-index: 9; transition: all 0.3s ease-in-out; } .tp-btn-transparent:hover { background-color: black; color: white; } .tp-btn-black:hover { color: black; } .tp-category-title { font-size: 13px; } .tp-list-details-nav-wrap { position: relative; bottom: 0px; margin-top: 20px; } .tp-list-details-nav-thumb { display: flex !important; /*max-height: 150px;*/ width: 100% } .tp-category-thumb { flex: 0 0 auto; margin-right: 8px; } .nextArrowBtn { position: absolute; z-index: 1000; top: 50%; right: 0; color: black; } .prevArrowBtn { position: absolute; z-index: 1000; top: 50%; left: 0; color: black; } .city-label { font-size: 10px; display: inline-block; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; vertical-align: top; } .tp-listing-product-info > span { text-transform: none !important; } button { text-transform: none !important; } .tp-footer-list ul li { float: none; width: 100%; list-style-type: none; margin-bottom: 12px; } #sidebar-search .tp-filter-widget-title { font-size: 0.9rem; margin-top: 15px; margin-bottom: 10px; margin-left: 0px; margin-top: 0px; } input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="url"], textarea { padding-left: 0.75rem; } .home-logo-category { /*border: 2px solid;*/ /*border-radius: 100%;*/ width: 25px; height: 25px; padding: 3px; } .list-logo-category { /*border: 2px solid;*/ /*border-radius: 100%;*/ width: 25px; height: 25px; padding: 3px; } .logo-category { /*border: 2px solid;*/ /*border-radius: 100%;*/ /*width: 25px;*/ /*height: 25px;*/ padding: 3px; } .logo-sidebar-category { border: 2px solid; border-radius: 100%; width: 25px; height: 25px; padding: 3px; } ::selection { background: var(--tp-common-black); color: var(--tp-common-white); text-shadow: none; } .noUi-connect { /* background-color: #FFD700 !important;*/ background-color: #F07B42 !important; } .custom-btn-black-sm { background-color: var(--tp-common-black); color: var(--tp-common-white); height: 30px; line-height: 30px; padding: 0 16px; max-width: 100%; overflow: hidden; white-space: nowrap; display: inline-block; font-weight: 600; font-size: 10px; text-transform: capitalize; border-radius: 25px; position: relative; z-index: 9; transition: all 0.3s ease-in-out; } .fs-7 { font-size: 0.75rem !important } .fs-8 { font-size: 0.50rem !important } .badge { padding: 10px 10px; border-radius: 30px; background-color: black; } .tp-login-textarea textarea { height: 200px !important; } #city-select-ts-dropdown { max-height: 150px; } .tag { background-color: #F00; } .tp-tag { padding: 5px 10px; border-radius: 10px; color: white; background-color: black; } .ts-control { height: 50px !important; border-radius: 14px !important; flex-wrap: nowrap; } .tp-list-text span i { color: black; text-decoration: underline 5px var(--tp-theme-1); } .back-arrow { width: 40px; z-index: 1000; color: black; left: 30px; top: 30px; padding: 11px; border-radius: 10px; background-color: white; border: 1px solid grey; } .ts-control .item { width: auto; white-space: nowrap; } .ts-control input { height: 30px; } .tp-hero-input-box { max-width: 300px; } :root { /* --tp-theme-1: #FFD700 !important;*/ --tp-theme-1: #A51E16 !important; } .tp-hero-title span { color: black; text-decoration: underline 5px var(--tp-theme-1); } .fc-primary { color: var(--tp-theme-1) !important; } .tp-category-2-icon { padding-bottom: 0px; } .ads-Listing__wrap { margin-top: inherit !important; } .tp-fea-ads-thumb img { position: relative; z-index: -5; } .ad-badge { position: absolute; top: -20px; right: 15px; padding: 0px 10px; } .tp-category-wrap .tp-category-item-wrap { color: white; background-color: transparent; border: 1px solid white; min-width: 0px; } .tp-category-item-wrap { border-radius: 15px; min-width: 0px; padding: 6px 18px 6px 10px; } /* CHAT */ .chat-input-wrap { padding-top: 20px; margin: 20px; } .chat-list-content p { font-size: 12px; } .chat-icon { padding-right: 10px; } .chat-list-content-wrap { padding: 10px; } .chat-meta-box { position: relative; } .list-box { padding-left: 20px; padding-right: 20px; margin-bottom: 40px; } .chat-list-wrap { max-height: 500px; padding: 0px; } .tp-category-2-title { height: 40px; display: flex; align-items: center; justify-content: center; } .sidebar__search input { text-transform: initial; } .tp-category-main { margin-bottom: 10px; } .mentions h1 { font-size: 2em; } .mentions h2 { font-size: 1.5em; } .mentions p { font-size: 1em; } .chat__date { position: absolute; right: 0; top: -14px; } .ad-title { height: 50px; font-size: 16px; } .ad-text { height: 115px; } .tp-fea-ads-2-icon-2 span { width: 25px; height: 25px; font-size: 12px; line-height: inherit; background-color: #FFD700; } .tp-fea-ads-2-icon-2 { width: 25px; height: 25px; } .tp-fea-ads-thumb-box-small { width: 120px; border-radius: 14px; } .tp-fea-ads-thumb-box-small img { border-radius: 14px; } .tp-fea-ads-2-icon-3 { position: absolute; top: 5px; left: 5px; } .slick-arrow { cursor: pointer; } /* Mini-carte annonce en haut d'un fil de messagerie : rappelle de quelle annonce parle la conversation (courant sur Leboncoin/Vinted). */ .cn-chat-ad-context { display: flex; align-items: center; gap: 10px; padding: 10px 20px; border-bottom: 1px solid #eee; text-decoration: none; color: inherit; background-color: #fafaf8; } .cn-chat-ad-context:hover { background-color: #f0efe9; } .cn-chat-ad-context img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; flex-shrink: 0; } .cn-chat-ad-context-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; } .cn-chat-ad-context-title { font-size: 0.85rem; font-weight: 600; color: #212121; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cn-chat-ad-context-price { font-size: 0.8rem; font-weight: 700; color: var(--cn-text-dark, #171717); } /* Petite étiquette au-dessus d'un message qui porte sur une annonce précise : évite qu'une même conversation mélangeant plusieurs annonces (ex: un contact qui écrit d'abord pour une annonce, puis pour une autre) ne fasse perdre le fil de "quelle annonce concerne quel message". */ .cn-chat-msg-ad-tag { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; padding: 3px 10px 3px 4px; border-radius: 999px; background-color: #fafaf8; border: 1px solid #eee; text-decoration: none; color: #6b6b6b; font-size: 0.72rem; max-width: 100%; } .cn-chat-msg-ad-tag:hover { background-color: #f0efe9; color: #212121; } .cn-chat-msg-ad-tag img { width: 20px; height: 20px; object-fit: cover; border-radius: 50%; flex-shrink: 0; } .cn-chat-msg-ad-tag span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Formulaire "Compléter votre annonce" (étape 4 du tunnel) : champs plus étroits et centrés, comme demandé, plutôt qu'étalés sur toute la largeur. Classe dédiée (pas .ads-Listing__form/.car-component, partagées avec d'autres étapes du tunnel qui ont besoin de toute la largeur). */ .cn-complete-form { max-width: 640px; margin-left: auto; margin-right: auto; } /* Le champ "Conduite" a un label manuel (avec icône) au-dessus du composant FormGroup partagé, qui génère lui-même toujours un