/* ===========================================================================
   Montreal Housing Intelligence — feuille de style du site vitrine

   La palette est reprise du thème Power BI du rapport (Reference Dark) pour
   que le rapport embarqué se fonde dans la page au lieu d'y être posé :
     canvas   #0E1A25   fond de page
     surface  #192938   fond de visuel, donc fond de carte ici
     accent   #85C9F4   accent du thème
   Les trois couleurs de verdict sont celles des badges du rapport, mesurées
   au ΔE CIEDE2000 sur ce fond sombre, simulation des trois dichromaties
   comprise : pire paire 24,0.
   =========================================================================== */

:root {
  --canvas:      #0E1A25;
  --surface:     #192938;
  --surface-2:   #1F3346;
  --line:        #2B4760;

  --ink:         #EEF4F9;
  --ink-soft:    #B4C8DA;
  --ink-mute:    #8FA3B5;

  --accent:      #85C9F4;
  --accent-deep: #4E9FD8;
  --good:        #B8E0C5;
  --warn:        #FA584C;

  --radius:      14px;
  --radius-sm:   9px;
  --wrap:        1120px;

  --shadow: 0 1px 2px rgb(0 0 0 / .32), 0 12px 32px rgb(0 0 0 / .28);

  --step--1: clamp(.82rem, .79rem + .14vw, .90rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.12rem + .4vw, 1.45rem);
  --step-2:  clamp(1.55rem, 1.38rem + .84vw, 2.1rem);
  --step-3:  clamp(2.1rem, 1.66rem + 2.2vw, 3.5rem);
}

/* --- Bascule de langue : le CSS fait tout le travail --------------------- */
html[lang="fr"] [data-lang="en"] { display: none; }
html[lang="en"] [data-lang="fr"] { display: none; }

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap {
  width: min(100% - 32px, var(--wrap));
  margin-inline: auto;
}

h1, h2, h3 { line-height: 1.18; letter-spacing: -.018em; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--accent); text-underline-offset: 3px; }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ============================ BARRE DU HAUT ============================== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--canvas) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 62px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  margin-right: auto;
}
.brand-mark {
  width: 11px; height: 22px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  flex: none;
}
.brand-text { font-size: var(--step--1); letter-spacing: -.01em; }

.topnav { display: flex; gap: 22px; }
.topnav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 500;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.topnav a:hover { color: var(--ink); border-bottom-color: var(--accent); }

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 6px 11px;
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-mute);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  flex: none;
}
.lang-toggle:hover { border-color: var(--accent); }
.lang-sep { opacity: .4; }
html[lang="fr"] .lang-opt[data-for="fr"],
html[lang="en"] .lang-opt[data-for="en"] { color: var(--accent); }

@media (max-width: 640px) {
  .topnav { display: none; }
}

/* ================================ HERO =================================== */
.hero {
  position: relative;
  padding: clamp(56px, 9vw, 116px) 0 clamp(40px, 6vw, 72px);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -40% 30% auto -10%;
  height: 560px;
  background: radial-gradient(60% 60% at 40% 50%, rgb(133 201 244 / .13), transparent 70%);
  pointer-events: none;
}
.hero .wrap { position: relative; }

.eyebrow {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
h1 { font-size: var(--step-3); font-weight: 700; max-width: 17ch; }

.lede {
  margin-top: 22px;
  max-width: 62ch;
  font-size: var(--step-1);
  color: var(--ink-soft);
  font-weight: 400;
}
.lede strong { color: var(--ink); font-weight: 600; }

/* --- Sprite d'icônes ------------------------------------------------------
   On le sort du flux plutôt que de le masquer avec display:none, qui empêche
   certains navigateurs de resoudre les <use> qui pointent dedans. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* --- Boutons ------------------------------------------------------------- */
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 22px;
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .16s, border-color .16s, transform .16s;
}
.btn:active { transform: translateY(1px); }
.btn-icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: currentColor;
}
.btn-primary { background: var(--accent); color: #0A1622; }
.btn-primary:hover { background: #A3D7F8; }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--accent); background: var(--surface-2); }

/* --- Bandeau de chiffres ------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin: 52px 0 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
/* En ouverture de page, le bandeau precede le titre au lieu de le suivre. */
.stats-lead { margin: 0 0 clamp(34px, 4.5vw, 52px); }
.stat { background: var(--surface); padding: 20px 22px; }
.stat dt {
  font-size: var(--step--1);
  color: var(--ink-mute);
  font-weight: 500;
  margin-bottom: 4px;
}
.stat dd {
  margin: 0;
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.stat-unit { font-size: var(--step-0); font-weight: 500; color: var(--ink-soft); }

/* ============================== SECTIONS ================================= */
.section { padding: clamp(56px, 8vw, 104px) 0; }
.section-alt {
  background: linear-gradient(180deg, transparent, rgb(25 41 56 / .45) 12% 88%, transparent);
  border-block: 1px solid var(--line);
}
.section h2 { font-size: var(--step-2); font-weight: 700; }
.section-note {
  margin-top: 16px;
  max-width: 72ch;
  color: var(--ink-soft);
  font-size: var(--step-0);
}
.section-note strong { color: var(--ink); }

/* --- Cartes de résultats ------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 20px;
  margin-top: 40px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 26px 24px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.card-figure {
  font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.card h3 { font-size: var(--step-1); font-weight: 600; }
.card p { color: var(--ink-soft); font-size: var(--step-0); }
.card p strong { color: var(--ink); font-weight: 600; }

.card-caveat {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: var(--step--1) !important;
  color: var(--ink-mute) !important;
}
.card-caveat strong { color: var(--ink-soft) !important; }
.card-caveat em { color: var(--good); font-style: normal; font-weight: 600; }

/* --- Bandeau de crédit : la légende de la figure du rapport -------------- */
.credit-strip {
  margin-top: 14px;
  padding: 13px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.credit-strip strong { color: var(--ink); }

/* --- Cadre du rapport ----------------------------------------------------
   La hauteur n'est pas un simple ratio. Le canevas du rapport est en 16/9,
   mais Power BI ajoute SOUS lui une barre d'outils de hauteur FIXE -- 36 px,
   lus dans les dimensions que le service propose lui-meme (600 x 373,5).
   Une hauteur fixe ne se met pas dans un ratio : a 1100 px de large elle pese
   3 % de la hauteur, a 400 px elle en pese 14. D'ou le calcul en cqw, qui
   prend 9/16 de la largeur du conteneur et ajoute la barre telle quelle.
   L'aspect-ratio reste au-dessus comme repli si cqw n'est pas compris : il
   est alors correct autour de 1000 px, et approximatif ailleurs. */
.report-frame { margin: 32px 0 0; container-type: inline-size; }
.report-slot {
  position: relative;
  aspect-ratio: 16 / 9.55;
  height: calc(56.25cqw + 36px);
  min-height: 330px;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.report-slot iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.report-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 24px;
  color: var(--ink-mute);
  background: repeating-linear-gradient(
    -45deg, transparent 0 14px, rgb(133 201 244 / .035) 14px 28px);
}
.ph-title { font-size: var(--step-1); font-weight: 600; color: var(--ink-soft); }

/* Pas de ratio different sur petit ecran : il serait mort de toute facon,
   une hauteur explicite l'emportant sur aspect-ratio. Sous ~520 px de large,
   c'est min-height qui tient le cadre, et le rapport s'y centre avec une
   bande grise -- le bouton plein ecran de la barre Power BI reste la voie
   confortable sur telephone. */

/* --- Étapes du pipeline -------------------------------------------------- */
.pipeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin-top: 40px;
}
.step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  position: relative;
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--accent);
  font-size: var(--step--1);
  font-weight: 700;
  margin-bottom: 12px;
}
.step h3 { font-size: var(--step-0); font-weight: 600; margin-bottom: 8px; }
.step p { font-size: var(--step--1); color: var(--ink-soft); }
.step p strong { color: var(--ink); font-weight: 600; }

/* --- Puces de stack ------------------------------------------------------ */
.stack { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; }
.chip {
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: var(--step--1);
  font-weight: 500;
}

/* =============================== À PROPOS ================================ */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 860px) {
  .about { grid-template-columns: 1fr; }
}

.about-text p { color: var(--ink-soft); margin-top: 14px; max-width: 58ch; }
.about-text p strong { color: var(--ink); font-weight: 600; }

/* Identité : le portrait et le nom sur une même ligne. */
.about-identity {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 26px;
}
.avatar {
  width: 118px;
  height: 118px;
  flex: none;
  border-radius: 50%;          /* le PNG est recadré pile sur le disque */
  border: 2px solid var(--line);
  background: var(--surface);
  display: block;
}
@media (max-width: 460px) {
  .about-identity { gap: 16px; }
  .avatar { width: 84px; height: 84px; }
}

.about-title {
  margin-top: 0 !important;
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--ink) !important;
  line-height: 1.1;
}
.about-kicker {
  margin-top: 6px !important;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--accent) !important;
  letter-spacing: .01em;
}

.about-skills {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
}
.about-skills h3 {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 18px;
}
.about-skills ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.about-skills li {
  display: grid;
  gap: 4px;
  padding-left: 16px;
  border-left: 2px solid var(--accent-deep);
}
.about-skills strong {
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--ink);
}
.about-skills span { font-size: var(--step--1); color: var(--ink-soft); }

/* ============================= PIED DE PAGE ============================== */
.footer {
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 55%, var(--canvas));
  padding: clamp(40px, 6vw, 68px) 0 44px;
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
}
.footer-name { font-size: var(--step-1); font-weight: 700; letter-spacing: -.02em; }
.footer-role { font-size: var(--step--1); color: var(--ink-mute); }
.footer-links { display: flex; gap: 10px; }

.sources { padding: 30px 0; }
.sources-title {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 14px;
}
.sources ul { margin: 0; padding-left: 20px; display: grid; gap: 9px; }
.sources li { font-size: var(--step--1); color: var(--ink-mute); }
.sources li strong { color: var(--ink-soft); font-weight: 600; }

.as-of {
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.disclaimer {
  margin-top: 10px;
  font-size: var(--step--1);
  color: var(--ink-mute);
  max-width: 74ch;
}