body {
  background-color: var(--background);
  background-image:
    radial-gradient(color-mix(in oklch, var(--foreground) 4%, transparent) 1px, transparent 1px),
    radial-gradient(color-mix(in oklch, var(--primary) 3%, transparent) 1px, transparent 1px);
  background-size: 7px 7px, 11px 11px;
  background-position: 0 0, 3px 5px;
}

h1, h2, h3 { font-family: var(--font-heading); }
em { font-style: italic; }

.c-nav__logo { font-family: var(--font-display); font-style: italic; font-weight: 400; letter-spacing: .02em; }
.c-nav { background: color-mix(in oklch, var(--background) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }

.hero-ligne { padding-top: clamp(6rem, 22vh, 14rem); padding-bottom: clamp(3rem, 8vw, 6rem); }
.hero-ligne h1 {
  max-width: 22ch;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.015em;
  text-wrap: balance;
  margin-bottom: 1.75rem;
}
.hero-ligne h1 em { color: var(--primary); }
.hero-ligne__visuel { margin-top: clamp(4rem, 12vw, 9rem); }
.hero-ligne__visuel .c-media { --ratio: 16 / 8; }

.forme-arche { border-radius: 50vw 50vw var(--radius-lg) var(--radius-lg) / 22vw 22vw var(--radius-lg) var(--radius-lg); }
.c-citation .forme-arche { border-radius: 999px 999px var(--radius-lg) var(--radius-lg); }

.c-lien { position: relative; text-decoration: none; }
.c-lien::after { content: ""; position: absolute; left: 0; right: 0; bottom: .55em; height: 1px; background: currentColor; transform-origin: left; transition: transform var(--duration) var(--ease); }
.c-lien:hover::after { transform: scaleX(.35); }

.c-marquee__piste li { font-style: italic; font-weight: 400; color: var(--secondary); }

.c-tete h2 { font-weight: var(--weight-heading); }
.note-tva { margin-top: 2.5rem; font-size: var(--text-small); font-style: italic; color: var(--muted-foreground); }

.c-onglets__panneau p { margin-top: 1.25rem; max-width: 52ch; color: var(--muted-foreground); }

.c-citation blockquote p { font-style: italic; font-weight: 400; }

.c-champ input, .c-champ textarea, .c-champ select {
  border: 0;
  border-bottom: 1px solid var(--input);
  border-radius: 0;
  background: transparent;
  padding-inline: 0;
}
.c-champ input:focus-visible, .c-champ textarea:focus-visible { box-shadow: 0 1px 0 0 var(--ring); }
.c-coordonnees dt { font-style: italic; color: var(--muted-foreground); }

.message { max-width: var(--space-container); margin: 1rem auto 0; padding: 1rem 1.25rem; border-radius: var(--radius-md); border: 1px solid color-mix(in oklch, var(--success) 40%, transparent); background: color-mix(in oklch, var(--success) 10%, var(--background)); }
.message-erreur { border-color: color-mix(in oklch, var(--error) 40%, transparent); background: color-mix(in oklch, var(--error) 10%, var(--background)); }

.page-simple { padding-block: clamp(5rem, 14vw, 9rem); }
.page-simple h1 { font-size: var(--text-h1); font-weight: 400; margin-bottom: 1.5rem; }

@media (max-width: 640px) {
  .hero-ligne__visuel .c-media { --ratio: 4 / 5; }
  .forme-arche { border-radius: 999px 999px var(--radius-lg) var(--radius-lg); }
}