/* Primitives partagées : reset, typographie, boutons, pictogrammes, formulaire,
   apparition au défilement. L'apparence des sections vit dans layout.css. */

*, *::before, *::after { box-sizing: border-box }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
body {
  margin: 0; font-family: var(--font-body); color: var(--ink); background: #fff;
  line-height: 1.6; font-size: 16.5px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; margin: 0; line-height: 1.15; text-wrap: balance; letter-spacing: -.015em }
p { margin: 0 }
a { color: inherit; text-decoration: none }
ul, ol { margin: 0; padding: 0; list-style: none }
dl, dd { margin: 0 }
img, svg { vertical-align: middle; max-width: 100% }
button, input, textarea, select { font: inherit; color: inherit }
table { border-collapse: collapse; width: 100% }
details summary { list-style: none }
details summary::-webkit-details-marker { display: none }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px }

.shell { width: min(1160px, calc(100% - 48px)); margin-inline: auto }

/* Pictogrammes */
.ico { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0 }
.ico--swiss { stroke: none }
.ico--sm { width: .9em; height: .9em }
.ico--chev { width: .85em; height: .85em; transform: rotate(90deg); margin-left: .25rem }

/* Boutons */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .8rem 1.35rem; border: 1px solid transparent; border-radius: var(--radius);
  background: var(--accent); color: #fff; font-size: .95rem; font-weight: 600; line-height: 1.2;
  cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 8px 24px -12px var(--accent);
}
.button:hover { background: var(--accent-ink); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 14px 30px -12px var(--accent) }
.button:active { transform: translateY(0) }
.button:disabled { opacity: .55; cursor: not-allowed; transform: none }
.button--lg { padding: 1rem 1.6rem; font-size: 1.02rem }
.button--sm { padding: .6rem 1rem; font-size: .86rem; box-shadow: none }
.button--ghost { background: transparent; color: var(--ink); border-color: var(--line); box-shadow: none }
.button--ghost:hover { background: var(--surface); color: var(--accent); border-color: var(--accent); box-shadow: none }
.button .ico { width: 1.1em; height: 1.1em; transition: transform .18s ease }
.button:hover .ico { transform: translateX(3px) }

.skip { position: absolute; left: 1rem; top: -100px; background: #fff; padding: 1rem; z-index: 50; border: 1px solid var(--accent); border-radius: var(--radius) }
.skip:focus { top: 1rem }
.preview-bar { margin: 0; padding: 6px 24px; text-align: center; font-size: .76rem; background: var(--deep); color: #fff }

.kicker { font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: .55rem }
.lead { color: var(--ink-soft); font-size: 1.14rem; line-height: 1.7 }

/* Formulaire */
.contact__card label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .9rem }
.contact__card input, .contact__card textarea {
  display: block; width: 100%; margin-top: .4rem; padding: .75rem .9rem; font-weight: 400;
  border: 1px solid var(--line); border-radius: calc(var(--radius) * .7); background: #fff; transition: border-color .15s, box-shadow .15s;
}
.contact__card input:focus, .contact__card textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); outline: none }
.contact__card textarea { resize: vertical; min-height: 120px }
.form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem }
.consent { display: flex; gap: .7rem; align-items: flex-start; font-size: .82rem; font-weight: 400; line-height: 1.5 }
.consent input { width: auto; margin: .25rem 0 0 }
.consent a { text-decoration: underline }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.form-status { margin-top: .8rem; font-size: .85rem; color: var(--ink-soft); min-height: 1.2em }
.table-wrap { overflow-x: auto }

/* Apparition au défilement */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1) }
[data-reveal].is-visible { opacity: 1; transform: none }
.grid[data-reveal].is-visible > *, .tiers[data-reveal].is-visible > *, .steps[data-reveal].is-visible > * { animation: rise .6s cubic-bezier(.2,.7,.2,1) backwards }
.grid[data-reveal].is-visible > :nth-child(2), .tiers[data-reveal].is-visible > :nth-child(2), .steps[data-reveal].is-visible > :nth-child(2) { animation-delay: .06s }
.grid[data-reveal].is-visible > :nth-child(3), .tiers[data-reveal].is-visible > :nth-child(3), .steps[data-reveal].is-visible > :nth-child(3) { animation-delay: .12s }
.grid[data-reveal].is-visible > :nth-child(4) { animation-delay: .18s }
@keyframes rise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }

@media (max-width: 700px) {
  body { font-size: 16px }
  .shell { width: calc(100% - 32px) }
  .form-pair { grid-template-columns: 1fr }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important }
  [data-reveal] { opacity: 1; transform: none }
}

/* Accroche de categorie : la phrase en clair qui dit ce que c'est, avant le titre. */
.hero__what { font-size: 1.08rem; font-weight: 650; color: var(--ink); margin: .9rem 0 .2rem; max-width: 34rem; line-height: 1.4 }
.hero__what::before { content: ""; display: inline-block; width: 1.6rem; height: 3px; background: var(--accent); vertical-align: middle; margin-right: .6rem; border-radius: 2px }