/* Static letter pages (/fr/j-joie/ …): blue page like the home, cream text, yellow accents.
   Colours and fonts come from the variables in maquettes/zz.css (:root); fonts are self-hosted in css/lp-fonts.css. */
body.lp { background: var(--blue); color: var(--cream); }
body.lp a { color: inherit; }

.lp .bar-top { position: static; background: none; color: var(--cream); padding: 1rem 2rem; max-width: 78rem; margin: 0 auto; }
.lp .brand { text-decoration: none; }
.lp .langs a {
    font-family: var(--mono); font-size: .75rem; color: var(--cream); border: 1px solid #f4efe255;
    padding: .35rem .6rem; text-decoration: none;
}
.lp .langs a[aria-current="true"] { background: var(--yellow); color: var(--blue); border-color: var(--yellow); }

.lp main { padding: 0 2rem 3rem; max-width: 78rem; margin: 0 auto; }
.lp .crumbs { font-family: var(--mono); font-size: .75rem; letter-spacing: .06em; margin: .6rem 0 1.4rem; }
.lp .lhead { margin-bottom: .8rem; }
.lp h1 { display: flex; align-items: baseline; gap: 1.2rem; flex-wrap: wrap; font-weight: 400; }
.lp h1 .big { font-family: var(--display); font-weight: var(--chw, 800); font-size: clamp(5rem, 14vw, 9rem); line-height: .8; }
.lp h1 .comme { font-family: var(--serif); font-style: italic; font-size: clamp(1.8rem, 4.5vw, 3rem); }
.lp .meta { font-size: 1.1rem; max-width: 46rem; line-height: 1.45; margin: 0 0 1.6rem; opacity: .85; }

.lp .lbody { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 2.4rem; align-items: start; }
.lp .lvideo { position: sticky; top: 1rem; margin: 0; }
.lp .lvideo video { width: 100%; display: block; background: #000; box-shadow: 12px 12px 0 var(--yellow); }
.lp .ltranscript { font-size: 1.15rem; line-height: 1.6; color: var(--cream); }
.lp .ltranscript h2 { font-family: var(--mono); font-size: .72rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1rem; color: var(--cream); }
.lp .ltranscript p + p { margin-top: .9em; }
.lp .turn.q { font-style: italic; color: #cdd0ff; padding-left: 1.2em; border-left: 3px solid var(--yellow); }
.lp .turn.q .who { display: block; font-family: var(--mono); font-style: normal; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.lp .note { margin-top: 1.4rem; font-size: .9rem; opacity: .7; }

.lp .lfoot { max-width: 78rem; margin: 0 auto; padding: 1.6rem 2rem 4rem; border-top: 1px solid #f4efe233; }
.lp .step { display: flex; justify-content: space-between; gap: 1rem; font-size: 1.3rem; font-style: italic; margin-bottom: 1.6rem; }
.lp .step a { text-decoration: none; border-bottom: 2px solid var(--yellow); }
.lp .all { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; font-family: var(--mono); font-size: .85rem; }
.lp .all a { display: block; min-width: 2.1rem; text-align: center; padding: .3rem .4rem; border: 1px solid #f4efe255; text-decoration: none; }
.lp .all a[aria-current="page"] { background: var(--yellow); color: var(--blue); border-color: var(--yellow); }

@media (max-width: 760px) {
    .lp .bar-top { padding: .8rem 16px; }
    .lp main { padding: 0 16px 2rem; }
    .lp .lbody { grid-template-columns: 1fr; gap: 1.6rem; }
    .lp .lvideo { position: static; }
    .lp .lfoot { padding: 1.4rem 16px 3rem; }
}