/* Site vitrine Weelly : accueil, pages légales, pages de renvoi vers l'app.
   Palette et typographie de la marque, reprises de weelly-motion (src/theme.ts) et de l'app. */

@font-face {
  font-family: Nunito;
  src: url("/assets/fonts/nunito-latin-wght.woff2") format("woff2");
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  /* Marque */
  --sapin: #0c2c28;
  --primary: #184a44;
  --sapin70: #4f6964;
  --menthe: #2d9c65;
  --menthe70: #6cba93;
  --secondary: #c5ddce;
  --light: #e6f2ec;
  --white: #fbfbfb;
  --soleil: #fff460;
  --jaune: #f2c037;
  --ciel: #d6faf2;
  /* Le corail du film (« Bon pour votre santé »), pour la dernière carte. */
  --corail: #ff8e8e;

  /* Rôles */
  --surface-0: var(--white);
  --border: #d3e3da;
  --text-1: var(--sapin);
  --text-2: var(--sapin70);
  --focus: #a8460c;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --section: clamp(56px, 7vw, 104px);

  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-md: 1.1875rem;
  --text-lg: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
  --text-xl: clamp(2.125rem, 1.3rem + 2.6vw, 3.25rem);
  --text-2xl: clamp(2.5rem, 1.4rem + 4vw, 4.5rem);

  --radius-s: 12px;
  --radius-m: 20px;
  --radius-card: 28px;
  --shadow-float: 0 14px 30px -12px rgb(12 44 40 / 0.35);
  --gutter: 20px;
  --inset: 8px;
  --header-h: 0px;
  --wrap: min(1200px, 100% - 2 * var(--gutter));

  color-scheme: light;
  font-family: Nunito, "Trebuchet MS", Arial, sans-serif;
  color: var(--text-1);
  background: var(--surface-0);
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (min-width: 640px) {
  :root {
    --gutter: 40px;
    --inset: 16px;
    --radius-card: 40px;
  }
}

@media (min-width: 760px) {
  :root {
    --header-h: 80px;
  }
}

@media (min-width: 1100px) {
  :root {
    --gutter: 48px;
    --inset: 24px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

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

body {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.6;
  background: var(--surface-0);
}

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

img {
  height: auto;
}

h1,
h2,
h3,
h4,
p,
figure,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4 {
  line-height: 1.08;
  text-wrap: balance;
}

h2 {
  font-size: var(--text-xl);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.14;
}

h3 {
  font-size: var(--text-md);
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Les petits textes s'ouvrent un peu, les grands titres se resserrent. */
small,
.store-link span {
  letter-spacing: 0.01em;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

@media (hover: hover) {
  a:hover {
    text-decoration-thickness: 2px;
  }
}

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

main:focus {
  outline: none;
}

section[id] {
  scroll-margin-top: calc(var(--header-h) + var(--space-4));
}

.wrap {
  width: var(--wrap);
  margin-inline: auto;
}

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

.skip-link {
  position: absolute;
  z-index: 10;
  top: var(--space-4);
  left: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-0);
  font-weight: 700;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* Le surlignage des titres, comme dans les vidéos : un bandeau menthe derrière les mots. */
.band {
  padding: 0 0.14em;
  border-radius: 0.14em;
  /* Un bandeau un peu moins haut que la ligne : il ne mord pas sur la ligne du dessus. */
  background: linear-gradient(var(--menthe), var(--menthe)) 0 65% / 100% 86% no-repeat;
  color: #fff;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Boutons et liens d'action */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-s);
  background: var(--primary);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}

@media (hover: hover) {
  .button:hover {
    background: var(--sapin);
  }
}

.button-small {
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.button-outline {
  border: 2px solid var(--primary);
  background: transparent;
  color: var(--primary);
}

@media (hover: hover) {
  .button-outline:hover {
    background: var(--light);
  }
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--menthe70);
  text-underline-offset: 5px;
}

@media (hover: hover) {
  .text-link:hover {
    text-decoration-color: currentColor;
  }
}

.store-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.store-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-2) var(--space-5) var(--space-2) var(--space-4);
  border-radius: var(--radius-s);
  background: var(--sapin);
  color: #fff;
  text-decoration: none;
}

@media (hover: hover) {
  .store-link:hover {
    background: var(--primary);
  }
}

.store-icon {
  width: 24px;
  height: 28px;
  flex: none;
}

.store-link span {
  font-size: 0.8125rem;
  line-height: 1.25;
}

.store-link strong {
  display: block;
  font-size: var(--text-base);
  font-weight: 800;
}

.store-links-light .store-link {
  background: #fff;
  color: var(--sapin);
}

@media (hover: hover) {
  .store-links-light .store-link:hover {
    background: var(--light);
  }
}

/* Retour à l'appui : la commande s'enfonce dès que le doigt ou le clic se pose,
   sans attendre le relâcher, puis revient en douceur. */
.button,
.store-link,
.film-play,
.video-toggle,
.film-close,
.footer-social a {
  -webkit-tap-highlight-color: transparent;
  transition: background-color 120ms ease, transform 160ms ease-out;
}

.button:active,
.store-link:active,
.film-link:active .film-play,
.video-toggle:active,
.film-close:active,
.footer-social a:active {
  transform: scale(0.96);
  transition-duration: 120ms, 60ms;
}

/* En-tête : logo, navigation, téléchargement. Collant sur ordinateur. */

.site-header {
  background: var(--surface-0);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  padding-top: var(--space-3);
}

.brand {
  display: block;
  border-radius: 4px;
}

.brand img {
  width: 108px;
}

.site-nav {
  order: 3;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.site-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--text-sm);
  font-weight: 800;
  text-decoration: none;
}

@media (hover: hover) {
  .site-nav a:hover {
    color: var(--menthe);
  }
}

/* La section en cours, marquée par vitrine.js. */
.site-nav a[aria-current] {
  box-shadow: inset 0 -3px var(--menthe);
}

@media (max-width: 359px) {
  .site-nav a {
    font-size: 0.8125rem;
  }
}

@media (min-width: 760px) {
  /* Une matière translucide : la page défile dessous au lieu de disparaître. */
  .site-header {
    position: sticky;
    z-index: 5;
    top: 0;
    background: rgb(251 251 251 / 0.82);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
  }

  /* Pas de filet fixe : une ombre douce naît sous l'en-tête dès que du contenu
     passe dessous. */
  @supports (animation-timeline: scroll()) {
    .site-header::after {
      content: "";
      position: absolute;
      inset: 100% 0 auto;
      height: 16px;
      background: linear-gradient(rgb(12 44 40 / 0.08), rgb(12 44 40 / 0));
      opacity: 0;
      pointer-events: none;
      animation: header-edge linear both;
      animation-timeline: scroll();
      animation-range: 0 64px;
    }
  }

  .header-inner {
    flex-wrap: nowrap;
    height: var(--header-h);
    padding: 0;
  }

  .brand img {
    width: 124px;
  }

  .site-nav {
    order: 0;
    width: auto;
    gap: var(--space-6);
  }

  .site-nav a {
    min-height: var(--header-h);
    font-size: 0.9375rem;
  }
}

/* Vidéos d'ambiance : lancées par vitrine.js, avec un bouton pause (WCAG 2.2.2). */

.video-toggle {
  position: absolute;
  z-index: 2;
  right: var(--space-4);
  bottom: var(--space-4);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(12 44 40 / 0.55);
  color: #fff;
  cursor: pointer;
}

.video-toggle::before {
  content: "";
  width: 14px;
  height: 16px;
  border-inline: 4px solid currentColor;
}

.video-toggle[aria-pressed="true"]::before {
  width: 0;
  height: 0;
  margin-left: 4px;
  border-block: 9px solid transparent;
  border-inline: 15px solid currentColor;
  border-inline-end: 0;
}

@media (hover: hover) {
  .video-toggle:hover {
    background: rgb(12 44 40 / 0.8);
  }
}

@keyframes header-edge {
  to {
    opacity: 1;
  }
}

/* Accueil : hero en carte, la vidéo des rues de Poitiers derrière la devise */

.hero {
  padding-inline: var(--inset);
}

.hero-card {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: clamp(600px, calc(100svh - var(--header-h) - 120px), 820px);
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--sapin);
}

.hero-poster,
.hero-video {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 50%;
}

/* La vidéo arrive en fondu par-dessus l'image, une fois qu'elle tourne. */
.hero-video {
  opacity: 0;
  transition: opacity 600ms ease;
}

.hero-video.is-playing {
  opacity: 1;
}

.hero-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(to top, rgb(12 44 40 / 0.92) 0%, rgb(12 44 40 / 0.76) 48%, rgb(12 44 40 / 0.62) 72%, rgb(12 44 40 / 0.3) 100%);
}

.hero-content {
  max-width: 660px;
  padding: var(--space-6) var(--space-5) var(--space-8);
  color: #fff;
}

.hero h1 {
  font-size: var(--text-2xl);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.hero-lead {
  max-width: 36ch;
  margin-top: var(--space-5);
  color: rgb(255 255 255 / 0.92);
  font-size: var(--text-md);
  line-height: 1.5;
}

.hero .store-links {
  margin-top: var(--space-6);
}

.film-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  margin-top: var(--space-5);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}

.film-link small {
  display: block;
  color: rgb(255 255 255 / 0.78);
  font-size: var(--text-sm);
  font-weight: 600;
}

.film-play {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.14);
}

.film-play::before {
  content: "";
  margin-left: 3px;
  border-block: 7px solid transparent;
  border-inline-start: 12px solid #fff;
}

@media (hover: hover) {
  .film-link:hover .film-play {
    background: var(--menthe);
  }
}

/* Le film d'une minute, ouvert par vitrine.js. Il grandit depuis le bouton qui
   l'ouvre (--film-origin) et y retourne à la fermeture, sur la courbe inverse. */
.film {
  width: min(1100px, 100vw - 2 * var(--space-4));
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  transform-origin: var(--film-origin, 50% 50%);
  transition:
    opacity 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
    overlay 280ms allow-discrete,
    display 280ms allow-discrete;
}

.film:not([open]) {
  opacity: 0;
  transition-timing-function: cubic-bezier(0.8, 0, 0.8, 0.2);
}

@starting-style {
  .film[open] {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .film:not([open]) {
    transform: scale(0.85);
  }

  @starting-style {
    .film[open] {
      transform: scale(0.85);
    }
  }
}

.film::backdrop {
  background: rgb(12 44 40 / 0.88);
  transition:
    background-color 280ms ease,
    overlay 280ms allow-discrete,
    display 280ms allow-discrete;
}

.film:not([open])::backdrop {
  background: rgb(12 44 40 / 0);
}

@starting-style {
  .film[open]::backdrop {
    background: rgb(12 44 40 / 0);
  }
}

.film video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-m);
  background: var(--sapin);
}

.film-close {
  display: block;
  min-height: 44px;
  margin: var(--space-3) 0 0 auto;
  padding: 0 var(--space-5);
  border: 2px solid #fff;
  border-radius: var(--radius-s);
  background: transparent;
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

@media (hover: hover) {
  .film-close:hover {
    background: rgb(255 255 255 / 0.14);
  }
}

.film-close:focus-visible {
  outline-color: var(--soleil);
}

@media (min-width: 900px) {
  .hero-card {
    align-items: center;
  }

  .hero-card::before {
    background: linear-gradient(90deg, rgb(12 44 40 / 0.92) 0%, rgb(12 44 40 / 0.68) 40%, rgb(12 44 40 / 0) 72%);
  }

  .hero-content {
    padding: var(--space-8) var(--space-9);
  }
}

/* Accueil : bandeau de confiance */

.proof ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-4);
  padding-block: var(--space-6);
}

.proof li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-2);
  font-size: 0.9375rem;
  line-height: 1.35;
}

.proof-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--light);
  color: var(--menthe);
}

.proof-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.proof strong {
  color: var(--text-1);
  font-weight: 800;
}

@media (min-width: 1000px) {
  .proof ul {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-block: var(--space-7);
  }

  .proof li + li {
    padding-left: var(--space-5);
    border-left: 1px solid var(--border);
  }
}

/* Accueil : fonctionnalités, un téléphone sur un aplat, un texte à coches, en alternance */

.feature {
  padding-block: clamp(40px, 5vw, 72px);
}

.proof + .feature {
  padding-top: var(--space-5);
}

.feature-inner {
  display: grid;
  gap: var(--space-7);
}

.feature-text {
  order: -1;
}

.feature-text > p {
  max-width: 46ch;
  margin-top: var(--space-5);
  color: var(--text-2);
  font-size: var(--text-md);
  line-height: 1.55;
}

.checks {
  margin-top: var(--space-6);
}

.checks li {
  position: relative;
  min-height: 28px;
  padding-left: 42px;
  font-weight: 600;
  line-height: 1.45;
}

.checks li + li {
  margin-top: var(--space-4);
}

.checks li::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--menthe) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 16px no-repeat;
}

/* Le téléphone, entier, passe devant un aplat plus étroit que lui : il dépasse en
   haut et en bas, l'aplat déborde sur les côtés. La boîte .stage a la taille du
   téléphone ; l'aplat et les pièces se placent par rapport à elle (cqw : un
   centième de sa largeur). Chaque aplat est une petite scène dans le style du
   panorama de Poitiers (collines, nuages, toits…), en ton sur ton, que le
   téléphone masque au centre : elle se lit sur les côtés. */
.stage {
  --stage-bg: var(--menthe);
  position: relative;
  width: min(232px, 62vw);
  margin-inline: auto;
  container-type: inline-size;
}

/* L'aplat est une matière : la lumière accroche son bord haut. */
.stage::before {
  content: "";
  position: absolute;
  inset: 10% -24% 6%;
  border-radius: var(--radius-card);
  background:
    var(--stage-scene, none) center bottom / 100% 100% no-repeat,
    linear-gradient(rgb(255 255 255 / 0.18), rgb(255 255 255 / 0) 50%),
    var(--stage-bg);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4);
}

.stage-menthe {
  --stage-bg: var(--menthe);
  --stage-scene: url("/assets/images/vitrine/carte-trajets.svg");
}

.stage-soleil {
  --stage-bg: var(--soleil);
  --stage-scene: url("/assets/images/vitrine/carte-bons-plans.svg");
}

.stage-sapin {
  --stage-bg: var(--primary);
  --stage-scene: url("/assets/images/vitrine/carte-defis.svg");
}

.stage-corail {
  --stage-bg: var(--corail);
  --stage-scene: url("/assets/images/vitrine/carte-dons.svg");
}

.phone {
  position: relative;
  overflow: hidden;
  border: 9px solid #0a1f1c;
  border-radius: 42px;
  background: #0a1f1c;
  box-shadow:
    0 0 0 1.5px #4f6964,
    0 2px 6px rgb(12 44 40 / 0.25),
    0 44px 64px -28px rgb(12 44 40 / 0.6);
}

.phone img {
  width: 100%;
  border-radius: 33px;
}

/* Les Weellies, fil conducteur de la page : des pièces en 3D vues sous plusieurs
   angles. Chaque groupe (.coins) a son geste (data-motion), joué par vitrine.js
   quand sa carte arrive à l'écran ; ici, leur état final, celui qu'on voit sans
   JavaScript ou avec le mouvement réduit. Par défaut, posées dans l'herbe de
   part et d'autre du téléphone, certaines sur les autres (--pile). */
.coins {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.coin {
  position: absolute;
  bottom: calc(9% + var(--pile, 0) * 4.5cqw);
  left: calc(50% + (var(--x) - 50%) * var(--spread));
  width: auto;
  height: 14cqw;
  filter: drop-shadow(0 2px 2px rgb(12 44 40 / 0.35));
  transform: rotate(var(--r));
}

/* Une pièce couchée est plus large que haute. */
.coin-couchee {
  width: 15cqw;
  height: auto;
}

.coins.is-waiting .coin,
.coins.is-waiting .coin-heart {
  opacity: 0;
}

/* Bons plans : les pièces sont passées dans le téléphone, il n'en reste rien. */
.coins[data-motion="spend"] .coin {
  bottom: var(--y);
  opacity: 0;
}

/* Dons : la pièce est devenue un cœur. */
.coins[data-motion="give"] .coin {
  opacity: 0;
}

.coin-heart {
  position: absolute;
  bottom: var(--hy, 30%);
  left: calc(50% + (var(--hx, -17%) - 50%) * var(--spread));
  width: 11cqw;
  height: auto;
  filter: drop-shadow(0 2px 3px rgb(12 44 40 / 0.25));
}

/* Trajets : les pièces flottent autour du téléphone. --x et --y placent chacune
   par rapport à lui, --s donne sa taille, --depth sa profondeur : en défilant,
   les plus proches bougent plus que le téléphone, les plus lointaines moins.
   Sur mobile, elles se resserrent (--spread), ne montent pas au-dessus du
   téléphone, vers le texte, et bougent moins (--drift). */
.coins {
  --spread: 0.74;
  --drift: 32px;
}

/* La pile des défis tient déjà à côté du téléphone. */
.coins-pile {
  --spread: 1;
}

.coins-float .float {
  position: absolute;
  top: max(var(--y), 4%);
  left: calc(50% + (var(--x) - 50%) * var(--spread));
  width: calc(var(--s) * 1cqw);
}

.coins-float .coin {
  position: static;
  width: 100%;
  height: auto;
  /* En l'air : une ombre plus douce et plus portée que celle d'une pièce posée. */
  filter: drop-shadow(0 10px 10px rgb(12 44 40 / 0.28));
}

/* Le plan arrière passe derrière le téléphone (il le précède dans la page). */
.coins-back .coin {
  filter: drop-shadow(0 6px 6px rgb(12 44 40 / 0.2));
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .coins-float .float {
      animation: coin-depth linear both;
      animation-timeline: view();
      animation-range: cover;
    }
  }
}

@keyframes coin-depth {
  from {
    transform: translateY(calc(var(--depth) * var(--drift))) rotate(calc(var(--depth) * -8deg));
  }

  to {
    transform: translateY(calc(var(--depth) * var(--drift) * -1)) rotate(calc(var(--depth) * 8deg));
  }
}

/* Hero : une pièce posée sur le surlignage de « Gagnez. ». */
.hero .band {
  position: relative;
}

.coins-hero .coin {
  right: -0.22em;
  bottom: 82%;
  left: auto;
  width: 0.55em;
  height: auto;
}

/* Profondeur : en défilant, le téléphone glisse un peu plus vite que sa carte. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .phone {
      animation: phone-depth linear both;
      animation-timeline: view();
      animation-range: cover;
    }
  }
}

@keyframes phone-depth {
  from {
    transform: translateY(24px);
  }

  to {
    transform: translateY(-24px);
  }
}

@media (min-width: 640px) {
  .stage {
    width: 248px;
  }

  .coins {
    --spread: 1;
  }
}

/* Deux colonnes : le texte est à côté, les pièces peuvent dépasser en haut. */
@media (min-width: 900px) {
  .coins {
    --drift: 56px;
  }

  .coins-float .float {
    top: var(--y);
  }
}

@media (min-width: 900px) {
  .feature-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-9);
    align-items: center;
  }

  .feature-text {
    order: 0;
  }

  .feature-reverse .feature-visual {
    order: 2;
  }

  .stage {
    width: 264px;
  }
}

/* Accueil : bénéfices. Le titre d'un côté, trois lignes de l'autre ; les
   illustrations restent petites, en tuiles, comme les trophées de l'appli. */

.benefits {
  display: grid;
  gap: var(--space-7);
  padding-block: var(--section);
}

.benefits-head p {
  max-width: 40ch;
  margin-top: var(--space-5);
  color: var(--text-2);
  font-size: var(--text-md);
  line-height: 1.55;
}

.benefit {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
  padding-block: var(--space-5);
  border-top: 1px solid var(--secondary);
}

.benefit:last-child {
  border-bottom: 1px solid var(--secondary);
}

.benefit img {
  width: 88px;
  height: 88px;
  border-radius: 22px;
  box-shadow: 0 0 0 1px rgb(12 44 40 / 0.06), 0 10px 20px -12px rgb(12 44 40 / 0.4);
}

.benefit h3 {
  font-size: var(--text-lg);
  font-weight: 900;
}

.benefit p {
  max-width: 48ch;
  margin-top: var(--space-2);
  color: var(--text-2);
}

@media (min-width: 900px) {
  .benefits {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-9);
    align-items: center;
  }

  .benefit {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: var(--space-6);
    padding-block: var(--space-6);
  }

  .benefit img {
    width: 104px;
    height: 104px;
    border-radius: 26px;
  }
}

/* Accueil : partenaires, la vidéo du comptoir et l'invitation */

.partners-card {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-3) var(--space-3) var(--space-6);
  border-radius: var(--radius-card);
  background: var(--light);
}

.partners-media {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--radius-card) - var(--space-3));
  background: var(--sapin);
  aspect-ratio: 4 / 3;
}

.partners-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.partners-copy {
  padding-inline: var(--space-3);
}

.partners-copy > p {
  max-width: 46ch;
  margin-top: var(--space-4);
  color: var(--text-2);
  font-size: var(--text-md);
  line-height: 1.55;
}

.audiences {
  margin-top: var(--space-5);
}

.audiences li {
  padding-block: var(--space-3);
  border-top: 1px solid var(--secondary);
}

.audiences h3 {
  font-size: var(--text-base);
  font-weight: 900;
}

.audiences p {
  margin-top: var(--space-1);
  color: var(--text-2);
}

.partners-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-5);
}

@media (min-width: 900px) {
  .partners-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: center;
    padding: var(--space-5) var(--space-8) var(--space-5) var(--space-5);
  }

  .partners-media {
    aspect-ratio: 4 / 4.4;
  }

  .partners-copy {
    padding: 0;
  }
}

/* Accueil : questions fréquentes */

.faq {
  display: grid;
  gap: var(--space-6);
  padding-block: var(--section);
}

.faq-head > p {
  margin-top: var(--space-4);
  color: var(--text-2);
}

.faq-head > .button {
  margin-top: var(--space-5);
}

.faq-list details {
  border-bottom: 1px solid var(--border);
}

.faq-list details:first-child {
  border-top: 1px solid var(--border);
}

.faq-list summary {
  position: relative;
  padding: var(--space-4) var(--space-7) var(--space-4) 0;
  font-size: var(--text-md);
  font-weight: 800;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::before,
.faq-list summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--space-2);
  width: 16px;
  height: 2px;
  background: var(--menthe);
}

.faq-list summary::after {
  transform: rotate(90deg);
  transition: transform 200ms ease;
}

.faq-list details[open] > summary::after {
  transform: rotate(0deg);
}

@media (hover: hover) {
  .faq-list summary:hover {
    color: var(--primary);
  }
}

.faq-list details > p {
  max-width: 65ch;
  padding-bottom: var(--space-5);
  color: var(--text-2);
}

/* Ouverture en douceur là où le navigateur sait animer vers height: auto. */
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .faq-list {
      interpolate-size: allow-keywords;
    }

    .faq-list details::details-content {
      height: 0;
      overflow: clip;
      transition: height 240ms ease, content-visibility 240ms allow-discrete;
    }

    .faq-list details[open]::details-content {
      height: auto;
    }
  }
}

@media (min-width: 900px) {
  .faq {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--space-9);
  }

  .faq-head {
    position: sticky;
    top: calc(var(--header-h) + var(--space-6));
    align-self: start;
  }
}

/* Accueil : téléchargement, une carte devant le panorama de Poitiers */

.download {
  padding-inline: var(--inset);
}

.download-card {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: clamp(560px, 74svh, 700px);
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--ciel);
}

.download-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 0 0;
  height: min(100%, max(380px, 48vw));
  background: url("/assets/images/vitrine/poitiers-download.webp") 10% bottom / cover no-repeat;
  mask-image: linear-gradient(to bottom, transparent, #000 96px);
  pointer-events: none;
}

.download-inner {
  align-self: start;
  padding: var(--space-8) var(--space-5) 0;
  text-align: center;
}

.app-icon {
  width: 96px;
  height: 96px;
  margin: 0 auto var(--space-5);
  border-radius: 22px;
  box-shadow: 0 0 0 1px rgb(12 44 40 / 0.06), var(--shadow-float);
}

/* Sans titre : la phrase sous l'icône porte la carte. */
.download-inner > p {
  max-width: 40ch;
  margin: 0 auto;
  text-wrap: balance;
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

/* Une phrase par ligne quand la place le permet. */
.download-inner > p span {
  display: inline-block;
}

.download-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--space-6);
}

.download-options .store-links {
  justify-content: center;
}

.download-qr {
  display: none;
}


@media (min-width: 900px) {
  .download-card::before {
    background-position: center bottom;
  }

  .download-qr {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-left: var(--space-6);
    border-left: 1px solid #a9cbbd;
    text-align: left;
  }

  .download-qr img {
    width: 96px;
    height: 96px;
    padding: 6px;
    border-radius: 10px;
    background: #fff;
  }

  .download-qr figcaption {
    max-width: 15ch;
    font-size: var(--text-sm);
  }

}

/* Pied de page en carte */

.site-footer {
  padding: var(--space-6) var(--inset) var(--inset);
  font-size: var(--text-sm);
}

.footer-card {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-7) var(--space-5) var(--space-5);
  border-radius: var(--radius-card);
  background: var(--light);
}

.footer-brand p {
  margin-top: var(--space-4);
  color: var(--text-2);
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--space-4);
  border: 1px solid var(--secondary);
  border-radius: 999px;
  background: #fff;
  font-weight: 700;
  text-decoration: none;
}

@media (hover: hover) {
  .footer-social a:hover {
    border-color: var(--primary);
  }
}

.footer-col h2 {
  font-size: 0.9375rem;
  font-weight: 900;
  letter-spacing: 0;
}

.footer-col ul {
  margin-top: var(--space-2);
}

.footer-col a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--text-2);
  text-decoration: none;
}

@media (hover: hover) {
  .footer-col a:hover {
    color: var(--text-1);
    text-decoration: underline;
  }
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--secondary);
  color: var(--text-2);
}

.footer-bottom a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
}

@media (min-width: 640px) {
  .footer-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--space-7) var(--space-7) var(--space-5);
  }

  .footer-brand,
  .footer-bottom {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1000px) {
  .footer-card {
    grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
    gap: var(--space-7);
  }

  .footer-brand {
    grid-column: auto;
  }
}

/* Pages légales et pages de renvoi */

.legal {
  max-width: 46rem;
  padding-block: var(--space-6) var(--space-9);
}

.back-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--text-sm);
  font-weight: 700;
}

.legal h1 {
  margin-top: var(--space-5);
  font-size: var(--text-xl);
  font-weight: 900;
  letter-spacing: -0.02em;
}

.legal h2 {
  margin-top: var(--space-7);
  font-size: var(--text-lg);
  font-weight: 850;
  letter-spacing: -0.01em;
}

.legal h1 + p,
.legal h2 + p,
.legal h2 + ul {
  margin-top: var(--space-4);
}

.legal p + p,
.legal p + ul,
.legal ul + p {
  margin-top: var(--space-3);
}

.legal ul {
  padding-left: var(--space-5);
  list-style: disc;
}

.legal li + li {
  margin-top: var(--space-2);
}

.legal li::marker {
  color: var(--primary);
}

.legal .button {
  margin-top: var(--space-6);
}

.legal .highlight,
.legal-note {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--jaune);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  background: var(--light);
}

/* Pages d'information (CGU, mentions, confidentialité, accessibilité) : une carte
   de titre teintée avec son petit paysage, puis un sommaire qui suit la lecture
   (vitrine.js) et des sections numérotées. */

.page-head {
  padding: var(--space-3) var(--inset) 0;
}

.page-card {
  --page-bg: var(--light);
  --page-scene: url("/assets/images/vitrine/page-menthe.svg");
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--space-5) 0 clamp(120px, 14vw, 180px);
  border-radius: var(--radius-card);
  background: var(--page-bg);
}

.page-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--page-scene) right bottom / cover no-repeat;
}

.page-soleil {
  --page-bg: #fff7c2;
  --page-scene: url("/assets/images/vitrine/page-soleil.svg");
}

.page-ciel {
  --page-bg: var(--ciel);
  --page-scene: url("/assets/images/vitrine/page-ciel.svg");
}

.page-corail {
  --page-bg: #ffe4e4;
  --page-scene: url("/assets/images/vitrine/page-corail.svg");
}

.page-card h1 {
  max-width: 18ch;
  margin-top: var(--space-5);
  font-size: clamp(2.25rem, 1.3rem + 3.2vw, 4rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.page-meta {
  margin-top: var(--space-4);
  color: var(--text-2);
  font-weight: 700;
}

.page-layout {
  display: grid;
  gap: var(--space-7);
  padding-block: var(--space-7) var(--section);
}

.page-toc {
  padding: var(--space-5);
  border-radius: var(--radius-m);
  background: var(--light);
}

.page-toc h2 {
  color: var(--text-2);
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0.01em;
}

.page-toc ol {
  margin-top: var(--space-3);
}

.page-toc a {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  padding: 6px 0;
  color: var(--text-2);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
}

.page-toc a span {
  flex: none;
  min-width: 1.4em;
  color: #1e7a4d;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
}

/* La section en cours, marquée par vitrine.js. */
.page-toc a[aria-current] {
  color: var(--sapin);
}

@media (hover: hover) {
  .page-toc a:hover {
    color: var(--sapin);
  }
}

.page-body {
  max-width: 68ch;
  font-size: var(--text-base);
  line-height: 1.7;
}

.page-intro {
  margin-bottom: var(--space-8);
  color: var(--text-1);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.6;
}

.page-body > section + section {
  margin-top: var(--space-8);
}

.page-body section {
  scroll-margin-top: calc(var(--header-h) + var(--space-5));
}

.page-body h2 {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--text-lg);
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.page-num {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-top: -3px;
  border-radius: 12px;
  background: var(--light);
  color: #1e7a4d;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.page-body h2 + * {
  margin-top: var(--space-4);
}

.page-body p + p,
.page-body p + ul,
.page-body ul + p,
.page-body p + dl,
.page-body dl + p {
  margin-top: var(--space-4);
}

.page-body li {
  position: relative;
  padding-left: var(--space-5);
}

.page-body li + li {
  margin-top: var(--space-2);
}

.page-body li::before {
  content: "";
  position: absolute;
  top: 0.68em;
  left: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--menthe);
}

.page-body li ul {
  margin-top: var(--space-2);
}

.page-body li li::before {
  border: 2px solid var(--menthe);
  background: transparent;
}

.page-body a {
  text-decoration-color: var(--menthe70);
}

/* Fiches « libellé : valeur » des mentions légales. */
.page-facts {
  margin: 0;
  border: 1px solid var(--secondary);
  border-radius: var(--radius-m);
  overflow: hidden;
}

.page-facts div {
  display: grid;
  gap: 2px var(--space-5);
  padding: var(--space-3) var(--space-5);
}

.page-facts div + div {
  border-top: 1px solid var(--secondary);
}

.page-facts dt {
  color: var(--text-2);
  font-size: var(--text-sm);
  font-weight: 700;
}

.page-facts dd {
  margin: 0;
  font-weight: 800;
  overflow-wrap: anywhere;
}

@media (min-width: 640px) {
  .page-facts div {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    align-items: baseline;
  }
}

/* Ordinateur : le sommaire reste à côté de la lecture. */
@media (min-width: 1000px) {
  .page-layout {
    grid-template-columns: 260px minmax(0, 68ch);
    gap: var(--space-9);
    justify-content: center;
  }

  .page-toc {
    position: sticky;
    top: calc(var(--header-h) + var(--space-5));
    align-self: start;
    max-height: calc(100svh - var(--header-h) - var(--space-8));
    overflow-y: auto;
  }
}

/* Pages courtes (404, téléchargement) : une carte ciel avec le panorama de
   Poitiers en bas. 404 : « 4 🪙 4 », le zéro est une Weellie qui fait une
   pichenette. */

.scene-card {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: start;
  min-height: clamp(640px, calc(100svh - var(--header-h) - 48px), 860px);
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--ciel);
  text-align: center;
}

.scene-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 0 0;
  height: min(48%, max(260px, 32vw));
  background: url("/assets/images/vitrine/poitiers-download.webp") 10% bottom / cover no-repeat;
  mask-image: linear-gradient(to bottom, transparent, #000 96px);
}

.scene-inner {
  padding-block: var(--space-7) var(--space-8);
}

.lost-code {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.02em;
  color: var(--sapin);
  font-size: clamp(7rem, 3rem + 16vw, 15rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.9;
}

.lost-zero {
  display: block;
  width: 0.86em;
  height: 0.86em;
  margin-inline: -0.02em;
}

.lost-zero img {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0.06em 0.05em rgb(12 44 40 / 0.25));
}

.scene-card h1 {
  margin-top: var(--space-5);
  font-size: var(--text-xl);
  font-weight: 900;
  letter-spacing: -0.02em;
}

.scene-text {
  max-width: 36ch;
  margin: var(--space-4) auto 0;
  color: var(--text-2);
  font-size: var(--text-md);
  font-weight: 600;
}

.scene-card .app-icon {
  width: 112px;
  height: 112px;
  border-radius: 26px;
}

.scene-card .store-links {
  justify-content: center;
  margin-top: var(--space-6);
}

/* Le store de l'appareil passe devant (download.html). */
.store-links .first {
  order: -1;
}

.scene-card .store-links + .text-link {
  margin-top: var(--space-5);
}

.scene-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-6);
}

/* Page partenaires : le hero de l'accueil, plus court, sur la vidéo du comptoir ;
   puis les écrans des espaces partenaires posés sur un aplat, comme les
   téléphones de l'accueil mais en largeur. */

.hero-card-partenaires {
  min-height: clamp(540px, calc(100svh - var(--header-h) - 160px), 720px);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-6);
}

.button-soleil {
  background: var(--soleil);
  color: var(--sapin);
}

@media (hover: hover) {
  .button-soleil:hover {
    background: var(--jaune);
  }
}

.hero .text-link {
  color: #fff;
}

/* La première ligne du titre est aussi longue que le surlignage : la pièce se pose
   au bout de « votre ville. », pas dessus. */
.hero-card-partenaires .coins-hero .coin {
  right: -0.62em;
  bottom: 6%;
}

/* Sur fond clair, le lien du film reprend les couleurs du texte. */
.feature-text .film-link {
  margin-top: var(--space-6);
  color: var(--text-1);
}

.feature-text .film-link small {
  color: var(--text-2);
}

.feature-text .film-play {
  border-color: var(--menthe);
  background: var(--light);
}

.feature-text .film-play::before {
  border-inline-start-color: var(--menthe);
}

@media (hover: hover) {
  .feature-text .film-link:hover .film-play::before {
    border-inline-start-color: #fff;
  }
}

.stage-screen {
  width: 100%;
  max-width: 560px;
}

/* L'écran dépasse en haut de l'aplat, l'aplat déborde un peu sur les côtés et
   en bas. Pas de petite scène : en largeur, elle serait déformée. */
.stage-screen::before {
  inset: 18% -4% -8%;
  background:
    linear-gradient(rgb(255 255 255 / 0.18), rgb(255 255 255 / 0) 50%),
    var(--stage-bg);
}

.screen {
  position: relative;
  overflow: hidden;
  border: 6px solid #0a1f1c;
  border-radius: 20px;
  background: #0a1f1c;
  box-shadow:
    0 0 0 1.5px #4f6964,
    0 2px 6px rgb(12 44 40 / 0.25),
    0 44px 64px -28px rgb(12 44 40 / 0.6);
}

.screen img {
  width: 100%;
  border-radius: 14px;
}

/* Les écrans et les films de la page partenaires montrent un compte de démonstration. */
.visual-note {
  margin-top: var(--space-6);
  color: var(--text-2);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
}

/* Étiquette du public au-dessus d'un titre : une pastille de sa couleur. */
.eyebrow {
  display: block;
  width: fit-content;
  margin-bottom: var(--space-4);
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--eyebrow-bg, var(--light));
  color: var(--sapin);
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.5;
}

.eyebrow-soleil {
  --eyebrow-bg: #fff3a3;
}

.eyebrow-sapin {
  --eyebrow-bg: #e1ebe9;
}

/* « Vous êtes… » : une carte par public, qui mène à sa section. */
.pick {
  padding-top: var(--space-7);
}

.pick h2 {
  font-size: var(--text-lg);
  font-weight: 900;
}

.pick-list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.pick-card {
  --pick-bg: var(--light);
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-2);
  height: 100%;
  padding: var(--space-5) calc(var(--space-5) + 52px) var(--space-5) var(--space-5);
  border-radius: var(--radius-card);
  background: var(--pick-bg);
  color: var(--text-1);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms ease-out;
}

.pick-card:active {
  transform: scale(0.98);
  transition-duration: 60ms;
}

.pick-soleil {
  --pick-bg: #fff7c2;
}

.pick-sapin {
  --pick-bg: #e1ebe9;
}

.pick-name {
  font-size: var(--text-md);
  font-weight: 900;
}

.pick-text {
  color: var(--text-2);
  line-height: 1.45;
}

/* La flèche vers la section : un rond blanc qui passe au sapin au survol. */
.pick-go {
  position: absolute;
  top: 50%;
  right: var(--space-5);
  width: 36px;
  height: 36px;
  margin-top: -18px;
  border-radius: 50%;
  background: #fff;
  transition: background-color 120ms ease;
}

.pick-go::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: 2.5px solid var(--sapin);
  border-right: 2.5px solid var(--sapin);
  transform: translateY(-2px) rotate(135deg);
}

@media (hover: hover) {
  .pick-card:hover .pick-go {
    background: var(--sapin);
  }

  .pick-card:hover .pick-go::before {
    border-color: #fff;
  }
}

@media (min-width: 900px) {
  .pick-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pick-card {
    padding: var(--space-6) var(--space-6) calc(var(--space-6) + 52px);
  }

  .pick-go {
    top: auto;
    bottom: var(--space-6);
    left: var(--space-6);
    margin-top: 0;
  }
}

/* L'assistant IA, mis en avant : une carte sapin au milieu de la page. */
.ai {
  padding: var(--space-6) var(--inset);
}

.ai-card {
  padding-block: var(--space-8);
  border-radius: var(--radius-card);
  background: var(--sapin);
  color: #fff;
}

.ai-card h2 {
  color: #fff;
}

.ai-card .feature-text > p {
  color: rgb(255 255 255 / 0.85);
}

.ai-card .visual-note {
  color: rgb(255 255 255 / 0.7);
}

.ai-card .film-link {
  color: #fff;
}

.ai-card .film-link small {
  color: rgb(255 255 255 / 0.78);
}

.ai-card .film-play {
  border-color: #fff;
  background: rgb(255 255 255 / 0.14);
}

.ai-card .film-play::before {
  border-inline-start-color: #fff;
}

.eyebrow-ia {
  --eyebrow-bg: var(--soleil);
  display: flex;
  align-items: center;
  gap: 6px;
}

.eyebrow-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

@media (min-width: 900px) {
  .ai-card .feature-visual {
    order: 2;
  }
}

/* Le badge à afficher sur le site d'un partenaire : les deux versions, puis le
   code à copier (le bouton n'apparaît qu'avec JavaScript, voir vitrine.js). */
.badge-kit {
  padding-block: var(--section);
}

.badge-head > p {
  max-width: 52ch;
  margin-top: var(--space-4);
  color: var(--text-2);
  font-size: var(--text-md);
}

.badge-grid {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.badge-sample {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-5) var(--space-5);
  border-radius: var(--radius-card);
  background: var(--light);
}

.badge-sample-sombre {
  background: var(--primary);
}

.badge-sample figcaption {
  color: var(--text-2);
  font-size: var(--text-sm);
  font-weight: 700;
}

.badge-sample-sombre figcaption {
  color: rgb(255 255 255 / 0.85);
}

.badge-sample figcaption a {
  color: inherit;
}

.badge-code {
  margin-top: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: #fff;
}

.badge-code-label {
  font-weight: 800;
}

.badge-code pre {
  margin: var(--space-3) 0 var(--space-4);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text-1);
  font-size: 0.8125rem;
  line-height: 1.55;
}

.badge-code code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* .button sert d'ordinaire à des liens : un <button> reprend la police du site. */
.badge-code .button {
  border: 0;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 800;
  cursor: pointer;
}

.badge-help {
  margin-top: var(--space-4);
  color: var(--text-2);
  font-size: var(--text-sm);
}

@media (min-width: 900px) {
  .badge-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Comment ça marche : un parcours par public, trois étapes numérotées. */
.tracks {
  display: grid;
  gap: var(--space-7);
  margin-top: var(--space-6);
}

.track h3 {
  font-size: inherit;
}

.track .step-list {
  margin-top: 0;
}

.track-soleil .step {
  background: #fff7c2;
}

.track-soleil .step::before {
  background: var(--jaune);
  color: var(--sapin);
}

.tracks-note {
  margin-top: var(--space-6);
  color: var(--text-2);
}

.tracks-note a {
  color: var(--text-1);
  font-weight: 800;
  white-space: nowrap;
}

/* Comment ça marche : trois étapes numérotées. */
.steps {
  padding-block: var(--section);
}

.steps-head > p {
  max-width: 46ch;
  margin-top: var(--space-4);
  color: var(--text-2);
  font-size: var(--text-md);
}

.step-list {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
  counter-reset: step;
}

.step {
  padding: var(--space-5);
  border-radius: var(--radius-card);
  background: var(--light);
  counter-increment: step;
}

.step::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: var(--menthe);
  color: #fff;
  font-weight: 900;
}

.step h4 {
  font-size: var(--text-md);
  font-weight: 900;
}

.step p {
  margin-top: var(--space-2);
  color: var(--text-2);
}

@media (min-width: 900px) {
  .step-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Préférences système : sans transparence, l'en-tête redevient opaque ; en
   contraste élevé, textes secondaires foncés et contours nets. */
@media (prefers-reduced-transparency: reduce) {
  .site-header {
    background: var(--surface-0);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --text-2: var(--sapin);
  }

  .site-header {
    background: var(--surface-0);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 1px 0 var(--sapin);
  }

  .hero-lead,
  .film-link small {
    color: #fff;
  }
}