:root {
  --night: #070d20;
  --navy: #10274b;
  --teal: #087f84;
  --aqua: #59c5c8;
  --yellow: #ffeb17;
  --orange: #f47b22;
  --violet: #8178e8;
  --paper: #f7f8f4;
  --white: #fff;
  --ink: #0d1b32;
  --muted: #687184;
  --line: #d6dbe4;
  --danger: #a72c3c;
  --success: #087253;
  --display: "Arial Narrow", "Roboto Condensed", "Aptos Narrow", Arial, sans-serif;
  --body: Montserrat, Aptos, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: var(--night);
  font: 16px/1.55 var(--body);
}

* { box-sizing: border-box; }
html { max-width: 100%; overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 7rem; }
body { margin: 0; width: 100%; min-width: 320px; max-width: 100%; overflow-x: clip; background: var(--night); }
a { color: var(--teal); }
button, input, select { font: inherit; }
.skip-link { position: fixed; left: -9999px; top: 1rem; z-index: 100; }
.skip-link:focus { left: 1rem; padding: .8rem 1rem; background: var(--yellow); color: var(--night); font-weight: 900; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 76px;
  padding: 0 max(1.25rem, calc((100vw - 1240px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid rgba(10, 22, 42, .1);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .08);
}
.brand { display: flex; align-items: center; gap: .9rem; color: var(--night); text-decoration: none; }
.event-logo, .brand-mark { width: 54px; height: 54px; flex: 0 0 auto; object-fit: cover; }
.brand-mark { background: url('/static/assets/route-du-rhum-logo.jpeg') center/cover; }
.brand-copy { display: grid; line-height: 1.1; text-transform: uppercase; }
.brand-copy strong { font-family: var(--display); font-size: 1.05rem; font-style: italic; letter-spacing: .04em; }
.brand-copy small { margin-top: .28rem; color: var(--teal); font-size: .68rem; font-weight: 900; letter-spacing: .12em; }
.site-header nav { display: flex; align-items: center; gap: clamp(.8rem, 2.3vw, 2.2rem); }
.site-header nav a { color: var(--ink); text-decoration: none; text-transform: uppercase; font-size: .76rem; font-weight: 900; letter-spacing: .07em; }
.site-header nav a:not(.nav-account):hover { color: var(--teal); }
.nav-account { padding: .85rem 1rem; background: var(--yellow); transform: skew(-7deg); box-shadow: 5px 5px 0 var(--night); }
.nav-account > * { display: inline-block; transform: skew(7deg); }

.hero { position: relative; height: calc(100svh - 76px); min-height: 600px; overflow: hidden; display: grid; color: var(--white); background: linear-gradient(90deg, rgba(4, 10, 28, .98) 0%, rgba(4, 10, 28, .86) 43%, rgba(4, 10, 28, .18) 78%), url('/static/assets/route-du-rhum-hero.png') 58% center/cover; }
.hero-grid { position: absolute; inset: 0; opacity: .2; background-image: linear-gradient(rgba(89,197,200,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(89,197,200,.12) 1px, transparent 1px); background-size: 120px 120px; mask-image: linear-gradient(90deg, #000, transparent 70%); }
.hero-inner { position: relative; z-index: 2; width: min(1240px, 100%); margin: auto; padding: 2.2rem 1.25rem 9rem; }
.hero-copy { max-width: 650px; animation: hero-in .8s cubic-bezier(.2,.8,.2,1) both; }
.race-tag { display: inline-block; padding: .48rem .75rem; color: var(--night); background: var(--yellow); text-transform: uppercase; font: italic 900 .75rem/1 var(--display); letter-spacing: .08em; transform: skew(-6deg); }
.hero-kicker { margin: 1rem 0 .15rem; text-transform: uppercase; color: var(--aqua); font-size: .88rem; font-weight: 900; letter-spacing: .12em; }
.hero h1, h2 { font-family: var(--display); font-style: italic; text-transform: uppercase; letter-spacing: -.045em; }
.hero h1 { margin: 0 0 .9rem; max-width: 700px; font-size: clamp(3.2rem, 5.6vw, 5.5rem); line-height: .84; }
.hero h1 em, h2 em { color: var(--yellow); font-style: inherit; }
.lead { max-width: 590px; margin: 0; font-size: clamp(1.05rem, 2vw, 1.3rem); color: #e7edf4; }
.hero-actions { margin-top: 1.4rem; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.hero-date { padding-left: 1rem; border-left: 3px solid var(--aqua); font: italic 900 .92rem/1.2 var(--display); letter-spacing: .08em; }
.hero-boat { position: absolute; z-index: 4; top: clamp(2rem, 5vh, 4rem); right: max(1.25rem, calc((100vw - 1240px) / 2)); width: clamp(290px, 24vw, 350px); display: grid; justify-items: center; filter: drop-shadow(10px 15px 20px rgba(0,0,0,.28)); }
.countdown { width: 100%; min-height: 112px; margin-top: -1.2rem; display: grid; align-content: center; gap: .35rem; padding: 1rem 1.5rem 1.2rem; color: var(--night); background: var(--yellow); box-shadow: 8px 9px 0 var(--aqua); clip-path: polygon(2% 0, 98% 0, 88% 100%, 12% 100%); transform: skew(-2deg); text-align: center; }
.countdown span { font-size: .7rem; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; }
.countdown strong { font: italic 900 clamp(1.15rem, 3vw, 1.8rem)/1 var(--display); }
.institution-filters { margin: 1rem 0; }
.embedded-access { margin-top: 1rem; padding: 1.25rem; border: 1px solid rgba(8,25,54,.15); background: rgba(89,197,200,.08); }
.hero-mini-logo { width: min(88%, 285px); height: 235px; object-fit: contain; opacity: .94; animation: float 5s ease-in-out infinite; }
.hero-sails { position: absolute; z-index: 1; top: 9%; right: 7%; width: 330px; height: 260px; opacity: .8; animation: float 5s ease-in-out infinite; }
.hero-sails i { position: absolute; bottom: 0; width: 0; height: 0; border-style: solid; filter: drop-shadow(10px 15px 20px rgba(0,0,0,.3)); }
.hero-sails i:nth-child(1) { left: 0; border-width: 0 0 190px 100px; border-color: transparent transparent var(--aqua) transparent; }
.hero-sails i:nth-child(2) { left: 90px; border-width: 0 0 245px 120px; border-color: transparent transparent var(--yellow) transparent; }
.hero-sails i:nth-child(3) { left: 200px; border-width: 0 0 155px 80px; border-color: transparent transparent var(--white) transparent; }
.route-line { position: absolute; z-index: 6; left: 50%; bottom: 111px; width: min(1060px, calc(100% - 3rem)); transform: translateX(-50%); display: flex; align-items: center; gap: .9rem; color: var(--white); text-transform: uppercase; font-size: .65rem; font-weight: 900; letter-spacing: .1em; }
.route-line i { height: 1px; flex: 1; background: repeating-linear-gradient(90deg, var(--aqua) 0 8px, transparent 8px 15px); }
.route-line b { color: var(--yellow); font-style: italic; }

.race-facts { position: absolute; z-index: 5; left: 50%; bottom: 16px; width: min(1180px, calc(100% - 2rem)); padding: 0 1rem; display: grid; grid-template-columns: repeat(3, 1fr); transform: translateX(-50%); }
.race-facts div { min-height: 76px; padding: .75rem 1.5rem; display: flex; align-items: center; background: var(--navy); color: var(--white); border-right: 1px solid rgba(255,255,255,.12); }
.race-facts div:first-child { border-left: 7px solid var(--aqua); }
.race-facts div:nth-child(2) { background: var(--teal); }
.race-facts div:last-child { border-right: 7px solid var(--yellow); }
.race-facts span { display: grid; gap: .15rem; text-transform: uppercase; font-size: .66rem; font-weight: 800; line-height: 1.3; letter-spacing: .045em; }
.race-facts b { color: var(--yellow); font: italic 900 1.25rem/1.15 var(--display); }

main { width: 100%; max-width: 1120px; margin: auto; padding: 0 1rem 7rem; }
.inner-page main { padding-top: clamp(2.75rem, 5vw, 4.5rem); }
.overview-screen { min-height: calc(100svh - 76px); padding: 2rem 0; display: grid; align-content: center; gap: 1.25rem; }
body:not(.public-page) main { min-height: calc(100vh - 238px); color: var(--white); }
body:not(.public-page) .card { color: var(--ink); }
body:not(.public-page) main > h2 { color: var(--white); }
.section-intro { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; max-width: 930px; margin: 5rem 0 4rem; color: var(--white); }
.section-intro::after { content: "2026"; position: absolute; z-index: -1; right: -12rem; top: 50%; transform: translateY(-50%); font: italic 900 clamp(8rem, 22vw, 18rem)/1 var(--display); color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.1); pointer-events: none; }
.section-index { color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.35); font: italic 900 7rem/.8 var(--display); }
.eyebrow { display: block; margin-bottom: .5rem; color: var(--teal); text-transform: uppercase; font: 900 .72rem/1.2 var(--body); letter-spacing: .18em; }
.section-intro .eyebrow { color: var(--aqua); }
h1, h2, h3 { line-height: 1.08; }
h2 { margin: 0 0 .7rem; font-size: clamp(1.9rem, 4.2vw, 3.7rem); }
h3 { margin: 2rem 0 .7rem; font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; }
.section-intro p { max-width: 690px; color: #b8c3d3; font-size: 1.08rem; }

.card { position: relative; margin: 2rem 0; padding: clamp(1.25rem, 4vw, 3rem); overflow: hidden; background: var(--paper); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 80px rgba(0,0,0,.3); clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); }
.card::before { content: ""; position: absolute; top: 0; right: 0; width: 28px; height: 28px; background: var(--yellow); }
.card-heading { display: flex; align-items: flex-start; gap: 1.2rem; margin-bottom: 1rem; }
.card-heading h2 { color: var(--ink); font-size: clamp(1.75rem, 3.4vw, 2.9rem); }
.step { flex: 0 0 auto; color: var(--aqua); font: italic 900 2.7rem/1 var(--display); }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.4rem; }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choice-grid { margin: 1.6rem 0; padding: 1.2rem; background: #eaf3f1; border-left: 5px solid var(--teal); }
label { display: block; margin: .55rem 0 .25rem; font-weight: 800; font-size: .85rem; }
input, select, textarea { width: 100%; min-height: 40px; padding: .5rem .7rem; font-size: .95rem; color: var(--ink); background: var(--white); border: 1px solid #a9b4c2; border-radius: 0; }
input:hover, select:hover { border-color: var(--teal); }
input:focus, select:focus, button:focus-visible, a:focus-visible { outline: 3px solid var(--aqua); outline-offset: 3px; }
input[type="checkbox"], input[type="radio"] { width: 1.15rem; min-height: auto; accent-color: var(--teal); }
.check { display: flex; align-items: flex-start; gap: .65rem; font-weight: 500; }
.check input { flex: 0 0 auto; margin-top: .3rem; }
.actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: 1.2rem; }
button, .button { display: inline-block; padding: .65rem 1rem; border: 0; border-radius: 0; color: var(--white); background: var(--teal); cursor: pointer; text-decoration: none; text-transform: uppercase; font: italic 900 .85rem/1.2 var(--display); letter-spacing: .055em; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
button:hover, .button:hover { transform: translateY(-3px); box-shadow: 6px 6px 0 var(--night); }
button.yellow, .button.yellow { color: var(--night); background: var(--yellow); }
button.secondary, .secondary { color: var(--night); background: #dcebea; }
button.danger, .danger { background: var(--danger); }
button:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.muted { color: #abb7c8; }
.card .muted { color: var(--muted); }
.error { color: var(--danger); font-weight: 800; }
.success { color: var(--success); font-weight: 800; }
.notice { min-height: 48px; margin: 0; padding: .78rem 1rem; color: var(--ink); background: var(--white); border-left: 5px solid var(--yellow); }
.hidden { display: none !important; }
.pill { display: inline-block; padding: .2rem .65rem; color: #07533d; background: #d9f0e7; font-size: .8rem; font-weight: 800; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: .7rem; margin-top: 1.4rem; }
.slot { min-height: 74px; color: var(--ink); background: var(--white); border: 1px solid #bdc8d1; text-align: left; font-size: 1.05rem; }
.slot:hover { color: var(--white); background: var(--teal); }
.slot.selected { color: var(--night); background: var(--yellow); border-color: var(--yellow); box-shadow: 5px 5px 0 var(--night); }
.slot:disabled { color: #79818d; background: #e6e8e8; }
.slot small { display: block; margin-top: .25rem; font: 600 .72rem/1.3 var(--body); text-transform: none; letter-spacing: 0; }
.result { margin-top: 1.2rem; padding: 1.2rem; background: #dff2e8; border-left: 6px solid var(--success); }
.list { max-height: 260px; overflow: auto; border: 1px solid var(--line); }
.list:empty { display: none; }
.list button { display: block; width: 100%; color: var(--ink); background: var(--white); border-bottom: 1px solid var(--line); text-align: left; text-transform: none; font-style: normal; }
.list button:hover { color: var(--ink); background: #e8f4f2; box-shadow: none; transform: none; }
.record { margin: .8rem 0; padding: 1rem; background: var(--white); border-left: 5px solid var(--teal); }
.record h3 { margin: .1rem 0; }
.small { font-size: .88rem; }
.form-divider { margin: 2.5rem 0 .8rem; padding-top: 1.2rem; display: flex; align-items: center; gap: 1rem; border-top: 1px solid var(--line); }
.form-divider span { color: var(--aqua); font: italic 900 2rem/1 var(--display); }
.form-divider h2 { margin: 0; color: var(--ink); font-size: clamp(1.6rem, 3.2vw, 2.6rem); }
.access-gate { display: grid; grid-template-columns: minmax(240px, 1fr) auto; align-items: end; gap: 1rem; padding: 1.2rem; background: #eaf3f1; border-left: 5px solid var(--teal); }
.access-indicator { margin: 1rem 0; padding: .85rem 1rem; color: #07533d; background: #d9f0e7; border-left: 5px solid var(--success); font-weight: 900; }
.missing-school { margin: 1rem 0 1.5rem; padding: 1rem 1.2rem; background: #fff; border: 1px dashed #9aa8b8; }
.missing-school p { margin-top: 0; }
#bookingForm > section, #bookingForm > .grid, #bookingForm > h3, #bookingForm > .check { animation: form-in .5s ease both; }
#bookingForm input:focus, #bookingForm select:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(8,127,132,.14); transform: translateY(-1px); }

.journey { position: relative; margin: 0; padding: clamp(1.15rem, 2vw, 1.7rem); overflow: hidden; color: var(--white); background: linear-gradient(120deg, #10274b, #091731); border-left: 7px solid var(--aqua); border-right: 7px solid var(--yellow); box-shadow: 0 22px 55px rgba(0,0,0,.25); }
.journey::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 45%, rgba(89,197,200,.08) 50%, transparent 55%); animation: journey-shine 6s linear infinite; }
.journey-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1rem; }
.journey-heading .eyebrow { color: var(--yellow); }
.journey h2 { margin: 0; color: var(--white); font-size: clamp(1.7rem, 3.3vw, 2.7rem); }
.journey-heading p { max-width: 460px; margin: 0; color: #c3cede; }
.journey ol { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: .8rem; margin: 0; padding: 0; list-style: none; }
.journey ol::before { content: ""; position: absolute; left: 9%; right: 9%; top: 28px; border-top: 2px dashed var(--aqua); opacity: .8; }
.journey ol::after { content: ""; position: absolute; left: 8%; top: 22px; width: 12px; height: 12px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 18px var(--yellow); animation: course-progress 5s ease-in-out infinite; }
.journey li { position: relative; display: grid; justify-items: center; gap: .35rem; text-align: center; animation: waypoint-in .55s ease both; animation-delay: var(--delay); }
.journey li > .journey-icon { z-index: 1; width: 50px; height: 50px; display: grid; place-items: center; color: var(--night); background: var(--aqua); border: 4px solid var(--navy); border-radius: 50%; font: italic 900 1.05rem/1 var(--display); transition: transform .25s ease, background .25s ease; }
.journey li > .journey-icon.finish { background: var(--yellow); }
.journey li:hover > .journey-icon { transform: translateY(-5px) scale(1.08); background: var(--yellow); }
.journey li b { color: var(--white); text-transform: uppercase; font-size: .78rem; letter-spacing: .08em; }
.journey li small { color: #aebcd0; }

.ratio-tool { margin: 0; display: grid; grid-template-columns: 1.35fr .65fr; overflow: hidden; background: var(--paper); box-shadow: 0 20px 45px rgba(0,0,0,.22); border-bottom: 6px solid var(--aqua); }
.ratio-tool > div { padding: .9rem 1.1rem; }
.ratio-tool p { margin: .2rem 0 .4rem; font-size: .9rem; }
.ratio-tool h2 { margin-bottom: .2rem; color: var(--ink); font-size: clamp(1.3rem, 2.2vw, 1.8rem); }
.ratio-inputs { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: .6rem; }
.ratio-result { min-height: 0; padding: .9rem 1.1rem; display: flex; flex-direction: column; justify-content: center; color: var(--white); background: #126b72; transition: background .3s ease; }
.ratio-result.ratio-warning { background: #8a3944; }
.ratio-result strong { font: italic 900 2.4rem/1 var(--display); }
.ratio-result span { font-size: .9rem; }
.ratio-result b { margin-top: .5rem; padding: .45rem .6rem; font-size: .9rem; background: rgba(255,255,255,.13); }

.admin-tabs { position: sticky; top: 96px; z-index: 8; display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0; padding: .7rem; background: rgba(7,13,32,.94); backdrop-filter: blur(8px); }
.admin-tabs button.active { color: var(--night); background: var(--yellow); }
.section-help { max-width: 850px; padding: .9rem 1rem; color: #31435a; background: #e8f2f1; border-left: 5px solid var(--teal); }
.field-help { display: block; margin: .15rem 0 .5rem; color: var(--muted); font-size: .78rem; font-weight: 500; }
.group-grid .field-help { margin-top: .55rem; line-height: 1.5; }
.declarant-help { max-width: 760px; margin: -.35rem 0 1.25rem; font-size: .9rem; line-height: 1.55; }
.request-group { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.request-unverified { padding: 1rem; background: #fff8d2; border: 1px solid #e8d15b; }
.count-badge, .status-badge { display: inline-block; padding: .22rem .62rem; border-radius: 999px; font: 800 .72rem/1.2 var(--body); }
.count-badge { color: var(--night); background: var(--yellow); }
.status-badge { margin: .35rem 0; text-transform: uppercase; letter-spacing: .06em; }
.status-badge.status-pending { color: #674d00; background: #fff1a8; }
.status-badge.status-confirmed { color: #07533d; background: #d9f0e7; }
.status-badge.status-refused, .status-badge.status-cancelled { color: #7a1b29; background: #f5dce0; }
.reservation-record.status-confirmed { border-left-color: var(--success); }
.reservation-record.status-refused, .reservation-record.status-cancelled { border-left-color: var(--danger); opacity: .88; }
.empty-state { padding: 1rem; color: var(--muted); background: rgba(255,255,255,.65); border: 1px dashed var(--line); }
.admin-toast { position: fixed; z-index: 100; right: 1.2rem; bottom: 1.2rem; max-width: min(520px, calc(100vw - 2.4rem)); padding: 1rem 1.2rem; color: var(--white); box-shadow: 0 16px 45px rgba(0,0,0,.35); animation: toast-in .3s ease both; }
.toast-success { background: var(--success); border-left: 6px solid var(--yellow); }
.toast-error { background: var(--danger); border-left: 6px solid var(--yellow); }
.mail-warning { border-left-color: var(--danger); background: #f9e1e4; }
.mail-ready { border-left-color: var(--success); background: #dff2e8; }
.mail-row { padding: .5rem .7rem; background: #f2f4f5; border-left: 3px solid var(--aqua); }
.mail-workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.mail-workspace > section, .mail-draft { padding: 1rem; background: #f7faf9; border: 1px solid var(--line); }
.mail-workspace textarea, .mail-draft textarea { width: 100%; font-family: ui-monospace, Consolas, monospace; line-height: 1.45; }
.mail-preview { width: 100%; min-height: 620px; background: var(--white); border: 1px solid var(--line); }
.mail-draft { margin-top: 1.5rem; }
.mail-template-status { margin: .8rem 0; display: grid; grid-template-columns: minmax(180px, .35fr) minmax(0, 1fr); gap: 1rem; align-items: center; }
.mail-template-status p { margin: 0; }
.mail-recipient-guide { margin: 1rem 0; padding: 1rem 1.2rem; color: var(--white); background: var(--navy); border-left: 6px solid var(--yellow); }
.mail-recipient-guide strong { color: var(--yellow); text-transform: uppercase; }
.mail-recipient-guide ol { margin: .7rem 0; padding-left: 1.4rem; }
.mail-recipient-guide p { margin: .5rem 0 0; color: #d9e3ef; }
.mail-recipient-guide code { color: var(--yellow); }
.mail-saved-group, .mail-save-selection { margin: 1rem 0; padding: 1rem; background: #edf4f3; border: 1px solid #c7d9d7; }
.mail-saved-group h4, .mail-save-selection h4, .mail-picker-title { margin: 0 0 .4rem; color: var(--navy); }
.mail-saved-group h4 span, .mail-save-selection h4 span { color: var(--muted); font-size: .78rem; font-weight: 600; }
.mail-picker-title { margin-top: 1.5rem; }
.mail-selection-bar { position: sticky; z-index: 3; bottom: .5rem; margin-top: 1rem; padding: .65rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; align-items: center; background: rgba(247,248,244,.96); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,.16); }
.mail-selection-bar .notice { margin: 0; }
.mail-preview-page-label { margin: .8rem 0 -.4rem; color: var(--navy); font-weight: 900; }
.mail-preview-toggle { position: fixed; z-index: 31; right: 0; top: 45%; padding: .85rem .7rem; writing-mode: vertical-rl; transform: translateY(-50%); box-shadow: -5px 5px 0 var(--night); }
.mail-preview-toggle:hover { transform: translateY(calc(-50% - 3px)); }
.mail-preview-toggle span:not(:empty)::before { content: " · "; }
.mail-preview-drawer { position: fixed; z-index: 30; inset: 0 0 0 auto; width: min(580px, 94vw); padding: 1.25rem; overflow-y: auto; color: var(--ink); background: var(--paper); border-left: 7px solid var(--aqua); box-shadow: -20px 0 55px rgba(0,0,0,.38); transform: translateX(105%); visibility: hidden; transition: transform .28s ease, visibility 0s linear .28s; }
.mail-preview-drawer.open { transform: translateX(0); visibility: visible; transition-delay: 0s; }
.mail-preview-header { position: sticky; z-index: 2; top: -1.25rem; margin: -1.25rem -1.25rem 1rem; padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: rgba(247,248,244,.97); border-bottom: 1px solid var(--line); }
.mail-preview-header h3 { margin: 0; }
.mail-preview-pages { position: sticky; z-index: 1; top: 72px; margin: .75rem 0; padding: .55rem; display: flex; gap: .4rem; overflow-x: auto; background: var(--paper); border-block: 1px solid var(--line); }
.mail-preview-pages:empty { display: none; }
.mail-preview-pages button { min-width: 2.25rem; padding: .5rem; }
.mail-preview-pages button.active { color: var(--night); background: var(--yellow); box-shadow: 3px 3px 0 var(--night); }
.follow-status.status-confirmed { border-left-color: var(--success); background: #dff2e8; }
.follow-status.status-pending { border-left-color: #c49b00; background: #fff8ca; }
.follow-status.status-refused, .follow-status.status-cancelled { border-left-color: var(--danger); background: #f7dfe3; }
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
.metric { padding: .8rem; color: var(--white); background: var(--navy); border-bottom: 5px solid var(--aqua); }
.metric strong { display: block; font: italic 900 1.7rem/1 var(--display); }
.metric small { display: block; margin-top: .5rem; color: #b9dadd; }
.metric-pending { border-bottom-color: var(--yellow); }
.metric-definitions { margin: 1rem 0 2rem; padding: 1rem; background: #eef5f4; border-left: 5px solid var(--teal); }
.metric-definitions summary { cursor: pointer; font-weight: 900; }
.ratio-rules-admin { margin-top: 2rem; padding-top: 1.5rem; border-top: 2px solid #d6dce3; }
.admin-calendar { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.calendar-day { padding: 1rem; background: var(--white); border-top: 5px solid var(--teal); }
.parking-board { overflow-x: auto; }
.parking-grid { min-width: 760px; display: grid; grid-template-columns: 80px repeat(10, 1fr); border: 1px solid var(--line); }
.parking-grid > * { min-height: 48px; padding: .45rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.parking-occupied { color: var(--white); background: var(--teal); }
.parking-assumption { max-width: none; border-left-color: var(--yellow); }
.parking-table-wrap { width: 100%; overflow-x: auto; }
.parking-details-table { width: 100%; min-width: 780px; border-collapse: collapse; background: var(--white); }
.parking-details-table th, .parking-details-table td { padding: .7rem .8rem; border: 1px solid var(--line); text-align: left; }
.parking-details-table th { color: var(--white); background: var(--navy); text-transform: uppercase; font-size: .72rem; letter-spacing: .05em; }
.parking-details-table tbody tr:nth-child(even) { background: #edf4f3; }
.parking-timeline { min-width: 900px; display: grid; grid-template-columns: 72px minmax(800px, 1fr); border: 1px solid var(--line); background: var(--white); }
.parking-place-label { min-height: 58px; padding: .8rem; display: grid; place-items: center; color: var(--white); background: var(--navy); border-bottom: 1px solid rgba(255,255,255,.16); }
.parking-axis { position: relative; min-height: 58px; background: #e7f1f0; border-bottom: 1px solid var(--line); }
.parking-axis span { position: absolute; bottom: .65rem; transform: translateX(-50%); color: var(--navy); font-size: .7rem; font-weight: 900; }
.parking-axis span:first-child { transform: none; }
.parking-axis span:last-child { transform: translateX(-100%); }
.parking-track { position: relative; min-height: 58px; background-image: repeating-linear-gradient(90deg, transparent 0 calc(var(--half-hour) - 1px), #d9e1e6 calc(var(--half-hour) - 1px) var(--half-hour)); border-bottom: 1px solid var(--line); }
.parking-block { position: absolute; top: 7px; bottom: 7px; min-width: 2px; padding: .45rem .6rem; overflow: hidden; color: var(--white); background: var(--teal); border: 0; border-left: 5px solid var(--yellow); text-align: left; white-space: nowrap; text-overflow: ellipsis; font: 800 .72rem/1.2 var(--body); }
.availability-page { max-width: 1280px; }
.availability-lead { max-width: 720px; color: #c2ccda; font-size: 1.1rem; }
.availability-legend { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 1.5rem 0 2.5rem; color: var(--white); }
.availability-legend span { display: flex; align-items: center; gap: .55rem; }
.availability-legend i { width: 18px; height: 18px; border: 2px solid var(--white); }
.availability-legend .available { background: var(--aqua); }.availability-legend .limited { background: var(--yellow); }.availability-legend .full { background: #626c7b; }
.availability-calendar { display: grid; gap: 2rem; }
.availability-week > h2 { margin-bottom: .8rem; color: var(--yellow); font-size: 1.3rem; }
.availability-days { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.availability-day { padding: 1.4rem; color: var(--ink); background: var(--paper); border-left: 7px solid var(--aqua); }
.availability-day h3 { margin: 0 0 1rem; font-size: 1.15rem; }
.availability-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: .7rem; }
.availability-slot { min-height: 88px; padding: .9rem; display: grid; align-content: center; color: var(--ink); text-decoration: none; border: 1px solid #aeb8c4; transition: transform .2s ease, box-shadow .2s ease; }
.availability-slot.available { background: #dff4f0; }.availability-slot.limited { background: #fff8bd; }.availability-slot.full { color: #687184; background: #e2e5e8; }
a.availability-slot:hover { transform: translateY(-3px); box-shadow: 5px 5px 0 var(--night); }
.availability-slot strong { font: italic 900 1.45rem/1 var(--display); }.availability-slot span { margin-top: .4rem; font-size: .75rem; }
.field-error-message { display: block; margin-top: .35rem; color: #a7192f; font-weight: 800; }
#bookingForm [aria-invalid="true"] { border-color: #c81e3a !important; box-shadow: 0 0 0 3px rgba(200,30,58,.2) !important; }
.group-ratio { padding: .8rem 1rem; border-left: 5px solid var(--teal); background: #e6f4f2; }
.group-ratio.ratio-insufficient { color: #7d1428; border-color: #c81e3a; background: #fff0f2; font-weight: 800; }

.demo-panel { position: relative; min-height: 190px; margin: 1.5rem 0 3rem; padding: 1.5rem 1.5rem 1.5rem 190px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1.5rem; color: var(--white); background: linear-gradient(110deg, var(--teal), #07575f); border-bottom: 7px solid var(--yellow); overflow: visible; }
.demo-panel img { position: absolute; left: 8px; bottom: 0; width: 170px; max-height: 205px; object-fit: contain; filter: drop-shadow(10px 10px 15px rgba(0,0,0,.25)); animation: mascot-bob 3.5s ease-in-out infinite; }
.demo-panel div { display: grid; }
.demo-panel .eyebrow { color: var(--yellow); }
.demo-panel strong { font: italic 900 clamp(1.5rem, 3vw, 2.4rem)/1 var(--display); text-transform: uppercase; }
.demo-panel div > span:last-child { margin-top: .5rem; color: #d8eff0; }

footer { min-height: 150px; padding: 2rem max(1.25rem, calc((100vw - 1120px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: #c1cad8; background: #030817; border-top: 1px solid rgba(255,255,255,.1); text-transform: uppercase; font-size: .72rem; font-weight: 800; letter-spacing: .08em; }
footer img { width: 70px; height: 70px; object-fit: cover; }
footer a { color: var(--yellow); }

.reveal { animation: reveal .7s ease both; animation-timeline: view(); animation-range: entry 0% entry 25%; }
@keyframes hero-in { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes float { 50% { transform: translateY(-14px) rotate(1deg); } }
@keyframes mascot-bob { 50% { transform: translateY(-7px) rotate(-1deg); } }
@keyframes reveal { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes form-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes journey-shine { from { transform: translateX(-70%); } to { transform: translateX(70%); } }
@keyframes course-progress { 0%, 10% { left: 8%; } 90%, 100% { left: 89%; } }
@keyframes waypoint-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: none; } }

@media (min-width: 1600px) {
  .hero { background-position: 54% center; }
}

@media (max-width: 1100px) and (min-width: 851px) {
  .site-header { gap: 1rem; }
  .site-header nav { gap: 1rem; }
  .hero-copy { max-width: 58%; }
  .hero h1 { font-size: clamp(3.2rem, 6vw, 4.8rem); }
  .hero-boat { right: 1.5rem; width: clamp(260px, 29vw, 310px); }
}

@media (max-height: 720px) and (min-width: 851px) {
  .hero-inner { padding-top: 1rem; }
  .hero-kicker { margin-top: .65rem; }
  .hero h1 { font-size: clamp(3rem, 5vw, 4.3rem); }
  .lead { font-size: 1rem; }
  .hero-actions { margin-top: 1rem; }
  .hero-boat { top: 1rem; width: 270px; }
  .hero-mini-logo { height: 180px; }
  .countdown { min-height: 88px; padding: .7rem 1.2rem .9rem; }
  .countdown strong { font-size: 1.35rem; }
  .race-facts div { min-height: 68px; }
  .route-line { bottom: 101px; }
}

@media (max-width: 850px) {
  .availability-days { grid-template-columns: 1fr; }
  .mail-workspace { grid-template-columns: 1fr; }
  .mail-preview { min-height: 440px; }
  .mail-template-status { grid-template-columns: 1fr; }
  .mail-selection-bar { grid-template-columns: 1fr; }
  .mail-preview-drawer { width: 100%; border-left-width: 0; }
  .site-header { position: relative; padding: .8rem 1rem; }
  .site-header nav { gap: .8rem; }
  .site-header nav a:not(.nav-account) { display: none; }
  .hero { height: auto; min-height: max(620px, calc(100svh - 80px)); display: flex; flex-direction: column; background-position: 64% center; }
  .hero-inner { padding: 3.5rem 1rem 1.5rem; }
  .hero-sails { right: -100px; opacity: .3; }
  .hero-boat { position: relative; top: auto; right: auto; order: 2; align-self: center; width: min(350px, calc(100% - 2rem)); margin: -1.5rem auto 5.5rem; }
  .hero-mini-logo { width: 78%; height: 175px; opacity: .72; }
  .countdown { width: 100%; min-height: 100px; margin: -1.2rem 0 0; }
  .route-line { bottom: 242px; }
  .race-facts { position: relative; left: auto; bottom: auto; order: 3; width: 100%; grid-template-columns: 1fr; transform: none; padding: 0; }
  .race-facts div { min-height: 80px; border: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .race-facts div:first-child, .race-facts div:last-child { border-left: 7px solid var(--aqua); border-right: 0; }
  .section-intro { grid-template-columns: 1fr; }
  .section-index { font-size: 4rem; }
  .grid, .grid.three { grid-template-columns: 1fr; }
  .access-gate { grid-template-columns: 1fr; }
  .demo-panel { padding: 1.3rem; grid-template-columns: 1fr; }
  .demo-panel img { position: relative; left: auto; width: 120px; margin: -70px auto 0; }
  .journey-heading { display: block; }
  .journey-heading p { margin-top: .7rem; }
  .journey ol { grid-template-columns: 1fr; text-align: left; }
  .journey ol::before { left: 27px; right: auto; top: 25px; bottom: 25px; border-top: 0; border-left: 2px dashed var(--aqua); }
  .journey ol::after { display: none; }
  .journey li { grid-template-columns: 64px 1fr; justify-items: start; align-items: center; text-align: left; }
  .journey li > .journey-icon { grid-row: 1 / 3; }
  .ratio-tool { grid-template-columns: 1fr; }
  .overview-screen { min-height: 0; padding: 1rem 0 3rem; }
  .section-intro::after { right: 0; max-width: 100%; overflow: hidden; font-size: clamp(7rem, 34vw, 13rem); }
  .admin-tabs { position: static; flex-wrap: nowrap; overflow-x: auto; }
  footer { flex-wrap: wrap; }
}

@media (max-width: 520px) {
  .inner-page main { padding-top: 2rem; }
  .event-logo, .brand-mark { width: 48px; height: 48px; }
  .brand-copy strong { font-size: .85rem; }
  .brand-copy small { display: none; }
  .nav-account { padding: .65rem .7rem; font-size: .65rem !important; }
  .hero { min-height: max(590px, calc(100svh - 72px)); }
  .hero-inner { padding: 3.2rem 1rem 1.5rem; }
  .hero h1 { font-size: clamp(3.1rem, 16vw, 4.8rem); }
  .hero-copy, .hero h1, .lead, .hero-actions, .hero-boat, .countdown, .countdown strong { min-width: 0; max-width: 100%; }
  .hero h1 { overflow-wrap: anywhere; }
  .hero-kicker { font-size: .74rem; }
  .hero-actions { align-items: stretch; gap: 1rem; }
  .hero-date { display: flex; align-items: center; }
  .hero-boat { width: min(320px, calc(100% - 1.5rem)); margin-bottom: 5rem; }
  .hero-mini-logo { height: 150px; }
  .countdown { min-height: 92px; padding: .75rem 1rem 1rem; }
  .countdown strong { font-size: clamp(1rem, 5vw, 1.25rem); line-height: 1.15; overflow-wrap: anywhere; }
  .route-line b { display: none; }
  main { padding: 3.5rem .75rem 5rem; }
  .overview-screen, .ratio-tool, .section-intro, .demo-panel, .card { width: 100%; max-width: 100%; }
  .card { padding: 1.15rem; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); }
  .card::before { width: 18px; height: 18px; }
  .card-heading { display: block; }
  .step { display: block; margin-bottom: .5rem; }
  .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Onglet Mails : composition, destinataires groupés, signature */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mail-step { margin: 0 0 1.2rem; padding: 1rem; border: 1px solid var(--line); background: var(--white); }
.mail-step legend { padding: 0 .4rem; font-weight: 900; color: var(--navy); }
.mail-step label { display: block; margin-top: .8rem; font-weight: 700; }
.segmented { display: flex; flex-wrap: wrap; gap: .5rem; }
.segmented label { display: inline-flex; align-items: center; gap: .45rem; margin: 0; padding: .55rem .8rem; background: #eaf3f1; border: 1px solid var(--line); cursor: pointer; font-weight: 700; }
.segmented label:has(input:checked) { background: var(--yellow); border-color: var(--night); }
.target-panel { margin-top: .8rem; }
.inline-actions, .inline-field { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; margin-top: .6rem; }
.inline-field select { flex: 1 1 260px; }
.picker-filters { margin-top: .6rem; }
.picker { max-height: 360px; margin-top: .8rem; overflow: auto; border: 1px solid var(--line); background: var(--white); }
.picker-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .5rem .7rem; border-bottom: 1px solid var(--line); }
.picker-row:nth-child(even) { background: #f7faf9; }
.picker-main { display: flex !important; gap: .6rem; align-items: flex-start; margin: 0 !important; font-weight: 400 !important; cursor: pointer; }
.picker-main span { display: grid; }
.picker-main small { color: var(--muted); font-size: .76rem; }
.picker-mail { overflow-wrap: anywhere; font-size: .8rem; color: #31435a; }
.picker-mail.missing { color: var(--danger); font-weight: 800; }
.picker-edit { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; }
.picker-edit input { flex: 1 1 240px; min-height: 40px; }
.small-button, .picker-edit button, .inline-actions button, .variable-chips .chip { padding: .5rem .75rem; font-size: .72rem; }
.variable-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.variable-chips .chip { color: var(--ink); background: #e8f2f1; text-transform: none; font: 600 .78rem/1.2 ui-monospace, Consolas, monospace; letter-spacing: 0; }
.mail-meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .25rem .8rem; margin: .8rem 0; font-size: .86rem; }
.mail-meta dt { font-weight: 900; color: var(--navy); }
.mail-meta dd { margin: 0; overflow-wrap: anywhere; }
.mail-warnings { margin: .6rem 0; padding: 0; list-style: none; font-size: .84rem; }
.mail-warnings li { margin: .25rem 0; padding: .45rem .7rem; border-left: 4px solid var(--success); background: #dff2e8; }
.mail-warnings li.warning { border-left-color: var(--orange); background: #fff1e3; }
.mail-section { margin-top: 1.8rem; padding: 1.2rem; background: #f7faf9; border: 1px solid var(--line); }
.mail-section h3 { margin-top: 0; }
.mail-section textarea { width: 100%; font-family: ui-monospace, Consolas, monospace; line-height: 1.45; }
.mail-workspace textarea { font-family: ui-monospace, Consolas, monospace; }
.editor-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .5rem; background: var(--white); border: 1px solid var(--line); border-bottom: 0; }
.editor-toolbar button, .toolbar-upload { padding: .45rem .7rem; font-size: .75rem; }
.toolbar-field { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 700; }
.toolbar-field select, .toolbar-field input { width: auto; min-height: 34px; padding: .25rem .4rem; }
.toolbar-field input[type="color"] { width: 42px; padding: 2px; }
.toolbar-field input[type="number"] { width: 5.5rem; }
.signature-editor { min-height: 160px; padding: 1rem 1.2rem; color: #111a33; background: var(--white); border: 1px solid #a9b4c2; font-family: Garamond, 'EB Garamond', Georgia, 'Times New Roman', serif; font-size: 12pt; line-height: 1.45; overflow: auto; }
.signature-editor:focus { outline: 3px solid var(--aqua); outline-offset: 2px; }
.signature-editor img { max-width: 100%; cursor: pointer; }
.signature-editor img.selected-image { outline: 3px dashed var(--teal); }
@media (max-width: 850px) {
  .picker-row { grid-template-columns: 1fr; }
}

/* Codes d'accès générés */
.code-list { overflow-x: auto; }
.code-table { width: 100%; border-collapse: collapse; background: var(--white); font-size: .86rem; }
.code-table th, .code-table td { padding: .55rem .7rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.code-table th { color: var(--navy); background: #e8f2f1; }
.code-table button { padding: .45rem .7rem; font-size: .72rem; }
.code-state { display: inline-block; padding: .2rem .5rem; font-weight: 800; font-size: .75rem; }
.code-valid { color: var(--success); background: #dff2e8; }
.code-soon { color: #8a4b00; background: #fff1e3; }
.code-expired { color: var(--danger); background: #f9e1e4; }
.target-help { margin-top: .8rem; min-height: 0; font-size: .86rem; }

/* Double authentification de la coordination */
.auth-mode { margin-bottom: 1rem; font-weight: 600; }
.totp-enroll { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin: 1rem 0; }
.totp-qr { width: 220px; height: 220px; background: #fff; padding: 8px; border: 1px solid #c9d6dc; image-rendering: pixelated; }
.totp-key, .recovery-codes { font-family: Consolas, "Courier New", monospace; letter-spacing: .08em; }
.recovery-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .5rem 1.5rem; font-size: 1.1rem; padding-left: 1.5rem; }
.account-security { margin-bottom: 1.5rem; }
.account-security form { display: grid; gap: .4rem; align-content: start; }

/* Étape 01 : établissement puis dépôt avec ou sans code */
.institution-picker { margin: 1rem 0; }
.institution-picker .list { display: grid; gap: .35rem; margin: .5rem 0; }
.institution-picker .list button { text-align: left; text-transform: none; font: 700 .95rem/1.3 var(--body); letter-spacing: 0; }
.access-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; margin: 1rem 0; padding: 0; border: 0; }
.access-choice legend { margin-bottom: .6rem; font-weight: 900; }
.choice-card { display: flex !important; gap: .7rem; align-items: flex-start; margin: 0 !important; padding: 1rem; background: #eaf3f1; border: 2px solid var(--line); cursor: pointer; font-weight: 400 !important; }
.choice-card:has(input:checked) { border-color: var(--teal); background: #dff0ee; }
.choice-card:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.choice-card input { width: auto; min-height: 0; margin-top: .25rem; }
.choice-card strong { display: block; color: var(--navy); }
.choice-card small { display: block; margin-top: .3rem; line-height: 1.45; }
.result-confirmed { border-left: 6px solid #1b7a3a; }
.result-pending { border-left: 6px solid #b86e00; }

/* Back-office : liste paginée, statuts et volet dépliable */
.status-badge.status-confirmed.via-code { background: #1b7a3a; color: #fff; }
.deposit-badge { display: inline-block; margin-left: .4rem; padding: .15rem .45rem; font-size: .75rem; font-weight: 700; background: #eaf3f1; border: 1px solid var(--line); color: var(--navy); }
.reservation-record .record-summary { margin: .3rem 0; }
.reservation-record details { margin: .5rem 0; }
.reservation-record details summary { cursor: pointer; font-weight: 700; color: var(--teal); }
.reservation-record details dl { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .8rem; margin: .5rem 0; font-size: .9rem; }
.reservation-record details dt { font-weight: 700; }
.reservation-record details dd { margin: 0; }
.pagination { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1rem 0; }
.pagination span { font-weight: 700; }
.status-tally { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; font-size: .9rem; }
.quota-admin, .network-check { margin-top: 1.5rem; }
@media (max-width: 520px) {
  .ratio-inputs { grid-template-columns: 1fr 1fr; }
  .ratio-inputs > div:first-child { grid-column: 1 / -1; }
}

/* Historiques compacts : onglets d'état et lignes sur une ou deux lignes */
.history-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0; }
.history-tabs button { background: #eaf3f1; color: var(--navy); }
.history-tabs button.active { background: var(--teal); color: var(--white); }
.history-list { display: grid; gap: .3rem; }
.history-row { display: grid; grid-template-columns: max-content 1fr auto; gap: .1rem .8rem; align-items: center; padding: .4rem .6rem; background: var(--white); border-left: 3px solid var(--line); font-size: .88rem; }
.history-row small { grid-column: 2 / -1; color: #4b5563; overflow-wrap: anywhere; }
.history-row button { grid-row: 1 / span 2; grid-column: 3; padding: .35rem .6rem; }
.field-details { margin-top: .2rem; }
.field-details summary { cursor: pointer; font-size: .8rem; font-weight: 700; color: var(--teal); }
.field-help { font-size: .8rem; line-height: 1.35; }
.reservation-record { padding: .6rem .9rem; margin: .45rem 0; }
.reservation-record h3 { margin: 0 0 .2rem; font-size: .95rem; }
.reservation-record .record-summary { margin: .15rem 0; font-size: .9rem; }
.reservation-record details { margin: .2rem 0 0; }