/* ============================================================================
IMMOVER, feuille DA "journal immobilier contemporain"
============================================================================
Source : maquette V2 Claude Design (étape 7 bis brique B, 2026-06-03)
Statut : remplacement complet de la DA v1 baseline (jalon 1).
Backup v1 : clients/immover/audits/2026-05-refonte-cadrage/checkpoints/
2026-06-03-DA-v1-baseline/da-immover.css
Scope : la totalité des composants est scopée via "body.edition .xxx".
Le HTML doit déclarer pour activer la DA.
Les utilitaires (.u-*, .ph, .float-cta), le reset et les tokens
:root sont globaux et utilisables sans le scope.
Doctrine : voir clients/immover/audits/2026-05-refonte-cadrage/
da-doctrine-design-system.html (référentiel permanent).
Structure du fichier :
1. SOCLE (reset + tokens + utilitaires globaux)
2. COMPOSANTS PAGE QUARTIER (scope .edition)
3. EN-TÊTE REFONDU (étape 7 bis brique B)
4. MARQUEUR DONNÉES INDICATIVES (étape 7 bis brique B)
5. RESPONSIVE
============================================================================ */
/* ============================================================
1. SOCLE : reset + tokens (palette, typo, hairlines) + utilitaires
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, iframe { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }
:root {
/* palette socle (commune aux 3 directions explorées par Claude Design) */
--cream: #F5F2EC;
--cream-deep: #ECE8DF;
--white: #FFFFFF;
--ink: #1A1916; /* near-black, légèrement chaud */
--ink-soft: #3A3833;
--gray: #6B675E; /* texte secondaire */
--gray-2: #6E6A60; /* labels, captions — assombri pour contraste WCAG AA (TECH#2, ~4.6:1 sur crème) */
--gray-3: #BEB9AD; /* hairline forte — RÉSERVÉ aux bordures/désactivés, jamais texte courant (contraste insuffisant) */
--hair: #E2DDD2; /* hairline standard sur crème */
--hair-white: #EAE6DC; /* hairline sur blanc */
--blue: #1B3A5C; /* le 10% */
--blue-700: #142C46;
--blue-300: #5E7B97;
--blue-tint: #EDF1F5; /* fond bleu très clair */
--pos: #2E6B4F; /* hausse (discret) */
--neg: #9A3B2E; /* baisse (discret) */
/* tokens ajoutés pour le menu + footer "Le contraste journal" (étape 8.A.2).
--gray / --gray-2 NON redéfinis : le menu/footer héritent des valeurs
:root immover (décision pilotage 8.A.2, anti-override cross-pattern).
--blue-light de Claude Design fusionné sur --blue-300 existant (pas de
quasi-doublon de token, décision pilotage 8.A.2). */
--ink-700: #2A2823; /* hover item du dropdown Outils (sur encre) */
--ink-line: rgba(255,255,255,.10); /* filets sur fond encre (footer, drawer) */
--ink-copy: #6E7C8C; /* copyright footer (sur encre) */
--font-serif: "Fraunces", Georgia, "Times New Roman", serif;
--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, monospace;
--mn-h: 74px; /* hauteur de référence en-tête (offset drawer mobile) */
}
/* utilitaires de largeur partagés.
.u-cream / .u-white retirés (étape 7 ter, A8) : redondants avec le pattern
.surface (blanc) / absence de classe (crème). L'alternance de fond se gère
exclusivement via .surface, voir doctrine §4.2.
.u-narrow conservé : encadrés étroits centrés (citation, bloc d'appel) à
usage futur sur les pages article éditorial. */
.u-wrap { width: 100%; max-width: 1080px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 64px); }
.u-narrow { max-width: 760px; }
/* placeholder image rayé + label mono (jamais de SVG dessiné à la main) */
.ph {
position: relative;
background-color: var(--cream-deep);
background-image: repeating-linear-gradient(
-45deg,
transparent 0 11px,
rgba(26,25,22,.045) 11px 12px
);
border: 1px solid var(--hair);
display: grid;
place-items: center;
color: var(--gray-2);
font-family: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
font-size: 12px;
letter-spacing: .04em;
text-transform: uppercase;
text-align: center;
padding: 16px;
}
.ph span { max-width: 80%; }
/* focus visible accessible, neutre */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* CTA flottant (commun à toutes les directions) */
.float-cta {
position: fixed;
right: clamp(16px, 3vw, 32px);
bottom: clamp(16px, 3vw, 32px);
z-index: 60;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 22px;
background: var(--blue);
color: #fff;
font-weight: 600;
font-size: 15px;
letter-spacing: .01em;
border-radius: 2px;
box-shadow: 0 8px 28px rgba(20,30,46,.28);
transform: translateY(140%);
opacity: 0;
transition: transform .42s cubic-bezier(.2,.7,.2,1), opacity .42s ease;
text-decoration: none;
}
.float-cta.is-visible { transform: translateY(0); opacity: 1; }
.float-cta:hover { background: var(--blue-700); }
.float-cta .arrow { transition: transform .25s ease; }
.float-cta:hover .arrow { transform: translateX(3px); }
@media (max-width: 560px) {
.float-cta { left: 16px; right: 16px; bottom: 16px; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
.float-cta { transition: opacity .3s ease; transform: none; }
}
/* ============================================================================
1bis. MENU + FOOTER GLOBAL (direction "Le contraste journal", étape 8.A.2)
============================================================================
Source : Claude Design, direction retenue au cadrage 8.A.1.
Préfixes : .mn- (menu) · .ft- (footer). Scope body.edition.
Statut : intégré sur l'instance home pour audit visuel (8.A.2). Coexiste
avec l'ancien en-tête .ehead (section 3) et l'ancien footer .foot
tant que l'industrialisation 8.A.3 n'a pas migré les autres
patterns. Doctrine (fiche Menu + Footer) à figer en 8.A.4.
Variables : aucun bloc de tokens local. Le menu/footer consomme les tokens
du :root immover (décision pilotage 8.A.2). --gray / --gray-2 NON
redéfinis (anti-override cross-pattern). --blue-light de Claude
Design fusionné sur --blue-300. Tokens nouveaux (--ink-700,
--ink-line, --ink-copy, --font-*, --mn-h) ajoutés au :root.
Contraste signature : en-tête crème, footer encre.
============================================================================ */
body.edition .mn-head *, body.edition .ft-foot *{box-sizing:border-box;}
/* ----- EN-TÊTE · .mn- ----- */
body.edition .mn-head{position:sticky;top:0;z-index:200;background:var(--cream);
border-bottom:2px solid var(--ink);transition:box-shadow .25s ease;}
body.edition .mn-head.is-stuck{box-shadow:0 10px 30px -22px rgba(26,25,22,.45);}
/* Sub-bar fil d'Ariane sous le .mn-head : l'hôte .ehead réduit à la seule
sub-bar (classe .mn-subbar-host) perd son position:sticky hérité pour défiler
normalement sous le menu sticky, sans chevauchement de deux contextes
sticky top:0. Promu en CSS partagé à la clôture 8.A (toutes les instances). */
body.edition .mn-subbar-host{position:static;top:auto;z-index:auto;}
/* align-items:baseline (et non center) : le logo Fraunces 34px et les liens
serif 18px partagent désormais la même ligne de base, alignement à l'œil
(étape 8.A.2 patch 1, correction 4a). Repassé en center sous 860px (le burger
n'a pas de baseline texte, voir @860). */
body.edition .mn-bar{max-width:1120px;margin-inline:auto;padding:22px clamp(20px,4vw,44px);
display:flex;align-items:baseline;gap:24px;}
body.edition .mn-logo{font-family:var(--font-serif);font-weight:500;font-size:clamp(26px,3vw,34px);
letter-spacing:-.02em;line-height:1;color:var(--ink);text-decoration:none;flex:none;}
/* margin-left : creuse l'espace logo -> premier lien (était 24px, +18 = ~42px),
sans toucher au gap (étape 8.A.2 patch 1, correction 4b). Réinitialisé à 0
sous 860px (la nav devient un tiroir position:fixed). */
body.edition .mn-nav{flex:1;display:flex;align-items:center;gap:clamp(20px,3vw,40px);margin-left:18px;}
body.edition .mn-tail{margin-left:auto;display:flex;align-items:center;gap:clamp(16px,2vw,24px);}
body.edition .mn-link{font-family:var(--font-serif);font-weight:400;font-size:18px;line-height:1;
color:var(--ink);text-decoration:none;background:none;border:none;padding:6px 2px;cursor:pointer;transition:color .15s ease;}
body.edition .mn-link:hover{color:var(--blue);}
body.edition .mn-link:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px;}
body.edition .mn-secondary{display:flex;align-items:center;gap:9px;}
body.edition .mn-sec-link{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;
text-transform:uppercase;color:var(--gray);text-decoration:none;transition:color .15s ease;}
body.edition .mn-sec-link:hover{color:var(--ink);}
body.edition .mn-dot{color:var(--gray-3);}
body.edition .mn-cta{font-family:var(--font-sans);font-size:14px;font-weight:600;color:var(--blue);
text-decoration:none;padding:10px 18px;border:1.5px solid var(--blue);border-radius:5px;background:transparent;
white-space:nowrap;transition:background .15s ease,color .15s ease;}
body.edition .mn-cta:hover{background:var(--blue);color:var(--white);}
body.edition .mn-cta:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}
/* déroulant Outils (sombre = rappel du footer) */
body.edition .mn-has-drop{position:relative;}
body.edition .mn-drop-toggle{display:inline-flex;align-items:center;gap:7px;}
body.edition .mn-caret{transition:transform .2s ease;}
body.edition .mn-has-drop.is-open .mn-caret{transform:rotate(180deg);}
body.edition .mn-drop{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(6px);
min-width:300px;background:var(--ink);border:1px solid var(--ink);border-radius:8px;padding:9px;
box-shadow:0 24px 56px -26px rgba(26,25,22,.7);opacity:0;visibility:hidden;pointer-events:none;
transition:opacity .18s ease,transform .18s ease,visibility .18s;}
/* Pont hover : comble le gap de 16px (top:calc(100%+16px)) entre le bouton
Outils et le panneau, pour que la souris ne quitte pas .mn-has-drop en
descendant (sinon mouseleave -> fermeture). Transparent, visuel inchangé.
(étape 8.B phase 1, fix dropdown hover-gap). */
body.edition .mn-drop::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px;}
body.edition .mn-has-drop.is-open .mn-drop{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);}
body.edition .mn-drop-item{display:block;padding:11px 13px;border-radius:6px;text-decoration:none;transition:background .13s ease;}
body.edition a.mn-drop-item:hover{background:var(--ink-700);}
body.edition .mn-drop-item:focus-visible{outline:2px solid var(--blue-300);outline-offset:-2px;}
body.edition .mn-drop-t{display:block;font-family:var(--font-sans);font-size:14px;font-weight:600;color:var(--cream);}
body.edition .mn-drop-d{display:block;margin-top:2px;font-family:var(--font-sans);font-size:12.5px;color:var(--gray-3);}
body.edition .mn-drop-item.is-soon{opacity:.5;cursor:default;}
body.edition .mn-badge{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
color:var(--gray-3);border:1px solid rgba(255,255,255,.22);border-radius:3px;padding:1px 5px;margin-left:6px;vertical-align:middle;}
/* burger */
body.edition .mn-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:30px;height:24px;
padding:0;background:none;border:none;cursor:pointer;margin-left:auto;}
body.edition .mn-burger span{display:block;height:2px;width:100%;background:var(--ink);border-radius:2px;
transition:transform .22s ease,opacity .18s ease;}
/* ----- PIED DE PAGE · .ft- (rupture sombre) ----- */
body.edition .ft-foot{background:var(--ink);color:var(--cream);font-family:var(--font-sans);}
body.edition .ft-cta{border-bottom:1px solid var(--ink-line);}
body.edition .ft-cta-inner{max-width:1120px;margin-inline:auto;padding:clamp(44px,5vw,70px) clamp(20px,4vw,44px);
display:grid;grid-template-columns:1fr auto;gap:34px;align-items:center;}
body.edition .ft-cta-title{font-family:var(--font-serif);font-weight:400;font-size:clamp(28px,3.6vw,48px);
line-height:1.05;letter-spacing:-.015em;color:var(--white);max-width:16ch;}
body.edition .ft-cta-text{margin-top:12px;font-size:15px;line-height:1.55;color:var(--gray-3);max-width:44ch;}
body.edition .ft-cta-btn{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:600;color:var(--ink);
text-decoration:none;background:var(--cream);padding:15px 26px;border-radius:5px;white-space:nowrap;transition:background .15s ease;}
body.edition .ft-cta-btn:hover{background:var(--white);}
body.edition .ft-cta-btn:focus-visible{outline:2px solid var(--blue-300);outline-offset:3px;}
body.edition .ft-ar{transition:transform .2s ease;}
body.edition .ft-cta-btn:hover .ft-ar{transform:translateX(3px);}
body.edition .ft-main{max-width:1120px;margin-inline:auto;padding:clamp(40px,4.5vw,56px) clamp(20px,4vw,44px);
display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px;}
body.edition .ft-brand-logo{font-family:var(--font-serif);font-weight:500;font-size:28px;letter-spacing:-.02em;color:var(--white);}
body.edition .ft-brand-sig{margin-top:14px;font-size:13.5px;line-height:1.6;color:var(--gray-3);max-width:34ch;}
body.edition .ft-brand-sig b{color:var(--cream);font-weight:600;}
body.edition .ft-col-head{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.1em;
text-transform:uppercase;color:var(--blue-300);margin-bottom:15px;}
body.edition .ft-list{list-style:none;margin:0;padding:0;display:grid;gap:11px;}
body.edition .ft-list a{font-size:14px;color:var(--gray-3);text-decoration:none;transition:color .13s ease;}
body.edition .ft-list a:hover{color:var(--white);}
body.edition .ft-list a:focus-visible{outline:2px solid var(--blue-300);outline-offset:3px;border-radius:2px;}
body.edition .ft-legal{border-top:1px solid var(--ink-line);}
body.edition .ft-legal-inner{max-width:1120px;margin-inline:auto;padding:22px clamp(20px,4vw,44px);
display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;}
body.edition .ft-copy{font-family:var(--font-mono);font-size:11px;color:var(--ink-copy);}
body.edition .ft-legal-spacer{margin-left:auto;}
body.edition .ft-legal a{font-size:12px;color:var(--gray-3);text-decoration:none;transition:color .13s ease;}
body.edition .ft-legal a:hover{color:var(--white);}
body.edition .ft-legal a:focus-visible{outline:2px solid var(--blue-300);outline-offset:3px;border-radius:2px;}
body.edition .ft-dot{color:#4A5563;}
/* ----- RESPONSIVE menu + footer ----- */
@media (max-width:900px){
body.edition .ft-main{grid-template-columns:1fr 1fr;gap:30px 26px;}
body.edition .ft-brand{grid-column:1 / -1;}
body.edition .ft-cta-inner{grid-template-columns:1fr;gap:24px;}
}
@media (max-width:860px){
body.edition .mn-bar{align-items:center;}
body.edition .mn-burger{display:flex;}
body.edition .mn-nav{position:fixed;inset:var(--mn-h) 0 0 0;flex-direction:column;align-items:stretch;gap:0;margin-left:0;
background:var(--ink);padding:14px clamp(20px,6vw,28px) 28px;overflow-y:auto;transform:translateX(100%);
visibility:hidden;transition:transform .28s cubic-bezier(.4,0,.2,1),visibility .28s;}
body.edition .mn-head.is-nav-open .mn-nav{transform:translateX(0);visibility:visible;}
body.edition .mn-nav > .mn-link, body.edition .mn-drop-toggle{color:var(--cream);font-size:24px;padding:16px 0;
border-bottom:1px solid var(--ink-line);width:100%;text-align:left;justify-content:space-between;}
body.edition .mn-link:hover, body.edition .mn-drop-toggle:hover{color:var(--blue-300);}
body.edition .mn-has-drop{width:100%;}
/* Sous-menu Outils mobile (BUG #23) : sous-items indentés, lisibles et tappables. */
body.edition .mn-drop{position:static;transform:none;min-width:0;width:100%;background:transparent;border:none;
box-shadow:none;padding:2px 0 6px 16px;margin-top:4px;opacity:1;visibility:visible;pointer-events:auto;max-height:0;overflow:hidden;transition:max-height .28s ease;border-left:2px solid var(--ink-line);}
/* FIX #23 : annuler le transform de centrage desktop (.mn-has-drop.is-open .mn-drop
a une spécificité supérieure et décalait le sous-menu de -50% sur mobile). */
body.edition .mn-has-drop.is-open .mn-drop{max-height:600px;transform:none;left:auto;}
body.edition .mn-drop-item{min-height:44px;}
body.edition .mn-drop-item{display:block;padding:13px 0;}
body.edition a.mn-drop-item:hover{background:transparent;}
body.edition .mn-drop-t{color:var(--cream);font-size:18px;font-weight:500;}
body.edition .mn-drop-item.is-soon .mn-drop-t{color:var(--gray-3);}
body.edition .mn-has-drop.is-open .mn-drop-item:hover .mn-drop-t{color:var(--blue-300);}
body.edition .mn-drop-d{display:block;color:var(--gray-3);font-size:13px;margin-top:2px;}
body.edition .mn-tail{margin-left:0;flex-direction:column;align-items:stretch;gap:18px;margin-top:22px;}
body.edition .mn-secondary{gap:14px;}
body.edition .mn-sec-link{color:var(--gray-3);font-size:13px;}
body.edition .mn-sec-link:hover{color:var(--cream);}
body.edition .mn-dot{color:#4A5563;}
body.edition .mn-cta{text-align:center;color:var(--cream);border-color:var(--cream);padding:14px;}
body.edition .mn-cta:hover{background:var(--cream);color:var(--ink);}
body.edition .mn-head.is-nav-open .mn-burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
body.edition .mn-head.is-nav-open .mn-burger span:nth-child(2){opacity:0;}
body.edition .mn-head.is-nav-open .mn-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
}
@media (max-width:520px){
body.edition .ft-main{grid-template-columns:1fr;gap:28px;}
body.edition .ft-legal-inner{gap:10px 12px;}
body.edition .ft-legal-spacer{display:none;width:100%;}
body.edition .ft-copy{width:100%;}
}
@media (prefers-reduced-motion:reduce){
body.edition .mn-head *, body.edition .ft-foot *{transition:none !important;}
}
/* ============================================================
2. COMPOSANTS PAGE QUARTIER (scope .edition)
"ÉDITION" : le journal raffiné (hybride équilibré)
Fraunces (titres) + Inter (corps) + navy #1B3A5C
============================================================ */
body.edition {
background: var(--cream); color: var(--ink);
font-family: "Inter", system-ui, sans-serif; font-size: 17px; letter-spacing: -0.003em;
}
.edition ::selection { background: var(--blue); color: #fff; }
.edition h1, .edition h2, .edition h3 { font-family: "Fraunces", Georgia, serif; font-weight: 400; line-height: 1.06; letter-spacing: -0.01em; color: var(--ink); }
.edition p { color: var(--ink-soft); text-wrap: pretty; }
.edition .muted { color: var(--gray); }
.edition .serif { font-family: "Fraunces", serif; }
.edition .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
.edition section { padding-block: clamp(44px, 6vw, 76px); }
.edition .surface { background: var(--white); }
.edition .rule-t { border-top: 1px solid var(--hair); }
.edition .sec-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--gray-3); padding-bottom: 14px; margin-bottom: clamp(24px, 3vw, 36px); }
.edition .sec-head h2 { font-size: clamp(26px, 3.2vw, 38px); }
.edition .sec-head .eyebrow { margin-left: auto; }
/* 1. hero */
.edition .hero {
/* Resserrement "option 3" (décision 2, étape 7 ter brique C, 2026-06-06) :
rythme vertical réduit ~30 % pour que le haut de l'estimateur (bloc 2)
affleure le bas d'un écran 1080p. Valeurs précédentes :
padding-top clamp(36px,4vw,56px) / padding-bottom clamp(28px,3vw,44px). */
padding-top: clamp(24px, 2.8vw, 38px);
padding-bottom: clamp(18px, 2vw, 30px);
}
.edition .hero .eyebrow { display: block; margin-bottom: 10px; }
/* Signature éditoriale de marque (eyebrow-brand).
Convention permanente : chaque type de page porte sa rubrique signature
dans l'eyebrow du hero, distincte du surtitre kicker standard.
- Pages quartier : "Le baromètre immover"
- Pages ville (à venir, étape 8+) : "L'observatoire immover"
- Autres types à définir au scaling.
Différenciation visuelle vs .eyebrow standard :
- couleur bleu navy (rubrique signature visuelle forte)
- letter-spacing plus serré (.08em vs .16em) pour souder les mots
Convention introduite étape 7 bis correction 1, 2026-06-04.
Couleur révisée en bleu navy (correction 1 vague 2, 2026-06-04). */
.edition .eyebrow.eyebrow-brand {
color: var(--blue);
letter-spacing: .08em;
}
.edition .hero h1 { font-size: clamp(34px, 4.8vw, 58px); max-width: none; }
.edition .hero h1 .h1-main { display: block; white-space: nowrap; }
.edition .hero h1 .h1-sub { display: block; font-size: clamp(19px, 2.4vw, 28px); color: var(--gray); margin-top: 6px; white-space: nowrap; }
.edition .hero .deck { font-family: "Fraunces", serif; font-size: clamp(19px, 2.1vw, 24px); color: var(--ink-soft); max-width: 50ch; margin-top: 18px; line-height: 1.34; font-weight: 400; }
.edition .hero .meta { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; color: var(--gray); }
.edition .hero .meta b { color: var(--ink); font-weight: 600; }
/* hero-figure : ratio aplati 3/1 (était 16/7 ≈ 2.28) + marge réduite,
resserrement option 3 (décision 2). Panoramique moins haut, présence
préservée, pas d'effet bandeau plat. */
.edition .hero-figure { margin-top: clamp(18px, 2.4vw, 28px); aspect-ratio: 3/1; }
/* Variante image (étape 7 bis correction image, 2026-06-04 ; ratio révisé
3/1 décision 2, 2026-06-06).
Quand ![]()
remplace le placeholder , on force aspect-ratio
3/1 et object-fit:cover : homogénéise les rendus du scaling étape 8 quelle
que soit la résolution source. Bordure 1px hair conservée pour cohérence
avec le pattern .ph (cadre net autour de l'illustration).
Le placeholder .ph reste en place dans le CSS et utilisable sur les futures
pages quartier en attente d'illustration : pattern de scaling. */
.edition img.hero-figure {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3/1;
object-fit: cover;
border: 1px solid var(--hair);
}
.edition .meta .m-short { display: none; }
/* Légende hero (cloture etape 7 bis, 2026-06-04) : formule automatisable
"Illustration du quartier de {NomQuartier}, {Ville}." unifiee desktop
et mobile. Système cap-full / cap-short retire (vague 4) puisque la
nouvelle formule courte tient sur 1 ligne en mobile sans bascule. */
.edition .cap { font-size: 12.5px; color: var(--gray); margin-top: 6px; font-style: italic; }
/* Métadonnées : empilement classique sous le bloc titre (patch 4, 2026-06-06).
La grille meta-sur-titre (@media min-width:761px sur .hero .u-wrap) a été
retirée : sur les titres longs type quartier ("Prix au m² à Cimiez, Nice"),
la cohabitation titre + meta à droite était trop serrée. Choix de pilotage :
meta empilées partout (ville, quartier, arrondissement), desktop et mobile,
pour la simplicité et la cohérence cross-pages. Le .meta reste en flux normal
sous le H1 (voir .hero .meta margin-top en début de section hero). */
/* module (estimateur, simulateur) wrapper */
.edition .module { border: 1px solid var(--gray-3); background: var(--white); }
.edition .module .mbar { display: flex; justify-content: space-between; align-items: center; padding: 10px 18px; background: var(--ink); color: #fff; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.edition .module .mbar .tagm { color: rgba(255,255,255,.6); letter-spacing: .1em; font-weight: 500; text-transform: none; font-size: 11px; }
.edition .est { display: grid; grid-template-columns: 1fr 1fr; }
.edition .est .col { padding: clamp(22px, 2.8vw, 36px); }
.edition .est .col + .col { border-left: 1px solid var(--hair); }
.edition .est h2 { font-size: clamp(23px, 2.8vw, 30px); margin-bottom: 10px; }
.edition .field { display: grid; gap: 7px; margin-bottom: 16px; }
.edition .field .label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gray); }
.edition .seg { display: flex; }
.edition .seg button { flex: 1; padding: 11px; border: 1px solid var(--gray-3); background: var(--cream); font-weight: 500; font-size: 14px; }
.edition .seg button + button { border-left: 0; }
.edition .seg button.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.edition input[type=number], .edition select { width: 100%; padding: 12px; border: 1px solid var(--gray-3); background: var(--white); font-size: 16px; }
.edition .est-out { border-top: 1px solid var(--ink); margin-top: 4px; padding-top: 14px; }
.edition .est-out .big { font-family: "Fraunces", serif; font-size: clamp(32px, 4.2vw, 46px); line-height: 1; display: block; }
.edition .est-out .rng { font-size: 13px; color: var(--gray); margin-top: 8px; }
.edition .btn { display: inline-flex; gap: 9px; align-items: center; justify-content: center; padding: 13px 24px; background: var(--blue); color: #fff; font-weight: 600; text-decoration: none; margin-top: 16px; font-size: 15px; border-radius: 2px; }
.edition .btn:hover { background: var(--blue-700); }
.edition .arrow { transition: transform .2s; } .edition .btn:hover .arrow { transform: translateX(3px); }
/* barres navy (cherrypick B1) */
.bar-track { height: 9px; background: var(--cream-deep); border-radius: 1px; overflow: hidden; }
.bar-track > i { display: block; height: 100%; width: var(--w, 0%); background: var(--blue); }
.bar-track.self > i { background: var(--ink); }
/* 3. prix m² */
.edition .stat-lead { display: grid; grid-template-columns: auto 1fr; gap: clamp(22px, 4vw, 44px); align-items: center; padding-bottom: 22px; border-bottom: 1px solid var(--gray-3); margin-bottom: 22px; }
.edition .stat-lead .big { font-family: "Fraunces", serif; font-size: clamp(58px, 9vw, 104px); line-height: .85; }
.edition .stat-lead .big sup { font-size: .26em; vertical-align: top; color: var(--gray); font-family: "Inter"; font-weight: 500; }
/* desc : pleine largeur du conteneur (décision 1, étape 7 ter brique C,
2026-06-06). max-width: 38ch retiré : tous les paragraphes textuels des
pages SEO prennent la pleine largeur (voir doctrine §2.5). */
.edition .stat-lead .desc { font-size: clamp(16px, 1.8vw, 18px); color: var(--ink-soft); }
.edition .pricebars { display: grid; gap: 0; }
.edition .pricebars .pb { display: grid; grid-template-columns: 130px 1fr 92px; gap: 18px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.edition .pricebars .pb .nm { font-weight: 500; font-size: 15px; }
.edition .pricebars .pb .v { font-family: "Fraunces", serif; font-size: 18px; text-align: right; font-variant-numeric: tabular-nums; }
.edition .secondrow { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin-top: 22px; background: var(--hair); border: 1px solid var(--hair); }
.edition .secondrow .c { background: var(--white); padding: 16px; }
.edition .secondrow .l { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-2); }
.edition .secondrow .n { font-family: "Fraunces", serif; font-size: 24px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.edition .secondrow .n.pos { color: var(--pos); }
.edition .secondrow .n.neg { color: var(--neg); } /* KPI en repli, aligné sur .dl.neg du comparatif (étape 7 ter, A12) */
/* Mention source DVF + lien méthodologie sous le bloc prix (Phase 5). */
.edition .prix-source { margin-top: 18px; font-size: 13px; line-height: 1.55; color: var(--gray); }
.edition .prix-source a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--gray-3); }
.edition .prix-source a:hover { text-decoration-color: var(--blue); }
/* 4. comparatif (barres) */
/* Colonne nom élargie 150 -> 200px (patch 6) : les communes longues du bloc
ville "{Ville} sur la Côte d'Azur" (Saint-Jean-Cap-Ferrat, Villefranche-sur-Mer)
tiennent sur 1 ligne (nowrap). La zone des barres (1fr) absorbe les -50px.
Sur les pages quartier (noms courts), pas de régression : plus d'air à gauche. */
.edition .cmp-row { display: grid; grid-template-columns: 200px 1fr 92px 64px; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.edition .cmp-row .qn { font-weight: 500; white-space: nowrap; }
.edition .cmp-row.self .qn { font-weight: 600; }
.edition .cmp-row .pv { font-family: "Fraunces", serif; font-size: 18px; text-align: right; font-variant-numeric: tabular-nums; }
.edition .cmp-row .dl { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }
.edition .cmp-row .dl.pos { color: var(--pos); } .edition .cmp-row .dl.neg { color: var(--neg); }
.edition .cmp-head { display: grid; grid-template-columns: 200px 1fr 92px 64px; gap: 16px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-2); font-weight: 600; padding-bottom: 9px; border-bottom: 1px solid var(--ink); }
.edition .cmp-head span:nth-child(n+3) { text-align: right; }
/* prose */
.edition .single { max-width: none; } .edition .single p { font-size: 17px; line-height: 1.62; }
/* Bloc Tendance : graphique principal (vague 8, 2026-06-04).
Composant autonome préfixé .tc-* intégré depuis le standalone Claude Design
"Variante B : courbe nette, valeur lisible à chaque nœud" (cf.
clients/immover/audits/2026-05-refonte-cadrage/ pour le standalone source).
Hérite des variables CSS du SOCLE (--blue, --ink, --hair, --gray-*), pas
de duplication. Scopé sous .edition pour cohérence avec le reste du CSS.
Le préfixe .tc-* permet la réutilisation sans collision sur les futures
pages ville hub / arrondissement à l'étape 8+. */
.edition .tc-card {
background: var(--white);
border: 1px solid var(--hair);
border-radius: 2px;
padding: clamp(20px, 3vw, 30px) clamp(16px, 2.4vw, 26px) clamp(14px, 2vw, 20px);
}
.edition .tc-fig { margin: 0; }
.edition .tc-svg { display: block; width: 100%; height: auto; overflow: visible; }
.edition .tc-grid { stroke: var(--hair); stroke-width: 1; }
.edition .tc-baseline { stroke: var(--gray-3); stroke-width: 1; }
.edition .tc-ylab {
font-family: "Inter", sans-serif;
font-size: 13px;
font-weight: 400;
fill: var(--gray-2);
font-variant-numeric: tabular-nums;
letter-spacing: .01em;
}
.edition .tc-xlab {
font-family: "Inter", sans-serif;
font-size: 13px;
font-weight: 500;
fill: var(--gray);
font-variant-numeric: tabular-nums;
letter-spacing: .02em;
}
.edition .tc-line {
fill: none;
stroke: var(--blue);
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
.edition .tc-node { fill: var(--blue); }
.edition .tc-node-hi {
fill: var(--blue);
stroke: var(--white);
stroke-width: 2;
}
.edition .tc-annot {
font-family: "Inter", sans-serif;
font-size: 14px;
font-weight: 500;
fill: var(--ink);
font-variant-numeric: tabular-nums;
letter-spacing: .005em;
}
.edition .tc-annot-sm {
font-family: "Inter", sans-serif;
font-size: 13px;
font-weight: 500;
fill: var(--ink);
font-variant-numeric: tabular-nums;
}
.edition .tc-cap {
margin-top: 14px;
font-size: 12.5px;
font-style: italic;
color: var(--gray);
line-height: 1.45;
}
.edition .trend-text {
margin-top: clamp(24px, 4vw, 40px);
}
/* max-width none (vague 7) : pleine largeur conteneur, cohérent avec les
autres blocs de prose. text-wrap pretty (hérité du standalone vague 8)
pour une coupure visuelle plus propre. */
.edition .trend-text p {
font-size: 17px;
line-height: 1.62;
max-width: none;
text-wrap: pretty;
}
.edition .histoire { max-width: none; }
.edition .histoire p { font-size: 17px; line-height: 1.66; }
.edition .histoire p + p { margin-top: 1em; }
.edition .feature { columns: 2; column-gap: clamp(26px,3.5vw,44px); }
.edition .feature p { break-inside: avoid; } .edition .feature p + p { margin-top: 1em; }
.edition .dropcap::first-letter { font-family: "Fraunces", serif; float: left; font-size: 4.2em; line-height: .74; padding-right: .07em; color: var(--blue); }
/* accessibilité */
.edition .access { max-width: none; }
.edition .access li { display: grid; grid-template-columns: 170px 1fr; gap: 22px; padding: 14px 0; border-bottom: 1px solid var(--hair); align-items: baseline; }
.edition .access li span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.edition .access .k { font-weight: 600; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--blue); padding-top: 2px; }
/* commerces */
.edition .cols3 { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(24px,3vw,40px); }
.edition .cols3 h3 { font-size: 21px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.edition .cols3 p { font-size: 16px; }
/* carte */
.edition .map { border: 1px solid var(--gray-3); aspect-ratio: 16/8; overflow: hidden; background: var(--cream-deep); }
.edition .map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.55) contrast(.96); }
.edition .map-cap { font-size: 12px; color: var(--gray); font-style: italic; margin-top: 8px; }
/* faq */
.edition [data-faq-item] { border-bottom: 1px solid var(--hair); } .edition [data-faq-item]:first-child { border-top: 0; }
.edition [data-faq-q] { width: 100%; display: flex; justify-content: space-between; gap: 18px; align-items: baseline; text-align: left; padding: 20px 0; }
.edition [data-faq-q] .q { font-family: "Fraunces", serif; font-size: clamp(19px,2.2vw,24px); }
.edition [data-faq-q] .ic { font-size: 24px; color: var(--blue); line-height: 1; }
.edition [data-faq-item].is-open .ic { transform: rotate(45deg); }
.edition [data-faq-a] { max-height: 0; overflow: hidden; transition: max-height .3s; }
.edition [data-faq-item].is-open [data-faq-a] { max-height: 340px; }
/* réponse FAQ : pleine largeur (décision 1, étape 7 ter brique C). max-width:
66ch retiré : c'était le seul resserrement 66ch du CSS, désormais réservé
aux futurs articles éditoriaux et non aux pages SEO (voir doctrine §2.5). */
.edition [data-faq-a] p { padding-bottom: 22px; }
/* autres quartiers */
.edition .quartiers { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); }
.edition .quartiers a { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 18px; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); text-decoration: none; }
.edition .quartiers a:hover { background: var(--cream-deep); }
.edition .quartiers .qn { font-family: "Fraunces", serif; font-size: 20px; }
.edition .quartiers .qp { font-size: 14px; color: var(--gray); font-variant-numeric: tabular-nums; }
/* 13. simulateur sliders fins (cherrypick A1) */
.edition .sim { border: 1px solid var(--gray-3); border-left: 4px solid var(--blue); background: var(--white); }
.edition .sim .mbar { background: var(--blue); }
.edition .sim-grid { display: grid; grid-template-columns: 1fr 1fr; }
.edition .sim-grid .col { padding: clamp(22px,2.8vw,36px); }
.edition .sim-grid .col + .col { border-left: 1px solid var(--hair); background: var(--cream); }
.edition .sim h2 { font-size: clamp(23px,2.8vw,30px); margin-bottom: 10px; }
.edition .slider { margin-bottom: 18px; }
.edition .slider .top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.edition .slider .lab { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--gray); }
.edition .slider .echo { font-family: "Fraunces", serif; font-size: 17px; font-variant-numeric: tabular-nums; }
.edition input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; background: var(--gray-3); border-radius: 2px; outline-offset: 6px; }
.edition input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--blue); border: 2px solid var(--white); box-shadow: 0 1px 4px rgba(20,30,46,.3); cursor: pointer; }
.edition input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--blue); border: 2px solid var(--white); cursor: pointer; }
.edition .sim-out { display: grid; gap: 0; }
.edition .sim-out .line { display: flex; justify-content: space-between; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--hair); }
.edition .sim-out .line .lab { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--gray); }
.edition .sim-out .line .v { font-family: "Fraunces", serif; font-size: 17px; font-variant-numeric: tabular-nums; }
.edition .sim-out .net { border-bottom: 0; padding-top: 14px; }
.edition .sim-out .net .v { font-size: 28px; color: var(--blue); }
/* 14. cta final */
.edition .final { background: var(--blue); color: #fff; text-align: center; }
.edition .final .eyebrow { color: rgba(255,255,255,.7); }
.edition .final h2 { color: #fff; font-size: clamp(30px,4.4vw,52px); max-width: 16ch; margin: 12px auto 14px; }
.edition .final p { color: rgba(255,255,255,.78); max-width: 48ch; margin: 0 auto 26px; }
.edition .final .btn-light { display: inline-flex; gap: 10px; align-items: center; padding: 16px 32px; background: #fff; color: var(--blue); font-weight: 600; text-decoration: none; font-size: 16px; border-radius: 2px; }
.edition .final .btn-light:hover { background: var(--cream); }
.edition .foot { border-top: 1px solid var(--gray-3); font-size: 12px; color: var(--gray); }
.edition .foot .u-wrap { padding-block: 26px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; }
.edition .float-cta { border-radius: 2px; font-family: "Inter", sans-serif; }
/* ============================================================
3. EN-TÊTE REFONDU (étape 7 bis brique B, 2026-06-03)
Structure 3 zones : gauche (rubriques) + centre (CTA badge) + droite (utilitaires).
Logo .wm en début de barre. Hamburger mobile sous 860px.
============================================================ */
.edition .ehead { background: var(--cream); border-bottom: 1px solid var(--gray-3); position: sticky; top: 0; z-index: 50; }
/* bar : gap augmenté de 22 à 28 pour creuser la respiration entre les 3
zones (gauche / centre / droite). align-items center + line-heights
harmonisés assurent un alignement vertical impeccable. */
.edition .ehead .bar { display: flex; align-items: center; gap: 28px; padding-block: 14px; }
.edition .ehead .wm {
font-family: "Fraunces", serif;
font-weight: 500;
font-size: 23px;
letter-spacing: .01em;
text-decoration: none;
color: var(--ink);
flex-shrink: 0;
}
/* Rubriques principales gauche. gap interne 26 (en harmonie avec bar gap 28).
line-height aligné sur celui des autres composantes pour baseline visuelle. */
.edition .nav-main { display: flex; align-items: center; gap: 26px; font-size: 14px; font-weight: 500; line-height: 1.2; }
.edition .nav-main .nav-link {
text-decoration: none;
color: var(--ink);
padding: 4px 0;
background: none;
border: none;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: 1.2;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 5px;
}
.edition .nav-main .nav-link:hover { color: var(--blue); }
.edition .nav-main .caret {
font-size: 9px;
color: var(--gray-2);
transition: transform .2s;
}
.edition .nav-dropdown:hover .caret,
.edition .nav-dropdown:focus-within .caret { transform: rotate(180deg); color: var(--blue); }
/* Dropdown Outils */
.edition .nav-dropdown { position: relative; }
.edition .nav-submenu {
position: absolute;
top: calc(100% + 4px);
left: -16px;
min-width: 280px;
background: var(--white);
border: 1px solid var(--gray-3);
padding: 8px 0;
display: none;
flex-direction: column;
box-shadow: 0 8px 28px rgba(20,30,46,.08);
z-index: 60;
}
.edition .nav-dropdown:hover .nav-submenu,
.edition .nav-dropdown:focus-within .nav-submenu { display: flex; }
.edition .nav-submenu a {
padding: 10px 18px;
text-decoration: none;
color: var(--ink);
font-size: 14px;
font-weight: 500;
}
.edition .nav-submenu a:hover {
background: var(--cream);
color: var(--blue);
}
.edition .nav-submenu .nav-sep-row {
height: 1px;
background: var(--hair);
margin: 6px 16px;
}
.edition .nav-submenu .nav-strategie {
padding: 8px 18px 10px;
font-size: 12px;
color: var(--gray);
font-style: italic;
}
/* CTA centre (badge plein). Allégé pour ne pas écraser le menu :
padding réduit de 14×24 à 9×20, font-size aligné sur nav-main (14px),
line-height harmonisé pour alignement baseline avec les rubriques.
margin-inline:auto consomme l'espace libre, ce qui crée la respiration
visible entre la zone gauche et la zone droite. */
.edition .nav-cta {
margin-inline: auto;
display: inline-block;
padding: 9px 20px;
background: var(--blue);
color: #fff;
font-size: 14px;
font-weight: 600;
line-height: 1.2;
letter-spacing: .01em;
text-decoration: none;
border-radius: 6px;
transition: background .2s;
flex-shrink: 0;
}
.edition .nav-cta:hover { background: var(--blue-700); color: #fff; }
/* Liens utilitaires droite. line-height harmonisé pour baseline. */
.edition .nav-util { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.2; color: var(--gray); flex-shrink: 0; }
.edition .nav-util a {
text-decoration: none;
color: var(--gray);
transition: color .2s;
}
.edition .nav-util a:hover { color: var(--ink); }
.edition .nav-util .nav-sep { color: var(--gray-3); }
/* Hamburger mobile (caché desktop) */
.edition .nav-burger {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
padding: 8px;
cursor: pointer;
margin-left: auto;
}
.edition .nav-burger span {
display: block;
width: 22px;
height: 2px;
background: var(--ink);
}
/* Sub-bar conservée (fil d'Ariane + tag Dossier) */
.edition .ehead .subbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 9px; border-top: 1px solid var(--hair); font-size: 12px; }
.edition .ehead .dossier { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); font-weight: 600; }
.edition .crumbs { display: flex; gap: 8px; color: var(--gray); }
.edition .crumbs a { text-decoration: none; }
.edition .crumbs .sep { color: var(--gray-3); }
/* Panneau menu mobile (s'ouvre via hamburger) */
.edition .nav-mobile {
display: none;
flex-direction: column;
padding: 20px clamp(20px, 5vw, 64px) 24px;
border-top: 1px solid var(--hair);
background: var(--cream);
}
.edition .nav-mobile.is-open { display: flex; }
.edition .nav-mobile-main a,
.edition .nav-mobile-main .nav-link {
display: block;
padding: 16px 0;
font-size: 17px;
font-weight: 500;
text-decoration: none;
color: var(--ink);
border-bottom: 1px solid var(--hair);
background: none;
width: 100%;
text-align: left;
font-family: inherit;
cursor: pointer;
}
.edition .nav-mobile-sub {
padding-left: 18px;
padding-bottom: 6px;
border-bottom: 1px solid var(--hair);
}
.edition .nav-mobile-sub a {
display: block;
padding: 10px 0;
font-size: 14px;
color: var(--ink-soft);
text-decoration: none;
border: none;
}
.edition .nav-mobile-sub .nav-strategie {
font-style: italic;
color: var(--gray);
font-size: 12px;
padding-top: 4px;
}
.edition .nav-mobile .nav-cta {
margin: 22px 0;
text-align: center;
display: block;
font-size: 16px;
padding: 16px 24px;
}
.edition .nav-mobile-util {
display: flex;
gap: 14px;
justify-content: center;
align-items: center;
font-size: 13px;
color: var(--gray);
padding-top: 6px;
}
.edition .nav-mobile-util a {
text-decoration: none;
color: var(--gray);
}
.edition .nav-mobile-util .nav-sep { color: var(--gray-3); }
/* ============================================================
4. MARQUEUR DONNÉES INDICATIVES (étape 7 bis brique B)
Discret, intégré dans l'eyebrow du Bloc 3 prix au m².
À retirer ou remplacer par la note de source DVF officielle
à l'étape 8 (pipeline DVF branché).
============================================================ */
.edition .eyebrow-note {
font-weight: 400;
letter-spacing: .04em;
color: var(--gray-2);
text-transform: none;
font-size: 11px;
margin-left: 6px;
}
/* ============================================================
5. RESPONSIVE
Breakpoints : 860 (bascule mobile en-tête + grilles 2 cols),
760 (régime mobile éditorial), 520 (compactage fin).
============================================================ */
@media (max-width: 860px) {
.edition .est, .edition .sim-grid { grid-template-columns: 1fr; }
.edition .est .col + .col, .edition .sim-grid .col + .col { border-left: 0; border-top: 1px solid var(--hair); }
.edition .feature { columns: 1; }
.edition .cols3 { grid-template-columns: 1fr; }
.edition .secondrow { grid-template-columns: repeat(2,1fr); }
.edition .quartiers { grid-template-columns: repeat(2,1fr); }
/* En-tête : bascule en hamburger */
.edition .nav-main,
.edition .nav-util { display: none; }
/* Le badge CTA du header est masqué en mobile pour éviter le doublon avec
le CTA flottant qui apparaît au scroll (vague 4 finitions mobile,
2026-06-04). Sélecteur enfant direct .bar > .nav-cta pour ne PAS
toucher le .nav-cta du panneau hamburger (qui reste visible une fois
le menu ouvert). */
.edition .ehead .bar > .nav-cta { display: none; }
.edition .nav-burger { display: flex; margin-left: auto; }
}
@media (max-width: 760px) {
/* Fil d'Ariane : scroll horizontal sur mobile (étape 7 ter brique D, patch 3).
Quand le chemin est long (ex. article "Accueil / Journal / Actualités /
Taxe foncière à Nice en 2026"), il passait sur 2-3 lignes. Désormais une
seule ligne, swipe horizontal, scrollbar masquée, padding-right pour
indiquer le contenu hors écran. Convention transverse à tous les types de
pages (article, ville, quartier, index Journal). Sur desktop, inchangé. */
.edition .ehead .subbar .crumbs {
flex: 1 1 0;
min-width: 0;
flex-wrap: nowrap;
white-space: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-right: 24px;
}
.edition .ehead .subbar .crumbs::-webkit-scrollbar { display: none; }
.edition .ehead .subbar .crumbs > * { flex-shrink: 0; }
/* H1 sur une seule ligne en mobile */
.edition .hero h1 { font-size: clamp(21px, 6.1vw, 40px); }
.edition .hero h1 .h1-main { white-space: nowrap; }
.edition .hero h1 .h1-sub { white-space: nowrap; font-size: clamp(14px, 3.6vw, 22px); }
/* métadonnées chapeau condensées */
.edition .meta { gap: 0; flex-wrap: nowrap; font-size: 12px; }
.edition .meta .m-full { display: none; }
.edition .meta .m-short { display: inline; white-space: nowrap; }
/* accessibilité : label resserré */
.edition .access li { grid-template-columns: 130px 1fr; gap: 14px; align-items: center; }
.edition .access li span:last-child { white-space: normal; overflow: visible; }
.edition .access .k { padding-top: 0; }
/* carte : plus grande et plus carrée, légende masquée */
.edition .map { aspect-ratio: 1 / 1; }
.edition .map-cap { display: none; }
/* Eyebrows alignés à gauche sous le titre en mobile.
Sur desktop l'eyebrow est à droite du H2 sur la même ligne (margin-left:
auto dans .sec-head .eyebrow). Sur mobile on empile en colonne et on
remet à gauche.
Alignement du bord gauche eyebrow / H2 (corrigé patch 8, 2026-06-06,
MESURÉ au canvas avec les vraies polices, pas estimé).
Les boîtes de l'eyebrow et du H2 sont déjà parfaitement alignées (même
bord gauche, vérifié : diff 0px). Le letter-spacing .16em est *trailing*
(après chaque glyphe), il ne décale PAS le premier caractère : la prémisse
des patches précédents était fausse. Le seul écart réel est la chasse
gauche (sidebearing), sous-pixel : H2 Fraunces "T" ≈0,4px, eyebrow Inter
uppercase ≈0,8px (L/É/P), ≈1,0px (+), ≈0,3px (€). text-indent idéal
= chasse_H2 - chasse_eyebrow ≈ -0,4px ≈ -.03 à -.04em.
Les -.16em puis -.1em précédents (≈ -1,9 / -1,2px) sur-tiraient l'eyebrow
~1px trop à gauche : C'ÉTAIT LA CAUSE DU DÉCALAGE VISIBLE.
Patch 9 (finale) : -.04em laissait un résiduel gauche encore visible à
l'œil sur écran réel (au-delà de ce que la mesure canvas reproduisait :
optical-sizing Fraunces / DPR / hinting non captés). Nudge de +0,03em vers
la droite après retour visuel : valeur portée à -.01em. Un em fixe ne peut
être pixel-parfait pour tous les glyphes initiaux (chasses différentes),
mais on est désormais au plus près de l'alignement pour les eyebrows réels.
Reset margin/padding pour éliminer tout résiduel d'un user-agent stylesheet. */
.edition .sec-head {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.edition .sec-head .eyebrow {
display: block;
margin: 0;
padding: 0;
text-indent: -.01em;
}
.edition .sec-head h2 {
margin: 0;
padding: 0;
}
/* Graphique Tendance .tc-* : compensation font-sizes SVG en mobile
(vague 8, intégration variante B Claude Design ; relevé à 22px au patch 5,
2026-06-06, suite audit visuel : 18px restait trop petit sur mobile).
Avec viewBox 960x300 ramené à ~360px de largeur réelle (scale ~0.375),
les font-sizes 13/14 desktop deviendraient illisibles (5 px visibles).
22px en unités viewBox donne ~8,3 px visibles à l'écran (+22 % vs 18px).
Padding card réduit pour gagner de la place utile au graphique. */
.edition .tc-ylab,
.edition .tc-xlab,
.edition .tc-annot,
.edition .tc-annot-sm { font-size: 22px; }
/* padding-left élargi (24px) sur mobile (patch 6) : à 22px, les labels Y
(« 5 250 € »…) ancrés à x=44 dans le viewBox débordaient vers la gauche
et se collaient au bord. Les 22px sont conservés (lisibilité), la marge
gauche de la card leur donne l'espace. Right/bottom inchangés. */
.edition .tc-card { padding: 18px 12px 14px 24px; }
}
@media (max-width: 520px) {
.edition .stat-lead { grid-template-columns: 1fr; gap: 14px; }
.edition .secondrow { grid-template-columns: repeat(2,1fr); }
.edition .quartiers { grid-template-columns: 1fr; }
/* prix au m² : lignes compactes sur une seule ligne (barre incluse) */
.edition .pricebars .pb { grid-template-columns: 92px 1fr 64px; gap: 12px; padding: 9px 0; }
.edition .pricebars .pb .nm { font-size: 13.5px; }
.edition .pricebars .pb .v { font-size: 15px; }
.edition .secondrow .c { padding: 13px; }
.edition .secondrow .n { font-size: 20px; }
.edition .cmp-row, .edition .cmp-head { grid-template-columns: 1fr 78px 56px; }
.edition .cmp-row .bar-track, .edition .cmp-head span:nth-child(2) { display: none; }
/* sur très petit écran, la colonne nom passe en 1fr : on autorise le retour
à la ligne des communes longues (patch 6) pour éviter tout débordement
(le nowrap desktop ne s'applique plus ici). */
.edition .cmp-row .qn { white-space: normal; }
}
/* ============================================================================
CONSOLIDATION ÉTAPE 8.B (phase 1, tâche 2) — 2026-06-10
Règles déplacées verbatim depuis les blocs