/* Mon lutin farceur. Mix: the structure of Headspace, the matter of Lovevery, the motion of
   Duolingo, in the colours of the lutin's kit (pine hat, clementine pompom, cream paper,
   raspberry confetti). Everything lives under .lf, or under body:has(.lf-home). */
@font-face { font-family: "Bricolage LF"; src: url("fonts/bricolage-latin.woff2") format("woff2"); font-weight: 500 800; font-display: swap; }
@font-face { font-family: "Nunito LF"; src: url("fonts/nunito-latin.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Gochi LF"; src: url("fonts/gochi-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --lf-pine: #2d6a1f;
  --lf-pine-deep: #1b4a14;
  --lf-ink: #1b2418;
  --lf-muted: #5d6656;
  --lf-paper: #fbf6ec;
  --lf-card: #ffffff;
  --lf-sage: #e7eedf;
  --lf-line: #dfe5d5;
  --lf-clem: #b8461b;
  --lf-clem-bright: #e8742f;
  --lf-berry: #d64d6e;
  --lf-display: "Bricolage LF", "Avenir Next", system-ui, sans-serif;
  --lf-text: "Nunito LF", system-ui, sans-serif;
  --lf-hand: "Gochi LF", "Comic Sans MS", cursive;
  --lf-ease: cubic-bezier(.2, .7, .2, 1);
  --lf-shadow: 0 1px 2px rgba(27, 36, 24, .06), 0 14px 34px -14px rgba(27, 36, 24, .22);
}

/* The whole site: paper, ink, fonts; shared pages (offers, guides, legal) too. */
body { background: var(--lf-paper); color: var(--lf-ink); font-family: var(--lf-text); }
h1, h2, h3, .brand { font-family: var(--lf-display); letter-spacing: -.02em; }
.brand-emoji { font-size: 0; display: inline-block; flex: 0 0 auto; width: 30px; height: 30px; background: url("logo.svg") center / contain no-repeat; vertical-align: middle; transition: transform .4s var(--lf-ease); }
.brand:hover .brand-emoji { transform: rotate(-10deg); }
.btn, button.btn { background: var(--lf-pine); border-radius: 12px; box-shadow: 0 4px 0 var(--lf-pine-deep); font-family: var(--lf-display); font-weight: 700; transition: transform .15s var(--lf-ease), box-shadow .15s var(--lf-ease); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--lf-pine-deep); }
a { color: var(--lf-pine); }
:focus-visible { outline: 3px solid var(--lf-clem-bright); outline-offset: 2px; }

.lf { font-size: 1.0625rem; line-height: 1.5; }
.lf-wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.lf h1 { font-size: clamp(2.4rem, 5.6vw, 4.6rem); line-height: 1.02; font-weight: 800; margin: 8px 0 16px; text-wrap: balance; }
.lf h1 em { font-style: normal; color: var(--lf-pine); }
.lf h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); line-height: 1.08; font-weight: 800; margin: 0 0 12px; text-wrap: balance; }
.lf h3 { font-size: 1.5rem; line-height: 1.15; font-weight: 750; margin: 0; }
.lf-kicker { font-family: var(--lf-hand); color: var(--lf-clem); font-size: 1.45rem; margin: 0; line-height: 1.2; }
.lf-lead { font-size: 1.18rem; color: var(--lf-muted); max-width: 36em; margin: 0 0 22px; }
.lf-hand { font-family: var(--lf-hand); }
.lf-small { font-size: .88rem; color: var(--lf-muted); margin: 10px 0 0; }
.lf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Buttons with a thickness that sinks when pressed (C). */
.lf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 26px; border: 0; border-radius: 12px; font: 750 1.08rem/1.1 var(--lf-display); text-decoration: none; cursor: pointer; transition: transform .15s var(--lf-ease), box-shadow .15s var(--lf-ease), background-color .2s; }
.lf-btn-main { background: var(--lf-pine); color: #fff; box-shadow: 0 5px 0 var(--lf-pine-deep); }
.lf-btn-main:hover { background: #33771f; color: #fff; }
.lf-btn-main:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--lf-pine-deep); }
.lf-btn-ghost { background: #fff; color: var(--lf-pine-deep); box-shadow: inset 0 0 0 2px var(--lf-pine), 0 4px 0 var(--lf-line); }
.lf-btn-ghost:active { transform: translateY(3px); box-shadow: inset 0 0 0 2px var(--lf-pine), 0 1px 0 var(--lf-line); }
.lf-btn-soft { background: var(--lf-sage); color: var(--lf-ink); min-height: 46px; font-size: .98rem; box-shadow: 0 3px 0 var(--lf-line); }
.lf-link { font-weight: 800; color: var(--lf-pine); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Hero (A: plain title on the left, the product large on the right). */
.lf-hero { padding: 40px 0 72px; background: radial-gradient(1200px 500px at 85% 10%, #eef3e6 0, transparent 60%), var(--lf-paper); overflow: hidden; }
.lf-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.lf-card { background: var(--lf-card); border: 1px solid var(--lf-line); border-radius: 24px; box-shadow: var(--lf-shadow); padding: 24px; }
.lf-form label { font-weight: 750; font-size: .98rem; display: block; margin: 0 0 6px; }
.lf-form input[type="text"] { width: 100%; min-height: 56px; border: 2px solid var(--lf-line); border-radius: 12px; padding: 0 16px; font: 600 1.15rem var(--lf-text); background: #fff; color: var(--lf-ink); transition: border-color .2s; }
.lf-form input[type="text"]:focus { border-color: var(--lf-pine); outline: none; box-shadow: 0 0 0 4px rgba(45, 106, 31, .15); }
.lf-field { margin: 0 0 14px; }
.lf-hint { font-weight: 500; color: var(--lf-muted); font-size: .85rem; }
.lf-form .lf-btn-main { width: 100%; margin-top: 4px; }
.lf-pills { border: 0; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.lf-pills legend { font-weight: 750; font-size: .98rem; margin: 0 0 8px; padding: 0; width: 100%; }
.lf-pills label, .lf-checks label { margin: 0; cursor: pointer; }
.lf-pills input, .lf-checks input { position: absolute; opacity: 0; pointer-events: none; }
.lf-pills span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--lf-paper); border: 2px solid var(--lf-line); font-weight: 700; font-size: .95rem; transition: background-color .2s var(--lf-ease), border-color .2s var(--lf-ease), color .2s var(--lf-ease), box-shadow .2s var(--lf-ease); }
.lf-pills input:checked + span { background: var(--lf-pine); border-color: var(--lf-pine); color: #fff; box-shadow: 0 3px 0 var(--lf-pine-deep); }
.lf-pills input:focus-visible + span, .lf-checks input:focus-visible + span { outline: 3px solid var(--lf-clem-bright); outline-offset: 2px; }
.lf-kind { margin-top: -2px; }
.lf-checks { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lf-checks legend { font-weight: 750; font-size: .98rem; margin: 0 0 8px; padding: 0; }
.lf-checks label > span { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px; border-radius: 12px; background: var(--lf-paper); border: 2px solid var(--lf-line); font-size: .9rem; font-weight: 650; line-height: 1.2; }
.lf-checks label > span::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 12px; border: 2px solid #a9b39f; background: #fff; }
.lf-checks input:checked + span { border-color: var(--lf-pine); background: #f1f6ea; }
.lf-checks input:checked + span::before { background: var(--lf-pine) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat; border-color: var(--lf-pine); }
.lf-more { margin: 14px 0 0; border-top: 1px dashed var(--lf-line); padding-top: 12px; }
.lf-more summary { cursor: pointer; font-weight: 800; color: var(--lf-pine-deep); list-style: none; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.lf-more summary::-webkit-details-marker { display: none; }
.lf-more summary::before { content: "+"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--lf-sage); font-weight: 800; transition: transform .3s var(--lf-ease); }
.lf-more[open] summary::before { transform: rotate(45deg); }
.lf-more summary span { font-weight: 500; color: var(--lf-muted); font-size: .88rem; }
.lf-more[open] > *:not(summary) { margin-top: 14px; }

/* The product on stage: two pages fanned out and the portrait (B: the real product, large). */
.lf-stage { position: relative; min-height: 600px; }
.lf-stage-card { position: absolute; display: block; width: 62%; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 4px rgba(27, 36, 24, .08), 0 28px 50px -22px rgba(27, 36, 24, .45); background: #fff; transition: transform .5s var(--lf-ease); }
.lf-stage-card img { display: block; width: 100%; height: auto; }
.lf-stage-back { top: 10px; left: 2%; transform: rotate(-6deg); }
.lf-stage-front { top: 60px; right: 0; transform: rotate(4deg); }
.lf-stage:hover .lf-stage-back { transform: rotate(-9deg) translateX(-10px); }
.lf-stage:hover .lf-stage-front { transform: rotate(6deg) translateX(8px); }
.lf-stage-portrait { position: absolute; left: 6%; bottom: 0; width: 210px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 8px solid #fff; box-shadow: var(--lf-shadow); animation: lf-sway-once 1.4s cubic-bezier(.2, .7, .2, 1) .3s 1 both; transform-origin: 50% 0; }
.lf-stage-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lf-stage-note { position: absolute; left: calc(6% + 220px); bottom: 26px; font-size: 1.5rem; color: var(--lf-pine-deep); transform: rotate(-4deg); }
.lf-sticker { position: absolute; z-index: 3; top: -6px; right: 12px; background: var(--lf-ink); color: #fff; font: 700 .8rem var(--lf-text); padding: 6px 12px; border-radius: 999px; }
@keyframes lf-sway-once { 0% { transform: rotate(-6deg); } 45% { transform: rotate(4deg); } 75% { transform: rotate(-2deg); } 100% { transform: rotate(0); } }

.lf-result-zone { padding: 24px 20px 56px; }

/* Band of four true facts (A: full-width colour band). */
.lf-band { background: var(--lf-pine-deep); color: #f3f6ee; padding: 28px 0; }
.lf-band ul { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 0 auto; }
.lf-band li { display: flex; gap: 12px; align-items: flex-start; font-size: .98rem; line-height: 1.35; }
.lf-band svg { flex: none; color: #f4a261; margin-top: 2px; }
.lf-band strong { color: #fff; }

.lf-intro { padding: 104px 20px 24px; text-align: center; }
.lf-intro p { max-width: 42em; margin: 0 auto; color: var(--lf-muted); }
.lf-frieze { list-style: none; padding: 0; margin: 36px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 760px; }
.lf-frieze li { width: 30px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--lf-sage); font: 800 .82rem var(--lf-display); color: var(--lf-pine-deep); transform-origin: 50% 0; transition: transform .35s var(--lf-ease); }
.lf-frieze li:nth-child(3n) { background: #fbe1d2; color: #8a3413; }
.lf-frieze li:nth-child(4n) { background: #f8d9e1; color: #8c2440; }
.lf-frieze .lf-frieze-key { background: var(--lf-pine); color: #fff; }
.lf-frieze li:hover { transform: rotate(-8deg) translateY(2px); }

/* Product sections (A: two columns, alternating cream and sage, large round cards). */
.lf-product { padding: 72px 0; }
.lf-alt { background: var(--lf-sage); }
.lf-product-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.lf-alt .lf-product-grid { direction: rtl; }
.lf-alt .lf-product-grid > * { direction: ltr; }
.lf-shot { position: relative; background: #fff; border-radius: 24px; padding: 32px; box-shadow: var(--lf-shadow); }
.lf-shot img { display: block; width: 100%; height: auto; border-radius: 12px; }
.lf-shot-duo { display: grid; grid-template-columns: .8fr 1fr; gap: 18px; align-items: center; }
.lf-shot-duo a:first-child img { border-radius: 50%; }
.lf-shot-page { display: block; max-width: 380px; margin: 0 auto; box-shadow: 0 18px 40px -20px rgba(27, 36, 24, .45); border-radius: 12px; }
.lf-typed { font-family: var(--lf-hand); font-size: 1.25rem; background: #fff7c9; border-radius: 12px; padding: 14px 16px; margin: 0 0 18px; transform: rotate(-1.5deg); box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .3); }
.lf-typed small { display: block; font: 800 .72rem var(--lf-text); letter-spacing: .06em; text-transform: uppercase; color: var(--lf-muted); margin-bottom: 4px; }
.lf-tag { display: inline-block; background: var(--lf-clem); color: #fff; font: 800 .8rem var(--lf-text); padding: 6px 12px; border-radius: 999px; margin-bottom: 14px; }
.lf-tag-soft { background: #fff; color: var(--lf-pine-deep); box-shadow: inset 0 0 0 2px var(--lf-line); }
.lf-copy-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 12px; }
.lf-price { font: 800 1.6rem var(--lf-display); color: var(--lf-pine-deep); white-space: nowrap; }
.lf-copy p { color: var(--lf-muted); margin: 0 0 16px; }
.lf-list { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 10px; }
.lf-list li { display: flex; gap: 10px; align-items: flex-start; }
.lf-list li::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: var(--lf-sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%232d6a1f' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 13px no-repeat; }
.lf-alt .lf-list li::before { background-color: #fff; }

.lf-tiles { padding: 72px 0 24px; }
.lf-tiles-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.lf-tile { background: #fff; border-radius: 24px; padding: 28px; box-shadow: var(--lf-shadow); }
.lf-tile-head { display: flex; justify-content: space-between; gap: 12px; font: 800 1.25rem var(--lf-display); }
.lf-tile p { color: var(--lf-muted); }
.lf-tile-warm { background: #fbe9dc; }
.lf-tile-warm > strong { font: 800 1.25rem var(--lf-display); }

.lf-how { padding: 96px 0; }
.lf-how h2 { text-align: center; margin-bottom: 40px; }
.lf-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.lf-steps li { position: relative; background: #fff; border-radius: 24px; padding: 30px 26px; box-shadow: var(--lf-shadow); }
.lf-steps p { color: var(--lf-muted); margin: 10px 0 0; }
.lf-step-n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--lf-pine); color: #fff; font: 800 1.2rem var(--lf-display); margin-bottom: 16px; box-shadow: 0 4px 0 var(--lf-pine-deep); }
.lf-postit { display: inline-block; margin-top: 14px; background: #fff7c9; padding: 8px 12px; font-size: 1.2rem; transform: rotate(-2deg); border-radius: 12px; }

.lf-trust { background: var(--lf-ink); color: #eef2e8; padding: 80px 0; }
.lf-trust h2 { color: #fff; font-size: 1.7rem; }
.lf-trust p { color: #cfd6c7; }
.lf-trust strong { color: #fff; }
.lf-trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }

.lf-guides { padding: 72px 0 8px; }
.lf-guides h2 { font-size: 1.6rem; }
.lf-guides ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.lf-guides a { display: inline-flex; min-height: 44px; align-items: center; padding: 0 18px; border-radius: 999px; background: #fff; border: 2px solid var(--lf-line); font-weight: 750; text-decoration: none; color: var(--lf-ink); transition: border-color .2s, transform .2s var(--lf-ease); }
.lf-guides a:hover { border-color: var(--lf-pine); transform: translateY(-2px); }

.lf-faq { padding: 56px 0 104px; }
.lf-faq .lf-wrap { max-width: 820px; }
.lf-faq details { background: #fff; border-radius: 24px; padding: 18px 22px; margin: 0 0 12px; box-shadow: 0 1px 2px rgba(27, 36, 24, .06); }
.lf-faq summary { cursor: pointer; font: 750 1.12rem var(--lf-display); }
.lf-faq p { color: var(--lf-muted); margin: 10px 0 0; }

/* Free result: the letter on paper, the 24 days as cards, then the kit. */
.lf-res { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 32px; align-items: start; text-align: left; }
.lf-res-title { margin-top: 4px; }
.lf-res-lead { color: var(--lf-muted); }
.lf-paper { background: #fffdf7; border: 1px solid var(--lf-line); border-radius: 24px; padding: 26px 26px 18px; box-shadow: var(--lf-shadow); margin: 18px 0 22px; position: relative; }
.lf-paper::before { content: ""; position: absolute; inset: 10px; border: 2px dashed #cfdcc2; border-radius: 12px; pointer-events: none; }
.lf-paper-label { font: 800 .78rem var(--lf-text); letter-spacing: .08em; text-transform: uppercase; color: var(--lf-clem); margin: 0 0 8px; }
.lf-paper .lf-hand { font-size: 1.3rem; line-height: 1.35; margin: 0 0 10px; }
.lf-paper .lf-hand-big { font-size: 1.5rem; }
.lf-sign { text-align: right; color: var(--lf-pine); font-size: 1.7rem !important; }
.lf-sign small { display: block; font: 600 .82rem var(--lf-text); color: var(--lf-muted); }
.lf-ps { color: var(--lf-berry); font-size: 1.1rem !important; }
.lf-days { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.lf-day { background: #fff; border-radius: 24px; padding: 16px 18px; border: 1px solid var(--lf-line); }
.lf-weekend { background: #f6f9f1; }
.lf-day-n { margin: 0 0 6px; display: flex; gap: 8px; align-items: baseline; }
.lf-day-n b { font: 800 1.6rem var(--lf-display); color: var(--lf-clem); }
.lf-day-n span { color: var(--lf-muted); font-size: .9rem; }
.lf-day h3 { font-size: 1.08rem; }
.lf-day p { margin: 6px 0 0; font-size: .95rem; color: var(--lf-muted); }
.lf-day .lf-day-note { color: var(--lf-ink); font-size: 1.12rem; line-height: 1.3; }
.lf-day-meta { font-size: .82rem !important; font-weight: 700; color: var(--lf-pine) !important; }
.lf-days-more { margin: 14px 0 0; }
.lf-days-more summary { cursor: pointer; display: block; text-align: center; padding: 14px 16px; min-height: 52px; border-radius: 12px; background: var(--lf-sage); font: 750 1rem var(--lf-display); color: var(--lf-pine-deep); list-style: none; }
.lf-days-more summary::-webkit-details-marker { display: none; }
.lf-days-more[open] summary { margin-bottom: 14px; }
.lf-print { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 0; }
.lf-res-offer { position: sticky; top: 16px; background: #fff; border-radius: 24px; padding: 24px; box-shadow: var(--lf-shadow); border: 2px solid var(--lf-pine); }
.lf-res-offer h2 { font-size: 1.6rem; margin-top: 6px; }
.lf-res-pic { display: block; max-width: 260px; margin: 8px auto 14px; }
.lf-res-pic img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .5); }
.lf-compare { display: grid; grid-template-columns: 1fr 1fr; font-size: .88rem; border-radius: 12px; overflow: hidden; border: 1px solid var(--lf-line); margin: 0 0 16px; }
.lf-compare div { padding: 8px 10px; border-bottom: 1px solid var(--lf-line); }
.lf-compare div:nth-child(-n+2) { font-weight: 800; background: var(--lf-sage); }
.lf-compare div:nth-child(even) { font-weight: 700; color: var(--lf-pine-deep); }
.lf-compare .no { color: var(--lf-muted); }
.lf-res-offer .lf-btn-main { width: 100%; }
.lf-facts { list-style: none; padding: 0; margin: 12px 0; font-size: .86rem; color: var(--lf-muted); display: grid; gap: 4px; }
.lf-res-small { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--lf-paper); text-decoration: none; color: var(--lf-ink); margin-top: 10px; border: 1px solid var(--lf-line); transition: border-color .2s; }
.lf-res-small:hover { border-color: var(--lf-pine); }
.lf-res-small small { color: var(--lf-muted); }

/* The free tool inside public pages, and the offer form. */
.lf-tool .lf-form { background: #fff; border-radius: 24px; padding: 20px; border: 1px solid var(--lf-line); }
.lf-offer-form .lf-checks { margin: 14px 0; }
.lf-hint { display: inline; }
.lf-offer-form .lf-hint, p.lf-hint { display: block; background: #fbe9dc; border-radius: 12px; padding: 12px 14px; font-size: .92rem; margin: 14px 0 0; }

.lf-teaser-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: center; }
.lf-teaser-pair img { width: 100%; height: auto; display: block; }
.lf-teaser-pair a:first-child img { border-radius: 50%; }

/* Appearing on scroll (C): only once the script runs, so everything shows without it. */
.lf-js .lf-reveal { opacity: 0; transform: translateY(14px); transition: opacity .4s var(--lf-ease), transform .4s var(--lf-ease); transition-delay: var(--lf-delay, 0ms); }
.lf-js .lf-reveal.lf-in { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .lf-hero { padding: 20px 0 48px; }
  .lf-hero-grid, .lf-product-grid, .lf-res, .lf-trust-grid, .lf-tiles-grid { grid-template-columns: 1fr; gap: 32px; }
  .lf-alt .lf-product-grid { direction: ltr; }
  .lf-stage { min-height: 0; height: 420px; max-width: 420px; margin: 0 auto; width: 100%; }
  .lf-stage-portrait { width: 140px; }
  .lf-stage-note { left: calc(6% + 150px); font-size: 1.25rem; }
  .lf-band ul { grid-template-columns: 1fr 1fr; gap: 16px; }
  .lf-steps { grid-template-columns: 1fr; }
  .lf-intro { padding-top: 64px; }
  .lf-product { padding: 48px 0; }
  .lf-res-offer { position: static; }
}
@media (max-width: 520px) {
  .lf-wrap { padding: 0 16px; }
  .lf h1 { font-size: 2.35rem; margin: 4px 0 10px; }
  .lf-lead { font-size: 1.02rem; margin-bottom: 14px; }
  .lf-kicker { font-size: 1.25rem; }
  .lf-card { padding: 18px; border-radius: 24px; }
  .lf-checks { grid-template-columns: 1fr; }
  .lf-shot { padding: 18px; border-radius: 24px; }
  .lf-stage { height: 360px; }
  .lf-stage-note { display: none; }
  .lf-band ul { grid-template-columns: 1fr; }
  .lf-copy-head { flex-direction: column; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .lf *, .lf *::before, .brand-emoji { animation: none !important; transition: none !important; }
  .lf-js .lf-reveal { opacity: 1; transform: none; }
}
@media print {
  body.printing * { visibility: hidden; }
  body.printing .print-target, body.printing .print-target * { visibility: visible; }
  body.printing .print-target { position: absolute; left: 0; top: 0; width: 100%; margin: 0; box-shadow: none; }
}

/* Second pass (fresh review of 31/10): header on the content width, the product readable in the
   first screen, the frieze in two rows, quieter labels, the shared offer page dressed. */
body:has(.lf-home) .topbar { max-width: 1180px; padding: 16px 20px; }
.lf-lead-short, .lf-mini { display: none; }
.lf-sticker { top: 10px; right: 14px; background: rgba(255, 255, 255, .92); color: var(--lf-muted); font-weight: 650; font-size: .74rem; padding: 4px 10px; border: 1px solid var(--lf-line); }

/* Desktop hero: the visual wider, the letter whole, one page of notes large. */
@media (min-width: 901px) {
  .lf-hero-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; }
  .lf-stage { min-height: 640px; }
  .lf-stage-back { width: 46%; top: 40px; left: 0; transform: rotate(-4deg); }
  .lf-stage-front { width: 53%; top: 0; right: 0; transform: rotate(3deg); }
  .lf-stage:hover .lf-stage-back { transform: rotate(-6deg) translateX(-8px); }
  .lf-stage:hover .lf-stage-front { transform: rotate(5deg) translateX(8px); }
  .lf-stage-portrait { width: 170px; left: 36%; bottom: 0; }
  .lf-stage-note { left: calc(36% + 184px); bottom: 34px; }
}

/* Frieze: 24 days in two rows of 12, six columns on a phone. */
.lf-frieze { display: grid; grid-template-columns: repeat(12, 34px); justify-content: center; gap: 8px; max-width: none; }
.lf-frieze li { width: 34px; }

/* Product sections: the example centred in its card, no empty side. */
.lf-shot { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lf-shot-duo { width: 100%; }
.lf-shot-page { width: 100%; max-width: 360px; }
.lf-typed { align-self: stretch; }

/* Free result: the two print buttons on one full row. */
.lf-print { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lf-print .lf-btn { width: 100%; padding: 0 12px; font-size: .95rem; }

/* The shared offer page (pages whose form is ours): label, ticks, menus, two columns. */
body:has(.lf-offer-form) .topbar { max-width: 1120px; }
body:has(.lf-offer-form) .badge { text-transform: none; letter-spacing: 0; font-size: .82rem; font-weight: 700; background: var(--lf-sage); color: var(--lf-pine-deep); padding: 5px 12px; }
body:has(.lf-offer-form) .card { border-radius: 24px; border: 1px solid var(--lf-line); box-shadow: var(--lf-shadow); }
body:has(.lf-offer-form) h1 { font-weight: 800; line-height: 1.08; }
body:has(.lf-offer-form) .bullets { list-style: none; padding: 0; display: grid; gap: 10px; }
body:has(.lf-offer-form) .bullets li { display: flex; gap: 10px; align-items: flex-start; margin: 0; }
body:has(.lf-offer-form) .bullets li::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--lf-sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%232d6a1f' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 13px no-repeat; }
body:has(.lf-offer-form) select { appearance: none; -webkit-appearance: none; width: 100%; min-height: 50px; border: 2px solid var(--lf-line); border-radius: 12px; padding: 0 42px 0 14px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%231b4a14' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") right 14px center / 16px no-repeat; font: 600 1rem var(--lf-text); color: var(--lf-ink); }
body:has(.lf-offer-form) select:focus { border-color: var(--lf-pine); outline: none; box-shadow: 0 0 0 4px rgba(45, 106, 31, .15); }
body:has(.lf-offer-form) input[type="text"], body:has(.lf-offer-form) input[type="email"] { border: 2px solid var(--lf-line); border-radius: 12px; min-height: 50px; }
@media (min-width: 1025px) {
  body:has(.lf-offer-form) main > .wrap { max-width: 1120px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; align-items: start; }
  body:has(.lf-offer-form) main > .wrap > * { grid-column: 1; }
  body:has(.lf-offer-form) main > .wrap > form.card, body:has(.lf-offer-form) main > .wrap > .alert { grid-column: 2; grid-row: 1 / span 8; }
  body:has(.lf-offer-form) main > .wrap > .alert { grid-row: auto; }
}

@media (max-width: 900px) {
  .lf-frieze { grid-template-columns: repeat(6, 34px); }
}
@media (max-width: 520px) {
  body:has(.lf-home) .topbar { padding: 10px 16px; }
  .lf-lead { display: none; }
  .lf-lead-short { display: block; font-size: 1.02rem; color: var(--lf-muted); margin: 0 0 12px; }
  .lf-hero h1 { font-size: 2.15rem; }
  .lf-mini { display: block; position: relative; height: 160px; margin: 0 0 14px; border-radius: 24px; background: var(--lf-sage); overflow: hidden; text-decoration: none; }
  .lf-mini-portrait { position: absolute; left: 14px; top: 18px; width: 116px; height: 116px; border-radius: 50%; overflow: hidden; border: 5px solid #fff; box-shadow: var(--lf-shadow); z-index: 2; }
  .lf-mini-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .lf-mini-card { position: absolute; top: 14px; width: 92px; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .45); background: #fff; }
  .lf-mini-card img { display: block; width: 100%; height: auto; }
  .lf-mini-a { left: 146px; transform: rotate(-5deg); }
  .lf-mini-b { left: 232px; transform: rotate(4deg); }
  .lf-mini-note { position: absolute; left: 14px; bottom: 6px; z-index: 3; font: 750 .8rem var(--lf-display); color: var(--lf-pine-deep); background: rgba(255, 255, 255, .9); padding: 2px 8px; border-radius: 999px; }
  .lf-mini-note small { font: 600 .7rem var(--lf-text); color: var(--lf-muted); margin-left: 6px; }
}
.lf-stage > .lf-sticker { top: -30px; right: 0; }
@media (min-width: 901px) { .lf-hero h1 { font-size: clamp(2.6rem, 4.6vw, 4.1rem); } }

/* Third pass (31/10): one readable card instead of a whole page, no endless animation,
   public pages wider with idea cards, sticky left column on the offer page. */
.lf-stage-portrait:hover, .lf-shot-duo a:first-child:hover img { transform: rotate(-4deg); }
.lf-shot-duo a:first-child img { transition: transform .4s var(--lf-ease); }
.lf-zoom-tag { position: absolute; right: 12px; bottom: 12px; background: rgba(27, 36, 24, .82); color: #fff; font: 700 .78rem var(--lf-text); padding: 6px 12px; border-radius: 999px; }
.lf-card-big { position: relative; }
@media (min-width: 901px) {
  .lf-stage { min-height: 600px; }
  .lf-stage-back { width: 44%; top: 30px; left: 0; }
  .lf-stage-front { width: 54%; top: 0; right: 0; border-radius: 24px; }
  .lf-stage-portrait { left: auto; right: 24%; bottom: auto; top: 372px; width: 170px; }
  .lf-stage-note { left: auto; right: 0; bottom: auto; top: 470px; width: 23%; }
}
.lf-shot-duo { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 0; }
.lf-shot-duo a:first-child { width: 140px; margin-bottom: -46px; position: relative; z-index: 2; justify-self: start; margin-left: 8%; }
.lf-shot-duo a:first-child img { border: 5px solid #fff; box-shadow: var(--lf-shadow); }
.lf-card-big { display: block; width: 100%; max-width: 440px; border-radius: 24px; overflow: hidden; box-shadow: 0 18px 40px -20px rgba(27, 36, 24, .45); }
.lf-card-big img { border-radius: 0 !important; }

.wrap.guide:has(.lf-guide) { max-width: 800px; }
.lf-guide-days { margin: 20px 0; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.lf-guide-days h3 a { color: var(--lf-ink); text-decoration: none; }
.lf-guide-days h3 a:hover { color: var(--lf-pine); text-decoration: underline; }
.lf-guide-kit { display: grid; grid-template-columns: 180px 1fr; gap: 18px; align-items: center; margin: 20px 0; padding: 16px; border-radius: 24px; background: var(--lf-sage); text-decoration: none; color: var(--lf-ink); transition: transform .25s var(--lf-ease); }
.lf-guide-kit:hover { transform: translateY(-2px); }
.lf-guide-kit img { width: 100%; height: auto; border-radius: 12px; display: block; box-shadow: var(--lf-shadow); }
.lf-guide-kit small { display: block; color: var(--lf-clem); font-weight: 800; }
.lf-guide-kit strong { display: block; font: 750 1.1rem/1.25 var(--lf-display); margin: 4px 0 8px; }
.lf-guide-kit em { font-style: normal; font-weight: 800; color: var(--lf-pine); text-decoration: underline; text-underline-offset: 4px; }

.lf-print .lf-btn { white-space: nowrap; }
@media (min-width: 1025px) {
  body:has(.lf-offer-form) main > .wrap > :not(form):not(.alert) { position: sticky; top: 24px; }
}
@media (max-width: 520px) {
  .lf-print .lf-btn { font-size: .84rem; padding: 0 6px; }
  .lf-guide-kit { grid-template-columns: 110px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .lf-stage-portrait, .lf-frieze li, .lf-guide-kit { animation: none !important; transition: none !important; }
}

/* Fourth pass (31/10): one portrait per example, labels under the cards, the front card at 70 %,
   the frieze in cream and sage. */
.lf-zoom-tag { position: static; display: block; width: max-content; margin: 10px auto 12px; background: var(--lf-sage); color: var(--lf-pine-deep); }
.lf-stage-front .lf-zoom-tag { margin: 8px auto 10px; }
.lf-card-big { background: #fff; }
.lf-shot-duo a:first-child { width: 100%; margin: 0; justify-self: center; }
@media (min-width: 901px) {
  .lf-stage { min-height: 560px; }
  .lf-stage-back { width: 40%; top: 36px; left: 0; }
  .lf-stage-front { width: 70%; top: 0; right: 0; background: #fff; }
  .lf-stage-portrait { right: auto; left: 3%; top: 400px; width: 140px; }
  .lf-stage-note { right: auto; left: calc(3% + 156px); top: 450px; width: auto; }
}
@media (max-width: 520px) {
  .lf-stage { display: none; }
}
.lf-frieze { grid-template-columns: repeat(12, 44px); gap: 8px; }
.lf-frieze li, .lf-frieze li:nth-child(3n), .lf-frieze li:nth-child(4n) { width: 44px; height: 52px; font-size: .95rem; background: var(--lf-sage); color: var(--lf-pine-deep); border: 1px solid #d3dcc6; }
.lf-frieze li:nth-child(even) { background: #fffaf1; border-color: var(--lf-line); }
.lf-frieze .lf-frieze-key { background: var(--lf-sage); }
.lf-frieze li:first-child { background: var(--lf-clem); border-color: var(--lf-clem); color: #fff; }
@media (max-width: 900px) { .lf-frieze { grid-template-columns: repeat(6, 44px); } }
.lf-shot-duo .lf-card-big img { border-radius: 0 !important; border: 0; box-shadow: none; transform: none; }

/* Fifth pass (31/10): two corner radii (12 and 24, pills at 999), Duolingo-like bounce,
   the notes offer as a full band, « Comment ça marche » as a numbered line, lighter band,
   drawn FAQ chevron, the site's own footer, no letter in the desktop hero. */
.lf-btn, .btn, button.btn { transition: transform .38s cubic-bezier(.34, 1.56, .64, 1), box-shadow .15s ease, background-color .2s ease; }
.lf-btn:hover, .btn:hover { transform: translateY(-2px) scale(1.02); }
.lf-btn:active, .btn:active { transform: translateY(4px) scale(.96); transition-duration: .08s; }
.lf-pills span { transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.lf-pills input:checked + span { transform: scale(1.04); }
.lf-frieze li { transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.lf-frieze li:hover { transform: translateY(-8px) rotate(-6deg); }
.lf-res .lf-day { animation: lf-pop .42s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--lf-i, 0) * 40ms); }
@keyframes lf-pop { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }

/* How it works: one numbered line, not three cards. */
.lf-steps { position: relative; gap: 40px; }
.lf-steps li { background: none; box-shadow: none; border-radius: 0; padding: 0; }
.lf-steps::before { content: ""; position: absolute; left: 22px; right: 22px; top: 21px; border-top: 2px dashed #b9c8ab; }
.lf-step-n { position: relative; z-index: 1; }
@media (max-width: 900px) {
  .lf-steps { gap: 28px; padding-left: 64px; }
  .lf-steps::before { left: 21px; right: auto; top: 22px; bottom: 22px; border-top: 0; border-left: 2px dashed #b9c8ab; }
  .lf-step-n { position: absolute; left: -64px; top: 0; }
}

/* A lighter band: cream with a green rule. */
.lf-band { background: var(--lf-paper); color: var(--lf-ink); border-top: 2px solid var(--lf-pine); border-bottom: 2px solid var(--lf-pine); }
.lf-band strong { color: var(--lf-pine-deep); }
.lf-band svg { color: var(--lf-pine); }

/* FAQ: a drawn chevron. */
.lf-faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.lf-faq summary::-webkit-details-marker { display: none; }
.lf-faq summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--lf-sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%231b4a14' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.lf-faq details[open] summary::after { transform: rotate(180deg); }

/* The site's own footer, above the shared legal line. */
.lf-foot { background: var(--lf-ink); color: #dfe6d6; padding: 56px 0 40px; }
.lf-foot-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 32px; }
.lf-foot-brand { display: flex; align-items: center; gap: 10px; font: 800 1.25rem var(--lf-display); color: #fff; margin: 0 0 10px; }
.lf-foot-brand img { width: 34px; height: 34px; background: #fbf6ec; border-radius: 12px; padding: 3px; }
.lf-foot h2 { font-size: .85rem !important; letter-spacing: .06em; text-transform: uppercase; color: #b9c8ab; margin: 0 0 12px; }
.lf-foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.lf-foot a { color: #fff; text-decoration: none; }
.lf-foot a:hover { text-decoration: underline; }
.lf-foot p { margin: 0 0 8px; color: #cfd6c7; }
@media (max-width: 900px) { .lf-foot-grid { grid-template-columns: 1fr; } }

/* Desktop hero: the readable card alone, the portrait at its corner. */
@media (min-width: 901px) {
  .lf-stage-back { display: none; }
  .lf-stage { min-height: 600px; }
  .lf-stage-front { left: 14%; right: auto; width: 76%; top: 10px; transform: rotate(2deg); }
  .lf-stage:hover .lf-stage-front { transform: rotate(0deg); }
  .lf-stage-portrait { left: 0; top: 420px; width: 150px; }
  .lf-stage-note { left: 166px; top: 520px; }
}
@media (prefers-reduced-motion: reduce) {
  .lf-btn, .btn, .lf-pills span, .lf-frieze li, .lf-res .lf-day, .lf-faq summary::after { animation: none !important; transition: none !important; transform: none !important; }
}

/* Sixth pass (31/10): the notes back in two columns with the picture on the left, the
   letters with the picture on the right, larger offer titles, no pink tile. */
.lf-alt .lf-product-grid { direction: ltr; }
@media (min-width: 901px) {
  .lf-product-lettres .lf-product-grid { direction: rtl; }
  .lf-product-lettres .lf-product-grid > * { direction: ltr; }
}
.lf-product { padding: 64px 0; }
.lf-product h3 { font-size: clamp(1.7rem, 2.6vw, 2.1rem); line-height: 1.1; }
.lf-tile-warm { background: var(--lf-sage); }