, pas un comme
les autres cartes (pas de bouton favori à isoler dessus, toute la carte est cliquable). */
.listing-card--locked {
display: block;
color: inherit;
text-decoration: none;
opacity: .7;
border: 2px dashed rgba(233, 217, 195, .15);
}
.listing-card--locked:hover {
opacity: 1;
color: inherit;
border-color: var(--laiton);
}
.listing-card--locked .locked-overlay {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-size: 2rem;
color: var(--muted);
background: var(--surface-alt);
}
/* Distinct de .description-preview (masqué par défaut hors de #listingResults.view-list, propre
au bascule cartes/liste de listing_list.html) : ce texte est le seul contenu explicatif de la
carte verrouillée, il doit rester visible partout où elle est incluse (profil public compris,
qui n'a pas ce conteneur). */
.listing-card--locked .locked-card-note {
font-size: .8rem;
color: var(--muted);
display: flex;
align-items: center;
gap: .35rem;
}
/* Empile les badges VIP/Premium/Exclusif en bas à gauche de la vignette (le haut est déjà
occupé par le chip de catégorie et le bouton favori) — remplace l'ancien positionnement
individuel de chaque badge, pour qu'ils puissent s'empiler proprement quand plusieurs
s'appliquent à la fois. */
.listing-card-badge-stack {
position: absolute;
bottom: .7rem;
left: .7rem;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: .35rem;
}
.listing-card-badge-stack .suspect-badge,
.listing-card-badge-stack .vip-badge,
.listing-card-badge-stack .premium-badge,
.listing-card-badge-stack .exclusive-badge,
.listing-card-badge-stack .urgent-badge,
.listing-card-badge-stack .boost-badge,
.listing-card-badge-stack .new-badge {
display: inline-flex;
align-items: center;
gap: .3rem;
font-size: .72rem;
font-weight: 700;
letter-spacing: .02em;
padding: .3rem .6rem;
border-radius: 50rem;
box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}
.listing-card-badge-stack .vip-badge {
background: linear-gradient(135deg, var(--ambre), var(--laiton));
color: var(--rideau);
}
.listing-card-badge-stack .premium-badge {
background: linear-gradient(135deg, var(--sauge), #5c6e52);
color: #fff;
}
.listing-card-badge-stack .exclusive-badge {
background: linear-gradient(135deg, #241b16, var(--rideau));
color: var(--laiton);
border: 1px solid rgba(198, 164, 97, .5);
}
.listing-card-badge-stack .urgent-badge {
background: linear-gradient(135deg, var(--rubis), var(--rubis-dark));
color: #fff;
}
/* .suspect-badge (base, plus haut) reste une pastille translucide dans le reste du site (lisible
sur un fond de page uni) ; ici, posée sur une vignette photo souvent sombre elle-même, cette
même transparence la rendait à peine visible — comme ses voisines ci-dessus, elle passe donc en
remplissage plein sur les cartes d'annonce. */
.listing-card-badge-stack .suspect-badge {
background: linear-gradient(135deg, var(--cuivre), var(--cuivre-dark));
color: #fff;
}
.listing-card-badge-stack .boost-badge {
background: linear-gradient(135deg, var(--saphir), var(--saphir-dark));
color: #fff;
}
/* Distinct du sauge déjà utilisé pour le renouvellement auto (highlight-box--green) : émeraude
plus vif pour rester lisible en petit badge sur une vignette. */
.listing-card-badge-stack .new-badge {
background: linear-gradient(135deg, var(--emeraude), var(--emeraude-dark));
color: #fff;
}
/* Classement "Top annonceurs du mois" (accounts/templates/accounts/top_advertisers.html) : rang
numéroté, or/argent/cuivre pour le podium — même vocabulaire visuel que le badge VIP (or)
ailleurs sur le site, décliné pour les rangs 2/3. */
.top-advertiser-rank {
flex: 0 0 auto;
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
background: var(--surface-alt);
color: var(--muted);
}
.top-advertiser-rank--1 { background: linear-gradient(135deg, var(--ambre), var(--laiton)); color: var(--rideau); }
.top-advertiser-rank--2 { background: linear-gradient(135deg, var(--argent), var(--argent-dark)); color: var(--rideau); }
.top-advertiser-rank--3 { background: linear-gradient(135deg, var(--cuivre), var(--cuivre-dark)); color: #fff; }
.top-advertiser-row--1 { background: linear-gradient(135deg, rgba(198, 164, 97, .14), var(--surface)); }
/* ===== Widget album privé (profil public) ===== */
.private-album-carousel {
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 0 0 2px var(--laiton), var(--shadow-sm);
}
.private-album-carousel .carousel-item img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
cursor: zoom-in;
}
.private-album-carousel .carousel-control-prev,
.private-album-carousel .carousel-control-next {
width: 2.5rem;
}
.private-album-carousel .carousel-control-prev-icon,
.private-album-carousel .carousel-control-next-icon {
width: 1.5rem;
height: 1.5rem;
background-color: rgba(23, 17, 15, .55);
border-radius: 50%;
padding: .3rem;
background-origin: content-box;
}
/* Ces contrôles se posent sur une photo, indépendamment du thème de la page : le mode sombre de
Bootstrap (data-bs-theme="dark" sur , voir templates/base.html) inverserait sinon leurs
icônes/pastilles en noir, les rendant invisibles sur la photo. */
[data-bs-theme=dark] .private-album-carousel .carousel-control-prev-icon,
[data-bs-theme=dark] .private-album-carousel .carousel-control-next-icon {
filter: none;
}
.private-album-indicators {
margin-bottom: .6rem;
}
.private-album-indicators [data-bs-target] {
width: .45rem;
height: .45rem;
border-radius: 50%;
background-color: rgba(255, 255, 255, .6);
border: none;
opacity: 1;
transition: background-color .15s ease;
}
[data-bs-theme=dark] .private-album-indicators [data-bs-target] {
background-color: rgba(255, 255, 255, .6);
}
.private-album-indicators [data-bs-target].active,
[data-bs-theme=dark] .private-album-indicators [data-bs-target].active {
background-color: var(--laiton);
}
/* ===== Widget de déblocage d'album privé — distinct des autres actions du profil (suivre,
signaler, cadeaux) : traitement doré cohérent avec le badge VIP et les indicateurs de l'album,
pour signaler un contenu premium plutôt qu'une simple action parmi d'autres. */
.unlock-widget {
text-align: center;
padding: 1.5rem 1.25rem;
border-radius: var(--radius-lg);
background: linear-gradient(160deg, #241b16, var(--surface));
border: 1px solid rgba(198, 164, 97, .35);
box-shadow: var(--shadow-sm);
}
.unlock-widget-icon {
width: 56px;
height: 56px;
margin: 0 auto .75rem;
border-radius: 50%;
background: linear-gradient(135deg, var(--ambre), var(--laiton));
color: var(--rideau);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
box-shadow: 0 6px 16px rgba(198, 164, 97, .35);
}
.unlock-widget-title {
font-weight: 700;
color: var(--ink);
margin-bottom: .35rem;
}
.unlock-widget-text {
color: var(--muted);
font-size: .85rem;
margin-bottom: 1.1rem;
}
.unlock-widget-btn {
background: linear-gradient(135deg, var(--ambre), var(--laiton));
border: none;
color: var(--rideau);
font-weight: 600;
}
.unlock-widget-btn:hover, .unlock-widget-btn:focus {
background: linear-gradient(135deg, var(--laiton), var(--laiton-dark));
color: var(--rideau);
}
.listing-card .media {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--surface-alt);
}
.listing-card .media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .35s ease;
}
.listing-card:hover .media img {
transform: scale(1.06);
}
.listing-card .media .no-image {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--brand);
font-size: 2.5rem;
}
/* ===== Carrousel photo des cartes d'annonce (grille "Annonces") — défilement manuel : flèches
et pastilles au survol de la carte, jamais automatique (voir _listing_card.html pour le
pourquoi). Le zoom au survol de .media img ci-dessus s'applique tel quel à l'image active,
sans règle propre. ===== */
.listing-card-carousel,
.listing-card-carousel .carousel-inner,
.listing-card-carousel .carousel-item {
height: 100%;
}
.listing-card-carousel .carousel-control-prev,
.listing-card-carousel .carousel-control-next {
z-index: 3;
width: 2.25rem;
opacity: 0;
transition: opacity .15s ease;
}
.listing-card:hover .listing-card-carousel .carousel-control-prev,
.listing-card:hover .listing-card-carousel .carousel-control-next {
opacity: 1;
}
.listing-card-carousel .carousel-control-prev-icon,
.listing-card-carousel .carousel-control-next-icon {
width: 1.6rem;
height: 1.6rem;
background-color: rgba(23, 17, 15, .55);
border-radius: 50%;
padding: .3rem;
background-origin: content-box;
}
/* Ces contrôles se posent sur une photo, indépendamment du thème de la page : le mode sombre de
Bootstrap (data-bs-theme="dark" sur ) inverserait sinon leurs icônes/pastilles en noir,
les rendant invisibles sur la photo — même correctif que .private-album-carousel plus haut. */
[data-bs-theme=dark] .listing-card-carousel .carousel-control-prev-icon,
[data-bs-theme=dark] .listing-card-carousel .carousel-control-next-icon {
filter: none;
}
.listing-card-carousel-indicators {
z-index: 3;
margin: 0 3.5rem .6rem;
opacity: 0;
transition: opacity .15s ease;
}
.listing-card:hover .listing-card-carousel-indicators { opacity: 1; }
.listing-card-carousel-indicators [data-bs-target],
[data-bs-theme=dark] .listing-card-carousel-indicators [data-bs-target] {
width: .4rem;
height: .4rem;
border-radius: 50%;
background-color: rgba(255, 255, 255, .6);
border: none;
opacity: 1;
margin: 0 .2rem;
}
.listing-card-carousel-indicators [data-bs-target].active,
[data-bs-theme=dark] .listing-card-carousel-indicators [data-bs-target].active {
background-color: var(--laiton);
}
/* Légende posée sur le visuel de substitution (static/img/photo-blurred.svg, désormais purement
graphique — voir listings/templates/listings/_listing_card.html et listing_detail.html) : le
texte vit ici, traduisible via {% trans %}, plutôt que gravé dans le SVG (jamais traduisible). */
.blurred-photo-caption {
position: absolute;
inset: auto 0 .6rem 0;
margin: 0 .6rem;
display: flex;
align-items: center;
justify-content: center;
gap: .35rem;
text-align: center;
color: #e2e8f0;
background: rgba(15, 23, 42, .55);
border-radius: 50rem;
padding: .25rem .7rem;
font-size: .68rem;
font-weight: 600;
}
.blurred-photo-caption--large {
inset: auto 0 1.2rem 0;
margin: 0 auto;
max-width: fit-content;
left: 0;
right: 0;
font-size: .85rem;
padding: .4rem 1rem;
}
.listing-card .category-chip {
position: absolute;
top: .7rem;
left: .7rem;
background: rgba(23, 17, 15, .72);
color: #fff;
font-size: .72rem;
font-weight: 600;
padding: .3rem .65rem;
border-radius: 50rem;
backdrop-filter: blur(2px);
}
.category-chip-extra { opacity: .8; }
.photo-count-badge {
position: absolute;
bottom: .75rem;
right: .75rem;
display: inline-flex;
align-items: center;
gap: .35rem;
background: rgba(23, 17, 15, .72);
color: #fff;
font-size: .78rem;
font-weight: 600;
padding: .35rem .7rem;
border-radius: 50rem;
backdrop-filter: blur(2px);
}
.listing-card .body {
padding: 1rem;
}
.listing-card .title {
font-weight: 600;
font-size: 1rem;
margin-bottom: .25rem;
color: var(--ink);
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.listing-card .title a {
color: inherit;
text-decoration: none;
}
.listing-card .meta {
color: var(--muted);
font-size: .82rem;
}
.listing-card .description-preview {
display: none;
}
/* ===== Bascule vue carte / vue liste (page "Annonces") =====
Le conteneur #listingResults est le seul élément stable à travers les rafraîchissements
AJAX des filtres (seul son innerHTML est remplacé) : la classe .view-list vit donc sur lui,
jamais sur ses enfants, pour survivre à chaque nouveau rendu des résultats. */
.view-toggle {
display: inline-flex;
border: 1px solid rgba(233, 217, 195, .16);
border-radius: var(--radius-md);
overflow: hidden;
}
.view-toggle-btn {
display: flex;
align-items: center;
gap: .4rem;
padding: .45rem .85rem;
background: var(--surface-gradient);
color: var(--muted);
border: none;
font-size: .85rem;
font-weight: 600;
cursor: pointer;
}
.view-toggle-btn + .view-toggle-btn { border-left: 1px solid rgba(233, 217, 195, .16); }
.view-toggle-btn.active { background: var(--brand-light); color: var(--brand); }
#listingResults.view-list .row > .col {
flex: 0 0 100%;
max-width: 100%;
}
#listingResults.view-list .listing-card {
display: flex;
flex-direction: row;
align-items: stretch;
}
#listingResults.view-list .listing-card .media {
aspect-ratio: auto;
width: 220px;
flex-shrink: 0;
}
#listingResults.view-list .listing-card .body {
flex: 1 1 auto;
min-width: 0;
}
#listingResults.view-list .listing-card .title {
-webkit-line-clamp: 2;
}
#listingResults.view-list .listing-card .description-preview {
display: -webkit-box;
color: var(--muted);
font-size: .85rem;
margin: .5rem 0 0;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (max-width: 575px) {
#listingResults.view-list .listing-card { flex-direction: column; }
#listingResults.view-list .listing-card .media { width: 100%; aspect-ratio: 16 / 9; }
}
/* ===== Boutons de contact (page d'annonce) — pilules dégradées, cohérentes avec les autres
pastilles du site (badge VIP, filter-toggle-pill) plutôt que de simples boutons Bootstrap.
Les icônes WhatsApp/Instagram/Telegram/Snapchat gardent la couleur de marque officielle de
chaque application (repère visuel immédiat) ; seul le bouton "Téléphone", sans couleur de
marque propre, reprend l'identité du site. */
.contact-links { display: flex; flex-direction: column; gap: .55rem; }
.contact-btn {
display: flex;
align-items: center;
gap: .65rem;
padding: .5rem .9rem .5rem .5rem;
border-radius: 999px;
font-weight: 700;
font-size: .92rem;
color: #fff;
text-decoration: none;
box-shadow: var(--shadow-sm);
transition: transform .15s ease, box-shadow .15s ease;
}
.contact-btn:hover {
transform: translateY(-2px);
color: #fff;
}
.contact-btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
flex-shrink: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .25);
}
.contact-btn-icon i { font-size: 1.05rem; }
.contact-btn-phone { background: linear-gradient(135deg, var(--velours), var(--bordeaux)); }
.contact-btn-phone:hover { box-shadow: 0 10px 22px rgba(124, 43, 59, .45); }
.contact-btn-whatsapp { background: linear-gradient(135deg, #3ee382, #1fae57); }
.contact-btn-whatsapp:hover { box-shadow: 0 10px 22px rgba(31, 174, 87, .35); }
.contact-btn-instagram { background: linear-gradient(135deg, #f6a145, #dd2a7b 55%, #7b3fe4); }
.contact-btn-instagram:hover { box-shadow: 0 10px 22px rgba(221, 42, 123, .35); }
.contact-btn-telegram { background: linear-gradient(135deg, #4dc0f0, #229ed9); }
.contact-btn-telegram:hover { box-shadow: 0 10px 22px rgba(34, 158, 217, .35); }
.contact-btn-snapchat { background: #fffc00; color: var(--rideau); }
.contact-btn-snapchat:hover { color: var(--rideau); box-shadow: 0 10px 22px rgba(230, 223, 0, .5); }
.contact-btn-snapchat .contact-btn-icon { background: rgba(23, 17, 15, .12); color: var(--rideau); }
/* Numéro secondaire : même forme de pilule, mais en retrait (contour) pour rester secondaire
sans rompre la cohérence visuelle avec les autres boutons de contact. */
.contact-btn-outline {
background: var(--surface-gradient);
border: 1.5px solid rgba(233, 217, 195, .16);
color: var(--ink);
box-shadow: none;
}
.contact-btn-outline .contact-btn-icon { background: var(--brand-light); color: var(--brand); }
.contact-btn-outline:hover {
border-color: var(--brand);
color: var(--ink);
box-shadow: var(--shadow-sm);
}
.contact-btn-value { font-weight: 500; opacity: .85; }
/* Bouton like */
.like-btn {
position: absolute;
top: .6rem;
right: .6rem;
width: 2.1rem;
height: 2.1rem;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, .9);
color: var(--rideau);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-sm);
z-index: 3;
transition: transform .12s ease, background .12s ease;
text-decoration: none;
}
.like-btn:hover { transform: scale(1.08); color: var(--accent); }
/* line-height:1 : sans lui l'icône hérite de l'interligne du corps de texte (1.5), qui gonfle sa
boîte verticalement bien au-delà du glyphe lui-même — .like-btn centre alors cette boîte trop
grande plutôt que le cœur, qui paraît décalé dans son cercle. */
.like-btn i { font-size: 1.05rem; line-height: 1; pointer-events: none; }
.like-btn.is-liked, .like-btn.is-liked:hover { color: var(--accent); }
.like-btn.like-btn-block {
position: static;
width: 100%;
height: auto;
border-radius: 50rem;
padding: .6rem 1rem;
background: var(--surface-gradient);
border: 1px solid var(--accent);
color: var(--accent);
font-weight: 600;
gap: .5rem;
}
.like-btn.like-btn-block:hover { transform: none; background: var(--accent); color: #fff; }
.like-btn.like-btn-block.is-liked { background: var(--accent); color: #fff; }
.like-btn.like-btn-block i { font-size: 1.1rem; }
/* Rend toute la carte cliquable sauf le bouton like */
.listing-card .stretched-link::after { z-index: 2; }
.avatar-preview {
width: 96px;
height: 96px;
object-fit: cover;
border-radius: 50%;
}
.rating-stars { color: var(--laiton); }
/* ===== Widget "laisser un avis" — étoiles + mise en avant du mode édition ===== */
.review-form-widget {
background: var(--surface-gradient);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: 1.5rem;
border-left: 4px solid var(--brand-light);
}
.review-form-widget.is-editing {
border-left-color: var(--laiton);
background: linear-gradient(160deg, #241b16, var(--surface) 65%);
}
.review-form-header {
display: flex;
align-items: flex-start;
gap: .75rem;
margin-bottom: 1.1rem;
}
.review-form-header > i {
width: 36px;
height: 36px;
flex-shrink: 0;
border-radius: 50%;
background: var(--velours);
color: var(--sable);
display: flex;
align-items: center;
justify-content: center;
font-size: .95rem;
}
.review-form-widget.is-editing .review-form-header > i {
background: linear-gradient(135deg, var(--ambre), var(--laiton));
color: var(--rideau);
}
.star-rating {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
gap: .2rem;
}
.star-rating input {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
}
.star-rating label {
cursor: pointer;
font-size: 1.9rem;
line-height: 1;
color: rgba(233, 217, 195, .18);
transition: color .1s ease;
}
.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input:checked ~ label {
color: var(--laiton);
}
.star-rating input:focus-visible + label {
outline: 2px solid var(--brand);
outline-offset: 2px;
border-radius: 4px;
}
/* ===== Espace "Mon compte" ===== */
.account-sidebar {
background: var(--surface-gradient);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
overflow: hidden;
position: sticky;
top: 1rem;
}
.account-sidebar-profile {
background: linear-gradient(135deg, var(--velours), var(--bordeaux));
color: #fff;
padding: 1.75rem 1.25rem;
text-align: center;
}
.account-sidebar-profile .avatar-preview {
border: 3px solid rgba(255, 255, 255, .5);
width: 76px;
height: 76px;
}
.account-sidebar-profile i.bi-person-circle { font-size: 4rem; line-height: 1; }
.account-sidebar-profile h5 { margin: .6rem 0 .35rem; font-weight: 700; }
.account-sidebar-profile .badge { background: rgba(255, 255, 255, .22); font-weight: 600; }
.account-sidebar-profile .verified-badge { background: rgba(255, 255, 255, .22); margin-left: .3rem; }
.account-sidebar-profile .exclusive-client-badge { background: rgba(255, 255, 255, .22); color: #fcd88f; margin-left: .3rem; }
.account-sidebar-profile .suspect-badge { background: rgba(255, 255, 255, .22); margin-left: .3rem; }
/* --- Vérification / badge "Vérifié" — sauge, couleur de confiance de la charte. --- */
.verified-badge {
display: inline-flex;
align-items: center;
gap: .3rem;
background: rgba(138, 154, 130, .16);
color: var(--sauge);
font-weight: 600;
}
.verified-badge i { font-size: .85em; }
/* --- Tag de vigilance posé par le staff (Listing.is_suspect / accounts.Profile.is_suspect) —
voir staffadmin/views.py::listing_mark_suspect / profile_mark_suspect. Cuivre plutôt que rouge
(déjà pris par "Suspendue"/"Banni") : un avertissement, pas une sanction déjà appliquée. --- */
.suspect-badge {
display: inline-flex;
align-items: center;
gap: .3rem;
background: rgba(201, 138, 82, .18);
color: var(--cuivre);
font-weight: 600;
}
.suspect-badge i { font-size: .85em; }
/* --- Badge "Réactif" (accounts.Profile.is_responsive) — calculé automatiquement, pas achetable,
voir accounts/services.py::refresh_responsiveness. Saphir pour rester distinct du "Vérifié"
(sauge) et de "Client Exclusif" (noir/or). --- */
.responsive-badge {
display: inline-flex;
align-items: center;
gap: .3rem;
background: rgba(79, 143, 186, .16);
color: var(--saphir);
font-weight: 600;
}
.responsive-badge i { font-size: .85em; }
/* --- Badge "Client Exclusif" (accounts.Profile.is_exclusive_client), visible sur le profil
public et le compte lui-même — même famille noir/or que le reste de la fonctionnalité
Exclusif (.highlight-box--dark, .plan-card-tier--exclusive, .exclusive-badge). --- */
.exclusive-client-badge {
display: inline-flex;
align-items: center;
gap: .3rem;
background: linear-gradient(135deg, #241b16, var(--rideau));
color: var(--laiton);
font-weight: 600;
}
.exclusive-client-badge i { font-size: .85em; }
.btn-exclusive-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .4rem;
background: linear-gradient(135deg, #241b16, var(--rideau));
border: 1px solid var(--laiton);
color: var(--laiton);
font-weight: 600;
border-radius: var(--radius-md);
padding: .45rem 1rem;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-exclusive-cta:hover {
background: linear-gradient(135deg, #0d0906, var(--rideau));
color: var(--sable);
border-color: var(--sable);
}
/* --- Info-bulle réutilisable (templates/_info_tooltip.html) : icône + texte au survol/focus,
sans JS — utilisée pour expliquer le filtre "Exclusif" (listing_list.html) mais pensée pour
être réutilisée ailleurs sur le site. --- */
.info-tooltip {
position: relative;
display: inline-flex;
align-items: center;
color: var(--muted);
cursor: help;
}
.info-tooltip-bubble {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(4px);
width: max-content;
max-width: 240px;
background: var(--rideau);
color: var(--sable);
font-size: .78rem;
font-weight: 500;
line-height: 1.35;
padding: .55rem .7rem;
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .15s ease, transform .15s ease;
z-index: 20;
}
.info-tooltip-bubble::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: var(--rideau);
}
.info-tooltip:hover .info-tooltip-bubble,
.info-tooltip:focus-visible .info-tooltip-bubble {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.verification-status {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.verification-status i { font-size: 1.8rem; flex-shrink: 0; margin-top: .1rem; }
.verification-status-verified i { color: var(--sauge); }
.verification-status-pending i { color: var(--cuivre); }
.verification-status-rejected i { color: var(--accent); }
.verified-icon { color: var(--sauge); font-size: .8em; margin-left: .2rem; vertical-align: middle; }
.responsive-icon { color: var(--saphir); font-size: .8em; margin-left: .2rem; vertical-align: middle; }
/* Étapes numérotées de accounts/templates/accounts/verification.html : email et identité sont
deux actions indépendantes (l'une automatique, l'autre modérée à la main) — le numéro + le
séparateur pointillé entre les deux blocs rendent cette indépendance visible d'un coup d'œil,
plutôt que de les laisser s'enchaîner comme les étapes d'un même parcours. */
.verification-step { margin-bottom: 1.5rem; }
.verification-step + .verification-step {
padding-top: 2rem;
border-top: 1px dashed rgba(233, 217, 195, .16);
}
.verification-step-header {
display: flex;
align-items: flex-start;
gap: .85rem;
margin-bottom: 1rem;
}
.verification-step-number {
flex: 0 0 auto;
width: 1.75rem;
height: 1.75rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--velours);
color: var(--sable);
font-weight: 700;
font-size: .85rem;
margin-top: .1rem;
}
/* --- Onglets Bootstrap (accounts:following_list) recolorés à la charte, Bootstrap ne connaissant
que sa couleur primaire par défaut pour l'état actif des .nav-pills --- */
.nav-pills .nav-link { color: var(--ink); font-weight: 600; font-size: .9rem; }
.nav-pills .nav-link:not(.active):hover { background: var(--surface-alt); }
.nav-pills .nav-link.active { background-color: var(--laiton); color: var(--rideau); }
.nav-pills .nav-link .badge { font-weight: 600; }
/* --- Accès rapide à l'achat de crédits, affiché en tête de la sidebar "Mon compte" --- */
.account-credits-card {
display: flex;
align-items: center;
gap: .75rem;
margin: .85rem .75rem 0;
padding: .7rem .85rem;
background: var(--brand-light);
border-radius: var(--radius-md);
text-decoration: none;
transition: box-shadow .15s ease, transform .15s ease;
}
.account-credits-card:hover {
box-shadow: var(--shadow-sm);
transform: translateY(-1px);
}
.account-credits-card-icon {
display: flex;
align-items: center;
justify-content: center;
width: 2.35rem;
height: 2.35rem;
flex-shrink: 0;
border-radius: 50%;
background: var(--velours);
color: var(--sable);
font-size: 1.1rem;
}
.account-credits-card-info {
display: flex;
flex-direction: column;
gap: .05rem;
min-width: 0;
}
.account-credits-card-balance { color: var(--ink); font-weight: 700; font-size: .9rem; }
.account-credits-card-cta { display: flex; align-items: center; color: var(--brand); font-weight: 600; font-size: .78rem; }
.account-credits-card-cta i { font-size: 1.1em; }
/* --- Page payments:buy_credits : solde mis en avant + rappel des usages des crédits --- */
.credits-balance-banner {
display: flex;
align-items: center;
gap: 1.1rem;
margin-bottom: 1.5rem;
padding: 1.25rem 1.5rem;
border-radius: var(--radius-lg);
background: linear-gradient(135deg, var(--velours), var(--bordeaux));
box-shadow: var(--shadow-md);
}
.credits-balance-banner-icon {
display: flex;
align-items: center;
justify-content: center;
width: 3.25rem;
height: 3.25rem;
flex-shrink: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .18);
color: #fff;
font-size: 1.5rem;
}
.credits-balance-banner-body { display: flex; flex-direction: column; gap: .1rem; }
.credits-balance-banner-label {
color: rgba(255, 255, 255, .85);
font-size: .78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .05em;
}
.credits-balance-banner-value { color: #fff; font-size: 1.9rem; font-weight: 800; line-height: 1.2; }
.credits-balance-banner-value small { font-size: 1rem; font-weight: 600; opacity: .9; }
/* Grille "pourquoi/à quoi ça sert" (icône + titre + texte), réutilisée telle quelle partout où une
liste de fonctionnalités doit être mise en avant de façon uniforme — voir payments/templates/
payments/credits.html ("À quoi servent vos crédits ?"), exclusive.html ("Une sélection à part,
un statut qui se voit") et listing_plan_packs.html ("Pourquoi acheter un pack ?", un seul
élément dans la grille). Bordure/dégradé de marque repris de .highlight-box--brand pour que les
3 widgets se lisent comme une seule et même famille visuelle plutôt que 3 traitements distincts. */
.feature-list-card {
margin-bottom: 1.5rem;
border: 2px solid var(--brand);
background: linear-gradient(135deg, rgba(198, 164, 97, .14), var(--surface) 60%);
}
.feature-list-card h2 { color: var(--brand); }
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.feature-item { display: flex; align-items: flex-start; gap: .75rem; }
.feature-icon {
display: flex;
align-items: center;
justify-content: center;
width: 2.35rem;
height: 2.35rem;
flex-shrink: 0;
border-radius: 50%;
background: linear-gradient(135deg, var(--velours), var(--bordeaux));
color: #fff;
font-size: 1.05rem;
}
.feature-text { font-size: .85rem; color: var(--muted); line-height: 1.4; }
.feature-text strong { display: block; color: var(--ink); font-size: .9rem; }
.account-nav { padding: .75rem; }
.account-nav a {
display: flex;
align-items: center;
gap: .65rem;
padding: .65rem .8rem;
border-radius: var(--radius-md);
color: var(--ink);
font-weight: 500;
font-size: .92rem;
text-decoration: none;
}
.account-nav a:hover { background: var(--surface-alt); color: var(--ink); }
.account-nav a.active { background: var(--brand-light); color: var(--brand); font-weight: 700; }
.account-nav a i { font-size: 1.05rem; width: 1.3rem; text-align: center; flex-shrink: 0; }
.account-nav hr { margin: .6rem .2rem; border-color: rgba(233, 217, 195, .1); }
.account-nav-label {
display: block;
padding: .9rem .8rem .35rem;
color: var(--muted);
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
}
.account-nav-label:first-child { padding-top: .2rem; }
.account-card {
background: var(--surface-gradient);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: 1.5rem;
}
.account-card + .account-card { margin-top: 1.5rem; }
.account-card h2 {
font-size: 1.05rem;
font-weight: 700;
margin-bottom: .25rem;
}
.account-card .section-hint {
color: var(--muted);
font-size: .85rem;
margin-bottom: 1.25rem;
}
.section-count-badge {
background: var(--brand-light);
color: var(--brand);
font-size: .75rem;
font-weight: 700;
padding: .15rem .6rem;
border-radius: 50rem;
vertical-align: middle;
}
/* Codes de secours MFA (staffadmin/_backup_codes.html) : lisibles, espacés, copiables tels quels. */
.backup-codes {
background: var(--bg-subtle, rgba(23, 17, 15, .35));
border-radius: var(--radius-sm, 6px);
padding: 1rem;
font-size: 1.05rem;
line-height: 1.8;
}
/* ===== Assistant en étapes (création d'annonce) — la modification garde le formulaire complet
sur une seule page ; seule la création (plus longue, plus intimidante pour un nouvel
annonceur) est mise en avant par ce bandeau, sur 3 étapes : les 2 premières scindent le
formulaire (voir listings/_form_section_*.html + static/js/listing-wizard.js), la 3e
correspond à la page de paiement qui suit (payments/templates/payments/checkout.html),
affichée en lecture seule via listings/_wizard_steps.html. Depuis l'étape 3, les étapes 1 et
2 (déjà terminées) redeviennent cliquables (.wizard-step-link) pour revenir modifier
l'annonce avant de payer — voir listings/views.py::listing_update, is_wizard. ===== */
/* Encadré autour du bandeau d'étapes, même traitement visuel que .account-card (fond, ombre,
coins arrondis) pour que le bandeau se lise comme un widget à part entière plutôt que comme du
texte flottant directement sur le fond de page — cohérent avec le reste du site. */
.wizard-steps-card {
background: var(--surface-gradient);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: 1.25rem 1.5rem;
margin-bottom: 2rem;
}
.wizard-steps {
display: flex;
align-items: center;
justify-content: center;
list-style: none;
padding: 0;
margin: 0 0 2rem;
gap: .5rem;
}
.wizard-steps-card .wizard-steps { margin: 0; }
.wizard-step-item {
display: flex;
align-items: center;
gap: .6rem;
color: var(--muted);
}
.wizard-step-circle {
display: flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
flex-shrink: 0;
border-radius: 50%;
border: 2px solid rgba(233, 217, 195, .18);
background: var(--surface-alt);
font-weight: 700;
font-size: .95rem;
color: var(--muted);
transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.wizard-step-label {
font-weight: 600;
font-size: .9rem;
transition: color .15s ease;
}
.wizard-step-line {
width: 3.5rem;
height: 2px;
background: rgba(233, 217, 195, .18);
border-radius: 1px;
}
.wizard-step-item--active .wizard-step-circle {
background: var(--laiton);
border-color: var(--laiton);
color: var(--rideau);
box-shadow: 0 0 0 4px var(--brand-light);
}
.wizard-step-item--active .wizard-step-label { color: var(--ink); }
.wizard-step-item--done .wizard-step-circle {
background: var(--brand-light);
border-color: var(--brand);
color: var(--brand);
}
.wizard-step-item--done .wizard-step-label { color: var(--brand); }
.wizard-step-link {
display: flex;
align-items: center;
gap: .6rem;
text-decoration: none;
color: inherit;
cursor: pointer;
}
.wizard-step-link:hover .wizard-step-circle {
box-shadow: 0 0 0 4px var(--brand-light);
}
.wizard-step-link:hover .wizard-step-label { text-decoration: underline; }
.wizard-step-panel { animation: wizardStepFadeIn .25s ease; }
@keyframes wizardStepFadeIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 420px) {
.wizard-step-label { display: none; }
.wizard-step-line { width: 2rem; }
}
.legal-page {
max-width: 760px;
margin: 0 auto;
}
.legal-content h2 {
font-size: 1rem;
font-weight: 700;
margin: 1.5rem 0 .6rem;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content p, .legal-content li {
color: var(--ink);
font-size: .92rem;
line-height: 1.6;
}
.legal-content ul { padding-left: 1.25rem; margin-bottom: 1rem; }
.stat-card {
background: var(--surface-gradient);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: 1.1rem 1.25rem;
display: flex;
align-items: center;
gap: .9rem;
height: 100%;
}
.stat-card .icon {
width: 2.7rem;
height: 2.7rem;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
flex-shrink: 0;
background: var(--brand-light);
color: var(--brand);
}
.stat-card .icon.icon-rose { background: rgba(193, 68, 94, .16); color: var(--accent); }
.stat-card .icon.icon-amber { background: rgba(201, 138, 82, .16); color: var(--cuivre); }
.stat-card .icon.icon-green { background: rgba(138, 154, 130, .16); color: var(--sauge); }
.stat-card .value { font-size: 1.45rem; font-weight: 800; color: var(--ink); line-height: 1.15; }
.stat-card .label { font-size: .76rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.mini-bars {
display: flex;
align-items: flex-end;
gap: .6rem;
height: 130px;
padding-top: 1.4rem;
}
.mini-bars .bar-col {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
height: 100%;
position: relative;
}
.mini-bars .bar-value {
font-size: .72rem;
color: var(--ink);
font-weight: 700;
margin-bottom: .35rem;
}
.mini-bars .bar {
width: 100%;
max-width: 34px;
background: var(--brand);
border-radius: .35rem .35rem 0 0;
min-height: 3px;
}
.mini-bars .bar-col:hover .bar { background: var(--brand-dark); }
.mini-bars .bar-label {
font-size: .72rem;
color: var(--muted);
margin-top: .5rem;
}
/* Benchmark par palier (dashboard/listing_stats.html, écran d'upsell) : mêmes couleurs de
palier déjà établies ailleurs sur le site (badges VIP/Premium/Exclusif des annonces). */
.mini-bars .bar--tier-basic { background: var(--sable); }
.mini-bars .bar--tier-premium { background: linear-gradient(180deg, var(--sauge), #5c6e52); }
.mini-bars .bar--tier-exclusive { background: linear-gradient(180deg, #241b16, var(--rideau)); }
.mini-bars .bar--tier-vip { background: linear-gradient(180deg, var(--ambre), var(--laiton)); }
/* Comparaison avec/sans mise en avant (staffadmin::analytics_promotions) : le laiton (.bar par
défaut) marque "avec", ce ton neutre marque "sans" — jamais l'inverse, pour rester lisible sans
légende à chaque paire. */
.mini-bars .bar--muted { background: var(--argent); }
/* Pastille de couleur devant un libellé (staffadmin::analytics_revenue), pour faire le lien avec
la série correspondante du graphique juste au-dessus sans dupliquer sa légende. */
.legend-dot {
display: inline-block;
width: .6rem;
height: .6rem;
border-radius: 50%;
margin-right: .3rem;
}
/* Répartition par heure (dashboard/listing_stats.html) : 24 colonnes plutôt que 3-4, donc plus
serrées et sans valeur au-dessus de chaque barre (illisible à cette densité — un simple survol,
via l'attribut title posé sur .bar-col, donne le détail) ; un seul repère sur trois (0h, 3h,
6h...) pour ne pas surcharger l'axe. Le template rend .bar-label pour CHAQUE colonne (vide entre
deux repères) plutôt que de l'omettre : .bar-col empile bar+label en colonne flex, donc une
colonne sans .bar-label serait plus basse que ses voisines et sa barre semblerait "flotter" plus
haut qu'elles — hauteur figée ici pour que toutes les colonnes réservent le même espace, avec ou
sans texte. */
.mini-bars--hourly { gap: .2rem; height: 110px; padding-top: .5rem; }
.mini-bars--hourly .bar { max-width: none; border-radius: .2rem .2rem 0 0; }
.mini-bars--hourly .bar-label { font-size: .62rem; line-height: 1; height: .62rem; margin-top: .35rem; }
.avatar-placeholder {
/* Taille par défaut alignée sur .avatar-preview (photo réelle) : sans elle, un
.avatar-placeholder utilisé seul (sans classe de contexte type .comment-item) se
réduit à la taille de son icône, qui n'est pas carrée — d'où le rendu ovale. */
width: 96px;
height: 96px;
border-radius: 50%;
background: linear-gradient(135deg, var(--velours), var(--bordeaux));
border: 2px solid rgba(198, 164, 97, .2);
color: var(--laiton);
display: flex;
align-items: center;
justify-content: center;
font-size: 2.2rem;
flex-shrink: 0;
}
.avatar-editor {
position: relative;
display: inline-block;
}
.avatar-editor-circle {
display: block;
width: 96px;
height: 96px;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
position: relative;
}
.avatar-editor-circle #avatarPreview,
.avatar-editor-circle .avatar-preview {
width: 96px;
height: 96px;
display: block;
}
.avatar-editor-circle .avatar-placeholder {
width: 96px;
height: 96px;
}
.avatar-editor-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(23, 17, 15, .55);
color: #fff;
font-size: 1.3rem;
opacity: 0;
transition: opacity .15s ease;
border-radius: 50%;
}
.avatar-editor-circle:hover .avatar-editor-overlay { opacity: 1; }
.avatar-editor-remove {
position: absolute;
top: -.15rem;
right: -.15rem;
width: 1.9rem;
height: 1.9rem;
border-radius: 50%;
background: var(--accent);
color: #fff;
border: 2px solid var(--surface);
display: flex;
align-items: center;
justify-content: center;
font-size: .75rem;
cursor: pointer;
padding: 0;
}
.avatar-editor-remove[hidden] { display: none; }
/* ===== Messagerie ===== */
.conversation-row {
position: relative;
display: flex;
align-items: center;
gap: .9rem;
padding: 1rem 1.25rem;
color: var(--ink);
text-decoration: none;
}
.conversation-row:hover { background: var(--surface-alt); color: var(--ink); }
.conversation-row.is-unread { background: var(--brand-light); }
.conversation-row .min-w-0 { min-width: 0; }
/* Toute la ligne ouvre la conversation (stretched-link), sauf le pseudo qui mène au profil —
même principe que .listing-card .stretched-link::after pour la carte d'annonce. */
.conversation-row .stretched-link::after { z-index: 1; }
.conversation-row .conversation-profile-link {
position: relative;
z-index: 2;
color: inherit;
text-decoration: none;
}
.conversation-row .conversation-profile-link:hover { text-decoration: underline; }
.chat-bubble {
max-width: 75%;
padding: .6rem .9rem;
border-radius: var(--radius-md);
font-size: .92rem;
}
.chat-bubble.is-mine {
background: rgba(198, 164, 97, .22);
color: var(--sable);
border-bottom-right-radius: .2rem;
}
.chat-bubble.is-theirs {
background: var(--surface-alt);
color: var(--ink);
border-bottom-left-radius: .2rem;
}
.chat-scroll {
max-height: 420px;
overflow-y: auto;
}
/* ===== Authentification ===== */
.auth-card {
display: flex;
max-width: 900px;
margin: 2rem auto;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
overflow: hidden;
background: var(--surface-gradient);
}
.auth-card .auth-brand {
flex: 0 0 40%;
background: linear-gradient(150deg, var(--velours), var(--bordeaux));
color: #fff;
padding: 2.5rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.auth-card .auth-brand h2 { font-weight: 800; margin-bottom: .75rem; }
.auth-card .auth-brand p { opacity: .9; margin-bottom: 0; }
.auth-card .auth-brand .brand-icon { font-size: 2.4rem; margin-bottom: 1rem; }
.auth-card .auth-form {
flex: 1 1 60%;
padding: 2.5rem;
}
@media (max-width: 767px) {
.auth-card { flex-direction: column; }
.auth-card .auth-brand { padding: 1.75rem; }
}
/* Règles du mot de passe (signup.html) : cochées en direct à la frappe par static/js/
password-strength.js — voir accounts.forms.SignUpForm.password_rules pour la génération de
cette liste à partir de AUTH_PASSWORD_VALIDATORS. */
.password-rules {
list-style: none;
padding: 0;
margin: .5rem 0 0;
font-size: .82rem;
}
.password-rule {
display: flex;
align-items: center;
gap: .45rem;
padding: .15rem 0;
color: var(--muted);
}
.password-rule i { font-size: .9rem; flex-shrink: 0; }
.password-rule.is-valid { color: var(--sauge); }
.account-type-options {
display: flex;
gap: .75rem;
}
.account-type-option {
display: flex;
align-items: center;
gap: .5rem;
flex: 1;
border: 1.5px solid rgba(233, 217, 195, .16);
border-radius: var(--radius-md);
padding: .7rem 1rem;
cursor: pointer;
font-weight: 500;
margin-bottom: 0;
}
.account-type-option:has(input:checked) {
border-color: var(--brand);
background: var(--brand-light);
color: var(--brand);
font-weight: 700;
}
.account-type-option input { accent-color: var(--brand); margin: 0; }
/* ===== Fils de commentaires / avis ===== */
.comment-item {
display: flex;
gap: .85rem;
padding: 1.1rem 0;
}
.comment-item + .comment-item {
border-top: 1px solid rgba(233, 217, 195, .08);
}
.comment-item .avatar-preview,
.comment-item .avatar-placeholder {
width: 42px;
height: 42px;
font-size: 1.1rem;
flex-shrink: 0;
}
.comment-body { flex: 1; min-width: 0; }
.comment-header {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .5rem;
}
.comment-header .author { font-weight: 700; color: var(--ink); }
.comment-header .date { font-size: .78rem; color: var(--muted); }
.comment-text { margin: .3rem 0 .4rem; white-space: pre-line; }
.comment-actions { display: flex; gap: 1rem; }
.comment-reply-toggle {
background: none;
border: none;
padding: 0;
font-size: .8rem;
font-weight: 600;
color: var(--brand);
}
.comment-reply-toggle:hover { color: var(--sable); }
.comment-replies {
margin-top: .9rem;
margin-left: 1.1rem;
padding-left: 1.1rem;
border-left: 2px solid var(--brand-light);
display: flex;
flex-direction: column;
gap: .9rem;
}
.comment-replies:empty {
display: none;
margin: 0;
padding: 0;
border: none;
}
.comment-replies.comment-replies-flat {
margin-left: .4rem;
padding-left: .75rem;
}
.comment-reply-context {
display: inline-flex;
align-items: center;
gap: .3rem;
font-size: .74rem;
font-weight: 600;
color: var(--brand);
background: var(--brand-light);
border-radius: 50rem;
padding: .12rem .6rem;
margin-bottom: .3rem;
}
/* Corps d'un widget de section (liste d'avis/commentaires sous un titre "Avis (N)", "Commentaires"...
— voir listing_detail.html/public_profile.html) : regroupé dans la même .account-card que son
titre plutôt que dans une carte séparée, avec un retrait + liseré coloré à gauche pour bien
montrer que ce bloc appartient au titre juste au-dessus — même traitement visuel que
.comment-replies ci-dessus pour une réponse dans un fil de discussion. */
.widget-section-body {
padding-left: 1.1rem;
border-left: 2px solid var(--brand-light);
}
.comment-reply-form {
margin-top: .75rem;
display: flex;
gap: .5rem;
}
/* ===== Notifications ===== */
.notif-badge {
position: absolute;
top: .1rem;
right: -.35rem;
font-size: .62rem;
padding: .22rem .4rem;
}
.notification-dropdown {
width: 340px;
max-width: 90vw;
padding: 0;
overflow: hidden;
}
.notification-dropdown-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: .85rem 1rem;
font-weight: 700;
border-bottom: 1px solid rgba(233, 217, 195, .12);
}
.notification-dropdown-header .mark-all-read-form button {
font-size: .78rem;
font-weight: 500;
}
/* Icône seule (voir notifications/_bell.html et notifications/list.html) plutôt qu'un libellé
texte : le tooltip natif (attribut title) porte l'accessibilité. */
.mark-all-read-btn {
font-size: 1.1rem;
line-height: 1;
color: var(--muted);
}
.mark-all-read-btn:hover { color: var(--brand); }
.notification-dropdown-footer {
display: block;
text-align: center;
padding: .65rem 1rem;
font-size: .8rem;
font-weight: 600;
color: var(--brand);
border-top: 1px solid rgba(233, 217, 195, .12);
}
.notification-dropdown-footer:hover { background: var(--brand-light); color: var(--sable); }
.notification-list {
max-height: 360px;
overflow-y: auto;
}
/* Page "Notifications" (notifications/list.html) : même liste que le dropdown de la cloche,
mais sans la hauteur bornée — c'est déjà `account-card` qui l'encadre sur toute la page. */
.notification-list--page { max-height: none; overflow-y: visible; }
.notification-item {
display: flex;
align-items: flex-start;
gap: .75rem;
padding: .75rem 1rem;
color: var(--ink);
text-decoration: none;
border-bottom: 1px solid rgba(233, 217, 195, .12);
}
.notification-item:hover { background: var(--brand-light); color: var(--ink); }
.notification-item i { font-size: 1.1rem; color: var(--brand); margin-top: .15rem; flex-shrink: 0; }
.notification-item.unread { background: var(--brand-light); }
.notification-item.unread .notification-text { font-weight: 700; }
.notification-text { font-size: .86rem; line-height: 1.3; }
.notification-date { font-size: .72rem; color: var(--muted); margin-top: .15rem; }
.notification-empty { padding: 1.5rem 1rem; text-align: center; }
.comment-reply-form textarea { flex: 1; }
/* ===== Widget photos (glisser-déposer) ===== */
.photo-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: .75rem;
}
.photo-tile {
position: relative;
aspect-ratio: 1 / 1;
border-radius: var(--radius-md);
overflow: hidden;
cursor: grab;
transition: opacity .15s ease;
}
.photo-tile.dragging { opacity: .35; }
.photo-tile.removed { opacity: .35; }
.photo-tile-preview { position: relative; width: 100%; height: 100%; }
.photo-tile-preview > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-tile-placeholder {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border: 2px dashed var(--brand-light);
border-radius: var(--radius-md);
color: var(--brand);
font-size: 1.6rem;
cursor: pointer;
background: var(--surface-gradient);
overflow: hidden;
}
.photo-tile.has-image .photo-tile-placeholder { border: none; }
.photo-tile.has-image .photo-tile-placeholder > i { display: none; }
.photo-tile-placeholder img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-tile-placeholder input[type="file"] {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
.photo-drag-handle {
position: absolute;
top: .35rem;
left: .35rem;
width: 1.7rem;
height: 1.7rem;
border-radius: 50%;
background: rgba(23, 17, 15, .6);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: .85rem;
pointer-events: none;
}
.photo-tile-remove,
.photo-tile-cancel {
position: absolute;
top: .35rem;
right: .35rem;
width: 1.7rem;
height: 1.7rem;
border-radius: 50%;
background: var(--accent);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: .85rem;
cursor: pointer;
border: none;
padding: 0;
margin: 0;
z-index: 2;
}
.photo-tile-remove[hidden],
.photo-tile-cancel[hidden] { display: none; }
.photo-tile-remove input[type="checkbox"] {
position: absolute;
inset: 0;
opacity: 0;
margin: 0;
cursor: pointer;
}
.photo-tile.removed .photo-tile-remove { background: var(--muted); }
.photo-tile-blurred-badge {
position: absolute;
top: .35rem;
left: .35rem;
z-index: 2;
font-size: .65rem;
display: inline-flex;
align-items: center;
gap: .25rem;
}
/* ===== Pied de page ===== */
.site-footer {
background: linear-gradient(115deg, var(--rideau), var(--bordeaux));
color: rgba(255, 255, 255, .78);
padding: 2rem 0 1.25rem;
}
.site-footer-top {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 2rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.site-footer-brand {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: .15rem;
text-decoration: none;
}
.site-footer-brand .navbar-brand-word { font-size: 1.7rem; }
.site-footer-columns {
display: flex;
flex-wrap: wrap;
gap: 1.75rem 3rem;
}
.site-footer-col {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: .5rem;
min-width: 9rem;
}
.site-footer-col-title {
margin: 0 0 .1rem;
color: var(--laiton);
font-size: .72rem;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
}
.site-footer-col a {
color: rgba(255, 255, 255, .78);
font-size: .87rem;
font-weight: 500;
text-decoration: none;
}
.site-footer-col a:hover { color: #fff; }
.site-footer-bottom {
padding-top: 1.25rem;
font-size: .8rem;
color: rgba(255, 255, 255, .55);
text-align: center;
}
/* ===== Pages d'erreur (404, 500, ...) ===== */
.error-page {
max-width: 460px;
margin: 3rem auto;
padding: 3rem 2rem;
text-align: center;
background: var(--surface-gradient);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.error-page-icon {
width: 88px;
height: 88px;
margin: 0 auto 1.5rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--brand-light);
color: var(--brand);
font-size: 2.25rem;
}
.error-page-code {
font-size: .8rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: .5rem;
}
.error-page-title {
font-size: 1.5rem;
font-weight: 800;
margin-bottom: .75rem;
}
.error-page-message {
color: var(--muted);
margin-bottom: 1.75rem;
}
.error-page-secondary {
display: block;
margin-top: .9rem;
font-size: .87rem;
}
/* ===== Bandeau "intérêt de l'action" (compte annonceur) ===== */
.benefit-banner {
display: flex;
align-items: flex-start;
gap: 1rem;
background: linear-gradient(135deg, rgba(198, 164, 97, .14), var(--surface));
border: 1px solid rgba(198, 164, 97, .2);
border-radius: var(--radius-lg);
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
}
.benefit-banner-icon {
width: 48px;
height: 48px;
flex-shrink: 0;
border-radius: 50%;
background: var(--velours);
color: var(--sable);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
}
.benefit-banner-title {
font-size: 1rem;
font-weight: 700;
color: var(--ink);
margin-bottom: .25rem;
}
.benefit-banner-text {
margin: 0;
font-size: .9rem;
color: var(--muted);
}
/* ===== Étiquettes de catégorie (listes de type "Mes annonces") ===== */
.category-pill {
display: inline-flex;
align-items: center;
gap: .3rem;
background: var(--brand-light);
color: var(--brand);
font-size: .72rem;
font-weight: 600;
padding: .18rem .6rem;
border-radius: 999px;
margin: .15rem .3rem .15rem 0;
white-space: nowrap;
}
/* Icône ronde en tête de carte "Recherche sauvegardée" (listings/saved_search_list.html) — même
vocabulaire visuel que .highlight-box-icon (cercle plein coloré). */
.saved-search-icon {
flex: 0 0 auto;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--velours), var(--bordeaux));
color: #fff;
font-size: 1.1rem;
}
/* Piège à bots (config/forms.py::HoneypotFormMixin) : positionné hors-écran plutôt qu'en
display:none/visibility:hidden, que certains bots évitent spécifiquement en inspectant le CSS
calculé. aria-hidden sur le conteneur (posé dans le template) le retire de l'arbre
d'accessibilité pour ne jamais le proposer à un lecteur d'écran. */
.hp-field {
position: absolute;
left: -9999px;
top: -9999px;
height: 0;
width: 0;
overflow: hidden;
}
/* ===== Afficher/masquer un mot de passe (static/js/site.js::initPasswordToggles) =====
Injecté en JS autour de chaque