/* Home page closing sections: warm, spacious and readable. */
.home-page #comment{margin-top:65px;margin-bottom:65px;padding:54px 60px;background:#f8e8da;border:1px solid #eed8c5;border-radius:32px;grid-template-columns:1.15fr .85fr;gap:45px;color:var(--ink);box-shadow:0 12px 35px #76523b07}
.home-page #comment h2{font-size:clamp(34px,3.6vw,49px);line-height:1.12;max-width:16ch;margin:20px 0 30px}
.home-page #comment .eyebrow{color:#ac5138;font-size:12px}.home-page #comment .magic-short-steps{display:grid;gap:20px;margin:0 0 30px;padding:0;list-style:none}.home-page #comment .magic-short-steps li{display:flex;gap:16px;align-items:flex-start}.home-page #comment .magic-short-steps li>span{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:50%;background:#fff9f2;border:1px solid #e8c4a9;color:#ad5038;font-size:12px}.home-page #comment h3{font-size:19px;margin:0 0 5px}.home-page #comment li p{font-size:15px;line-height:1.6;color:#586b77}.home-page #comment .banner-note{font-size:12px;margin-top:14px;color:#6d777d}.home-page #comment .banner-art{display:grid;min-height:360px}.home-page #comment .magic-preview-scene{width:360px;min-height:370px}.home-page #comment .animation-preview-sheet{width:215px}
.home-page .faq{padding:24px 0 48px;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}.home-page .faq .faq-introduction{background:transparent;padding:20px 0;max-width:360px}.home-page .faq .faq-introduction h2{font-size:43px;max-width:12ch;margin:17px 0 20px}.home-page .faq .faq-introduction>p:last-child{font-size:16px;line-height:1.75}.home-page .faq-items{display:grid;gap:12px}.home-page .faq-items details{background:#fffdf8;border:1px solid #e8ded1;border-radius:16px;padding:0 22px;margin:0}.home-page .faq-items summary{padding:21px 32px 21px 0;font-size:16px;line-height:1.5}.home-page .faq-items summary:after{top:16px}.home-page .faq-items details[open]{border-color:#d8b9a4;background:#fffaf2}.home-page .faq-items details p{padding:0 15px 22px 0;font-size:15px;line-height:1.75}
.home-page .newsletter-invitation{max-width:calc(var(--page-width) - 2 * var(--page-gutter));margin:30px auto 55px;padding:44px 40px;background:#f2ece3;border:1px solid #e9ded1;border-radius:28px}.home-page .newsletter-invitation h2{font-size:36px;line-height:1.2;margin-bottom:15px}.home-page .newsletter-invitation p{font-size:16px;max-width:54ch;line-height:1.7;margin-bottom:24px}.home-page .newsletter-preview-row{max-width:570px}.home-page .newsletter-preview-row input{border-color:#d8cbbb}.home-page .newsletter-invitation small{margin-top:18px}
.home-page .site-contact{max-width:calc(var(--page-width) - 2 * var(--page-gutter));margin:0 auto 55px;padding:32px 0;text-align:center;border-top:1px solid #e6dfd5}.home-page .site-contact h2{font-size:32px;margin:15px 0}.home-page .site-contact p{font-size:16px}.home-page .site-contact .eyebrow{justify-content:center;font-size:11px}.home-page .site-contact a{color:#a34e36;text-decoration-thickness:1px;text-underline-offset:4px}
.home-page footer{background:#f2e9de;border-top:1px solid #e7dbcd;padding-top:40px;padding-bottom:30px;row-gap:20px}.home-page footer>nav:not(.legal-footer){gap:24px;flex-wrap:wrap;font-size:14px}.home-page footer .legal-footer{border-top:1px solid #e0d3c4;padding-top:20px;margin-top:10px;grid-column:1/-1;font-size:12px}
@media(max-width:1000px){.home-page #comment{padding:38px;gap:20px}.home-page #comment .magic-preview-scene{width:290px}.home-page .faq{gap:35px}.home-page .newsletter-invitation{margin-left:var(--page-gutter);margin-right:var(--page-gutter)}}
@media(max-width:700px){.home-page #comment{margin:35px 22px 40px;padding:30px 24px;grid-template-columns:1fr;gap:12px;border-radius:24px}.home-page #comment h2{font-size:35px;max-width:16ch}.home-page #comment .banner-art{min-height:270px;grid-row:2}.home-page #comment .magic-preview-scene{width:270px;min-height:280px}.home-page #comment .animation-preview-sheet{width:160px}.home-page #comment .magic-short-steps{gap:19px}.home-page .faq{display:block;padding:0 0 30px;margin:0 22px}.home-page .faq .faq-introduction{padding:0;max-width:none}.home-page .faq .faq-introduction h2{font-size:34px;max-width:none}.home-page .faq-items{margin-top:25px}.home-page .faq-items details{padding:0 17px}.home-page .faq-items summary{font-size:15px;padding-top:18px;padding-bottom:18px}.home-page .newsletter-invitation{margin:15px 22px 30px;padding:30px 22px;border-radius:24px;max-width:none}.home-page .newsletter-invitation h2{font-size:30px}.home-page .newsletter-preview-row{gap:10px}.home-page .site-contact{margin:0 22px 30px;max-width:none;padding:28px 0}.home-page .site-contact h2{font-size:29px}.home-page footer{padding:30px 22px}.home-page footer>nav:not(.legal-footer){justify-self:start;gap:12px 22px}.home-page footer .legal-footer{gap:15px}}

/* A lighter invitation and a closer FAQ introduction. */
.home-page #comment{background:transparent;border:0;box-shadow:none;padding:40px 55px;margin-top:45px;margin-bottom:50px;grid-template-columns:1fr 1fr;gap:55px;align-items:center}.home-page #comment h2{max-width:15ch;font-size:clamp(34px,3.4vw,46px);margin:18px 0 24px}.home-page #comment .animation-invitation-text{font-size:17px;line-height:1.8;color:#526777;max-width:39ch;margin-bottom:28px}.home-page #comment .banner-art{background:#f8eee3;border-radius:48% 48% 42% 42%;min-height:390px}.home-page #comment .animation-preview-sheet{width:210px}.home-page #comment .banner-note{margin-top:18px}.home-page .faq{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:45px;padding-left:55px;padding-right:55px}.home-page .faq .faq-introduction{justify-self:end;max-width:320px;padding-right:20px}.home-page .faq .faq-introduction h2{font-size:38px}.home-page .faq .faq-intro-text{max-width:29ch}
@media(max-width:1000px){.home-page #comment{padding:30px 24px;gap:30px}.home-page .faq{padding-left:24px;padding-right:24px;gap:30px}.home-page .faq .faq-introduction{padding-right:0}}
@media(max-width:700px){.home-page #comment{padding:15px 0 25px;margin:35px 22px 30px;grid-template-columns:1fr;gap:28px}.home-page #comment h2{font-size:35px;max-width:16ch}.home-page #comment .animation-invitation-text{font-size:16px;max-width:none}.home-page #comment .banner-art{min-height:300px;width:100%;max-width:370px;justify-self:center}.home-page #comment .animation-preview-sheet{width:175px}.home-page .faq{padding:0 12px 30px;gap:0}.home-page .faq .faq-introduction{max-width:none;padding:0}.home-page .faq .faq-introduction h2{font-size:32px}.home-page .faq .faq-intro-text{max-width:none}}

.home-page .faq .faq-introduction{justify-self:start;padding-right:20px}@media(max-width:700px){.home-page .faq{padding-left:0;padding-right:0}.home-page .faq .faq-introduction{padding-right:0}}

/* Both introductions share the previous inset FAQ alignment. */
.home-page #comment{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:45px}.home-page #comment .animation-invitation-copy,.home-page .faq .faq-introduction{width:100%;max-width:320px;justify-self:end;padding-right:20px}
@media(max-width:1000px){.home-page #comment{gap:30px}.home-page #comment .animation-invitation-copy,.home-page .faq .faq-introduction{padding-right:0}}
@media(max-width:700px){.home-page #comment{grid-template-columns:1fr}.home-page #comment .animation-invitation-copy,.home-page .faq .faq-introduction{max-width:none;justify-self:start}.home-page #comment{padding-left:12px;padding-right:12px}.home-page .faq{padding-left:12px;padding-right:12px}}

/* Larger animal drawings, no printed footer inside the demonstration sheet. */
.home-page .reference-hero-link{width:112%;max-width:740px;flex:none}
.home-page #comment{margin-top:20px;padding-top:25px}
.home-page #comment .banner-art{transform:translateY(-14px)}
.home-page #comment .animation-preview-sheet{width:240px;padding:0;aspect-ratio:778 / 946;overflow:hidden}
.home-page #comment .animation-preview-sheet img{display:block;width:100%;height:auto;max-width:none;transform:scale(1.04);transform-origin:50% 25%}
@media(max-width:700px){.home-page .reference-hero-link{width:160px;max-width:none}.home-page #comment{margin-top:20px;padding-top:5px}.home-page #comment .animation-preview-sheet{width:195px}.home-page #comment .banner-art{transform:translateY(-8px)}}
/* Gentle movement when the illustration is hovered. */
.home-page #comment .animation-preview-sheet{animation:none;transform:rotate(-3deg);transition:transform .5s ease,box-shadow .5s ease}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.home-page #comment .banner-art:hover .animation-preview-sheet{transform:translateY(-6px) rotate(1deg);box-shadow:0 18px 34px #65453422}}
.home-page .reference-hero-image{transition:transform .5s ease;transform-origin:50% 55%}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.home-page .reference-hero-link:hover .reference-hero-image{transform:translateY(-6px) rotate(1deg)}}

.home-page #comment::before,.home-page #comment::after{content:none;display:none}

.home-page .hero-description,.home-page #annonce-accueil p,.home-page .animation-invitation-text,.home-page .faq-items details p{text-align:justify;text-justify:inter-word;text-align-last:left;hyphens:auto}


.home-page .hero-description,.home-page #annonce-accueil p,.home-page .animation-invitation-text,.home-page .faq-items details p{hyphens:none;word-break:normal;overflow-wrap:normal}


body.home-page .hero-copy .hero-description,body.home-page #annonce-accueil p,body.home-page #comment .animation-invitation-text,body.home-page .faq-items details p{text-align:justify!important;text-align-last:left!important;hyphens:none!important;word-break:normal;overflow-wrap:normal}body.home-page .hero-copy .hero-description{width:100%;max-width:none!important}


body.home-page .hero-copy .hero-description{width:100%;max-width:var(--hero-title-width,100%)!important;box-sizing:border-box}@media(max-width:700px){body.home-page .hero{grid-template-areas:'eyebrow eyebrow' 'title title' 'description description' 'followup followup' 'art art' 'actions actions' 'note note'}body.home-page .hero-copy h1{width:100%}body.home-page .hero-art{justify-self:center;width:170px;height:160px}body.home-page .reference-hero-link{width:170px!important;max-width:100%}}


body.home-page .hero-copy .hero-description{width:min(100%,var(--hero-title-width,38rem))!important;max-width:min(100%,var(--hero-title-width,38rem))!important}



/* Mobile how-it-works equal spacing */
@media(max-width:700px){
  body.home-page #comment h2{
    margin-bottom:24px!important;
  }
  body.home-page #comment .animation-invitation-text{
    margin-top:0!important;
    margin-bottom:0!important;
  }
  body.home-page #comment .animation-invitation-copy>.button{
    margin-top:24px!important;
  }
}