@charset "utf-8";

/* ============================================================
   Balaye — Slush : papier pastel, autocollants découpés,
   contours noirs, ombres dures. Aucun dégradé.
   ============================================================ */

:root {
  /* palette de l'app (Theme.swift) */
  --carbon:   #000000;
  --paper:    #ffffff;
  --sky:      #dceeff;
  --concrete: #cccccc;
  --mist:     #e9e9e9;

  --blue:     #4da2ff;
  --mint:     #55db9c;
  --lavender: #e9ccff;
  --ember:    #fb4903;
  --sunburst: #ffd731;
  --violet:   #5c4ade;

  --ink:       var(--carbon);
  --ink-muted: rgba(0, 0, 0, .62);
  --ink-faint: rgba(0, 0, 0, .42);
  /* texte secondaire posé sur le papier bleu : une nuance du bleu, jamais du gris */
  --ink-on-sky: #123a55;

  /* formes */
  --line: 2px;
  --r-stk: 20px;
  --r-card: 28px;
  --r-big: 40px;
  --r-pill: 999px;

  /* espace — échelle 4pt */
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --s-8: 32px;
  --s-12: 48px;
  --s-16: 64px;
  --s-24: 96px;
  --gutter: clamp(20px, 5vw, 64px);
  --section: clamp(64px, 10vw, 128px);

  --maxw: 1180px;

  /* type */
  --display: "Anton", "Haettenschweiler", "Arial Narrow Bold", "Archivo", system-ui, sans-serif;
  --body: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease: cubic-bezier(.32, .72, 0, 1);
}

/* ombre découpée : un noir net décalé + un halo doux dessous */
@supports (color: rgb(0 0 0 / .5)) {
  :root {
    --sh-3: 3px 3px 0 var(--carbon), 0 3px 8px rgb(0 0 0 / .16);
    --sh-5: 5px 5px 0 var(--carbon), 0 5px 14px rgb(0 0 0 / .16);
    --sh-8: 8px 8px 0 var(--carbon), 0 8px 22px rgb(0 0 0 / .18);
    --sh-12: 12px 12px 0 var(--carbon), 0 12px 34px rgb(0 0 0 / .2);
  }
}

/* ------------------------------------------------ base */

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

html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--sky);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(16px, 1.05vw + 13px, 18px);
  line-height: 1.55;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { margin: 0; line-height: 1; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: 50%; top: 8px; z-index: 50;
  translate: -50% -200%;
  background: var(--carbon); color: var(--paper);
  padding: 12px 20px; border-radius: var(--r-pill);
  font-weight: 700; text-decoration: none;
}
.skip:focus-visible { translate: -50% 0; }

kbd {
  font-family: var(--body);
  font-size: .82em;
  font-weight: 700;
  line-height: 1;
  display: inline-block;
  padding: 4px 8px 5px;
  background: var(--paper);
  border: var(--line) solid var(--carbon);
  border-radius: 8px;
  box-shadow: 2px 2px 0 var(--carbon);
  white-space: nowrap;
  margin: 0 4px 2px 1px;
}

/* ------------------------------------------------ bandeau défilant */

.ticker {
  background: var(--carbon);
  color: var(--paper);
  overflow: hidden;
  padding: 10px 0;
  font-family: var(--body);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .06em;
  user-select: none;
}
.ticker--rev { background: var(--carbon); }

.ticker__rail {
  display: flex;
  width: max-content;
  animation: rail 34s linear infinite;
}
.ticker__group {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-right: 18px;
  white-space: nowrap;
}
.ticker__group i { font-style: normal; color: var(--blue); }
.ticker__group b { color: var(--sunburst); }

@keyframes rail { to { transform: translateX(-50%); } }

/* ------------------------------------------------ barre du haut */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--s-6);
  padding: 12px var(--gutter);
  background: var(--sky);
  border-bottom: var(--line) solid var(--carbon);
}

.topbar__mark {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  text-decoration: none;
  font-family: var(--display);
  font-size: 24px;
  letter-spacing: .01em;
  line-height: 1;
  padding-top: 3px;
}
.topbar__mark img {
  border: var(--line) solid var(--carbon);
  border-radius: 9px;
  width: 30px; height: 30px;
}

/* sélecteur de langue : une petite pastille découpée */
.langs {
  display: flex;
  align-items: stretch;
  margin: 0;
  border: var(--line) solid var(--carbon);
  border-radius: var(--r-pill);
  overflow: hidden;
  box-shadow: var(--sh-3);
  background: var(--paper);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
}
.langs > * {
  display: grid;
  place-items: center;
  min-height: 40px;
  padding: 0 14px;
  text-decoration: none;
}
.langs__on { background: var(--carbon); color: var(--paper); }
.langs a:hover { background: var(--sunburst); }
.langs a:focus-visible { outline-offset: -3px; }

.topbar__nav {
  margin-left: auto;
  display: flex;
  gap: var(--s-6);
  font-size: 15px;
  font-weight: 600;
}
.topbar__nav a {
  text-decoration: none;
  padding: 12px 2px;
  box-shadow: inset 0 -2px 0 transparent;
  transition: box-shadow .16s var(--ease);
}
.topbar__nav a:hover { box-shadow: inset 0 -2px 0 var(--carbon); }

@media (max-width: 900px) {
  .topbar__nav { display: none; }
  .langs { margin-left: auto; }
}
@media (max-width: 420px) {
  .topbar { gap: var(--s-3); padding-inline: 16px; }
  .topbar__mark span { display: none; }
}

/* ------------------------------------------------ boutons */

.btn {
  --btn-fill: var(--paper);
  --btn-ink: var(--carbon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--btn-fill);
  color: var(--btn-ink);
  border: var(--line) solid var(--carbon);
  border-radius: var(--r-pill);
  padding: 14px 26px;
  font: inherit;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--sh-5);
  transition: translate .12s var(--ease), box-shadow .12s var(--ease);
}
.btn:hover { translate: -2px -2px; box-shadow: 7px 7px 0 var(--carbon), 0 8px 18px rgb(0 0 0 / .18); }
.btn:active { translate: 3px 3px; box-shadow: 1px 1px 0 var(--carbon); }

.btn--ink { --btn-fill: var(--carbon); --btn-ink: var(--paper); }
.btn--paper { --btn-fill: var(--paper); }
.btn--sm { padding: 9px 18px; font-size: 14px; box-shadow: var(--sh-3); }
.btn--sm:hover { box-shadow: 5px 5px 0 var(--carbon); }
.btn--lg { padding: 17px 32px; font-size: clamp(15px, .5vw + 13px, 17px); }

/* ------------------------------------------------ hero */

.hero {
  position: relative;
  padding: clamp(40px, 7vw, 88px) var(--gutter) clamp(56px, 8vw, 104px);
  overflow: hidden;
}

.hero__grid {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}

.wordmark {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(56px, 10.4vw, 138px);
  line-height: .86;
  letter-spacing: -.005em;
  margin-bottom: var(--s-6);
}

.lede {
  font-size: clamp(18px, 1.1vw + 14px, 22px);
  font-weight: 500;
  line-height: 1.36;
  max-width: 30ch;
  margin-bottom: var(--s-6);
}

/* la promesse : ce que la personne gagne, en un coup d'oeil */
.promise {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--sunburst);
  border: var(--line) solid var(--carbon);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-3);
  padding: 9px 20px 9px 12px;
  font-size: clamp(15px, .5vw + 13px, 17px);
  font-weight: 800;
  margin-bottom: var(--s-8);
}
.promise__mark {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  background: var(--paper);
  border: var(--line) solid var(--carbon);
  border-radius: 50%;
  flex: none;
}

.cta { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.note {
  margin-top: var(--s-6);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-on-sky);
  max-width: 44ch;
}

/* autocollants flottants */
.stickers { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* le balai : le motif de la marque, repris de l'icône de l'app */
.broom {
  display: block;
  height: auto;
  filter: drop-shadow(0 10px 22px rgb(0 0 0 / .16));
}
.broom--hero {
  position: absolute;
  left: -84px;
  bottom: -34px;
  width: 208px;
  animation: sweep 6.6s ease-in-out infinite;
  transform-origin: 56% 12%;
}
@keyframes sweep {
  0%, 100% { rotate: -9deg; }
  50%      { rotate: 7deg; }
}
.stk {
  position: absolute;
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  color: var(--carbon);
  background: var(--fill);
  border: var(--line) solid var(--carbon);
  border-radius: var(--r-stk);
  box-shadow: var(--sh-5);
  animation: bob 6.4s ease-in-out infinite;
}
.stk--ondark { color: var(--paper); }
.stk--2 { right: -14px; top: 6%;    --rot: 12deg;  animation-delay: -.9s; width: 56px; height: 56px; }
.stk--3 { right: -18px; bottom: 15%; --rot: -8deg; animation-delay: -1.8s; width: 54px; height: 54px; }
.stk--4 { left: -16px; top: 18%;     --rot: 10deg; animation-delay: -2.6s; }

@keyframes bob {
  0%, 100% { transform: rotate(calc(var(--rot) - 5deg)) translateY(9px); }
  50%      { transform: rotate(calc(var(--rot) + 5deg)) translateY(-9px); }
}

@media (max-width: 1080px) {
  .broom--hero { width: 172px; left: -74px; bottom: -28px; }
}
@media (max-width: 640px) {
  .stk { width: 44px; height: 44px; box-shadow: var(--sh-3); }
  .stk svg { width: 22px; height: 22px; }
  .stk--2 { top: 3%; right: -16px; }
  .stk--3, .stk--4 { display: none; }
  .broom--hero { width: 124px; left: -46px; bottom: -16px; }
}

/* ------------------------------------------------ démo jouable */

.demo {
  background: var(--sky);
  border: var(--line) solid var(--carbon);
  border-radius: var(--r-big);
  box-shadow: var(--sh-8);
  padding: var(--s-6) var(--s-6) var(--s-4);
  rotate: 1.1deg;
}

.demo__head { display: flex; gap: 10px; margin-bottom: var(--s-4); flex-wrap: wrap; }

.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: var(--paper);
  border: var(--line) solid var(--carbon);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-3);
  padding: 7px 15px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.chip b {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: .01em;
}
.chip--blue { background: var(--blue); }

.deck {
  position: relative;
  height: 340px;
  display: grid;
  place-items: center;
}

.card {
  position: absolute;
  inset: 0;
  background: var(--paper);
  border: var(--line) solid var(--carbon);
  border-radius: var(--r-card);
  box-shadow: var(--sh-8);
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto;
  cursor: grab;
  touch-action: pan-y;
  will-change: transform;
  user-select: none;
}
.card:active { cursor: grabbing; }
.card--behind { pointer-events: none; }

.card__art {
  display: grid;
  place-items: center;
  background: var(--art, var(--sky));
  border-bottom: var(--line) solid var(--carbon);
}
.card__glyph {
  display: grid;
  place-items: center;
  width: 88px; height: 88px;
  background: var(--paper);
  border: var(--line) solid var(--carbon);
  border-radius: 24px;
  color: var(--carbon);
}
.card__meta { padding: var(--s-4) var(--s-4) var(--s-4); }
.card__name {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(20px, 2.1vw, 27px);
  letter-spacing: .005em;
  margin-bottom: 10px;
  overflow-wrap: anywhere;
}
.card__tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tag {
  border: var(--line) solid var(--carbon);
  border-radius: var(--r-pill);
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--paper);
}
.tag--blue { background: var(--blue); }
.tag--sun { background: var(--sunburst); }

/* verdict qui apparaît pendant le glissement */
.card__stamp {
  position: absolute;
  top: 18px;
  padding: 8px 16px;
  border: 3px solid var(--carbon);
  border-radius: 12px;
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
}
.card__stamp--trash { left: 18px; rotate: -12deg; background: var(--ember); }
.card__stamp--keep  { right: 18px; rotate: 12deg; background: var(--mint); }

.deck__done {
  max-width: 30ch;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-muted);
}
.deck__done strong {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 34px;
  color: var(--ink);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.deck__done .btn { margin-top: var(--s-4); }

.demo__actions {
  display: flex;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.rnd {
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border: var(--line) solid var(--carbon);
  border-radius: 50%;
  box-shadow: var(--sh-5);
  cursor: pointer;
  color: var(--carbon);
  transition: translate .12s var(--ease), box-shadow .12s var(--ease);
}
.rnd:hover { translate: -2px -2px; box-shadow: 7px 7px 0 var(--carbon); }
.rnd:active { translate: 3px 3px; box-shadow: 1px 1px 0 var(--carbon); }
.rnd:disabled { opacity: .35; cursor: default; translate: none; box-shadow: var(--sh-3); }
.rnd--ember { background: var(--ember); }
.rnd--sun { background: var(--sunburst); }
.rnd--mint { background: var(--mint); }

.demo__hint {
  margin-top: var(--s-3);
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
}
.demo__hint kbd { font-size: 12px; padding: 2px 7px 3px; }

@media (max-width: 920px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__copy { text-align: center; }
  .lede { max-width: 26ch; margin-inline: auto; }
  .cta { justify-content: center; }
  .note { margin-inline: auto; }
  .demo { max-width: 420px; margin-inline: auto; rotate: 0deg; }
}
@media (max-width: 460px) {
  .cta { width: 100%; }
  .cta .btn { flex: 1 1 100%; }
}
@media (max-width: 420px) {
  .deck { height: 300px; }
  .demo { padding: var(--s-4) var(--s-4) var(--s-3); }
}

/* ------------------------------------------------ titres de section */

.h2 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(40px, 6.4vw, 92px);
  line-height: 1.06;
  letter-spacing: -.005em;
}
.h2--tight { font-size: clamp(34px, 4.6vw, 62px); }

/* ------------------------------------------------ étapes */

.steps {
  background: var(--paper);
  border-top: var(--line) solid var(--carbon);
  border-bottom: var(--line) solid var(--carbon);
  padding: var(--section) var(--gutter);
}
.steps__list,
.steps > .h2 { max-width: var(--maxw); margin-inline: auto; }
.steps > .h2 { margin-bottom: clamp(36px, 5vw, 64px); }

.steps__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(28px, 4vw, 56px);
}

.step { position: relative; padding-top: 6px; }
.step__num {
  font-family: var(--display);
  font-size: 90px;
  line-height: .8;
  color: #7d90a0;
  display: block;
  margin-bottom: -18px;
}
.step__badge {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  background: var(--fill);
  color: var(--carbon);
  border: var(--line) solid var(--carbon);
  border-radius: var(--r-stk);
  box-shadow: var(--sh-5);
  rotate: -6deg;
  margin-bottom: var(--s-6);
}
.step:nth-child(2) .step__badge { rotate: 7deg; }
.step__badge--broom { width: 66px; height: 66px; }
.step__badge--broom img { width: 40px; rotate: -6deg; }
.step:nth-child(3) .step__badge { rotate: -3deg; }

.step h3 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(24px, 2.2vw, 32px);
  letter-spacing: .005em;
  margin-bottom: var(--s-3);
}
.step p { color: var(--ink-muted); max-width: 34ch; font-weight: 500; }

/* ------------------------------------------------ fonctions */

.feats { padding: var(--section) var(--gutter); }
.feats__head {
  max-width: var(--maxw);
  margin: 0 auto clamp(32px, 4vw, 56px);
}
.feats__head .h2 { margin-bottom: var(--s-4); }
.feats__lede {
  max-width: 62ch;
  font-size: clamp(17px, .8vw + 14px, 20px);
  font-weight: 500;
  color: var(--ink-on-sky);
}

.feats__grid {
  max-width: var(--maxw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--s-4);
}

.feat {
  background: var(--fill);
  border: var(--line) solid var(--carbon);
  border-radius: var(--r-card);
  box-shadow: var(--sh-5);
  padding: var(--s-6);
  transition: translate .16s var(--ease), box-shadow .16s var(--ease);
}
.feat:hover { translate: -3px -3px; box-shadow: 8px 8px 0 var(--carbon), 0 10px 24px rgb(0 0 0 / .18); }
.feat h3 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(21px, 1.7vw, 27px);
  letter-spacing: .005em;
  margin-bottom: 10px;
}
.feat p { font-size: 15.5px; font-weight: 500; line-height: 1.5; }
.feat--dark { color: var(--paper); }
.feat--dark kbd { color: var(--carbon); }

@media (min-width: 800px) {
  .feats__grid { grid-template-columns: repeat(3, 1fr); }
  .feat--wide { grid-column: span 2; }
}

/* ------------------------------------------------ captures */

.shots {
  background: var(--paper);
  border-top: var(--line) solid var(--carbon);
  padding: var(--section) var(--gutter);
  display: grid;
  justify-items: center;
  gap: clamp(40px, 5vw, 72px);
}
.shots > .h2 { max-width: var(--maxw); width: 100%; }

.shot {
  margin: 0;
  width: min(100%, 820px);
}
.shot img {
  width: 100%;
  border: var(--line) solid var(--carbon);
  border-radius: 22px;
  box-shadow: var(--sh-12);
}
.shot figcaption {
  margin-top: var(--s-4);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-muted);
}
.shot--a { rotate: -1.2deg; }
.shot--b { rotate: 1.4deg; justify-self: end; }
.shot--c { rotate: -.8deg; justify-self: start; }
.shot--b figcaption { text-align: right; }

@media (max-width: 860px) {
  .shot--a, .shot--b, .shot--c { rotate: 0deg; justify-self: center; }
  .shot--b figcaption { text-align: left; }
}

/* ------------------------------------------------ raccourcis */

.keys {
  border-top: var(--line) solid var(--carbon);
  padding: var(--section) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  max-width: calc(var(--maxw) + 2 * 64px);
  margin-inline: auto;
}
.keys__intro p {
  margin-top: var(--s-4);
  color: var(--ink-on-sky);
  font-weight: 500;
  max-width: 34ch;
}

.keytable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
}
.keytable th, .keytable td { text-align: left; }
.keytable th {
  width: 1%;
  padding-right: var(--s-4);
  white-space: nowrap;
}
.keytable td {
  font-weight: 600;
  font-size: 16px;
  padding: 8px 18px;
  background: var(--paper);
  border: var(--line) solid var(--carbon);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-3);
}

/* ------------------------------------------------ café */

.coffee {
  padding: 0 var(--gutter) var(--section);
}
.coffee__panel {
  max-width: var(--maxw);
  margin-inline: auto;
  background: var(--ember);
  color: var(--carbon);
  border: var(--line) solid var(--carbon);
  border-radius: var(--r-big);
  box-shadow: var(--sh-12);
  padding: clamp(28px, 4vw, 52px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
.coffee__stk {
  display: grid;
  place-items: center;
  width: 76px; height: 76px;
  background: var(--sunburst);
  border: var(--line) solid var(--carbon);
  border-radius: var(--r-stk);
  box-shadow: var(--sh-5);
  rotate: -7deg;
  color: var(--carbon);
}
.coffee h2 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.16;
  font-size: clamp(30px, 3.6vw, 50px);
  letter-spacing: .005em;
  margin-bottom: var(--s-3);
}
.coffee p {
  font-weight: 500;
  max-width: 56ch;
  margin-bottom: var(--s-6);
}
@media (max-width: 620px) {
  .coffee__panel { grid-template-columns: 1fr; }
}

/* ------------------------------------------------ faq */

.faq {
  background: var(--paper);
  border-top: var(--line) solid var(--carbon);
  border-bottom: var(--line) solid var(--carbon);
  padding: var(--section) var(--gutter);
}
.faq > .h2 { max-width: var(--maxw); margin: 0 auto clamp(32px, 4vw, 56px); }
.faq__list {
  max-width: 820px;
  margin-inline: auto;
  display: grid;
  gap: var(--s-3);
}

.qa {
  background: var(--paper);
  border: var(--line) solid var(--carbon);
  border-radius: var(--r-stk);
  box-shadow: var(--sh-3);
  overflow: hidden;
}
.qa[open] { background: var(--sky); box-shadow: var(--sh-5); }

.qa summary {
  list-style: none;
  cursor: pointer;
  padding: 18px var(--s-6);
  padding-right: 60px;
  position: relative;
  font-weight: 700;
  font-size: clamp(16px, 1vw + 13px, 19px);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "";
  position: absolute;
  right: 22px; top: 50%;
  width: 14px; height: 14px;
  margin-top: -7px;
  border-right: 3px solid var(--carbon);
  border-bottom: 3px solid var(--carbon);
  rotate: 45deg;
  transition: rotate .2s var(--ease);
}
.qa[open] summary::after { rotate: -135deg; margin-top: -3px; }

.qa__body {
  padding: 0 var(--s-6) var(--s-6);
}
.qa__body p { font-weight: 500; color: var(--ink-muted); max-width: 62ch; }
.qa[open] .qa__body p { color: var(--ink-on-sky); }

/* ------------------------------------------------ fin */

.end {
  padding: var(--section) var(--gutter);
  text-align: center;
}
.broom--end {
  width: clamp(104px, 11vw, 150px);
  margin: 0 auto var(--s-4);
}
.end__kicker {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-on-sky);
  margin-bottom: var(--s-4);
}
.end__title {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(38px, 7vw, 96px);
  line-height: 1;
  margin-bottom: var(--s-8);
}
.end .note { margin: var(--s-6) auto 0; }

/* ------------------------------------------------ pied */

.foot {
  background: var(--carbon);
  color: var(--paper);
  padding: var(--s-12) var(--gutter);
  display: grid;
  gap: var(--s-6);
  justify-items: center;
  text-align: center;
}
.foot__mark {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--display);
  font-size: 30px;
  letter-spacing: .01em;
  padding-top: 4px;
}
.foot__mark img {
  border: var(--line) solid var(--paper);
  border-radius: 11px;
}
.foot__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--s-6);
  font-weight: 600;
  font-size: 15px;
}
.foot__links a {
  text-decoration: none;
  padding: 11px 2px;
  box-shadow: inset 0 -2px 0 rgb(255 255 255 / .35);
  transition: box-shadow .16s var(--ease);
}
.foot__links a:hover { box-shadow: inset 0 -2px 0 var(--sunburst); }
.foot__links a:focus-visible { outline-color: var(--sunburst); }
.foot__note { font-size: 14px; color: rgb(255 255 255 / .68); }

/* ------------------------------------------------ mouvement réduit */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .ticker__rail { animation: none; }
  .stk { animation: none; transform: rotate(var(--rot)); }
}