/* ── RYTHME VERTICAL ──
   Trois écarts seulement, mesurés de contenu à contenu (hero → logos : jusqu’à la 1re rangée de logos) :
   entre deux sections  : 208 / 176 / 112 px (desktop / tablette / mobile)
   autour du bandeau    : 128 /  96 /  64 px
   titre → contenu      :  96 /  72 /  48 px */
.proc { scroll-margin-top: 0; }
.contact-sec { min-height: 0; align-items: start; }
@media (min-width: 1200px) {
	.hj { padding-bottom: 240px; }
	.proc .svc-header { margin-bottom: 96px; }
	.proc { padding-bottom: 128px; }
	.fit-sec { padding-top: 190px; padding-bottom: 0; }
	.contact-sec__inner { padding-top: 208px; padding-bottom: 253px;   /* 208px sous la calanque, qui dépasse du portrait */ }
}
@media (min-width: 768px) and (max-width: 1199px) {
	.hj { padding-bottom: 184px; }
	.marques__header { padding-top: 45px; }
	.proc { padding-top: 53px; }
	.proc .svc-header { margin-bottom: 72px; }
	.proc .proc-steps { padding-top: 40px; }
	.proc { padding-bottom: 96px; }
	.fit-sec { padding-top: 104px; padding-bottom: 0; }
	.contact-sec__inner { padding-top: 176px; padding-bottom: 221px; }
}
@media (max-width: 767px) {
	.proc { padding-top: 72px; }
	.proc .svc-header { margin-bottom: 48px; }
	.proc { padding-bottom: 64px; }
}

/* Le swoosh du hero déborde un peu sur la section suivante : il passe au-dessus */
.hj { z-index: 2; }
.marques { z-index: 1; }
@media (max-width: 767px) { .hj { padding-bottom: 144px; } }
/* Sous le bandeau en arc : plus d'air, l'arc paraît plus bas que sa boîte */
@media (max-width: 767px) { .fit-sec { padding-top: 104px; } }
@media (max-width: 767px) { .contact-sec__inner { padding-bottom: 96px; } }   /* + la ligne de statut « copié » = 112px */