/* ==========================================================================
   Nailed — feuille de style du site nailed.so
   Identité reprise de l'app et de la fiche Play Store : fond graphite, texte
   blanc en Plus Jakarta Sans, accent bleu, et les emoji comme signature.
   ========================================================================== */

/* ---------- Polices (auto-hébergées : aucune requête vers Google Fonts) ---------- */
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 400; font-display: swap; src: url("/assets/fonts/PlusJakartaSans-400.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 500; font-display: swap; src: url("/assets/fonts/PlusJakartaSans-500.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600; font-display: swap; src: url("/assets/fonts/PlusJakartaSans-600.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 700; font-display: swap; src: url("/assets/fonts/PlusJakartaSans-700.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 800; font-display: swap; src: url("/assets/fonts/PlusJakartaSans-800.woff2") format("woff2"); }

/* ---------- Jetons ---------- */
:root {
  color-scheme: dark;

  /* Le fond reprend celui des captures du Play Store (#17181c) pour que les images
     s'y fondent sans cadre visible. */
  --bg: #16171b;
  --surface: #1d1f25;
  --surface-2: #24272e;
  --line: rgb(255 255 255 / 0.08);
  --text: #f4f5f7;
  --text-2: #b4b9c4;
  --text-3: #8a909c;
  --accent: #4c8dff;
  --accent-strong: #2f74f5;
  --green: #3ecf6e;

  --radius-s: 12px;
  --radius-m: 20px;
  --radius-l: 28px;

  --wrap: 1120px;
  --gutter: clamp(20px, 5vw, 40px);

  /* Courbes « fortes » : les courbes CSS par défaut manquent de punch. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* Ressorts en CSS, générés avec `spring(durée, rebond)` de Motion. Une transition CSS
     reprend depuis la valeur courante : le survol reste interruptible. */
  --spring-calme: linear(0, 0.064, 0.1977, 0.3472, 0.4867, 0.6061, 0.7032, 0.7795, 0.838, 0.8821, 0.9148, 0.9389, 0.9564, 0.969, 0.9781, 0.9846, 0.9892, 0.9924, 0.9947, 0.9963, 0.9974, 0.9982, 0.9988, 0.9991, 1);
  --spring-calme-d: 750ms;
  --spring-vif: linear(0, 0.0877, 0.2741, 0.4798, 0.6628, 0.8057, 0.9066, 0.971, 1.0072, 1.0239, 1.0284, 1.0261, 1.0209, 1.0151, 1.0098, 1.0057, 1.0028, 1.0009, 0.9998, 1);
  --spring-vif-d: 600ms;
  --spring-joueur: linear(0, 0.0554, 0.1912, 0.3671, 0.5517, 0.7232, 0.8678, 0.9792, 1.0567, 1.1031, 1.1237, 1.1248, 1.1125, 1.0925, 1.0694, 1.0465, 1.0263, 1.0098, 0.9977, 0.9897, 0.9854, 0.9841, 0.9848, 0.9868, 0.9896, 0.9926, 0.9953, 0.9977, 0.9995, 1.0008, 1.0016, 1);
  --spring-joueur-d: 950ms;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 88px; /* les ancres ne passent pas sous l'en-tête collant */
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.6 "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

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

a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }

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

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

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

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: var(--radius-s);
  background: var(--text); color: var(--bg); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 16px; }

/* ---------- En-tête : couche translucide, le contenu défile dessous ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  padding-top: env(safe-area-inset-top);
  background: rgb(22 23 27 / 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 64px;
}

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text); text-decoration: none;
  font-weight: 800; font-size: 1.125rem; letter-spacing: -0.02em;
}
.brand img { width: 32px; height: 32px; border-radius: 8px; }

.nav { display: flex; align-items: center; gap: clamp(12px, 3vw, 28px); }

.nav a {
  color: var(--text-2); text-decoration: none; font-size: 0.9375rem; font-weight: 500;
  transition: color 150ms var(--ease);
}
.nav a[aria-current="page"] { color: var(--text); }

.nav .lang {
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em;
}

/* Les liens secondaires disparaissent sur petit écran : la langue reste. */
@media (max-width: 640px) {
  .nav .nav-secondary { display: none; }
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px;
  border-radius: 999px; border: 0;
  font: inherit; font-weight: 700; font-size: 1rem; text-decoration: none;
  cursor: pointer; user-select: none;
  transition: transform 160ms var(--ease-out), background-color 150ms var(--ease), color 150ms var(--ease);
}
.btn:active { transform: scale(0.97); }

.btn-primary { background: var(--text); color: var(--bg); }
.btn-ghost { background: var(--surface-2); color: var(--text); }

/* Avant la mise en ligne, le bouton Play Store annonce sans mener nulle part. */
.btn[aria-disabled="true"] { cursor: default; }
.btn[aria-disabled="true"]:active { transform: none; }

.btn svg { width: 20px; height: 20px; flex: none; }

/* Survol réservé aux vrais pointeurs : sur mobile, :hover reste collé après un tap. */
@media (hover: hover) and (pointer: fine) {
  .nav a:hover { color: var(--text); }
  .btn-primary:not([aria-disabled="true"]):hover { background: #fff; }
  .btn-ghost:hover { background: #2c3038; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-top: clamp(40px, 7vh, 88px);
  overflow: hidden;
}

/* Halo bleu discret derrière le téléphone : donne de la profondeur sans image. */
.hero::before {
  content: ""; position: absolute; z-index: -1;
  width: 900px; height: 900px; right: -260px; top: 40px;
  background: radial-gradient(closest-side, rgb(76 141 255 / 0.16), transparent 70%);
  pointer-events: none;
}

/* Le haut du téléphone s'aligne sur le haut du texte, et le texte fixe la hauteur de la
   section : le téléphone, plus grand que l'espace, s'y fond vers le bas au lieu d'être
   réduit pour tenir en entier. */
.hero .wrap {
  display: grid; align-items: stretch;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 5vw, 64px);
}

.hero-copy { padding-bottom: clamp(72px, 12vh, 136px); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 20px; padding: 6px 12px 6px 8px;
  border-radius: 999px; background: var(--surface); border: 1px solid var(--line);
  color: var(--text-2); font-size: 0.8125rem; font-weight: 600;
}
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgb(62 207 110 / 0.18); }

h1, h2, h3 { margin: 0; font-weight: 800; color: var(--text); }

/* Interlettrage négatif sur les grands titres : plus le texte grossit, plus les
   lettres paraissent écartées. La hauteur d'écran borne aussi la taille, pour que tout
   le texte du hero reste visible sur un portable peu haut. */
.hero h1 {
  font-size: clamp(2.75rem, min(7.2vw, 10.5vh), 5.25rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.lede {
  margin: 24px 0 0; max-width: 34ch;
  color: var(--text-2); font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.5;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

.fine { margin: 16px 0 0; color: var(--text-3); font-size: 0.875rem; }

.emoji-row {
  display: flex; gap: 14px; margin: 40px 0 0; padding: 0; list-style: none;
  font-size: 2rem; line-height: 1;
}

/* Le cadre prend la hauteur de la rangée ; l'image, en absolu, n'agrandit pas la
   section. Le cadre déborde de 80 px de chaque côté (marge négative) pour que l'ombre et
   l'inclinaison 3D tiennent dans la zone du masque, qui fond le bas dans la page. Un
   masque plutôt qu'un dégradé coloré : il reste invisible sur le halo bleu. */
.hero-phone {
  --debord: 80px;
  position: relative; justify-self: center; align-self: stretch;
  box-sizing: content-box;
  width: min(100%, 440px);
  padding-inline: var(--debord);
  margin-inline: calc(-1 * var(--debord));
  overflow: clip;
  perspective: 1400px;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 220px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 220px), transparent);
}

.hero-phone img {
  position: absolute; top: 0; left: var(--debord);
  width: calc(100% - 2 * var(--debord));
  transform-origin: 50% 30%;
  will-change: transform;
  border-radius: 13% 13% 0 0 / 7% 7% 0 0;
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.7), 0 0 0 1px var(--line);
}

@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 40px; }
  .hero-copy { padding-bottom: 0; text-align: center; }
  .lede { margin-inline: auto; }
  .cta-row, .emoji-row { justify-content: center; }
  .hero-phone { --debord: 24px; width: min(86%, 380px); height: min(118vw, 600px); perspective: none; }
}

/* ---------- Sections ---------- */
.section { padding-block: clamp(80px, 12vw, 152px); }
.section + .section { padding-top: 0; }

.section-head { max-width: 640px; margin-bottom: clamp(40px, 6vw, 64px); }
.section-head.center { margin-inline: auto; text-align: center; }

.section-head h2 {
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance;
}
.section-head p { margin: 16px 0 0; color: var(--text-2); font-size: 1.125rem; }

.kicker {
  display: block; margin-bottom: 14px;
  color: var(--accent); font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* ---------- Fonctionnalités ---------- */
.features {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  margin: 0; padding: 0; list-style: none;
}

.feature {
  padding: 28px;
  border-radius: var(--radius-l);
  background: linear-gradient(180deg, var(--surface) 0%, rgb(29 31 37 / 0.6) 100%);
  border: 1px solid var(--line);
}

.feature .emoji { display: block; margin-bottom: 20px; font-size: 2.25rem; line-height: 1; }
.feature h3 { font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.015em; }
.feature p { margin: 10px 0 0; color: var(--text-2); font-size: 1rem; }

/* La première carte porte la promesse principale : elle prend toute la largeur. */
.feature.wide {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: auto 1fr; gap: 0 24px; align-items: center;
  padding: 32px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgb(76 141 255 / 0.18), transparent 60%),
    var(--surface);
}
.feature.wide .emoji { grid-row: span 2; margin: 0; font-size: 3rem; }
.feature.wide h3 { font-size: clamp(1.375rem, 2.4vw, 1.75rem); }

@media (max-width: 560px) {
  .feature.wide { grid-template-columns: 1fr; }
  .feature.wide .emoji { grid-row: auto; margin-bottom: 20px; }
}

/* ---------- Galerie des captures (défilement natif + magnétisme) ---------- */
.gallery-wrap { position: relative; }

.gallery {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(220px, 26vw, 300px);
  /* Marges verticales généreuses : un défilement horizontal coupe aussi en vertical, et
     les cartes montent au survol et s'inclinent en défilant. */
  gap: 16px; margin: 0; padding: 20px var(--gutter) 40px; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.gallery::-webkit-scrollbar { display: none; }

/* Aligne le premier élément sur la grille du site sur grand écran. */
@media (min-width: 1200px) {
  .gallery { padding-inline: calc((100vw - var(--wrap)) / 2); scroll-padding-inline: calc((100vw - var(--wrap)) / 2); }
}

.gallery li { scroll-snap-align: start; }

/* Saisissable à la souris (le doigt, lui, fait défiler nativement). */
@media (hover: hover) and (pointer: fine) {
  .gallery { cursor: grab; }
}

/* Pendant un glisser ou un lancer, le magnétisme natif se tait : c'est le ressort du
   script qui choisit la carte d'arrivée. */
.gallery.is-guided { scroll-snap-type: none; }
.gallery.is-dragging { cursor: grabbing; user-select: none; }
.gallery.is-dragging img { pointer-events: none; }

/* La profondeur (échelle, inclinaison) est posée par le script sur .shot, à chaque image. */
.gallery .shot { transform-origin: 50% 100%; will-change: transform; }

.gallery img {
  width: 100%; aspect-ratio: 9 / 16; object-fit: cover;
  border-radius: var(--radius-m);
  border: 1px solid var(--line);
  background: var(--surface);
  -webkit-user-drag: none;
  transition:
    transform var(--spring-vif-d) var(--spring-vif),
    box-shadow 250ms var(--ease),
    border-color 250ms var(--ease);
}

.gallery-controls { display: flex; justify-content: flex-end; gap: 8px; margin-top: -8px; }

.icon-btn {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  cursor: pointer;
  transition: transform 160ms var(--ease-out), opacity 150ms var(--ease);
}
.icon-btn:active { transform: scale(0.94); }
.icon-btn:disabled { opacity: 0.35; cursor: default; }
.icon-btn:disabled:active { transform: none; }
.icon-btn svg { width: 18px; height: 18px; }

@media (hover: none) { .gallery-controls { display: none; } }

/* ---------- Vie privée ---------- */
.privacy-card {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 64px);
  padding: clamp(32px, 5vw, 64px);
  border-radius: var(--radius-l);
  background:
    radial-gradient(90% 120% at 100% 0%, rgb(62 207 110 / 0.10), transparent 60%),
    var(--surface);
  border: 1px solid var(--line);
}
.privacy-card .section-head { margin: 0; }

.checks { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }

.checks li { display: grid; grid-template-columns: 24px 1fr; gap: 14px; color: var(--text-2); }
.checks strong { color: var(--text); font-weight: 700; }

.checks svg { width: 24px; height: 24px; margin-top: 1px; color: var(--green); }

@media (max-width: 820px) { .privacy-card { grid-template-columns: 1fr; } }

/* ---------- Pour qui : trois mini-listes façon app, qu'on peut cocher ---------- */
.personas {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  margin: 0; padding: 0; list-style: none;
}

.persona {
  padding: 16px 16px 28px;
  border-radius: var(--radius-l);
  background: var(--surface);
  border: 1px solid var(--line);
}
.persona h3 { margin: 24px 12px 0; font-size: 1.25rem; letter-spacing: -0.015em; }
.persona p { margin: 8px 12px 0; color: var(--text-2); font-size: 1rem; }

/* La mini-app reprend les surfaces claires de la vraie : on reconnaît l'écran. */
.mini-app {
  padding: 14px 12px 12px;
  border-radius: 20px;
  background: #eef1f5;
  color: #1b1d22;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.6);
}

.mini-entete { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 12px; }
.mini-liste { font-weight: 800; font-size: 1.0625rem; letter-spacing: -0.01em; }

.pastilles { display: flex; }
.pastille {
  display: grid; place-items: center; width: 24px; height: 24px; margin-left: -6px;
  border-radius: 50%; background: var(--c); color: #fff; font-size: 0.6875rem; font-weight: 700;
  box-shadow: 0 0 0 2px #eef1f5;
}

.mini-taches { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }

.mini-tache {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 52px; padding: 8px 12px;
  border: 0; border-radius: 14px; background: #fff;
  box-shadow: 0 1px 2px rgb(16 24 40 / 0.06), 0 4px 10px -4px rgb(16 24 40 / 0.10);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out), background-color 200ms var(--ease);
}
.mini-tache:active { transform: scale(0.98); }

.mini-coche {
  display: grid; place-items: center; flex: none; width: 22px; height: 22px;
  border-radius: 50%; border: 1.5px solid #c9ced6; background: #fff;
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease), transform var(--spring-joueur-d) var(--spring-joueur);
}
/* La coche se dessine (trait animé) quand on coche, et s'efface d'un coup quand on décoche. */
.mini-coche svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset 120ms var(--ease); }

.mini-emoji { flex: none; font-size: 1.125rem; line-height: 1; }
.mini-texte { display: grid; min-width: 0; }
.mini-titre { font-size: 0.9375rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 200ms var(--ease); }
.mini-par { color: #8a909c; font-size: 0.75rem; line-height: 1.2; }
.mini-par:empty { display: none; }

.mini-tache[aria-pressed="true"] { background: #f6f7f9; }
.mini-tache[aria-pressed="true"] .mini-coche { background: #3a3f4b; border-color: #3a3f4b; transform: scale(1.08); }
.mini-tache[aria-pressed="true"] .mini-coche svg { stroke-dashoffset: 0; transition: stroke-dashoffset 260ms var(--ease-out) 60ms; }
.mini-tache[aria-pressed="true"] .mini-titre { color: #9aa0ab; text-decoration: line-through; }
.mini-tache[aria-pressed="true"] .mini-emoji { opacity: 0.5; }

.mini-tache:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- FAQ (accordéons natifs <details>) ---------- */
.faq { max-width: 800px; }

.faq-liste { border-top: 1px solid var(--line); }

.faq-item { border-bottom: 1px solid var(--line); }

.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 4px; cursor: pointer; list-style: none;
  font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em;
}
.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary svg {
  flex: none; width: 22px; height: 22px; padding: 2px;
  fill: none; stroke: var(--text-2); stroke-width: 2; stroke-linecap: round;
  transition: transform var(--spring-vif-d) var(--spring-vif);
}
/* Le « + » devient « × » à l'ouverture. */
.faq-item[open] summary svg { transform: rotate(45deg); }

.faq-reponse { padding: 0 48px 24px 4px; }
.faq-reponse p { margin: 0; color: var(--text-2); }

/* Ouverture animée là où le navigateur sait animer une hauteur « auto » (Chrome 131+) ;
   ailleurs, l'accordéon s'ouvre simplement d'un coup. */
@supports (interpolate-size: allow-keywords) {
  .faq-liste { interpolate-size: allow-keywords; }
  .faq-item::details-content {
    block-size: 0; overflow: clip;
    transition: block-size 320ms var(--ease-out), content-visibility 320ms allow-discrete;
  }
  .faq-item[open]::details-content { block-size: auto; }
}

@media (hover: hover) and (pointer: fine) {
  .faq-item summary span { transition: color 150ms var(--ease); }
  .faq-item summary:hover svg { stroke: var(--text); }
  .mini-tache:hover { background: #fafbfc; }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .persona { transition: transform var(--spring-vif-d) var(--spring-vif), border-color 250ms var(--ease); }
  .persona:hover { transform: translateY(-4px); border-color: rgb(255 255 255 / 0.16); }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item::details-content { transition: none; }
  .mini-coche, .mini-coche svg, .faq-item summary svg { transition: none; }
}

/* ---------- Appel final ---------- */
.final { text-align: center; }
.final img { width: 88px; height: 88px; margin: 0 auto 28px; border-radius: 22px; box-shadow: 0 20px 60px -10px rgb(0 0 0 / 0.6); }
.final h2 { font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1.05; letter-spacing: -0.035em; text-wrap: balance; }
.final p { margin: 16px auto 0; max-width: 40ch; color: var(--text-2); font-size: 1.125rem; }
.final .cta-row { justify-content: center; }

/* ---------- Pied de page ---------- */
.site-footer {
  padding-block: 48px calc(48px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  color: var(--text-3); font-size: 0.9375rem;
}
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-footer a { color: var(--text-2); text-decoration: none; }
.site-footer p { margin: 0; }

@media (hover: hover) and (pointer: fine) {
  .site-footer a:hover { color: var(--text); }
}

/* ---------- Pages de texte (confidentialité, suppression de compte) ---------- */
.doc { padding-block: clamp(48px, 8vw, 96px) clamp(80px, 10vw, 128px); }
.doc .wrap { max-width: 720px; }

.doc h1 { font-size: clamp(2.25rem, 5vw, 3.25rem); line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }
.doc .meta { margin: 16px 0 0; color: var(--text-3); font-size: 0.9375rem; }

.doc h2 {
  margin: 56px 0 0; padding-top: 32px; border-top: 1px solid var(--line);
  font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.02em;
}
.doc h3 { margin: 32px 0 0; font-size: 1.125rem; letter-spacing: -0.01em; }
.doc p, .doc li { color: var(--text-2); }
.doc p { margin: 16px 0 0; }
.doc ul, .doc ol { margin: 16px 0 0; padding-left: 1.25em; }
.doc li + li { margin-top: 8px; }
.doc li::marker { color: var(--text-3); }
.doc strong { color: var(--text); font-weight: 700; }

.doc .summary {
  margin-top: 32px; padding: 24px 28px;
  border-radius: var(--radius-m); background: var(--surface); border: 1px solid var(--line);
}
.doc .summary p:first-child { margin-top: 0; }

/* Étapes numérotées de la suppression de compte. */
.steps { counter-reset: step; list-style: none; padding: 0 !important; }
.steps li {
  counter-increment: step;
  position: relative; padding: 18px 20px 18px 64px;
  border-radius: var(--radius-m); background: var(--surface); border: 1px solid var(--line);
}
.steps li + li { margin-top: 10px; }
.steps li::before {
  content: counter(step);
  position: absolute; left: 18px; top: 16px;
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface-2); color: var(--text); font-weight: 700; font-size: 0.9375rem;
}

.table-wrap { margin-top: 20px; overflow-x: auto; border-radius: var(--radius-m); border: 1px solid var(--line); }
.doc table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.doc th, .doc td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.doc th { color: var(--text); font-weight: 700; background: var(--surface); }
.doc td { color: var(--text-2); }
.doc tr:last-child td { border-bottom: 0; }

kbd {
  padding: 2px 7px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text); font: 600 0.875em/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace;
}

/* ---------- 404 ---------- */
.not-found { min-height: 70vh; display: grid; place-items: center; text-align: center; padding-block: 80px; }
.not-found .code { font-size: clamp(5rem, 18vw, 9rem); font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.not-found p { color: var(--text-2); }

/* ---------- Apparition au défilement ----------
   L'état caché n'existe que si le script d'animation est actif (classe posée dans
   le <head>) : sans JavaScript, ou en mouvement réduit, tout reste visible. */
.anim [data-reveal]:not([data-revealed]):not([data-reveal="glisse"]),
.anim .emoji-row li:not([data-revealed]) { opacity: 0; }

/* « glisse » : visible dès le premier affichage, seulement décalé puis remis en place.
   Réservé au titre, au texte d'accroche et au téléphone du hero : Google mesure le moment
   où le plus grand élément devient visible (LCP), un fondu le retarderait. Le décalage de
   départ est posé ici, en CSS, pour qu'il n'y ait aucun saut quand le script démarre. */
.anim [data-reveal="glisse"]:not([data-revealed]) { transform: translateY(20px); }

/* ---------- Vie au survol ----------
   Réservé aux vrais pointeurs (sur mobile, :hover reste collé après un tap) et au
   mouvement non réduit. Petits déplacements, ressorts : on suggère, on ne danse pas. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {

  /* Logo : la coche se redresse un peu, comme si on la cochait. */
  .brand img { transition: transform var(--spring-joueur-d) var(--spring-joueur); }
  .brand:hover img { transform: rotate(-10deg) scale(1.08); }

  /* Liens du menu : un trait qui se dessine depuis la gauche. */
  .nav a:not(.lang) { position: relative; }
  .nav a:not(.lang)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px;
    background: currentColor; border-radius: 1px;
    transform: scaleX(0); transform-origin: left;
    transition: transform 300ms var(--ease-out);
  }
  .nav a:not(.lang):hover::after { transform: scaleX(1); }
  .nav .lang { transition: color 150ms var(--ease), border-color 150ms var(--ease), background-color 150ms var(--ease); }
  .nav .lang:hover { border-color: rgb(255 255 255 / 0.24); background: var(--surface); }

  /* Boutons : légère montée, et le triangle « lecture » avance d'un cran. */
  .btn { transition: transform var(--spring-vif-d) var(--spring-vif), background-color 150ms var(--ease), color 150ms var(--ease), box-shadow 250ms var(--ease); }
  .btn:not([aria-disabled="true"]):hover { transform: translateY(-2px); box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.6); }
  .btn:not([aria-disabled="true"]):active { transform: scale(0.97); transition-duration: 120ms; transition-timing-function: var(--ease-out); }
  .btn svg { transition: transform var(--spring-joueur-d) var(--spring-joueur); }
  .btn:hover svg { transform: translateX(3px); }

  /* Emoji du hero : chacun réagit sous la souris, avec un rebond assumé. */
  .emoji-row span { display: inline-block; transition: transform var(--spring-joueur-d) var(--spring-joueur); }
  .emoji-row li:hover span { transform: translateY(-6px) scale(1.22) rotate(-10deg); }

  /* Cartes de fonctionnalités : montée, bord éclairé, et un halo qui suit la souris
     (position posée par le script dans --mx / --my, sur la carte elle-même). */
  .feature { position: relative; overflow: hidden; isolation: isolate;
    transition: transform var(--spring-vif-d) var(--spring-vif), border-color 250ms var(--ease); }
  .feature::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / 0.07), transparent 60%);
    opacity: 0; transition: opacity 300ms var(--ease);
  }
  .feature:hover { transform: translateY(-4px); border-color: rgb(255 255 255 / 0.16); }
  .feature:hover::after { opacity: 1; }
  .feature .emoji { transition: transform var(--spring-joueur-d) var(--spring-joueur); transform-origin: 50% 80%; }
  .feature:hover .emoji { transform: scale(1.15) rotate(-8deg); }

  /* Captures : celle sous la souris se soulève. */
  .gallery li:hover img { transform: translateY(-8px); border-color: rgb(255 255 255 / 0.18); box-shadow: 0 24px 50px -20px rgb(0 0 0 / 0.8); }
  .gallery.is-dragging li:hover img { transform: none; box-shadow: none; }

  /* Engagements vie privée : la coche pulse quand on lit la ligne. */
  .checks li svg { transition: transform var(--spring-joueur-d) var(--spring-joueur); }
  .checks li span { transition: color 200ms var(--ease); }
  .checks li:hover svg { transform: scale(1.25); }
  .checks li:hover span { color: var(--text); }

  /* Icône de l'appel final. */
  .final img { transition: transform var(--spring-joueur-d) var(--spring-joueur); }
  .final img:hover { transform: rotate(-8deg) scale(1.06); }

  .icon-btn:not(:disabled):hover { background: var(--surface-2); }
  .site-footer a { transition: color 150ms var(--ease); }
}

/* ---------- Accessibilité ---------- */
@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (prefers-contrast: more) {
  :root { --line: rgb(255 255 255 / 0.35); --text-2: #dfe2e8; --text-3: #c3c8d1; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .icon-btn { transition: background-color 150ms var(--ease), color 150ms var(--ease); }
  .btn:active, .icon-btn:active { transform: none; }
}