/* ==========================================================
   LAVOIR LUX — Laverie automatique en libre-service
   DA : bordeaux (laver), bleu canard (sécher), terracotta,
   crème quadrillé, formes ondulées — Bebas Neue + Saira
   ========================================================== */

@property --ink {
  syntax: '<color>';
  inherits: true;
  initial-value: #7b2a2c;
}

:root {
  /* Couleurs relevées sur les affiches */
  --bordeaux: #7b2a2c;
  --terracotta: #aa5537;
  --canard: #346264;
  --creme: #efe9de;
  --gris: #6f7370;
  /* Nuances dérivées pour l'écran */
  --creme-2: #e5ddcf;
  --creme-3: #d9cebd;
  --texte: #555955;

  /* Typographie */
  --font-display: 'Bebas Neue', 'Oswald', 'Arial Narrow', Impact, sans-serif;
  --font-body: 'Saira', 'Barlow', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fs-xl: clamp(64px, 10vw, 150px);
  --fs-l: clamp(52px, 7vw, 100px);
  --fs-m: clamp(40px, 5.6vw, 84px);
  --fs-body: clamp(17px, 1.4vw, 20px);

  /* Espacements */
  --gutter: clamp(16px, 2.2vw, 32px);
  --section-gap: clamp(90px, 10vw, 140px);
  --circle: 50px;

  /* Courbes d'animation */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
}

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

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

html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--texte);
  font-family: var(--font-body);
  font-stretch: 94%;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

::selection { background: var(--terracotta); color: var(--creme); }

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
b, strong { font-weight: 700; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg { display: block; }
sup { font-size: .6em; line-height: 0; }

:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 4px; border-radius: 4px; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; left: 16px; top: -80px; z-index: 2000;
  padding: 10px 16px; border-radius: 10px;
  background: var(--bordeaux); color: var(--creme); font-weight: 600;
}
.skip-link:focus { top: 16px; }

/* Papier quadrillé des affiches */
.grid-paper {
  background-color: var(--creme);
  background-image:
    linear-gradient(to right, var(--grid-c, rgba(123, 42, 44, .3)) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-c, rgba(123, 42, 44, .3)) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: -1px -1px;
}

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

.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-stretch: normal;
  line-height: .9;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--terracotta);
}

.echo { color: var(--bordeaux); }
.h-xl { font-size: var(--fs-xl); }

.label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--bordeaux);
}

.link {
  background: linear-gradient(var(--terracotta), var(--terracotta)) no-repeat 0 100% / 0 2px;
  transition: background-size .5s var(--ease-out), color .3s;
  padding-bottom: 2px;
}
.link:hover { background-size: 100% 2px; }

/* Masques de lignes : le texte monte depuis le bas */
.line {
  display: block;
  /* On ne coupe que sous la ligne : les accents restent visibles au-dessus */
  clip-path: inset(-.5em -.3em -.14em -.3em);
}
.line__in { display: block; }

.js [data-lines] .line__in {
  transform: translate3d(0, 130%, 0);
  transition: transform 1.2s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.js [data-lines].is-in .line__in { transform: none; }

/* Apparition douce */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Lettres découpées */
.split__word { display: inline-block; white-space: nowrap; }
.char { display: inline-block; --flash: var(--terracotta); }
.char > span { display: inline-block; transform-origin: 50% 90%; }
.char.is-bouncing > span { animation: squish .8s var(--ease-out); }

/* La lettre s'écrase puis rebondit, comme du linge mouillé */
@keyframes squish {
  0%   { transform: none; }
  18%  { transform: scale(1.1, .86) translateY(3%); }
  42%  { transform: scale(.94, 1.1) translateY(-9%); color: var(--flash); }
  66%  { transform: scale(1.03, .97) translateY(1%); }
  100% { transform: none; }
}

/* ---------- Pastilles fixes ---------- */

.circle-btn {
  width: var(--circle);
  height: var(--circle);
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bordeaux);
  color: var(--creme);
  transition: background-color .45s, color .45s, opacity .4s, scale .6s var(--ease-back), translate .6s var(--ease-out);
}
.circle-btn:hover { scale: 1.1; }

.header {
  position: fixed;
  inset: var(--gutter) var(--gutter) auto;
  z-index: 900;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.header > * { pointer-events: auto; }

.menu-toggle__lines { position: relative; width: 18px; height: 12px; }
.menu-toggle__lines i {
  position: absolute; left: 0;
  width: 100%; height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .55s var(--ease-in-out), opacity .3s, width .45s var(--ease-out);
}
.menu-toggle__lines i:nth-child(1) { top: 0; }
.menu-toggle__lines i:nth-child(2) { top: 5px; width: 62%; }
.menu-toggle__lines i:nth-child(3) { top: 10px; }
.menu-toggle:hover .menu-toggle__lines i:nth-child(2) { width: 100%; }

.header-on-dark .menu-toggle { background: var(--terracotta); }
.menu-open .menu-toggle { background: var(--creme); color: var(--bordeaux); }
.menu-open .menu-toggle__lines i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-open .menu-toggle__lines i:nth-child(2) { opacity: 0; }
.menu-open .menu-toggle__lines i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Le hublot : bleu canard, comme les sèche-linge */
.brand { background: var(--canard); }
.brand__svg { width: 100%; height: 100%; }
.brand__track { fill: none; stroke: rgba(239, 233, 222, .3); stroke-width: 2.4; }
.brand__progress {
  fill: none;
  stroke: var(--creme);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 88;
  stroke-dashoffset: calc(88 - var(--progress, 0) * 88);
}
.brand__drum { fill: var(--creme); transform-box: view-box; transform-origin: 25px 25px; }
.brand:hover .brand__drum { animation: drum-spin .9s var(--ease-in-out); }
.menu-open .brand { opacity: 0; pointer-events: none; }

@keyframes drum-spin { to { rotate: 360deg; } }

/* ---------- Menu plein écran ---------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: var(--bordeaux);
  color: var(--creme);
  clip-path: circle(0 at var(--mx, 49px) var(--my, 49px));
  visibility: hidden;
  transition: clip-path .9s var(--ease-in-out), visibility 0s .9s;
}
.menu-open .menu {
  clip-path: circle(150vmax at var(--mx, 49px) var(--my, 49px));
  visibility: visible;
  transition: clip-path .9s var(--ease-in-out), visibility 0s 0s;
}

.menu__inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--gutter) + var(--circle) + 32px) var(--gutter) var(--gutter);
  overflow-y: auto;
}

.menu__list { display: flex; flex-direction: column; align-items: flex-start; }

.menu__link {
  display: inline-flex;
  align-items: flex-start;
  gap: 14px;
  font-family: var(--font-display);
  text-transform: uppercase;
  /* « Infos pratiques » (le plus long) doit tenir sur une ligne */
  font-size: clamp(32px, min(10.5vh, calc((100vw - 2 * var(--gutter) - 30px) / 5.4)), 124px);
  line-height: .92;
  white-space: nowrap;
  translate: 0 60%;
  opacity: 0;
  transition: translate .9s var(--ease-out), opacity .6s;
  --roll-color: var(--creme);
}
.menu-open .menu__link { translate: none; opacity: 1; }
.menu-open .menu__list li:nth-child(1) .menu__link { transition-delay: .32s; }
.menu-open .menu__list li:nth-child(2) .menu__link { transition-delay: .38s; }
.menu-open .menu__list li:nth-child(3) .menu__link { transition-delay: .44s; }
.menu-open .menu__list li:nth-child(4) .menu__link { transition-delay: .5s; }
.menu-open .menu__list li:nth-child(5) .menu__link { transition-delay: .56s; }
.menu-open .menu__list li:nth-child(6) .menu__link { transition-delay: .62s; }
.menu-open .menu__list:hover .menu__link { opacity: .4; transition-delay: 0s; }
.menu-open .menu__list:hover .menu__link:hover { opacity: 1; }

.menu__num {
  min-width: 2.2ch;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  padding-top: .5em;
}

/* Effet « rouleau » : chaque lettre roule vers le haut */
.roll .split {
  display: inline-block;
  vertical-align: top;
  clip-path: inset(-.18em -.05em -.04em -.05em);
}
.roll .char > span {
  text-shadow: 0 1.15em 0 var(--roll-color, currentColor);
  transition: translate .65s var(--ease-in-out);
  transition-delay: calc(var(--ci, 0) * 14ms);
}
.menu__link:hover .roll .char > span,
.menu__link:focus-visible .roll .char > span { translate: 0 -1.15em; }

.menu__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 56px;
  margin-top: clamp(28px, 5vh, 56px);
  font-size: 16px;
  font-weight: 500;
  opacity: 0;
  transition: opacity .6s;
}
.menu-open .menu__foot { opacity: 1; transition-delay: .7s; }
.menu .link { background-image: linear-gradient(var(--creme), var(--creme)); }

/* ---------- Intro « prélavage » ---------- */

.loader { display: none; }
.js.is-loading .loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--gutter);
  background: var(--bordeaux);
  color: var(--creme);
  clip-path: inset(0 0 0 0);
  transition: clip-path 1s var(--ease-in-out);
  animation: loader-failsafe 0s 6s forwards;
}
.js.is-loading .loader.is-done { clip-path: inset(0 0 100% 0); }

.loader__label { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.loader__count {
  display: flex;
  align-items: flex-start;
  font-family: var(--font-display);
  font-size: clamp(150px, 36vw, 480px);
  line-height: .78;
  font-variant-numeric: tabular-nums;
}
.loader__pct { font-size: .32em; margin: .06em 0 0 .05em; color: var(--terracotta); }

@keyframes loader-failsafe { to { visibility: hidden; } }

/* ---------- Curseur ---------- */

.cursor { display: none; }
.has-cursor .cursor { display: block; }
.has-cursor, .has-cursor * { cursor: none !important; }

.cursor {
  --c: var(--terracotta);
  --c-ink: var(--creme);
  position: fixed;
  left: 0; top: 0;
  z-index: 1100;
  pointer-events: none;
  transition: opacity .3s;
}
.cursor[data-color="creme"] { --c: var(--creme); --c-ink: var(--bordeaux); }
.cursor.is-hidden { opacity: 0; }

.cursor__dot,
.cursor__ring {
  position: fixed;
  left: 0; top: 0;
  border-radius: 50%;
}
.cursor__dot {
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  background: var(--c);
  transition: scale .35s var(--ease-out), background-color .3s;
}
.cursor__ring {
  width: 104px; height: 104px;
  margin: -52px 0 0 -52px;
  display: grid;
  place-items: center;
  border: 3px solid var(--c);
  scale: .35;
  transition: scale .55s var(--ease-out), background-color .35s, border-color .35s;
}
.cursor__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.05;
  color: var(--c-ink);
  opacity: 0;
  scale: .6;
  transition: opacity .25s, scale .45s var(--ease-out);
  padding: 0 10px;
}
.cursor.is-link .cursor__ring { scale: .62; }
.cursor.is-link .cursor__dot { scale: 0; }
.cursor.is-label .cursor__ring { scale: 1; background: var(--c); }
.cursor.is-label .cursor__dot { scale: 0; }
.cursor.is-label .cursor__label { opacity: 1; scale: 1; transition-delay: .08s; }
.cursor.is-down .cursor__ring { scale: .3; }

/* ---------- Pastille d'ouverture ---------- */

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 15px 8px 12px;
  border-radius: 9999px;
  background: var(--creme-2);
  color: var(--texte);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
}
.status-pill__dot {
  position: relative;
  width: 8px; height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--canard);
}
.status-pill__dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: ping 1.8s var(--ease-out) infinite;
}
.status-pill.is-closed .status-pill__dot { background: var(--terracotta); }
.status-pill.is-closed .status-pill__dot::after,
.status-pill.is-unknown .status-pill__dot::after { animation: none; }

@keyframes ping {
  from { transform: scale(1); opacity: .55; }
  to   { transform: scale(3.2); opacity: 0; }
}

/* ==========================================================
   HERO
   ========================================================== */

.hero {
  /* Taille du titre : tient en largeur ET en hauteur d'écran */
  --hero-fs: min(calc((100vw - 2 * var(--gutter)) / 3.42), calc((100svh - 330px) / 2.7));
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--gutter) + var(--circle) + 24px) var(--gutter) clamp(24px, 4.5vh, 48px);
  overflow: hidden;
}

.hero__top {
  position: absolute;
  z-index: 3;
  top: var(--gutter);
  left: calc(var(--gutter) + var(--circle) + 12px);
  height: var(--circle);
  display: flex;
  align-items: center;
}

.hero__bottom { position: relative; z-index: 2; }
.hero__label { margin-bottom: clamp(12px, 2.4vh, 26px); }

.hero__title {
  font-size: var(--hero-fs);
  margin-left: -.02em;
}
/* Chaque ligne prend la couleur de son étape : laver, sécher, plier */
.hero__title .line:nth-child(1) { color: var(--bordeaux); }
.hero__title .line:nth-child(2) { color: var(--canard); }
.hero__title .line:nth-child(3) { color: var(--terracotta); }
.hero__title .line:nth-child(3) .char { --flash: var(--bordeaux); }

/* Seules les lettres captent la souris : le hublot reste survolable */
.hero__bottom,
.hero__title,
.hero__title .line { pointer-events: none; }
.hero__title .char,
.hero__label,
.hero__aside { pointer-events: auto; }

.hero__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-top: clamp(18px, 3vh, 28px);
}
.hero__intro { max-width: 34ch; font-size: clamp(16px, 1.3vw, 19px); }

/* Grand écran : le titre laisse de la place au texte, en bas à droite */
@media (min-width: 1100px) {
  .hero { --hero-fs: min(calc((100vw - 2 * var(--gutter)) * .7 / 3.31), calc((100svh - 200px) / 2.7)); }
  .hero__aside {
    position: absolute;
    right: 0;
    bottom: calc(var(--hero-fs) * .14);
    margin: 0;
  }
  .hero__intro { max-width: 30ch; }
}

/* Hublot */
.porthole {
  position: absolute;
  z-index: 1;
  top: calc(var(--gutter) + var(--circle) + 4vh);
  right: calc(var(--gutter) + 5vw);
  width: min(32vw, 42vh);
  aspect-ratio: 1;
}
.porthole__spin { width: 100%; height: 100%; }
.porthole svg { width: 100%; height: 100%; overflow: visible; }
.porthole__frame { fill: var(--canard); }
.porthole__text {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
  fill: var(--creme);
}
.porthole__seal { fill: none; stroke: var(--bordeaux); stroke-width: 13; }
.porthole__glass { fill: var(--creme); }
.porthole__water { fill: var(--terracotta); }
.porthole__water--back { fill: var(--bordeaux); }
.porthole__shine { fill: none; stroke: var(--creme); stroke-width: 9; stroke-linecap: round; opacity: .9; }
.porthole__bubbles circle {
  fill: var(--creme);
  transform-box: fill-box;
  animation: bubble-rise 4.5s linear infinite;
}
.porthole__bubbles circle:nth-child(2) { animation-duration: 3.6s; animation-delay: -1.2s; }
.porthole__bubbles circle:nth-child(3) { animation-duration: 5.2s; animation-delay: -2.6s; }
.porthole__bubbles circle:nth-child(4) { animation-duration: 3.2s; animation-delay: -.6s; }
.porthole__bubbles circle:nth-child(5) { animation-duration: 4.1s; animation-delay: -3.1s; }

@keyframes bubble-rise {
  0%   { transform: translateY(0); opacity: 0; }
  15%  { opacity: .95; }
  70%  { opacity: .9; }
  100% { transform: translateY(-120px); opacity: 0; }
}

.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}
.scroll-cue svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  animation: cue 2.2s var(--ease-in-out) infinite;
}
.scroll-cue:hover { color: var(--terracotta); }

@keyframes cue {
  0%, 100% { transform: translateY(-3px); }
  50%      { transform: translateY(4px); }
}

/* Entrée du hero après l'intro */
.js .hero .line__in { transform: translate3d(0, 130%, 0); }
.js .hero .hero__label,
.js .hero .hero__top,
.js .hero .hero__aside { opacity: 0; translate: 0 20px; }
.js .hero .porthole { opacity: 0; scale: .7; }

.js .hero.is-in .line__in { transform: none; transition: transform 1.3s var(--ease-out) calc(var(--i, 0) * 110ms); }
.js .hero.is-in .hero__label,
.js .hero.is-in .hero__top,
.js .hero.is-in .hero__aside { opacity: 1; translate: none; transition: opacity 1s .5s, translate 1.2s var(--ease-out) .5s; }
.js .hero.is-in .porthole { opacity: 1; scale: 1; transition: opacity .8s .2s, scale 1.6s var(--ease-out) .2s; }
.js .hero.is-done .line { clip-path: none; }

/* ==========================================================
   BANDEAUX DÉFILANTS
   ========================================================== */

.marquee {
  position: relative;
  overflow: hidden;
  padding: clamp(50px, 7vw, 110px) 0;
}
.marquee__band {
  position: relative;
  width: 110%;
  margin-left: -5%;
  padding: .26em 0 .16em;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: clamp(44px, 6vw, 88px);
  line-height: .9;
  text-transform: uppercase;
  color: var(--creme);
}
.marquee__band--a { z-index: 2; background: var(--bordeaux); rotate: -2.5deg; }
.marquee__band--b { z-index: 1; background: var(--canard); rotate: 2deg; margin-top: -.5em; }

.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__group { display: flex; align-items: center; flex: none; }
.marquee__group > span { padding: 0 .32em; }
.marquee__sep {
  flex: none;
  width: .36em; height: .36em;
  border-radius: 50%;
  background: var(--terracotta);
}

/* ==========================================================
   01 — L'ESPRIT
   ========================================================== */

.manifesto { padding: var(--section-gap) var(--gutter); }

.manifesto__text {
  margin-top: 28px;
  font-size: clamp(46px, 7.8vw, 120px);
  line-height: .92;
  color: var(--bordeaux);
}
.manifesto__text em { font-style: normal; color: var(--terracotta); }

.js .manifesto__text .w { color: var(--creme-3); transition: color .45s var(--ease-out); }
.js .manifesto__text .w.is-on { color: var(--bordeaux); }
.js .manifesto__text .w.is-accent.is-on { color: var(--terracotta); }

.manifesto__aside {
  max-width: 38ch;
  margin: clamp(48px, 7vw, 100px) 0 0 auto;
}

/* ==========================================================
   02 — MODE D'EMPLOI (sur papier quadrillé)
   ========================================================== */

.steps {
  --ink: var(--bordeaux);
  --grid-c: color-mix(in srgb, var(--ink) 30%, transparent);
  position: relative;
  padding: var(--section-gap) var(--gutter);
  transition: --ink .8s var(--ease-out);
}
.steps.is-dry { --ink: var(--canard); }
.steps__sticky { position: relative; }

.steps__track { display: grid; gap: 28px; justify-items: start; }

.steps__intro { padding-bottom: 12px; }
.steps__intro--dry { margin-top: 70px; }
.steps__title { font-size: clamp(60px, 8.4vw, 132px); margin-top: 20px; }
.steps__title .line:first-child { color: var(--bordeaux); }
.steps__intro--dry .steps__title .line:first-child { color: var(--canard); }
.steps__title .echo { color: var(--terracotta); }
.steps__meta { margin-top: 22px; font-size: 15px; font-weight: 600; color: var(--bordeaux); }
.steps__intro--dry .steps__meta { color: var(--canard); }
.steps__hint { display: none; margin-top: 34px; font-size: 14px; font-weight: 600; }
.steps__hint span { display: inline-block; animation: nudge 1.8s var(--ease-in-out) infinite; }

@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(8px); }
}

/* Les cartes des affiches */
.card {
  --card-ink: var(--bordeaux);
  --num-bg: var(--terracotta);
  --enter: 1;
  --tilt: 1;
  position: relative;
  width: min(100%, 420px);
  padding: 28px 26px 30px;
  border: 2px solid var(--card-ink);
  border-radius: 28px;
  background: var(--creme);
  transition: translate .6s var(--ease-out);
}
.card:nth-child(even) { --tilt: -1; }
.card--dry { --card-ink: var(--canard); --num-bg: var(--canard); }
.card:hover { translate: 0 -8px; }

.card__num {
  width: 58px; height: 58px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  padding-top: .08em;
  border-radius: 50%;
  background: var(--num-bg);
  color: var(--creme);
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1;
}
.card:hover .card__num { animation: jelly .7s var(--ease-out); }
.card__title {
  margin: 18px 0 14px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 2.7vw, 42px);
  line-height: .95;
  text-align: center;
  text-transform: uppercase;
  color: var(--terracotta);
}
.card__list li {
  position: relative;
  margin-top: 10px;
  padding-left: 16px;
  font-size: 17px;
  line-height: 1.3;
}
.card__list li::before {
  content: '';
  position: absolute;
  left: 0; top: .55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--card-ink);
}

.card--alert { background: var(--canard); color: var(--creme); }
.card--alert .card__title { color: var(--creme); }
.card__num--alert { background: var(--terracotta); }
.card--alert .card__list li::before { background: var(--terracotta); }

@keyframes jelly {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.18, .86); }
  55%  { transform: scale(.9, 1.1); }
  75%  { transform: scale(1.04, .97); }
  100% { transform: scale(1); }
}

/* Le bac à produits (repris de l'affiche) */
.bac {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 16px;
  align-items: center;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1.5px dashed color-mix(in srgb, var(--bordeaux) 40%, transparent);
}
.bac__svg { width: 92px; height: auto; overflow: visible; }
.bac__svg path { fill: none; stroke: var(--bordeaux); stroke-width: 8; stroke-linejoin: round; }
.bac__dot { fill: var(--bordeaux); }
.bac__legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  font-size: 13px;
  line-height: 1.2;
  color: var(--bordeaux);
}
.bac__legend b {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* Températures du sèche-linge */
.temps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 16px;
}
.temps li {
  padding: 8px 10px 6px;
  border: 1.5px solid var(--canard);
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: center;
  color: var(--canard);
  transition: background-color .3s, color .3s;
}
.temps li:hover { background: var(--canard); color: var(--creme); }

/* Mobile ou sans JS : les cartes arrivent une à une */
.js .steps:not(.is-horizontal) .card {
  opacity: 0;
  transform: translate3d(0, 50px, 0) rotate(calc(var(--tilt) * 3deg));
  transition: opacity .8s, transform 1.1s var(--ease-out), translate .6s var(--ease-out);
}
.js .steps:not(.is-horizontal) .card.is-in { opacity: 1; transform: none; }

.steps__progress { display: none; }

/* Défilement horizontal sur papier quadrillé (ordinateur et téléphone) */
@media all {
  .js .steps { padding: 0; }
  .js .steps__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Le quadrillage reste fixe : les cartes glissent dessus */
    background: inherit;
  }
  .js .steps__track {
    display: flex;
    align-items: center;
    gap: 28px;
    width: max-content;
    padding: 0 var(--gutter);
    will-change: transform;
  }
  .js .steps__intro { flex: none; width: min(56vw, 760px); padding: 0 4vw 0 0; }
  .js .steps__intro--dry { width: min(48vw, 680px); margin: 0 0 0 6vw; }
  .js .steps__hint { display: block; }
  .js .card {
    flex: none;
    width: clamp(290px, 23vw, 350px);
    min-height: min(56vh, 440px);
    transform:
      translate3d(0, calc((1 - var(--enter)) * 70px), 0)
      rotate(calc((1 - var(--enter)) * var(--tilt) * 7deg));
    opacity: calc(.25 + var(--enter) * .75);
  }
  .js .card--wide { width: clamp(330px, 28vw, 420px); }
  .js .card__num { scale: calc(.55 + var(--enter) * .45); }
  .js .card--alert { margin-right: 12vw; }
  .js .steps__progress {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    bottom: clamp(24px, 4vh, 40px);
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .steps__phase { min-width: 10ch; }
  .steps__rail { position: relative; flex: 1; height: 2px; background: var(--creme-3); overflow: hidden; }
  .steps__bar {
    position: absolute;
    inset: 0;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: 0 50%;
  }
}

/* Sur téléphone : une carte à la fois, qui glisse sous le doigt */
@media (max-width: 899px) {
  .js .steps__track { gap: 18px; }
  .js .steps__intro { width: 86vw; padding-right: 6vw; }
  .js .steps__intro--dry { width: 86vw; margin-left: 10vw; }
  .js .card,
  .js .card--wide { width: 80vw; min-height: 0; }
  .js .card--alert { margin-right: 10vw; }
  .js .steps__hint { display: block; }
}

/* Retour au toucher : les éléments réagissent au doigt */
@media (hover: none) {
  .tag:active,
  .mdot:active,
  .card:active .card__num { animation: jelly .7s var(--ease-out); }
  .card:active { translate: 0 -6px; }
  .circle-btn:active { scale: .92; }
}

/* ==========================================================
   03 — LE RÉSULTAT
   ========================================================== */

.clean { position: relative; }
.js .clean { height: 230vh; }

.clean__sticky {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: var(--section-gap) var(--gutter);
}
.js .clean__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  padding-top: calc(var(--gutter) + var(--circle) + 28px);
  padding-bottom: clamp(28px, 5vh, 56px);
  overflow: hidden;
}

.clean__head { display: flex; justify-content: space-between; gap: 24px; }
.clean__status { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--bordeaux); }
.clean__status b { font-weight: 700; color: var(--terracotta); }

.clean__word {
  --fill: 1.1;
  font-size: min(calc((100vw - 2 * var(--gutter)) / 2.62), 54vh);
  line-height: .86;
  margin-left: -.02em;
  color: transparent;
  background-color: var(--creme-3);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600' preserveAspectRatio='none'%3E%3Cpath d='M0 300 Q75 266 150 300 T300 300 T450 300 T600 300 V600 H0 Z' fill='%23aa5537'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600' preserveAspectRatio='none'%3E%3Cpath d='M0 300 Q75 334 150 300 T300 300 T450 300 T600 300 V600 H0 Z' fill='%237b2a2c'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 600px 200%;
  background-position-x: 0, 0;
  background-position-y: calc(var(--fill) * 100%), calc(var(--fill) * 100% - .07em);
  -webkit-background-clip: text;
  background-clip: text;
  animation: clean-waves 7s linear infinite;
  padding-top: .04em;
}
.js .clean__word { --fill: -.06; }

@keyframes clean-waves {
  to { background-position-x: 600px, -600px; }
}

.clean__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px 48px;
}
.clean__echo { font-size: var(--fs-l); color: var(--canard); }
.js .clean__echo {
  opacity: 0;
  translate: 0 40px;
  transition: opacity .8s, translate 1.2s var(--ease-out);
}
.js .clean.is-done .clean__echo { opacity: 1; translate: none; }
.clean__text { max-width: 42ch; }

/* ==========================================================
   04 — TARIFS (l'affiche : forme crème ondulée sur terracotta)
   ========================================================== */

.prices {
  position: relative;
  isolation: isolate;
  padding: clamp(40px, 5vw, 70px) clamp(12px, 2.4vw, 36px);
  background: var(--terracotta);
}
.prices__blob {
  position: absolute;
  z-index: -1;
  inset: clamp(18px, 2.6vw, 40px);
}
.prices__blob svg { width: 100%; height: 100%; overflow: visible; }
.prices__blob path { fill: var(--creme); }

.prices__inner { padding: clamp(56px, 7vw, 110px) clamp(36px, 7vw, 130px) clamp(80px, 9vw, 130px); }
.prices__title { font-size: clamp(110px, 19vw, 280px); margin-top: 10px; }

.prices__groups {
  display: flex;
  flex-wrap: wrap;
  gap: 48px clamp(40px, 6vw, 96px);
  margin-top: clamp(32px, 4vw, 56px);
}
.prices__h { font-size: clamp(40px, 4.4vw, 64px); margin-bottom: 18px; }
.prices__h--wash { color: var(--bordeaux); }
.prices__h--dry { color: var(--canard); }
.prices__h--soap { color: var(--terracotta); }

.tags { display: flex; flex-wrap: wrap; gap: 14px; }
.tag {
  --r: 0deg;
  width: clamp(124px, 11.5vw, 168px);
  aspect-ratio: 5 / 6;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  border-radius: clamp(28px, 2.8vw, 42px);
  color: var(--creme);
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  rotate: var(--r);
  transition: rotate .7s var(--ease-back), scale .6s var(--ease-back), translate .5s var(--ease-out);
}
.tag span { text-transform: uppercase; }
.tag--wash { background: var(--bordeaux); }
.tag--dry { background: var(--canard); }
.tag--soap { background: var(--terracotta); }
.tag:hover { rotate: calc(var(--r) * -2 - 3deg); scale: 1.07; }

/* Pop-in des pastilles (tarifs, machines) */
.js [data-pills]:not(.is-in) > li { scale: 0; }
.js [data-pills].is-in > li {
  animation: pop .9s var(--ease-back) backwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes pop {
  from { scale: 0; rotate: calc(var(--r, 0deg) * 4); }
}

/* ==========================================================
   SECTIONS GÉNÉRIQUES
   ========================================================== */

.section { padding: var(--section-gap) var(--gutter); }

.section-head {
  display: grid;
  gap: 24px;
  margin-bottom: clamp(48px, 7vw, 100px);
}
.section-head__text { max-width: 40ch; justify-self: end; margin-top: 12px; }

/* Lignes éditoriales (paiement, infos) */
.rows { border-top: 1px solid var(--creme-3); }
.row {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  gap: 16px 28px;
  padding: clamp(18px, 2.4vw, 30px) clamp(8px, 1.2vw, 18px);
  border-bottom: 1px solid var(--creme-3);
  transition: opacity .4s;
}
.row::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--creme-2);
  transform: scaleY(0);
  transform-origin: 50% var(--from, 100%);
  transition: transform .6s var(--ease-out);
}
.row[data-from="top"] { --from: 0%; }
.row.is-hover::before { transform: scaleY(1); }
@media (hover: hover) {
  .rows:has(.is-hover) .row:not(.is-hover) { opacity: .45; }
}

.row__idx { font-size: 13px; font-weight: 700; color: var(--bordeaux); }

/* ==========================================================
   05 — PAIEMENT
   ========================================================== */

.pay-row { grid-template-columns: 3rem minmax(0, 1fr) auto; }
.pay-row__name {
  font-size: var(--fs-m);
  color: var(--bordeaux);
  transition: translate .7s var(--ease-out), color .35s;
}
.pay-row__value {
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 600;
  text-align: right;
  transition: translate .7s var(--ease-out);
}
.pay-row.is-hover .pay-row__name { translate: 18px 0; color: var(--terracotta); }
.pay-row.is-hover .pay-row__value { translate: -10px 0; }

.pay__bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px clamp(40px, 6vw, 96px);
  align-items: center;
  margin-top: clamp(56px, 7vw, 100px);
}

/* La forme terracotta de l'affiche « borne de paiement » */
.howto {
  padding: clamp(52px, 6.5vw, 88px) clamp(48px, 7vw, 100px);
  background: var(--terracotta);
  color: var(--creme);
  border-radius: 38% 62% 44% 56% / 34% 38% 62% 66%;
  animation: blob-morph 12s var(--ease-in-out) infinite alternate;
}
.howto__title { font-size: clamp(44px, 4.6vw, 68px); color: var(--creme); margin-bottom: 18px; }
.howto__list { counter-reset: step; }
.howto__list li {
  counter-increment: step;
  display: flex;
  gap: 14px;
  align-items: baseline;
  margin-top: 12px;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 500;
}
.howto__list li::before {
  content: counter(step) '.';
  flex: none;
  min-width: 1.1em;
  font-family: var(--font-display);
  font-size: 1.5em;
  line-height: .8;
  color: var(--creme);
  opacity: .75;
}

/* La forme respire doucement, sans jamais rogner le texte */
@keyframes blob-morph {
  0%   { border-radius: 38% 62% 44% 56% / 34% 38% 62% 66%; }
  50%  { border-radius: 48% 52% 38% 62% / 40% 30% 70% 60%; }
  100% { border-radius: 42% 58% 52% 48% / 30% 42% 58% 70%; }
}

.machines__title { font-size: clamp(44px, 4.6vw, 68px); color: var(--bordeaux); margin-bottom: 22px; }
.machines__dots { display: flex; flex-wrap: wrap; gap: 12px; max-width: 420px; }
.mdot {
  --r: 0deg;
  width: clamp(54px, 5vw, 70px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 700;
  line-height: 1;
  rotate: var(--r);
}
.mdot--wash { background: var(--terracotta); }
.mdot--dry { background: var(--canard); }
.mdot--soap { background: var(--bordeaux); }
.mdot:hover { animation: jelly .7s var(--ease-out); }

.machines__legend { display: grid; gap: 10px; margin-top: 26px; font-size: 16px; font-weight: 500; }
.machines__legend li { display: flex; align-items: center; gap: 12px; }
.mdot-key { width: 14px; height: 14px; flex: none; border-radius: 50%; }
.mdot-key--wash { background: var(--terracotta); }
.mdot-key--dry { background: var(--canard); }
.mdot-key--soap { background: var(--bordeaux); }

/* ==========================================================
   06 — BON À SAVOIR
   ========================================================== */

.faq__list { border-top: 1px solid var(--creme-3); max-width: 1100px; }
.faq__item { border-bottom: 1px solid var(--creme-3); }
.faq__q button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(20px, 2.4vw, 30px) 0;
  text-align: left;
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--bordeaux);
  transition: color .3s;
}
.faq__q button > span:first-child { transition: translate .6s var(--ease-out); }
.faq__q button:hover { color: var(--terracotta); }
.faq__q button:hover > span:first-child { translate: 12px 0; }

.faq__icon {
  position: relative;
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--creme-2);
  transition: background-color .35s, rotate .6s var(--ease-out), scale .6s var(--ease-back);
}
.faq__icon::before,
.faq__icon::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 14px; height: 2px;
  margin: -1px 0 0 -7px;
  border-radius: 2px;
  background: var(--bordeaux);
  transition: background-color .35s;
}
.faq__icon::after { rotate: 90deg; }
.faq__q button:hover .faq__icon { scale: 1.1; }
.faq__q [aria-expanded="true"] .faq__icon { background: var(--terracotta); rotate: 135deg; }
.faq__q [aria-expanded="true"] .faq__icon::before,
.faq__q [aria-expanded="true"] .faq__icon::after { background: var(--creme); }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .6s var(--ease-out);
}
.faq__a > div { overflow: hidden; }
.faq__a p {
  max-width: 62ch;
  padding: 0 64px clamp(22px, 2.4vw, 30px) 0;
  opacity: 0;
  translate: 0 -8px;
  transition: opacity .4s, translate .6s var(--ease-out);
}
.faq__a.is-open { grid-template-rows: 1fr; }
.faq__a.is-open p { opacity: 1; translate: none; transition-delay: .1s; }
html:not(.js) .faq__a { grid-template-rows: 1fr; }
html:not(.js) .faq__a p { opacity: 1; translate: none; }

/* ==========================================================
   07 — INFOS PRATIQUES
   ========================================================== */

/* « Le linge n'attend pas. » (la phrase la plus longue) tient sur une ligne */
.infos__title { font-size: min(calc((100vw - 2 * var(--gutter)) / 7.4), 200px); }

.info { grid-template-columns: clamp(96px, 14vw, 220px) minmax(0, 1fr) auto; }
.info__k { font-size: 14px; font-weight: 700; color: var(--bordeaux); }
.info__v {
  font-size: clamp(21px, 2.6vw, 38px);
  font-weight: 600;
  line-height: 1.1;
  transition: translate .7s var(--ease-out), color .35s;
}
.info__v small { font-size: 15px; font-weight: 500; }
.info.is-hover .info__v { translate: 14px 0; }
a.info.is-hover .info__v { color: var(--terracotta); }

.info__go {
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--creme-2);
  color: var(--bordeaux);
  transition: background-color .35s, color .35s, rotate .6s var(--ease-out), scale .6s var(--ease-back);
}
.info__go svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.info.is-hover .info__go { background: var(--terracotta); color: var(--creme); rotate: 45deg; scale: 1.08; }
.info.is-hover .info__go--static { rotate: 0deg; }
.info .status-pill { justify-self: end; }

/* ==========================================================
   PIED DE PAGE
   ========================================================== */

.footer {
  position: relative;
  overflow: hidden;
  background: var(--bordeaux);
  color: var(--creme);
}
.footer__inner { padding: var(--section-gap) var(--gutter) var(--gutter); will-change: transform; }
.footer .label { color: var(--creme); opacity: .75; }

.footer__title { margin-top: 24px; font-size: var(--fs-xl); color: var(--creme); }

.footer__cols {
  display: flex;
  flex-wrap: wrap;
  gap: 28px clamp(32px, 6vw, 96px);
  margin-top: clamp(56px, 8vw, 110px);
  font-size: 16px;
  line-height: 1.35;
}
.footer__k {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .7;
}
.footer .link { background-image: linear-gradient(var(--creme), var(--creme)); }

.footer__mark {
  margin: clamp(40px, 6vw, 80px) 0 clamp(12px, 2vw, 24px) -.02em;
  font-size: calc((100vw - 2 * var(--gutter)) / 3.52);
  line-height: .8;
  color: var(--terracotta);
}
.footer__mark .char { --flash: var(--creme); }
.js .footer__mark .char {
  transform: translate3d(0, 105%, 0);
  transition: transform 1.2s var(--ease-out);
  transition-delay: calc(var(--ci, 0) * 60ms);
}
.js .footer__mark.is-in .char { transform: none; }
.footer__mark .split { display: inline-block; overflow: hidden; padding-top: .04em; vertical-align: top; }
.footer__mark.is-done .split { overflow: visible; }

.footer__bottom {
  display: flex;
  align-items: center;
  gap: 16px 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(239, 233, 222, .22);
  font-size: 13px;
}
.footer__bottom p { flex: 1; }
.to-top { overflow: hidden; margin-left: auto; background: var(--terracotta); }
.to-top svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.to-top:hover svg { animation: arrow-up .7s var(--ease-in-out); }

@keyframes arrow-up {
  0%   { translate: 0 0; }
  45%  { translate: 0 -26px; }
  46%  { translate: 0 26px; }
  100% { translate: 0 0; }
}

/* ==========================================================
   MENTIONS LÉGALES
   ========================================================== */

.legal-head {
  --grid-c: rgba(123, 42, 44, .2);
  position: relative;
  padding: calc(var(--gutter) + var(--circle) + 60px) var(--gutter) clamp(110px, 12vw, 170px);
}
.legal-head__title { margin-top: 22px; font-size: clamp(88px, 17vw, 250px); }
.legal-head__intro {
  max-width: 34ch;
  margin: 28px 0 0 auto;
  font-size: clamp(18px, 1.6vw, 22px);
}
.legal-head__wave {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(40px, 6vw, 80px);
}
.legal-head__wave path { fill: var(--creme); }

.legal { padding: clamp(32px, 5vw, 70px) var(--gutter) var(--section-gap); }
.legal__section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
  gap: 20px clamp(32px, 6vw, 96px);
  padding: clamp(36px, 4.5vw, 60px) 0;
  border-top: 1px solid var(--creme-3);
}
/* Le titre reste visible pendant qu'on lit la section */
.legal__title {
  position: sticky;
  top: calc(var(--gutter) + var(--circle) + 20px);
  align-self: start;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.legal__num { padding-top: .45em; font-size: 13px; font-weight: 700; color: var(--bordeaux); }
.legal__title .display { font-size: clamp(40px, 4.4vw, 64px); }
.legal__body { display: grid; gap: 16px; max-width: 64ch; }
.legal__dl {
  display: grid;
  grid-template-columns: clamp(140px, 15vw, 230px) minmax(0, 1fr);
  gap: 14px 28px;
  margin: 0;
}
.legal__dl dt { font-weight: 700; color: var(--bordeaux); }
.legal__dl dd { margin: 0; }
.legal__update { margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--bordeaux); }

/* Informations encore à fournir */
.todo {
  padding: 0 .25em;
  border-radius: 6px;
  background: var(--creme-2);
  color: var(--terracotta);
  font-weight: 600;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

@media (max-width: 760px) {
  .legal__section { grid-template-columns: 1fr; }
  .legal__title { position: static; }
  .legal__dl { grid-template-columns: 1fr; gap: 4px; }
  .legal__dl dd { margin-bottom: 12px; }
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 899px) {
  /* Sur téléphone, le hublot prend sa place au-dessus du titre au lieu de le recouvrir */
  .porthole {
    position: relative;
    top: auto;
    right: auto;
    align-self: flex-end;
    width: min(46vw, 24svh);
    margin-bottom: clamp(12px, 3svh, 28px);
  }
  .clean__foot { flex-direction: column; align-items: flex-start; }
  .pay__bottom { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  :root { --circle: 46px; }
  .status-pill__more { display: none; }
  .pay-row { grid-template-columns: 2.2rem minmax(0, 1fr); }
  .pay-row__value { grid-column: 2; text-align: left; margin-top: -8px; }
  .info { grid-template-columns: minmax(0, 1fr) auto; }
  .info__k { grid-column: 1; }
  .info__v { grid-column: 1 / -1; grid-row: 2; }
  .info__go, .info .status-pill { grid-column: 2; grid-row: 1; }
  .faq__a p { padding-right: 0; }
  .footer__bottom { flex-wrap: wrap; }
  .footer__bottom p { flex-basis: 100%; }
  .menu__foot { gap: 16px 32px; font-size: 15px; }
  .howto { border-radius: 36px 60px 40px 70px / 40px 50px 60px 44px; animation: none; }
  .bac { grid-template-columns: 76px 1fr; }
  .bac__svg { width: 76px; }
}

/* ==========================================================
   MOUVEMENT RÉDUIT
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
}