/* ============================================================ NOCTURNE - fiche pro v28 (Unified) ------------------------------------------------------------ Contenu de la fiche pro uniquement. Les tokens, la base html/body, les primitives .btn/.tag/.input et le header + tiroir mobile viennent de css/nocturne-base.css : charger les deux, dans cet ordre. Chargee en DERNIER dans business.html, apres business.css, theme-meridian.css et business-manage-premium.css. Ces trois feuilles restent en place parce qu'elles habillent les modales chat / claim, la lightbox et les onglets Edit et Skills du proprietaire - rien de ce que la v28 remplace. A specificite egale, la derniere chargee gagne : c'est ce qui evite de rejouer la guerre de !important de l'ancien business-premium-redesign.css. Aucune valeur en dur : tout passe par les var(--...) de nocturne-base.css. Les paliers responsive viennent du §8 de guide/INTEGRATION profil.md et ont demande beaucoup d'iterations : ne pas les "ameliorer". ============================================================ */ /* ===== SHELL ===== */ /* Neutralise le fond ivoire pose par theme-meridian.css / style.css. */ body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); } .pp-page { max-width: 1240px; margin: 0 auto; padding: 18px clamp(14px, 4vw, 34px) 64px; } /* ===== LIEN DE RETOUR ===== */ .pp-back { display: inline-flex; align-items: center; gap: 11px; margin-bottom: 16px; font-size: 13px; color: var(--color-neutral-500); cursor: pointer; background: none; border: 0; font-family: var(--font-body); } .pp-back:hover { color: var(--color-accent); } .pp-backicon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--color-neutral-800); background: var(--color-surface); color: var(--color-accent-300); } /* ============================================================ CARTE D IDENTITE ============================================================ */ .pp-card { overflow: hidden; border-radius: 18px; background: var(--color-surface); box-shadow: var(--shadow-md); } .pp-cover { position: relative; height: 208px; background: linear-gradient(140deg, var(--color-accent-800), var(--color-section)); } .pp-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* REGLE §6 : un seul voile couvrant toute la zone, dont le degrade va jusqu a transparent. Un calque borne sur une derniere etape encore opaque cree une couture verticale nette. */ .pp-coverveil { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, color-mix(in srgb, var(--color-surface) 96%, transparent) 0%, color-mix(in srgb, var(--color-surface) 42%, transparent) 46%, transparent 100%); } .pp-coveractions { position: absolute; top: 14px; right: 14px; display: flex; gap: 8px; } .pp-coverbtn { display: flex; align-items: center; gap: 7px; padding: 7px 13px; cursor: pointer; border-radius: 999px; border: 1px solid var(--color-neutral-800); background: color-mix(in srgb, var(--color-surface) 82%, transparent); color: var(--color-neutral-500); font-size: 12px; font-family: var(--font-heading); } .pp-coverbtn:hover { border-color: var(--color-accent); } .pp-coverbtn.pp-on { color: var(--color-accent-300); } .pp-coverbtn.pp-icononly { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; } .pp-identity { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 18px 24px; padding: 0 clamp(16px, 3vw, 26px) 20px; } .pp-idrow { display: flex; flex-direction: column; gap: 12px; min-width: 0; position: relative; } /* L avatar deborde sur la couverture : il est remonte par transform et son espace est repris en margin-bottom negative. Voir le palier 1040px plus bas pour le correctif de la bande vide. */ .pp-avatar { position: relative; flex: none; width: 112px; height: 112px; margin-bottom: -46px; transform: translateY(-58px); border-radius: 20px; overflow: hidden; background: linear-gradient(140deg, var(--color-accent-700), var(--color-neutral-900)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 42%, transparent), 0 0 0 4px var(--color-surface), 0 0 0 5px color-mix(in srgb, var(--color-accent) 30%, transparent), var(--shadow-md); } .pp-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .pp-avatarletter { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-heading); font-size: 46px; font-weight: 500; color: var(--color-accent-200); } /* Alignement a gauche ecrit en dur (2026-10-09) : le nom de la fiche est apparu centre chez un proprietaire alors qu aucune regle chargee ne le centre (cache ou feuille plus ancienne) ; plus rien d herite ne peut le deplacer. */ .pp-idtext { min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 9px; text-align: left; } .pp-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; } .pp-badges .tag { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; gap: 5px; } .pp-live { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--color-bg); font-size: 11px; color: var(--color-neutral-500); } .pp-live.is-open { color: #2f8f5b; } .pp-livedot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; } .pp-name { margin: 0; font-family: var(--font-heading); font-size: 33px; font-weight: 500; letter-spacing: -.025em; text-wrap: balance; text-align: left; align-self: stretch; } .pp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; color: var(--color-neutral-500); } .pp-meta strong { color: var(--color-text); font-weight: 500; } .pp-stars { display: inline-flex; gap: 1px; color: var(--color-accent); } .pp-metacell { display: inline-flex; align-items: center; gap: 6px; } .pp-sep { color: var(--color-neutral-700); } /* Badges de confiance (Licensed, Insured, Certified...) : etiquettes .tag.tag-outline de nocturne-base.css, comme sur les cartes de l accueil. Seul affichage des justificatifs sur la fiche publique. */ .pp-trustlist { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; } .pp-trustlist .tag-outline { gap: 5px; } /* comme .pd-tags .tag-outline (home-nocturne.css) */ .pp-socials { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .pp-socials a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--color-neutral-700); color: var(--color-accent-400); } .pp-socials a:hover { border-color: var(--color-accent); color: var(--color-accent-200); } .pp-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 9px; } .pp-actions .btn { min-height: 42px; } .pp-actions .btn-secondary { border-color: var(--color-neutral-800); } .pp-actions .btn-secondary:hover { border-color: var(--color-accent); } /* ============================================================ ONGLETS COLLANTS ============================================================ */ .pp-tabs { position: sticky; top: 61px; z-index: 30; display: flex; gap: 6px; overflow-x: auto; margin: 20px 0 18px; padding: 6px; border-radius: 12px; background: color-mix(in srgb, var(--color-surface) 88%, transparent); backdrop-filter: blur(12px); box-shadow: var(--shadow-sm); } .pp-tab { flex: none; min-height: 38px; padding: 0 16px; cursor: pointer; border: 0; border-radius: 9px; background: transparent; font-family: var(--font-heading); font-size: 13px; white-space: nowrap; color: var(--color-neutral-500); text-decoration: none; display: inline-flex; align-items: center; } .pp-tab:hover { background: var(--color-bg); color: var(--color-neutral-400); } .pp-tab.active { background: var(--color-accent-800); color: var(--color-accent-200); } /* ============================================================ CORPS : contenu + colonne collante ============================================================ */ .pp-body { display: grid; /* REGLE §6 : minmax(min(Npx, 100%), 1fr), jamais minmax(Npx, 1fr). */ grid-template-columns: minmax(0, 1fr) minmax(min(300px, 100%), 340px); align-items: start; gap: 18px; } .pp-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; } .pp-aside { position: sticky; top: 118px; display: flex; flex-direction: column; gap: 14px; min-width: 0; } /* Les panneaux gardent les classes .profile-panel / .active de switchProfileTab() : un seul visible a la fois. */ .pp-section { padding: clamp(18px, 3vw, 26px); border-radius: 16px; background: var(--color-surface); box-shadow: var(--shadow-sm); } .profile-panel { display: none; } .profile-panel.active { display: block; } .pp-section h2 { margin: 0 0 12px; font-family: var(--font-heading); font-size: 19px; font-weight: 500; letter-spacing: -.015em; color: var(--color-text); } .pp-section p { font-size: 15px; line-height: 1.62; color: var(--color-neutral-400); text-wrap: pretty; } .pp-eyebrow { margin: 0 0 11px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-600); font-weight: 500; } .pp-divider { height: 1px; margin: 22px 0; background: var(--color-divider); } .pp-tags { display: flex; flex-wrap: wrap; gap: 7px; } .pp-tags .tag { font-size: 12px; } .pp-tag-neutral { background: var(--color-bg); color: var(--color-neutral-400); } .pp-note { margin: 18px 0 0; font-size: 13px; color: var(--color-neutral-500); } .pp-empty { margin: 0; font-size: 14px; color: var(--color-neutral-500); } /* ===== HORAIRES ===== */ .pp-hours { display: flex; flex-direction: column; } .pp-hourrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 14px; border-radius: 9px; font-size: 14px; color: var(--color-neutral-400); } .pp-hourtime { color: var(--color-neutral-500); } .pp-hourrow.is-closed .pp-hourtime { color: var(--color-neutral-600); } .pp-hourrow.is-today { background: var(--color-bg); color: var(--color-text); } .pp-hourrow.is-today .pp-hourtime { color: var(--color-text); } .pp-hourday { display: inline-flex; align-items: center; gap: 9px; } .pp-hourday .tag { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; } /* ===== PROJETS & MEDIA ===== */ /* REGLE §6 : nombre de colonnes fixe avec paliers explicites, jamais auto-fill (il ajoute une colonne en douce en grand). */ .pp-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .pp-shot { margin: 0; display: flex; flex-direction: column; gap: 7px; } .pp-shotframe { display: block; height: 132px; border-radius: 11px; overflow: hidden; background: var(--color-bg); cursor: pointer; border: 0; padding: 0; width: 100%; } .pp-shotframe img { width: 100%; height: 100%; object-fit: cover; } .pp-shot figcaption { font-size: 12px; color: var(--color-neutral-500); } /* ===== AVIS ===== */ .pp-revsum { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); align-items: center; gap: 18px; padding: 18px; border-radius: 12px; background: var(--color-bg); } .pp-revscorecol { display: flex; flex-direction: column; gap: 4px; } .pp-revbig { font-family: var(--font-heading); font-size: 42px; font-weight: 500; letter-spacing: -.03em; line-height: 1; } .pp-revcount { font-size: 13px; color: var(--color-neutral-500); } .pp-bars { display: flex; flex-direction: column; gap: 6px; } .pp-bar { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--color-neutral-500); } .pp-bartrack { flex: 1; height: 6px; border-radius: 999px; background: var(--color-neutral-900); overflow: hidden; } .pp-barfill { display: block; height: 100%; border-radius: 999px; background: var(--color-accent); } .pp-reviews { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; } .pp-review { display: flex; flex-direction: column; gap: 9px; padding: 16px; border-radius: 12px; border: 1px solid var(--color-divider); } .pp-revhead { display: flex; align-items: center; gap: 11px; } .pp-revinit { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; background: var(--color-accent-800); color: var(--color-accent-200); font-family: var(--font-heading); font-size: 13px; } .pp-revwho { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .pp-revwho strong { font-size: 14px; font-weight: 500; } .pp-revwho span { font-size: 12px; color: var(--color-neutral-500); } .pp-revstars { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--color-accent-300); } .pp-review p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--color-neutral-400); } /* Reponse publique du pro : alignee sous le texte de l avis (34px d avatar + 11px de gap = 45px), filet accent a gauche comme .sr-reply cote Stats. */ .pp-revreply { margin: 2px 0 0 45px; padding-left: 12px; border-left: 2px solid var(--color-accent-800); } .pp-revreplykicker { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 12px; color: var(--color-accent-300); } .pp-revreply p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--color-neutral-500); } /* ===== FORMULAIRE D AVIS ===== */ /* La maquette ne modelise pas d etat d erreur : meme regle que --sr-danger dans stats-nocturne.css, une seule valeur de rouge ne tient pas a la fois sur le fond clair et sur le fond sombre. */ :root { --pp-danger: #9c2b25; } .pd-dark { --pp-danger: #e0736d; } .pp-revform { display: flex; flex-direction: column; gap: 11px; margin-bottom: 18px; padding: 16px; border-radius: 12px; border: 1px solid var(--color-divider); } .pp-revformtitle { margin: 0; font-family: var(--font-heading); font-size: 15px; font-weight: var(--font-heading-weight); } /* Le selecteur d etoiles. Les radios sont ecrits 5 -> 1 dans le DOM et remis a l endroit par row-reverse : c est ce qui permet a "input:checked ~ label" de toucher les etoiles INFERIEURES, donc de remplir la note sans une ligne de JS. Ne pas "corriger" l ordre. */ .pp-ratepick { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; align-self: flex-start; gap: 3px; } /* Masques a l oeil, jamais au clavier ni aux lecteurs d ecran. */ .pp-ratepick input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; } .pp-ratepick label { display: inline-flex; padding: 2px; border-radius: 6px; color: var(--color-neutral-700); cursor: pointer; transition: color .12s ease; } .pp-ratepick input:checked ~ label, .pp-ratepick label:hover, .pp-ratepick label:hover ~ label { color: var(--color-accent); } /* Les radios etant invisibles, sans cet anneau la navigation clavier se fait a l aveugle. */ .pp-ratepick input:focus-visible + label { outline: 2px solid var(--color-accent); outline-offset: 2px; } .pp-revform textarea { width: 100%; min-height: 88px; resize: vertical; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--color-divider); background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 14px; line-height: 1.6; } .pp-revform textarea:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; } /* .pp-revform est en flex-column : sans align-self les boutons s etirent sur toute la largeur de la carte. */ .pp-revform > .btn { align-self: flex-start; } .pp-revformactions { display: flex; align-items: center; gap: 8px; } /* css/style.css (heritage, toujours chargee ici) habille TOUT button[type="submit"] d un degrade bleu. Sa specificite (0,1,1) bat .btn-primary (0,1,0), donc le bouton d envoi sortait bleu vif au milieu de boutons Nocturne. On reprend la main avec .pp-revform .btn (0,2,0) plutot que de toucher a style.css, qui sert encore d autres pages. */ .pp-revform .btn[type="submit"] { background: transparent; color: var(--color-accent); border: 1px solid var(--color-accent); border-radius: var(--radius-md); padding: var(--space-2) calc(var(--space-3) * 1.2); font-size: 14px; font-weight: var(--font-heading-weight); box-shadow: none; transform: none; } .pp-revform .btn[type="submit"]:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); box-shadow: none; transform: none; } .pp-revform .btn[type="submit"]:disabled { opacity: .45; } .pp-formmsg { margin: 0; font-size: 13px; color: var(--color-neutral-500); } .pp-formmsg:empty { display: none; } .pp-formmsg.pp-err { color: var(--pp-danger); } .pp-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; } /* ===== SERVICES / SKILLS (hors maquette, memes cartes) ===== */ .pp-list { display: flex; flex-wrap: wrap; gap: 7px; } .pp-listitem { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: var(--color-bg); font-size: 13px; color: var(--color-neutral-400); } .pp-check { color: var(--color-accent); } .pp-cattitle { margin: 16px 0 9px; font-size: 13px; font-weight: 500; color: var(--color-neutral-400); } /* ============================================================ COLONNE DE DROITE ============================================================ */ .pp-quotekicker { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--color-neutral-600); } .pp-quoteprice { display: flex; align-items: baseline; gap: 7px; margin: 4px 0 12px; } .pp-quoteprice strong { font-family: var(--font-heading); font-size: 30px; font-weight: 500; letter-spacing: -.025em; } .pp-quoteprice span { font-size: 13px; color: var(--color-neutral-500); } .pp-area { overflow: hidden; border-radius: 16px; background: var(--color-surface); box-shadow: var(--shadow-sm); } .pp-areahead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 18px; } .pp-areahead h2 { margin: 0; font-family: var(--font-heading); font-size: 15px; font-weight: 500; } .pp-areahead a { font-size: 12px; } /* La carte Google existante (#map, loadMap) remplace la grille decorative de la maquette - §5 : "vraie carte" plutot que pins en %. */ .pp-area #map { height: 168px; width: 100%; background: var(--color-bg); } .pp-areatags { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 18px 18px; } .pp-areatags .tag { font-size: 11px; } .pp-glance { padding: 18px; border-radius: 16px; background: var(--color-surface); box-shadow: var(--shadow-sm); } .pp-glance h2 { margin: 0 0 12px; font-family: var(--font-heading); font-size: 15px; font-weight: 500; } .pp-glancerows { display: flex; flex-direction: column; gap: 10px; } .pp-glancerow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; } .pp-glancerow > span { color: var(--color-neutral-500); } .pp-glancerow > strong { font-weight: 500; text-align: right; } /* ============================================================ CARTE D ESTIMATION EXISTANTE Le markup et les id de generateEstimateCardHtml() ne bougent pas (submitEstimateRequest() les lit) : seul l habillage est repris aux tokens. ============================================================ */ .estimate-card { padding: 20px !important; border-radius: 16px !important; background: var(--color-surface) !important; border: 0 !important; box-shadow: var(--shadow-md) !important; color: var(--color-text); } .estimate-price-line { color: var(--color-neutral-500) !important; font-size: 13px; } .estimate-card hr { border: 0; border-top: 1px solid var(--color-divider); margin: 14px 0; } .estimate-card p { color: var(--color-neutral-500) !important; font-size: 13px; line-height: 1.55; } .estimate-card label { font-size: 12px; color: var(--color-neutral-500); } .estimate-form-group { margin-bottom: 12px; } .estimate-select { width: 100%; min-height: 40px; padding: 6px 10px; font: inherit; font-size: 14px; color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-divider); border-radius: var(--radius-md); } .estimate-submit-btn { width: 100%; min-height: 46px; cursor: pointer; border-radius: var(--radius-md) !important; border: 1px solid var(--color-accent) !important; background: transparent !important; color: var(--color-accent) !important; font-family: var(--font-heading); font-size: 15px; box-shadow: none !important; } .estimate-submit-btn:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent) !important; } .estimate-response-time { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 11px; font-size: 12px; color: var(--color-neutral-500); } .estimate-response-time strong { color: var(--color-text); font-weight: 500; } .estimate-guarantee-box { display: flex; gap: 10px; margin-top: 14px; padding: 12px; border-radius: 11px; background: var(--color-bg) !important; font-size: 12px; color: var(--color-neutral-500); } .estimate-guarantee-box .text { color: var(--color-neutral-500); font-size: 12px; line-height: 1.45; } .estimate-guarantee-box .text strong { color: var(--color-text); font-weight: 500; } .estimate-guarantee-box .icon { color: var(--color-accent); } .estimate-guarantee-box .text a { color: var(--color-accent); } /* ============================================================ ELEMENTS HERITES : mode sombre .pd-dark sur ne descend pas dans les couleurs en dur de business.css. On repeint aux tokens les seules surfaces qui restent visibles en sombre. ============================================================ */ .skeleton-container { background: transparent; } .pd-dark .claim-modal-content, .pd-dark .pm-scope .pm-card, .pd-dark .pm-scope .add-form, .pd-dark .pm-skills-card { background: var(--color-surface) !important; color: var(--color-text) !important; border-color: var(--color-divider) !important; } .pd-dark .pm-scope input, .pd-dark .pm-scope select, .pd-dark .pm-scope textarea, .pd-dark .claim-modal-content input { background: var(--color-bg) !important; color: var(--color-text) !important; border-color: var(--color-divider) !important; } .pd-dark .lightbox-overlay { background: color-mix(in srgb, var(--color-bg) 92%, transparent) !important; } /* ============================================================ RESUME STATIQUE SEO (injecte par le serveur, retire par displayBusiness) Visible le temps du chargement, il ne doit pas jurer avec le squelette. ============================================================ */ .seo-static { padding: 18px 0 8px; color: var(--color-text); } .seo-static h1 { margin: 0 0 6px; font-family: var(--font-heading); font-size: 24px; font-weight: 500; letter-spacing: -.01em; } .seo-static p { margin: 0 0 6px; font-size: 14px; color: var(--color-neutral-400); } /* ============================================================ MODALE "CLAIM THIS BUSINESS" - habillage Nocturne Meme markup, memes ids et classes que business.css (business.html et my-business.html partagent la fenetre a l identique) : seule la peau change. L ancienne version melangeait fond blanc, bandeau jaune, cartes violettes et bouton orange sur la page sombre. Cette feuille est chargee apres business.css : a specificite egale elle gagne ; les !important ci-dessous ne visent que les rares regles de business.css qui en portent deja ou les styles en ligne (fond de .claim-modal en display:flex pose par le JS). ============================================================ */ .claim-modal { padding: 18px; background: color-mix(in srgb, var(--color-neutral-100) 55%, transparent); backdrop-filter: blur(6px); font-family: var(--font-body); } .claim-modal-content { max-width: 500px; padding: 22px 22px 20px; border-radius: 20px; text-align: left; background: var(--color-surface); color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-neutral-800), var(--shadow-lg); animation: chat-rise .4s cubic-bezier(.33, 1, .68, 1) both; } .claim-kicker { display: block; margin-bottom: 6px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--color-neutral-500); } .claim-modal-content h3 { margin: 0 40px 4px 0; font-family: var(--font-heading); font-size: 20px; font-weight: 500; letter-spacing: -.01em; color: var(--color-text); text-wrap: balance; } .claim-modal-content h3 strong { font-weight: 500; color: var(--color-accent-300); } .claim-modal-content > p { margin: 0 0 16px; font-size: 14px; color: var(--color-neutral-400); } /* Croix de fermeture : meme bouton rond que la modale de chat. */ .close-modal { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; cursor: pointer; font-size: 0; line-height: 1; border-radius: 999px; border: 1px solid var(--color-neutral-800); background: var(--color-bg); color: var(--color-neutral-300); transition: color .16s ease, border-color .16s ease; } .close-modal:hover { border-color: var(--color-accent); color: var(--color-accent-300); } .close-modal svg { display: block; } /* Bandeau d etape : une ligne discrete, plus de jaune. */ .claim-modal-content .info-box { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 9px 12px; border-radius: 10px; border: 0; text-align: left; font-size: 12.5px; background: color-mix(in srgb, var(--color-accent) 10%, transparent); color: var(--color-accent-300); } .claim-modal-content .info-box.warning { background: var(--color-bg); color: var(--color-neutral-400); box-shadow: inset 0 0 0 1px var(--color-neutral-800); } .claim-modal-content .info-box.success { background: color-mix(in srgb, var(--color-accent) 14%, transparent); color: var(--color-accent-200); } .claim-step { flex: none; font-family: var(--font-heading); letter-spacing: .08em; text-transform: uppercase; font-size: 10.5px; color: var(--color-accent-400); } /* Les trois methodes : cartes aux tokens, la choisie prend l anneau accent. */ .method-selector { gap: 10px; margin: 0 0 14px; } .method-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 12px; border: 1px solid var(--color-neutral-800); background: var(--color-bg); color: var(--color-neutral-400); font-family: var(--font-heading); font-weight: 500; font-size: 13px; transition: border-color .16s ease, color .16s ease, background .16s ease; } .method-btn .icon { display: grid; place-items: center; width: 34px; height: 34px; margin: 0; border-radius: 10px; font-size: 0; background: var(--color-surface); color: var(--color-accent-300); } .method-btn .icon svg { display: block; } .method-btn:hover:not(.active) { background: var(--color-bg); border-color: var(--color-accent-600); color: var(--color-text); } .method-btn.active { background: color-mix(in srgb, var(--color-accent) 13%, var(--color-bg)); border-color: transparent; color: var(--color-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 50%, transparent); } .method-btn.active .icon { background: color-mix(in srgb, var(--color-accent) 22%, transparent); color: var(--color-accent-200); } /* Champs */ .claim-modal-content .form-group { margin-bottom: 12px; } .claim-modal-content .form-group label { margin-bottom: 6px; font-family: var(--font-heading); font-weight: 500; font-size: 13px; color: var(--color-neutral-300); } .claim-modal-content .form-group .required { color: var(--color-accent-400); } .claim-modal-content .form-group input { min-height: 42px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--color-neutral-800); background: var(--color-bg); color: var(--color-text); font: inherit; font-size: 14px; } .claim-modal-content .form-group input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent); } .claim-modal-content .help-text { margin-top: 5px; font-size: 12px; color: var(--color-neutral-500); } /* Boutons : plein accent pour l action principale (comme le segment actif de l accueil), contour pour le secondaire. */ .claim-code-btn { margin-top: 6px; padding: 11px 14px; border-radius: 10px; border: 1px solid transparent; background: var(--color-accent); color: var(--color-neutral-900); font-family: var(--font-heading); font-weight: 500; font-size: 14px; transition: filter .16s ease, transform .16s ease; } .claim-code-btn:hover { transform: none; box-shadow: none; filter: brightness(1.08); } .claim-code-btn.green { background: var(--color-accent); } .claim-code-btn.gray { background: transparent; color: var(--color-accent-300); border-color: var(--color-accent-600); } .claim-code-btn.gray:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); filter: none; } #goToLoginAfterClaim { background: var(--color-accent) !important; } /* Zone de depot des documents */ .file-upload-area { padding: 18px; border-radius: 12px; border: 1px dashed var(--color-neutral-700); background: var(--color-bg); } .file-upload-area:hover { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, var(--color-bg)); } .file-upload-area.has-file { border-color: var(--color-accent-600); background: color-mix(in srgb, var(--color-accent) 10%, var(--color-bg)); } .file-upload-area .icon { display: grid; place-items: center; width: 38px; height: 38px; margin: 0 auto 6px; border-radius: 10px; font-size: 0; background: var(--color-surface); color: var(--color-accent-300); } .file-upload-area .icon svg { display: block; } .file-upload-area p { margin: 0; font-size: 13.5px; color: var(--color-text); } .file-upload-area .file-types { margin-top: 3px; font-size: 11.5px; color: var(--color-neutral-500); } .file-list-item { padding: 8px 10px; border-radius: 10px; background: var(--color-bg); border: 1px solid var(--color-neutral-800); } .file-list-item .file-icon { display: grid; place-items: center; color: var(--color-accent-300); font-size: 0; } .file-list-item .file-name-input { min-height: 34px; padding: 6px 9px; border-radius: 8px; border: 1px solid var(--color-neutral-800); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 13px; } .file-list-item .file-size { color: var(--color-neutral-500); } .file-list-item .file-remove { color: var(--color-neutral-400); font-size: 0; display: grid; place-items: center; } .file-list-item .file-remove:hover { color: var(--color-accent-300); } /* Fin de parcours */ .claim-verified-line { margin: 0 0 12px; text-align: center; font-size: 14px; color: var(--color-neutral-300); } .claim-verified-line strong { color: var(--color-text); font-weight: 500; } .success-box { margin-top: 4px; padding: 20px 18px; border-radius: 14px; border: 0; background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-neutral-800); } .success-box .claim-successico { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 10px; border-radius: 14px; background: color-mix(in srgb, var(--color-accent) 16%, transparent); color: var(--color-accent-300); } .success-box h3 { margin: 0 0 6px; font-size: 18px; text-align: center; color: var(--color-text); } .success-box p { margin: 0; font-size: 13.5px; color: var(--color-neutral-400); text-align: center; } .success-box p + p { margin-top: 10px; font-size: 12.5px; color: var(--color-neutral-500); } #claimError, #claimSuccess { border-radius: 10px; font-size: 13px; } #claimError { background: color-mix(in srgb, #e24b4a 12%, transparent); color: #f09595 !important; } #claimSuccess { background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent-200) !important; } /* Mode sombre : les deux regles generiques plus haut (.pd-dark .claim-modal-content et ses inputs) posent des !important sur fond et bordure ; les valeurs ci-dessus sont deja aux tokens, elles coincident. */ /* ============================================================ MODALE "TEXT" (chat de la fiche pro) - habillage Nocturne Meme markup et memes classes que business.css (business.html et my-business.html) : seule la peau change, calquee sur la messagerie css/messages-nocturne.css (bulles, composeur). Cette feuille est chargee apres business.css : a specificite egale elle gagne, pas de !important. ============================================================ */ .chat-modal { /* Mes bulles restent sur violet fonce dans les deux themes, l interlocuteur suit le theme (memes valeurs que la messagerie). */ --ms-mine-ink: #f2eefc; --ms-mine-dim: #ece7fa; --ms-mine-bg: linear-gradient(160deg, #3b3080, #2a2260); --ms-them-bg: #dedbe8; padding: 18px; background: color-mix(in srgb, var(--color-neutral-100) 55%, transparent); backdrop-filter: blur(6px); font-family: var(--font-body); } .pd-dark .chat-modal { --ms-mine-bg: linear-gradient(160deg, #5b4da3, #4e4199); --ms-them-bg: #2a2c3b; } .chat-modal-content { max-width: 480px; border-radius: 20px; background: var(--color-surface); color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-neutral-800), var(--shadow-lg); animation: chat-rise .4s cubic-bezier(.33, 1, .68, 1) both; } @keyframes chat-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* ----- en-tete ----- */ .chat-header { padding: 14px 14px 14px 20px; background: var(--color-surface); color: var(--color-text); border-bottom: 1px solid var(--color-divider); } .chat-headtext { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .chat-kicker { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--color-neutral-500); } .chat-header h3 { font-family: var(--font-heading); font-size: 17px; font-weight: 500; letter-spacing: -.01em; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-headactions { display: flex; align-items: center; gap: 8px; } .chat-headbtn, .close-chat-modal { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; cursor: pointer; opacity: 1; font-size: 0; line-height: 1; border-radius: 999px; border: 1px solid var(--color-neutral-800); background: var(--color-bg); color: var(--color-neutral-300); transition: color .16s ease, border-color .16s ease; } .chat-headbtn:hover, .close-chat-modal:hover { opacity: 1; border-color: var(--color-accent); color: var(--color-accent-300); } .chat-headbtn svg, .close-chat-modal svg { display: block; } /* ----- fil ----- */ .chat-body { padding: 0; max-height: none; } .chat-messages-container { height: min(360px, 50vh); margin: 0; padding: 14px 16px; border-radius: 0; background: var(--color-bg); } .chat-message { position: relative; } .chat-bubble-customer, .chat-bubble-business { margin-bottom: 10px; } .chat-bubble-customer span, .chat-bubble-business span { padding: 7px 12px; border-radius: 14px; font-size: 14.5px; line-height: 1.42; word-break: break-word; box-shadow: 0 1px 2px rgba(0, 0, 0, .22); } .chat-bubble-customer span { background: var(--ms-mine-bg); color: var(--ms-mine-ink); border-radius: 14px 14px 3px 14px; } .chat-bubble-business span { background: var(--ms-them-bg); color: var(--color-text); border-radius: 14px 14px 14px 3px; } .chat-time { margin-top: 3px; font-size: 10.5px; letter-spacing: .01em; color: var(--color-neutral-400); } .chat-reply-preview { margin: 0 0 6px; padding: 6px 9px; border-left: 3px solid var(--color-accent); border-radius: 7px; background: color-mix(in srgb, var(--color-accent) 12%, transparent); font-size: 12.5px; color: var(--color-neutral-300); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-filelink { display: inline-flex; align-items: center; gap: 5px; padding: 8px 12px; border-radius: 10px; font-size: 20px; text-decoration: none; border: 1px solid var(--color-neutral-800); background: var(--color-surface); } /* Repondre / supprimer : pastilles rondes, revelees au survol de la bulle. */ .chat-reply-btn, .chat-delete-btn { display: inline-grid; place-items: center; vertical-align: middle; width: 27px; height: 27px; margin-left: 6px; padding: 0; font-size: 0; cursor: pointer; opacity: 0; border-radius: 999px; border: 1px solid var(--color-neutral-800); background: var(--color-surface); color: var(--color-neutral-300); transition: opacity .14s ease, color .14s ease, border-color .14s ease; } .chat-reply-btn::before { content: '\21A9'; font-size: 13px; } .chat-delete-btn::before { content: '\1F5D1'; font-size: 12px; } .chat-reply-btn:hover { border-color: var(--color-accent); color: var(--color-accent-300); } .chat-delete-btn:hover { border-color: #e06a6a; color: #e06a6a; } .chat-message:hover .chat-reply-btn, .chat-message:hover .chat-delete-btn { opacity: 1; } @media (hover: none) { .chat-reply-btn, .chat-delete-btn { opacity: 1; } } /* ----- barre de reponse + composeur ----- */ .chat-input-area { gap: 0; padding: 0; border-top: 1px solid var(--color-divider); background: var(--color-surface); } .reply-indicator { margin: 0; padding: 9px 16px; border: 0; border-bottom: 1px solid var(--color-divider); border-radius: 0; gap: 12px; background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface)); } .reply-text { min-width: 0; flex: 1; display: block; padding-left: 10px; border-left: 2px solid var(--color-accent); font-size: 12.5px; color: var(--color-neutral-300); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .reply-text strong { display: block; font-family: var(--font-heading); font-size: 11.5px; font-weight: 500; color: var(--color-accent-300); } .cancel-reply { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; font-size: 0; color: var(--color-neutral-400); } .cancel-reply::before { content: '\00D7'; font-size: 19px; line-height: 1; } .cancel-reply:hover { color: var(--color-accent-300); } .chat-input-row { gap: 10px; padding: 13px 16px; } .chat-message-input { min-height: 42px; padding: 11px 16px; border-radius: 999px; border: 1px solid var(--color-divider); background: var(--color-bg); font-family: var(--font-body); font-size: 14px; color: var(--color-text); } .chat-message-input::placeholder { color: var(--color-neutral-500); } .chat-message-input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent); } .chat-file-input-label { flex: none; width: 42px; height: 42px; padding: 0; border-radius: 999px; display: grid; place-items: center; font-size: 0; border: 1px solid var(--color-neutral-800); background: var(--color-bg); color: var(--color-neutral-300); transition: color .16s ease, border-color .16s ease; } .chat-file-input-label:hover { background: var(--color-bg); border-color: var(--color-accent); color: var(--color-accent-300); } .chat-file-input-label svg { display: block; } .chat-send-btn { width: 44px; height: 44px; font-size: 0; background: linear-gradient(150deg, var(--color-accent-500), var(--color-accent-700)); color: var(--color-accent-200); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-accent-200) 40%, transparent), 0 6px 18px color-mix(in srgb, var(--color-accent) 30%, transparent); transition: transform .16s ease, filter .16s ease; } .chat-send-btn:hover { background: linear-gradient(150deg, var(--color-accent-500), var(--color-accent-700)); transform: translateY(-1px); filter: brightness(1.06); } .chat-send-btn:active { transform: scale(.96); } .chat-send-btn svg { display: block; } .chat-preview-container { margin: 0; padding: 0 16px 12px; } .chat-preview-item { border-radius: 10px; background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-divider); } .chat-remove-file { background: var(--color-neutral-200); color: var(--color-bg); } .chat-remove-file:hover { background: #e06a6a; color: #fff; } @media (max-width: 620px) { .chat-modal { padding: 12px; } .chat-modal-content { width: 100%; } .chat-messages-container { height: 55vh; } .chat-header { padding: 12px 12px 12px 16px; } } @media (prefers-reduced-motion: reduce) { .chat-modal-content { animation: none; } } /* ============================================================ PALIERS RESPONSIVE - §8 de guide/INTEGRATION profil.md Repris a l identique de la maquette : ce sont eux qui ont coute le plus d iterations. ============================================================ */ @media (max-width: 1040px) { .pp-body { grid-template-columns: minmax(0, 1fr); } .pp-aside { position: static; } /* LE correctif de la bande vide : la ligne d identite s empile. L avatar 112px est remonte par transform mais garde sa largeur de colonne ; des que les lignes de meta cessent de se replier, il restait une bande morte de 112px sous lui. */ .pp-identity { grid-template-columns: minmax(0, 1fr); } .pp-actions { justify-content: flex-start; } } @media (max-width: 760px) { .pp-avatar { width: 84px; height: 84px; margin-bottom: -32px; transform: translateY(-46px); } .pp-avatarletter { font-size: 34px; } .pp-name { font-size: 27px; } .pp-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pp-tabs { top: 57px; } } /* ============================================================ NEUTRALISATION DES SELECTEURS D ELEMENT HERITES css/style.css et css/business.css stylent `header` et `nav` directement (max-width, margin auto, padding, justify-content space-between). Ces regles atteignent le header Nocturne (
) et la barre d onglets (