/* Collections, À propos, Notre démarche and FAQ share the homepage visual language.
   Their main content, image references and links remain in the original templates. */
body.info-page { display: flex; flex-direction: column; min-height: 100svh; }
.info-page main { flex: 1; min-width: 0; }
.info-page .section { padding-block: 44px 50px; background: transparent; }
.info-page .eyebrow, .info-page .kicker { display: inline-block; margin-bottom: 18px; padding: 6px 11px; border-radius: 10px 7px 12px 8px; background: #ffe98d; color: #805139; font-size: 12px; line-height: 1.5; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.info-page main h1 { max-width: 900px; margin: 0 0 20px; color: var(--home-blue); font-size: clamp(34px, 4vw, 50px); line-height: 1.2; overflow-wrap: break-word; }
.info-page main h1::after { content: ""; display: block; width: min(245px, 75%); height: 45px; margin-top: 12px; background: url("assets/icons/gribouillage-crayon.svg") left center / contain no-repeat; transform: rotate(-3deg); }
.info-page main h2 { margin-bottom: 18px; color: var(--home-green); font-size: clamp(26px, 2.7vw, 34px); line-height: 1.3; }
.info-page main h3 { color: var(--info-ink, var(--home-green)); font: 750 25px/1.3 var(--home-hand); margin-bottom: 15px; }
.info-page main p { color: var(--home-ink); }
.info-page .lead { max-width: 760px; margin-block: 18px 28px; font-size: 18px; line-height: 1.8; color: var(--home-ink); }
.info-page .story { max-width: 820px; color: var(--home-ink); font-size: 17px; line-height: 1.85; }
.info-page .story p { font-size: inherit; line-height: inherit; }
.info-page .story p + p { margin-top: 18px; }
.info-page .button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 13px 19px; border: 2px solid #b79b48; border-radius: 16px 20px 17px 19px; background: var(--home-yellow); color: var(--home-ink); font-size: 15px; font-weight: 750; line-height: 1.5; text-align: center; text-decoration: none; white-space: normal; box-shadow: 2px 3px 0 #c1a65230; }
.info-page .button.primary::after { display: none; }
.info-page .button:hover { background: #ffce37; transform: none; text-decoration: none; }
.info-page .actions { display: flex; flex-wrap: wrap; gap: 15px; margin: 28px 0 0; }
.info-page .actions .button:not(.primary) { background: #dceff6; border-color: #7da9bc; box-shadow: 2px 3px 0 #7da9bc30; }
.info-page .actions .button:not(.primary):hover { background: #c4e4f1; }
.info-page .home-footer { margin-top: 12px; }

/* The same pastel paper cards are used for collections, intentions and questions. */
.info-page :is(.card, .evidence-band > article, .faq > details) { --info-paper: #f5faeb; --info-wash: #d9edba; --info-edge: #91b46c; --info-ink: #466332; min-width: 0; background: var(--info-paper); border: 2px solid var(--info-edge); border-radius: 22px 15px 25px 17px; box-shadow: 4px 5px 0 color-mix(in srgb, var(--info-edge) 25%, transparent); backdrop-filter: none; }
.info-page :is(.card, .evidence-band > article, .faq > details):nth-child(4n+2) { --info-paper: #fff9df; --info-wash: #ffe78d; --info-edge: #d3b24c; --info-ink: #7c6021; border-radius: 17px 25px 16px 24px; }
.info-page :is(.card, .evidence-band > article, .faq > details):nth-child(4n+3) { --info-paper: #fff2ed; --info-wash: #ffd2c1; --info-edge: #d99b85; --info-ink: #995239; }
.info-page :is(.card, .evidence-band > article, .faq > details):nth-child(4n+4) { --info-paper: #edf7ff; --info-wash: #c7e5f9; --info-edge: #86b3ce; --info-ink: #36668a; border-radius: 17px 25px 16px 24px; }
.info-page .card { display: flex; flex-direction: column; padding: 27px; }
.info-page .card:hover { transform: none; }
.info-page .card p { margin-bottom: 22px; font-size: 16px; line-height: 1.8; }
.info-page .card .button { width: 100%; margin-top: auto; }
.info-page .card .button + .button { margin-top: 12px; }
.info-page .grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; margin-top: 34px; }
.collections-info .card::before { content: ""; display: block; width: 60px; height: 17px; flex-shrink: 0; margin-bottom: 22px; background: var(--info-wash); border-inline: 2px dashed #fff8; transform: rotate(-5deg); }

/* About: keep the original brand illustration inside a gentle paper frame. */
.about-info .hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr); gap: 60px; align-items: center; }
.about-info .hero-grid > div { min-width: 0; }
.about-info .hero-grid .button { margin-top: 26px; }
.about-info .logo-panel { position: relative; width: min(100%, 420px); justify-self: center; padding: 24px; background: #edf7ff; border: 2px solid #86b3ce; border-radius: 28px 21px 30px 23px; box-shadow: 5px 6px 0 #86b3ce25; transform: rotate(1deg); }
.about-info .logo-panel::before { content: ""; position: absolute; z-index: 1; top: -10px; left: calc(50% - 35px); width: 70px; height: 22px; background: #f6d664b0; transform: rotate(-6deg); }
.about-info .logo-panel img { display: block; width: 100%; height: auto; object-fit: contain; border: 0; border-radius: 6px; box-shadow: none; }

/* Démarche: readable body copy, distinguishable sources, unchanged links. */
.approach-info .story { padding: 30px; background: var(--home-paper); border: 2px solid #d5d9bf; border-radius: 26px 19px 28px 21px; }
.approach-info .evidence-band { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px; margin-block: 34px 28px; }
.approach-info .evidence-band > article { padding: 28px; }
.approach-info .evidence-band h2 { color: var(--info-ink); font-size: 28px; }
.approach-info .evidence-band p { font-size: 16px; line-height: 1.8; }
.approach-info .grid.benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 23px; }
.approach-info .grid.benefits .card { padding: 23px; }
.approach-info .grid.benefits .card p { margin-bottom: 0; font-size: 15px; }
.approach-info .sources { margin-top: 34px; padding: 30px; background: #edf7ff; border: 2px solid #86b3ce; border-radius: 24px 18px 27px 20px; box-shadow: 4px 5px 0 #86b3ce20; backdrop-filter: none; }
.approach-info .sources h2 { color: #36668a; font-size: 28px; }
.approach-info .sources ul { padding-left: 22px; margin-bottom: 0; color: var(--home-ink); }
.approach-info .sources li { margin-block: 12px; font-size: 15px; line-height: 1.8; }
.approach-info .sources li::marker { color: var(--home-blue); }
.approach-info .sources a { color: #236b92; font-weight: 600; text-underline-offset: 4px; }

/* FAQ uses native details/summary: keyboard access and no-JavaScript reading remain. */
.faq-info .seo-answer { padding: 28px 0 0; background: transparent; border: 0; }
.faq-info .seo-answer > .container { max-width: 900px; padding: 18px 23px; background: #edf7ff; border: 1px solid #a9c3d0; border-radius: 16px 21px 18px 20px; }
.faq-info .seo-answer p { color: var(--home-ink); font-size: 14px; font-weight: 400; line-height: 1.8; }
.faq-info .section { padding-top: 32px; }
.faq-info .section > .container { max-width: 900px; }
.faq-info .faq { gap: 18px; margin-top: 28px; }
.faq-info .faq details { padding: 12px 23px; }
.faq-info .faq summary { padding-block: 9px; min-height: 46px; color: var(--info-ink); font: 750 22px/1.45 var(--home-hand); cursor: pointer; }
.faq-info .faq summary::marker { color: var(--info-ink); }
.faq-info .faq details[open] summary { margin-bottom: 8px; }
.faq-info .faq details p { margin: 0 0 12px; padding-top: 12px; border-top: 1px dashed var(--info-edge); color: var(--home-ink); font-size: 16px; line-height: 1.8; }
.info-page main [id] { scroll-margin-top: 24px; }
@media (max-width: 1000px) {
  .info-page .grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-info .hero-grid { gap: 35px; }
  .approach-info .grid.benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .info-page .section { padding-block: 32px 38px; }
  .info-page main h1 { font-size: clamp(31px, 7vw, 38px); }
  .info-page .lead { font-size: 17px; }
  .info-page .story { font-size: 16px; }
  .about-info .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .about-info .logo-panel { width: min(90%, 330px); }
  .approach-info .evidence-band { grid-template-columns: minmax(0, 1fr); }
  .approach-info .story, .approach-info .sources, .approach-info .evidence-band > article { padding: 24px 21px; }
  .approach-info .evidence-band h2 { font-size: 26px; }
}
@media (max-width: 560px) {
  .info-page .grid.three, .approach-info .grid.benefits { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .info-page .card { padding: 24px; }
  .info-page .actions .button, .about-info .hero-grid .button { width: 100%; }
  .faq-info .faq details { padding-inline: 18px; }
  .faq-info .faq summary { font-size: 20px; }
  .faq-info .seo-answer > .container { padding: 18px 20px; }
}