/* ═══════════════════════════════════════════════════════════════════════
fiche-glue.css — NOS adaptations de la fiche, tenues a l'ecart de ses
feuilles pour qu'elles restent remplaçables telles quelles a la prochaine
livraison. Rien ici ne redessine son travail : uniquement ce que
l'integration exige et qu'elle ne pouvait pas savoir.
═══════════════════════════════════════════════════════════════════════ */
/* ── LE CONTEXTE FLEX QUE LE SCOPING AVAIT EMPORTE ────────────────────
`.rec` porte `flex:1;min-width:0` : il attend donc un parent FLEX. Chez
Margot ce parent est le ``, dont la regle dit `display:flex`. En
scopant j'ai neutralise cette regle — a juste titre, elle aurait peint
tout le CRM — mais sans reporter la seule propriete de mise en page qui
comptait. Resultat : `.rec` sans contexte flex, `flex:1` inerte, et
`.rbody` prenant la largeur de son contenu au lieu de celle de la page.
La fiche debordait a droite et le rail sortait de l'ecran.
La lecon vaut pour les quatre fiches suivantes : quand on neutralise une
regle `body`, on verifie ce que les enfants attendaient d'elle. */
#bien-page-root > .fic{
display: flex;
min-width: 0;
/* la fiche occupe la hauteur utile ; sans cela `.rbody{flex:1;min-height:0}`
et le defilement interne des deux colonnes n'ont rien sur quoi s'appuyer */
height: calc(100vh - var(--fic-top, 106px));
}
#bien-page-root > .fic > .rec{ min-width: 0; max-width: 100%; }
/* ── PLUS DE DEFILEMENT HORIZONTAL ────────────────────────────────────
La page partait en largeur : le titre etait coupe a gauche et une bande
blanche apparaissait a droite. Dans une rangee flex, un enfant refuse de
passer sous la largeur de son contenu tant qu'on ne lui a pas dit qu'il
peut — c'est la valeur `auto` de `min-width`, et une description de
quarante lignes ou une grille d'indicateurs suffit a la faire deborder.
On l'autorise a se comprimer, et on coupe le debordement lateral a la
racine : la fiche defile VERTICALEMENT, jamais de cote. */
#bien-page-root > .fic{ overflow-x: hidden; }
#bien-page-root > .fic .rmain{ min-width: 0; max-width: 100%; overflow-x: hidden; }
#bien-page-root > .fic .rbody{ min-width: 0; }
/* le texte long se replie au lieu de pousser la colonne */
#bien-page-root > .fic .cv-desc,
#bien-page-root > .fic .df-ad-p{ overflow-wrap: anywhere; }
/* Sous 1000px sa feuille masque le rail : la fiche redevient une colonne,
et une hauteur figee n'a plus de sens (le contenu doit pouvoir couler). */
@media(max-width: 1000px){
#bien-page-root > .fic{ height: auto; min-height: 0; }
}
/* ── L'en-tete colle en haut quand on parcourt une fiche longue ───────
Sa maquette tient dans un ecran ; nos biens ont des descriptions de
quarante lignes et douze documents. Perdre l'adresse et les onglets au
defilement oblige a remonter pour savoir ou l'on est. */
#bien-page-root > .fic .rhead,
#bien-page-root > .fic .chips,
#bien-page-root > .fic .tabs{ flex-shrink: 0; }
/* ── LES INDICATEURS, TOUS DE LA MEME HAUTEUR ─────────────────────────
Sa feuille pose `align-items:start` sur la grille : chaque carte prend
alors la hauteur de son propre contenu, et celles qui ont une precision
dessous (« net 551 000 € », « Carrez 42,94 m² ») depassent leurs voisines.
Une rangee d'indicateurs se lit d'un coup d'oeil — des hauteurs inegales
cassent la ligne et donnent l'impression que certains comptent plus.
On les etire, et le contenu se cale en haut a l'interieur pour que les
valeurs restent alignees entre elles. */
#bien-page-root > .fic .kpis{ align-items: stretch; }
#bien-page-root > .fic .kpi{
height: 100%;
display: flex;
flex-direction: column;
}
/* la precision descend au pied de la carte : les gros chiffres restent
alignes d'une carte a l'autre, quelle que soit la presence d'un sous-titre */
#bien-page-root > .fic .kpi .s{ margin-top: auto; padding-top: 3px; }
/* ── LES EMPLACEMENTS PHOTO ───────────────────────────────────────────
Sa feuille dimensionne `image-slot` — le composant de sa maquette. En le
remplaçant par nos `![]()
` (son README §7 le demande), j'ai emporte avec
lui toutes ses regles de taille : les images arrivaient sans largeur ni
hauteur, et la planche restait vide alors que le compteur annonçait huit
photos. On rend a nos `![]()
` exactement ce qu'elle donnait aux siens. */
.fic .gal .fb-ph,
.fic .cgal .fb-ph{ width:100%; height:100%; display:block; object-fit:cover; }
/* [b2416] Photos plus hautes. Sa maquette tenait dans un ecran de
demonstration ; sur une planche de dix-neuf photos, 132px ne laissent pas
voir si une piece est meublee ni ou donne la fenetre — c'est pourtant ce
qu'on vient verifier. */
.fic .ga .fb-ph{
display:block; width:100%; height:186px; object-fit:cover;
border-radius:10px; overflow:hidden; border:1px solid var(--border);
flex-shrink:0;
}
/* La bande du haut suit : elle sert de reperage, une vignette trop basse ne
se distingue pas de sa voisine. */
/* [b2418] LA BANDE : j'avais pose une hauteur MINIMALE sans agrandir les
cellules — resultat, de l'espace vide sous des vignettes inchangees.
C'est la grille qui doit grandir : ses rangees sont fixes chez Margot. */
.fic .gal{ grid-template-rows: 152px 152px; gap: 10px; }
.fic .gal .cell{ height: 100%; }
.fic .gal .cell.big{ grid-row: span 2; }
/* ── LEGENDE EDITABLE SOUS CHAQUE PHOTO ───────────────────────────────
Elle se lit comme du texte et se modifie d'un clic — pas de champ qui
s'affiche en permanence : sur dix-neuf photos, dix-neuf bordures feraient
une grille de formulaire. */
.fic .ga figcaption{
margin-top: 7px;
font-size: 12.5px; color: var(--text-dim);
cursor: text; border-radius: 6px;
padding: 2px 4px; margin-left: -4px;
transition: background .12s;
}
.fic .ga figcaption:hover{ background: var(--s2); }
.fic .ga figcaption.fb-cap-empty{ color: var(--muted); font-style: italic; }
.fic .ga figcaption input{
width: 100%; border: 0; background: transparent;
font: inherit; color: var(--text); outline: none;
}
/* Les suggestions : les pieces qu'on nomme le plus souvent, proposees sans
s'imposer — l'agent peut ecrire ce qu'il veut. */
/* [b2419] `position:absolute` interpretait les coordonnees relativement au
DOCUMENT, alors que `getBoundingClientRect` les donne par rapport au
VIEWPORT : des qu'on avait defile — et sur une planche de dix-neuf photos
on defile toujours —, la liste s'affichait hors de l'ecran. En `fixed`, les
deux reperes coincident. */
.fic .fb-cap-sug{
position: fixed; z-index: var(--z-popover, 300);
background: var(--surface); border: 1px solid var(--border);
border-radius: 10px; box-shadow: var(--shadow-card);
padding: 5px; min-width: 168px; max-height: 232px; overflow-y: auto;
}
.fic .fb-cap-sug button{
display: block; width: 100%; text-align: left;
padding: 7px 10px; border: 0; border-radius: 7px;
background: transparent; color: var(--text);
font: inherit; font-size: 13px; cursor: pointer;
}
.fic .fb-cap-sug button:hover{ background: var(--s2); }
/* ── [b2592] SKELETONS DE TELEVERSEMENT DE PHOTOS ─────────────────────
Tuiles a chatoiement posees des le choix des fichiers, retirees quand la
planche se repeint avec les vraies photos. Meme motif de shimmer que le
skeleton prospection (v2066). */
.fic .fb-ph-skels{
display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px; margin: 12px 0;
}
.fic .fb-ph-skel{
aspect-ratio: 4 / 3; border-radius: 12px; position: relative; overflow: hidden;
background: color-mix(in srgb, var(--text) 7%, transparent);
}
.fic .fb-ph-skel::after{
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent 0%,
color-mix(in srgb, var(--text) 9%, transparent) 50%, transparent 100%);
background-size: 200% 100%; background-repeat: no-repeat;
animation: fb-ph-shim 1.4s ease-in-out infinite;
}
@keyframes fb-ph-shim{ 0%{ background-position:-100% 0 } 100%{ background-position:200% 0 } }
@media (prefers-reduced-motion: reduce){ .fic .fb-ph-skel::after{ animation: none } }
/* ── RAPPROCHEMENTS : LES CRITERES, EN DEUX COULEURS ──────────────────
Le CRM calcule deja pour chaque critere s'il correspond, s'en approche ou
non (`detail` de `scoreClient`). On les remet sous le nom, en vert quand
c'est bon et en jaune quand c'est approchant. Un critere qui ne correspond
pas n'est PAS affiche : une rangee de croix rouges ferait passer pour
mauvais un acquereur a 92. */
.fic .rp-crit{ display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.fic .rp-c{
font-size: 11px; font-weight: 600;
padding: 3px 8px; border-radius: 99px;
background: color-mix(in srgb, var(--green) 13%, transparent);
color: var(--green);
}
.fic .rp-c.rp-c-warm{
background: color-mix(in srgb, var(--tiede) 15%, transparent);
color: var(--tiede);
}
/* une image sans source ne doit pas laisser un cadre vide */
.fic .fb-ph:not([src]){ display:none; }
/* ── LA FICHE SORT DU FLUX ────────────────────────────────────────────
Huit builds a corriger un debordement lateral qui revenait a chaque fois
sous une autre forme : bande blanche a droite, titre coupe a gauche,
contenu tronque. J'ai tour a tour contraint la largeur, autorise la
compression, coupe le debordement — chaque correctif traitait un symptome
mesurable sans retirer la fiche du probleme.
Meme decision que pour la carte, qui a demande trois tentatives avant
qu'on l'admette : on cesse de negocier avec le flux. `position:fixed` avec
`right:0` et `bottom:0` — aucun conteneur parent ne peut plus la
contraindre ni la faire deborder, quels que soient les paddings, les
largeurs minimales ou les grilles qui l'entourent. Les bords haut et
gauche sont mesures a l'execution (voir `fiche-bien-v3.js`). */
#bien-page-root > .fic{
position: fixed;
right: 0;
bottom: 0;
height: auto;
z-index: 1;
/* [b2402] `width` DOIT rester auto. Un `width:100%` heritee de b2395
cohabitait ici avec `left:248px` (mesure) et `right:0` : en position
fixe, la largeur l'emporte sur `right`, et la fiche faisait toute la
largeur de la fenetre DECALEE de la barre laterale. Elle depassait donc
exactement de 248px a droite, et le rail de 352px sortait de l'ecran —
coupe en plein milieu de « DIAGNOSTIC ENERGIE ».
Avec `width:auto`, ce sont `left` et `right` qui definissent la largeur,
et la fiche s'arrete au bord. */
width: auto;
}
@media(max-width: 1000px){
#bien-page-root > .fic{ position: static; height: auto; }
}
/* ── L'ESPACEUR EST SUPPRIME, PAS CONTRAINT ───────────────────────────
`.sp` porte `flex:1` : c'est un espaceur, il ne sert qu'a pousser les
boutons vers la droite. Mais les enfants d'une rangee flex s'etirent par
defaut sur toute la hauteur, et celui de la barre photo mesurait 520 x 802
— le grand rectangle blanc signale cinq fois, mesure par l'inspecteur
d'Anthony.
J'ai d'abord essaye de le contraindre (`align-items`, `height:0`). C'est
fragile : il suffit qu'une regle plus specifique repasse derriere. Un
element en `display:none` NE PEUT PAS s'etirer, quelles que soient les
feuilles chargees et l'etat du contenu autour.
Ce qu'il poussait est repris par `margin-left:auto` sur l'element suivant,
qui fait le meme travail sans occuper de place. */
.fic .sp{ display: none !important; }
.fic .gal-bar > .sp + *,
.fic .rhead > .sp + *,
.fic .dsec-h > .sp + *,
.fic .det-top > .sp + *{ margin-left: auto; }
/* ── LE BOUTON « TABLEAU » PREND LA POLICE DU RAIL ────────────────────
[b2427] `arpe-attrs.css` ne pose la police que par `.aqa button{
font-family:inherit}` — donc uniquement DANS le scope du kit. Le bouton,
lui, est fait pour etre pose dans l'en-tete d'un hote : sans ancetre
`.aqa`, il retombe sur la police par defaut du navigateur, en Arial au
milieu d'un rail en Inter.
On ne lui donne PAS cet ancetre pour autant : `.fic` publie deja `--s2`,
`--border`, `--text-dim` sous les memes noms, et sans `.aqa` le bouton
prend la palette du rail qui l'entoure — ce qu'on veut — au lieu de celle
du kit, qui detonne en thème noir (#1c1e24 sur un rail en #131319).
Une ligne d'heritage vaut mieux qu'un scope importe pour un seul bouton. */
.fic .det-top > .aqa-btn{ font-family: inherit; }
/* ── LA VALEUR ENREGISTREE CLIGNOTE, DANS LE RAIL AUSSI ───────────────
[b2428] Meme duree et meme teinte que `aqa-flash` du kit : editer un champ
doit se voir pareil qu'on le fasse depuis le rail ou depuis la popup. Le
vert est tire de `--green`, donc il suit le thème.
L'animation bat `.v:hover{background:var(--s2)}` sans `!important` — une
animation en cours l'emporte sur une declaration normale. */
@keyframes fb-flash{
0% { background: color-mix(in srgb, var(--green) 20%, transparent); }
100% { background: transparent; }
}
.fic .drow .v.saved{ animation: fb-flash .9s ease; }
@media(prefers-reduced-motion:reduce){ .fic .drow .v.saved{ animation: none; } }
/* Une galerie sans contenu ne doit rien occuper — ni elle, ni sa barre. */
.fic .gal:empty{ display: none !important; }
/* ── LE RAIL DROIT NE DOIT PAS DEFILER DE COTE ────────────────────────
Son bloc prix met la date, le montant et le libelle sur une seule rangee.
Avec « 115 j en ligne » et « 580 000 € depart », la ligne depasse les
352px de la colonne : un defilement lateral apparait dans le rail, et le
montant se coupe. Sa maquette n'avait pas ce cas — ses biens etaient en
ligne depuis moins de trente jours et le libelle tenait.
On autorise le repli et on coupe le debordement : la colonne ne defile
plus que verticalement. */
.fic .rdet{ overflow-x: hidden; }
.fic .rdet .dpl-f{ flex-wrap: wrap; }
/* ── LES PADDINGS DU RAIL S'ADDITIONNAIENT ───────────────────────────
`.rdet` porte 14px, et chaque bloc a l'interieur porte les siens (11 a
13px, mesures par l'inspecteur). Sur une colonne de 352px, le contenu se
retrouvait a 27px de chaque bord : les lignes se coupaient et les valeurs
collaient au texte.
On retire le padding de la COLONNE et on laisse les blocs porter le leur —
un seul niveau de respiration, celui que Margot a dessine. */
.fic .rdet{ padding: 0; }
/* [b2405] Le bandeau prix commence donc AU BORD, sans marge en haut : le
bloc vendeur qui le precede porte deja la sienne. */
.fic .rdet > :first-child{ margin-top: 0; }
.fic .rdet .vd,
.fic .rdet .ph,
.fic .rdet .dpl,
.fic .rdet .det-top,
.fic .rdet .dsec{ margin-left: 0; margin-right: 0; }
/* ── DOCUMENTS : LE DESSIN DE MARGOT SUR LE RENDU DU CRM ─────────────
Son mock donne a chaque document : un badge de TYPE a gauche (« PDF »), le
nom en evidence, le poids et la date en dessous, l'action a droite.
Le CRM rend ses propres classes (`.fbf-doc-card-*`) et porte les actions —
analyser, voir le resume, supprimer. On ne rend pas les documents nous-
memes : ces actions valent mieux que le telechargement seul de sa maquette.
On rapproche donc le DESSIN, en laissant le rendu et les actions au CRM. */
.fic .pan[data-p="doc"] .fbf-doc-card{
display: flex; align-items: center; gap: 12px;
padding: 11px 13px;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--surface);
transition: border-color .15s;
}
.fic .pan[data-p="doc"] .fbf-doc-card:hover{ border-color: var(--border-hi); }
.fic .pan[data-p="doc"] .fbf-doc-card + .fbf-doc-card{ margin-top: 8px; }
/* Le badge de type, comme dans son mock : le format se lit d'un coup d'oeil
sans avoir a decoder l'extension au bout du nom. */
.fic .pan[data-p="doc"] .fbf-doc-card-icon{
flex-shrink: 0;
width: 38px; height: 38px;
display: flex; align-items: center; justify-content: center;
border-radius: 9px;
background: var(--s2);
color: var(--muted);
}
/* Le format en toutes lettres, comme son mock — la couleur distingue les
familles : diagnostic, tableur, image. */
.fic .pan[data-p="doc"] .fbf-doc-card-icon[data-fb-type]{
font-family: var(--ab-mono, 'JetBrains Mono', monospace);
font-size: 9px; font-weight: 800; letter-spacing: .04em;
}
.fic .pan[data-p="doc"] .fbf-doc-card-icon[data-fb-type] svg{ display: none; }
.fic .pan[data-p="doc"] .fbf-doc-card-main{ min-width: 0; flex: 1; }
.fic .pan[data-p="doc"] .fbf-doc-card-name{
font-size: 13.5px; font-weight: 600; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fic .pan[data-p="doc"] .fbf-doc-card-meta{
font-size: 11.5px; color: var(--muted); margin-top: 2px;
}
.fic .pan[data-p="doc"] .fbf-doc-card-actions{ flex-shrink: 0; margin-left: auto; }
/* Les categories : son mock les titre en petites capitales espacees. */
/* ── ACTIVITE ET TACHES ───────────────────────────────────────────────
[b2407] Sa maquette n'avait pas ces deux panneaux — ils portaient des
exemples inline. On reprend le vocabulaire visuel du reste de la fiche :
la meme rangee que ses rapprochements, la meme colonne de date que son
historique de prix. Rien d'invente, tout emprunte a ce qu'elle a dessine
ailleurs, pour que la fiche reste d'une seule main. */
.fic .ac{
display: flex; align-items: baseline; gap: 10px;
padding: 9px 0;
border-top: 1px solid var(--border);
font-size: 12.5px;
}
.fic .ac:first-child{ border-top: 0; }
.fic .ac-d{
font-family: var(--ab-mono, 'JetBrains Mono', monospace);
font-size: 10px; color: var(--muted);
width: 84px; flex-shrink: 0;
}
.fic .ac-b{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fic .ac-t{ font-weight: 600; color: var(--text); }
.fic .ac-m{ font-size: 11.5px; color: var(--muted); }
/* [b2410] Le premier jeu de regles `.tk` (b2407) est retire : celui de
b2409 le remplace entierement — cartes bordees, deux lignes, compte a
rebours. Deux jeux qui se recouvrent, c'est une bordure qui gagne au
hasard de l'ordre du fichier. */
/* ═══════════════════════════════════════════════════════════════════════
[b2409] LE RAIL ETAIT POUSSE HORS CADRE — six builds sur ce symptome
═══════════════════════════════════════════════════════════════════════
Je cherchais un debordement DANS le bloc prix : sa geometrie etait juste a
chaque mesure. Le texte coupe des deux cotes (« IX … dépa ») ne venait pas
de lui — c'est le RAIL ENTIER qui sortait du cadre, et on n'en voyait
qu'une tranche.
`.rbody` est une rangee flex : `.rmain` en `flex:1`, `.rdet` a 352px et
`flex-shrink:0`. Un enfant flex refuse par defaut de passer sous la largeur
de son contenu — une galerie en grille, une description longue, une liste
de documents suffisent a pousser. `.rdet` ne pouvant pas se comprimer, il
partait a droite.
On borne pour de bon : la rangee et la colonne principale peuvent se
comprimer, le rail garde sa largeur mais ne depasse jamais, et rien ne
deborde de lui. Trois verrous plutot qu'un reglage. */
.fic .rbody{ min-width: 0; max-width: 100%; overflow: hidden; }
.fic .rmain{ min-width: 0; flex: 1 1 0%; }
.fic .rdet{
flex: 0 0 352px;
max-width: 352px;
min-width: 0;
overflow-x: hidden;
}
/* et aucun bloc du rail ne peut le forcer a s'elargir */
.fic .rdet > *{ max-width: 100%; min-width: 0; overflow-x: hidden; }
/* ── DOCUMENTS : plus compacts, et de l'air avant chaque categorie ────
Ses lignes respiraient trop pour une liste qu'on parcourt ; en revanche le
titre de categorie collait au document precedent. On resserre les lignes et
on separe les groupes — c'est le groupe qui structure la lecture. */
.fic .pan[data-p="doc"] .fbf-doc-card{ padding: 8px 11px; }
.fic .pan[data-p="doc"] .fbf-doc-card + .fbf-doc-card{ margin-top: 5px; }
.fic .pan[data-p="doc"] .fbf-doc-card-icon{ width: 32px; height: 32px; border-radius: 8px; }
.fic .pan[data-p="doc"] .fbf-doc-card-name{ font-size: 13px; }
.fic .pan[data-p="doc"] .fbf-doc-card-meta{ font-size: 11px; margin-top: 1px; }
/* ── TACHES : deux lignes et un compte a rebours ──────────────────────
[b2409] Ce qu'il y a a faire, puis l'echeance et qui s'en occupe. Le
compte a rebours est a droite : c'est lui qu'on balaie pour savoir par quoi
commencer. */
.fic .tk{
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--surface);
}
.fic .tk + .tk{ margin-top: 8px; }
.fic .tk-b{
width: 20px; height: 20px; flex-shrink: 0;
border: 1.5px solid var(--border-hi); border-radius: 6px;
background: var(--surface); cursor: pointer;
}
.fic .tk-b.on{
background: var(--green); border-color: var(--green);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4'%3E%3Cpath d='M5 12.5 10 17.5 19 7.5'/%3E%3C/svg%3E");
background-size: 13px; background-position: center; background-repeat: no-repeat;
}
.fic .tk-c{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fic .tk-t{ font-size: 14px; font-weight: 700; color: var(--text); }
.fic .tk-m{ font-size: 12.5px; color: var(--muted); }
.fic .tk-j{
flex-shrink: 0;
font-family: var(--ab-mono, 'JetBrains Mono', monospace);
font-size: 11px; font-weight: 700;
padding: 4px 9px; border-radius: 99px;
background: var(--s2); color: var(--text-dim);
}
/* L'echeance du jour et le retard se signalent ; au-dela on reste neutre,
sinon douze taches passent en alerte a la fois et plus rien ne ressort. */
.fic .tk-j.tk-j-hot{ background: color-mix(in srgb, var(--chaud) 12%, transparent); color: var(--chaud); }
.fic .tk-done{ background: transparent; }
.fic .tk-done .tk-t{ color: var(--muted); text-decoration: line-through; }
/* ── PORTAILS : le dessin de son mock, l'etat qui dit la verite ───────
La diffusion n'est branchee sur aucun portail. Afficher « Publiée · 742
vues » serait faux sur un bien reel, et c'est exactement le genre de
chiffre qu'un agent repete a son vendeur. */
.fic .df-ph{ display: flex; align-items: center; margin: 22px 0 10px; }
.fic .df-pt{
font-family: var(--ab-mono, 'JetBrains Mono', monospace);
font-size: 9.5px; font-weight: 700; letter-spacing: .12em;
text-transform: uppercase; color: var(--muted);
}
.fic .df-p{
display: flex; align-items: center; gap: 12px;
padding: 11px 13px;
border: 1px solid var(--border); border-radius: 12px;
background: var(--surface);
}
.fic .df-p + .df-p{ margin-top: 7px; }
.fic .df-pi{
width: 38px; height: 38px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
border-radius: 9px; color: #fff;
font-family: var(--ab-mono, 'JetBrains Mono', monospace);
font-size: 10px; font-weight: 800;
}
.fic .df-pb{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fic .df-pn{ font-size: 13.5px; font-weight: 600; color: var(--text); }
.fic .df-pm{ font-size: 11.5px; color: var(--muted); }
.fic .df-ps{
flex-shrink: 0; font-size: 11.5px; font-weight: 600;
padding: 4px 10px; border-radius: 99px;
background: var(--s2); color: var(--muted);
}
/* Tant que ce n'est pas branche, la ligne recule : elle informe, elle
n'invite pas encore a agir. */
.fic .df-p-soon{ opacity: .62; }
/* ── LA BORDURE HAUTE DE LA PREMIERE TACHE ETAIT COUPEE ───────────────
Le panneau n'a pas de padding en haut : la premiere carte colle a la barre
d'onglets et son trait disparait dessous. Les autres panneaux ont le meme
besoin — une carte doit se voir en entier, bordure comprise. */
.fic .pan{ padding-top: 4px; }
.fic .pan[data-p="tsk"],
.fic .pan[data-p="act"],
.fic .pan[data-p="rap"]{ padding-top: 10px; }
/* ── LES VRAIES CLASSES DES CATEGORIES DE DOCUMENTS ───────────────────
[b2411] Trois builds a poser des marges sur `.fbf-docs-cat-title` et
`.fbf-doc-cat` — deux classes qui n'existent NULLE PART. Le CRM rend
`.fbf-docs-cat` (le groupe), `.fbf-docs-cat-head` (l'en-tete),
`.fbf-docs-cat-label` et `.fbf-docs-cat-count`, `.fbf-docs-cat-list`
(bien-page-v2.js:1233). J'avais devine les noms au lieu de les lire, et
aucune de mes regles ne s'appliquait : d'ou « toujours pas de gap ».
C'est la troisieme fois aujourd'hui qu'un selecteur invente me coute
plusieurs passes — apres `#bpv2-docs-zone` et `.rm-nom`. */
.fic .pan[data-p="doc"] .fbf-docs-cat + .fbf-docs-cat{ margin-top: 30px; }
.fic .pan[data-p="doc"] .fbf-docs-cat-head{
display: flex; align-items: center; gap: 8px;
margin-bottom: 12px;
}
.fic .pan[data-p="doc"] .fbf-docs-cat-label{
font-family: var(--ab-mono, 'JetBrains Mono', monospace);
font-size: 9.5px; font-weight: 700; letter-spacing: .12em;
text-transform: uppercase; color: var(--muted);
}
.fic .pan[data-p="doc"] .fbf-docs-cat-count{
display: inline-grid; place-items: center;
min-width: 18px; height: 17px; padding: 0 5px;
border-radius: 99px; background: var(--s2);
font-size: 10.5px; font-weight: 700; color: var(--text-dim);
}
.fic .pan[data-p="doc"] .fbf-docs-cat-list{
display: flex; flex-direction: column; gap: 6px;
}
/* ── LE BLOC PRIX, SOUS SON PROPRE NOM ────────────────────────────────
[b2414] Il s'appelait `.ph` — la classe du header de page du CRM, avec ses
34 regles. J'ai passe plusieurs builds a neutraliser une a une les
proprietes qu'elle imposait, et il en restait toujours une pour couper le
montant. Ce bloc est NOTRE code : il n'avait aucune raison de porter un nom
deja pris. Sous `.fb-price`, plus aucune collision possible.
Le montant seul, en grand ; ce qui le met en perspective en dessous. */
.fic .rdet .fb-price{
padding: 14px;
border-bottom: 1px solid var(--border);
overflow: hidden;
}
.fic .rdet .fb-price-l{
font-family: var(--ab-mono, 'JetBrains Mono', monospace);
font-size: 8.5px; font-weight: 600; letter-spacing: .12em;
text-transform: uppercase; color: var(--muted);
}
.fic .rdet .fb-price-v{
margin-top: 3px;
font-size: 23px; font-weight: 800; letter-spacing: -.02em;
color: var(--text);
font-variant-numeric: tabular-nums;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fic .rdet .fb-price-s{
margin-top: 4px;
font-family: var(--ab-mono, 'JetBrains Mono', monospace);
font-size: 10.5px; font-weight: 700; color: var(--chaud);
}
/* ── AJOUTER PHOTOS ET PLANS, EN TETE DE PLANCHE ──────────────────────
[b2419] Deux boutons distincts : les plans vivent dans un sous-dossier et
ne partent pas dans l'annonce — un seul bouton qui devinerait le type
melangerait les deux. */
/* [b2421] A droite, comme toutes les actions de la fiche : le regard part du
contenu, les actions se rangent au bord. */
.fic .fb-photo-bar{ display: flex; gap: 8px; margin-bottom: 16px; justify-content: flex-end; }
.fic .fb-photo-b{
display: inline-flex; align-items: center; gap: 7px;
height: 32px; padding: 0 12px;
background: var(--s2); border: 1px solid var(--border);
border-radius: 9px; color: var(--text);
font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.fic .fb-photo-b:hover{ border-color: var(--border-hi); background: var(--s3); }
.fic .fb-photo-b svg{ width: 13px; height: 13px; }
/* ── LE BANDEAU DE FAITS DE L'ANALYSE ─────────────────────────────────
[b2421] Les valeurs sortaient trop grosses et se coupaient (« 29/63
présen… », « Cabinet Meill… »). Sa maquette les tient sur une ligne courte ;
nos documents reels ont des libelles plus longs. On reduit d'un cran et on
autorise deux lignes plutot que de tronquer : un quorum coupe ne dit rien. */
/* [b2422] Encore un cran plus bas. Un quorum s'ecrit « 29/63 présents ou
représentés (4856/9712 tantièmes) » : a 16px il prenait cinq lignes et
ecrasait le bandeau. Ces valeurs se lisent, elles ne se proclament pas. */
.aqx-facts .aqx-fv{
font-size: 13.5px; font-weight: 700; line-height: 1.3;
white-space: normal; overflow: visible; text-overflow: clip;
}
.aqx-facts .aqx-fs{ font-size: 10.5px; line-height: 1.3; }
.aqx-facts .aqx-fk{ font-size: 9px; }
/* ── L'INVITATION « AJOUTER… » S'ALIGNE AVEC LES VALEURS ──────────────
[b2422] Elle etait centree tandis que les valeurs renseignees sont a
gauche : sur une section a moitie vide, la colonne partait en zigzag et on
ne pouvait plus balayer les valeurs du regard. */
.fic .rdet .drow .v.empty{ text-align: left; }
.fic .rdet .drow .v{ text-align: left; }
/* ── LE HEADER DE LA FICHE ────────────────────────────────────────────
[b2424] C'est le header de page du CRM, structure comprise (`.ph-l` avec
`.ph-title`, `.ph-r` avec le bouton Arpe du shell). Tout son style vient de
`page-header.css` : il ne reste ici que les deux differences propres a une
fiche — elle defile dans la page au lieu de coller en haut de fenetre, et
elle a un bouton de retour, ce qu'une page de liste n'a pas. */
/* ── LE HEADER DE LA FICHE EST LA BANDE DES PAGES ─────────────────────
[b2429] `.donna-chrome` remplace `.ph` : c'est la primitive reelle du
produit depuis b2049, celle de la page Biens juste a cote. On ne la
restyle PAS — ce serait refaire l'erreur des six derniers builds. On
neutralise seulement son `position:sticky`, qui n'a pas de sens ici :
la fiche est posee en `fixed` sous le header et mesure son BAS (b2424) ;
une bande collante fausserait cette mesure a chaque defilement. */
#bien-page-root > .donna-chrome{ position: static; flex-shrink: 0; }
/* Le retour, seul element qu'une fiche ajoute a la bande. Memes valeurs que
sur `.ph` : c'est le meme bouton, il n'a aucune raison de differer. */
.donna-chrome .ph-back{
width: 26px; height: 26px; flex-shrink: 0;
display: grid; place-items: center;
background: transparent; border: 0; border-radius: 8px;
color: var(--muted); cursor: pointer;
margin-right: 2px;
}
.donna-chrome .ph-back:hover{ background: var(--s2); color: var(--text); }
.donna-chrome .ph-back svg{ width: 14px; height: 14px; display: block; }
/* ── LE FIL D'ARIANE DES FICHES ───────────────────────────────────────
[b2433] CES REGLES NE SONT PLUS SCOPEES SUR LA FICHE BIEN. Elles
l'etaient sous `#bien-page-root`, si bien que le header devenait partage
en JS (`fiche-header.js`) mais PAS en CSS : la fiche client aurait recu
la meme bande avec un fil d'ariane nu — 16px gras au lieu de 13px, sans
survol ni troncature. Le harnais l'a montre en comparant les deux au
style calcule ; a l'oeil, sur une seule fiche, ca ne se voyait pas.
`.fb-crumb*` et `.ph-back` sont NOS classes, posees uniquement par le
helper, donc uniquement sur des fiches : elles n'ont pas besoin d'un
scope de page, et en avoir un les empechait justement d'etre partagees.
── « BIENS » EST UN CHEMIN, PAS LE TITRE ────────────────────────────
[b2430] Le H1 de la page, c'est le nom du bien (`.rhead .ti`, 21px/800).
Le chemin qui mene a lui doit peser moins, sinon les deux se disputent
le premier regard. Meme taille et meme place que sur une page de liste
(on ne touche pas au composant partage), seule la graisse descend, et il
devient cliquable — ce qu'un titre de page n'a pas a etre. */
.donna-chrome .fb-crumb{
/* [b2432] LA TAILLE VIENT DU FIL D'ARIANE QUE LE CRM A DEJA.
`.ph-crumb-link` / `.ph-crumb-current` (page-header.css) : 13px, lien en
500, maillon courant en 600. J'avais garde les 16px de `.dchrome-title`
— la taille d'un TITRE — alors qu'un chemin n'est pas un titre. On reprend
les valeurs existantes plutot que d'en inventer une troisieme. */
font-size: 13px;
font-weight: 500;
color: var(--text-dim);
background: transparent;
border: 0;
font-family: inherit;
padding: 0 6px;
height: 26px;
border-radius: 7px;
cursor: pointer;
transition: .14s;
}
.donna-chrome .fb-crumb:hover{ background: var(--s2); color: var(--text); }
/* Le chemin doit pouvoir se retracter : « 39 rue sainte croix de la
Bretonnerie » ne tient pas a cote des actions sur un ecran etroit. C'est le
DERNIER maillon qui se coupe — jamais « Biens », qui est le lien utile. */
.donna-chrome .dchrome-hl{ min-width: 0; }
.donna-chrome .fb-crumb{ flex-shrink: 0; }
.donna-chrome .fb-crumb-sep{
display: inline-grid; place-items: center;
color: var(--muted); opacity: .55; flex-shrink: 0;
}
.donna-chrome .fb-crumb-sep svg{ width: 14px; height: 14px; display: block; }
/* Le maillon courant n'est pas un lien : on y est deja. Il porte le nom du
bien en petit — le grand, c'est le H1 juste dessous. */
/* Le maillon courant pese un cran de plus que le lien — c'est LUI qu'on
regarde — mais reste tres en dessous du H1 (21px/800) juste dessous. */
.donna-chrome .fb-crumb-cur{
font-size: 13px; font-weight: 600; letter-spacing: -.005em;
color: var(--text);
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.donna-chrome .fb-crumb:focus-visible{
outline: 2px solid var(--accent); outline-offset: 1px;
}
/* ── L'AIR SOUS LA BANDE ÉTAIT COMPTÉ DEUX FOIS ───────────────────────
[b2430] Le chrome pose 18px sous lui, comme sur toutes les pages. Mais
la fiche est posee en `fixed` a partir du BAS de la bande (b2424) : elle
recouvre ces 18px, puis son propre `.rhead` en rajoute 18 de padding.
L'ecart visible etait donc bien 18px — sauf qu'il est ENTIEREMENT porte
par la fiche, la ou les autres pages le tiennent du chrome et posent leur
contenu dessus sans marge propre. Resultat : la meme valeur, une densite
differente, parce qu'ici elle s'ajoute a la hauteur du bloc titre.
On le ramene a 10px — la valeur du gap unifie du produit (v2091). */
#bien-page-root > .fic .rhead{ padding-top: 10px; }
#bien-page-root > .ph{ position: static; flex-shrink: 0; }
#bien-page-root > .ph .ph-back{
width: 26px; height: 26px; flex-shrink: 0;
display: grid; place-items: center;
background: transparent; border: 0; border-radius: var(--ph-radius, 8px);
color: var(--ph-text-dim, var(--muted)); cursor: pointer;
margin-right: 2px;
}
#bien-page-root > .ph .ph-back:hover{ background: var(--ph-s2, var(--s2)); color: var(--text); }
#bien-page-root > .ph .ph-back svg{ width: 14px; height: 14px; display: block; }
/* la fiche descend sous le header */
#bien-page-root > .fic{ flex-direction: column; }
#bien-page-root > .fic > .rec{ flex: 1; min-height: 0; }
/* ── LA FICHE CLIENT DANS LA PAGE, PAS DANS LE VIEWPORT ───────────────
[b2434] `.aqfic` porte `height:100vh; overflow:hidden` — juste pour la
page de demo du kit, ou elle EST la page. Posee dans le CRM elle demarre
sous le header : 100vh depuis ce point deborde par le bas, et son
`overflow:hidden` ROGNE le reste. Mesure avant correction : 4 182px de
contenu enfermes dans 900px, bas de la fiche 33px sous le pli. Le pire
des symptomes — la structure est juste, on ne la voit pas.
`overflow:hidden` est CONSERVE : le kit defile EN INTERNE
(`.rmain{overflow-y:auto}`), le passer en `visible` ferait deborder les
4 182px dans la page. Ce n'est pas le rognage qui est faux, c'est la
hauteur — elle est posee en inline par `caler()`, mesuree a l'execution.
ET RIEN D'AUTRE NE DOIT LA DISPUTER. J'avais d'abord chaine `flex:1` +
`height:100%` par-dessus : le chainage regagnait les 100vh et la mesure
ne servait a rien. Deux mecanismes sur la meme propriete, c'est le motif
qui a coute huit builds sur la fiche bien. Un seul decide. */
#client-page-root > .aqfic{ min-height: 0; }
/* Le header vit HORS de `.aqfic` — sous cette racine, le reset du kit le
neutraliserait, exactement comme sur la fiche bien (b2423). */
#client-page-root > .donna-chrome{ position: static; flex-shrink: 0; }
/* ── ISOLATION DE LA FICHE CLIENT — b2298 PRIS A L'ENVERS ─────────────
[b2435] Le « pannel blanc » d'Anthony, nomme a l'inspecteur : `span.sp`,
520x802, fond blanc, position fixed, z-index 201. C'est l'ESPACEUR de
Margot — un span qui ne fait que pousser les boutons, et dont sa feuille
ne declare QUE `flex:1`. Le CRM, lui, definit `.sp` dans `sidepanel.css`
comme un PANNEAU LATERAL complet. Son selecteur `.aqfic .pan-h .sp` est
plus specifique, donc il gagne sur `flex` — la seule propriete qu'il
declare — et l'espaceur herite de TOUT le reste : la position fixe, les
520px, le fond, l'ombre et l'etage.
J'ai protege le CRM du kit (Margot avait deja tout scope sous `.aqfic`)
et JAMAIS l'inverse. C'est mot pour mot la faute de b2298, et le mesure
le dit : 111 classes du kit heritaient de regles du CRM, `.sp` avec 14
proprietes a elle seule.
ON NE LES CORRIGE PAS UNE PAR UNE — ce serait en redecouvrir a chaque
panneau. `all:revert` annule TOUTE declaration d'auteur venue des autres
feuilles a l'interieur de la fiche ; les regles du kit, scopees donc plus
specifiques, repassent devant. Aucune feuille du CRM ne peut plus
atteindre l'interieur, quel que soit l'ordre de chargement.
SVG EXCLUS (lecon b2299) : leurs attributs de presentation (`fill`,
`stroke`) ont une specificite NULLE, `all:revert` les emporterait aussi
et les pictogrammes deviendraient des aplats noirs.
Les deux redeclarations qui suivent le `revert` sont indispensables : le
kit les pose en `.aqfic *` (0,1,0), notre selecteur monte a (0,1,1) a
cause du `:not(svg)` — sans elles on tuerait son propre reset. */
/* [b2474b] UNE EXCEPTION NOMMEE : `.dna-ask`, LE BOUTON ARPE DU SHELL.
Anthony : « sur les fiches leads, le bouton Demander a Arpe est bugge ».
Il n'est pas casse, il est DESHABILLE : il vit dans le fil d'ariane, donc
sous `.aqfic`, donc `all:revert` lui retire les 34 regles que
`page-header.css` lui donne. Il rendait avec les defauts du navigateur.
C'est exactement le cas tranche en b2440 pour `.aqa-btn` : un bouton du
PRODUIT pose dans une racine scopee doit garder la peinture du produit,
sinon on se retrouve avec un troisieme dessin de bouton — precisement ce
que le header partage sert a eviter.
ON L'EXEMPTE PLUTOT QUE DE LE REDECLARER. Recopier ses regles ici
creerait un second jeu qui divergerait a la premiere retouche du shell ;
l'exception, elle, suit ses evolutions sans qu'on y revienne.
L'exemption ne COUVRE QUE lui et ses enfants : le reste de la fiche
demeure isole, et la garantie de b2435 tient telle quelle.
⚠ ELLE PASSE PAR `:where()`, ET CE N'EST PAS UN DETAIL DE STYLE.
Ma premiere version ecrivait `:not(.dna-ask):not(.dna-ask *)` : deux
pseudo-classes dont l'argument est une CLASSE, donc la specificite de la
regle montait de (0,1,2) a (0,3,2). Elle passait alors DEVANT les regles
du kit lui-meme (`.aqfic .rec`, (0,2,0)) et leur appliquait `all:revert` :
la fiche entiere sortait en texte nu, sans une seule regle. Le
commentaire ci-dessus prevenait de cet equilibre exact, et je l'ai casse
en le lisant.
`:where()` a une specificite NULLE par definition : l'exemption fait donc
son travail sans deplacer d'un cran le poids de la regle. Verifie : la
selectrice reste a (0,1,2), identique a l'originale. */
.aqfic *:not(svg):not(svg *):not(:where(.dna-ask, .dna-ask *)){
all: revert;
box-sizing: border-box;
margin: 0;
}
/* LA RACINE, ELLE, N'EST PAS COUVERTE PAR `.aqfic *` — et c'est par elle que
passait le dernier ecart : le kit ne declare AUCUNE taille de police sur
`.aqfic`, il repose sur le defaut du navigateur (16px) de sa page de demo,
ou aucun `body{font-size}` n'existe. Dans le CRM, `body` en impose une
autre, qui cascade dans toute la fiche : mesure, la police fuyait sur
presque chacun des 497 elements. On fige la valeur contre laquelle le kit
a ete dessine, plutot que de laisser la page decider. */
.aqfic{ font-size: 16px; line-height: normal; }
/* ── LA FICHE VA BORD A BORD ──────────────────────────────────────────
[b2437] Anthony : « padding droite gauche a supprimer ». La colonne de
contenu du shell pose 24px de chaque cote — juste pour une page de liste,
ou le tableau doit respirer. Une fiche EST la page : son en-tete, ses
onglets et son rail portent deja leurs propres retraits, et les 24px du
shell les redoublent. On deborde du padding lateral, la technique deja
utilisee par l'accueil et par le chrome lui-meme. */
body.shell-v2-on #client-page-root{
margin-left: calc(-1 * var(--shellv2-main-px, 24px));
margin-right: calc(-1 * var(--shellv2-main-px, 24px));
}
/* [b2442] LA REGLE CI-DESSUS ETAIT BARREE DANS L'INSPECTEUR, et pour la
raison deja payee en b2063 et b2286 : `body.shell-v2-on #client-page-root`
et `#page-client > #client-page-root` (style.css) font TOUTES DEUX (0,2,0)
— a specificite egale c'est l'ORDRE DE CHARGEMENT qui tranche, et style.css
est chargee apres. Son `margin:0 auto` gagnait, et son `padding:0 24px 40px`
redoublait les retraits que la fiche porte deja.
On passe franchement devant : l'id de la PAGE + celui de la racine + la
classe du body = (2,1,0). Et on SCOPE au montage v3 (`:has(> .aqfic)`) —
la fiche client d'origine, elle, a besoin de ce padding. */
body.shell-v2-on #page-client > #client-page-root:has(> .aqfic){
padding: 0;
max-width: none;
}
/* [b2443] ET SURTOUT : PAS DE MARGE NEGATIVE ICI. En b2442 j'avais repris
celle de b2437 en plus du retrait du padding — les deux se cumulaient, la
fiche partait SOUS la barre laterale et le bandeau se faisait couper a
gauche (« ntegration en cours »). Anthony : « les marges doivent etre comme
sur bien ».
La fiche BIEN ne negocie pas avec le flux : elle est en `position:fixed`,
bord gauche MESURE a l'execution (b2399/b2402). Elle n'a donc aucune marge
negative a compenser. Ici la fiche reste dans le flux, et il suffit de lui
retirer le padding que le shell pose pour une page de LISTE : elle tombe
alors exactement sur la colonne de contenu, au meme bord gauche que toutes
les autres pages. Une marge negative par-dessus, c'est un second mecanisme
sur la meme propriete — le motif qui a coute huit builds sur la fiche bien. */
/* ── L'ETAT VIDE DES PANNEAUX (b2442) ──────────────────────────────────
Un panneau que la base ne porte pas ne montre ni la maquette ni un zero
decoratif : il nomme ce qui manque. Le dessin reste discret — c'est une
information de service, elle ne doit pas peser autant qu'une donnee. */
.aqfic .fcp-vide{
padding: 18px 20px;
border: 1px dashed var(--border, #e4e7ee);
border-radius: 10px;
background: transparent;
}
.aqfic .fcp-vide-t{ font-size: 13px; font-weight: 600; color: var(--text, #131319); }
.aqfic .fcp-vide-s{ font-size: 12px; line-height: 1.45; color: var(--text-dim, #6b7280); margin-top: 4px; }
.aqfic .fcp-frise{ display: block; }
/* ── LES BOUTONS D'EN-TETE PRENNENT LE STYLE DU PRODUIT (b2454) ────────
Anthony : « les boutons dans le style de S1 mais positionnes comme sur
S2 ». Ils RESTENT donc dans l'en-tete de la fiche ; c'est leur dessin qui
s'aligne sur `.ph-add` (page-header.css) — la pastille du shell, plus
compacte et moins arrondie que celle du mock, avec son ombre portee.
On reprend SES valeurs plutot que d'en approcher a l'oeil : hauteur 26px,
rayon 8px (« un poil moins d'arrondi », retour Anthony a v1940), et la
meme ombre. Un troisieme dessin de bouton, c'est ce qu'on evite. */
.aqfic .rhead .abtn,
#bien-page-root .fic .rhead .abtn{
display: inline-flex;
align-items: center;
gap: 6px;
height: 26px;
padding: 0 10px 0 8px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
font-family: inherit;
line-height: 1;
cursor: pointer;
white-space: nowrap;
background: var(--surface, #fff);
color: var(--text);
border: 1px solid var(--border);
transition: box-shadow .15s, transform .15s, border-color .15s;
}
.aqfic .rhead .abtn svg,
#bien-page-root .fic .rhead .abtn svg{
width: 12px; height: 12px; display: block; flex-shrink: 0;
}
.aqfic .rhead .abtn:hover,
#bien-page-root .fic .rhead .abtn:hover{
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(20,22,31,.08);
}
/* Le bouton principal : fond plein, l'ombre de `.ph-add:not(.ghost)`. */
.aqfic .rhead .abtn.pri,
#bien-page-root .fic .rhead .abtn.pri{
background: var(--text);
color: var(--bg);
border-color: transparent;
box-shadow: 0 1px 2px rgba(20,22,31,.14), 0 4px 12px rgba(20,22,31,.10);
}
.aqfic .rhead .abtn.pri:hover,
#bien-page-root .fic .rhead .abtn.pri:hover{
box-shadow: 0 2px 4px rgba(20,22,31,.18), 0 8px 20px rgba(20,22,31,.15);
}
[data-theme="noir"] .aqfic .rhead .abtn.pri,
[data-theme="noir"] #bien-page-root .fic .rhead .abtn.pri{
box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.4);
}
/* ── LA BARRE D'ACTIONS NE DOIT JAMAIS COUVRIR LES ONGLETS (b2464) ─────
Anthony ne pouvait plus cliquer sur « Rapprochements » ni sur les onglets
de la fiche bien : une barre en double debordait de l'en-tete et avalait
les clics. La cause est corrigee (les barres sont idempotentes), mais on
pose aussi la ceinture : la barre reste DANS son en-tete, et la rangee
d'onglets passe devant quoi qu'il arrive. Un element invisible qui
intercepte des clics est le genre de panne qu'on ne diagnostique pas a
l'oeil — on l'empeche par construction. */
#bien-page-root .fic .rhead .fcp-acts,
.aqfic .rhead .fcp-acts{
max-height: 100%;
flex-wrap: nowrap;
}
#bien-page-root .fic .rec > .tabs,
.aqfic .rec > .tabs{
position: relative;
z-index: 5;
}
#bien-page-root .fic .rhead,
.aqfic .rhead{ position: relative; z-index: 1; }
/* ── LA VIGNETTE DU BIEN DANS LES CARTES DE RAPPROCHEMENT (b2464) ──────
Pas de photo -> aucune image, pas un visuel generique : une vignette
inventee ferait croire qu'on a vu le bien. */
.aqfic .mgrid .mc-img{
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: var(--s2, #f3f4f7);
}
.aqfic .mgrid .mc-img.vide{
background-image: none;
display: flex;
align-items: center;
justify-content: center;
}
.aqfic .mgrid .mc-img.vide::after{
content: 'Sans photo';
font-size: 10.5px;
letter-spacing: .03em;
color: var(--text-dim, #6b7280);
}
/* ── LES PASTILLES DE DOCUMENT (b2463) ─────────────────────────────────
Un aplat gris uniforme obligeait a LIRE l'extension. La couleur se
reconnait avant le texte — c'est tout l'interet d'une liste de pieces
jointes qu'on parcourt du regard. Le type inconnu reste gris : on ne lui
invente pas une couleur qui suggererait une categorie. */
.aqfic .dr-ic{
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px; height: 42px;
border-radius: 10px;
font-size: 10.5px;
font-weight: 800;
letter-spacing: .04em;
color: #fff;
background: #9aa1ad; /* type inconnu */
flex-shrink: 0;
}
.aqfic .dr-ic.pdf{ background: #e04652; }
.aqfic .dr-ic.img{ background: #3d7de0; }
.aqfic .dr-ic.doc{ background: #6b5ce7; }
.aqfic .dr-ic.xls{ background: #1f9d63; }
/* ── L'ORDRE DES ACTIONS D'EN-TETE (b2463) ─────────────────────────────
Principal en noir tout a DROITE, secondaire en blanc a sa gauche, le
reste dans un menu. Une barre de boutons de meme poids ne dit pas lequel
est le geste attendu. */
#bien-page-root .fic .rhead .fcp-acts,
.aqfic .rhead .fcp-acts{
display: inline-flex;
align-items: center;
gap: 8px;
margin-left: auto;
}
#bien-page-root .fic .rhead .fcp-more,
.aqfic .rhead .fcp-more{
width: 26px;
padding: 0;
justify-content: center;
}
#bien-page-root .fic .rhead .fcp-more svg,
.aqfic .rhead .fcp-more svg{ width: 14px; height: 14px; }
#bien-page-root .fic .rhead .fcp-menu,
.aqfic .rhead .fcp-menu{ position: relative; display: inline-flex; }
#bien-page-root .fic .rhead .fcp-pop,
.aqfic .rhead .fcp-pop{
display: none;
position: absolute;
top: calc(100% + 6px);
right: 0;
z-index: 40;
min-width: 200px;
padding: 5px;
flex-direction: column;
gap: 2px;
background: var(--surface, #fff);
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: 0 4px 12px rgba(20,22,31,.10), 0 12px 32px rgba(20,22,31,.12);
}
#bien-page-root .fic .rhead .fcp-menu.on .fcp-pop,
.aqfic .rhead .fcp-menu.on .fcp-pop{ display: flex; }
/* Dans le menu, les boutons redeviennent des LIGNES : un bouton encadre
dans un menu deroulant fait croire a un second niveau d'action. */
#bien-page-root .fic .rhead .fcp-pop .abtn,
.aqfic .rhead .fcp-pop .abtn{
width: 100%;
height: auto;
padding: 8px 10px;
justify-content: flex-start;
border: 0;
border-radius: 7px;
background: transparent;
box-shadow: none;
}
#bien-page-root .fic .rhead .fcp-pop .abtn:hover,
.aqfic .rhead .fcp-pop .abtn:hover{
background: var(--s2, #f3f4f7);
transform: none;
box-shadow: none;
}
/* ── S2 · TOUTES LES CARTES A LA MEME HAUTEUR (b2449) ──────────────────
Meme cause qu'en b2397 sur la fiche bien : la feuille du kit pose
`align-items:start`, donc une carte portant une precision sur DEUX lignes
(« 75011 (Faidherbe · Ledru Rollin) ») depassait ses voisines et cassait
la ligne. Les cartes s'etirent, et la precision se cale EN PIED — les
grands chiffres restent alignes entre eux quelle que soit la longueur du
sous-titre. C'est ca qu'on lit en diagonale. */
.aqfic .kpis{ align-items: stretch; }
.aqfic .kpis .kpi{
display: flex;
flex-direction: column;
height: 100%;
}
/* [b2455] LE CHIFFRE SE CALE EN HAUT, PAS EN BAS. Mon `margin-top:auto` de
b2449 poussait la valeur vers le bas : sur une carte SANS precision, le
« 4 » de PIÈCES tombait au niveau des sous-titres des autres au lieu de
s'aligner avec leurs grands chiffres. C'est justement la ligne des
chiffres qu'on lit en diagonale. Le remplissage passe donc sous la
valeur, via la precision. */
.aqfic .kpis .kpi .v{ margin-top: 2px; }
.aqfic .kpis .kpi .s{
margin-top: auto;
padding-top: 4px;
min-height: 2.6em; /* deux lignes reservees : les cartes sans
precision gardent la meme hauteur que
celles qui en ont une qui passe a la ligne */
line-height: 1.3;
}
/* La carte sans precision reserve la meme place, pour que les chiffres
restent sur une seule ligne d'un bout a l'autre de la bande. */
.aqfic .kpis .kpi:not(:has(.s))::after{
content: '';
display: block;
min-height: 2.6em;
}
/* ── S3 · L'ANCIENNETE DU DERNIER CONTACT, a cote de la temperature ──── */
.aqfic .rhead .ti .fcp-ct{
display: inline-flex;
align-items: center;
margin-left: 8px;
padding: 3px 9px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: .01em;
vertical-align: middle;
color: var(--text-dim, #6b7280);
background: var(--s2, #f3f4f7);
border: 1px solid var(--border, #e4e7ee);
}
/* Trois mois de silence : le badge cesse d'etre neutre. */
.aqfic .rhead .ti .fcp-ct.old{
color: var(--chaud, #d64560);
background: color-mix(in srgb, var(--chaud, #d64560) 10%, transparent);
border-color: color-mix(in srgb, var(--chaud, #d64560) 28%, transparent);
}
/* [b2592] accolade orpheline retiree en fin de fichier — residu probable d'un
bloc @media supprime ; les navigateurs l'ignoraient, le parse strict non. */