/* Appel final (bande de marque, motif de nœuds animé) et pied de page. */
.final { position: relative; overflow: clip; padding-block: 88px; background: var(--marque); color: var(--sur-marque); }
.final-motif { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.final-motif .m-fil { fill: none; stroke: color-mix(in srgb, var(--sur-marque) 22%, transparent); stroke-width: 1.5; }
.final-motif .m-noeud { fill: color-mix(in srgb, var(--sur-marque) 30%, transparent); }
.final-motif .m-pouls { fill: none; stroke: var(--sur-marque); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 6 300; stroke-dashoffset: 6; visibility: hidden; }
.final .conteneur { position: relative; }
.final h2 { max-width: 18ch; text-wrap: balance; font-size: clamp(2.25rem, 5vw, 4rem); letter-spacing: -0.03em; }
.final .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.final .bouton-plein { background: var(--sur-marque); border-color: var(--sur-marque); color: var(--marque); }
.final .bouton-plein:hover { background: var(--teinte); border-color: var(--teinte); color: var(--marque-profond); }
.final .bouton-contour { background: transparent; border-color: var(--sur-marque); color: var(--sur-marque); }
.final .bouton-contour:hover { background: var(--marque-profond); border-color: var(--sur-marque); color: var(--sur-marque); }
.final :focus-visible { outline-color: var(--sur-marque); }
@media (min-width: 1024px) { .final { padding-block: 128px; } }
@media (prefers-reduced-motion: no-preference) {
  .final-motif .m-pouls { visibility: visible; animation: circule 3.4s linear infinite; }
  .final-motif .m-pouls:nth-of-type(2n) { animation-duration: 4.2s; animation-delay: 1s; } .final-motif .m-pouls:nth-of-type(3n) { animation-duration: 3s; animation-delay: 1.8s; }
}

.pied { padding-block: 56px 32px; border-top: 1px solid var(--trait); background: var(--surface); color: var(--texte-attenue); }
.pied-grille { display: grid; grid-template-columns: 1fr; gap: 32px; }
.pied-marque .logo { display: inline-block; margin: 0 0 16px; }
.pied-marque .logo-svg { width: 172px; height: 32px; }
.pied-marque p { max-width: 36ch; }
.pied-titre { margin-bottom: 8px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte-attenue); }
.pied li a { display: flex; align-items: center; min-height: 44px; color: var(--texte); text-decoration: none; }
.pied li a:hover { color: var(--marque-texte); text-decoration: underline; }
.pied-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--trait); }
.pied-outils { display: flex; align-items: center; gap: 12px; }
@media (min-width: 560px) { .pied-grille { grid-template-columns: 1fr 1fr; } .pied-marque { grid-column: 1 / -1; } }
@media (min-width: 900px) { .pied-grille { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; } .pied-marque { grid-column: auto; } .pied li a { min-height: 32px; } }