:root {
  --ink: #16251f;
  --muted: #5d6d65;
  --burgundy: #54172b;
  --burgundy-dark: #35101e;
  --gold: #c9aa63;
  --ivory-green: #084a35;
  --ivory-green-dark: #053426;
  --cover-gold: #d5b96f;
  --paper: #f3f0df;
  --paper-deep: #e6eadb;
  --blue-ink: #315d73;
  --green: #14774b;
  --line: #b9c9bd;
  --surface: #e4ece8;
  --white: #fff;
  --danger: #a23f36;
  --display: "Bricolage Grotesque", sans-serif;
  --body: "Instrument Sans", sans-serif;
  --mono: "Space Mono", monospace;
  --signature: "Caveat", cursive;
}

* { box-sizing: border-box; }
html { background: var(--surface); }
body { margin: 0; color: var(--ink); background: var(--surface); font-family: var(--body); line-height: 1.45; }
button, input, select { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.passport-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  padding: 0 max(20px, calc((100vw - 1220px) / 2));
  border-bottom: 1px solid #c5d2cc;
  background: rgba(255, 255, 255, .82);
}
.passport-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-family: var(--display); font-size: 1.16rem; font-weight: 700; text-decoration: none; }
.passport-brand img { width: 31px; height: 31px; }
.passport-product { color: var(--muted); font-family: var(--mono); font-size: .66rem; text-transform: uppercase; }

main { width: min(1220px, calc(100% - 40px)); margin: 0 auto; padding: 44px 0 72px; }
.eyebrow { margin: 0 0 7px; color: var(--green); font-family: var(--mono); font-size: .66rem; font-weight: 700; text-transform: uppercase; }
h1, h2, h3 { margin-top: 0; font-family: var(--display); letter-spacing: 0; }
h1 { margin-bottom: 0; font-size: 2.35rem; line-height: 1.05; }
h2 { margin-bottom: 0; font-size: 1.55rem; line-height: 1.12; }

/* Closed passport: private access */
.access-view { display: grid; grid-template-columns: minmax(280px, 390px) minmax(340px, 520px); justify-content: center; align-items: center; gap: 72px; min-height: calc(100vh - 184px); }
.passport-cover {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 360px);
  aspect-ratio: .72;
  margin-inline: auto;
  padding: 38px 34px 30px;
  overflow: hidden;
  border: 2px solid #1c6c51;
  border-radius: 7px 13px 13px 7px;
  color: var(--cover-gold);
  background: var(--ivory-green);
  box-shadow: -10px 11px 0 var(--ivory-green-dark), 0 24px 50px rgba(38, 35, 31, .24);
}
.passport-cover::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(213, 185, 111, .72); box-shadow: inset 0 0 0 5px rgba(213, 185, 111, .07); pointer-events: none; }
.passport-cover::after { content: ""; position: absolute; inset: 25px; opacity: .13; background: repeating-radial-gradient(ellipse at center, transparent 0 15px, var(--cover-gold) 16px 17px); pointer-events: none; }
.cover-flags, .cover-country, .cover-motto, .cover-title, .cover-emblem, .cover-destinations { position: relative; z-index: 1; }
.cover-flags { display: flex; gap: 7px; margin-bottom: 18px; }
.cover-flag { display: grid; grid-template-columns: repeat(3, 1fr); width: 42px; height: 5px; }
.flag-ivory i:nth-child(1) { background: #f77f24; }
.flag-ivory i:nth-child(2) { background: #f4f1df; }
.flag-ivory i:nth-child(3), .flag-senegal i:nth-child(1) { background: #159447; }
.flag-senegal i:nth-child(2) { background: #f2cf3a; }
.flag-senegal i:nth-child(3) { background: #d6313b; }
.passport-cover[data-country-theme="cote-ivoire"] .flag-senegal { display: none; }
.passport-cover[data-country-theme="senegal"] .flag-ivory { display: none; }
.passport-cover[data-country-theme="senegal"] { background: #07543a; }
.cover-country { font-family: var(--display); font-size: .95rem; font-weight: 700; text-transform: uppercase; }
.cover-motto { margin-top: 5px; font-family: var(--mono); font-size: .5rem; text-transform: uppercase; }
.cover-emblem { position: relative; display: grid; place-items: center; width: 104px; height: 104px; margin-top: 47px; border: 2px solid var(--cover-gold); border-radius: 50%; }
.cover-emblem::before { content: ""; width: 65px; height: 65px; background: var(--cover-gold); -webkit-mask: url("/logo/logo-terrenate-symbole.svg") center / contain no-repeat; mask: url("/logo/logo-terrenate-symbole.svg") center / contain no-repeat; }
.cover-emblem::after { content: "TRN"; position: absolute; bottom: -7px; padding: 0 7px; color: var(--cover-gold); background: var(--ivory-green); font-family: var(--mono); font-size: .5rem; font-weight: 700; }
.cover-emblem img { display: none; }
.cover-title { display: grid; justify-items: center; margin-top: 35px; text-transform: uppercase; }
.cover-title span { font-family: var(--display); font-size: 1.5rem; font-weight: 700; }
.cover-title strong { margin-top: 3px; font-family: var(--mono); font-size: .74rem; }
.cover-title small { margin-top: 9px; font-family: var(--mono); font-size: .48rem; }
.cover-destinations { margin-top: auto; padding-top: 13px; border-top: 1px solid rgba(213, 185, 111, .55); font-family: var(--mono); font-size: .55rem; text-transform: uppercase; }

.access-panel { max-width: 500px; }
.access-panel h1 { max-width: 450px; }
.access-intro { max-width: 470px; margin: 17px 0 30px; color: var(--muted); font-size: 1rem; }
.access-form { padding-top: 24px; border-top: 1px solid #98aaa0; }
.access-form label, .field > span { display: block; margin-bottom: 5px; color: var(--ink); font-size: .73rem; font-weight: 700; }
.access-form input { width: 100%; min-height: 50px; padding: 10px 13px; border: 1px solid #9fb2a8; border-radius: 5px; color: var(--ink); background: var(--white); }
.access-form button, .button-primary { min-height: 48px; padding: 0 18px; border: 1px solid var(--burgundy-dark); border-radius: 5px; color: #fff8e5; background: var(--burgundy); font-weight: 700; }
.access-form button { margin-top: 12px; border-color: var(--ivory-green-dark); background: var(--ivory-green); }
.access-form input:focus, .field input:focus, .field select:focus { outline: 3px solid rgba(49, 93, 115, .2); border-color: var(--blue-ink); }
.form-status { min-height: 21px; margin: 10px 0 0; color: var(--muted); font-size: .8rem; }
.form-status[data-state="error"] { color: var(--danger); }
.form-status[data-state="success"] { color: var(--green); }

.passport-loading { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 58vh; color: var(--muted); }
.loading-seal { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--green); border-radius: 50%; animation: seal-pulse 1s ease-in-out infinite alternate; }
.loading-seal img { width: 30px; height: 30px; }
@keyframes seal-pulse { to { transform: scale(.9); opacity: .55; } }

/* Open document */
.passport-app {
  --country-one: #f77f24;
  --country-two: #f2cf3a;
  --country-three: #159447;
  --country-cover: #084a35;
  --country-stamp: #8f5d20;
}
.passport-app[data-country-theme="cote-ivoire"] { --country-one:#f77f24; --country-two:#f4f1df; --country-three:#159447; --country-cover:#084a35; --country-stamp:#c45b19; }
.passport-app[data-country-theme="senegal"] { --country-one:#159447; --country-two:#f2cf3a; --country-three:#d6313b; --country-cover:#07543a; --country-stamp:#b62531; }
.passport-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 25px; }
.save-state { flex: 0 0 auto; padding: 7px 10px; border: 1px solid #96aaa0; border-radius: 3px; color: var(--muted); font-family: var(--mono); font-size: .61rem; text-transform: uppercase; }
.save-state.is-active { transform: rotate(-2deg); border: 2px solid var(--green); color: var(--green); font-weight: 700; }

.book-cover-edge { padding: 9px; border-radius: 8px; background: var(--country-cover); box-shadow: 0 22px 55px rgba(31, 46, 39, .2); transition: background-color .2s ease; }
.book-country-stripe { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; height: 7px; margin-bottom: 8px; overflow: hidden; border-radius: 2px; }
.book-country-stripe i:nth-child(1) { background: var(--country-one); }
.book-country-stripe i:nth-child(2) { background: var(--country-two); }
.book-country-stripe i:nth-child(3) { background: var(--country-three); }
.passport-book { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
.passport-page {
  position: relative;
  min-width: 0;
  padding: 38px 40px 32px;
  overflow: hidden;
  background-color: var(--paper);
  background-image: repeating-radial-gradient(circle at 14% 20%, rgba(49, 93, 115, .055) 0 1px, transparent 1px 10px);
}
.identity-page { display: flex; flex-direction: column; border-radius: 4px 0 0 4px; border-right: 1px solid #acb9aa; box-shadow: inset -16px 0 24px rgba(46, 60, 51, .08); }
.project-page { border-radius: 0 4px 4px 0; box-shadow: inset 16px 0 24px rgba(46, 60, 51, .06); }
.page-security-mark { position: absolute; right: -8px; top: 82px; color: rgba(49, 93, 115, .055); font-family: var(--mono); font-size: 8rem; font-weight: 700; line-height: 1; pointer-events: none; }
.page-kicker { position: relative; z-index: 1; display: flex; justify-content: space-between; padding-bottom: 10px; border-bottom: 2px solid var(--blue-ink); color: var(--blue-ink); font-family: var(--mono); font-size: .61rem; font-weight: 700; text-transform: uppercase; }
.passport-page h2 { position: relative; z-index: 1; margin-top: 16px; color: var(--burgundy); }
.country-edition { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; margin-top: 10px; color: var(--muted); font-family: var(--mono); font-size: .52rem; text-transform: uppercase; }
.country-band { display: grid; grid-template-columns: repeat(3, 1fr); width: 51px; height: 6px; border: 1px solid rgba(22, 37, 31, .18); }
.country-band i:nth-child(1) { background: var(--country-one); }
.country-band i:nth-child(2) { background: var(--country-two); }
.country-band i:nth-child(3) { background: var(--country-three); }
.page-intro { position: relative; z-index: 1; max-width: 560px; margin: 7px 0 23px; color: var(--muted); font-size: .86rem; }

.identity-block { position: relative; z-index: 1; display: grid; grid-template-columns: 124px 1fr; align-items: end; gap: 20px; margin-top: 30px; }
.identity-photo { position: relative; display: grid; place-items: center; width: 124px; aspect-ratio: .78; overflow: hidden; border: 1px solid #9db0a7; background: #dce8dd; }
.identity-photo::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(49, 93, 115, .25); }
.identity-photo img { width: 80px; height: 80px; opacity: .18; }
.identity-photo span { position: absolute; font-family: var(--display); font-size: 3.4rem; font-weight: 700; color: var(--blue-ink); }
.identity-primary { display: grid; gap: 2px; padding-bottom: 7px; }
.data-label, .passport-data dt { color: var(--blue-ink); font-family: var(--mono); font-size: .54rem; font-weight: 700; text-transform: uppercase; }
.identity-primary strong { overflow-wrap: anywhere; font-family: var(--display); font-size: 1.9rem; line-height: 1.05; }
.holder-type { margin-top: 5px; color: var(--muted); font-size: .75rem; }

.passport-data { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; margin: 30px 0 0; }
.passport-data div { min-width: 0; padding-bottom: 8px; border-bottom: 1px solid rgba(49, 93, 115, .28); }
.passport-data .data-wide { grid-column: 1 / -1; }
.passport-data dd { margin: 4px 0 0; overflow-wrap: anywhere; font-size: .88rem; font-weight: 700; }
.passport-validation { position: relative; z-index: 1; display: flex; align-items: center; justify-content: flex-end; gap: 18px; margin: 45px 8px 30px 0; }
.identity-stamp { display: grid; justify-items: center; padding: 12px 19px; transform: rotate(-5deg); border: 3px double var(--country-stamp); border-radius: 50%; color: var(--country-stamp); font-family: var(--mono); text-transform: uppercase; }
.identity-stamp span { font-size: .52rem; }
.identity-stamp strong { font-size: .65rem; }
.authority-signature { display: grid; min-width: 150px; padding: 0 5px 4px; transform: rotate(-2deg); border-bottom: 1px solid var(--country-stamp); color: var(--country-stamp); text-align: center; }
.authority-signature span { font-family: var(--mono); font-size: .46rem; text-transform: uppercase; }
.authority-signature strong { font-family: var(--signature); font-size: 1.18rem; line-height: 1.05; }
.authority-signature small { font-family: var(--mono); font-size: .48rem; text-transform: uppercase; }
.machine-zone { position: relative; z-index: 1; display: grid; gap: 2px; margin-top: auto; padding-top: 17px; border-top: 1px solid #9fb1a8; overflow: hidden; color: #253f34; font-family: var(--mono); font-size: .65rem; line-height: 1.25; white-space: nowrap; }

form, fieldset { position: relative; z-index: 1; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
fieldset + fieldset, .advanced-criteria + fieldset { margin-top: 27px; padding-top: 24px; border-top: 1px dashed #9daea3; }
legend { width: 100%; margin-bottom: 14px; color: var(--burgundy); font-family: var(--mono); font-size: .64rem; font-weight: 700; text-transform: uppercase; }
.field-grid, .conditional-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 20px; }
.field-wide { grid-column: 1 / -1; }
.field input, .field select { width: 100%; min-height: 39px; padding: 7px 4px; border: 0; border-bottom: 1px solid #869c91; border-radius: 0; color: var(--ink); background: rgba(255, 255, 255, .28); }
.field input::placeholder { color: #849188; }

.advanced-criteria { margin-top: 20px; border-block: 1px dashed #9daea3; }
.advanced-criteria summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 0; color: var(--blue-ink); font-size: .75rem; font-weight: 700; cursor: pointer; }
.advanced-criteria summary span { font-family: var(--mono); font-size: .52rem; text-transform: uppercase; }
.requirements { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 15px; padding: 1px 0 15px; }
.requirements label, .inline-check, .consent-check { display: flex; align-items: flex-start; gap: 8px; color: var(--ink); font-size: .75rem; }
input[type="checkbox"], input[type="radio"] { flex: 0 0 auto; width: 17px; height: 17px; accent-color: var(--burgundy); }

.stamp-choices { display: grid; gap: 8px; }
.association-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mode-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stamp-choices label { min-width: 0; cursor: pointer; }
.stamp-choices input { position: absolute; opacity: 0; pointer-events: none; }
.stamp-choices span { display: flex; flex-direction: column; justify-content: center; min-height: 55px; padding: 9px 10px; border: 1px solid #9aada3; border-radius: 3px; color: var(--muted); font-size: .68rem; line-height: 1.25; text-align: center; }
.stamp-choices strong { display: block; color: inherit; font-size: .76rem; }
.stamp-choices input:checked + span { transform: rotate(-1deg); border: 2px solid var(--blue-ink); color: var(--blue-ink); background: rgba(49, 93, 115, .06); font-weight: 700; }
.stamp-choices input:focus-visible + span { outline: 3px solid rgba(49, 93, 115, .2); }
.conditional-fields { margin-top: 15px; }
.conditional-fields .inline-check { align-self: center; padding-top: 8px; }
.delivery-fieldset .inline-check { margin-top: 12px; }
.consent-check { margin-top: 24px; padding: 14px 0; border-block: 1px solid #9daea3; color: var(--muted); }
.form-actions { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.form-actions .form-status { flex: 1; margin: 0; }

/* Stamped result page */
.passport-results { position: relative; width: min(850px, 100%); margin: 42px auto 0; padding: 36px 42px 40px; overflow: hidden; border: 1px solid #a7b8ae; background-color: var(--paper);
  background-image: repeating-radial-gradient(circle at 78% 20%, rgba(49, 93, 115, .05) 0 1px, transparent 1px 11px); box-shadow: 0 15px 38px rgba(31, 46, 39, .12); }
.passport-results::before { content: "TRN"; position: absolute; right: 14px; bottom: -30px; color: rgba(49, 93, 115, .05); font-family: var(--mono); font-size: 9rem; font-weight: 700; }
.results-heading { position: relative; z-index: 1; display: flex; align-items: start; justify-content: space-between; gap: 30px; padding-bottom: 22px; border-bottom: 2px solid var(--blue-ink); }
.approval-stamp { flex: 0 0 auto; padding: 10px 16px; transform: rotate(5deg); border: 3px double var(--green); border-radius: 50%; color: var(--green); font-family: var(--mono); font-size: .52rem; text-align: center; text-transform: uppercase; }
.approval-stamp strong { font-size: .65rem; }
.result-metrics { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 26px; border: 1px solid #9fb1a8; background: #9fb1a8; }
.metric { min-height: 88px; padding: 14px; background: rgba(255, 255, 255, .42); }
.metric strong { display: block; color: var(--burgundy); font-family: var(--display); font-size: 1.8rem; }
.metric span { color: var(--muted); font-size: .7rem; }
.matched-offers { position: relative; z-index: 1; display: grid; gap: 0; margin-top: 24px; }
.matched-offer { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 17px 0; border-top: 1px solid #9fb1a8; }
.matched-offer h3 { margin: 0 0 3px; font-size: 1rem; }
.matched-offer p { margin: 0; color: var(--muted); font-size: .76rem; }
.matched-offer a { display: inline-block; margin-top: 6px; color: var(--blue-ink); font-size: .72rem; font-weight: 700; }
.matched-score { align-self: start; padding: 7px 9px; transform: rotate(-2deg); border: 2px solid var(--green); color: var(--green); font-family: var(--mono); font-size: .59rem; font-weight: 700; }
.matched-score.is-near { border-color: var(--burgundy); color: var(--burgundy); }
.association-results { position: relative; z-index: 1; margin-top: 30px; padding-top: 24px; border-top: 2px solid var(--burgundy); }
.association-results h3 { margin: 0 0 12px; font-size: 1rem; }
.association-item { display: grid; grid-template-columns: 1fr auto; gap: 18px; padding: 13px 0; border-top: 1px solid #aab9b0; }
.association-item p { margin: 2px 0 0; color: var(--muted); font-size: .74rem; }
.association-item a { align-self: center; color: var(--blue-ink); font-size: .75rem; font-weight: 700; }

.passport-footer-actions { display: flex; justify-content: space-between; gap: 20px; margin-top: 28px; padding-top: 20px; border-top: 1px solid #b6c5bd; font-size: .78rem; }
.passport-footer-actions button { padding: 0; border: 0; color: var(--danger); background: transparent; text-decoration: underline; }
.passport-footer-actions a { color: var(--muted); }

dialog { width: min(500px, calc(100% - 32px)); padding: 26px; border: 1px solid var(--burgundy-dark); border-radius: 6px; color: var(--ink); background: var(--white); }
dialog::backdrop { background: rgba(22, 37, 31, .72); }
dialog h2 { margin-bottom: 8px; font-size: 1.45rem; }
dialog p { color: var(--muted); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 23px; }
.dialog-actions button { min-height: 42px; padding: 0 14px; border: 1px solid var(--line); border-radius: 4px; background: var(--white); }
.dialog-actions .danger-button { border-color: var(--danger); color: white; background: var(--danger); }

@media (max-width: 920px) {
  .access-view { gap: 42px; }
  .passport-book { grid-template-columns: 1fr; }
  .identity-page { min-height: 720px; border-right: 0; border-bottom: 1px solid #acb9aa; border-radius: 4px 4px 0 0; box-shadow: inset 0 -16px 24px rgba(46, 60, 51, .06); }
  .project-page { border-radius: 0 0 4px 4px; box-shadow: inset 0 16px 24px rgba(46, 60, 51, .05); }
}

@media (max-width: 720px) {
  main { width: min(100% - 24px, 1220px); padding: 26px 0 54px; }
  h1 { font-size: 1.85rem; }
  .passport-product { display: none; }
  .access-view { grid-template-columns: 1fr; gap: 38px; min-height: 0; }
  .passport-cover { width: min(76vw, 300px); }
  .cover-emblem { margin-top: 38px; }
  .access-panel { margin-inline: auto; }
  .passport-heading { align-items: flex-start; flex-direction: column; margin-bottom: 18px; }
  .book-cover-edge { padding: 6px; }
  .passport-page { padding: 28px 22px 26px; }
  .identity-page { min-height: 680px; }
  .identity-block { grid-template-columns: 100px 1fr; gap: 15px; }
  .identity-photo { width: 100px; }
  .identity-primary strong { font-size: 1.5rem; }
  .passport-validation { align-items: flex-end; flex-direction: column; }
  .field-grid, .conditional-fields { grid-template-columns: 1fr; }
  .field-wide { grid-column: auto; }
  .association-choices { grid-template-columns: 1fr; }
  .requirements { grid-template-columns: 1fr; }
  .form-actions { align-items: stretch; flex-direction: column; }
  .form-actions .form-status { width: 100%; }
  .passport-results { padding: 28px 22px 30px; }
  .results-heading { align-items: flex-start; flex-direction: column; }
  .approval-stamp { align-self: flex-end; }
  .result-metrics { grid-template-columns: 1fr; }
  .metric { min-height: 70px; }
  .matched-offer, .association-item { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .mode-choices { grid-template-columns: 1fr; }
  .passport-data { grid-template-columns: 1fr; }
  .passport-data .data-wide { grid-column: auto; }
  .identity-page { min-height: 790px; }
}

@media (prefers-reduced-motion: reduce) {
  .loading-seal { animation: none; }
}