/* ==========================================================================
   Pages publiques — candidature, confirmation, suivi, vérification.
   Variables du design system uniquement (le thème sombre suit automatiquement) ;
   seules exceptions : blanc et ambre sur la carte marine, toujours sombre.
   ========================================================================== */
.ap [hidden], .tr [hidden], .ok [hidden], .vf [hidden] { display: none !important; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* --- En-tête de page (carte marine) --- */
.pb-hero { display: grid; gap: 12px; margin-bottom: 20px; }
.pb-hero h1 { margin: 4px 0 2px; font-size: clamp(1.9rem, 1.2rem + 3vw, 3.1rem); line-height: 1.04; letter-spacing: -.025em; }
.pb-hero h1 em { color: #F6C06A; font-weight: 500; }
.pb-hero p { margin: 0; max-width: 64ch; line-height: 1.55; }
.pb-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.pb-facts li { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 4px 12px; border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .08); color: #fff; font-size: var(--fs-sm); font-weight: 500; }
.pb-facts .i { width: 15px; height: 15px; color: #F6C06A; }

/* ==========================================================================
   Candidature
   ========================================================================== */
.ap-bar { position: sticky; top: 76px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; margin-bottom: var(--gap); padding: 8px 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--sh-1); }
.ap-steps { display: flex; align-items: center; gap: 2px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ap-steps a { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 6px; border-radius: var(--r-pill); color: var(--muted); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; text-decoration: none; transition: background var(--t) var(--ease), color var(--t) var(--ease); }
.ap-steps a:hover { background: var(--bg-sunk); color: var(--ink); text-decoration: none; }
.ap-steps .n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-sunk); color: var(--muted); font-size: var(--fs-xs); font-weight: 700; transition: background var(--t) var(--ease), color var(--t) var(--ease); }
.ap-steps .n .i { display: none; width: 14px; height: 14px; }
.ap-steps a.is-done .n { background: var(--success-soft-2); color: var(--success); }
.ap-steps a.is-done .n .num { display: none; }
.ap-steps a.is-done .n .i { display: block; }
.ap-steps a.is-active { background: var(--primary-soft); color: var(--primary); }
.ap-steps a.is-active .n { background: var(--primary); color: var(--on-primary); }
.ap-progress { display: flex; align-items: center; gap: 10px; flex: 1 1 160px; max-width: 250px; margin-left: auto; padding-right: 6px; }
.ap-meter { flex: 1; height: 8px; overflow: hidden; border-radius: var(--r-pill); background: var(--bg-sunk); }
.ap-meter i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--primary); transition: width .35s var(--ease); }
.ap-meter.is-full i { background: var(--success); }
.ap-count { flex: none; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 720px) {
  .ap-steps a:not(.is-active) { padding: 0 6px; }
  .ap-steps a:not(.is-active) .t { display: none; }
  .ap-progress { flex-basis: 100%; max-width: none; margin-left: 0; padding: 0 6px 4px; }
}

.ap-layout { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); grid-template-areas: "prep" "main" "help"; }
.ap-side { display: contents; }
.ap-prep { grid-area: prep; }
.ap-help { grid-area: help; }
.ap-main { grid-area: main; min-width: 0; }
@media (min-width: 1024px) {
  .ap-layout { grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "main side"; align-items: start; }
  .ap-side { display: grid; gap: var(--gap); grid-area: side; align-self: start; position: sticky; top: 156px; }
  .ap-prep, .ap-help { grid-area: auto; }
}
.ap-layout .card { margin-bottom: 0; }

.ap-prep > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 20px; cursor: pointer; list-style: none; font-weight: 600; color: var(--ink); }
.ap-prep > summary::-webkit-details-marker { display: none; }
.ap-prep > summary .i { color: var(--muted); transition: transform var(--t) var(--ease); }
.ap-prep[open] > summary { border-bottom: 1px solid var(--line-soft); }
.ap-prep[open] > summary .i { transform: rotate(180deg); }
.ap-prep .ap-prep-body { display: grid; gap: 14px; padding: 16px 20px 18px; }
.ap-prep ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ap-prep li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: start; gap: 10px; font-size: var(--fs-sm); line-height: 1.4; color: var(--text); }
.ap-prep li .i { margin-top: 1px; color: var(--primary); }
.ap-prep li em { font-style: normal; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.ap-prep li.is-req em { color: var(--accent-ink); }
.ap-prep .tip { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--bg-sunk); color: var(--muted); font-size: var(--fs-xs); line-height: 1.55; }
.ap-help .card-body { display: grid; gap: 12px; }
.ap-help a.row { display: flex; align-items: center; gap: 12px; color: var(--ink); font-weight: 500; font-size: var(--fs-sm); text-decoration: none; overflow-wrap: anywhere; }
.ap-help a.row:hover { color: var(--primary); text-decoration: none; }
.ap-help a.row .ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }

.ap-sec { margin-bottom: var(--gap); scroll-margin-top: 150px; }
.ap-main > .ap-sec:last-child { margin-bottom: 0; }
@media (max-width: 720px) { .ap-sec { scroll-margin-top: 188px; } }
.ap-sec-head { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--line-soft); }
.ap-sec-head .n { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-size: var(--fs-sm); font-weight: 700; transition: background var(--t) var(--ease), color var(--t) var(--ease); }
.ap-sec-head .n .i { display: none; width: 18px; height: 18px; }
.ap-sec.is-done .ap-sec-head .n { background: var(--success-soft-2); color: var(--success); }
.ap-sec.is-done .ap-sec-head .n .num { display: none; }
.ap-sec.is-done .ap-sec-head .n .i { display: block; }
.ap-sec-head h2 { margin: 0; font-family: var(--font-ui); font-size: var(--fs-lg); line-height: 1.25; letter-spacing: -.01em; }
.ap-sec-head p { margin: 3px 0 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; }
.ap-body { display: grid; gap: 20px; padding: 20px; }

.ap-camp { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.ap-camp .ico { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.ap-camp .txt { flex: 1 1 160px; min-width: 0; line-height: 1.35; }
.ap-camp b { display: block; color: var(--ink); font-weight: 600; }
.ap-camp small { color: var(--muted); font-size: var(--fs-sm); }
.ap-camp .badge { flex: none; }
@media (max-width: 520px) { .ap-camp { flex-wrap: wrap; } .ap-camp .badge { margin-left: 56px; } }
.ap-note { display: flex; gap: 12px; padding: 14px 16px; border: 1px solid var(--primary-soft-2); border-radius: 14px; background: var(--primary-soft); }
.ap-note .i { flex: none; margin-top: 2px; color: var(--primary); }
.ap-note b { display: block; margin-bottom: 2px; color: var(--ink); }
.ap-note p { margin: 0; color: var(--text); font-size: var(--fs-sm); line-height: 1.6; white-space: pre-line; }

.ap-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.ap-field legend { margin-bottom: 8px; padding: 0; color: var(--ink); font-size: var(--fs-sm); font-weight: 600; }
.ap-field legend .req { margin-left: 2px; color: var(--danger); }
.ap .err { color: var(--danger); font-size: var(--fs-sm); font-weight: 500; line-height: 1.4; }
.ap-field .err { margin-top: 6px; }
.ap .check .req { color: var(--danger); }

.ap-prog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 640px) { .ap-prog-grid { grid-template-columns: 1fr; } }
.ap-prog { position: relative; display: block; margin: 0; cursor: pointer; }
.ap-prog input[type=radio] { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; border: 0; border-radius: 14px; background: transparent; opacity: 0; cursor: pointer; }
.ap-prog .pg-box { display: flex; align-items: flex-start; gap: 12px; height: 100%; padding: 14px; border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--surface); transition: border-color var(--t) var(--ease), background var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.ap-prog:hover .pg-box { border-color: var(--subtle); }
.ap-prog .pg-dot { flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface); transition: border-color var(--t) var(--ease), background var(--t) var(--ease); }
.ap-prog .pg-body { display: grid; gap: 2px; min-width: 0; line-height: 1.35; }
.ap-prog .pg-body b { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.ap-prog .pg-code { color: var(--primary); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em; }
.ap-prog .pg-meta { color: var(--muted); font-size: var(--fs-xs); }
.ap-prog input:checked + .pg-box { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 3px var(--primary-soft); }
.ap-prog input:checked + .pg-box .pg-dot { border-color: var(--primary); background: radial-gradient(circle, var(--primary) 0 4.5px, transparent 5.5px), var(--surface); }
.ap-prog input:focus-visible + .pg-box { box-shadow: var(--ring); border-color: var(--primary); }

.ap-choice { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); }
.ap-choice label { position: relative; flex: 1; margin: 0; }
.ap-choice input[type=radio] { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; border: 0; border-radius: 9px; background: transparent; opacity: 0; cursor: pointer; }
.ap-choice span { display: grid; place-items: center; min-height: 36px; border-radius: 9px; color: var(--muted); font-size: var(--fs-sm); font-weight: 600; transition: background var(--t) var(--ease), color var(--t) var(--ease); }
.ap-choice label:hover span { background: var(--bg-sunk); color: var(--ink); }
.ap-choice input:checked + span { background: var(--primary); color: var(--on-primary); }
.ap-choice input:focus-visible + span { box-shadow: var(--ring); }

.ap-docs { display: grid; gap: 10px; }
.ap-doc { position: relative; }
.ap-doc input[type=file] { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 14px; background: transparent; opacity: 0; cursor: pointer; }
.ap-doc-box { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1.5px dashed var(--line-strong); border-radius: 14px; background: var(--surface); transition: border-color var(--t) var(--ease), background var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.ap-doc:hover .ap-doc-box, .ap-doc.is-drag .ap-doc-box { border-color: var(--primary); background: var(--primary-soft); }
.ap-doc input:focus-visible + .ap-doc-box { border-color: var(--primary); box-shadow: var(--ring); }
.ap-doc-box .ico { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.ap-doc-box .txt { flex: 1; min-width: 0; line-height: 1.35; }
.ap-doc-box .txt b { display: block; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.ap-doc-box .txt small { display: block; color: var(--muted); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.ap-doc-box .act { flex: none; display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--primary); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.ap-doc-clear { position: relative; z-index: 2; flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--muted); cursor: pointer; }
.ap-doc-clear:hover { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.ap-doc.has-file .ap-doc-box { border-style: solid; border-color: var(--success-soft-2); background: var(--success-soft); }
.ap-doc.has-file .ico { background: var(--success-soft-2); color: var(--success); }
.ap-doc.has-error .ap-doc-box { border-style: solid; border-color: var(--danger); background: var(--danger-soft); }
.ap-doc.has-error .ico { background: var(--danger-soft-2); color: var(--danger); }
.ap-doc.needs .ap-doc-box { border-color: var(--accent); background: var(--accent-soft); }
.ap-doc.needs .ico { background: var(--accent-soft-2); color: var(--accent-ink); }
.ap-doc .err { margin-top: 6px; padding-left: 4px; color: var(--danger); font-size: var(--fs-sm); font-weight: 500; line-height: 1.4; }
@media (max-width: 520px) { .ap-doc-box .act { display: none; } .ap-doc-box { padding: 12px; gap: 12px; } }

.ap-foot { display: grid; gap: 16px; padding: 18px 20px 20px; border-top: 1px solid var(--line-soft); background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.ap-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.ap-submit .btn-lg { min-width: 240px; justify-content: center; }
.ap-sending { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; }
@media (max-width: 520px) { .ap-submit .btn { flex: 1 1 100%; } }

.ap-closed { display: grid; gap: var(--gap); }
@media (min-width: 720px) { .ap-closed { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ap-closed .card { margin-bottom: 0; }
.ap-closed .card-body { display: grid; gap: 12px; align-content: start; }
.ap-closed h2 { margin: 0; font-family: var(--font-ui); font-size: var(--fs-lg); }
.ap-closed p { margin: 0; color: var(--muted); line-height: 1.55; }

/* ==========================================================================
   Confirmation
   ========================================================================== */
.ok-hero { justify-items: center; text-align: center; padding-block: clamp(28px, 5vw, 44px); }
.ok-hero p { margin-inline: auto; }
.ok-check { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .13); color: #fff; box-shadow: 0 0 0 8px rgba(255, 255, 255, .07); animation: ok-pop .7s var(--ease) both; }
.ok-check .i { width: 38px; height: 38px; stroke-width: 1.7; }
@keyframes ok-pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .ok-check { animation: none; } }
.ok-ids { margin-top: var(--gap); }
.ok-id { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 18px 20px; border-bottom: 1px dashed var(--line-strong); }
.ok-id .lbl { grid-column: 1 / -1; color: var(--muted); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ok-id b { color: var(--ink); font-size: clamp(1.25rem, 1rem + 1.6vw, 1.75rem); font-weight: 600; letter-spacing: .02em; overflow-wrap: anywhere; }
.ok-dl { padding: 18px 20px; }
.ok-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 20px 14px; }
.ok-actions .btn { flex: 1 1 240px; justify-content: center; min-width: 0; height: auto; min-height: 48px; padding-block: 10px; line-height: 1.25; text-align: center; white-space: normal; }
.ok-actions .btn:first-child { flex: 2 1 340px; }
.ok-note { margin: 0; padding: 0 20px 20px; }
.ok-next { margin-top: var(--gap); }
.ok-steps { margin: 0; padding: 4px 20px 16px; list-style: none; counter-reset: s; }
.ok-steps li { position: relative; padding: 14px 0 14px 46px; border-bottom: 1px solid var(--line-soft); counter-increment: s; }
.ok-steps li:last-child { border-bottom: 0; }
.ok-steps li::before { content: counter(s); position: absolute; left: 0; top: 14px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-size: var(--fs-sm); font-weight: 700; }
.ok-steps b { display: block; margin-bottom: 2px; color: var(--ink); }
.ok-steps span { color: var(--muted); font-size: var(--fs-sm); line-height: 1.55; }
.ok-print { margin: var(--gap) 0 0; text-align: center; }
@media print {
  .pub-top, .pub-foot, .skip-link, .ok-actions, .ok-print, .ok-next, .ok-id .btn { display: none !important; }
  .public { padding: 0; }
  .ok-hero { color: #000; background: none !important; border: 1px solid #999; }
  .ok-hero::before, .ok-check { display: none; }
  .ok-hero h1, .ok-hero h1 em, .ok-hero p, .ok-hero .eyebrow { color: #000 !important; }
  .ok-ids { box-shadow: none; }
}

/* ==========================================================================
   Suivi
   ========================================================================== */
.tr-start { display: grid; gap: var(--gap); }
@media (min-width: 900px) { .tr-start { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.tr-start .card, .tr-layout .card, .tr-result > .card { margin-bottom: 0; }
.tr-form { display: grid; gap: 16px; padding: 20px; }
.tr-how { margin: 0; padding: 4px 20px 16px; list-style: none; counter-reset: s; }
.tr-how li { position: relative; padding: 13px 0 13px 44px; border-bottom: 1px solid var(--line-soft); counter-increment: s; font-size: var(--fs-sm); line-height: 1.55; color: var(--muted); }
.tr-how li:last-child { border-bottom: 0; }
.tr-how li::before { content: counter(s); position: absolute; left: 0; top: 12px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-weight: 700; font-size: var(--fs-sm); }
.tr-how b { display: block; color: var(--ink); }

.tr-result { display: grid; gap: var(--gap); }
.tr-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; padding: 20px; scroll-margin-top: 92px; }
.tr-head .who { display: flex; align-items: center; flex: 1 1 260px; gap: 14px; min-width: 0; }
.tr-head h2 { margin: 0; font-family: var(--font-display); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); line-height: 1.15; overflow-wrap: anywhere; }
.tr-head small { display: block; margin-top: 3px; color: var(--muted); font-size: var(--fs-sm); }
.tr-head .badge { font-size: var(--fs-sm); }

.tr-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 24px 16px 22px; list-style: none; }
.tr-steps li { position: relative; display: grid; justify-items: center; gap: 8px; padding: 0 6px; text-align: center; }
.tr-steps li::before { content: ""; position: absolute; top: 18px; right: 50%; width: 100%; height: 3px; background: var(--line); }
.tr-steps li:first-child::before { display: none; }
.tr-steps li.is-done::before, .tr-steps li.is-current::before, .tr-steps li.is-warn::before, .tr-steps li.is-bad::before { background: var(--success); }
.tr-steps .dot { position: relative; z-index: 1; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line-strong); background: var(--surface); color: var(--muted); font-size: var(--fs-sm); font-weight: 700; }
.tr-steps .dot .i { width: 18px; height: 18px; }
.tr-steps .is-done .dot { border-color: var(--success); background: var(--success); color: var(--surface); }
.tr-steps .is-current .dot { border-color: var(--primary); background: var(--primary); color: var(--on-primary); box-shadow: 0 0 0 5px var(--primary-soft); }
.tr-steps .is-warn .dot { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); box-shadow: 0 0 0 5px var(--accent-soft); }
.tr-steps .is-bad .dot { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); box-shadow: 0 0 0 5px var(--danger-soft); }
.tr-steps .t { color: var(--ink); font-size: var(--fs-sm); font-weight: 600; line-height: 1.25; }
.tr-steps .s { color: var(--muted); font-size: var(--fs-xs); line-height: 1.35; }
.tr-steps .is-todo .t, .tr-steps .is-off .t { color: var(--muted); font-weight: 500; }
@media (max-width: 640px) {
  .tr-steps { grid-template-columns: 1fr; padding: 20px; }
  .tr-steps li { grid-template-columns: 38px minmax(0, 1fr); align-items: center; justify-items: start; gap: 0 14px; padding: 0 0 20px; text-align: left; }
  .tr-steps li:last-child { padding-bottom: 0; }
  .tr-steps li::before { display: none; }
  .tr-steps li:not(:last-child)::after { content: ""; position: absolute; left: 18px; top: 38px; bottom: 0; width: 3px; background: var(--line); }
  .tr-steps li.is-done:not(:last-child)::after { background: var(--success); }
  .tr-steps .dot { grid-row: 1 / span 2; }
}
.tr-state { display: flex; align-items: flex-start; gap: 12px; margin: 0 20px 20px; padding: 14px 16px; border-radius: 14px; background: var(--primary-soft); color: var(--text); font-size: var(--fs-sm); line-height: 1.6; }
.tr-state .i { flex: none; margin-top: 2px; color: var(--primary); }
.tr-state.is-ok { background: var(--success-soft); }
.tr-state.is-ok .i { color: var(--success); }
.tr-state.is-warn { background: var(--accent-soft); }
.tr-state.is-warn .i { color: var(--accent-ink); }
.tr-state.is-bad { background: var(--danger-soft); }
.tr-state.is-bad .i { color: var(--danger); }

.tr-layout { display: grid; gap: var(--gap); }
@media (min-width: 1024px) { .tr-layout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }
.tr-main, .tr-aside { display: grid; gap: var(--gap); min-width: 0; align-content: start; }
.tr-comp { border-color: var(--accent-soft-2); box-shadow: var(--sh-1), 0 0 0 3px var(--accent-soft); }
.tr-ask { display: flex; gap: 12px; margin: 0 0 18px; padding: 14px 16px; border-radius: 14px; background: var(--accent-soft); color: var(--text); }
.tr-ask .i { flex: none; margin-top: 2px; color: var(--accent-ink); }
.tr-ask small { display: block; margin-bottom: 2px; color: var(--accent-ink); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.tr-ask p { margin: 0; line-height: 1.55; }
.tr-send { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 18px; }
.tr-send small { color: var(--muted); font-size: var(--fs-xs); }
.tr-doc { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--line-soft); }
.tr-doc:last-child { border-bottom: 0; }
.tr-doc .ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.tr-doc .what { flex: 1; min-width: 0; line-height: 1.35; }
.tr-doc .what b { display: block; color: var(--ink); font-weight: 600; }
.tr-doc .what small { display: block; color: var(--muted); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.tr-doc .what .why { margin-top: 2px; color: var(--danger); font-size: var(--fs-xs); }
.tr-doc .badge { flex: none; }
.tr-history { padding: 20px; }
.tr-lookup > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 20px; cursor: pointer; list-style: none; font-weight: 600; color: var(--ink); }
.tr-lookup > summary::-webkit-details-marker { display: none; }
.tr-lookup > summary .i { color: var(--muted); transition: transform var(--t) var(--ease); }
.tr-lookup[open] > summary { border-bottom: 1px solid var(--line-soft); }
.tr-lookup[open] > summary .i { transform: rotate(180deg); }
.tr-aside .card-body { display: grid; gap: 12px; }
.tr .empty { padding: 28px 16px; }

/* ==========================================================================
   Vérification d'un document
   ========================================================================== */
.vf { display: grid; gap: var(--gap); }
.vf .card { margin-bottom: 0; }
.vf-panel { --vf: var(--success); --vf-soft: var(--success-soft); --vf-soft-2: var(--success-soft-2); display: flex; align-items: center; gap: 20px; padding: clamp(20px, 4vw, 32px); border: 1px solid var(--vf-soft-2); border-radius: 22px; background: linear-gradient(160deg, var(--vf-soft), var(--surface) 72%); box-shadow: var(--sh-1); }
.vf-panel.is-expired { --vf: var(--accent-ink); --vf-soft: var(--accent-soft); --vf-soft-2: var(--accent-soft-2); }
.vf-panel.is-cancelled, .vf-panel.is-unknown { --vf: var(--danger); --vf-soft: var(--danger-soft); --vf-soft-2: var(--danger-soft-2); }
.vf-ico { flex: none; width: 76px; height: 76px; border-radius: 24px; display: grid; place-items: center; background: var(--vf-soft-2); color: var(--vf); }
.vf-ico .i { width: 40px; height: 40px; stroke-width: 1.6; }
.vf-panel .eyebrow { color: var(--vf); }
.vf-panel h1 { margin: 4px 0 6px; font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); line-height: 1.1; letter-spacing: -.02em; }
.vf-panel p { margin: 0; color: var(--text); line-height: 1.55; }
@media (max-width: 560px) { .vf-panel { flex-direction: column; align-items: flex-start; } }
.vf-ref { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.vf-note { display: flex; gap: 12px; align-items: flex-start; margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; }
.vf-note .i { flex: none; margin-top: 2px; color: var(--primary); }
.vf-help { display: grid; gap: 10px; padding: 18px 20px; }
.vf-help h2 { margin: 0; font-family: var(--font-ui); font-size: var(--fs-md); }
.vf-help p { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.55; }