@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("../assets/fonts/Poppins-Regular.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("../assets/fonts/Poppins-Medium.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url("../assets/fonts/Poppins-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: url("../assets/fonts/Poppins-Bold.woff2") format("woff2"); }

/* ==========================================================================
   Pavu — sous-identité « Privacy », accent sunshine. Seule identité de Pavu depuis le 2026-11-02 (l'ancienne, violet / rose / jaune / Bungee, est archivée dans _versions/).
   Reconstruite d'après les maquettes GPT Image 2 (01-brand/mockups/pavu-*-sunshine.png) :
   les illustrations sont découpées dans les maquettes (assets/privacy/ui/), les composants
   sont refaits en CSS. Couche posée APRÈS style.css ; elle ne fait que surcharger.
   Palette : indigo #3D39F4, lavande #A78BFA, lilas pâle #C1D3EF, encre #1F1F3B, sunshine #FFD23F (accent).
   ========================================================================== */

:root, :root[data-theme="dark"], :root:not([data-theme="light"]) {
  --indigo: #3d39f4; --lavande: #a78bfa; --lilas: #c1d3ef; --lilas-2: #f0f4fb; --lilas-3: #f6f8fd;
  --encre: #1f1f3b; --sun: #ffd23f; --sun-hover: #ffdb63;
  --line: #dde7f6; --soft: #6b6786;
  --violet: var(--indigo); --violet-dark: #2b28b8; --rose: var(--lilas); --jaune: var(--sun);
  --noir: var(--encre); --blanc: #fff;
  --bg: #fff; --surface: #fff; --surface-2: var(--lilas-2);
  --text: var(--encre); --text-soft: var(--soft); --border: transparent; --stage: var(--lilas);
  --title: var(--encre); --on-bg: var(--soft);
  --radius: 16px; --radius-sm: 12px; --bw: 1px;
  --shadow: 0 2px 14px rgba(70, 55, 150, 0.08), 0 1px 2px rgba(70, 55, 150, 0.06);
  --shadow-sm: 0 1px 6px rgba(70, 55, 150, 0.08);
  --font-display: "Poppins", "Nunito", system-ui, sans-serif;
  --font-body: "Poppins", "Nunito", system-ui, sans-serif;
  color-scheme: light;
}

body { background: var(--bg); background-image: none; font-size: 15px; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; box-shadow: 0 0 0 5px var(--indigo); }
.hint { color: var(--soft); }

/* ---------- Barre du haut ---------- */
.topbar { background: #fff; border-bottom: 1px solid var(--line); padding: 10px 24px; }
.brand { gap: 12px; }
.brand img { width: 44px; height: 44px; background: none; border-radius: 50%; padding: 0; }
.wordmark { font-size: 0; text-shadow: none; -webkit-text-stroke: 0; }
.wordmark::after { content: "Pavu"; font: 700 30px/1 var(--font-display); color: var(--encre); letter-spacing: -0.01em; }
.step {
  font-family: var(--font-body); font-weight: 500; font-size: 14.5px; text-transform: none; letter-spacing: 0;
  color: var(--encre); background: #fff; border: 1px solid var(--line); box-shadow: none; padding: 5px 20px 5px 6px; gap: 10px;
}
.step span { width: 28px; height: 28px; background: var(--lilas-2); border: 0; color: var(--encre); font-weight: 500; font-size: 14px; }
.step[aria-current="step"] { background: var(--sun); border-color: var(--sun); font-weight: 600; box-shadow: 0 2px 8px rgba(255, 210, 63, 0.45); }
.step[aria-current="step"] span { background: #ffe58a; color: var(--encre); }
.step:disabled { opacity: 0.55; }
.local-badge, .local-badge.label-black {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 12px; border: 0;
  background: var(--lilas); color: var(--encre); font: 500 14px/1 var(--font-body); text-transform: none; letter-spacing: 0;
}
.local-badge::before {
  content: ""; width: 14px; height: 16px; background: var(--indigo);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M3 7V5a4 4 0 1 1 8 0v2h1v8H2V7zm2 0h4V5a2 2 0 1 0-4 0z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M3 7V5a4 4 0 1 1 8 0v2h1v8H2V7zm2 0h4V5a2 2 0 1 0-4 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Cartes, titres, boutons ---------- */
.card { background: #fff; border: 0; border-radius: var(--radius); box-shadow: var(--shadow); }
.section-title, .sub-title, .page-title, .dz-title, .on-violet-title, .scenario-cards b, .tile b, .export-opts legend,
.label, .status-tag, .tag-warn { font-family: var(--font-display); text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--encre); }
.page-title { font-size: 40px; font-weight: 700; margin-bottom: 4px; }
.section-title { font-size: 17px; }
.sub-title { font-size: 13px; color: var(--soft); }
.btn {
  font-family: var(--font-body); font-weight: 600; font-size: 14.5px; text-transform: none; letter-spacing: 0;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--indigo); box-shadow: none; padding: 11px 20px;
}
.btn:hover:not(:disabled) { transform: none; background: var(--lilas-3); box-shadow: var(--shadow-sm); }
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.btn-sm { padding: 8px 14px; font-size: 13px; border-radius: 9px; }
.btn-lg { font-family: var(--font-body); font-size: 16px; font-weight: 600; padding: 14px 26px; border-radius: 10px; }
.btn-yellow, .btn-violet { background: var(--sun); border-color: var(--sun); color: var(--encre); box-shadow: 0 3px 10px rgba(255, 210, 63, 0.5); }
.btn-yellow:hover:not(:disabled), .btn-violet:hover:not(:disabled) { background: var(--sun-hover); border-color: var(--sun-hover); box-shadow: 0 4px 14px rgba(255, 210, 63, 0.6); }
.btn-pink { background: var(--lilas); border-color: var(--lilas); color: var(--indigo); }
.btn-dashed { border: 1px dashed var(--lavande); background: var(--lilas-3); color: var(--indigo); }
.btn-toggle[aria-pressed="true"] { background: var(--indigo); color: #fff; border-color: var(--indigo); }

/* ---------- 1. Importer : scène à deux illustrations ---------- */
.page-import { gap: 34px; padding-top: 28px; }
.dropzone {
  /* les % de padding se rapportent à la page, pas à la carte : on les plafonne à la largeur maximale de la carte (1060 px),
     sinon la colonne de texte se réduisait à ~120 px sur un écran large */
  position: relative; max-width: 1060px; min-height: 330px; padding: 40px min(24%, 254px) 40px min(43%, 456px);
  align-items: flex-start; text-align: left; gap: 14px; justify-content: center;
  border: 0; border-radius: 20px; box-shadow: var(--shadow); background: #fff;
}
.dropzone::before {
  content: ""; position: absolute; inset: 14px; border: 1.5px dashed #a9b8d4; border-radius: 14px; pointer-events: none;
  background: none; width: auto; height: auto; margin: 0; display: block;
}
.dropzone::after {
  content: ""; position: absolute; left: 3%; top: 8%; bottom: 6%; width: 36%; pointer-events: none;
  background: url("../assets/privacy/ui/art-left.png") center / contain no-repeat; mix-blend-mode: multiply;
}
.dz-icon { display: none; }
.dz-title { font-size: clamp(26px, 3.4vw, 42px); font-weight: 700; margin: 0; line-height: 1.1; }
.dropzone > p:not(.hint) { max-width: 460px; color: var(--encre); font-size: 16px; }
.dropzone .hint { max-width: 460px; color: var(--soft); }
.dz-actions { justify-content: flex-start; }
/* seconde illustration (nuage + fichier vidéo), à droite */
.dropzone .hint::after {
  content: ""; position: absolute; right: 2.5%; top: 9%; width: 17%; height: 76%;
  background: url("../assets/privacy/ui/art-right.png") center / contain no-repeat; mix-blend-mode: multiply;
}
.dropzone.dragover { background: var(--lilas-3); }

.scenarios { max-width: 1060px; }
.scenarios > .on-violet-title { font-size: 22px; font-weight: 700; margin: 0; }
.scenarios > .on-violet { color: var(--soft); margin: 2px 0 6px; font-size: 14px; }
.scenario-cards { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.scenario-cards > div {
  position: relative; padding: 0 20px 20px; gap: 6px; background: #fff; border: 1.5px solid transparent; border-radius: 16px;
  box-shadow: var(--shadow); text-align: left; overflow: hidden;
}
.scenario-cards > div::before {
  content: ""; display: block; height: 176px; margin: 8px -6px 6px; border-radius: 0; width: auto; flex: none;
  background: transparent center / contain no-repeat; mix-blend-mode: multiply;
}
.scenario-cards > div:nth-child(1)::before { background-image: url("../assets/privacy/ui/sc-1.png"); }
.scenario-cards > div:nth-child(2)::before { background-image: url("../assets/privacy/ui/sc-2.png"); }
.scenario-cards > div:nth-child(3)::before { background-image: url("../assets/privacy/ui/sc-3.png"); }
.scenario-cards > div:nth-child(4)::before { background-image: url("../assets/privacy/ui/sc-4.png"); }
.scenario-cards b { font-size: 17px; font-weight: 700; }
.scenario-cards span { color: var(--encre); font-size: 14px; line-height: 1.45; }

/* ---------- 2. Vérifier ---------- */
.page-verify { grid-template-columns: 250px minmax(0, 1fr) 330px; gap: 20px; }
.queue { background: #fff; padding: 20px 14px 14px; overflow: hidden; }
.queue .card-head { padding: 0 6px; }
.queue .section-title { font-size: 20px; font-weight: 700; }
.count-pill { background: var(--lilas); color: var(--indigo); border: 0; font-weight: 600; }
.q-pick { border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-sm); border-radius: 12px; padding: 8px 28px 8px 8px; gap: 12px; }
.q-row.current .q-pick { background: var(--lilas-2); border: 1.5px solid var(--indigo); box-shadow: none; transform: none; color: var(--encre); }
.q-thumb { border: 0; border-radius: 8px; width: 58px; height: 46px; }
.q-name { font-weight: 600; font-size: 14.5px; }
.q-tag { font-weight: 500; color: var(--soft); }
.q-tag.done { color: #178f66; }
.q-row.current .q-tag { color: var(--soft); }
.q-tag.working, .q-tag.error { color: #b3261e; }
.queue::after {
  content: ""; display: block; flex: none; height: 150px; margin: 6px -14px -14px;
  background: url("../assets/privacy/ui/queue-mascot.png") center bottom / contain no-repeat; mix-blend-mode: multiply;
}
@media (max-width: 760px) { .queue::after { display: none; } }

.stage-card { padding: 14px; border: 0; }
.stage { background: var(--lilas); border: 0; border-radius: 12px; background-image: none; }
.stage-foot { background: #fff; border-radius: 12px; padding: 4px; }
.stage-foot .hint { color: var(--encre); font-size: 15px; display: flex; align-items: center; gap: 12px; }
.stage-foot .hint::before {
  content: ""; width: 30px; height: 30px; flex: none; border-radius: 9px;
  background: url("../assets/privacy/pose-5.webp") center 55% / 80% no-repeat var(--indigo);
}
.status-tag, .tag-warn { background: var(--lilas); color: var(--indigo); border: 0; font-weight: 600; font-size: 11px; }
.file-name { font-weight: 600; }
.redo-banner, .zone, .meta-item.danger { background: var(--lilas-2); border: 1px solid #d1def3; color: var(--encre); }
.meta-item { border: 1px dashed #a9b8d4; text-decoration-color: #b3261e; }

.panel { position: relative; padding: 20px 18px 18px; gap: 14px; overflow: hidden; }
.panel > .card-head, .panel > .section-title { min-height: 44px; position: relative; z-index: 1; }
.panel::after {
  content: ""; position: absolute; top: 0; right: 0; width: 168px; height: 70px; pointer-events: none;
  background: url("../assets/privacy/ui/curtain-a.png") right top / cover no-repeat; mix-blend-mode: multiply;
}
.panel:nth-of-type(2n)::after { background-image: url("../assets/privacy/ui/curtain-b.png"); height: 56px; }
.panel .section-title { font-size: 19px; font-weight: 700; }
.pills button, .style-grid button {
  border: 1px solid var(--line); background: #fff; color: var(--encre); box-shadow: var(--shadow-sm);
  border-radius: 12px; font-weight: 500; font-size: 13px;
}
.pills button { border-radius: 999px; }
.pills button.active, .style-grid button.active { background: var(--lilas-3); border: 1.5px solid var(--indigo); color: var(--indigo); box-shadow: none; transform: none; font-weight: 600; }
.swatch { border: 0; }
.field-label { font-weight: 500; font-size: 14px; }
.field-label output { background: none; border: 0; font-weight: 500; font-size: 14px; }
input[type="range"] { height: 6px; background: #d1def3; border: 0; border-radius: 999px; }
input[type="range"]::-webkit-slider-thumb { width: 24px; height: 24px; background: #fff; border: 2px solid var(--indigo); box-shadow: 0 2px 6px rgba(61, 57, 244, 0.3); }
input[type="range"]::-moz-range-thumb { background: #fff; border: 2px solid var(--indigo); }
.seg { border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.seg button { border-left: 1px solid var(--line); font-weight: 500; font-size: 13.5px; color: var(--indigo); padding: 9px 6px; }
.seg button.active { background: var(--indigo); color: #fff; }
.switch-track, .toggle { background: #d1def3; border: 0; }
.switch-track { width: 46px; height: 26px; }
.switch-track::after, .toggle::after { background: #fff; border: 0; box-shadow: 0 1px 3px rgba(31, 31, 59, 0.3); }
.switch-track::after { width: 20px; height: 20px; top: 3px; left: 3px; }
.switch input:checked + .switch-track, .toggle[aria-checked="true"] { background: var(--indigo); }
.switch input:checked + .switch-track::after, .toggle[aria-checked="true"]::after { background: #fff; transform: translateX(20px); }
.toggle::after { top: 3px; left: 3px; width: 20px; height: 20px; }
.toggle { width: 46px; height: 26px; }
.switch { font-weight: 500; font-size: 14px; }
.person { border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 8px 10px; }
.avatar { border: 0; }
.person-name { font-weight: 500; font-size: 14.5px; }
.mini-btn { border: 1px solid var(--line); background: #fff; color: var(--indigo); font-weight: 500; }
.mini-btn:hover:not(:disabled) { background: var(--lilas-3); color: var(--indigo); }
.expert { padding: 16px 18px; }
details.more { border-top: 1px solid var(--line); }

/* ---------- 3. Exporter ---------- */
.page-export { padding-top: 24px; }
.export-card { max-width: 1080px; padding: 40px 48px 32px; gap: 26px; position: relative; overflow: hidden; box-shadow: var(--shadow); }
.export-card::before {
  content: ""; position: absolute; right: 28px; top: 20px; width: 400px; height: 250px; pointer-events: none;
  background: url("../assets/privacy/ui/export-hero.png") right top / contain no-repeat; mix-blend-mode: multiply;
}
.export-card > * { position: relative; }
.tiles { grid-template-columns: repeat(3, auto); justify-content: start; gap: 14px; }
.tile, .tile-yellow, .tile-pink, .tile:nth-child(n) {
  background: var(--lilas-3); color: var(--encre); border: 0; border-radius: 14px; align-items: center; text-align: center; padding: 18px 22px; min-width: 150px;
}
.tile b { font-size: 40px; font-weight: 700; line-height: 1.1; }
.tile span { font-size: 14px; font-weight: 400; }
.tile::after { content: none; }
.export-opts { gap: 28px 48px; }
.export-opts fieldset { border: 0; padding: 0; gap: 12px; }
.export-opts legend { font-size: 19px; font-weight: 700; padding: 0 0 8px; color: var(--encre); float: left; width: 100%; }
.export-opts legend + * { clear: both; }
.export-note { background: var(--lilas-3); border: 1px solid #d1def3; font-weight: 500; }
.results-head {
  position: relative; background: #d1def3; color: var(--encre); border: 0; border-radius: 14px; padding: 0 20px 0 0; gap: 18px;
  min-height: 118px; overflow: hidden; align-items: center; justify-content: flex-start;
}
.results-head::before {
  content: ""; display: block; flex: none; width: 222px; height: 118px; border-radius: 0; margin: 0;
  background: url("../assets/privacy/ui/banner-mascot.png") center / cover no-repeat;
}
.results-head b { font-size: 26px; font-weight: 700; flex: 0 0 auto; }
.results-actions { margin-left: auto; }
.results-head .btn { background: #fff; border: 1px solid var(--indigo); color: var(--indigo); box-shadow: none; }
.results-head .btn-yellow, .results-head .btn-violet { background: var(--sun); border-color: var(--sun); color: var(--encre); box-shadow: 0 3px 10px rgba(255, 210, 63, 0.5); }
.result-list { border: 1px solid var(--line); border-radius: 12px; padding: 0; gap: 0; overflow: hidden; }
.result-row { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 14px 16px; }
.result-row:last-child { border-bottom: 0; }
.result-name { font-weight: 500; }
.footnote { max-width: 1080px; color: var(--soft); display: flex; align-items: center; gap: 12px; text-align: left; justify-content: flex-start; font-size: 14px; }
.footnote::before {
  content: ""; flex: none; width: 40px; height: 40px; border-radius: 12px;
  background: url("../assets/privacy/pose-5.webp") center 55% / 78% no-repeat var(--indigo);
}

/* ---------- Chargement, erreur, messages ---------- */
.spinner { width: 64px; height: 64px; border: 0; border-radius: 16px; background: transparent; animation: none; position: relative; overflow: hidden; }
.spinner::before {
  content: ""; position: absolute; inset: 0; background: url("../assets/privacy/pose-4.webp") center 55% / 78% no-repeat var(--indigo);
  border-radius: 16px; animation: privacy-bob 1.6s ease-in-out infinite;
}
@keyframes privacy-bob { 0%, 100% { transform: translateY(2px) rotate(-3deg); } 50% { transform: translateY(-3px) rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .spinner::before { animation: none; } }
.stage-busy { background: rgba(31, 31, 59, 0.6); text-shadow: none; font-weight: 600; }
.stage-error { background: var(--lilas); }
.stage-error::before {
  content: ""; display: block; width: 72px; height: 72px; border-radius: 18px;
  background: url("../assets/privacy/expr-4.webp") center 55% / 78% no-repeat var(--indigo);
}
.progress { border: 1px solid var(--line); background: var(--lilas-2); height: 14px; }
.progress span { background: var(--indigo); border-right: 0; }
.progress em { display: none; }
.progress-lg { height: 16px; }
.lane-track { border: 0; background: var(--lilas); }
.lane-fill { background: var(--indigo); }
.loader { background: rgba(31, 31, 59, 0.4); }
.loader-card { border: 0; box-shadow: var(--shadow); font-weight: 600; }
.toast { background: var(--encre); border: 0; box-shadow: var(--shadow); font-weight: 500; }
.toast.error { background: #b3261e; color: #fff; box-shadow: var(--shadow); }
.time { border: 1px solid var(--line); background: #fff; }
.icon-btn { background: var(--indigo); color: #fff; border: 0; box-shadow: none; }

@media (max-width: 900px) {
  .topbar { padding: 8px 14px; }
  .wordmark::after { font-size: 24px; }
  .dropzone { padding: 230px 24px 32px; min-height: 0; }
  .dropzone::after { left: 6%; right: 6%; width: auto; top: 18px; bottom: auto; height: 190px; }
  .dropzone .hint::after { display: none; }
  .export-card { padding: 28px 20px 24px; }
  .export-card::before { opacity: 0.35; width: 230px; height: 150px; right: 6px; top: 8px; }
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .tile { min-width: 0; padding: 12px 8px; }
  .tile b { font-size: 28px; }
  .results-head { flex-wrap: wrap; padding: 0 14px 14px 0; }
  .results-head::before { width: 100%; height: 100px; }
  .results-actions { margin-left: 0; width: 100%; }
}

/* Le rideau n'orne que deux panneaux (Style, Visages), comme sur la maquette */
.panel::after { display: none; }
.inspector > .panel:nth-of-type(2)::after, .inspector > .panel:nth-of-type(3)::after { display: block; }

/* Frise de lecture (2026-11-03) : les passages où un visage est masqué sont peints sur le curseur (indigo ; gris s'il est
   laissé visible), la tête de lecture est un trait. Les pistes par personne, dessous, se touchent pour s'y rendre. */
#scrub { -webkit-appearance: none; appearance: none; height: 16px; border-radius: 6px; background-color: #e0e9f7; background-repeat: no-repeat; cursor: pointer; }
#scrub::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 8px; height: 32px; border-radius: 4px; background: var(--encre); border: 2px solid #fff; box-shadow: 0 1px 5px rgba(31, 31, 59, 0.4); }
#scrub::-moz-range-thumb { width: 8px; height: 32px; border-radius: 4px; background: var(--encre); border: 2px solid #fff; box-shadow: 0 1px 5px rgba(31, 31, 59, 0.4); }
.lane-track { height: 12px; cursor: pointer; }
.lane-head { width: 2px; top: -4px; bottom: -4px; background: var(--encre); }
.lane-name { color: var(--soft); font-weight: 600; }