/* ============================================================ BALESTRA REAL ESTATE DEBT — COUCHE D'INTÉGRATION Tout ce que l'APPLICATION ajoute au kit statique et que celui-ci, servi depuis un dossier de fichiers plats, ne pouvait pas connaître. La règle de partage est simple, et c'est elle qui permet de rejouer une future livraison en écrasant quatre fichiers sans rien perdre : brand.css · _shared.css · site.css · _responsive.css = LE KIT, au caractère près. On ne les édite pas. _integration.css (ce fichier) = ce que le site gagne en devenant une application : trois langues, des messages du serveur, une césure allemande. Chargée APRÈS site.css et AVANT _responsive.css : ses règles portent sur des classes que le kit n'style pas, elles n'ont donc rien à disputer dans la cascade, et l'adaptation responsive garde le dernier mot comme le veut la note de livraison. ============================================================ */ /* ---- sélecteur de langue de la barre haute ---- Le kit affiche un « FR » fixe. L'application sert trois langues : il lui faut un vrai sélecteur. Même graisse et même corps que l'ancien libellé, la langue active passant à l'encre pleine pour se distinguer sans introduire une couleur de plus. */ .nav-langs{display:flex;align-items:center;gap:0;} /* 17 × 14 px de texte, c'est sous le minimum de 24 × 24 des recommandations d'accessibilité. Le rembourrage porte la cible à 29 × 28 sans déplacer le libellé : la gouttière passe de 10 à 12 px entre les deux mots, invisible à l'œil, et les deux cibles ne se chevauchent pas. */ .nav-langs .eyebrow{text-decoration:none;color:var(--encre-50);padding:7px 6px;} .nav-langs a.eyebrow:hover{color:var(--encre);} .nav-langs .is-current{color:var(--encre);font-weight:500;} .nav-panel-langs{display:flex;gap:6px;padding-top:14px;margin-top:4px;border-top:1px solid var(--encre-15);} .nav-panel-langs .eyebrow{text-decoration:none;color:var(--encre-50);padding:7px 6px;} .nav-panel-langs a.eyebrow:hover{color:var(--encre);} .nav-panel-langs .is-current{color:var(--encre);font-weight:500;} /* ---- messages du serveur ---- Un formulaire qui poste vraiment répond, et la réponse doit se voir avant le champ qu'elle commente. Le filet de gauche porte l'état — laiton pour l'accusé de réception, encre pour le refus — parce que la charte n'a ni vert ni rouge, et qu'une couleur d'alerte inventée ici jurerait. */ .site-flash{padding:14px 18px;margin-bottom:22px;font-size:13.5px;line-height:1.6; border:1px solid var(--encre-15);background:var(--chaux-2);} .site-flash--ok{border-left:2px solid var(--laiton);} .site-flash--err{border-left:2px solid var(--encre);} /* ---- composés allemands ---- « Portfolioverwaltungsgesellschaft », « Nutzungsbedingungen », « Gebündelte Privatanlegergelder » : un mot allemand dépasse couramment la largeur d'une colonne étroite. `lang` est posé sur , ces règles ne touchent donc aucune autre version du site. DEUX RÈGLES, ET ELLES NE FONT PAS LA MÊME CHOSE. La césure est un choix TYPOGRAPHIQUE : elle coupe aux endroits que le dictionnaire autorise, et c'est ce que le lecteur allemand attend. `overflow-wrap:anywhere` est un PLANCHER TECHNIQUE, et c'est lui qui empêche réellement le débordement. Trois raisons de ne pas s'en remettre à la seule césure : · `hyphens:auto` n'agit que si le navigateur embarque le dictionnaire allemand — un Chromium sans dictionnaire ne coupe rien ; · `overflow-wrap:break-word`, contrairement à `anywhere`, ne réduit PAS la largeur `min-content`. Or c'est elle qui dimensionne une piste de grille : le mot ne débordait pas de son paragraphe, il gonflait la colonne, qui débordait de la page ; · la propriété est HÉRITÉE : posée sur le corps, elle atteint aussi les et les des tableaux de positionnement, que toute liste d'éléments écrite à la main finit par oublier. Mesuré : sans elle, l'encart « Le projet » déborde de 8,5 px à 260 px de large, et l'actionnariat de 15 px. */ :lang(de) body{overflow-wrap:anywhere;} :lang(de) h1,:lang(de) h2,:lang(de) h3,:lang(de) h4, :lang(de) p,:lang(de) li,:lang(de) dt,:lang(de) dd,:lang(de) td,:lang(de) th{ hyphens:auto; } /* ============================================================ STYLES DU KIT SORTIS DES ATTRIBUTS `style=""` La livraison porte 96 styles inline. La règle du dépôt les interdit dans un gabarit, et une politique de sécurité qui voudrait un jour se passer de `style-src 'unsafe-inline'` bute dessus. Chaque déclaration est reprise à l'identique sous une classe : le rendu ne bouge pas d'un pixel. Ne figurent ici que les composants SERVIS SUR TOUTES LES PAGES — pied de page et bandeau de contact. Ce qui n'appartient qu'à une page est dans la feuille de cette page. ============================================================ */ /* ---- pied de page ---- */ .ft-logo{height:60px;width:auto;display:block;margin-bottom:18px;} .ft-pitch{max-width:320px;} .ft-address{margin-top:20px;} .ft-legal{max-width:900px;} .ft-links{display:flex;gap:22px;} /* LE REPLI EST RÉSERVÉ À L'ALLEMAND, et cette restriction n'est pas de la prudence de façade : posé sans condition, `flex-wrap` fait passer les trois liens à la ligne dès 1280 px en FRANÇAIS aussi — la barre du bas gagne 30 px à 1280, 88 px à 1024, 103 px à 768. Mesuré, et c'est un écart de rendu avec la livraison sur les huit pages. En allemand, « Nutzungsbedingungen » fait à lui seul 156 px : sans repli, le troisième lien sortait de l'écran sous 320 px, rogné par l'`overflow-x: clip` de `.page` et donc invisible. */ :lang(de) .ft-links{flex-wrap:wrap;} /* ---- bandeau de contact ---- */ .cta-band .eyebrow{margin-bottom:20px;} .cta-band .btn.solid{font-size:15px;} /* ---- portraits : l'image plutôt que le fond ---- Le kit pose les portraits en `background-image` inline. Une image de fond n'a pas de texte alternatif, ne se charge pas paresseusement et ne passe pas par l'empreinte d'AssetMapper. La vignette devient donc une vraie , posée en absolu dans le cadre `.ad-ph` et recadrée en `cover` : même cadrage centré, même ratio, même rendu — plus un alt, un chargement différé et une URL empreintée. */ .ad-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;} /* ============================================================ PLANCHERS ANTI-ROGNAGE `.page` est en `overflow-x: clip` : rien ne défile, le texte qui dépasse est simplement COUPÉ, sans barre de défilement pour le signaler. Un débordement ne se voit donc pas — il se mesure (`tools/site-fidelity/debordement.mjs`). Sous 350 px de largeur CSS — un téléphone de 390 px à 150 % de zoom, ou un 320 px à 125 % — deux endroits de la livraison rognaient du texte, dans les trois langues. La règle ci-dessous n'agit QUE sous cette pression : au- dessus, il n'y a rien à rétrécir et le rendu ne bouge pas d'un pixel. Vérifié au pixel sur cinq largeurs et trois zooms. ============================================================ */ /* ---- 1. Le titre coupé en plein mot ---- « Zones géographiques principales » : l'insécable soude les deux derniers mots en un bloc de 25 caractères qui, à 26 px de corps, ne tient pas dans 216 px. Le titre s'affichait « Zones géographiques princip ». `hyphens:auto` coupe d'abord aux endroits que le dictionnaire autorise, ce qui donne une vraie césure française. `overflow-wrap:anywhere` est le plancher pour le cas où le dictionnaire manque : mieux vaut une coupure inélégante qu'un mot amputé. */ .section-head h2,.part h2,.cta-band h2{hyphens:auto;overflow-wrap:anywhere;} /* ---- 2. Les valeurs du tableau de positionnement ---- Le repli de `.pc-r` vit dans `pages/offre.css`, et pas ici : `.pc-r > b` y porte déjà `text-align:right`, à la même spécificité. Cette feuille étant chargée AVANT celle de la page, une règle posée ici perdrait — c'est exactement le piège documenté plus haut, rencontré une seconde fois. */ /* ============================================================ BARRE HAUTE — LES DEUX APPELS, ET LEUR SEUIL DE REPLI Demandé le 3 septembre 2026. Écart de rendu assumé avec la livraison. ============================================================ */ /* ---- 1. Même hauteur pour les deux boutons ---- Le kit les laisse à 34,5 px et 42 px : mesuré, et l'écart se voit — deux appels côte à côte qui ne s'alignent ni en haut ni en bas. La hauteur n'est pas obtenue en retouchant les rembourrages, qui portent la respiration propre à chaque typographie (mono condensé d'un côté, sans de l'autre), mais par une hauteur minimale commune et un centrage. Les deux boutons gardent leur graisse et leur corps — le bouton plein reste réservé à l'origination, c'est une règle de charte — et prennent la même place. Changer le libellé ou la langue ne défait rien : c'est la boîte qui impose sa hauteur, pas le texte. */ .nav-secure, .nav-right .nav-cta{ display:inline-flex;align-items:center;justify-content:center; min-height:42px; } /* ---- 2. « Espace Client » ne doit jamais disparaître ---- `_responsive.css` masque `.nav-secure` sous 1080 px — la barre ne tient plus au-delà — mais ne fait apparaître le menu dépliant qu'à 1000 px. Entre les deux, sur 80 px de large, l'accès à l'espace client n'est NULLE PART : ni dans la barre, ni dans le menu. Seul le pied de page le porte encore, trois écrans plus bas. Le repli est donc avancé à 1080 px, là où la barre cède réellement : au- dessus, tout est visible ; en dessous, tout est dans le menu. Aucune largeur ne perd l'accès. La spécificité est montée à deux classes (`.nav .nav-burger`) parce que `_responsive.css` pose `.nav-burger{display:none}` HORS media query et se charge après cette feuille : à spécificité égale, elle gagnerait. */ @media (max-width:1080px){ .nav .nav-links, .nav .nav-right{display:none;} .nav .nav-burger{display:block;} } /* ============================================================ MENU DÉPLIANT — LE MOTIF QUE LES GENS CONNAISSENT Demandé le 3 septembre 2026. Écart de rendu assumé avec la livraison. Le kit ouvre une CARTE FLOTTANTE : 84 % de la largeur, ancrée à droite, bordée sur ses quatre côtés, avec des marges de chaque côté. Ce n'est pas ce qu'un visiteur attend d'un menu hamburger — il attend un panneau qui descend sous la barre et occupe toute la largeur, avec des entrées alignées sur la marge du texte et une cible tactile qui court d'un bord à l'autre. Toutes les règles montent d'un cran de spécificité (`.nav .nav-panel`) : `_responsive.css` porte les originales et se charge APRÈS cette feuille. À spécificité égale, c'est elle qui gagnerait. ============================================================ */ /* Le panneau s'ancre sur la BARRE, pas sur le bouton. Sans cela, `left:0` partirait du bord gauche de l'icône, à 44 px du bord de l'écran. */ .nav .nav-burger{position:static;} .nav .nav-panel{ left:0;right:0;top:100%;width:auto; padding:0;border:none;border-top:1px solid var(--encre-15); box-shadow:0 16px 40px rgba(27,25,23,.12); } /* Les entrées suivent la gouttière de la page : le menu se lit dans le même axe que le contenu qu'il recouvre. La cible tactile, elle, va d'un bord à l'autre — c'est toute la largeur qui est cliquable, pas le seul libellé. */ .nav .nav-panel > a{ padding:16px var(--gouttiere); border-bottom:1px solid var(--encre-08); } .nav .nav-panel > a:last-of-type{border-bottom:none;} .nav .nav-panel a.nav-cta{ margin:12px var(--gouttiere) 16px; padding:16px; border-bottom:none; } /* « Espace Client » est une ENTRÉE, pas un titre. Le kit la compose en mono capitales 11 px : dans un panneau où tout le reste est en 15 px, elle se lit comme l'intitulé de la section qui la suit, et personne ne la touche. Elle reprend donc le corps des autres entrées ; le filet au-dessus et la couleur atténuée suffisent à la dire secondaire. `!important` répond au `!important` de la règle d'origine — c'est le seul moyen de la battre sans réécrire la feuille du kit. */ .nav .nav-panel a.nav-panel-secure{ font-family:var(--sans)!important; font-size:15px!important; letter-spacing:0; text-transform:none; padding:16px var(--gouttiere)!important; margin-top:0; } /* Le sélecteur de langue est une RANGÉE. `_responsive.css` pose `.nav-panel a{display:block;font-size:15px;padding:14px 16px}` sur TOUS les liens du panneau, y compris ceux-ci : les deux langues alternatives passaient en blocs de 15 px et cassaient la rangée, la langue courante restant, elle, à 10 px. Il faut donc redire la mise en forme, pas seulement l'espacement. */ .nav .nav-panel-langs{ padding:14px var(--gouttiere); margin-top:0; border-top:1px solid var(--encre-15); } .nav .nav-panel-langs .eyebrow{ display:inline-flex;align-items:center; font-family:var(--sans);font-size:11px;letter-spacing:.09em; padding:7px 6px;border-bottom:none; } /* L'icône devient une croix. C'est la moitié du motif : sans elle, rien ne dit que le même bouton referme ce qu'il vient d'ouvrir. Les deux barres extérieures pivotent et se rejoignent, la médiane s'efface — 5 px de gouttière et 1,5 px de trait, d'où les 6,5 px de translation. */ .nav .nav-burger > summary span{ transition:transform .18s ease, opacity .14s ease; } .nav .nav-burger[open] > summary span:nth-child(1){transform:translateY(6.5px) rotate(45deg);} .nav .nav-burger[open] > summary span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}