/* ═══════════════════════════════════════════════════════════════════════ POLICES AUTO-HÉBERGÉES — Fraunces (titres) et Inter (texte, interface, données). Charte v3 du 10/08/2026. POURQUOI CE CHANGEMENT. La v2 mettait JetBrains Mono sur tous les chiffres et tous les libellés, en capitales interlettrées. Le résultat se lisait comme un tableau de bord d'ingénieur, pas comme un observatoire de marché — un registre qui parle à un développeur, pas à un propriétaire de 55 ans qui hésite à louer. Les chiffres restent alignés en colonne SANS monospace, par `font-variant-numeric: tabular-nums`, qui est fait pour ça. AUTO-HÉBERGEMENT OBLIGATOIRE : le critère de sortie de la page d'accueil est « aucune requête réseau sortante ». Charger depuis fonts.googleapis.com ferait aussi transiter l'IP de chaque visiteur chez Google (CNIL). Fichiers VARIABLES : un par famille et par sous-ensemble, d'où les plages `font-weight` plutôt qu'un fichier par graisse. Sous-ensembles latin et latin-ext seulement ; `unicode-range` fait que latin-ext n'est presque jamais téléchargé — le français, œ compris, tient dans latin. Chargé sur une page française : 84 Ko (Fraunces 34 + Inter 48). ═══════════════════════════════════════════════════════════════════════ */ @font-face{font-family:'Fraunces';font-style:normal;font-weight:500 700;font-display:swap; src:url('../fonts/fraunces-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Fraunces';font-style:normal;font-weight:500 700;font-display:swap; src:url('../fonts/fraunces-latin.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:'Inter';font-style:normal;font-weight:400 600;font-display:swap; src:url('../fonts/inter-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap; src:url('../fonts/inter-latin.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} /* ========================================================================== LOCAL SITE BUILDER - MODERN Theme Style: Minimal, aéré, ombres subtiles, grands espaces blancs ========================================================================== */ :root { /* === COULEURS À PERSONNALISER === */ --primary: #2563EB; --primary-dark: #1D4ED8; --primary-light: #3B82F6; --accent: #60A5FA; --accent-light: #DBEAFE; --cta: #F59E0B; --cta-dark: #D97706; --cta-light: #FEF3C7; /* === FONTS À PERSONNALISER === */ --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* Neutrals - Modern: très légers */ --white: #FFFFFF; --gray-50: #FAFAFA; --gray-100: #F5F5F5; --gray-200: #E5E5E5; --gray-300: #D4D4D4; --gray-400: #A3A3A3; --gray-500: #737373; --gray-600: #525252; --gray-700: #404040; --gray-800: #262626; --gray-900: #171717; /* Spacing - Modern: généreux */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; --space-3xl: 6rem; /* Border radius - Modern: subtil */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* Shadows - Modern: très subtiles, diffuses */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.06); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.08); --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.1); --transition-fast: 200ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1); } /* === RESET & BASE === */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } body { font-family: var(--font-body); font-size: 1rem; line-height: 1.7; color: var(--gray-700); background: var(--white); min-height: 100vh; display: flex; flex-direction: column; font-weight: 400; } img, svg { max-width: 100%; height: auto; display: block; } a { color: var(--primary); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--primary-dark); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; color: var(--gray-900); margin-bottom: var(--space-md); letter-spacing: -0.02em; } h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; } h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); } h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); } p { margin-bottom: var(--space-md); } ul, ol { padding-left: var(--space-lg); margin-bottom: var(--space-md); } li { margin-bottom: var(--space-xs); } /* === LAYOUT === */ .container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--space-xl); } .main-content { flex: 1; } /* === BUTTONS - Modern: flat, subtle hover === */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: 0.875rem 2rem; font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500; line-height: 1; border: none; border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); text-decoration: none; } .btn-primary { background: var(--gray-900); color: var(--white); } .btn-primary:hover { background: var(--gray-800); color: var(--white); transform: translateY(-1px); } .btn-secondary { background: var(--gray-100); color: var(--gray-700); } .btn-secondary:hover { background: var(--gray-200); } .btn-cta { background: var(--cta); color: var(--white); font-size: 1rem; padding: 1rem 2.5rem; font-weight: 600; } .btn-cta:hover { background: var(--cta-dark); color: var(--white); } /* === HEADER - Modern: minimal, floating === */ .site-header { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(20px); border-bottom: 1px solid var(--gray-100); position: sticky; top: 0; z-index: 1000; } .site-header .container { display: flex; align-items: center; justify-content: space-between; height: 80px; } .logo { display: flex; align-items: center; gap: var(--space-sm); font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; color: var(--gray-900); letter-spacing: -0.01em; } .logo:hover { color: var(--primary); } .logo img { width: auto; height: 36px; } .main-nav { display: flex; align-items: center; gap: var(--space-lg); } .nav-toggle { display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 28px; height: 28px; background: none; border: none; cursor: pointer; padding: 0; } .nav-toggle span { display: block; width: 100%; height: 1.5px; background: var(--gray-800); border-radius: 1px; transition: var(--transition-fast); } .nav-menu { display: none; position: absolute; top: 80px; left: 0; right: 0; background: var(--white); border-bottom: 1px solid var(--gray-100); padding: var(--space-lg); list-style: none; flex-direction: column; gap: var(--space-xs); } .nav-menu.active { display: flex; } .nav-menu li a { display: block; padding: var(--space-sm) 0; color: var(--gray-600); font-size: 0.9375rem; font-weight: 450; } .nav-menu li a:hover { color: var(--gray-900); } .nav-cta { display: inline-flex; align-items: center; gap: var(--space-xs); background: var(--gray-900); color: var(--white); padding: 0.625rem 1.25rem; border-radius: var(--radius-full); font-weight: 500; font-size: 0.875rem; } .nav-cta:hover { background: var(--gray-800); color: var(--white); } .nav-cta-icon { font-size: 0.875rem; } @media (min-width: 1024px) { .nav-toggle { display: none; } .nav-menu { display: flex; align-items: center; position: static; flex-direction: row; background: none; border: none; padding: 0; gap: 0; } .nav-menu li { flex-shrink: 0; } .nav-menu li a { padding: var(--space-sm) var(--space-md); white-space: nowrap; margin-top: 10px; } } /* ═══════════════════════════════════════════════════════════════════════ NAVIGATION v2 — quatre rubriques à panneau déroulant + bouton d'action. Cadrage du 11/08/2026. Ce bloc gagne sur les règles de menu du moteur qui le précèdent, et il est lui-même complété par le bloc mobile en fin de feuille. ═══════════════════════════════════════════════════════════════════════ */ /* Texte réservé aux lecteurs d'écran. Ni `display:none` ni `visibility:hidden`, qui le retireraient AUSSI de la restitution vocale. */ .sr-only,.nav-toggle .sr-only,.nav-declencheur .sr-only{ position:absolute !important;width:1px !important;height:1px !important; padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0); white-space:nowrap;border:0;background:none !important} /* `!important` assumé : le moteur pose `.nav-toggle span{display:block;width:100%}` pour dessiner les trois barres du hamburger, et cette règle est plus spécifique que `.sr-only`. Sans lui, le libellé du lecteur d'écran devenait une quatrième barre de 360 px, qui débordait la page vers la droite. */ /* L'en-tête ne suit pas le défilement : pas de bandeau flottant. */ .site-header{position:static} .nav-rubrique{position:relative} .nav-rubrique-tete{display:flex;align-items:center;gap:2px} /* Le libellé de rubrique est un LIEN, le chevron un BOUTON. Deux cibles distinctes parce que ce sont deux gestes distincts. */ .nav-lien{font-family:var(--texte);font-weight:500;font-size:15px; text-transform:none;letter-spacing:0;color:var(--encre)} .nav-lien:hover{color:var(--cadastre)} .nav-rubrique.est-active > .nav-rubrique-tete > .nav-lien{color:var(--cadastre)} .nav-declencheur{display:inline-flex;align-items:center;justify-content:center; width:28px;height:28px;padding:0;background:none;border:0; cursor:pointer;color:var(--encre-2);border-radius:var(--r-s)} .nav-declencheur:hover{color:var(--cadastre)} .nav-declencheur .nav-fleche{border-top-color:currentColor;opacity:1} .nav-declencheur[aria-expanded="true"] .nav-fleche{transform:rotate(180deg)} /* Le panneau. Filet, pas d'ombre — la charte l'interdit, et la feuille pose de toute façon box-shadow:none !important plus bas. */ .nav-panneau{position:absolute;top:100%;left:0;z-index:60;min-width:280px; margin:0;padding:6px 0;list-style:none; background:var(--carte);border:1px solid var(--trait); border-radius:12px;opacity:0;transition:opacity 150ms ease} .nav-panneau[hidden]{display:none} /* masqué pour de bon, pas transparent */ .nav-panneau.est-ouvert{opacity:1} .nav-panneau li a{display:block;padding:9px 16px;font-family:var(--texte); font-weight:500;font-size:15px;line-height:1.35; text-transform:none;color:var(--encre);white-space:normal} .nav-panneau li a:hover{background:var(--voile);color:var(--cadastre)} /* Focus clavier visible partout, jamais supprimé. */ .nav-lien:focus-visible,.nav-declencheur:focus-visible, .nav-panneau a:focus-visible,.nav-cta:focus-visible,.nav-toggle:focus-visible{ outline:2px solid var(--cadastre);outline-offset:2px;border-radius:2px} @media (prefers-reduced-motion:reduce){ .nav-panneau{transition:none} } /* === MENU DÉROULANT (v1, conservé pour les entrées héritées) ============== Une entrée de menu portant `children` dans theme-config.json devient un tiroir. Trois partis pris : 1. AUCUN JAVASCRIPT. Le tiroir s'ouvre au survol ET au focus clavier (`:focus-within`), ce qui le rend utilisable à la tabulation sans une ligne de script. Le site a déjà retiré la dépendance JS de sa navigation mobile ; la réintroduire ici serait un pas en arrière. 2. LE PARENT RESTE UN LIEN. Il mène à la page hub de la rubrique. Un parent qui n'ouvre qu'un tiroir est mort sur écran tactile, où il n'y a pas de survol. 3. PAS DE TIROIR SOUS 1024 px — voir le bloc mobile en fin de feuille. La barre y est déjà sur deux lignes ; y superposer un panneau flottant recouvrirait le contenu. Le parent mène à la rubrique, qui liste tout. ======================================================================== */ .nav-fleche { display: inline-block; width: 0; height: 0; margin-left: 6px; vertical-align: middle; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid currentColor; opacity: .6; } @media (min-width: 1024px) { .nav-parent { position: relative; } .nav-tiroir { display: none; position: absolute; /* `top: 100%` sans écart : le moindre pixel de vide entre le lien et le panneau referme le tiroir dès que la souris le traverse. */ top: 100%; left: 0; z-index: 60; min-width: 270px; margin: 0; padding: 6px 0; list-style: none; background: var(--carte, #fff); border: 1px solid var(--trait, #DCE3E0); border-radius: var(--r-s, 8px); } .nav-parent:hover > .nav-tiroir, .nav-parent:focus-within > .nav-tiroir { display: block; } .nav-tiroir li { display: block; } .nav-tiroir li a { display: block; padding: 9px 16px; margin-top: 0; white-space: normal; line-height: 1.35; font-size: 0.9375rem; color: var(--encre, #121F1C); } .nav-tiroir li a:hover { background: var(--voile, #E3EBE8); color: var(--cadastre, #0E4F45); } } /* === BREADCRUMBS === */ .breadcrumbs { background: transparent; padding: var(--space-lg) 0; } .breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); list-style: none; padding: 0; margin: 0; font-size: 0.875rem; } .breadcrumbs li { display: flex; align-items: center; gap: var(--space-sm); margin: 0; } .breadcrumbs li:not(:last-child)::after { content: '/'; color: var(--gray-300); } .breadcrumbs a { color: var(--gray-500); } .breadcrumbs a:hover { color: var(--primary); } .breadcrumbs li:last-child span { color: var(--gray-800); } /* === HERO - Modern: grand, centré, épuré === */ .hero { background: linear-gradient(180deg, var(--gray-50) 0%, var(--white) 100%); padding: var(--space-3xl) 0; text-align: center; } .hero h1 { color: var(--gray-900); margin-bottom: var(--space-lg); max-width: 800px; margin-left: auto; margin-right: auto; } .hero-subtitle { font-size: 1.25rem; color: var(--gray-600); max-width: 600px; margin: 0 auto var(--space-xl); font-weight: 400; } .page-hero { background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%); color: var(--white); padding: var(--space-2xl) 0; text-align: center; } .page-hero h1 { color: var(--white); } .page-hero .hero-subtitle { color: rgba(255,255,255,0.9); font-size: 1.125rem; } .hero-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); margin-bottom: var(--space-lg); font-size: 0.875rem; } .meta-item { background: rgba(255,255,255,0.15); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-full); } /* === LEAD FORM - Modern: card flottante, ombres douces === */ .lead-section { padding: var(--space-2xl) 0; margin: var(--space-xl) 0; } .lead-container { background: var(--white); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); padding: var(--space-2xl); max-width: 640px; margin: 0 auto; border: none; } .lead-header { text-align: center; margin-bottom: var(--space-xl); } .lead-header h2 { color: var(--gray-900); font-size: 1.75rem; } .lead-header p { color: var(--gray-500); margin: 0; } .form-progress { margin-bottom: var(--space-xl); } .progress-bar { height: 4px; background: var(--gray-100); border-radius: var(--radius-full); margin-bottom: var(--space-lg); } .progress-fill { height: 100%; background: var(--primary); border-radius: var(--radius-full); transition: width var(--transition-base); } .progress-steps { display: flex; justify-content: space-between; } .progress-step { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--gray-100); color: var(--gray-400); border-radius: 50%; font-size: 0.875rem; font-weight: 500; } .progress-step.active { background: var(--primary); color: var(--white); } .progress-step.completed { background: var(--accent-light); color: var(--primary); } .lead-form { position: relative; } .form-step { display: none; } .form-step.active { display: block; animation: fadeUp 0.4s ease; } @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .form-step h3 { text-align: center; color: var(--gray-800); margin-bottom: var(--space-xl); font-size: 1.25rem; font-weight: 500; } .form-group { margin-bottom: var(--space-lg); } .form-label { display: block; font-weight: 500; color: var(--gray-700); margin-bottom: var(--space-sm); font-size: 0.9375rem; } .form-row { display: grid; grid-template-columns: 1fr; gap: var(--space-md); } @media (min-width: 480px) { .form-row { grid-template-columns: 1fr 1fr; } .form-group-small { max-width: 120px; } } .form-group input[type="text"], .form-group input[type="email"], .form-group input[type="tel"] { width: 100%; padding: 1rem 1.25rem; font-family: var(--font-body); font-size: 1rem; border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--gray-50); transition: all var(--transition-fast); } .form-group input:focus { outline: none; border-color: var(--primary); background: var(--white); box-shadow: 0 0 0 4px var(--accent-light); } .form-group input::placeholder { color: var(--gray-400); } /* Radio Cards - Modern: flat, bordures fines */ .radio-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } .radio-cards-3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 480px) { .radio-cards-3 { grid-template-columns: repeat(2, 1fr); } .radio-cards-3 .radio-card:last-child { grid-column: span 2; } } .radio-card { cursor: pointer; } .radio-card input { position: absolute; opacity: 0; pointer-events: none; } .radio-card-content { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); padding: var(--space-lg) var(--space-md); background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); transition: all var(--transition-fast); } .radio-card:hover .radio-card-content { border-color: var(--gray-300); } .radio-card input:checked + .radio-card-content { border-color: var(--primary); background: var(--accent-light); } .radio-icon { font-size: 1.75rem; } .radio-title { font-weight: 500; color: var(--gray-800); font-size: 0.9375rem; } /* Radio List */ .radio-list { display: flex; flex-direction: column; gap: var(--space-sm); } .radio-item { cursor: pointer; } .radio-item input { position: absolute; opacity: 0; pointer-events: none; } .radio-item-content { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg); background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md); transition: all var(--transition-fast); color: var(--gray-700); } .radio-item:hover .radio-item-content { border-color: var(--gray-300); } .radio-item input:checked + .radio-item-content { border-color: var(--primary); background: var(--accent-light); } .radio-dot { width: 20px; height: 20px; border: 2px solid var(--gray-300); border-radius: 50%; position: relative; flex-shrink: 0; } .radio-item input:checked + .radio-item-content .radio-dot { border-color: var(--primary); } .radio-item input:checked + .radio-item-content .radio-dot::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; background: var(--primary); border-radius: 50%; } .form-checkbox { margin-top: var(--space-lg); } .form-checkbox label { display: flex; align-items: flex-start; gap: var(--space-sm); cursor: pointer; font-size: 0.875rem; color: var(--gray-600); } .form-checkbox input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--primary); } .form-checkbox a { color: var(--primary); text-decoration: underline; } .form-buttons { display: flex; gap: var(--space-md); margin-top: var(--space-xl); } .form-buttons .btn { flex: 1; } .btn-prev { background: var(--gray-100); color: var(--gray-700); } .btn-prev:hover { background: var(--gray-200); } .btn-next, .btn-submit { background: var(--gray-900); color: var(--white); } .btn-next:hover, .btn-submit:hover { background: var(--gray-800); } .form-success, .form-error { text-align: center; padding: var(--space-xl); } .success-icon { width: 72px; height: 72px; background: var(--accent-light); color: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto var(--space-lg); } .form-success h3 { color: var(--gray-900); } .success-note { font-size: 0.875rem; color: var(--gray-500); margin-top: var(--space-md); } .error-icon { width: 72px; height: 72px; background: #FEE2E2; color: #DC2626; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto var(--space-lg); } .form-error h3 { color: #DC2626; } .lead-benefits { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-lg); margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--gray-100); } .benefit { display: flex; align-items: center; gap: var(--space-xs); font-size: 0.875rem; color: var(--gray-500); } .benefit-icon { color: var(--primary); } /* === CONTENT SECTIONS === */ section { margin: var(--space-2xl) 0; } .intro-section, .how-it-works, .province-content, .city-content, .province-info { padding: var(--space-xl) 0; } .intro-section h2, .how-it-works h2 { text-align: center; margin-bottom: var(--space-2xl); } /* Intro Cards - Modern: sans bordures, ombres légères */ .intro-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-xl); } .intro-card { background: var(--white); border: none; border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-md); transition: all var(--transition-base); } .intro-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); } .intro-icon { font-size: 2.5rem; margin-bottom: var(--space-md); } .intro-card h3 { color: var(--gray-900); font-size: 1.125rem; } .intro-card p { color: var(--gray-600); font-size: 0.9375rem; margin: 0; } /* Steps - Modern: ligne de connexion */ .steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-xl); } .step { text-align: center; padding: var(--space-lg); } .step-number { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--gray-900); color: var(--white); font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; border-radius: 50%; margin-bottom: var(--space-md); } .step h3 { color: var(--gray-900); font-size: 1.125rem; } .step p { color: var(--gray-600); font-size: 0.9375rem; margin: 0; } /* Info Cards */ .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-lg); } .info-card { background: var(--gray-50); border: none; border-radius: var(--radius-lg); padding: var(--space-xl); } .info-card h3 { color: var(--primary); font-size: 1rem; margin-bottom: var(--space-sm); } .info-card p { color: var(--gray-600); margin: 0; font-size: 0.9375rem; } /* Benefits List */ .benefits-list { list-style: none; padding: 0; margin: var(--space-lg) 0; } .benefits-list li { position: relative; padding-left: var(--space-xl); margin-bottom: var(--space-md); color: var(--gray-700); } .benefits-list li::before { content: ''; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; background: var(--primary); border-radius: 50%; } .benefits-list li strong { color: var(--gray-900); } /* City Layout */ .city-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); margin-top: var(--space-xl); } @media (min-width: 1024px) { .city-layout { grid-template-columns: 1fr 320px; } } .city-main { min-width: 0; } .city-sidebar { display: flex; flex-direction: column; gap: var(--space-lg); } .local-content { background: var(--gray-50); border-radius: var(--radius-lg); padding: var(--space-xl); margin: var(--space-xl) 0; } .local-content p { color: var(--gray-700); line-height: 1.8; } .local-content p:last-child { margin-bottom: 0; } /* === FAQ === */ .faq-section { padding: var(--space-xl) 0; } .faq-section h2 { text-align: center; margin-bottom: var(--space-2xl); } .faq-grid, .faq-list { display: flex; flex-direction: column; gap: var(--space-md); max-width: 720px; margin: 0 auto; } .faq-item { background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--radius-md); overflow: hidden; } .faq-item summary { padding: var(--space-lg); font-weight: 500; color: var(--gray-800); cursor: pointer; display: flex; justify-content: space-between; align-items: center; list-style: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; font-size: 1.25rem; color: var(--gray-400); font-weight: 300; } .faq-item[open] summary::after { content: '−'; } .faq-item summary:hover { background: var(--gray-50); } .faq-item p { padding: 0 var(--space-lg) var(--space-lg); color: var(--gray-600); margin: 0; line-height: 1.7; } /* === LINK SECTIONS === */ .link-section { margin: var(--space-2xl) 0; } .link-section h2 { margin-bottom: var(--space-lg); } .province-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-md); } .province-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); padding: var(--space-lg); background: var(--gray-900); color: var(--white); border-radius: var(--radius-lg); text-align: center; transition: all var(--transition-fast); } .province-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); color: var(--white); } .province-name { font-weight: 600; font-size: 1rem; } .province-cta { font-size: 0.75rem; opacity: 0.7; } .city-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-sm); } .city-card { display: flex; flex-direction: column; padding: var(--space-sm) 0; } .city-card:hover .city-name { color: var(--primary); text-decoration: underline; } .city-name { font-weight: 500; color: var(--gray-800); font-size: 0.9375rem; } .city-province { font-size: 0.75rem; color: var(--gray-500); } .city-distance { font-size: 0.75rem; color: var(--primary); margin-top: var(--space-xs); } .link-sidebar { padding: var(--space-md) 0; } .link-sidebar h3 { color: var(--gray-900); font-size: 0.9375rem; margin-bottom: var(--space-md); } .city-list { list-style: none; padding: 0; margin: 0; } .city-list li { margin: 0; border-bottom: 1px solid var(--gray-100); } .city-list li:last-child { border-bottom: none; } .city-list a { display: block; padding: var(--space-sm) 0; color: var(--gray-600); font-size: 0.875rem; } .city-list a:hover { color: var(--primary); } .city-list small { color: var(--gray-400); font-size: 0.75rem; } .neighbor-section { margin: var(--space-lg) 0; } .neighbor-grid { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); } .neighbor-card { color: var(--gray-600); font-size: 0.875rem; } .neighbor-card:hover { color: var(--primary); text-decoration: underline; } /* === FOOTER === */ .site-footer { background: var(--gray-900); color: var(--gray-400); padding: var(--space-3xl) 0 var(--space-xl); margin-top: auto; } .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-xl); margin-bottom: var(--space-xl); } .footer-col h3 { color: var(--white); font-size: 0.9375rem; margin-bottom: var(--space-md); font-weight: 600; } .footer-col p { font-size: 0.875rem; line-height: 1.7; margin: 0; } .footer-col ul { list-style: none; padding: 0; margin: 0; } .footer-col li { margin-bottom: var(--space-sm); } .footer-col a { color: var(--gray-400); font-size: 0.875rem; } .footer-col a:hover { color: var(--white); } .footer-bottom { padding-top: var(--space-lg); border-top: 1px solid var(--gray-800); text-align: center; } .footer-bottom p { font-size: 0.8125rem; color: var(--gray-500); margin: 0; } /* === ERROR PAGE === */ .error-section { text-align: center; padding: var(--space-3xl) var(--space-lg); } .error-code { font-family: var(--font-display); font-size: 8rem; font-weight: 700; color: var(--gray-200); line-height: 1; margin-bottom: var(--space-lg); } .error-section h1 { margin-bottom: var(--space-md); } .error-section p { color: var(--gray-600); margin-bottom: var(--space-xl); } /* === RESPONSIVE === */ @media (max-width: 768px) { .hero, .page-hero { padding: var(--space-2xl) 0; } .lead-container { padding: var(--space-xl); margin: 0 calc(-1 * var(--space-md)); border-radius: var(--radius-lg); } .intro-grid, .steps-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; text-align: center; } } @media (max-width: 480px) { :root { font-size: 15px; } .container { padding: 0 var(--space-md); } .radio-cards, .radio-cards-3 { grid-template-columns: 1fr; } .radio-cards-3 .radio-card:last-child { grid-column: span 1; } .form-buttons { flex-direction: column; } } /* === HERO SPLIT - Form above the fold === */ .hero-split { padding: var(--space-xl) 0 var(--space-2xl); } .hero-split .hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: start; } .hero-split .hero-content { text-align: left; } .hero-split .hero-content h1 { margin-bottom: var(--space-md); } .hero-split .hero-subtitle { margin: 0 0 var(--space-lg); max-width: none; text-align: left; } .hero-usps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-sm); } .hero-usps li { display: flex; align-items: center; gap: var(--space-sm); font-size: 1rem; font-weight: 500; margin: 0; } .hero-usps .usp-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: rgba(255, 255, 255, 0.2); border-radius: 50%; font-size: 0.875rem; } /* Hero form inline styles */ .hero-form .lead-container { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); padding: var(--space-lg); margin: 0; max-width: none; border: 1px solid var(--gray-200); } .hero-form .lead-header h2 { font-size: 1.25rem; color: var(--gray-900); margin-bottom: var(--space-xs); } .hero-form .lead-header p { font-size: 0.875rem; color: var(--gray-600); margin-bottom: var(--space-md); } .hero-form .form-progress { margin-bottom: var(--space-md); } .hero-form .form-step h3 { font-size: 1rem; margin-bottom: var(--space-sm); } .hero-form .radio-cards { gap: var(--space-xs); } .hero-form .radio-card { padding: var(--space-sm); } .hero-form .radio-icon { font-size: 1.25rem; } .hero-form .radio-title { font-size: 0.8125rem; } .hero-form .lead-benefits { padding-top: var(--space-md); border-top: 1px solid var(--gray-200); margin-top: var(--space-md); gap: var(--space-sm); } .hero-form .benefit { font-size: 0.75rem; } /* Hero meta inline for city pages */ .hero-meta-inline { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-bottom: var(--space-md); font-size: 0.9rem; opacity: 0.9; } .hero-meta-inline .meta-item { display: inline-flex; align-items: center; gap: var(--space-xs); } /* Desktop: two columns */ @media (min-width: 1024px) { .hero-split { padding: var(--space-2xl) 0; } .hero-split .hero-grid { grid-template-columns: 1fr 420px; gap: var(--space-2xl); align-items: center; } .hero-split .hero-content h1 { font-size: clamp(2rem, 4vw, 2.75rem); } .hero-usps li { font-size: 1.0625rem; } } /* Large desktop */ @media (min-width: 1280px) { .hero-split .hero-grid { grid-template-columns: 1fr 480px; } } /* -------------------------------------------------------------------------- Content Sections (Rich Content) -------------------------------------------------------------------------- */ .content-section { padding: var(--space-xl) 0; } .content-section h2 { margin-bottom: var(--space-lg); } .content-text { margin-top: var(--space-xl); } .content-text p { color: var(--gray-700); line-height: 1.8; margin-bottom: var(--space-md); } .content-text p:last-child { margin-bottom: 0; } .section-intro { font-size: 1.1rem; color: var(--gray-600); margin-bottom: var(--space-xl); text-align: center; max-width: 800px; margin-left: auto; margin-right: auto; } .section-note { font-size: 0.95rem; color: var(--gray-600); margin-top: var(--space-xl); padding: var(--space-lg); background: var(--gray-50); border-radius: var(--radius-md); border-left: 4px solid var(--primary); } /* Pricing Section */ .pricing-section { padding: var(--space-2xl) 0; } .pricing-section h2 { margin-bottom: var(--space-xl); } .pricing-content { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: start; } @media (min-width: 768px) { .pricing-content { grid-template-columns: 1fr 320px; } } .pricing-text p { color: var(--gray-700); line-height: 1.8; margin-bottom: var(--space-md); } .pricing-text h3 { color: var(--gray-800); margin: var(--space-lg) 0 var(--space-md); font-size: 1.125rem; } .pricing-text ul { list-style: none; padding: 0; margin: var(--space-md) 0; } .pricing-text ul li { position: relative; padding-left: var(--space-lg); margin-bottom: var(--space-sm); color: var(--gray-700); } .pricing-text ul li::before { content: '•'; position: absolute; left: 0; color: var(--primary); font-weight: bold; } .pricing-box { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: var(--white); border-radius: var(--radius-lg); padding: var(--space-xl); text-align: center; } .price-range { display: flex; flex-direction: column; gap: var(--space-xs); margin-bottom: var(--space-lg); padding-bottom: var(--space-lg); border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .price-label { font-size: 0.875rem; opacity: 0.9; text-transform: uppercase; letter-spacing: 0.05em; } .price-value { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; } .price-includes { list-style: none; padding: 0; margin: 0 0 var(--space-xl); text-align: left; } .price-includes li { padding: var(--space-sm) 0; font-size: 0.95rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .price-includes li:last-child { border-bottom: none; } .pricing-box .btn-cta { width: 100%; background: var(--cta); color: var(--white); border: none; padding: var(--space-md) var(--space-lg); font-size: 1rem; font-weight: 600; border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); text-decoration: none; display: inline-block; } .pricing-box .btn-cta:hover { background: var(--cta-dark); transform: translateY(-2px); } .province-pricing { background: var(--gray-50); border-radius: var(--radius-lg); padding: var(--space-2xl); margin: var(--space-2xl) 0; } .province-pricing h2 { text-align: center; } .info-details { list-style: none; padding: 0; margin: var(--space-md) 0 0; border-top: 1px solid var(--gray-200); padding-top: var(--space-md); } .info-details li { font-size: 0.875rem; color: var(--gray-600); padding: var(--space-xs) 0; position: relative; padding-left: var(--space-md); } .info-details li::before { content: '✓'; position: absolute; left: 0; color: var(--primary); font-size: 0.75rem; } /* Content Photo */ .content-photo { margin: var(--space-lg) 0 var(--space-xl); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); } .content-photo img { width: 100%; height: auto; display: block; object-fit: cover; max-height: 400px; } @media (min-width: 768px) { .content-photo img { max-height: 480px; } } @media (min-width: 1024px) { .content-photo { float: right; width: 45%; max-width: 400px; margin: 0 0 var(--space-lg) var(--space-xl); } .content-photo img { max-height: 320px; } } /* ========================================================================== CHARTE revenuslocatifs.fr — v2, 10/08/2026 Couche posée APRÈS le thème du moteur : elle en reprend les variables et ajoute les jetons propres à la charte. Un observatoire de marché, pas un tunnel de conversion : aucun dégradé, aucune ombre portée, une seule animation. La séparation se fait au filet et au rayon. ========================================================================== */ :root{ --encre:#121F1C; --encre-2:#54655F; --papier:#F0F3F1; --carte:#FFFFFF; --cadastre:#0E4F45; --cadastre-clair:#176B5E; --nuit:#0A2E29; --voile:#E3EBE8; --ambre:#C98A13; --ambre-texte:#8A5D06; --ambre-vif:#E8A924; --brique:#8C3B1E; --trait:#DCE3E0; /* --titre : les titres et le logotype. --texte : tout le reste, y compris les données — l'alignement des chiffres vient de tabular-nums, plus du monospace. --releve est conservé comme ALIAS de --texte : les classes .releve et .etiquette sont posées dans city.php, market-block.php et reglementation.php, qu'on ne réécrit pas pour un changement de police. */ --titre:Fraunces,Georgia,"Times New Roman",serif; --texte:Inter,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; --releve:Inter,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; --mesure:70ch; --colonne:680px; --gouttiere:190px; --r:12px; --r-s:8px; } /* ── Fond, texte, échelle ─────────────────────────────────────────────── */ body{background:var(--papier);color:var(--encre);font-family:var(--texte); font-size:17px;line-height:1.6} /* Les titres passent en Fraunces. L'interlettrage négatif serré de la v2 était fait pour un grotesque : sur un serif à fort contraste il colle les empattements. On le desserre, et l'interligne s'ouvre d'autant. */ h1,h2,h3{font-family:var(--titre);font-weight:600;letter-spacing:-.015em; text-transform:none} h1{font-size:clamp(36px,5vw,50px);line-height:1.08} h2{font-size:30px;line-height:1.2} h3{font-size:20px;line-height:1.3;letter-spacing:-.01em} p{max-width:var(--mesure)} em,i{font-style:normal} /* Aucune ombre, aucun dégradé : on pose les cartes, on ne les fait pas flotter. */ *,*::before,*::after{box-shadow:none !important;background-image:none !important; text-shadow:none !important} /* ── Le relevé : les chiffres s'alignent sans monospace ─────────────── `tabular-nums` donne à tous les chiffres la même chasse : les colonnes s'alignent exactement comme en monospace, sans en emprunter le registre. C'est la fonction OpenType faite pour ça, et Inter la porte. */ .releve,.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1; letter-spacing:-.01em} /* Les libellés ne sont plus des capitales interlettrées : c'était le principal marqueur du registre « terminal » qu'on quitte. Bas de casse, un cran de graisse au-dessus du texte, et la couleur secondaire pour le rang. */ .etiquette{font-family:var(--texte);font-size:14px;font-weight:500; text-transform:none;letter-spacing:0;color:var(--encre-2)} /* ── La réglette : l'élément signature ───────────────────────────────── */ .reglette{margin:0 0 28px} .reglette-titre{margin:0 0 10px} .reglette-piste{position:relative;height:8px;border-radius:999px; background:var(--voile);overflow:visible} .reglette-bande{position:absolute;top:0;height:8px;border-radius:999px; background:var(--cadastre); transform-origin:left center;animation:reglette-deploie 280ms cubic-bezier(.2,.7,.3,1) both} .reglette-aiguille{position:absolute;top:-7px;width:3px;height:22px; background:var(--ambre);transform:translateX(-1.5px)} .reglette-aiguille::after{content:"";position:absolute;top:-9px;left:-3px; width:9px;height:9px;border-radius:999px;background:var(--ambre)} .reglette-faible .reglette-bande{opacity:.32} .reglette-faible .reglette-aiguille{background:repeating-linear-gradient( 180deg,var(--ambre) 0 3px,transparent 3px 6px)} .reglette-valeurs{display:flex;justify-content:space-between;margin-top:30px; font-family:var(--texte);font-weight:600;font-size:32px; font-variant-numeric:tabular-nums; letter-spacing:-.04em;font-variant-numeric:tabular-nums} .reglette-valeurs .v-med{color:var(--ambre-texte)} .reglette-bornes{display:flex;justify-content:space-between;margin-top:2px} .reglette-source{margin-top:10px} @keyframes reglette-deploie{from{transform:scaleX(0)}to{transform:scaleX(1)}} /* ── Indice de confiance : cinq crans, le vide se voit ────────────────── */ .crans{display:inline-flex;gap:4px;vertical-align:middle;margin:0 6px} .cran{width:14px;height:9px;border-radius:999px;border:1px solid var(--cadastre-clair)} .cran-plein{background:var(--cadastre-clair)} /* ── Bloc réglementaire : filet gauche, brique seulement si contrainte ── */ .regle{border-left:3px solid var(--trait);padding-left:18px;margin:0 0 18px} .regle-contrainte{border-left-color:var(--brique)} .regle h3{margin:0 0 6px} .regle p{margin:0} /* ── Cartes de données ───────────────────────────────────────────────── */ .carte-donnees{background:var(--carte);border:1px solid var(--trait); border-radius:var(--r);padding:28px} /* ── Colonne + gouttière d'annotation ────────────────────────────────── */ .grille-releve{display:grid;grid-template-columns:var(--gouttiere) minmax(0,var(--colonne)); gap:32px;align-items:start} .gouttiere{position:sticky;top:24px} .gouttiere > *{display:block;margin-bottom:6px} @media (max-width:900px){ /* `minmax(0,1fr)` et non `1fr` : une piste de grille vaut `minmax(auto,1fr)`, dont le minimum est la largeur du CONTENU. Un enfant qui défile horizontalement — la pellicule des étapes de la page pro — poussait donc la colonne à sa largeur totale au lieu de défiler dedans, et c'est la page entière qui partait en défilement latéral sous 900 px. Le zéro explicite autorise la colonne à être plus étroite que ce qu'elle contient, ce qui est exactement la condition pour qu'un `overflow-x` intérieur serve à quelque chose. Même correction à faire sur toute colonne accueillant un tableau. */ .grille-releve{grid-template-columns:minmax(0,1fr);gap:12px} .gouttiere{position:static;display:flex;flex-wrap:wrap;gap:14px} .gouttiere > *{margin-bottom:0} } /* ── Logotype ───────────────────────────────────────────────────────── Le mot passe en Fraunces : c'est lui qui porte la marque, le signe ne fait que la rappeler. Interlettrage à peine négatif — un serif à fort contraste se resserre mal. */ .logo-text{font-family:var(--titre);font-weight:600;letter-spacing:-.015em; font-size:20px;color:var(--encre)} /* Servi à 32 px, la taille NATIVE du viewBox. Le moteur le posait à 36 : à l'échelle 0,9 aucune arête ne tombait sur un pixel entier et le signe paraissait flou. Aucun arrondi CSS ici — le SVG porte le sien. */ .logo img{width:32px;height:32px;border-radius:0} /* ── Boutons ─────────────────────────────────────────────────────────── */ .btn,.nav-cta{border-radius:var(--r-s);font-family:var(--texte);font-weight:500} .btn-primary,.nav-cta{background:var(--cadastre);color:#fff;border:1px solid var(--cadastre)} .btn-primary:hover,.nav-cta:hover{background:var(--cadastre-clair);border-color:var(--cadastre-clair)} .btn-visite{background:var(--ambre);color:var(--encre);border:1px solid var(--ambre)} .btn-secondary{background:transparent;color:var(--cadastre);border:1px solid var(--cadastre)} /* ── Plancher de qualité ─────────────────────────────────────────────── */ a:focus-visible,button:focus-visible,input:focus-visible, select:focus-visible,textarea:focus-visible{ outline:2px solid var(--cadastre);outline-offset:2px} input:focus,textarea:focus{border-color:var(--cadastre) !important; box-shadow:0 0 0 3px rgba(14,79,69,.12) !important} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;transition-duration:.01ms !important} } /* ── Rattrapage de contraste ─────────────────────────────────────────── La charte interdit les dégradés (§3 : « un aplat ou rien »). Or trois blocs du moteur tiraient leur fond d'un dégradé tout en écrivant en blanc dessus : les neutraliser laissait du texte blanc sur fond clair, illisible. On leur donne donc un aplat franc — --nuit pour les blocs de synthèse, conformément au §3 qui le réserve aux « moments de résultat ». */ .pricing-box{background:var(--nuit) !important;color:#fff;border-radius:var(--r)} .pricing-box .price-label,.pricing-box .price-value,.pricing-box li{color:#fff} .pricing-box .price-label{opacity:.75} .pricing-box .price-range{border-bottom-color:rgba(255,255,255,.22)} .hero,.page-hero{background:var(--papier) !important} /* L'ambre sur fond nuit passe en ambre vif (§3), sinon il s'éteint. */ .pricing-box .v-med,.pricing-box .etiquette{color:var(--ambre-vif)} /* ── Sceau de relevé : l'indice et la date, lisibles ──────────────────── */ .sceau-releve{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px; margin:22px 0 0;padding-top:18px;border-top:1px solid var(--trait)} .sceau-indice{font-family:var(--texte);font-weight:600;font-size:19px; font-variant-numeric:tabular-nums;color:var(--encre);display:flex; align-items:center;gap:10px} .sceau-date{font-family:var(--texte);font-size:15px;font-variant-numeric:tabular-nums; color:var(--encre-2)} .sceau-lien{font-size:15px;color:var(--cadastre);text-decoration:underline; text-underline-offset:3px;text-decoration-thickness:1px} .sceau-lien:hover{color:var(--cadastre-clair)} .sceau-crans .cran{width:18px;height:11px} /* ── Contraste : pied de page et étapes du formulaire ────────────────── Relevé automatiquement : les titres du pied de page s'affichaient en #171717 sur un fond #171717 — invisibles (ratio 1,0). Le pied passe au --nuit de la charte, avec des couleurs de texte qui tiennent le AA. */ footer,.footer,.site-footer{background:var(--nuit) !important;color:#C9D6D2} footer h2,footer h3,footer h4,.footer h2,.footer h3,.footer h4{color:#fff} footer p,footer li,footer a,.footer p,.footer li,.footer a{color:#C9D6D2} footer a:hover,.footer a:hover{color:#fff} footer .etiquette,.footer .etiquette{color:#9FB3AD} /* Étapes non atteintes : gris trop pâle sur gris pâle (ratio 2,3). */ .progress-step{background:var(--voile);color:var(--encre-2)} .progress-step.active{background:var(--cadastre);color:#fff} .progress-fill{background:var(--cadastre)} /* Texte secondaire général : --encre-2 tient le AA sur --papier. */ .hero-subtitle,.page-accroche,.card p,.faq-item p{color:var(--encre-2)} /* Derniers écarts relevés au contrôle automatique. */ .breadcrumbs a,.breadcrumbs span{color:var(--encre-2)} .breadcrumbs a:hover{color:var(--cadastre)} .footer-bottom,.footer-bottom p,.footer-bottom a,footer small{color:#C9D6D2 !important} .error-icon{color:var(--brique)} /* ═══════════════════════════════════════════════════════════════════════ PAGE D'ACCUEIL — grille centrée, blocs de densités alternées. La colonne étroite calée à gauche est abandonnée : elle laissait un tiers droit vide sur un site dont l'image EST la donnée. Les blocs occupent désormais la largeur utile, et alternent dense (carte) / aéré (parcours) / étroit (FAQ) pour donner du rythme. Charte v3 : Fraunces en titre, Inter partout ailleurs, chiffres alignés par tabular-nums. Aucun dégradé, aucune ombre, aucune image. ═══════════════════════════════════════════════════════════════════════ */ .accueil{padding-bottom:72px} /* L'en-tête est collant sur grand écran : sans cette marge, un saut vers #offerte fait atterrir le haut du formulaire DERRIÈRE le bandeau. */ [id="offerte"]{scroll-margin-top:96px} /* Le moteur centre le texte du héros (`.hero{text-align:center}`). Sur un site de données, un titre centré et un champ centré font page d'accueil de plaquette : tout est aligné à gauche, comme un relevé. */ .accueil,.accueil .hero{text-align:left} /* Deux largeurs, deux seulement. `rl-large` pour les blocs de données et de liens, `rl-lecture` pour le texte long : au-delà de 70 caractères par ligne l'œil perd la ligne suivante. */ .rl-large{max-width:1200px;margin:0 auto;padding:0 24px} .rl-lecture{max-width:76ch;margin:0 auto;padding:0 24px} .accueil section,.accueil nav{padding:64px 0;border-top:1px solid var(--trait)} .accueil > .hero{border-top:0} .accueil h2{margin:0 0 12px} .bloc-chapeau{max-width:var(--mesure);color:var(--encre-2);margin:0 0 36px} .lien-texte{color:var(--cadastre);text-decoration:underline; text-underline-offset:3px;text-decoration-thickness:1px} .lien-texte:hover{color:var(--cadastre-clair)} /* ── 2. Héros ──────────────────────────────────────────────────────── Deux colonnes : le discours à gauche, l'estimateur à droite. C'est aussi ce qui remplit le tiers droit qui restait vide quand le héros n'était qu'un champ de recherche sur une colonne étroite. */ .hero{padding:56px 0 56px !important} .hero-grille{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:48px; align-items:start} .hero h1{margin:0 0 16px} .hero-accroche{font-size:20px;line-height:1.5;color:var(--encre-2); max-width:var(--mesure);margin:0 0 28px} .hero-texte{padding-top:8px} /* Le formulaire se pose comme une carte de données : filet, rayon 12, aucun effet d'ombre — la charte §3 ne fait pas flotter les blocs, elle les pose. */ .hero-formulaire .lead-container{background:var(--carte);border:1px solid var(--trait); border-radius:var(--r);padding:28px} .hero-formulaire .lead-header h2{font-size:24px;margin:0 0 8px} .hero-formulaire .lead-header p{color:var(--encre-2);font-size:15px;margin:0 0 22px} @media (max-width:1000px){ .hero-grille{grid-template-columns:1fr;gap:32px} } /* ── Champ de recherche : le SEUL appel à l'action du site ───────────── */ .recherche{max-width:620px} .recherche-titre{display:block;font-size:14px;font-weight:500; color:var(--encre-2);margin:0 0 8px} .recherche-champ{position:relative;display:flex;gap:8px;flex-wrap:wrap} .recherche-saisie{flex:1 1 260px;min-width:0;padding:15px 16px;font-size:17px; font-family:var(--texte);color:var(--encre); background:var(--carte);border:1px solid var(--trait); border-radius:var(--r-s);appearance:none} .recherche-saisie::placeholder{color:var(--encre-2);opacity:.8} .recherche-bouton{flex:0 0 auto;padding:15px 24px;font-size:17px;cursor:pointer} .recherche-aide{margin:10px 0 0;font-size:14px;color:var(--encre-2)} .recherche-liste{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20; margin:0;padding:6px;list-style:none;max-height:320px;overflow:auto; background:var(--carte);border:1px solid var(--trait); border-radius:var(--r)} .recherche-liste[hidden]{display:none} .recherche-liste a{display:flex;justify-content:space-between;align-items:baseline; gap:16px;padding:10px 12px;border-radius:var(--r-s); color:var(--encre);text-decoration:none} .recherche-liste li.actif a,.recherche-liste a:hover{background:var(--voile)} .liste-cp{font-size:14px;font-variant-numeric:tabular-nums;color:var(--encre-2)} .visuellement-cache{position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} .pot-de-miel{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden} .reassurance{display:flex;flex-wrap:wrap;gap:10px 32px;list-style:none; margin:28px 0 0;padding:0;font-size:14px;color:var(--encre-2)} /* ── 3. Carte + fiche ────────────────────────────────────────────────── */ .carte-duo{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px; align-items:start} /* La carte prend toute sa colonne. La borne à 600 px la laissait flotter dans un cadre trop grand ; la colonne a été élargie (fiche à 340 au lieu de 380) et le tracé remplit désormais l'espace. C'est le bloc central de la page, il doit se voir. */ .carte-fig{margin:0;max-width:none} .carte-svg{display:block;width:100%;height:auto} .carte-svg .trace{fill:var(--voile);stroke:var(--trait);stroke-width:1.5; stroke-linejoin:round} .carte-svg .halo{fill:var(--cadastre);opacity:0} .carte-svg .pastille{fill:var(--cadastre);stroke:var(--carte);stroke-width:2.5} .carte-svg .point{cursor:pointer} .carte-svg .point:hover .pastille,.carte-svg .point:focus .pastille, .carte-svg .point.actif .pastille{fill:var(--ambre);r:9} .carte-svg .point:hover .halo,.carte-svg .point:focus .halo, .carte-svg .point.actif .halo{opacity:.14} .carte-svg .point:focus{outline:none} .carte-svg .point:focus-visible .halo{opacity:.24} .carte-fig figcaption{margin-top:10px} .fiche-ville{position:sticky;top:20px;padding:26px} .fiche-sur{margin:0 0 4px} .fiche-nom{margin:0 0 20px;font-size:26px} .fiche-prix{margin:2px 0 24px;font-size:44px;font-weight:600; letter-spacing:-.02em;color:var(--ambre-texte); font-variant-numeric:tabular-nums;line-height:1} .fiche-reglette .reglette{margin-bottom:20px} .fiche-occ{display:flex;align-items:baseline;justify-content:space-between; gap:16px;margin:0 0 20px;padding-top:16px;border-top:1px solid var(--trait)} .fiche-occ-valeur{font-size:22px;font-weight:600;color:var(--encre); font-variant-numeric:tabular-nums} .titre-liste{margin:48px 0 14px;font-size:20px} .liste-vitrine{list-style:none;padding:0;margin:0;display:grid; grid-template-columns:repeat(4,1fr);gap:1px; background:var(--trait);border:1px solid var(--trait); border-radius:var(--r);overflow:hidden} /* Le
  • s'étire sur toute la rangée, et le lien remplit le
  • . Sans ça, un nom qui passe à la ligne — « Bray-Dunes » à 375 px — rendait sa rangée plus haute et laissait un trou gris à côté de son voisin : le fond du conteneur, qui sert de filet de séparation, apparaissait en aplat. */ .liste-vitrine li{display:flex} .liste-vitrine a{flex:1;display:flex;align-items:baseline;justify-content:space-between; gap:12px;padding:14px 16px;background:var(--carte); color:var(--encre);text-decoration:none} .vitrine-nom{hyphens:auto} .liste-vitrine a:hover,.liste-vitrine a:focus{background:var(--voile)} /* ── La suite de la liste ──────────────────────────────────────────── Sur grand écran il n'y a rien à replier : quatre colonnes, six rangées, la liste tient d'un bloc. On force donc l'ouverture — un
    fermé est masqué par la feuille de style du navigateur, et cette règle-là se surcharge. Le résumé disparaît avec. Sur téléphone, le dépliant reprend son rôle : deux colonnes de douze rangées faisaient un mur. Aucun contenu n'est retiré du HTML, il est seulement replié — et par le navigateur, sans une ligne de JavaScript. */ .liste-suite{margin:0} .liste-suite > summary{display:none} .liste-suite:not([open]) > .liste-vitrine{display:grid} /* La carte est un échantillon : la note le dit sous la liste, en gris, sans prendre le poids d'un paragraphe de corps de texte. */ .note-liste{margin:12px 0 0;max-width:60ch} /* Les deux moitiés se rejoignent sans couture visible. */ .liste-debut{border-radius:var(--r) var(--r) 0 0;border-bottom:0} .liste-fin{border-radius:0 0 var(--r) var(--r);border-top:0} .vitrine-nom{font-size:15px} .vitrine-prix{font-weight:600;font-variant-numeric:tabular-nums; color:var(--ambre-texte);white-space:nowrap} .sceau-carte{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px; margin:20px 0 0} /* ── 4. Comment ça marche ────────────────────────────────────────────── */ .parcours-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:36px; margin:8px 0 44px} .parcours-col h3{margin:16px 0 8px;font-size:20px} .parcours-col p{margin:0;color:var(--encre-2)} .icone{width:32px;height:32px;fill:none;stroke:var(--cadastre); stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .icone .trait-ambre{stroke:var(--ambre)} .parcours-methode{max-width:var(--mesure);padding-top:28px; border-top:1px solid var(--trait)} .parcours-methode p{margin:0 0 12px} .methode-pied{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 24px; margin-top:18px !important} /* ── 5. Questions fréquentes ───────────────────────────────────────── Ouvertes, jamais repliées : un
    fermé cache la réponse au lecteur ET affaiblit ce que les moteurs génératifs en retiennent. */ .faq-entree{padding:26px 0;border-top:1px solid var(--trait)} .faq-entree:last-child{border-bottom:1px solid var(--trait)} .faq-entree h3{margin:0 0 10px;font-size:21px} .faq-entree p{margin:0 0 10px;line-height:1.65} .faq-lien{margin:0} /* ── 6. Maillage — liens texte bruts, aucun composant JavaScript ─────── */ .maillage h2{font-size:20px;margin:0 0 12px} .maillage h2 ~ h2{margin-top:36px} .liens-bruts{list-style:none;padding:0;margin:0; display:flex;flex-wrap:wrap;gap:6px 20px} .liens-bruts a{font-size:15px;color:var(--encre-2)} .liens-bruts a:hover{color:var(--cadastre)} /* ── Logotype ────────────────────────────────────────────────────────── */ .logo-text{font-family:var(--titre);font-weight:600;letter-spacing:-.015em; font-size:20px;color:var(--encre)} .logo img{width:32px;height:32px;border-radius:0} /* ── Tablette : la fiche passe sous la carte ─────────────────────────── */ @media (max-width:1000px){ .carte-duo{grid-template-columns:1fr;gap:28px} .fiche-ville{position:static} .carte-svg{max-height:460px;margin:0 auto} .liste-vitrine{grid-template-columns:repeat(2,1fr)} /* Le dépliant redevient un dépliant. */ .liste-suite > summary{display:block;margin-top:10px;padding:14px 16px; min-height:44px;border:1px solid var(--trait);border-radius:var(--r-s); background:var(--carte);color:var(--cadastre);font-size:15px; font-weight:500;cursor:pointer;list-style:none;text-align:center} .liste-suite > summary::-webkit-details-marker{display:none} .liste-suite[open] > summary{border-radius:var(--r-s) var(--r-s) 0 0} .liste-suite:not([open]) > .liste-vitrine{display:none} .liste-debut{border-radius:var(--r);border-bottom:1px solid var(--trait)} .liste-fin{border-radius:0 0 var(--r) var(--r);border-top:0;margin-top:-1px} .parcours-grille{grid-template-columns:1fr;gap:28px} } /* Le bouton du menu ne sort plus du HTML sur l'accueil : c'est theme.cta_masque_sur, lu par includes/header.php, qui s'en charge. Le masquer en CSS le laissait dans le document — un lien mort pour tout ce qui ne lit pas la feuille de style. */ /* ═══════════════════════════════════════════════════════════════════════ MOBILE — 90 % du trafic. Ce bloc est le dernier de la feuille : il gagne sur tout ce qui précède, y compris sur les règles du moteur générique. ═══════════════════════════════════════════════════════════════════════ */ @media (max-width: 1023px) { /* ── La navigation ne dépend plus de JavaScript ────────────────────── Le moteur cachait le menu (`display:none`) et ne le montrait qu'une fois la classe `.active` posée par main.js. Sans JavaScript — ou si le script échoue — Réglementation et Contact devenaient inaccessibles sous 1024 px, c'est-à-dire pour 90 % des visiteurs. Le site n'a que deux entrées de menu : elles tiennent sur une deuxième ligne, toujours visibles, et le bouton hamburger n'a plus de raison d'être. */ .nav-toggle{display:none} /* L'en-tête du moteur a une HAUTEUR FIXE de 80 px. Une navigation sur deux lignes en déborde par le haut : le bouton se retrouvait coupé au-dessus du logo. La hauteur passe donc en automatique, et le conteneur enveloppe. */ .site-header .container{height:auto;flex-wrap:wrap;align-items:center; padding-top:10px;padding-bottom:10px;row-gap:4px} /* Et il ne colle plus en haut : 90 px de bandeau fixe sur un écran de 640, c'est 14 % de la page mangés en permanence. */ .site-header{position:static} .logo{flex:0 0 auto} /* Le menu et le bouton partageaient une ligne. Avec deux entrées dont « Choisir une conciergerie », les 345 px utiles d'un écran de 375 ne suffisent plus : le menu se pliait en colonne À CÔTÉ du bouton, ce qui donnait un en-tête bancal de 180 px. Le menu prend donc toute sa ligne et le bouton passe dessous, sur la sienne. Deux bandes nettes valent mieux qu'une grille cassée — et l'en-tête n'est pas collant ici (voir plus haut), ce qu'il coûte se paie une fois, en haut de page. */ .main-nav{flex:1 1 100%;order:2;display:flex;align-items:center; justify-content:space-between;gap:12px;flex-wrap:wrap} /* `flex-start` : une entrée dont le libellé passe à deux lignes ne doit pas décaler verticalement ses voisines. Sans lui, « Réglementation » flottait au milieu de « Choisir une conciergerie », et la barre partait de travers. */ .nav-menu{display:flex !important;position:static;flex-direction:row;order:1; background:none;border:0;padding:0;gap:0 20px;flex:1 1 100%; align-items:flex-start} .nav-menu li a{display:flex;align-items:center;min-height:44px;padding:0} .nav-cta{order:2;flex:0 0 auto} /* Le tiroir v1 n'existe pas au tactile : le parent mène à la page rubrique. */ .nav-tiroir{display:none} .nav-parent > a > .nav-fleche{display:none} /* ── Cibles tactiles ──────────────────────────────────────────────── Les liens du maillage faisaient 19 px de haut : sous le seuil de 44 px, et signalés par Google en « tap targets too close ». Le remplissage vertical les porte à 44 px sans changer leur allure — ce sont toujours des liens texte bruts, ils ont juste de quoi être touchés au pouce. */ .liens-bruts{gap:0 20px} .liens-bruts a,.faq-lien a,.maillage a,.lien-texte,.nav-cta,.logo, .sceau-lien,.btn,.city-links a,.region-links a{ display:inline-flex;align-items:center;justify-content:center;min-height:44px} /* Les liens INLINE dans un paragraphe sont volontairement exclus : leur imposer 44 px casserait l'interligne du texte qui les contient. La règle des cibles tactiles vise les commandes, pas les mots soulignés. */ /* Le bouton principal est la cible la plus importante de la page : il ne peut pas être le seul à rester sous le seuil. */ .nav-cta{padding-top:0;padding-bottom:0} .breadcrumbs a,.breadcrumbs li{min-height:44px;display:inline-flex;align-items:center} footer a,.site-footer a{display:inline-flex;align-items:center;min-height:44px} /* ── Le titre ──────────────────────────────────────────────────────── La borne basse du clamp était à 36 px : elle ne descendait jamais, et produisait un H1 de quatre lignes sur 156 px avant même le sous-titre. */ h1{font-size:clamp(30px,6vw,50px);line-height:1.12} h2{font-size:26px} /* ── Le logotype ne passe plus à deux lignes ───────────────────────── « Revenus / Locatifs » sur deux lignes faisait un en-tête de 81 px. */ .logo-text{white-space:nowrap;font-size:18px} /* ── La gouttière repliée ──────────────────────────────────────────── Sur une page commune, la gouttière passe au-dessus de son bloc sous 900 px. Les marges du moteur y ajoutaient 175 px de vide entre l'accroche et le premier chiffre — sur l'écran où l'espace coûte le plus cher. */ .grille-releve{gap:4px} .grille-releve + .grille-releve{margin-top:20px !important} .gouttiere{gap:4px 14px;margin-bottom:0} .page-tete{margin:12px 0 4px !important} .page-accroche{margin-bottom:16px} .accueil section,.accueil nav{margin-bottom:40px} .accueil-tete{margin:24px 0 40px} .page-accroche{margin-bottom:24px} /* Les points de la carte : la zone tactile grandit, la pastille visible ne bouge pas. Sur mobile c'est la liste qui porte le parcours, mais un point qu'on vise et qu'on rate est pire qu'un point qu'on ne peut pas viser. */ .carte-svg .halo{r:26} /* ── Le champ de recherche ─────────────────────────────────────────── Bouton pleine largeur : à 375 px, deux blocs côte à côte laissaient un champ de saisie trop étroit pour lire ce qu'on tape. */ .recherche-bouton{width:100%;justify-content:center} } /* Très petits écrans encore courants sur Android. */ @media (max-width: 380px) { .nav-cta{padding:.5rem .85rem;font-size:.8125rem} .logo-text{font-size:17px} } /* ═══════════════════════════════════════════════════════════════════════ ÉCRAN DE RÉSULTAT — la seule surface sombre du site public. Charte §3 : `--nuit` est réservé aux « moments de résultat », et c'en est un. Les pages indexées restent sur papier clair ; ce bloc n'apparaît qu'après envoi du formulaire, jamais dans le HTML servi aux moteurs. ═══════════════════════════════════════════════════════════════════════ */ /* Le moteur met 2,5 rem de remplissage sur .form-success : dans la colonne du héros, il ne restait que 322 px sur 460 pour la carte de résultat. On le ramène à zéro horizontalement — le résultat a besoin de toute la largeur. */ .form-success,.form-error{padding:24px 0 !important;text-align:left !important} .resultat{margin:24px 0 0;padding:26px;border-radius:var(--r); background:var(--nuit);color:#E3EBE8;text-align:left} /* Sélecteur renforcé : une règle h3 du moteur repeignait le titre en #171717, donc en noir sur fond nuit. */ .resultat .resultat-titre{margin:0 0 8px;font-family:var(--titre);font-size:24px; color:#fff;line-height:1.15} .resultat-sous{margin:0 0 28px;color:#9FB3AD;font-size:15px;line-height:1.55; max-width:var(--mesure)} /* `auto-fit` plutôt qu'un nombre fixe de colonnes : la carte vit tantôt dans la colonne étroite du héros, tantôt dans le formulaire large d'une page commune. Trois colonnes de 71 px pour des chiffres de 34 px, c'est ce qui cassait « 64 € » en deux lignes. En dessous de ~190 px par mesure, elles s'empilent. */ .resultat-mesures{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:20px 24px; padding:22px 0;border-top:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14)} .resultat-mesures .mesure[hidden]{display:none} .mesure-label{margin:0 0 6px;font-size:14px;font-weight:500;color:#9FB3AD} /* L'ambre passe en ambre VIF sur fond nuit : la variante claire s'y éteint. */ .mesure-valeur{margin:0;font-size:32px;font-weight:600;letter-spacing:-.02em; color:var(--ambre-vif);font-variant-numeric:tabular-nums; line-height:1.1;white-space:nowrap} /* La fourchette est aussi grosse que la médiane, ou presque : c'est elle l'information. Un chiffre unique mis en avant est le premier interdit de la charte. */ .mesure-bornes{margin:6px 0 0;font-size:15px;color:#E3EBE8; font-variant-numeric:tabular-nums;white-space:nowrap} .resultat-note{margin:22px 0 0;font-size:14px;line-height:1.6;color:#9FB3AD; max-width:var(--mesure)} .resultat-source{margin:14px 0 0;font-size:13px;color:#7E948E; font-variant-numeric:tabular-nums} .resultat-echec{margin:28px 0 0;padding:24px;border-radius:var(--r); border:1px solid var(--trait);text-align:left} .resultat-echec h3{margin:0 0 8px;font-size:20px} .resultat-echec p{margin:0;color:var(--encre-2)} @media (max-width:640px){ .resultat{padding:22px 18px} .mesure-valeur{font-size:30px} } /* ── Case de segmentation du formulaire ────────────────────────────────── Volontairement DIFFÉRENTE de la case de consentement : deux cases côte à côte, l'une obligatoire et l'autre non, se cochent ensemble par réflexe. Celle-ci est encadrée et posée au-dessus, avec sa propre explication. */ .form-segment{padding:14px 16px;border:1px solid var(--trait); border-radius:var(--r-s);background:var(--voile)} .form-segment label{display:flex;align-items:flex-start;gap:10px;cursor:pointer; font-size:15px;line-height:1.45} .form-segment input{margin:2px 0 0;flex:0 0 auto;width:18px;height:18px; accent-color:var(--cadastre)} .segment-aide{margin:8px 0 0 28px;font-size:13px;color:var(--encre-2);line-height:1.45} /* ═══════════════════════════════════════════════════════════════════════ PAGE DE RÉSULTAT — l'estimation sur sa propre page. Le bloc tenait dans 402 px au fond d'une carte ; ici les chiffres ont la place qu'ils méritent. Fond clair : la charte §3 réserve --nuit aux blocs de synthèse, et cette page EST le résultat, pas un encart dedans. ═══════════════════════════════════════════════════════════════════════ */ /* ⚠️ NE JAMAIS nommer une classe `page-` ici : header.php écrit ``, et une règle du même nom s'applique alors au BODY ENTIER. C'est ce qui a mis l'en-tête et le pied de page dans une colonne centrée de 1000 px, avec du gris de chaque côté. */ .resultat-page{max-width:1000px;margin:0 auto;padding:48px 24px 72px} .estimation-tete{margin:0 0 40px} .estimation-tete .etiquette{margin:0 0 10px} .estimation-tete h1{margin:0 0 12px;font-size:clamp(30px,4vw,42px)} .estimation-tete .page-accroche{margin:0;font-size:18px;color:var(--encre-2)} .estimation-chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:2px;background:var(--trait);border:1px solid var(--trait); border-radius:var(--r);overflow:hidden;margin:0 0 40px} .chiffre{background:var(--carte);padding:28px 26px} .chiffre-label{margin:0 0 10px;font-size:14px;font-weight:500;color:var(--encre-2)} .chiffre-valeur{margin:0;font-size:44px;font-weight:600;letter-spacing:-.02em; color:var(--ambre-texte);font-variant-numeric:tabular-nums; line-height:1;white-space:nowrap} /* La fourchette reste lisible à côté de la médiane : c'est elle l'information, un chiffre unique mis en avant est le premier interdit de la charte. */ .chiffre-bornes{margin:10px 0 0;font-size:17px;color:var(--encre); font-variant-numeric:tabular-nums} .estimation-notes{margin:0;padding:0} .estimation-notes p{color:var(--encre-2);line-height:1.6;margin:0 0 14px} .estimation-source{font-variant-numeric:tabular-nums;font-size:14px} .estimation-vide{padding:40px 0} @media (max-width:640px){ .resultat-page{padding:28px 20px 56px} .chiffre{padding:22px 20px} .chiffre-valeur{font-size:38px} } /* ══ PAGES LÉGALES (/mentions-legales/, /confidentialite/) ══════════════ ⚠️ AUCUNE règle ne s'appelle ici `.page-quelque-chose` : header.php pose ``, et les deux pages ont pageType = 'legal'. Une règle `.page-legal` s'appliquerait au body entier — c'est exactement ce qui avait enfermé l'en-tête de /estimation/ dans une colonne de 1000 px. D'où le préfixe `doc-`. */ .doc-narrow{max-width:var(--colonne);margin:0 auto} .legal-content h1{margin-bottom:10px} /* La date de mise à jour est une information juridique, pas une note de bas de page : une politique sans date ne prouve pas ce qui était affiché au moment où le consentement a été donné. Elle est donc lisible, en tête. */ .doc-maj{margin:0 0 var(--space-xl);font-size:15px;color:var(--encre-2); padding-bottom:16px;border-bottom:1px solid var(--trait)} .legal-content section{margin-bottom:var(--space-xl)} .legal-content h2{font-size:24px;margin:0 0 14px} .legal-content p{margin:0 0 14px;line-height:1.65} .legal-content p:last-child{margin-bottom:0} /* Les énumérations portent l'essentiel de ces pages — identité de l'éditeur, destinataires, bases légales. Elles se lisent en balayage, pas en continu : d'où l'espacement entre items, plus large que dans un corps de texte. */ .doc-liste{max-width:var(--mesure);margin:0 0 16px;padding-left:22px} .doc-liste li{margin-bottom:10px;line-height:1.6} .doc-liste li:last-child{margin-bottom:0} .doc-liens{margin:16px 0 0;display:flex;flex-wrap:wrap;gap:18px} .doc-liens a{color:var(--cadastre);text-decoration:underline; text-underline-offset:3px;font-weight:500} .doc-liens a:hover{color:var(--cadastre-clair)} @media (max-width:640px){ .legal-content h2{font-size:21px} .legal-content section{margin-bottom:var(--space-lg)} } /* ══════════════════════════════════════════════════════════════════════ MISE EN RELATION — le second consentement, posé après le résultat. Encadré, et non fondu dans la page : c'est une DÉCISION qu'on demande, pas une note de bas de page. Il reste sobre — pas de couleur d'alerte, pas de bouton géant : le refus doit être aussi confortable que l'accord, sans quoi le consentement n'est plus libre. ══════════════════════════════════════════════════════════════════════ */ .mise-en-relation{background:var(--carte);border:1px solid var(--trait); border-radius:var(--r);padding:26px 28px;margin:34px 0 0} .mise-en-relation h2{font-size:24px;margin:0 0 10px} .mise-en-relation p{margin:0 0 18px;line-height:1.6} .mise-en-relation p:last-child{margin-bottom:0} .mer-form{margin:0} /* La case et son libellé forment UNE seule cible : le texte d'un consentement doit être cliquable, viser une case de 18 px au doigt ne marche pas. */ .mer-case{display:flex;gap:12px;align-items:flex-start;cursor:pointer; margin:0 0 20px;max-width:var(--mesure)} .mer-case input{flex:0 0 auto;width:20px;height:20px;margin:2px 0 0; accent-color:var(--cadastre);cursor:pointer} .mer-case span{line-height:1.55} .mer-case:hover span{color:var(--encre)} .mer-erreur{color:var(--brique);font-weight:500; border-left:3px solid var(--brique);padding-left:14px} @media (max-width:640px){ .mise-en-relation{padding:20px 18px;margin-top:26px} .mise-en-relation h2{font-size:21px} /* Au doigt, le bouton prend la largeur : une cible de 44 px de haut, et plus de clic à côté. */ .mise-en-relation .btn{width:100%;justify-content:center} } /* ── Rechoix du propriétaire : /rechoix/ ───────────────────────────── §2.3 de la spec du 11/08/2026. La conciergerie nommée n'a pas pris la demande ; le propriétaire rechoisit lui-même. AUCUNE MISE EN AVANT, D'AUCUNE SORTE. Pas de carte plus grande, pas de bordure accentuée, pas d'ordre d'apparition qui suggère un classement : toutes les fiches ont exactement le même traitement, et l'ordre est celui de la page commune. C'est la contrepartie du programme de recommandation, et elle se tient d'abord dans le CSS — une liste où l'une des entrées attire l'œil est un classement, quoi qu'en dise le texte à côté. */ .rechoix-liste{list-style:none;margin:26px 0;padding:0;display:flex; flex-direction:column;gap:14px} .rechoix-fiche{background:var(--carte);border:1px solid var(--trait); border-radius:var(--r);padding:20px 22px;display:flex; justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap} .rechoix-fiche h2{font-family:var(--texte);font-weight:600;font-size:19px; letter-spacing:-.01em;margin:0} .rechoix-delai{font-size:14px;color:var(--encre-2);margin:3px 0 0} .rechoix-fiche form{margin:0} /* Une fiche complète reste VISIBLE et non sélectionnable : le bouton disparaît, la mention le remplace. Elle n'est pas grisée comme une erreur — être complète n'est pas une faute. */ .rechoix-fiche.est-complete{background:transparent} .rechoix-fiche.est-complete .rechoix-identite{opacity:.7} .rechoix-complete{font-size:14px;color:var(--encre-2);margin:0; border:1px solid var(--trait);border-radius:999px;padding:5px 14px} .rechoix-mention{color:var(--encre-2);max-width:var(--mesure)} @media (max-width:640px){ .rechoix-fiche{align-items:flex-start} .rechoix-fiche .btn{width:100%;justify-content:center} } /* ── Hub de l'annuaire : /annuaire/ ────────────────────────────────── UNE LISTE, PAS DES CARTES. Les cartes sont sur /conciergerie//, avec logo et bouton de mise en relation ; les reprendre ici ferait deux pages qui se cannibalisent, et donnerait un second tuyau de lead au site qui n'en veut qu'un. Ici on cherche un nom des yeux. PLEINE LARGEUR ET EN COLONNES. La page n'a pas de gouttière d'annotation : celle-ci sert à tenir une source et une date à côté d'un chiffre, et il n'y a aucun chiffre ici. Les entrées se répartissent donc sur toute la largeur, `auto-fill` décidant du nombre de colonnes d'après la place — une seule colonne de 1 200 px aurait mis un mètre de vide entre le nom et sa ville. */ .annuaire{padding-top:8px} .annuaire .page-tete{margin:0 0 32px} .annuaire-liste{list-style:none;margin:0 0 56px;padding:0; display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:0 40px} .annuaire-ligne{display:flex;flex-wrap:wrap;align-items:baseline; justify-content:space-between;gap:2px 20px; padding:14px 0;border-bottom:1px solid var(--trait)} /* Le nom PORTE le lien plutôt qu'un « voir la fiche » posé à côté : c'est lui qu'on balaye du regard, c'est donc lui qui doit être cliquable. */ .annuaire-nom{font-size:18px;font-weight:500} .annuaire-nom a{color:var(--encre);text-decoration:underline; text-underline-offset:3px;text-decoration-thickness:1px} .annuaire-nom a:hover{color:var(--cadastre)} /* Sans lien : la conciergerie est seule sur sa commune, aucune page ne la nomme encore. Elle reste affichée — une liste qui cache ses entrées incomplètes ment sur sa taille. */ .annuaire-ville{color:var(--encre-2);font-size:15px} .annuaire-vide{border-left:3px solid var(--trait);padding-left:18px;margin:0 0 48px} .annuaire-vide p{margin:0 0 16px} .annuaire-vide-action{margin:0} .annuaire-vide-action .btn{display:inline-block;text-decoration:none} .annuaire .bloc-methode-classement{margin:0 0 48px} .annuaire .nearby-links{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline} .annuaire .nearby-sep{color:var(--trait)} /* ═══════════════════════════════════════════════════════════════════════ NAVIGATION v2 — MOBILE. Dernier bloc de la feuille : il gagne sur tout. Seuil à 900 px, comme le cadrage du 11/08/2026. ═══════════════════════════════════════════════════════════════════════ */ @media (max-width: 899px) { /* SANS JAVASCRIPT, LE MENU RESTE DÉPLIÉ. Le repli n'existe que sous `.js`, posé en . C'est la seule façon de tenir les deux exigences à la fois : un menu replié derrière un déclencheur, et aucun contenu inatteignable script désactivé. */ .nav-toggle{display:none} .html-js .nav-toggle,html.js .nav-toggle{display:flex} .site-header .container{height:auto;flex-wrap:wrap;align-items:center; padding-top:10px;padding-bottom:10px;row-gap:6px} .logo{flex:0 0 auto;order:1} /* Le bouton d'action reste dans la barre, à droite du logo. Il ne part JAMAIS dans le menu replié. */ .main-nav{display:contents} .nav-toggle{order:2;margin-left:auto} .nav-cta{order:3} /* La zone repliable prend sa propre ligne, sous le logo et le bouton. */ .nav-repli{order:4;flex:1 1 100%} html.js .nav-repli{display:none} html.js .nav-repli.est-ouvert{display:block} .nav-menu{display:flex !important;position:static;flex-direction:column; background:none;border:0;padding:6px 0 0;gap:0;align-items:stretch} .nav-rubrique{border-top:1px solid var(--trait)} .nav-rubrique-tete{justify-content:space-between;min-height:44px} .nav-lien{display:flex;align-items:center;min-height:44px;padding:0;flex:1 1 auto} .nav-declencheur{width:44px;height:44px} /* Le panneau n'est plus flottant : il pousse le contenu. Un panneau absolu sur un écran de 375 px recouvre ce qu'on essaie de lire. */ .nav-panneau{position:static;min-width:0;border:0;border-radius:0; padding:0 0 8px 0;opacity:1;background:none} .nav-panneau li a{padding:0 0 0 14px;min-height:44px;display:flex; align-items:center;color:var(--encre-2)} .nav-panneau li a:hover{background:none;color:var(--cadastre)} } /* Très petits écrans : le plancher est 360 px. */ @media (max-width: 380px) { .nav-cta{padding:.5rem .8rem;font-size:.8125rem} .logo-text{font-size:17px} } /* ═══════════════════════════════════════════════════════════════════════ FIL D'ARIANE v2 — liens texte bruts séparés par « · ». Il remplace le fil du moteur, qui séparait par « / » et portait ses microdonnées ; le balisage vit maintenant en JSON-LD (includes/fil-ariane.php). ═══════════════════════════════════════════════════════════════════════ */ .fil-ariane{background:transparent;padding:18px 0 6px} .fil-ariane ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px; list-style:none;padding:0;margin:0;font-size:15px} .fil-ariane li{display:flex;align-items:center;gap:8px;margin:0} .fil-ariane li:not(:last-child)::after{content:'·';color:var(--encre-2);opacity:.6} .fil-ariane a{color:var(--encre-2);text-decoration:underline;text-underline-offset:2px} .fil-ariane a:hover{color:var(--cadastre)} .fil-ariane [aria-current]{color:var(--encre)} /* ═══════════════════════════════════════════════════════════════════════ LISTES DE LIENS DE MAILLAGE — communes, départements. Liens texte bruts en colonnes : ni carte, ni vignette, ni bouton. Les puces de la liste par défaut ajoutaient un signe pour rien sur des listes de plusieurs centaines d'entrées. ═══════════════════════════════════════════════════════════════════════ */ .city-links,.region-links{list-style:none;padding:0;margin:0; columns:4;column-gap:28px} .city-links li,.region-links li{margin:0 0 2px;break-inside:avoid} .city-links a,.region-links a{color:var(--cadastre);text-decoration:underline; text-underline-offset:2px;font-size:15px} .city-links a:hover,.region-links a:hover{color:var(--cadastre-clair)} @media (max-width: 899px){ .city-links,.region-links{columns:2;column-gap:20px} .fil-ariane{padding:12px 0 4px} .fil-ariane ol{font-size:14px} } @media (max-width: 400px){ .city-links,.region-links{columns:1} } /* ═══════════════════════════════════════════════════════════════════════ BARRE À 360 px — le plancher. Logo, déclencheur et bouton d'action doivent tenir sur UNE ligne : le cadrage veut le bouton « dans la barre, à droite du logo », pas relégué sur une deuxième ligne. À 360 px, 330 px sont utiles ; le logotype et le bouton en font 322 une fois resserrés, déclencheur et gouttières compris. ═══════════════════════════════════════════════════════════════════════ */ @media (max-width: 460px) { .site-header .container{padding-left:12px;padding-right:12px;column-gap:8px} .logo{gap:6px;min-width:0} .logo-text{font-size:16px} .nav-toggle{flex:0 0 auto} .nav-cta{font-size:12.5px;padding:.5rem .7rem;white-space:nowrap;flex:0 0 auto} } /* Sous 400 px, le LOGOTYPE se réduit à sa marque. « Revenus Locatifs » écrit en toutes lettres pèse 136 px : avec le bouton d'action, il ne reste plus de place pour le déclencheur, et le bouton partait sur une deuxième ligne — ce que le cadrage refuse. Le nom n'est pas perdu : il est dans le `alt` de la marque, dans le titre de l'onglet et dans le pied de page. */ @media (max-width: 400px) { .logo-text{display:none} }