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

   Reprise de montreal-housing-site, rapatriee le 22 septembre 2026, puis
   ALIGNEE le meme jour sur assets/style.css du portfolio. Les vingt regles
   que les deux feuilles ont en commun — .btn, .card, .cards, .section,
   .pipeline, .step, .footer, .crumbs, .skip, la barre du haut — y sont
   desormais IDENTIQUES au caractere pres, jetons compris. Un script le
   verifie en quelques lignes : si l'une bouge, l'autre doit suivre.

   Elle reste un fichier a part, et ne se fusionne pas : ce qu'elle porte en
   propre — le bandeau de chiffres, le cadre du rapport Power BI, le bloc
   « A propos », les credits de sources — n'existe nulle part ailleurs sur le
   site, et le portfolio n'a rien a en faire.

   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;
  --radius-box:  8px;
  --wrap:        1120px;

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

  --step--2: clamp(.72rem, .70rem + .10vw, .78rem);
  --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(1.9rem, 1.5rem + 1.9vw, 3rem);

  /* Courbe d'acceleration du portfolio, reprise pour que les transitions de
     bouton soient les memes d'une page a l'autre. */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

/* --- 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;
  /* Aucune page ne doit pouvoir defiler horizontalement. clip et non hidden :
     hidden ferait du body un conteneur de defilement, ce qui casse la barre
     du haut collee. */
  overflow-x: clip;
}

.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 =================================== */
/* Le creux du haut suit celui des pages projets. Il valait jusqu'a 116 px
   tant que la page ouvrait directement sous la barre ; depuis que le fil
   d'Ariane s'intercale, un tel vide le laissait flotter seul.

   LA LUEUR A ETE RETIREE. Un ::before de 560 px posait un halo bleu derriere
   l'ouverture : aucune autre page du site n'en porte, et le hero raccourci le
   coupait net avec overflow:hidden -- ce qui se lisait comme une arete en
   travers de la page, la couture entre deux fonds. Le fond est celui du
   body, comme partout ailleurs. */
.hero {
  padding: clamp(26px, 4vw, 48px) 0 clamp(30px, 4vw, 52px);
}

.eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
h1 { font-size: var(--step-3); font-weight: 700; max-width: 17ch; }

.lede {
  margin-top: 20px;
  max-width: 58ch;
  font-size: var(--step-1);
  line-height: 1.5;
  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;
}

/* --- Saut d'acces ---------------------------------------------------------
   Premier element focalisable de la page, invisible tant qu'il n'a pas le
   focus. Les sept autres pages du site en portent un ; celle-ci n'en avait
   pas, parce qu'elle a ete concue comme un site a part. */
.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 18px;
  background: var(--accent);
  color: #0A1622;
  font-size: var(--step--1);
  font-weight: 600;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top .18s var(--ease-out);
}
.skip:focus-visible { top: 16px; }

/* --- Fil d'Ariane ---------------------------------------------------------
   Le site n'a pas de menu : le graphe de l'accueil EST la navigation. Depuis
   que sa tuile ouvre cette page dans le MEME onglet, il fallait dire comment
   on remonte. Regles reprises de la section 10 du portfolio. */
.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 18px;
  font-size: var(--step--2);
  color: var(--ink-mute);
}
.crumbs a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 500;
}
.crumbs a:hover { color: var(--accent); }
.crumbs-icon {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.crumbs-sep { opacity: .45; }

/* --- Boutons ------------------------------------------------------------- */
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  transition: border-color .16s var(--ease-out),
              background .16s var(--ease-out),
              transform .16s var(--ease-out);
}
.btn:hover { border-color: var(--accent); background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn-icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: currentColor;
}
/* `fill` est heritee et traverse le <use> : une icone dessinee au trait, comme
   #icon-mail, se remplit alors en bloc plein. Meme correctif qu'en section 14
   de assets/style.css. */
.btn-icon:has(use[href="#icon-mail"]) {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #0A1622;
}
.btn--primary:hover { background: #A3D7F8; border-color: #A3D7F8; }

/* --- Bandeau de chiffres -------------------------------------------------
   Repris a l'identique de l'accueil et des pages projets : quatre cartes
   posees cote a cote, espacees de 12 px, chiffre a l'accent. Il etait ici une
   bande soudee -- quatre cellules separees par un filet d'un pixel, sans
   espacement -- et c'etait le seul endroit du site a le faire. */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: clamp(16px, 2.5vw, 22px) 0 0;
}
.kpi {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px 13px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.kpi-label {
  font-size: var(--step--2);
  font-weight: 500;
  color: var(--ink-mute);
}
/* Le navigateur applique `margin-inline-start: 40px` a tout <dd>. On la remet
   a zero, puis on REDONNE ce decalage au seul chiffre : il aere la carte, ce
   que la reserve ne demandait pas -- a 390 px de large, 40 px lui coutaient
   28 % de sa largeur utile. Choix de Sebastien, 22 septembre 2026.
   La section 14 de assets/style.css porte les memes regles pour les cinq
   autres pages. */
.kpi dd { margin: 0; }
.kpi .card-figure { margin-inline-start: 40px; }
.stat-unit { font-size: var(--step-0); font-weight: 500; color: var(--ink-soft); }

/* ============================== SECTIONS ================================= */
.section { padding: clamp(46px, 7vw, 92px) 0; }
.section-alt {
  background: linear-gradient(180deg,
              transparent,
              color-mix(in srgb, var(--surface) 55%, transparent) 12% 88%,
              transparent);
  border-block: 1px solid var(--line);
}
.section h2 { font-size: var(--step-2); font-weight: 700; max-width: 22ch; }
.section-note {
  margin-top: 16px;
  max-width: 70ch;
  color: var(--ink-soft);
  font-size: var(--step-0);
}
.section-note strong { color: var(--ink); font-weight: 600; }

/* --- Cartes de résultats ------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-top: 36px;
}
@media (min-width: 720px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Pas d'ombre : le site tranche entre une arete definie et une elevation
   douce, et les cartes prennent l'arete. L'elevation reste aux figures --
   ici le cadre du rapport. */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.card-figure {
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.035em;
  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--1); }
.card p strong { color: var(--ink); font-weight: 600; }

.card-caveat {
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  font-size: var(--step--2) !important;
  line-height: 1.4;
  color: var(--ink-mute) !important;
  text-wrap: pretty;
}
.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(210px, 1fr));
  gap: 16px;
  margin-top: 36px;
}
.step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--radius-box);
  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: 7px; }
.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 ============================== */
/* Meme geometrie que le pied des sept autres pages : le bloc d'identite et la
   rangee de boutons sur une ligne, un seul filet, puis la zone legale. La
   classe s'appelle .footer-inner partout, et le filet qui separait les deux
   zones est passe SOUS le bloc d'identite plutot qu'au-dessus des sources :
   un pied a un separateur, pas deux. */
.footer {
  margin-top: clamp(40px, 6vw, 72px);
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 55%, var(--canvas));
  padding: clamp(28px, 4vw, 44px) 0 36px;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.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; flex-wrap: wrap; gap: 10px; }

/* Les trois blocs ci-dessous n'existent que sur cette page -- les autres n'ont
   ni sources a crediter ni avertissement a porter. Ils tiennent donc le role
   du .footer-legal des autres pages, et en prennent la graisse : --step--2 en
   ink-mute, derriere l'unique filet. */
.sources {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.sources-title {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 12px;
}
.sources ul { margin: 0; padding-left: 18px; display: grid; gap: 7px; }
.sources li { font-size: var(--step--2); color: var(--ink-mute); }
.sources li strong { color: var(--ink-soft); font-weight: 600; }

.as-of {
  margin-top: 14px;
  font-size: var(--step--2);
  color: var(--ink-mute);
}
.disclaimer {
  margin-top: 8px;
  font-size: var(--step--2);
  color: var(--ink-mute);
  max-width: 74ch;
}