*{box-sizing:border-box;margin:0;padding:0}:root{--paper:#f7f5f0;--brown:#5e4334;--sky:#a9ccdf;--taupe:#d4caba;--sans:"Urbanist","Helvetica Neue",Arial,sans-serif;--serif:"New York",Georgia,serif;--pad:clamp(22px,5vw,76px)}body{background:var(--paper);color:var(--brown);font-family:var(--sans);line-height:1.6}a{color:inherit;text-decoration:none}.article-header{height:82px;padding:16px var(--pad);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(94,67,52,.14)}.article-header img{width:150px}.article-header nav{display:flex;gap:28px;font-size:13px}.article-hero{padding:clamp(70px,10vw,145px) var(--pad) clamp(50px,7vw,90px);display:grid;grid-template-columns:.55fr 1.45fr;gap:clamp(30px,7vw,110px)}.article-meta{font-size:11px;text-transform:uppercase;letter-spacing:.06em}.article-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(54px,8vw,120px);line-height:.92;letter-spacing:-.045em;max-width:1050px}.article-intro{font-size:clamp(20px,2.2vw,31px);line-height:1.35;max-width:820px;margin:0 auto;padding:0 var(--pad) clamp(60px,8vw,110px)}.article-visual{height:clamp(280px,45vw,680px);margin:0 var(--pad);background:linear-gradient(135deg,#a9ccdf 0 35%,#5e4334 35% 68%,#d4caba 68%)}.article-body{max-width:760px;margin:0 auto;padding:clamp(65px,9vw,120px) 28px}.article-body p{font-size:18px;margin-bottom:28px}.article-body h2{font-size:clamp(30px,4vw,48px);line-height:1.05;font-weight:400;margin:64px 0 24px;letter-spacing:-.03em}.article-footer{background:var(--sky);padding:clamp(55px,7vw,90px) var(--pad);display:flex;justify-content:space-between;align-items:end}.article-footer p{font-size:12px}.article-footer a{font-size:clamp(24px,3vw,42px);border-bottom:1px solid currentColor}@media(max-width:760px){.article-header nav a:not(:last-child){display:none}.article-hero{grid-template-columns:1fr}.article-visual{margin:0}.article-footer{align-items:start;flex-direction:column;gap:32px}}

/* Gabarit éditorial rééquilibré : échelle plus humaine et rythme plus resserré. */
.article-hero {
  padding: clamp(54px, 7vw, 96px) var(--pad) clamp(34px, 4vw, 58px);
  grid-template-columns: minmax(150px, .38fr) minmax(0, 1.62fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: start;
}
.article-hero h1 {
  font-family: var(--sans);
  font-size: clamp(44px, 6.1vw, 88px);
  line-height: .98;
  letter-spacing: -.042em;
  max-width: 900px;
}
.article-intro {
  max-width: 760px;
  padding: 0 28px clamp(42px, 5vw, 70px);
  font-size: clamp(19px, 1.7vw, 25px);
  line-height: 1.42;
}
.article-visual {
  width: min(calc(100% - (2 * var(--pad))), 1180px);
  height: clamp(250px, 35vw, 520px);
  margin: 0 auto;
}
.article-body {
  max-width: 720px;
  padding: clamp(52px, 6vw, 82px) 28px clamp(70px, 8vw, 105px);
}
.article-body p { font-size: 17px; line-height: 1.72; margin-bottom: 24px; }
.article-body h2 {
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.12;
  margin: 48px 0 20px;
}
.article-footer { padding: clamp(42px, 5vw, 65px) var(--pad); }
.article-footer a { font-size: clamp(21px, 2.4vw, 32px); }

@media (max-width: 760px) {
  .article-hero { grid-template-columns: 1fr; gap: 20px; }
  .article-hero h1 { font-size: clamp(42px, 13vw, 62px); }
  .article-intro { padding-left: 22px; padding-right: 22px; }
  .article-visual { width: 100%; height: 62vw; min-height: 240px; }
  .article-body { padding-left: 22px; padding-right: 22px; }
}

.article-intro,
.article-body p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

/* Gabarit commun : titre et visuel réunis dans un seul bandeau d'ouverture. */
main {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
}
.article-hero {
  grid-column: 1 / -1;
  grid-row: 1;
  min-height: clamp(390px, 44vw, 610px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(48px, 6vw, 84px) calc(55% + clamp(28px, 4vw, 64px)) clamp(48px, 6vw, 84px) var(--pad);
  background: var(--taupe);
}

.article-hero h1 {
  max-width: 560px;
  font-size: clamp(43px, 5.2vw, 76px);
}
.article-visual {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: 100%;
  min-height: 390px;
  margin: 0;
  position: relative;
  z-index: 2;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Sélection photographique provisoire du Journal. */
.article-visual:not([style]) {
  background-image: url("assets/portfolio/patio-bleu-brutaliste.webp");
}
.article-visual[style*="155deg"] {
  background-image: url("assets/portfolio/boutique-ecume-v03.webp") !important;
}
.article-visual[style*="135deg"] {
  background-image: url("assets/portfolio/detail-zellij-rive-franche.webp") !important;
}

.visual-colour { background-image:url("assets/portfolio/patio-bleu-brutaliste.webp") !important; }
.visual-gloss { background-image:url("assets/portfolio/boutique-ecume-v03.webp") !important; }
.visual-brown { background-image:url("assets/portfolio/casa-loma-cuisine-sombre.webp") !important; }
.visual-distance { background-image:url("assets/portfolio/boutique-ecume-v02.webp") !important; }
.visual-void { background-image:url("assets/portfolio/casa-loma-patio.webp") !important; }
.visual-styles { background-image:url("assets/portfolio/salle-de-bain-oculus.webp") !important; }
.visual-hand { background-image:url("assets/portfolio/detail-zellij-rive-franche.webp") !important; }
.visual-light { background-image:url("assets/portfolio/casa-loma-cuisine-zellij.webp") !important; }
.visual-threshold { background-image:url("assets/portfolio/casa-loma-tapis.webp") !important; }
.visual-reveal { background-image:url("assets/portfolio/atlas-tidal-pool-level.webp") !important; }

.article-footer p { text-align:left; hyphens:none; }
.article-intro {
  grid-column: 1 / -1;
  grid-row: 2;
  padding-top: clamp(52px, 7vw, 92px);
}
.article-body {
  grid-column: 1 / -1;
  grid-row: 3;
  padding-top: 0;
}

@media (max-width: 760px) {
  main { grid-template-columns: 1fr; }
  .article-hero {
    grid-column: 1;
    grid-row: 1;
    min-height: 310px;
    padding: 42px 22px;
  }
  .article-visual {
    grid-column: 1;
    grid-row: 2;
    min-height: 260px;
    height: 68vw;
  }
  .article-intro { grid-column: 1; grid-row: 3; }
  .article-body { grid-column: 1; grid-row: 4; }
}