/* Simulateur facturation : socle de la page (compléments de charte, boutons, fiche PDF).
   Les jetons et les polices du site sont chargés par la page elle-même. */
@import url('./fiche.css');

:root {
  --lilas: #B08CFF;
  --lilas-doux: #b7a3e4;
  --violet-sig: #6541c8;
  --orange-sig: #D13C00;
  --soft: #f7f5fb;
  --ligne: #ded7e9;
  --wrap: 1280px;
  --g: var(--propul-gouttiere);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
body { margin: 0; background: var(--fond); color: var(--encre); font: 400 var(--fs-body)/var(--lh-body) var(--font-corps); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }

.wrap { width: min(var(--wrap), 100% - 2 * var(--g)); margin-inline: auto; }
.serif { font-family: var(--font-display); font-weight: 700; letter-spacing: -.015em; }
.label { display: inline-flex; align-items: center; gap: 10px; font: 500 var(--fs-label)/var(--lh-label) var(--font-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--texte-2); }
.label::before { content: ''; width: 8px; height: 8px; background: var(--violet); flex: none; }
.label--orange::before { background: var(--orange-texte); }
.label--nu::before { display: none; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: var(--r-bouton); border: 1px solid var(--violet); background: var(--violet); color: #fff; font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer; transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.btn:hover { background: color-mix(in srgb, var(--violet) 86%, var(--encre)); }
.btn:active { transform: translateY(1px); }
.btn--contour { background: #fff; color: var(--encre); border-color: var(--filet); }
.btn--contour:hover { background: var(--soft); }
.btn--clair { background: #fff; color: var(--encre); border-color: #fff; }
.btn--clair:hover { background: var(--soft); }

.grille-fond { background-image: linear-gradient(var(--grille) 1px, transparent 1px), linear-gradient(90deg, var(--grille) 1px, transparent 1px); background-size: 48px 48px; }