/* ==========================================================================
   elearning.css — the only stylesheet /elearning loads.

   It deliberately does NOT load /assets/site.css, for the same reason
   b2b/shop.html does not: site.css styles bare `nav`, `footer`, `body` and
   `html` selectors, and this app uses <nav> for its module rail and <footer>
   for its previous/next bar. Loading both would make the rail
   position:fixed at top:44px. site.css also carries a global
   `[data-nl],[data-fr],[data-en] { display:none !important }` for the
   marketing site's language scheme; this page is French-only and never uses
   those attributes.

   Token values are identical to site.css and shop.css — only the names differ
   there (--muted-sage here is --accent in the Design export). The one addition
   is --sage-text.
   ========================================================================== */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --white:      #F7F6F3;
  --off-white:  #EEECEA;
  --beige:      #E4E2DE;
  --border:     #DEDAD4;
  --deep-navy:  #2A2A2A;
  --navy-mid:   #3D3D3D;
  --navy-soft:  #4A4A4A;
  --text-light: #5A5A5A;
  /* Muted text needs two values, because it appears on both grounds.
     #8A8783 (the Design original) reads at 3.58:1 on white — under AA for
     the 15px metadata it carries — and --muted-grey below fixes that. On the
     navy rail the fix is the opposite direction, hence --rail-muted. */
  --muted-grey: #6B6864;
  --rail-muted: #9B9894;
  --pale-grey:  #A8A5A0;   /* borders and dividers only — never text */
  --dim:        #C9C6C1;
  --pure-white: #FFFFFF;
  --muted-sage: #8FA99B;
  --sage-wash:  #F1F4F2;

  /* Text-carrying accent.
     --muted-sage (#8FA99B) is the brand green and reads at 2.34:1 on --white,
     roughly half of what WCAG AA asks for body text. In the Design original it
     carried every call to action, eyebrow and link. It stays for fills, rules
     and anything on the dark rail (where it reaches 5.68:1); this darker tone
     takes over wherever the accent has to be READ on a light ground. */
  --sage-text:  #4F6A5C;


  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-kr: 'Noto Serif KR', Georgia, serif;

  --rail-w: 340px;
}

html { scroll-behavior: smooth; }

body {
  background: var(--white);
  color: var(--deep-navy);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Focus is visible on everything, everywhere. The Design original had no
   focusable controls at all — 41 click handlers on <div>s — so this is the
   single most important rule in the file. */
:focus-visible {
  outline: 2px solid var(--sage-text);
  outline-offset: 3px;
  border-radius: 1px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; top: -100%; left: 0;
  background: var(--deep-navy); color: #fff;
  padding: 10px 18px; font-size: 13px; letter-spacing: 0.05em;
  z-index: 100; text-decoration: none;
}
.skip-link:focus { top: 0; }

/* ── site bar ─────────────────────────────────────────────────────── */

.site-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 12px 32px;
  border-bottom: 1px solid var(--border);
  background: var(--white);
  color: var(--deep-navy);
}
.site-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.site-logo-sub {
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-light); white-space: nowrap;
}
.site-back {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sage-text); text-decoration: none;
}
.site-back:hover { color: var(--deep-navy); }

/* ── shared type ──────────────────────────────────────────────────── */

.eyebrow {
  font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--sage-text); font-weight: 500;
}

.screen-title {
  font-family: var(--font-display); font-size: clamp(34px, 4.2vw, 52px);
  font-weight: 300; line-height: 1.1; letter-spacing: -0.01em;
  margin-top: 14px; text-wrap: balance;
}

.lede {
  font-size: 20px; font-weight: 300; line-height: 1.6;
  color: var(--navy-soft); max-width: 66ch; margin-top: 20px; text-wrap: pretty;
}
/* Tool screens have no <h2> of their own — the module <h1> already names them —
   so the lede sits at the top of .screen and needs no offset from a heading. */
.lede-tool { margin-top: 0; }

.prose {
  font-size: 20px; font-weight: 300; line-height: 1.7;
  color: var(--navy-soft); max-width: 66ch; margin-top: 24px; text-wrap: pretty;
}

.note {
  margin-top: 26px; padding: 20px 24px;
  background: var(--pure-white); border-left: 2px solid var(--muted-sage);
  font-size: 18px; font-weight: 300; line-height: 1.6;
  color: var(--navy-soft); max-width: 74ch; text-wrap: pretty;
}

/* ── buttons ──────────────────────────────────────────────────────── */

.btn {
  font-family: var(--font-body); font-size: 15px;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 15px 32px; cursor: pointer; border: 1px solid transparent;
  background: none; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-solid { background: var(--deep-navy); color: var(--white); border-color: var(--deep-navy); }
.btn-solid:hover { background: var(--navy-mid); }
.btn-outline { color: var(--deep-navy); border-color: var(--border); }
.btn-outline:hover { border-color: var(--deep-navy); }
.btn:disabled { color: var(--dim); border-color: var(--beige); cursor: not-allowed; background: none; }

.link-btn {
  background: none; border: none; cursor: pointer; padding: 6px 0;
  min-height: 28px;
  font-family: var(--font-body); font-size: 15px; letter-spacing: 0.08em;
  color: var(--sage-text); text-transform: uppercase;
}
.link-btn:hover { color: var(--deep-navy); }

.chip {
  font-family: var(--font-body); font-size: 15px; font-weight: 300;
  padding: 8px 18px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--pure-white);
  color: var(--navy-soft); cursor: pointer; white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.chip:hover { border-color: var(--muted-sage); color: var(--deep-navy); }
.chip-on { background: var(--deep-navy); border-color: var(--deep-navy); color: var(--white); }
.chip-add { border-style: dashed; color: var(--text-light); }

/* This deletes a colleague's whole record, and it sits right next to the chip you
   tap to SWITCH profile — so at 23x26 a mis-tap on a shared counter tablet hit
   the wrong one. Padded out to a 32px target; the × itself is unchanged. */
.chip-remove {
  background: none; border: none; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--pale-grey);
  min-width: 32px; min-height: 32px; padding: 4px 8px;
}
.chip-remove:hover { color: var(--deep-navy); }

/* ── home ─────────────────────────────────────────────────────────── */

.home { min-height: 100vh; background: var(--white); }
.home-inner { max-width: 1180px; margin: 0 auto; padding: 72px 40px 96px; }

.home-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 20px; border-bottom: 1px solid var(--beige); padding-bottom: 20px;
}
.home-brand {
  font-size: 14px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--sage-text); font-weight: 500;
}
.home-space {
  font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-light);
}

.home-title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(44px, 7vw, 80px); line-height: 1.04;
  letter-spacing: -0.015em; margin-top: 48px; text-wrap: balance;
}
.home-lede {
  font-size: 22px; font-weight: 300; line-height: 1.6;
  color: var(--navy-soft); margin-top: 24px; max-width: 62ch; text-wrap: pretty;
}

.gate {
  margin-top: 44px; padding: 36px 40px;
  background: var(--pure-white); border: 1px solid var(--beige);
}
.gate-title { font-family: var(--font-display); font-size: 34px; font-weight: 300; line-height: 1.15; }
.gate-body { font-size: 17px; font-weight: 300; color: var(--navy-soft); margin-top: 10px; max-width: 60ch; }
.gate-form { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; align-items: stretch; }
.gate-input {
  flex: 1 1 260px; padding: 16px 20px; border: 1px solid var(--border);
  background: var(--white); font-family: var(--font-body); font-size: 18px;
  font-weight: 300; color: var(--deep-navy);
}
.gate-input:focus-visible { border-color: var(--sage-text); }

.profile-bar {
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  margin-top: 40px; padding: 18px 24px;
  background: var(--pure-white); border: 1px solid var(--beige);
}
.profile-label {
  font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-light);
}
.profile-empty { font-size: 15px; color: var(--muted-grey); }
.profile-list { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; flex: 1; }
.profile-item { display: flex; align-items: center; gap: 2px; }

.tiles { display: grid; gap: 1px; background: var(--beige); border: 1px solid var(--beige); }
.tiles-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 56px; }
.tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: none; }
.tiles-1 { grid-template-columns: minmax(0, 1fr); border-top: none; }

.tile {
  display: flex; flex-direction: column; gap: 14px; text-align: left;
  background: var(--pure-white); border: none; cursor: pointer;
  padding: 44px 40px; min-height: 220px; font-family: var(--font-body);
  color: var(--deep-navy); transition: background 0.2s ease;
}
.tile:hover { background: #FCFCFB; }
.tile-dark { background: var(--deep-navy); color: var(--white); min-height: 280px; }
.tile-dark:hover { background: var(--navy-mid); }
.tile-dark .eyebrow { color: var(--muted-sage); }

.tile-title { font-family: var(--font-display); font-size: 40px; font-weight: 300; line-height: 1.1; }
.tile-body { font-size: 17px; font-weight: 300; line-height: 1.6; color: var(--navy-soft); max-width: 46ch; }
.tile-dark .tile-body { color: var(--dim); }
.tile-foot {
  margin-top: auto; padding-top: 26px; display: flex;
  justify-content: space-between; align-items: baseline; gap: 16px;
  border-top: 1px solid var(--beige);
}
.tile-dark .tile-foot { border-top-color: var(--navy-soft); }
.tile-meta { font-size: 15px; font-weight: 300; }
.tile-cta {
  font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sage-text); margin-left: auto;
}
.tile-dark .tile-cta { color: var(--muted-sage); }

.home-foot {
  margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--beige);
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 20px; flex-wrap: wrap;
  font-size: 15px; font-weight: 300; color: var(--muted-grey);
}

/* ── shell ────────────────────────────────────────────────────────── */

/* minmax(0, 1fr), not 1fr. A `1fr` track carries min-width:auto, so it refuses to
   shrink below its content — and .compare-table sets min-width:560px on purpose,
   because .table-wrap is there to scroll it. With a bare 1fr the TRACK grew to
   560px instead, pushing the whole page (rail included) sideways on a phone while
   .table-wrap never scrolled, being exactly as wide as its content. */
.shell { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: 100vh; }

.rail {
  background: var(--deep-navy); color: var(--white);
  padding: 36px 0; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.rail-head { padding: 0 30px; }
.rail-back {
  background: none; border: none; cursor: pointer; padding: 6px 0;
  min-height: 24px;
  font-family: var(--font-body); font-size: 14px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted-sage);
}
.rail-back:hover { color: var(--white); }
.rail-title { font-family: var(--font-display); font-size: 32px; font-weight: 300; line-height: 1.15; margin-top: 14px; }
.rail-sub { font-size: 14px; color: var(--rail-muted); margin-top: 4px; }

.rail-progress { padding: 26px 30px 0; }
.rail-progress-row {
  display: flex; justify-content: space-between;
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
}
.meter { height: 3px; background: var(--navy-soft); margin-top: 10px; }
.meter-fill { height: 3px; background: var(--muted-sage); transition: width 0.3s ease; }

.rail-nav { margin-top: 30px; }
.rail-group { margin-bottom: 24px; }
.rail-group-head {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 0 30px 8px; font-family: var(--font-body);
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--rail-muted); background: none; border: none; text-align: left;
}
.rail-group-toggle { cursor: pointer; }
.rail-group-toggle:hover { color: var(--white); }
.rail-chevron { color: var(--muted-sage); font-size: 14px; }
.rail-list { list-style: none; }

.rail-item {
  display: flex; gap: 12px; align-items: center; width: 100%;
  padding: 11px 30px; cursor: pointer; text-align: left;
  background: none; border: none; border-left: 2px solid transparent;
  font-family: var(--font-body); color: var(--white);
  transition: background 0.2s ease;
}
.rail-item:hover { background: #333333; }
.rail-item-on { background: #333333; border-left-color: var(--muted-sage); }
.rail-mark { font-size: 15px; width: 16px; flex: 0 0 16px; color: var(--rail-muted); }
.rail-mark-done { color: var(--muted-sage); }
.rail-item-title { flex: 1; font-size: 16px; font-weight: 300; line-height: 1.35; }
.rail-score { font-size: 13px; white-space: nowrap; color: var(--dim); }
.rail-score-perfect { color: var(--muted-sage); }

.shell-main { padding: 48px 64px 72px; max-width: 1080px; }

.resume {
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
  background: var(--pure-white); border-left: 2px solid var(--muted-sage);
  padding: 14px 22px; margin-bottom: 26px;
  font-size: 17px; color: var(--navy-soft);
}
.resume span { flex: 1; }

.module-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 32px; flex-wrap: wrap;
  border-bottom: 1px solid var(--beige); padding-bottom: 22px;
}
.module-ident { display: flex; gap: 24px; align-items: center; }
.module-logo {
  width: 96px; height: 96px; flex: 0 0 96px; object-fit: contain;
  border: 1px solid var(--beige); background: var(--pure-white); padding: 14px;
}
.module-title { font-family: var(--font-display); font-size: 42px; font-weight: 300; line-height: 1.1; margin-top: 8px; }
.module-meta { font-size: 15px; font-weight: 300; color: var(--muted-grey); margin-top: 6px; }

.dots { --dot-gap: 16px; display: flex; gap: var(--dot-gap); align-items: center; padding-bottom: 6px; }
.dot {
  width: 8px; height: 8px; background: var(--beige); border: none;
  cursor: pointer; padding: 0; transition: width 0.2s ease, background 0.2s ease;
  position: relative;
}
/* An 8px square is not a tap target. This overlay gives each dot a real one —
   full row height, and as wide as the dot plus its gap, so neighbours never
   overlap and you cannot land on the wrong screen. The dot itself is untouched. */
.dot::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + var(--dot-gap)); height: 44px;
}
.dot:hover { background: var(--pale-grey); }
.dot-on { width: 24px; background: var(--muted-sage); }

.screen { margin-top: 44px; }

.module-foot {
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--beige);
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap;
}
/* The two controls travel together, so they stay side by side when the footer
   wraps onto a second line on a phone. */
.module-foot-nav { display: flex; gap: 12px; align-items: center; }
.screen-count { font-size: 15px; font-weight: 300; color: var(--muted-grey); }

/* ── screen content ───────────────────────────────────────────────── */

.shot { margin-top: 32px; height: clamp(240px, 40vw, 520px); background: var(--beige); }
.shot-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* A diagram, not a photograph. `cover` fills the band by cropping whatever does
   not fit, which on the square kb-mouchoir infographic cut the title off the top
   and the four step boxes off the bottom — around 45% of it at desktop width.

   The fixed band height goes too: a diagram is read, not glanced at, so it takes
   the full column width on a phone rather than being letterboxed down to 240px
   with the labels too small to make out. The cap keeps it from dominating a wide
   desktop column, where the beige then reads as a mat. */
.shot-contain { height: auto; display: flex; justify-content: center; background: var(--beige); }
.shot-contain .shot-img {
  width: auto; height: auto;
  max-width: 100%; max-height: clamp(320px, 70vh, 560px);
  object-fit: contain;
}

.shot-empty {
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--pale-grey); background: var(--off-white);
  height: clamp(160px, 22vw, 260px);
}
.shot-caption {
  font-size: 14px; letter-spacing: 0.06em; color: var(--text-light);
  text-align: center; padding: 0 24px; max-width: 46ch;
}

.points {
  margin-top: 40px; list-style: none; display: grid; gap: 1px;
  background: var(--beige); border-block: 1px solid var(--beige);
}
.point { background: var(--pure-white); padding: 20px 26px; display: flex; gap: 20px; align-items: baseline; }
.point-mark { font-family: var(--font-display); font-size: 24px; color: var(--muted-sage); min-width: 26px; }
.point span:last-child { font-size: 18px; font-weight: 300; line-height: 1.55; }

.deflist { margin-top: 36px; border-top: 1.5px solid var(--deep-navy); }
.deflist-term {
  font-size: 18px; font-weight: 400; padding-top: 18px;
  float: left; width: 280px; clear: left;
}
.deflist-desc {
  font-size: 18px; font-weight: 300; color: var(--navy-soft); line-height: 1.55;
  padding: 18px 0 18px 316px; border-bottom: 1px solid var(--beige);
}

.case { margin-top: 32px; display: grid; gap: 1px; background: var(--beige); border: 1px solid var(--beige); }
.case-row { background: var(--pure-white); padding: 22px 26px; display: grid; grid-template-columns: 220px 1fr; gap: 24px; }
.case-label { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-light); }
.case-text { font-size: 18px; font-weight: 300; line-height: 1.6; }

.case-props { margin-top: 32px; }
.props { margin-top: 14px; list-style: none; display: grid; gap: 1px; background: var(--beige); border: 1px solid var(--beige); }
.prop { background: var(--pure-white); padding: 18px 24px; display: flex; gap: 20px; align-items: baseline; font-size: 18px; font-weight: 300; }
.prop-n { font-family: var(--font-display); font-size: 22px; color: var(--muted-sage); }

.table-wrap { margin-top: 32px; overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.compare-table th, .compare-table td {
  text-align: left; padding: 18px 20px; vertical-align: top;
  border-bottom: 1px solid var(--beige); font-size: 17px; font-weight: 300;
}
.compare-table thead th {
  border-bottom: 1.5px solid var(--deep-navy); font-weight: 400;
  font-family: var(--font-display); font-size: 22px;
}
.compare-table tbody th { font-weight: 400; color: var(--deep-navy); width: 180px; }
.compare-table td { color: var(--navy-soft); }
.cmp-brand { display: block; font-family: var(--font-body); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage-text); }
.cmp-name { display: block; font-size: 20px; line-height: 1.25; }

/* ── layering steps ───────────────────────────────────────────────── */

.gradient-key { display: flex; align-items: center; gap: 18px; margin-top: 40px; }
.gradient-key span { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-light); white-space: nowrap; }
.gradient-key-end { color: var(--sage-text); }
.gradient-bar { flex: 1; height: 1px; background: linear-gradient(90deg, var(--beige), var(--muted-sage)); }

.steps { margin-top: 18px; list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--beige); border: 1px solid var(--beige); }
/* width:100% matters. These are <button>s, which size to their content rather
   than filling their grid cell, so the cards came out at seven different widths
   with the container's beige showing through on the right — most visible in one
   column on a phone, where each card ended somewhere different. */
.step {
  position: relative; display: flex; flex-direction: column; gap: 8px; width: 100%;
  background: var(--pure-white); border: none; cursor: pointer; text-align: left;
  padding: 26px 22px; min-height: 230px; font-family: var(--font-body); color: var(--deep-navy);
  transition: background 0.2s ease;
}
.step:hover, .step-open { background: var(--sage-wash); }
.step-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--muted-sage); }
.step-n { font-family: var(--font-display); font-size: 46px; font-weight: 300; line-height: 1; color: var(--sage-text); }
.step-title { font-size: 18px; font-weight: 400; line-height: 1.3; }
.step-desc { font-size: 15px; font-weight: 300; line-height: 1.5; color: var(--navy-soft); }
.step-tags { margin-top: auto; padding-top: 16px; display: flex; flex-wrap: wrap; gap: 6px; }

.tag {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 11px; white-space: nowrap;
  border: 1px solid var(--beige); color: var(--text-light); background: none;
}
.tag-night { background: var(--deep-navy); color: var(--white); border-color: var(--deep-navy); }
.tag-morning { background: var(--muted-sage); color: #14201A; border-color: var(--muted-sage); }
.tag-both { background: var(--sage-wash); color: var(--navy-soft); border-color: var(--sage-wash); }

/* Sits below its grid, not inside it — see openStepDetail() in screens.js. */
.detail {
  margin-top: 1px; background: var(--pure-white);
  border: 1px solid var(--beige);
  border-top: 2px solid var(--muted-sage); padding: 32px 34px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
}
.detail-head { display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap; }
.detail-n { font-family: var(--font-display); font-size: 56px; font-weight: 300; line-height: 1; color: var(--sage-text); }
.detail-title { font-family: var(--font-display); font-size: 34px; font-weight: 300; line-height: 1.15; }
.detail-ko { font-family: var(--font-kr); font-size: 24px; font-weight: 300; color: var(--muted-grey); }
.detail-text { font-size: 19px; font-weight: 300; line-height: 1.65; color: var(--navy-soft); margin-top: 12px; max-width: 74ch; text-wrap: pretty; }
.detail-text-muted { color: var(--muted-grey); }

.actifs { margin-top: 36px; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--beige); border: 1px solid var(--beige); }
.actif {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; width: 100%;
  background: var(--pure-white); border: none; cursor: pointer; text-align: left;
  padding: 28px 24px; min-height: 240px; font-family: var(--font-body); color: var(--deep-navy);
  transition: background 0.2s ease;
}
.actif:hover, .actif-open { background: var(--sage-wash); }
.actif-open { box-shadow: inset 0 3px 0 var(--muted-sage); }
.actif-ko {
  position: absolute; right: -6px; bottom: -20px; pointer-events: none;
  font-family: var(--font-kr); font-size: 78px; font-weight: 300;
  color: var(--deep-navy); opacity: 0.05; line-height: 1;
}
.actif-title { font-family: var(--font-display); font-size: 30px; font-weight: 300; line-height: 1.15; margin-top: 6px; }
.actif-desc { font-size: 15px; font-weight: 300; line-height: 1.5; color: var(--navy-soft); }
.actif-cta { margin-top: auto; padding-top: 18px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage-text); }

.linked { margin-top: 26px; align-self: stretch; }
.linked-list { margin-top: 12px; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--beige); border: 1px solid var(--beige); max-width: 900px; }
.linked-item { background: var(--pure-white); padding: 20px 22px; display: flex; gap: 18px; align-items: flex-start; }
.linked-brand { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage-text); }
.linked-name { font-size: 17px; font-weight: 400; line-height: 1.35; margin-top: 6px; }
.linked-role { font-size: 15px; font-weight: 300; line-height: 1.45; color: var(--muted-grey); margin-top: 6px; }

.thumb { width: 88px; height: 88px; flex: 0 0 88px; background: var(--beige); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-empty { border: 1px dashed var(--border); background: var(--off-white); }
.thumb-lg { width: 132px; height: 132px; flex: 0 0 132px; }

/* ── questions ────────────────────────────────────────────────────── */

.questions { margin-top: 36px; list-style: none; display: grid; gap: 32px; }
.question-head { display: flex; gap: 18px; align-items: baseline; }
.question-n { font-family: var(--font-display); font-size: 26px; color: var(--muted-sage); min-width: 34px; }
.question-prompt { font-size: 21px; font-weight: 300; line-height: 1.45; max-width: 62ch; text-wrap: pretty; }
.options { margin: 18px 0 0 52px; display: grid; gap: 10px; }
.option {
  display: flex; justify-content: space-between; gap: 18px; align-items: center;
  padding: 16px 22px; border: 1px solid var(--border); background: var(--pure-white);
  font-family: var(--font-body); font-size: 17px; font-weight: 300; text-align: left;
  color: var(--deep-navy); cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease;
}
.option:hover:not(:disabled) { border-color: var(--muted-sage); background: var(--sage-wash); }
.option:disabled { cursor: default; }
.option-right { border-color: var(--muted-sage); background: var(--sage-wash); }
.option-wrong { border-color: var(--pale-grey); color: var(--muted-grey); }
.option-muted { color: var(--muted-grey); }
.option-mark { font-size: 16px; }
.explain-live { margin-left: 52px; }
.explain {
  margin-top: 16px; padding: 14px 20px; background: var(--pure-white);
  border-left: 2px solid var(--muted-sage); font-size: 17px; font-weight: 300;
  line-height: 1.55; color: var(--navy-soft); max-width: 70ch;
}

/* ── certificate ──────────────────────────────────────────────────── */

.certificate { border: 1px solid var(--deep-navy); background: var(--pure-white); padding: 48px 44px; }
.certificate-locked { border-color: var(--beige); }
.cert-brand { font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--sage-text); font-weight: 500; }
.cert-title { font-family: var(--font-display); font-size: 48px; font-weight: 300; line-height: 1.1; margin-top: 22px; }
.cert-sub { font-family: var(--font-display); font-style: italic; font-size: 24px; color: var(--sage-text); margin-top: 10px; }
.cert-body { border-top: 1px solid var(--beige); margin-top: 32px; padding-top: 24px; font-size: 18px; font-weight: 300; line-height: 1.7; color: var(--navy-soft); max-width: 70ch; }
.cert-name { margin-top: 22px; }
.cert-name-label { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-light); }
.cert-name-value { font-family: var(--font-display); font-size: 36px; font-weight: 300; border-bottom: 1px solid var(--deep-navy); padding-bottom: 8px; max-width: 520px; margin-top: 8px; }
.cert-facts { margin-top: 34px; display: flex; gap: 48px; flex-wrap: wrap; }

/* The document is a record for the officine's own training file, not a
   certification — AYOMI LAB is a distributor, not an accredited body. This line
   prints with it. */
.cert-mention {
  margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--beige);
  font-size: 13px; font-weight: 300; line-height: 1.5; color: var(--muted-grey);
  max-width: 62ch;
}.cert-facts dt { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-light); }
.cert-facts dd { font-family: var(--font-display); font-size: 28px; font-weight: 300; margin-top: 4px; }
.cert-actions { margin-top: 28px; }

/* ── tools ────────────────────────────────────────────────────────── */

.search-bar { margin-top: 32px; }
.search-input {
  width: 100%; max-width: 640px; padding: 16px 20px;
  border: 1px solid var(--border); background: var(--pure-white);
  font-family: var(--font-body); font-size: 18px; font-weight: 300; color: var(--deep-navy);
}
.search-input:focus-visible { border-color: var(--sage-text); }

.filters { margin-top: 24px; display: grid; gap: 14px; }
.filter-row { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: baseline; }
.filter-label { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-light); }
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.filters-clear { justify-self: start; margin-left: 136px; }

.result-count { margin-top: 26px; font-size: 15px; color: var(--muted-grey); letter-spacing: 0.04em; }

.products { margin-top: 14px; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--beige); border: 1px solid var(--beige); }
.product { background: var(--pure-white); padding: 26px 28px; display: flex; gap: 26px; align-items: flex-start; }
.product-body { flex: 1; min-width: 0; }
.product-brand { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage-text); }
.product-name { font-family: var(--font-display); font-size: 28px; font-weight: 300; line-height: 1.2; margin-top: 6px; }
.product-claim { font-size: 17px; font-weight: 300; line-height: 1.5; color: var(--navy-soft); margin-top: 10px; max-width: 62ch; }
.product-usage { font-size: 15px; font-weight: 300; color: var(--muted-grey); margin-top: 12px; max-width: 62ch; }

.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
/* Square, like the .tag it extends. These are the same token — a skin-concern
   label — and it was rendering as a pill on product cards and a rectangle on the
   layering steps, in a stylesheet that is otherwise square throughout. */
.tag-btn { cursor: pointer; font-size: 13px; padding: 5px 13px; background: var(--white); }
.tag-btn:hover { border-color: var(--muted-sage); color: var(--deep-navy); }
.tag-on { background: var(--sage-wash); border-color: var(--muted-sage); color: var(--deep-navy); }

.formats { margin-top: 16px; }
.formats-label { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-light); }
.format-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.format {
  font-family: var(--font-body); font-size: 15px; font-weight: 300;
  padding: 7px 14px; border: 1px solid var(--border); background: var(--pure-white);
  color: var(--navy-soft); cursor: pointer; white-space: nowrap;
}
.format:hover { border-color: var(--muted-sage); }
.format-on { background: var(--deep-navy); border-color: var(--deep-navy); color: var(--white); }

.codes { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 18px; }
.code { font-size: 15px; letter-spacing: 0.06em; color: var(--deep-navy); font-variant-numeric: tabular-nums; }

.fiche { margin-top: 32px; background: var(--pure-white); border: 1px solid var(--beige); padding: 34px 36px; }
.fiche-brand { font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sage-text); }
.fiche-title { font-family: var(--font-display); font-size: 34px; font-weight: 300; margin-top: 8px; }
/* minmax(0, …) for the same reason as .shell: the step is a flex row whose
   thumbnail does not shrink, so with a bare auto track it measured 314px inside
   a 253px card and broke out of .fiche, squeezing the product name to 102px and
   six wrapped lines. */
.routine {
  margin-top: 24px; list-style: none;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px;
  background: var(--beige); border: 1px solid var(--beige);
}
.routine-step { background: var(--pure-white); padding: 20px 22px; display: flex; gap: 20px; align-items: center; }
.routine-n { font-family: var(--font-display); font-size: 30px; color: var(--sage-text); min-width: 40px; }
.routine-slot { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-light); }
.routine-product { font-size: 18px; font-weight: 400; line-height: 1.35; margin-top: 4px; }
.routine-when { font-size: 15px; font-weight: 300; color: var(--muted-grey); margin-top: 4px; }
.fiche-notes { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.fiche-note { font-size: 17px; font-weight: 300; line-height: 1.55; color: var(--navy-soft); margin-top: 8px; }

.cmp-pickers { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.cmp-picker .search-input { max-width: none; }
.cmp-picker .filter-label { display: block; margin-bottom: 8px; }
.cmp-options { list-style: none; border: 1px solid var(--border); border-top: none; }
.cmp-option {
  display: block; width: 100%; text-align: left; padding: 12px 18px;
  background: var(--pure-white); border: none; border-bottom: 1px solid var(--beige);
  font-family: var(--font-body); font-size: 16px; font-weight: 300; color: var(--deep-navy); cursor: pointer;
}
.cmp-option:hover { background: var(--sage-wash); }
.cmp-result { margin-top: 36px; }

.gloss-group { margin-top: 36px; }
.gloss-group-title { font-family: var(--font-display); font-size: 28px; font-weight: 300; }

.flashcard {
  margin-top: 24px; width: 100%; min-height: 280px; padding: 44px 40px;
  background: var(--pure-white); border: 1px solid var(--beige); cursor: pointer;
  display: flex; flex-direction: column; gap: 18px; text-align: left;
  font-family: var(--font-body); color: var(--deep-navy);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.flashcard-back { background: var(--deep-navy); border-color: var(--deep-navy); color: var(--white); }
.flashcard-side { font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sage-text); }
.flashcard-back .flashcard-side { color: var(--muted-sage); }
.flashcard-text { font-family: var(--font-display); font-size: clamp(26px, 3.4vw, 40px); font-weight: 300; line-height: 1.25; text-wrap: pretty; }
.flashcard-hint { margin-top: auto; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-grey); }
.flashcard-back .flashcard-hint { color: var(--rail-muted); }
.deck-nav { margin-top: 20px; display: flex; gap: 20px; align-items: center; }
.deck-count { font-size: 15px; color: var(--muted-grey); font-variant-numeric: tabular-nums; }

.review { margin-top: 36px; list-style: none; display: grid; gap: 1px; background: var(--beige); border: 1px solid var(--beige); }
.review-item { background: var(--pure-white); padding: 24px 26px; }
.review-q { font-size: 19px; font-weight: 300; line-height: 1.45; margin-top: 8px; max-width: 64ch; }
.review-line { display: flex; gap: 14px; align-items: baseline; margin-top: 10px; flex-wrap: wrap; }
.review-label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-light); min-width: 140px; }
.review-wrong { font-size: 17px; color: var(--muted-grey); text-decoration: line-through; }
.review-right { font-size: 17px; color: var(--sage-text); font-weight: 400; }
.review-item .explain { margin-left: 0; }

.news { margin-top: 36px; list-style: none; display: grid; gap: 1px; background: var(--beige); border: 1px solid var(--beige); }
.news-item { background: var(--pure-white); padding: 26px 28px; }
.news-meta { display: flex; gap: 14px; align-items: baseline; }
.news-kind { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage-text); font-weight: 500; }
.news-date { font-size: 13px; color: var(--muted-grey); }
.news-title { font-family: var(--font-display); font-size: 28px; font-weight: 300; margin-top: 8px; }
.news-body { font-size: 17px; font-weight: 300; line-height: 1.6; color: var(--navy-soft); margin-top: 8px; max-width: 70ch; }

/* ── print ────────────────────────────────────────────────────────── */

/* Print-only blocks are hidden on screen and revealed below, so printing gives
   a readable handout instead of a screenshot of the interface. */
.print-sheet { display: none; }

@page {
  /* Without this the handout runs edge to edge — .shell-main drops its padding
     for print and the browser's default margin is narrower than a document of
     this kind wants. 18mm keeps the measure readable on A4 and US Letter. */
  margin: 18mm;
}

@media print {
  [data-print-hide] { display: none !important; }
  body { background: #FFFFFF; }
  .shell { display: block; min-height: 0; }
  .shell-main { padding: 0; max-width: none; }
  .screen { margin-top: 0; }

  .print-sheet { display: block; }
  .print-brand { font-size: 10pt; letter-spacing: 0.2em; text-transform: uppercase; color: #6B7F74; }
  .print-title { font-family: var(--font-display); font-size: 26pt; font-weight: 300; margin: 6pt 0 18pt; }
  .print-block { margin-bottom: 16pt; break-inside: avoid; }
  .print-block-title { font-size: 12pt; font-weight: 500; border-bottom: 1px solid #DDD; padding-bottom: 4pt; margin-bottom: 8pt; }
  .print-line { font-size: 10.5pt; font-weight: 300; line-height: 1.5; margin-bottom: 4pt; }

  .certificate { border: 1px solid #2A2A2A !important; margin: 0; break-inside: avoid; }
  .fiche { border: 1px solid #2A2A2A; margin: 0; break-inside: avoid; }
}

/* ── responsive ───────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  .actifs { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }   /* see the note at .shell */
  .rail { position: static; height: auto; }
  .shell-main { padding: 32px 24px 56px; }
  .tiles-2, .tiles-3 { grid-template-columns: minmax(0, 1fr); }
  .home-inner { padding: 48px 24px 64px; }
  .cmp-pickers, .fiche-notes, .linked-list { grid-template-columns: 1fr; }
  .deflist-term { float: none; width: auto; padding-bottom: 4px; }
  .deflist-desc { padding: 0 0 18px; }
  .case-row { grid-template-columns: 1fr; gap: 8px; }
  .filter-row { grid-template-columns: 1fr; }
  .filters-clear { margin-left: 0; }
  .options, .explain-live { margin-left: 0; }
}

@media (max-width: 640px) {
  .steps, .actifs { grid-template-columns: 1fr; }
  .product { flex-direction: column; }
  /* Two 148px buttons plus the counter and two 20px gaps came to ~386px against
     327px of usable width, so the deck pushed the page sideways. */
  .deck-nav { gap: 12px; justify-content: space-between; }
  .deck-nav .btn { padding-left: 16px; padding-right: 16px; }

  /* Two equal columns rather than a flex row: the last screen of a module says
     "Module suivant" or "Terminer le parcours", which together with "Précédent"
     overflows a phone and drops the pair onto separate lines. Sharing the width
     keeps them side by side whatever the label says. */
  /* The routine sheet is the thing the customer walks out with, so the product
     name gets the room instead of the chrome: tighter card padding, a smaller
     thumbnail and number. Together with minmax(0,…) on .routine this takes the
     name from 102px over six lines to something readable. */
  .fiche { padding: 22px 18px; }
  .routine-step { gap: 12px; padding: 16px 14px; }
  .routine-step .thumb { width: 60px; height: 60px; flex-basis: 60px; }
  .routine-n { font-size: 22px; min-width: 24px; }

  /* A three-column comparison cannot fit a phone: at its 560px minimum it forced
     233px of sideways scrolling with nothing to say it scrolled, and letting it
     shrink instead squeezed every cell to seven lines. So each row becomes a
     block, and each value is introduced by the column it belongs to. */
  .table-wrap { overflow-x: visible; }
  .compare-table { min-width: 0; display: block; }
  .compare-table thead { display: none; }
  .compare-table tbody, .compare-table tr, .compare-table th, .compare-table td { display: block; width: auto; }
  .compare-table tbody tr {
    padding: 16px 0; border-bottom: 1px solid var(--beige);
  }
  .compare-table tbody th {
    width: auto; padding: 0 0 8px; border: none;
    font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--text-light);
  }
  .compare-table tbody td { padding: 6px 0 0; border: none; }
  .compare-table tbody td::before {
    content: attr(data-head); display: block;
    font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--sage-text); margin-bottom: 2px;
  }

  /* stretch, so the pair stays the same height when "Terminer le parcours"
     wraps to two lines and "Précédent" does not. */
  .module-foot-nav {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    width: 100%; align-items: stretch;
  }
  .module-foot-nav .btn { padding-left: 12px; padding-right: 12px; }
  .site-bar { padding: 10px 20px; }
  .site-logo-sub { display: none; }
  .module-ident { gap: 16px; }
  .module-logo { width: 64px; height: 64px; flex-basis: 64px; padding: 10px; }
}

/* Small phones — 320px, the iPhone SE class of device. Everything below is the
   same story: a fixed-size piece of chrome that was affordable at 375px and is
   not at 320. */
@media (max-width: 400px) {
  .home-inner { padding: 48px 20px 64px; }
  .shell-main { padding: 28px 16px 48px; }

  /* The packshot and the number leave ~100px for the product name, which is the
     one thing the customer's sheet exists to communicate. Let the text take its
     own full-width line underneath instead. */
  .routine-step { flex-wrap: wrap; }
  .routine-step > div:last-child { flex: 1 1 100%; min-width: 0; }

  /* 132px of packshot inside a 272px card leaves nothing for the name. */
  .product { padding: 20px 18px; gap: 16px; }
  .thumb-lg { width: 96px; height: 96px; flex-basis: 96px; }

  /* Two uppercase, letter-spaced labels will not share a 272px line. */
  .deck-nav { flex-wrap: wrap; gap: 10px; }
  .deck-nav .btn { flex: 1 1 auto; padding-left: 12px; padding-right: 12px; }
  .deck-count { flex: 1 1 100%; text-align: center; }
}

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