/* ============================================================================ site.css — feuille COMMUNE aux 3 pages vitrine (/, /residences/, /residences/arlon/) ---------------------------------------------------------------------------- ⚠️ Une modification ici touche LES TROIS PAGES. C'est le but : avant ce fichier, chaque page portait sa propre copie et elles avaient déjà divergé. Ne contient QUE des règles dont le sélecteur ET les déclarations étaient identiques dans au moins deux pages. Volontairement ABSENTS, et à garder en ligne dans chaque page : • le CSS critique du premier écran (reset, :root, html, body, nav*, .hero*) — le HTML est déjà gzippé à ~12 Ko et se rend sans requête bloquante ; • `.reveal*` — ces règles posent `opacity: 0`. Servies par une feuille externe, le contenu s'afficherait puis disparaîtrait le temps du chargement : un clignotement à chaque visite ; • les `@media` et `@keyframes` — ils surchargent, ils doivent donc rester APRÈS ce fichier dans la cascade. Mesuré le 2026-08-10 : sur 370 règles au total, 50 seulement étaient identiques entre deux pages, 29 portaient le même sélecteur avec des valeurs DIFFÉRENTES, et 190 sont propres à une seule page. Les 29 divergences sont listées dans la PR : la plupart sont des choix de design assumés, quelques-unes sont de la dérive. ============================================================================ */ /* ─── SV9 · Polices auto-hébergées ───────────────────────────────────────── Avant ce bloc, les 3 pages chargeaient Playfair Display et Inter depuis `fonts.googleapis.com` / `fonts.gstatic.com` : chaque visite transmettait l'adresse IP du visiteur à Google, sans information ni consentement — sur le site qui vend la conformité RGPD, et dont les mentions légales déclarent « uniquement des cookies strictement nécessaires ». C'est le point sanctionné par le LG München I (20 janv. 2022, 3 O 17493/20). Sous-ensemble LATIN uniquement — c'est exactement ce que Google servait déjà pour un visiteur francophone. ⚠️ Conséquence à connaître, et INCHANGÉE par rapport à avant : `↗` (U+2197), `✦` (U+2726) et `←` (U+2190) sont hors de la plage latine et étaient DÉJÀ rendus par la police système. Auto-héberger ne régresse rien ; ça ne le corrige pas non plus. `font-display: swap` reproduit le `&display=swap` de l'URL d'origine : aucun texte n'est invisible pendant le chargement. Les deux familles sont sous SIL Open Font License 1.1 — voir /fonts/OFL.txt, dont la présence est exigée par la licence pour toute redistribution. ────────────────────────────────────────────────────────────────────────── */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; /* fichier VARIABLE : un seul pour les 4 graisses */ font-display: swap; src: url('/fonts/Inter-variable.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700 800; /* idem : 700 et 800 sortent du meme fichier */ font-display: swap; src: url('/fonts/PlayfairDisplay-variable.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } .stats-inner { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); } .stat-item:last-child { border-right: none; } .stat-num span { color: var(--orange); } section.sec { padding: 100px 24px; } .inner { max-width: 1080px; margin: 0 auto; } .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; } .fi-a { background: #f0f0ff; } .fi-b { background: #ecfdf5; } .fi-c { background: #fff7ed; } .fi-d { background: #f0fdfa; } .fi-e { background: #fdf2f8; } .fi-f { background: #eff6ff; } .pi-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mid); } .pi-check { color: var(--orange); font-size: 14px; flex-shrink: 0; } .faq-item { border-bottom: 1px solid var(--border); } .faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 22px 0; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 16px; font-weight: 600; color: var(--dark); text-align: left; gap: 16px; } .faq-q:hover { color: var(--accent); } .faq-arrow { font-size: 18px; transition: transform 0.25s; flex-shrink: 0; color: var(--muted); } .faq-item.open .faq-arrow { transform: rotate(180deg); color: var(--accent); } .faq-a { font-size: 15px; color: var(--muted); line-height: 1.75; max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.25s; padding-bottom: 0; } .contact-wrap { background: var(--accent); } .contact-inner { max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; } .contact-heading { font-family: 'Playfair Display', serif; font-size: clamp(32px, 4vw, 52px); font-weight: 700; color: var(--white); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 16px; } .contact-heading em { font-style: italic; color: var(--a-light); } .contact-cards { display: flex; flex-direction: column; gap: 12px; } .ccard { display: flex; align-items: center; gap: 16px; padding: 18px 22px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; text-decoration: none; transition: background 0.15s, border-color 0.2s, transform 0.15s; } .ccard:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); transform: translateX(4px); } .ccard-ico { width: 44px; height: 44px; flex-shrink: 0; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 18px; } .ci-a { background: rgba(248,122,34,0.25); } .ci-b { background: rgba(255,255,255,0.15); } .ccard-label { font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.35); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 2px; } .ccard-val { font-size: 15px; font-weight: 600; color: var(--white); } .foot-logo { text-decoration: none; display: flex; align-items: center; opacity: 0.5; } .foot-logo img { height: 24px; width: auto; } .foot-links a { font-size: 12px; color: rgba(255,255,255,0.25); text-decoration: none; transition: color 0.15s; } .foot-links a:hover { color: rgba(255,255,255,0.55); } .foot-copy { font-size: 12px; color: rgba(255,255,255,0.16); } /* ─── SV4 · Navigation mobile ────────────────────────────────────────────── Avant ce bloc, sous 900 px, les pages masquaient `.nav-links li:not(:last-child)` SANS rien mettre à la place : le menu n'était pas replié, il avait disparu. Seul subsistait le bouton d'accès à l'app — un cul-de-sac pour un visiteur qui n'a pas encore de compte. ⚠️ SÉLECTEURS `nav .nav-…` ET NON `.nav-…`, à dessein. `.nav-links` fait partie du CSS critique resté EN LIGNE dans chaque page, donc déclaré APRÈS cette feuille : à spécificité égale, la page gagnerait et le menu ne se masquerait jamais. `nav .nav-links` (0,1,1) passe devant `.nav-links` (0,1,0). Ce n'est pas un artifice gratuit — c'est la conséquence directe du choix SV0 de garder le CSS du premier écran en ligne. Le point de bascule est 900 px : la valeur RELUE dans les trois pages, pas une valeur choisie. En inventer une seconde ouvrirait une plage de largeurs où ni les liens ni le bouton n'apparaîtraient. */ .nav-burger { display: none; width: 42px; height: 42px; padding: 0; background: transparent; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px; transition: border-color 0.15s; } .nav-burger:hover { border-color: var(--accent); } .nav-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--mid); transition: transform 0.2s, opacity 0.2s; } .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav-panneau { position: fixed; left: 0; right: 0; z-index: 199; background: var(--white); border-bottom: 1px solid var(--border); box-shadow: 0 12px 32px rgba(0,0,0,0.10); padding: 18px 20px 24px; display: flex; flex-direction: column; gap: 2px; } .nav-panneau[hidden] { display: none; } .nav-panneau a { padding: 13px 4px; font-size: 15px; font-weight: 500; color: var(--dark); text-decoration: none; border-bottom: 1px solid var(--soft); } .nav-panneau a:last-of-type { border-bottom: none; } .nav-panneau .np-primaire { margin-top: 16px; padding: 14px 20px; background: var(--orange); color: var(--white); font-size: 14.5px; font-weight: 700; border-radius: 10px; text-align: center; border-bottom: none; } .nav-panneau .np-secondaire { margin-top: 8px; padding: 13px 20px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--mid); text-align: center; border-bottom: 1px solid var(--border); } @media (max-width: 900px) { nav .nav-links { display: none; } nav .nav-burger { display: flex; } } /* ─── SV13 · Bloc contact de /residences/ ────────────────────────────────── `/residences/` n'avait AUCUNE ancre de contact : son lien « Contact » pointait vers `/#contact`, c'est-à-dire le bloc contact BAILLEUR de l'accueil (« Bailleur en colocation ? […] démonstration personnalisée »). Un candidat locataire qui cherchait à visiter une chambre atterrissait sur un argumentaire de vente de logiciel. Les composants du bloc (`.contact-wrap`, `.ccard`…) sont déjà ici depuis SV0 : il ne manquait que ces deux règles. ⚠️ `.contact-desc` existe AUSSI en ligne dans l'accueil et dans Arlon, avec des opacités différentes (0.5 et 0.45 — de la dérive, pas un choix). Leurs règles en ligne sont déclarées APRÈS cette feuille et gagnent donc : celle-ci ne s'applique QU'À `/residences/`, qui n'en avait aucune. Aucun rendu existant n'est touché. `.eyebrow-clair` remplace le `style="color: …"` en dur qu'utilisent les deux autres pages — les couleurs en `style` inline sont interdites par CLAUDE.md. */ .contact-desc { font-size: 16px; color: rgba(255,255,255,0.5); line-height: 1.7; } .eyebrow-clair { color: rgba(255,255,255,0.6); } /* ─── SV8 · Accessibilité ────────────────────────────────────────────────── Le site ne portait AUCUN attribut ARIA (`grep -c 'aria-'` → 0, 0, 0), la galerie était faite de `
` — donc inatteignable au clavier — et les animations s'imposaient à qui a demandé leur réduction au niveau système. */ /* Lien d'évitement : hors écran, ramené au premier plan dès qu'il reçoit le focus. */ .saut-contenu { position: absolute; left: -9999px; top: 0; z-index: 300; padding: 12px 20px; background: var(--accent); color: var(--white); font-size: 14px; font-weight: 700; text-decoration: none; border-radius: 0 0 10px 0; } .saut-contenu:focus { left: 0; } /* La galerie est passée de
à