/* TYPOGRAPHIE COMMUNE — site public, espace pro, administration et aperçu HTML.
   Modifier les variables ci-dessous : aucune édition des pages n'est nécessaire.
   Aperçu direct : typography.html (même dossier, même feuille CSS).
   --text-base : texte courant ; --type-article : paragraphes des articles.
   --type-display / --type-section / --type-card : titres H1 / H2 / H3.
   Les tailles en rem respectent la taille de texte choisie dans le navigateur. */
:root {
  /* Police : Inter est chargée par Next sur le site, localement dans l'aperçu. */
  --font-sans: var(--font-inter, 'Inter'), system-ui, sans-serif;
  --font-serif: var(--font-sans);
  --font-editorial: var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, monospace;
  /* Le champ de calendrier conserve sa famille générique historique. */
  --font-mono-input: monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-7xl: 4.5rem;
  --text-8xl: 6rem;
  --text-9xl: 8rem;
  --type-display: clamp(2rem, 4.45vw, 4rem);
  --type-section: clamp(1.625rem, 3vw, 2.5rem);
  --type-card: clamp(1.25rem, 2vw, 1.5rem);
  --type-metric: clamp(4rem, 8vw, 7rem);
  --type-price: clamp(2rem, 4vw, 3.25rem);
  --type-business-display: clamp(1.75rem, 3vw, 2.25rem);
  --type-business-section: 1.5rem;
  --type-business-card: 1.125rem;
  --type-subheading: 1.125rem;
  --type-media-caption: 0.625rem;
  /* Articles : ces alias suivent les réglages généraux, sauf choix explicite. */
  --type-article: var(--text-base);
  --type-article-intro: var(--type-article);
  --type-article-heading: var(--type-section);
  --type-article-subheading: var(--type-card);
  --type-leading-article: 1.7;
  --type-leading-article-heading: var(--type-leading-heading);
  --type-leading-display: 1.1;
  --type-leading-heading: 1.25;
  --type-leading-body: 1.6;
  --type-leading-caption: 1.5;
  --type-leading-label: 1.4;
  --type-leading-metric: 1;
  --type-weight-body: 400;
  --type-weight-display: 200;
  --type-weight-heading: 400;
  --type-weight-label: 600;
  --type-weight-strong: 700;
  --type-tracking-heading: -0.035em;

  /* Exceptions conservées à l’identique ; tous les réglages restent ici. */
  --type-budget: clamp(1.5rem, 11cqw, 5.8rem);
  --type-legend: clamp(1.3rem, 3vw, 1.7rem);
  --type-weather-icon: 48px;
  --type-weather-forecast-icon: 32px;
  --type-disclosure-icon: 24px;
  --type-map-gesture: 1.4em;
  --type-print-body: 10pt;
  --type-print-caption: 8pt;
  --type-print-note: 11pt;
  --type-print-phone: 28pt;

  /* Graisses et interlignes des utilitaires, formulaires et interfaces métier.
     Les noms numériques 3 à 10 reprennent les utilitaires Tailwind en rem.
     Les autres suffixes numériques sont des rapports : 155 signifie 1.55. */
  --type-weight-thin: 100;
  --type-weight-extralight: 200;
  --type-weight-light: 300;
  --type-weight-medium: 500;
  --type-weight-extrabold: 800;
  --type-weight-black: 900;
  --type-leading-3: .75rem;
  --type-leading-4: 1rem;
  --type-leading-5: 1.25rem;
  --type-leading-6: 1.5rem;
  --type-leading-7: 1.75rem;
  --type-leading-8: 2rem;
  --type-leading-9: 2.25rem;
  --type-leading-10: 2.5rem;
  --type-leading-snug: 1.375;
  --type-leading-relaxed: 1.625;
  --type-leading-loose: 2;
  --type-leading-calendar-day: 28px;
  --type-leading-000: 0;
  --type-leading-098: 0.98;
  --type-leading-105: 1.05;
  --type-leading-120: 1.2;
  --type-leading-135: 1.35;
  --type-leading-145: 1.45;
  --type-leading-155: 1.55;
  --type-leading-165: 1.65;
  --type-leading-175: 1.75;
  --type-leading-180: 1.8;
  --type-leading-103: 1.03;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--type-weight-body);
  line-height: var(--type-leading-body);
}

/* Les contrôles HTML de la carte suivent aussi la feuille commune. */
body .maplibregl-map {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--type-weight-body);
  line-height: var(--type-leading-5);
}
body .maplibregl-ctrl-scale { font-size: var(--type-media-caption); }
body .maplibregl-popup-content {
  padding: 12px 48px 12px 16px;
  font-size: var(--text-sm);
  line-height: var(--type-leading-body);
}
body .maplibregl-popup-close-button {
  min-width: 44px;
  min-height: 44px;
  font-size: var(--text-base);
}
body .maplibregl-cooperative-gesture-screen {
  font-size: var(--type-map-gesture);
  line-height: var(--type-leading-120);
}

/* Lecture justifiée sur le site public et dans les espaces de gestion.
   Priorité faible : un centrage explicite reste prioritaire. Les commandes,
   données de tableaux et petits repères conservent leur alignement propre. */
:where(p, .text-flow, .md-content li):not(:where(
  nav *, button *, label *, summary *, figcaption *, table *,
  [role="status"], [role="alert"],
  .eyebrow, .mono, .media-credit, .type-label,
  [class*="caption"], [class*="kicker"], [class*="byline"],
  [class*="sourceHeading"], [class*="sectionLabel"]
)) {
  text-align: var(--reading-align, justify);
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Les anciens conteneurs centrés transmettent ce choix à leurs paragraphes. */
:where(.text-center, [style*="text-align:center"], [style*="text-align: center"]) {
  --reading-align: center;
}
:where(.text-right, [style*="text-align:right"], [style*="text-align: right"]) {
  --reading-align: right;
}

/* Typography helpers (design system) */
.serif {
  font-family: var(--font-serif), system-ui, sans-serif;
  font-weight: var(--type-weight-extralight);
  letter-spacing: -0.035em;
}

/* Tous les titres portent la couleur de marque. Les regles qui posent deja une
   couleur sur un titre precis (cartes de l'admin, par exemple) restent
   prioritaires : elles sont plus specifiques que ce selecteur d'element. */
h1, h2, h3, h4, h5, h6 {
  color: var(--title);
  font-family: var(--font-sans), system-ui, sans-serif;
  font-weight: var(--type-weight-extralight);
}
h3, h4, h5, h6, h3.serif, h4.serif, h5.serif, h6.serif { font-weight: var(--type-weight-body); }
.serif:not(h1, h2, h3, h4, h5, h6) { font-weight: var(--type-weight-light); }
.site-header .serif { font-weight: var(--type-weight-extralight); }
/* Les titres restent fins ; libellés, chiffres et petits titres métier restent nets. */
:is(.admin-shell, .dashboard-shell) .serif { font-weight: var(--type-weight-body); letter-spacing: -0.025em; }
:is(.admin-shell, .dashboard-shell) :is(h3, h4, h5, h6) { font-weight: var(--type-weight-medium); }
:is(.mono, .eyebrow) { font-family: var(--font-sans), system-ui, sans-serif; }

/* Rôles communs : les tailles locales historiques ne changent plus la hiérarchie. */
h1, .type-display {
  font-size: var(--type-display) !important;
  line-height: var(--type-leading-display) !important;
  font-weight: var(--type-weight-display) !important;
  letter-spacing: var(--type-tracking-heading) !important;
}
h2, .type-section {
  font-size: var(--type-section) !important;
  line-height: var(--type-leading-heading) !important;
  font-weight: var(--type-weight-display) !important;
  letter-spacing: var(--type-tracking-heading) !important;
}
h3, .type-card,
:is(.public-listing-card, .latitude-listing-contact, dialog) h2 {
  font-size: var(--type-card) !important;
  line-height: var(--type-leading-heading) !important;
  font-weight: var(--type-weight-heading) !important;
  letter-spacing: -0.02em !important;
}
h4, h5, h6 {
  font-size: var(--type-subheading) !important;
  line-height: var(--type-leading-heading) !important;
  font-weight: var(--type-weight-heading) !important;
}
:is(.admin-shell, .dashboard-shell) {
  --type-display: var(--type-business-display);
  --type-section: var(--type-business-section);
  --type-card: var(--type-business-card);
  --type-weight-display: var(--type-weight-body);
  --type-weight-heading: var(--type-weight-medium);
}
.page-hero h1 {
  font-size: var(--type-display) !important;
  line-height: var(--type-leading-display) !important;
  font-weight: var(--type-weight-display) !important;
}
.page-hero p:not(.eyebrow):not(.mono) {
  font-size: var(--text-base) !important;
  line-height: var(--type-leading-body) !important;
}
.page-hero .mono {
  font-size: var(--text-xs) !important;
  line-height: var(--type-leading-caption);
}
.eyebrow {
  font-size: var(--text-xs) !important;
  font-weight: var(--type-weight-label);
  line-height: var(--type-leading-caption);
}


/* Texte long partagé par Magazine, Histoire, guides et contenus Markdown. */
.md-content {
  font-family: var(--font-editorial);
  font-size: var(--type-article);
  font-weight: var(--type-weight-body);
  line-height: var(--type-leading-article);
}
.md-content p, .md-content ul, .md-content ol {
  margin: 0 0 18px;
  color: var(--ink-2);
  line-height: var(--type-leading-article);
}
.md-content ul, .md-content ol { padding-left: 22px; }
.md-content ul { list-style: disc; }
.md-content ol { list-style: decimal; }
.md-content li { margin-bottom: 6px; }
.md-content h2 {
  margin: 44px 0 14px;
  font-size: var(--type-article-heading) !important;
  line-height: var(--type-leading-article-heading) !important;
}
.md-content h3 {
  margin: 32px 0 10px;
  font-size: var(--type-article-subheading) !important;
  line-height: var(--type-leading-article-heading) !important;
}
.md-content strong { color: var(--ink); font-weight: var(--type-weight-label); }
.md-content blockquote {
  margin: 0 0 18px;
  padding-left: 16px;
  border-left: 3px solid var(--line-strong);
  color: var(--ink-2);
  font-style: italic;
}
.md-content table { font-size: var(--text-sm); }

.type-article-intro {
  font-size: var(--type-article-intro);
  line-height: var(--type-leading-article);
}
figcaption, .type-media-caption {
  font-size: var(--type-media-caption) !important;
  line-height: var(--type-leading-caption);
}