/* Le site de Don't Crop Me : la charte de l'app (src/theme/tokens.ts, direction « Soleil »). Rien d'extérieur ni
   aucun script : la police, les images et les icônes sont dans assets/ (design/site/build.py). Les liens sont
   relatifs, le dossier web/ marche tel quel, à la racine d'un domaine ou dans un sous-dossier. */

@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --sand: #F7F3EE;
  --card: #FFFFFF;
  --ink: #17171C;
  --text: #4A464C;
  --muted: #6B676E;
  --line: #E4DDD6;
  --coral: #FF5A3D;
  --coral-ink: #E2452B;
  /* Le corail des petits textes : un ton plus profond que coralInk, lisible (contraste 4,5) sur le sable. */
  --coral-text: #C4391E;
  --coral-tint: #FFE9E2;
  --sneaker: #FFD24D;
  --night: #0E0C0D;
  --night-raised: #1D1A1B;
  --on-night: rgba(255, 255, 255, .7);
  --sun: radial-gradient(circle at 22% 6%, rgba(255, 244, 214, .6) 0%, rgba(255, 244, 214, 0) 60%),
    radial-gradient(60% 50% at 85% 105%, rgba(194, 31, 91, .4) 0%, rgba(194, 31, 91, 0) 70%),
    linear-gradient(160deg, #FFC861 0%, #FF7A47 48%, #F23E6E 100%);
  --button: linear-gradient(120deg, #FF8E3C 0%, #FF5D4D 52%, #F0436E 100%);
  --display: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --shadow: 0 0 0 1px rgba(23, 23, 28, .04), 0 18px 36px -24px rgba(60, 30, 20, .45);
  --ease: cubic-bezier(.65, 0, .35, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font: 17px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; }
img { max-width: 100%; height: auto; }
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--coral);
  text-decoration-thickness: 2px;
  text-underline-offset: .18em;
}
a:hover { color: var(--coral-text); }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; text-wrap: balance; }
p { margin: 0; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 720px) { .wrap { padding: 0 32px; } }

/* Les icônes du sprite (assets/brand.svg) : trait arrondi, couleur du texte. */
.i { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* --- En-tête et pied de page ------------------------------------------------------------------------------------ */
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand .symbol { width: 27px; height: 30px; }
.brand .wordmark { width: 117px; height: 18px; }
.lang {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 15px;
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow);
  font: 600 15px/1 var(--body);
  text-decoration: none;
}

.footer { margin-top: 24px; padding: 40px 0 56px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; }
.footer__grid { display: grid; gap: 18px; }
.footer nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.footer a { color: var(--ink); text-decoration-color: transparent; }
.footer a:hover { text-decoration-color: var(--coral); }
.footer .brand .symbol { width: 22px; height: 24px; }
.footer .brand .wordmark { width: 91px; height: 14px; }
@media (min-width: 960px) {
  .footer__grid { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 40px; }
}

/* --- Les briques de l'app ---------------------------------------------------------------------------------------- */
.eyebrow { margin: 0 0 12px; color: var(--coral-text); font: 600 15px/1.3 var(--body); }
.section { padding: 64px 0; }
.section h2 { font-size: clamp(34px, 4.8vw, 54px); }
.lead { max-width: 36em; margin-top: 16px; color: var(--text); font-size: clamp(17px, 1.5vw, 19px); }
@media (min-width: 960px) { .section { padding: 104px 0; } }

/* Une pastille : ce que l'app a rattrapé, son icône dans un rond de couleur (ui/Controls, Chip). */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px 0 5px;
  border-radius: 17px;
  background: var(--card);
  box-shadow: 0 0 0 1px rgba(23, 23, 28, .05), 0 6px 14px -8px rgba(23, 23, 28, .3);
  color: var(--ink);
  font: 600 14px/1 var(--body);
  white-space: nowrap;
}
.chip b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 12px; background: var(--ink); color: #fff; }
.chip .i { font-size: 16px; }
.chip--feet b { background: var(--sneaker); color: var(--ink); }
.chip--horizon b { background: var(--button); }
.chip--done { padding-left: 6px; background: var(--button); color: #fff; }
.chip--done b { background: #fff; color: var(--coral-ink); }

/* Les coins de recadrage, jaunes comme les baskets : ce que l'app garde. */
.corners { position: absolute; pointer-events: none; }
.corners i { position: absolute; width: 26px; height: 26px; border: 3.5px solid var(--sneaker); }
.corners i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 11px; }
.corners i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 11px; }
.corners i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 11px; }
.corners i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 11px; }

.tile { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--button); color: #fff; }
.tile .i { font-size: 24px; }
.tile--ink { background: var(--ink); }
.tile--sneaker { background: var(--sneaker); color: var(--ink); }

/* Le bouton principal : la pastille au dégradé, avec son reflet (ui/Button). */
.button {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 26px;
  background: var(--button);
  box-shadow: 0 12px 26px -12px rgba(240, 67, 110, .65);
  color: #fff;
  font: 600 17px/1.2 var(--body);
  text-decoration: none;
}
.button::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, 0) 55%); pointer-events: none; }
.button:hover { color: #fff; filter: saturate(1.08) brightness(1.04); }
.button .i { font-size: 21px; }

/* Un iPhone autour d'une vraie capture de l'app. */
.phone {
  width: min(300px, 76vw);
  margin: 0 auto;
  padding: 9px;
  border-radius: 50px;
  background: #0B0B0C;
  box-shadow: 0 40px 70px -34px rgba(60, 20, 20, .6), inset 0 0 0 1.5px rgba(255, 255, 255, .1);
}
.phone img { width: 100%; border-radius: 41px; }

/* --- Accueil ----------------------------------------------------------------------------------------------------- */
/* Sur téléphone, un seul fil : l'icône et la promesse, le titre en deux lignes, le bouton, la scène tout de suite,
   puis l'explication. Sur ordinateur, le texte à gauche et la scène à droite. */
.hero { padding: 4px 0 56px; }
.hero__grid { display: grid; align-items: center; }
.hero__text { display: contents; }
.hero__intro { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.app-icon { flex: none; width: 44px; height: 44px; border-radius: 10px; box-shadow: 0 10px 20px -10px rgba(160, 40, 50, .6); }
.hero .eyebrow { margin: 0; }
/* Chaque phrase du titre tient sur une ligne : la taille suit la largeur de l'écran (mesurée dans la police, l'anglais
   est plus long). */
.hero h1 { margin-top: 18px; font-size: clamp(28px, calc((100vw - 40px) / 9.3), 44px); line-height: 1.04; }
:lang(en) .hero h1 { font-size: clamp(28px, calc((100vw - 40px) / 10.2), 44px); }
.hero h1 span { display: block; color: var(--coral-ink); }
.hero__lead { order: 3; max-width: 32em; margin-top: 24px; color: var(--text); font-size: 17px; line-height: 1.5; }
.hero__cta { order: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 22px; }
.soon { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 22px 0 18px; border-radius: 25px; background: var(--ink); color: #fff; font: 600 16px/1 var(--body); }
.soon .i { font-size: 22px; }
.hero__meta { color: var(--muted); font-size: 15px; }
@media (min-width: 960px) {
  .hero { padding: 24px 0 112px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr) 420px; gap: 56px; }
  .hero__text { display: block; }
  .hero__intro { display: block; margin-top: 0; }
  .app-icon { width: 72px; height: 72px; margin-top: 16px; border-radius: 16px; box-shadow: 0 16px 30px -14px rgba(160, 40, 50, .6); }
  .hero .eyebrow { margin: 26px 0 12px; }
  .hero h1, :lang(en) .hero h1 { margin-top: 0; font-size: clamp(42px, 3.8vw, 54px); line-height: 1.02; }
  .hero__lead { margin-top: 22px; font-size: clamp(18px, 1.6vw, 20px); }
  .hero__cta { gap: 12px 18px; margin-top: 30px; }
}

/* La scène de l'accueil de l'app (onboarding/Rescue, RescueHero) : leur photo ; on recule jusqu'à toute la prise
   (leur écran en pointillés, la marge assombrie) ; le cadre jaune glisse là où il faut ; on avance sur la photo
   rattrapée. La photo est la prise complète, « leur photo » son centre (la marge de 1,25). */
.rescue { order: 2; width: 100%; max-width: 420px; margin: 30px 0 0; justify-self: center; }
.rescue__stage { padding: 16px; border-radius: 30px; background: var(--sun); box-shadow: 0 30px 60px -36px rgba(180, 40, 60, .7); }
.rescue__card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 3 / 4;
  border-radius: 22px;
  background: var(--night-raised);
  box-shadow: 0 24px 44px -20px rgba(90, 20, 30, .6);
}
.rescue figcaption { margin-top: 14px; color: var(--muted); font-size: 15px; text-align: center; text-wrap: balance; }
@media (min-width: 960px) {
  .rescue { margin: 0; }
  .rescue__stage { padding: 26px; border-radius: 36px; }
  .rescue__card { border-radius: 26px; }
  .rescue figcaption { margin-top: 16px; }
}
.rescue__img, .thumb__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rescue__img { transform: scale(1.25); animation: rescue-img 6s var(--ease) infinite; }
.rescue__overlay { position: absolute; inset: 0; opacity: 0; animation: rescue-overlay 6s linear infinite; }
.rescue__frame, .rescue__their { position: absolute; left: 10%; top: 10%; width: 80%; height: 80%; border-radius: 12px; }
.rescue__frame { box-shadow: 0 0 0 999px rgba(24, 12, 8, .5); animation: rescue-frame 6s var(--ease) infinite; }
.rescue__frame .corners { inset: -3px; }
.rescue__their { border: 2px dashed rgba(255, 255, 255, .95); }
.label {
  position: absolute;
  left: 12px;
  top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 15px;
  background: rgba(20, 12, 10, .55);
  color: #fff;
  font: 600 13px/1 var(--body);
  white-space: nowrap;
}
.label .i { font-size: 15px; stroke-width: 2.2; }
.label--their { animation: rescue-their 6s linear infinite; }
.label--all { opacity: 0; animation: rescue-all 6s linear infinite; }
.label--kept { opacity: 0; background: var(--sneaker); color: var(--ink); animation: rescue-kept 6s linear infinite; }
.rescue__chip { position: absolute; left: 50%; bottom: 16px; opacity: 0; transform: translateX(-50%) scale(.8); animation: rescue-chip 6s var(--ease) infinite; }

@keyframes rescue-img {
  0%, 22% { transform: scale(1.25) translate(0, 0); }
  34%, 55% { transform: scale(1) translate(0, 0); }
  66%, 93% { transform: scale(1.25) translate(-10%, 0); }
  100% { transform: scale(1.25) translate(0, 0); }
}
@keyframes rescue-overlay { 0%, 28% { opacity: 0; } 34%, 55% { opacity: 1; } 61%, 100% { opacity: 0; } }
/* Le cadre glisse de 10 % de la prise, soit 12,5 % de sa largeur ; il revient en place une fois caché. */
@keyframes rescue-frame { 0%, 40% { transform: translateX(0); } 52%, 62% { transform: translateX(12.5%); } 63%, 100% { transform: translateX(0); } }
@keyframes rescue-their { 0%, 22% { opacity: 1; } 26%, 93% { opacity: 0; } 100% { opacity: 1; } }
@keyframes rescue-all { 0%, 22% { opacity: 0; } 26%, 55% { opacity: 1; } 59%, 100% { opacity: 0; } }
@keyframes rescue-kept { 0%, 55% { opacity: 0; } 59%, 93% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes rescue-chip {
  0%, 66% { opacity: 0; transform: translateX(-50%) scale(.8); }
  71%, 93% { opacity: 1; transform: translateX(-50%) scale(1); }
  96%, 100% { opacity: 0; transform: translateX(-50%) scale(.8); }
}

/* Comment ça marche */
.how { display: grid; gap: 48px; align-items: center; }
.steps { display: grid; gap: 14px; margin: 32px 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 20px 22px; border-radius: 24px; background: var(--card); box-shadow: var(--shadow); }
.steps li::before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: var(--coral-tint);
  color: var(--coral-text);
  font: 700 19px/1 var(--display);
}
.steps h3 { font: 600 18px/1.3 var(--body); letter-spacing: 0; }
.steps p { margin-top: 4px; color: var(--text); }
@media (min-width: 960px) { .how { grid-template-columns: 360px minmax(0, 1fr); gap: 80px; } }

/* Les grands classiques : leur photo, puis la photo rattrapée, en boucle (RescueThumb), décalées. */
.classics { display: grid; gap: 14px; margin-top: 36px; }
.classic { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px; border-radius: 26px; background: var(--card); box-shadow: var(--shadow); }
.classic h3 { font-size: 19px; letter-spacing: -.02em; }
.classic p { margin-top: 4px; color: var(--text); font-size: 15px; }
.classic .chip { margin-top: 10px; }
/* Très petits écrans : la pastille passe sur deux lignes plutôt que de déborder. */
@media (max-width: 359px) { .classic .chip { height: auto; min-height: 34px; padding-top: 5px; padding-bottom: 5px; line-height: 1.2; white-space: normal; } }
.thumb { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 3 / 4; margin: 0; border-radius: 16px; background: var(--night-raised); }
.thumb__img { transform: scale(1.25); }
.thumb .corners { inset: 6px; opacity: 0; animation: thumb-kept 4s linear infinite both; }
.thumb .corners i { width: 16px; height: 16px; border-width: 3px; }
.thumb .corners i:nth-child(1) { border-top-left-radius: 8px; }
.thumb .corners i:nth-child(2) { border-top-right-radius: 8px; }
.thumb .corners i:nth-child(3) { border-bottom-left-radius: 8px; }
.thumb .corners i:nth-child(4) { border-bottom-right-radius: 8px; }
.tag { position: absolute; left: 6px; bottom: 6px; padding: 3px 7px; border-radius: 8px; font: 700 11px/1.2 var(--body); white-space: nowrap; }
.tag--their { background: rgba(20, 12, 10, .6); color: #fff; animation: thumb-their 4s linear infinite both; }
.tag--kept { opacity: 0; background: var(--sneaker); color: var(--ink); animation: thumb-kept 4s linear infinite both; }
.thumb--tilt .thumb__img { transform: scale(1.25) translate(0, 0) rotate(8deg); animation: thumb-tilt 4s var(--ease) infinite both; }
.thumb--heads .thumb__img { animation: thumb-heads 4s var(--ease) infinite both; }
.thumb--feet .thumb__img { animation: thumb-feet 4s var(--ease) infinite both; }
.classic:nth-child(2) .thumb * { animation-delay: .7s; }
.classic:nth-child(3) .thumb * { animation-delay: 1.4s; }
.classics__note { margin-top: 20px; color: var(--muted); font-size: 15px; }
@media (min-width: 720px) {
  .classics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .classic { display: flex; flex-direction: column; align-items: stretch; padding: 12px 12px 24px; border-radius: 30px; }
  .classic > div { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 0 10px; }
  .classic .chip { margin-top: auto; }
  .classic p { margin-bottom: 16px; }
  .classic h3 { margin-top: 20px; font-size: 23px; }
  .classic p { margin-top: 6px; font-size: 17px; }
  .thumb { border-radius: 20px; }
  .thumb .corners { inset: 10px; }
  .thumb .corners i { width: 24px; height: 24px; border-width: 3.5px; }
  .thumb .corners i:nth-child(1) { border-top-left-radius: 10px; }
  .thumb .corners i:nth-child(2) { border-top-right-radius: 10px; }
  .thumb .corners i:nth-child(3) { border-bottom-left-radius: 10px; }
  .thumb .corners i:nth-child(4) { border-bottom-right-radius: 10px; }
  .tag { left: 12px; bottom: 12px; padding: 6px 10px; border-radius: 10px; font-size: 13px; }
}

@keyframes thumb-tilt {
  0%, 35% { transform: scale(1.25) translate(0, 0) rotate(8deg); }
  50%, 90% { transform: scale(1.25) translate(0, 0) rotate(0deg); }
  100% { transform: scale(1.25) translate(0, 0) rotate(8deg); }
}
@keyframes thumb-heads {
  0%, 35% { transform: scale(1.25) translate(0, 0); }
  50%, 90% { transform: scale(1.25) translate(0, 10%); }
  100% { transform: scale(1.25) translate(0, 0); }
}
@keyframes thumb-feet {
  0%, 35% { transform: scale(1.25) translate(0, 0); }
  50%, 90% { transform: scale(1.25) translate(0, -10%); }
  100% { transform: scale(1.25) translate(0, 0); }
}
@keyframes thumb-kept { 0%, 45% { opacity: 0; } 50%, 88% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes thumb-their { 0%, 45% { opacity: 1; } 50%, 88% { opacity: 0; } 92%, 100% { opacity: 1; } }

/* Tu gardes la main : la nuit, pour regarder les photos, comme dans l'app. */
.night { background: var(--night); color: #fff; }
.night .eyebrow { color: var(--sneaker); }
.night .lead { color: var(--on-night); }
.grad { display: block; background: linear-gradient(100deg, #FF8E3C, #FF5D4D 50%, #F0436E); -webkit-background-clip: text; background-clip: text; color: transparent; }
.split { display: grid; gap: 48px; align-items: center; }
.gestures { display: grid; gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; }
.gestures li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); color: var(--on-night); }
.gestures b { color: #fff; font-weight: 600; }
.gestures .i { font-size: 24px; color: var(--sneaker); }
@media (min-width: 960px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; } }

/* Rien ne se perd */
.photo-card { position: relative; overflow: hidden; aspect-ratio: 8 / 7; border-radius: 30px; background: var(--night-raised); box-shadow: var(--shadow); }
.photo-card img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.photo-card .chip { position: absolute; left: 16px; top: 16px; }
.revert {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 20px;
  background: rgba(20, 12, 10, .45);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
  color: #fff;
  font: 600 14px/1 var(--body);
  white-space: nowrap;
}
.revert .i { font-size: 18px; }
.features { display: grid; gap: 18px; margin-top: 64px; }
.feature { padding: 26px; border-radius: 28px; background: var(--card); box-shadow: var(--shadow); }
.feature h3 { margin-top: 20px; font-size: 23px; }
.feature p { margin-top: 8px; color: var(--text); }
@media (min-width: 720px) { .features { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .features { margin-top: 96px; } .keep .photo-card { order: -1; } }

/* Assistance */
.support { display: grid; gap: 36px; }
.contact { margin-top: 26px; padding: 26px; border-radius: 28px; background: var(--card); box-shadow: var(--shadow); }
.contact p { color: var(--text); }
.contact p + p { margin-top: 8px; }
.contact .address { color: var(--ink); font-weight: 600; }
.contact .button { margin-top: 20px; }
.faq { display: grid; gap: 12px; align-content: start; }
.faq details { border-radius: 22px; background: var(--card); box-shadow: var(--shadow); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border-radius: 22px; font-weight: 600; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .i { font-size: 20px; color: var(--muted); transition: transform .2s var(--ease); }
.faq details[open] summary .i { transform: rotate(180deg); }
.faq details p { padding: 0 22px 20px; color: var(--text); }
@media (min-width: 960px) { .support { grid-template-columns: 400px minmax(0, 1fr); gap: 64px; align-items: start; } }

/* Mes autres apps */
.apps { display: grid; gap: 14px; margin-top: 32px; }
.app { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 24px; background: var(--card); box-shadow: var(--shadow); color: inherit; text-decoration: none; }
.app:hover { color: inherit; box-shadow: 0 0 0 1px rgba(23, 23, 28, .06), 0 22px 40px -22px rgba(60, 30, 20, .55); }
.app img { flex: none; width: 56px; height: 56px; border-radius: 13px; box-shadow: 0 0 0 .5px rgba(23, 23, 28, .12); }
/* Le texte prend la place qui reste et passe à la ligne au besoin : rien ne déborde, du petit téléphone à la tablette. */
.app__text { flex: 1; min-width: 0; }
.app__name { display: block; font-weight: 600; }
.app__name small { display: inline-block; margin-left: 6px; padding: 2px 6px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 10px; letter-spacing: .04em; vertical-align: 2px; }
.app__line { display: block; color: var(--muted); font-size: 15px; line-height: 1.35; }
.app__get { flex: none; margin-left: auto; padding: 8px 14px; border-radius: 16px; background: var(--coral-tint); color: var(--coral-text); font: 600 15px/1 var(--body); }
@media (min-width: 1100px) {
  .apps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app { gap: 12px; padding: 14px; }
  .app__get { padding: 8px 12px; }
}

/* --- Pages de texte : confidentialité, conditions -------------------------------------------------------------- */
.legal { max-width: 744px; margin: 0 auto; padding: 24px 20px 72px; }
.legal h1 { font-size: clamp(38px, 6vw, 56px); }
.legal .updated { margin-top: 12px; color: var(--muted); font-size: 15px; }
.callout { margin-top: 28px; padding: 20px 22px; border-radius: 24px; background: var(--card); box-shadow: var(--shadow); }
.callout strong { font-weight: 600; }
.legal h2 { margin: 44px 0 10px; font-size: 25px; letter-spacing: -.02em; scroll-margin-top: 24px; }
.legal p:not(.eyebrow), .legal li, .legal dd { color: var(--text); }
.legal .callout p { color: var(--ink); }
.legal p + p { margin-top: 12px; }
.legal ul { margin: 12px 0 0; padding-left: 1.2em; }
.legal li + li { margin-top: 8px; }
.legal li::marker { color: var(--coral); }
.legal dl { display: grid; gap: 2px 24px; margin: 12px 0 0; }
.legal dt { font-weight: 600; }
.legal dd { margin: 0 0 12px; }
@media (min-width: 720px) {
  .legal { padding: 40px 32px 96px; }
  .legal dl { grid-template-columns: 220px minmax(0, 1fr); }
  .legal dd { margin: 0 0 8px; }
}

/* Page introuvable */
.lost { max-width: 760px; margin: 0 auto; padding: 40px 20px 96px; }
.lost h1 { font-size: clamp(38px, 6vw, 56px); }
.lost p:not(.eyebrow) { margin-top: 16px; color: var(--text); font-size: 19px; }

/* Sans animation : la scène reste sur toute la prise, avec les deux cadres ; les classiques, sur la photo rattrapée. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rescue__card *, .thumb * { animation: none !important; }
  .rescue__img { transform: none; }
  .rescue__overlay { opacity: 1; }
  .rescue__frame { transform: translateX(12.5%); }
  .label--their, .label--kept { opacity: 0; }
  .label--all { opacity: 1; }
  .rescue__chip { opacity: 1; transform: translateX(-50%); }
  .thumb--tilt .thumb__img { transform: scale(1.25) rotate(0deg); }
  .thumb--heads .thumb__img { transform: scale(1.25) translate(0, 10%); }
  .thumb--feet .thumb__img { transform: scale(1.25) translate(0, -10%); }
  .thumb .corners, .tag--kept { opacity: 1; }
  .tag--their { opacity: 0; }
  .faq summary .i { transition: none; }
}