/* * Feuille partagée des pages statiques frogimmo (méthode, mentions légales, * confidentialité, CGU, contact, soutenir). Mêmes tokens que l'app * (web/src/index.css) : bleu = liens informatifs, vert de marque = * actions ; la source DGFiP — DVF reste affichée en pied de page * (ligne rouge manifeste). */ :root { --bg: #f8fafc; --surface: #ffffff; --text: #0f172a; --muted: #64748b; --border: #e2e8f0; --accent: #1d4ed8; --action: #16a34a; --action-hover: #15803d; } /* Inter auto-hébergée (mêmes fichiers @fontsource 5.2.8 que le bundle de * l'app -> rendu identique). Sans @font-face, « Inter » dépendait d'une * éventuelle police locale résolue APRÈS le premier rendu à CHAQUE * navigation -> les pages « sautaient » (vidéo JB 2026-07-13). * `font-display: optional` interdit ce saut par spécification : Inter prête * au premier rendu -> utilisée ; sinon la page garde la police système SANS * re-rendu (à la navigation suivante, la fonte est en cache et s'affiche * d'emblée). Préchargée dans le de chaque page. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: optional; src: url('/fonts/inter-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: optional; src: url('/fonts/inter-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: optional; src: url('/fonts/inter-latin-700-normal.woff2') format('woff2'); } * { box-sizing: border-box; } html { scroll-behavior: smooth; /* Chrome Android « font boosting » : gonfle le texte APRÈS le premier layout -> tout se décale puis se réaligne (jump signalé par JB sur mobile). L'app est couverte par le preflight Tailwind ; ces pages n'ont pas de reset, on le pose ici. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Desktop : une scrollbar classique (Linux/Windows) prend 15 px. Sans * gouttière réservée, une page courte (sans scrollbar) est plus large * qu'une page longue et le bandeau centré saute à chaque navigation * (jump signalé par JB). On réserve donc la gouttière en permanence ; * `overflow-y: scroll` est le repli des navigateurs sans scrollbar-gutter. * Mobile : PAS de gouttière — les scrollbars y sont en overlay, toutes les * pages défilent (largeur déjà constante) et Chromium réserverait sinon * 15 px morts à droite. */ @media (min-width: 48rem) { html { scrollbar-gutter: stable; overflow-y: scroll; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; } header { background: var(--surface); border-bottom: 1px solid var(--border); } /* Header commun, présent sur chaque page : reste visible en haut. */ .sticky-header { position: sticky; top: 0; z-index: 10; } .container { max-width: 44rem; margin: 0 auto; padding: 0 1.5rem; } header { background: var(--surface); border-bottom: 1px solid var(--border); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.8rem 0; flex-wrap: wrap; } .brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--text); font-weight: 700; } .brand img { /* Dimensions intrinsèques posées dans le HTML (width/height) : le navigateur réserve la place avant chargement, zéro reflow du header. */ display: block; height: 30px; width: auto; } nav { display: flex; gap: 0.25rem 0.9rem; flex-wrap: wrap; font-size: 0.85rem; } nav a { color: var(--muted); text-decoration: none; padding-bottom: 2px; } nav a:hover { color: var(--text); } nav a[aria-current='page'] { color: var(--text); /* PAS de font-weight ici : le gras élargit le libellé et décale toute la rangée d'une page à l'autre (« slides mal alignées », retour JB). L'état actif = souligné vert + couleur, largeur constante. */ border-bottom: 2px solid var(--action); } h1 { font-size: 1.6rem; line-height: 1.25; margin: 2.2rem 0 0.25rem; } .updated { color: var(--muted); font-size: 0.85rem; margin-top: 0; } h2 { font-size: 1.05rem; margin-top: 1.75rem; /* Ancre (ex. méthodologie #deduplication) : atterrit sous le header sticky, pas cachée derrière. */ scroll-margin-top: 4.5rem; } p { margin: 0.5rem 0; } ul { padding-left: 1.25rem; } .muted { color: var(--muted); } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* La page confidentialité contient un tableau légal à quatre colonnes. Sur * mobile, le tableau devient une liste de cartes libellées : aucun * débordement de page ni cellule tronquée, tout en gardant le tableau * sémantique sur desktop. */ @media (max-width: 47.999rem) { .table-mobile-cards { display: block; width: 100%; margin: 1rem 0; } .table-mobile-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .table-mobile-cards tbody { display: grid; gap: 0.75rem; } .table-mobile-cards tr { display: block; padding: 0.65rem 0.75rem; border: 1px solid var(--border); border-radius: 0.375rem; background: var(--surface); } .table-mobile-cards td { display: grid; grid-template-columns: minmax(7rem, 42%) minmax(0, 1fr); gap: 0.5rem; padding: 0.25rem 0; overflow-wrap: anywhere; } .table-mobile-cards td::before { content: attr(data-label); color: var(--muted); font-size: 0.8rem; font-weight: 600; } .table-mobile-value { min-width: 0; } } .notice { margin-top: 1.5rem; padding: 1rem 1.25rem; border-left: 3px solid var(--action); background: var(--surface); border-radius: 0 0.375rem 0.375rem 0; } .draft { display: inline-block; background: #fef3c7; color: #92400e; border-radius: 0.25rem; padding: 0 0.4rem; font-size: 0.75rem; font-weight: 600; } footer { margin-top: 3.5rem; padding: 1.5rem 0 2rem; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.85rem; } .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; } /* Formulaire (contact) */ form { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 1.25rem; } label { font-size: 0.85rem; font-weight: 600; margin-top: 0.6rem; } textarea, input[type='email'], input[type='text'] { border: 1px solid var(--border); border-radius: 0.375rem; background: var(--surface); color: var(--text); padding: 0.6rem 0.75rem; font: inherit; font-size: 0.95rem; } textarea { min-height: 9rem; resize: vertical; } textarea:focus, input:focus { outline: none; border-color: var(--action); } button[type='submit'] { margin-top: 1rem; align-self: flex-start; background: var(--action); color: #ffffff; border: 0; border-radius: 0.375rem; padding: 0.6rem 1.1rem; font: inherit; font-weight: 600; cursor: pointer; } button[type='submit']:hover { background: var(--action-hover); } button[type='submit']:disabled { opacity: 0.5; cursor: default; } .honeypot { position: absolute; left: -9999px; } .message { min-height: 1.25rem; font-size: 0.9rem; } .message.success { color: var(--action-hover); } .message.error { color: #dc2626; } /* Hero mascotte (soutenir) */ .hero { display: flex; align-items: center; gap: 1.25rem; margin-top: 2.2rem; } .hero img { height: 7rem; width: auto; } .hero h1 { margin: 0 0 0.2rem; } .donation-links { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.5rem 0; } .donation-links a { display: inline-block; padding: 0.7rem 1.1rem; border: 1px solid var(--border); border-radius: 0.375rem; background: var(--surface); font-weight: 600; color: var(--text); } .donation-links a:hover { border-color: var(--action); color: var(--action-hover); text-decoration: none; }