/* =========================================== BADGES Bandeau de 5 badges de confiance sur fond menthe. Layout : flex wrap centré → 5 en ligne (desktop), 3+2 (tablet), 2+2+1 (mobile). Tous les icônes sont alignés sur la même baseline (bottom du wrapper). =========================================== */ .badges { background-color: var(--color-mint); padding: 100px 20px; } .badges__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 50px; max-width: 1400px; margin: 0 auto; padding: 0; list-style: none; } .badge { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 25px; width: 200px; /* Force des badges de hauteur uniforme malgré les textes de longueurs différentes (ex : "Toulouse-Ouest" sur 1 ligne vs "Agréée Services à la Personne" sur 2 lignes). */ min-height: 245px; } /* Wrapper de l'icône : hauteur fixe avec icône alignée en bas pour que toutes les mains "reposent" sur la même ligne. */ .badge__icon-wrapper { width: 200px; height: 160px; display: flex; align-items: flex-end; justify-content: center; } .badge__icon { display: block; width: auto; } /* Tailles par badge (height ; width: auto preserve le ratio). Valeurs issues exactement de Figma. */ .badge--love .badge__icon { height: 160px; } .badge--refund .badge__icon { height: 96px; } .badge--professionnal .badge__icon { height: 137px; } .badge--localisation .badge__icon { height: 134px; } .badge--happy-client .badge__icon { height: 148px; } .badge__text { font-size: 20px; font-weight: var(--fw-regular); line-height: 30px; text-align: center; color: var(--color-text); margin: 0; } /* ============================ MOBILE (< 768px) ============================ */ @media (max-width: 767px) { .badges { padding: 60px 20px; } .badges__list { gap: 20px; } .badge { width: 150px; gap: 20px; min-height: 203px; } .badge__icon-wrapper { width: 150px; height: 130px; } .badge--love .badge__icon { height: 130px; } .badge--refund .badge__icon { height: 83px; } .badge--professionnal .badge__icon { height: 127px; } .badge--localisation .badge__icon { height: 121px; } .badge--happy-client .badge__icon { height: 130px; } .badge__text { font-size: 16px; line-height: 24px; } } /* Reveal au scroll : chaque badge glisse depuis la gauche (-30px) avec fade. Stagger 100ms entre les 5 cartes. Déclenché par .is-visible ajouté par js/reveal.js via IntersectionObserver. */ @keyframes badge-reveal { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } /* Scoped sous .js : si JS désactivé/cassé, les badges restent visibles par défaut (pas de classe .js sur ). */ .js .badges[data-reveal] .badge { opacity: 0; } .badges.is-visible .badge { animation: badge-reveal 600ms cubic-bezier(0.22, 1, 0.36, 1) forwards; } .badges.is-visible .badge:nth-child(1) { animation-delay: 0ms; } .badges.is-visible .badge:nth-child(2) { animation-delay: 100ms; } .badges.is-visible .badge:nth-child(3) { animation-delay: 200ms; } .badges.is-visible .badge:nth-child(4) { animation-delay: 300ms; } .badges.is-visible .badge:nth-child(5) { animation-delay: 400ms; } @media (prefers-reduced-motion: reduce) { .badges[data-reveal] .badge, .badges.is-visible .badge { opacity: 1; animation: none; } }