/* Accueil : hero avec ruban, manifeste, sommaire des services, preuve, formats, contact. */
.hero { position: relative; overflow: hidden; min-height: calc(100svh - 80px); display: grid; align-content: start; }
@media (max-width: 720px) { .hero { min-height: calc(100svh - 68px); } }
.hero canvas, .hero-fallback { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* Le ruban se fond dans le blanc avant le bas du hero : pas de coupure nette. */
.hero canvas { -webkit-mask-image: linear-gradient(#000 72%, transparent 100%); mask-image: linear-gradient(#000 72%, transparent 100%); }
.hero-fallback { display: none; background: radial-gradient(60% 50% at 78% 70%, rgba(217, 119, 6, .22), transparent 70%); }
.hero.no-gl .hero-fallback { display: block; }
.hero.no-gl canvas { display: none; }
.hero .claim { position: relative; z-index: 1; width: 100%; padding-block: clamp(40px, 7vw, 96px) clamp(48px, 30vh, 300px); display: grid; gap: clamp(28px, 4vw, 48px); }
.hero h1 { font-size: clamp(42px, 7.2vw, 96px); line-height: 0.98; letter-spacing: -0.035em; max-width: 12ch; }
.hero .sub { font-size: clamp(17px, 1.6vw, 21px); color: var(--ink-2); max-width: 44ch; }

/* Pas de filet sous le hero : le ruban fondu suffit comme transition. */
.manifesto { border-top: 0; }
.manifesto .wrap { padding-block: clamp(56px, 9vw, 128px); }
.manifesto p { font-weight: 500; font-size: clamp(26px, 4.6vw, 60px); line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; max-width: 26ch; }
.manifesto p + p { margin-top: 1em; color: var(--ink-2); font-weight: 400; font-size: clamp(18px, 2vw, 26px); letter-spacing: -0.015em; line-height: 1.3; max-width: 44ch; }

.proof-line { border-top: 1px solid var(--line); }
.proof-line .wrap { padding-block: 26px; display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: baseline; color: var(--ink-2); }
.proof-line strong { color: var(--ink); font-weight: 500; }
.proof-line a { text-decoration: none; color: var(--amber-ink); }

.methode .formats-door { margin-top: 12px; }
.methode .formats-door:first-of-type { margin-top: 0; }

.contact .wrap { display: grid; gap: 36px; }
@media (min-width: 860px) { .contact .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 64px; align-items: start; } }
.contact .side p { margin-top: 18px; color: var(--ink-2); max-width: 40ch; }