/* ==========================================================================
   FunkyBreslev — page « Le label » (FR + EN, feuille partagée).
   Complément à home-fr.css / home-en.css : réutilise les tokens, la nav,
   le hero, les boutons et le footer. Ici : rythme des sections, ligne de
   repères, bandeau photo pleine largeur, liens plateformes.
   ========================================================================== */

.ll-hero h1 { white-space: normal; margin-top: 16px; }
.ll-hero .hero-copy { margin-top: 16px; }

.ll-section { padding: 52px 0; }
.ll-section .eyebrow { display: block; margin-bottom: 6px; }
.ll-section h2 { font-size: clamp(29px, 4.4vw, 42px); margin: 0 0 4px; }
.ll-section p { font-size: 17px; color: var(--muted); max-width: 640px; margin: 14px 0 0; }

/* Bloc de chiffres : réutilise .stats de home-*.css, resserré ici. */
.ll-section .stats { margin-top: 24px; }

/* Bandeau photo pleine largeur (traboule lyonnaise).
   .ll-band est enfant direct de <main> (pleine largeur) : width:100% suffit,
   pas de 100vw — qui déborderait de la largeur de la barre de défilement. */
.ll-band { position: relative; width: 100%; margin: 6px 0; }
.ll-band img {
  display: block; width: 100%; max-height: 460px; object-fit: cover;
  filter: grayscale(1) contrast(1.04);
}
.ll-band::before, .ll-band::after {
  content: ""; position: absolute; left: 0; right: 0; height: 96px; pointer-events: none;
}
.ll-band::before { top: 0; background: linear-gradient(var(--bg), transparent); }
.ll-band::after { bottom: 0; background: linear-gradient(transparent, var(--bg)); }

/* Liens dans le corps de texte */
.ll-section p a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.ll-section p a:hover { text-decoration-color: var(--gold); }

@media (max-width: 760px) {
  .ll-section { padding: 38px 0; }
  .ll-section p { font-size: 15.5px; }
  .ll-band img { max-height: 300px; }
}