/*
 * Home: the shared layout of the front page only. Each section brings its own home-<name>.css (loaded after this file).
 * Sections use the base components: <section class="section" id="…"> with a .container inside and a .section__head.
 * Rhythm: --section-y is 96 px from 1024, 64 px on tablets, 48 px on phones; two sections in a row share one gap.
 */
.home main { display: flow-root; }

/* The campaign opens right under the header. */
.home main > .section:first-child, .home main > .home-first { padding-top: var(--s-4); }
/* Desktops: the campaign card sits right under the header strip, as in the comp. */
@media (min-width: 1024px) { .home main > .section.campaign:first-child { padding-top: 0; } }
@media (max-width: 767px) { .home main > .section:first-child, .home main > .home-first { padding-top: var(--s-3); } }

/* A full-bleed mist band (for a section that needs its own ground, e.g. the showroom). Keeps both gaps. */
.section--band { background: var(--mist); padding-block: var(--section-y); }
.section--band + .section { padding-top: var(--section-y); }
.section + .section--band { margin-top: 0; }

/* Anchored sections (#packs, #showroom…) land under the tightened header, not behind it. */
.home main [id] { scroll-margin-top: calc(var(--header-tight) + var(--s-4)); }

/* The last section hands over to the footer's promises without a double gap. */
.home .foot { margin-top: 0; }
.home main > .section:last-child { padding-bottom: var(--section-y); }

/* Section heads on the home: the title, an optional one-line lead, tools (tabs, prev/next) and "Tout voir". */
.home .section__title { font-size: var(--text-2xl); }
.home .section__head--stack { display: grid; justify-content: stretch; align-items: start; }
@media (max-width: 767px) {
	.home .section__tools .nav-btns { display: none; } /* phones swipe the rails */
}