/* ============================================================
   Préparation Instructeur ULM — thème « RÉTRO AVIATION »
   Manuel de vol vintage : papier crème, encre sépia, laiton,
   navy instrument, callouts WARNING / CAUTION / NOTE, jauges.
   Tous les noms de classes sont conservés (compatibilité JS).
   ============================================================ */

:root {
  /* Papier & encre */
  --paper:    #ece0c6;   /* fond : papier de carte vieilli */
  --paper-2:  #e3d4b3;   /* alternance / creux */
  --card:     #f7efdc;   /* feuille de manuel claire */
  --card-2:   #f1e6cd;
  --ink:      #2b2218;   /* encre sépia foncée */
  --muted:    #6f6048;   /* encre délavée */
  --line:     #c7b189;   /* filets tan */
  --line-soft:#d8c5a0;

  /* Couleurs aviation vintage */
  --navy:     #163643;   /* navy instrument profond */
  --navy-2:   #1d4456;
  --teal:     #1f5247;   /* vert cockpit / bouteille */
  --orange:   #bf4b24;   /* international / burnt orange */
  --orange-d: #9c3a18;
  --red:      #9c2a22;   /* rouge avertisseur */
  --green:    #2f6a3f;   /* vert « GO » */
  --green-d:  #245532;
  --brass:    #b0852f;   /* laiton / moutarde */
  --brass-lt: #d4b16a;
  --brass-pale:#e9d4a0;

  /* Washes pâles pour fonds */
  --navy-soft:  #e4ddc8;
  --green-soft: #dfe7cf;
  --red-soft:   #f0ddc8;
  --amber-soft: #f3e6c2;

  --radius: 4px;
  --shadow: 2px 2px 0 rgba(43, 34, 24, 0.10), 0 6px 18px rgba(43, 34, 24, 0.10);
  --shadow-hard: 3px 3px 0 var(--ink);

  --f-display: "Arial Narrow", "Helvetica Neue", "Liberation Sans Narrow", system-ui, sans-serif;
  --f-body: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --f-mono: "Courier New", "Courier", ui-monospace, monospace;
}

/* ============ Thème sombre — cockpit de nuit ============ */

[data-theme="dark"] {
  --paper:    #17140f;
  --paper-2:  #1e1a13;
  --card:     #241f17;
  --card-2:   #2a2419;
  --ink:      #e9dec3;
  --muted:    #a4926f;
  --line:     #4a3f2c;
  --line-soft:#3a3123;

  --navy-2:   #6fb2d0;   /* éclairci : sert de texte sur fond sombre */
  --orange-d: #e8894f;   /* éclairci : liens et texte d'alerte lisibles sur fond sombre */
  --green-d:  #6fbd82;
  --brass-pale: #4a3f24;

  --navy-soft:  #1c2b32;
  --green-soft: #1d2b20;
  --red-soft:   #34211a;
  --amber-soft: #332a17;

  --shadow: 2px 2px 0 rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.35);
}
[data-theme="dark"] .alert.info   { color: #bcd8e6; }
[data-theme="dark"] .alert.warn   { color: #e8d9a8; }
[data-theme="dark"] .alert.danger { color: #f0bcae; }
[data-theme="dark"] .alert.ok     { color: #b9dcc0; }
[data-theme="dark"] .badge.gold   { color: #e0c684; }
/* var(--navy)/var(--teal) servent aussi de FOND ailleurs (en-tête, badges à texte
   clair) : on ne peut pas les réassigner globalement sans casser ces fonds sombres.
   On éclaircit donc ponctuellement les usages en TEXTE sur fond clair/sombre. */
[data-theme="dark"] h2, [data-theme="dark"] nav.main a.active,
[data-theme="dark"] button.secondary, [data-theme="dark"] .btn.secondary,
[data-theme="dark"] .badge.info, [data-theme="dark"] .alert.info::before,
[data-theme="dark"] .tabs button:hover, [data-theme="dark"] .tabs button.active,
[data-theme="dark"] .timer, [data-theme="dark"] .score-hero .pct, [data-theme="dark"] .kpi .num,
[data-theme="dark"] .exam-grid button.answered { color: #7fb8d4; }
[data-theme="dark"] button.secondary, [data-theme="dark"] .btn.secondary { border-color: #4a6a7a; }
[data-theme="dark"] h3 { color: #5fc9ae; }
[data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"], [data-theme="dark"] select, [data-theme="dark"] textarea { background: #1c170f; color: var(--ink); }
[data-theme="dark"] button.secondary:hover, [data-theme="dark"] .btn.secondary:hover,
[data-theme="dark"] .q-opt:hover { background: #2e2718; }

/* ============ Bannière de synchronisation ============ */

.sync-banner {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  flex-wrap: wrap;
  background: var(--navy); color: var(--brass-pale);
  padding: 10px 18px;
  font-size: 0.92rem;
  border-bottom: 3px solid var(--orange);
}
.sync-banner button { padding: 5px 12px; font-size: 0.85rem; }

/* ============ Bascule de thème (bouton injecté dans l'en-tête) ============ */

.theme-toggle {
  position: relative; z-index: 1;
  font-family: var(--f-mono);
  background: transparent;
  border: 1px solid rgba(212,177,106,.4);
  color: var(--brass-pale);
  box-shadow: none;
  padding: 6px 12px;
  font-size: .85rem;
  margin-left: auto;
  align-self: flex-start;
}
.theme-toggle:hover { background: rgba(212,177,106,.16); transform: none; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--f-body);
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(0deg, rgba(43,34,24,.022) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(43,34,24,.015) 0 1px, transparent 1px 5px),
    radial-gradient(120% 90% at 50% 0%, rgba(255,250,235,.5), transparent 60%);
  line-height: 1.58;
  font-size: 16.5px;
}

/* ============ En-tête : placard d'instrument ============ */

header.site {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.12)),
    var(--navy);
  color: var(--brass-pale);
  padding: 16px 24px 0;
  border-bottom: 4px solid var(--brass);
  box-shadow: inset 0 -10px 0 rgba(0,0,0,.18), 0 2px 0 var(--orange);
  overflow: hidden;
}

/* Filet « cheatline » laiton + rivets sous le bandeau */
header.site::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 6px;
  background:
    repeating-linear-gradient(90deg, var(--brass) 0 18px, var(--orange) 18px 22px);
  opacity: .85;
}

/* Rose des vents en filigrane, à droite */
header.site::after {
  content: "";
  position: absolute;
  right: -40px; top: -30px;
  width: 240px; height: 240px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23d4b16a' stroke-width='2'%3E%3Ccircle cx='100' cy='100' r='94'/%3E%3Ccircle cx='100' cy='100' r='72'/%3E%3Ccircle cx='100' cy='100' r='6'/%3E%3C/g%3E%3Cg fill='%23d4b16a'%3E%3Cpolygon points='100,10 107,100 93,100'/%3E%3Cpolygon points='100,190 107,100 93,100'/%3E%3Cpolygon points='10,100 100,107 100,93'/%3E%3Cpolygon points='190,100 100,107 100,93'/%3E%3C/g%3E%3Cg fill='%23b0852f'%3E%3Cpolygon points='150,50 103,97 97,103'/%3E%3Cpolygon points='50,150 97,103 103,97'/%3E%3Cpolygon points='150,150 103,103 97,97'/%3E%3Cpolygon points='50,50 97,97 103,103'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: .16;
  pointer-events: none;
}

header.site .brand {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  max-width: 1100px;
  margin: 0 auto;
}

header.site .brand h1 {
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 1.7rem;
  margin: 0;
  color: #f7eccf;
  text-shadow: 1px 1px 0 rgba(0,0,0,.35);
}

header.site .brand .sub {
  font-family: var(--f-mono);
  color: var(--brass-lt);
  font-size: 0.78rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 1px solid rgba(212,177,106,.4);
  padding: 2px 8px;
  border-radius: 2px;
}

nav.main {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 14px auto 0;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

nav.main a {
  font-family: var(--f-display);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--brass-pale);
  text-decoration: none;
  padding: 9px 18px;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
}

nav.main a:hover { background: rgba(212,177,106,.16); color: #fff; }

nav.main a.active {
  background: var(--paper);
  color: var(--navy);
  border-color: var(--brass);
  box-shadow: inset 0 3px 0 var(--orange);
}

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 26px 24px 80px;
}

/* ============ Typographie ============ */

h2 {
  font-family: var(--f-display);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--navy);
  font-size: 1.7rem;
  font-weight: 700;
  margin: 30px 0 14px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--brass);
}
h2::before {
  content: "✦ ";
  color: var(--orange);
}

h3 {
  font-family: var(--f-display);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--teal);
  font-size: 1.25rem;
  font-weight: 700;
  margin: 22px 0 10px;
}

h4 { margin: 14px 0 6px; color: var(--navy-2); font-weight: 700; }
p { margin: 8px 0; }
.muted { color: var(--muted); }
.small { font-size: 0.86rem; }
a { color: var(--orange-d); text-underline-offset: 2px; }
a:hover { color: var(--orange); }

/* ============ Cartes : feuilles de manuel ============ */

.card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.4), transparent 12%),
    var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brass);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 22px;
  margin: 16px 0;
}

.card h3:first-child, .card h2:first-child { margin-top: 0; }

.grid { display: grid; gap: 16px; }
.grid.c2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid.c3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid.c4 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.flex { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ============ Boutons : placards à bascule ============ */

button, .btn {
  font-family: var(--f-display);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.98rem;
  font-weight: 700;
  border: 2px solid var(--orange-d);
  border-radius: 3px;
  padding: 9px 18px;
  cursor: pointer;
  background: var(--orange);
  color: #fff8ec;
  text-decoration: none;
  display: inline-block;
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform .05s ease, box-shadow .05s ease, background .12s ease;
}
button:hover, .btn:hover { background: var(--orange-d); }
button:active, .btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }

button.secondary, .btn.secondary {
  background: var(--card);
  color: var(--navy);
  border-color: var(--navy);
  box-shadow: 2px 2px 0 var(--navy-2);
}
button.secondary:hover, .btn.secondary:hover { background: #fff7e6; }

button.ghost, .btn.ghost {
  background: transparent;
  color: var(--orange-d);
  border: none;
  box-shadow: none;
  padding: 6px 8px;
  letter-spacing: .5px;
}
button.ghost:hover { background: rgba(191,75,36,.08); }

button.danger { background: var(--red); border-color: #6e1c17; box-shadow: 2px 2px 0 var(--ink); }
button.danger:hover { background: #7e201a; }

button:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

/* ============ Badges : tampons ============ */

.badge {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 2px 8px;
  border-radius: 2px;
  border: 1.5px solid;
  vertical-align: middle;
  line-height: 1.5;
}
.badge.ok      { background: var(--green-soft); color: var(--green-d); border-color: var(--green); }
.badge.ko      { background: var(--red-soft);   color: var(--red);     border-color: var(--red); }
.badge.warn    { background: var(--amber-soft); color: var(--brass);   border-color: var(--brass); }
.badge.info    { background: var(--navy-soft);  color: var(--navy);    border-color: var(--navy-2); }
.badge.neutral { background: var(--paper-2);    color: var(--muted);   border-color: var(--line); }
.badge.gold    { background: var(--brass-pale); color: #7a5a14;        border-color: var(--brass); }

/* ============ Jauges (barres de progression) ============ */

.progress {
  position: relative;
  background: var(--paper-2);
  border: 1.5px solid var(--line);
  border-radius: 2px;
  height: 14px;
  overflow: hidden;
  box-shadow: inset 0 2px 3px rgba(43,34,24,.18);
}
/* graduations de cadran */
.progress::after {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(43,34,24,.22) 0 1px, transparent 1px 10%);
  pointer-events: none;
}
.progress > span {
  display: block;
  height: 100%;
  background: linear-gradient(180deg, var(--orange), var(--orange-d));
  transition: width 0.5s ease;
}
.progress > span.ok   { background: linear-gradient(180deg, #3f8a52, var(--green-d)); }
.progress > span.warn { background: linear-gradient(180deg, var(--brass-lt), var(--brass)); }

/* ============ Callouts manuel : NOTE / CAUTION / WARNING ============ */

.alert {
  position: relative;
  border-radius: 3px;
  padding: 11px 16px 11px 18px;
  margin: 14px 0;
  border: 1.5px solid;
  border-left-width: 7px;
  font-size: 0.95rem;
  background: var(--card);
}
.alert::before {
  display: block;
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.alert.info   { border-color: var(--navy-2);  background: var(--navy-soft);  color: #243b46; }
.alert.info::before   { content: "✎ Note"; color: var(--navy); }
.alert.warn   { border-color: var(--brass);   background: var(--amber-soft); color: #6e521a; }
.alert.warn::before   { content: "△ Caution"; color: var(--orange-d); }
.alert.danger { border-color: var(--red);     background: var(--red-soft);   color: #6e201a; }
.alert.danger::before { content: "⚠ Warning"; color: var(--red); }
.alert.ok     { border-color: var(--green);   background: var(--green-soft); color: #234a2c; }
.alert.ok::before     { content: "✓ Go"; color: var(--green-d); }

/* ============ Onglets ============ */

.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--brass);
  margin: 20px 0 18px;
  flex-wrap: wrap;
}
.tabs button {
  background: var(--paper-2);
  color: var(--muted);
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  padding: 8px 16px;
  margin-bottom: -2px;
  font-size: 0.95rem;
  box-shadow: none;
}
.tabs button:hover { background: var(--card); color: var(--navy); transform: none; }
.tabs button.active {
  background: var(--card);
  color: var(--navy);
  border-color: var(--brass);
  box-shadow: inset 0 3px 0 var(--orange);
}

/* ============ QCM ============ */

.q-card { max-width: 820px; margin: 0 auto; }

.q-num {
  font-family: var(--f-mono);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.q-text {
  font-family: var(--f-body);
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--ink);
  margin: 10px 0 16px;
  line-height: 1.45;
}

.q-options { display: grid; gap: 10px; }

.q-opt {
  font-family: var(--f-body);
  text-transform: none;
  letter-spacing: 0;
  text-align: left;
  background: var(--card);
  border: 1.5px solid var(--line);
  color: var(--ink);
  font-weight: 500;
  font-size: 1rem;
  padding: 12px 16px;
  border-radius: 3px;
  line-height: 1.4;
  box-shadow: 1px 1px 0 rgba(43,34,24,.12);
}
.q-opt:hover { border-color: var(--orange); background: #fff7e6; transform: none; }
.q-opt.selected { border-color: var(--orange); background: var(--amber-soft); }
.q-opt.correct  { border-color: var(--green); background: var(--green-soft); }
.q-opt.wrong    { border-color: var(--red);   background: var(--red-soft); }
.q-opt:disabled { opacity: 1; cursor: default; box-shadow: none; }
.q-opt .opt-letter {
  font-family: var(--f-display);
  font-weight: 700;
  color: #fff8ec;
  background: var(--navy);
  border-radius: 2px;
  padding: 0 7px;
  margin-right: 10px;
}
.q-opt.correct .opt-letter { background: var(--green); }
.q-opt.wrong .opt-letter   { background: var(--red); }

.explication {
  margin-top: 16px;
  border: 1.5px solid var(--navy-2);
  border-left-width: 6px;
  background: var(--navy-soft);
  padding: 12px 16px;
  border-radius: 3px;
  font-size: 0.95rem;
}
.explication.good { border-color: var(--green); background: var(--green-soft); }
.explication.bad  { border-color: var(--red);   background: var(--red-soft); }
.explication .ref {
  display: block;
  margin-top: 8px;
  font-family: var(--f-mono);
  color: var(--muted);
  font-size: 0.78rem;
}

.exam-grid { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0; }
.exam-grid button {
  font-family: var(--f-mono);
  width: 38px; height: 34px;
  padding: 0;
  font-size: 0.8rem;
  background: var(--card);
  color: var(--ink);
  border: 1.5px solid var(--line);
  box-shadow: 1px 1px 0 rgba(43,34,24,.15);
}
.exam-grid button:hover { transform: none; }
.exam-grid button.answered { background: var(--navy-soft); border-color: var(--navy-2); color: var(--navy); }
.exam-grid button.flagged  { background: var(--amber-soft); border-color: var(--brass); }
.exam-grid button.current  { outline: 2px solid var(--orange); outline-offset: 1px; }

.timer {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--navy);
  background: var(--card);
  border: 1.5px solid var(--navy-2);
  border-radius: 3px;
  padding: 2px 10px;
}
.timer.low { color: #fff; background: var(--red); border-color: #6e1c17; }

.score-hero { text-align: center; padding: 26px 10px; }
.score-hero .pct {
  font-family: var(--f-display);
  font-size: 3.6rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--navy);
  line-height: 1;
}

/* ============ Vol : fiches de séance ============ */

.seance-item {
  border: 1px solid var(--line);
  border-left: 4px solid var(--brass-lt);
  border-radius: 3px;
  padding: 12px 16px;
  margin: 8px 0;
  background: var(--card);
}
.seance-item:hover { border-left-color: var(--orange); }
.seance-item .title-row { display: flex; justify-content: space-between; gap: 8px; align-items: center; cursor: pointer; }
.seance-item h4 { margin: 0; }

.fiche-section { margin: 16px 0; }
.fiche-section > h4 {
  font-family: var(--f-mono);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 1.5px;
  color: var(--orange-d);
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
}
.fiche-section ul, .fiche-section ol { margin: 6px 0; padding-left: 22px; }
.fiche-section li { margin: 5px 0; }

.crit-table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.crit-table th, .crit-table td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.crit-table th {
  font-family: var(--f-display);
  text-transform: uppercase;
  letter-spacing: .5px;
  background: var(--navy);
  color: var(--brass-pale);
}
.crit-table tr:nth-child(even) td { background: var(--card-2); }

.note-group { display: flex; gap: 4px; }
.note-group button {
  font-family: var(--f-mono);
  width: 34px; height: 30px; padding: 0;
  background: var(--card); border: 1.5px solid var(--line); color: var(--muted); font-weight: 700;
  box-shadow: 1px 1px 0 rgba(43,34,24,.12);
}
.note-group button:hover { transform: none; }
.note-group button.sel-1 { background: var(--red);    border-color: #6e1c17; color: #fff; }
.note-group button.sel-2 { background: var(--orange); border-color: var(--orange-d); color: #fff; }
.note-group button.sel-3 { background: #5a8f3f;       border-color: #47712f; color: #fff; }
.note-group button.sel-4 { background: var(--green);  border-color: var(--green-d); color: #fff; }

/* ============ Formation : timeline ============ */

.timeline { position: relative; margin: 18px 0; padding-left: 30px; }
.timeline::before {
  content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px;
  width: 3px; background: var(--brass); border-radius: 2px;
}
.tl-step { position: relative; margin: 0 0 22px; }
.tl-step::before {
  content: ""; position: absolute; left: -28px; top: 4px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--card); border: 4px solid var(--orange);
}
.tl-step.done::before { background: var(--green); border-color: var(--green-d); }
.tl-step h4 { margin: 0 0 4px; }

/* ============ Formulaires ============ */

input[type="text"], input[type="number"], input[type="date"], select, textarea {
  font-family: var(--f-body);
  font-size: 0.95rem;
  border: 1.5px solid var(--line);
  border-radius: 3px;
  padding: 8px 10px;
  background: #fffdf6;
  color: var(--ink);
  max-width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brass-lt); border-color: var(--orange); }

label.field {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
}

/* Formulaire vent (triangle du vent) — partagé par la Carte nav et le roadbook Cuers. */
.wind-form { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; margin: 10px 0; }
.wind-form label { display: flex; flex-direction: column; gap: 3px; font-size: .82em; color: var(--muted); }
.wind-form input { width: 90px; padding: 6px 8px; font-family: var(--f-mono); }

.check-row { display: flex; align-items: flex-start; gap: 12px; padding: 11px 4px; border-bottom: 1px dashed var(--line); }
.check-row:last-child { border-bottom: none; }
.check-row input[type="checkbox"] { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--green); flex-shrink: 0; }
.check-inline { display: inline-flex; align-items: center; gap: 8px; font-size: 0.92rem; }
.check-inline input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--green); flex-shrink: 0; }
details summary { cursor: pointer; }

table.data { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
table.data th, table.data td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; }
table.data th {
  font-family: var(--f-mono);
  color: var(--muted);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
table.data td { font-family: var(--f-mono); font-size: 0.86rem; }
table.data tr:nth-child(even) td { background: var(--card-2); }

/* ============ Stat bars ============ */

.stat-row { display: grid; grid-template-columns: 230px 1fr 78px; gap: 12px; align-items: center; margin: 8px 0; }
.stat-row .lbl { font-size: 0.92rem; font-weight: 700; }
.stat-row .val { font-family: var(--f-mono); text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .stat-row { grid-template-columns: 1fr; gap: 4px; }
  .stat-row .val { text-align: left; }
  header.site .brand h1 { font-size: 1.4rem; }
}

/* ============ KPI : compteurs odomètre ============ */

.kpi { text-align: center; padding: 12px 6px; }
.kpi .num {
  font-family: var(--f-display);
  font-size: 2.3rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--navy);
  line-height: 1.1;
}
.kpi .lbl { font-family: var(--f-mono); color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: .5px; }

.divider { border: none; border-top: 1px dashed var(--line); margin: 18px 0; }

/* ============ Déroulés radio (phraséologie) ============ */

.radio { margin-top: 8px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.rrow { display: flex; gap: 10px; padding: 8px 10px; border-top: 1px solid var(--line-soft); }
.rrow:first-child { border-top: 0; }
.rrow:nth-child(odd) { background: var(--card-2); }
.who { flex: 0 0 38px; height: 22px; border-radius: 3px; font-family: var(--f-mono); font-weight: 700;
  font-size: .74em; color: #fff; display: flex; align-items: center; justify-content: center; }
.who.pil { background: var(--teal); }
.who.twr { background: var(--navy); }
.msg { font-size: .92em; }
.fill { background: var(--amber-soft); border: 1px dashed var(--brass); border-radius: 3px;
  padding: 0 4px; color: var(--orange-d); font-weight: 600; }

/* ============ Pied de page ============ */

footer.site {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 24px 44px;
  color: var(--muted);
  font-family: var(--f-mono);
  font-size: 0.78rem;
  line-height: 1.6;
  border-top: 2px solid var(--brass);
}

/* ============ Impression ============ */

@media print {
  header.site, nav.main, footer.site, .no-print, button, .btn { display: none !important; }
  body { background: #fff; font-size: 12px; color: #000; }
  main { padding: 0; max-width: none; }
  .card { box-shadow: none; border: 1px solid #999; border-left: 3px solid #555; break-inside: avoid; }
  .print-only { display: block !important; }
  a { color: inherit; text-decoration: none; }
}

.print-only { display: none; }

/* Tableaux de données sur petit écran : les rendre défilables horizontalement
   plutôt que de laisser toute la page déborder (constaté sur le tableau
   GO / NO-GO du dossier de vol : 400 px de contenu pour 375 px d'écran). */
@media (max-width: 560px) {
  table.data { display: block; overflow-x: auto; max-width: 100%; }
}