/* ===== LANAC — Typographie premium (auto-hébergée, RGPD-safe) ===== Polices variables : 1 fichier couvre toutes les graisses. */ @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('./fonts/Hanken-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('./fonts/Hanken-latinext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Fraunces';font-style:normal;font-weight:400 600;font-display:swap;src:url('./fonts/Fraunces-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Fraunces';font-style:normal;font-weight:400 600;font-display:swap;src:url('./fonts/Fraunces-latinext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} :root { /* ════════ PALETTE — les seules couleurs brutes de l'app ════════ */ --green: #4A9B6F; /* action / succès */ --gold: #B8902F; /* signature (marque) — TEST or antique (origine: #E8B84B) */ --blue: #4A6FA5; /* info */ --red: #D9534F; /* danger */ --cream: #F8F6F1; /* canvas */ --paper: var(--white); /* surfaces (cartes) */ --ink: #1A1714; /* encre chaude (texte) */ --ink-2: #6F675E; /* gris chaud moyen */ --ink-3: #A39A8E; /* gris chaud clair (hint) */ --hair: #E5E7EB; /* filets / bordures */ --white: #FFFFFF; /* blanc pur (texte sur boutons colorés) */ --black: #000000; /* noir pur (voiles sur média) */ --gold-2: #E9C97C; /* or clair — texte or sur encre (premium) */ --info-line: #DAE4F0; /* filet bleu clair (chip info) */ --shade-green: #08130d; /* assombrisseur — version profonde lisible du vert */ --shade-red: #1A0707; /* idem rouge */ --shade-blue: #08111D; /* idem bleu */ /* ════════ RÔLES SÉMANTIQUES — ⭐ LA SEULE COUCHE À ÉDITER POUR REBRAND ════════ Changer une couleur partout = changer UNE ligne ci-dessous. Règle : --action = tout ce qui se clique ; --brand (or) = signature, JAMAIS une action. */ --action: var(--green); /* ◀ ACTION (clic) — boutons, liens, accents */ --success: var(--green); /* état succès/dispo (séparable de l'action plus tard) */ --brand: var(--gold); /* ◀ SIGNATURE — logo, Boost, Vérifié */ --danger: var(--red); /* destructif */ --info: var(--blue); /* informationnel (rare) */ --bg: var(--cream); --surface: var(--paper); --text: var(--ink); --text-muted: var(--ink-2); --text-faint: var(--ink-3); --line: var(--hair); --action-soft: color-mix(in srgb, var(--action) 12%, var(--surface)); --brand-soft: color-mix(in srgb, var(--brand) 18%, var(--surface)); --danger-soft: color-mix(in srgb, var(--danger) 10%, var(--surface)); --info-soft: color-mix(in srgb, var(--info) 10%, var(--surface)); /* ════════ ALIAS LEGACY — les anciens --color-* dérivent des rôles ════════ → les centaines de var(--color-*) existants suivent les rôles, sans toucher une référence. */ --color-primary: var(--brand); --color-background: var(--bg); --color-surface: var(--surface); --color-text-primary: var(--text); --color-text-secondary: var(--text-muted); --color-border: var(--line); --color-success: var(--action); /* dominante actionable dans l'app */ --color-error: var(--danger); --color-info: var(--info); --color-primary-soft: var(--brand-soft); --color-success-soft: var(--action-soft); --color-error-soft: var(--danger-soft); --color-info-soft: var(--info-soft); --color-neutral-soft: color-mix(in srgb, var(--line) 42%, var(--surface)); --color-overlay: color-mix(in srgb, var(--scrim) 72%, transparent); --color-shadow: color-mix(in srgb, var(--scrim) 16%, transparent); /* ════════ TOKENS INVARIANTS — ⭐ NE SUIVENT PAS LE THÈME ════════ Les rôles ci-dessus s'inversent en mode sombre. Ces trois-là NON : ils encodent une couleur littérale dont dépend la lisibilité, pas un rôle sémantique. --on-accent : texte/icône POSÉ SUR un aplat coloré (vert, bleu, or, rouge) ou sur une photo. Doit rester quasi-blanc, sinon le contenu des pastilles disparaît. --scrim : voiles, backdrops de modale et OMBRES. Une ombre n'éclaire jamais. --glass-hi : le reflet blanc du verre (bordures/dégradés des surfaces translucides). En mode clair ils valent exactement ce qu'ils remplacent → rendu strictement identique. Règle : « blanc sur fond coloré » utilise --on-accent (jamais le rôle surface) ; une ombre utilise --scrim (jamais le rôle encre). tools/theme-guard.js fait échouer le build sinon. */ --on-accent: var(--white); --scrim: var(--ink); --glass-hi: var(--white); /* Typographie premium */ --font-ui: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; /* Boutons — DÉRIVENT du rôle --action (change --action ⇒ tous les boutons suivent). Contraste AA. */ --btn-primary-bg: color-mix(in srgb, var(--action) 70%, var(--shade-green)); /* action profonde, blanc lisible */ --btn-primary-fg: var(--on-accent); --btn-primary-shadow: color-mix(in srgb, var(--action) 28%, transparent); --btn-tonal-bg: var(--action-soft); /* action très douce */ --btn-tonal-fg: color-mix(in srgb, var(--action) 50%, var(--shade-green)); /* action foncée lisible */ --btn-premium-bg: var(--scrim); /* encre */ --btn-premium-fg: var(--gold-2); /* or signature (touche --brand) */ --btn-info-bg: color-mix(in srgb, var(--info) 80%, var(--shade-blue)); --btn-danger-bg: color-mix(in srgb, var(--danger) 80%, var(--shade-red)); --btn-danger-soft-bg: color-mix(in srgb, var(--danger) 12%, var(--surface)); --btn-danger-soft-fg: color-mix(in srgb, var(--danger) 58%, var(--shade-red)); /* Bulles de messagerie — « moi » en vert profond (dérive de --action ; revert = var(--color-primary)) */ --bubble-mine-bg: var(--btn-primary-bg); --bubble-mine-fg: var(--on-accent); /* Cartes « message système » du fil (jalons d'accord) — ⭐ tout pilotable d'ici (option A : carte blanche) */ --syscard-bg: var(--surface); /* fond carte */ --syscard-border: var(--line); /* filet fin */ --syscard-text: var(--text); /* encre lisible (≠ gris pâle) */ --syscard-link: var(--action); /* « Voir le détail » (lien actionable) */ --syscard-shadow: color-mix(in srgb, var(--scrim) 6%, transparent); /* ombre douce */ --syscard-radius: 14px; /* ════ FLUX / DÉCISION — tokens de composant. ⭐ Éditer ICI règle le fil/les boutons de décision, RIEN D'AUTRE. Tout dérive des rôles ⇒ rendu identique par défaut ; changer 1 ligne ne touche QUE le flux (jamais badges/avatars/inbox). Neutres structurels (filet/surface/encre) laissés sur les tokens d'app partagés : voulu (cohérence avec le reste). */ /* Boutons de décision */ --act-accept-bg: var(--color-success); --act-accept-fg: var(--on-accent); /* Accepter / Confirmer (plein) */ --act-accept-soft-bg: var(--color-success-soft); --act-accept-soft-fg: var(--color-success); /* Confirmer tonal / option sélectionnée */ --act-decline-bg: var(--color-error); --act-decline-fg: var(--on-accent); /* Refuser / Annuler (plein rouge) */ --act-decline-ghost-bg: var(--color-background); --act-decline-ghost-fg: var(--color-text-secondary); /* Bouton neutre secondaire : refuser discret / annuler / no-show / version acceptée / choix neutre */ --act-decline-soft: var(--color-error-soft); /* encart « versions divergentes » */ --act-counter-bg: var(--color-info-soft); --act-counter-fg: var(--color-info); /* Contre-proposer / alternative / inadapté */ --act-suggest-bg: var(--color-primary-soft); --act-suggest-fg: var(--color-primary); /* Proposer (contre-prix offre) */ /* États sémantiques du flux (pastille de statut, accents — non-boutons) */ --flow-ok: var(--color-success); --flow-ok-soft: var(--color-success-soft); /* accepté / positif */ --flow-progress: var(--color-info); --flow-progress-soft: var(--color-info-soft); /* en cours / contre-proposition */ --flow-accent: var(--color-primary); --flow-accent-fg: var(--color-text-primary); --flow-accent-soft: var(--color-primary-soft); /* en attente / dock pill / CTA mobile */ --flow-alert: var(--color-error); --flow-alert-soft: var(--color-error-soft); /* refusé / conflit */ --flow-step-done: var(--flow-ok); --flow-step-done-soft: var(--flow-ok-soft); /* étape franchie (timeline) — alias de --flow-ok */ /* ════ TYPO DU FIL — ⭐ Éditer ICI re-style l'écriture du fil (police/tailles/graisses), zéro autre impact. Calé sur les valeurs actuelles ⇒ rendu identique par défaut. Échelle de rôles (façon Material), pas 1 var/pixel. */ --flow-font: var(--font-ui); --flow-cta-size: 15px; --flow-cta-weight: 800; /* gros CTA mobile */ --flow-title-size: 13.5px; --flow-title-weight: 600; /* titre de jalon (timeline) */ --flow-body-size: 13px; --flow-body-weight: 400; --flow-body-leading: 1.5; /* texte d'événement système */ --flow-recap-size: 12.5px; /* ligne repliée (recap) */ --flow-label-size: 12px; --flow-label-weight: 700; /* libellés secondaires (go / wait / recap .v) */ --flow-meta-size: 11px; /* heures / métadonnées */ --flow-eyebrow-size: 11px; --flow-eyebrow-weight: 800; --flow-eyebrow-track: .6px; /* en-têtes uppercase (tl-h, az-h) */ --flow-strong-weight: 800; /* emphases (recap .l / .c) */ /* Remplissage info (pastilles favori/compteurs) : PROFOND dans les 2 thèmes — un aplat qui porte du texte --on-accent (blanc) ne peut pas s'éclaircir, sinon le blanc devient illisible. En clair il vaut --blue (rendu identique) ; le bloc sombre le ré-épingle sur le bleu profond. */ --info-fill: var(--blue); color-scheme: light; } /* ════════ MODE SOMBRE — Phase 1 (2026-07-09) ════════════════════════════════════════════ Principe (validé WCAG par calcul, cf. scratchpad palette-dark.mjs — 13/13 couples AA/AAA) : même MARQUE, luminances inversées. Pas de noir pur : l'encre chaude #1A1714 est poussée vers #121010 (canvas) / #221E1A (cartes) — la chaleur LANAC survit au sombre. • Les ACCENTS-TEXTE s'éclaircissent (or → --gold-2 #E9C97C, prévu par l'auteur de la palette ; vert/bleu/rouge éclaircis juste assez pour ≥ 4.5:1 sur carte). • Les APLATS porteurs de blanc (boutons pleins, pastilles) restent PROFONDS : c'est le partage fill/text des grands design systems — un mi-ton ne peut jamais satisfaire les deux. • Les invariants Phase 0 sont RÉ-ÉPINGLÉS : --scrim suit --ink en clair, il doit rester sombre ici (une ombre n'éclaire jamais) ; --glass-hi devient un verre chaud sombre. L'attribut data-theme est posé AVANT la première peinture par le script du (« auto » y est résolu en light/dark : le CSS ne connaît que 2 états — modèle YouTube/X). */ :root[data-theme="dark"] { color-scheme: dark; /* Palette de base — mêmes emplacements que le bloc clair, teintes conservées */ --green: #6FBE93; /* action/succès en texte (7.5:1 sur carte) */ --gold: #E9C97C; /* signature — l'or clair « premium » déjà prévu (--gold-2) */ --blue: #8FB0DC; /* info en texte (7.4:1) */ --red: #F08A86; /* danger en texte (6.9:1) */ --cream: #121010; /* canvas — encre chaude poussée au noir, PAS un gris neutre */ --paper: #221E1A; /* cartes — un cran au-dessus (élévation perceptible 1.15:1) */ --ink: #F1EDE7; /* texte principal (14.2:1) */ --ink-2: #B3A99D; /* secondaire (7.2:1) */ --ink-3: #847B70; /* hint (4.0:1, décoratif) */ --hair: #37312B; /* filets */ --gold-2: #F3DCA4; /* or très clair (texte or sur plaques d'encre) */ --info-line: #3B475C; /* --shade-* volontairement NON inversés : leurs 5 seuls consommateurs (--btn-*-bg/fg) sont ré-épinglés en littéral ci-dessous — les redéfinir ici serait du code mort. */ /* Invariants Phase 0 — ré-épinglés en littéral (sinon ils suivraient l'encre inversée) */ --scrim: #0C0A09; /* voiles + ombres : toujours sombres */ --glass-hi: #3D362E; /* reflet du verre : chaud, à peine plus clair que les surfaces */ /* Remplissages porteurs de blanc — PROFONDS (identiques au clair) */ --info-fill: #4A6FA5; --btn-primary-bg: color-mix(in srgb, #4A9B6F 70%, #08130d); --btn-primary-shadow: color-mix(in srgb, #4A9B6F 22%, transparent); --btn-info-bg: color-mix(in srgb, #4A6FA5 80%, #08111D); --btn-danger-bg: color-mix(in srgb, #D9534F 80%, #1A0707); --btn-tonal-fg: #9AD3B4; /* texte action sur tonal sombre */ --btn-danger-soft-fg: #F0A09C; --act-accept-bg: var(--btn-primary-bg); --act-decline-bg: var(--btn-danger-bg); } /* ===== Échelle typographique réutilisable (B + touche A) ===== */ .l-eyebrow{font-family:var(--font-ui);font-size:10px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-3);} .l-display{font-family:var(--font-display);font-weight:500;color:var(--ink);line-height:1.05;letter-spacing:-.012em;font-optical-sizing:auto;} .l-title{font-family:var(--font-ui);font-weight:600;color:var(--ink);letter-spacing:-.015em;line-height:1.2;} .l-sub{font-family:var(--font-ui);font-weight:400;color:var(--ink-2);} .l-hint{font-family:var(--font-ui);font-weight:400;color:var(--ink-3);} /* Police de base de toute l'app (les éléments en fontFamily:inherit suivent) */ body{font-family:var(--font-ui);} /* Ressenti natif (#2) : bord de défilement DUR sur le document — supprime le rebond « rubber-band » (bande hors-app en haut/bas) et le pull-to-refresh du navigateur. Appliqué au scroller racine (html + body). Sans effet sur iOS < 16 → aucune régression. N'affecte PAS les scrolls internes (messagerie, sheets) ni le dock (propriété locale au scroller). */ html, body { overscroll-behavior-y: none; } /* Ressenti natif (#1) — edge-to-edge : viewport-fit=cover (dans le ) réveille les marges de sécurité. Variables centralisées (= aux env() natifs, 0px sans encoche → ADDITIF, aucune régression sur desktop / appareils sans encoche). Permet aussi de simuler une encoche en test (override des vars). */ html { --lanac-sat: env(safe-area-inset-top, 0px); --lanac-sab: env(safe-area-inset-bottom, 0px); } /* Pull-to-refresh maison (mobile) — indicateur PREMIUM « skeleton shimmer ». • Pendant le tirage : fine JAUGE dégradée (vert→or) sous le header, pilotée en DOM direct par le geste ; se remplit et « s'arme » (halo) au seuil. position:fixed, hors des zones translatées. • Au relâcher : la jauge s'efface et un OVERLAY de cartes squelette scintillantes couvre le haut de la liste le temps du rechargement, puis se fond sur le contenu frais. Overlay en fixed, HORS des arbres React (aucun conflit de réconciliation). z-index sous les feuilles/dialogues. */ .lnc-ptr-bar{position:fixed;left:12px;right:12px;top:64px;z-index:59;height:3px;border-radius:3px; background:color-mix(in srgb, var(--color-text-primary) 8%, transparent); opacity:0;pointer-events:none;overflow:hidden;transition:opacity .3s;} .lnc-ptr-bar-fill{display:block;height:100%;width:0%;border-radius:3px; background:linear-gradient(90deg, var(--color-success), var(--color-primary));transition:width .05s linear;} .lnc-ptr-bar--armed{box-shadow:0 0 10px color-mix(in srgb, var(--color-success) 55%, transparent);} .lnc-ptr-sk{position:fixed;left:0;right:0;z-index:58;pointer-events:none;padding:6px 12px 0; background:var(--color-background);animation:lncPtrSkIn .26s ease both;} .lnc-ptr-sk--out{animation:lncPtrSkOut .3s ease both;} @keyframes lncPtrSkIn{from{opacity:0}to{opacity:1}} @keyframes lncPtrSkOut{from{opacity:1}to{opacity:0}} .lnc-ptr-sk-card{display:flex;gap:11px;align-items:center;background:var(--color-surface); border:1px solid var(--color-border);border-radius:14px;padding:10px;margin-bottom:9px;} .lnc-ptr-sk-th{width:46px;height:46px;border-radius:11px;flex:none;} .lnc-ptr-sk--rows .lnc-ptr-sk-th{border-radius:50%;} .lnc-ptr-sk-tx{flex:1;display:flex;flex-direction:column;gap:7px;} .lnc-ptr-sk-tx > span{height:11px;border-radius:6px;} .lnc-ptr-sk-tx > span:first-child{width:72%;} .lnc-ptr-sk-tx > span:last-child{width:44%;} /* Variante ACCUEIL : squelette en forme de RAIL (titre de section + vignettes horizontales), posé SOUS la recherche et les catégories → épouse la mise en page réelle de l'accueil. */ .lnc-ptr-sk--rail{padding-top:2px;} /* Variante PAGES D'ANNONCES (marché, à proximité, favoris, mes annonces) : le MÊME modèle « tuile » (vignette + lignes, celui validé), disposé en GRILLE 2 colonnes = la vraie grille d'annonces mobile. */ .lnc-ptr-sk--grid{padding-top:2px;} .lnc-ptr-sk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px;} .lnc-ptr-sk-grid .lnc-ptr-sk-rc{width:auto;} .lnc-ptr-sk-grid .lnc-ptr-sk-ri{width:100%;height:118px;} .lnc-ptr-sk-title{display:block;height:14px;width:44%;border-radius:7px;margin:0 0 12px;} .lnc-ptr-sk-rail{display:flex;gap:9px;overflow:hidden;} .lnc-ptr-sk-rc{flex:none;width:118px;} .lnc-ptr-sk-ri{display:block;width:118px;height:92px;border-radius:12px;margin-bottom:6px;} .lnc-ptr-sk-rl{display:block;height:10px;width:80%;border-radius:6px;margin-bottom:4px;} .lnc-ptr-sk-rl2{display:block;height:10px;width:50%;border-radius:6px;} .lnc-ptr-sk-th, .lnc-ptr-sk-tx > span, .lnc-ptr-sk-title, .lnc-ptr-sk-ri, .lnc-ptr-sk-rl, .lnc-ptr-sk-rl2{ background:linear-gradient(100deg, color-mix(in srgb, var(--color-text-primary) 8%, var(--color-surface)) 30%, color-mix(in srgb, var(--color-text-primary) 3%, var(--color-surface)) 50%, color-mix(in srgb, var(--color-text-primary) 8%, var(--color-surface)) 70%); background-size:220% 100%;animation:lncPtrShim 1.15s linear infinite;} @keyframes lncPtrShim{to{background-position:-220% 0}} @media (prefers-reduced-motion: reduce){ .lnc-ptr-sk-th, .lnc-ptr-sk-tx > span, .lnc-ptr-sk-title, .lnc-ptr-sk-ri, .lnc-ptr-sk-rl, .lnc-ptr-sk-rl2{animation:none;} .lnc-ptr-sk, .lnc-ptr-sk--out{animation-duration:.01ms;} } /* Blur-up « focus » (LncImg) — chargement premium des photos d'annonces (grille + rails). Deux superposées (loading=lazy conservé) : couche FLOUE (vignette 96px) sous la photo PLEINE qui fait la mise au point (flou→net + micro dé-zoom). Les conteneurs (.lanac-card-media / carte de rail) sont position:relative → les couches en absolute inset:0 les remplissent à l'identique. Overlays (favori/badge, z-index ≥ 3) restent au-dessus (couches en z-index 0/1). */ .lnc-img-layer{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block;} .lnc-img-blur{z-index:0;filter:blur(14px) saturate(1.08);transform:scale(1.08);} /* Balayage lumineux (shimmer) pendant le chargement — même langage que le skeleton du pull-to-refresh. EN DIV (pas span) : une règle `.lanac-card-media > span:not(.lanac-card-view-overlay){display:none}` masquerait un span sur la grille. Disparaît dès que la photo est prête (rendu conditionnel !loaded). */ .lnc-img-shim{position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(105deg,transparent 38%,color-mix(in srgb, var(--glass-hi) 22%, transparent) 50%,transparent 62%); background-size:250% 100%;animation:lncImgShim 1.25s linear infinite;} @keyframes lncImgShim{to{background-position:-170% 0}} /* La couche NETTE démarre au MÊME flou que l'aperçu (14px) → en fondu par-dessus, aucun « saut » de netteté ; puis elle fait la mise au point (flou→net + micro dé-zoom) en un seul mouvement coordonné (opacité, flou et échelle sur ~0.5s) → focus fluide, jamais une « apparition » sèche. */ .lnc-img-full{z-index:1;opacity:0;filter:blur(14px) saturate(1.08);transform:scale(1.06); transition:opacity .45s ease, filter .55s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1);} .lnc-img-full.is-loaded{opacity:1;filter:blur(0);transform:none;} @media (prefers-reduced-motion: reduce){ .lnc-img-full{filter:none;transform:none;transition:opacity .2s ease;} .lnc-img-full.is-loaded{opacity:1;} .lnc-img-shim{display:none;} } /* Blur-up v2 (fiche) — le curseur zoom-in était porté par l' inline ; dans le rendu à 3 couches LncImg ignore `style`, on le rétablit ici. (Sur la fiche desktop, `cursor` s'hérite du conteneur.) */ .lanac-vinted-hero .lnc-img-layer{cursor:zoom-in;} /* Blur-up v2 (vidéo de la fiche desktop) — SEUL cas où la vidéo porte des CONTRÔLES natifs, posés en bas de l'élément. Le micro-dézoom scale(1.06) la fait déborder de 13 px et le conteneur (overflow hidden) rogne la barre pendant la mise au point. On garde le fondu + le focus (opacité, flou), on retire la seule échelle. Mesuré : 456px -> 430px. Cartes, rails et héro mobile (sans contrôles) conservent le dézoom. Spécificité (0,2,1) > .lnc-img-full (0,1,0) : pas de !important. */ .lanac-detail-media video.lnc-img-full{transform:none;} /* Touche A — serif éditorial sur les fiches à forte valeur (immo). Spécificité (.l-cat-immo + classe + élément) > règle mobile : gagne sans changer la taille. */ .l-cat-immo .lanac-vinted-title-row h1{font-family:var(--font-display);font-weight:500;letter-spacing:-.012em;color:var(--ink);font-optical-sizing:auto;} .l-cat-immo .lanac-vinted-meta{color:var(--ink-2);} .l-cat-immo .lanac-vinted-price{font-family:var(--font-display);font-weight:500;color:var(--ink);} /* Desktop (≥769px) — affinage premium : tracking resserré sur les titres/prix des cartes. Scopé min-width pour ne JAMAIS interférer avec les règles mobile (max-width:768px). */ @media (min-width: 769px){ .lanac-card-title{letter-spacing:-.01em;} .lanac-card-price{letter-spacing:-.01em;} } /* Bouton « Publier » premium — CSS only via la classe (global). On n'override QUE le visuel de marque ; opacity/cursor inline (état submitting) et onClick (upload R2) restent intacts. */ .lanac-publish-submit{ border-radius: 999px !important; background: var(--btn-primary-bg) !important; color: var(--btn-primary-fg) !important; font-weight: 600 !important; letter-spacing: -.01em !important; box-shadow: 0 8px 22px var(--btn-primary-shadow); } /* ===== Composant Btn — source unique de style boutons (Phase 0) ===== Aucune transition/animation (contrainte projet). Utilisé NULLE PART pour l'instant. */ .l-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;box-sizing:border-box; border:none;border-radius:999px;cursor:pointer; font-family:var(--font-ui);font-weight:600;font-size:14px;letter-spacing:-.01em;line-height:1; padding:12px 20px;min-height:44px;} .l-btn:disabled{cursor:default;opacity:.55;} .l-btn.is-loading{cursor:progress;opacity:.7;} .l-btn--full{width:100%;} .l-btn--sm{min-height:36px;padding:9px 15px;font-size:13px;} .l-btn--lg{min-height:50px;padding:15px 24px;font-size:15px;} .l-btn--primary{background:var(--btn-primary-bg);color:var(--btn-primary-fg);box-shadow:0 6px 16px var(--btn-primary-shadow);} .l-btn--tonal{background:var(--btn-tonal-bg);color:var(--btn-tonal-fg);} .l-btn--premium{background:var(--btn-premium-bg);color:var(--btn-premium-fg);} .l-btn--info{background:var(--btn-info-bg);color:var(--white);} .l-btn--danger{background:var(--btn-danger-bg);color:var(--white);} .l-btn--danger-soft{background:var(--btn-danger-soft-bg);color:var(--btn-danger-soft-fg);} .l-btn--neutral{background:var(--color-surface);color:var(--ink);border:1px solid var(--color-border);} .l-btn--ghost{background:transparent;color:var(--btn-tonal-fg);border:1.5px solid currentColor;} /* ===== Bandeau de stats défilant (Mes annonces) : scrollbar masquée ===== Le défilement reste actif (molette/geste) ; seul l'ascenseur est caché. */ .lanac-stats-strip{scrollbar-width:none;} .lanac-stats-strip::-webkit-scrollbar{display:none;} /* ===== IconBtn — boutons icônes cohérents (Phase 0, non utilisé encore) ===== */ .l-iconbtn{display:inline-flex;align-items:center;justify-content:center;flex:none; border:none;border-radius:50%;background:transparent;cursor:pointer;color:var(--ink-2);padding:0;line-height:0;} .l-iconbtn:hover{background:color-mix(in srgb, var(--ink) 7%, transparent);} .l-iconbtn:disabled{opacity:.45;cursor:default;} .l-iconbtn--brand{color:var(--action);} .l-iconbtn--danger{color:var(--color-error);} .l-iconbtn--onmedia{color:var(--white);background:color-mix(in srgb, var(--black) 26%, transparent);} .l-iconbtn--onmedia:hover{background:color-mix(in srgb, var(--black) 38%, transparent);} /* ===== Liens texte cohérents (Phase 0, non utilisé encore) ===== */ .l-link{font-family:var(--font-ui);border:none;background:transparent;color:var(--action); font-weight:600;letter-spacing:-.01em;cursor:pointer;padding:0;} .l-link:hover{text-decoration:underline;} .l-link--muted{color:var(--ink-2);} .l-link:disabled{opacity:.5;cursor:default;text-decoration:none;} /* ───────────────────────────────────────────────────────────────────────── LANAC — Mobile Bottom Tab Bar (iOS / Vinted style) Desktop : barre cachée, layout inchangé. Mobile ≤ 768 px : bottom tab bar, layout corrigé. ───────────────────────────────────────────────────────────────────────── */ /* ── Caché par défaut (desktop) ─────────────────────────────────────────── */ .mbn-nav { display: none; } .lanac-hdr-favorites-mobile, .lanac-card-like-heart, .lanac-card-favorite-mini, .lanac-vinted-like { display: none; } .lanac-desktop-home-section { margin: 0 0 26px; } .lanac-media-viewer { position: fixed; inset: 0; z-index: 2600; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--scrim) 94%, transparent); padding: calc(18px + env(safe-area-inset-top, 0px)) 12px calc(18px + env(safe-area-inset-bottom, 0px)); } .lanac-media-viewer__stage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .lanac-media-viewer__stage img, .lanac-media-viewer__stage video { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 0; } .lanac-media-viewer__close { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; z-index: 2601; /* Audit UX mobile 2026-07-05 (N2) : cible tactile 44px. */ width: 44px; height: 44px; border: none; border-radius: 50%; background: color-mix(in srgb, var(--color-surface) 96%, transparent); color: var(--color-info); font-size: 28px; font-weight: 400; line-height: 40px; box-shadow: 0 10px 30px color-mix(in srgb, var(--scrim) 24%, transparent); } .lanac-media-open-zone { position: absolute; inset: 58px 0 76px; z-index: 6; border: none; background: transparent; color: transparent; cursor: zoom-in; -webkit-tap-highlight-color: transparent; } @media (max-width: 900px) { .lanac-cat-grid { display: flex !important; grid-template-columns: none !important; gap: 8px !important; margin: -2px -12px 14px !important; padding: 0 12px 2px !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; scroll-snap-type: x proximity !important; } .lanac-cat-grid::-webkit-scrollbar { display: none !important; } .lanac-cat-grid > button { flex: 0 0 auto !important; min-width: auto !important; min-height: 36px !important; max-height: 36px !important; padding: 0 12px !important; border-radius: 999px !important; border: 1px solid var(--color-border) !important; background: color-mix(in srgb, var(--color-surface) 92%, transparent) !important; box-shadow: none !important; color: var(--color-text-primary) !important; font-size: 12px !important; font-weight: 800 !important; line-height: 1 !important; scroll-snap-align: start !important; } .lanac-cat-grid > button:first-child { border-color: color-mix(in srgb, var(--color-info) 20%, transparent) !important; background: var(--color-info-soft) !important; color: var(--color-info) !important; } .lanac-cat-grid > button span:first-child { width: 7px !important; height: 7px !important; box-shadow: none !important; } .lanac-cat-grid > button span:last-child { max-width: 134px !important; } } .lanac-vinted-favorite { display: none; } /* Home recommendation rails: shared desktop/mobile card shape */ .lanac-mobile-personalized { display: grid; gap: 18px; margin: 4px 0 22px; } .lanac-mobile-personalized section { min-width: 0; } .lanac-mobile-rail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; } .lanac-mobile-rail-head strong { color: var(--ink); font-size: 16px; font-weight: 700; letter-spacing: -.02em; } .lanac-mobile-rail-head button { border: none; background: transparent; color: var(--color-info); font: inherit; font-size: 12px; font-weight: 900; cursor: pointer; } .lanac-mobile-rail { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; } .lanac-mobile-rail::-webkit-scrollbar { display: none; } .lanac-mobile-rail > button { appearance: none; -webkit-appearance: none; flex: 0 0 152px; width: 152px; border: none; background: transparent; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; scroll-snap-align: start; } .lanac-mobile-rail > button > div { box-shadow: 0 12px 26px color-mix(in srgb, var(--scrim) 10%, transparent); } .lanac-mobile-rail strong, .lanac-mobile-rail > button > span, .lanac-mobile-rail > button > small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lanac-mobile-rail strong { margin-top: 6px; color: var(--color-text-primary); font-size: 12px; font-weight: 700; line-height: 1.25; } .lanac-mobile-rail > button > span { margin-top: 2px; color: var(--color-text-secondary); font-size: 12px; font-weight: 800; } .lanac-card-fav-overlay, .lanac-rail-fav-overlay { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-direction: row !important; gap: 5px !important; white-space: nowrap !important; box-sizing: border-box !important; flex-shrink: 0 !important; min-width: 46px !important; width: 46px !important; height: 36px !important; padding: 0 11px !important; border: 1px solid color-mix(in srgb, var(--color-surface) 72%, transparent) !important; border-radius: 999px !important; background: color-mix(in srgb, var(--info-fill) 82%, transparent) !important; color: var(--on-accent) !important; box-shadow: 0 10px 26px color-mix(in srgb, var(--color-info) 16%, transparent) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } .lanac-card-fav-overlay.active, .lanac-rail-fav-overlay.active { color: var(--on-accent) !important; border-color: color-mix(in srgb, var(--color-surface) 72%, transparent) !important; background: color-mix(in srgb, var(--info-fill) 82%, transparent) !important; } .lanac-card-fav-overlay span, .lanac-rail-fav-overlay span { display: inline-flex !important; width: auto !important; min-width: 0 !important; margin: 0 !important; align-items: center !important; justify-content: center !important; overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important; color: inherit !important; background: transparent !important; line-height: 1 !important; } .lanac-card-fav-overlay span:first-child, .lanac-rail-fav-overlay span:first-child { color: var(--on-accent) !important; font-size: 15px !important; font-weight: 900 !important; transform: none; } .lanac-card-fav-overlay span:last-child, .lanac-rail-fav-overlay span:last-child { color: var(--on-accent) !important; font-size: 13px !important; font-weight: 900 !important; } .lanac-card-fav-overlay.active span:last-child, .lanac-rail-fav-overlay.active span:last-child { color: var(--on-accent) !important; } .lanac-card-view-overlay, .lanac-rail-view-overlay { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important; width: auto !important; min-width: 0 !important; overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important; color: var(--color-info) !important; background: color-mix(in srgb, var(--color-info-soft) 62%, transparent) !important; border: 1px solid color-mix(in srgb, var(--color-info) 22%, transparent) !important; } /* ══════════════════════════════════════════════════════════════════════════ MOBILE ≤ 768 px ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { /* ── Supprime le scroll horizontal global ───────────────────────────── */ html, body, #root { overflow-x: clip !important; overflow-y: visible !important; width: 100%; max-width: 100%; } * { max-width: 100%; } /* ── Cache nav desktop + boutons redondants du header ───────────────── */ .lanac-desktop-nav { display: none !important; } .lanac-hdr-logout { display: none !important; } .lanac-hdr-pub { display: none !important; } .lanac-hero-block { display: none !important; } /* ── Header mobile : logo + langue + notif seulement ───────────────── */ .lanac-hdr-actions { gap: 6px !important; flex-shrink: 0 !important; min-width: 0 !important; margin-left: auto !important; justify-content: flex-end !important; } .lanac-logo { flex: 1 1 auto !important; min-width: 0 !important; } .lanac-hdr-actions > * { flex-shrink: 0 !important; } .lanac-hdr-notifications { display: none !important; } .lanac-hdr-profile { display: none !important; } .lanac-app:not(.lanac-view-home) .lanac-logo-copy { display: none !important; } .lanac-app:not(.lanac-view-home) .lanac-logo { margin: 0 auto 0 0 !important; } /* ── Page : padding bottom pour ne pas cacher derrière la barre ─────── */ .lanac-page-wrap { padding: 12px 12px calc(var(--lanac-mobile-nav-clearance, 96px) + 24px) !important; max-width: 100% !important; box-sizing: border-box; } .lanac-home-search-close { display: inline-flex !important; border: none !important; background: transparent !important; color: var(--color-info) !important; font-size: 13px !important; font-weight: 900 !important; padding: 0 2px !important; flex-shrink: 0 !important; } .lanac-mobile-page-top { position: sticky; top: calc(64px + var(--lanac-sat, 0px)); /* suit la hauteur du header edge-to-edge (additif) */ z-index: 80; display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; gap: 8px; margin: -4px -12px 14px; padding: 8px 12px; background: color-mix(in srgb, var(--color-background) 94%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); } .lanac-mobile-page-title { min-width: 0; color: var(--ink); font-size: 15px; font-weight: 700; letter-spacing: -.015em; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lanac-mobile-page-action { display: flex; justify-content: flex-end; min-width: 0; } /* ── Grille annonces : 2 colonnes ──────────────────────────────────── */ .lanac-item-grid { grid-template-columns: repeat(2, 1fr) !important; } /* ── Tab standard ───────────────────────────────────────────────────── */ .mbn-tab { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; border: none; background: transparent; cursor: pointer; color: var(--color-text-secondary); font-family: var(--font-ui); font-size: 10px; font-weight: 500; line-height: 1; -webkit-tap-highlight-color: transparent; transition: color 0.18s ease; position: relative; overflow: visible; } .mbn-tab:active { opacity: 0.65; } /* Actif → vert LANAC */ /* Icône */ .mbn-tab__icon { display: flex; align-items: center; justify-content: center; transition: transform 0.18s ease; } .mbn-tab--active .mbn-tab__icon { transform: scale(1.08); } /* Label */ .mbn-tab__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* Dock 100% icônes : texte masqué SANS retirer sa place (hauteur/animation/layout du dock strictement préservés). aria-label du bouton conservé => i18n & accessibilité intactes. */ .mbn-tab__label, .mbn-sell__label { visibility: hidden; } /* Badge notification */ .mbn-badge { position: absolute; padding: 0 4px; border-radius: 8px; background: var(--color-error); color: var(--on-accent); font-weight: 700; text-align: center; border: 1.5px solid color-mix(in srgb, var(--color-surface) 90%, transparent); box-sizing: border-box; pointer-events: none; } /* Point notification (indicateur secondaire, indépendant du chiffre) */ .mbn-dot { position: absolute; top: 3px; left: calc(50% - 20px); width: 9px; height: 9px; border-radius: 50%; background: var(--color-primary); border: 1.5px solid color-mix(in srgb, var(--color-surface) 92%, transparent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 50%, transparent); box-sizing: border-box; pointer-events: none; animation: mbn-dot-pulse 2.4s ease-out infinite; } /* Quand le chiffre messages est présent : on cale le point côté gauche de l'icône */ .mbn-dot--with-badge { top: 1px; left: calc(50% - 21px); } @keyframes mbn-dot-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 50%, transparent); } 70% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-primary) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 0%, transparent); } } @media (prefers-reduced-motion: reduce) { .mbn-dot { animation: none; } } /* ── Bouton central "Déposer" ────────────────────────────────────────── */ .mbn-sell { min-width: 0; display: flex; flex-direction: column; align-items: center; border: none; background: transparent; cursor: pointer; color: var(--color-text-secondary); font-family: var(--font-ui); font-size: 10px; font-weight: 600; line-height: 1; -webkit-tap-highlight-color: transparent; position: relative; overflow: visible; } /* Bulle circulaire dorée — dépasse vers le haut via overflow:visible */ .mbn-sell__bubble { border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: transform 0.15s ease, box-shadow 0.15s ease; } .mbn-sell:active .mbn-sell__bubble { transform: scale(0.9); box-shadow: 0 2px 8px color-mix(in srgb, var(--color-primary) 35%, transparent); } /* Icône + dans la bulle */ .mbn-sell__icon { stroke: var(--on-accent); fill: none; stroke-linecap: round; } /* Icônes SVG des tabs standard */ .mbn-icon { display: block; stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.18s ease; } /* État actif : icône légèrement remplie */ .mbn-tab--active .mbn-icon-fill { fill: currentColor; fill-opacity: 0.15; } } /* Mobile-only surfaces added for the app-like flow. Desktop keeps the inline layout. */ .lanac-mobile-detail-top, .lanac-mobile-back { display: none; } @media (max-width: 900px) { .lanac-header { height: calc(58px + var(--lanac-sat, 0px)) !important; min-height: calc(58px + var(--lanac-sat, 0px)) !important; padding: var(--lanac-sat, 0px) 12px 0 !important; /* edge-to-edge : contenu (58px) décalé sous l'encoche (additif) */ box-sizing: border-box; } .lanac-logo { min-width: 0 !important; gap: 8px !important; } .lanac-logo-copy { min-width: 0; } .lanac-logo-name { font-size: 15px !important; letter-spacing: 0 !important; } .lanac-logo-tag { display: none !important; } .lanac-market-layout { display: block !important; } .lanac-market-sidebar { display: none !important; } .lanac-market-main { min-width: 0; } .lanac-market-filters { position: sticky; top: calc(58px + var(--lanac-sat, 0px)); /* suit la hauteur du header edge-to-edge (additif) */ z-index: 70; margin: -2px -2px 12px !important; padding: 8px 2px 10px !important; background: color-mix(in srgb, var(--color-background) 94%, transparent); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); overflow-x: auto; flex-wrap: nowrap !important; align-items: center !important; scrollbar-width: none; } .lanac-market-filters::-webkit-scrollbar { display: none; } .lanac-market-filters > * { flex-shrink: 0; } .lanac-market-filters > div:first-child { min-width: 240px !important; flex: 1 0 240px !important; border-radius: 999px !important; } .lanac-mobile-detail-top { display: flex !important; align-items: center; gap: 9px; position: sticky; top: calc(58px + var(--lanac-sat, 0px)); /* suit la hauteur du header edge-to-edge (additif) */ z-index: 90; margin: -2px -12px 10px; padding: 8px 12px; background: color-mix(in srgb, var(--color-surface) 96%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--color-border) 90%, transparent); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); } .lanac-mobile-back { display: inline-flex !important; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-primary); font-size: 30px; line-height: 1; font-weight: 400; cursor: pointer; box-shadow: 0 6px 16px color-mix(in srgb, var(--scrim) 8%, transparent); -webkit-tap-highlight-color: transparent; } .lanac-mobile-detail-search { flex: 1; min-width: 0; height: 38px; border: 1px solid var(--color-border); background: var(--color-background); border-radius: 999px; display: flex; align-items: center; gap: 7px; padding: 0 12px; } .lanac-mobile-detail-search span { opacity: .55; font-size: 13px; } .lanac-mobile-detail-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: var(--color-text-primary); font-family: inherit; font-size: 13px; } .lanac-detail-view iframe, .lanac-detail-view .leaflet-container { max-width: 100%; } .lanac-messenger { grid-template-columns: 1fr !important; height: calc(100dvh - 58px - var(--lanac-mobile-nav-clearance, 96px)) !important; } .lanac-messenger--thread .lanac-messenger-list { display: none !important; } .lanac-messenger--list .lanac-messenger-thread { display: none !important; } .lanac-messenger-list { border-right: none !important; } .lanac-messenger-list > div:first-child { padding: 14px 16px 10px !important; } .lanac-convo-row { padding: 13px 14px !important; border-left: none !important; background: var(--color-surface) !important; } .lanac-convo-row:active { background: var(--color-success-soft) !important; } .lanac-messenger-thread { min-height: 0; } .lanac-messenger-thread > div:first-child { padding: calc(env(safe-area-inset-top, 0px) + 9px) 12px 9px !important; /* edge-to-edge : en-tête du fil sous l'encoche */ gap: 9px !important; } .lanac-messenger-thread > div:nth-child(2) { padding: 14px 12px !important; } .lanac-messenger-thread > div:nth-child(2) > div > div { max-width: 82% !important; } } .lanac-chat-more { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-secondary); font-size: 22px; line-height: 1; font-weight: 900; } .lanac-contact-sheet { position: fixed; inset: 0; z-index: 950; background: color-mix(in srgb, var(--scrim) 28%, transparent); display: flex; align-items: flex-end; padding: 14px; } .lanac-contact-sheet__panel { width: 100%; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 20px 20px 16px 16px; box-shadow: 0 -14px 44px color-mix(in srgb, var(--scrim) 22%, transparent); padding: 18px; position: relative; } .lanac-contact-sheet__close { position: absolute; right: 14px; top: 14px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-background); color: var(--color-text-secondary); font-size: 18px; font-weight: 900; } .lanac-contact-sheet__head { display: flex; align-items: center; gap: 12px; padding-right: 34px; margin-bottom: 14px; } .lanac-contact-sheet__name { font-size: 17px; font-weight: 900; color: var(--color-text-primary); } .lanac-contact-sheet__meta { font-size: 12px; color: var(--color-text-secondary); margin-top: 3px; } .lanac-contact-action { width: 100%; min-height: 44px; border-radius: 12px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-primary); font-size: 13px; font-weight: 900; margin-top: 8px; } .lanac-contact-action--danger { border-color: var(--color-error); background: var(--color-error); color: var(--on-accent); } .lanac-contact-action--good { border-color: var(--color-border); background: var(--color-success-soft); color: var(--color-success); } @media (max-width: 900px) { .lanac-market-layout--detail { display: block !important; grid-template-columns: 1fr !important; margin-left: -12px; margin-right: -12px; } .lanac-market-layout--detail .lanac-market-main { width: 100%; } .lanac-market-layout--detail .lanac-market-sidebar, .lanac-market-layout--detail .lanac-market-filters, .lanac-market-layout--detail .lanac-immo-quick { display: none !important; } .lanac-profile-shell { display: block !important; } .lanac-profile-menu { border-radius: 16px !important; box-shadow: 0 12px 28px color-mix(in srgb, var(--scrim) 8%, transparent); } .lanac-profile-menu-btn { min-height: 52px !important; padding: 14px 16px !important; border-left: none !important; border-bottom: 1px solid var(--color-border) !important; font-size: 14px !important; } .lanac-profile-content { border-radius: 0 !important; border-left: none !important; border-right: none !important; margin-left: -12px; margin-right: -12px; } .lanac-profile-mobile-top { display: flex; align-items: center; gap: 10px; position: sticky; top: calc(58px + var(--lanac-sat, 0px)); /* suit la hauteur du header edge-to-edge (additif) */ z-index: 80; margin: -14px -14px 16px; padding: 9px 14px; background: color-mix(in srgb, var(--color-surface) 96%, transparent); border-bottom: 1px solid var(--color-border); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); color: var(--color-text-primary); font-size: 15px; font-weight: 900; } .lanac-profile-content h3 { font-size: 16px !important; margin-bottom: 14px !important; } .lanac-profile-content [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; } } .lanac-mobile-listing-chrome { display: none; } @media (max-width: 900px) { .lanac-mobile-listing-chrome { display: flex; align-items: center; justify-content: space-between; position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 240; padding: 10px 14px; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; } .lanac-mobile-listing-chrome--show { opacity: 1; transform: translateY(0); pointer-events: auto; } .lanac-mobile-listing-actions { display: flex; align-items: center; gap: 8px; } .lanac-mobile-listing-actions button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--color-border) 86%, transparent); background: color-mix(in srgb, var(--color-surface) 94%, transparent); color: var(--color-text-primary); font-size: 17px; font-weight: 900; box-shadow: 0 8px 22px color-mix(in srgb, var(--scrim) 16%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .lanac-detail-view { border: none !important; border-radius: 0 !important; margin: -12px 0 calc(var(--lanac-mobile-nav-clearance, 96px) + 16px) !important; background: var(--color-surface) !important; } .lanac-detail-actions { display: none !important; } .lanac-detail-body { display: flex !important; flex-direction: column !important; } .lanac-detail-media { order: 0; background: var(--scrim) !important; } .lanac-detail-media > div:first-child { min-height: min(92vw, 430px); } .lanac-detail-media img, .lanac-detail-media video { width: 100% !important; height: min(92vw, 430px) !important; min-height: 300px !important; object-fit: cover !important; } .lanac-detail-info { order: 1; padding: 18px 16px 20px !important; max-height: none !important; overflow: visible !important; } .lanac-detail-info h2 { font-size: 22px !important; line-height: 1.18 !important; letter-spacing: 0 !important; } .lanac-detail-info > div:last-child, .lanac-detail-info button { max-width: 100%; } .lanac-mini-map { padding: 18px 16px !important; background: var(--color-surface); } .lanac-mini-map > div:nth-child(2) { height: 240px !important; border-radius: 14px !important; } .lanac-similar-section { padding: 18px 16px 24px !important; } .lanac-similar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .lanac-publish-screen--mobile { background: var(--color-surface) !important; padding: 0 !important; overflow: hidden !important; } .lanac-publish-screen--mobile .lanac-publish-panel { width: 100% !important; max-width: none !important; height: 100dvh !important; max-height: none !important; border: none !important; border-radius: 0 !important; overflow-x: hidden !important; box-sizing: border-box; padding-bottom: calc(var(--lanac-mobile-nav-clearance, 96px) + 18px) !important; } .lanac-publish-head { position: sticky; top: 0; z-index: 60; margin: 0 -14px 16px !important; padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px !important; /* Header natif OPAQUE : iOS WKWebView ne compose pas backdrop-filter + sticky de façon fiable (le stacking-context du filtre se réordonne → le formulaire se peignait PAR-DESSUS le titre). Fond plein + fine bordure + ombre douce = séparation premium fiable sur tous les moteurs. */ background: var(--color-surface); border-bottom: 1px solid var(--color-border); box-shadow: 0 6px 16px -14px color-mix(in srgb, var(--scrim) 55%, transparent); justify-content: flex-start !important; gap: 10px; } .lanac-publish-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .lanac-publish-field-grid { grid-template-columns: 1fr !important; } .lanac-publish-photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .lanac-publish-panel input, .lanac-publish-panel select, .lanac-publish-panel textarea { font-size: 16px !important; } .lanac-search-page { min-height: calc(100dvh - 150px); margin: -4px -12px 0; background: var(--color-surface); border-top: 1px solid var(--color-border); } .lanac-search-bar { display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 7px; padding: 10px 12px; background: var(--color-surface); border-bottom: 1px solid var(--color-border); } .lanac-search-bar input { height: 38px; min-width: 0; border: none; border-radius: 7px; background: var(--color-neutral-soft); padding: 0 8px; color: var(--color-text-primary); font-size: 16px; outline: none; } .lanac-search-camera, .lanac-search-clear { width: 34px; height: 34px; border: none; border-radius: 50%; background: transparent; color: var(--color-text-secondary); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; } .lanac-search-camera { opacity: .72; } .lanac-search-clear { color: var(--color-text-primary); font-size: 24px; } .lanac-search-close { border: none; background: transparent; color: var(--color-text-primary); font-size: 13px; font-weight: 700; padding: 0 2px; } .lanac-search-tabs, .lanac-inbox-tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--color-surface); border-bottom: 1px solid var(--color-border); } .lanac-search-tabs button, .lanac-inbox-tabs button { height: 44px; border: none; border-bottom: 2px solid transparent; background: var(--color-surface); color: var(--color-text-secondary); font-size: 14px; font-weight: 600; } .lanac-search-tabs button.active, .lanac-inbox-tabs button.active { border-bottom-color: var(--color-info); color: var(--color-text-primary); } .lanac-search-results { padding: 14px 0 24px; } .lanac-search-section-label { padding: 0 14px 10px; color: var(--ink-2); font-size: 13px; } .lanac-search-suggestion, .lanac-member-result, .lanac-notification-row { width: 100%; min-height: 54px; padding: 10px 14px; border: none; border-bottom: 1px solid var(--color-border); background: var(--color-surface); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; text-align: left; } .lanac-search-suggestion strong, .lanac-member-result strong, .lanac-notification-row strong { display: block; color: var(--color-text-primary); font-size: 15px; font-weight: 700; } .lanac-search-suggestion small, .lanac-member-result small, .lanac-notification-row small { display: block; margin-top: 2px; color: var(--color-text-secondary); font-size: 13px; line-height: 1.25; } .lanac-search-suggestion em, .lanac-member-result em, .lanac-notification-row em { color: var(--color-text-secondary); font-style: normal; } .lanac-member-result { grid-template-columns: auto 1fr auto; } .lanac-search-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 14px; } .lanac-search-cats button { min-height: 42px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-background); color: var(--color-text-primary); font-weight: 800; } .lanac-inbox-tabs { margin: -4px -12px 0; } .lanac-notification-list { margin: 0 -12px; background: var(--color-surface); min-height: calc(100dvh - 170px); } .lanac-notification-row { grid-template-columns: 8px 1fr auto; } .lanac-notification-row > span { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border); } .lanac-notification-row.unread > span { background: var(--color-info); } .lanac-search-empty { padding: 32px 16px; color: var(--color-text-secondary); text-align: center; font-size: 14px; } .lanac-explore-page { min-height: calc(100dvh - 82px); margin: -4px -12px 0; padding: 0 14px calc(92px + env(safe-area-inset-bottom, 0px)); background: var(--color-background); overflow-x: hidden; } .lanac-explore-top { position: sticky; top: 0; z-index: 35; display: grid; grid-template-columns: 40px 1fr; gap: 8px; align-items: center; margin: 0 -14px 14px; padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 12px; background: color-mix(in srgb, var(--color-background) 96%, transparent); border-bottom: 1px solid var(--color-border); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); } .lanac-explore-back { width: 38px; height: 38px; border: none; border-radius: 50%; background: var(--color-surface); color: var(--color-text-primary); font-size: 30px; line-height: 1; box-shadow: 0 8px 18px color-mix(in srgb, var(--scrim) 8%, transparent); } .lanac-explore-top h2 { margin: 0; color: var(--color-text-primary); font-size: 21px; line-height: 1.1; letter-spacing: 0; } .lanac-explore-top p { margin: 4px 0 0; color: var(--color-text-secondary); font-size: 12px; line-height: 1.25; } .lanac-explore-bands { display: grid; gap: 10px; } .lanac-explore-bands button { width: 100%; min-height: 74px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 12px; text-align: left; box-shadow: 0 10px 24px color-mix(in srgb, var(--scrim) 6%, transparent); } .lanac-explore-bands button.active { border-color: var(--color-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success) 12%, transparent), 0 12px 28px color-mix(in srgb, var(--scrim) 8%, transparent); } .lanac-explore-bands span { grid-row: 1 / span 2; width: 42px; height: 42px; border-radius: 12px; background: var(--color-success-soft); display: flex; align-items: center; justify-content: center; font-size: 20px; } .lanac-explore-bands strong { color: var(--color-text-primary); font-size: 15px; line-height: 1.2; } .lanac-explore-bands small { color: var(--color-text-secondary); font-size: 12px; line-height: 1.2; } .lanac-explore-suggestions, .lanac-explore-panel { margin-top: 14px; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-surface); overflow: hidden; box-shadow: 0 12px 28px color-mix(in srgb, var(--scrim) 7%, transparent); } .lanac-explore-suggestions button { width: 100%; min-height: 58px; border: none; border-bottom: 1px solid var(--color-border); background: var(--color-surface); display: block; padding: 12px 14px; text-align: left; } .lanac-explore-suggestions button:last-child { border-bottom: none; } .lanac-explore-suggestions strong, .lanac-explore-suggestions small { display: block; } .lanac-explore-suggestions strong { color: var(--color-text-primary); font-size: 14px; } .lanac-explore-suggestions small { margin-top: 3px; color: var(--color-text-secondary); font-size: 12px; } .lanac-explore-panel { padding: 14px; } .lanac-explore-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .lanac-explore-panel-head strong { color: var(--ink); font-size: 16px; font-weight: 700; letter-spacing: -.015em; } .lanac-explore-panel-head button { border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-success-soft); color: var(--color-success); padding: 8px 12px; font-weight: 800; font-size: 12px; } .lanac-explore-chip-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .lanac-explore-chip-grid button, .lanac-explore-mini button { min-height: 42px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-background); color: var(--color-text-primary); padding: 9px 10px; font-size: 13px; font-weight: 800; text-align: left; } .lanac-explore-section { margin: 16px 0 8px; color: var(--color-text-secondary); font-size: 12px; font-weight: 800; } .lanac-explore-mini { display: flex; flex-wrap: wrap; gap: 8px; } .lanac-explore-mini button { min-height: 36px; border-radius: 999px; flex: 0 0 auto; } .lanac-explore-visual { margin-top: 16px; min-height: 58px; border: 1px dashed var(--color-border); border-radius: 14px; background: var(--color-background); display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; gap: 2px 10px; align-items: center; padding: 12px; color: var(--color-text-primary); } .lanac-explore-visual span { grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 50%; background: var(--color-surface); display: flex; align-items: center; justify-content: center; opacity: .72; } .lanac-explore-visual strong { font-size: 14px; } .lanac-explore-visual small { color: var(--color-text-secondary); font-size: 12px; } .lanac-filter-page { position: fixed; inset: 0; z-index: 1200; display: flex; flex-direction: column; margin: 0; padding: 0; background: var(--color-surface); color: var(--color-text-primary); } .lanac-filter-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 16px calc(14px + env(safe-area-inset-bottom, 0px)); } .lanac-filter-block { padding: 8px 0 20px; border-bottom: 1px solid var(--color-border); } .lanac-filter-block:last-child { border-bottom: none; padding-bottom: 2px; } .lanac-filter-block .lanac-filter-section:first-child { margin-top: 0; } .lanac-filter-block .lanac-filter-list { margin: 0 -16px; } .lanac-filter-head { position: sticky; top: 0; z-index: 40; display: grid; grid-template-columns: 46px 1fr 64px; align-items: center; gap: 8px; min-height: 54px; flex-shrink: 0; margin: 0; padding: calc(6px + env(safe-area-inset-top, 0px)) 14px 8px; background: color-mix(in srgb, var(--color-surface) 98%, transparent); border-bottom: 1px solid var(--color-border); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); } .lanac-filter-head strong { text-align: center; font-size: 16px; font-weight: 700; letter-spacing: -.015em; color: var(--ink); } .lanac-filter-head button { border: none; background: transparent; color: var(--color-text-primary); font-size: 14px; font-weight: 700; } .lanac-filter-head button:first-child { justify-self: start; font-size: 30px; font-weight: 300; line-height: 1; } .lanac-filter-head button:last-child { justify-self: end; text-decoration: underline; } .lanac-filter-section { margin: 18px 0 9px; color: var(--color-text-secondary); font-size: 13px; font-weight: 800; } .lanac-filter-segment { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .lanac-filter-segment button, .lanac-filter-chips button { min-height: 40px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-background); color: var(--color-text-primary); font-size: 14px; font-weight: 800; } .lanac-filter-segment button.active, .lanac-filter-chips button.active, .lanac-filter-toggle button.active { border-color: var(--color-info); background: var(--color-info-soft); color: var(--color-info); } .lanac-filter-list { margin: 0 -14px; border-top: 1px solid var(--color-border); background: var(--color-surface); } .lanac-filter-list button { width: 100%; min-height: 52px; padding: 12px 14px; border: none; border-bottom: 1px solid var(--color-border); background: var(--color-surface); display: grid; grid-template-columns: 1fr 28px; gap: 12px; align-items: center; text-align: left; color: var(--color-text-primary); font-size: 15px; font-weight: 500; } .lanac-filter-list span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .lanac-filter-list em { width: 24px; height: 24px; border: 1.5px solid var(--color-text-secondary); border-radius: 7px; justify-self: end; position: relative; } .lanac-filter-list em.checked { border-color: var(--color-info); background: var(--color-info); } .lanac-filter-list em.checked::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 12px; border: solid var(--color-surface); border-width: 0 2px 2px 0; transform: rotate(45deg); } .lanac-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; } .lanac-filter-chips button { padding: 0 14px; flex: 0 0 auto; } .lanac-filter-input { width: 100%; height: 42px; border: none; border-radius: 8px; background: var(--color-neutral-soft); padding: 0 12px; color: var(--color-text-primary); font-size: 16px; outline: none; } .lanac-filter-select { width: 100%; height: 42px; border: none; border-radius: 8px; background: var(--color-neutral-soft); padding: 0 12px; color: var(--color-text-primary); font-size: 16px; outline: none; } .lanac-filter-range { width: 100%; margin: 13px 0 2px; accent-color: var(--color-info); } .lanac-filter-summary { margin: 0 -14px; border-top: 1px solid var(--color-border); background: var(--color-surface); } .lanac-filter-summary button { width: 100%; min-height: 58px; padding: 12px 14px; border: none; border-bottom: 1px solid var(--color-border); background: var(--color-surface); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; text-align: left; } .lanac-filter-summary span, .lanac-filter-summary strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lanac-filter-summary span { color: var(--color-text-primary); font-size: 15px; font-weight: 650; } .lanac-filter-summary strong { color: var(--color-text-secondary); font-size: 12px; font-weight: 600; grid-column: 1; } .lanac-filter-summary em { grid-row: 1 / span 2; grid-column: 2; color: var(--color-text-secondary); font-style: normal; font-size: 24px; } .lanac-filter-toggle { min-height: 54px; margin: 14px -14px 0; padding: 10px 14px; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--color-surface); font-size: 15px; font-weight: 600; } .lanac-filter-toggle button { min-width: 62px; height: 34px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-background); color: var(--color-text-secondary); font-weight: 900; } .lanac-filter-submit { flex-shrink: 0; width: auto; min-height: 52px; margin: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border: none; border-radius: 999px; background: var(--btn-primary-bg); color: var(--btn-primary-fg); font-size: 15px; font-weight: 600; letter-spacing: -.01em; box-shadow: 0 8px 22px var(--btn-primary-shadow); } .lanac-mobile-filter-entry { display: grid; gap: 8px; margin: 0 0 14px; } .lanac-mobile-filter-row { display: flex; gap: 8px; overflow-x: auto; padding: 0 2px 2px; scrollbar-width: none; } .lanac-mobile-filter-row::-webkit-scrollbar { display: none; } .lanac-mobile-filter-entry button { min-width: 0; min-height: 46px; border: 1px solid var(--color-border); border-radius: 13px; background: var(--color-surface); display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; padding: 9px 12px; text-align: left; box-shadow: 0 8px 18px color-mix(in srgb, var(--scrim) 6%, transparent); } .lanac-mobile-filter-row button { flex: 0 0 auto; min-width: 122px; grid-template-columns: 1fr; gap: 2px; padding: 9px 11px; } .lanac-mobile-filter-row button.active { border-color: var(--color-info); background: var(--color-info-soft); } .lanac-mobile-filter-entry > button::before { content: "☰"; width: 28px; height: 28px; border-radius: 50%; background: var(--color-success-soft); color: var(--color-success); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 900; } .lanac-mobile-filter-entry > button span, .lanac-mobile-filter-entry > button strong { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; grid-column: 2; } .lanac-mobile-filter-row span, .lanac-mobile-filter-row strong { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; grid-column: auto; } .lanac-mobile-filter-entry span { color: var(--color-text-secondary); font-size: 11px; font-weight: 800; line-height: 1.1; } .lanac-mobile-filter-entry strong { margin-top: 1px; color: var(--color-text-primary); font-size: 14px; line-height: 1.15; } .lanac-mobile-filter-entry em { color: var(--color-text-secondary); font-size: 11px; font-style: normal; font-weight: 800; white-space: nowrap; } .lanac-publish-panel > button:last-child { position: static; z-index: auto; box-shadow: none; } } .lanac-vinted-detail { display: none; } @media (max-width: 900px) { .lanac-vinted-detail { display: block; min-height: 100dvh; background: var(--color-surface); padding-bottom: calc(var(--lanac-mobile-nav-clearance, 96px) + 20px); color: var(--color-text-primary); } .lanac-vinted-hero { position: relative; width: 100%; height: min(132vw, 520px); min-height: 390px; background: var(--scrim); overflow: hidden; touch-action: pan-y; -webkit-user-select: none; user-select: none; } .lanac-vinted-hero img, .lanac-vinted-hero video { width: 100%; height: 100%; /* Audit UX mobile 2026-07-05 (C2) : cover = premier écran immersif, plus de bandes noires. L'image entière reste accessible via le tap → plein écran (contain dans la visionneuse). */ object-fit: cover; display: block; } .lanac-vinted-back, .lanac-vinted-more { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); z-index: 8; /* Audit UX mobile 2026-07-05 (C4) : 40px visuel + ::after → zone tactile 44px. */ width: 40px; height: 40px; border: none; border-radius: 50%; background: color-mix(in srgb, var(--scrim) 24%, transparent); color: var(--on-accent); box-shadow: none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-weight: 900; } .lanac-vinted-back::after, .lanac-vinted-more::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; } .lanac-vinted-back { left: 12px; font-size: 32px; /* Centrage optique du chevron (C12). */ display: inline-flex; align-items: center; justify-content: center; line-height: 1; padding: 0 0 3px; } .lanac-vinted-more { right: 12px; font-size: 16px; letter-spacing: 1px; } .lanac-vinted-heart { position: absolute; right: 14px; bottom: 16px; z-index: 8; min-width: 58px; height: 42px; border-radius: 999px; border: none; background: color-mix(in srgb, var(--color-surface) 96%, transparent); color: var(--color-text-primary); font-size: 25px; font-weight: 400; display: inline-flex; align-items: center; justify-content: center; gap: 4px; box-shadow: 0 8px 26px color-mix(in srgb, var(--scrim) 18%, transparent); } .lanac-vinted-heart span { font-size: 13px; font-weight: 800; margin-top: 2px; } .lanac-vinted-dots { position: absolute; left: 50%; bottom: 17px; transform: translateX(-50%); z-index: 7; display: flex; gap: 5px; } .lanac-vinted-dots button { width: 7px; height: 7px; border-radius: 50%; border: none; background: color-mix(in srgb, var(--color-surface) 55%, transparent); padding: 0; /* Audit UX mobile 2026-07-05 (C4) : visuel 7px conservé, zone tactile étendue (±3px latéral = demi-gap sans chevauchement, ±19px vertical → ~44px). */ position: relative; } .lanac-vinted-dots button::after { content: ""; position: absolute; inset: -19px -3px; } .lanac-vinted-dots button.active { background: var(--color-surface); } .lanac-vinted-swipe-zone { position: absolute; inset: 58px 0 76px; z-index: 6; display: grid; grid-template-columns: 1fr 1fr; pointer-events: none; } .lanac-vinted-swipe-zone button { border: none; background: transparent; color: transparent; padding: 0; pointer-events: auto; -webkit-tap-highlight-color: transparent; } .lanac-vinted-info { background: var(--color-surface); padding: 16px 15px 0; } .lanac-vinted-title-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: start; } .lanac-vinted-title-row h1 { font-size: 20px; line-height: 1.2; margin: 0 0 5px; color: var(--ink); letter-spacing: -.015em; } .lanac-vinted-meta { font-size: 13px; color: var(--ink-2); line-height: 1.35; } .lanac-vinted-badge { min-width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--on-accent); } /* Audit UX mobile 2026-07-05 (C1) : le prix = info n°1, aligné sur la carte de grille (or vente / bleu location, 800). */ .lanac-vinted-price { margin-top: 13px; font-size: 23px; font-weight: 800; letter-spacing: -.02em; color: var(--color-primary); } .lanac-vinted-price.is-rent { color: var(--color-info); } .lanac-vinted-price span { color: var(--ink-3); text-decoration: line-through; margin-right: 8px; font-size: 14px; font-weight: 600; } .lanac-vinted-price small { margin-left: 3px; font-size: 13px; font-weight: 600; color: var(--ink-3); } .lanac-vinted-soft { margin-top: 5px; font-size: 12px; color: var(--color-info); font-weight: 800; } .lanac-vinted-soft.warn { color: var(--color-primary); } .lanac-vinted-section { margin: 20px -15px 0; padding: 17px 15px; border-top: 9px solid var(--color-background); } .lanac-vinted-section h2, .lanac-vinted-similar h2 { font-size: 14px; font-weight: 500; letter-spacing: -.005em; color: var(--ink-2); margin: 0 0 12px; } .lanac-vinted-section p { font-size: 14px; line-height: 1.6; color: var(--ink); margin: 0; } .lanac-vinted-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .lanac-vinted-seller { width: 100%; margin-top: 16px; padding: 13px 0; border: none; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: var(--color-surface); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; text-align: left; } .lanac-vinted-seller strong, .lanac-vinted-seller em, .lanac-vinted-seller small { display: block; } .lanac-vinted-seller strong { font-size: 14px; color: var(--color-text-primary); } .lanac-vinted-seller em { font-style: normal; font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; } .lanac-vinted-seller small { font-size: 11px; color: var(--color-info); margin-top: 3px; } .lanac-vinted-cta { position: sticky; bottom: calc(var(--lanac-mobile-nav-clearance, 96px) + 8px); z-index: 60; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 18px -15px 0; padding: 10px 15px; background: color-mix(in srgb, var(--color-surface) 96%, transparent); border-top: 1px solid var(--color-border); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); } .lanac-vinted-primary, .lanac-vinted-outline { min-height: 42px; border-radius: 999px; font-size: 14px; font-weight: 600; letter-spacing: -.01em; } .lanac-chat-item-strip { display: grid; grid-template-columns: 48px 1fr; gap: 10px; align-items: center; margin: 0; padding: 10px 14px; background: var(--color-surface); border-bottom: 1px solid var(--color-border); } .lanac-chat-item-thumb { width: 48px; height: 48px; border-radius: 8px; background: var(--color-neutral-soft); display: flex; align-items: center; justify-content: center; font-size: 22px; } .lanac-chat-item-strip strong { display: block; color: var(--color-text-primary); font-size: 14px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lanac-chat-item-strip small { display: block; margin-top: 3px; color: var(--color-info); font-size: 12px; } .lanac-vinted-primary { border: none; background: var(--btn-primary-bg); color: var(--btn-primary-fg); box-shadow: 0 6px 16px var(--btn-primary-shadow); } /* « outline » conservé comme nom de classe — désormais bouton tonal vert doux (premium) */ .lanac-vinted-outline { border: none; background: var(--btn-tonal-bg); color: var(--btn-tonal-fg); } .lanac-vinted-statuses { display: flex; gap: 7px; flex-wrap: wrap; } .lanac-vinted-statuses button { padding: 8px 11px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); font-size: 12px; font-weight: 800; } .lanac-vinted-similar { border-top: 9px solid var(--color-background); padding: 17px 15px 22px; background: var(--color-surface); } .lanac-vinted-similar > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .lanac-vinted-similar button { border: none; background: transparent; padding: 0; text-align: left; } .lanac-vinted-similar img { width: 100%; aspect-ratio: 1 / 1.2; object-fit: cover; border-radius: 8px; display: block; background: var(--color-background); } .lanac-vinted-similar strong { display: block; margin-top: 6px; font-size: 12px; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Audit UX mobile 2026-07-05 (C5) : prix des similaires aligné sur la hiérarchie or/800. */ .lanac-vinted-similar span { display: block; font-size: 12.5px; font-weight: 800; color: var(--color-primary); margin-top: 2px; } .lanac-vinted-sheet { position: fixed; inset: 0; z-index: 1000; background: color-mix(in srgb, var(--scrim) 28%, transparent); display: flex; align-items: flex-end; padding: 12px; } .lanac-vinted-sheet > div { width: 100%; background: var(--color-surface); border-radius: 16px; overflow: hidden; box-shadow: 0 -14px 44px color-mix(in srgb, var(--scrim) 22%, transparent); } .lanac-vinted-sheet button { width: 100%; min-height: 50px; border: none; border-bottom: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-primary); font-size: 15px; font-weight: 800; } .lanac-vinted-sheet button.danger { color: var(--color-error); } .lanac-media-viewer { position: fixed; inset: 0; z-index: 2600; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--scrim) 94%, transparent); padding: calc(18px + env(safe-area-inset-top, 0px)) 12px calc(18px + env(safe-area-inset-bottom, 0px)); } .lanac-media-viewer__stage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .lanac-media-viewer__stage img, .lanac-media-viewer__stage video { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 0; } .lanac-media-viewer__close { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; z-index: 2601; /* Audit UX mobile 2026-07-05 (N2) : cible tactile 44px. */ width: 44px; height: 44px; border: none; border-radius: 50%; background: color-mix(in srgb, var(--color-surface) 96%, transparent); color: var(--color-info); font-size: 28px; font-weight: 400; line-height: 40px; box-shadow: 0 10px 30px color-mix(in srgb, var(--scrim) 24%, transparent); } .lanac-media-open-zone { position: absolute !important; inset: 58px 0 76px !important; z-index: 6 !important; width: auto !important; min-height: 0 !important; border: none !important; background: transparent !important; color: transparent !important; cursor: zoom-in !important; -webkit-tap-highlight-color: transparent !important; } .lanac-item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px 10px !important; } .lanac-item-card { border: none !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; overflow: visible !important; } .lanac-card-media { height: auto !important; aspect-ratio: 1 / 1.22; border-radius: 12px !important; background-color: var(--color-background) !important; } .lanac-card-media > span:not(.lanac-card-view-overlay):not(.lanac-card-type-overlay):not(.lanac-card-photos-overlay) { display: none !important; } /* Audit UX mobile 2026-07-05 (C7/H04) : le type d'annonce (Location) et le nombre de photos restent visibles — un loyer/mois ne doit jamais se lire comme un prix de vente. */ .lanac-card-media > span.lanac-card-type-overlay, .lanac-card-media > span.lanac-card-photos-overlay { display: inline-flex !important; align-items: center !important; overflow: visible !important; white-space: nowrap !important; text-overflow: clip !important; bottom: 10px !important; } .lanac-card-media > span.lanac-card-type-overlay { left: 10px !important; } .lanac-card-media > span.lanac-card-photos-overlay { right: 10px !important; /* Au-dessus du bouton favori mobile (46×32, bottom 12). */ bottom: 52px !important; } /* Exception : le compteur de vues reste visible sur les cartes mobiles */ .lanac-card-media > span.lanac-card-view-overlay { display: inline-flex !important; align-items: center !important; gap: 4px !important; overflow: visible !important; white-space: nowrap !important; text-overflow: clip !important; } .lanac-card-content { padding: 7px 2px 10px !important; } .lanac-card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 32px; margin-bottom: 3px !important; overflow: hidden; color: var(--ink) !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: -.012em !important; line-height: 1.25 !important; } .lanac-card-location, .lanac-card-meta { display: block !important; margin-bottom: 2px !important; overflow: hidden; color: var(--ink-2) !important; font-size: 11px !important; line-height: 1.25 !important; text-overflow: ellipsis; white-space: nowrap; } .lanac-card-address, .lanac-card-seller, .lanac-card-signal, .lanac-card-metrics, .lanac-card-like, .lanac-card-status, .lanac-card-actions { display: none !important; } .lanac-card-price { margin-top: 5px !important; color: var(--ink) !important; font-size: 13px !important; font-weight: 800 !important; letter-spacing: -.01em !important; line-height: 1.25 !important; } .lanac-card-price span { font-size: 11px !important; font-weight: 700 !important; } .lanac-admin-listing-row, .lanac-admin-user-row, .lanac-admin-report-row { grid-template-columns: 1fr !important; align-items: stretch !important; } .lanac-admin-listing-row { grid-template-columns: 64px 1fr !important; } .lanac-admin-listing-row .lanac-admin-row-actions, .lanac-admin-user-row .lanac-admin-row-actions, .lanac-admin-report-row > div:last-child { grid-column: 1 / -1; justify-content: stretch !important; width: 100%; } .lanac-admin-row-actions > button, .lanac-admin-row-actions > select, .lanac-admin-report-row > div:last-child > button { flex: 1 1 140px; min-width: 0; } .lanac-admin-review-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; } .lanac-admin-review-card { border-radius: 18px !important; box-shadow: 0 14px 34px color-mix(in srgb, var(--scrim) 10%, transparent) !important; } .lanac-admin-review-media { height: 220px !important; background-position: center !important; } .lanac-admin-review-body { padding: 14px !important; } .lanac-admin-review-actions { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 9px !important; } .lanac-admin-review-actions button { min-height: 44px !important; font-size: 13px !important; } } @media (max-width: 900px) { .lanac-hdr-notifications { display: none !important; } .lanac-hdr-favorites-mobile { display: inline-flex !important; position: relative; width: 34px; height: 34px; align-items: center; justify-content: center; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-surface); color: var(--color-text-primary); font-size: 23px; line-height: 1; box-shadow: 0 4px 14px color-mix(in srgb, var(--scrim) 6%, transparent); } .lanac-hdr-favorites-mobile span { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: var(--color-primary); color: var(--color-text-primary); border: 1px solid var(--color-surface); font-size: 9px; font-weight: 900; line-height: 15px; } .lanac-home-search-panel { padding: 10px !important; border-radius: 14px !important; box-shadow: none !important; } .lanac-home-search-submit { display: none !important; } .lanac-mobile-personalized { display: grid !important; gap: 16px !important; margin: 4px -12px 18px !important; padding: 0 12px !important; } .lanac-mobile-personalized section { min-width: 0 !important; } .lanac-mobile-rail-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin-bottom: 9px !important; } .lanac-mobile-rail-head strong { color: var(--ink) !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: -.02em !important; } .lanac-mobile-rail-head button { border: none !important; background: transparent !important; color: var(--color-info) !important; font-size: 12px !important; font-weight: 900 !important; } .lanac-mobile-rail { display: flex !important; gap: 12px !important; overflow-x: auto !important; overflow-y: hidden !important; padding-bottom: 4px !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; scroll-snap-type: x proximity !important; } .lanac-mobile-rail::-webkit-scrollbar { display: none !important; } .lanac-mobile-rail > button { flex: 0 0 152px !important; width: 152px !important; border: none !important; background: transparent !important; padding: 0 !important; text-align: left !important; scroll-snap-align: start !important; } .lanac-mobile-rail img { width: 152px !important; height: 186px !important; border-radius: 12px !important; display: block !important; object-fit: cover !important; background: var(--color-background) !important; } .lanac-mobile-rail strong, .lanac-mobile-rail > button > span { display: block !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .lanac-mobile-rail strong { margin-top: 6px !important; color: var(--color-text-primary) !important; font-size: 12px !important; font-weight: 700 !important; } .lanac-mobile-rail > button > span { margin-top: 2px !important; color: var(--color-text-secondary) !important; font-size: 12px !important; font-weight: 800 !important; } .lanac-mobile-rail .lanac-rail-fav-overlay { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-direction: row !important; gap: 5px !important; width: 46px !important; min-width: 46px !important; max-width: 46px !important; height: 34px !important; box-sizing: border-box !important; flex-shrink: 0 !important; margin-top: 0 !important; overflow: visible !important; color: var(--on-accent) !important; font-size: 14px !important; font-weight: 900 !important; background: color-mix(in srgb, var(--info-fill) 82%, transparent) !important; border-color: color-mix(in srgb, var(--color-surface) 72%, transparent) !important; box-shadow: 0 8px 20px color-mix(in srgb, var(--color-info) 18%, transparent) !important; white-space: nowrap !important; } .lanac-mobile-rail .lanac-rail-fav-overlay span { display: inline-flex !important; width: auto !important; min-width: 0 !important; margin-top: 0 !important; overflow: visible !important; color: var(--on-accent) !important; font-size: inherit !important; font-weight: inherit !important; line-height: 1 !important; } .lanac-mobile-rail .lanac-rail-fav-overlay span:first-child { color: var(--on-accent) !important; font-size: 15px !important; font-weight: 900 !important; } .lanac-mobile-rail .lanac-rail-fav-overlay span:last-child { color: var(--on-accent) !important; font-size: 13px !important; font-weight: 900 !important; } .lanac-mobile-rail .lanac-rail-fav-overlay.active span:last-child { color: var(--on-accent) !important; } .lanac-mobile-rail .lanac-rail-view-overlay { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important; width: auto !important; min-width: 0 !important; margin-top: 0 !important; overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important; color: var(--color-info) !important; font-size: 11px !important; font-weight: 900 !important; line-height: 1 !important; background: color-mix(in srgb, var(--color-info-soft) 62%, transparent) !important; z-index: 13 !important; } .lanac-mobile-alerts { display: grid !important; gap: 8px !important; } .lanac-mobile-alerts button { width: 100% !important; min-height: 58px !important; display: grid !important; grid-template-columns: 34px minmax(0, 1fr) !important; grid-template-rows: auto auto !important; gap: 2px 10px !important; align-items: center !important; padding: 11px 12px !important; border: 1px solid var(--color-border) !important; border-radius: 14px !important; background: var(--color-surface) !important; text-align: left !important; box-shadow: 0 10px 24px color-mix(in srgb, var(--scrim) 6%, transparent) !important; } .lanac-mobile-alerts span { grid-row: 1 / span 2 !important; width: 34px !important; height: 34px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; background: var(--color-info-soft) !important; color: var(--color-info) !important; font-weight: 900 !important; } .lanac-mobile-alerts strong, .lanac-mobile-alerts em { min-width: 0 !important; display: block !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .lanac-mobile-alerts strong { color: var(--color-text-primary) !important; font-size: 13px !important; font-weight: 900 !important; } .lanac-mobile-alerts em { color: var(--color-text-secondary) !important; font-size: 11px !important; font-style: normal !important; } .lanac-top-suggestions { display: block !important; margin: 8px -10px -10px !important; border-top: 1px solid var(--color-border); background: var(--color-surface); } .lanac-top-suggestions-head { padding: 13px 16px 7px !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .09em !important; text-transform: uppercase !important; color: var(--ink-3) !important; background: var(--color-surface) !important; } .lanac-top-suggestion { width: 100% !important; min-height: 54px !important; padding: 12px 16px !important; border: none !important; border-bottom: 1px solid var(--color-border) !important; border-radius: 0 !important; background: var(--color-surface) !important; box-shadow: none !important; display: flex !important; align-items: center !important; gap: 13px !important; } .lanac-top-suggestion:active { background: var(--color-background) !important; } .lanac-top-suggestion > :first-child { display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } .lanac-top-suggestion > span:not([role]) { flex: 1 !important; min-width: 0 !important; } .lanac-top-suggestion > span:not([role]) > span:first-child { font-size: 15px !important; font-weight: 500 !important; color: var(--color-text-primary) !important; } .lanac-top-suggestion > span:not([role]) > span:last-child { display: none !important; } .lanac-top-suggestion > span[role="button"] { flex-shrink: 0 !important; width: 30px !important; height: 30px !important; font-size: 19px !important; color: var(--color-text-secondary) !important; } .lanac-top-suggestion::after { content: none !important; } .lanac-explore-page { width: 100% !important; min-height: calc(100dvh - 64px) !important; margin: 0 -12px !important; padding: 12px 14px calc(92px + env(safe-area-inset-bottom, 0px)) !important; background: var(--color-background) !important; overflow-x: hidden !important; } .lanac-explore-page, .lanac-explore-page * { box-sizing: border-box !important; } .lanac-explore-top { position: static !important; display: grid !important; grid-template-columns: 38px 1fr !important; gap: 9px !important; margin: 0 0 14px !important; padding: 0 0 12px !important; border-bottom: 1px solid var(--color-border) !important; background: transparent !important; align-items: center !important; } .lanac-explore-top h2 { margin: 0 !important; font-size: 22px !important; line-height: 1.1 !important; } .lanac-explore-top p { margin: 4px 0 0 !important; max-width: 280px !important; font-size: 13px !important; line-height: 1.3 !important; } .lanac-explore-bands { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; } .lanac-explore-bands button { display: grid !important; width: 100% !important; min-height: 76px !important; grid-template-columns: 44px minmax(0, 1fr) !important; grid-template-rows: auto auto !important; gap: 2px 11px !important; align-items: center !important; padding: 12px !important; border: 1px solid var(--color-border) !important; border-radius: 14px !important; background: var(--color-surface) !important; text-align: left !important; box-shadow: 0 10px 24px color-mix(in srgb, var(--scrim) 6%, transparent) !important; } .lanac-explore-bands span { grid-row: 1 / span 2 !important; width: 44px !important; height: 44px !important; border-radius: 13px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: var(--color-success-soft) !important; font-size: 20px !important; } .lanac-explore-bands strong, .lanac-explore-bands small { display: block !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; } .lanac-explore-bands strong { font-size: 15px !important; line-height: 1.2 !important; color: var(--color-text-primary) !important; } .lanac-explore-bands small { font-size: 12px !important; line-height: 1.25 !important; color: var(--color-text-secondary) !important; } .lanac-explore-suggestions { margin-top: 14px !important; border: 1px solid var(--color-border) !important; border-radius: 14px !important; background: var(--color-surface) !important; overflow: hidden !important; box-shadow: 0 12px 28px color-mix(in srgb, var(--scrim) 7%, transparent) !important; } .lanac-explore-suggestions button { display: block !important; width: 100% !important; min-height: 58px !important; padding: 12px 14px !important; border: none !important; border-bottom: 1px solid var(--color-border) !important; border-radius: 0 !important; background: var(--color-surface) !important; text-align: left !important; } .lanac-explore-suggestions strong, .lanac-explore-suggestions small { display: block !important; white-space: normal !important; } .lanac-card-fav-overlay { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-direction: row !important; gap: 5px !important; right: 12px !important; bottom: 12px !important; width: 46px !important; min-width: 46px !important; max-width: 46px !important; height: 32px !important; box-sizing: border-box !important; flex-shrink: 0 !important; padding: 0 10px !important; border-radius: 999px !important; background: color-mix(in srgb, var(--info-fill) 82%, transparent) !important; color: var(--on-accent) !important; box-shadow: 0 10px 26px color-mix(in srgb, var(--color-info) 16%, transparent) !important; z-index: 12 !important; } .lanac-card-fav-overlay span, .lanac-card-fav-overlay.active span, .lanac-rail-fav-overlay span, .lanac-rail-fav-overlay.active span { color: var(--on-accent) !important; } .lanac-card-media > .lanac-card-view-overlay { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; height: auto !important; overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important; color: var(--color-info) !important; font-size: 11px !important; font-weight: 900 !important; line-height: 1 !important; background: color-mix(in srgb, var(--color-info-soft) 62%, transparent) !important; } .lanac-card-price-row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 8px !important; margin-top: 5px !important; } .lanac-card-price { margin-top: 0 !important; } .lanac-card-mini-actions { display: inline-flex !important; gap: 6px !important; align-items: center !important; } .lanac-card-like-heart, .lanac-card-favorite-mini { display: inline-flex !important; min-width: 42px !important; height: 34px !important; align-items: center !important; justify-content: center !important; gap: 3px !important; border: 1px solid var(--color-border) !important; border-radius: 999px !important; background: var(--color-surface) !important; color: var(--color-text-secondary) !important; font-size: 20px !important; font-weight: 800 !important; line-height: 1 !important; } .lanac-card-favorite-mini { min-width: 34px !important; font-size: 18px !important; } .lanac-card-like-heart.active, .lanac-card-favorite-mini.active { border-color: var(--color-primary) !important; background: var(--color-primary-soft) !important; color: var(--color-primary) !important; } .lanac-card-like-heart span { font-size: 11px !important; font-weight: 900 !important; color: inherit !important; } .lanac-vinted-price-row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 12px !important; margin-top: 13px !important; } .lanac-vinted-price-row .lanac-vinted-price { margin-top: 0 !important; } .lanac-vinted-price-actions { display: inline-flex !important; align-items: center !important; gap: 7px !important; } .lanac-vinted-like, .lanac-vinted-favorite { display: inline-flex !important; min-width: 58px !important; height: 42px !important; align-items: center !important; justify-content: center !important; gap: 4px !important; border: 1px solid var(--color-border) !important; border-radius: 999px !important; background: var(--color-surface) !important; color: var(--color-text-primary) !important; font-size: 25px !important; box-shadow: 0 8px 22px color-mix(in srgb, var(--scrim) 8%, transparent) !important; } .lanac-vinted-favorite { min-width: 42px !important; font-size: 20px !important; } .lanac-vinted-like.active, .lanac-vinted-favorite.active { border-color: var(--color-primary) !important; background: var(--color-primary-soft) !important; color: var(--color-primary) !important; } .lanac-vinted-like span { font-size: 13px !important; font-weight: 900 !important; } .lanac-messenger--thread { background: var(--color-background) !important; } .lanac-messenger--thread .lanac-messenger-thread { min-height: 0 !important; } .lanac-messenger--thread .lanac-message-list { flex: 1 1 auto !important; min-height: 0 !important; padding: 13px 10px !important; overflow-y: auto !important; } .lanac-messenger--thread .lanac-message-list > div > div { max-width: 84% !important; } .lanac-messenger--thread .lanac-message-composer { flex-shrink: 0 !important; padding: 8px 10px calc(12px + env(safe-area-inset-bottom, 0px)) !important; border-top: 1px solid var(--color-border) !important; box-shadow: 0 -8px 24px color-mix(in srgb, var(--scrim) 8%, transparent) !important; background: var(--color-background) !important; } .lanac-messenger--thread .lanac-message-input-row { display: grid !important; grid-template-columns: 42px minmax(0, 1fr) 38px !important; gap: 7px !important; align-items: center !important; min-width: 0 !important; } .lanac-messenger--thread .lanac-message-input-row button { width: 42px !important; height: 40px !important; min-width: 42px !important; padding: 0 !important; border-radius: 10px !important; border: none !important; background: transparent !important; color: var(--color-info) !important; font-size: 18px !important; box-shadow: none !important; display: flex !important; align-items: center !important; justify-content: center !important; } .lanac-messenger--thread .lanac-message-input-row button:last-child { width: 38px !important; min-width: 38px !important; background: var(--color-neutral-soft) !important; color: var(--color-text-secondary) !important; font-size: 18px !important; border-radius: 6px !important; } .lanac-messenger--thread .lanac-message-input-row button:last-child:not(:disabled) { background: var(--color-info) !important; color: var(--on-accent) !important; } .lanac-messenger--thread .lanac-message-composer input[type="text"], .lanac-messenger--thread .lanac-message-composer input:not([type]) { min-width: 0 !important; height: 40px !important; padding: 0 12px !important; border: none !important; border-radius: 4px !important; background: var(--color-neutral-soft) !important; font-size: 16px !important; box-shadow: none !important; } .lanac-messenger--thread .lanac-message-composer button { flex-shrink: 0 !important; } } .lanac-first-run { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 18px; background: color-mix(in srgb, var(--scrim) 36%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .lanac-first-run__panel { position: relative; width: min(420px, 100%); border-radius: 18px; background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: 0 24px 70px color-mix(in srgb, var(--scrim) 22%, transparent); padding: 24px 22px 22px; text-align: left; } .lanac-first-run__close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border: none; border-radius: 50%; background: var(--color-background); color: var(--color-text-secondary); font-size: 20px; } .lanac-first-run__icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; background: linear-gradient(135deg,var(--color-primary),var(--color-primary)); color: var(--color-text-primary); font-size: 22px; font-weight: 900; } .lanac-first-run h2 { margin: 0 0 8px; color: var(--color-text-primary); font-size: 21px; line-height: 1.2; } .lanac-first-run p { margin: 0 0 18px; color: var(--color-text-secondary); font-size: 14px; line-height: 1.55; } .lanac-first-run__panel > button:last-child { width: 100%; min-height: 46px; border: none; border-radius: 12px; background: linear-gradient(135deg, var(--color-success), color-mix(in srgb, var(--color-success) 82%, black)); color: var(--on-accent); font-size: 15px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 16px color-mix(in srgb, var(--color-success) 28%, transparent); transition: transform .18s, box-shadow .18s; } .lanac-first-run__panel > button:last-child:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 24px color-mix(in srgb, var(--color-success) 36%, transparent); } .lanac-first-run__panel > button:last-child:disabled { background: var(--color-border); color: var(--color-text-secondary); cursor: not-allowed; box-shadow: none; } @media (max-width: 900px) { .lanac-first-run { align-items: flex-end; padding: 12px; } .lanac-first-run__panel { border-radius: 18px 18px 14px 14px; padding: 22px 20px calc(20px + env(safe-area-inset-bottom, 0px)); } } @media (max-width: 900px) { .lanac-detail-open .lanac-header { display: none !important; } .lanac-detail-open .lanac-page-wrap { padding-top: 0 !important; } .lanac-detail-open .lanac-market-layout--detail { margin-left: 0 !important; margin-right: 0 !important; overflow: visible !important; } .lanac-detail-open .lanac-market-layout--detail .lanac-market-main { width: 100% !important; max-width: none !important; overflow: visible !important; } .lanac-vinted-detail { width: 100vw !important; max-width: 100vw !important; min-height: 100dvh !important; margin: -16px calc(50% - 50vw) 0 !important; padding-bottom: calc(var(--lanac-mobile-nav-clearance) + 20px) !important; overflow-x: hidden !important; scrollbar-width: none !important; } .lanac-vinted-detail::-webkit-scrollbar { display: none !important; } .lanac-vinted-hero { width: 100vw !important; max-width: 100vw !important; margin: 0 !important; border-radius: 0 !important; } .lanac-vinted-back, .lanac-vinted-more { opacity: .92 !important; pointer-events: auto !important; transform: translateY(0); transition: opacity .18s ease, transform .18s ease !important; } .lanac-vinted-back.lanac-vinted-chrome--show, .lanac-vinted-more.lanac-vinted-chrome--show { opacity: 1 !important; pointer-events: auto !important; transform: translateY(0); } .lanac-vinted-swipe-zone { pointer-events: none !important; } .lanac-vinted-swipe-zone button { pointer-events: none !important; } .lanac-filter-page { inset: 0 !important; margin: 0 !important; padding: 0 !important; } .lanac-filter-submit { bottom: calc(var(--lanac-mobile-nav-clearance) + 8px) !important; } .lanac-publish-screen--mobile .lanac-publish-submit, .lanac-publish-screen--mobile .lanac-publish-panel > button:last-child { position: static !important; bottom: auto !important; margin-top: 18px !important; margin-bottom: 0 !important; box-shadow: none !important; } } /* ── Messages & Inbox : header compact + messenger sizing corrigé ──────── */ @media (max-width: 900px) { .lanac-view-messages .lanac-header, .lanac-view-inbox .lanac-header { height: calc(38px + var(--lanac-sat, 0px)) !important; min-height: calc(38px + var(--lanac-sat, 0px)) !important; padding: var(--lanac-sat, 0px) 10px 0 !important; /* edge-to-edge : header compact sous l'encoche (additif) */ } .lanac-view-messages .lanac-header .lanac-logo-copy, .lanac-view-inbox .lanac-header .lanac-logo-copy, .lanac-view-messages .lanac-header .lanac-hdr-actions, .lanac-view-inbox .lanac-header .lanac-hdr-actions { display: none !important; } /* Messenger list : hauteur = 100dvh - header - bottom nav */ .lanac-view-messages .lanac-messenger { height: calc(100dvh - 38px - var(--lanac-sat, 0px) - var(--lanac-mobile-nav-clearance)) !important; } /* Messenger list en mode inbox : hauteur = 100dvh - header - tabs - bottom nav */ .lanac-view-inbox .lanac-messenger { height: calc(100dvh - 38px - 44px - var(--lanac-sat, 0px) - var(--lanac-mobile-nav-clearance)) !important; } .lanac-view-inbox .lanac-notification-list { min-height: calc(100dvh - 38px - 44px - var(--lanac-sat, 0px) - var(--lanac-mobile-nav-clearance)) !important; padding-bottom: var(--lanac-mobile-nav-clearance) !important; } } @media (max-width: 900px) { :root { --lanac-mobile-nav-height: 56px; --lanac-mobile-nav-gap: max(12px, env(safe-area-inset-bottom, 0px)); --lanac-mobile-nav-clearance: calc(var(--lanac-mobile-nav-height) + var(--lanac-mobile-nav-gap) + 18px); } .mbn-nav { display: flex; position: fixed; left: 16px; right: 16px; bottom: max(12px, env(safe-area-inset-bottom, 0px)); width: auto; height: var(--lanac-mobile-nav-height); z-index: 300; align-items: center; gap: 3px; padding: 5px 7px; border: 1px solid color-mix(in srgb, var(--color-surface) 74%, transparent); border-radius: 24px; background: color-mix(in srgb, var(--color-surface) 78%, transparent); box-shadow: 0 14px 34px color-mix(in srgb, var(--scrim) 13%, transparent), inset 0 1px 0 color-mix(in srgb, var(--color-surface) 86%, transparent); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); overflow: visible; box-sizing: border-box; } .mbn-tab, .mbn-sell { height: 46px; justify-content: center; gap: 2px; padding: 0; border-radius: 17px; } .mbn-tab--active { color: var(--color-success); /* fond fourni par la pastille glissante .mbn-slider ci-dessous */ } .mbn-tab--active::after { display: none; } /* Pastille active GLISSANTE — une seule, se déplace vers l'onglet actif (taille/position posées en JS). */ .mbn-slider { position: absolute; left: 0; top: 0; border-radius: 17px; background: color-mix(in srgb, var(--color-success) 12%, transparent); z-index: 0; pointer-events: none; opacity: 0; transition: transform .38s cubic-bezier(.34, 1.28, .38, 1), width .38s cubic-bezier(.34, 1.28, .38, 1), height .3s ease, opacity .2s ease; } .mbn-nav > .mbn-tab, .mbn-nav > .mbn-sell { position: relative; z-index: 1; } .mbn-tab__icon { width: 22px; height: 22px; transition: transform .3s cubic-bezier(.34, 1.5, .5, 1); /* spring au passage actif */ } .mbn-tab--active .mbn-tab__icon { transform: scale(1.12) translateY(-1px); } @media (prefers-reduced-motion: reduce) { .mbn-slider { transition: opacity .2s ease; } .mbn-tab__icon { transition: none; } } .mbn-icon { width: 21px; height: 21px; stroke-width: 1.95; } .mbn-tab__label, .mbn-sell__label { font-size: 9px; font-weight: 700; letter-spacing: 0; } .mbn-badge { top: 2px; right: calc(50% - 19px); min-width: 15px; height: 15px; line-height: 15px; font-size: 8px; border-width: 1px; } .mbn-sell { flex: .92 1 0; } .mbn-sell__bubble { width: 44px; height: 44px; transform: translateY(-9px); background: linear-gradient(145deg,var(--color-primary) 0%,var(--color-primary) 58%,var(--color-primary) 100%); box-shadow: 0 10px 22px color-mix(in srgb, var(--color-primary) 30%, transparent), 0 3px 9px color-mix(in srgb, var(--scrim) 12%, transparent), inset 0 1px 1px color-mix(in srgb, var(--color-surface) 45%, transparent); } .mbn-sell__icon { width: 19px; height: 19px; stroke-width: 2.4; } .mbn-sell__label { margin-top: -8px; color: var(--color-text-secondary); } } @media (max-width: 900px) { .lanac-card-media > .lanac-card-view-overlay, .lanac-mobile-rail .lanac-rail-view-overlay { display: none !important; } .lanac-card-fav-overlay.active span:first-child, .lanac-rail-fav-overlay.active span:first-child { color: var(--color-error) !important; } } /* ══════════════════════════════════════════════════════════════════════════ PROFIL PREMIUM — landing mobile (18-profile-page.jsx). Sur tokens de l'app. Idée directrice : le profil = la confiance. Anneau de confiance, réputation, bento de stats, passeport de vérifications, menu regroupé à icônes-traits. Rendu UNIQUEMENT dans la landing mobile (isMobile && !mobileOpen) → aucun impact desktop. Toutes les couleurs dérivent des tokens (theme-guard vert). ══════════════════════════════════════════════════════════════════════════ */ .lanac-pp { display: block; } .lanac-pp-hero { position: relative; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 22px; padding: 22px 18px 18px; margin-bottom: 12px; box-shadow: 0 1px 0 color-mix(in srgb, var(--scrim) 4%, transparent), 0 10px 24px -18px color-mix(in srgb, var(--scrim) 22%, transparent); display: flex; flex-direction: column; align-items: center; text-align: center; } .lanac-pp-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 88px; pointer-events: none; background: radial-gradient(80% 120% at 20% 0%, color-mix(in srgb, var(--color-primary) 16%, transparent), transparent 70%), radial-gradient(80% 120% at 90% 0%, color-mix(in srgb, var(--color-success) 12%, transparent), transparent 70%); } .lanac-pp-ringwrap { position: relative; width: 104px; height: 104px; margin-bottom: 11px; } .lanac-pp-ring { position: absolute; inset: 0; transform: rotate(-90deg); } .lanac-pp-ring circle { fill: none; stroke-width: 6; stroke-linecap: round; } .lanac-pp-ring .trk { stroke: color-mix(in srgb, var(--color-border) 72%, var(--color-surface)); } .lanac-pp-ring .val { stroke: url(#lanacPpRingGrad); stroke-dasharray: 295.31; animation: lanac-pp-ring 1.3s cubic-bezier(.22,1,.36,1); } @keyframes lanac-pp-ring { from { stroke-dashoffset: 295.31; } } .lanac-pp-avatar-hole { position: absolute; inset: 12px; border-radius: 50%; overflow: hidden; box-shadow: inset 0 0 0 3px var(--color-surface); cursor: pointer; } .lanac-pp-verif { position: absolute; right: 2px; bottom: 2px; width: 29px; height: 29px; border-radius: 50%; background: var(--color-success); border: 3px solid var(--color-surface); display: flex; align-items: center; justify-content: center; color: var(--on-accent); } .lanac-pp-scorebadge { position: absolute; top: 15px; right: 15px; font-size: 10px; font-weight: 800; color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface)); border: 1px solid color-mix(in srgb, var(--color-primary) 30%, var(--color-border)); padding: 4px 9px; border-radius: 999px; letter-spacing: .02em; } .lanac-pp-scorebadge b { font-weight: 900; font-variant-numeric: tabular-nums; } .lanac-pp-name { font-family: var(--font-display); font-size: 25px; font-weight: 600; line-height: 1.05; margin: 2px 0 4px; color: var(--color-text-primary); text-wrap: balance; } .lanac-pp-sub { font-size: 12.5px; color: var(--color-text-secondary); font-weight: 600; display: flex; flex-wrap: wrap; gap: 5px 8px; justify-content: center; align-items: center; } .lanac-pp-sub .pp-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--color-text-secondary); opacity: .5; } .lanac-pp-sub svg { opacity: .7; vertical-align: -2px; margin-right: 2px; } .lanac-pp-rating { margin-top: 14px; width: 100%; display: flex; align-items: center; gap: 13px; padding: 12px 14px; border-radius: 15px; background: var(--color-background); border: 1px solid var(--color-border); } .lanac-pp-rating .pp-big { font-family: var(--font-display); font-size: 27px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; color: var(--color-text-primary); } .lanac-pp-stars { display: flex; gap: 1px; color: var(--color-primary); margin-bottom: 3px; justify-content: center; } .lanac-pp-rating .pp-cnt { font-size: 11px; color: var(--color-text-secondary); font-weight: 600; margin-top: 2px; } .lanac-pp-rating .pp-rlabel { flex: 1; text-align: left; font-size: 12px; color: var(--color-text-secondary); font-weight: 600; line-height: 1.5; } .lanac-pp-eyebrow { font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--color-text-secondary); font-weight: 800; margin: 18px 4px 9px; display: flex; align-items: center; justify-content: space-between; } .lanac-pp-eyebrow .pp-frac { color: var(--color-success); letter-spacing: .04em; } .lanac-pp-passport { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; } .lanac-pp-passport::-webkit-scrollbar { height: 0; } .lanac-pp-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 13px; font-size: 12px; font-weight: 700; background: var(--color-surface); border: 1px solid var(--color-border); white-space: nowrap; box-shadow: 0 1px 0 color-mix(in srgb, var(--scrim) 4%, transparent); } .lanac-pp-chip svg { flex-shrink: 0; } .lanac-pp-chip.ok { color: var(--color-success); } .lanac-pp-chip.gold { color: var(--color-primary); } .lanac-pp-chip.todo { color: var(--color-text-secondary); border-style: dashed; cursor: pointer; } .lanac-pp-bento { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } .lanac-pp-tile { position: relative; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; padding: 14px 14px 13px; box-shadow: 0 1px 0 color-mix(in srgb, var(--scrim) 4%, transparent); text-align: left; cursor: pointer; font: inherit; width: 100%; color: inherit; transition: transform .12s ease; } .lanac-pp-tile:active { transform: scale(.985); } .lanac-pp-tile:disabled { cursor: default; } .lanac-pp-tile:disabled:active { transform: none; } .lanac-pp-tile .pp-ic { position: absolute; top: 12px; right: 12px; opacity: .5; color: var(--color-text-secondary); } .lanac-pp-tile .pp-n { font-family: var(--font-display); font-size: 26px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; color: var(--color-text-primary); } .lanac-pp-tile .pp-lbl { font-size: 11px; color: var(--color-text-secondary); font-weight: 600; margin-top: 5px; } .lanac-pp-tile.accent { background: linear-gradient(150deg, color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)), var(--color-surface)); } .lanac-pp-tile.accent .pp-n { color: var(--color-primary); } .lanac-pp-actions { display: flex; gap: 9px; margin-top: 14px; } .lanac-pp-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 14px; border-radius: 14px; font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; border: 1px solid transparent; transition: transform .12s ease, filter .2s, background .2s; } .lanac-pp-btn:active { transform: scale(.975); } .lanac-pp-btn svg { flex-shrink: 0; } .lanac-pp-btn.premium { background: var(--btn-premium-bg); color: var(--btn-premium-fg); } .lanac-pp-btn.ghost { background: var(--color-surface); color: var(--color-text-primary); border-color: var(--color-border); } .lanac-pp-group { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 0 color-mix(in srgb, var(--scrim) 4%, transparent); } .lanac-pp-row { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; padding: 13px 15px; background: transparent; border: 0; border-top: 1px solid var(--color-border); color: var(--color-text-primary); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .14s; } .lanac-pp-row:first-child { border-top: 0; } .lanac-pp-row:active { background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface)); } .lanac-pp-ricon { width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--color-primary) 11%, var(--color-surface)); color: var(--color-primary); } .lanac-pp-row.g-green .lanac-pp-ricon { background: color-mix(in srgb, var(--color-success) 12%, var(--color-surface)); color: var(--color-success); } .lanac-pp-row.g-blue .lanac-pp-ricon { background: color-mix(in srgb, var(--color-info) 12%, var(--color-surface)); color: var(--color-info); } .lanac-pp-row .pp-txt { flex: 1; min-width: 0; } .lanac-pp-row .pp-txt small { display: block; font-size: 11px; font-weight: 500; color: var(--color-text-secondary); margin-top: 1px; } .lanac-pp-row .pp-badge { font-size: 10px; font-weight: 800; color: var(--on-accent); background: var(--color-primary); border-radius: 999px; padding: 2px 8px; font-variant-numeric: tabular-nums; } .lanac-pp-row .pp-chev { color: var(--color-text-secondary); opacity: .55; display: flex; } .lanac-pp-row.danger { color: var(--color-error); } .lanac-pp-row.danger .lanac-pp-ricon { background: var(--color-error-soft); color: var(--color-error); } @media (prefers-reduced-motion: reduce) { .lanac-pp-ring .val { animation: none; } .lanac-pp-btn, .lanac-pp-row, .lanac-pp-tile { transition: none; } } /* ══════════════════════════════════════════════════════════════════════════ MOBILE — Navigation immersive (AFFICHAGE UNIQUEMENT, aucun markup modifié) 2 classes distinctes posées par un effet de scroll : • body.lanac-dock-immersive → DOCK (transparent + compact) sur toutes les vues liste où le dock existe déjà (accueil, marché, recherche, favoris, profil). • body.lanac-home-immersive → HEADER progressif, ACCUEIL uniquement. Variables --hdr-* pilotées en rAF côté JS. Aucun dock créé. ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { body.lanac-home-immersive { --hdr-surface: 96%; --hdr-blur: 18px; --hdr-shadow: .10; --hdr-opacity: 1; --hdr-y: 0px; } /* Header : densité (fond/flou/ombre) + fondu/soulèvement liés au scroll — ACCUEIL */ body.lanac-home-immersive .lanac-header { background: color-mix(in srgb, var(--color-surface) var(--hdr-surface), transparent) !important; box-shadow: 0 8px 22px color-mix(in srgb, var(--scrim) calc(var(--hdr-shadow) * 100%), transparent) !important; backdrop-filter: saturate(180%) blur(var(--hdr-blur)) !important; -webkit-backdrop-filter: saturate(180%) blur(var(--hdr-blur)) !important; opacity: var(--hdr-opacity) !important; transform: translateY(var(--hdr-y)) !important; transition: opacity .14s linear, transform .14s linear, background .14s linear, box-shadow .14s linear, backdrop-filter .14s linear; will-change: opacity, transform; } /* Barre de recherche de l'accueil : même courbe, légèrement décalée */ body.lanac-home-immersive .lanac-market-filters { opacity: var(--hdr-opacity) !important; transform: translateY(calc(var(--hdr-y) * .8)) !important; transition: opacity .14s linear, transform .14s linear; will-change: opacity, transform; } /* Chrome totalement masqué (loin du haut) → on coupe les interactions fantômes */ body.lanac-home-immersive.lanac-chrome-hidden .lanac-header, body.lanac-home-immersive.lanac-chrome-hidden .lanac-market-filters { pointer-events: none; } /* ── DOCK : transparent + compact, sur TOUTES les vues où il s'affiche ── */ body.lanac-dock-immersive .mbn-nav { background: color-mix(in srgb, var(--color-surface) 34%, transparent); backdrop-filter: blur(26px) saturate(170%); -webkit-backdrop-filter: blur(26px) saturate(170%); transition: left .34s cubic-bezier(.2,.8,.2,1), right .34s cubic-bezier(.2,.8,.2,1), height .34s cubic-bezier(.2,.8,.2,1), padding .34s cubic-bezier(.2,.8,.2,1), border-radius .34s ease, background .34s ease, transform .34s cubic-bezier(.2,.8,.2,1); } /* Transitions des onglets dans les 2 sens (rétrécir ET réapparaître progressivement) */ body.lanac-dock-immersive .mbn-nav > .mbn-tab, body.lanac-dock-immersive .mbn-nav > .mbn-sell { transition: max-width .34s cubic-bezier(.2,.8,.2,1), flex .34s cubic-bezier(.2,.8,.2,1), height .34s cubic-bezier(.2,.8,.2,1), opacity .22s ease, padding .34s ease; } /* Loin du haut : dock compact + encore plus transparent */ body.lanac-dock-immersive.lanac-nav-compact .mbn-nav { left: 80px; right: 80px; height: 44px; padding: 4px 5px; border-radius: 999px; background: color-mix(in srgb, var(--color-surface) 28%, transparent); transform: translateY(4px); } body.lanac-dock-immersive.lanac-nav-compact .mbn-tab, body.lanac-dock-immersive.lanac-nav-compact .mbn-sell { height: 34px; transition: height .34s cubic-bezier(.2,.8,.2,1); } body.lanac-dock-immersive.lanac-nav-compact .mbn-tab__label, body.lanac-dock-immersive.lanac-nav-compact .mbn-sell__label { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .24s ease, opacity .22s ease; } body.lanac-dock-immersive.lanac-nav-compact .mbn-sell__bubble { width: 34px; height: 34px; transform: translateY(0); } /* Compact : ne garder que Accueil (1) · Déposer (3) · Messages (4). Masquer Rechercher (2) et Profil/Admin (>=5) — ciblage par position, l'ordre du nav etant : home, search, sell, inbox, profile, [admin]. */ body.lanac-dock-immersive.lanac-nav-compact .mbn-nav > :nth-child(2), body.lanac-dock-immersive.lanac-nav-compact .mbn-nav > :nth-child(n+5) { max-width: 0 !important; flex: 0 0 0 !important; padding: 0 !important; margin: 0 !important; opacity: 0; overflow: hidden; pointer-events: none; transition: max-width .34s cubic-bezier(.2,.8,.2,1), opacity .22s ease, flex .34s cubic-bezier(.2,.8,.2,1); } /* Dock RÉTRACTÉ (compact) : on masque la pastille glissante et on rétablit le fond d'origine sur l'onglet actif → l'animation de rétraction du dock reste EXACTEMENT comme avant. */ body.lanac-dock-immersive.lanac-nav-compact .mbn-slider { opacity: 0 !important; } body.lanac-dock-immersive.lanac-nav-compact .mbn-tab--active { background: color-mix(in srgb, var(--color-success) 10%, transparent); } @media (prefers-reduced-motion: reduce) { body.lanac-home-immersive .lanac-header, body.lanac-home-immersive .lanac-market-filters, body.lanac-dock-immersive .mbn-nav, body.lanac-dock-immersive.lanac-nav-compact .mbn-tab, body.lanac-dock-immersive.lanac-nav-compact .mbn-sell, body.lanac-dock-immersive.lanac-nav-compact .mbn-tab__label, body.lanac-dock-immersive.lanac-nav-compact .mbn-sell__label, body.lanac-dock-immersive.lanac-nav-compact .mbn-sell__bubble { transition: none !important; } } } /* ══════════════════════════════════════════════════════════════════════════ MOBILE — Transition douce au changement de vue (AFFICHAGE only). Opacité seule (aucun transform) → n'affecte NI le sticky NI le contenu. ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { /* Arrivée en haut : glissé + fondu (premium). Sticky non collé en haut → aucun saut. */ .lanac-page-wrap.lanac-view-anim { animation: lanacViewIn .34s cubic-bezier(.22,.61,.36,1); } @keyframes lanacViewIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Arrivée sur une position scrollée : fondu seul (aucun transform → sticky intact). */ .lanac-page-wrap.lanac-view-anim-soft { animation: lanacViewFade .26s ease; } @keyframes lanacViewFade { from { opacity: 0; } to { opacity: 1; } } } @media (max-width: 900px) and (prefers-reduced-motion: reduce) { .lanac-page-wrap.lanac-view-anim, .lanac-page-wrap.lanac-view-anim-soft { animation: none; } } /* ═══════════════════════════════════════════════════════════════════════ Premium glass — Messages & Notifications (mobile uniquement) 100% présentation : aucune couleur nouvelle (uniquement var(--color-*) + color-mix), aucun changement de structure/layout, aucun texte. ═══════════════════════════════════════════════════════════════════════ */ @keyframes lanacRowIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } } @keyframes lanacFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes lanacDotPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-info) 55%, transparent); } 70% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--color-info) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-info) 0%, transparent); } } @media (max-width: 900px) { /* ── En-têtes de page : voile glass translucide ─────────────────────── */ .lanac-messenger-list > div:first-child, .lanac-inbox-tabs { background: color-mix(in srgb, var(--color-surface) 82%, transparent) !important; -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent) !important; } /* ── Liste notifications : cartes glass transparentes (alignées au modèle des conversations) ──────────────────────────────────────────────── */ .lanac-notification-list { background: var(--color-background) !important; padding: 6px 0 !important; } .lanac-notification-row { /* La règle de base pose width:100% (liste full-bleed) ; avec les marges latérales de 12px de la carte, la ligne débordait de 12px à droite (horodatage collé au bord, arrondi droit clippé) sur toute largeur <900px. */ width: calc(100% - 24px) !important; margin: 8px 12px !important; border-radius: 16px !important; border-bottom: none !important; background: color-mix(in srgb, var(--color-surface) 68%, transparent) !important; -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); box-shadow: 0 2px 10px color-mix(in srgb, var(--scrim) 7%, transparent); transition: background .18s ease, transform .15s ease; animation: lanacRowIn .34s cubic-bezier(.22, 1, .36, 1) both; } .lanac-notification-row:active { transform: scale(.985); background: var(--color-success-soft) !important; } .lanac-notification-row.unread { background: color-mix(in srgb, var(--color-info) 12%, color-mix(in srgb, var(--color-surface) 58%, transparent)) !important; } /* Hiérarchie typo plus moderne (sans changer les tailles de base) */ .lanac-notification-row strong { font-weight: 800; letter-spacing: -.01em; } .lanac-notification-row small { opacity: .92; letter-spacing: .003em; } .lanac-notification-row em { font-size: 11px; font-weight: 700; letter-spacing: .02em; opacity: .8; } /* Point non-lu : halo pulsé discret */ .lanac-notification-row.unread > span { animation: lanacDotPulse 2.4s ease-out infinite; } /* Stagger d'entrée (les lignes notif sont enfants directs de la liste) */ .lanac-notification-row:nth-child(1) { animation-delay: 0s; } .lanac-notification-row:nth-child(2) { animation-delay: .04s; } .lanac-notification-row:nth-child(3) { animation-delay: .08s; } .lanac-notification-row:nth-child(4) { animation-delay: .12s; } .lanac-notification-row:nth-child(5) { animation-delay: .16s; } .lanac-notification-row:nth-child(n+6) { animation-delay: .2s; } /* ── Conversations : liste en cartes premium ───────────────────────── */ /* Fond de la liste en --color-background pour faire ressortir les cartes */ .lanac-messenger-list { background: var(--color-background) !important; } /* Chaque conversation devient une carte (le wrapper [data-swipe-row]) : marges + coins arrondis + ombre douce. overflow:hidden (inline) clippe la ligne ET le panneau d'action du swipe aux coins arrondis. */ [data-swipe-row] { margin: 8px 12px !important; border-radius: 16px !important; border-bottom: none !important; background: transparent !important; box-shadow: 0 2px 10px color-mix(in srgb, var(--scrim) 7%, transparent); animation: lanacFadeIn .3s ease both; } /* La ligne de premier plan = verre translucide (carte plus transparente) */ .lanac-convo-row { border-radius: 16px; background: color-mix(in srgb, var(--color-surface) 68%, transparent) !important; -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); transition: background .18s ease; } /* Non-lu : teinte verte translucide + barre d'accent à gauche (inset → 0 décalage de layout, ne touche pas le transform du swipe) */ .lanac-convo-row.unread { background: color-mix(in srgb, var(--color-success) 12%, color-mix(in srgb, var(--color-surface) 58%, transparent)) !important; box-shadow: inset 3px 0 0 0 var(--color-success); } .lanac-convo-row:active, .lanac-convo-row.unread:active { background: var(--color-success-soft) !important; } } /* Fallback navigateurs sans backdrop-filter : surfaces pleinement opaques (lisibilité garantie, pas de transparence sans flou). */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { @media (max-width: 900px) { .lanac-messenger-list > div:first-child, .lanac-inbox-tabs, .lanac-convo-row, .lanac-notification-row { background: var(--color-surface) !important; } .lanac-convo-row.unread { background: color-mix(in srgb, var(--color-success) 8%, var(--color-surface)) !important; } .lanac-notification-row.unread { background: color-mix(in srgb, var(--color-info) 8%, var(--color-surface)) !important; } } } /* Accessibilité : pas d'animation si l'utilisateur la refuse */ @media (max-width: 900px) and (prefers-reduced-motion: reduce) { .lanac-notification-row, .lanac-convo-row { animation: none !important; } .lanac-notification-row.unread > span { animation: none !important; } } /* ============================================================= */ /* RE-SKIN PREMIUM MOBILE — dock d'action + stepper compact */ /* Purement présentationnel. La classe .lnc-mdeal n'est posée */ /* QUE sur mobile (JS : isMobile && MDEAL_FLAG) -> aucun impact */ /* desktop. Couleurs = tokens existants (or/crème), inchangées. */ /* Kill-switch : localStorage "lanac:mobileDealUI" = "0". */ /* N'affecte aucune logique (handlers, pagination, R2, supabase). */ /* ============================================================= */ /* Dock : barre plate -> carte flottante arrondie premium */ .lanac-action-dock.lnc-mdeal { margin: 8px 12px 4px !important; border: 1px solid color-mix(in srgb, var(--color-text-primary) 8%, transparent) !important; border-radius: 18px !important; box-shadow: 0 12px 30px color-mix(in srgb, var(--scrim) 12%, transparent), 0 2px 6px color-mix(in srgb, var(--scrim) 5%, transparent) !important; } /* Boutons du dock : cibles tactiles plus généreuses + coins doux. Les couleurs/fonds restent ceux définis en inline (or/succès/info). */ .lanac-action-dock.lnc-mdeal button { border-radius: 12px !important; padding: 10px 12px !important; min-height: 44px; /* Audit UX mobile 2026-07-04 : cible tactile premium ≥44px (était ~36px). */ letter-spacing: .1px; transition: transform .12s ease, filter .15s ease; } .lanac-action-dock.lnc-mdeal button:active { transform: scale(.97); } /* Stepper compact (4 étapes) : carte flottante assortie au dock */ /* Barre de suivi (Contact › Réservation › Accord › Clôturé) : barre VERRE transparente, collée/alignée (remontée), moderne. Remplace la carte blanche flottante. */ .lanac-compact-step.lnc-mdeal { margin: 0 !important; border: none !important; border-bottom: 1px solid color-mix(in srgb, var(--color-text-primary) 6%, transparent) !important; border-radius: 0 !important; box-shadow: none !important; background: color-mix(in srgb, var(--color-surface) 55%, transparent) !important; -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%); padding: 9px 16px 10px !important; } .lanac-compact-step.lnc-mdeal:active { background: color-mix(in srgb, var(--color-surface) 70%, transparent) !important; } /* Phase 2 — bottom-sheet de la fiche transaction (mobile, flag lnc-mdeal). Réutilise le composant SpecialMessageCard tel quel ; purement présentationnel. z-index au-dessus de la bottom-nav (.mbn-nav = 300). */ .lnc-mdeal-backdrop { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end; justify-content: center; background: color-mix(in srgb, var(--scrim) 42%, transparent); backdrop-filter: blur(3px) saturate(120%); -webkit-backdrop-filter: blur(3px) saturate(120%); animation: lncMdealFade .2s ease; } .lnc-mdeal-sheet { position: relative; width: 100%; max-width: 560px; max-height: 88%; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--color-surface); border-top-left-radius: 24px; border-top-right-radius: 24px; box-shadow: 0 -18px 50px color-mix(in srgb, var(--scrim) 30%, transparent); padding: 10px 16px calc(env(safe-area-inset-bottom, 0px) + 22px); animation: lncMdealUp .34s cubic-bezier(.32, .72, 0, 1); } .lnc-mdeal-grip { width: 42px; height: 5px; border-radius: 3px; margin: 2px auto 14px; background: color-mix(in srgb, var(--color-text-primary) 18%, transparent); } .lnc-mdeal-close { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 12px; background: transparent; color: var(--color-text-secondary); font-size: 18px; line-height: 1; cursor: pointer; transition: background .15s ease; } .lnc-mdeal-close:active { background: color-mix(in srgb, var(--color-text-primary) 8%, transparent); } .lnc-mdeal-sheet-body { padding-top: 2px; } /* Audit UX mobile 2026-07-04 : cibles tactiles premium (≥44px) pour les ACTIONS de la feuille transactionnelle sur mobile (bottom-sheet). Mesuré : les boutons d'action (Confirmer achat, Demander prolongation, Annulation vendeur, chips de durée…) tombaient à 32px — sous le standard tactile 44px. N'affecte QUE le bottom-sheet mobile : le web garde ses boutons compacts (souris), le dock et la croix sont traités à part, la home/bottom-nav ne sont pas touchées. */ @media (max-width: 768px) { .lnc-mdeal-sheet-body button { min-height: 44px; transition: transform .12s ease, filter .15s ease; } .lnc-mdeal-sheet-body button:active { transform: scale(.98); } /* Audit UX mobile 2026-07-05 (M2) : mêmes cartes rendues INLINE dans le fil (hors feuille) — boutons de décision ≥44px là aussi (dont actions irréversibles). Mobile uniquement. */ .lnc-spcard button { min-height: 44px; } /* Audit UX mobile 2026-07-05 (C4) : favori du hero fiche — visuel 32px conservé, zone tactile étendue à ~44px. */ .lanac-vinted-fav::after { content: ""; position: absolute; inset: -6px; border-radius: 999px; } /* FOCUS PREMIUM (2026-07-09, rev.2) — AUCUN halo/anneau (« case jaune »). La couleur signature LANAC est l'OR (--color-primary = --gold), donc tout anneau basé dessus vire au jaune. On supprime le halo partout ; les champs qui doivent signaler le focus le font par un simple changement de BORDURE (bleu --color-info), à la manière iOS/Stripe/Linear — jamais une boîte lumineuse. */ input:focus, select:focus, textarea:focus { box-shadow: none !important; outline: none; } /* NEUTRALISATION de l'autofill navigateur (Chrome/WebKit peint un FOND JAUNE sur les champs reconnus — e-mail, recherche, nom… — d'où « le truc jaune sur tous les inputs »). On force le fond/texte du thème. */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-text-fill-color: var(--color-text-primary) !important; -webkit-box-shadow: 0 0 0 1000px var(--color-surface) inset !important; box-shadow: 0 0 0 1000px var(--color-surface) inset !important; caret-color: var(--color-text-primary); transition: background-color 9999s ease-in-out 0s; } } @media (max-width: 768px) and (prefers-reduced-motion: reduce) { .lnc-mdeal-sheet-body button:active { transform: none; } } /* Capsule — frise d'historique de l'accord dans la feuille (présentationnel). */ .lnc-mdeal-tl-wrap { margin-bottom: 18px; } .lnc-mdeal-tl-h { font-size: var(--flow-eyebrow-size); font-weight: var(--flow-eyebrow-weight); letter-spacing: var(--flow-eyebrow-track); text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: 13px; } .lnc-mdeal-tl { position: relative; } .lnc-mdeal-tl-it { position: relative; padding: 0 0 16px 24px; } .lnc-mdeal-tl-it:last-child { padding-bottom: 0; } .lnc-mdeal-tl-it::before { content: ""; position: absolute; left: 5px; top: 15px; bottom: -1px; width: 2px; background: var(--color-border); } .lnc-mdeal-tl-it:last-child::before { display: none; } .lnc-mdeal-tl-dot { position: absolute; left: 0; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--flow-step-done); border: 2.5px solid var(--flow-step-done); box-sizing: border-box; } .lnc-mdeal-tl-it.cur .lnc-mdeal-tl-dot { background: var(--flow-accent); border-color: var(--flow-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--flow-accent) 20%, transparent); } .lnc-mdeal-tl-txt { font-family: var(--flow-font); font-size: var(--flow-title-size); font-weight: var(--flow-title-weight); color: var(--color-text-primary); line-height: 1.4; } .lnc-mdeal-tl-it.cur .lnc-mdeal-tl-txt { font-weight: 800; } .lnc-mdeal-tl-time { font-size: var(--flow-meta-size); color: var(--color-text-secondary); margin-top: 2px; } .lnc-mdeal-tl-wrap + * { display: block; border-top: 1px solid var(--color-border); padding-top: 16px; } .lnc-mdeal-az-h { font-size: var(--flow-eyebrow-size); font-weight: var(--flow-eyebrow-weight); letter-spacing: var(--flow-eyebrow-track); text-transform: uppercase; color: var(--flow-accent); margin-bottom: 12px; } /* Micro-animations premium (capsule). Toutes désactivées si prefers-reduced-motion. */ .lnc-mdeal-tl-it { animation: lncTlIn .34s cubic-bezier(.2,.8,.2,1) both; } .lnc-mdeal-tl-it:nth-child(1) { animation-delay: .03s; } .lnc-mdeal-tl-it:nth-child(2) { animation-delay: .07s; } .lnc-mdeal-tl-it:nth-child(3) { animation-delay: .11s; } .lnc-mdeal-tl-it:nth-child(4) { animation-delay: .15s; } .lnc-mdeal-tl-it:nth-child(5) { animation-delay: .19s; } .lnc-mdeal-tl-it:nth-child(6) { animation-delay: .23s; } .lnc-mdeal-tl-it:nth-child(n+7) { animation-delay: .27s; } .lnc-mdeal-az-h { animation: lncTlIn .34s cubic-bezier(.2,.8,.2,1) both; animation-delay: .2s; } .lnc-mdeal-tl-it.cur .lnc-mdeal-tl-dot { animation: lncDotHalo .55s ease-out both; animation-delay: .32s; } @keyframes lncTlIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } } @keyframes lncDotHalo { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--flow-accent) 42%, transparent); } 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--flow-accent) 20%, transparent); } } @keyframes lncMdealUp { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes lncMdealFade { from { opacity: 0; } to { opacity: 1; } } @keyframes lncMdealPop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } } /* Capsule WEB : la feuille de détail devient une modale centrée sur grand écran (pas un bottom-sheet). */ @media (min-width: 769px) { .lnc-mdeal-backdrop { align-items: center; } .lnc-mdeal-sheet { max-width: 480px; max-height: 86vh; border-radius: 20px; box-shadow: 0 24px 64px color-mix(in srgb, var(--scrim) 30%, transparent); padding: 16px 20px 22px; animation: lncMdealPop .26s cubic-bezier(.2, .8, .2, 1); } .lnc-mdeal-sheet .lnc-mdeal-grip { display: none; } .lnc-mdeal-event { max-width: 100%; } } @media (prefers-reduced-motion: reduce) { .lnc-mdeal-backdrop, .lnc-mdeal-sheet, .lnc-mdeal-tl-it, .lnc-mdeal-az-h, .lnc-mdeal-tl-it.cur .lnc-mdeal-tl-dot, .lnc-mdeal-cta { animation: none !important; } } /* Phase mobile premium — gros CTA bas « Répondre à l'offre » (ouvre la feuille). Sur mobile, le dock devient un simple conteneur transparent portant le CTA. */ .lanac-action-dock.lnc-mdeal-mob { margin: 0 !important; border: none !important; box-shadow: none !important; background: transparent !important; padding: 8px 14px 6px !important; } .lnc-mdeal-cta { width: 100%; padding: 16px; border: none; border-radius: 16px; background: var(--flow-accent); color: var(--flow-accent-fg); font-family: var(--flow-font); font-size: var(--flow-cta-size); font-weight: var(--flow-cta-weight); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 10px 24px color-mix(in srgb, var(--flow-accent) 38%, transparent), 0 2px 6px color-mix(in srgb, var(--flow-accent) 22%, transparent); transition: transform .12s ease, filter .15s ease, box-shadow .2s ease; animation: lncCtaIn .34s cubic-bezier(.2,.8,.2,1); } .lnc-mdeal-cta:active { transform: scale(.985); filter: brightness(.98); } @keyframes lncCtaIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } } .lnc-mdeal-wait { display: flex; align-items: center; gap: 8px; padding: 11px 13px; border-radius: 14px; background: var(--color-surface); border: 1px solid var(--color-border); font-size: var(--flow-label-size); font-weight: var(--flow-label-weight); color: var(--color-text-secondary); cursor: pointer; } /* Phase mobile premium — lignes repliées des cartes dans le fil (cliquer = ouvre la feuille) */ .lnc-mdeal-recap { display: flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 14px; background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: 0 1px 2px color-mix(in srgb, var(--scrim) 5%, transparent); font-size: var(--flow-recap-size); cursor: pointer; max-width: 100%; } .lnc-mdeal-recap:active { background: var(--color-background); } .lnc-mdeal-recap .d { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .lnc-mdeal-recap .l { font-weight: var(--flow-strong-weight); color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lnc-mdeal-recap .v { color: var(--color-text-secondary); font-weight: var(--flow-label-weight); white-space: nowrap; } .lnc-mdeal-recap .c { margin-left: auto; color: var(--action); font-weight: var(--flow-strong-weight); white-space: nowrap; flex-shrink: 0; } /* Message « système » dans le fil (jalon d'accord) — option A : carte blanche centrée, lisible. Toutes les couleurs viennent des tokens --syscard-* (:root) → restyle = 1 endroit. */ .lnc-mdeal-event { display: flex; gap: 10px; align-self: center; max-width: 92%; margin: 6px auto; padding: 11px 13px; background: var(--syscard-bg); border: 1px solid var(--syscard-border); border-radius: var(--syscard-radius); box-shadow: 0 1px 2px var(--syscard-shadow); cursor: pointer; animation: lncTlIn .3s cubic-bezier(.2,.8,.2,1) both; } .lnc-mdeal-event:active { background: var(--color-background); } .lnc-mdeal-event-ic { width: 8px; min-width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; } .lnc-mdeal-event-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .lnc-mdeal-event-tx { font-family: var(--flow-font); font-size: var(--flow-body-size); line-height: var(--flow-body-leading); color: var(--syscard-text); font-weight: var(--flow-body-weight); } .lnc-mdeal-event-go { font-size: var(--flow-label-size); font-weight: var(--flow-label-weight); color: var(--syscard-link); } @media (prefers-reduced-motion: reduce) { .lnc-mdeal-event { animation: none !important; } } /* ════════════════════════════════════════════════════════════════════════════ AppSheet — surcouche popup unifiée (lot 1 : partage + signalement). Bottom-sheet premium sur mobile, modale centrée sur grand écran (≥769px, même bascule que .lnc-mdeal). Tous les réglages passent par les tokens --lnc-sheet-* ci-dessous : retouche graphique = un seul endroit. Bloc ajouté en FIN de fichier — aucune règle existante modifiée ni déplacée. ════════════════════════════════════════════════════════════════════════════ */ :root { /* AppSheet = fenêtre CENTRÉE OPAQUE (Option A). Fond assombri à 48 % SANS flou (net + rapide, zéro coût GPU). Carte pleine surface. Tokens ci-dessous → retouche en un seul endroit. */ --lnc-sheet-backdrop-bg: color-mix(in srgb, var(--scrim) 48%, transparent); --lnc-sheet-bg: var(--color-surface); /* opaque */ --lnc-sheet-radius: 22px; /* coins pleins (tous côtés) */ --lnc-sheet-max-h: 85%; /* ne couvre pas toute la page */ --lnc-sheet-shadow: 0 24px 64px color-mix(in srgb, var(--scrim) 32%, transparent); --lnc-sheet-dur-in: .26s; --lnc-sheet-dur-out: .18s; --lnc-sheet-pad-x: 18px; } /* Verrou de scroll posé/retiré par le composant AppSheet (compteur JS). Posé sur ET : le scroller du document est , et son overflow-x:clip (règle mobile plus haut) bloque la propagation du hidden depuis — verrouiller le body seul ne suffit donc pas. !important requis : la règle mobile ≤900px « overflow-y: visible !important » (anti-scroll horizontal) l'emporterait sinon. Spécificité supérieure → ce verrou gagne, et uniquement tant que la classe est posée (sheet ouvert). */ html.lnc-sheet-lock, body.lnc-sheet-lock { overflow: hidden !important; } .lnc-sheet-backdrop { position: fixed; inset: 0; display: flex; align-items: center; /* CENTRÉ (fenêtre premium centrée, plus de bottom-sheet) */ justify-content: center; padding: calc(env(safe-area-inset-top, 0px) + 20px) 16px calc(env(safe-area-inset-bottom, 0px) + 20px); background: var(--lnc-sheet-backdrop-bg); animation: lncSheetFadeIn var(--lnc-sheet-dur-out) ease; } .lnc-sheet { position: relative; width: 100%; max-width: 460px; max-height: var(--lnc-sheet-max-h); display: flex; flex-direction: column; box-sizing: border-box; background: var(--lnc-sheet-bg); /* opaque (Option A) — net + rapide, aucun backdrop-filter */ border: 1px solid var(--color-border); border-radius: var(--lnc-sheet-radius); /* coins pleins */ box-shadow: var(--lnc-sheet-shadow); padding: 10px 0 14px; outline: none; animation: lncSheetPop var(--lnc-sheet-dur-in) cubic-bezier(.2, .9, .3, 1.05); } .lnc-sheet-grip { display: none; } /* fenêtre centrée : pas de poignée de bottom-sheet */ .lnc-sheet-close { position: absolute; top: 6px; right: 6px; width: 44px; /* cible tactile ≥44px (HIG) — glyphe visuel plus petit */ height: 44px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: transparent; color: var(--color-text-secondary); font-size: 17px; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .12s ease, background .12s ease; } .lnc-sheet-close:active { transform: scale(.9); background: var(--color-background); } .lnc-sheet-title { padding: 2px 52px 12px var(--lnc-sheet-pad-x); font-size: 16px; font-weight: 900; color: var(--color-text-primary); flex-shrink: 0; } .lnc-sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* État pressé premium — scopé au contenu du sheet uniquement. */ .lnc-sheet-body button { transition: transform .12s ease; } .lnc-sheet-body button:active { transform: scale(.97); } /* Fermeture animée (classes posées par AppSheet, fill forwards jusqu'au démontage). */ .lnc-sheet-backdrop--closing { animation: lncSheetFadeOut var(--lnc-sheet-dur-out) ease forwards; } .lnc-sheet-backdrop--closing .lnc-sheet { animation: lncSheetPopOut var(--lnc-sheet-dur-out) ease forwards; } @keyframes lncSheetFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes lncSheetFadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes lncSheetPop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } } @keyframes lncSheetPopOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px) scale(.98); } } /* Centré + opaque sur TOUS les écrans → plus de bloc desktop séparé (comportement unifié). */ @media (prefers-reduced-motion: reduce) { .lnc-sheet-backdrop, .lnc-sheet, .lnc-sheet-backdrop--closing, .lnc-sheet-backdrop--closing .lnc-sheet { animation: none !important; } .lnc-sheet-close, .lnc-sheet-body button { transition: none; } } /* ════════════════════════════════════════════════════════════════════════════ LncDialog — confirmation / alerte globale (lot 2). Remplace window.confirm / window.alert natifs. Alerte centrée sur TOUS les écrans (pattern iOS/alert), backdrop flou, pop spring, ton default/danger/success. Tokens --lnc-cd-*. ════════════════════════════════════════════════════════════════════════════ */ :root { /* Dialogue de confirmation : centré + OPAQUE (harmonisé avec les sheets, Option A). Fond assombri 48 % SANS flou → net + rapide (zéro coût GPU). */ --lnc-cd-backdrop-bg: color-mix(in srgb, var(--scrim) 48%, transparent); --lnc-cd-radius: 20px; --lnc-cd-shadow: 0 24px 70px color-mix(in srgb, var(--scrim) 32%, transparent); --lnc-cd-accent: var(--color-primary); /* ton default */ --lnc-cd-accent-danger: var(--color-error); --lnc-cd-accent-success: var(--color-success); } .lnc-cd-backdrop { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: calc(env(safe-area-inset-top, 0px) + 20px) 20px calc(env(safe-area-inset-bottom, 0px) + 20px); background: var(--lnc-cd-backdrop-bg); animation: lncCdFadeIn .18s ease; } .lnc-cd { --lnc-cd-tone: var(--lnc-cd-accent); width: 100%; max-width: 400px; max-height: 100%; display: flex; flex-direction: column; box-sizing: border-box; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--lnc-cd-radius); box-shadow: var(--lnc-cd-shadow); padding: 22px 22px 18px; outline: none; animation: lncCdPop .26s cubic-bezier(.2, .9, .3, 1.1); } .lnc-cd--danger { --lnc-cd-tone: var(--lnc-cd-accent-danger); } .lnc-cd--success { --lnc-cd-tone: var(--lnc-cd-accent-success); } .lnc-cd-ic { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; color: var(--lnc-cd-tone); background: color-mix(in srgb, var(--lnc-cd-tone) 12%, transparent); flex-shrink: 0; } .lnc-cd-title { font-size: 17px; font-weight: 900; color: var(--color-text-primary); line-height: 1.3; margin-bottom: 7px; } .lnc-cd-msg { font-size: 14px; font-weight: 600; color: var(--color-text-secondary); line-height: 1.55; margin-bottom: 20px; } .lnc-cd-msg--pre { white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--color-text-primary); background: var(--color-background); border: 1px solid var(--color-border); border-radius: 10px; padding: 12px; max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .lnc-cd-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .lnc-cd-actions--single { grid-template-columns: 1fr; } .lnc-cd-btn { min-height: 46px; padding: 12px 14px; border-radius: 12px; font-size: 14px; font-weight: 900; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .12s ease, filter .12s ease, background .12s ease; } .lnc-cd-btn:active { transform: scale(.97); } .lnc-cd-btn--cancel { border: 1px solid var(--color-border); background: var(--color-background); color: var(--color-text-secondary); } .lnc-cd-btn--cancel:hover { background: color-mix(in srgb, var(--color-text-primary) 6%, var(--color-background)); } .lnc-cd-btn--confirm { border: none; background: var(--lnc-cd-tone); color: var(--on-accent); } .lnc-cd-btn--confirm:hover { filter: brightness(1.06); } .lnc-cd-btn--confirm:focus-visible, .lnc-cd-btn--cancel:focus-visible { outline: 2px solid var(--lnc-cd-tone); outline-offset: 2px; } /* Fermeture animée */ .lnc-cd-backdrop--closing { animation: lncCdFadeOut .2s ease forwards; } .lnc-cd-backdrop--closing .lnc-cd { animation: lncCdPopOut .2s ease forwards; } @keyframes lncCdFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes lncCdFadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes lncCdPop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } } @keyframes lncCdPopOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(6px) scale(.98); } } @media (prefers-reduced-motion: reduce) { .lnc-cd-backdrop, .lnc-cd, .lnc-cd-backdrop--closing, .lnc-cd-backdrop--closing .lnc-cd { animation: none !important; } .lnc-cd-btn { transition: none; } } /* Popups entièrement OPAQUES et centrés (Option A) — plus aucun effet verre. Sheets (.lnc-sheet) et dialogue de confirmation (.lnc-cd) partagent ce style : fond plein --color-surface, fond assombri sans flou → net, lisible, rapide. */ /* ════════════════════════════════════════════════════════════════════════════ LncToastHud — confirmation / feedback en HUD CENTRÉ (remplace le toast en coin). Carte flottante au centre, ✓ animé, se fond seule (~1,8 s). Ne BLOQUE jamais (pointer-events:none) et n'assombrit pas la page. Tons success/error/info. ════════════════════════════════════════════════════════════════════════════ */ .lnc-hud-wrap { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; pointer-events: none; /* ne capture aucun clic → jamais bloquant */ z-index: 9999; } .lnc-hud { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 300px; padding: 22px 26px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 20px; box-shadow: 0 20px 50px color-mix(in srgb, var(--scrim) 26%, transparent); text-align: center; animation: lncHudIn .3s cubic-bezier(.2, .9, .3, 1.15); } .lnc-hud--out { animation: lncHudOut .28s ease forwards; } .lnc-hud-ic { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .lnc-hud--success .lnc-hud-ic { background: color-mix(in srgb, var(--color-success) 14%, transparent); color: var(--color-success); } .lnc-hud--error .lnc-hud-ic { background: color-mix(in srgb, var(--color-error) 13%, transparent); color: var(--color-error); } .lnc-hud--info .lnc-hud-ic { background: var(--color-primary-soft); color: var(--color-primary); } .lnc-hud-msg { font-size: 14px; font-weight: 800; color: var(--color-text-primary); line-height: 1.4; } .lnc-hud-check { stroke-dasharray: 30; stroke-dashoffset: 30; animation: lncHudDraw .45s cubic-bezier(.6, 0, .3, 1) .1s forwards; } @keyframes lncHudIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } } @keyframes lncHudOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.96); } } @keyframes lncHudDraw { to { stroke-dashoffset: 0; } } /* Toast « Annuler » (suppression) — carte horizontale + bouton + barre qui s'écoule (5 s). */ .lnc-undo { flex-direction: column; align-items: stretch; gap: 10px; max-width: 340px; padding: 13px 15px 11px; } .lnc-undo-row { display: flex; align-items: center; gap: 11px; } .lnc-undo-ic { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: color-mix(in srgb, var(--color-error) 13%, transparent); color: var(--color-error); } .lnc-undo-msg { flex: 1; font-size: 14px; font-weight: 800; color: var(--color-text-primary); text-align: left; line-height: 1.3; } .lnc-undo-btn { flex-shrink: 0; min-height: 38px; padding: 8px 15px; border-radius: 10px; border: 1px solid var(--color-primary); background: transparent; color: var(--color-primary); font-size: 13px; font-weight: 900; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .12s ease, background .12s ease; } .lnc-undo-btn:active { transform: scale(.96); } .lnc-undo-btn:hover { background: var(--color-primary-soft); } .lnc-undo-timer { height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--color-text-primary) 10%, transparent); overflow: hidden; } .lnc-undo-fill { height: 100%; border-radius: 2px; background: var(--color-primary); transform-origin: left; animation: lncUndoDeplete 5s linear forwards; } @keyframes lncUndoDeplete { from { transform: scaleX(1); } to { transform: scaleX(0); } } @media (prefers-reduced-motion: reduce) { .lnc-hud, .lnc-hud--out { animation: none !important; } .lnc-hud-check { animation: none !important; stroke-dashoffset: 0; } .lnc-undo-fill { animation: none !important; } .lnc-undo-btn { transition: none; } } /* ════════════════════════════════════════════════════════════════════════════ LncMsgToast — bannière GLASS « message entrant » (style iOS), 12/07/2026. Apparaît en HAUT quand un message arrive et que l'utilisateur est AILLEURS dans l'app (jamais dans la messagerie). Tap = ouvre la conversation ; ✕ = ferme ; se fond seule (~4,5 s). Le wrapper ne bloque jamais (pointer-events:none), seule la carte capte les taps. Verre : flou + saturation + liseré lumineux. ════════════════════════════════════════════════════════════════════════════ */ .lnc-msgtoast-wrap { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: center; padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 0; pointer-events: none; z-index: 10040; /* au-dessus du header (docks épinglés < 10000) */ } .lnc-msgtoast { pointer-events: auto; display: flex; align-items: center; gap: 11px; width: 100%; max-width: 420px; padding: 11px 13px; border: none; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; border-radius: 19px; background: color-mix(in srgb, var(--color-surface) 68%, transparent); -webkit-backdrop-filter: blur(24px) saturate(185%); backdrop-filter: blur(24px) saturate(185%); box-shadow: 0 18px 44px color-mix(in srgb, var(--scrim) 26%, transparent), 0 2px 10px color-mix(in srgb, var(--scrim) 10%, transparent), inset 0 1px 0 color-mix(in srgb, var(--color-surface) 65%, transparent), 0 0 0 1px color-mix(in srgb, var(--color-border) 55%, transparent); animation: lncMsgToastIn .42s cubic-bezier(.22, 1.15, .32, 1); transition: transform .14s ease; } .lnc-msgtoast:active { transform: scale(.985); } .lnc-msgtoast--out { animation: lncMsgToastOut .3s ease forwards; } /* Contenu bump (nouveau message dans la même bulle) : micro-pulse, pas de re-slide */ .lnc-msgtoast--bump { animation: lncMsgToastBump .3s cubic-bezier(.3, 1.4, .4, 1); } .lnc-msgtoast-av { position: relative; flex-shrink: 0; } /* Anneau lumineux autour de l'avatar : le « waw » discret */ .lnc-msgtoast-av::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--color-success) 55%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--color-success) 30%, transparent); pointer-events: none; } .lnc-msgtoast-body { flex: 1; min-width: 0; } .lnc-msgtoast-top { display: flex; align-items: baseline; gap: 7px; margin-bottom: 1px; } .lnc-msgtoast-name { font-size: 13.5px; font-weight: 900; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lnc-msgtoast-ref { flex-shrink: 1; min-width: 0; font-size: 10.5px; font-weight: 700; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lnc-msgtoast-txt { font-size: 12.5px; color: var(--color-text-secondary); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } .lnc-msgtoast-count { flex-shrink: 0; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; color: var(--on-accent); background: linear-gradient(150deg, var(--color-success) 0%, color-mix(in srgb, var(--color-success) 72%, var(--scrim)) 100%); box-shadow: 0 3px 9px color-mix(in srgb, var(--color-success) 40%, transparent), inset 0 1px 0 color-mix(in srgb, var(--color-surface) 40%, transparent); } .lnc-msgtoast-x { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--color-text-primary) 8%, transparent); color: var(--color-text-secondary); cursor: pointer; -webkit-tap-highlight-color: transparent; } .lnc-msgtoast-x:active { background: color-mix(in srgb, var(--color-text-primary) 16%, transparent); } /* Repli sans backdrop-filter (vieux navigateurs) : surface pleine, jamais illisible */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .lnc-msgtoast { background: var(--color-surface); } } @keyframes lncMsgToastIn { from { opacity: 0; transform: translateY(-115%) scale(.96); } to { opacity: 1; transform: none; } } @keyframes lncMsgToastOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-115%) scale(.97); } } @keyframes lncMsgToastBump { 0% { transform: scale(1); } 45% { transform: scale(1.025); } 100% { transform: scale(1); } } /* ════════════════════════════════════════════════════════════════════════════ Badges GLASS premium (12/07/2026) — cloche + dock. AUCUN changement de géométrie ni de structure du dock : uniquement le rendu (dégradé profond, halo doux, liseré lumineux) + un « pop » à chaque changement de valeur (le span est re-monté via key={valeur} côté JSX). ════════════════════════════════════════════════════════════════════════════ */ .mbn-badge { background: linear-gradient(155deg, color-mix(in srgb, var(--color-error) 92%, var(--color-surface)) 0%, var(--color-error) 45%, color-mix(in srgb, var(--color-error) 74%, var(--scrim)) 100%); box-shadow: 0 3px 10px color-mix(in srgb, var(--color-error) 42%, transparent), inset 0 1px 0 color-mix(in srgb, var(--color-surface) 42%, transparent); animation: lncBadgePop .38s cubic-bezier(.25, 1.5, .4, 1); } .lnc-bellbadge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 900; color: var(--on-accent); background: linear-gradient(155deg, color-mix(in srgb, var(--color-error) 92%, var(--color-surface)) 0%, var(--color-error) 45%, color-mix(in srgb, var(--color-error) 74%, var(--scrim)) 100%); border: 2px solid color-mix(in srgb, var(--color-surface) 88%, transparent); box-shadow: 0 3px 10px color-mix(in srgb, var(--color-error) 42%, transparent), inset 0 1px 0 color-mix(in srgb, var(--color-surface) 42%, transparent); box-sizing: border-box; pointer-events: none; animation: lncBadgePop .38s cubic-bezier(.25, 1.5, .4, 1); } @keyframes lncBadgePop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .lnc-msgtoast, .lnc-msgtoast--out, .lnc-msgtoast--bump { animation: none !important; } .mbn-badge, .lnc-bellbadge { animation: none !important; } } /* ════════════════════════════════════════════════════════════════════════════ RESSENTI NATIF (#4) — supprime le délai de tap et le zoom double-tap sur les CONTRÔLES tappables. Le défilement (pan) ET le pinch-zoom restent autorisés (touch-action:manipulation ne les bloque pas) → aucune régression de scroll ni de zoom. Compatible avec les gestes double-tap JS (l'app en utilise déjà avec touch-action:manipulation sur les bulles de message). EXCLUS explicitement (remis au comportement d'origine « auto ») : • le DOCK (.mbn-nav et descendants) → intouchable (contrainte utilisateur) ; • la visionneuse média → zoom des photos/vidéos préservé. ════════════════════════════════════════════════════════════════════════════ */ button, a[href], [role="button"], label, input, select, textarea, .l-btn, .l-iconbtn { touch-action: manipulation; } .mbn-nav, .mbn-nav *, .lanac-media-viewer, .lanac-media-viewer * { touch-action: auto; } /* ════════════════════════════════════════════════════════════════════════════ RESSENTI NATIF (#3) — sélection de texte « native ». La COQUILLE interactive (boutons, libellés, icônes, onglets/chips — des