/* Alcego. Grille suisse : dès 64 em, une colonne droite qui porte les liens de la barre et le contenu des sections ; le haut de page part du bord gauche, comme le wordmark ; texte aligné à gauche ; gris neutres légèrement froids, jour et nuit. */

@font-face {
  font-family: "Urbanist";
  src: url("/urbanist.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Readex Pro";
  src: url("/readex-pro.woff2") format("woff2");
  font-weight: 160 700;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist Fallback: Arial";
  src: local("Arial"), local("ArialMT");
  size-adjust: 99.0353%;
  ascent-override: 95.9254%;
  descent-override: 25.2435%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Urbanist Fallback: Roboto";
  src: local("Roboto Regular"), local("Roboto-Regular");
  size-adjust: 99.2527%;
}
@font-face {
  font-family: "Readex Pro Fallback: Arial";
  src: local("Arial"), local("ArialMT");
  size-adjust: 108.3444%;
  ascent-override: 92.2983%;
  descent-override: 23.0746%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Readex Pro Fallback: Roboto";
  src: local("Roboto Regular"), local("Roboto-Regular");
  size-adjust: 108.5822%;
  ascent-override: 92.0961%;
  descent-override: 23.024%;
}

/* Jetons : jour sur :root, nuit pour le système sombre et pour le choix explicite. */
:root {
  --bg: #f2f3f5; /* oklch(96.4% 0.002 260), la luminosité des dalles de la scène */
  --surface: #e8e9eb; /* oklch(93.3% 0.003 260) : cartes, bandeau */
  --ink: #16171a; /* oklch(20.5% 0.006 260) : 16,1:1 sur le fond */
  --ink-2: #494b4f; /* texte courant : 7,9:1 sur le fond, 7,2:1 sur la surface (3 novembre, lisibilité) */
  --ink-3: #7e7f81; /* numéros, mots pas encore allumés : 3,3:1 sur la surface */
  --line: #dcdddf; /* filets */
  --field-line: #7e7f81; /* bord des champs : 3,6:1 sur le fond */
  /* bouton en gris ardoise, choisi par le propriétaire le 3 novembre : 7,8:1 avec son texte, la seule teinte du site */
  --btn: #46505c;
  --btn-ink: #f9fafb;
  --btn-hover: #363e48;
  --erreur: #b3261e; /* bord d’un champ refusé : 5,9:1 sur le fond */
  --nav-bg: rgb(
    242 243 245 / 0.9
  ); /* liens ≥ 4,5:1 même au-dessus d’un bouton */
  --carte-bord: transparent;
  --carte-ombre: 0 -12px 32px rgb(22 23 26 / 0.06);
  --display:
    "Urbanist", "Urbanist Fallback: Arial", "Urbanist Fallback: Roboto", Arial,
    sans-serif;
  --text:
    "Readex Pro", "Readex Pro Fallback: Arial", "Readex Pro Fallback: Roboto",
    Arial, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --nav-h: 64px;
  --gutter: 20px;
  --container: 1200px;
  --carte-h: 46vh;
  --section-haut: 88px;
  --section-bas: 104px;
  --rayon: 28px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121315; /* oklch(18.6% 0.004 264) */
    --surface: #1b1c1e; /* oklch(22.6% 0.004 264) */
    --ink: #ecedef; /* 15,9:1 sur le fond */
    --ink-2: #a9abae; /* 8,1:1 sur le fond, 7,4:1 sur la surface */
    --ink-3: #686a6d; /* 3,1:1 sur la surface */
    --line: #2c2e30;
    --field-line: #6d6f72; /* 3,7:1 sur le fond */
    --btn: #b9c1cb; /* 10,2:1 avec son texte */
    --btn-ink: #121315;
    --btn-hover: #d2d8df;
    --erreur: #ff8a80;
    --nav-bg: rgb(18 19 21 / 0.74);
    --carte-bord: #2c2e30;
    --carte-ombre: 0 0 #0000; /* « none » invaliderait la liste de box-shadow et effacerait le filet */
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121315;
  --surface: #1b1c1e;
  --ink: #ecedef;
  --ink-2: #a9abae;
  --ink-3: #686a6d;
  --line: #2c2e30;
  --field-line: #6d6f72;
  --btn: #b9c1cb;
  --btn-ink: #121315;
  --btn-hover: #d2d8df;
  --erreur: #ff8a80;
  --nav-bg: rgb(18 19 21 / 0.74);
  --carte-bord: #2c2e30;
  --carte-ombre: 0 0 #0000;
  color-scheme: dark;
}

/* Base */

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-padding-top: calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(
    --ink-2
  ); /* texte courant en gris moyen ; titres, questions et mots clés en --ink */
  font: 400 1.0625rem/1.7 var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
  min-block-size: 100svh; /* pages courtes : le pied de page reste en bas de l’écran */
}
main {
  flex: 1 0 auto;
}
[hidden] {
  display: none !important;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  color: var(--ink);
  font-family: var(--display);
  text-wrap: balance;
  hyphens: manual;
  overflow-wrap: anywhere;
}
h1 {
  font-size: clamp(2rem, 0.9rem + 3.6vw, 4rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
  max-width: 17em;
}
h2 {
  font-size: clamp(1.75rem, 1rem + 2.4vw, 2.75rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.025em;
}
h3 {
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
p {
  text-wrap: pretty; /* aucune césure (demande du propriétaire) ; fins de paragraphe d’un seul mot évitées quand le navigateur le peut */
}
.insecable {
  white-space: nowrap; /* mot composé jamais coupé à son trait d’union */
}
strong {
  font-weight: 500;
  color: var(--ink);
}
a {
  color: inherit;
}
a:not(.bouton, .wordmark, .footer__marque, .evitement) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
::selection {
  background: var(--ink);
  color: var(--bg);
}
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
a:focus-visible,
summary:focus-visible {
  border-radius: 4px;
}
.conteneur {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
main > section {
  padding-block: var(--section-haut) var(--section-bas);
}
.sentinelle {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
}
.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.evitement {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 20;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 500;
  text-decoration: none;
  translate: 0 -200%;
}
.evitement:focus-visible {
  translate: 0;
}
.chapeau {
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.3125rem);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 36ch;
}
.petit,
.aide {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-2);
}

/* Boutons et bascule du thème */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--btn);
  color: var(--btn-ink);
  font: 500 0.9375rem/1.2 var(--text);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.bouton:active {
  transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
  .bouton:hover {
    background: var(--btn-hover);
  }
}
.theme {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.theme:active {
  transform: scale(0.94);
}
.theme svg {
  width: 18px;
  height: 18px;
}
.theme .soleil,
.theme[aria-pressed="true"] .lune {
  display: none;
}
.theme[aria-pressed="true"] .soleil {
  display: block;
}

/* Barre de navigation */

.nav {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 10;
}
.nav.est-compacte {
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  box-shadow: 0 1px 0 var(--line);
}
@media (prefers-reduced-transparency: reduce) {
  .nav.est-compacte {
    background: var(--bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
.nav__inner {
  display: flex;
  flex-wrap: wrap; /* filet pour l'espacement de texte agrandi (WCAG 1.4.12) : le bouton passe à la ligne au lieu de déborder */
  align-items: center;
  gap: 8px;
  min-height: var(--nav-h);
}
.wordmark,
.footer__marque {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-right: auto;
  font: 300 1.5rem/1 var(--display);
  letter-spacing: -0.04em;
  color: var(--ink);
  text-decoration: none;
}
.nav__droite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.nav__liens {
  display: none;
  gap: 4px;
  font-size: 0.9375rem;
  font-weight: 400;
}
.nav__liens a {
  padding: 12px 10px;
  color: var(--ink-2);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .nav__liens a:hover {
    color: var(--ink);
  }
}
.nav-cta {
  flex: none;
  min-height: 44px;
  padding: 0 18px;
}

/* Hero */

.hero {
  --hero-bas: clamp(72px, 9vw, 128px);
  padding-block: clamp(32px, 6vw, 96px) var(--hero-bas);
}
.hero h1 {
  font-size: clamp(
    1.9375rem,
    0.9rem + 3.6vw,
    4rem
  ); /* 31 px au plus bas (32 ailleurs) : à 320 px, « avec vous, pour ce qui » (9,1 em) dépassait de 3 px et « qui » se coupait */
  max-width: 9.5em; /* trois lignes à toutes les largeurs : « Un logiciel construit » (7,8 em au plus), « avec vous, pour ce qui » (9,1 em, insécables) et « vous prend du temps » (8,8 em, insécables), mesuré de 320 à 1 920 px */
}
.ligne {
  display: block;
  overflow: clip;
  padding-block: 0.08em 0.14em;
  margin-block: -0.08em -0.14em;
}
.ligne > span {
  display: block;
}
.hero__bas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  margin-top: 40px;
}
.hero .chapeau {
  max-width: 30em; /* trois lignes sur ordinateur en Readex 400 (à 28 em, « fait évoluer. » restait seul sur une quatrième) ; encre à 14 px au moins de la course de la balle, mesuré de 1 024 × 700 à 2 560 × 1 440 */
}
.hero__actions {
  display: flex;
}
.scene,
.scene__pause {
  display: none; /* scène du haut de page, posée par site.js (BRIEF § 4.2) : en fond dès 64 em, en carte sous le bouton en dessous */
}

/* Sections en deux colonnes : titre à gauche, contenu à droite */

.split {
  display: grid;
  gap: 40px;
}

/* C’est pour vous si… */

.pour-qui {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.pour-qui li {
  position: relative;
  padding: 26px 0 26px 40px;
  border-bottom: 1px solid var(--line);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.55;
}
.pour-qui li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: calc(26px + 0.35em);
  width: 7px;
  height: 13px;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  transform: rotate(45deg);
}

/* Comment ça marche : cartes empilées */

.etapes {
  list-style: none;
  margin: 0; /* dans `.split` : l'écart avec le titre est celui de la grille (40 px), comme les autres sections en deux colonnes */
  padding: 0;
}
.etape {
  position: sticky;
  transform-origin: 50% 0;
  top: calc(var(--nav-h) + 24px);
  overflow: hidden;
  min-height: var(--carte-h);
  padding: 136px 24px 32px;
  border-radius: var(--rayon);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--carte-bord);
}
.etape + .etape {
  margin-top: 24px;
}
.etape:nth-child(2) {
  top: calc(var(--nav-h) + 40px);
  z-index: 2;
}
.etape:nth-child(3) {
  top: calc(var(--nav-h) + 56px);
  z-index: 3;
}
.etape:nth-child(n + 2) {
  box-shadow:
    inset 0 0 0 1px var(--carte-bord),
    var(--carte-ombre);
}
.etape::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
}
.etape__numero {
  position: absolute;
  top: 4px;
  left: -0.08em;
  font: 100 128px/1 var(--display);
  letter-spacing: -0.06em;
  color: var(--ink-3);
}
.etape__numero::before {
  content: attr(
    data-numero
  ); /* texte généré : masqué aux lecteurs d'écran par aria-hidden */
}
.etape p {
  margin-top: 14px;
}

/* Formules : un tableau qui compare les trois, Standard mise en avant */

.formules-cadre {
  margin-top: 48px;
  overflow-x: auto; /* filet : au pire, le tableau défile seul, jamais la page */
}
.formules {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.formules thead td:first-child {
  width: 36%;
}
.formules th,
.formules td {
  padding: 14px 6px;
  border-bottom: 1px solid var(--line);
  text-align: center;
  vertical-align: middle;
  font-weight: 400;
}
.formules td {
  line-height: 1; /* coche et tiret seulement : l’interlignage du texte (1,7) gonflait chaque ligne */
}
.formules thead th {
  padding-block: 20px 16px;
  vertical-align: bottom;
}
.formules tbody th {
  padding-left: 0;
  color: var(--ink);
  text-align: left;
  font-size: 0.9375rem;
  line-height: 1.4;
}
.formules thead td {
  border-bottom-color: transparent;
}
.formules__standard {
  background: var(--surface);
}
.formules thead .formules__standard {
  border-radius: 18px 18px 0 0;
}
.formules tbody tr:last-child .formules__standard {
  border-radius: 0 0 18px 18px;
}
.formule__nom {
  display: block;
  color: var(--ink);
  font: 600 1.0625rem/1.2 var(--display);
  letter-spacing: -0.01em;
}
.formule__accroche {
  display: block;
  margin-top: 4px;
  font-size: 0.8125rem;
  line-height: 1.35;
}
.etiquette {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font: 500 0.75rem/1.2 var(--text);
}
.coche {
  width: 20px;
  height: 20px;
  color: var(--ink);
  vertical-align: middle;
}
.sans {
  display: inline-block;
  width: 12px;
  height: 1px;
  background: var(--ink-3);
  vertical-align: middle;
}
.formules__notes {
  display: grid;
  gap: 6px;
  max-width: 62ch;
  margin-top: 32px;
}

/* Appartenance : la phrase s’allume mot à mot au défilement */

#appartenance {
  background: var(--surface);
  view-timeline: --appartenance block;
}
#appartenance h2 {
  font-size: clamp(2rem, 1rem + 4.2vw, 4.5rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.035em;
  max-width: 15em;
}
#appartenance p {
  max-width: 40ch;
  margin-top: 32px;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
}

/* FAQ */

.faq-titre,
.etapes-titre {
  align-self: start;
}
.faq-liste {
  border-top: 1px solid var(--line);
}
.faq {
  border-bottom: 1px solid var(--line);
}
summary {
  list-style: none;
  text-wrap: balance; /* « À quels besoins / répondez-vous ? » plutôt qu’une coupure au trait d’union */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 64px;
  padding: 18px 0;
  cursor: pointer;
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 400;
}
summary::-webkit-details-marker {
  display: none;
}
.plus {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
}
.plus::before,
.plus::after {
  content: "";
  position: absolute;
  inset: 6.5px 0 auto;
  height: 1px;
  background: currentColor;
}
.plus::after {
  transform: rotate(90deg);
}
details[open] .plus::after {
  transform: rotate(0deg);
}
.faq__reponse {
  max-width: 58ch;
  padding-bottom: 24px;
}

/* Contact */

#formules .chapeau,
#contact .chapeau {
  margin-top: 20px;
}
.formulaire {
  display: grid;
  gap: 20px;
  max-width: 52rem;
  margin-top: 40px;
}
.champ {
  display: grid;
  align-content: start; /* deux champs côte à côte gardent leur hauteur, même si l’un a une aide */
  gap: 8px;
  min-width: 0;
}
label {
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
}
.aide {
  margin-top: -4px;
}
input,
textarea {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border: 1px solid var(--field-line);
  border-radius: 14px;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.4 var(--text);
}
input:focus,
textarea:focus {
  border-color: var(--ink);
}
textarea {
  min-height: 9em;
  resize: vertical;
}
.formulaire__bas {
  display: grid;
  justify-items: start;
  gap: 14px;
}
#contact-erreur,
#contact-etat {
  color: var(--ink);
}
.formulaire__assurance {
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
}
input[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--erreur);
  box-shadow: inset 0 0 0 1px var(--erreur);
}
.champ__erreur {
  color: var(--erreur); /* 5,9:1 sur le fond le jour, 8,1:1 la nuit */
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
}
#contact-etat:not(:empty) {
  margin-top: 24px;
}
.suite {
  counter-reset: suite;
  display: grid;
  gap: 14px;
  max-width: 52ch;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.page .suite {
  margin-top: 28px;
}
.suite li {
  position: relative;
  padding-left: 44px;
  color: var(--ink);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.5;
}
.suite li::before {
  counter-increment: suite;
  content: counter(suite);
  position: absolute;
  top: -1px;
  left: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.875rem;
}
.est-envoye .nav-cta {
  display: none;
}
#contact-etat:focus {
  outline: none;
}

/* Pied de page */

.footer {
  padding-block: 56px 32px;
  border-top: 1px solid var(--line);
}
.footer a {
  scroll-margin-bottom: 8px; /* au clavier, l’anneau de focus reste entier en bas de l’écran ; pas de scroll-padding-bottom, qui décalerait les animations liées au défilement */
}
.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  margin-bottom: 24px;
}
.footer__nav a,
.footer__ligne a {
  display: inline-block;
  min-width: 44px;
  padding-block: 12px;
  font-size: 0.875rem;
  font-weight: 400;
}
.footer__ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 24px;
  margin-top: 8px;
  font-size: 0.875rem;
}

/* Pages utilitaires */

.page {
  padding-block: 48px 96px;
}
.page h1 + * {
  margin-top: 28px;
}
.page p,
.page ol {
  max-width: 62ch;
  overflow-wrap: anywhere;
}
.page p + p {
  margin-top: 16px;
}
.page ol {
  margin: 28px 0 0;
  padding-left: 1.4em;
}
.page li + li {
  margin-top: 12px;
}
.page .bouton {
  margin-top: 36px;
}

/* La nuit, la vidéo de nuit (fond noir) éclaircit la page au lieu de l'assombrir. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .scene {
    mix-blend-mode: screen;
  }
}
:root[data-theme="dark"] .scene {
  mix-blend-mode: screen;
}

/* Points de rupture */

@media (max-width: 399.98px) {
  .nav__inner,
  .nav__droite {
    gap: 6px;
  }
  .nav .wordmark,
  .footer__marque {
    font-size: 1.375rem;
  }
  .nav-cta {
    padding: 0 14px;
    font-size: 0.875rem;
  }
  /* tableau des formules : trois colonnes de 66 px au moins à 320 px, noms et étiquette resserrés pour y tenir */
  .formules thead td:first-child {
    width: 31%;
  }
  .formules th,
  .formules td {
    padding-inline: 3px;
  }
  .formule__nom {
    font-size: 0.875rem;
  }
  .formule__accroche {
    font-size: 0.75rem;
  }
  .etiquette {
    font-size: 0.6875rem;
  }
}
@media (max-width: 359.98px) {
  :root {
    --gutter: 16px;
  }
  .nav .wordmark,
  .footer__marque {
    font-size: 1.25rem;
  }
  .nav-cta {
    padding: 0 10px;
    font-size: 0.8125rem;
  }
}
@media (max-height: 420px) {
  .etape,
  .etape:nth-child(n) {
    position: relative;
    top: auto;
  }
  .etape,
  .etape::after {
    animation: none !important;
  }
}
@media (max-width: 479.98px) {
  .nav-nous {
    display: none;
  }
  .formulaire .bouton {
    width: 100%;
  }
}
@media (min-width: 768px) {
  :root {
    --gutter: 40px;
    --carte-h: max(
      440px,
      60vh
    ); /* tablette ; dès 64 em, un tiers de moins (27 octobre) */
    --section-haut: 128px;
    --section-bas: 160px;
  }
  .formulaire {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }
  .champ--large,
  .formulaire__bas {
    grid-column: 1 / -1;
  }
  .formules th,
  .formules td {
    padding: 12px; /* lignes de 47 px : le tableau tient entier sous la barre dès 1 024 × 768 (745 px avec 16 px, 600 avec 12) */
  }
  .formules thead td:first-child {
    width: 40%;
  }
  .formules tbody th {
    font-size: 1rem;
  }
  .formule__nom {
    font-size: 1.375rem;
  }
  .formule__accroche {
    font-size: 0.9375rem;
  }
  .etiquette {
    display: inline-block;
    margin-bottom: 10px;
    padding: 4px 10px;
    border: 1px solid currentColor;
    border-radius: 999px;
  }
}
@media (min-width: 64em) {
  /* en em : avec une police agrandie dans le navigateur, la mise en page large arrive plus tard au lieu de casser la barre */
  :root {
    --droite: 39rem; /* colonne droite : la largeur du groupe de la barre (liens, thème, bouton), pour que tout parte du même axe */
    --carte-h: max(
      300px,
      40vh
    ); /* cartes des étapes un tiers moins hautes sur ordinateur (demande du propriétaire, 27 octobre) */
  }
  .nav__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--droite);
    column-gap: 0;
  }
  .nav .wordmark {
    justify-self: start;
  }
  .nav__liens {
    display: flex;
    margin-right: auto;
  }
  .nav__liens a:first-child {
    margin-left: -10px; /* le texte du premier lien tombe sur l’axe, le contour de focus reste centré */
  }
  .footer__nav {
    display: none;
  }
  .hero h1 {
    margin-left: -0.05em; /* alignement optique sur le wordmark : approche du « U » (comme du « L ») en Urbanist 200 */
  }
  .hero__bas {
    margin-top: 48px;
  }
  .hero {
    position: relative;
    isolation: isolate; /* la vidéo passe sous le texte */
    background: var(
      --bg
    ); /* fond du groupe isolé : la vidéo se mélange au fond de la page */
  }
  .hero:has(> .scene:not([hidden])) {
    /* la scène remonte sous la barre, transparente en haut de page ; le texte garde sa place */
    margin-top: calc(-1 * var(--nav-h));
    padding-top: calc(var(--nav-h) + clamp(32px, 6vw, 96px));
    /* au moins aussi haut que la vidéo 2:1 (au-delà de 1 476 px, le haut de page de 738 px la coupait, arête nette en
       bas), sans dépasser l'écran : sur un écran plus large que deux fois sa hauteur (2 000 × 800, 3 440 × 1 440), le
       haut de page de 50vw débordait sous le pli et le circuit avec lui ; le texte se centre en hauteur, face au circuit */
    min-height: min(50vw, 100svh);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .scene:not([hidden]) {
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: clip;
    pointer-events: none;
    container-type: size; /* la vidéo se dimensionne sur la hauteur de la scène (cqh), voir .scene__video */
    mix-blend-mode: multiply; /* sur le conteneur (contexte d'empilement) : le blanc de la vidéo devient le fond de la page */
  }
  .scene__video {
    /* image 2:1 toujours entière en hauteur (ses fondus du haut et du bas restent), large de deux fois la hauteur de la
       scène : recadrée par la gauche quand elle dépasse (75 % du dépassement : à 1 024 px, la balle reste entière au
       bout de sa course à droite et passe à côté du chapeau à gauche ; à 60 %, elle sortait de l'écran), calée à
       droite quand l'écran est plus large qu'elle (2 000 × 800, 3 440 × 1 440) ; son bord gauche, presque blanc
       (gris 250), est fondu par le masque pour qu'aucune ligne ne marque la fin de la vidéo. Sans unités cq, repli
       sur le recadrage par object-fit */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 75% center;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%);
    mask-image: linear-gradient(to right, transparent, #000 10%);
  }
  @supports (width: 1cqh) {
    .scene__video {
      inset: 0 auto 0 max(calc(100cqw - 200cqh), calc(0.75 * (100cqw - 200cqh)));
      width: 200cqh;
      height: 100cqh;
      object-fit: fill;
    }
  }
  @media (max-width: 71.9em) {
    .hero .chapeau {
      /* de 1 024 à 1 150 px, la course de la balle (35 % de la largeur de l'image) ne tient pas entre la fin du chapeau
         à 20,6 px et le bord droit (à 1 100 px, 7 px de chevauchement sur huit images) : au bas de la taille (18 px),
         même nombre de lignes, le chapeau finit 19 px au moins avant la balle */
      font-size: 1.125rem;
    }
  }
  @media (max-height: 760px) {
    .hero:has(> .scene:not([hidden])) {
      /* écran bas (portable 1 366 × 768, fenêtre réduite) : le haut de page tient dans l'écran, sinon le bas du circuit,
         où la balle passe, est sous le pli */
      padding-top: calc(var(--nav-h) + 32px);
      padding-bottom: 96px; /* le bouton pause (32 à 76 px du bas) reste sous le bouton principal */
    }
    .hero:has(> .scene:not([hidden])) .hero__bas {
      margin-top: 32px;
    }
  }
  .scene__pause:not([hidden]) {
    display: inline-grid;
    place-items: center;
    position: absolute;
    /* invisible à la souris (demande du propriétaire), mais présent au clavier et pour les lecteurs d'écran : il
       apparaît quand il reçoit le focus (WCAG 2.2.2, mécanisme de pause atteignable). En bas à gauche, sur l'axe du
       texte : en bas à droite, il couvrait la balle au bas du circuit de 1 024 à 1 680 px */
    left: max(
      var(--gutter),
      calc((100% - var(--container)) / 2 + var(--gutter))
    );
    bottom: 32px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg);
    color: var(--ink);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
  }
  .scene__pause:focus-visible {
    opacity: 1;
    pointer-events: auto;
  }
  .scene__pause svg {
    width: 18px;
    height: 18px;
  }
  .scene__pause .lecture,
  .scene__pause[aria-pressed="true"] .pause {
    display: none;
  }
  .scene__pause[aria-pressed="true"] .lecture {
    display: block;
  }
  .split {
    grid-template-columns: minmax(0, 1fr) var(--droite);
    column-gap: 48px; /* la coche de « C’est pour vous si… », placée en marge, ne touche jamais le titre */
  }
  .split > :first-child {
    grid-column: 1;
  }
  .split > :last-child {
    grid-column: 2; /* même colonne que les liens de la barre */
  }
  .pour-qui li {
    padding-left: 0;
  }
  .pour-qui li::before {
    left: -34px; /* coche en marge, le texte s’aligne sur la colonne */
  }
  .faq-titre,
  .etapes-titre {
    position: sticky;
    top: calc(var(--nav-h) + 40px);
  }
  .etape {
    /* dans la colonne droite (39 rem, l'axe de la barre et de la FAQ), le titre fixé à gauche pendant que les cartes
       s'empilent : en pleine largeur, le propriétaire trouvait les cartes trop larges (18 octobre) */
    display: grid;
    align-content: center;
    padding: 48px 40px 48px 30%;
  }
  .etape__numero {
    top: 50%;
    transform: translateY(-50%);
    font-size: clamp(
      160px,
      12vw,
      200px
    ); /* à 300 px, il mangeait le texte dans une carte de 624 px */
  }
  .etape p {
    max-width: 52ch;
  }
}

/* Mouvement : tout ce qui bouge vit sous prefers-reduced-motion: no-preference */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
  :root {
    interpolate-size: allow-keywords;
  }
  .bouton {
    transition:
      background-color 200ms ease,
      transform 160ms var(--ease-out);
  }
  .theme {
    transition: transform 160ms var(--ease-out);
  }
  .nav {
    transition:
      background-color 250ms ease,
      box-shadow 250ms ease;
  }
  .nav__liens a {
    transition: color 200ms ease;
  }
  input,
  textarea {
    transition: border-color 200ms ease;
  }
  .hero h1 .ligne > span {
    animation: monte 700ms var(--ease-out) both;
  }
  .hero__bas > * {
    animation: leve 500ms var(--ease-out) both;
    animation-delay: 120ms;
  }
  .hero__bas > :nth-child(2) {
    animation-delay: 180ms; /* bouton entièrement visible à 680 ms */
  }
  @media screen {
    /* écran seulement : à l’impression, tout est visible sans attendre de fondu */
    .apparait {
      transition:
        opacity 500ms var(--ease-out),
        translate 500ms var(--ease-out);
    }
    .apparait.est-cache {
      opacity: 0;
      translate: 0 12px;
      transition: none; /* on cache sans fondu, on révèle avec */
    }
  }
  .groupe > .apparait:nth-child(2) {
    transition-delay: 50ms;
  }
  .groupe > .apparait:nth-child(3) {
    transition-delay: 100ms;
  }
  details::details-content {
    height: 0;
    overflow: clip;
    transition:
      height 320ms var(--ease-out),
      content-visibility 320ms allow-discrete;
  }
  details[open]::details-content {
    height: auto;
  }
  .plus::after {
    transition: transform 320ms var(--ease-out);
  }
  .etape {
    transition: transform 220ms var(--ease-out);
  }
  .etape::after {
    transition: opacity 220ms var(--ease-out);
  }
  .est-recouverte {
    transform: scale(0.96);
  }
  .est-recouverte::after {
    opacity: 0.55;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
  }
  @supports (animation-timeline: view()) {
    .etapes {
      timeline-scope: --carte-2, --carte-3;
    }
    .etape:nth-child(2) {
      view-timeline-name: --carte-2;
    }
    .etape:nth-child(3) {
      view-timeline-name: --carte-3;
    }
    .etape:nth-child(1),
    .etape:nth-child(1)::after {
      animation: recouvrement linear both;
      animation-timeline: --carte-2;
      animation-range: entry calc(100vh - var(--nav-h) - 24px - var(--carte-h))
        entry calc(100vh - var(--nav-h) - 40px);
    }
    .etape:nth-child(2),
    .etape:nth-child(2)::after {
      animation: recouvrement linear both;
      animation-timeline: --carte-3;
      animation-range: entry calc(100vh - var(--nav-h) - 40px - var(--carte-h))
        entry calc(100vh - var(--nav-h) - 56px);
    }
    .etape:nth-child(1)::after,
    .etape:nth-child(2)::after {
      animation-name: voile;
    }
    .mot {
      animation: allume linear both;
      animation-timeline: --appartenance;
    }
    .mot:nth-child(1) {
      animation-range: cover 14% cover 26%;
    }
    .mot:nth-child(2) {
      animation-range: cover 16.5% cover 28.5%;
    }
    .mot:nth-child(3) {
      animation-range: cover 19% cover 31%;
    }
    .mot:nth-child(4) {
      animation-range: cover 21.5% cover 33.5%;
    }
    .mot:nth-child(5) {
      animation-range: cover 24% cover 36%;
    }
    .mot:nth-child(6) {
      animation-range: cover 26.5% cover 38.5%;
    }
    .mot:nth-child(7) {
      animation-range: cover 29% cover 41%;
    }
    .mot:nth-child(8) {
      animation-range: cover 31.5% cover 43.5%;
    }
    .mot:nth-child(9) {
      animation-range: cover 34% cover 46%;
    }
    .mot:nth-child(10) {
      animation-range: cover 36.5% cover 48.5%;
    }
    .mot:nth-child(11) {
      animation-range: cover 39% cover 51%;
    }
  }
}
@keyframes monte {
  from {
    transform: translateY(105%);
  }
}
@keyframes leve {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}
@keyframes recouvrement {
  to {
    transform: scale(0.96);
  }
}
@keyframes voile {
  to {
    opacity: 0.55;
  }
}
@keyframes allume {
  from {
    color: var(--ink-3);
  }
  to {
    color: var(--ink);
  }
}