/* =====================================================================
   TOKI AI — feuille de style unique pour les trois pages.
   Aucune dépendance, aucune requête vers un tiers : pas de Google Fonts,
   pas de CDN, pas de mesure d'audience. C'est ce qui permet à la
   politique de confidentialité de dire qu'aucune donnée ne part ailleurs.
   ===================================================================== */

/* --- Jetons ------------------------------------------------------- */

:root {
  color-scheme: light;

  --paper: #f6f1e6;
  --paper-sunk: #efe8d8;
  --ink: #17150f;
  --ink-soft: #56503f;
  --rule: rgba(23, 21, 15, 0.16);
  --rule-faint: rgba(23, 21, 15, 0.08);

  /* Vert des plaques de rue parisiennes. Le numéro se lit comme une
     enseigne, pas comme un bouton de formulaire. */
  --plaque: #0b5642;
  --plaque-deep: #084232;
  --on-plaque: #f7f4ea;

  --accent: #bc4128;

  --measure: 33rem;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --band: clamp(3.25rem, 9vw, 6rem);

  --serif: "Iowan Old Style", "Charter", "Bitstream Charter", Palatino,
    "Palatino Linotype", "Book Antiqua", "URW Palladio L", Georgia,
    "Noto Serif", "Times New Roman", serif;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --paper: #14120d;
    --paper-sunk: #1c1a13;
    --ink: #f2ecdd;
    --ink-soft: #a9a293;
    --rule: rgba(242, 236, 221, 0.18);
    --rule-faint: rgba(242, 236, 221, 0.09);

    --plaque: #0d6b52;
    --plaque-deep: #095440;
    --on-plaque: #f7f4ea;

    --accent: #e2694c;
  }
}

/* --- Base --------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* WCAG 2.2 SC 2.4.11 : la barre d'appel fixée en bas ne doit jamais
     recouvrir l'élément qui vient de recevoir le focus clavier. */
  scroll-padding-bottom: calc(5rem + env(safe-area-inset-bottom));
  scroll-padding-top: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.62;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@media (min-width: 48rem) {
  body {
    font-size: 1.125rem;
  }
}

/* Grain de papier. Un SVG en ligne : zéro requête. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  body::before {
    mix-blend-mode: screen;
    opacity: 0.035;
  }
}

.shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.measure {
  max-width: var(--measure);
}

/* --- Typographie -------------------------------------------------- */

h1,
h2,
h3 {
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.06;
  text-wrap: balance;
  margin: 0;
}

h1 {
  font-size: clamp(2.15rem, 8.4vw, 3.9rem);
  letter-spacing: -0.035em;
}

h2 {
  font-size: clamp(1.65rem, 5.6vw, 2.55rem);
  margin-bottom: 0.6em;
}

h3 {
  font-size: clamp(1.2rem, 4.2vw, 1.5rem);
  line-height: 1.2;
  margin-bottom: 0.35em;
}

p {
  margin: 0 0 1.05em;
  max-width: var(--measure);
}

p:last-child {
  margin-bottom: 0;
}

strong {
  font-weight: 600;
}

em {
  font-style: italic;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--accent);
}

a:hover {
  text-decoration-thickness: 2px;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.lede {
  font-size: clamp(1.15rem, 4.6vw, 1.45rem);
  line-height: 1.42;
  color: var(--ink-soft);
  max-width: 30rem;
}

.fine {
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 28rem;
}

/* Numéro de section, comme sur un imprimé. */
.eyebrow {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.4rem;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
}

.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* --- Sections ----------------------------------------------------- */

section {
  padding-block: var(--band);
  border-top: 1px solid var(--rule-faint);
}

section:first-of-type {
  border-top: 0;
}

/* --- Hero --------------------------------------------------------- */

.hero {
  padding-top: clamp(2.5rem, 8vw, 4.5rem);
  padding-bottom: var(--band);
  border-top: 0;
}

.hero h1 {
  margin-bottom: 0.7em;
}

.hero .lede {
  margin-bottom: clamp(2rem, 7vw, 3rem);
}

.wordmark {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: clamp(1.5rem, 5vw, 2.25rem);
  padding-bottom: clamp(2rem, 6vw, 3rem);
  /* En bloc, le lien couvrait toute la largeur sur 75 px de haut : un
     pouce qui vise le haut de la page rechargeait la page, ou sortait
     le lecteur de la notice en pleine lecture. */
  display: inline-block;
  text-decoration: none;
}

/* --- La plaque ---------------------------------------------------- */

.call {
  display: block;
  text-decoration: none;
  color: var(--on-plaque);
  background: var(--plaque);
  background-image: linear-gradient(178deg, var(--plaque), var(--plaque-deep));
  border-radius: 12px;
  padding: clamp(1.4rem, 5vw, 2rem) clamp(1rem, 4vw, 1.75rem);
  position: relative;
  text-align: center;
  box-shadow: 0 18px 38px -22px rgba(8, 40, 30, 0.85);
  transition: transform 140ms ease, box-shadow 140ms ease;
}

/* Le filet blanc en retrait : c'est ce qui fait la plaque émaillée. */
.call::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 2px solid rgba(247, 244, 234, 0.82);
  border-radius: 6px;
  pointer-events: none;
}

.call:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 44px -22px rgba(8, 40, 30, 0.9);
}

.call:active {
  transform: translateY(1px);
  box-shadow: 0 8px 20px -14px rgba(8, 40, 30, 0.9);
}

.call__label {
  display: block;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* 0,82 donnait 4,51:1 sur le haut du dégradé — juste au seuil.
     0,9 remonte à 5,1:1 sans changement visible. */
  opacity: 0.9;
  margin-bottom: 0.55rem;
}

.call__number {
  display: block;
  font-size: clamp(2.1rem, 10.5vw, 3.6rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.015em;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}

.call__sub {
  display: block;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  opacity: 0.78;
  margin-top: 0.6rem;
}

.call-note {
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--ink-soft);
  margin-top: 0.9rem;
  max-width: 28rem;
}

/* --- La barre collée en bas -------------------------------------- */

.call-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: var(--plaque);
  color: var(--on-plaque);
  padding: 0.75rem var(--gutter);
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  box-shadow: 0 -10px 30px -20px rgba(0, 0, 0, 0.7);
  /* 110 % ne suffisait pas : sur l'écran large la barre devient une
     pastille plus courte que son propre décalage, et un liseré restait
     visible et cliquable en bas de page. On la sort d'une hauteur pleine
     plus une marge, et on la retire de l'ordre de tabulation tant
     qu'elle est cachée. */
  transform: translateY(calc(100% + 2rem));
  visibility: hidden;
  transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
    visibility 0s linear 220ms;
  border-top: 1px solid rgba(247, 244, 234, 0.25);
}

.call-bar.is-visible {
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s;
}

/* Le vermillon sur le vert de la plaque tombe à 1,6:1 — invisible.
   Le contour de focus passe en crème sur ce fond, à 7,9:1. */
.call-bar a:focus-visible {
  outline-color: var(--on-plaque);
}

.call-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
  font-size: clamp(1.15rem, 5vw, 1.4rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums tabular-nums;
}

.call-bar .call-bar__cue {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* 0,8 tombait à 4,40:1 sur le vert du thème sombre, sous le seuil AA
     pour du 11 px. 0,92 donne 5,25:1. */
  opacity: 0.92;
}

@media (min-width: 48rem) {
  .call-bar {
    left: auto;
    right: 1.5rem;
    bottom: 1.5rem;
    border-radius: 10px;
    padding: 0.7rem 1.4rem;
    border: 1px solid rgba(247, 244, 234, 0.25);
  }
}

/* On laisse la place à la barre pour ne rien recouvrir. */
.has-call-bar footer {
  padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
}

@media (min-width: 48rem) {
  .has-call-bar footer {
    padding-bottom: 3rem;
  }
}

/* --- Blocs de contenu -------------------------------------------- */

.beat {
  margin-bottom: clamp(2rem, 6vw, 2.75rem);
}

.beat:last-child {
  margin-bottom: 0;
}

.steps {
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 2.6rem;
  margin-bottom: 1.5rem;
  max-width: var(--measure);
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.15em;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.does {
  list-style: none;
  margin: 0;
  padding: 0;
}

.does li {
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule-faint);
  max-width: var(--measure);
}

.does li:first-child {
  border-top: 1px solid var(--rule-faint);
}

.says {
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
}

.says li {
  border-left: 3px solid var(--accent);
  padding: 0.15rem 0 0.15rem 1.1rem;
  margin-bottom: 1.1rem;
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--ink);
  max-width: var(--measure);
}

/* --- Prix --------------------------------------------------------- */

.price {
  font-size: clamp(1.85rem, 7vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 600;
  margin: 0 0 1.4rem;
  max-width: 24rem;
}

.price em {
  font-style: normal;
  color: var(--accent);
}

.compare {
  border-top: 1px solid var(--rule-faint);
  padding-top: 1.4rem;
  margin-top: 1.4rem;
  max-width: var(--measure);
}

.included {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  max-width: var(--measure);
}

.included li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.6rem;
}

.included li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent);
}

/* --- FAQ ---------------------------------------------------------- */

.faq {
  margin: 0;
  max-width: var(--measure);
}

.faq dt {
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.28;
  margin-top: 2.1rem;
  letter-spacing: -0.01em;
}

.faq dt:first-of-type {
  margin-top: 0;
}

.faq dd {
  margin: 0.55rem 0 0;
  color: var(--ink-soft);
}

/* --- Pages légales ------------------------------------------------ */

.legal {
  padding-block: clamp(2.5rem, 7vw, 4rem) var(--band);
}

.legal h2 {
  font-size: clamp(1.3rem, 4.6vw, 1.7rem);
  margin-top: 2.8rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule-faint);
}

.legal h2:first-of-type {
  margin-top: 2rem;
}

.legal h3 {
  margin-top: 1.9rem;
}

.legal ul,
.legal ol {
  padding-left: 1.2rem;
  max-width: var(--measure);
}

.legal li {
  margin-bottom: 0.55rem;
}

.legal table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  margin: 1.2rem 0 1.6rem;
}

.legal .table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.2rem -0.25rem 1.6rem;
  padding: 0 0.25rem;
}

/* Rendue focalisable au clavier : sans cela, la dernière colonne du
   tableau des sous-traitants — l'encadrement des transferts — est
   inatteignable sur Safari, qui ne focalise pas les conteneurs
   défilants tout seul. */
.legal .table-scroll:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.legal th,
.legal td {
  text-align: left;
  vertical-align: top;
  padding: 0.7rem 0.9rem 0.7rem 0;
  border-bottom: 1px solid var(--rule-faint);
}

.legal th {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom-color: var(--rule);
  white-space: nowrap;
}

.legal td:last-child,
.legal th:last-child {
  padding-right: 0;
}

.callout {
  background: var(--paper-sunk);
  border-left: 3px solid var(--accent);
  padding: 1.1rem 1.2rem;
  margin: 1.6rem 0;
  max-width: var(--measure);
}

.callout p {
  margin-bottom: 0.7em;
}

.callout p:last-child {
  margin-bottom: 0;
}

.toc {
  font-family: var(--sans);
  font-size: 0.875rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 1.2rem 0 0;
  border-top: 1px solid var(--rule);
  columns: 2;
  column-gap: 1.5rem;
  max-width: var(--measure);
}

.toc li {
  margin-bottom: 0.5rem;
  break-inside: avoid;
}

@media (max-width: 26rem) {
  .toc {
    columns: 1;
  }
}

/* --- Pied de page ------------------------------------------------- */

footer {
  border-top: 1px solid var(--rule);
  padding-block: clamp(2.25rem, 6vw, 3rem);
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

footer a {
  text-decoration-color: var(--rule);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  margin: 1.1rem 0;
  padding: 0;
  list-style: none;
}

.footer-links a {
  display: inline-block;
  min-height: 24px;
}

/* --- Entrée en scène --------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .hero > * {
    animation: rise 620ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  .hero > *:nth-child(1) { animation-delay: 40ms; }
  .hero > *:nth-child(2) { animation-delay: 120ms; }
  .hero > *:nth-child(3) { animation-delay: 200ms; }
  .hero > *:nth-child(4) { animation-delay: 280ms; }
  .hero > *:nth-child(5) { animation-delay: 340ms; }

  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}

/* --- Impression --------------------------------------------------- */

@media print {
  .call-bar,
  .wordmark {
    display: none;
  }
  body {
    background: #fff;
    color: #000;
  }
  body::before {
    display: none;
  }
  .call {
    background: none;
    color: #000;
    border: 2px solid #000;
  }
  .call::after {
    display: none;
  }
}