/*
 * Sans mètre — parcours cliente (/m/{jeton}) et caméra guidée.
 * S'appuie sur les jetons et composants de flaurence.css.
 */

/* ------------------------------------------------------------------ gabarit */
.client-app {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(1.2) blur(8px);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}
.app-header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: min(100% - 1rem, var(--measure));
  margin-inline: auto;
  min-height: 56px;
}
.app-back { margin-left: calc(-1 * var(--space-2)); }
.app-atelier {
  margin: 0 0 0 auto;
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-2);
  font-size: var(--step--1);
  font-weight: 600;
}
.brand .logo { width: 2rem; height: 2rem; color: var(--ink); }

.app-progress {
  width: min(100% - 2rem, var(--measure));
  margin: 0 auto;
  padding: 0 0 var(--space-3);
}
.app-step-label {
  margin: 0 0 var(--space-1);
  color: var(--ink-2);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.app-main {
  flex: 1;
  padding: var(--space-5) 0 var(--space-7);
  outline: none;
}
.app-footer {
  padding: var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
  text-align: center;
  font-size: var(--step--1);
  color: var(--ink-2);
  border-top: 1px solid var(--line);
}
.app-footer p { margin: 0; }

.boot { display: grid; place-items: center; min-height: 40vh; }
.boot-spinner { display: inline-flex; gap: var(--space-3); align-items: center; color: var(--ink-2); font-weight: 600; }

/* ------------------------------------------------------------------ étapes */
.step { display: flex; flex-direction: column; gap: var(--space-5); }
.step > * { margin-block: 0; }
.step h1 { margin-bottom: calc(-1 * var(--space-3)); }
.step .eyebrow { margin-bottom: calc(-1 * var(--space-4)); }
.step .lead { margin-top: 0; }
.step h2 { font-size: var(--step-1); }
.tight { margin: 0; }
.center-self { align-self: center; }
.actions-center { justify-content: center; }
@media (min-width: 34rem) { .actions-center { flex-direction: row; } }

.duration {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background: var(--paper-2);
}
.duration .icon { color: var(--thread); margin-top: 0.15rem; }

.download-links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 var(--space-2); }
.download-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: 0.4rem 0.9rem;
  border: 2px solid var(--thread);
  border-radius: 999px;
  font-weight: 650;
  text-decoration: none;
}
.download-link:hover { background: var(--thread-soft); text-decoration: none; }

.h2-like { font-family: var(--font-serif); font-size: var(--step-1); font-weight: 600; }
.form-error:empty { display: none; }

.check-compact { padding: var(--space-2) var(--space-3); border-width: 1px; }
.check-title { display: inline-flex; gap: var(--space-2); align-items: flex-start; font-weight: 600; }
.check-title .icon { color: var(--thread); margin-top: 0.1rem; }
.check-illustrated .check-text small { margin-left: calc(1.25em + var(--space-2)); }

.checklist-group { display: flex; flex-direction: column; gap: var(--space-2); }
.checklist-group .check + .check { margin-top: 0; }
.checklist-group legend {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.checklist-counter { margin: 0; color: var(--ink-2); font-weight: 600; text-align: center; }

.consent-facts .icon { width: 1.6rem; height: 1.6rem; }
.consent-exact { margin-top: var(--space-4); }
.consent-text { max-width: 65ch; }
.consent-text h3 { font-size: var(--step-1); margin: var(--space-2) 0 var(--space-3); }
.consent-text h4 { font-family: var(--font-sans); font-size: var(--step-0); font-weight: 700; margin: var(--space-4) 0 var(--space-2); }
.consent-text p, .consent-text li { color: var(--ink-2); }
.consent-text ul { padding-left: 1.25rem; margin: 0 0 var(--space-3); }
.consent-text li + li { margin-top: var(--space-1); }
.consent-text strong { color: var(--ink); }
.notice-link { margin: var(--space-4) 0 0; font-weight: 650; }

/* Personne mesurée majeure / mineure ; accord du parent ou du tuteur légal */
.age-group { border: 0; padding: 0; margin: 0; }
.age-group .check + .check { margin-top: 0; }
.guardian-box {
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-left: 4px solid var(--thread);
  border-radius: var(--radius);
  background: var(--surface);
}
.guardian-box[hidden] { display: none; }
.guardian-intro { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2); margin: 0; color: var(--ink-2); }
.guardian-intro .icon { color: var(--thread); margin-top: 0.15rem; }

/* ------------------------------------------------------------------ illustrations */
.figure-card { margin: 0; padding: var(--space-4); display: grid; gap: var(--space-2); }
.figure-card figcaption { text-align: center; }
.figure-small .illustration { max-width: 16rem; margin-inline: auto; }
.illustration { width: 100%; height: auto; color: var(--ink); }
.illustration text { font-family: var(--font-sans); font-size: 12px; fill: var(--ink-2); font-weight: 600; }
.illustration .ill-small { font-size: 10px; font-weight: 500; }
.ill-floor { stroke: var(--ink); stroke-width: 2; fill: none; }
.ill-wall { fill: var(--paper-2); stroke: var(--line-strong); stroke-width: 1; }
.ill-ray { stroke: var(--thread); stroke-width: 1.2; stroke-dasharray: 3 4; fill: none; opacity: 0.8; }
.ill-sheet { fill: var(--surface); stroke: var(--ink); stroke-width: 1.5; }
.ill-person { fill: color-mix(in srgb, var(--thread) 16%, transparent); stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }
.ill-stand { stroke: var(--ink-2); stroke-width: 1.6; fill: none; stroke-linecap: round; }
.ill-phone { fill: var(--ink); stroke: none; }
.ill-dim { stroke: var(--thread); stroke-width: 1.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ill-dim-light { stroke: var(--ink-3); stroke-width: 1; fill: none; stroke-dasharray: 2 3; }
.ill-sheet-top { fill: var(--surface); stroke: var(--ink); stroke-width: 1.5; }
.ill-frame { fill: none; stroke: var(--ink); stroke-width: 3; opacity: 0.85; }
.ill-foot { fill: color-mix(in srgb, var(--thread) 25%, transparent); stroke: var(--thread); stroke-width: 1.2; stroke-dasharray: 3 2; }
.ill-sheet-persp { fill: var(--surface); stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.ill-ghost { fill: color-mix(in srgb, var(--thread) 10%, transparent); stroke: var(--thread); stroke-width: 2; stroke-dasharray: 7 5; stroke-linejoin: round; }
.ill-ghost-arm { fill: none; stroke: var(--thread); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: 0.8; }

.choices-list { grid-template-columns: 1fr; gap: var(--space-2); }
@media (min-width: 30rem) { .choices-list { grid-template-columns: 1fr 1fr; } }
.morpho-choices { grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr)); }
.choice svg.figure { width: 3.6rem; height: 5.5rem; }
.fig-line { fill: none; stroke: currentColor; stroke-width: 1.8; }
.fig-body { fill: var(--paper-2); stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.fig-unknown { stroke-dasharray: 3 3; fill: none; }
.fig-level { stroke: var(--thread); stroke-width: 1.4; stroke-dasharray: 2.5 2; }
.fig-q { font-family: var(--font-serif); font-size: 26px; font-weight: 700; fill: var(--ink-2); }

/* ------------------------------------------------------------------ prise de vue */
.pose-card { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--space-4); align-items: center; }
.step-side .pose-card { grid-template-columns: 5.5rem 1fr; }
.pose-figure { display: grid; place-items: center; }
.pose-list { gap: var(--space-2); font-size: var(--step--1); }
.pose-list .icon { width: 1.2rem; height: 1.2rem; color: var(--sage); }
@media (max-width: 22rem) { .pose-card { grid-template-columns: 1fr; } .pose-figure .illustration { max-width: 8rem; } }

.capture-options { display: flex; flex-direction: column; gap: var(--space-3); }

.visually-hidden-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.photo-preview { margin: 0; display: grid; gap: var(--space-3); }
.photo-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--paper-2);
  border: 1px solid var(--line);
  max-height: 60vh;
  display: grid;
  place-items: center;
}
.photo-img {
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
  transition: filter 0.25s var(--ease);
}
.photo-frame.is-blurred .photo-img { filter: blur(30px) saturate(0.6); transform: scale(1.08); }
.photo-frame.is-blurred::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--paper) 25%, transparent);
}
.photo-preview figcaption { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; }

/* Préparation sur le téléphone : visage flouté, métadonnées supprimées */
.photo-frame-pending { min-height: min(40vh, 22rem); color: var(--ink-3, var(--ink-2)); }
.photo-frame-pending .icon { opacity: 0.45; }
.face-processing .face-processing-note { grid-column: 1 / -1; margin: 0; font-weight: 400; }
.face-status {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2);
  align-items: start;
  margin: 0;
  color: var(--ink-2);
  font-size: var(--step--1);
}
.face-status.is-ok .icon { color: var(--sage); margin-top: 0.1rem; }

.review-status { display: grid; gap: var(--space-3); }
.review-status:empty { display: none; }
.checking {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  padding: var(--space-4);
  border-radius: var(--radius);
  background: var(--paper-2);
  font-weight: 600;
}
.checking .bar { grid-column: 1 / -1; }
.check-results { list-style: none; padding: 0; margin: var(--space-2) 0; display: grid; gap: var(--space-2); }
.check-result { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2); align-items: start; margin: 0; }
.check-result .icon { margin-top: 0.1rem; }
.check-result.is-ok .icon { color: var(--sage); }
.check-result.is-error .icon { color: var(--danger); }
.check-result.is-warning .icon { color: var(--ochre); }
.check-result.is-info .icon { color: var(--info); }
.force-box {
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  font-size: var(--step--1);
}
.force-box p { margin: 0 0 var(--space-1); }

/* ------------------------------------------------------------------ envoi / calcul */
.processing { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-4); }
.processing > * { margin: 0; }
.processing .spool { width: 5rem; height: 5rem; }
.processing .bar { width: min(100%, 20rem); }
.processing-steps { text-align: left; font-weight: 500; }

.fatal { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding-top: var(--space-6); }
.fatal > * { margin: 0; }
.fatal .actions { width: 100%; justify-content: center; }
@media (min-width: 34rem) { .fatal .actions { flex-direction: row; } }
.fatal-icon {
  display: grid;
  place-items: center;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  color: var(--thread);
  border: 2px dashed var(--thread);
  margin-inline: auto;
}
.step-refusal { text-align: center; align-items: center; }
.step-refusal .notice { text-align: left; }

.result-hero { text-align: center; display: grid; gap: var(--space-3); justify-items: center; }
.result-hero > * { margin: 0; }
.result-badge {
  display: grid;
  place-items: center;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  background: var(--sage-soft);
  color: var(--sage);
  outline: 2px dashed var(--sage);
  outline-offset: 5px;
  animation: pop-in 0.5s var(--ease);
}
.result-badge .icon { stroke-width: 2.4; }
@keyframes pop-in { from { transform: scale(0.6); opacity: 0; } }

/* ------------------------------------------------------------------ caméra guidée */
body.cam-open { overflow: hidden; }

.cam {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  background: #0d0d10;
  color: #f5f1ea;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  --cam-good: #7fd39a;
  --cam-fair: #f3c969;
  --cam-bad: #ff8a7a;
}
.cam :focus-visible { outline-color: #9ec1ff; }

.cam-top {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
}
.cam-title { text-align: center; }
.cam-title h2 { margin: 0; font-size: 1.05rem; color: #fff; }
.cam-title p { margin: 0; font-size: 0.8rem; color: #cfc8bc; }
.cam-icon-btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 12%);
  color: #fff;
  cursor: pointer;
}
.cam-icon-btn:hover { background: rgb(255 255 255 / 22%); }

.cam-area {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  min-height: 0;
}
.cam-stage { position: relative; width: 100%; height: 100%; }
.cam-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; background: #000; }
.cam-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cam-overlay * { vector-effect: non-scaling-stroke; }
.cam-axis { stroke: rgb(255 255 255 / 35%); stroke-width: 1; stroke-dasharray: 2 6; }
/* Trapèze de la feuille : il ne mesure que ~60 × 13 px sur un téléphone, d'où un trait épais et contrasté */
.cam-sheet-shadow { fill: none; stroke: rgb(0 0 0 / 60%); stroke-width: 9; stroke-linejoin: round; }
.cam-sheet { fill: rgb(255 217 168 / 26%); stroke: #ffd9a8; stroke-width: 4.5; stroke-dasharray: 9 5; stroke-linejoin: round; }
.cam-sheet-label { fill: #ffd9a8; font-family: var(--font-sans); font-weight: 700; paint-order: stroke; stroke: rgb(0 0 0 / 60%); stroke-width: 3px; }
.cam-ghost-shadow { fill: none; stroke: rgb(0 0 0 / 45%); stroke-width: 5; stroke-linejoin: round; }
.cam-ghost { fill: rgb(255 255 255 / 8%); stroke: rgb(255 255 255 / 92%); stroke-width: 2.2; stroke-dasharray: 10 7; stroke-linejoin: round; }
.cam-ghost-arm { fill: none; stroke: rgb(255 255 255 / 75%); stroke-width: 1.6; stroke-dasharray: 5 6; }

.cam-level {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid rgb(255 255 255 / 55%);
  background: rgb(0 0 0 / 35%);
  display: grid;
  place-items: center;
}
.cam-level-target { position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgb(255 255 255 / 70%); }
.cam-level-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cam-bad);
  box-shadow: 0 0 0 2px rgb(0 0 0 / 40%);
  transition: transform 0.12s linear, background-color 0.2s;
}
.cam-level[data-state="good"] { border-color: var(--cam-good); }
.cam-level[data-state="good"] .cam-level-dot { background: var(--cam-good); }
.cam-level[data-state="fair"] .cam-level-dot { background: var(--cam-fair); }

.cam-chips {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  max-width: calc(100% - 100px);
  pointer-events: none;
}
.cam-chip {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: rgb(0 0 0 / 62%);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.25;
  border: 1px solid rgb(255 255 255 / 18%);
}
.cam-chip .icon { width: 1rem; height: 1rem; }
.cam-chip.is-good .icon { color: var(--cam-good); }
.cam-chip.is-fair .icon { color: var(--cam-fair); }
.cam-chip.is-bad { border-color: var(--cam-bad); }
.cam-chip.is-bad .icon { color: var(--cam-bad); }
.cam-chip.is-neutral .icon { color: #cfc8bc; }

.cam-hint {
  margin: 0;
  padding: var(--space-2) var(--space-4) 0;
  text-align: center;
  font-size: 0.9rem;
  color: #e9e3d8;
}
.cam-message { margin: var(--space-2) var(--space-4) 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-s); background: rgb(255 138 122 / 18%); color: #ffd3cc; text-align: center; font-weight: 600; }

.cam-controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-4);
}
.cam-controls > :first-child { justify-self: start; }
.cam-controls > :last-child { justify-self: end; }
.cam-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 72px;
  min-height: 56px;
  padding: 6px 8px;
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: var(--radius);
  background: rgb(255 255 255 / 8%);
  color: #fff;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}
.cam-toggle .icon { width: 1.4rem; height: 1.4rem; }
.cam-toggle-state { color: #cfc8bc; font-weight: 500; }
.cam-toggle[aria-pressed="true"] { background: rgb(255 217 168 / 18%); border-color: #ffd9a8; }
.cam-toggle[aria-pressed="true"] .cam-toggle-state { color: #ffd9a8; }

.cam-shutter {
  position: relative;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.cam-shutter-inner { width: 60px; height: 60px; border-radius: 50%; background: #fff; transition: transform 0.1s; }
.cam-shutter:active .cam-shutter-inner { transform: scale(0.9); }
.cam-shutter.has-timer .cam-shutter-inner { background: #e58e70; }
.cam-shutter.has-timer::after {
  content: "10 s";
  position: absolute;
  color: #1a1410;
  font-weight: 800;
  font-size: 0.95rem;
}

/* Compte à rebours en HAUT de l'image, sur un dégradé : le corps et la silhouette
   fantôme restent visibles pendant que la personne se met en place. */
.cam-countdown {
  position: absolute;
  inset: 0 0 auto 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-6);
  background: linear-gradient(rgb(0 0 0 / 65%), rgb(0 0 0 / 40%) 60%, transparent);
  text-align: center;
  pointer-events: none;
}
.cam-countdown > * { pointer-events: auto; }
.cam-count-dial { position: relative; width: min(24vw, 104px); aspect-ratio: 1; display: grid; place-items: center; }
.cam-count-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.cam-count-track { fill: rgb(0 0 0 / 35%); stroke: rgb(255 255 255 / 25%); stroke-width: 8; }
.cam-count-ring { fill: none; stroke: #ffd9a8; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.cam-count-number { position: relative; font-family: var(--font-serif); font-size: clamp(2.2rem, 10vw, 3.4rem); font-weight: 700; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }
.cam-count-text { margin: 0; font-weight: 600; color: #fff; max-width: 14rem; text-shadow: 0 1px 3px rgb(0 0 0 / 70%); }
.cam-count-cancel { --btn-fg: #fff; --btn-border: rgb(255 255 255 / 60%); }
.cam-count-cancel:hover { --btn-bg: rgb(255 255 255 / 12%); --btn-fg: #fff; }
.cam.is-counting .cam-chips, .cam.is-counting .cam-level { visibility: hidden; }

.cam-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.cam-flash.is-on { animation: cam-flash 0.35s ease-out; }
@keyframes cam-flash { from { opacity: 0.9; } to { opacity: 0; } }

.cam-loading, .cam-rotate {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-5);
  background: #0d0d10;
  text-align: center;
  font-weight: 600;
}
.cam-loading small { font-weight: 400; color: #cfc8bc; max-width: 22rem; }
.cam-rotate { background: rgb(13 13 16 / 92%); }
.cam-rotate p { margin: 0; max-width: 18rem; }

@media (prefers-reduced-motion: reduce) {
  .cam-flash.is-on { animation: none; }
}

/* Avertissement de résolution (caméra guidée) */
.cam-message.is-info { background: rgb(255 217 168 / 18%); color: #ffe7c7; font-weight: 500; }

/* Illustration « vue de dessus » : repères de la feuille imprimée */
.illustration.topview { color: var(--thread); }
.top-heel { fill: currentColor; opacity: 0.85; }
.top-heel-label { font: 700 11px var(--font-sans); fill: var(--surface); }
.top-print { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-dasharray: 3 3; }
.top-legend { font: 600 10px var(--font-sans); fill: var(--ink-2); }

/* Vérification lente de la photo */
.checking-slow { margin: var(--space-2) 0 0; }