/* Pages outils : l'entrée (phrase + produit en grand), ce que ça change, comment ça se met en place, le calculateur, pour qui, la fin.
   Tout vient des jetons de tokens.css ; les blocs partagés (.how, .steps, .calc, .job__media, .btn) sont dans site.css. */
.pg { padding-block: var(--space-xl) var(--section-gap-s); }
.pg__in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--gap-columns); align-items: center; min-height: calc(100svh - var(--nav-h) - var(--space-xl) - var(--section-gap-s)); }
.pg__t { font-size: var(--text-display-s); font-weight: 800; line-height: 1.04; letter-spacing: var(--tracking-display); max-width: 14ch; color: var(--color-ink); overflow-wrap: break-word; min-width: 0; }
.pg__s { margin-top: var(--space-lg); font-size: var(--text-lead); color: var(--color-ink-2); max-width: 36ch; }
.pg__a { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.pg__media { position: relative; aspect-ratio: 16 / 10; }
.pg__one { width: 100%; height: auto; border-radius: var(--radius-media); border: 1px solid var(--color-rule); background: var(--color-paper-2); }
html[lang="ar"] .pg__t, html[lang="ar"] .facts__list h3 { line-height: 1.3; }

/* Ce que ça change : trois faits sur une ligne, séparés par des filets */
.facts, .pg ~ .how, .pg ~ .calc, .who, .end { padding-block: var(--section-gap-l); }
.pg ~ .how .steps { gap: var(--space-2xl); }
.pg ~ .how .steps li { padding-top: var(--space-lg); }
.pg ~ .how .steps p { font-size: var(--text-lead); max-width: 46ch; }
.pg ~ .calc .calc__form { margin-top: var(--space-3xl); gap: var(--space-2xl); }
.facts { padding-block: var(--section-gap-l); border-top: 1px solid var(--color-rule); }
.facts__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: start; }
.facts__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xl); }
.facts__list li { padding-top: var(--space-lg); border-top: 2px solid var(--color-ink); }
.facts__list h3 { font-size: var(--text-2xl); font-weight: 800; letter-spacing: var(--tracking-display); line-height: 1.1; }
.facts__list p { margin-top: var(--space-md); color: var(--color-ink-2); font-size: var(--text-lead); max-width: 46ch; }

/* Pour qui : une liste en deux colonnes */
.who { padding-block: var(--section-gap-s); border-top: 1px solid var(--color-rule); }
.who__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: start; }
.who__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--gap-columns); }
.who__list li { padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); color: var(--color-ink-2); font-size: var(--text-lead); }
.who__list li b { color: var(--color-ink); font-weight: 600; }

/* La fin de page : la même proposition partout */
.end { padding-block: var(--section-gap-l); border-top: 1px solid var(--color-rule); }
.end__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: center; }
.end__lead { margin-top: var(--space-md); color: var(--color-ink-2); font-size: var(--text-lead); max-width: 40ch; }
.end__ways { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl); }

/* La page Nos outils : chaque outil, une image et une phrase */
.hub { padding-block: var(--space-xl) var(--section-gap-s); }
.hub__in { min-height: calc(100svh - var(--nav-h) - var(--space-xl) - var(--section-gap-s)); display: grid; align-content: center; }
.hub__t { font-size: var(--text-display-s); font-weight: 800; line-height: 1.04; letter-spacing: var(--tracking-display); max-width: 16ch; color: var(--color-ink); }
.hub__s { margin-top: var(--space-lg); font-size: var(--text-lead); color: var(--color-ink-2); max-width: 40ch; }
.hublist { padding-block: var(--section-gap-s); border-top: 1px solid var(--color-rule); }
.hub__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--section-gap-s) var(--gap-columns); }
.hub__list a { display: grid; gap: var(--space-md); text-decoration: none; color: inherit; border-radius: var(--radius-media); }
.hub__list a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 6px; }
.hub__pic { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; width: 100%; border-radius: var(--radius-media); border: 1px solid var(--color-rule); background: var(--color-paper-2); }
.hub__list h3 { padding-top: var(--space-md); border-top: 1px solid var(--color-rule); transition: color var(--dur-short) var(--ease-out); }
.hub__list a:hover h3 { color: var(--color-accent); }
.hub__list p { color: var(--color-ink-2); max-width: 46ch; }

@media (max-width: 56rem) {
  .pg__in, .facts__in, .who__in, .end__in, .hub__list { grid-template-columns: minmax(0, 1fr); }
  .facts__list { gap: var(--space-xl); }
  .pg__in, .hub__in { min-height: 0; }
  .who__list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .pg__a .btn, .end__ways .btn { width: 100%; }
}