/* ---- Palette « Craie & encre » ----------------------------------------
   Fond clair mais froid, accent bleu d'encre. Le crème chaud avec accent
   terracotta est la palette la plus produite par les générateurs de design :
   elle ne distinguait plus le produit, elle le datait.

   Elle a d'abord été posée sur la seule page d'accueil. La garder là créait
   une rupture au premier clic — landing froide, application chaude — donc
   elle vaut désormais pour tout le produit : landing, auth, onboarding,
   rapport, test room.

   Les canaux `*-rgb` existent parce que les surfaces translucides (en-têtes
   floutés, dégradés posés sur photo, halos, voiles de modale) ont besoin de
   la couleur en alpha variable. Écrites en dur, ces valeurs-là sont
   exactement ce qui avait laissé du terracotta dans l'application quand la
   landing a changé : une couleur en dur ne suit pas la palette. */
:root {
  --accent-rgb: 47, 74, 107;
  --chalk-rgb: 233, 231, 226;
  --chalk-deep-rgb: 222, 219, 212;
  --line-rgb: 205, 201, 193;
  --ink-rgb: 20, 24, 29;

  --chalk: rgb(var(--chalk-rgb));
  --chalk-deep: rgb(var(--chalk-deep-rgb));
  --line: rgb(var(--line-rgb));
  --slate: #7c848d;
  --ink: rgb(var(--ink-rgb));

  --accent: rgb(var(--accent-rgb));
  --accent-dark: #24384f;
  --accent-soft: rgba(var(--accent-rgb), 0.10);
  /* Halo du bouton principal. Tokenisé parce qu'il suit l'accent : codé en
     dur, il laissait une bavure orange sous un bouton bleu. */
  --accent-glow: rgba(var(--accent-rgb), 0.28);

  --bg: var(--chalk);
  --bg-alt: var(--chalk-deep);
  --bg-elev: #f7f6f3;
  --text: var(--ink);
  --text-dim: #4b535c;
  --text-muted: var(--slate);
  --border: var(--line);
  --border-soft: rgba(var(--line-rgb), 0.55);

  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Archivo Black", var(--font-sans);
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 8px 32px rgba(var(--ink-rgb), 0.07);
  --shadow-lg: 0 20px 60px rgba(var(--ink-rgb), 0.11);
  --success-rgb: 63, 125, 90;
  --success: rgb(var(--success-rgb));
  --danger-rgb: 180, 35, 24;
  --danger: rgb(var(--danger-rgb));
  --danger-dark: #912018;
  --max-width: 1200px;
  --header-h: 72px;
}

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

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body.nav-open {
  overflow: hidden;
}

body.dashboard-sidebar-open {
  overflow: hidden;
}

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

img:not([src]) {
  background: var(--chalk-deep);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

.container {
  width: min(100% - 2rem, var(--max-width));
  margin-inline: auto;
}

/* Header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(var(--chalk-rgb), 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-soft);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: var(--text);
}

/* La marque prend la couleur du texte via currentColor : un seul fichier sert
   sur fond clair comme sur fond sombre, sans variante à maintenir. */
.logo__mark {
  width: 1.5em;
  height: 1.5em;
  flex-shrink: 0;
  color: var(--accent);
}

.nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav__panel {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav__links {
  display: flex;
  gap: 1.75rem;
  list-style: none;
}

.nav__links a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-dim);
  transition: color 0.2s;
}

.nav__links a:hover {
  color: var(--accent);
}

/* Bouton de langue — un <button> et une liste, jamais un <select> natif :
   sur iOS un select ouvre la roue plein écran du système, qui n'a aucun
   rapport avec la direction artistique de la page. */
.locale-switcher {
  position: relative;
  flex-shrink: 0;
}

.locale-switcher__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-dim);
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.locale-switcher__trigger:hover {
  color: var(--accent);
  border-color: var(--line);
}

.locale-switcher__trigger:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.locale-switcher__globe {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
}

.locale-switcher__chevron {
  width: 0.6rem;
  height: 0.4rem;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.locale-switcher.is-open .locale-switcher__chevron {
  transform: rotate(180deg);
}

.locale-switcher__list {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 120;
  min-width: 10.5rem;
  padding: 0.3rem;
  list-style: none;
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

.locale-switcher__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.7rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-dim);
  border-radius: calc(var(--radius-sm) - 4px);
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
}

.locale-switcher__option:hover,
.locale-switcher__option:focus-visible {
  outline: none;
  color: var(--text);
  background: var(--bg-alt);
}

.locale-switcher__option[aria-selected="true"] {
  color: var(--accent);
  font-weight: 600;
}

.locale-switcher__check {
  width: 0.85rem;
  height: 0.85rem;
  flex-shrink: 0;
}

.legal-binding-notice {
  margin-bottom: 1.5rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  border: 1px solid var(--border-soft);
  font-size: 0.9rem;
  color: var(--text-dim);
}

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
}

.nav__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

.nav.open .nav__toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav.open .nav__toggle span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav.open .nav__toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn--primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 16px var(--accent-glow);
}

.btn--primary:hover {
  background: var(--accent-dark);
}

.btn--secondary {
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border);
}

.btn--secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn--lg {
  padding: 1rem 2rem;
  font-size: 1rem;
}

.btn--loading {
  pointer-events: none;
  opacity: 0.85;
}

.btn--loading::after {
  content: "";
  width: 1em;
  height: 1em;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* Page loader */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--chalk-rgb), 0.72);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.page-loader.is-visible {
  opacity: 1;
  visibility: visible;
}

.page-loader__spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Hero */
.hero {
  padding: calc(var(--header-h) + 4rem) 0 5rem;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 80%;
  background: radial-gradient(ellipse, var(--accent-soft) 0%, transparent 70%);
  pointer-events: none;
}

.hero__grid {
  display: flex;
  justify-content: center;
}

.hero__content {
  max-width: 960px;
  width: 100%;
  text-align: center;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  background: var(--chalk-deep);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 1.5rem;
}

.badge__dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}

.hero__title span {
  color: var(--accent);
}

.hero__desc {
  font-size: 1.125rem;
  color: var(--text-dim);
  max-width: 820px;
  margin-inline: auto;
  margin-bottom: 2rem;
  line-height: 1.7;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem 3.5rem;
  width: 100%;
  max-width: 820px;
  margin-inline: auto;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.stat__value {
  font-weight: 700;
  font-size: 0.95rem;
}

.stat__label {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Sections */
.section {
  padding: 6rem 0;
}

.section--alt {
  background: var(--bg-alt);
}

.section__eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.section__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  line-height: 1.15;
  margin-bottom: 1rem;
}

.section__desc {
  color: var(--text-dim);
  font-size: 1.05rem;
  max-width: 560px;
  margin-bottom: 3rem;
}

.section__header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.section__header .section__desc {
  margin-inline: auto;
}

/* Steps */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.step-card {
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 2rem;
  transition: transform 0.2s, box-shadow 0.2s;
}

.step-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.step-card__num {
  font-family: var(--font-display);
  font-size: 2.5rem;
  color: var(--line);
  line-height: 1;
  margin-bottom: 1.25rem;
}

.step-card__title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.step-card__text {
  font-size: 0.95rem;
  color: var(--text-dim);
  line-height: 1.65;
}

/* Before/After */
.showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.compare {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3/4;
  cursor: ew-resize;
  user-select: none;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-soft);
  background: var(--chalk-deep);
}

.compare__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.compare__after-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.compare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #fff;
  transform: translateX(-50%);
  z-index: 10;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
}

.compare__handle::after {
  content: "↔";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--text);
  box-shadow: var(--shadow);
}

.compare__labels {
  position: absolute;
  bottom: 1rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 1rem;
  z-index: 11;
  pointer-events: none;
}

.compare__label {
  padding: 0.35rem 0.85rem;
  background: rgba(var(--ink-rgb), 0.7);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

.showcase__thumbs {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.thumb {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--chalk-deep);
  border: 2px solid transparent;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s, border-color 0.2s;
}

.thumb.active,
.thumb:hover {
  opacity: 1;
  border-color: var(--accent);
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Catalog grid */
.catalog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}

.catalog-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3/4;
  border: 1px solid var(--border-soft);
  background: var(--bg-elev);
  transition: transform 0.2s;
}

.catalog-card:hover {
  transform: scale(1.03);
}

.catalog-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.catalog-card__label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2.5rem 0.75rem 0.75rem;
  background: linear-gradient(transparent, rgba(var(--ink-rgb), 0.75));
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}

/* Color swatches */
.colors {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 140px));
  gap: 1rem;
  justify-content: center;
}

.color-card {
  text-align: center;
}

.color-card__swatch {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1;
  border: 1px solid var(--border-soft);
  margin-bottom: 0.75rem;
  background: var(--chalk-deep);
  transition: transform 0.2s;
}

.color-card:hover .color-card__swatch {
  transform: scale(1.05);
}

.color-card__swatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.color-card__name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dim);
}

/* Reviews */
.section--reviews {
  overflow: hidden;
}

.reviews-marquee {
  margin-top: 2.5rem;
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
}

.reviews-marquee__track {
  display: flex;
  width: max-content;
  animation: reviews-scroll 45s linear infinite;
}

.reviews-marquee__track:hover {
  animation-play-state: paused;
}

.reviews-marquee__group {
  display: flex;
  gap: 1.5rem;
  padding-right: 1.5rem;
}

@keyframes reviews-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.review-card {
  flex: 0 0 min(360px, 85vw);
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.review-card__quote {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-dim);
  flex: 1;
}

.review-card__quote::before {
  content: "\201C";
  font-size: 2rem;
  color: var(--accent);
  line-height: 0;
  display: block;
  margin-bottom: 0.5rem;
}

.review-card__author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.review-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--chalk-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
  border: 2px solid var(--line);
}

.review-card__name {
  font-weight: 700;
  font-size: 0.9rem;
}

.review-card__stars {
  display: flex;
  gap: 0.15rem;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--accent);
  letter-spacing: 0.05em;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .nav__panel {
    transition: none;
  }

  .nav__toggle span {
    transition: none;
  }

  .locale-switcher__chevron {
    transition: none;
  }

  .reviews-marquee__track {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    padding: 0 1.5rem;
    gap: 1.5rem;
  }

  .reviews-marquee__group[aria-hidden="true"] {
    display: none;
  }

  .reviews-marquee {
    mask-image: none;
    -webkit-mask-image: none;
  }
}

/* FAQ */
.faq-list {
  max-width: 720px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq-item {
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.faq-item__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
  transition: color 0.2s;
}

.faq-item__question:hover {
  color: var(--accent);
}

.faq-item__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--chalk-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--accent);
  transition: transform 0.3s;
}

.faq-item.open .faq-item__icon {
  transform: rotate(45deg);
}

.faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.faq-item.open .faq-item__answer {
  max-height: 300px;
}

.faq-item__answer p {
  padding: 0 1.5rem 1.25rem;
  font-size: 0.9rem;
  color: var(--text-dim);
  line-height: 1.7;
}

/* CTA */
.cta {
  text-align: center;
  padding: 5rem 0;
  background: linear-gradient(135deg, var(--chalk-deep) 0%, var(--chalk) 50%, var(--accent-soft) 100%);
  border-top: 1px solid var(--border-soft);
}

.cta__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 1rem;
}

.cta__title span {
  color: var(--accent);
}

.cta__desc {
  color: var(--text-dim);
  font-size: 1.05rem;
  max-width: 480px;
  margin: 0 auto 2rem;
}

/* Footer */
.footer {
  padding: 3rem 0 2rem;
  background: var(--text);
  color: var(--chalk-deep);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.footer__brand {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

.footer__tagline {
  font-size: 0.9rem;
  color: var(--slate);
  max-width: 280px;
}

.footer__heading {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--line);
  margin-bottom: 1rem;
}

.footer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer__links a {
  font-size: 0.9rem;
  color: var(--slate);
  transition: color 0.2s;
}

.footer__links a:hover {
  color: var(--chalk);
}

.footer__bottom {
  padding-top: 2rem;
  border-top: 1px solid rgba(var(--line-rgb), 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--slate);
}

/* Auth page */
.auth-page {
  min-height: 100vh;
}

.auth {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.auth__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, var(--accent-soft) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 100%, rgba(var(--chalk-deep-rgb), 0.8) 0%, transparent 50%);
  pointer-events: none;
}

.auth__container {
  position: relative;
  width: min(100%, 440px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.auth__logo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: var(--text);
  transition: color 0.2s;
}

.auth__logo:hover {
  color: var(--accent);
}

.auth__card {
  width: 100%;
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  border-radius: calc(var(--radius) + 4px);
  padding: 2.5rem;
  box-shadow: var(--shadow-lg);
}

.auth__header {
  text-align: center;
  margin-bottom: 2rem;
}

.auth__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 1.85rem);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.auth__title span {
  color: var(--accent);
}

.auth__subtitle {
  font-size: 0.95rem;
  color: var(--text-dim);
}

.auth__panel {
  display: none;
}

.auth__panel.active {
  display: block;
}

.auth__form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}

.form-link {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--accent);
  transition: color 0.2s;
}

.form-link:hover {
  color: var(--accent-dark);
}

.form-input {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--bg);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input::placeholder {
  color: var(--text-muted);
}

.form-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.form-input:invalid:not(:placeholder-shown) {
  border-color: var(--danger);
}

.form-input-wrap {
  position: relative;
}

.form-input-wrap .form-input {
  padding-right: 2.75rem;
}

.form-input-toggle {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  color: var(--text-muted);
  transition: color 0.2s;
}

.form-input-toggle svg {
  display: block;
}

.form-input-toggle .icon-eye {
  display: none;
}

.form-input-toggle.is-visible .icon-eye-off {
  display: none;
}

.form-input-toggle.is-visible .icon-eye {
  display: block;
}

.form-input-toggle:hover {
  color: var(--accent);
}

.btn--full {
  width: 100%;
}

.auth__legal {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.55;
  text-align: center;
}

.auth__legal a {
  color: var(--accent);
  font-weight: 500;
}

.auth__legal a:hover {
  text-decoration: underline;
}

.auth__divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.75rem 0;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.auth__divider::before,
.auth__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-soft);
}

.auth__social {
  display: flex;
  justify-content: center;
}

.auth__social .btn--social,
.auth__social .btn-google-host {
  width: 100%;
  max-width: 280px;
}

.auth__social .btn-google-host {
  display: flex;
  justify-content: center;
}

.auth__social .btn-google-host iframe {
  margin: 0 auto;
}

.btn--social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  transition: border-color 0.2s, background 0.2s;
}

.btn--social:hover {
  border-color: var(--accent);
  background: var(--chalk-deep);
  transform: none;
}

.btn.is-loading,
.btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
}

.auth__switch {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--text-dim);
}

.auth__switch-btn {
  font-weight: 600;
  color: var(--accent);
  padding: 0;
  transition: color 0.2s;
}

.auth__switch-btn:hover {
  color: var(--accent-dark);
  text-decoration: underline;
}

.auth__support {
  text-align: center;
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.auth__support a {
  color: var(--text-dim);
  text-decoration: underline;
}

.auth__toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(1rem);
  padding: 0.85rem 1.5rem;
  background: var(--text);
  color: var(--chalk);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 200;
  box-shadow: var(--shadow-lg);
}

.auth__toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.app-toast {
  position: fixed;
  bottom: max(1.5rem, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(1rem);
  max-width: min(92vw, 28rem);
  padding: 0.9rem 1.25rem;
  background: var(--ink);
  color: #fff;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 10000;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.app-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.dashboard-try-on-active .app-toast {
  bottom: max(1.5rem, env(safe-area-inset-bottom));
}

@media (max-width: 480px) {
  .auth__card {
    padding: 2rem 1.5rem;
  }
}

/* Responsive */
@media (max-width: 1024px) {
  .showcase {
    grid-template-columns: 1fr;
  }

  .steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .nav__panel {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    width: 100%;
    background: var(--chalk);
    border-bottom: 1px solid var(--border-soft);
    box-shadow: var(--shadow);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-0.5rem);
    transition:
      max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.35s ease,
      transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 99;
  }

  .nav.open .nav__panel {
    max-height: 14rem;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .nav__links {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.5rem 0.5rem;
  }

  .nav__links a {
    display: block;
    padding: 0.75rem 0;
    font-size: 1rem;
  }

  .nav {
    gap: 0.75rem;
  }

  /* Lien de connexion. Volontairement discret face au CTA : il s'adresse à qui
   sait déjà pourquoi il vient, l'inscription reste l'action mise en avant. */
.nav__login {
  color: var(--text-dim);
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  padding: 0.4rem 0.2rem;
}

.nav__login:hover {
  color: var(--text);
}

.nav__cta {
    padding: 0.55rem 1rem;
    font-size: 0.8rem;
    flex-shrink: 0;
  }

  .locale-switcher__trigger {
    gap: 0.3rem;
    padding: 0.4rem 0.55rem;
  }

  .locale-switcher__chevron {
    display: none;
  }

  .hero {
    min-height: 100dvh;
    padding: calc(var(--header-h) + 1.5rem) 0 2rem;
    display: flex;
    flex-direction: column;
  }

  .hero .container {
    width: min(100% - 1.5rem, var(--max-width));
  }

  .hero__grid {
    flex: 1;
    display: flex;
    width: 100%;
  }

  /* Le contenu se centre dans la hauteur d'écran au lieu de se tasser sous
     l'en-tête. L'espace restant se répartit alors au-dessus et au-dessous,
     plutôt que de s'accumuler en un seul trou avant les statistiques. */
  .hero__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.6rem;
    flex: 1;
    width: 100%;
    max-width: none;
    /* Centrage symétrique. Une version lestée vers le bas a été essayée pour
       resserrer l'écart avec la bande de preuve : elle repoussait le titre à
       226px du haut sur un grand téléphone, où le bloc avait l'air d'avoir
       coulé. Sur un écran haut avec un contenu court, l'air doit se répartir,
       pas s'accumuler d'un côté. */
    padding-block: 1.5rem;
  }

  /* La description, sur cinq lignes, pesait visuellement plus lourd que le
     titre : à 375px l'écart n'était que de 26 contre 16px. On creuse des deux
     côtés pour que la hiérarchie se lise au premier coup d'œil. */
  .hero__title {
    font-size: clamp(1.9rem, 8.2vw, 2.75rem);
    line-height: 1.08;
    margin-bottom: 0;
  }

  .badge {
    margin-bottom: 0;
    font-size: 0.75rem;
  }

  /* Pas de réordonnancement. La version précédente remontait le bouton avant
     la description (order 3 puis 4) : il coupait la phrase en deux et on
     cliquait avant d'avoir lu ce qu'on achetait. */
  /* Le filet clôt le héros sous le bouton : c'est la borne basse du premier
     écran, et ce qui suit demande un défilement. */
  .hero__actions {
    margin-bottom: 0;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--border-soft);
  }

  .hero__desc {
    font-size: 0.88rem;
    line-height: 1.6;
    margin-bottom: 0;
    max-width: 34ch;
    margin-inline: auto;
  }

  .stats-band .hero__stats {
    justify-content: space-between;
    gap: 1.25rem 1rem;
    max-width: none;
  }

  /* Le héros occupe la hauteur d'écran pour que la preuve sociale tombe sous
     la ligne de flottaison. Son rembourrage bas est réduit : sans ça, le
     centrage du contenu laissait 250px de vide entre le filet et la bande, et
     les statistiques flottaient au milieu de nulle part. */
  .hero {
    padding-bottom: 0.5rem;
  }

  .section {
    padding: 4rem 0;
  }

  .stat {
    flex: 1 1 30%;
    min-width: 5.5rem;
  }

  .nav__toggle {
    display: flex;
  }

  .footer__grid {
    grid-template-columns: 1fr;
  }

  .catalog {
    grid-template-columns: repeat(2, 1fr);
  }

  .colors {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Onboarding — plein écran, frère de .dashboard (voir #onboarding-overlay) */
body.onboarding-active {
  overflow: hidden;
}

body.onboarding-active .dashboard {
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}

.onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--bg);
  overflow: hidden;
}

.onboarding-overlay:not([hidden]) {
  display: block;
}

.onboarding-page {
  min-height: 100vh;
}

.onboarding {
  height: 100dvh;
  width: 100%;
  display: flex;
  justify-content: center;
  padding:
    max(0.75rem, env(safe-area-inset-top, 0px))
    max(1.25rem, env(safe-area-inset-right, 0px))
    max(1rem, env(safe-area-inset-bottom, 0px))
    max(1.25rem, env(safe-area-inset-left, 0px));
}

.onboarding__frame {
  width: 100%;
  max-width: 32rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* Groupe texte + bouton : sur mobile le spacer étire, sur grand écran le cluster reste uni */
.onboarding__cluster {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}

.onboarding__cluster--no-footer .onboarding__main {
  flex: 1;
}

.onboarding__topbar {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
  padding: 0.35rem 0 1.35rem;
  min-height: 2.75rem;
}

.onboarding__back {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}

.onboarding__back:hover {
  color: var(--text);
  background: var(--chalk-deep);
}

.onboarding__back[hidden] {
  display: none;
}

.onboarding__progress {
  flex: 1;
  min-width: 0;
  height: 3px;
  background: var(--border-soft);
  border-radius: 999px;
  overflow: hidden;
}

.onboarding__progress-bar {
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.35s ease;
}

.onboarding__main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.onboarding__steps {
  flex: 0 1 auto;
  min-height: 0;
  overflow: hidden;
}

.onboarding__main:has(.onboarding__step--scrollable) .onboarding__spacer {
  flex: 0 0 0;
  min-height: 0;
  height: 0;
}

.onboarding__steps:has(.onboarding__step--scrollable) {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.onboarding__spacer {
  flex: 1 1 auto;
  min-height: 1.5rem;
}

@media (max-width: 639px) {
  .onboarding__topbar {
    width: 100%;
  }

  .onboarding__progress {
    flex: 1 1 0%;
    min-width: 0;
    width: auto;
  }

  /* Statements : bloc d'affirmations (même échelle title/body), footnote seul en retrait */
  .onboarding__statement .onboarding__line--title,
  .onboarding__statement .onboarding__line--body,
  .onboarding__statement .onboarding__line--emphasis {
    font-family: var(--font-display);
    font-size: clamp(1.65rem, 8.2vw, 2.1rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0;
  }

  .onboarding__statement .onboarding__line + .onboarding__line {
    margin-top: 1.1em;
  }

  .onboarding__statement .onboarding__line.onboarding__line--chute {
    margin-top: 2em;
  }

  .onboarding__statement .onboarding__line--footnote {
    margin-top: 1.25rem;
  }

  /* Réduction progressive quand le contenu dépasse (voir onboarding-step-fit.js) */
  .onboarding__step--fit-1 .onboarding__statement .onboarding__line--title,
  .onboarding__step--fit-1 .onboarding__statement .onboarding__line--body,
  .onboarding__step--fit-1 .onboarding__statement .onboarding__line--emphasis {
    font-size: clamp(1.45rem, 7vw, 1.85rem);
    line-height: 1.12;
  }

  .onboarding__step--fit-1 .onboarding__statement .onboarding__line + .onboarding__line {
    margin-top: 0.95em;
  }

  .onboarding__step--fit-1 .onboarding__statement .onboarding__line.onboarding__line--chute {
    margin-top: 1.5em;
  }

  .onboarding__step--fit-2 .onboarding__statement .onboarding__line--title,
  .onboarding__step--fit-2 .onboarding__statement .onboarding__line--body,
  .onboarding__step--fit-2 .onboarding__statement .onboarding__line--emphasis {
    font-size: clamp(1.28rem, 6.2vw, 1.62rem);
    line-height: 1.14;
  }

  .onboarding__step--fit-2 .onboarding__statement .onboarding__line + .onboarding__line {
    margin-top: 0.8em;
  }

  .onboarding__step--fit-2 .onboarding__statement .onboarding__line.onboarding__line--chute {
    margin-top: 1.25em;
  }

  .onboarding__step--fit-3 .onboarding__statement .onboarding__line--title,
  .onboarding__step--fit-3 .onboarding__statement .onboarding__line--body,
  .onboarding__step--fit-3 .onboarding__statement .onboarding__line--emphasis {
    font-size: clamp(1.12rem, 5.6vw, 1.42rem);
    line-height: 1.16;
  }

  .onboarding__step--fit-3 .onboarding__statement .onboarding__line + .onboarding__line {
    margin-top: 0.65em;
  }

  .onboarding__step--fit-3 .onboarding__statement .onboarding__line.onboarding__line--chute {
    margin-top: 1em;
  }

  .onboarding__step--fit-2 .onboarding__diagnostic-label,
  .onboarding__step--fit-2 .onboarding__score-highlight-text,
  .onboarding__step--fit-2 .onboarding__narrative-step-text {
    font-size: 0.92rem;
  }

  .onboarding__step--fit-3 .onboarding__diagnostic-label,
  .onboarding__step--fit-3 .onboarding__score-highlight-text,
  .onboarding__step--fit-3 .onboarding__narrative-step-text,
  .onboarding__step--fit-3 .onboarding__diagnostic-body {
    font-size: 0.85rem;
  }

  .onboarding__step--fit-2.onboarding__statement--cut-result-demo .cut-result__compare {
    max-width: 18rem;
  }

  .onboarding__step--fit-3.onboarding__statement--cut-result-demo .cut-result__compare {
    max-width: 16rem;
  }

  .onboarding__step--fit-4 .onboarding__statement .onboarding__line--title,
  .onboarding__step--fit-4 .onboarding__statement .onboarding__line--body,
  .onboarding__step--fit-4 .onboarding__statement .onboarding__line--emphasis {
    font-size: clamp(1rem, 5vw, 1.28rem);
    line-height: 1.18;
  }

  .onboarding__step--fit-5 .onboarding__statement .onboarding__line--title,
  .onboarding__step--fit-5 .onboarding__statement .onboarding__line--body,
  .onboarding__step--fit-5 .onboarding__statement .onboarding__line--emphasis {
    font-size: clamp(0.92rem, 4.6vw, 1.15rem);
    line-height: 1.2;
  }

  .onboarding__step--fit-4 .onboarding__choice,
  .onboarding__step--fit-5 .onboarding__choice {
    font-size: 0.88rem;
    padding: 0.65rem 0.75rem;
  }
}

@media (min-width: 640px) {
  .onboarding__cluster {
    justify-content: center;
  }

  .onboarding__main {
    flex: 0 1 auto;
    overflow-y: auto;
    max-height: min(62dvh, 30rem);
  }

  .onboarding__spacer {
    flex: 0 0 0;
    min-height: 0;
    height: 0;
    overflow: hidden;
  }

  .onboarding__footer {
    padding-top: clamp(1.25rem, 3vh, 2rem);
  }
}

.onboarding__step {
  display: none;
  animation: onboarding-fade 0.35s ease;
}

.onboarding__step.active {
  display: block;
}

/* Narration : apparition ligne par ligne (statement uniquement) */
@keyframes onboarding-line-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.onboarding__line--animated {
  animation: onboarding-line-in 0.45s ease both;
  animation-delay: calc(var(--line-index) * 400ms);
}

/* Statements : graisse explicite — repli Inter si Archivo Black indisponible */
.onboarding__statement .onboarding__line--title,
.onboarding__statement .onboarding__line--body,
.onboarding__statement .onboarding__line--emphasis {
  font-weight: 700;
}

.onboarding__statement .onboarding__accent {
  font-weight: 700;
}

.onboarding__line--title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 7vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 0.65rem;
}

.onboarding__line--body {
  font-size: 1.05rem;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 0.65rem;
}

.onboarding__line--emphasis {
  font-size: 1.08rem;
  line-height: 1.45;
  color: var(--text);
  margin-bottom: 0.65rem;
}

.onboarding__line--footnote {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-soft);
}

.onboarding__accent {
  color: var(--accent);
  font-family: var(--font-display);
}

@media (prefers-reduced-motion: reduce) {
  .onboarding__line--animated {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.onboarding__readback {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 0.5rem;
}

.onboarding__readback-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.onboarding__readback-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.onboarding__readback-value {
  font-size: 1.05rem;
  color: var(--text);
  line-height: 1.45;
}

.onboarding__diagnostic {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 0.5rem;
}

.onboarding__diagnostic-block {
  padding: 1rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.onboarding__diagnostic-label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.onboarding__diagnostic-body {
  font-size: 1rem;
  color: var(--text-dim);
  line-height: 1.55;
}

.onboarding__diagnostic-body + .onboarding__diagnostic-body {
  margin-top: 0.5rem;
}

.onboarding__narrative-steps {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.onboarding__narrative-step {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.onboarding__narrative-step-number {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--accent);
  color: var(--chalk);
  font-family: var(--font-display);
  font-size: 0.9rem;
}

.onboarding__narrative-step-text {
  margin: 0;
  font-size: 1rem;
  color: var(--text-dim);
  line-height: 1.5;
}

.onboarding__score-promise {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.onboarding__score-highlight {
  padding: 0.9rem 1rem;
  border-left: 3px solid var(--accent);
  background: var(--chalk-deep);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.onboarding__score-highlight-text {
  margin: 0;
  font-size: 1rem;
  color: var(--text-dim);
  line-height: 1.5;
}

@keyframes onboarding-fade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.onboarding__title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 7vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 0.65rem;
}

.onboarding__lead {
  font-size: 1.05rem;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 0.65rem;
}

.onboarding__emphasis {
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.45;
}

.onboarding__footnote {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-soft);
}

.onboarding__hint {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}

.onboarding__field {
  margin-top: 0.5rem;
}

.onboarding__scale {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
}

.onboarding__scale-btn {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.15s;
}

.onboarding__scale-btn:hover {
  border-color: var(--accent);
  background: var(--chalk-deep);
}

.onboarding__scale-btn.selected {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--chalk);
}

.onboarding__scale-value {
  margin-top: 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
  text-align: center;
}

.onboarding__age-picker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 1rem;
}

.onboarding__age-btn {
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-size: 1.35rem;
  line-height: 1;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.onboarding__age-btn:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--chalk-deep);
}

.onboarding__age-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.onboarding__age-value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 2.75rem);
  color: var(--accent);
  min-width: 3ch;
  text-align: center;
}

.onboarding__scale-slider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.75rem;
}

.onboarding__scale-face {
  font-size: 2.5rem;
  line-height: 1;
}

.onboarding__scale-word {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.onboarding__scale-range {
  width: 100%;
  accent-color: var(--accent);
  cursor: pointer;
}

.onboarding__scale-ticks {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.35rem;
}

@media (prefers-reduced-motion: reduce) {
  .onboarding__age-btn,
  .onboarding__scale-range {
    transition: none;
  }
}

.onboarding__choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin-top: 0.5rem;
}

.onboarding__choices--stack {
  grid-template-columns: 1fr;
}

.onboarding__choice {
  padding: 0.85rem 1rem;
  text-align: left;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.4;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.onboarding__choice:hover {
  border-color: var(--accent);
  background: var(--chalk-deep);
}

.onboarding__choice.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 600;
}

/* Écran catalogue : colonne flex bornée par la place réellement disponible.
   La version précédente bornait la grille avec calc(100vh - 280px), une valeur
   déduite du viewport et non de la place réelle. Sur desktop elle donnait 800px
   à la grille là où .onboarding__main n'en offre que 480 : la grille débordait
   son parent, c'est donc le PARENT qui défilait, en emportant le titre hors de
   l'écran. D'où un écran sans titre et des rangées coupées en haut et en bas.

   Ici, plus aucune hauteur devinée : le titre et la consigne gardent leur
   hauteur naturelle, la grille prend le reste et défile seule. Le parent ne
   déborde jamais, donc le titre ne peut plus disparaître. */
.onboarding__steps:has(.onboarding__catalog) {
  display: flex;
  flex-direction: column;
}

/* flex plutôt que max-height: 100% — l'écran démarre quelques pixels sous son
   conteneur, donc un pourcentage le faisait finir d'autant plus bas et mordre
   sur le footer. En flex, la hauteur vient du conteneur, pas d'un repère décalé. */
.onboarding__question:has(.onboarding__catalog) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.onboarding__question:has(.onboarding__catalog) .onboarding__line {
  flex: 0 0 auto;
}

.onboarding__choices.onboarding__catalog {
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-snap-type: y proximity;
  padding: 0.15rem;
  margin-top: 0.75rem;
}

/* Sur desktop, .onboarding__main est plafonné à min(62dvh, 30rem) — calibré
   pour deux lignes de texte, pas pour douze images. On lui donne plus de place
   ici, et une quatrième colonne : les 12 coupes tiennent alors en 3 rangées,
   toutes visibles d'un coup, ce que trois colonnes ne permettaient pas. */
@media (min-width: 640px) {
  .onboarding__main:has(.onboarding__catalog) {
    max-height: min(80dvh, 46rem);
  }

  .onboarding__choices.onboarding__catalog {
    grid-template-columns: repeat(4, 1fr);
  }
}

.onboarding__catalog-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.3rem;
  text-align: center;
  scroll-snap-align: start;
}

.onboarding__catalog-img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: calc(var(--radius-sm) - 2px);
  background: var(--chalk-deep);
}

.onboarding__catalog-name {
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.2;
}

.onboarding__recap {
  font-size: 1.05rem;
  color: var(--text-dim);
  line-height: 1.7;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.onboarding__recap strong {
  color: var(--text);
  font-weight: 600;
}

.onboarding__footer {
  flex-shrink: 0;
  padding-top: 1rem;
  margin: 0;
}

.onboarding__next {
  width: 100%;
}

/* Lien de secours sous le CTA : remplace le launcher Crisp, masqué pendant l'onboarding
   parce qu'il recouvrait le bouton plein largeur. */
.onboarding__help {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  padding-top: 0.5rem;
}

.onboarding__help-link {
  border: 0;
  background: none;
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 0.82rem;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  cursor: pointer;
  transition: color 0.2s, text-decoration-color 0.2s;
}

.onboarding__help-link:hover,
.onboarding__help-link:focus-visible {
  color: var(--accent);
  text-decoration-color: currentColor;
}

.onboarding__upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.5rem auto 0;
  width: 100%;
  padding: 2.5rem 1.5rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text-muted);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, padding 0.2s;
}

.onboarding__upload:hover:not(.has-file),
.onboarding__upload:focus-within:not(.has-file) {
  border-color: var(--accent);
  background: var(--chalk-deep);
}

.onboarding__upload.has-file {
  display: block;
  width: 100%;
  padding: 0;
  aspect-ratio: 3 / 4;
  max-height: min(400px, 55vh);
  border-color: var(--accent);
  border-style: solid;
  background: var(--bg);
  line-height: 0;
  overflow: hidden;
}

.onboarding__upload.has-file:hover {
  opacity: 0.95;
}

.onboarding__upload.is-dragover:not(.has-file) {
  border-color: var(--accent);
  background: var(--chalk-deep);
}

.onboarding__upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.onboarding__upload-placeholder[hidden] {
  display: none !important;
}

.onboarding__upload-icon {
  color: var(--text-muted);
  line-height: 0;
}

.onboarding__upload-text {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-dim);
  line-height: 1.4;
}

.onboarding__upload-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.onboarding__upload-preview {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: top;
}

.onboarding__upload-preview[hidden] {
  display: none !important;
}

.onboarding__upload-input {
  display: none;
}

@media (max-width: 480px) {
  .onboarding {
    padding-inline: max(1rem, env(safe-area-inset-left, 0px)) max(1rem, env(safe-area-inset-right, 0px));
  }

  .onboarding__scale {
    grid-template-columns: repeat(5, 1fr);
    gap: 0.4rem;
  }

  .onboarding__scale-btn {
    font-size: 0.9rem;
  }

  .onboarding__choices:not(.onboarding__choices--stack):not(.onboarding__catalog) {
    grid-template-columns: 1fr;
  }
}

/* Selfie upload */
.onboarding__upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding: 2rem 1.5rem;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s, background 0.2s;
}

.onboarding__upload:hover,
.onboarding__upload:focus-within {
  border-color: var(--accent);
  background: var(--chalk-deep);
}

.onboarding__upload.has-file {
  border-color: var(--accent);
  border-style: solid;
  color: var(--text-dim);
}

.onboarding__upload.is-dragover {
  border-color: var(--accent);
  background: var(--chalk-deep);
}

.onboarding__upload-icon {
  color: var(--text-muted);
  line-height: 0;
}

.onboarding__upload-text {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-dim);
}

.onboarding__upload-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.onboarding__upload-input {
  display: none;
}

/* Analysis loader */
body.analysis-loading {
  overflow: hidden;
}

.analysis-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding:
    max(1rem, env(safe-area-inset-top, 0px))
    0
    max(1.25rem, env(safe-area-inset-bottom, 0px));
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.analysis-loader.is-visible {
  opacity: 1;
  visibility: visible;
}

.analysis-loader__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 38%, var(--accent-soft) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 100%, rgba(var(--chalk-deep-rgb), 0.8) 0%, transparent 50%),
    var(--chalk);
}

.analysis-loader__content {
  --pulse-size: min(300px, 42vw, calc((100dvh - 17rem) * 0.48));
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 3vh, 2rem);
  width: min(100%, 22rem);
  margin: auto;
  padding: clamp(1rem, 3vh, 2rem) 1.5rem;
  flex-shrink: 0;
}

.analysis-loader__pulse {
  position: relative;
  width: var(--pulse-size);
  height: var(--pulse-size);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.analysis-loader__wave {
  position: absolute;
  inset: 50% auto auto 50%;
  width: var(--pulse-size);
  height: var(--pulse-size);
  margin: calc(var(--pulse-size) / -2) 0 0 calc(var(--pulse-size) / -2);
  border: 2px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 50%;
  opacity: 0;
  animation: analysis-wave 2.8s ease-out infinite;
}

.analysis-loader__wave:nth-child(2) {
  animation-delay: 0.9s;
}

.analysis-loader__wave:nth-child(3) {
  animation-delay: 1.8s;
}

@keyframes analysis-wave {
  0% {
    transform: scale(0.85);
    opacity: 0.55;
  }
  100% {
    transform: scale(1.75);
    opacity: 0;
  }
}

.analysis-loader__avatar {
  position: relative;
  z-index: 1;
  width: var(--pulse-size);
  height: var(--pulse-size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--chalk-deep) 0%, var(--chalk) 100%);
  box-shadow:
    0 0 0 4px rgba(var(--accent-rgb), 0.25),
    var(--shadow-lg);
  overflow: visible;
}

.analysis-loader__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.analysis-loader__ring-track {
  stroke: rgba(var(--accent-rgb), 0.22);
}

.analysis-loader__ring-progress {
  stroke: var(--accent);
  transition: stroke-dashoffset 0.35s ease;
}

.analysis-loader__percent {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 5.5vw, 1.85rem);
  font-weight: 600;
  color: var(--text);
  line-height: 1;
}

.analysis-loader__brand {
  display: block;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(0.72rem, 2.4vw, 0.85rem);
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0;
}

.analysis-loader__brand-accent {
  color: var(--accent);
}

.analysis-loader__steps {
  list-style: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.analysis-loader__step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.92rem;
  color: var(--text-muted);
  transition: color 0.35s ease;
}

.analysis-loader__step.is-done,
.analysis-loader__step.is-active {
  color: var(--text-dim);
}

.analysis-loader__step.is-active {
  color: var(--text);
  font-weight: 500;
}

.analysis-loader__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 1.5px solid var(--border);
}

.analysis-loader__step.is-done .analysis-loader__icon {
  border-color: var(--accent);
  background: var(--accent);
  position: relative;
}

.analysis-loader__step.is-done .analysis-loader__icon::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--chalk);
  border: none;
  transform: none;
}

.analysis-loader.is-complete .analysis-loader__steps,
.analysis-loader.is-complete .analysis-loader__pulse,
.analysis-loader.is-complete .analysis-loader__brand {
  display: none;
}

.analysis-loader__step.is-active .analysis-loader__icon {
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  background: transparent;
  animation: analysis-spin 0.7s linear infinite;
}

@keyframes analysis-spin {
  to {
    transform: rotate(360deg);
  }
}

.analysis-loader__done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
  animation: report-fade-in 0.5s ease;
}

.analysis-loader__done-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 1.35rem;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.4);
}

.analysis-loader__done-text {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
}

@keyframes report-fade-in {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 480px), (max-height: 740px) {
  .analysis-loader__content {
    --pulse-size: min(300px, 58vw, calc((100dvh - 15.5rem) * 0.5));
    gap: clamp(0.75rem, 2vh, 1.25rem);
    width: min(100%, 20rem);
    padding: 1rem 1.25rem 1.5rem;
  }

  .analysis-loader__steps {
    gap: 0.6rem;
  }

  .analysis-loader__step {
    font-size: 0.85rem;
    gap: 0.6rem;
  }

  .analysis-loader__icon {
    width: 1.1rem;
    height: 1.1rem;
  }

  .analysis-loader__brand {
    font-size: clamp(1.1rem, 4.5vw, 1.5rem);
  }

  @keyframes analysis-wave {
    100% {
      transform: scale(1.45);
    }
  }
}

@media (min-width: 768px) {
  .analysis-loader__content {
    --pulse-size: min(300px, 300px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .analysis-loader__ring-progress {
    transition: none;
  }
}

/* Legal pages */
.legal-page {
  background: var(--chalk);
  color: var(--text);
  min-height: 100vh;
}

.legal-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(var(--chalk-rgb), 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--chalk-deep);
}

.legal-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  flex-wrap: wrap;
}

.legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
}

.legal-nav__link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.2s;
}

.legal-nav__link:hover,
.legal-nav__link.is-active {
  color: var(--accent);
}

.legal-main {
  padding: 2.5rem 0 4rem;
}

.legal-content {
  max-width: 720px;
}

.legal-content__header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--chalk-deep);
}

.legal-content__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  line-height: 1.15;
  margin-bottom: 0.5rem;
}

.legal-content__updated {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.legal-content h2 {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 2rem 0 0.75rem;
}

.legal-content h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 1.25rem 0 0.5rem;
}

.legal-content p,
.legal-content li {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-muted);
}

.legal-content p {
  margin-bottom: 1rem;
}

.legal-content ul,
.legal-content ol {
  margin: 0 0 1rem 1.25rem;
}

.legal-content li {
  margin-bottom: 0.35rem;
}

.legal-content a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-content a:hover {
  color: var(--text);
}

.legal-table-wrap {
  margin: 1rem 0 1.5rem;
  overflow-x: auto;
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.legal-table th,
.legal-table td {
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--chalk-deep);
  text-align: left;
  vertical-align: top;
}

.legal-table th {
  background: var(--chalk-deep);
  font-weight: 600;
  color: var(--text);
}

.legal-table td {
  color: var(--text-muted);
}

.legal-footer {
  padding: 1.5rem 0;
  border-top: 1px solid var(--chalk-deep);
  background: var(--chalk-deep);
}

.legal-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.legal-footer a {
  color: var(--accent);
  font-weight: 500;
}

@media (max-width: 640px) {
  .legal-header__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .legal-nav {
    width: 100%;
  }
}

/* ── Dashboard ───────────────────────────────────────────── */

.dashboard-page {
  background: var(--chalk);
  min-height: 100dvh;
}

.dashboard {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  max-width: 480px;
  margin: 0 auto;
}

.dashboard__topbar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  align-items: center;
  width: 100%;
  max-width: 480px;
  height: 64px;
  padding: 0 0.75rem;
  border-bottom: 1px solid var(--chalk-deep);
  background: rgba(var(--chalk-rgb), 0.96);
  backdrop-filter: blur(12px);
}

.dashboard__menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 4px;
  border: none;
  background: transparent;
  cursor: pointer;
}

.dashboard__menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

.dashboard-sidebar-open .dashboard__menu-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.dashboard-sidebar-open .dashboard__menu-toggle span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.dashboard-sidebar-open .dashboard__menu-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.dashboard__brand {
  justify-self: center;
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: var(--text);
  text-decoration: none;
}

.dashboard__sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 35;
  background: rgba(var(--ink-rgb), 0.35);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.dashboard-sidebar-open .dashboard__sidebar-backdrop {
  opacity: 1;
  pointer-events: auto;
}

.dashboard__sidebar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  width: 287px;
  height: 100dvh;
  background: rgba(var(--chalk-rgb), 0.98);
  backdrop-filter: blur(12px);
  border-right: 1px solid var(--chalk-deep);
  box-shadow: var(--shadow);
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.dashboard-sidebar-open .dashboard__sidebar {
  transform: translateX(0);
}

.dashboard__sidebar-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--chalk-deep);
}

.dashboard__sidebar-brand {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: var(--text);
  text-decoration: none;
  min-width: 0;
}

.dashboard__sidebar-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.dashboard__sidebar-close:hover {
  color: var(--text);
  background: var(--chalk-deep);
}

.dashboard__sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.75rem 1rem;
  overflow-y: auto;
}

.dashboard__sidebar-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.dashboard__sidebar-item:hover {
  background: rgba(var(--accent-rgb), 0.06);
  color: var(--text);
}

.dashboard__sidebar-item.is-active {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent);
}

.dashboard__sidebar-icon {
  display: flex;
  flex-shrink: 0;
  color: var(--text-muted);
}

.dashboard__sidebar-item:hover .dashboard__sidebar-icon,
.dashboard__sidebar-item.is-active .dashboard__sidebar-icon {
  color: var(--accent);
}

.dashboard__sidebar-footer {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  border-top: 1px solid var(--chalk-deep);
  background: rgba(var(--chalk-rgb), 0.98);
}

.dashboard__sidebar-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  min-width: 0;
}

.dashboard__sidebar-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  border: 1px solid var(--chalk-deep);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}

.dashboard__sidebar-user-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.dashboard__sidebar-user-name {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard__sidebar-user-plan {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard__sidebar-logout {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.dashboard__sidebar-logout:hover {
  color: var(--accent-dark);
  background: var(--accent-soft);
}

.dashboard__main {
  flex: 1;
  padding: calc(64px + 1.25rem) 1.25rem 2rem;
}

.dashboard__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 12rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.dashboard__spinner {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: analysis-spin 0.7s linear infinite;
}

.dashboard__section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.dashboard__hero {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dashboard__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.dashboard__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5vw, 1.85rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
}

.dashboard__lead {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.dashboard__summary {
  background: #fff;
  border: 1px solid var(--chalk-deep);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

.dashboard__summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.dashboard__summary-title {
  font-size: 1rem;
  font-weight: 600;
}

.dashboard__badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}

.dashboard__badge--success {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
}

.dashboard__badge--locked {
  background: var(--chalk-deep);
  color: var(--text-muted);
}

.dashboard__summary-body {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.dashboard__summary-photo {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 1rem;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--chalk-deep);
}

.dashboard__summary-photo--placeholder {
  background: linear-gradient(135deg, var(--chalk-deep), var(--line));
}

.dashboard__stats {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0;
}

.dashboard__stat dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 0.15rem;
}

.dashboard__stat dd {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

.dashboard__stat-score {
  color: var(--accent);
}

.dashboard__summary-actions {
  margin-top: 1.25rem;
}

.dashboard__quick-title {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.dashboard__quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.dashboard__quick-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1rem;
  border: 1px solid var(--chalk-deep);
  border-radius: calc(var(--radius) - 4px);
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  text-decoration: none;
  color: inherit;
  font: inherit;
}

.dashboard__quick-card:not(:disabled):not([disabled]):hover {
  border-color: var(--line);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.dashboard__quick-card:disabled,
.dashboard__quick-card[disabled] {
  opacity: 0.72;
  cursor: not-allowed;
}

.dashboard__quick-card--link:hover {
  border-color: var(--accent);
}

.dashboard__quick-icon {
  display: flex;
  color: var(--accent);
}

.dashboard__quick-label {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
}

.dashboard__quick-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.dashboard__balance-note {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
  padding: 0.5rem 0;
}

.dashboard__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  padding: 2.5rem 1rem;
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

.dashboard__empty-icon {
  color: var(--slate);
}

.dashboard__empty-text {
  max-width: 18rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.dashboard__empty--solo {
  min-height: min(60vh, 28rem);
  justify-content: center;
}

.dashboard__overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.dashboard__overview-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem;
  border: 1px solid var(--chalk-deep);
  border-radius: var(--radius);
  background: #fff;
}

.dashboard__overview-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.dashboard__overview-value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--accent);
  line-height: 1.1;
}

.dashboard__overview-value--text {
  font-size: 1.1rem;
}

.dashboard__overview-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.dashboard__current-plan {
  padding: 1rem 1.15rem;
  border-radius: var(--radius);
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  color: var(--text);
}

.dashboard__current-plan--empty {
  background: var(--chalk-deep);
  border-color: var(--chalk-deep);
  color: var(--text-muted);
}

.dashboard__current-plan-label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 0.25rem;
}

.dashboard__section--subscriptions {
  gap: 1rem;
}

.dashboard__hero--subscriptions {
  gap: 0.35rem;
}

.dashboard__hero--subscriptions .dashboard__title {
  font-size: clamp(1.35rem, 4.5vw, 1.65rem);
}

.dashboard__hero--subscriptions .dashboard__lead {
  font-size: 0.88rem;
}

.dashboard__billing-toggle {
  display: inline-flex;
  align-self: center;
  gap: 0.25rem;
  margin-top: 0.65rem;
  padding: 0.2rem;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--bg-elev);
}

.dashboard__billing-toggle-btn {
  min-width: 6.5rem;
  padding: 0.45rem 0.9rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.dashboard__billing-toggle-btn.is-active {
  background: var(--accent);
  color: var(--chalk);
}

.dashboard__plan-billed-annually {
  margin: 0;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text-muted);
}

.dashboard__plans {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.85rem;
  margin: 0;
  padding: 0.35rem 0 0;
}

.dashboard__plan-card {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.65rem;
  width: 100%;
  min-width: 0;
  padding: 1.35rem 1rem 1rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--bg-elev);
  box-shadow: var(--shadow);
}

/* 1024px ≈ 3 cartes à ~300px lisibles + interstices + padding latéral. */
@media (min-width: 1024px) {
  .dashboard__plans {
    flex-direction: row;
    gap: 0.85rem;
  }

  .dashboard__plan-card {
    flex: 1 1 0;
  }
}

.dashboard__plan-card--badged {
  padding-top: 1.65rem;
}

.dashboard__plan-card--current {
  border-color: rgba(var(--accent-rgb), 0.35);
  background: rgba(var(--accent-rgb), 0.03);
}

.dashboard__plan-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.28rem 0.75rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--chalk);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.dashboard__plan-name {
  font-family: var(--font-display);
  font-size: 1.45rem;
  line-height: 1.1;
  text-align: center;
}

.dashboard__plan-price-original {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
  text-decoration: line-through;
  text-align: center;
}

.dashboard__plan-price-main {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.15rem;
  line-height: 1;
}

.dashboard__plan-price-integer {
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: var(--text);
}

.dashboard__plan-price-fraction {
  display: inline-flex;
  align-items: baseline;
  gap: 0.1rem;
  padding-bottom: 0.2rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

.dashboard__plan-price-period {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
}

.dashboard__plan-guarantee {
  width: 100%;
  margin: 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--success);
  border-radius: var(--radius-sm);
  background: rgba(var(--success-rgb), 0.06);
  color: var(--success);
  font-size: 0.74rem;
  line-height: 1.45;
  text-align: center;
}

.dashboard__plan-volume {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.85rem 0.75rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
}

.dashboard__plan-volume-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.45rem;
}

.dashboard__plan-volume-number {
  font-family: var(--font-display);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--accent);
}

.dashboard__plan-volume-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

/* « Looks illimités » remplace un nombre : le mot reprend la graisse et la
   couleur du chiffre, mais pas sa taille — « Looks » à la taille d'un « 20 »
   déborderait la carte. */
.dashboard__plan-volume-number--word {
  font-size: 1.6rem;
}

/* L'usage loyal est affiché, pas relégué aux CGU : c'est la contrepartie de
   « illimité » et le lecteur a le droit de la voir au moment de choisir. */
.dashboard__plan-volume-note {
  margin: 0.35rem 0 0;
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--text-dim);
}

.dashboard__plan-volume-caption {
  margin: 0;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text-muted);
}

.dashboard__plan-features-title {
  margin: 0.15rem 0 0;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.dashboard__plan-features {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dashboard__plan-feature {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text);
}

.dashboard__plan-feature--strong {
  font-weight: 700;
}

.dashboard__plan-feature-check {
  flex: 0 0 1rem;
  width: 1rem;
  height: 1rem;
  margin-top: 0.1rem;
  border-radius: 999px;
  background: var(--accent-soft);
  position: relative;
}

.dashboard__plan-feature-check::after {
  content: "";
  position: absolute;
  top: 0.28rem;
  left: 0.34rem;
  width: 0.28rem;
  height: 0.48rem;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
}

.dashboard__plan-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  margin-top: 0.15rem;
}

.dashboard__plan-cta-label {
  font-size: 0.95rem;
  font-weight: 700;
}

.dashboard__plan-cta-sublabel {
  font-size: 0.68rem;
  font-weight: 500;
  opacity: 0.9;
}

.dashboard__plan-cta-note {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.4;
  text-align: center;
  color: var(--text-muted);
}

.dashboard__plan-looks {
  font-size: 1.35rem;
  font-family: var(--font-display);
  color: var(--accent);
}

.dashboard__plan-price {
  font-size: 0.95rem;
  font-weight: 600;
}

.dashboard__plan-hint {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

/* Note légale sous les trois cartes formule (résiliation, cumul des Looks). */
/* ---- FAQ abonnements ----------------------------------------------------
   <details> natif : pliable sans JS, focusable au clavier, et le contenu reste
   dans le DOM pour la recherche navigateur (Cmd+F trouve une réponse repliée).
   Les questions arrivent sous les cartes de prix : on répond aux objections
   après avoir montré l'offre, pas avant. */
.dashboard__faq {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 2.5rem;
}

.dashboard__faq-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--text);
  margin: 0 0 0.5rem;
}

.dashboard__faq-item {
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.dashboard__faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

/* Le marqueur par défaut diffère entre Safari et Chrome : on le retire des deux
   et on dessine le nôtre, qui pivote à l'ouverture. */
.dashboard__faq-q::-webkit-details-marker { display: none; }

.dashboard__faq-q::after {
  content: "";
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.18s ease;
}

.dashboard__faq-item[open] .dashboard__faq-q::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

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

.dashboard__faq-item[open] .dashboard__faq-q {
  background: var(--accent-soft);
}

.dashboard__faq-a {
  padding: 0 1rem 0.95rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text-dim);
}

.dashboard__faq-a strong {
  color: var(--text);
  font-weight: 700;
}

.dashboard__faq-a a {
  color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .dashboard__faq-q::after { transition: none; }
}

.dashboard__plans-note {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* La phrase déterminante (coupure de l'accès en fin d'abonnement) sort du
   registre secondaire : taille du texte courant et contraste normal. */
.dashboard__plans-note strong {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.dashboard__plans-cgu {
  margin: 0.5rem 0 1.25rem;
  font-size: 0.85rem;
}

.dashboard__plans-cgu a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
}

.dashboard__history-block {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.dashboard__history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.dashboard__history-title {
  font-size: 1rem;
  font-weight: 700;
}

.dashboard__history-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.dashboard__history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--chalk-deep);
  border-radius: var(--radius);
  background: #fff;
}

.dashboard__history-item--current {
  border-color: rgba(var(--accent-rgb), 0.25);
  background: rgba(var(--accent-rgb), 0.04);
}

.dashboard__empty--compact {
  padding: 1.5rem 1rem;
}

.dashboard__settings {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.25rem;
  border: 1px solid var(--chalk-deep);
  border-radius: var(--radius);
  background: #fff;
}

.dashboard__settings-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}

.dashboard__settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--chalk-deep);
}

.dashboard__settings-row:last-child {
  border-bottom: none;
}

.dashboard__settings-row dt {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
}

.dashboard__settings-row dd {
  margin: 0;
  font-size: 0.95rem;
  text-align: right;
}

.dashboard__settings-actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.btn--ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--chalk-deep);
}

.btn--ghost:hover {
  color: var(--text);
  border-color: var(--line);
}

.btn--sm {
  padding: 0.5rem 0.9rem;
  font-size: 0.82rem;
}

@media (min-width: 768px) {
  .dashboard,
  .dashboard__topbar {
    max-width: 560px;
  }
}

.dashboard__reports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.85rem;
}

.dashboard__report-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
  text-align: left;
  cursor: pointer;
}

.dashboard__report-badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}

.dashboard__report-name {
  font-size: 1rem;
  font-weight: 700;
}

.dashboard__report-score {
  color: var(--accent);
  font-weight: 700;
}

.dashboard__report-date {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.dashboard__back {
  border: none;
  background: none;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 1rem;
  cursor: pointer;
}

.dashboard__report-selfie {
  width: 100%;
  max-width: 18rem;
  border-radius: var(--radius-sm);
  object-fit: cover;
  margin: 0.75rem 0;
}

.dashboard__report-block h3 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

.dashboard__account {
  display: grid;
  gap: 1rem;
}

.dashboard__account-card {
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
}

.dashboard__account-title {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.dashboard__account-balance {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--accent);
  margin-bottom: 0.35rem;
}

.dashboard__account-hint,
.dashboard__account-email {
  color: var(--text-dim);
  margin-bottom: 1rem;
}

.dashboard-try-on-active .dashboard__main {
  padding-top: calc(64px + 1rem);
}

.try-on-studio {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-height: calc(100dvh - 64px - 3rem);
  color: var(--text);
}

.try-on-studio__body {
  flex: 1;
  min-height: 0;
}

/* Étape photo : la zone d'import prend toute la place restante. C'est l'action
   attendue de l'écran, elle doit en être la surface dominante — pas une bande
   au-dessus d'un grand vide. */
.try-on-studio--step-photo .try-on-photo__drop {
  flex: 1;
  min-height: 12rem;
}

.try-on-studio__header {
  margin-bottom: 0;
}

.try-on-studio__title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  color: var(--text);
}

.try-on-studio__preview {
  margin-bottom: 0;
}

.try-on-studio__preview-card {
  position: relative;
  width: 100%;
  max-width: 18rem;
  margin: 0 auto;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--chalk-deep);
  background: var(--bg-elev);
  box-shadow: var(--shadow);
}

.try-on-studio__preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.try-on-studio__preview-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--chalk-deep);
}

.try-on-studio__preview-overlay {
  position: absolute;
  inset: auto 0 0;
  padding: 1rem 1rem 0.85rem;
  background: linear-gradient(transparent, rgba(var(--ink-rgb), 0.75));
}

.try-on-studio__preview-label {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
}

.try-on-studio__status {
  margin-top: 0.75rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.try-on-studio__status--error {
  color: var(--danger);
}

.try-on-studio__retry {
  margin-left: 0.35rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.try-on-studio__retry:hover {
  color: var(--accent-dark);
}

.try-on-studio__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

/* ---- Test room séquencée : photo → coupe → résultat -------------------- */

.try-on-studio__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Fil d'Ariane. Les numéros disent combien d'étapes restent — sans eux,
   l'utilisateur ne sait pas s'il s'engage dans deux clics ou dans dix. */
.try-on-steps {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0;
}

.try-on-steps__item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.try-on-steps__item + .try-on-steps__item::before {
  content: "";
  width: 1.1rem;
  height: 1px;
  background: var(--border);
  margin-right: 0.15rem;
}

.try-on-steps__dot {
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  border: 1px solid var(--border);
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}

.try-on-steps__item.is-active { color: var(--text); font-weight: 600; }
.try-on-steps__item.is-active .try-on-steps__dot {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.try-on-steps__item.is-done .try-on-steps__dot {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-dark);
}

/* Étape 1 — la zone d'import est la cible principale, pas un coin de l'écran. */
.try-on-photo__drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 2.5rem 1.25rem;
  text-align: center;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.try-on-photo__drop:hover,
.try-on-photo__drop:focus-within {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.try-on-photo__icon {
  font-size: 1.6rem;
  line-height: 1;
  color: var(--accent);
}

.try-on-photo__title { font-size: 1rem; color: var(--text); }
.try-on-photo__hint { font-size: 0.8rem; color: var(--text-muted); }

/* Photo posée : le cadre devient l'aperçu. Plus de bordure en pointillés — le
   pointillé annonce une zone à remplir, elle ne l'est plus. */
.try-on-photo__drop--filled {
  position: relative;
  padding: 0;
  min-height: 0;
  overflow: hidden;
  border-style: solid;
  border-color: var(--border-soft);
  background: var(--chalk-deep);
}

/* L'image est sortie du flux : en position statique, sa hauteur intrinsèque
   étirait le cadre et repoussait le bouton « Choisir une coupe » hors de
   l'écran. En absolu, elle subit la hauteur du cadre au lieu de la dicter. */
.try-on-photo__filled-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Le libellé reste lisible quelle que soit la photo dessous : le dégradé fait
   office de fond, sans masquer le visage. */
.try-on-photo__change {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.75rem 0.75rem 0.7rem;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(to top, rgba(var(--ink-rgb), 0.72), transparent);
}

/* Raccourci vers le selfie d'analyse : proposé, jamais imposé. */
.try-on-photo__reuse {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  background: none;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}

.try-on-photo__reuse:hover { border-color: var(--accent); color: var(--text); }

.try-on-photo__reuse-thumb {
  width: 34px;
  height: 44px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

.try-on-photo__back {
  align-self: center;
  background: none;
  border: none;
  padding: 0.5rem;
  color: var(--text-muted);
  font-size: 0.82rem;
  text-decoration: underline;
  cursor: pointer;
}

.try-on-photo__back:hover { color: var(--text-dim); }

/* Étape 3 — le résultat occupe l'écran : c'est ce qui vient d'être payé.

   Le résultat n'a plus de mise en page propre : il rend les composants du
   rapport (.report-page, .cut-result, .report-section) via
   renderTryOnVerdictReport. Les règles .try-on-verdict__* et .try-on-result__*
   qui vivaient ici décrivaient un second vocabulaire visuel — étiquette, note,
   blocs titrés — qui avait fini par diverger de celui du rapport. */

/* L'écran de résultat défile : photo plus verdict dépassent toujours la
   fenêtre, et le forcer à tenir écraserait le texte. */
.try-on-studio--step-result .try-on-studio__body {
  flex: 0 1 auto;
}

/* Le rapport est un enfant du corps de l'étape, pas la racine d'une page :
   l'écart entre ses blocs vient de .report-page, celui qui le sépare des
   boutons vient du corps de l'étape. */
.try-on-studio--step-result .report-page {
  margin-bottom: 0.25rem;
}

.try-on-studio__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  background: var(--bg-elev);
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.try-on-studio__card--upload {
  padding: 1rem;
  text-align: center;
  border-style: dashed;
  border-color: var(--line);
  background: #fff;
}

.try-on-studio__card--upload:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.03);
}

.try-on-studio__card--upload.try-on-studio__card--has-photo {
  position: relative;
  border-style: solid;
  padding: 0;
}

.try-on-studio__card--style img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.try-on-studio__card--style::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 55%;
  background: linear-gradient(transparent, rgba(var(--ink-rgb), 0.75));
  pointer-events: none;
}

.try-on-studio__card--style:hover,
.try-on-studio__card--style.is-selected {
  transform: scale(1.02);
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.15);
}

.try-on-studio__card--style.is-selected {
  background: var(--accent-soft);
}

.try-on-studio__card--style.is-loading {
  opacity: 0.72;
  pointer-events: none;
}

.try-on-studio__card--style:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.try-on-studio__upload-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1;
  margin-bottom: 0.85rem;
}

.try-on-studio__upload-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.try-on-studio__upload-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0 0.5rem;
}

.try-on-studio__card--has-photo .try-on-studio__upload-copy {
  position: absolute;
  inset: auto 0 0;
  padding: 0.85rem 0.75rem;
  background: linear-gradient(transparent, rgba(var(--ink-rgb), 0.75));
}

.try-on-studio__upload-title {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
}

.try-on-studio__card--has-photo .try-on-studio__upload-title,
.try-on-studio__card--has-photo .try-on-studio__upload-hint {
  color: #fff;
}

.try-on-studio__upload-hint {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.try-on-studio__card-label {
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.85rem;
  z-index: 1;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  text-align: left;
}

.btn--danger {
  background: var(--danger);
  color: #fff;
}

.btn--danger:hover {
  background: var(--danger-dark);
}

.dashboard__settings-note {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: var(--bg-elev);
  color: var(--text-dim);
  font-size: 0.9rem;
}

/* Sous-titre de section dans les Paramètres (ex. « Mesure d'audience »).
   Sépare le bloc refus analytics des actions d'abonnement au-dessus. */
.dashboard__settings-subtitle {
  margin: 2rem 0 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}

/* ── Rapport (report-page) ──────────────────────────────────
   Vue rapport verrouillée/débloquée (report-view.js). Reprend la grille de
   cartes du dashboard (.dashboard__account-card) plutôt que d'inventer une
   nouvelle surface : .report-page tient le rôle
   d'un .dashboard__section, .report-page__block celui d'une carte. */

.report-page {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.report-page__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.report-page__badge {
  display: inline-flex;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Rapport verrouillé : badge neutre, même traitement que
   .dashboard__badge--locked (sable + texte atténué). */
.report-page--locked .report-page__badge {
  background: var(--chalk-deep);
  color: var(--text-muted);
}

.report-page__title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 5vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
}

.report-page__sub {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font-size: 0.95rem;
  color: var(--text-dim);
}

/* « ovale » s'affichait seul, sans rien dire de ce qu'il qualifiait. */
.report-page__sub-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.report-page__sub-value {
  font-weight: 600;
  color: var(--text);
  text-transform: capitalize;
}

/* ── Sections repliables du rapport (report-accordion.js) ─────────────────
   Le rapport empilait une carte ouverte par champ : huit paragraphes de même
   poids, aucun repère. Chaque champ est désormais une ligne refermée — la
   liste des lignes tient sur un écran et sert de sommaire, et le corps ne
   s'ouvre que si on le demande.

   <details>/<summary> natifs : le repli marche au clavier, sans JavaScript, et
   Ctrl+F ouvre lui-même la section qui contient le terme cherché. */

.report-sections {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.report-section {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--bg-elev);
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.report-section[open] {
  border-color: var(--border);
  box-shadow: var(--shadow);
}

.report-section__summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  cursor: pointer;
  /* Les deux règles sont nécessaires : `list-style` couvre les navigateurs
     modernes, le pseudo-élément WebKit couvre Safari. Sans elles, le triangle
     natif s'ajoute au chevron. */
  list-style: none;
  -webkit-user-select: none;
  user-select: none;
}

.report-section__summary::-webkit-details-marker {
  display: none;
}

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

.report-section__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
}

.report-section__icon svg {
  width: 1.05rem;
  height: 1.05rem;
}

.report-section__title {
  flex: 1;
  min-width: 0;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--text);
}

.report-section__chevron {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 0.2s ease;
}

.report-section__chevron svg {
  width: 1.1rem;
  height: 1.1rem;
}

.report-section[open] .report-section__chevron {
  transform: rotate(180deg);
}

.report-section__body {
  padding: 0 1rem 1.05rem;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-dim);
}

.report-section__body > p {
  margin: 0;
}

.report-section[open] .report-section__body {
  animation: report-section-in 0.22s ease both;
}

@keyframes report-section-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Le brief est la seule phrase que l'utilisateur lira à voix haute chez le
   barbier : il se distingue du reste des sections, sans quitter la palette. */
.report-section--brief .report-section__icon {
  background: var(--accent);
  color: var(--chalk);
}

.report-section--brief .report-page__brief {
  padding: 0.85rem 0.95rem;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  color: var(--text);
  font-size: 1rem;
}

/* Sections verrouillées : l'icône reste neutre, rien ne doit y ressembler à un
   contenu déjà acquis. */
.report-section--locked .report-section__icon {
  background: var(--chalk-deep);
  color: var(--text-muted);
}

.report-section--locked .report-page__brief {
  border-left-color: var(--border);
  background: transparent;
  padding: 0;
}

/* ── Étapes de coiffage : une frise, plus une liste numérotée brute ────── */
.report-page__styling-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: styling-step;
}

.report-page__styling-steps li {
  position: relative;
  counter-increment: styling-step;
  padding: 0 0 0.9rem 2.25rem;
  color: var(--text-dim);
}

.report-page__styling-steps li:last-child {
  padding-bottom: 0;
}

.report-page__styling-steps li::before {
  content: counter(styling-step);
  position: absolute;
  left: 0;
  top: 0.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Le filet relie une pastille à la suivante : il s'arrête donc à l'avant-
   dernière, sinon il pendrait dans le vide sous la dernière étape. */
.report-page__styling-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0.72rem;
  top: 1.75rem;
  bottom: 0.15rem;
  width: 1px;
  background: var(--border-soft);
}

@media (prefers-reduced-motion: reduce) {
  .report-section,
  .report-section__chevron {
    transition: none;
  }

  .report-section[open] .report-section__body {
    animation: none;
  }
}

.report-page__selfie {
  width: 100%;
  max-width: 18rem;
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: 1px solid var(--border);
}

.report-page__block {
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
}

.report-page__block h3 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.report-page__brief {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text);
}

.report-page__cuts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.report-page__cut {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--chalk-deep);
}

/* Coupe sans rang affiché : le contrat verdict n'a qu'une alternative, il n'y a
   plus de classement à numéroter. */
.report-page__cut--solo {
  grid-template-columns: 1fr auto;
}

.report-page__cut span:first-child {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.85rem;
}

.report-page__cut--solo span:first-child {
  color: var(--accent);
  font-weight: 700;
  font-size: inherit;
  text-align: right;
}

/* ── Verdict et alternative (report-view.js) ─────────────────── */
.report-page__verdict-label {
  align-self: flex-start;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.report-page__verdict-label[data-verdict-label="evite"] {
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text-dim);
}

.report-page__alternative {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.report-page__alternative-header {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.report-page__alternative-eyebrow {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.report-page__alternative-name {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 4.5vw, 1.35rem);
  line-height: 1.2;
  color: var(--text);
}

.report-page__alternative-score {
  font-weight: 700;
  color: var(--accent);
}

.report-page__cut strong {
  font-weight: 600;
  color: var(--text);
}

.report-page__cut span:last-child {
  color: var(--accent);
  font-weight: 700;
  text-align: right;
}

/* Le flou porte sur des blocs pleins et plausibles, jamais sur du texte
   tronqué : le contenu factice (fourni par report-view.js) est du texte
   complet, simplement rendu illisible - jamais une chaîne coupée en deux.
   filter: blur() ne modifie pas la boîte, donc la mise en page ne bouge
   pas quand le contenu réel remplace le placeholder au déverrouillage.
   opacity/cursor reprennent le traitement de .btn:disabled pour signaler
   un contenu inerte ; user-select et -webkit-touch-callout empêchent la
   sélection/copie (glisser-déposer, menu contextuel iOS). */
.report-page__blurred {
  filter: blur(6px);
  opacity: 0.65;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  pointer-events: none;
  cursor: not-allowed;
}

/* Le texte de remplacement floute une étiquette générique : elle n'a aucun
   sens à l'oral. .sr-only porte l'information réelle pour les lecteurs
   d'écran. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.report-page__locked-note {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ── Aperçu post-onboarding (onboarding-preview.js) ───────────
   Photo dégradée en héros, rapport flouté en profondeur secondaire. */
.onboarding-preview {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 46rem;
  margin: 0 auto;
  padding-bottom: 1.5rem;
}

.onboarding-preview__hero {
  position: relative;
  width: 100%;
  height: min(50vh, 24rem);
  min-height: 12rem;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--chalk-deep);
  border: 1px solid var(--border);
}

.onboarding-preview__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.onboarding-preview__photo.is-resigning {
  opacity: 0.45;
}

.report-page__try-on-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.report-page__try-on-hero {
  position: relative;
  width: 100%;
  height: min(50vh, 24rem);
  min-height: 12rem;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--chalk-deep);
  border: 1px solid var(--border);
}

.report-page__try-on-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.report-page__try-on-photo.is-resigning {
  opacity: 0.45;
}

.report-page__try-on-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: rgba(var(--chalk-rgb), 0.88);
  color: var(--text);
  font-size: 0.9rem;
  text-align: center;
  padding: 1rem;
}

.report-page__try-on-error {
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  align-items: flex-start;
}

.report-page__try-on-error p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text);
}

.onboarding-preview__proof {
  margin: 0;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
}

.onboarding-preview__report {
  gap: 0.75rem;
  transform: scale(0.92);
  transform-origin: top center;
  opacity: 0.85;
}

.onboarding-preview__report-header {
  gap: 0.25rem;
}

.onboarding-preview__report-block .report-section__summary {
  padding: 0.7rem 0.85rem;
}

.onboarding-preview__report-block .report-section__icon {
  width: 1.75rem;
  height: 1.75rem;
}

.onboarding-preview__report-block .report-section__title {
  font-size: 0.72rem;
}

.onboarding-preview__report-block .report-section__body {
  padding: 0 0.85rem 0.85rem;
}

.onboarding-preview__reassurance {
  margin-top: 0.25rem;
  text-align: center;
}

.onboarding-preview__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 16rem;
}

.onboarding-preview__loading-text {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-muted);
}

@media (max-width: 480px) {
  .onboarding-preview__hero {
    height: 50vh;
    min-height: 10rem;
    border-radius: var(--radius-sm);
  }

  .onboarding-preview__proof {
    font-size: 0.88rem;
  }
}

/* ── Funnel overlay : aperçu + abonnements plein écran ─────────────── */

.funnel-preview-shell,
.funnel-subscriptions-shell {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  min-height: 0;
  overflow: hidden;
}

.funnel-preview {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.funnel-preview__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding:
    max(0.5rem, env(safe-area-inset-top, 0px))
    max(1rem, env(safe-area-inset-right, 0px))
    1rem
    max(1rem, env(safe-area-inset-left, 0px));
}

.funnel-preview__footer {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding:
    0.75rem
    max(1rem, env(safe-area-inset-right, 0px))
    max(1rem, env(safe-area-inset-bottom, 0px))
    max(1rem, env(safe-area-inset-left, 0px));
  background: var(--bg);
  border-top: 1px solid var(--border-soft);
  box-shadow: 0 -4px 24px rgba(var(--ink-rgb), 0.06);
}

.onboarding-preview__header {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

/* Reprend .report-page__sub et n'ajuste que l'échelle : l'aperçu tient dans le
   panneau du funnel, plus étroit que la page rapport. */
.onboarding-preview__face-shape {
  margin: 0;
  font-size: 0.9rem;
}

.onboarding-preview__cut-result {
  margin-bottom: 0.75rem;
}

.funnel-overlay__topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding:
    max(0.75rem, env(safe-area-inset-top, 0px))
    max(1rem, env(safe-area-inset-right, 0px))
    0.5rem
    max(1rem, env(safe-area-inset-left, 0px));
}

.funnel-overlay__back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.65rem 0.5rem 0.35rem;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.funnel-overlay__back:hover {
  background: var(--chalk-deep);
}

.funnel-overlay__scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding:
    0
    max(1rem, env(safe-area-inset-right, 0px))
    max(1rem, env(safe-area-inset-bottom, 0px))
    max(1rem, env(safe-area-inset-left, 0px));
}

.funnel-preview-shell .onboarding-preview,
.funnel-subscriptions-shell .dashboard__section {
  max-width: 46rem;
  margin-inline: auto;
}

.onboarding-preview__hero--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: var(--chalk-deep);
}

.onboarding-preview__missing-photo {
  margin: 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.45;
  max-width: 28rem;
}

/* ── Bloc résultat coupe (cut-result-view.js) ─────────────────────────── */

.cut-result {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cut-result__compare {
  position: relative;
  width: 100%;
  max-width: 22rem;
  margin-inline: auto;
  aspect-ratio: 3 / 4;
  max-height: min(50vh, 24rem);
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  background: var(--chalk-deep);
  box-shadow: var(--shadow-lg);
}

.cut-result__compare .compare__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
}

.cut-result__compare--blurred-static .compare__img {
  object-fit: cover;
}

.cut-result__compare--blurred-static {
  cursor: default;
}

/* Photo payante verrouillée.
   filter: blur() n'existe qu'à l'écran : le fichier pointé par src reste ce
   qu'il est, et « Enregistrer l'image » rend la source, pas le rendu flouté.
   La vraie protection est donc en amont — createDegradedPreviewSignedUrl sert
   une vignette 64×48 en qualité 20, vérifiée à 7 Ko contre 420 Ko pour
   l'originale. Ces règles ferment le geste par-dessus, comme .report-page__blurred
   le fait déjà pour les blocs de texte : appui long iOS, glisser-déposer,
   sélection et menu contextuel. Le flou reste un effet, jamais la serrure. */
.cut-result__img--blurred {
  filter: blur(8px) saturate(0.85);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}

.cut-result__compare--blurred-static {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.cut-result__compare-labels--top {
  top: 1rem;
  bottom: auto;
}

.cut-result__try-on-loading {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: rgba(var(--chalk-rgb), 0.88);
  color: var(--text);
  font-size: 0.9rem;
  text-align: center;
  padding: 1rem;
}

.cut-result__try-on-loading[hidden] {
  display: none;
}

.cut-result__try-on-error {
  position: absolute;
  inset: auto 0 0;
  z-index: 4;
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--border);
  background: rgba(var(--chalk-rgb), 0.96);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  align-items: flex-start;
}

.cut-result__try-on-error[hidden] {
  display: none;
}

.cut-result__try-on-error p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text);
}

.cut-result__img--after.is-resigning {
  opacity: 0.45;
}

.cut-result__image-placeholder {
  background:
    linear-gradient(135deg, var(--chalk-deep) 0%, var(--bg-elev) 50%, var(--chalk-deep) 100%);
  border: 1px dashed var(--border-soft);
}

.cut-result__handle {
  cursor: ew-resize;
  border: 0;
  padding: 0;
  background: transparent;
}

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

.cut-result__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.cut-result__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 4.5vw, 1.65rem);
  line-height: 1.15;
  color: var(--text);
}

/* Le score est la première chose que l'utilisateur cherche : il est écrit en
   grand, à l'accent de la palette. */
.cut-result__score {
  margin: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 11vw, 3.1rem);
  line-height: 0.9;
  color: var(--accent);
}

.cut-result__score-suffix {
  margin-top: 0.15rem;
  font-family: var(--font-sans);
  font-size: 0.24em;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

.cut-result__score-bar,
.cut-result__subscore-bar {
  position: relative;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--chalk-deep);
  overflow: hidden;
}

.cut-result__score-bar {
  height: 0.5rem;
}

.cut-result__score-bar-fill,
.cut-result__subscore-bar-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.cut-result__subscores {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 0;
}

.cut-result__subscore {
  margin: 0;
}

.cut-result__subscore-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}

.cut-result__subscore-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-dim);
}

.cut-result__subscore-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--text-muted);
}

.cut-result__subscore-value {
  margin: 0;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
  /* Chiffres à chasse fixe : sans cela les cinq valeurs, alignées à droite,
     tremblent d'une ligne à l'autre selon les glyphes. */
  font-variant-numeric: tabular-nums;
}

.cut-result__subscore--ease .cut-result__subscore-bar-fill {
  background: var(--line);
}

.cut-result__subscore--directional .cut-result__subscore-label {
  color: var(--text);
}

.onboarding__cut-result-demo {
  margin-top: 0.5rem;
}

.onboarding__statement--cut-result-demo .onboarding__line--body {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.35;
}

.onboarding__statement--cut-result-demo .cut-result {
  gap: 0.55rem;
}

.onboarding__statement--cut-result-demo .cut-result__compare {
  aspect-ratio: 3 / 4;
  width: min(100%, 18rem);
  height: auto;
  max-height: none;
}

.onboarding__statement--cut-result-demo .cut-result__subscores {
  gap: 0.4rem;
}

.onboarding__statement--cut-result-demo .cut-result__subscore-head {
  margin-bottom: 0.15rem;
}

.onboarding__step--fit-2.onboarding__statement--cut-result-demo .cut-result__compare {
  max-width: 18rem;
}

.onboarding__step--fit-3.onboarding__statement--cut-result-demo .cut-result__compare {
  max-width: 16rem;
}

.onboarding__step--fit-4.onboarding__statement--cut-result-demo .cut-result__compare {
  height: min(22dvh, 7.5rem);
  max-height: min(22dvh, 7.5rem);
}

.onboarding__step--fit-4.onboarding__statement--cut-result-demo .cut-result__subscore-bar {
  display: none;
}

.onboarding__step--fit-5.onboarding__statement--cut-result-demo .cut-result__compare {
  height: min(20dvh, 6.75rem);
  max-height: min(20dvh, 6.75rem);
}

.onboarding__step--fit-5.onboarding__statement--cut-result-demo .cut-result__score-bar {
  display: none;
}

.onboarding__step--fit-5.onboarding__statement--cut-result-demo .cut-result__subscore-bar {
  display: none;
}

.onboarding__step--fit-5.onboarding__statement--cut-result-demo .onboarding__line--body {
  display: none;
}

.onboarding__step--fit-6.onboarding__statement--cut-result-demo .cut-result__subscores {
  display: none;
}

.onboarding__step--fit-6.onboarding__statement--cut-result-demo .cut-result__compare {
  height: min(16dvh, 5.5rem);
  max-height: min(16dvh, 5.5rem);
}

.report-page__cut-result {
  margin-top: -0.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .cut-result__compare,
  .cut-result__handle,
  .cut-result__score-bar-fill,
  .cut-result__subscore-bar-fill {
    transition: none !important;
  }
}

@media (max-width: 375px) {
  .cut-result__compare {
    max-width: 100%;
  }

  .cut-result__head {
    gap: 0.5rem;
  }
}

@media (min-width: 1280px) {
  .onboarding__cut-result-demo .cut-result__compare {
    max-width: 24rem;
  }
}

/* ---- Bande de preuve sociale --------------------------------------------
   Sortie du héros pour qu'elle passe sous la ligne de flottaison sur mobile :
   le premier écran ne porte plus que le titre, le texte et le bouton. Sur
   desktop, où le héros ne réserve pas la hauteur d'écran, elle se lit comme la
   suite immédiate du bloc — l'ordre de lecture ne change pas. */
.stats-band {
  padding: 1.25rem 0 2.75rem;
  background: var(--bg);
}

.stats-band .hero__stats {
  margin: 0;
}

/* ---- En-tête sur écran étroit ------------------------------------------
   L'en-tête aligne logo, sélecteur de langue, CTA et burger. Sous ~460px la
   somme dépasse la largeur disponible : le burger sortait de l'écran, coupé au
   bord droit, sur un iPhone standard.

   C'est le mot « Capiria » qui cède, pas le sélecteur de langue. Masquer
   celui-ci priverait un site en quatre langues de son changement de langue sur
   mobile — une perte de fonction — alors que la marque reste identifiable par
   son seul sceau. Le seuil est calé au-dessus du point de rupture mesuré, pas
   sur un palier rond : au-delà, la place existe et le mot revient. */
@media (max-width: 460px) {
  /* L'en-tête est déjà à l'étroit : le lien de connexion cède avant le mot
     « Capiria », car la page d'auth reste joignable depuis « Commencer ». */
  .landing .nav__login {
    display: none;
  }

  .landing .logo__mark {
    width: 1.7em;
    height: 1.7em;
  }

  .landing .logo span {
    display: none;
  }
}

/* Récap de commande — modale de confirmation avant redirection Stripe.
   Le balisage est monté au runtime par js/subscription-plans.js
   (showCheckoutRecap) ; ses règles avaient disparu lors du passage au nouveau
   funnel, laissant la modale s'afficher en texte brut au fil de la page.
   Elle se place au-dessus des couches plein écran existantes (onboarding et
   loader d'analyse sont à 10000) : c'est la dernière étape avant le paiement,
   rien ne doit passer devant. */
.checkout-recap-overlay {
  position: fixed;
  inset: 0;
  z-index: 10010;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    max(1rem, env(safe-area-inset-top, 0px))
    max(1rem, env(safe-area-inset-right, 0px))
    max(1rem, env(safe-area-inset-bottom, 0px))
    max(1rem, env(safe-area-inset-left, 0px));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* Ajoutée au frame suivant l'insertion, retirée 250 ms avant le retrait du
   nœud : la durée doit rester alignée sur le setTimeout de showCheckoutRecap. */
.checkout-recap-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.checkout-recap-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(var(--ink-rgb), 0.55);
}

.checkout-recap-panel {
  position: relative;
  width: 100%;
  max-width: 26rem;
  max-height: 100%;
  overflow-y: auto;
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 1.5rem;
  transform: translateY(8px);
  transition: transform 0.25s ease;
}

.checkout-recap-overlay.is-visible .checkout-recap-panel {
  transform: translateY(0);
}

.checkout-recap__title {
  margin: 0 0 1.15rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--text);
}

.checkout-recap__list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.checkout-recap__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-soft);
}

.checkout-recap__row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.checkout-recap__row dt {
  flex: 0 0 auto;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
}

.checkout-recap__row dd {
  margin: 0;
  font-size: 0.95rem;
  text-align: right;
  color: var(--text);
}

.checkout-recap__warning {
  margin: 1.15rem 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-dim);
}

.checkout-recap__actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 1.35rem;
}

/* Le bouton qui engage le paiement passe en premier au regard sur grand écran,
   où la lecture va de gauche à droite ; en colonne il reste en bas, sous le
   pouce. */
@media (min-width: 480px) {
  .checkout-recap__actions {
    flex-direction: row-reverse;
    justify-content: flex-start;
  }

  .checkout-recap__actions .btn {
    flex: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .checkout-recap-overlay,
  .checkout-recap-panel {
    transition: none;
  }

  .checkout-recap-panel {
    transform: none;
  }
}