/* lamonterapicona.com - custom layer on top of Tailwind (CDN).
   Light theme only: no dark-mode rules anywhere in this file. */

:root { color-scheme: only light; }

/* minimal reset (Tailwind preflight is switched off in each page's config) */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd, address { margin: 0; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
button { font: inherit; color: inherit; }
a { color: inherit; }

html { background-color: #ffffff; color: #222222; scroll-behavior: smooth; scroll-padding-top: 1rem; }
body { background-color: #ffffff; color: #222222; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- global focus ---------- */
.page a:focus-visible,
.page button:focus-visible,
.page summary:focus-visible {
  outline: 3px solid #1b1b1b;
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 60;
  background-color: #1b1b1b; color: #ffffff; padding: .75rem 1rem;
  font-family: Arial, sans-serif; font-size: 1rem; text-decoration: none; border-radius: 4px;
}
.skip-link:focus { top: 1rem; }

/* ---------- reading progress ---------- */
.read-bar { position: fixed; left: 0; top: 0; width: 100%; height: 4px; z-index: 50; background-color: transparent; pointer-events: none; }
.read-bar span { display: block; height: 100%; width: 100%; background-color: #5fa037; transform: scaleX(0); transform-origin: 0 50%; }

/* ---------- masthead ---------- */
.masthead { background-color: #ffffff; color: #1b1b1b; }
.wordmark { font-family: "Fjalla One", "Arial Narrow", Arial, sans-serif; font-size: clamp(1.875rem, 1.1rem + 3.4vw, 3.25rem); line-height: 1; letter-spacing: .01em; display: inline-block; text-decoration: none; }
.wordmark .wm-a { color: #4c8b25; }
.wordmark .wm-b { color: #1b1b1b; }
.tagline { font-family: "Fjalla One", "Arial Narrow", Arial, sans-serif; font-size: clamp(.9375rem, .85rem + .5vw, 1.125rem); letter-spacing: .04em; color: #1b1b1b; line-height: 1.4; }
.tagline em { font-style: normal; color: #3f7a1d; }
.sponsor-pill {
  display: inline-block; vertical-align: middle; margin-left: .5rem;
  font-family: Arial, sans-serif; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #3f3f3f; background-color: #ffffff; border: 1px solid #8a8a8a; border-radius: 999px; padding: .2rem .65rem; line-height: 1.3;
}

/* nav: stacked + toggle on mobile, single row from 768px */
.nav-toggle {
  display: none; width: 100%; min-height: 48px; align-items: center; justify-content: space-between;
  background-color: #ffffff; color: #1b1b1b; border: 1px solid #bdbdbd; border-radius: 6px; padding: 0 1rem;
  font-family: "Fjalla One", "Arial Narrow", Arial, sans-serif; font-size: 1.125rem; letter-spacing: .03em; cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.nav-toggle:hover { border-color: #3f7a1d; color: #3f7a1d; }
.nav-toggle .chev { display: inline-block; width: .6rem; height: .6rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; }
.nav-toggle[aria-expanded="true"] .chev { transform: rotate(-135deg) translateY(-2px); }
.js .nav-toggle { display: flex; }
.js .nav-list { display: none; }
.js .nav-list.is-open { display: block; }

.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-list a {
  display: flex; align-items: center; min-height: 48px; padding: 0 .25rem;
  font-family: "Fjalla One", "Arial Narrow", Arial, sans-serif; font-size: 1.1875rem; letter-spacing: .03em; text-transform: lowercase;
  color: #1b1b1b; text-decoration: none; border-bottom: 1px solid #e4e4e4;
  transition: color .2s ease, border-color .2s ease;
}
.nav-list a:hover { color: #3f7a1d; border-color: #5fa037; }

@media (min-width: 768px) {
  .nav-toggle, .js .nav-toggle { display: none; }
  .nav-list, .js .nav-list { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.25rem; }
  .nav-list a { border-bottom: 3px solid transparent; font-size: 1.125rem; padding: 0 .1rem; }
}
@media (min-width: 1024px) {
  .nav-list, .js .nav-list { gap: .25rem 2.5rem; }
  .nav-list a { font-size: 1.4rem; }
}

/* ---------- article typography ---------- */
.article { font-family: Merriweather, Georgia, "Times New Roman", serif; font-size: 1.0625rem; line-height: 1.75; color: #222222; background-color: #ffffff; }
@media (min-width: 768px) { .article { font-size: 1.125rem; } }
:where(.article) p { margin: 0 0 1.4em; }
.article strong { font-weight: 700; color: #1b1b1b; }
.article ul.bullets { list-style: disc; margin: 0 0 1.5em; padding-left: 1.5rem; }
.article ul.bullets li { margin: 0 0 .35em; padding-left: .25rem; }
.article ul.bullets li::marker { color: #3f7a1d; }

.art-h1 {
  font-family: "Fjalla One", "Arial Narrow", Arial, sans-serif; font-weight: 400; color: #2b2b2b;
  font-size: clamp(1.75rem, 1.15rem + 2.6vw, 2.875rem); line-height: 1.18; letter-spacing: .01em; text-align: center; margin: 0;
}
.art-h2 {
  font-family: "Fjalla One", "Arial Narrow", Arial, sans-serif; font-weight: 400; color: #2b2b2b;
  font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2rem); line-height: 1.22; letter-spacing: .01em; margin: 0 0 1rem;
}
.art-h2 .num { color: #3f7a1d; }
.art-h3 {
  font-family: "Fjalla One", "Arial Narrow", Arial, sans-serif; font-weight: 400; color: #2b2b2b;
  font-size: clamp(1.1875rem, 1.05rem + .6vw, 1.4375rem); line-height: 1.3; letter-spacing: .01em; margin: 0 0 .4rem;
}
.art-h1, .art-h2, .art-h3 { text-wrap: balance; }
.sec { padding-top: 2.75rem; scroll-margin-top: 1rem; }
@media (min-width: 768px) { .sec { padding-top: 3.75rem; } }

/* full-bleed soft band, drawn with a shadow so it never creates horizontal scroll */
.band { background-color: #f4f8ef; box-shadow: 0 0 0 100vmax #f4f8ef; clip-path: inset(0 -100vmax); margin-top: 3.5rem; padding-bottom: 2.75rem; color: #222222; }
@media (min-width: 768px) { .band { margin-top: 4.5rem; padding-bottom: 3.5rem; } }

.byline { font-family: Arial, Helvetica, sans-serif; font-size: .875rem; color: #595959; text-align: center; letter-spacing: .02em; margin: 1rem 0 0; }

/* grey intro box (shape from the primary reference) */
.dek-box { background-color: #e8e8e8; color: #222222; font-style: italic; font-size: 1rem; line-height: 1.7; padding: 1rem 1.125rem; border-radius: 0; }
@media (min-width: 768px) { .dek-box { font-size: 1.0625rem; padding: 1.25rem 1.5rem; } }
.dek-box strong { font-style: normal; }

/* media */
.video-frame { position: relative; width: 100%; aspect-ratio: 1200 / 630; background-color: #e8e8e8; overflow: hidden; border-radius: 6px; }
.video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-frame { position: relative; width: 100%; background-color: #e8e8e8; overflow: hidden; border-radius: 6px; }
.photo-frame img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; max-width: 100%; }
.cap { font-family: Arial, Helvetica, sans-serif; font-size: .8125rem; line-height: 1.5; color: #595959; margin: .6rem 0 0; font-style: italic; }

/* ---------- CTA ---------- */
.btn-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 52px; padding: .75rem 1.5rem;
  background-color: #3f7a1d; color: #ffffff; text-decoration: none; text-align: center;
  font-family: "Fjalla One", "Arial Narrow", Arial, sans-serif; font-size: 1.1875rem; letter-spacing: .03em; line-height: 1.2;
  border-radius: 6px; box-shadow: 0 3px 0 #2c5712;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-cta::after { content: "\2192"; font-family: Arial, sans-serif; transition: transform .2s ease; }
.btn-cta:hover { background-color: #346419; transform: translateY(-1px); box-shadow: 0 4px 0 #234510; }
.btn-cta:hover::after { transform: translateX(3px); }
.btn-cta:active { transform: translateY(1px); box-shadow: 0 1px 0 #234510; }
.btn-cta:focus-visible { outline: 3px solid #1b1b1b; outline-offset: 3px; }
.btn-cta--block { display: flex; width: 100%; }
@media (min-width: 480px) { .btn-cta--block { display: inline-flex; width: auto; } }

.leave-note { font-family: Arial, Helvetica, sans-serif; font-size: .8125rem; line-height: 1.5; color: #595959; margin: .7rem 0 0; font-style: normal; }

.cta-box {
  border: 2px solid #5fa037; border-radius: 10px; padding: 1.25rem;
  background-color: #f1f7ea; background-image: linear-gradient(100deg, #ffffff 0%, #f4f9ee 50%, #dcebcc 100%);
  color: #222222;
}
@media (min-width: 768px) { .cta-box { padding: 1.75rem 2rem; } }
.cta-box .art-h2 { margin-bottom: .5rem; }
:where(.cta-box) p { margin: 0 0 1.1rem; }
.cta-box p { font-size: 1rem; line-height: 1.65; }
.cta-box p.leave-note { margin: .7rem 0 0; font-size: .8125rem; line-height: 1.5; }

/* decorative 5-step card (drawn in CSS) */
.check-card { width: 100%; max-width: 8.5rem; background-color: #ffffff; border: 1px solid #c9c9c9; padding: .5rem; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.check-card__head { font-family: "Fjalla One", "Arial Narrow", Arial, sans-serif; font-size: .9375rem; color: #1b1b1b; text-align: center; padding: .15rem 0 .45rem; letter-spacing: .03em; }
.check-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.check-card li { display: flex; align-items: center; justify-content: space-between; padding: .28rem .4rem; font-family: Arial, sans-serif; font-size: .6875rem; font-weight: 700; color: #16300a; }
.check-card li i { display: block; width: .8rem; height: .8rem; background-color: #ffffff; border: 1px solid #16300a; position: relative; }
.check-card li i::after { content: ""; position: absolute; left: .22rem; top: .02rem; width: .22rem; height: .5rem; border-right: 2px solid #16300a; border-bottom: 2px solid #16300a; transform: rotate(40deg); }
.check-card li:nth-child(1) { background-color: #d3ebbd; }
.check-card li:nth-child(2) { background-color: #bfe19f; }
.check-card li:nth-child(3) { background-color: #a9d680; }
.check-card li:nth-child(4) { background-color: #92cb63; }
.check-card li:nth-child(5) { background-color: #7bc049; }

/* ---------- table of contents ---------- */
.toc { background-color: #efefef; color: #222222; border: 1px solid #c4c4c4; padding: .9rem 1.1rem; max-width: 100%; }
@media (min-width: 768px) { .toc { max-width: 25rem; } }
.toc summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; font-family: "Fjalla One", "Arial Narrow", Arial, sans-serif; font-size: 1.1875rem; letter-spacing: .02em; color: #1b1b1b; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: "[ masquer ]"; font-family: Arial, sans-serif; font-size: .8125rem; letter-spacing: 0; color: #3f7a1d; text-decoration: underline; }
.toc:not([open]) summary::after { content: "[ afficher ]"; }
.toc ol { list-style: decimal; margin: .5rem 0 .25rem; padding-left: 1.4rem; font-family: Arial, Helvetica, sans-serif; font-size: .9375rem; line-height: 1.4; }
.toc ol li { padding-left: .15rem; }
.toc ol li::marker { color: #3f7a1d; font-weight: 700; }
.toc ol a { display: flex; align-items: center; min-height: 44px; color: #222222; text-decoration: none; transition: color .2s ease; }
@media (min-width: 768px) { .toc ol a { min-height: 34px; } }
.toc ol a:hover { color: #3f7a1d; text-decoration: underline; }

/* ---------- steps (rows, like the reference's comparison rows) ---------- */
.steps { list-style: none; margin: 1.5rem 0 0; padding: 0; border-bottom: 1px solid #d8d8d8; }
.step { display: grid; gap: .4rem; padding: 1.25rem 0; border-top: 1px solid #d8d8d8; }
@media (min-width: 480px) { .step { grid-template-columns: 6.25rem 1fr; gap: 1.25rem; } }
.step-label { font-family: Arial, Helvetica, sans-serif; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #3f7a1d; padding-top: .35rem; }
.step p { margin: 0; font-size: 1rem; line-height: 1.65; }

/* ---------- need cards ---------- */
.need-grid { display: grid; gap: 1.25rem; margin: 1.5rem 0 0; }
@media (min-width: 768px) { .need-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
.need-card { background-color: #ffffff; color: #222222; border: 1px solid #d8d8d8; border-radius: 12px; padding: 1.5rem 1.25rem; box-shadow: 0 6px 18px rgba(30, 50, 20, .06); transition: transform .2s ease, box-shadow .2s ease; }
.need-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(30, 50, 20, .10); }
.need-card svg { display: block; width: 2.5rem; height: 2.5rem; margin-bottom: .9rem; }
.need-card p { margin: 0; font-size: .96875rem; line-height: 1.65; }

/* ---------- pull card (quote-card shape) ---------- */
.pull-card { position: relative; background-color: #f1f7ea; color: #1f2d14; border-radius: 12px; padding: 2.75rem 1.5rem 1.5rem; margin: 2rem 0; }
@media (min-width: 768px) { .pull-card { padding: 2.75rem 2.25rem 2rem 5rem; } }
.pull-card::before { content: "\201C"; position: absolute; left: 1.25rem; top: .85rem; font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 5rem; line-height: .6; height: 2rem; color: #5fa037; }
.pull-card p { margin: 0; font-family: "Fjalla One", "Arial Narrow", Arial, sans-serif; font-size: clamp(1.3125rem, 1.1rem + .9vw, 1.75rem); line-height: 1.3; letter-spacing: .01em; color: #1f2d14; }

/* quick Q&A */
.qa { border-top: 1px solid #cdd8c2; padding: 1.25rem 0 .25rem; }
.qa:last-child { border-bottom: 1px solid #cdd8c2; }
.qa p { margin-bottom: 1rem; }

/* ---------- footer (publisher imprint) ---------- */
.footer { background-color: #ffffff; color: #595959; font-family: Arial, Helvetica, sans-serif; font-size: .8125rem; line-height: 1.65; margin-top: 4rem; padding: 0 1rem 3rem; }
.footer-inner { max-width: 50rem; margin: 0 auto; }
.footer .imprint { margin: 0; color: #595959; }
.footer .imprint p { margin: 0 0 .15rem; color: #595959; }
.footer .imprint .imprint-name { font-weight: 700; color: #3a3a3a; }
.footer .legal_links { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin: 1.25rem 0 .75rem; padding: 0; }
.footer .legal_links a { display: inline-flex; align-items: center; min-height: 44px; color: #3a3a3a; text-decoration: underline; text-underline-offset: 3px; transition: color .2s ease; }
.footer .legal_links a:hover { color: #3f7a1d; }
.footer .end_line { margin: 0; color: #595959; max-width: 46rem; }

/* ---------- legal / about pages ---------- */
.legal-doc { font-family: Merriweather, Georgia, "Times New Roman", serif; font-size: 1rem; line-height: 1.75; color: #222222; background-color: #ffffff; }
@media (min-width: 768px) { .legal-doc { font-size: 1.0625rem; } }
.legal-doc h2 { font-family: "Fjalla One", "Arial Narrow", Arial, sans-serif; font-weight: 400; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); line-height: 1.25; color: #2b2b2b; margin: 2.25rem 0 .75rem; }
.legal-doc p { margin: 0 0 1.2em; }
.legal-doc ul { list-style: disc; margin: 0 0 1.3em; padding-left: 1.5rem; }
.legal-doc li { margin: 0 0 .4em; }
.legal-doc li::marker { color: #3f7a1d; }
.legal-doc a { color: #3f7a1d; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.legal-doc a:hover { color: #2c5712; }
.doc-dates { font-family: Arial, Helvetica, sans-serif; font-size: .875rem; color: #595959; text-align: center; margin: 1rem 0 0; }
.back-link { font-family: Arial, Helvetica, sans-serif; font-size: .9375rem; }
.legal-doc address { font-style: normal; margin: 0 0 1.3em; padding-left: 1rem; border-left: 3px solid #5fa037; }