/* ============================================================================= * fiche.desktop.css — PRESENTATION BUREAU de la fiche parcelle / fiche bien. * ----------------------------------------------------------------------------- * Additif PUR CSS, charge APRES css/ui/fiche.maquette.scoped.css. * Gate STRICT : toutes les regles sont sous html.op-desktop -> le mobile est * pixel-identique par construction (aucune regle ne s'applique hors desktop). * Aucun markup touche (fiche.ui.js / fiche.maquette.transplant.js intacts). * * Principe : la fiche cesse d'etre un "telephone pose sur le bord". Elle REMPLIT * la largeur que le panneau lui donne (le 390px capé de la maquette est libéré * sur desktop) et, quand le panneau est genereux, le contenu de l'onglet de * travail passe en DEUX COLONNES bureau (Street View/photos | identite/actions) * via une container-query : cette CSS RESPOND a la largeur du panneau, elle ne * la FIXE JAMAIS (la largeur du panneau reste proprietaire de desktop-shell.css). * Zero couleur nouvelle (tokens canoniques reutilises), zero emoji. * ============================================================================= */ /* 1. FIN DU FAUX TELEPHONE — la fiche remplit le panneau ---------------------- */ /* La maquette cape .device a 390px centre (M26). Sur desktop on libere la largeur : la fiche occupe toute la colonne bureau que le panneau expose. Le cadre/notch sont deja neutralises dans le panneau par le shim M26 -> rien a defaire ici. */ html.op-desktop #feature-panel.op-maquette #op-maq-skin{justify-content:stretch;} html.op-desktop #feature-panel.op-maquette .device{ width:100% !important; max-width:none !important; margin:0 !important; } /* .screen devient le CONTENEUR de reference pour les container-queries internes (additif, sans effet visuel propre). */ html.op-desktop #feature-panel.op-maquette .screen{container-type:inline-size;} /* 2. ECHELLE TYPOGRAPHIQUE BUREAU — lecture a distance d'ecran ---------------- */ /* Le bandeau statut n'a plus de barre systeme telephone a degager : on recupere de la hauteur (economie verticale, ecran 828px) tout en grossissant la lecture. */ html.op-desktop #feature-panel.op-maquette .ctx{ padding-top:18px; padding-bottom:13px; font-size:15px; } html.op-desktop #feature-panel.op-maquette .ctx .c-ico{font-size:20px;} html.op-desktop #feature-panel.op-maquette .addr{padding-top:13px;} html.op-desktop #feature-panel.op-maquette .addr-num{font-size:22px;letter-spacing:-.5px;} html.op-desktop #feature-panel.op-maquette .addr-sub{font-size:13px;margin-top:4px;} html.op-desktop #feature-panel.op-maquette .tab{min-height:52px;font-size:14px;} html.op-desktop #feature-panel.op-maquette .body{padding:16px 18px;} /* Cartes internes : un peu plus d'air et une facade Street View plus genereuse. */ html.op-desktop #feature-panel.op-maquette .iline{min-height:56px;padding:14px 15px;} html.op-desktop #feature-panel.op-maquette .iline .il-k{font-size:11.5px;} html.op-desktop #feature-panel.op-maquette .iline .il-v{font-size:14.5px;} html.op-desktop #feature-panel.op-maquette .sv-thumb{min-height:200px;} html.op-desktop #feature-panel.op-maquette .sv-tile .sv-tk{font-size:14.5px;} /* Barre d'actions bureau : boutons/chips a l'echelle de l'ecran, largeur pleine. */ html.op-desktop #feature-panel.op-maquette .actionbar{padding:11px 14px calc(11px + env(safe-area-inset-bottom));} html.op-desktop #feature-panel.op-maquette .ab-btn{min-height:58px;font-size:15px;} html.op-desktop #feature-panel.op-maquette .ab-chip{min-height:54px;font-size:13.5px;} /* 3. COLONNES INTERNES BUREAU (onglet de travail Prospection) ----------------- */ /* Uniquement quand le panneau est genereux (>= 600px de contenu) : l'onglet Prospection passe en 2 colonnes -> Street View/annonce a gauche (la "vue"), identite/statut/actions a droite (le "travail"). En dessous de ce seuil, tout reste en colonne unique (fallback sur -> aucun risque sur le panneau 520px actuel). C'est une container-query : elle reagit a la largeur reelle du panneau, sans jamais l'imposer. */ /* [CORRECTIF B1 2026-08-28 — LOT D] La regle ci-dessous portait `display:grid` sur `.body[data-body="prospection"]` SANS l'etat d'onglet. Specificite (1,4,1) contre (1,3,0) pour la bascule de la maquette (`#feature-panel.op-maquette .body[data-active="1"]{display:block}` et `.body{display:none}`) -> le `display:grid` gagnait TOUJOURS et l'onglet Prospection restait affiche EN PERMANENCE sous op-desktop des que le panneau depasse 600px (soit la colonne 640 par defaut) : cliquer « Le bien » ou « Historique » empilait le nouvel onglet SOUS Prospection au lieu de le remplacer. Dette pre-existante depuis le 24-07, corrigee ici : l'ajout de [data-active="1"] porte la regle a (1,5,1) et la rend inerte des que l'attribut passe a "0" -> `.body{display:none}` reprend la main. */ @container (min-width: 600px){ html.op-desktop #feature-panel.op-maquette .body[data-body="prospection"][data-active="1"]{ display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); grid-auto-rows:min-content; gap:14px 16px; align-items:start; } /* colonne gauche = la "vue" : facade Street View puis encart annonce (rose) */ html.op-desktop #feature-panel.op-maquette .body[data-body="prospection"] .sv-tile{ grid-column:1; grid-row:1; margin-bottom:0; } html.op-desktop #feature-panel.op-maquette .body[data-body="prospection"] #encartZone{ grid-column:1; grid-row:2; } /* colonne droite = le "travail" : la liste d'infos (Occupation/Contact/Flyer/Relance) */ html.op-desktop #feature-panel.op-maquette .body[data-body="prospection"] .infolist{ grid-column:2; grid-row:1 / span 2; margin-bottom:0; } /* facade plus haute quand elle a une colonne pour elle */ html.op-desktop #feature-panel.op-maquette .body[data-body="prospection"] .sv-thumb{min-height:220px;} } /* Onglet "Le bien" : la grille d'attributs profite de la largeur (deja 3 col dans la maquette) -> on garde, on aere seulement. L'onglet Historique reste en pile (consultation) : aucune colonne imposee. [OBSOLETE au 2026-08-28] -> les sections 4 a 10 ci-dessous traitent enfin "Le bien" et "Historique". Les regles 1-3 ci-dessus sont CONSERVEES telles quelles (diff purement additif) ; quand une valeur y est reprise plus bas (.tab, .ab-btn, .ab-chip, .iline, .ctx, .addr-*, .body), c'est la regle la PLUS BASSE qui gagne (meme specificite, ordre du fichier) -> voir le chapitre modules/lotD_fiche.md, tableau des surcharges assumees. */ /* ============================================================================= * [FICHEPC 2026-08-28 — LOT D "Fiche densifiee PC"] cahier des charges PC pro. * ----------------------------------------------------------------------------- * Objet : la fiche cesse d'etre un "telephone deshabille". MEME DOM, MEME * logique, MEMES handlers : cette section ne fait que RE-PRESENTER. * * Gate : 100 % des regles commencent par `html.op-desktop` -> le mobile * (390x844) est pixel-identique par construction. Aucune regle nouvelle n'est * atteignable sans la classe op-desktop posee par js/ui/desktop-detect.js. * * Selecteurs : tous verifies presents dans le DOM reel de la fiche * - squelette maquette -> js/ui/fiche.maquette.transplant.js (SKIN_HTML) * - onglet "Le bien" -> js/ui/bien.multisource.js (renderBienMultiSource) * + repli js/fiche.ui.js (renderBien) * - onglet "Historique" -> js/fiche.ui.js (renderHisto) * Aucun selecteur invente. Aucun markup touche. * * Doctrine : pc_design_system.md §3 (tokens/typo/table dense), §3.4 (hover, * clavier, focus), §3.5 + §4.1 (zero vide encadre), §5 (interdits) ; * pc_specs/vague2_fiche_planning.md §2.2 (Fiche - densification). * Zero couleur nouvelle (tokens --op-* de la maquette), zero emoji, * zero librairie, transitions 140 ms (<= 200 ms). * ============================================================================= */ /* 4. TYPOGRAPHIE BUREAU + CHIFFRES ALIGNES ------------------------------------ */ /* 4.1 tabular-nums sur TOUTE la fiche : prix, surfaces, kWh, kgCO2, annees, dates, numeros de rue s'alignent en colonnes. Une seule regle, portee sur le panneau : elle atteint AUSSI les blocs rendus en styles INLINE par bien.multisource.js / fiche.ui.js (ces inline ne posent jamais font-variant-numeric -> aucun conflit, rien a surcharger). */ html.op-desktop #feature-panel.op-maquette{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; } /* 4.2 Titre de fiche = l'adresse (patron §3.1 : 16-17 px / 800). Descend de 22 px (regle 2 ci-dessus) a 17 px : on rend ~10 px de hauteur au contenu sans perdre une lettre. */ html.op-desktop #feature-panel.op-maquette .addr-num{ font-size:17px; font-weight:800; letter-spacing:-.3px; line-height:1.25; } html.op-desktop #feature-panel.op-maquette .addr-sub{ font-size:12.5px; font-weight:500; color:var(--op-ink-3); margin-top:3px; } /* 4.3 Corps 13 / secondaires 11.5 (#64748b = --op-ink-3, token canonique). */ html.op-desktop #feature-panel.op-maquette .iline .il-k{ font-size:11.5px; font-weight:700; color:var(--op-ink-3); } html.op-desktop #feature-panel.op-maquette .iline .il-v{font-size:13.5px;} html.op-desktop #feature-panel.op-maquette .iline .il-v .il-sub{ font-size:11.5px; font-weight:500; color:var(--op-ink-3); } /* en-tete de section "LE BIEN" (bien.multisource) : label bureau, pas un titre */ html.op-desktop #feature-panel.op-maquette .bien-head{margin:0 0 9px;} html.op-desktop #feature-panel.op-maquette .bien-head .bh-t{ font-size:11.5px; font-weight:800; letter-spacing:.5px; color:var(--op-ink-3); } /* titres de cartes de l'onglet Historique (.card__title vient de css/map.css : 14 px / 900 uppercase, pense petit ecran) */ html.op-desktop #feature-panel.op-maquette .card__title{ font-size:11.5px; font-weight:800; letter-spacing:.5px; color:var(--op-ink-3); } html.op-desktop #feature-panel.op-maquette .card__head{margin-bottom:8px;} /* 5. CHROME COMPACT — en-tete sticky au regime bureau ------------------------- */ /* .idcard est DEJA sticky top:0 dans la maquette (z-index 40) : on ne le re-declare pas, on le DEGRAISSE. Le bandeau statut n'a plus de barre systeme telephone a degager, la pilule de type et les onglets n'ont plus besoin de cibles tactiles 48+. Gain mesure attendu : ~210 px -> ~175 px avant la premiere donnee (le solde est l'IDENTITE du bien : adresse + type + statut, c'est du CONTENU, pas du chrome -> §4.2 lue au sens strict, cf. chapitre). */ html.op-desktop #feature-panel.op-maquette .ctx{ padding:12px 14px 11px; font-size:14px; } html.op-desktop #feature-panel.op-maquette .ctx .c-ico{font-size:18px;} html.op-desktop #feature-panel.op-maquette .ctx .c-close{width:28px;height:28px;font-size:16px;} html.op-desktop #feature-panel.op-maquette .addr{padding:10px 14px 8px;} html.op-desktop #feature-panel.op-maquette .addr-edit{ min-height:32px; padding:0 12px; font-size:12px; } html.op-desktop #feature-panel.op-maquette .ptype{min-height:28px;margin:0 14px 8px;} html.op-desktop #feature-panel.op-maquette .tabs{padding:0 14px;} html.op-desktop #feature-panel.op-maquette .tab{ min-height:40px; font-size:13.5px; font-weight:700; } html.op-desktop #feature-panel.op-maquette .body{padding:14px 16px;} /* 6. DENSITE — les cibles tactiles redeviennent des cibles souris ------------- */ /* 6.1 lignes d'information (Occupation / Contact / Flyer / Relance) */ html.op-desktop #feature-panel.op-maquette .iline{ min-height:44px; padding:9px 12px; } html.op-desktop #feature-panel.op-maquette .iline .il-courrier{ width:34px; height:34px; border-radius:9px; } /* 6.2 barre d'actions : boutons 38 / chips 34 (plancher compact du design system §3.6 = 34). Etait 58/54 (regle 2) = doigt, pas souris. */ html.op-desktop #feature-panel.op-maquette .actionbar{ padding:10px 14px calc(10px + env(safe-area-inset-bottom)); } html.op-desktop #feature-panel.op-maquette .ab-major{margin-bottom:8px;} html.op-desktop #feature-panel.op-maquette .ab-btn{ min-height:38px; font-size:14px; border-radius:11px; } html.op-desktop #feature-panel.op-maquette .ab-chip{ min-height:34px; font-size:12.5px; border-radius:10px; } /* 6.3 CONSEQUENCE OBLIGATOIRE : .screen reserve 170 px en bas pour degager l'actionbar mobile (~137 px). Barre bureau recalculee = 1 (bord) + 10 + 38 + 8 + 34 + 10 = 101 px -> 116 px de reserve (marge 15). Sans cette regle, la densification creerait 54 px de blanc en fin de scroll (= le "vide encadre" interdit §3.5). */ html.op-desktop #feature-panel.op-maquette .screen{ padding-bottom:116px; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:rgba(15,23,42,.18) transparent; } html.op-desktop #feature-panel.op-maquette .screen::-webkit-scrollbar{width:8px;} html.op-desktop #feature-panel.op-maquette .screen::-webkit-scrollbar-track{background:transparent;} html.op-desktop #feature-panel.op-maquette .screen::-webkit-scrollbar-thumb{ background:rgba(15,23,42,.18); border-radius:999px; } /* 7. SURVOL / FOCUS / CURSEURS — l'ADN du PC (§3.4) --------------------------- */ /* Constat 27-08 : 1 seul :hover dans les 1880 lignes de la maquette (.statut-dd-item). Tout ce qui se clique doit se signaler au survol. */ html.op-desktop #feature-panel.op-maquette .iline, html.op-desktop #feature-panel.op-maquette .bgi, html.op-desktop #feature-panel.op-maquette .tab, html.op-desktop #feature-panel.op-maquette .ab-btn, html.op-desktop #feature-panel.op-maquette .ab-chip, html.op-desktop #feature-panel.op-maquette .addr-edit, html.op-desktop #feature-panel.op-maquette .ptype, html.op-desktop #feature-panel.op-maquette .sv-tile, html.op-desktop #feature-panel.op-maquette .bien-head .bh-i, html.op-desktop #feature-panel.op-maquette .iline .il-courrier, html.op-desktop #feature-panel.op-maquette .opt, html.op-desktop #feature-panel.op-maquette .occu-log, html.op-desktop #feature-panel.op-maquette .occu-fc, html.op-desktop #feature-panel.op-maquette .ctx, html.op-desktop #feature-panel.op-maquette .ctx .c-close, html.op-desktop #feature-panel.op-maquette .lb-price .lb-ptab{ transition:background-color .14s ease, border-color .14s ease, box-shadow .14s ease, color .14s ease, filter .14s ease; } /* [CORRECTIF 2026-08-28] `.prov-row`/`.prov-pick` RETIRES de cette liste et de la section 7.8 : ces deux classes n'ont AUCUN markup dans le JS servi (verification sur map.html + js/*.js + js/ui/*.js : 0 occurrence). Elles ne vivent que dans fiche.maquette.scoped.css l. 844-853 = CSS morte. Une regle qui ne peut jamais s'appliquer n'a rien a faire dans ce fichier. */ /* 7.1 lignes cliquables : fond ardoise tres clair + bord marque (patron §3.2) */ html.op-desktop #feature-panel.op-maquette .infolist .iline:hover{ background:var(--op-surface-2); } /* la case Occupation (.occ-case) porte deja une couleur de statut pleine : on ne change pas sa couleur, on l'assombrit d'un cran. [CORRECTIF R8 2026-08-28] .985 -> .96 : a 1,5 % l'ecart etait SOUS le seuil de perception sur un fond colore (~1 valeur sur 255) = un hover qui n'existe pas. 4 % reste discret et se voit. */ html.op-desktop #feature-panel.op-maquette .iline.occ-case:hover{ filter:brightness(.96); } /* 7.2 tuiles d'identite "Le bien" */ html.op-desktop #feature-panel.op-maquette .bgi:hover{ border-color:#cbd5e1; background:var(--op-surface-2); box-shadow:0 1px 2px rgba(15,23,42,.06); } /* 7.3 onglets */ html.op-desktop #feature-panel.op-maquette .tab:hover{ color:var(--op-ink-2); background:var(--op-surface-2); } html.op-desktop #feature-panel.op-maquette .tab[data-active="1"]:hover{color:var(--op-ink);} /* 7.4 barre d'actions (boutons de couleur : on eclaire, on ne repeint pas) */ html.op-desktop #feature-panel.op-maquette .ab-btn:hover{filter:brightness(.96);} html.op-desktop #feature-panel.op-maquette .ab-chip:hover{ border-color:#cbd5e1; background:var(--op-surface-2); } /* 7.5 en-tete : bandeau statut, "Modifier", pilule de type, croix */ html.op-desktop #feature-panel.op-maquette .ctx:hover{filter:brightness(1.04);} html.op-desktop #feature-panel.op-maquette .ctx .c-close:hover{background:rgba(255,255,255,.32);} html.op-desktop #feature-panel.op-maquette .addr-edit:hover, html.op-desktop #feature-panel.op-maquette .ptype:hover{ border-color:#cbd5e1; background:var(--op-surface-2); } /* 7.6 facade Street View (tuile cliquable -> plein ecran) */ html.op-desktop #feature-panel.op-maquette .sv-tile:hover{ border-color:#cbd5e1; box-shadow:var(--op-elev-1); } /* 7.7 elements de l'onglet "Le bien" rendus par bien.multisource.js (ces elements portent des styles INLINE : on passe par filter / box-shadow qui ne sont jamais poses en inline -> aucune bagarre de specificite). */ html.op-desktop #feature-panel.op-maquette .bien-head .bh-i:hover{filter:brightness(.94);} /* (le `cursor:pointer` sur .lb-ptab a ete RETIRE le 2026-08-28 : le JS le pose deja en style inline -> regle morte.) */ html.op-desktop #feature-panel.op-maquette .lb-price .lb-ptab:hover{ filter:brightness(.97); box-shadow:inset 0 -2px 0 rgba(15,23,42,.18); } /* 7.8 feuilles (options d'occupation, pastilles de comptage des logements) */ /* [CORRECTIF FORME 2026-08-28] La regle generique `.opt:hover` (1 id) est INERTE sur la feuille Occupation : `#feature-panel.op-maquette #sheetOcc .opt.occ-opt{background:var(--op-surface)}` (l. 595 de la maquette) porte DEUX ids et gagne. On garde la regle generique (elle sert aux autres feuilles a .opt, ex. le choix d'appli de navigation) ET on ajoute la variante a 2 ids pour la feuille Occupation. */ html.op-desktop #feature-panel.op-maquette .opt:hover{background:var(--op-surface-2);} html.op-desktop #feature-panel.op-maquette #sheetOcc .opt.occ-opt:hover{ background:var(--op-surface-2); } html.op-desktop #feature-panel.op-maquette .iline .il-courrier:hover{filter:brightness(.96);} /* [CORRECTIF R8 2026-08-28] pastilles de comptage d'occupation (.occu-log, en tete de la liste des logements) et pastilles de filtre (.occu-fc) : ce sont de VRAIS