/* ============================================================ Maminou — charte de marque (sage & corail) Écrit à la main, sans framework. ============================================================ */ /* --- Polices Google : chargées depuis le GABARIT, plus par @import --- Un @import oblige le navigateur à lire d'abord tout ce fichier, à découvrir seulement ensuite qu'il lui faut deux polices, puis à ouvrir une nouvelle connexion : deux attentes en série avant le premier texte affiché. Déclarées dans le avec preconnect, elles partent en parallèle du CSS. Voir views/layout.php. */ :root { /* Palette charte. On conserve les noms de variables existants (--indigo, --ink, --coral, --trame, --indigo-soft) pour que tout le CSS déjà écrit hérite automatiquement de la nouvelle identité. */ --sage: #A8C8B8; /* vert sauge : primaire */ --sage-deep: #8FB6A3; /* sauge foncé : survol */ --sage-soft: #EEF5F1; /* sauge très clair : fonds, avatars */ --sage-text: #3A6B52; /* sauge FONCÉ : texte vert lisible (6,2:1) */ --coral-text: #B84B41; /* corail FONCÉ : texte corail lisible (5,1:1) */ --success-text:#0F7A5A; /* vert succès lisible (5,3:1) */ --danger-text: #C62828; /* rouge alerte lisible (5,6:1) */ --coral: #F08A7C; /* corail : accent, boutons d'action */ --coral-deep: #E5766A; --coral-soft: #FDEDEA; --yellow: #F4C95D; --yellow-soft: #FDF4DE; --sky: #8EC5E8; --sky-soft: #E9F4FB; --ink: #39434D; /* encre : titres, texte fort */ --cream: #F8F4EE; /* crème : fond doux */ /* alias de compatibilité — les anciens noms pointent vers la nouvelle palette */ --indigo: var(--sage); --indigo-deep: var(--sage-deep); --indigo-soft: var(--sage-soft); --trame: var(--cream); --mint: #5FC8A0; --mint-soft: #D6F5E6; --success: #10B981; --danger: #EF4444; --text: #5a636b; --muted: #646D76; /* gris LISIBLE (5,3:1) — etait #98a0a6 a 2,7:1 */ --border: #ECE7DF; --white: #ffffff; --radius: 18px; --radius-sm: 12px; --shadow: 0 4px 18px rgba(57, 67, 77, .06); --shadow-lg: 0 16px 44px rgba(57, 67, 77, .10); --maxw: 1160px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; } body { font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; color: var(--text); background: var(--white); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* Titres en Nunito (arrondi, chaleureux) */ h1, h2, h3, h4, .section-title, .res-h1, .mf-q, .ann-name, .ann-price, .res-price, .side-title, .btn { font-family: 'Nunito', sans-serif; font-weight: 800; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .center { text-align: center; } .muted { color: var(--muted); } a { color: var(--indigo); text-decoration: none; } a:hover { text-decoration: underline; } /* --- Logo wordmark + yeux --- */ .brand { display: inline-flex; align-items: center; text-decoration: none; } .brand:hover { text-decoration: none; } .brand-word { font-family: 'Nunito', 'Segoe UI', sans-serif; font-weight: 900; font-size: 30px; color: var(--ink); letter-spacing: .5px; display: inline-flex; align-items: center; } .brand-word--sm { font-size: 24px; } .brand-o { position: relative; display: inline-block; } .brand-eyes { position: absolute; left: 62%; top: -3px; transform: translateX(-50%) skewX(-8deg); display: inline-flex; /* Les yeux du logo clignent — mais RAREMENT. Un cycle court transforme la marque en tic dans le coin de l'œil sur un site qu'on parcourt dix minutes. Ici : une seule fermeture par cycle de 11 s, tenue 4 centièmes de la boucle, soit moins d'un demi-dixième de seconde. On la remarque à peine, et c'est le but : on la découvre. */ transform-origin: 50% 100%; animation: brand-cligne 11s ease-in-out infinite; } @keyframes brand-cligne { 0%, 88%, 100% { transform: translateX(-50%) skewX(-8deg) scaleY(1); } 91% { transform: translateX(-50%) skewX(-8deg) scaleY(.15); } 94% { transform: translateX(-50%) skewX(-8deg) scaleY(1); } /* un second battement, plus discret : deux clignements d'affilée font vivant, un seul fait mécanique */ 96% { transform: translateX(-50%) skewX(-8deg) scaleY(.4); } } /* Le clin d'œil au SURVOL : un geste volontaire, l'animation y est toujours bienvenue. C'est la petite vie qu'on découvre par hasard. */ .brand:hover .brand-eyes { animation: brand-clin .5s ease-in-out; } @keyframes brand-clin { 0%, 100% { transform: translateX(-50%) skewX(-8deg) scaleY(1) rotate(0); } 35% { transform: translateX(-50%) skewX(-8deg) scaleY(.12) rotate(-4deg); } 70% { transform: translateX(-50%) skewX(-8deg) scaleY(1.05) rotate(2deg); } } /* Le logo du PIED DE PAGE reste immobile : deux logos clignant en même temps sur le même écran, ce n'est plus un détail vivant, c'est un défaut. */ .footer-brand .brand-eyes { animation: none; } /* On n'impose aucun mouvement à qui l'a désactivé : ce réglage répond à des raisons vestibulaires ou d'attention, pas à une préférence esthétique. */ @media (prefers-reduced-motion: reduce) { .brand-eyes, .brand:hover .brand-eyes { animation: none; } } /* --- Boutons --- */ .btn { display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 15px; padding: 10px 20px; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; transition: transform .06s ease, background .15s ease, box-shadow .15s ease; text-decoration: none; white-space: nowrap; } .btn:hover { text-decoration: none; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--coral); color: #fff; } .btn-primary:hover { background: var(--coral-deep); color: #fff; box-shadow: 0 8px 20px rgba(240,138,124,.30); } .btn-sage { background: var(--sage); color: var(--ink); } .btn-sage:hover { background: var(--sage-deep); color: var(--ink); } .btn-outline { background: #fff; color: var(--ink); border: 2px solid var(--sage); } .btn-outline:hover { background: var(--sage-soft); color: var(--ink); } .btn-lg { padding: 14px 28px; font-size: 16px; } /* --- Header --- */ .site-header { background: #fff; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; } .site-nav { display: flex; align-items: center; gap: 16px; } /* cœur des coups de cœur dans le header + popup */ /* Le cœur du header ne s'affiche que s'il y a QUELQUE CHOSE dedans : un cœur vide en permanence n'est qu'un bouton mort. Le JS pose « is-shown » dès qu'un favori (déconnecté) ou un coup de cœur (connecté) existe. */ .nav-fav-wrap { position: relative; display: none; } .nav-fav-wrap.is-shown { display: inline-flex; align-items: center; } .nav-fav { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: none; background: transparent; color: var(--muted); cursor: pointer; transition: all .15s; } .nav-fav:hover { background: var(--coral-soft); color: var(--coral); } .nav-fav.has-fav { color: var(--coral); } .nav-fav.has-fav svg path { fill: var(--coral); stroke: var(--coral); } .nav-fav-count { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; background: var(--coral); color: #fff; font-size: 11px; font-weight: 800; border-radius: 999px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff; } .fav-pop { position: absolute; top: calc(100% + 12px); right: 0; z-index: 60; width: 320px; max-height: 70vh; overflow-y: auto; background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); } .fav-pop::before { content: ''; position: absolute; top: -6px; right: 14px; width: 12px; height: 12px; background: #fff; border-left: 1px solid var(--border); border-top: 1px solid var(--border); transform: rotate(45deg); } .fav-pop-head { padding: 14px 16px; font-weight: 800; color: var(--ink); border-bottom: 1px solid var(--border); } .fav-pop-body { padding: 8px; } .fav-pop-empty, .fav-pop-loading { padding: 22px 16px; text-align: center; color: var(--muted); font-size: 14px; } .fav-row { display: flex; align-items: center; border-radius: 12px; } .fav-row:hover { background: var(--sage-soft); } .fav-row-link { flex: 1; display: flex; align-items: center; gap: 11px; padding: 9px 10px; min-width: 0; } .fav-row-link:hover { text-decoration: none; } .fav-row-photo { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--sage-soft); } .fav-row-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .fav-row-photo img.ph { object-fit: contain; padding: 7px; } .fav-row-info { min-width: 0; display: flex; flex-direction: column; } .fav-row-info strong { color: var(--ink); font-size: 14.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fav-row-info small { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fav-row-x { width: 28px; height: 28px; margin-right: 8px; border: none; background: transparent; color: var(--muted); font-size: 19px; line-height: 1; cursor: pointer; border-radius: 50%; flex-shrink: 0; } .fav-row-x:hover { background: var(--coral-soft); color: var(--coral); } @media (max-width: 860px) { /* même logique que le popup compte : plein cadre dès 860 px, sinon il déborde à droite sur les écrans intermédiaires (480–860). */ .fav-pop { position: fixed; top: 62px; right: 10px; left: 10px; width: auto; } /* ⚠️ LE BUG : le menu compte avait « right: 0 » et AUCUNE règle mobile. Sur un petit écran, il s'ouvrait calé sur le bord droit du bouton — c'est-à-dire en partie HORS de l'écran. Le menu « se dépliait » (d'où le symptôme décrit : on le voyait s'ouvrir) mais ses liens tombaient dans la zone invisible à droite. On le passe en position fixe, pleine largeur, comme le popup favoris. */ /* le popup compte en mobile : voir plus bas, APRÈS sa règle de base. Le placer ici ne servait à rien — la règle de base « .account-pop », écrite plus loin dans le fichier, l'écrasait (même spécificité, la dernière gagne). D'où le popup resté collé à droite, à moitié caché. */ } .site-nav a { color: var(--ink); font-weight: 600; font-size: 15px; } .site-nav a:hover { color: var(--indigo); text-decoration: none; } .site-nav .btn-primary { color: #fff; } /* --- Hero --- */ /* ⚠️ PAS d'overflow:hidden ici. Il servait à contenir les décors flottants de la colonne de droite, mais il rognait AUSSI les menus déroulants de la barre de recherche : la liste des types et les suggestions de ville sortent du hero et se retrouvaient coupées. Le confinement est déplacé sur la colonne visuelle, qui est la seule à en avoir besoin. */ .hero { background: linear-gradient(180deg, var(--white), var(--cream)); padding: 60px 0 54px; } .hero-visual { position: relative; overflow: hidden; } .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; } .hero-kicker { color: var(--sage-text); font-weight: 700; font-size: 14px; margin-bottom: 14px; } .hero-title { font-size: 48px; line-height: 1.08; color: var(--ink); letter-spacing: -1.2px; font-weight: 900; } .hero-sub { font-size: 18px; color: var(--text); margin-top: 16px; max-width: 34em; } /* --- visuel : frimousse dans un blob --- */ .hero-visual { position: relative; display: flex; justify-content: center; align-items: center; } .hero-blob { width: 100%; max-width: 380px; aspect-ratio: 1; border-radius: 46% 54% 52% 48% / 54% 46% 54% 46%; background: linear-gradient(140deg, var(--sage), var(--sky)); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); } .hero-masc { width: 62%; height: auto; } /* photo dans le blob : remplit le cercle, cadrée sur le visage */ .hero-blob--photo { overflow: hidden; background: var(--sage-soft); } .hero-blob--photo picture { width: 100%; height: 100%; display: block; } .hero-photo { width: 100%; height: 100%; object-fit: cover; object-position: 44% 31%; display: block; } .hero-float { position: absolute; width: 40px; height: 40px; } .hero-float--1 { top: 6%; left: 4%; } .hero-float--2 { bottom: 10%; right: 2%; width: 34px; height: 34px; } /* --- barre de recherche --- */ .search-bar { /* la barre porte son propre plan : sans position, ses menus déroulants se comparaient aux sections suivantes et passaient dessous */ /* z-index sous celui de l'en-tête (50) : à 100, la barre et ses menus recouvraient la navigation quand on dépliait le menu mobile. */ position: relative; z-index: 40; margin-top: 28px; background: #fff; border-radius: 999px; box-shadow: var(--shadow-lg); padding: 8px 8px 8px 10px; display: flex; align-items: center; gap: 6px; max-width: 620px; } .search-field { padding: 4px 12px; position: relative; } .search-field--type { border-right: 1px solid var(--border); } .search-field--loc { flex: 1; min-width: 140px; } .search-field label { display: block; font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 1px; } .search-field input, .search-field select { width: 100%; border: none; outline: none; font-size: 15px; color: var(--ink); background: transparent; padding: 3px 0; font-family: inherit; font-weight: 600; cursor: pointer; } .search-field select { /* flèche personnalisée (le select natif n'a pas de style) */ -webkit-appearance: none; appearance: none; padding-right: 18px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%2339434D' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right center; } .search-field input { cursor: text; } .search-bar .btn { flex-shrink: 0; } .search-hint { font-size: 13px; color: var(--coral-text); margin-top: 10px; } /* dropdown personnalisé "Je cherche" */ .s-dropdown { position: relative; } .s-dd-btn { display: flex; align-items: center; gap: 8px; border: none; background: transparent; font-family: inherit; font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer; padding: 3px 0; white-space: nowrap; } /* Le libellé occupe une largeur FIXE : les deux choix n'ont pas la même longueur, et sans cela le champ « Où ? » et le bouton se déplaçaient à chaque changement — la barre entière semblait sauter. Le texte plus long est coupé proprement plutôt que de pousser ses voisins. */ #s-dd-label { /* « Une nounou » et « Une famille » font la même longueur : la largeur fixe garantit qu'aucun des deux ne pousse ses voisins, et aucun n'est tronqué. */ display: inline-block; width: 11ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 620px) { /* en pile, la barre n'a plus de voisins à bousculer : on laisse respirer */ #s-dd-label { width: auto; } } .s-dd-arrow { color: var(--muted); transition: transform .18s; flex-shrink: 0; } .s-dropdown.is-open .s-dd-arrow { transform: rotate(180deg); } .s-dd-list { /* au-dessus des sections qui suivent le hero : elles ont leur propre fond et se dessinaient par-dessus le menu ouvert */ position: absolute; top: calc(100% + 12px); left: -12px; z-index: 120; min-width: 210px; list-style: none; margin: 0; padding: 6px; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); } .s-dd-list li { padding: 10px 14px; border-radius: 9px; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; /* la coche reste alignée sur la première ligne, pas centrée sur les deux */ display: flex; align-items: flex-start; gap: 8px; } /* chaque option porte son intitulé et la précision de ce qu'elle couvre */ .s-dd-list li strong { display: block; font-weight: 700; line-height: 1.35; } .s-dd-list li em { display: block; font-style: normal; font-weight: 400; font-size: 12.5px; color: var(--muted, #646D76); line-height: 1.45; margin-top: 1px; } .s-dd-list li.is-selected em { color: var(--sage-text); opacity: .85; } .s-dd-list li:hover { background: var(--sage-soft); } .s-dd-list li.is-selected { background: var(--sage-soft); color: var(--sage-text); } .s-dd-list li.is-selected::before { content: '✓'; font-weight: 800; line-height: 1.35; } .s-dd-list li:not(.is-selected)::before { content: ''; width: 0; } /* menu d'autocomplétion */ .s-suggest { position: absolute; top: calc(100% + 10px); left: -10px; right: -10px; z-index: 120; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; max-height: 280px; overflow-y: auto; } .s-suggest-item { padding: 11px 16px; font-size: 15px; color: var(--ink); font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; } .s-suggest-item span { color: var(--muted); font-weight: 400; font-size: 13px; } .s-suggest-item:hover { background: var(--sage-soft); } .hero-stats { display: flex; gap: 40px; margin-top: 32px; flex-wrap: wrap; } .hero-stats strong { display: block; font-size: 28px; color: var(--ink); font-weight: 900; } .hero-stats span { font-size: 14px; color: var(--muted); } @media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } .hero-visual { order: -1; } .hero-blob { max-width: 260px; } .hero-title { font-size: 36px; } .search-bar { flex-wrap: wrap; border-radius: 20px; } .search-field--type { border-right: none; border-bottom: 1px solid var(--border); width: 100%; } .search-field--loc { width: 100%; } .search-bar .btn { width: 100%; margin-top: 4px; } } /* --- Sections --- */ .section { padding: 56px 0; } .section--alt { background: var(--trame); } .section-title { font-size: 28px; color: var(--ink); font-weight: 800; letter-spacing: -.5px; margin-bottom: 28px; } /* --- Cartes profils --- */ .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; transition: box-shadow .15s ease, transform .1s ease; } .card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } .card-head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; } .avatar { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; background: var(--indigo-soft); color: var(--ink); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 17px; } .card-title { font-size: 16px; color: var(--ink); font-weight: 700; line-height: 1.3; } .card-loc { font-size: 13px; color: var(--muted); } .card-text { font-size: 14px; color: var(--text); flex: 1; margin-bottom: 16px; } .card-foot { display: flex; align-items: center; justify-content: space-between; } .price { font-size: 18px; font-weight: 800; color: var(--ink); } .price small { font-size: 12px; color: var(--muted); font-weight: 400; } .price--muted { font-size: 14px; font-weight: 600; color: var(--muted); } /* --- Bandeau confiance --- */ .trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .trust-item h3 { color: var(--ink); font-size: 18px; margin-bottom: 6px; } .trust-item p { color: var(--text); font-size: 15px; } /* --- Table santé --- */ .health { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .health th, .health td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 14px; } .health th { background: var(--trame); color: var(--ink); font-weight: 700; } .badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; } .badge--ok { background: #dcfce7; color: #166534; } .badge--ko { background: #fee2e2; color: #991b1b; } /* --- Footer --- */ .site-footer { background: var(--ink); color: #c7c7e0; padding: 40px 0 20px; margin-top: 40px; } .footer-inner { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .footer-brand { max-width: 260px; } .footer-brand .brand-word { color: #fff; } .footer-brand p { font-size: 14px; margin-top: 8px; color: #a9b0b5; } .footer-col { display: flex; flex-direction: column; gap: 9px; } .footer-col h3 { font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 800; color: #fff; margin-bottom: 4px; } .footer-col a { color: #c1c8cc; font-size: 14px; } .footer-col a:hover { color: #fff; text-decoration: none; } .footer-legal { margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); font-size: 13px; color: #b9bad6; } /* --- Responsive --- */ @media (max-width: 900px) { .cards { grid-template-columns: repeat(2, 1fr); } .trust { grid-template-columns: 1fr; gap: 20px; } .hero-title { font-size: 36px; } } @media (max-width: 640px) { .cards { grid-template-columns: 1fr; } .site-nav { gap: 14px; } /* ⚠️ ne masquer QUE les liens de nav DIRECTS (« Nounous », « Baby-sitters »), pas les liens À L'INTÉRIEUR des popups. Le sélecteur large « .site-nav a » attrapait aussi les .account-item : leur texte disparaissait, l'icône restait — d'où « juste le tiret, pas de texte ». Le « > » restreint aux enfants directs. */ .site-nav > a:not(.btn) { display: none; } .hero-stats { gap: 24px; } .hero-title { font-size: 30px; } } /* ============================================================ Tunnel d'inscription ============================================================ */ .tunnel { min-height: calc(100vh - 68px); background: var(--trame); display: flex; flex-direction: column; align-items: center; padding: 0 20px 60px; } .tunnel-bar { width: 100%; max-width: 560px; height: 6px; background: var(--indigo-soft); border-radius: 999px; margin: 28px 0 32px; overflow: hidden; } .tunnel-bar span { display: block; height: 100%; background: var(--indigo); border-radius: 999px; transition: width .3s ease; } .tunnel-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 40px; width: 100%; max-width: 560px; } .tunnel-step { color: var(--indigo); font-weight: 600; font-size: 13px; margin-bottom: 10px; } .tunnel-q { font-size: 26px; color: var(--ink); font-weight: 800; letter-spacing: -.5px; line-height: 1.2; } .tunnel-help { color: var(--muted); font-size: 15px; margin-top: 8px; margin-bottom: 24px; } .tunnel-form { margin-top: 8px; } .field { margin-bottom: 18px; } .field-row { display: flex; gap: 14px; } .field-row .field { flex: 1; } .field label, .field-label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 6px; } .field input, .field select, .field textarea { width: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size: 15px; color: var(--ink); font-family: inherit; transition: border-color .15s ease; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--indigo); } .field textarea { resize: vertical; } .btn-block { width: 100%; margin-top: 8px; } .choice-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 24px; } .choice-grid--2 { grid-template-columns: 1fr 1fr; } .choice { position: relative; display: flex; align-items: center; padding: 16px 18px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: border-color .12s ease, background .12s ease; } .choice:hover { border-color: var(--indigo); background: var(--trame); } .choice input { position: absolute; opacity: 0; } .choice-label { font-size: 15px; font-weight: 600; color: var(--ink); } .choice input:checked ~ .choice-label { color: var(--indigo); } .choice:has(input:checked) { border-color: var(--indigo); background: var(--indigo-soft); } .choice--locked { opacity: .7; cursor: default; } .consent { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; font-size: 14px; color: var(--text); line-height: 1.5; } .consent input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--indigo); } .tunnel-legal { font-size: 12px; color: var(--muted); margin-top: 16px; text-align: center; } .merci-check { width: 72px; height: 72px; border-radius: 50%; background: var(--success); color: #fff; font-size: 38px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; } @media (max-width: 560px) { .tunnel-card { padding: 28px 20px; } .choice-grid--2 { grid-template-columns: 1fr; } .field-row { flex-direction: column; gap: 0; } .tunnel-q { font-size: 22px; } } /* ============================================================ Modale d'inscription (tunnel JS) ============================================================ */ .modal { position: fixed; inset: 0; z-index: 1000; display: none; } .modal.is-open { display: block; } .modal-overlay { position: absolute; inset: 0; background: rgba(36, 30, 99, .55); backdrop-filter: blur(2px); animation: fade .2s ease; } .modal-box { position: relative; z-index: 1; background: #fff; width: 100%; max-width: 520px; margin: 40px auto; border-radius: 20px; box-shadow: 0 20px 60px rgba(36,30,99,.3); max-height: calc(100vh - 80px); overflow: hidden; display: flex; flex-direction: column; animation: pop .22s cubic-bezier(.2,.9,.3,1.2); } @keyframes fade { from { opacity: 0 } to { opacity: 1 } } @keyframes pop { from { transform: translateY(16px) scale(.97); opacity: 0 } to { transform: none; opacity: 1 } } .modal-close { position: absolute; top: 14px; right: 16px; z-index: 2; width: 34px; height: 34px; border: none; background: #f0f0f5; border-radius: 50%; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; transition: background .15s, color .15s; } .modal-close:hover { background: var(--indigo-soft); color: var(--ink); } .modal-bar { height: 5px; background: var(--indigo-soft); flex-shrink: 0; } .modal-bar span { display: block; height: 100%; width: 9%; background: var(--indigo); transition: width .3s ease; } .modal-body { padding: 40px 36px 32px; overflow-y: auto; } .mf-step { color: var(--indigo); font-weight: 600; font-size: 13px; margin-bottom: 8px; } .mf-q { font-size: 24px; color: var(--ink); font-weight: 800; letter-spacing: -.5px; line-height: 1.2; } .mf-help { color: var(--muted); font-size: 14px; margin-top: 8px; } .mf-content { margin-top: 22px; } .mf-field { margin-bottom: 16px; } .mf-row { display: flex; gap: 12px; } .mf-row .mf-field { flex: 1; } .mf-field label, .mf-label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 6px; } .mf-label { margin-top: 8px; } .mf-field input, .mf-field select, .mf-field textarea { width: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 10px; font-size: 15px; color: var(--ink); font-family: inherit; box-sizing: border-box; transition: border-color .15s; } .mf-field input:focus, .mf-field select:focus, .mf-field textarea:focus { outline: none; border-color: var(--indigo); } .mf-field textarea { resize: vertical; } .mf-grid { display: grid; grid-template-columns: 1fr; gap: 10px; } .mf-grid--2 { grid-template-columns: 1fr 1fr; } .mf-choice { display: flex; align-items: center; padding: 15px 16px; border: 1.5px solid var(--border); border-radius: 10px; cursor: pointer; transition: border-color .12s, background .12s; user-select: none; } .mf-choice:hover { border-color: var(--indigo); background: var(--trame); } .mf-choice input { position: absolute; opacity: 0; width: 0; height: 0; } .mf-choice-label { font-size: 15px; font-weight: 600; color: var(--ink); } .mf-choice.is-on { border-color: var(--indigo); background: var(--indigo-soft); } .mf-choice.is-on .mf-choice-label { color: var(--indigo); } .mf-choice--locked { opacity: .65; cursor: default; background: var(--trame); } .mf-consent { display: flex; gap: 11px; align-items: flex-start; padding: 11px 0; font-size: 14px; color: var(--text); line-height: 1.5; cursor: pointer; } .mf-consent input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--indigo); } .mf-legal { font-size: 12px; color: var(--muted); margin-top: 14px; } .mf-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 28px; } .mf-actions .btn-primary { min-width: 140px; } .btn-ghost { background: transparent; color: var(--muted); border: none; font-weight: 600; cursor: pointer; padding: 10px 4px; } .btn-ghost:hover { color: var(--ink); } .mf-err { color: var(--danger-text); font-size: 14px; margin-top: 12px; text-align: center; } .mf-done { text-align: center; padding: 10px 0 6px; } .mf-check { width: 68px; height: 68px; border-radius: 50%; background: var(--success); color: #fff; font-size: 34px; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; } @media (max-width: 560px) { /* 100vh ment sur mobile : il compte la zone masquée par la barre du navigateur. Les boutons du tunnel tombaient donc dessous, invisibles. dvh suit la hauteur RÉELLEMENT visible ; on garde vh en repli pour les navigateurs qui l'ignorent, et on réserve de la marge en bas. */ .modal-box { margin: 0; min-height: 100vh; max-height: 100vh; border-radius: 0; } @supports (height: 100dvh) { .modal-box { min-height: 100dvh; max-height: 100dvh; } } .modal-body { padding: 32px 22px calc(56px + env(safe-area-inset-bottom, 0px)); } .mf-grid--2 { grid-template-columns: 1fr; } .mf-row { flex-direction: column; gap: 0; } .mf-q { font-size: 21px; } } /* --- Autocomplétion communes --- */ .mf-autocomplete { position: relative; } .mf-suggest { /* z-index au-dessus de la modale (1000) : la liste est passée en position FIXE par le script pour échapper au rognage du conteneur qui défile — elle sort donc du plan de la modale et doit repasser devant. */ position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; z-index: 1010; background: #fff; border: 1.5px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); overflow: hidden; max-height: 260px; overflow-y: auto; } .mf-suggest-item { padding: 11px 14px; cursor: pointer; font-size: 15px; color: var(--ink); display: flex; justify-content: space-between; align-items: center; } .mf-suggest-item:hover { background: var(--indigo-soft); } .mf-suggest-cp { color: var(--muted); font-size: 13px; font-weight: 600; } /* --- Confirmation d'adresse sélectionnée --- */ .mf-hint { font-size: 13px; font-weight: 600; color: var(--success-text); margin-top: 8px; } /* ============================================================ Éléments graphiques du tunnel (icônes, frimousses, drapeaux) ============================================================ */ /* choix avec icône à gauche */ .mf-choice--ico { gap: 12px; } .mf-choice-ico { width: 30px; height: 30px; flex-shrink: 0; object-fit: contain; } .mf-grid--ico .mf-choice { justify-content: flex-start; } /* frimousse en tête d'étape */ .mf-masc { display: block; width: 76px; height: 76px; margin: -6px auto 16px; } /* frimousse sur l'écran de fin */ .mf-done-masc { width: 96px; height: 96px; margin: 0 auto 18px; display: block; } /* les drapeaux ronds ont une légère ombre pour ressortir sur fond clair */ .mf-choice-ico[src*="flags/"] { border-radius: 50%; box-shadow: 0 1px 4px rgba(36,30,99,.15); } /* Icônes du bandeau confiance (accueil) */ .trust-item { text-align: center; } .trust-ico { width: 56px; height: 56px; margin: 0 auto 14px; display: block; } /* ============================================================ Pages de résultats (ville) ============================================================ */ .res-hero { background: var(--trame); padding: 36px 0 28px; border-bottom: 1px solid var(--border); } .breadcrumb { font-size: 13px; color: var(--muted); margin-bottom: 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .breadcrumb a { color: var(--indigo); } .breadcrumb strong { color: var(--ink); } .res-h1 { font-size: 30px; color: var(--ink); font-weight: 800; letter-spacing: -.5px; } .res-cp { color: var(--muted); font-weight: 600; font-size: 22px; } .res-count { color: var(--muted); font-size: 15px; margin-top: 6px; } /* ============================================================ Page résultats — layout 2 colonnes + liste horizontale ============================================================ */ .res-layout { display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: start; padding-top: 28px; padding-bottom: 40px; } /* ---- Colonne gauche ---- */ /* ---- Colonne gauche : elle doit rester atteignable ---- Elle était simplement « collante ». Dès qu'elle dépassait la hauteur de l'écran — ce qui arrive vite avec vingt arrondissements — son bas devenait inaccessible : elle cessait de bouger, et le reste de la page défilait sans elle. Il fallait dérouler tous les résultats pour espérer la revoir. Deux corrections : · une hauteur maximale, et son propre défilement : on atteint toujours son bas, sans dépendre de celui de la page ; · les blocs secondaires (arrondissements, communes voisines, autres types) deviennent dépliables et fermés par défaut, pour que l'essentiel — recherche et filtres — tienne à l'écran. */ .res-side { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 16px; max-height: calc(100vh - 40px); overflow-y: auto; /* on décale la barre de défilement hors du contenu */ padding-right: 4px; margin-right: -4px; scrollbar-width: thin; } .res-side::-webkit-scrollbar { width: 6px; } .res-side::-webkit-scrollbar-thumb { background: #dcd7cf; border-radius: 3px; } .res-side::-webkit-scrollbar-track { background: transparent; } .side-title { font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 12px; } .res-filters, .side-block { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 18px; } .filter-group { margin-bottom: 14px; } .filter-group > label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; } .filter-group input[type=number], .filter-group select { width: 100%; padding: 9px 11px; border: 1.5px solid var(--border); border-radius: 10px; font-size: 14px; font-family: inherit; color: var(--ink); background: #fff; } .filter-group select { -webkit-appearance: none; appearance: none; padding-right: 32px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%2339434D' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; } .filter-group select:focus, .filter-group input:focus { border-color: var(--sage-text); } .filter-group input:focus, .filter-group select:focus { outline: none; border-color: var(--indigo); } /* Cases des filtres : la case système ne se met pas aux couleurs du site et change d'aspect d'un navigateur à l'autre. On la masque — sans la retirer, pour garder le clavier et les lecteurs d'écran — et on dessine la nôtre. */ .filter-check { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 500; color: var(--text); padding: 7px 9px; margin: 0 -9px 2px; border-radius: 9px; cursor: pointer; transition: background .12s; } .filter-check:hover { background: var(--trame, #f6f3ee); } .filter-check input { position: absolute; opacity: 0; width: 1px; height: 1px; } .filter-check::before { content: ''; flex-shrink: 0; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border); background: #fff; transition: background .14s, border-color .14s; } .filter-check:has(input:checked), .filter-check.is-on { color: var(--sage-text, #5a8a72); font-weight: 700; background: var(--sage-soft, #EEF5F1); box-shadow: inset 0 0 0 1.5px var(--sage, #A8C8B8); } .filter-check:has(input:checked)::before, .filter-check.is-on::before { background: var(--sage-deep); border-color: var(--sage-text); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: 13px; background-repeat: no-repeat; background-position: center; } .filter-check:focus-within::before { border-color: var(--sage-text); box-shadow: 0 0 0 3px rgba(143,182,163,.25); } .btn-block { width: 100%; justify-content: center; } .filter-reset { display: block; text-align: center; font-size: 13px; color: var(--muted); margin-top: 10px; } .side-links { list-style: none; display: flex; flex-direction: column; gap: 2px; } .side-links a { display: flex; justify-content: space-between; padding: 8px 10px; border-radius: 9px; font-size: 14px; color: var(--ink); font-weight: 500; } .side-links a:hover { background: var(--trame); color: var(--indigo); text-decoration: none; } .side-links span { color: var(--muted); font-weight: 400; font-size: 13px; } /* ---- Liste (1 annonce par ligne) ---- */ .res-list { display: flex; flex-direction: column; gap: 16px; } .ann { display: flex; gap: 20px; background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 22px; transition: box-shadow .16s, transform .1s, border-color .16s; } .ann:hover { box-shadow: 0 12px 34px rgba(36,30,99,.09); transform: translateY(-2px); border-color: var(--indigo-soft); } .ann-avatar { position: relative; width: 92px; height: 92px; border-radius: 50%; flex-shrink: 0; overflow: hidden; background: var(--indigo-soft); } .ann-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .ann-avatar-ph { object-fit: contain; } .ann-avatar.has-photo { box-shadow: 0 2px 10px rgba(36,30,99,.12); } .ann-verif { position: absolute; right: 0; bottom: 2px; width: 28px; height: 28px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 5px rgba(36,30,99,.22); } .ann-verif img { width: 22px; height: 22px; } .ann-body { flex: 1; min-width: 0; } .ann-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .ann-name { font-size: 20px; font-weight: 800; color: var(--ink); line-height: 1.2; } /* Commune de la personne, puis écart avec celle qu'on a cherchée. La commune est mise en avant : c'est elle qu'on lit d'abord, la distance vient la situer. */ .ann-loc { font-size: 14px; color: var(--muted); margin-top: 2px; line-height: 1.45; } .ann-loc strong { color: var(--ink); font-weight: 700; } .ann-dist { color: var(--indigo); font-weight: 600; } .ann-dist::before { content: '· '; color: var(--muted); font-weight: 400; } .ann-price { font-size: 24px; font-weight: 800; color: var(--ink); white-space: nowrap; } .ann-price small { font-size: 13px; color: var(--muted); font-weight: 400; } .ann-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .ann-title { font-size: 14.5px; font-weight: 700; color: var(--indigo-deep); margin-top: 10px; } .ann-text { font-size: 14.5px; color: var(--text); line-height: 1.55; margin-top: 6px; } .ann-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; flex-wrap: wrap; } .ann-pills { display: flex; flex-wrap: wrap; gap: 7px; } .ann-cta { padding: 9px 18px; font-size: 14px; white-space: nowrap; } /* pastilles partagées */ .res-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ink); background: var(--trame); border: 1px solid var(--border); padding: 4px 10px; border-radius: 999px; } .res-pill img { width: 14px; height: 14px; } .res-pill--sky { background: var(--sky-soft); border-color: transparent; color: #1c6a94; } .res-pill--mint { background: var(--mint-soft); border-color: transparent; color: #1f7a58; } .res-badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; } .res-badge--green { background: var(--mint-soft); color: #1f7a58; } .res-badge--soft { background: var(--indigo-soft); color: var(--indigo-deep); } .res-empty { text-align: center; padding: 50px 20px; background: #fff; border: 1px solid var(--border); border-radius: 18px; } .res-empty h2 { color: var(--ink); font-size: 20px; margin: 16px 0 6px; } /* responsive */ @media (max-width: 860px) { .res-layout { grid-template-columns: 1fr; } .res-side { position: static; order: 2; max-height: none; overflow: visible; } .res-list { order: 1; } } @media (max-width: 560px) { .ann { flex-direction: column; } .ann-avatar { width: 72px; height: 72px; } .res-h1 { font-size: 24px; } } /* ============================================================ Page racine d'un type (/annonce/{type}) — départements + villes ============================================================ */ .type-hero { background: linear-gradient(180deg, var(--white), var(--cream)); padding: 40px 0 44px; } .type-h1 { font-size: 36px; color: var(--ink); font-weight: 900; letter-spacing: -.8px; margin-top: 6px; } .type-sub { font-size: 17px; color: var(--text); margin-top: 12px; max-width: 60ch; } .type-search { margin-top: 24px; max-width: 560px; } .type-search .search-field--loc { flex: 1; } /* grille départements : 4 colonnes */ .dep-grid { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 20px; margin: 0; padding: 0; } .dep-grid a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--ink); font-weight: 600; font-size: 14.5px; transition: background .12s; } .dep-grid a:hover { background: var(--sage-soft); text-decoration: none; } .dep-code { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 24px; padding: 0 6px; background: var(--cream); border: 1px solid var(--border); border-radius: 7px; font-size: 12px; font-weight: 800; color: var(--sage-text); } .dep-grid a:hover .dep-code { background: #fff; } /* grille grandes villes */ .ville-grid { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 20px; margin: 0; padding: 0; } .ville-grid a { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-radius: 10px; color: var(--ink); font-weight: 600; font-size: 14.5px; } .ville-grid a:hover { background: #fff; text-decoration: none; box-shadow: var(--shadow); } .ville-grid span { color: var(--muted); font-weight: 400; font-size: 13px; } @media (max-width: 860px) { .dep-grid, .ville-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .dep-grid, .ville-grid { grid-template-columns: 1fr; } } /* ============================================================ Fiche profil (/{Prenom}-{type}-{ville}-{uid}) ============================================================ */ .profil-wrap { padding: 24px 0 60px; } .profil-grid { display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: start; margin-top: 8px; } /* --- entête --- */ .profil-head { display: flex; align-items: flex-start; gap: 20px; position: relative; background: linear-gradient(135deg, var(--sage-soft), var(--coral-soft)); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; } .profil-avatar { width: 104px; height: 104px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--sage-soft); position: relative; } .profil-avatar img, .profil-avatar picture { width: 100%; height: 100%; object-fit: cover; display: block; } .profil-avatar:not(.has-photo) img { object-fit: contain; padding: 14px; } .profil-verif { position: absolute; right: 2px; bottom: 2px; width: 28px; height: 28px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); } .profil-verif img { width: 18px; height: 18px; } .profil-head-info { flex: 1; min-width: 0; } .profil-name { font-size: 28px; font-weight: 900; color: var(--ink); letter-spacing: -.5px; } .profil-age { font-size: 18px; font-weight: 600; color: var(--muted); } .profil-role { color: var(--text); margin-top: 3px; font-weight: 600; } .profil-role a { color: var(--sage-text); } .profil-en-recherche { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--coral-text); background: var(--coral-soft); padding: 3px 10px; border-radius: 999px; } .profil-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } /* cœur coup de cœur (entête) */ .fav-btn { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); background: #fff; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; } .fav-btn:hover { color: var(--coral); border-color: var(--coral); } .fav-btn.is-fav { color: var(--coral); border-color: var(--coral); } .fav-btn.is-fav svg path { fill: var(--coral); stroke: var(--coral); } /* --- chiffres clés --- */ .profil-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-top: 16px; } .fact { border-radius: 14px; padding: 16px; text-align: center; border: 1px solid transparent; } .fact:nth-child(4n+1) { background: var(--sage-soft); border-color: #d9e8e0; } .fact:nth-child(4n+2) { background: var(--coral-soft); border-color: #f8dcd7; } .fact:nth-child(4n+3) { background: #FEF6E0; border-color: #f5e6bd; } .fact:nth-child(4n+4) { background: #E7F1F8; border-color: #cfe3f0; } .fact-label { display: block; font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; } .fact-val { display: block; font-size: 20px; font-weight: 800; color: var(--ink); margin-top: 4px; } .fact-val small { font-size: 13px; font-weight: 600; color: var(--muted); } /* --- blocs --- */ .profil-block { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-top: 16px; } .profil-block h2 { font-size: 19px; font-weight: 800; color: var(--ink); margin-bottom: 14px; } .profil-presentation { color: var(--text); line-height: 1.7; } .qual-list { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .qual-list li { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--ink); font-weight: 600; } .qual-list img { width: 18px; height: 18px; flex-shrink: 0; } .qual-sub { margin-top: 18px; } .qual-sub h3 { font-size: 14px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 10px; } .lang-list, .comp-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; } .lang-list li, .comp-list li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 8px; background: var(--cream); border: 1px solid var(--border); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink); } .lang-flag { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0,0,0,.06); } .comp-list img { width: 18px; height: 18px; flex-shrink: 0; } .cadre-list { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; } .cadre-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--sage-soft); font-weight: 600; color: var(--ink); } .cadre-list li span { color: var(--muted); font-weight: 500; } .dispo-flags { display: flex; flex-wrap: wrap; gap: 8px; } /* tableau des heures souhaitées */ .dispo-table-wrap { overflow-x: auto; } .dispo-table { border-collapse: collapse; width: 100%; min-width: 380px; } .dispo-table th, .dispo-table td { text-align: center; padding: 9px 6px; font-size: 13.5px; } .dispo-table thead th { color: var(--muted); font-weight: 700; border-bottom: 1px solid var(--border); } .dispo-row-label { text-align: left !important; color: var(--ink); font-weight: 700; white-space: nowrap; padding-right: 12px !important; } .dispo-table td { border: 1px solid var(--sage-soft); border-radius: 6px; } .dispo-table td.is-on { background: var(--sage-soft); } .dispo-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--sage-deep); } .zone-txt { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); } .zone-note { font-size: 13px; color: var(--muted); margin-top: 8px; } /* --- colonne latérale --- */ .profil-side { position: sticky; top: 88px; } .profil-cta-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); } .cta-tarif { font-size: 26px; font-weight: 900; color: var(--ink); text-align: center; margin-bottom: 14px; } .cta-tarif small { font-size: 14px; font-weight: 600; color: var(--muted); } .btn-block { width: 100%; display: block; text-align: center; } .fav-btn-lg { margin-top: 10px; } .fav-btn-lg.is-fav { border-color: var(--coral); color: var(--coral-text); background: var(--coral-soft); } .verif-list { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); } .verif-list h3 { font-size: 14px; font-weight: 800; color: var(--ink); margin-bottom: 10px; } .verif-list p { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 7px 0; font-weight: 600; } .verif-list p.ok { color: var(--sage-text); } .verif-list p.off { color: var(--muted); opacity: .7; } .reponse-list { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); } .reponse-list p { display: flex; justify-content: space-between; align-items: center; margin: 8px 0; font-size: 14px; } .reponse-list span { color: var(--muted); } .reponse-list strong { color: var(--ink); font-weight: 800; } .signaler { margin-top: 16px; text-align: center; } .signaler a { font-size: 12.5px; color: var(--muted); } @media (max-width: 860px) { .profil-grid { grid-template-columns: 1fr; } .profil-side { position: static; } .qual-list, .cadre-list { grid-template-columns: 1fr; } .fav-btn { top: 14px; right: 14px; } /* garde-fous anti-débordement horizontal sur mobile : rien ne doit dépasser la largeur de l'écran. */ .profil-grid, .profil-head, .profil-block, .profil-side { max-width: 100%; min-width: 0; } .profil-grid > * { min-width: 0; } .profil-presentation, .profil-block, .profil-head-info { overflow-wrap: anywhere; word-break: break-word; } .profil-name { overflow-wrap: anywhere; } .dispo-table-wrap { max-width: 100%; } } /* ============================================================ Page "Mes coups de cœur" ============================================================ */ .fav-page { padding: 32px 0 60px; } .fav-page-title { font-size: 32px; font-weight: 900; color: var(--ink); letter-spacing: -.6px; } .fav-page-sub { color: var(--text); margin-top: 8px; } .fav-loading { color: var(--muted); padding: 30px 0; } .fav-empty { text-align: center; padding: 40px 0; } .fav-empty h2 { font-size: 22px; color: var(--ink); font-weight: 800; margin: 16px 0 6px; } .fav-empty p { color: var(--muted); margin-bottom: 20px; } .fav-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 24px; } .favc { position: relative; display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; transition: box-shadow .15s, transform .15s; } .favc:hover { text-decoration: none; box-shadow: var(--shadow-lg); transform: translateY(-2px); } .favc-photo { width: 68px; height: 68px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--sage-soft); } .favc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .favc-photo--ph img { object-fit: contain; padding: 10px; } .favc-body { flex: 1; min-width: 0; } .favc-name { font-size: 17px; font-weight: 800; color: var(--ink); } .favc-role { font-size: 13.5px; color: var(--muted); margin-top: 2px; } .favc-tarif { display: inline-block; margin-top: 6px; font-weight: 800; color: var(--ink); font-size: 15px; } .favc-tarif small { font-size: 12px; color: var(--muted); font-weight: 600; } .favc-remove { position: absolute; top: 8px; right: 10px; width: 26px; height: 26px; border: none; background: var(--cream); border-radius: 50%; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .favc-remove:hover { background: var(--coral-soft); color: var(--coral); } /* ============================================================ Authentification — popup login, page connexion, OAuth ============================================================ */ .nav-login { border: none; background: transparent; font-family: inherit; font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer; padding: 8px 4px; } .nav-login:hover { color: var(--sage-text); } .nav-logout { font-size: 13px; color: var(--muted); } .nav-logout:hover { color: var(--coral); text-decoration: none; } /* popup */ .login-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; } .login-modal[hidden] { display: none; } .login-overlay { position: absolute; inset: 0; background: rgba(40,45,50,.55); backdrop-filter: blur(2px); } .login-box { position: relative; z-index: 1; width: 100%; max-width: 420px; background: #fff; border-radius: 22px; padding: 30px 28px; box-shadow: 0 24px 60px rgba(0,0,0,.28); max-height: 92vh; overflow-y: auto; } .login-close { position: absolute; top: 14px; right: 16px; width: 34px; height: 34px; border: none; background: var(--cream); border-radius: 50%; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; } .login-close:hover { background: var(--coral-soft); color: var(--coral); } .login-brand { text-align: center; margin-bottom: 14px; } .login-title, .auth-title { font-size: 24px; font-weight: 900; color: var(--ink); text-align: center; letter-spacing: -.4px; } .login-sub, .auth-sub { text-align: center; color: var(--muted); font-size: 14.5px; margin: 6px 0 20px; } /* boutons OAuth */ .login-oauth { display: flex; flex-direction: column; gap: 10px; } .oauth-btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; border: 1.5px solid var(--border); border-radius: 12px; font-weight: 700; font-size: 15px; color: var(--ink); background: #fff; transition: background .12s, border-color .12s; } .oauth-btn:hover { background: var(--cream); text-decoration: none; border-color: #d5d5d5; } .login-sep { display: flex; align-items: center; text-align: center; color: var(--muted); font-size: 13px; margin: 18px 0; } .login-sep::before, .login-sep::after { content: ''; flex: 1; height: 1px; background: var(--border); } .login-sep span { padding: 0 12px; } /* formulaire */ .login-form { display: flex; flex-direction: column; gap: 14px; } .login-field label { display: block; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 5px; } .login-field input { width: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 11px; font-size: 15px; font-family: inherit; } .login-field input:focus { outline: none; border-color: var(--sage-text); } .login-row { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; } .login-check { display: flex; align-items: center; gap: 7px; color: var(--text); cursor: pointer; font-weight: 600; } .login-check input { width: 16px; height: 16px; accent-color: var(--sage-text); } .login-forgot { color: var(--sage-text); font-weight: 600; } .login-err { background: var(--coral-soft); color: var(--coral-text); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; font-weight: 600; } .login-signup { text-align: center; margin-top: 18px; font-size: 14px; color: var(--muted); } .login-signup-link { border: none; background: none; color: var(--coral-text); font-weight: 800; font-family: inherit; font-size: 14px; cursor: pointer; padding: 0; } /* page connexion dédiée */ .auth-page { display: flex; justify-content: center; padding: 48px 0 70px; } .auth-card { width: 100%; max-width: 440px; background: #fff; border: 1px solid var(--border); border-radius: 22px; padding: 34px 30px; box-shadow: var(--shadow); } .auth-card--center { text-align: center; } .auth-card--center .btn { margin-top: 18px; } /* ============================================================ Menu déroulant "Mon compte" (header) ============================================================ */ .account-menu { position: relative; } .account-btn { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--border); background: #fff; border-radius: 999px; padding: 5px 12px 5px 6px; cursor: pointer; font-family: inherit; font-weight: 700; color: var(--ink); font-size: 14.5px; transition: border-color .12s; } .account-btn:hover, .account-menu.is-open .account-btn { border-color: var(--sage-text); } .account-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--sage); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; } .account-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-arrow { color: var(--muted); transition: transform .18s; } .account-menu.is-open .account-arrow { transform: rotate(180deg); } .account-pop { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; min-width: 210px; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 6px; } .account-pop::before { content: ''; position: absolute; top: -6px; right: 18px; width: 12px; height: 12px; background: #fff; border-left: 1px solid var(--border); border-top: 1px solid var(--border); transform: rotate(45deg); } /* ⚠️ MOBILE — placé APRÈS la règle de base pour la surcharger (la cascade fait gagner la dernière règle à spécificité égale). Sinon le popup reste calé sur « right: 0 » et déborde à droite, à moitié hors de l'écran. Étendu à 860px : entre 480 et 860 px, AUCUNE règle mobile ne s'appliquait. */ @media (max-width: 860px) { .account-pop { position: fixed; top: 62px; left: 10px; right: 10px; min-width: 0; width: auto; max-height: 75vh; overflow-y: auto; } .account-pop::before { display: none; } /* la flèche n'a plus de sens plein cadre */ .account-item { padding: 13px 14px; font-size: 15px; } /* cible tactile ~44px */ } .account-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px; color: var(--ink); font-weight: 600; font-size: 14.5px; } .account-item img { width: 18px; height: 18px; } .account-item:hover { background: var(--sage-soft); text-decoration: none; } .account-sep { height: 1px; background: var(--border); margin: 6px 4px; } .account-item--logout { color: var(--coral-text); } .account-item--logout:hover { background: var(--coral-soft); } /* ============================================================ Espace membre — tableau de bord ============================================================ */ .compte-wrap { padding: 28px 0 60px; } /* Deux colonnes sur ORDINATEUR : la navigation latérale sert de repère de position, et la place ne manque pas. Sur mobile en revanche elle disparaît (voir plus bas) : le menu du header reprend toutes ses entrées, et deux menus pour les mêmes liens, c'en serait un de trop sur un petit écran. */ .compte-layout { display: grid; grid-template-columns: 230px 1fr; gap: 28px; align-items: start; } /* navigation par onglets */ .compte-nav { display: flex; flex-direction: column; gap: 3px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; position: sticky; top: 88px; } .compte-tab { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 11px; color: var(--ink); font-weight: 600; font-size: 14.5px; } .compte-tab img { width: 20px; height: 20px; opacity: .8; } .compte-tab:hover { background: var(--sage-soft); text-decoration: none; } .compte-tab.is-active { background: var(--sage); color: var(--ink); font-weight: 800; } .compte-nav-sep { height: 1px; background: var(--border); margin: 8px 4px; } .compte-nav-hr { border: 0; height: 1px; background: var(--border, #e6e6ee); opacity: .55; margin: 10px 10px; } .compte-tab--danger { color: var(--coral-text); font-size: 13.5px; } .compte-tab--danger:hover { background: var(--coral-soft); } .compte-tab--logout { color: var(--muted); font-size: 13.5px; } .compte-nav-toggle { display: none; } .compte-main { min-width: 0; } .compte-h1 { font-size: 26px; font-weight: 900; color: var(--ink); letter-spacing: -.5px; margin-bottom: 18px; } /* Messages d'information. Le fond blanc ne suffisait pas : noyé dans une page claire, le bandeau passait inaperçu. On teinte franchement le fond, on épaissit la barre d'accent, et la pastille devient pleine. Le texte reste en encre foncée (contraste 8:1) : la couleur SIGNALE, elle ne porte pas la lecture. */ .compte-flash { position: relative; display: flex; align-items: center; gap: 14px; background: #E7F3EC; color: var(--ink); border: 1px solid #bcdcc9; border-left: 7px solid #2e9e68; border-radius: 14px; padding: 16px 20px; font-weight: 700; font-size: 15px; line-height: 1.5; margin-bottom: 20px; box-shadow: 0 4px 16px rgba(46, 158, 104, .13); animation: flashIn .38s cubic-bezier(.2, .9, .3, 1); } .compte-flash::before { content: ''; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: #2e9e68 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 17px no-repeat; box-shadow: 0 2px 7px rgba(46, 158, 104, .4); } .compte-flash--err { background: #FDECE9; border-color: #f5c5bd; border-left-color: #D4574A; box-shadow: 0 4px 16px rgba(212, 87, 74, .14); } .compte-flash--err::before { background: #D4574A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='7' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") center / 17px no-repeat; box-shadow: 0 2px 7px rgba(212, 87, 74, .4); } @keyframes flashIn { from { opacity: 0; transform: translateY(-9px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .compte-flash { animation: none; } } /* accueil */ .compte-welcome { display: flex; align-items: center; gap: 20px; background: linear-gradient(135deg, var(--sage-soft), var(--coral-soft)); border-radius: var(--radius); padding: 24px; margin-bottom: 22px; } .compte-welcome-avatar { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: #fff; } .compte-welcome-avatar img, .compte-welcome-avatar picture { width: 100%; height: 100%; object-fit: cover; display: block; } .compte-welcome-avatar:not(.has-photo) img { object-fit: contain; padding: 12px; } .compte-welcome-sub { color: var(--text); margin-top: 4px; } .compte-lastlogin { font-size: 13px; color: var(--muted); margin-top: 6px; } .compte-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; } .compte-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 22px 18px; text-align: center; transition: box-shadow .15s, transform .15s; display: flex; flex-direction: column; align-items: center; gap: 6px; } .compte-card:hover { text-decoration: none; box-shadow: var(--shadow-lg); transform: translateY(-2px); } .compte-card-num { font-size: 32px; font-weight: 900; color: var(--sage-text); } .compte-card-ico { margin-bottom: 2px; } .compte-card-label { color: var(--ink); font-weight: 700; font-size: 14px; } /* formulaire infos */ .compte-form { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; } .cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } .cf-field label { display: block; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 5px; } .cf-field input { width: 100%; padding: 11px 13px; border: 1.5px solid var(--border); border-radius: 11px; font-size: 15px; font-family: inherit; } .cf-field input:focus { outline: none; border-color: var(--sage-text); } .cf-err { color: var(--coral-text); font-size: 12.5px; font-weight: 600; margin-top: 4px; display: block; } .cf-readonly { background: var(--cream); border-radius: 12px; padding: 16px; margin-bottom: 18px; } .cf-readonly p { display: flex; justify-content: space-between; margin: 6px 0; font-weight: 600; color: var(--ink); } .cf-readonly span { color: var(--muted); font-weight: 500; } .cf-note { color: var(--muted); font-size: 12.5px; } /* photo */ .photo-manage { display: grid; grid-template-columns: 200px 1fr; gap: 28px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; align-items: start; } .photo-current { width: 200px; height: 200px; border-radius: 50%; overflow: hidden; background: var(--sage-soft); } .photo-current img, .photo-current picture { width: 100%; height: 100%; object-fit: cover; display: block; } .photo-current:not(.has-photo) img { object-fit: contain; padding: 24px; } .photo-hint { color: var(--text); margin-bottom: 16px; } .photo-drop { display: flex; align-items: center; justify-content: center; text-align: center; border: 2px dashed var(--sage); border-radius: 14px; padding: 30px; cursor: pointer; color: var(--muted); background: var(--sage-soft); transition: background .12s; } .photo-drop:hover { background: #e3efe9; } .photo-drop.has-file { border-style: solid; color: var(--sage-text); } .photo-drop-txt small { color: var(--muted); } .photo-filename { margin: 12px 0; font-weight: 600; color: var(--ink); } .photo-upload .btn { margin-top: 14px; } /* annonces */ .annonce-manage-list { display: flex; flex-direction: column; gap: 14px; } .am-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; flex-wrap: wrap; } /* Sans min-width:0, un enfant flex refuse de rétrécir sous la largeur de son contenu : un titre d'annonce un peu long débordait donc la carte à droite. */ .am-info { flex: 1 1 220px; min-width: 0; } .am-title, .am-meta { overflow-wrap: anywhere; } .am-badge { display: inline-block; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; margin-bottom: 6px; } .am-badge--active { background: #e2f3ea; color: #1f7a58; } .am-badge--paused { background: #FEF0D0; color: #8A5E00; } .am-badge--pending { background: #E7F1F8; color: #1c6a94; } .am-badge--disabled { background: var(--cream); color: var(--muted); } .am-title { font-size: 16px; font-weight: 800; color: var(--ink); } .am-meta { font-size: 13px; color: var(--muted); margin-top: 3px; } .am-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .am-form { margin: 0; } .btn-sm { padding: 8px 14px; font-size: 13.5px; } .compte-empty { text-align: center; padding: 46px 20px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); color: var(--muted); } .compte-empty p { margin-top: 14px; } /* suppression */ .danger-box { background: #fff; border: 1px solid #f2c9c3; border-radius: var(--radius); padding: 24px; } .danger-box p { color: var(--text); margin-bottom: 12px; } .danger-input { width: 220px; padding: 11px 13px; border: 1.5px solid var(--border); border-radius: 11px; font-size: 15px; margin-right: 12px; } .btn-danger { background: var(--coral-deep); color: #fff; } .btn-danger:hover { background: #d5665a; color: #fff; } @media (max-width: 800px) { /* La navigation du compte disparaît : le menu du header la reprend intégralement, et il suit le membre sur toutes les pages. */ .compte-layout { display: block; } .compte-nav, .compte-nav-toggle { display: none !important; } .cf-row { grid-template-columns: 1fr; } .photo-manage { grid-template-columns: 1fr; justify-items: center; } } /* autocomplete adresse dans le compte + entête annonces */ .compte-head-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; } .compte-head-row .compte-h1 { margin-bottom: 0; } .cf-field--full { grid-column: 1 / -1; } .cf-autocomplete { position: relative; } .cf-suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); max-height: 260px; overflow-y: auto; } .cf-suggest-item { padding: 11px 14px; font-size: 14.5px; color: var(--ink); font-weight: 600; cursor: pointer; } .cf-suggest-item:hover { background: var(--sage-soft); } /* formulaire annonce */ .compte-back { display: inline-block; color: var(--muted); font-weight: 600; margin-bottom: 12px; font-size: 14px; } .compte-back:hover { color: var(--sage-text); text-decoration: none; } .compte-form textarea { width: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 11px; font-size: 15px; font-family: inherit; resize: vertical; } .compte-form textarea:focus { outline: none; border-color: var(--sage-text); } .cf-checks { display: flex; gap: 20px; margin-bottom: 18px; flex-wrap: wrap; } .cf-check { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); cursor: pointer; } .cf-check input { width: 17px; height: 17px; accent-color: var(--sage-text); } .cf-sub { background: var(--cream); border-radius: 14px; padding: 18px; margin-bottom: 18px; } .cf-sub h3 { font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 12px; } /* chips (cases à cocher stylées) pour l'éditeur d'annonce */ .af-modnote { background: #FEF6E0; border: 1px solid #f5e6bd; color: #8A5E00; border-radius: 12px; padding: 11px 16px; font-size: 13.5px; font-weight: 600; margin-bottom: 18px; } .cf-chips { display: flex; flex-wrap: wrap; gap: 9px; } .cf-chip { position: relative; cursor: pointer; } .cf-chip input { position: absolute; opacity: 0; pointer-events: none; } .cf-chip span { display: inline-block; padding: 9px 15px; border: 1.5px solid var(--border); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink); background: #fff; transition: all .12s; } .cf-chip input:checked + span { background: var(--sage); border-color: var(--sage-text); color: var(--ink); font-weight: 800; } .cf-chip:hover span { border-color: var(--sage-text); } .cf-chip--locked span { background: var(--sage-soft); border-color: var(--sage-text); color: var(--sage-text); cursor: default; } .compte-form select { width: 100%; padding: 11px 13px; border: 1.5px solid var(--border); border-radius: 11px; font-size: 15px; font-family: inherit; background: #fff; } .compte-form select:focus { outline: none; border-color: var(--sage-text); } .am-vues { color: var(--sage-text); font-weight: 600; } .af-hint { font-size: 13px; color: var(--muted); margin: 4px 0 18px; } .af-hint a { color: var(--sage-text); font-weight: 600; } /* icônes devant les titres de formulaire */ .compte-h1 { display: flex; align-items: center; gap: 10px; } .compte-h1 img { width: 28px; height: 28px; flex-shrink: 0; } .cf-sub h3 { display: flex; align-items: center; gap: 8px; } .cf-sub h3 img { width: 20px; height: 20px; flex-shrink: 0; } /* icônes devant les libellés de champs */ .cf-field label { display: flex; align-items: center; gap: 6px; } .cf-field label img { width: 15px; height: 15px; flex-shrink: 0; opacity: .75; } /* ============================================================ Bloc de confiance (fiche) ============================================================ */ .trust-box { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; } .trust-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .trust-shield { width: 38px; height: 38px; flex-shrink: 0; padding: 7px; border-radius: 50%; background: var(--sage-soft); } .trust-level { display: block; font-size: 15.5px; font-weight: 800; color: var(--ink); } .trust-score { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; } .trust-bar { height: 8px; background: var(--cream); border-radius: 999px; overflow: hidden; margin-bottom: 14px; } .trust-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--sage), var(--sage-deep)); transition: width .5s ease; } .trust-badges { list-style: none; display: flex; flex-direction: column; gap: 8px; } .trust-badge { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; } .trust-badge.ok { color: var(--ink); } .trust-badge.ok img { width: 18px; height: 18px; } .trust-badge.off { color: var(--muted); font-weight: 500; } .trust-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0; margin: 0 4px; } /* accent selon le niveau */ .trust-gold .trust-shield { background: #FCEFC7; } .trust-gold .trust-bar span { background: linear-gradient(90deg, var(--jaune), #E0A93A); } .trust-high .trust-shield { background: var(--sage-soft); } .trust-low .trust-level { color: var(--muted); } /* panneau confiance (tableau de bord) */ .trust-panel { margin-top: 22px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; } .trust-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; } .trust-panel-title { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; color: var(--ink); } .trust-panel-title img { width: 22px; height: 22px; } .trust-panel-sub { color: var(--muted); font-size: 13.5px; margin-top: 4px; } .trust-panel-score { font-size: 30px; font-weight: 900; color: var(--sage-text); line-height: 1; } .trust-panel-score small { font-size: 15px; } .trust-panel-items { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; } .trust-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; font-size: 13.5px; font-weight: 600; } .trust-chip.ok { background: var(--sage-soft); color: var(--sage-text); } .trust-chip.ok img { width: 16px; height: 16px; } .trust-chip.todo { background: var(--cream); color: var(--ink); border: 1px dashed var(--border); } .trust-chip.todo:hover { background: #fff; border-color: var(--sage-text); text-decoration: none; } .trust-chip.todo b { color: var(--sage-text); } .trust-gold .trust-panel-score { color: #94701A; } /* bannière de vérification e-mail (compte) */ /* Bandeaux de vérification. Le texte était en vert clair SUR fond vert clair : illisible, et le message ne se voyait pas. Même traitement que les messages d'info — pastille pleine, barre d'accent, texte en encre foncée. La couleur signale l'état ; elle ne porte pas la lecture. */ .verif-banner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #FDF3DC; color: var(--ink); border: 1px solid #eed9a4; border-left: 7px solid #C98A0B; border-radius: 14px; padding: 15px 20px 15px 18px; margin-bottom: 20px; flex-wrap: wrap; box-shadow: 0 3px 14px rgba(201, 138, 11, .12); } .verif-banner > div:first-child { display: flex; align-items: center; gap: 13px; flex: 1; min-width: 240px; } .verif-banner > div:first-child::before { content: ''; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: #C98A0B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round'%3E%3Cline x1='12' y1='7' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") center / 16px no-repeat; box-shadow: 0 2px 6px rgba(201, 138, 11, .38); } .verif-banner strong { display: block; color: var(--ink); font-size: 15px; font-weight: 900; } .verif-banner span { display: block; color: var(--ink); opacity: .82; font-size: 13.5px; margin-top: 2px; line-height: 1.45; } .verif-banner form { margin: 0; } .verif-banner--ok { background: #E7F3EC; border-color: #bcdcc9; border-left-color: #1F7A4D; box-shadow: 0 3px 14px rgba(46, 158, 104, .12); } .verif-banner--ok > div:first-child::before { background: #2e9e68 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 17px no-repeat; box-shadow: 0 2px 6px rgba(46, 158, 104, .38); } .verif-banner--ok strong, .verif-banner--ok span { color: var(--ink); } .compte-h2 { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; color: var(--ink); margin-bottom: 16px; } .compte-h2 img { width: 20px; height: 20px; } /* sections regroupées dans le tunnel */ .mf-section { padding: 4px 0 8px; } .mf-section + .mf-section { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 16px; } .mf-section-title { font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 4px; } .mf-section-help { font-size: 13px; color: var(--muted); margin-bottom: 10px; } /* overlay "êtes-vous sûr de partir ?" */ .mf-quit { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(40,45,50,.6); backdrop-filter: blur(2px); border-radius: inherit; } .mf-quit-box { background: #fff; border-radius: 20px; padding: 30px 26px; max-width: 380px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.3); } .mf-quit-masc { width: 92px; height: 92px; margin-bottom: 8px; } .mf-quit-title { font-size: 21px; font-weight: 900; color: var(--ink); margin-bottom: 8px; } .mf-quit-text { font-size: 14.5px; color: var(--text); line-height: 1.6; margin-bottom: 20px; } .mf-quit-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; } .mf-quit-actions .btn { width: 100%; } .mf-quit-leave { border: none; background: none; color: var(--muted); font-size: 13.5px; font-family: inherit; cursor: pointer; text-decoration: underline; padding: 4px; } .mf-quit-leave:hover { color: var(--coral-text); } /* ============================================================ Popup bloquante (pages de résultats, visiteurs non connectés) ============================================================ */ .gate { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(40,45,50,.62); backdrop-filter: blur(4px); } .gate[hidden] { display: none; } .gate-box { background: #fff; border-radius: 22px; padding: 34px 30px; max-width: 420px; width: 100%; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.3); animation: gateIn .28s ease; } @keyframes gateIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } } .gate-masc { width: 64px; height: 64px; margin-bottom: 2px; } /* le nombre de profils : l'argument le plus vendeur, en héros */ .gate-count { font-size: 60px; font-weight: 900; line-height: 1; letter-spacing: -2px; background: linear-gradient(135deg, var(--sage-deep), var(--coral)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--coral); margin: 4px 0 2px; } .gate-count-sub { font-size: 16px; color: var(--ink); font-weight: 600; margin-bottom: 18px; } .gate-count-sub strong { font-weight: 900; } .gate-title { font-size: 20px; font-weight: 900; color: var(--ink); letter-spacing: -.4px; margin-bottom: 8px; } .gate-text { font-size: 14px; color: var(--muted); line-height: 1.6; margin-bottom: 22px; } .gate-actions { display: flex; flex-direction: column; gap: 10px; } .btn-block { width: 100%; } /* annonce mise en avant + explication */ .am-explain { display: flex; gap: 13px; align-items: flex-start; background: var(--sage-soft); border: 1px solid #d9e8e0; border-radius: 14px; padding: 15px 18px; margin-bottom: 20px; } .am-explain img { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; } .am-explain strong { display: block; color: var(--ink); font-size: 14.5px; margin-bottom: 3px; } .am-explain p { color: var(--sage-text); font-size: 13.5px; line-height: 1.55; margin: 0; } .am-row--live { border-color: var(--sage-text); box-shadow: 0 0 0 2px rgba(168,200,184,.28); } .am-live { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 800; color: var(--sage-text); } @media (max-width: 480px) { .gate-count { font-size: 48px; } .gate-count-sub { font-size: 15px; } .gate-box { padding: 26px 22px; } } /* ============================================================ Messagerie ============================================================ */ .tab-badge { margin-left: auto; background: var(--coral); color: #fff; font-size: 11px; font-weight: 800; min-width: 18px; height: 18px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; } /* liste des conversations */ .msg-list { list-style: none; margin: 0; padding: 0; } .msg-item { display: flex; align-items: center; gap: 13px; padding: 13px 14px; border-radius: 14px; transition: background .15s; position: relative; } .msg-item:hover { background: var(--sage-soft); text-decoration: none; } .msg-item.is-unread { background: #FEF6E0; } .msg-ava { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .msg-body { flex: 1; min-width: 0; } .msg-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .msg-name { font-weight: 800; color: var(--ink); font-size: 15px; } .msg-date { font-size: 12px; color: var(--muted); flex-shrink: 0; } .msg-preview { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .is-unread .msg-preview { color: var(--ink); font-weight: 600; } .msg-badge { background: var(--coral); color: #fff; font-size: 11px; font-weight: 800; min-width: 20px; height: 20px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; flex-shrink: 0; } /* fil de conversation */ .conv-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 16px; } .conv-back { font-size: 22px; color: var(--ink); text-decoration: none; line-height: 1; } .conv-ava { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; } .conv-name { font-size: 17px; color: var(--ink); } .conv-thread { display: flex; flex-direction: column; gap: 8px; padding: 6px 0 16px; max-height: 60vh; overflow-y: auto; } .conv-day { text-align: center; font-size: 12px; color: var(--muted); margin: 12px 0 6px; } .conv-msg { max-width: 78%; align-self: flex-start; } .conv-msg.mine { align-self: flex-end; text-align: right; } .conv-bubble { display: inline-block; text-align: left; background: #fff; border: 1px solid var(--border); padding: 10px 14px; border-radius: 16px 16px 16px 4px; font-size: 14.5px; line-height: 1.5; color: var(--ink); } .conv-msg.mine .conv-bubble { background: var(--sage-soft); border-color: #d9e8e0; border-radius: 16px 16px 4px 16px; } .conv-time { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; } .conv-form { display: flex; gap: 10px; align-items: flex-end; padding-top: 14px; border-top: 1px solid var(--border); } .conv-form textarea { flex: 1; resize: none; border: 1px solid var(--border); border-radius: 14px; padding: 11px 14px; font-family: inherit; font-size: 14.5px; max-height: 140px; } .conv-form textarea:focus { outline: none; border-color: var(--sage-text); } /* premier contact */ .contact-card { display: flex; align-items: center; gap: 14px; background: var(--sage-soft); border-radius: 14px; padding: 14px 18px; margin-bottom: 18px; } .contact-card p { margin: 0; font-size: 13.5px; color: var(--sage-text); line-height: 1.55; } /* ============================================================ Passe / paywall doux ============================================================ */ /* coordonnées masquées dans un message */ .masked { display: inline-block; background: var(--cream); border: 1px dashed var(--border); color: var(--muted); border-radius: 6px; padding: 1px 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .3px; } /* message tronqué : dégradé + invitation */ .conv-bubble { position: relative; } .bubble-fade { display: block; height: 26px; margin: -6px -14px 0; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff); } .conv-msg.mine .bubble-fade { background: linear-gradient(to bottom, rgba(238,245,241,0), var(--sage-soft)); } .bubble-lock { display: flex; flex-direction: column; gap: 1px; margin: 6px -14px -10px; padding: 10px 14px; background: var(--sage-soft); border-top: 1px solid #d9e8e0; border-radius: 0 0 16px 4px; text-decoration: none; } .bubble-lock strong { font-size: 13.5px; color: var(--ink); } .bubble-lock span { font-size: 12.5px; color: var(--sage-text); font-weight: 700; } .bubble-lock:hover { background: #e4efe9; text-decoration: none; } .bubble-hint { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--coral-text); } /* bandeau d'incitation en tête de conversation */ .pass-banner { display: flex; align-items: center; gap: 13px; background: #FEF6E0; border: 1px solid #f5e6bd; border-radius: 14px; padding: 13px 16px; margin-bottom: 14px; flex-wrap: wrap; } .pass-banner--info { background: #EEF5F1; border-color: #cfe4d8; } .pass-banner img { width: 22px; height: 22px; flex-shrink: 0; } .pass-banner strong { display: block; font-size: 14.5px; color: var(--ink); } .pass-banner span { display: block; font-size: 13px; color: #8A5E00; } .pass-banner .btn { margin-left: auto; } .conv-pass { margin-left: auto; font-size: 12px; font-weight: 800; color: var(--sage-text); background: var(--sage-soft); padding: 4px 10px; border-radius: 999px; } .conv-note { font-size: 12.5px; color: var(--muted); text-align: center; margin-top: 10px; } /* téléphone sur la fiche */ .tel-reveal { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 17px; letter-spacing: .5px; } .tel-reveal img { width: 18px; height: 18px; } .tel-locked { display: flex; align-items: center; justify-content: center; gap: 8px; } .tel-locked img { width: 18px; height: 18px; opacity: .6; } .tel-blur { filter: blur(3px); font-size: 16px; letter-spacing: 1px; user-select: none; } .tel-note { font-size: 12px; color: var(--muted); text-align: center; margin-top: 6px; } /* ============================================================ Page /passe — formules, options, total ============================================================ */ .passe-wrap { padding: 36px 20px 60px; max-width: 940px; } .passe-head { text-align: center; margin-bottom: 28px; } .passe-h1 { font-size: 30px; font-weight: 900; color: var(--ink); letter-spacing: -.7px; margin-bottom: 8px; } .passe-sub { font-size: 15.5px; color: var(--muted); max-width: 560px; margin: 0 auto; line-height: 1.6; } .passe-h2 { font-size: 18px; font-weight: 900; color: var(--ink); margin: 30px 0 12px; } .passe-h2 small { font-weight: 700; font-size: 13px; color: var(--muted); } .passe-flash { background: #FEF6E0; border: 1px solid #f5e6bd; color: #8A5E00; padding: 11px 16px; border-radius: 12px; font-size: 14px; text-align: center; margin-bottom: 18px; } /* formules */ .formules { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; } .formule { position: relative; display: flex; flex-direction: column; gap: 2px; background: #fff; border: 2px solid var(--border); border-radius: 18px; padding: 22px 18px 18px; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; } .formule:hover { border-color: var(--sage-text); transform: translateY(-2px); } .formule input { position: absolute; opacity: 0; } .formule:has(input:checked) { border-color: var(--coral); box-shadow: 0 10px 30px rgba(240,138,124,.22); } .formule--pop { border-color: var(--sage-text); } .formule-tag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--sage-deep); color: #fff; font-size: 11px; font-weight: 800; padding: 4px 12px; border-radius: 999px; white-space: nowrap; } .formule-nom { font-size: 17px; font-weight: 900; color: var(--ink); } .formule-prix { font-size: 30px; font-weight: 900; color: var(--coral-text); line-height: 1.15; letter-spacing: -1px; } .formule-duree { font-size: 13px; font-weight: 800; color: var(--sage-text); background: var(--sage-soft); align-self: flex-start; padding: 2px 10px; border-radius: 999px; margin: 3px 0 7px; } .formule-acc { font-size: 13px; color: var(--muted); line-height: 1.5; } .formule-inclus { display: flex; flex-direction: column; gap: 3px; margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--border); } .formule-inclus em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--sage-text); } /* ce qui est inclus dans tout passe */ .passe-inclus { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; background: var(--sage-soft); border-radius: 14px; padding: 15px 20px; margin-top: 18px; } .passe-inclus li { font-size: 13.5px; color: var(--sage-text); position: relative; padding-left: 20px; } .passe-inclus li::before { content: '✓'; position: absolute; left: 0; font-weight: 900; } /* options */ .options { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; } .option { display: flex; align-items: center; gap: 12px; background: #fff; border: 1.5px solid var(--border); border-radius: 14px; padding: 13px 15px; cursor: pointer; transition: border-color .15s, background .15s; } .option:hover { border-color: var(--sage-text); } .option:has(input:checked) { border-color: var(--sage-text); background: var(--sage-soft); } .option input { width: 18px; height: 18px; accent-color: var(--sage-text); flex-shrink: 0; } .option img { width: 22px; height: 22px; flex-shrink: 0; } .option-txt { flex: 1; min-width: 0; } .option-txt strong { display: block; font-size: 14px; color: var(--ink); } .option-txt small { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.4; } .option-prix { font-size: 14px; font-weight: 800; color: var(--coral-text); flex-shrink: 0; } .option.is-offert { background: var(--sage-soft); border-color: #d9e8e0; cursor: default; } .option.is-offert .option-prix { color: var(--muted); text-decoration: line-through; font-size: 12.5px; } .option-inclus { display: block; font-style: normal; font-size: 11px; font-weight: 800; color: var(--sage-text); text-decoration: none; } /* total */ .passe-total { display: flex; align-items: center; justify-content: space-between; gap: 18px; background: var(--ink); border-radius: 18px; padding: 20px 26px; margin-top: 26px; flex-wrap: wrap; } .pt-label { display: block; font-size: 13px; color: #a7b1bb; font-weight: 700; } .pt-montant { display: block; font-size: 32px; font-weight: 900; color: #fff; letter-spacing: -1px; line-height: 1.1; } .passe-total .btn { flex-shrink: 0; } .passe-secu { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 12.5px; color: var(--muted); margin-top: 14px; text-align: center; flex-wrap: wrap; line-height: 1.6; } /* passe déjà actif */ .passe-actif { text-align: center; background: var(--sage-soft); border-radius: 18px; padding: 24px; margin-bottom: 26px; } .passe-actif h1 { font-size: 22px; font-weight: 900; color: var(--ink); margin: 8px 0 6px; } .passe-actif p { color: var(--sage-text); font-size: 14.5px; margin-bottom: 14px; } /* redirection + retour paiement */ .redir-wrap { padding: 60px 20px; max-width: 560px; text-align: center; } .redir-box { background: #fff; border: 1px solid var(--border); border-radius: 22px; padding: 40px 30px; } .redir-box h1 { font-size: 23px; font-weight: 900; color: var(--ink); margin: 12px 0 10px; letter-spacing: -.5px; } .redir-montant { font-size: 38px; font-weight: 900; color: var(--coral-text); letter-spacing: -1.5px; margin-bottom: 6px; } .redir-detail { font-size: 14.5px; color: var(--muted); line-height: 1.65; margin-bottom: 20px; } .redir-test { display: inline-block; background: #FEF6E0; border: 1px solid #f5e6bd; color: #8A5E00; font-size: 12.5px; font-weight: 800; padding: 6px 14px; border-radius: 999px; margin-bottom: 16px; } .redir-note { font-size: 12.5px; color: var(--muted); margin-top: 16px; line-height: 1.6; } .redir-box .btn { margin: 4px; } @media (max-width: 700px) { .passe-total { flex-direction: column; align-items: stretch; text-align: center; } .passe-total .btn { width: 100%; } .pass-banner .btn { margin-left: 0; width: 100%; } } /* ============================================================ Compte — Mon abonnement ============================================================ */ .tab-badge--ok { background: var(--sage-deep); } .compte-h2 { font-size: 17px; font-weight: 900; color: var(--ink); margin: 28px 0 12px; } /* carte d'état */ .ab-carte { border-radius: 18px; padding: 24px; margin-bottom: 6px; } .ab-carte--actif { background: linear-gradient(135deg, var(--sage-soft), #fff); border: 2px solid var(--sage); } .ab-carte--inactif { background: var(--cream); border: 1px dashed var(--border); text-align: center; } .ab-carte--inactif h2 { font-size: 18px; font-weight: 900; color: var(--ink); margin: 8px 0 6px; } .ab-carte--inactif p { font-size: 14px; color: var(--muted); line-height: 1.6; max-width: 460px; margin: 0 auto; } .ab-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .ab-etat { background: var(--sage-deep); color: #fff; font-size: 12px; font-weight: 800; padding: 5px 12px; border-radius: 999px; } .ab-formule { font-size: 13px; font-weight: 800; color: var(--sage-text); background: #fff; border: 1px solid var(--sage); padding: 4px 12px; border-radius: 999px; } .ab-jours { font-size: 30px; font-weight: 900; color: var(--ink); letter-spacing: -1px; line-height: 1.1; } .ab-jours strong { color: var(--coral-text); } .ab-fin { font-size: 13.5px; color: var(--muted); margin-bottom: 14px; } .ab-avantages { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 16px; } .ab-avantages li { font-size: 13px; color: var(--sage-text); font-weight: 600; padding-left: 18px; position: relative; } .ab-avantages li::before { content: '✓'; position: absolute; left: 0; font-weight: 900; } .ab-alerte { background: #FEF6E0; border: 1px solid #f5e6bd; color: #8A5E00; font-size: 13px; font-weight: 700; padding: 10px 14px; border-radius: 12px; margin-bottom: 14px; } /* options possédées */ .ab-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; } .ab-option { display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid var(--border); border-radius: 13px; padding: 12px 14px; } .ab-option img { width: 22px; height: 22px; } .ab-option strong { display: block; font-size: 14px; color: var(--ink); } .ab-option small { display: block; font-size: 12px; color: var(--muted); } /* historique */ .ab-histo { display: flex; flex-direction: column; gap: 2px; } .ab-ligne { display: grid; grid-template-columns: 88px 1fr 90px 84px 92px; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; } .ab-ligne:nth-child(odd) { background: var(--cream); } .ab-l-date { color: var(--muted); font-size: 12.5px; font-weight: 700; } .ab-l-date small { display: block; font-weight: 400; opacity: .75; } .ab-l-quoi strong { display: block; color: var(--ink); font-size: 14px; } .ab-l-quoi small { display: block; font-size: 12px; color: var(--muted); line-height: 1.4; } .ab-l-quoi em { font-style: normal; background: #FEF6E0; color: #8A5E00; padding: 0 5px; border-radius: 4px; font-weight: 700; } .ab-l-mode { font-size: 12.5px; color: var(--muted); text-transform: capitalize; } .ab-l-montant { font-weight: 900; color: var(--ink); text-align: right; } .ab-l-statut { text-align: right; } .ab-badge { font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; white-space: nowrap; } .ab-badge--paye { background: var(--sage-soft); color: var(--sage-text); } .ab-badge--refuse { background: #fdeceb; color: #c0524a; } .ab-badge--en_attente { background: var(--cream); color: var(--muted); } .ab-vide { color: var(--muted); font-size: 14px; padding: 16px 0; } .ab-note { font-size: 12.5px; color: var(--muted); margin-top: 12px; } /* le sélecteur dans l'espace compte : un peu plus compact */ .compte-main .formules { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); } .compte-main .formule-prix { font-size: 25px; } .compte-main .passe-total { padding: 16px 20px; } .compte-main .pt-montant { font-size: 27px; } @media (max-width: 760px) { .ab-ligne { grid-template-columns: 1fr auto; gap: 4px 10px; } .ab-l-date { grid-column: 1 / -1; } .ab-l-mode { display: none; } .ab-l-montant, .ab-l-statut { text-align: right; } } /* ---------- Récapitulatif du passe actif ---------- */ .ab-hero { background: linear-gradient(135deg, var(--sage-soft) 0%, #fff 65%); border: 2px solid var(--sage); border-radius: 20px; padding: 24px 26px; } .ab-hero-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 16px; } .ab-hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 18px; } .ab-kpi { background: #fff; border: 1px solid #dcebe3; border-radius: 14px; padding: 14px 16px; } .ab-kpi-val { display: block; font-size: 30px; font-weight: 900; color: var(--coral-text); letter-spacing: -1px; line-height: 1.15; } .ab-kpi-val--date { font-size: 19px; color: var(--ink); letter-spacing: -.3px; } .ab-kpi-lab { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin-top: 2px; } .ab-hero-note { font-size: 12.5px; color: var(--muted); margin-top: 10px; } .ab-sous { font-size: 13.5px; color: var(--muted); margin: -6px 0 12px; } .ab-option--on { border-color: var(--sage-text); background: var(--sage-soft); position: relative; } .ab-ok { margin-left: auto; color: var(--sage-text); font-weight: 900; font-size: 16px; } /* ---------- Champ mot de passe : afficher / masquer ---------- */ .pw-wrap { position: relative; display: block; } .pw-wrap input { width: 100%; padding-right: 44px !important; } .pw-eye { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; background: none; border: none; border-radius: 8px; color: var(--muted); cursor: pointer; transition: color .15s, background .15s; } .pw-eye:hover { color: var(--sage-text); background: var(--sage-soft); } .pw-eye[aria-pressed="true"] { color: var(--sage-text); } /* ---------- Consentements (compte) ---------- */ .cf-h2 { font-size: 15px; font-weight: 900; color: var(--ink); margin: 26px 0 12px; padding-top: 18px; border-top: 1px solid var(--border); } .cf-consent { display: flex; gap: 11px; align-items: flex-start; background: var(--cream); border: 1px solid var(--border); border-radius: 13px; padding: 13px 15px; margin-bottom: 9px; cursor: pointer; transition: border-color .12s; } .cf-consent:hover { border-color: var(--sage-text); } /* La case native est masquée et remplacée par un carré dessiné : la case système ne se met pas aux couleurs du site et diffère d'un navigateur à l'autre. Elle reste dans le DOM — le clavier et les lecteurs d'écran continuent de la voir. */ .cf-consent input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; } .cf-consent::before { content: ''; flex-shrink: 0; margin-top: 1px; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--border); background: #fff; transition: background .14s, border-color .14s; } .cf-consent.is-on::before, .cf-consent:has(input:checked)::before { background: var(--sage-deep); border-color: var(--sage-text); /* le ✓ est dessiné, pas écrit : il reste net à toutes les tailles */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: 15px; background-repeat: no-repeat; background-position: center; } .cf-consent.is-on, .cf-consent:has(input:checked) { border-color: var(--sage-text); background: var(--sage-soft); } .cf-consent:focus-within { border-color: var(--sage-text); box-shadow: 0 0 0 3px rgba(143,182,163,.22); } .cf-consent span { font-size: 13px; color: var(--muted); line-height: 1.55; } .cf-consent strong { display: block; font-size: 14px; color: var(--ink); margin-bottom: 2px; } /* ---------- Photo en cours de vérification ---------- */ .pm-attente { display: flex; gap: 14px; align-items: flex-start; background: #FEF6E0; border: 1px solid #f5e6bd; border-radius: 14px; padding: 14px 16px; margin-bottom: 18px; } .pm-attente strong { display: block; font-size: 14.5px; color: #8A5E00; margin-bottom: 3px; } .pm-attente p { font-size: 13px; color: #8A5E00; line-height: 1.55; opacity: .92; } /* ---------- Présence « en ligne » ---------- */ .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #cfd6dc; vertical-align: middle; margin-left: 5px; transition: background .25s; } .dot.is-online { background: #3fbf7f; box-shadow: 0 0 0 3px rgba(63, 191, 127, .18); animation: dotPulse 2.4s ease-in-out infinite; } @keyframes dotPulse { 0% { box-shadow: 0 0 0 2px rgba(63,191,127,.28), 0 0 0 0 rgba(63,191,127,.55); } 70% { box-shadow: 0 0 0 2px rgba(63,191,127,.28), 0 0 0 9px rgba(63,191,127,0); } 100% { box-shadow: 0 0 0 2px rgba(63,191,127,.28), 0 0 0 0 rgba(63,191,127,0); } } .conv-ava-wrap { position: relative; display: inline-block; flex-shrink: 0; } .conv-ava-wrap .dot { position: absolute; right: 1px; bottom: 1px; width: 12px; height: 12px; margin: 0; border: 2px solid #fff; } .conv-etat { display: block; font-size: 12px; color: var(--muted); line-height: 1.4; } .conv-etat.is-online::before { content: 'En ligne'; color: #1F7A4D; font-weight: 700; } /* message arrivé en direct */ .msg--neuf { animation: msgIn .3s cubic-bezier(.2,.9,.3,1); } @keyframes msgIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } } /* compteur de non-lus */ .js-nonlus { display: none; } .js-nonlus.is-on { display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--coral-deep); color: #fff; font-size: 11px; font-weight: 900; margin-left: 6px; } @media (prefers-reduced-motion: reduce) { .dot.is-online, .msg--neuf { animation: none; } } /* ---------- Popup « messages en attente » ---------- */ .pop-msg { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(57, 67, 77, .5); backdrop-filter: blur(3px); animation: popFade .2s ease; } .pop-msg.is-out { opacity: 0; transition: opacity .2s; } .pop-msg-box { position: relative; width: 100%; max-width: 380px; background: #fff; border-radius: 22px; padding: 30px 26px 24px; text-align: center; box-shadow: 0 22px 60px rgba(57, 67, 77, .26); animation: popIn .32s cubic-bezier(.2, .9, .3, 1); } .pop-msg-box h2 { font-size: 19px; font-weight: 900; color: var(--ink); margin: 12px 0 16px; } .pop-msg-box--duo { max-width: 440px; } /* Un bloc par sujet. Séparés visuellement, chacun avec SON bouton : mélanger « lisez vos messages » et « publiez votre annonce » dans un seul appel à l'action, c'est n'en obtenir aucun des deux. */ .pop-blocs { display: flex; flex-direction: column; gap: 12px; text-align: left; } .pop-bloc { display: flex; gap: 12px; background: var(--cream); border-radius: 14px; padding: 15px 16px; } .pop-bloc > div { flex: 1; } .pop-bloc-i { font-size: 21px; line-height: 1.2; flex-shrink: 0; } .pop-bloc strong { display: block; font-size: 14.5px; font-weight: 900; color: var(--ink); margin-bottom: 4px; } .pop-bloc p { font-size: 13px; color: var(--muted); line-height: 1.55; margin-bottom: 12px; } .pop-bloc .btn { width: 100%; justify-content: center; } .pop-bloc--msg { background: var(--coral-soft); } .pop-bloc--ann { background: var(--sage-soft); } .pop-msg-x { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; border: 0; background: transparent; color: var(--muted); font-size: 26px; line-height: 1; cursor: pointer; border-radius: 50%; } .pop-msg-x:hover { background: var(--cream); color: var(--ink); } .pop-msg-later { margin-top: 12px; border: 0; background: transparent; color: var(--muted); font-size: 13.5px; font-weight: 700; cursor: pointer; text-decoration: underline; } .pop-msg-later:hover { color: var(--ink); } @keyframes popFade { from { opacity: 0; } to { opacity: 1; } } @keyframes popIn { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .pop-msg, .pop-msg-box { animation: none; } } /* conversation ouverte grâce au passe de l'autre */ .conv-pass--offert { background: var(--sage-soft); color: var(--sage-text); } /* ---------- Articles ---------- */ .art-wrap{max-width:1080px;margin:0 auto;padding:26px 20px 60px} .art{background:#fff;border-radius:var(--radius);padding:34px 40px;box-shadow:0 4px 22px rgba(57,67,77,.06)} .art-fil{font-size:12.5px;color:var(--muted);margin-bottom:16px;display:flex;gap:7px;flex-wrap:wrap;align-items:center} .art-fil a{color:var(--muted)}.art-fil a:hover{color:var(--coral-deep)} .art-head h1{font-size:31px;font-weight:900;color:var(--ink);line-height:1.25;margin-bottom:8px} .art-date{font-size:13px;color:var(--muted)} .art-img{width:100%;max-height:340px;object-fit:cover;border-radius:16px;margin:22px 0} .art-corps{font-size:16px;line-height:1.78;color:var(--text)} .art-corps h2{font-size:22px;font-weight:900;color:var(--ink);margin:34px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--sage-soft)} .art-corps h3{font-size:17.5px;font-weight:800;color:var(--ink);margin:24px 0 9px} .art-corps p{margin-bottom:15px} .art-corps ul,.art-corps ol{margin:0 0 16px 22px} .art-corps ul{list-style:disc}.art-corps ol{list-style:decimal} .art-corps li{margin-bottom:7px} .art-corps a{color:var(--coral-deep);text-decoration:underline;text-underline-offset:2px} .art-corps a:hover{color:var(--coral)} .art-corps strong{font-weight:800;color:var(--ink)} .art-corps em{font-style:italic} .art-corps pre{background:var(--cream);border-radius:10px;padding:14px 16px;white-space:pre-wrap;font-family:inherit;margin-bottom:16px} .art-corps div[style]{border-radius:10px!important;border:1px solid var(--border)!important;background:var(--cream)!important;padding:12px 16px!important;margin-bottom:16px} .art-corps img{max-width:100%;height:auto;border-radius:12px} .art-corps table{width:100%;border-collapse:collapse;margin-bottom:16px} .art-corps td,.art-corps th{border:1px solid var(--border);padding:8px 11px} .art-plus{margin-top:26px;background:var(--sage-soft);border-radius:var(--radius);padding:24px 28px} .art-plus h2{font-size:17px;font-weight:900;color:var(--ink);margin-bottom:14px} .art-plus ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:11px} .art-plus a{display:block;background:#fff;border-radius:12px;padding:13px 15px;height:100%} .art-plus a:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(57,67,77,.09)} .art-plus strong{display:block;font-size:14px;color:var(--ink);margin-bottom:3px} .art-plus span{font-size:12.5px;color:var(--muted);line-height:1.5} .cons-head{display:flex;gap:20px;align-items:center;margin-bottom:26px} .cons-head h1{font-size:29px;font-weight:900;color:var(--ink);margin-bottom:6px} .cons-head p{color:var(--muted);line-height:1.6;max-width:620px} .cons-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px} .cons-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:0 3px 16px rgba(57,67,77,.06);display:flex;flex-direction:column;transition:transform .16s,box-shadow .16s} .cons-card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(57,67,77,.12)} .cons-card img{width:100%;height:160px;object-fit:cover} .cons-card-txt{padding:18px 20px 20px;display:flex;flex-direction:column;gap:7px;flex:1} .cons-card h2{font-size:17px;font-weight:900;color:var(--ink);line-height:1.35} .cons-card p{font-size:13.5px;color:var(--muted);line-height:1.6;flex:1} .cons-lire{font-size:13.5px;font-weight:800;color:var(--coral-deep)} .art-vide{text-align:center;color:var(--muted);padding:40px} @media(max-width:640px){.art{padding:24px 20px}.art-head h1{font-size:24px}.cons-head{flex-direction:column;text-align:center}} /* ============================================================ Dernières annonces (accueil) — toutes personas confondues. Un liseré et une pastille de couleur par rôle : l'œil distingue une famille d'une nounou avant même d'avoir lu. ============================================================ */ .derniers-head { margin-bottom: 24px; } .derniers-sub { color: var(--muted); font-size: 14.5px; margin-top: 5px; } .derniers { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 18px; } .dcard { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 20px; padding: 0; /* la photo touche le bord : pas de marge en haut */ box-shadow: 0 3px 16px rgba(57, 67, 77, .07); border: 1px solid var(--border); transition: transform .18s cubic-bezier(.2,.9,.3,1), box-shadow .18s, border-color .18s; overflow: hidden; } /* la carte entière est un lien : sans ça, TOUT son texte se souligne au survol */ .dcard, .dcard:hover { text-decoration: none; } .dcard:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(57, 67, 77, .13); border-color: var(--ton, var(--sage)); } .dcard:hover .dcard-img { transform: scale(1.05); } .dcard:hover .dcard-go { background: var(--ton, var(--sage)); color: #fff; transform: translateX(2px); } .dcard--sage { --ton: var(--sage-deep); --ton-soft: var(--sage-soft); --ton-txt: var(--sage-text); } .dcard--coral { --ton: var(--coral-deep); --ton-soft: var(--coral-soft); --ton-txt: var(--coral-text); } .dcard--ciel { --ton: #5aa7d8; --ton-soft: #E6F2FA; --ton-txt: #2F6F96; } .dcard--jaune { --ton: #d3a52c; --ton-soft: #FCF3DC; --ton-txt: #94701A; } /* Étiquette de profil : dans le flux, au-dessus du prénom. En absolu, un libellé long (« Assistante maternelle ») recouvrait le nom. */ .dcard-badge { align-self: flex-start; max-width: 100%; font-size: 10px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--ton-txt); background: var(--ton-soft); padding: 3px 8px; border-radius: 999px; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* --- en-tête : la photo dessine le coin haut-gauche --- */ .dcard-haut { display: flex; align-items: center; gap: 13px; } .dcard-ava { width: 92px; height: 92px; flex-shrink: 0; overflow: hidden; display: block; background: var(--ton-soft); border-radius: 19px 0 20px 0; /* haut-gauche = le coin de la carte */ } .dcard-ava img, .dcard-ava picture { width: 100%; height: 100%; display: block; } .dcard-img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } .dcard-ava img[src$=".svg"] { object-fit: contain; padding: 16px; box-sizing: border-box; } .dcard-ident { display: flex; flex-direction: column; gap: 1px; padding: 8px 14px 8px 0; min-width: 0; } .dcard-nom { font-size: 17px; font-weight: 900; color: var(--ink); margin: 0; line-height: 1.2; } .dcard-ville { font-size: 12.5px; font-weight: 700; color: var(--text); } .dcard-sous { font-size: 11.5px; color: var(--muted); line-height: 1.35; } /* --- l'extrait --- */ .dcard-txt { flex: 1; margin: 13px 0 0; padding: 0 16px; font-size: 13px; color: var(--text); line-height: 1.6; text-align: justify; hyphens: auto; } /* --- pied : tarif à gauche, flèche à droite --- */ .dcard-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 14px 0 0; padding: 12px 16px 14px; border-top: 1px solid var(--border); } .dcard-prix { font-size: 16px; font-weight: 900; color: var(--ton-txt); white-space: nowrap; } .dcard-prix small { font-size: 11px; font-weight: 700; } .dcard-prix--mut { font-size: 12.5px; font-weight: 700; color: var(--muted); } .dcard-go { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; background: var(--ton-soft); color: var(--ton-txt); transition: background .16s, color .16s, transform .16s; } .derniers-vide { text-align: center; color: var(--muted); padding: 40px; } @media (max-width: 560px) { .derniers { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; } .dcard { padding: 18px 14px 14px; } .dcard-ava { width: 62px; height: 62px; } .dcard-foot { flex-direction: column; gap: 6px; } } @media (prefers-reduced-motion: reduce) { .dcard, .dcard-img { transition: none; } } /* ---------- Bandeau cookies ---------- */ .ck { position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; padding: 14px; animation: ckUp .38s cubic-bezier(.2,.9,.3,1); } .ck.is-out { opacity: 0; transform: translateY(16px); transition: opacity .24s, transform .24s; } .ck-box { max-width: 940px; margin: 0 auto; display: flex; align-items: center; gap: 18px; background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 16px 22px; box-shadow: 0 14px 44px rgba(57, 67, 77, .2); flex-wrap: wrap; } .ck-masc { flex-shrink: 0; } .ck-txt { flex: 1; min-width: 250px; } .ck-txt strong { display: block; font-size: 15.5px; font-weight: 900; color: var(--ink); margin-bottom: 3px; } .ck-txt p { font-size: 13.5px; color: var(--muted); line-height: 1.55; } .ck-txt a { color: var(--coral-text); text-decoration: underline; } /* Refuser et Accepter ont le MÊME poids : un refus rendu pénible n'est pas un consentement libre — et la CNIL le sanctionne. */ .ck-btns { display: flex; gap: 10px; flex-shrink: 0; } .ck-btns .btn { min-width: 118px; justify-content: center; } @keyframes ckUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } .footer-ck { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; opacity: .85; } .footer-ck:hover { opacity: 1; } @media (max-width: 620px) { .ck-box { padding: 15px 17px; gap: 12px; } .ck-masc { display: none; } .ck-btns { width: 100%; } .ck-btns .btn { flex: 1; } } @media (prefers-reduced-motion: reduce) { .ck { animation: none; } } /* ---------- Conversation avec un compte supprimé ---------- */ .conv-clos { display: flex; align-items: center; gap: 14px; background: var(--cream); border: 1px dashed var(--border); border-radius: 14px; padding: 16px 20px; } .conv-clos strong { display: block; font-size: 14.5px; font-weight: 800; color: var(--ink); } .conv-clos span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; line-height: 1.5; } .msg-name.is-mort { color: var(--muted); font-style: italic; font-weight: 700; } /* L'attribut HTML `hidden` vaut `display: none` — mais depuis la feuille de style du NAVIGATEUR. La moindre règle d'auteur qui pose un display (.ct-f { display: flex }) l'écrase, et l'élément reste visible malgré le hidden. Le JS avait beau fonctionner, le CSS le contredisait. Cette règle rétablit l'ordre naturel, une fois pour toutes. */ [hidden] { display: none !important; } /* ---------- Formulaire de contact ---------- */ .ct { margin-top: 34px; padding-top: 30px; border-top: 2px solid var(--sage-soft); } .ct h2 { font-size: 22px; font-weight: 900; color: var(--ink); margin-bottom: 18px; } .ct-form { display: flex; flex-direction: column; gap: 16px; } .ct-f { display: flex; flex-direction: column; gap: 6px; } .ct-f > span, .ct-f label > span { font-size: 13.5px; font-weight: 800; color: var(--ink); } .ct-f small { font-weight: 600; color: var(--muted); } .ct-f input, .ct-f select, .ct-f textarea { width: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 12px; font-family: inherit; font-size: 15px; color: var(--ink); background: #fff; transition: border-color .15s; } .ct-f input:focus, .ct-f select:focus, .ct-f textarea:focus { outline: 0; border-color: var(--sage-text); } .ct-f textarea { resize: vertical; line-height: 1.6; } .ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* le champ piège : invisible, mais pas display:none — certains robots l'ignorent */ .ct-pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .ct-cible { background: var(--coral-soft); border-radius: 14px; padding: 16px 18px; gap: 10px; } .ct-cible label { display: flex; flex-direction: column; gap: 6px; } .ct-rgpd { font-size: 12.5px; color: var(--muted); line-height: 1.6; } .ct-rgpd a { color: var(--coral-text); text-decoration: underline; } .ct .btn { align-self: flex-start; } @media (max-width: 560px) { .ct-row { grid-template-columns: 1fr; } .ct .btn { width: 100%; } } /* ---------- Bandeau « ajoutez une photo » ---------- Il n'est pas fermable : tant que la photo manque, le manque demeure. Mais il ne bloque rien, et il disparaît de lui-même dès qu'une photo est envoyée — même en attente de modération. On ne réclame jamais deux fois ce qui a déjà été donné. */ .cw-photo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: linear-gradient(180deg, #FDF3DC 0%, #FBEFD2 100%); border: 1px solid #F0D9A0; border-radius: 18px; padding: 16px 20px; margin-bottom: 20px; } .cw-photo-m { flex-shrink: 0; } .cw-photo-txt { flex: 1; min-width: 220px; } .cw-photo-txt strong { display: block; font-size: 15px; font-weight: 800; color: var(--encre); margin-bottom: 3px; } .cw-photo-txt p { font-size: 13.5px; color: var(--encre); opacity: .8; line-height: 1.5; margin: 0; } .cw-photo-cta { flex-shrink: 0; white-space: nowrap; } @media (max-width: 560px) { .cw-photo { text-align: center; justify-content: center; } .cw-photo-cta { width: 100%; } } /* Conseil affiché à la place du compteur, quand il est trop bas pour dire quelque chose. Discret : c'est une aide, pas un reproche. */ .am-vues--conseil { color: var(--coral-text); font-weight: 700; } /* ============================================================ COUPS DE CŒUR Remettre de l'interaction : 5 330 messages en 17 ans, ce n'est pas une messagerie, c'est un cimetière. ============================================================ */ /* --- le bouton, sur la fiche --- */ .cc-form { margin-top: 10px; } .cc-btn { background: #fff; border: 1.5px solid var(--sage); color: var(--ink); font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background .15s, border-color .15s; } .cc-btn:hover { background: var(--sage-soft); } .cc-btn.is-on { background: var(--sage-soft); border-color: var(--sage-text); } .cc-ico { font-size: 17px; line-height: 1; } /* La mention « la personne sera prévenue » : discrète, mais JAMAIS absente. Le favori d'avant était un marque-page privé ; celui-ci envoie un signal à quelqu'un. Laisser croire le contraire, puis notifier, serait un piège. */ .cc-note { font-size: 11.5px; color: var(--muted); text-align: center; margin: 6px 0 0; } /* --- la liste « qui vous a choisi » --- */ .cc-liste { display: flex; flex-direction: column; gap: 10px; } .cc-carte { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; } .cc-carte.is-neuf { border-color: var(--sage-text); background: var(--sage-soft); } .cc-photo img, .cc-photo .avatar { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; flex: 0 0 54px; } .cc-txt { flex: 1; min-width: 0; } .cc-nom { font-size: 15.5px; font-weight: 800; margin: 0 0 2px; color: var(--ink); } .cc-ville { font-weight: 500; color: var(--muted); } .cc-neuf { display: inline-block; margin-left: 7px; font-size: 10.5px; font-weight: 800; background: var(--coral); color: #fff; padding: 2px 7px; border-radius: 20px; vertical-align: middle; } .cc-reciproque { font-size: 12.5px; font-weight: 700; color: var(--sage-text); margin: 2px 0; } .cc-date { font-size: 11.5px; color: var(--muted); margin: 0; } .cc-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; } .cc-tel-lock .tel-blur { filter: blur(3.5px); user-select: none; } .cc-passe { margin-top: 16px; padding: 12px 16px; background: var(--sage-soft); border-radius: 12px; font-size: 13.5px; color: var(--ink); } .cc-vide { text-align: center; padding: 40px 0; color: var(--muted); } .cc-vide img { opacity: .8; margin-bottom: 10px; } .tab-badge--coeur { background: var(--coral); } /* --- le sondage, sur le tableau de bord --- */ .cw-sondage { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: #fff; border: 1px solid var(--sage); border-left: 4px solid var(--sage); border-radius: 14px; padding: 14px 18px; margin-bottom: 16px; } .cw-sondage-txt { flex: 1; min-width: 220px; } .cw-sondage-txt strong { display: block; font-size: 13px; color: var(--sage-text); margin-bottom: 3px; } .cw-sondage-txt p { margin: 0; font-size: 13.5px; color: var(--ink); line-height: 1.5; } .cw-sondage-f { display: flex; gap: 8px; flex-shrink: 0; } @media (max-width: 640px) { .cc-carte { flex-wrap: wrap; } .cc-actions { width: 100%; } .cc-actions .btn { flex: 1; } } /* « ✓ ouvert » : cette personne a un passe, la conversation est déjà ouverte pour les deux. Le membre l'ignorait — personne ne le lui disait. */ .cc-ouvert { font-size: 11px; font-weight: 800; color: var(--sage-text); background: var(--sage-soft); border-radius: 20px; padding: 3px 8px; white-space: nowrap; cursor: help; } /* ============================================================ VÉRIFICATION D'IDENTITÉ ============================================================ */ .id-ok { display: flex; align-items: center; gap: 16px; background: var(--sage-soft); border: 1px solid var(--sage); border-radius: 14px; padding: 18px 20px; margin-bottom: 8px; } .id-ok strong { display: block; font-size: 16px; color: var(--sage-text); margin-bottom: 3px; } .id-ok p { margin: 0; font-size: 13.5px; color: var(--ink); line-height: 1.5; } .id-err { background: #fef2f2; border: 1px solid #fecaca; border-left: 4px solid #dc2626; color: #7f1d1d; border-radius: 12px; padding: 13px 16px; margin-bottom: 18px; font-size: 13.5px; line-height: 1.5; } /* La promesse de non-conservation : mise en avant, parce qu'elle est vraie et parce que c'est ce qui lève la réticence à envoyer sa pièce. */ .id-privacy { display: flex; gap: 12px; align-items: flex-start; background: #f8fafc; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 20px; font-size: 13px; color: var(--ink); line-height: 1.55; } .id-privacy strong { color: var(--sage-text); } .id-privacy-ico { font-size: 20px; flex-shrink: 0; } .id-form { margin-bottom: 16px; } .id-drop { display: block; border: 2px dashed var(--sage); border-radius: 14px; padding: 26px; text-align: center; cursor: pointer; background: #fff; transition: background .15s, border-color .15s; } .id-drop:hover { background: var(--sage-soft); border-color: var(--sage-text); } .id-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; } .id-drop-txt strong { display: block; font-size: 15px; color: var(--ink); } .id-drop-txt em { font-style: normal; font-size: 12px; color: var(--muted); } .id-tips { margin: 14px 0 18px; padding-left: 20px; color: var(--muted); font-size: 12.5px; line-height: 1.8; } .id-legal { font-size: 11.5px; color: var(--muted); line-height: 1.5; } /* ============================================================ BANDEAU DE MISE EN RELATION — mobile uniquement ============================================================ Ramène « coup de cœur / message / téléphone » sous le pouce, en bas d'écran, au lieu de les laisser tout en bas de la fiche. Le but est un seul : réduire la distance entre voir un profil et le contacter. */ .relation-bar { display: none; } @media (max-width: 860px) { .relation-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: #fff; border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgba(15,23,42,.08); /* respecte l'encoche des iPhone (barre d'accueil) */ padding-bottom: env(safe-area-inset-bottom, 0); } /* Tant que le bandeau cookie occupe le bas (body.a-cookie, posé par consent.js), on remonte le bandeau relation juste au-dessus de lui. Sans ça, il restait caché dessous et ne se « révélait » qu'une fois le cookie fermé — d'où l'impression qu'il fallait scroller pour le voir. */ body.a-cookie .relation-bar { bottom: 76px; box-shadow: 0 4px 16px rgba(15,23,42,.10); } .relation-item { flex: 1; margin: 0; display: flex; border: none; background: none; } /* Chaque bouton a désormais SON fond de couleur : sur fond blanc, les icônes seules se lisaient mal et se ressemblaient toutes. La couleur les distingue d'un coup d'œil et donne envie d'appuyer. Un petit écart de teinte entre les trois délimite aussi les zones tactiles. */ .relation-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 9px 4px 8px; min-height: 58px; border: none; cursor: pointer; font-family: inherit; text-decoration: none; border-right: 2px solid #fff; /* liseré blanc entre les pavés colorés */ } .relation-item:last-child .relation-btn { border-right: none; } .relation-ico { font-size: 21px; line-height: 1; display: flex; } .relation-ico img { display: block; } .relation-lab { font-size: 11px; font-weight: 800; } /* Trois pavés PLEINS, de même poids visuel, icônes et texte en blanc. Sur fond blanc les icônes se ressemblaient ; en aplat de couleur elles se distinguent nettement et le bandeau devient une vraie barre d'action. (les icônes SVG ont une teinte fixe → on les blanchit au filtre) */ /* --- Coup de cœur : corail --- */ /* Corail plein quand le cœur est ACTIF — que ce soit un coup de cœur connecté (is-on) ou un favori déconnecté (is-fav). Atténué sinon. */ .relation-btn.is-coeur { background: #f6a99f; color: #fff; } /* état neutre */ .relation-btn.is-coeur.is-on, .relation-btn.is-coeur.is-fav { background: var(--coral); } /* actif */ /* --- Message : sauge --- */ .relation-btn.is-msg { background: var(--sage); color: #fff; } .relation-btn.is-msg .relation-ico img { filter: brightness(0) invert(1); } /* --- Téléphone débloqué : sauge foncé, l'action « chaude » --- */ .relation-btn.is-tel { background: var(--sage-deep); color: #fff; } .relation-btn.is-tel .relation-ico img { filter: brightness(0) invert(1); } /* --- Téléphone verrouillé : gris, il mène au passe --- */ .relation-btn.is-locked { background: #9aa3ab; color: #fff; } .relation-btn.is-locked .relation-ico img { filter: brightness(0) invert(1); opacity: .85; } /* ⚠️ sans ça, le bandeau MASQUE le bas de la fiche (pied de page, dernier bloc). On réserve sa hauteur en bas de la page profil. */ .profil-wrap { padding-bottom: 76px; } } /* Sorties du gate — il incite, il n'emprisonne pas. */ .gate-box { position: relative; } .gate-close { position: absolute; top: 12px; right: 14px; width: 32px; height: 32px; border: none; background: none; font-size: 26px; line-height: 1; color: var(--muted); cursor: pointer; border-radius: 50%; transition: background .12s, color .12s; } .gate-close:hover { background: #f1f3f5; color: var(--ink); } .gate-skip { margin-top: 14px; border: none; background: none; color: var(--muted); font-size: 13px; cursor: pointer; text-decoration: underline; font-family: inherit; } .gate-skip:hover { color: var(--ink); } /* ============================================================ Menu invité (déconnecté) — connexion / inscription ============================================================ */ /* le déclencheur : une pastille icône, sobre, alignée sur le cœur du header */ .account-btn--icon { width: 42px; height: 42px; padding: 0; justify-content: center; border-radius: 999px; gap: 3px; } .account-btn--icon .account-arrow { margin: 0; opacity: .6; } /* le contenu déroulant */ .guest-pop { min-width: 220px; padding: 14px; text-align: center; } /* l'action principale : un vrai bouton plein, c'est ce qu'on veut pousser */ .guest-cta { display: block; width: 100%; background: var(--coral); color: #fff; border: none; border-radius: 11px; padding: 12px 16px; font-family: inherit; font-weight: 800; font-size: 15px; cursor: pointer; transition: filter .12s, transform .05s; } .guest-cta:hover { filter: brightness(1.05); } .guest-cta:active { transform: translateY(1px); } /* le séparateur « déjà inscrit ? » */ .guest-sep { margin: 12px 0 8px; font-size: 12.5px; color: var(--muted); position: relative; } .guest-sep::before, .guest-sep::after { content: ''; position: absolute; top: 50%; width: 32%; height: 1px; background: var(--border); } .guest-sep::before { left: 0; } .guest-sep::after { right: 0; } /* l'action secondaire : discrète, un lien-bouton */ .guest-link { background: none; border: none; cursor: pointer; color: var(--sage-text); font-family: inherit; font-weight: 700; font-size: 14.5px; padding: 6px 10px; border-radius: 8px; transition: background .12s; } .guest-link:hover { background: var(--sage-soft); } /* ============================================================ AVIS — bandeau compte, page étoiles + portes ============================================================ */ /* le bandeau sur le tableau de bord (même famille que cw-photo) */ .cw-avis { display: flex; align-items: center; gap: 16px; background: var(--sage-soft); border: 1px solid var(--sage); border-radius: 14px; padding: 16px 20px; margin-bottom: 18px; } .cw-avis-txt { flex: 1; } .cw-avis-txt strong { display: block; color: var(--sage-text); font-size: 15.5px; margin-bottom: 2px; } .cw-avis-txt p { margin: 0; font-size: 13px; color: var(--ink); line-height: 1.5; } .cw-avis-cta { flex-shrink: 0; white-space: nowrap; } @media (max-width: 620px) { .cw-avis { flex-direction: column; text-align: center; } .cw-avis-cta { width: 100%; } } /* --- La page d'avis --- */ .avis-form { max-width: 560px; } /* les étoiles : en row-reverse pour que le survol allume de gauche à droite via le sélecteur ~ (l'étoile survolée + toutes celles à sa gauche) */ .avis-etoiles { display: inline-flex; flex-direction: row-reverse; gap: 4px; margin: 4px 0 22px; font-size: 38px; line-height: 1; } .avis-etoiles input { position: absolute; width: 1px; height: 1px; opacity: 0; } .avis-etoiles label { color: #d8dde2; cursor: pointer; transition: color .1s; } .avis-etoiles label:hover, .avis-etoiles label:hover ~ label, .avis-etoiles input:checked ~ label { color: #f6b73c; } .avis-label { display: block; font-weight: 700; color: var(--ink); margin-bottom: 8px; } .avis-textarea { width: 100%; border: 1.5px solid var(--border); border-radius: 12px; padding: 12px 14px; font-family: inherit; font-size: 14.5px; line-height: 1.6; resize: vertical; box-sizing: border-box; } .avis-textarea:focus { outline: none; border-color: var(--sage-text); } .avis-choix-titre { font-weight: 800; color: var(--ink); margin: 24px 0 12px; } .avis-portes { display: grid; gap: 12px; } .avis-porte { display: block; text-align: left; cursor: pointer; border: 1.5px solid var(--border); border-radius: 14px; padding: 16px 18px; background: #fff; font-family: inherit; transition: border-color .12s, background .12s; } .avis-porte strong { display: block; font-size: 15px; color: var(--ink); margin-bottom: 3px; } .avis-porte span { font-size: 13px; color: var(--muted); } .avis-porte--public { border-color: var(--sage-text); } .avis-porte--public:hover { background: var(--sage-soft); border-color: var(--sage-text); } .avis-porte--public strong { color: var(--sage-text); } .avis-porte--prive:hover { border-color: var(--ink); } /* Choix du canal en cartes radio : le rond natif est masqué, la carte sélectionnée s'entoure. Le bouton « Envoyer » valide ensuite. */ .avis-portes--radio .avis-porte { display: flex; align-items: flex-start; gap: 10px; } .avis-portes--radio .avis-porte input { margin-top: 3px; accent-color: var(--indigo, #4b3fa8); flex: 0 0 auto; } .avis-portes--radio .avis-porte:has(input:checked) { border-color: var(--indigo, #4b3fa8); background: #f5f3fd; box-shadow: 0 0 0 1px var(--indigo, #4b3fa8); } .avis-porte-txt { display: block; } .avis-envoyer { margin-top: 18px; width: 100%; } .avis-merci { text-align: center; padding: 30px 0; } .avis-merci h1 { margin: 12px 0 6px; } .avis-merci p { color: var(--ink); max-width: 440px; margin: 0 auto 22px; line-height: 1.6; } /* ============================================================ Header déconnecté — deux présentations selon la place ============================================================ Desktop : les deux boutons en clair (il y a la place, autant être direct). Mobile : une icône qui déplie le menu (barre étroite). */ .guest-inline { display: inline-flex; align-items: center; gap: 10px; } .guest-menu-mobile { display: none; } @media (max-width: 640px) { .guest-inline { display: none; } /* plus de place pour deux boutons */ .guest-menu-mobile { display: inline-flex; } /* on passe à l'icône */ } /* ============================================================ Tunnel d'inscription — le champ qui manque ============================================================ Quand on refuse de passer à l'étape suivante, on ne se contente pas de dire « complétez » : on entoure le champ fautif et on y amène le focus. Le halo s'efface tout seul au bout de 2 s pour ne pas rester en alarme. */ .mf-manque { border-radius: 12px; animation: mf-manque-pulse 2.2s ease-out; } .mf-manque input, .mf-manque textarea, .mf-manque select { border-color: var(--coral, #F08A7C) !important; } @keyframes mf-manque-pulse { 0% { box-shadow: 0 0 0 0 rgba(240,138,124,.55); } 35% { box-shadow: 0 0 0 7px rgba(240,138,124,.14); } 100% { box-shadow: 0 0 0 0 rgba(240,138,124,0); } } /* le message d'erreur : lisible, pas agressif */ .mf-err { margin: 12px 0 0; padding: 10px 14px; background: #fdf0ee; border-left: 3px solid var(--coral, #F08A7C); border-radius: 8px; color: #9a3d31; font-size: 14px; line-height: 1.5; } /* pour les personnes qui préfèrent moins d'animation */ @media (prefers-reduced-motion: reduce) { .mf-manque { animation: none; box-shadow: 0 0 0 3px rgba(240,138,124,.3); } } /* --- Tunnel : réponse imposée par un choix précédent (ex. assmat) --- */ .mf-fixe { margin: 0; padding: 14px 16px; background: var(--sage-soft, #EEF5F1); border: 1px solid var(--sage, #A8C8B8); border-radius: 12px; color: var(--sage-deep, #8FB6A3); font-weight: 700; } .mf-fixe span { display: block; margin-top: 4px; color: var(--ink, #39434D); font-weight: 400; font-size: 13.5px; line-height: 1.5; } /* --- Tunnel : renvoi vers les offres, après la création du compte --- */ .mf-offre { margin: 18px auto 0; max-width: 420px; color: var(--muted); font-size: 13.5px; line-height: 1.6; } .mf-offre a { color: var(--sage-deep, #8FB6A3); font-weight: 700; } /* ============================================================ Compte — « qui je suis, et où » ============================================================ Le repère le plus important de la page : à quel titre on est là, et pour quelle commune. Placé juste sous l'accueil, avant les compteurs. */ .compte-quoi { display: flex; align-items: flex-start; gap: 14px; background: var(--sage-soft, #EEF5F1); border: 1px solid var(--sage, #A8C8B8); border-left: 4px solid var(--sage-deep, #8FB6A3); border-radius: 14px; padding: 16px 18px; margin: 0 0 18px; } .compte-quoi-ico { flex-shrink: 0; margin-top: 1px; } .compte-quoi-txt { flex: 1; min-width: 0; } .compte-quoi-txt > strong { display: block; font-size: 16.5px; line-height: 1.4; color: var(--sage-deep, #8FB6A3); } .compte-quoi-txt > span { display: block; margin-top: 4px; font-size: 13.5px; color: var(--ink, #39434D); } .compte-quoi-txt a { color: var(--sage-deep, #8FB6A3); font-weight: 700; } /* compteur, quand il y a plusieurs annonces */ .compte-quoi-nb { display: inline-block; min-width: 22px; padding: 1px 7px; margin-left: 6px; background: var(--sage-deep, #8FB6A3); color: #fff; border-radius: 999px; font-size: 12.5px; text-align: center; } .compte-quoi-liste { margin: 8px 0 6px; padding-left: 18px; } .compte-quoi-liste li { font-size: 14px; color: var(--ink, #39434D); line-height: 1.6; margin-bottom: 2px; } .compte-quoi-ville { color: #6b7680; } .compte-quoi-pause { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #fdf0ee; color: #9a3d31; font-size: 12px; font-weight: 700; } @media (max-width: 560px) { .compte-quoi { flex-direction: column; gap: 10px; } .compte-quoi-txt > strong { font-size: 15.5px; } } /* --- Compte : curseur du rayon de recherche --- */ .cf-rayon { margin: 22px 0 12px; padding: 18px 20px; background: var(--sage-soft, #EEF5F1); border: 1.5px solid var(--sage, #A8C8B8); border-radius: 16px; } .cf-rayon > label { display: block; margin-bottom: 14px; cursor: default; } .cf-rayon > label strong { display: block; font-size: 16.5px; color: var(--sage-deep, #5a8a72); font-weight: 800; } .cf-rayon > label strong::before { content: '📍 '; } .cf-rayon > label span { font-size: 13px; color: var(--muted); } .cf-rayon-ligne { display: flex; align-items: center; gap: 16px; } .cf-rayon-ligne input[type=range] { flex: 1; accent-color: var(--sage-deep, #8FB6A3); height: 28px; cursor: pointer; } .cf-rayon-ligne output { flex-shrink: 0; min-width: 82px; text-align: center; background: #fff; border: 2px solid var(--sage-deep, #8FB6A3); border-radius: 999px; padding: 7px 14px; font-weight: 800; font-size: 18px; color: var(--sage-deep, #5a8a72); } .cf-rayon-aide { margin: 10px 0 0; font-size: 13px; color: var(--muted); min-height: 20px; } /* ============================================================ Contacter — « et après ? » ============================================================ Placé APRÈS le formulaire : le message part d'abord, l'offre vient ensuite. Encadré sobre, jamais un mur. */ .ct-suite { margin: 26px 0 0; padding: 18px 20px; background: #fff; border: 1px solid var(--border, #e6e1d8); border-left: 4px solid var(--coral, #F08A7C); border-radius: 14px; } .ct-suite--ok { border-left-color: var(--sage-deep, #8FB6A3); background: var(--sage-soft, #EEF5F1); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .ct-suite strong { display: block; font-size: 15.5px; color: var(--ink, #39434D); } .ct-suite p { margin: 4px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink, #39434D); } .ct-suite-liste { margin: 14px 0 16px; padding-left: 18px; } .ct-suite-liste li { font-size: 14px; line-height: 1.7; color: var(--ink, #39434D); } .ct-suite-bas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } /* le numéro masqué : on montre la forme, pas le contenu */ .ct-tel-locked { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1.5px dashed var(--border, #e6e1d8); border-radius: 999px; text-decoration: none; background: #fbf9f6; } .ct-tel-locked img { width: 17px; height: 17px; opacity: .55; } .ct-tel-blur { font-weight: 800; color: var(--muted); letter-spacing: 1px; filter: blur(2.5px); user-select: none; } .ct-tel-locked em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--coral, #F08A7C); } .ct-suite-note { margin-top: 12px !important; font-size: 12.5px !important; color: var(--muted) !important; } @media (max-width: 560px) { .ct-suite--ok { flex-direction: column; align-items: stretch; } .ct-suite-bas { flex-direction: column; align-items: stretch; } .ct-tel-locked { justify-content: center; } } /* --- Compte : zone d'intervention --- Mêmes pastilles que le tunnel d'inscription : la case native est masquée (mais présente, pour le clavier et les lecteurs d'écran), et c'est le label qui porte l'apparence. */ .cf-zone { margin: 0 0 22px; } .cf-zone-intro { margin: 0 0 12px; font-size: 13.5px; color: var(--muted); line-height: 1.55; } .cf-zone-liste { display: flex; flex-wrap: wrap; gap: 8px; } .cf-zone-item { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border: 1.5px solid var(--border, #e6e1d8); background: #fff; border-radius: 999px; cursor: pointer; transition: border-color .14s, background .14s, box-shadow .14s; } /* la case reste là pour le clavier, mais ne se voit plus */ .cf-zone-item input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; } .cf-zone-item:hover { border-color: var(--sage, #A8C8B8); } /* focus clavier : l'anneau se pose sur la pastille, pas sur la case cachée */ .cf-zone-item:focus-within { border-color: var(--sage-deep, #8FB6A3); box-shadow: 0 0 0 3px rgba(143, 182, 163, .25); } /* état coché — piloté par CSS quand :has() est disponible, et par la classe .is-on posée au rendu puis mise à jour en JS partout ailleurs */ .cf-zone-item.is-on, .cf-zone-item:has(input:checked) { border-color: var(--sage-deep, #8FB6A3); background: var(--sage-soft, #EEF5F1); } .cf-zone-item.is-on::before, .cf-zone-item:has(input:checked)::before { content: '✓'; color: var(--sage-deep, #8FB6A3); font-weight: 900; font-size: 13px; } .cf-zone-nom { font-size: 14px; font-weight: 700; color: var(--ink, #39434D); } .cf-zone-km { font-style: normal; font-size: 12px; color: var(--muted); } .cf-zone-note { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); } /* --- Fiche : les communes déclarées --- */ .zone-villes { margin: 8px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--ink, #39434D); } .zone-villes a { color: var(--sage-deep, #8FB6A3); font-weight: 700; } /* --- Tunnel : zone d'intervention, sous l'adresse --- */ .mf-zone { margin: 18px 0 0; padding: 16px 18px; background: var(--sage-soft, #EEF5F1); border-radius: 14px; } .mf-zone-q { margin: 0; font-size: 15px; color: var(--ink, #39434D); } .mf-zone-aide { margin: 4px 0 12px; font-size: 13px; color: var(--muted); line-height: 1.5; } .mf-zone-liste { display: flex; flex-wrap: wrap; gap: 8px; } .mf-zone-item { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border: 1.5px solid #fff; background: #fff; border-radius: 999px; cursor: pointer; font-family: inherit; transition: border-color .12s, background .12s; } .mf-zone-item:hover { border-color: var(--sage, #A8C8B8); } .mf-zone-item.is-on { border-color: var(--sage-deep, #8FB6A3); background: #fff; } .mf-zone-item.is-on::before { content: '✓'; color: var(--sage-deep, #8FB6A3); font-weight: 900; } .mf-zone-item span { font-size: 14px; font-weight: 700; color: var(--ink, #39434D); } .mf-zone-item em { font-style: normal; font-size: 12px; color: var(--muted); } /* Arrondissements : liste plus dense que les communes voisines — il y en a jusqu'à vingt, et leurs noms se ressemblent tous. */ .side-links--arr { column-count: 2; column-gap: 14px; } @media (max-width: 900px) { .side-links--arr { column-count: 1; } } /* --- Profil non accessible (verrou entre camps) --- */ .refus { text-align: center; padding: 44px 0 64px; max-width: 560px; margin: 0 auto; } .refus h1 { font-size: 24px; margin: 18px 0 12px; color: var(--ink, #39434D); } .refus > p { color: var(--ink, #39434D); line-height: 1.65; margin: 0 0 22px; } .refus-note { margin-top: 28px !important; padding: 14px 18px; background: var(--cream, #F8F4EE); border-radius: 12px; font-size: 13.5px !important; color: var(--muted) !important; line-height: 1.6; } .refus-aide { font-size: 13px !important; color: var(--muted) !important; margin-top: 14px !important; } .refus-aide a { color: var(--sage-deep, #8FB6A3); font-weight: 700; } /* ============================================================ Colonne de gauche : « Une autre recherche » ============================================================ Même mécanique que la page d'accueil, mais empilée : la colonne est étroite, la pilule horizontale n'y tiendrait pas. */ .side-search { padding-bottom: 4px; } .search-bar--side { display: block; /* on annule la mise en ligne */ border-radius: 16px; padding: 12px; margin-top: 10px; max-width: none; box-shadow: none; border: 1px solid var(--border, #e6e1d8); background: var(--cream, #F8F4EE); } .search-bar--side .search-field { padding: 0; margin-bottom: 10px; background: #fff; border: 1px solid var(--border, #e6e1d8); border-radius: 12px; padding: 8px 12px; } /* Le dernier champ gardait sa marge basse alors que le bouton a disparu : il restait une bande crème sous le champ ville, qu'on lisait comme un morceau de bouton tronqué. */ .search-bar--side .search-field--loc { margin-bottom: 0; } .search-bar--side .search-field label { display: block; font-size: 11.5px; color: var(--muted, #646D76); margin-bottom: 2px; text-transform: none; } .search-bar--side .search-field input { width: 100%; border: none; font-size: 14.5px; } /* dans une colonne étroite, le libellé peut occuper toute la largeur : plus rien à bousculer, contrairement à la barre de l'accueil */ .search-bar--side #s-dd-label { width: auto; max-width: 100%; } .search-bar--side .s-dd-btn { width: 100%; justify-content: space-between; font-size: 14.5px; } /* le menu déroulant doit couvrir la colonne, pas s'y écraser */ .search-bar--side .s-dd-list { left: -12px; right: -12px; min-width: 0; } .search-bar--side .s-suggest { left: -12px; right: -12px; } .side-search .search-hint { margin-top: 8px; font-size: 12.5px; } @media (max-width: 900px) { /* en pile, ce bloc passe en premier : c'est la sortie la plus utile quand on s'est trompé de ville */ .side-search { order: -1; } } /* ============================================================ Pagination ============================================================ Elle n'avait aucun style : deux liens bruts et un texte au milieu. On en fait trois blocs équilibrés, la position au centre. */ .pagination { /* trois colonnes : la position reste au centre exact, quels que soient les boutons présents */ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 32px 0 8px; } .page-slot { display: flex; } .page-slot--prev { justify-content: flex-end; } .page-slot--next { justify-content: flex-start; } .page-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; background: #fff; border: 1.5px solid var(--border); border-radius: 999px; font-size: 14.5px; font-weight: 700; color: var(--ink); transition: border-color .14s, background .14s, transform .1s; } .page-btn:hover { border-color: var(--sage-text); background: var(--sage-soft); color: var(--sage-text); text-decoration: none; } .page-btn:active { transform: translateY(1px); } .page-info { text-align: center; white-space: nowrap; font-size: 13.5px; font-weight: 500; color: var(--muted); } .page-info strong { color: var(--ink); font-weight: 800; } @media (max-width: 560px) { .page-btn { padding: 9px 14px; font-size: 13.5px; } .page-info { min-width: 84px; font-size: 12.5px; } } /* ---- Blocs dépliables de la colonne ---- Arrondissements, communes voisines, autres types : utiles, mais secondaires. Fermés par défaut, l'essentiel — recherche et filtres — tient à l'écran.
plutôt qu'un script : natif, accessible au clavier, et l'état survit à l'impression comme au JavaScript désactivé. */ .side-fold { padding: 0; } .side-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 18px; margin: 0; border-radius: 16px; transition: background .12s; } .side-fold > summary::-webkit-details-marker { display: none; } .side-fold > summary::after { content: ''; flex-shrink: 0; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform .16s; } .side-fold[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); } .side-fold > summary:hover { background: var(--trame, #f6f3ee); } .side-fold[open] > summary { border-radius: 16px 16px 0 0; } .side-fold > ul { padding: 0 12px 14px; } /* ---- Listes déroulantes des filtres ---- La flèche existait déjà, mais le reste gardait l'aspect système : bordure fine, coins peu marqués, aucun retour au survol. On les aligne sur les autres champs du site. */ .filter-group select, .filter-group input[type=number] { border-radius: 12px; padding: 10px 12px; font-weight: 600; color: var(--ink); transition: border-color .14s, box-shadow .14s, background .14s; } .filter-group select { padding-right: 34px; background-color: #fff; } .filter-group select:hover, .filter-group input[type=number]:hover { border-color: var(--sage-text); } .filter-group select:focus, .filter-group input[type=number]:focus { border-color: var(--sage-text); box-shadow: 0 0 0 3px rgba(143, 182, 163, .22); outline: none; } /* une valeur choisie se distingue du réglage par défaut */ .filter-group select:not([data-vide]):valid { color: var(--ink); } .filter-group > label { font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 7px; } /* Réinitialiser : sorti du formulaire, il a besoin de son propre espacement */ .filter-reset { display: block; text-align: center; margin: 10px 0 4px; padding: 8px; font-size: 13px; font-weight: 600; color: var(--muted); border-radius: 10px; transition: background .12s, color .12s; } .filter-reset:hover { background: var(--trame, #f6f3ee); color: var(--ink); text-decoration: none; } /* ---- Badge de métier sur les cartes de résultat ---- Le premier repère qu'on cherche en parcourant une liste : nounou, assistante maternelle ou baby-sitter ? Un peu plus marqué que les autres badges, et une couleur par métier pour qu'on l'attrape sans lire. */ .res-badge--metier { font-size: 11.5px; font-weight: 800; padding: 4px 11px; letter-spacing: .01em; } .res-badge--sage { background: var(--sage-soft, #EEF5F1); color: var(--sage-deep, #6f9c86); } .res-badge--indigo { background: var(--indigo-soft, #eceaf7); color: var(--indigo-deep, #3f3a78); } .res-badge--coral { background: #fdf0ee; color: #b5503f; } /* « Répond rapidement » — l'argument de vente. VERT PLEIN, éclair blanc : volontairement tranché face aux badges vert pâle voisins (« Identité vérifiée », métier), pour qu'il attrape l'œil sans se noyer. */ .res-badge--fast { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 800; padding: 4px 11px; background: #1f9d63; color: #fff; box-shadow: 0 1px 3px rgba(31,157,99,.35); } .res-badge--fast img { display: block; } /* la case à cocher du filtre : éclair vert sur fond clair, discret */ .filter-check--fast { display: flex; align-items: center; gap: 6px; } .filter-check--fast img { display: block; opacity: .95; } /* le rappel sur la fiche : même pastille pleine, en tête du bloc réponse */ .reponse-list .repond-vite { display: flex; width: fit-content; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; background: #1f9d63; color: #fff; font-weight: 800; margin: 0 0 10px; } .reponse-list .repond-vite img { display: block; } /* ---- Bandeau « Dernières annonces » (page racine métier) ---- Des cartes compactes, une par annonce récente : du frais en haut de page, et autant de liens internes vers les fiches. */ .derniers-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .derniere-carte { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: #fff; text-decoration: none; transition: box-shadow .2s, transform .2s, border-color .2s; } .derniere-carte:hover { box-shadow: 0 6px 18px rgba(0,0,0,.07); transform: translateY(-2px); border-color: var(--sage-text); } .derniere-ava { flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: var(--sage-soft); } .derniere-ava img { width: 52px; height: 52px; object-fit: cover; display: block; } .derniere-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .derniere-nom { font-weight: 800; color: var(--ink); font-size: 15px; } .derniere-ville { font-size: 13px; color: var(--muted); } .derniere-tarif { font-size: 13px; font-weight: 700; color: var(--sage-text); } .derniere-carte .res-badge--fast { margin-top: 4px; align-self: flex-start; } /* le bloc de badges respire un peu plus qu'avant : il porte maintenant l'information principale, pas seulement des mentions annexes */ .ann-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; } /* ---- Dernière visite, sur la fiche ---- Remplace un « En recherche active » qui s'affichait pour tout le monde. Discret quand c'est ancien, coloré quand c'est récent : l'information vaut par sa fraîcheur, pas par sa présence. */ .profil-en-recherche--chaud { color: #1f7a58; font-weight: 700; } .profil-en-recherche--live { color: #1f7a58; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; } .profil-en-recherche--live .dot { margin-left: 0; } /* ---- Pastille « en ligne » dans l'angle de la carte ---- Accolée au prénom, elle se confondait avec la ponctuation. Dans l'angle, à cheval sur la bordure, on la repère sans avoir à lire. Le liseré blanc la détache du trait de la carte. */ .ann { position: relative; } .ann-live { position: absolute; top: -11px; right: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 10px; border-radius: 999px; background: #e6f7ef; border: 1.5px solid #3fbf7f; font-size: 12px; font-weight: 800; color: #1f7a58; white-space: nowrap; } .ann-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #3fbf7f; flex-shrink: 0; animation: dotPulse 2.4s ease-in-out infinite; } /* la carte se soulève au survol : la pastille doit suivre sans se décoller */ .ann--en-ligne { z-index: 1; } @media (prefers-reduced-motion: reduce) { .ann-live-dot { animation: none; } } /* ---- Dernière visite, en bas de la carte d'action ---- Juste au-dessus du signalement : c'est là qu'on hésite à écrire, et savoir si la personne est repassée pèse plus, à cet instant, que le reste de la page. Discret quand c'est ancien, vert quand c'est récent. */ .cta-vue { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); text-align: center; } .cta-vue--chaud { color: #1f7a58; font-weight: 700; } .cta-vue--live { color: #1f7a58; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 7px; } .cta-vue--live .dot { margin-left: 0; } /* Icône téléphone sur la page « profils retenus » (accès réservé au passe) */ .cc-tel { display: inline-flex; align-items: center; gap: 5px; } .cc-tel svg { display: block; } .cc-tel-lock { font-size: 11px; line-height: 1; } /* Contacter : bloc profil + lien vers la fiche, et bouton « Appeler {prénom} » */ .contact-card-body { flex: 1; min-width: 0; } .ct-voir-profil { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 800; color: var(--sage-text); } .ct-voir-profil:hover { text-decoration: underline; } .ct-appeler { display: inline-flex; align-items: center; gap: 7px; } .ct-appeler svg { display: block; } /* Annonce « mise en avant » (option o_avant) */ .ann--avant { box-shadow: 0 0 0 2px var(--gold, #E7B84B), var(--shadow); } .ann-avant { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; background: var(--gold, #E7B84B); color: #4a3607; font-weight: 800; font-size: 11px; padding: 3px 9px; border-radius: 999px; margin-bottom: 6px; } /* Colonne verticale : l'étiquette « en avant » centrée AU-DESSUS de la photo */ .ann-avatar-col { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; } .ann-avant--sus { align-self: center; margin: 0 0 8px; display: inline-flex; width: max-content; } /* ---- Sélecteur de passe : options plus soignées + choix « Sans passe » ---- */ .option { padding: 15px 16px; border-radius: 16px; gap: 14px; } .option img { padding: 9px; background: #fdf3d6; border-radius: 50%; box-sizing: content-box; } .option input { width: 20px; height: 20px; accent-color: #E7B84B; } .option:hover { border-color: #E7B84B; } .option:has(input:checked) { border-color: #E7B84B; background: #fdf9ee; box-shadow: 0 6px 20px rgba(231,184,75,.18); } .option:has(input:checked) .option-prix { color: #8A6414; } .formule--sans { border-style: dashed; background: var(--cream, #faf7f2); justify-content: center; text-align: center; } .formule--sans:hover { border-color: var(--muted); transform: none; } .formule--sans:has(input:checked) { border-color: var(--ink); box-shadow: none; background: #fff; } .formule--sans .formule-acc { color: var(--muted); } /* Commande en attente : actions Reprendre / Annuler */ .btn-xs { padding: 5px 11px; font-size: 12.5px; border-radius: 8px; } .ab-l-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; justify-content: flex-end; } .ab-annul-form { margin: 0; } .ab-badge--annule { background: var(--cream, #f1eee9); color: var(--muted); } /* Bandeau « pas de mauvaise surprise » (anti renouvellement auto) */ .passe-rassure { display: flex; align-items: center; gap: 12px; background: var(--sage-soft); border: 1.5px solid var(--sage); border-radius: 14px; padding: 13px 16px; margin: 0 0 18px; color: var(--sage-text); font-size: 14px; line-height: 1.5; } .passe-rassure svg { flex-shrink: 0; color: var(--sage-text); } .passe-rassure strong { color: var(--ink); } /* ============================================================ Témoignages — popup « la refonte vous plaît ? » + mur d'accueil ============================================================ */ .tem-pop { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(35,45,55,.5); backdrop-filter: blur(2px); animation: temIn .2s ease; } .tem-pop.is-out { opacity: 0; transition: opacity .2s ease; } @keyframes temIn { from { opacity: 0 } to { opacity: 1 } } .tem-box { position: relative; width: 100%; max-width: 420px; background: #fff; border-radius: 20px; padding: 26px 24px 22px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.25); } .tem-x { position: absolute; top: 10px; right: 12px; border: none; background: none; font-size: 26px; line-height: 1; color: var(--muted); cursor: pointer; padding: 4px 8px; } .tem-x:hover { color: var(--ink); } .tem-box h2 { font-size: 20px; margin: 10px 0 6px; color: var(--ink); } .tem-box p { font-size: 14px; color: var(--muted); line-height: 1.55; margin: 0 0 16px; } .tem-intro { font-size: 14px; color: var(--muted); line-height: 1.55; margin: 0 0 14px; } /* la barre d'étoiles : pré-remplie à 5, on ne demande rien de plus */ .tem-etoiles { display: flex; gap: 4px; justify-content: center; } .tem-et { border: none; background: none; cursor: pointer; padding: 0 2px; line-height: 1; font-size: 34px; color: #e2e2e2; transition: color .12s, transform .12s; } .tem-et.is-on { color: #E7B84B; } .tem-et:hover { transform: scale(1.12); } .tem-note-lab { font-size: 13px; font-weight: 800; color: var(--ink); margin: 6px 0 14px !important; min-height: 18px; } .tem-err { color: #c0524a; font-size: 12.5px; margin: 10px 0 0 !important; } .tem-vue--merci h2 { margin-top: 10px; } .tem-box textarea { width: 100%; padding: 11px 13px; border: 1.5px solid var(--border); border-radius: 12px; font: inherit; font-size: 14px; resize: vertical; box-sizing: border-box; } .tem-box textarea:focus { outline: none; border-color: var(--sage-deep); } .tem-check { display: flex; align-items: flex-start; gap: 9px; text-align: left; margin: 12px 0 4px; font-size: 12.5px; color: var(--ink); line-height: 1.45; cursor: pointer; } .tem-check input { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; accent-color: var(--sage-deep); } .tem-actions { display: flex; gap: 9px; justify-content: center; margin-top: 14px; flex-wrap: wrap; } .tem-rgpd { font-size: 11.5px; color: var(--muted); margin: 12px 0 0 !important; } /* Mur de témoignages (accueil) */ .mur { padding: 46px 0; background: var(--cream, #faf7f2); } .mur-h { text-align: center; font-size: 26px; color: var(--ink); margin: 0 0 6px; } .mur-sous { text-align: center; color: var(--muted); font-size: 14.5px; margin: 0 0 26px; } .mur-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; } .mur-carte { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; } .mur-note { color: #E7B84B; font-size: 14px; letter-spacing: 1px; } .mur-txt { font-size: 14.5px; line-height: 1.6; color: var(--ink); margin: 0; } .mur-qui { font-size: 12.5px; color: var(--muted); font-weight: 700; margin: 0; } @media (max-width: 700px) { .mur { padding: 34px 0; } .mur-h { font-size: 22px; } } /* Inscription — étape « Vous êtes… » : séparer parent et professionnels. Sans ça, un parent cherchant une nounou clique « Nounou » en croyant désigner ce qu'il cherche. */ .mf-groupe { font-size: 12px; font-weight: 800; color: #4b5563; text-transform: uppercase; letter-spacing: .045em; margin: 0 0 8px; } .mf-groupe span { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); } .mf-sep { border: 0; border-top: 1px solid var(--border); margin: 18px 0 14px; } /* Inscription — date de naissance en trois listes (le calendrier natif s'ouvrait hors de la modale et perdait la sélection du jour). */ .mf-naiss { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 8px; } .mf-naiss select { width: 100%; padding: 11px 10px; border: 1.5px solid var(--border); border-radius: 12px; font: inherit; font-size: 14.5px; background: #fff; color: var(--ink); } .mf-naiss select:focus { outline: none; border-color: var(--sage-deep); } /* ---- Compte : rayon d'alerte + profils qui correspondent ---- */ /* Le bloc qui donne envie de revenir : ce que le site a à offrir, ici et maintenant */ .corr { display: flex; align-items: center; gap: 14px; margin: 16px 0 0; padding: 15px 18px; border-radius: 16px; text-decoration: none; background: linear-gradient(135deg, var(--sage-soft), #fff); border: 1.5px solid var(--sage); transition: transform .16s, box-shadow .16s; } .corr:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(57,67,77,.12); text-decoration: none; } .corr-nb { flex-shrink: 0; min-width: 52px; height: 52px; padding: 0 10px; border-radius: 14px; background: var(--sage-deep); color: #fff; font-size: 22px; font-weight: 900; display: flex; align-items: center; justify-content: center; } .corr-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .corr-txt strong { font-size: 15px; color: var(--ink); line-height: 1.3; } .corr-sous { font-size: 12.5px; color: var(--muted); line-height: 1.45; } .corr-neuf { color: var(--coral-text); font-size: 12.5px; } .corr-go { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--sage-text); display: inline-flex; align-items: center; justify-content: center; } .corr:hover .corr-go { background: var(--sage-deep); color: #fff; } @media (max-width: 560px) { .corr { gap: 11px; padding: 13px 14px; } .corr-nb { min-width: 44px; height: 44px; font-size: 18px; } .corr-txt strong { font-size: 14px; } } /* Icônes des raccourcis : plus petites, dans une pastille ronde */ .compte-card-ico { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--sage-soft); } .compte-card-ico img { width: 21px; height: 21px; } .compte-quoi-ico { width: 30px; height: 30px; } /* ---- Compte : bandeau d'accueil, colonne de droite ---- */ .compte-welcome { align-items: flex-start; } .compte-welcome-main { flex: 1; min-width: 0; } .compte-welcome-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; flex-shrink: 0; } .cwm-login { font-size: 11.5px; color: var(--muted); } .cwm-ligne { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); } .cwm-ligne svg { color: var(--sage-text); flex-shrink: 0; } .cwm-ligne strong { color: var(--ink); } .cwm-ligne a { font-weight: 700; color: var(--sage-text); font-size: 11.5px; margin-left: 2px; } .cwm-persona { font-weight: 800; color: var(--ink); font-size: 13px; } @media (max-width: 640px) { /* Le bandeau était un flex sans retour à la ligne : le bloc de droite (dernière connexion, persona, rayon) se tassait contre la photo et se chevauchait. On autorise le passage à la ligne, et la colonne de droite prend toute la largeur SOUS la photo et le titre. */ .compte-welcome { flex-wrap: wrap; gap: 14px; padding: 18px; } .compte-welcome-avatar { width: 62px; height: 62px; } .compte-welcome-main { flex: 1 1 160px; min-width: 0; } .compte-welcome-meta { align-items: flex-start; text-align: left; flex: 1 1 100%; width: 100%; margin-top: 2px; padding-top: 12px; border-top: 1px solid rgba(57,67,77,.10); } .compte-h1 { font-size: 21px; margin-bottom: 2px; } .compte-welcome-sub { font-size: 13px; } } /* ---- Compte : raccourcis en capsules (au lieu de quatre pavés) ---- */ .cpills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .cpill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 6px; border-radius: 999px; background: #fff; border: 1.5px solid var(--border); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; } .cpill:hover { border-color: var(--ton, var(--sage)); box-shadow: 0 5px 14px rgba(57,67,77,.09); transform: translateY(-1px); text-decoration: none; } .cpill-ico { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; background: var(--ton-soft, var(--sage-soft)); color: var(--ton-txt, var(--sage-text)); } .cpill-ico svg { width: 15px; height: 15px; } .cpill-txt { font-size: 13px; color: var(--muted); white-space: nowrap; } .cpill-txt strong { font-size: 15px; font-weight: 900; color: var(--ink); margin-right: 1px; } .cpill--annonces { --ton: var(--sage-deep); --ton-soft: var(--sage-soft); --ton-txt: var(--sage-text); } .cpill--messages { --ton: #5aa7d8; --ton-soft: #E9F4FB; --ton-txt: #2F6F96; } .cpill--action { --ton: var(--coral-deep); --ton-soft: var(--coral-soft); --ton-txt: var(--coral-text); } .cpill--messages.is-alerte .cpill-txt strong { color: var(--coral-text); } .cpill-etat { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 800; padding: 2px 8px 2px 6px; border-radius: 999px; white-space: nowrap; } .cpill-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .cpill-etat.is-on { background: var(--sage-soft); color: var(--sage-text); } .cpill-etat.is-on .cpill-dot { background: #2f9e68; } .cpill-etat.is-off { background: #FDF4DE; color: #8A5E00; } .cpill-etat.is-off .cpill-dot { background: #d3a52c; } /* ---- Compte : les 5 profils correspondants, en mini-cartes ---- */ .corrc { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 12px; } .corrc-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; transition: transform .16s, box-shadow .16s, border-color .16s; } .corrc-card:hover { transform: translateY(-3px); border-color: var(--sage); box-shadow: 0 10px 22px rgba(57,67,77,.12); } .corrc-lien { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 8px 8px; text-decoration: none; } .corrc-lien:hover { text-decoration: none; } .corrc-photo { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: var(--sage-soft); border-radius: 13px 13px 16px 16px; margin-bottom: 7px; display: block; } .corrc-img { width: 100%; height: 100%; object-fit: cover; } .corrc-photo img[src$=".svg"] { object-fit: contain; padding: 16%; box-sizing: border-box; } .corrc-nom { font-size: 13.5px; font-weight: 900; color: var(--ink); line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .corrc-meta { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 11px; color: var(--muted); line-height: 1.3; text-align: center; max-width: 100%; overflow: hidden; } .corrc-km { font-weight: 800; color: var(--sage-text); } .corrc-actions { display: flex; gap: 6px; justify-content: center; padding: 0 8px 9px; margin-top: auto; } .corrc-act { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 29px; height: 29px; border-radius: 50%; background: var(--sage-soft); color: var(--sage-text); transition: background .15s, color .15s; } .corrc-act:hover { background: var(--sage-deep); color: #fff; } .corrc-act--tel { background: #E9F4FB; color: #2F6F96; } .corrc-act--tel:hover { background: #5aa7d8; color: #fff; } .corrc-act--lock { background: var(--cream, #f4f1ec); color: var(--muted); } .corrc-act--lock:hover { background: var(--coral-soft); color: var(--coral-text); } .corrc-lock { position: absolute; right: -1px; bottom: -1px; font-size: 9px; line-height: 1; } @media (max-width: 900px) { .corrc { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 520px) { .corrc { grid-template-columns: repeat(2, 1fr); } } .cwm-cherche { font-size: 12.5px; color: var(--text); font-style: italic; } /* Filtres immédiats : retour visuel pendant le rechargement */ .res-filters.is-loading { opacity: .55; pointer-events: none; transition: opacity .15s; } /* Contacter — encart « sans pass », condensé */ .ct-suite { background: var(--cream, #FAF7F2); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; margin-top: 14px; } .ct-suite-intro { font-size: 13.5px; line-height: 1.55; color: var(--text); margin: 0 0 11px; } .ct-suite-intro strong { color: var(--ink); } .ct-plus { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 12px; padding: 0; } .ct-plus li { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 5px 11px; font-size: 12px; color: var(--muted); white-space: nowrap; } .ct-plus li strong { color: var(--ink); font-weight: 800; } .ct-plus svg { width: 14px; height: 14px; color: var(--sage-text); flex-shrink: 0; } .ct-suite-bas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ct-suite-bas .ct-tel-blur { font-size: 15px; font-weight: 800; color: var(--muted); letter-spacing: .5px; filter: blur(2.5px); user-select: none; } .ct-suite-note { font-size: 11.5px; color: var(--muted); } /* Entrée « Supprimer mon compte » dans le menu du header */ .account-item--danger { color: var(--coral-text); } .account-item--danger:hover { background: var(--coral-soft); } /* ---- Mes annonces, sur mobile : le bouton passe SOUS l'encart ---- Le bouton est imbriqué dans la ligne de titre, l'encart en est un frère : impossible de les réordonner tels quels. « display: contents » efface la boîte de la ligne de titre — ses enfants deviennent alors des enfants directs de la colonne, et « order » peut les replacer. Rien ne change sur desktop, où la place ne manque pas. */ @media (max-width: 800px) { .compte-main--annonces { display: flex; flex-direction: column; } .compte-main--annonces .compte-head-row { display: contents; } .compte-main--annonces .compte-h1 { order: 1; margin-bottom: 14px; } .compte-main--annonces .compte-flash { order: 2; } .compte-main--annonces .am-explain { order: 3; margin-bottom: 14px; } .compte-main--annonces .compte-head-row > .btn { order: 4; width: 100%; margin-bottom: 20px; } .compte-main--annonces .annonce-manage-list, .compte-main--annonces .compte-empty { order: 5; } } /* Pastille de nouveauté dans le menu du compte */ .account-item { position: relative; } .account-badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--coral-deep); color: #fff; font-size: 11px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; } /* ---- Profils retenus : sortir du blanc sur blanc ---- La page alignait des cartes blanches sur un fond blanc, séparées par un filet gris. On pose donc un fond teinté par section, et un liseré de couleur sur chaque carte : l'œil distingue enfin ce qu'on reçoit de ce qu'on a retenu, sans avoir à lire les titres. */ .cc-section { --cc-ton: var(--sage-deep); --cc-ton-txt: var(--sage-text); --cc-ton-soft: var(--sage-soft); background: var(--cc-ton-soft); border-radius: 18px; padding: 20px 20px 22px; margin-bottom: 24px; } .cc-section--envoyes { --cc-ton: var(--coral-deep); --cc-ton-txt: var(--coral-text); --cc-ton-soft: var(--coral-soft); } .cc-h2 { display: flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 900; color: var(--ink); margin: 0 0 4px; } .cc-h2 svg { width: 20px; height: 20px; color: var(--cc-ton-txt); flex-shrink: 0; } .cc-count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--cc-ton); color: #fff; font-size: 12.5px; font-weight: 900; } .cc-intro { font-size: 13px; color: var(--cc-ton-txt); margin: 0 0 14px; } /* le liseré : c'est lui qui donne du relief à la liste */ .cc-carte { border-left: 4px solid var(--cc-ton); box-shadow: 0 2px 8px rgba(57,67,77,.05); transition: transform .16s, box-shadow .16s; } .cc-carte:hover { transform: translateX(2px); box-shadow: 0 8px 20px rgba(57,67,77,.12); } .cc-carte.is-neuf { border-color: var(--line); border-left-color: var(--cc-ton); background: #fff; box-shadow: 0 0 0 2px var(--cc-ton) inset, 0 4px 14px rgba(57,67,77,.10); } /* la photo reçoit un anneau de la même teinte */ .cc-photo img, .cc-photo .avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--cc-ton-soft); } .cc-vide { background: #fff; border-radius: 14px; padding: 28px 0; } @media (max-width: 640px) { .cc-section { padding: 16px 14px 18px; border-radius: 14px; } } /* ---- Résultats sur mobile : deux boutons collants sous l'en-tête ---- Les panneaux se déplient EN SUPERPOSITION, juste sous la barre : en flux, ils repoussaient les résultats vers le bas et l'on perdait le fil de ce qu'on lisait. En position fixe, la liste ne bouge pas d'un pixel. */ .res-bar { display: none; } @media (max-width: 860px) { :root { --res-bar-h: 61px; } /* la colonne s'efface : ses contenus deviennent des enfants de la grille */ .res-side { display: contents; } .res-bar { display: flex; gap: 8px; order: 0; position: sticky; top: 68px; z-index: 45; margin: 0 -16px 14px; padding: 10px 16px; background: rgba(255,255,255,.95); backdrop-filter: blur(6px); border-bottom: 1px solid var(--border); } .res-bar-b { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 12px; border: 1.5px solid var(--ton, var(--border)); border-radius: 999px; background: var(--ton-soft, #fff); font: inherit; font-size: 13.5px; font-weight: 800; color: var(--ton-txt, var(--ink)); cursor: pointer; } .res-bar-b svg { width: 16px; height: 16px; color: var(--ton-txt, var(--sage-text)); } .res-bar-b.is-on { background: var(--ton); border-color: var(--ton); color: #fff; } .res-bar-b.is-on svg { color: #fff; } /* une couleur par bouton : on retient la position ET la teinte */ .res-bar-b[data-panneau="recherche"] { --ton: var(--sage-deep); --ton-soft: var(--sage-soft); --ton-txt: var(--sage-text); } .res-bar-b[data-panneau="filtres"] { --ton: var(--coral-deep); --ton-soft: var(--coral-soft); --ton-txt: var(--coral-text); } /* repliés par défaut */ .res-side .side-search, .res-filters { display: none; } /* dépliés : EN SUPERPOSITION sous la barre, la liste ne bouge pas */ .res-layout.ouvre-recherche .side-search, .res-layout.ouvre-filtres .res-filters { display: block; position: fixed; left: 0; right: 0; /* Le haut est calculé en JS d'après la position RÉELLE de la barre : tant qu'on n'a pas défilé, elle n'est pas encore collée à l'en-tête, et une valeur figée faisait apparaître le panneau derrière elle. */ top: var(--res-panneau-top, calc(68px + var(--res-bar-h))); z-index: 44; max-height: calc(100vh - var(--res-panneau-top, 129px) - 16px); max-height: calc(100dvh - var(--res-panneau-top, 129px) - 16px); overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 0; border-radius: 0 0 18px 18px; border-top: none; box-shadow: 0 18px 40px rgba(35,45,55,.22); } /* voile derrière le panneau : on comprend qu'il est au-dessus */ .res-layout.ouvre-recherche::after, .res-layout.ouvre-filtres::after { content: ''; position: fixed; top: var(--res-panneau-top, calc(68px + var(--res-bar-h))); left: 0; right: 0; bottom: 0; background: rgba(35,45,55,.28); z-index: 43; } /* ⚠️ Le panneau de recherche ne doit PAS rogner : la liste des villes est en position absolue, et un conteneur en « overflow: auto » la coupe — on ne voyait qu'une seule suggestion. Ce bloc est court, il n'a pas besoin de défiler. Les filtres, eux, gardent leur défilement : la liste y est longue. */ .res-layout.ouvre-recherche .side-search { overflow: visible; max-height: none; } .s-suggest { max-height: 50vh; } .res-list { order: 1; } .res-side details { order: 3; } /* communes voisines : toujours en fin */ } /* ---- Mes annonces : donner du relief à la liste ---- Des cartes blanches alignées sur un fond blanc, séparées par un filet gris : rien ne distinguait une annonce en ligne d'une annonce en pause avant d'avoir lu son badge. Le liseré de gauche porte désormais le statut. */ .am-row { --am-ton: var(--line2); --am-soft: #fff; border-left: 5px solid var(--am-ton); background: var(--am-soft); box-shadow: 0 2px 8px rgba(57,67,77,.05); transition: transform .16s, box-shadow .16s; } .am-row:hover { transform: translateX(2px); box-shadow: 0 10px 24px rgba(57,67,77,.11); } .am-row--active { --am-ton: #2f9e68; --am-soft: linear-gradient(90deg, #F2FAF6, #fff 46%); } .am-row--pending { --am-ton: #5aa7d8; --am-soft: linear-gradient(90deg, #F1F8FC, #fff 46%); } .am-row--paused { --am-ton: #d3a52c; --am-soft: linear-gradient(90deg, #FEFAF0, #fff 46%); } .am-row--disabled { --am-ton: var(--line2); --am-soft: #FBFAF9; opacity: .82; } /* la pastille de statut reprend la teinte, avec un point devant */ .am-badge { display: inline-flex; align-items: center; gap: 6px; } .am-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--am-ton); flex-shrink: 0; } .am-row--active .am-badge::before { box-shadow: 0 0 0 3px rgba(47,158,104,.20); } /* l'encart explicatif : moins plat */ .am-explain { box-shadow: 0 2px 10px rgba(57,67,77,.05); } /* ---- « Autour de moi » : mobile uniquement ---- Sur ordinateur, la position vient souvent de l'adresse IP, avec des kilomètres d'erreur : l'intérêt est faible et le risque de proposer la mauvaise commune élevé. */ .s-geo { display: none; } @media (max-width: 860px) { .search-field--loc { position: relative; } .s-geo { display: inline-flex; align-items: center; justify-content: center; position: absolute; right: 8px; bottom: 8px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: #fff; color: var(--sage-text); cursor: pointer; padding: 0; } .s-geo svg { width: 17px; height: 17px; } .s-geo:active { background: var(--sage-soft); } .s-geo.is-busy { color: var(--muted); animation: geo-cherche 1s linear infinite; } @keyframes geo-cherche { to { transform: rotate(360deg); } } /* le champ laisse la place au bouton */ .search-field--loc input[type=text] { padding-right: 48px; } } /* La barre de l'accueil est ronde et le bouton « Rechercher » occupe la droite : on cale le viseur juste avant lui, centré verticalement. */ @media (max-width: 860px) { .search-bar .search-field--loc .s-geo { bottom: auto; top: 50%; transform: translateY(-50%); right: 6px; } .search-bar--side .search-field--loc .s-geo { top: auto; transform: none; bottom: 8px; right: 8px; } } /* Texte réservé aux moteurs et aux lecteurs d'écran : il DÉCRIT fidèlement la destination du lien, il ne dissimule rien. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Le titre de carte devient un lien : il ne doit pas se souligner ni changer de couleur, la carte entière reste cliquable par ailleurs. */ .ann-name a { color: inherit; text-decoration: none; } .ann-name a:hover { color: var(--sage-text); text-decoration: none; } /* ============================================================ Fin de tunnel — le renvoi vers les offres ============================================================ Ancienne version : un lien en bas de page, invisible dans les faits. Ici c'est une carte cliquable pleine largeur, avec icône, bénéfice et prix d'entrée. « Continuer » reste juste dessous : on pousse, on n'enferme pas. */ .mf-offre-cta { display: flex; align-items: center; gap: 13px; width: 100%; margin: 20px auto 12px; max-width: 460px; padding: 15px 16px; background: var(--sage-soft); border: 2px solid var(--sage); border-radius: var(--radius, 18px); text-decoration: none; text-align: left; box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease, background .15s ease; } .mf-offre-cta:hover, .mf-offre-cta:focus-visible { background: #fff; border-color: var(--sage-deep); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .mf-offre-ico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: var(--sage-deep); display: inline-flex; align-items: center; justify-content: center; } .mf-offre-ico img { width: 22px; height: 22px; } .mf-offre-txt { flex: 1 1 auto; min-width: 0; } .mf-offre-txt strong { display: block; font-size: 16.5px; font-weight: 800; color: var(--sage-text); line-height: 1.25; } .mf-offre-txt small { display: block; margin-top: 3px; font-size: 12.8px; line-height: 1.45; color: var(--ink); } .mf-offre-des { flex: 0 0 auto; align-self: flex-start; background: var(--sage-deep); color: #fff; font-size: 11.5px; font-weight: 800; white-space: nowrap; padding: 4px 9px; border-radius: 999px; } .mf-offre-fl { flex: 0 0 auto; color: var(--sage-text); font-size: 20px; font-weight: 800; line-height: 1; } .mf-done-apres { display: inline-block; margin-top: 2px; } @media (max-width: 480px) { .mf-offre-cta { gap: 11px; padding: 13px 13px; flex-wrap: wrap; } .mf-offre-ico { width: 38px; height: 38px; } .mf-offre-ico img { width: 19px; height: 19px; } .mf-offre-txt strong { font-size: 15.5px; } .mf-offre-fl { display: none; } .mf-offre-des { order: 3; margin-left: 49px; } } /* ============================================================ Options actives — jours restants et prolongation ============================================================ */ .ab-option-txt { flex: 1 1 auto; min-width: 0; } .ab-opt-j { font-weight: 800; color: var(--sage-text); } /* Option qui se termine : on la sort du lot, sans crier. */ .ab-option--fin { border-color: var(--coral); background: var(--coral-soft); } .ab-option--fin .ab-opt-j { color: var(--coral-text); } .ab-opt-form { flex: 0 0 auto; margin: 0; } .ab-opt-alerte { grid-column: 1 / -1; margin: 0; padding: 9px 13px; background: var(--coral-soft); color: var(--coral-text); border-radius: var(--radius-sm, 12px); font-size: 13px; line-height: 1.5; } /* ============================================================ Page /passe — options déjà payées ============================================================ Elles ne figurent plus dans le catalogue : sans ce rappel, leur absence passerait pour une offre disparue. */ .passe-deja { max-width: 620px; margin: 0 auto 18px; display: flex; flex-direction: column; gap: 8px; } .passe-deja-l { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 11px 14px; background: var(--sage-soft); border-radius: var(--radius-sm, 12px); font-size: 13.5px; line-height: 1.5; color: var(--ink); } .passe-deja-l img { flex: 0 0 auto; margin-top: 2px; } .passe-deja-l a { color: var(--sage-text); font-weight: 700; } /* ============================================================ Messagerie — bouton son des nouveaux messages ============================================================ */ .conv-son { margin-left: auto; flex: 0 0 auto; width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--sage, #cfe0d6); border-radius: 50%; cursor: pointer; font-size: 17px; line-height: 1; transition: background .15s ease, border-color .15s ease; } .conv-son:hover { background: var(--sage-soft, #eef4f0); } .conv-son .conv-son-off { display: none; } .conv-son.is-off { border-color: #e2cfcf; } .conv-son.is-off .conv-son-on { display: none; } .conv-son.is-off .conv-son-off { display: inline; } /* Message en attente de vérification (visible par son seul auteur) */ .conv-encours { display: inline-block; margin-top: 4px; font-size: 11.5px; color: #b6862a; font-style: italic; cursor: help; } /* Bandeau de modération dans la conversation — visible par le seul expéditeur */ .conv-flash { margin: 0 0 14px; padding: 11px 15px; border-radius: 10px; font-size: 13.5px; line-height: 1.5; background: #eef4f0; border: 1px solid #cfe0d6; color: #3a5a48; } .conv-flash--refus { background: #fdeceb; border-color: #f0b8b3; color: #a63d35; } /* 3e canal : « les deux » (Trustpilot + interne) */ .avis-porte--deux:hover { border-color: var(--gold, #E7B84B); } .avis-portes--radio .avis-porte--deux:has(input:checked) { border-color: var(--gold, #E7B84B); background: #fdf9ee; box-shadow: 0 0 0 1px var(--gold, #E7B84B); } /* Étiquette « en avant » sur les cartes de la home */ .dcard-avant { display: inline-flex; align-items: center; gap: 4px; background: var(--gold, #E7B84B); color: #4a3607; font-weight: 800; font-size: 10.5px; padding: 2px 8px; border-radius: 999px; margin-bottom: 5px; } /* Message : rayon élargi automatiquement (petite commune) */ .res-elargi { margin: 8px 0 0; padding: 8px 12px; font-size: 13.5px; line-height: 1.5; background: #fdf9ee; border: 1px solid #f0dca8; border-radius: 10px; color: #7a5c1a; max-width: 640px; } /* Message retiré par la modération : gris barré, jamais vert (≠ message OK) */ .conv-bubble--retire { background: #f2f2f4 !important; color: #9a9aa2 !important; font-style: italic; border: 1px dashed #d0d0d8 !important; } .conv-bubble--retire .bubble-hint { display: none; } /* Placeholder du combo recherche quand rien n'est choisi */ .s-dd-placeholder { color: #9a9aa2; } /* Atout inclus mis en valeur + explication mise en avant */ .formule-plus { display: inline-block; background: var(--gold, #E7B84B); color: #4a3607; font-weight: 800; font-size: 12px; padding: 3px 10px; border-radius: 999px; font-style: normal; } .formule-inclus--vide { font-size: 12px; color: var(--muted); } .formule-note-avant { grid-column: 1 / -1; margin: 4px 0 0; padding: 12px 16px; background: #fdf9ee; border: 1px solid #f0dca8; border-radius: 12px; font-size: 13.5px; line-height: 1.55; color: #6b5418; } .formule-note-avant strong { color: #4a3607; } /* Limite d'échanges gratuits atteinte dans un fil */ .conv-limite { text-align: center; padding: 22px 20px; margin: 8px 0; background: var(--sage-soft, #EEF5F1); border: 1.5px solid var(--sage, #A8C8B8); border-radius: 16px; } .conv-limite strong { display: block; font-size: 15.5px; color: var(--sage-text, #5a8a72); margin-bottom: 6px; } .conv-limite p { margin: 0 0 14px; font-size: 13.5px; color: var(--muted); } /* Badge « profil recherché » proéminent sur les annonces PARENTS */ .ann-cherche { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 800; padding: 5px 12px; border-radius: 999px; margin-bottom: 8px; letter-spacing: .1px; } .ann-cherche img { display: block; opacity: .9; } .ann-cherche--indigo { background: #e8ebfb; color: #3f4bb3; } .ann-cherche--coral { background: #fdecea; color: #c0392b; } .ann-cherche--sage { background: #eaf4ee; color: #4a8163; } /* Badge « type de profil » à droite du prénom (pages résultats) — pastille pleine, couleur DISTINCTE par métier pour repérer d'un coup d'œil */ .ann-type { flex-shrink: 0; align-self: flex-start; display: inline-block; font-size: 12.5px; font-weight: 800; padding: 4px 11px; border-radius: 999px; white-space: nowrap; letter-spacing: .1px; } .ann-type--sage { background: #e3f1e9; color: #2f7a54; } /* nounou : vert */ .ann-type--indigo { background: #e6e6fb; color: #4038a8; } /* assmat : indigo */ .ann-type--coral { background: #fde5e0; color: #c0392b; } /* baby-sitter : corail */ .ann-type--plum { background: #f3e4f5; color: #8e3a94; } /* au pair : prune */ /* quand le prix ET le type sont là, on empile proprement à droite */ .ann-head { flex-wrap: wrap; } .ann-head .ann-type + .ann-price { margin-left: auto; } /* Pagination numérotée avec ellipses (pages de résultats) — meilleure pour le SEO */ .pagination--num { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; grid-template-columns: none; } .page-num { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px; background: #fff; border: 1.5px solid var(--border); border-radius: 10px; font-size: 14.5px; font-weight: 700; color: var(--ink); transition: border-color .14s, background .14s, color .14s; } .page-num:hover { border-color: var(--sage-text); background: var(--sage-soft); color: var(--sage-text); text-decoration: none; } .page-num.is-current { background: var(--sage-deep, #6f9c86); border-color: var(--sage-deep, #6f9c86); color: #fff; cursor: default; } .page-ellipsis { padding: 0 4px; color: var(--muted); font-weight: 700; user-select: none; } .pagination--num .page-nav { min-width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 10px; } .pagination--num .page-nav.is-off { opacity: .35; cursor: default; } .pagination--num .page-nav.is-off:hover { background: #fff; border-color: var(--border); color: var(--ink); } @media (max-width: 560px) { .page-num { min-width: 36px; height: 36px; font-size: 13.5px; } .pagination--num .page-nav { min-width: 36px; height: 36px; } } /* Encart « publiez votre annonce pour écrire » (contact sans annonce valide) */ .contact-noannonce { text-align: center; padding: 28px 22px; margin: 4px 0; background: var(--sage-soft, #EEF5F1); border: 1.5px solid var(--sage, #A8C8B8); border-radius: 16px; } .contact-noannonce img { display: inline-block; margin-bottom: 10px; opacity: .9; } .contact-noannonce h2 { font-size: 18px; margin: 0 0 8px; color: var(--sage-text, #4a8163); } .contact-noannonce p { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin: 0 auto 18px; max-width: 420px; } /* Page pass — encart « gratuit pour vous » (baby-sitter) */ .babysitter-gratuit { text-align: center; max-width: 620px; margin: 20px auto; padding: 32px 26px; background: var(--sage-soft, #EEF5F1); border: 1.5px solid var(--sage, #A8C8B8); border-radius: 20px; } .babysitter-gratuit img { margin-bottom: 8px; } .babysitter-gratuit h1 { font-size: 26px; color: var(--sage-text, #4a8163); margin: 0 0 12px; } .bg-lead { font-size: 16px; line-height: 1.55; color: var(--ink, #39434D); margin: 0 auto 22px; max-width: 480px; } .bg-points { display: flex; flex-direction: column; gap: 14px; text-align: left; max-width: 440px; margin: 0 auto 24px; } .bg-point { display: flex; gap: 12px; align-items: flex-start; background: #fff; border-radius: 12px; padding: 12px 15px; } .bg-point span { font-size: 22px; flex-shrink: 0; line-height: 1.3; } .bg-point p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); } .bg-point strong { color: var(--ink, #39434D); } /* Carte « gratuit pour vous » sur /mon-compte/abonnement (baby-sitter) */ .ab-carte--babysitter { background: var(--sage-soft, #EEF5F1); border: 1.5px solid var(--sage, #A8C8B8); text-align: center; } .ab-carte--babysitter h2 { color: var(--sage-text, #4a8163); } .ab-carte--babysitter p { max-width: 500px; margin: 0 auto 16px; }