/* ==========================================================================
   La Taxe TDAH — Site compagnon
   Design system : palette du livre (ocre/ambre/crème/rouge) + Cormorant/Libre Baskerville
   Accessibilité WCAG AAA · Mobile-first · prefers-reduced-motion
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */
:root {
  /* Palette du livre (dérivée de la couverture "Le reçu déchiré") */
  --ocre:        #b8860b;  /* ocre/ambre — primaire */
  --ocre-fonce:  #7a5a08;  /* ambre profond — texte sur crème (AAA) */
  --ocre-clair:  #e8c46a;  /* ambre clair — fonds, accents */
  --ocre-tres-clair: #fdf3d6; /* ambre très clair — fonds de section */

  --creme:       #faf6ed;  /* papier crème — fond principal */
  --creme-ombre: #f2ebd9;  /* crème ombré — cartes, sections alternées */
  --creme-bord:  #e3d9bf;  /* bordure chaude */

  --encre:       #222222;  /* gris foncé — texte principal */
  --encre-doux:  #4a4036;  /* brun-gris — texte secondaire */
  --encre-mute:  #6b6155;  /* texte tertiaire, captions */

  --rouge:       #c0392b;  /* rouge pénalités — accent */
  --rouge-fonce: #8e2a1f;  /* rouge profond — texte/CTA (AAA sur crème) */
  --rouge-clair: #f4d6d2;  /* rouge pâle — fonds d'alerte */

  --vert:        #2d6a4f;  /* vert — succès, économies */
  --vert-clair:  #d8e8de;

  /* Tokens sémantiques */
  --bg:          var(--creme);
  --bg-alt:      var(--creme-ombre);
  --bg-surface:  #fffdf8;  /* surface de carte, légèrement plus claire que le fond */
  --bg-highlight: var(--ocre-tres-clair);
  --bg-alert:    var(--rouge-clair);
  --bg-success:  var(--vert-clair);

  --text:        var(--encre);
  --text-soft:   var(--encre-doux);
  --text-mute:   var(--encre-mute);
  --text-invert: #fffdf8;

  --link:        var(--ocre-fonce);
  --link-hover:  #5a4106;

  --border:      var(--creme-bord);
  --border-strong: #c9bc97;

  --primary:     var(--ocre-fonce);   /* pour fonds de boutons (contraste AAA) */
  --primary-hover: #5a4106;
  --accent:      var(--rouge-fonce);
  --accent-hover: #6e1f17;

  /* Typographie */
  --font-titre:  'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-corps:  'Libre Baskerville', Georgia, 'Times New Roman', serif;

  /* Échelle typographique (fluid, mobile-first) */
  --fs-300: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);   /* 13-14px captions */
  --fs-400: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);        /* 16-17px corps */
  --fs-500: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);      /* 18-20px lead */
  --fs-600: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);      /* 22-28px h3 */
  --fs-700: clamp(1.75rem, 1.5rem + 1.2vw, 2.75rem);        /* 28-44px h2 */
  --fs-800: clamp(2.25rem, 1.75rem + 2.4vw, 4rem);          /* 36-64px h1 hero */
  --fs-display: clamp(2.75rem, 2rem + 3.5vw, 5.5rem);       /* titre hero géant */

  /* Espacement (échelle 4px) */
  --sp-1: 0.25rem;   /* 4 */
  --sp-2: 0.5rem;    /* 8 */
  --sp-3: 0.75rem;   /* 12 */
  --sp-4: 1rem;      /* 16 */
  --sp-5: 1.5rem;    /* 24 */
  --sp-6: 2rem;      /* 32 */
  --sp-7: 3rem;      /* 48 */
  --sp-8: 4rem;      /* 64 */
  --sp-9: 6rem;      /* 96 */

  /* Layout */
  --maxw: 72rem;      /* contenu principal */
  --maxw-prose: 44rem; /* colonne de lecture */
  --maxw-wide: 84rem;

  /* Rayons, ombres */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(34, 34, 34, 0.06), 0 1px 3px rgba(34, 34, 34, 0.04);
  --shadow:    0 4px 12px rgba(122, 90, 8, 0.10), 0 2px 4px rgba(34, 34, 34, 0.04);
  --shadow-lg: 0 12px 32px rgba(122, 90, 8, 0.15), 0 4px 8px rgba(34, 34, 34, 0.06);

  /* Focus ring */
  --focus-ring: 3px solid var(--ocre-fonce);
  --focus-offset: 2px;

  /* Transitions */
  --t-fast: 150ms ease-out;
  --t-base: 220ms ease-out;
  --t-slow: 350ms ease-out;
}

/* ---------- 2. Reset minimal ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font-corps);
  font-size: var(--fs-400);
  line-height: 1.65;
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

img, picture, svg, video {
  max-width: 100%;
  height: auto;
  display: block;
}

input, button, textarea, select { font: inherit; color: inherit; }

a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }

/* ---------- 3. Focus & accessibilité ---------- */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--ocre-fonce);
  color: var(--text-invert);
  padding: var(--sp-3) var(--sp-4);
  z-index: 1000;
  text-decoration: none;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { top: 0; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 4. Typographie ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-titre);
  font-weight: 600;
  line-height: 1.15;
  color: var(--encre);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-800); font-weight: 700; }
h2 { font-size: var(--fs-700); }
h3 { font-size: var(--fs-600); }
h4 { font-size: var(--fs-500); font-weight: 600; }

p { max-width: 70ch; }
.lead { font-size: var(--fs-500); line-height: 1.5; color: var(--text-soft); }

.titre-erreur { color: var(--rouge-fonce); }   /* chiffres de pénalités */
.titre-ocre   { color: var(--ocre-fonce); }
.center { text-align: center; }

.citation {
  font-family: var(--font-titre);
  font-style: italic;
  font-size: var(--fs-600);
  line-height: 1.35;
  color: var(--ocre-fonce);
  border-left: 4px solid var(--ocre-clair);
  padding: var(--sp-2) var(--sp-5);
  margin: var(--sp-5) 0;
  max-width: 60ch;
}

.small { font-size: var(--fs-300); color: var(--text-mute); }

/* ---------- 5. Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}
.container-prose { max-width: var(--maxw-prose); }
.container-wide { max-width: var(--maxw-wide); }

.section { padding-block: var(--sp-8); }
.section--alt { background: var(--bg-alt); }
.section--highlight { background: var(--bg-highlight); }
.section--tight { padding-block: var(--sp-6); }

.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-5); }
.stack-xl > * + * { margin-top: var(--sp-7); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}
.cluster--center { justify-content: center; }
.cluster--between { justify-content: space-between; }

.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }

main { flex: 1 0 auto; }

/* ---------- 6. Header / navigation ---------- */
.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: saturate(1.1) blur(8px);
  background: rgba(250, 246, 237, 0.92);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
  flex-wrap: wrap;
}
.brand {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: var(--fs-500);
  color: var(--ocre-fonce);
  text-decoration: none;
  line-height: 1.1;
}
.brand:hover { color: var(--link-hover); }
.brand small {
  display: block;
  font-family: var(--font-corps);
  font-size: var(--fs-300);
  font-weight: 400;
  color: var(--text-mute);
  letter-spacing: 0.02em;
}

.nav {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  align-items: center;
}
.nav a {
  color: var(--text-soft);
  text-decoration: none;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-400);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: background var(--t-fast), color var(--t-fast);
}
.nav a:hover { background: var(--ocre-tres-clair); color: var(--ocre-fonce); }
.nav a[aria-current="page"] {
  color: var(--ocre-fonce);
  font-weight: 700;
  border-bottom: 2px solid var(--ocre);
}

/* ---------- 7. Boutons / CTA ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-corps);
  font-size: var(--fs-500);
  font-weight: 700;
  line-height: 1.2;
  padding: var(--sp-3) var(--sp-5);
  min-height: 52px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--t-fast), background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  text-align: center;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--ocre-fonce);
  color: var(--text-invert);
  box-shadow: var(--shadow);
}
.btn--primary:hover { background: var(--primary-hover); color: var(--text-invert); }

.btn--accent {
  background: var(--rouge-fonce);
  color: var(--text-invert);
  box-shadow: var(--shadow);
}
.btn--accent:hover { background: var(--accent-hover); color: var(--text-invert); }

.btn--secondary {
  background: transparent;
  color: var(--ocre-fonce);
  border-color: var(--ocre);
}
.btn--secondary:hover { background: var(--ocre-tres-clair); }

.btn--ghost {
  background: transparent;
  color: var(--text-soft);
  border-color: var(--border-strong);
}
.btn--ghost:hover { background: var(--bg-alt); color: var(--text); border-color: var(--ocre); }

.btn--lg { font-size: var(--fs-500); padding: var(--sp-4) var(--sp-6); min-height: 56px; }
.btn--sm { font-size: var(--fs-400); padding: var(--sp-2) var(--sp-4); min-height: 44px; }
.btn--block { display: flex; width: 100%; }

.cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}
.cta-group--center { justify-content: center; }

/* ---------- 8. Cartes ---------- */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-base), transform var(--t-base);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.card:hover { box-shadow: var(--shadow); }

.card__icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ocre-tres-clair);
  color: var(--ocre-fonce);
  border-radius: var(--radius);
  flex-shrink: 0;
}
.card__icon svg { width: 28px; height: 28px; }

.card__title {
  font-family: var(--font-titre);
  font-size: var(--fs-500);
  font-weight: 600;
  color: var(--encre);
  line-height: 1.2;
}
.card__title .num {
  color: var(--rouge-fonce);
  font-variant-numeric: tabular-nums;
}
.card__desc {
  font-size: var(--fs-400);
  color: var(--text-soft);
  line-height: 1.55;
}
.card__footer { margin-top: auto; padding-top: var(--sp-3); }

/* Carte poste de taxe (accueil) */
.card--poste {
  border-top: 4px solid var(--ocre);
}
.card--poste.is-penalty { border-top-color: var(--rouge); }

/* Carte template */
.card--template {
  border-left: 4px solid var(--ocre);
}
.card--template .template-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  background: var(--ocre-fonce);
  color: var(--text-invert);
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: var(--fs-500);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ---------- 9. Hero ---------- */
.hero {
  background: linear-gradient(180deg, var(--ocre-tres-clair) 0%, var(--bg) 100%);
  padding-block: var(--sp-8) var(--sp-7);
  border-bottom: 1px solid var(--border);
}
.hero__inner {
  display: grid;
  gap: var(--sp-7);
  align-items: center;
}
.hero__eyebrow {
  display: inline-block;
  font-family: var(--font-corps);
  font-size: var(--fs-300);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rouge-fonce);
  margin-bottom: var(--sp-3);
}
.hero__title {
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1.02;
  color: var(--encre);
  margin-bottom: var(--sp-2);
}
.hero__subtitle {
  font-family: var(--font-titre);
  font-style: italic;
  font-size: var(--fs-600);
  color: var(--ocre-fonce);
  font-weight: 500;
  margin-bottom: var(--sp-4);
}
.hero__tagline {
  font-size: var(--fs-500);
  color: var(--text-soft);
  max-width: 52ch;
  margin-bottom: var(--sp-5);
  line-height: 1.5;
}
.hero__tagline strong { color: var(--rouge-fonce); font-weight: 700; }

.hero__image {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  background: var(--bg-alt);
  aspect-ratio: 2 / 3;            /* ratio portrait = couverture de livre */
  border: 1px solid var(--border);
  max-width: 28rem;               /* plafond de largeur pour pas exploser sur desktop */
  margin-inline: auto;            /* centrée sur mobile */
  width: 100%;
}
.hero__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;            /* AFFICHE LA COUVERTURE EN ENTIER, sans rogner */
  object-position: center;
}

@media (min-width: 56rem) {
  .hero__inner {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--sp-8);
  }
}

/* ---------- 10. Questionnaire ---------- */
.quiz-section {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
  box-shadow: var(--shadow-sm);
}
.quiz-section__header {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--sp-3);
}
.quiz-section__num {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ocre-fonce);
  color: var(--text-invert);
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: var(--fs-500);
  border-radius: 50%;
}
.quiz-section__title {
  font-family: var(--font-titre);
  font-size: var(--fs-600);
  font-weight: 600;
  color: var(--encre);
  line-height: 1.2;
}
.quiz-section__subtitle {
  font-size: var(--fs-300);
  color: var(--text-mute);
  margin-top: var(--sp-1);
}
.quiz-section__subtotal {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--border-strong);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.quiz-section__subtotal-label {
  font-family: var(--font-corps);
  font-weight: 700;
  color: var(--text-soft);
  font-size: var(--fs-400);
}
.quiz-section__subtotal-value {
  font-family: var(--font-titre);
  font-size: var(--fs-600);
  font-weight: 700;
  color: var(--ocre-fonce);
  font-variant-numeric: tabular-nums;
}

.field {
  display: grid;
  gap: var(--sp-1);
  margin-bottom: var(--sp-3);
}
.field__label {
  font-size: var(--fs-400);
  font-weight: 700;
  color: var(--text);
}
.field__hint {
  font-size: var(--fs-300);
  color: var(--text-mute);
  line-height: 1.4;
}
.input-group {
  display: flex;
  align-items: center;
  background: var(--bg);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--t-fast);
  max-width: 22rem;
}
.input-group:focus-within { border-color: var(--ocre-fonce); }
.input-group__prefix {
  padding-inline: var(--sp-3);
  color: var(--text-mute);
  font-weight: 700;
  background: var(--bg-alt);
  align-self: stretch;
  display: flex;
  align-items: center;
}
.input-group input {
  flex: 1;
  border: none;
  background: transparent;
  padding: var(--sp-3) var(--sp-3);
  font-size: var(--fs-500);
  font-variant-numeric: tabular-nums;
  min-height: 48px;
  width: 100%;
}
.input-group input:focus { outline: none; }
.input-group input::-webkit-outer-spin-button,
.input-group input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.input-group input[type=number] { -moz-appearance: textfield; }

/* Bandeau total */
.total-banner {
  background: var(--ocre-fonce);
  color: var(--text-invert);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-6);
  text-align: center;
  box-shadow: var(--shadow-lg);
  margin-block: var(--sp-6);
}
.total-banner__label {
  font-size: var(--fs-400);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.85;
  font-weight: 700;
}
.total-banner__value {
  font-family: var(--font-titre);
  font-size: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  margin-block: var(--sp-2);
  font-variant-numeric: tabular-nums;
}
.total-banner__hint {
  font-size: var(--fs-400);
  opacity: 0.9;
  max-width: 50ch;
  margin-inline: auto;
}

/* Comparaison 90 jours */
.compare-box {
  background: var(--bg-highlight);
  border: 2px solid var(--ocre-clair);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  margin-block: var(--sp-5);
}
.compare-result {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-4);
  text-align: center;
}
.compare-result__item {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-3);
}
.compare-result__label { font-size: var(--fs-300); color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
.compare-result__value { font-family: var(--font-titre); font-size: var(--fs-600); font-weight: 700; font-variant-numeric: tabular-nums; margin-top: var(--sp-1); }
.compare-result__value.is-down { color: var(--vert); }
.compare-result__value.is-up { color: var(--rouge-fonce); }

/* Encadré bienveillant */
.kind-box {
  background: var(--bg-highlight);
  border-left: 4px solid var(--ocre);
  border-radius: var(--radius);
  padding: var(--sp-5);
  margin-block: var(--sp-6);
  font-family: var(--font-titre);
  font-style: italic;
  font-size: var(--fs-600);
  line-height: 1.3;
  color: var(--ocre-fonce);
  text-align: center;
}

/* ---------- 11. Footer ---------- */
.site-footer {
  background: var(--encre);
  color: #e3d9bf;
  padding-block: var(--sp-7) var(--sp-5);
  margin-top: auto;
  flex-shrink: 0;
}
.site-footer a { color: var(--ocre-clair); }
.site-footer a:hover { color: #fff; }
.site-footer__inner {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  .site-footer__inner { grid-template-columns: 1.5fr 1fr 1fr; }
}
.site-footer__brand {
  font-family: var(--font-titre);
  font-size: var(--fs-600);
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--sp-2);
}
.site-footer h4 {
  color: var(--ocre-clair);
  font-size: var(--fs-400);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-3);
}
.site-footer ul { list-style: none; padding: 0; }
.site-footer li { margin-bottom: var(--sp-2); font-size: var(--fs-400); }
.site-footer__bottom {
  border-top: 1px solid #4a4036;
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  font-size: var(--fs-300);
  color: #a99e85;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-3);
}

/* ---------- 12. Divers ---------- */
.tag {
  display: inline-block;
  font-size: var(--fs-300);
  font-weight: 700;
  padding: var(--sp-1) var(--sp-3);
  border-radius: 999px;
  background: var(--ocre-tres-clair);
  color: var(--ocre-fonce);
  letter-spacing: 0.02em;
}
.tag--penalty { background: var(--rouge-clair); color: var(--rouge-fonce); }
.tag--success { background: var(--vert-clair); color: var(--vert); }

.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin-block: var(--sp-6);
}

.disclaimer {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-300);
  color: var(--text-soft);
  line-height: 1.5;
}

.note-callout {
  background: var(--bg-highlight);
  border: 1px solid var(--ocre-clair);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
  margin-block: var(--sp-4);
}

/* Liste numérique décorée */
.ol-styled { counter-reset: item; list-style: none; padding-left: 0; }
.ol-styled > li {
  counter-increment: item;
  position: relative;
  padding-left: 2.75rem;
  margin-bottom: var(--sp-3);
}
.ol-styled > li::before {
  content: counter(item);
  position: absolute;
  left: 0;
  top: 0;
  width: 2rem; height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ocre-fonce);
  color: var(--text-invert);
  font-family: var(--font-titre);
  font-weight: 700;
  border-radius: 50%;
  font-size: var(--fs-400);
}

/* ---------- 13. Impression (questionnaire + templates) ---------- */
@media print {
  .site-header, .site-footer, .nav, .btn, .no-print { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .hero { background: none; border: none; padding: 0; }
  .card, .quiz-section { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .total-banner { background: #333 !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a { color: #000; text-decoration: none; }
  main { padding: 0 !important; }
  .section { padding-block: 0.5rem; }
  .kind-box, .compare-box, .note-callout {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}