/* ============================================================
   FDR Canada — fiche d'inscription interactive
   Identité du site FDRC (indigo, or, crème, arc-en-ciel du logo) appliquée à un écran de travail :
   couleur et titres de marque, champs et boutons standards.
   ============================================================ */

:root {
  --indigo-900: #1B0940;
  --indigo-800: #2A0E5F;
  --indigo-700: #3A1585;
  --indigo-600: #4B1D9E;
  --indigo-500: #6234BC;
  --indigo-100: #EDE6FB;
  --indigo-50: #F6F2FE;

  --gold-700: #8E6608;
  --gold-500: #C8971F;
  --gold-100: #F7E9C6;

  --cream: #FBF6EC;
  --cream-2: #F5EEE0;
  --paper: #FFFFFF;

  --ink: #1A1226;
  --ink-2: #453A57;
  --ink-3: #6B6180;
  --line: #E4DCCB;
  --line-strong: #CFC3AA;

  --ok: #1F7A4D;
  --ok-bg: #E8F5EE;
  --ok-line: #BFE0CE;
  --err: #B3261E;
  --err-bg: #FDEEEC;
  --err-line: #F2C4BF;
  --warn-ink: #6B4D05;
  --warn-bg: #FBF1D6;
  --warn-line: #E8D08A;
  --info-bg: #F6F2FE;
  --info-line: #DCCFF7;

  --rainbow: linear-gradient(90deg, #4B1D9E 0%, #1F6FD0 22%, #2FA35C 44%, #E0B12B 64%, #E2721F 82%, #CB2E4E 100%);

  /* Polices du système : rien à télécharger, rendu net sur tous les appareils (le site FDRC retombe sur les mêmes familles). */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --r-sm: 10px;
  --r-md: 16px;
  --shadow-sm: 0 1px 2px rgba(26, 18, 38, .06), 0 2px 8px rgba(26, 18, 38, .05);
  --shadow-md: 0 4px 12px rgba(26, 18, 38, .08), 0 14px 32px rgba(26, 18, 38, .08);
  --ease-out: cubic-bezier(.22, .72, .28, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* scroll-padding-bottom : un champ qui reçoit le focus n'est jamais caché sous la barre d'actions collée en bas. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; scroll-padding-bottom: 7rem; color-scheme: light; scrollbar-color: var(--line-strong) transparent; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: var(--font-body); font-size: 1rem; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  caret-color: var(--indigo-600); accent-color: var(--indigo-600);
  -webkit-tap-highlight-color: rgba(75, 29, 158, .12);
}
a, button, input, select, textarea, label { touch-action: manipulation; }
[hidden] { display: none !important; }
img, svg { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; }
p { margin: 0 0 1rem; }
a { color: var(--indigo-600); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:not(.btn):hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--indigo-600); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--gold-100); color: var(--indigo-900); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; border: 3px solid var(--cream); }

.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; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 200; background: var(--indigo-800); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 var(--r-sm) var(--r-sm); font-weight: 600; text-decoration: none; transition: top .18s var(--ease-out); }
.skip-link:focus { top: 0; }
.skip-link, .skip-link:hover, .skip-link:focus { color: #fff; }
.ico { width: 1.25em; height: 1.25em; flex: none; }
.ico-lg { width: 2rem; height: 2rem; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Bandeau de démonstration, en-tête ---------- */
.demo-banner { background: var(--gold-100); border-bottom: 1px solid var(--warn-line); color: var(--ink); text-align: center; padding: .5rem 1rem; font-size: .9375rem; }

.app-header { background: var(--paper); }
.app-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: min(100% - 2rem, 62rem); margin-inline: auto; min-height: 4rem; padding-block: .5rem; }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; }
.brand-mark { width: 48px; height: 48px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; flex: none; box-shadow: var(--shadow-sm); }
.brand-mark img { width: 88%; height: 88%; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; color: var(--indigo-900); letter-spacing: -.01em; }
.brand-sub { font-size: .8125rem; color: var(--ink-3); }
.header-help { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--indigo-800); font-weight: 650; font-size: .9375rem; border: 1px solid var(--line-strong); border-radius: 999px; padding: .5rem .9rem; min-height: 44px; white-space: nowrap; }
.header-help:hover { border-color: var(--indigo-600); background: var(--indigo-50); color: var(--indigo-800); }
.rainbow-rule { height: 4px; background: var(--rainbow); }
/* Saisie déléguée : un administrateur remplit pour une famille. */
.saisie-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1rem; padding: .45rem 1rem; background: var(--indigo-50); border-bottom: 1px solid var(--info-line); color: var(--indigo-900); font-size: .9375rem; }
.saisie-banner > span { display: inline-flex; align-items: center; gap: .45rem; }
.saisie-banner .ico { color: var(--indigo-600); }

/* ---------- Étapes ---------- */
.stepper { background: var(--cream); border-bottom: 1px solid var(--line); }
.stepper-inner { width: min(100% - 2rem, 62rem); margin-inline: auto; padding: .85rem 0 .9rem; display: grid; gap: .6rem; }
.steps-compact { display: none; margin: 0; font-weight: 650; color: var(--indigo-900); }
.steps { list-style: none; display: flex; gap: .25rem; margin: 0; padding: 0; }
.steps li { flex: 1 1 0; min-width: 0; }
.steps button { display: flex; align-items: center; gap: .55rem; width: 100%; min-height: 44px; padding: .35rem .5rem; background: none; border: 0; border-radius: var(--r-sm); font: inherit; font-size: .9375rem; color: var(--ink-3); text-align: left; cursor: pointer; }
.steps button:disabled { cursor: default; opacity: .6; }
.steps button:not(:disabled):hover { background: var(--paper); color: var(--indigo-800); }
.step-dot { width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--paper); display: grid; place-items: center; font-size: .8125rem; font-weight: 700; flex: none; }
.step-dot .ico { width: .95rem; height: .95rem; }
.step-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.steps .is-done .step-dot { background: var(--indigo-100); border-color: var(--indigo-100); color: var(--indigo-700); }
.steps .is-done button { color: var(--ink-2); }
.steps .is-current .step-dot { background: var(--indigo-700); border-color: var(--indigo-700); color: #fff; }
.steps .is-current button { color: var(--indigo-900); font-weight: 700; }
.progress { height: 6px; border-radius: 999px; background: var(--cream-2); border: 1px solid var(--line); overflow: hidden; --p: .2; }
.progress-fill { display: block; height: 100%; width: calc(var(--p) * 100%); border-radius: inherit; background: var(--rainbow); background-size: calc(100% / var(--p)) 100%; transition: width .5s var(--ease-out); }
.save-status { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .875rem; color: var(--ink-3); }
.save-status .ico { width: 1rem; height: 1rem; color: var(--ok); }

/* ---------- Mise en page ---------- */
.shell { width: min(100% - 2rem, 44rem); margin: 1.5rem auto 3rem; display: grid; gap: 1.5rem; align-items: start; }
.shell.has-aside { grid-template-columns: minmax(0, 1fr); }
.aside { display: none; }
@media (min-width: 960px) {
  .shell.has-aside { width: min(100% - 2rem, 62rem); grid-template-columns: minmax(0, 1fr) 17rem; }
  .aside:not([hidden]) { display: block; position: sticky; top: 1rem; }
  .hh-bar { display: none !important; }
}

.step-enter { animation: enter .28s var(--ease-out); }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } }
.reveal:not([hidden]) { animation: reveal .22s var(--ease-out); }
@keyframes reveal { from { opacity: 0; transform: translateY(-4px); } }

.title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.65rem, 1.3rem + 1.4vw, 2.1rem); line-height: 1.15; letter-spacing: -.015em; color: var(--indigo-900); margin-bottom: .6rem; text-wrap: balance; }
.title:focus { outline: none; }
.lead { font-size: 1.0625rem; color: var(--ink-2); max-width: 62ch; margin-bottom: 1.25rem; }
.note { color: var(--ink-2); font-size: .9375rem; margin-bottom: 1.5rem; }
.help { margin-top: 1.25rem; color: var(--ink-2); }
.hint { margin: 0 0 .45rem; color: var(--ink-3); font-size: .9375rem; line-height: 1.45; }

.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.25rem; box-shadow: var(--shadow-sm); }
.panel h2 { font-family: var(--font-body); font-weight: 700; font-size: 1.125rem; line-height: 1.3; color: var(--indigo-900); margin-bottom: .6rem; }
.panel > :last-child { margin-bottom: 0; }
.welcome > .panel, .confirm-page > .panel, .welcome > .btn-row, .confirm-page > .btn-row { margin-bottom: 1rem; }
.start-row { margin-bottom: 1.5rem; }
.stack { display: grid; gap: 1.15rem; }
.stack-lg { display: grid; gap: 1.25rem; margin-bottom: 1.25rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem 1rem; }
@media (max-width: 34rem) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.ticks li { display: flex; gap: .7rem; align-items: flex-start; }
.ticks .ico { color: var(--ok); margin-top: .2em; }

/* ---------- Champs ---------- */
.field { margin: 0; padding: 0; border: 0; min-width: 0; }
.label { display: block; padding: 0; margin: 0 0 .25rem; font-weight: 650; font-size: 1rem; color: var(--ink); }
.opt { font-weight: 500; color: var(--ink-3); font-size: .9375rem; }
/* Astérisque des champs obligatoires : rouge, expliqué par la légende de l'étape. */
.req { font-weight: 700; color: var(--err); }
.legend .req { font-size: 1.05em; }
.input {
  display: block; width: 100%; min-height: 3rem; padding: .65rem .8rem;
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); appearance: none; -webkit-appearance: none;
  transition: border-color .15s, box-shadow .15s;
}
.input:hover { border-color: var(--indigo-500); }
.input:focus { border-color: var(--indigo-600); outline: 3px solid rgba(75, 29, 158, .28); outline-offset: 0; }
.input::placeholder { color: var(--ink-3); opacity: 1; }
.input:disabled, .input[readonly] { background: var(--cream-2); color: var(--ink-2); }
.select { padding-right: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B1D9E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; background-size: 1.2rem; }
.field.invalid .input { border-color: var(--err); box-shadow: 0 0 0 1px var(--err); }
.err { display: flex; gap: .45rem; align-items: flex-start; margin: .45rem 0 0; color: var(--err); font-size: .9375rem; font-weight: 600; line-height: 1.4; }
.err .ico { margin-top: .12em; width: 1.1em; height: 1.1em; }
.warn-text { display: flex; gap: .45rem; align-items: flex-start; margin: .5rem 0 0; color: var(--warn-ink); font-size: .9375rem; }
.warn-text .ico { margin-top: .12em; width: 1.1em; height: 1.1em; }
.sugg { margin: .45rem 0 0; font-size: .9375rem; color: var(--ink-2); }
.link-btn { background: none; border: 0; padding: 0; font: inherit; font-weight: 650; color: var(--indigo-700); text-decoration: underline; cursor: pointer; }

fieldset.field legend { float: none; width: 100%; }
.date-row { display: flex; align-items: center; gap: .6rem; }
.date-input { flex: 1 1 auto; min-width: 0; max-width: 11rem; font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.date-echo { margin: .4rem 0 0; color: var(--ink-2); font-size: .9375rem; }
.date-echo:empty { display: none; }
/* Bouton « Calendrier » : un vrai champ date, invisible, posé sur le bouton ; toucher le bouton ouvre le calendrier
   du téléphone (iPhone, Android) ou du navigateur. */
.date-cal { position: relative; display: inline-flex; flex: none; }
.date-cal-btn { pointer-events: none; }
.date-native { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; font-size: 16px; z-index: 1; }
.date-native::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto; margin: 0; cursor: pointer; opacity: 0; }
.date-cal:hover .date-cal-btn { border-color: var(--indigo-600); background: var(--indigo-50); }
.date-cal:active .date-cal-btn { transform: translateY(1px); }

.choices { display: grid; gap: .6rem; margin-top: .35rem; }
.choices-inline .choices { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
.choices-cards .choices { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.choice { display: flex; gap: .75rem; align-items: flex-start; min-height: 3rem; padding: .75rem .95rem; border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--paper); cursor: pointer; transition: border-color .15s, background-color .15s; }
.choice:hover { border-color: var(--indigo-500); }
.choice:has(input:checked) { border-color: var(--indigo-600); background: var(--indigo-50); }
.choice:has(input:focus-visible) { outline: 3px solid var(--indigo-600); outline-offset: 2px; }
.choice input { width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; flex: none; accent-color: var(--indigo-600); }
.choice-text { display: grid; gap: .1rem; }
.choice-label { font-weight: 650; }
.choice-desc { color: var(--ink-2); font-size: .9375rem; line-height: 1.4; }
.field.invalid .choice { border-color: var(--err-line); }
.sig-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .6rem; margin: .35rem 0 .85rem; }

.check-row { display: flex; gap: .75rem; align-items: flex-start; min-height: 2.75rem; padding: .3rem 0; cursor: pointer; }
.check-row input { width: 1.4rem; height: 1.4rem; margin: .1rem 0 0; flex: none; accent-color: var(--indigo-600); }
.check-text { line-height: 1.45; }
.check .hint { margin: 0 0 0 2.15rem; }
.check .err { margin-left: 2.15rem; }
.field.check.invalid .check-row input { outline: 2px solid var(--err); outline-offset: 1px; }

.static { margin: 0; color: var(--ink-2); }
.static-label { font-weight: 650; color: var(--ink); margin-right: .35rem; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 3rem; padding: .7rem 1.35rem; border-radius: 999px; border: 1.5px solid transparent; font: inherit; font-size: 1rem; font-weight: 650; text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s; }
.btn .ico { width: 1.15em; height: 1.15em; }
.btn.sm { min-height: 2.75rem; padding: .5rem 1rem; font-size: .9375rem; }
.btn.lg { min-height: 3.25rem; padding: .85rem 1.7rem; }
.btn.primary { background: var(--indigo-700); color: #fff; box-shadow: var(--shadow-sm); }
.btn.primary:hover { background: var(--indigo-800); color: #fff; box-shadow: var(--shadow-md); }
.btn.primary:active { transform: translateY(1px); }
.btn.secondary { background: var(--paper); border-color: var(--line-strong); color: var(--indigo-800); }
.btn.secondary:hover { border-color: var(--indigo-600); background: var(--indigo-50); color: var(--indigo-800); }
.btn.ghost { background: transparent; color: var(--indigo-800); }
.btn.ghost:hover { background: var(--indigo-50); color: var(--indigo-800); }
.btn.danger { color: var(--err); }
.btn.danger:hover { background: var(--err-bg); color: var(--err); border-color: var(--err-line); }
.btn.primary.danger { background: var(--err); color: #fff; }
.btn.primary.danger:hover { background: #8E1E18; color: #fff; }
.btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.btn.secondary.danger { border-color: var(--err-line); }

.actions { position: sticky; bottom: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-top: 1.5rem; padding: .85rem 0 calc(.85rem + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--cream) 72%, rgba(251, 246, 236, 0)); }
.actions .btn.primary { margin-left: auto; min-width: 11rem; }

/* ---------- Pastilles et encadrés ---------- */
.badge { display: inline-flex; align-items: center; padding: .12rem .6rem; border-radius: 999px; border: 1px solid var(--line); background: var(--cream-2); color: var(--ink-2); font-size: .8125rem; font-weight: 650; line-height: 1.5; white-space: nowrap; }
.badge.info { background: var(--info-bg); border-color: var(--info-line); color: var(--indigo-700); }
.badge.alerte { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }
.badge.ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.badge.erreur { background: var(--err-bg); border-color: var(--err-line); color: var(--err); }

.callout { display: flex; gap: .7rem; align-items: flex-start; padding: .85rem 1rem; border: 1px solid var(--info-line); background: var(--info-bg); border-radius: 12px; font-size: .9375rem; line-height: 1.5; margin: 0 0 1rem; }
.callout .ico { margin-top: .12em; color: var(--indigo-700); }
.callout.warn { background: var(--warn-bg); border-color: var(--warn-line); }
.callout.warn .ico { color: var(--gold-700); }
.callout.err { background: var(--err-bg); border-color: var(--err-line); }
.callout.err .ico { color: var(--err); }
.callout.ok { background: var(--ok-bg); border-color: var(--ok-line); }
.callout.ok .ico { color: var(--ok); }
.callout > div > :last-child { margin-bottom: 0; }

.error-summary { border: 2px solid var(--err); background: var(--err-bg); border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: 1.25rem; }
.error-summary:focus { outline: 3px solid var(--err); outline-offset: 2px; }
.error-summary h2 { font-family: var(--font-body); font-size: 1.0625rem; font-weight: 700; color: var(--err); margin-bottom: .5rem; }
.error-summary ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .35rem; }
.error-summary a { color: var(--err); font-weight: 600; }

/* ---------- Personnes ---------- */
.hh-bar { display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem; padding: .6rem .85rem; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; font-size: .9375rem; }
.hh-bar .ico { color: var(--indigo-600); }
.people { display: grid; gap: 1rem; margin-bottom: 1rem; }
.person { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.person.is-open { border-color: var(--line-strong); }
.person-title { font: inherit; }
.person-toggle { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "num who edit" "badges badges badges"; gap: .2rem .8rem; align-items: center; width: 100%; padding: .9rem 1.1rem .4rem; background: none; border: 0; border-radius: var(--r-md); font: inherit; color: inherit; text-align: left; cursor: pointer; }
.person-toggle:hover { background: var(--indigo-50); }
.person-num { grid-area: num; font-size: .875rem; font-weight: 700; color: var(--indigo-700); }
.person-who { grid-area: who; font-weight: 700; font-size: 1.0625rem; overflow-wrap: anywhere; }
.person-badges { grid-area: badges; display: flex; flex-wrap: wrap; gap: .4rem; }
.person-edit { grid-area: edit; display: inline-flex; align-items: center; gap: .35rem; color: var(--indigo-700); font-weight: 650; font-size: .9375rem; }
.person-edit .ico { transition: transform .2s var(--ease-out); }
.person.is-open .person-edit .ico { transform: rotate(180deg); }
.when-open { display: none; }
.person.is-open .when-open { display: inline; }
.person.is-open .when-closed { display: none; }
.person-sum { margin: 0; padding: 0 1.1rem .9rem; color: var(--ink-2); font-size: .9375rem; }
.person.is-open .person-sum { display: none; }
.person-body { padding: 0 1.1rem 1.1rem; border-top: 1px solid var(--line); }
.sec { padding: 1.1rem 0; border-top: 1px solid var(--line); display: grid; gap: 1.1rem; }
.sec:first-child { border-top: 0; }
.sec h3 { font-family: var(--font-body); font-weight: 700; font-size: 1rem; color: var(--indigo-800); }
.person-actions { display: flex; flex-wrap: wrap; gap: .5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.confirm { margin-top: .75rem; padding: .85rem 1rem; border: 1px solid var(--err-line); background: var(--err-bg); border-radius: 12px; }
.confirm p { margin-bottom: .7rem; }
.add-row { display: grid; gap: .5rem; justify-items: start; }
.add-row .hint { margin: 0; }

.file-pick { position: relative; display: flex; flex-wrap: wrap; gap: .5rem; }
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file-input:focus-visible + label { outline: 3px solid var(--indigo-600); outline-offset: 3px; }
/* « Prendre une photo » : seulement sur les écrans tactiles (téléphone, tablette), où l'appareil photo s'ouvre directement. */
@media (hover: hover) and (pointer: fine) { .file-pick .file-photo { display: none; } }
.file-chip { display: flex; align-items: center; gap: .75rem; margin-top: .6rem; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: 12px; background: var(--cream); }
.file-chip.is-lost { background: var(--warn-bg); border-color: var(--warn-line); }
.file-chip img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; }
.file-chip > .ico { color: var(--indigo-600); }
.file-meta { display: grid; min-width: 0; flex: 1; }
.file-name { font-weight: 650; overflow-wrap: anywhere; }
.file-size { font-size: .875rem; color: var(--ink-3); }
.file-field .hint { margin-bottom: .6rem; }
.file-busy { display: flex; align-items: center; gap: .5rem; margin: .6rem 0 0; color: var(--ink-2); font-size: .9375rem; }
.file-busy .ico { color: var(--indigo-600); }

/* Champ piège pour les robots : hors de l'écran, ignoré par les lecteurs d'écran. */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Aide latérale ---------- */
.household h2 { margin-bottom: .75rem; }
.hh-list { list-style: none; margin: 0 0 .9rem; padding: 0; display: grid; gap: .6rem; }
.hh-name { display: block; font-weight: 650; overflow-wrap: anywhere; }
.hh-meta { display: block; font-size: .875rem; color: var(--ink-3); }
.hh-fees { margin: 0 0 .6rem; padding-top: .75rem; border-top: 1px solid var(--line); display: grid; gap: .3rem; }
.hh-fees div { display: flex; justify-content: space-between; gap: 1rem; }
.hh-fees dt { color: var(--ink-2); }
.hh-fees dd { margin: 0; font-weight: 700; }
.household .hint { margin: 0; }

/* ---------- Récapitulatif, frais ---------- */
.kv { margin: 0; display: grid; gap: .55rem; }
.kv > div { display: grid; grid-template-columns: minmax(7.5rem, 11rem) minmax(0, 1fr); gap: .2rem 1rem; }
.kv dt { color: var(--ink-3); font-size: .9375rem; }
.kv dd { margin: 0; font-weight: 550; overflow-wrap: anywhere; }
@media (max-width: 34rem) { .kv > div { grid-template-columns: minmax(0, 1fr); } }
.recap-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .6rem; }
.recap-head h2 { margin: 0; }
.link-edit { display: inline-flex; align-items: center; gap: .35rem; font-weight: 650; min-height: 44px; }
.link-edit .ico { width: 1rem; height: 1rem; }
.recap-person { padding: 1rem 0; border-top: 1px solid var(--line); }
.recap-person:first-of-type { border-top: 0; padding-top: .25rem; }
.recap-person h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; margin-bottom: .6rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.fee-lines { margin: 0 0 .75rem; display: grid; gap: .35rem; }
.fee-lines > div { display: flex; justify-content: space-between; gap: 1rem; }
.fee-lines dt { color: var(--ink-2); }
.fee-lines dd { margin: 0; font-weight: 650; }
.fee-lines .sub { padding-left: 1rem; font-size: .9375rem; }
.fee-lines .sub dd { font-weight: 500; }
.fee-lines .total { border-top: 1px solid var(--line); padding-top: .6rem; margin-top: .3rem; font-size: 1.125rem; }
.fee-lines .total dt { color: var(--ink); font-weight: 700; }
.fee-lines .total dd { font-weight: 800; color: var(--indigo-900); }

/* ---------- Signature ---------- */
.decl-text { color: var(--ink); max-width: 66ch; }
/* Avis de confidentialité : six réponses courtes, lisibles d'un coup d'œil. */
.avis { margin: 0; display: grid; gap: .7rem; max-width: 66ch; }
.avis dt { font-weight: 700; color: var(--indigo-900); }
.avis dd { margin: .1rem 0 0; color: var(--ink-2); line-height: 1.5; }
.avis-details summary { cursor: pointer; font-weight: 650; color: var(--indigo-700); min-height: 44px; display: flex; align-items: center; }
.avis-details[open] summary { margin-bottom: .5rem; }
.pad {
  display: block; width: 100%; height: 11rem; border: 1.5px solid var(--line-strong); border-radius: 12px; touch-action: none; cursor: crosshair; --pad-ink: var(--indigo-900);
  background: linear-gradient(to bottom, transparent calc(100% - 2.9rem), var(--line-strong) calc(100% - 2.9rem), var(--line-strong) calc(100% - 2.9rem + 1px), transparent calc(100% - 2.9rem + 1px)), var(--paper);
}
.pad-tools { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: .4rem; }
.pad-tools .hint { margin: 0; }
.sig-preview { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .6rem .9rem; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.sig-preview img { max-height: 6rem; max-width: 100%; }
.sig-script { font-family: "Segoe Script", "Brush Script MT", "Apple Chancery", cursive; font-size: 1.5rem; color: var(--indigo-900); }

/* ---------- Confirmation et suivi ---------- */
.confirm-head { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: .5rem; }
.confirm-head > .ico { width: 3rem; height: 3rem; padding: .7rem; border-radius: 50%; background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ok); margin-top: .2rem; }
.ref { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-bottom: .5rem; }
.ref-code { padding: .45rem .9rem; border-radius: var(--r-sm); background: var(--indigo-50); border: 1px solid var(--indigo-100); color: var(--indigo-900); font-size: 1.5rem; font-weight: 800; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.private-link { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.private-link p { margin-bottom: .6rem; }
.send-error { margin-top: 1rem; }
.btn[aria-busy="true"] { cursor: progress; }
.pay-kv { margin-bottom: 1rem; }
.pay-kv dd { display: flex; flex-wrap: wrap; gap: .25rem .6rem; align-items: center; }
.flow-list { margin: 0; padding-left: 1.3rem; display: grid; gap: .45rem; }
.preuve { display: grid; gap: 1rem; margin-top: 1.25rem; padding-top: 1.15rem; border-top: 1px solid var(--line); }
.preuve h3, .track-result .preuve h3 { margin: 0; font-family: var(--font-body); font-size: 1.0625rem; }
.preuve > .hint { margin: -.5rem 0 0; }
.preuve .field { margin: 0; }
.preuve .err { margin: 0; }
.timeline { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .6rem; }
.timeline li { display: grid; grid-template-columns: minmax(9rem, 12rem) 1fr; gap: .2rem 1rem; }
@media (max-width: 34rem) { .timeline li { grid-template-columns: minmax(0, 1fr); } }
.tl-date { color: var(--ink-3); font-size: .9375rem; }
.track-result h3 { font-family: var(--font-body); font-size: 1rem; margin: 1rem 0 .5rem; }
.track-result > p { margin-bottom: 1rem; }

/* ---------- Notifications ---------- */
.toasts { position: fixed; left: 0; right: 0; bottom: calc(6rem + env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: .5rem; pointer-events: none; z-index: 60; padding-inline: 1rem; }
.toast { display: flex; gap: .6rem; align-items: center; max-width: 30rem; padding: .7rem 1rem; background: var(--indigo-900); color: #fff; border-radius: 12px; box-shadow: var(--shadow-md); font-size: .9375rem; animation: reveal .22s var(--ease-out); }
.toast.err { background: var(--err); }
.toast.out { opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }

/* ---------- Pied de page ---------- */
.app-footer { border-top: 1px solid var(--line); background: var(--cream-2); padding: 1.25rem 1rem 2rem; text-align: center; color: var(--ink-2); font-size: .9375rem; }
.app-footer p { margin: 0 0 .35rem; }

/* ---------- Petits écrans ---------- */
@media (max-width: 52rem) {
  .steps { display: none; }
  .steps-compact { display: block; }
}
@media (max-width: 40rem) {
  .brand-sub { display: none; }
  .help-label { display: none; }
  .header-help { padding-inline: .8rem; }
  .shell { margin-top: 1.1rem; }
  .actions .btn { padding-inline: .95rem; gap: .45rem; }
  .actions .btn.primary { min-width: 0; flex: 1 1 auto; }
  .person-toggle { padding-inline: .9rem; }
  .person-body { padding-inline: .9rem; }
  .person-sum { padding-inline: .9rem; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------- Impression : récapitulatif PDF ---------- */
#print-sheet { display: none; }
@media print {
  @page { margin: 14mm; }
  body { background: #fff; }
  body.is-printing > :not(#print-sheet) { display: none !important; }
  body.is-printing #print-sheet { display: block !important; }
  .sheet { font: 10.5pt/1.45 var(--font-body); color: #000; }
  .sheet h1 { font: 700 16pt var(--font-display); color: var(--indigo-900); margin: 0 0 2pt; }
  .sheet h2 { font: 700 11.5pt var(--font-body); color: var(--indigo-800); margin: 0 0 4pt; padding-bottom: 2pt; border-bottom: 1pt solid #cfc3aa; }
  .sheet h3 { font: 700 10.5pt var(--font-body); margin: 8pt 0 3pt; }
  .sheet-head { display: flex; gap: 12pt; align-items: center; padding-bottom: 8pt; margin-bottom: 12pt; border-bottom: 2.5pt solid var(--indigo-600); }
  .sheet-head p { margin: 0; }
  .sheet-block { margin-bottom: 12pt; break-inside: avoid-page; }
  .sheet-person { break-inside: avoid; }
  .sheet-kv, .sheet-hist { width: 100%; border-collapse: collapse; }
  .sheet-kv th { width: 34%; text-align: left; font-weight: 600; color: #444; vertical-align: top; padding: 2pt 8pt 2pt 0; }
  .sheet-kv td { padding: 2pt 0; vertical-align: top; }
  .sheet-hist th, .sheet-hist td { text-align: left; padding: 3pt 6pt 3pt 0; border-bottom: .5pt solid #ddd; vertical-align: top; }
  .sheet-note { font-size: 9pt; color: #444; margin-top: 4pt; }
  .sheet-sig { max-height: 70pt; margin-top: 6pt; }
  .sheet-sig-text { font: italic 18pt "Segoe Script", "Brush Script MT", cursive; margin: 6pt 0 0; }
  .sheet-foot { margin-top: 14pt; padding-top: 6pt; border-top: .5pt solid #999; font-size: 8.5pt; color: #444; }
}