/* ========================================================================== COGESTIM — INVENTAIRE COMPOSANTS & CTA (mapping composant → tokens) -------------------------------------------------------------------------- Dépend de cogestim-design-tokens.css (charger AVANT ce fichier). Chaque composant NE référence QUE des tokens : aucune valeur en dur. Sert de contrat pour décliner les pages suivantes sans réintroduire d'incohérences. Les cas non tranchés renvoient à COGESTIM-DESIGN-REFERENCE.md. NB : ce fichier RÉ-ÉCRIT les composants existants en version tokenisée. Il ne remplace pas encore cogestim-base.css sur les pages en ligne — c'est la cible de refactor. Les écarts avec le code actuel sont notés « était : ». ⭑ §0 — RÈGLE DE GOUVERNANCE (toutes pages, tous widgets, futurs templates WordPress) : une page ou un composant hôte (widget, carte, panneau) qui consomme un composant LIBRARY (.link, .btn, .circle-cta, .field--boxed, .consent, .card…) le POSITIONNE via son propre conteneur (marges, gap, alignement) mais ne redéfinit JAMAIS son apparence (couleur, fond, bordure, ombre, taille) par une règle locale ou un reset générique trop large qui l'atteindrait par accident. Si un ajustement d'apparence semble nécessaire, c'est un signal qu'il manque une variante ou une taille au composant LIBRARY lui-même (ex. §A4 .circle-cta) — on l'y ajoute, on ne la patch pas au point d'usage. PRÉFÉRER le scope EXPLICITE POSITIF : donner leurs propres règles autonomes (font/color/cursor/background/border) aux boutons internes d'un composant hôte, plutôt qu'un reset générique par sélecteur de type (`button{…}`) même assorti d'exclusions `:not(...)`. Piège vécu deux fois sur le même fichier (passe 8, widget) : un `button{background:none}` trop large écrasait `.circle-cta` faute d'exclusion ; la version corrigée `button:not(.circle-cta):not(.btn)` a semblé régler le problème mais CHAQUE `:not()` ajoute un cran de spécificité au sélecteur qui le porte — la règle « corrigée » est devenue plus spécifique que `.cw-fab` elle-même et lui a écrasé son fond opaque en silence. Un composant hôte qui s'auto-suffit (aucune propriété non posée, donc aucun besoin de reset partagé) élimine la classe de bug entière plutôt que de la déplacer. ========================================================================== */ /* ========================================================================== A. CTA — SYSTÈME À DEUX NIVEAUX DE CASSE (règle projet CLAUDE.md §CTA) 1. CTA court « voir tout / parcourir / nav » — CAPITALES (.link.caps) 2. Lien-phrase d'action dans le contenu — casse de phrase (.link) Ne JAMAIS mettre un CTA d'action long en capitales. ========================================================================== */ /* --- A1 · Lien-CTA (FORME PAR DÉFAUT du site) ----------------------------- Texte + trait + flèche en dégradé de marque. Casse de phrase. Ex. « Lancer l'estimation », « Découvrir le groupe ». */ .link{ display:inline-flex; align-items:center; gap:var(--space-5); font-family:var(--font-sans); font-weight:var(--fw-medium); font-size:var(--cog-fs-cta); letter-spacing:var(--ls-cta); border:0; background-color:transparent; padding:0 0 var(--space-2); background-image:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; position:relative; cursor:pointer; transition:gap var(--dur-fast) ease; } .link::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--grad); transform:scaleX(1); transform-origin:left; transition:transform .35s var(--ease-out), background var(--dur-fast) ease; } .link:hover{ gap:var(--space-7); } /* Focus clavier (amendement 26/08, planche « États interactifs ») : trou d'inventaire — aucune règle .link:focus-visible n'existait. :focus-visible exclusivement (jamais au clic souris), tokens existants uniquement. */ .link:focus-visible{ outline:none; box-shadow:var(--cog-focus-ring); border-radius:2px; } /* Boîte du glyphe : CARRÉE 14×14, alignée sur le viewBox 24×24 de arrow-right (Lucide). Corrigé le 27/07 : l'ancienne boîte 16×9 (héritée d'un SVG 16×9 disparu) écrasait l'icône à 9×9 — fût réduit à un filet invisible, seule la pointe restait lisible et le CTA se lisait comme un chevron. Les pages ne redéclarent plus de taille (ni inline, ni .ar). */ .link svg{ width:14px; height:14px; flex-shrink:0; fill:none; } /* Dégradé de marque sur le glyphe. Le requis 1×/page DOIT être en gradientUnits="userSpaceOnUse" (x1=0 → x2=24, l'espace du viewBox) : en objectBoundingBox (défaut), le fût horizontal M5 12h14 a une bbox de hauteur 0, le dégradé dégénère et le fût n'est PAS peint — seule la pointe sort, et le CTA se lit comme un chevron (bug corrigé le 27/07). */ .link svg path{ stroke:url(#cogcta); } /* Modificateur CAPS : CTA « voir tout / parcourir » — CAPITALES 13px */ .link.caps{ font-size:var(--cog-fs-cta-caps); letter-spacing:var(--ls-cta-caps); text-transform:uppercase; } /* Modificateur sm : CTA texte en contexte dense (accordéon agences, FAQ) — 13.5px */ .link.sm{ font-size:var(--cog-fs-sm); } /* Conteneur de fin de section — centre un .link.caps unique (Projets-neufs). Invisible si vide. */ .sec-foot{display:flex;justify-content:center;margin-top:clamp(32px,3.4vw,48px)} /* Modificateur invert : sur fond sombre — tout en clair. Souligné blanc TOUJOURS (repos a70, hover 100%), quels que soient les autres modificateurs combinés (caps, primary) — arbitrage 27/07, plus de dégradé sur photo. */ .link.invert{ background-image:none; color:var(--color-text-on-dark); -webkit-text-fill-color:var(--color-text-on-dark); } .link.invert::after{ background:var(--on-dark-a70); } .link.invert svg path{ stroke:var(--color-text-on-dark); } .link.invert:hover{ color:var(--cog-white); -webkit-text-fill-color:var(--cog-white); } .link.invert:hover::after{ background:var(--color-text-on-dark); } /* --- A2 · Bouton pilule PLEIN (.btn) — USAGE RESTREINT -------------------- Soumission de formulaire / action primaire de fiche ou modale UNIQUEMENT. Jamais en CTA de hero / section / carte (là : utiliser .link). Consomme : --grad-45, --shadow-btn, --radius-pill. */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--space-4); font-family:var(--font-sans); font-weight:var(--fw-semibold); font-size:var(--cog-fs-cta); letter-spacing:var(--ls-cta); padding:17px 30px; border-radius:var(--radius-pill); cursor:pointer; border:1px solid transparent; color:var(--cog-white); position:relative; overflow:hidden; background-image:var(--grad-45); background-size:140% 140%; background-position:0% 50%; transition:background-position var(--dur-slow) ease, box-shadow var(--dur-base) ease, transform var(--dur-fast) ease; box-shadow:var(--shadow-btn); } .btn:hover{ background-position:100% 50%; box-shadow:var(--shadow-btn-hover); transform:translateY(-1px); } /* Focus clavier (amendement 26/08, planche « États interactifs ») : trou d'inventaire — combine l'ombre bouton existante et l'anneau canonique. */ .btn:focus-visible{ outline:none; box-shadow:var(--shadow-btn), var(--cog-focus-ring); } .btn svg{ width:16px; height:10px; stroke:currentColor; fill:none; stroke-width:1.4; flex-shrink:0; } .btn.lg{ padding:20px 38px; font-size:var(--cog-fs-cap); } /* variante inutilisée à ce jour ; 15px arrondi au cran --cog-fs-cap (14.5px, écart imperceptible) plutôt qu'un nouveau token pour du code mort */ .btn.sm{ padding:14px 24px; } /* variante compacte — barres sticky mobiles et contextes à hauteur contrainte (fiche-bien) */ /* --- A3 · .btn-o — SUPPRIMÉ passe 8 (convergence formulaires) ------------- Grep confirmé : 0 usage sur les 4 pages. Réintroduction facile depuis l'historique si un besoin de pilule-contour apparaît. */ /* --- A4 · .circle-cta — COMPOSANT UNIQUE pour tout bouton circulaire ------ ⭑ Passe de normalisation (03/07) : .o-circle et .o-circle--toggle fusionnés dans .circle-cta — un seul composant, un seul nom, sur les 5 pages. Diamètre UNIQUE 44px (--cog-control-md), desktop ET mobile, jamais plus petit (la variante .sm et l'ancienne distinction sm/md par contexte sont abandonnées : source d'incohérence constatée entre pages). Contour 1px de la même couleur de trait, fond transparent, même remplissage dégradé au survol partout, icône centrée optiquement, même graisse de trait (1.4px) sur les deux glyphes. Deux glyphes seulement, selon la sémantique — ne jamais les croiser : · flèche ←/→ (svg par défaut, .flip pour l'inverse) = NAVIGATION vers une autre page/vue (carousels, lignes de service, bouton Retour) ; · +/− (.bar ci-dessous) = DISCLOSURE : ouvrir/fermer SUR PLACE (accordéon FAQ, accordéon agences, accordéon caractéristiques). La barre verticale se masque via [aria-expanded="true"] sur le bouton parent. Réservé à la navigation + actions secondaires ; jamais pour la soumission de formulaire (.btn pilule exclusivement, voir §A2). ⭑ DEUX LANGAGES D'ANIMATION DISTINCTS (même cercle, comportement différent selon le glyphe qu'il porte) : · Flèche (nav) — hover : la flèche translate de 3px dans son sens (translateX inversé pour .flip) EN PLUS du remplissage dégradé de fond ; active/press : léger scale-down du bouton (.96). C'est LA référence directionnelle, à ne jamais appliquer à un toggle. · Toggle +/− (disclosure) — hover : UNIQUEMENT le remplissage de fond (::before), JAMAIS de translation, un toggle ne glisse pas comme un lien de nav ; l'état ouvert se lit sur le glyphe lui-même, qui morphe de + à − (barre verticale masquée) en ~200ms. Consomme : --color-border-strong, --grad, --radius-full, --cog-control-md. */ .circle-cta{ position:relative; width:var(--cog-control-md); height:var(--cog-control-md); border:1px solid var(--color-border-strong); border-radius:var(--radius-full); display:inline-flex; align-items:center; justify-content:center; overflow:hidden; transition:border-color var(--dur-base) ease, transform var(--dur-fast) var(--ease-out); flex-shrink:0; background:transparent; color:var(--color-text); } .circle-cta::before{ content:""; position:absolute; inset:0; background:var(--grad); transform:scale(0); transform-origin:center; border-radius:var(--radius-full); transition:transform var(--dur-slow) var(--ease-pop); z-index:0; } .circle-cta:hover{ border-color:transparent; color:var(--cog-white); } .circle-cta:hover::before{ transform:scale(1.05); } .circle-cta:focus-visible{ outline:none; box-shadow:var(--cog-focus-ring); } .circle-cta svg{ position:relative; z-index:1; width:var(--icon-sm); height:var(--icon-sm); stroke:currentColor; fill:none; stroke-width:1.4; transition:transform var(--dur-fast) var(--ease-out); } .circle-cta.invert{ border-color:var(--color-text-on-dark); color:var(--color-text-on-dark); } .circle-cta.invert:hover{ color:var(--cog-white); border-color:transparent; } /* Variante remplie — CTA PRIMAIRE uniquement (ex. barre de recherche IA du héro Home) : fond dégradé signature toujours visible, jamais transparent, indépendamment du fond hôte (photo, sombre...). N'est PAS le composant nav/ disclosure standard — réservé aux cas où le cercle EST le CTA principal. */ .circle-cta.filled{ border-color:transparent; color:var(--cog-white); background-image:var(--grad-45); background-size:140% 140%; background-position:0% 50%; box-shadow:var(--shadow-btn); transition:border-color var(--dur-base) ease, transform var(--dur-fast) var(--ease-out), box-shadow .35s ease, background-position var(--dur-slow) ease; } .circle-cta.filled:hover{ box-shadow:var(--shadow-btn-hover); background-position:100% 50%; } .circle-cta.filled:hover::before{ transform:scale(0); } /* Réutilise l'asset flèche standard en sens inverse (retour/précédent) — un seul SVG, jamais un second asset « flèche gauche » dessiné à part. */ .circle-cta.flip svg{ transform:scaleX(-1); } /* Animation directionnelle (flèche = nav uniquement, jamais sur un toggle, qui n'a pas de mais un .bar). Translation au hover + scale-down au press ; .flip conserve son mirroring et translate dans l'autre sens. */ .circle-cta:hover svg{ transform:translateX(3px); } .circle-cta.flip:hover svg{ transform:scaleX(-1) translateX(3px); } .circle-cta:active:has(svg){ transform:scale(.96); } /* Glyphe +/− (disclosure) — icône à taille FIXE (16px / trait 1.4px), jamais une taille héritée du conteneur, pour que le même + rende identique dans tous les cercles quel que soit l'endroit du site. Hover : aucune translation, seulement le remplissage de fond hérité ci-dessus. */ .circle-cta .bar{ position:relative; z-index:1; width:16px; height:1.4px; background:currentColor; border-radius:1px; } .circle-cta .bar::after{ content:""; position:absolute; left:50%; top:50%; width:1.4px; height:16px; background:currentColor; border-radius:1px; transform:translate(-50%,-50%); transition:transform .2s var(--ease-out), opacity .2s var(--ease-out); } [aria-expanded="true"] .circle-cta .bar::after{ transform:translate(-50%,-50%) scaleY(0); opacity:0; } /* Cas où aria-expanded est porté par le .circle-cta lui-même (bouton = le cercle, ex. toggle agences Home) plutôt que par un parent (ex. .acc-head, .faq-q, .mfq) : même règle, sélecteur direct pour couvrir les deux structures sans dupliquer le marquage. Piloté uniquement par aria-expanded — jamais par une classe .open côté JS — pour que le glyphe soit correct dès le premier rendu (rangée ouverte par défaut = "−" sans transition au chargement, la transition ne joue qu'aux interactions suivantes puisqu'elle est sur .bar::after, pas sur un état d'entrée). ⭑ RÉFÉRENCE CANONIQUE DU TRAIT (sobre, alignée sur Fiche-bien §Caractéristiques détaillées, seule source — ne jamais re-normaliser sur une autre page) : border 1px solid var(--color-border-strong) ; glyphe (flèche ou +/−) en stroke-width 1.4px, currentColor ; flèche 16×10 ; barre + 16×1.4 (barre verticale identique en 1.4×16, superposée) ; cercle 44px (--cog-control-md) partout, desktop et mobile. Aucune variante plus grasse ou plus petite. */ .circle-cta[aria-expanded="true"] .bar::after{ transform:translate(-50%,-50%) scaleY(0); opacity:0; } /* --- A4bis · .circle-cta--toggle — variante DISCLOSURE dédiée ------------- ⭑ Passe uniformisation toggles (03/07) : les toggles +/− (accordéons agences Home, FAQ Acheter/Courtage, caractéristiques Fiche-bien) ne partagent plus le hover de nav/CTA (.circle-cta de base : fill dégradé plein + glyphe blanc). Un toggle n'est jamais un CTA primaire — son hover reste SOBRE : léger fill neutre (--rule, même token que les filets du site), trait légèrement renforcé, glyphe qui reste dans l'encre (jamais blanc). Repos strictement identique à .circle-cta (44px, bordure 1px --color-border-strong, trait 1.4px). Ne s'applique QU'aux toggles ; flèches de nav et CTA ronds (.filled, .invert, .arr, sans classe sur une nav) restent sur le hover magenta de base, hors de cette règle. ⭑ AMENDEMENT 26/08 (planche « États interactifs », option 2 retenue par Luis) : fill hover repassé de --paper-warm à --rule, PARTOUT (toggle direct + relais ci-dessous). Constat 26/08 : sur fond .warm, l'ancien fill --paper-warm se camouflait sur son propre fond hôte — l'affordance de remplissage disparaissait, seule la bordure restait lisible. --rule reste dans l'échelle neutre existante (aucun token inventé) et contraste sur fond blanc ET warm. */ .circle-cta--toggle:hover{ border-color:var(--color-text); color:var(--color-text); } .circle-cta--toggle::before{ background:var(--rule); } .circle-cta--toggle:hover::before{ transform:scale(1); } .circle-cta--toggle:hover .bar, .circle-cta--toggle:hover .bar::after{ background:currentColor; } /* Relais générique (décision Luis 26/08, standardisation hover toggle) : quand le .circle-cta--toggle est nesté dans un bouton/conteneur parent plus large — cf. pointer-events:none posé localement par chaque bloc consommateur (faq/style.css, prestations-detaillees/style.css) pour .faq-q/.expC-btn, ou simplement une zone cliquable plus large que le cercle (.ag-head, cursor:pointer, clic géré en JS sur toute la ligne — accordéon agences Home) — le survol du parent doit reproduire EXACTEMENT l'état hover certifié ci-dessus, mêmes tokens, aucune valeur nouvelle. Source unique : tout bloc qui nest le toggle ajoute son sélecteur ici, jamais de relais dupliqué en style.css de bloc. Complété 26/08 (constat Luis) : .ag-head manquait à ce relais — la ligne entière est hoverable/cliquable (cursor:pointer, listener JS sur .ag-head), mais seul le survol du cercle lui-même déclenchait l'affordance avant cet ajout. */ .faq-q:hover .circle-cta--toggle, .expC-btn:hover .circle-cta--toggle, .ag-head:hover .circle-cta--toggle{ border-color:var(--color-text); color:var(--color-text); } .faq-q:hover .circle-cta--toggle::before, .expC-btn:hover .circle-cta--toggle::before, .ag-head:hover .circle-cta--toggle::before{ transform:scale(1); } .faq-q:hover .circle-cta--toggle .bar, .faq-q:hover .circle-cta--toggle .bar::after, .expC-btn:hover .circle-cta--toggle .bar, .expC-btn:hover .circle-cta--toggle .bar::after, .ag-head:hover .circle-cta--toggle .bar, .ag-head:hover .circle-cta--toggle .bar::after{ background:currentColor; } /* --- A5 · Focus clavier — .faq-q / .gal-tab (amendement 26/08, planche « États interactifs ») : trous d'inventaire. .faq-q — le glyphe +/- interne est pointer-events:none (décoratif), le vrai contrôle cliquable est le bouton .faq-q lui-même, qui n'avait aucune règle :focus-visible (le halo du toggle interne ne peut jamais s'activer puisqu'il n'est pas focusable). .gal-tab (Fiche-bien, galerie Photos/Carte) : même trou, même anneau. */ .faq-q:focus-visible{ outline:none; box-shadow:var(--cog-focus-ring); border-radius:2px; } .gal-tab:focus-visible{ outline:none; box-shadow:var(--cog-focus-ring); } /* --- A6 · .link.primary — modificateur documenté (pas de fusion) ---------- Action recommandée au sein d'un groupe de liens-CTA de poids visuel égal (ex. état de recherche vide : 3 liens, un seul mis en avant). Reste un .link — casse de phrase, jamais de CTA d'action long en capitales. Copie locale dupliquée dans 2.Acheter.html purgée le 27/07 — .link.primary n'existe plus qu'ici. NB audit : « .link.discover » (Home, accordéon agences) n'est PAS un variant visuel — c'est un utilitaire de mise en page (margin-top:auto) mal nommé, sans rapport avec le système de CTA. Rien à documenter ici. */ .link.primary{ color:var(--color-primary); } .link.primary::after{ height:2px; background:var(--grad); } /* Combinaisons canoniques (27/07) : .invert.caps (aucun réglage propre, caps ne touche pas la couleur) et .invert.primary (le souligné et le texte restent blancs — invert prime sur primary, jamais le dégradé rouge sur une photo). Sélecteur combiné = spécificité supérieure, gagne sur .link.invert et .link.primary pris séparément. */ .link.invert.primary{ color:var(--color-text-on-dark); -webkit-text-fill-color:var(--color-text-on-dark); } .link.invert.primary::after{ height:2px; background:var(--on-dark-a70); } .link.invert.primary:hover{ color:var(--cog-white); -webkit-text-fill-color:var(--cog-white); } .link.invert.primary:hover::after{ background:var(--color-text-on-dark); } /* ========================================================================== B. LIENS TEXTE (navigation & listes) ========================================================================== */ /* --- B1 · Lien de navigation (header) — soulignement rouge animé ---------- */ .navlist a{ position:relative; padding:8px 0; color:var(--color-text); font-family:var(--font-sans); font-size:var(--cog-fs-cta); font-weight:var(--fw-medium); } .navlist a::after{ content:""; position:absolute; left:0; right:0; bottom:2px; height:1px; background:var(--color-primary); transform:scaleX(0); transform-origin:left; transition:transform var(--dur-base) var(--ease-out); } .navlist a:hover, .navlist a.active{ color:var(--color-primary); } .navlist a:hover::after, .navlist a.active::after{ transform:scaleX(1); } /* --- B2 · Lien de pied de page — soulignement rouge sur fond ink ---------- */ .fcol-new a{ font-family:var(--font-sans); font-size:var(--cog-fs-cta); color:var(--color-text-on-dark); position:relative; display:inline-block; transition:color var(--dur-fast) ease; } .fcol-new a::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--color-primary); transform:scaleX(0); transform-origin:left; transition:transform .35s ease; } .fcol-new a:hover{ color:var(--color-primary); } .fcol-new a:hover::after{ transform:scaleX(1); } /* ========================================================================== C. CARTES ⚠ Rayon de carte incohérent d'une page à l'autre — voir .md §5. ========================================================================== */ /* --- C1 · Fiche-bien (page Acheter) — angles VIFS ------------------------- Consomme : --color-bg, --color-border, --shadow-card. §5 : une fiche-bien n'est JAMAIS arrondie (angles vifs, 0). */ .card{ position:relative; display:flex; flex-direction:column; background:var(--color-bg); border:1px solid var(--color-border); border-radius:0; overflow:hidden; transition:box-shadow var(--dur-base) ease, transform var(--dur-base) ease, border-color var(--dur-base) ease; } .card:hover{ box-shadow:var(--shadow-card); transform:translateY(-4px); } .card.is-vendu{ opacity:.72; } .card.is-vendu:hover{ transform:none; } .card-price{ font-family:var(--font-sans); font-weight:var(--fw-semibold); font-size:var(--cog-fs-price-card); letter-spacing:-.015em; color:var(--color-text); } .card-loc{ font-family:var(--font-sans); font-size:var(--cog-fs-sm); color:var(--color-text-body); } .card-loc svg{ stroke:var(--color-primary); } .card-title{ font-family:var(--font-sans); font-weight:var(--fw-medium); font-size:var(--cog-fs-card-title); color:var(--color-text); } .card-specs{ border-top:1px solid var(--color-border-soft); } /* --- C2 · Carte promo sombre (« Estimation ») ------------------------------ Cadre marqué + calque dégradé sur image sombre. Extrait 28/07 depuis 2.Acheter/ Projets-neufs (verbatim identique, valeur certifiée en page) — remplace le brouillon tokenisé (--color-border-strong/--color-text-on-dark) jamais consommé par une page. ⚠ Projet-neuf-detail.html : variante colonne actée 28/07, consignée en modificateur .card-promo--col (§C2b, suite de ce bloc) — min-height:auto au lieu de 100%. */ .card-promo{position:relative;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:clamp(28px,2.3vw,38px) clamp(26px,2.1vw,34px);overflow:hidden;border:1px solid var(--ink);color:var(--paper-warm);min-height:100%} .card-promo .promo-bg{position:absolute;inset:0;z-index:0} .card-promo .promo-bg img{width:100%;height:100%;object-fit:cover} .card-promo .promo-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(26,26,31,.58) 0%,rgba(26,26,31,.9) 84%)} .card-promo > *{position:relative;z-index:1} .card-promo .lab{color:rgba(240,235,227,.72)} .card-promo h3{font-family:var(--sans);font-weight:300;font-size:clamp(23px,1.6vw,29px);line-height:1.13;letter-spacing:-.01em;color:var(--paper-warm);margin:0;max-width:15ch;text-wrap:balance} .card-promo h3 .em{color:var(--paper-warm)} .card-promo p{margin:0;font-size:var(--cog-fs-cap);line-height:1.6;color:rgba(240,235,227,.85);max-width:32ch} .card-promo .promo-cta{display:flex;flex-direction:column;gap:14px;margin-top:8px;align-items:flex-start} /* --- C2b · Modificateur colonne (Projet-neuf-detail.html, amendement 28/07) --- Contexte à hauteur non contrainte (colonne libre plutôt que cellule de grid pleine hauteur) : min-height:auto au lieu de 100%. */ .card-promo--col{min-height:auto} /* --- C3 · Carte souple / panneau (réponse hero, modales) ------------------ Consomme : --radius-sm. (Cartes « douces » alignées sur --radius-sm.) */ /* ========================================================================== D. BADGES & PASTILLES ========================================================================== */ /* --- D1 · Badge de statut d'annonce (coin haut-gauche de la fiche) -------- Base commune ; la couleur vient d'un token de statut. Variantes : neuf / projet / reserve / vendu / vente. */ .card-badge{ position:absolute; left:16px; top:16px; z-index:3; font-family:var(--font-sans); font-size:var(--cog-fs-2xs); font-weight:var(--fw-semibold); letter-spacing:.13em; text-transform:uppercase; padding:7px 12px; color:var(--cog-white); } .card-badge.neuf { background-image:var(--status-neuf); } /* « Nouveauté » — dégradé marque */ /* .card-badge.projet supprimé (21/07) : mort, aucun bien ne l'utilisait ; anatomie divergente (bordure+texte coloré) du reste des badges (fond plein+texte blanc). */ .card-badge.reserve{ background:var(--status-reserve); } /* « RÉSERVÉ » — noir charte (§11) */ .card-badge.vendu { background:var(--status-vendu); } /* « Vendu/Loué » — gris désaturé (§11) */ .card-badge.vente { background:var(--status-vente); backdrop-filter:blur(4px); } /* « À vendre » — neutre marque (§11) */ /* Voile + label sur photo pour biens réservés / vendus */ .card.is-reserve .card-shade, .card.is-vendu .card-shade{ display:flex; } .card-shade{ position:absolute; inset:0; z-index:2; display:none; align-items:center; justify-content:center; background:var(--status-scrim); } .card-shade span{ font-family:var(--font-sans); font-weight:var(--fw-semibold); font-size:var(--cog-fs-cta-caps); letter-spacing:.16em; text-transform:uppercase; color:var(--cog-white); border:1px solid var(--white-a70); padding:9px 18px; } /* --- D2 · Pastilles d'info sur photo (compteur, vidéo) -------------------- Consomme : --ink-a55, --radius-pill. */ .card-count, .card-video{ position:absolute; z-index:2; font-family:var(--font-sans); font-size:var(--cog-fs-xs); font-weight:var(--fw-semibold); letter-spacing:.04em; color:var(--cog-white); background:var(--ink-a55); backdrop-filter:blur(4px); border-radius:var(--radius-pill); } /* --- D3 · Puce / chip de filtre (Courtage : villes) ----------------------- Contour, hover rouge. Consomme : --color-border, --color-primary. */ .ville-chip{ font-family:var(--font-sans); font-size:var(--cog-fs-sm); font-weight:var(--fw-medium); color:var(--color-text); padding:11px 20px; border:1px solid var(--color-border); transition:border-color var(--dur-fast) ease, color var(--dur-fast) ease, background var(--dur-fast) ease; } .ville-chip:hover{ border-color:var(--color-primary); color:var(--color-primary); background:var(--primary-a04); } /* Focus clavier (amendement 26/08, planche « États interactifs ») : trou d'inventaire — famille distincte de .tf-chip (nav SEO, pas filtre), même anneau canonique. */ .ville-chip:focus-visible{ outline:none; box-shadow:var(--cog-focus-ring); } /* --- D4 · Badge de confiance (footer : USPI / ISO) ------------------------ Texte + puce rouge. Consomme : --color-text-on-dark, --color-primary. */ /* --- D5 · Pastille de disponibilité (widget) — SEUL état « success » ------ Consomme : --color-success / --color-success-soft. Voir .md §7. */ /* ========================================================================== — LIBRARY — CHAMPS DE FORMULAIRE & CONSENTEMENT (passe 8 : convergence formulaires + boutons de soumission) -------------------------------------------------------------------------- Variante UNIQUE de champ sur tout le site (décision 17/07) : .field--boxed — bordure fine, --radius-sm, léger fond de remplissage. Label CAPS TOUJOURS visible au-dessus du champ (jamais un placeholder seul — un placeholder disparaît à la saisie et casse l'accessibilité). Focus : --cog-focus-ring (cadre sur 4 côtés, le halo s'y ancre naturellement). Zéro valeur en dur, jamais une variante ad hoc par page. (.field--underline supprimée le 17/07 — tous les formulaires basculés.) ========================================================================== */ /* --- L1 · Label de champ — commun aux deux variantes ---------------------- Consomme : --cog-fs-xs, --cog-ls-field-lab, --fw-semibold, --color-text-muted. */ .field-lab{ display:block; margin-bottom:var(--space-3); padding-top:var(--space-5); font-family:var(--font-sans); font-size:var(--cog-fs-xs); font-weight:var(--fw-semibold); letter-spacing:var(--cog-ls-field-lab); text-transform:uppercase; color:var(--color-text-muted); } /* --- L2 · Sélecteur natif — chevron partagé par les deux variantes -------- NB : un data-URI ne peut pas consommer var() ; le stroke ci-dessous est une COPIE figée de --color-text-muted (#6E6E76). Si la primitive change, resynchroniser ce chevron (grep "field-in select" au prochain audit couleur). Corrige au passage le stroke #8A8A92 (ex-valeur, périmée depuis le renommage --cog-ink-mute → trouvé dans widget + fiche). */ select.field-in{ appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:28px; background-repeat:no-repeat; background-position:right 2px center; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='5 8 14 8'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%236E6E76' stroke-width='1.6'/%3E%3C/svg%3E"); } textarea.field-in{ resize:vertical; min-height:80px; line-height:1.5; } /* --- L3 · .field--boxed — variante unique de champ (tout le site) --------- Décision 17/07 : seule variante de champ. Bordure fine + --radius-sm + léger fond de remplissage. Focus = --cog-focus-ring (halo carré ancré sur les 4 côtés). Ne pas réintroduire de variante soulignée ni de focus local. Consomme : --color-bg, --color-border, --radius-sm, --cog-focus-ring. */ .field--boxed{ display:flex; flex-direction:column; gap:var(--space-3); } /* Option --space-2 (6px) écartée (2026-07-22) : gain imperceptible sur le gap label–champ, la respiration entre label et champ est préservée à 9px. */ .field--boxed .field-in{ width:100%; font-family:var(--font-sans); font-size:var(--cog-fs-field); color:var(--color-text); background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:12px 14px; outline:0; transition:border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; } /* Correction 27/07 (audit 2.6) : la shorthand `background` ci-dessus efface le chevron posé en §L2. Restauré ici pour TOUS les selects boxés du site — remplace la redéclaration locale qui vivait dans Agence-Lausanne. Chevron aligné sur le padding boxé (14px). Même data-URI figé qu'en §L2. */ /* .field--boxed select.field-in — chevron : généralisé à button.field-in en §L20 (extraction field-select, 31/07) pour couvrir la variante à choix custom. */ .field--boxed .field-in::placeholder{ color:var(--color-text-muted); } .field--boxed .field-in:focus{ border-color:var(--color-text); box-shadow:var(--cog-focus-ring); } /* --- L5 · .consent — case de consentement nLPD ---------------------------- Obligatoire sur TOUT formulaire collectant des données personnelles. Non pré-cochée par défaut (le HTML ne doit jamais poser `checked`). Wording canonique (copie exacte, ne pas reformuler par page) : "J'accepte que mes données soient traitées pour répondre à ma demande, conformément à la politique de confidentialité." Consomme : --color-border, --grad-45, --color-text-body, --color-primary, --cog-focus-ring. */ .consent{ display:flex; gap:var(--space-4); align-items:flex-start; margin:var(--space-2) 0 var(--space-6); } .consent input{ appearance:none; -webkit-appearance:none; width:19px; height:19px; flex-shrink:0; margin-top:1px; border:1px solid var(--color-border); border-radius:var(--radius-sm); cursor:pointer; position:relative; transition:border-color .2s ease, background .2s ease; } .consent input:checked{ background-image:var(--grad-45); border-color:transparent; } .consent input:checked::after{ content:""; position:absolute; left:6px; top:2px; width:5px; height:10px; border:solid var(--cog-white); border-width:0 2px 2px 0; transform:rotate(45deg); } .consent input:focus-visible{ outline:none; box-shadow:var(--cog-focus-ring); } .consent label{ font-family:var(--font-sans); font-size:var(--cog-fs-legal); line-height:1.5; color:var(--color-text-body); } .consent label a{ color:var(--color-primary); text-decoration:underline; text-underline-offset:2px; } /* --- L6 · États validés 16/07 (§4.5.7 erreur de champ · §4.4 submit désactivé) — ajout de synchronisation : la règle était verrouillée dans la bibliothèque mais n'existait que dans Estimation-Funnel. Consomme : --color-error, --cog-fs-legal. */ .field--boxed.err .field-in{ border-color:var(--color-error); } .field-msg{ display:none; font-family:var(--font-sans); font-size:var(--cog-fs-legal); color:var(--color-error); margin:var(--space-2) 0 0; } .field--boxed.err .field-msg{ display:block; } /* Formulaires câblés (lot routing 2/7) : honeypot masqué + erreur d'envoi (même registre que .field-msg). */ .field-hp{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; } .form-error{ font-family:var(--font-sans); font-size:var(--cog-fs-legal); color:var(--color-error); margin:0; } .btn[disabled]{ opacity:.32; pointer-events:none; } /* ========================================================================== — LIBRARY — EXTRACTIONS 21/07 (décision : aucun composant en double copie) .card (vivait en 3 copies : Acheter / Fiche-bien / Courtage .sold-grid), marché local §2.21 (Courtage / Estimation), chips filtre .tf-chip, notes §2.6bis (vivaient dans le funnel), figures-band §2.20 (anatomie unique flex + .fb-sep — décision 21/07, variante --xl pour Home). Décision 21/07 : tout rond interactif = --cog-control-md (44px). ========================================================================== */ /* --- L7 · .card — carte de bien -------------------------------------------- */ .card{position:relative;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--rule);border-radius:0;overflow:hidden;transition:box-shadow .4s ease,transform .4s ease,border-color .4s ease} .card:hover{box-shadow:var(--shadow-card);transform:translateY(-4px);border-color:var(--rule)} .card-link{position:absolute;inset:0;z-index:1} /* Focus clavier (amendement 26/08, planche « États interactifs ») : trou d'inventaire réel — sans cette règle, une carte entière n'affiche AUCUN repère au clavier (le lien plein cadre est invisible). Anneau canonique en INSET (même alpha --cog-ink-a05) : .card a overflow:hidden et des angles vifs bord-à-bord en grille, un anneau extérieur serait rogné. */ .card-link:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--cog-ink-a05)} .card-ph{position:relative;aspect-ratio:3/2.15;overflow:hidden;background:var(--paper-deep)} .card-ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s cubic-bezier(.2,.7,.2,1)} .card:hover .card-ph img{transform:scale(1.05)} .card-shade{position:absolute;inset:0;z-index:2;display:none;align-items:center;justify-content:center;background:var(--status-scrim)} .card-shade span{font-family:var(--font-sans);font-weight:600;font-size:var(--cog-fs-sm);letter-spacing:.16em;text-transform:uppercase;color:var(--cog-white);border:1px solid rgba(255,255,255,.7);padding:9px 18px} .card.is-reserve .card-shade,.card.is-vendu .card-shade{display:flex} .card-badge{position:absolute;left:16px;top:16px;z-index:3;font-family:var(--font-sans);font-size:var(--cog-fs-2xs);font-weight:600;letter-spacing:.13em;text-transform:uppercase;padding:7px 12px;color:var(--cog-white)} .card-badge.vente{background:var(--status-vente);backdrop-filter:blur(4px)} .card-badge.neuf{background-image:var(--status-neuf)} .card-badge.reserve{background:var(--status-reserve)} .card-badge.vendu{background:var(--status-vendu)} .card-badge.excl{background-image:var(--grad-45)} .card-badge.rare{background:var(--cog-ink)} /* « Objet rare » — figé 21/07, usage éditorial */ .card-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:var(--cog-control-md);height:var(--cog-control-md);border-radius:var(--radius-full);background:rgba(250,250,247,.9);backdrop-filter:blur(6px);display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--cog-ink-a05);opacity:0;transition:opacity .3s ease,background .3s ease,transform .3s ease;cursor:pointer} /* 44px — arbitrage 21/07 : tout rond interactif = --cog-control-md */ .card-nav.prev{left:14px} .card-nav.next{right:14px} .card:hover .card-nav{opacity:1} .card-nav:hover{background:var(--cog-white);transform:translateY(-50%) scale(1.06)} .card-nav svg{width:var(--icon-sm);height:var(--icon-sm);stroke:var(--icon-strong);fill:none;stroke-width:var(--icon-stroke);stroke-linecap:round;stroke-linejoin:round} @media (hover:none){.card-nav{opacity:.92}} .card-count{position:absolute;right:14px;bottom:14px;z-index:2;font-family:var(--font-sans);font-size:var(--cog-fs-xs);font-weight:600;letter-spacing:.04em;color:var(--cog-white);background:rgba(26,26,31,.55);backdrop-filter:blur(4px);padding:5px 9px;border-radius:var(--radius-pill)} .card-video{position:absolute;left:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-sans);font-size:var(--cog-fs-xs);font-weight:600;letter-spacing:.04em;color:var(--cog-white);background:rgba(26,26,31,.55);backdrop-filter:blur(4px);padding:5px 10px 5px 8px;border-radius:var(--radius-pill)} .card-video svg{width:var(--icon-sm);height:var(--icon-sm);color:var(--cog-white)} .card-body{padding:22px 24px;display:flex;flex-direction:column;gap:9px;flex:1} .card-price{font-family:var(--font-sans);font-weight:600;font-size:var(--cog-fs-price-card);letter-spacing:-.015em;color:var(--ink);line-height:1.1} .card-price .pm{font-size:var(--cog-fs-sm);font-weight:500;color:var(--ink-mute);letter-spacing:.02em} /* Repli « Prix sur demande » des cartes de biens (17/09, cogestim_property_card_price_html()). Hérite de .card-price : même emplacement, même corps, même poids que le montant qu'il remplace — seule la couleur passe en --ink-soft, pour distinguer une absence d'information d'un montant réel sans créer un second niveau de hiérarchie. Le letter-spacing négatif de .card-price est neutralisé : il est calibré pour des chiffres, pas pour du texte courant. Règle distincte de `.card--projet .card-price .price-free` (cartes projet : corps plus petit, contexte « Dès CHF » propre aux promotions). */ .card-price .price-free{letter-spacing:0;color:var(--ink-soft)} .card-loc{font-family:var(--font-sans);font-size:var(--cog-fs-sm);color:var(--ink-soft);display:flex;align-items:center;gap:7px} /* Ligne de situation (lot situation 13/10) : sous la localité, alignée sur son texte (icône + gap 7px), même registre que .card-dist. */ .card-sit{font-family:var(--font-sans);font-size:var(--cog-fs-sm);color:var(--ink-mute);line-height:1.4;margin-top:-6px;padding-left:calc(var(--icon-sm) + 7px)} .card-loc svg{width:var(--icon-sm);height:var(--icon-sm);stroke:var(--icon-accent);fill:none;stroke-width:var(--icon-stroke);stroke-linecap:round;stroke-linejoin:round;flex-shrink:0} .card-title{font-family:var(--font-sans);font-weight:500;font-size:var(--cog-fs-cap);color:var(--ink);line-height:1.32;margin:2px 0 0} .card-specs{display:flex;gap:18px;flex-wrap:wrap;padding-top:14px;margin-top:4px;border-top:1px solid var(--rule-soft)} .card-specs .sp{display:flex;align-items:center;gap:7px;font-family:var(--font-sans);font-size:var(--cog-fs-sm);color:var(--ink-soft)} .card-specs .sp svg{width:var(--icon-sm);height:var(--icon-sm);stroke:var(--icon-muted);fill:none;stroke-width:var(--icon-stroke);stroke-linecap:round;stroke-linejoin:round} .card-specs .sp b{font-weight:600;color:var(--ink)} .card-broker{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:16px} .card-broker .av{width:40px;height:40px;border-radius:var(--radius-full);overflow:hidden;flex-shrink:0;background:var(--paper-deep);display:inline-flex;align-items:center;justify-content:center} .card-broker .av img{width:100%;height:100%;object-fit:cover;object-position:center 12%} .card-broker .av .mono{font-family:var(--font-sans);font-weight:600;font-size:var(--cog-fs-cta);letter-spacing:.02em;color:var(--ink-soft)} .card-broker .bk{display:flex;flex-direction:column;line-height:1.25;min-width:0} .card-broker .bk .bn{font-family:var(--font-sans);font-weight:600;font-size:var(--cog-fs-sm);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .card-broker .bk .br{font-family:var(--font-sans);font-size:11.5px;color:var(--ink-mute);letter-spacing:.02em} .card-contact{position:relative;z-index:2;margin-left:auto;flex-shrink:0;width:var(--cog-control-md);height:var(--cog-control-md);border-radius:var(--radius-full);border:1px solid var(--rule);display:inline-flex;align-items:center;justify-content:center;transition:border-color .3s ease,background .3s ease,color .3s ease;color:var(--ink)} .card-contact svg{width:var(--icon-md);height:var(--icon-md);stroke:currentColor;fill:none;stroke-width:var(--icon-stroke);stroke-linecap:round;stroke-linejoin:round} .card-contact:hover{border-color:transparent;background-image:var(--grad-45);color:var(--cog-white)} .card.is-vendu{opacity:.72} .card.is-vendu:hover{transform:none} /* --- L8 · Chips de filtre — famille « Filtrer » (§4.5.8) ------------------- */ .team-filter{display:flex;flex-wrap:wrap;gap:10px;margin:0} .tf-chip{font-family:var(--font-sans);font-weight:500;font-size:var(--cog-fs-cta-caps);letter-spacing:.02em;color:var(--ink-soft);padding:9px 18px;border:1px solid var(--rule);border-radius:var(--radius-pill);cursor:pointer;background:transparent;transition:color .3s ease,border-color .3s ease,background .3s ease} .tf-chip:hover{border-color:var(--ink);color:var(--ink)} .tf-chip.on{background:var(--ink);border-color:var(--ink);color:var(--cog-white)} /* Focus clavier (amendement 26/08, planche « États interactifs ») : trou d'inventaire — anneau canonique. Incohérence tf-chip (hover ink) vs ville-chip (hover primary) constatée et tracée dans la même planche : deux familles distinctes (Filtrer vs Nav SEO), non fusionnées, arbitrage de terminologie reporté — pas d'action dans cette passe. */ .tf-chip:focus-visible{outline:none;box-shadow:var(--cog-focus-ring)} /* --- L9 · Marché local §2.21 ----------------------------------------------- */ .price-card{display:flex;flex-direction:column} .price-card .ttl{font-family:var(--font-sans);font-weight:500;font-size:var(--cog-fs-h4);color:var(--ink);margin:0} .price-asof{font-family:var(--font-sans);font-size:var(--cog-fs-xs);letter-spacing:.04em;color:var(--ink-mute);margin:var(--space-4) 0 0} .price-card .market-filter{margin:var(--space-12) 0 0} /* .mp-bar — rangée d'outils unique (chips + sélecteur de type), patron .res-bar/.res-tools §L17 transposé au bloc marché (portage planche Marche-prix-selecteur-type-bien.html, variante A, 15/09). Aucune valeur nouvelle : gap --space-6, rythme vertical --space-12 déjà ci-dessus. */ .mp-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap;margin-top:var(--space-12)} .price-card .mp-bar .market-filter{flex:1 1 auto;margin-top:0} /* Sélecteur de type : .sf.has-chev/.field-select §L20 (swap 15/09, constat vivant — remplace le .sort-wrap posé le matin même, liste native non stylable). .sf porte déjà padding-bottom:6px (§L17) : neutralisé ici, la rangée .mp-bar n'a pas la respiration verticale des panneaux De/À. */ .mp-bar .sf{flex:0 0 auto;padding-bottom:0} @media (max-width:560px){.mp-bar .sf{width:100%}} .market-row{display:flex;align-items:stretch;gap:0;margin-top:var(--space-16);padding:var(--space-4) 0;transition:opacity .22s ease,transform .22s ease} .market-row.is-switching{opacity:0;transform:translateY(6px)} .market-col{flex:1;min-width:112px;display:flex;flex-direction:column;gap:var(--space-7);padding:0 clamp(16px,2vw,26px);border-right:1px solid var(--rule)} .market-col:first-child{padding-left:0} .market-col:last-child{border-right:none;padding-right:0} .market-col .kicker{font-family:var(--font-sans);font-size:var(--cog-fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);font-weight:600} .market-col .lbl-sub{font-family:var(--font-sans);font-size:var(--cog-fs-sm);color:var(--ink-soft);margin-top:2px} .market-col .val{font-family:var(--font-sans);font-weight:300;font-size:clamp(32px,3.1vw,48px);line-height:.95;letter-spacing:-.015em;color:var(--ink);white-space:nowrap;margin-top:2px} .market-col .val small{font-size:var(--cog-fs-lab);color:var(--ink-soft);font-weight:400;letter-spacing:0;margin-left:3px} .market-spark{display:block;width:56px;height:18px;margin-top:var(--space-3);stroke:var(--color-success);opacity:.9} .market-spark polyline{stroke-dasharray:100;stroke-dashoffset:0} .market-col .tr{display:inline-flex;align-items:baseline;gap:3px;font-family:var(--font-sans);font-size:var(--cog-fs-body);color:var(--ink-mute)} .market-col .tr svg{width:10px;height:10px;stroke:var(--color-success);fill:none;stroke-width:1.7;flex:0 0 auto;align-self:center} .market-col .tr .tr-plus{color:var(--color-success);font-weight:500} .market-col .tr .cu{color:var(--ink);font-weight:500} .market-col .per{font-family:var(--font-sans);font-size:var(--cog-fs-2xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)} @media (prefers-reduced-motion: no-preference){ .market-row:not(.is-visible) .market-spark polyline{stroke-dashoffset:100} .market-row.is-visible .market-spark polyline{transition:stroke-dashoffset .8s cubic-bezier(.2,.7,.2,1)} .market-row.is-visible .market-col:nth-child(1) .market-spark polyline{transition-delay:.05s} .market-row.is-visible .market-col:nth-child(2) .market-spark polyline{transition-delay:.15s} .market-row.is-visible .market-col:nth-child(3) .market-spark polyline{transition-delay:.25s} .market-row.is-visible .market-col:nth-child(4) .market-spark polyline{transition-delay:.35s} .market-row.is-visible .market-col:nth-child(5) .market-spark polyline{transition-delay:.45s} .market-row:not(.is-visible) .tr svg{opacity:0;transform:translateY(5px)} .market-row.is-visible .tr svg{opacity:1;transform:translateY(0);transition:opacity .4s ease,transform .4s ease} .market-row.is-visible .market-col:nth-child(1) .tr svg{transition-delay:.5s} .market-row.is-visible .market-col:nth-child(2) .tr svg{transition-delay:.6s} .market-row.is-visible .market-col:nth-child(3) .tr svg{transition-delay:.7s} .market-row.is-visible .market-col:nth-child(4) .tr svg{transition-delay:.8s} .market-row.is-visible .market-col:nth-child(5) .tr svg{transition-delay:.9s} } @media (max-width:700px){ .market-row{display:grid;grid-template-columns:1fr 1fr;gap:22px 20px} .market-col{border-right:none;padding:0} .market-col.canton{grid-column:1/-1} } .market-consolidation{margin-top:30px;padding:26px 0;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:12px} .market-consolidation .kicker{font-family:var(--font-sans);font-size:var(--cog-fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);font-weight:600} .market-consolidation .empty-txt{font-family:var(--font-sans);font-style:italic;font-size:15px;color:var(--ink-soft);line-height:1.6;margin:0;max-width:48ch} .price-legend{font-family:var(--font-sans);font-style:italic;font-size:var(--cog-fs-cta-caps);color:var(--ink-soft);margin-top:var(--space-8);max-width:54ch} /* --- L10 · Notes §2.6bis (pattern A / pattern B) --------------------------- */ .note-a{display:flex;gap:8px;align-items:flex-start;background:var(--paper);border-left:2px solid var(--rule);border-radius:0;padding:7px 12px;margin-top:6px} .note-a svg{width:16px;height:16px;stroke:var(--icon-muted);fill:none;stroke-width:1.6;flex:0 0 auto;margin-top:1px} .note-a span,.note-a p{font-family:var(--font-sans);font-size:var(--cog-fs-legal);line-height:1.5;color:var(--ink-mute);margin:0} .note-a b{color:var(--ink);font-weight:600} .note-b{display:flex;gap:8px;align-items:flex-start;margin-top:14px} .note-b svg{width:16px;height:16px;stroke:var(--icon-muted);fill:none;stroke-width:1.6;flex:0 0 auto;margin-top:1px} .note-b span{font-family:var(--font-sans);font-size:var(--cog-fs-legal);line-height:1.5;color:var(--ink-mute);margin:0} /* --- L11bis · Réassurance — pattern unique .garantie §2.20bis (décision 22/07, base .tb-item Estimation) + 2 dérivés autorisés (.garantie--carte, liste-bénéfices déjà couverte par co-checklist/start-feats/aug-feats/why-item, non touchée ici). La sécurité des données reste .note-a + icône lock — jamais un bloc garantie. ------ */ .garantie-row{display:flex;align-items:flex-start;gap:0} .garantie{flex:1;display:flex;gap:16px;padding:0 clamp(16px,2.2vw,26px)} .garantie:first-child{padding-left:0} .garantie:last-child{padding-right:0} .garantie svg{width:var(--icon-lg);height:var(--icon-lg);stroke:var(--icon-muted);fill:none;stroke-width:var(--icon-stroke);flex-shrink:0;margin-top:2px} /* Exceptions doctrinales certifiées 22/07 : pin localisation (5.Estimation l.298) + check validation (l.308) — ne pas supprimer */ .garantie svg.ic-accent{stroke:var(--icon-accent)} .garantie svg.ic-strong{stroke:var(--icon-strong)} .garantie-txt b{display:block;font-family:var(--font-sans);font-weight:600;font-size:15px;color:var(--ink)} .garantie-txt span{display:block;font-family:var(--font-sans);font-size:13.5px;color:var(--ink-soft);line-height:1.55;margin-top:5px} .garantie-sep{width:1px;background:var(--rule);align-self:stretch;flex-shrink:0} @media (max-width:920px){.garantie-row{flex-wrap:wrap;gap:24px 0}.garantie-sep{display:none}.garantie{flex:0 0 calc(50% - 12px);padding:0}} @media (max-width:560px){.garantie{flex:0 0 100%}} /* Dérivé carte (ex. .helpers Acheter) : même anatomie icône+titre+phrase, empilée verticalement dans une carte au lieu d'une rangée. Extraction 27/07 (décision « aucun composant en double copie ») : l'anatomie complète de la carte, qui vivait en local dans Acheter (§CTA secondaires), devient la source unique — Acheter et Carrière la consomment sans la redéclarer. Positionnement (grille, fond de la variante photo) reste au conteneur de page. */ .garantie--carte{display:flex;flex-direction:column;gap:var(--space-5);padding:var(--space-8);background:var(--paper-warm);border:1px solid transparent;transition:box-shadow .4s ease,transform .4s ease,border-color .4s ease} /* Le dérivé carte n'est pas dans une rangée à séparateurs : il annule les retraits de bord de `.garantie:first-child`/`:last-child` (sinon la 1ʳᵉ carte d'une grille perd son padding gauche). */ .garantie--carte:first-child,.garantie--carte:last-child{padding:var(--space-8)} .garantie--carte svg{margin-top:0} .garantie--carte .hico{width:44px;height:44px;border-radius:var(--radius-full);background:var(--cog-white);display:inline-flex;align-items:center;justify-content:center} .garantie--carte .hico svg{width:var(--icon-lg);height:var(--icon-lg);stroke:var(--icon-strong);fill:none;stroke-width:var(--icon-stroke);stroke-linecap:round;stroke-linejoin:round} .garantie--carte h4{margin:0;font-family:var(--font-sans);font-weight:600;font-size:var(--cog-fs-body);color:var(--ink)} .garantie--carte p{margin:0;font-size:var(--cog-fs-sm);line-height:1.5;color:var(--ink-soft)} .garantie--carte .arrow{margin-top:auto;font-family:var(--font-sans);font-size:var(--cog-fs-lab);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:currentColor;display:inline-flex;align-items:center;gap:8px;transition:gap .3s ease} .garantie--carte:hover .arrow{gap:14px} .garantie--carte .arrow svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:var(--icon-stroke);stroke-linecap:round;stroke-linejoin:round} /* Variante photo : la pastille d'icône est remplacée par une photo pleine largeur, angles vifs, format portrait 4/5 (même format que .svc/.tc). */ .garantie--carte.has-photo{padding:0;gap:0;overflow:hidden} .garantie--carte.has-photo:first-child,.garantie--carte.has-photo:last-child{padding:0} .garantie--carte .gc-ph{position:relative;aspect-ratio:4/5;background:var(--paper-deep);overflow:hidden} .garantie--carte .gc-ph img,.garantie--carte .gc-ph image-slot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.3s cubic-bezier(.2,.7,.2,1)} .garantie--carte:hover .gc-ph img,.garantie--carte:hover .gc-ph image-slot{transform:scale(1.05)} .garantie--carte .gc-body{padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-5)} /* --- L6 · aug-row — texte+image générique (motif Courtage, porté depuis le PNG et les liens transparents .map-pin). Règles du SVG marketing (spécification fournie, variables --cm-* mappées sur les tokens du thème) ; .cm-lien omis (groupe cm-connexions vide). Les états sont portés par .cm-agence : :hover, :focus-visible et .is-active (posé par cogestim-home.js : survol/focus de la liste, entrée ouverte). Seuls les points interactifs (attribut role, posé côté serveur) ont curseur et état actif ; le point de l'agence courante / sans page reste inerte. */ .map-wrap--svg{display:flex;align-items:center} .map-wrap .cogestim-map{height:auto} .cogestim-map{ --cm-fond:var(--cog-paper-warm,#F0EBE3); --cm-contour:var(--cog-ink,#1A1A1F); --cm-contour-opacity:.55; --cm-lake:var(--cog-ink,#1A1A1F); --cm-lake-opacity:.10; --cm-label:var(--cog-ink,#1A1A1F); --cm-halo:var(--cog-paper-warm,#F0EBE3); --cm-region:var(--cog-ink-mute,#6E6E76); width:100%;height:auto; } .cogestim-map .cm-fond{fill:var(--cm-fond)} .cogestim-map .cm-lac{fill:var(--cm-lake);fill-opacity:var(--cm-lake-opacity)} .cogestim-map .cm-contour{stroke:var(--cm-contour);stroke-opacity:var(--cm-contour-opacity)} .cogestim-map .cm-region{fill:var(--cm-region)} .cogestim-map .cm-label{fill:var(--cm-label)} .cogestim-map .cm-label-halo{fill:var(--cm-halo);stroke:var(--cm-halo)} .cogestim-map .cm-agence[role]{cursor:pointer} .cogestim-map .cm-agence:focus{outline:none} .cogestim-map .cm-agence:focus-visible .cm-hit{stroke:var(--red);stroke-width:2} .cogestim-map .cm-dot{transition:transform var(--dur-base,.4s) var(--ease-out,ease-out);transform-box:fill-box;transform-origin:center} /* Halo : le disque de zone (.cm-hit) se teinte et grandit sous le point ; le libellé de la ville passe en rouge. */ .cogestim-map .cm-hit{fill:var(--red);fill-opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4);transition:fill-opacity var(--dur-base,.4s) var(--ease-out,ease-out),transform var(--dur-base,.4s) var(--ease-out,ease-out)} .cogestim-map .cm-label{transition:fill var(--dur-fast,.3s) var(--ease-out,ease-out)} .cogestim-map .cm-agence[role]:hover .cm-dot, .cogestim-map .cm-agence[role]:focus-visible .cm-dot, .cogestim-map .cm-agence.is-active .cm-dot{transform:scale(1.8)} .cogestim-map .cm-agence[role]:hover .cm-hit, .cogestim-map .cm-agence[role]:focus-visible .cm-hit, .cogestim-map .cm-agence.is-active .cm-hit{fill-opacity:.2;transform:scale(1.5)} .cogestim-map .cm-ville:has(.cm-agence[role]:hover) .cm-label, .cogestim-map .cm-ville:has(.cm-agence[role]:focus-visible) .cm-label, .cogestim-map .cm-ville:has(.cm-agence.is-active) .cm-label{fill:var(--red)} @media (prefers-reduced-motion:reduce){.cogestim-map .cm-dot,.cogestim-map .cm-hit,.cogestim-map .cm-label{transition:none}} /* Variante compacte : sous ce seuil de conteneur les points (Yverdon/Orbe) se chevauchent au doigt ; la liste .ag-mini reste la navigation (arbitrage 02/11 conservé : seuil sur le conteneur, non sur le viewport). */ .map-wrap--compact{container-type:inline-size} @container (max-width:540px){.map-wrap--compact .cm-agence{pointer-events:none}} /* Entrée de liste mise en évidence au survol/focus de son point : mêmes affordances que le survol direct. */ .ag.is-hl .circle-cta--toggle{border-color:var(--color-text);color:var(--color-text)} .ag.is-hl .circle-cta--toggle::before{transform:scale(1)} .ag.is-hl .circle-cta--toggle .bar, .ag.is-hl .circle-cta--toggle .bar::after{background:currentColor} .ag-mini.is-hl .ag-go .lbl{display:block} .ag-mini.is-hl .ag-go::after{transform:scaleX(1)} /* --- L29 · .doc-list/.doc-row — liste de documents téléchargeables (lot doc-list, 31/08, certifié 6b8b6d1 — BIBLIOTHEQUE-COGESTIM-v1 §2.39). Rangée-lien plein cadre à séparateurs fins, dérivée de .ag-mini/.facts. Portage verbatim de la planche design/reference/Documents utiles - Composant doc-row.html — aucune valeur ajoutée ici. */ .doc-group{margin-top:var(--space-16)} .doc-group:first-child{margin-top:0} .doc-group-title{font-family:var(--sans);font-size:var(--cog-fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);font-weight:600;margin:0 0 var(--space-4)} .doc-list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none} .doc-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px var(--space-6);padding:18px 0;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--ink)} .doc-list li:first-child>.doc-row{border-top:1px solid var(--rule)} .doc-title{flex:1 1 auto;min-width:0;font-family:var(--sans);font-weight:500;font-size:var(--cog-fs-cap);letter-spacing:-.002em;color:var(--ink);transition:color var(--dur-fast) ease} .doc-meta{display:flex;align-items:center;gap:var(--space-3);margin-left:auto} .doc-tag{display:inline-flex;align-items:center;font-family:var(--sans);font-size:var(--cog-fs-2xs);font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--rule);background:var(--paper);border-radius:0;padding:3px 9px} .doc-tag.lang{color:var(--ink-mute)} .doc-act{display:inline-flex;color:var(--icon-strong)} .doc-act svg{width:var(--icon-md);height:var(--icon-md);stroke:currentColor;fill:none;stroke-width:var(--icon-stroke);stroke-linecap:round;stroke-linejoin:round;flex-shrink:0} .doc-act svg.fill{fill:currentColor;stroke:none} .doc-row:hover .doc-title{color:var(--red)} .doc-row:hover .doc-act{color:var(--red)} .doc-row:focus-visible{outline:none;box-shadow:var(--cog-focus-ring);border-radius:2px} @media (max-width:560px){ .doc-row{padding:16px 0} .doc-title{flex-basis:100%} .doc-meta{margin-left:0} .doc-act{margin-left:auto} } /* Amendement 31/08 (filtre langue + sommaire, planche « Documents utiles - Filtre langue et sommaire.html », BIBLIOTHEQUE §2.39/§9septies) : AUCUN CSS propre pour le filtre — .team-filter/.tf-chip §L8 verbatim (précédent #teamFilter, cogestim/courtiers). Seule règle nouvelle : masquage, patron .tc.tf-hide (Courtage §10) porté sur .doc-row ET .doc-group. */ .doc-row.tf-hide{display:none} .doc-group.tf-hide{display:none} /* Correctif fidélité spec 4 (planche « Documents utiles - Filtre langue et sommaire.html ») : `.tools` est déjà un composant certifié §2.32 (« 4 cartes d'actions », grid 4 colonnes) — collision de nom involontaire avec la planche, où `.tools` n'est que le conteneur de démonstration (sommaire + filtre EMPILÉS, jamais une grille). Réutiliser cette classe ici aurait mis les deux rangées côte à côte au lieu de les empiler. Conteneur renommé `.doc-tools` (bloc-scopé, aucun composant certifié existant ne porte ce nom) : empilement simple, sommaire pleine largeur puis filtre dessous — markup/espacements verbatim spec 4 (villes-row margin-top:0 en première position, filtre margin-top:18px). */ .wp-block-cogestim-doc-list .doc-tools{display:flex;flex-direction:column;margin-bottom:var(--space-16)} .wp-block-cogestim-doc-list .villes-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px} .wp-block-cogestim-doc-list .doc-filter{margin-top:18px} /* Atterrissage sommaire d'ancres : `header.site` est `position:sticky;top:0` (cogestim-base.css) et recouvre tout ancrage direct (`#id` scrollIntoView) sans compensation — AUCUN token/règle `scroll-margin`/`scroll-padding` n'existe dans le système à ce jour (vérifié : grep vide sur les 4 fichiers CSS thème) ; le header n'a pas non plus de hauteur figée en token (intrinsèque au logo 44px + padding vertical de `.wrap.nav`, jamais mesurée/fixée). Gap confirmé PAGE-LARGE, pas propre à ce bloc : les ancres `#s-marche`/ `#s-contact-form` des 8 pages agences (agence-page-factory.php) ont le même défaut — signalé, hors périmètre de ce lot (aucune correction transverse apportée ici). Valeur locale approximative (logo+padding ≈ 76px de chrome visible + `--space-10` de respiration, aucun token dédié n'existant) — à remplacer par un token `--header-h` réel si/quand une passe transverse scroll-margin est décidée. */ .wp-block-cogestim-doc-list .doc-group{scroll-margin-top:calc(76px + var(--space-10))} /* .hero--editorial — hero réduit, hero portant seulement l'identité de la page (pas d'outil ni de CTA de conquête) : §2.8, tranché session 31/08 (planche « Hero réduit — Hauteurs et règle », écart daté planche Direction 28/08). Ne redéfinit que hauteur + padding bas ; anatomie/ancrage haut du hero plein restent inchangés. Règle de spécificité identique à celle du bloc hero-courtage (blocks/hero-courtage/style.css) qui la redéclare pour primer sur `.wp-block-cogestim-hero-courtage.hero` — gardées synchronisées. */ .hero.hero--editorial{min-height:var(--cog-hero-h-editorial);padding-bottom:clamp(48px,5vw,72px)} /* Sans image de fond : fond --cog-grad-scene (token A4, précédent hero Home), scrim §2.8 conservé tel quel. */ .hero--noimg{background:var(--cog-grad-scene)} /* --- L20b · .field-select--multi — variante multi-sélection de .field-select (§L20) Champ « Type de bien » des listings /acheter/ /louer/ seul. Planche design/reference/Field-select-multi.html (13/10/2026, commit 3aab1a7) ; portage listing 14/10. Composant DÉRIVÉ : consomme sans les restyler .sf/.has-chev, .fr-trigger, .fr-panel (--fr-panel-w, --z-popover), .fs-native (§L18–L20), .consent (§L5), .fr-clear.link (§L18), + modificateur .consent--filter (amendement §L5, cases cochées en --ink). Aucun littéral nouveau : --space-*, --radius-sm, --rule, --rule-soft, --ink-mute (opacité .5 = valeur §L20). Mobile : une seule règle propre, voir « Modale mobile » ci-dessous. */ /* — Déclencheur : .fr-trigger §L18 inchangé (label CAPS, valeur, chevron .has-chev). Libellé L-B « Appartement +N » = seul consommateur des 3 règles ci-dessous ; L-A « N types » n'en demande aucune. — */ .field-select--multi .fr-trigger.fsm-split{display:flex;align-items:baseline;gap:var(--space-2)} .field-select--multi .fsm-first{min-width:0;overflow:hidden;text-overflow:ellipsis} .field-select--multi .fsm-more{flex-shrink:0} /* — Registre cases (retenu 13/10, Luis ; registre chips écarté, états désactivés non produits par le listing, règles retirées 14/10) : .consent §L5 consommé en rangée d'option. Positionnement seul (marge, padding, alignement) ; survol = traitement .fs-opt §L20 (--rule-soft, --radius-sm). — */ .field-select--multi .fsm-checks{display:flex;flex-direction:column;margin-top:var(--space-2)} .field-select--multi .fsm-checks .consent{margin:0;align-items:center;padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm)} .field-select--multi .fsm-checks .consent:hover{background:var(--rule-soft)} .field-select--multi .fsm-checks .consent label{flex:1;cursor:pointer} /* — .consent--filter : modificateur PROPOSÉ (13/10, retour Luis) — AMENDEMENT BIBLIOTHÈQUE §L5 à consigner avant portage. Case cochée en --ink (famille Filtrer, §4.5.8 inversé noir) au lieu de --grad-45 (registre consentement nLPD). Coche blanche ::after, bordure repos, focus : §L5 inchangés. — */ .consent.consent--filter input:checked{background-image:none;background-color:var(--ink);border-color:var(--ink)} /* — Modale mobile (constat portage 14/10) : dans #searchbar.open le .sf est ajusté à son contenu et aligné à droite (≈ 97px pour « Terrain »), donc width:100% (règle certifiée) écrase « Local commercial » / « Place de parc ». Le panneau multi prend la largeur de ses libellés (plancher = champ), ancré au bord droit du champ, borné à l'écran. — */ @media (max-width:720px){ .field-select--multi .fr-panel{width:max-content;min-width:100%;max-width:calc(100vw - var(--space-6) * 2);left:auto;right:0} } /* — Pied : .fr-clear.link §L18 verbatim (piste T-β). Aucune règle. — */ /* --- L20c · .sel-row / .sel-chip — étiquettes de localités du champ Localité (§L19), listings /acheter/ /louer/ Planche design/reference/Localites-chips.html (27/10/2026, v2) ; portage 29/10. Section reprise telle quelle de design/assets/localites-chips.css. --- */ /* ============================================================ Localités multiples — étiquettes de sélection dans le champ Planche : design/reference/Localites-chips.html (27/10/2026, v2) Listings /acheter/ /louer/ (.searchbar, champ Localité .field-suggest §L19) et variantes Projets neufs (.pn-searchbar §L22, champ Ville). v2 (retour Luis 27/10, référence immoscout24.ch) : plus de rangée de pastilles rondes sous la barre. Au repos, le champ affiche une synthèse (« Morges +2 ») et garde sa hauteur. Au clic, il s'agrandit : le panneau ancré §L18 porte les étiquettes posées, puis les suggestions. COMPOSANT NOUVEAU : .sel-row / .sel-chip (étiquette compacte). Registre badge (§1.4 : rectangle à angles vifs), pas pastille : ni .tf-chip (Filtrer, bascule), ni .ville-chip (Nav, lien). Fond --paper-deep, texte --ink 13px/500, hauteur ≈ 25px. Glyphe : x (catalogue design/reference/cogestim-icons.html, Lucide). Aucun littéral nouveau : tokens seuls. ============================================================ */ /* — Zone des étiquettes, en tête du panneau ancré. Absente à 0 étiquette ([hidden]) : le panneau est alors celui du §L19, inchangé. — */ .sel-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);min-width:0;padding:var(--space-4) 0;margin-bottom:var(--space-2);border-bottom:1px solid var(--rule-soft)} .sel-row[hidden]{display:none} /* Effacer dans la rangée des étiquettes (29/10) : à droite sur la même ligne (le margin-top de .fr-clear tombe). */ #pan-ville .sel-row .fr-clear{margin:0 0 0 auto} /* — Étiquette — */ .sel-chip{ display:inline-flex;align-items:center;max-width:100%;box-sizing:border-box; min-height:calc(var(--icon-sm) + var(--space-3));padding:0 0 0 var(--space-3); border-radius:0;background:var(--paper-deep); font-family:var(--font-sans);font-weight:500;font-size:var(--cog-fs-cta-caps);letter-spacing:.02em;line-height:1.2;color:var(--ink); } .sel-lab{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* — Croix : seul contrôle de l'étiquette (