/* Le soir. Palette sampled from the opening photograph (Longueuil, a January night):
   night, dusk, lamp, brick, paper. Flat colour only, square corners, hairline rules. */
@font-face { font-family: "NR Display"; src: url("../fonts/nr-display.woff2") format("woff2"); font-weight: 340; font-display: swap; }
@font-face { font-family: "NR"; src: url("../fonts/nr-text.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "NR"; src: url("../fonts/nr-text-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Franklin"; src: url("../fonts/libre-franklin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --papier: #f2ede4;
  --encre: #1b1815;
  --gris: #5c554d;
  --filet: #cbc2b4;
  --nuit: #11181d;
  --crepuscule: #23303a;
  --neige: #cdbcb2;
  --lampe: #e8a64a;
  --brique: #8c3424;
  --marge: 20px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--encre); font: 400 18px/1.55 "NR", Georgia, serif; font-kerning: normal; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, .soustitre, .citation p, .lead { text-wrap: balance; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.bouton:focus-visible { outline-color: var(--encre); }
.saut { position: absolute; left: -9999px; }
.saut:focus { left: var(--marge); top: 8px; z-index: 10; background: var(--papier); color: var(--encre); padding: 6px 10px; }
.sans { font-family: "Franklin", Arial, sans-serif; }
.h { font-style: italic; }

/* ---------- opening: phone first ---------- */
.ouverture { position: relative; display: flex; flex-direction: column; }
.tete { position: absolute; z-index: 2; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 18px var(--marge) 0; color: var(--papier); }
.marque { display: block; width: 132px; color: inherit; }
.marque svg { display: block; width: 100%; height: auto; }
.tete nav { font: 500 14px/1 "Franklin", Arial, sans-serif; }
.cadre { position: relative; height: 100svh; min-height: 600px; max-height: 940px; background: var(--nuit); overflow: hidden; }
.cadre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 34% 50%; }
.bas { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 var(--marge) 30px; color: var(--papier); }
.heure { margin: 0 0 10px; font: 340 78px/.9 "NR Display", Georgia, serif; letter-spacing: -.02em; font-variant-numeric: lining-nums; }
.heure .h { font-family: "NR", Georgia, serif; font-size: .42em; letter-spacing: 0; margin: 0 .06em; vertical-align: .12em; }
.ouverture h1 { margin: 0; max-width: 15em; font: 340 31px/1.1 "NR Display", Georgia, serif; letter-spacing: -.005em; }
.soustitre { margin: 14px 0 0; font: 500 14px/1.35 "Franklin", Arial, sans-serif; color: #e9e1d6; }
.credit { order: 2; margin: 0; padding: 9px var(--marge) 0; font: 400 12.5px/1.4 "Franklin", Arial, sans-serif; color: var(--gris); }
.chapeau { order: 3; padding: 30px var(--marge) 8px; }
.dek { margin: 0 0 22px; font-size: 21px; line-height: 1.42; }
.action { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 18px; }
.bouton { display: inline-block; background: var(--encre); color: var(--papier); text-decoration: none; padding: 13px 18px 14px; font: 600 16px/1 "Franklin", Arial, sans-serif; letter-spacing: .005em; }
.bouton:hover { background: var(--brique); }
.action small { font: 400 14px/1.45 "Franklin", Arial, sans-serif; color: var(--gris); max-width: 21em; }

/* ---------- running parts ---------- */
.rubrique { display: flex; gap: 10px; align-items: baseline; margin: 0 0 18px; padding-top: 10px; border-top: 1px solid currentColor; font: 500 13px/1.3 "Franklin", Arial, sans-serif; }
.rubrique b { font-weight: 700; font-variant-numeric: tabular-nums; }
h2 { font: 340 34px/1.08 "NR Display", Georgia, serif; letter-spacing: -.01em; margin: 0 0 18px; }
h3 { font: 600 16px/1.3 "Franklin", Arial, sans-serif; margin: 28px 0 6px; }
p { margin: 0 0 14px; }

/* ---------- the evening: the real window, on night ---------- */
.soir { background: var(--nuit); color: var(--papier); padding: 46px var(--marge) 54px; margin-top: 48px; }
.soir .rubrique { color: var(--neige); }
.soir h2 { max-width: 13em; }
.fictif { font: 400 14.5px/1.5 "Franklin", Arial, sans-serif; color: var(--neige); max-width: 34em; margin-bottom: 30px; }
.fictif b { color: var(--lampe); font-weight: 600; }
.plan { margin: 0 0 34px; }
.plan img { width: 100%; background: #fff; }
.plan figcaption, .vue figcaption { margin-top: 10px; font: 400 14px/1.45 "Franklin", Arial, sans-serif; color: var(--neige); max-width: 30em; }
.t { display: inline-block; min-width: 4.4em; color: var(--lampe); font-weight: 600; font-variant-numeric: tabular-nums; }
.citation { margin: 0 0 34px; padding: 0; font: italic 400 25px/1.25 "NR", Georgia, serif; color: var(--papier); max-width: 17em; }
.citation::before { content: ""; display: block; width: 36px; height: 3px; background: var(--lampe); margin-bottom: 14px; }
.vues { display: grid; gap: 34px; }
.vue { margin: 0; }
.vue img { width: 82%; }
.vue:nth-child(2) img { margin-left: auto; }
.vue:nth-child(2) figcaption { margin-left: auto; max-width: 82%; }
.soir .essayer { margin: 34px 0; font-size: 20px; }
.soir .note-bas { margin: 34px 0 0; font: 400 13px/1.5 "Franklin", Arial, sans-serif; color: var(--neige); max-width: 40em; }

/* ---------- the next morning ---------- */
.matin { padding: 48px var(--marge) 10px; }
.matin figure { margin: 0 calc(-1 * var(--marge)) 0 34px; }
.matin figcaption { font: 400 12.5px/1.4 "Franklin", Arial, sans-serif; color: var(--gris); padding: 8px var(--marge) 0 0; }
.matin .texte { margin-top: 30px; }
.matin .lead { font-size: 21px; line-height: 1.42; }
.marge { font: 400 14px/1.5 "Franklin", Arial, sans-serif; color: var(--gris); border-left: 2px solid var(--brique); padding-left: 12px; margin: 18px 0; }

/* ---------- details, run-in heads ---------- */
.details { padding: 40px var(--marge) 10px; }
.details p { max-width: 36em; }
.details p b { font: 600 17px/1 "Franklin", Arial, sans-serif; margin-right: .35em; }

/* ---------- rate card ---------- */
.tarif { margin: 44px var(--marge) 0; padding-bottom: 8px; }
.carte { width: 100%; border-collapse: collapse; font-family: "Franklin", Arial, sans-serif; }
.carte th, .carte td { text-align: left; vertical-align: top; padding: 14px 0; border-bottom: 1px solid var(--filet); }
.carte tr:first-child th, .carte tr:first-child td { border-top: 2px solid var(--encre); }
.carte th { font-weight: 600; font-size: 15px; width: 34%; padding-right: 12px; }
.carte td { font-size: 15px; line-height: 1.45; color: var(--gris); }
.carte .prix { font: 340 40px/1 "NR Display", Georgia, serif; color: var(--encre); white-space: nowrap; padding-left: 12px; text-align: right; }
.carte .prix small { display: block; font: 400 12.5px/1.3 "Franklin", Arial, sans-serif; color: var(--gris); margin-top: 6px; }
.exemple { margin: 16px 0 0; padding: 14px 0 0; font-size: 18px; }
.exemple .sans { font-weight: 600; font-size: 13px; margin-right: 8px; color: var(--brique); }
.exemple .calc { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }

@media (max-width: 759px) {
  .carte, .carte tbody { display: block; }
  .carte tr { display: grid; grid-template-columns: 1fr auto; column-gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--filet); }
  .carte tr:first-child { border-top: 2px solid var(--encre); }
  .carte th, .carte td, .carte tr:first-child th, .carte tr:first-child td { border: 0; padding: 0; width: auto; }
  .carte th { grid-column: 1; grid-row: 1; margin-bottom: 4px; }
  .carte td { grid-column: 1; grid-row: 2; }
  .carte .prix { grid-column: 2; grid-row: 1 / 3; align-self: start; }
}

/* ---------- who ---------- */
.qui { margin: 44px var(--marge) 0; }
.qui .lead { font: 340 26px/1.25 "NR Display", Georgia, serif; max-width: 22em; }
.ecrire { font-size: 20px; }

/* ---------- colophon ---------- */
.colophon { margin-top: 56px; background: var(--crepuscule); color: var(--papier); padding: 34px var(--marge) 40px; font: 400 14px/1.6 "Franklin", Arial, sans-serif; }
.colophon .rubrique { color: var(--neige); }
.colophon p { max-width: 44em; color: #e4dcd0; }
.colophon .marque { width: 112px; color: var(--papier); margin-bottom: 18px; }

/* ---------- privacy pages ---------- */
.page-doc .tete { position: static; color: var(--encre); padding-bottom: 14px; border-bottom: 1px solid var(--filet); }
.doc-tete { padding: 34px var(--marge) 8px; }
.doc-tete h1 { font: 340 38px/1.08 "NR Display", Georgia, serif; margin: 0 0 10px; }
.doc-tete p { font: 400 14px/1.5 "Franklin", Arial, sans-serif; color: var(--gris); }
.page-doc main { padding: 8px var(--marge) 20px; }
.page-doc main .wrap { max-width: 40em; }
.page-doc main h2 { font-size: 26px; margin-top: 34px; }
.page-doc main ul { padding-left: 1.1em; }
.page-doc main li { margin-bottom: 6px; }
.page-doc .review, .page-doc .draft { font: 400 14px/1.5 "Franklin", Arial, sans-serif; color: var(--encre); border-left: 3px solid var(--lampe); background: #ebe3d4; padding: 10px 12px; }
.page-doc .review b { display: block; font-weight: 700; margin-bottom: 2px; }

/* ---------- 760 and up ---------- */
@media (min-width: 760px) {
  :root { --marge: 48px; }
  .marque { width: 168px; }
  .heure { font-size: 120px; }
  .ouverture h1 { font-size: 44px; }
  .vues { grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: start; }
  .vue img, .vue:nth-child(2) img { width: 100%; margin: 0; }
  .vue:nth-child(2) { margin-top: 64px; }
  .vue:nth-child(2) figcaption { max-width: none; }
  h2 { font-size: 46px; }
}

/* ---------- 1100 and up: the opening becomes a spread ---------- */
@media (min-width: 1100px) {
  :root { --marge: 56px; }
  body { font-size: 19px; }
  .ouverture { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr auto; column-gap: 24px; height: 100vh; min-height: 720px; max-height: 1000px; }
  .tete { position: static; grid-column: 1 / 6; grid-row: 1; color: var(--encre); padding: 30px 0 0 var(--marge); }
  .cadre { grid-column: 6 / 13; grid-row: 1 / 4; height: auto; min-height: 0; max-height: none; }
  .cadre img { object-position: 30% 38%; }
  .bas { padding: 0 48px 46px; }
  .heure { font-size: 150px; margin-bottom: 14px; }
  .ouverture h1 { font-size: 48px; max-width: 13em; }
  .chapeau { grid-column: 1 / 6; grid-row: 2; align-self: end; padding: 0 0 26px var(--marge); }
  .dek { font-size: 27px; line-height: 1.36; max-width: 17em; }
  .tete .marque { width: 210px; }
  .chapeau .action small { font-size: 15px; }
  .credit { grid-column: 1 / 6; grid-row: 3; padding: 0 0 30px var(--marge); }
  .soir { padding: 80px var(--marge) 90px; margin-top: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .soir > header { grid-column: 1 / 6; }
  .soir .plan { grid-column: 6 / 13; grid-row: 1 / 3; margin: 0; }
  .soir .citation.c1 { grid-column: 1 / 6; grid-row: 2; align-self: end; margin: 0; font-size: 30px; }
  .soir .citation.c2 { grid-column: 3 / 11; margin: 80px 0 56px; font-size: 34px; max-width: 18em; }
  .soir .vues { grid-column: 1 / 13; }
  .soir .essayer { grid-column: 1 / 13; margin: 44px 0 0; }
  .soir .note-bas { grid-column: 1 / 8; }
  .matin { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding-top: 90px; }
  .matin .texte { grid-column: 1 / 7; grid-row: 1; margin: 0; }
  .matin figure { grid-column: 8 / 13; grid-row: 1; margin: 0 calc(-1 * var(--marge)) 0 0; }
  .details { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding-top: 70px; }
  .details > .rubrique, .details > h2 { grid-column: 1 / 13; }
  .details .col { grid-column: span 6; }
  .tarif { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; margin-top: 80px; }
  .tarif > .rubrique { grid-column: 1 / 13; }
  .tarif h2 { grid-column: 1 / 5; }
  .tarif .carte, .tarif .exemple { grid-column: 5 / 13; }
  .qui { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; margin-top: 90px; }
  .qui > .rubrique { grid-column: 1 / 13; }
  .qui .corps { grid-column: 5 / 12; }
  .colophon { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; margin-top: 100px; }
  .colophon > * { grid-column: 1 / 13; }
  .colophon .col { grid-column: span 4; }
  .page-doc .tete { padding-bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }