/* =========================================================================
   ALLO EDUCATION — Charte graphique
   Design tokens + global stylesheet
   ========================================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* Brand — primary blue family */
  --ae-primary:        #1B3FB8;   /* Bleu Allo Education */
  --ae-primary-dark:   #102A85;   /* hover, gros aplats */
  --ae-primary-deep:   #0B1F66;   /* texte sur fond clair */
  --ae-primary-soft:   #E8EEFB;   /* fond léger */
  --ae-primary-paper:  #F4F7FE;   /* fond paper */

  /* Énergie */
  --ae-orange:         #F5781C;   /* orange énergie */
  --ae-orange-dark:    #D85F0A;
  --ae-orange-soft:    #FFEEDC;

  /* Accent */
  --ae-yellow:         #FFC533;   /* jaune accent */
  --ae-yellow-dark:    #E6A82B;
  --ae-yellow-soft:    #FFF6D6;

  /* Highlight (réservé visuels couverture / titre vedette) */
  --ae-pink:           #E91E78;

  /* Sémantiques */
  --ae-success:        #1F9E5A;
  --ae-success-soft:   #E2F4EA;
  --ae-warning:        #E6A82B;
  --ae-error:          #D62E2E;
  --ae-error-soft:     #FCE7E7;

  /* Neutres */
  --ae-bg:             #FFFFFF;
  --ae-bg-cream:       #FBF8F1;
  --ae-bg-cool:        #F6F8FC;
  --ae-text:           #0F1A3D;
  --ae-text-soft:      #2B3656;
  --ae-muted:          #6A748F;
  --ae-border:         #D8DEEC;
  --ae-border-soft:    #E8ECF5;
  --ae-rule:           #C4CCDF;

  /* Typographie */
  --ae-font-title:     "Fredoka", "Nunito", system-ui, sans-serif;
  --ae-font-body:      "Nunito Sans", "Nunito", system-ui, sans-serif;
  --ae-font-mono:      "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* Échelle pouces (8.5×11 print) */
  --ae-page-w: 8.5in;
  --ae-page-h: 11in;
  --ae-margin-top: 0.5in;
  --ae-margin-bottom: 0.5in;
  --ae-margin-side: 0.55in;
  --ae-header-h: 0.95in;
  --ae-footer-h: 0.85in;
  --ae-content-w: calc(var(--ae-page-w) - 2 * var(--ae-margin-side));
  --ae-content-h: calc(var(--ae-page-h) - var(--ae-header-h) - var(--ae-footer-h) - var(--ae-margin-top) - var(--ae-margin-bottom));

  /* Radii */
  --ae-r-sm: 0.06in;
  --ae-r-md: 0.1in;
  --ae-r-lg: 0.16in;
  --ae-r-xl: 0.22in;
  --ae-r-pill: 999px;

  /* Hairlines */
  --ae-stroke: 0.012in;
  --ae-stroke-2: 0.02in;

  /* ───── Locked type scale (V1.1) ─────
     Used by ALL templates. Never override per-page. */
  --ae-fs-page-title:    0.32in;   /* PageTitle.title */
  --ae-fs-page-eyebrow:  0.10in;   /* PageTitle.eyebrow */
  --ae-fs-page-subtitle: 0.16in;   /* PageTitle.subtitle */
  --ae-fs-block-tab:     0.13in;   /* Box.bk-tab */
  --ae-fs-h-inblock:     0.16in;   /* H titles inside blocks */
  --ae-fs-consigne:      0.135in;  /* Exercise consigne */
  --ae-fs-body:          0.13in;   /* corps */
  --ae-fs-body-min:      0.12in;   /* min print */
  --ae-fs-micro:         0.105in;  /* footnote, légende */
  --ae-fs-eyebrow:       0.095in;  /* uppercase labels */

  /* ───── V1.3 Spacing tokens — SOURCE OFFICIELLE UNIQUE ─────
     Hiérarchie d'espacement officielle. Réutilisable par tous les templates.
     Ne plus jamais re-définir un gap au cas par cas, ni en pouces hardcodés.
     Tous les anciens tokens (--ae-pad-box-*, --ae-block-gap, --ae-density-*)
     sont aliasés en bas pour que les composants existants héritent automatiquement. */
  --page-header-gap:   0.40in;  /* header bleu → titre de page (V9: bump 0.34→0.40 pour respiration) */
  --page-title-gap:    0.22in;  /* titre de page → premier bloc */
  --intra-block-gap:   0.10in;  /* entre lignes/items d'un même bloc */
  --block-gap-sm:      0.16in;  /* bloc mineur → bloc mineur */
  --block-gap-md:      0.24in;  /* défaut : 2 blocs majeurs liés */
  --block-gap-lg:      0.34in;  /* nouvelle section / changement de pédagogie */
  --section-gap:       0.42in;  /* séparation de groupes (ex: cours → exercices) */
  --footer-safe-gap:   0.30in;  /* zone tampon obligatoire avant footer */
  --block-padding-x:   0.20in;  /* padding horizontal interne d'un bloc */
  --block-padding-y:   0.18in;  /* padding vertical interne d'un bloc */
  --block-tab-clear:   0.12in;  /* clearance sous l'onglet d'un bloc */
  --block-min-h:       0.46in;  /* hauteur minimale d'un bloc */
  --ae-line-h:         1.5;     /* hauteur de ligne par défaut */
  --ae-answer-h:       0.6in;   /* hauteur zone réponse par défaut */

  /* ───── Alias rétro-compat (anciens tokens → nouveaux) ─────
     NE PAS UTILISER ces noms dans du nouveau code — sont gardés pour
     que les blocs existants (.bk-box, .ae-content, etc.) suivent la charte. */
  --ae-block-gap:  var(--block-gap-md);
  --ae-pad-box-x:  var(--block-padding-x);
  --ae-pad-box-y:  var(--block-padding-y);
  --ae-density-y:  var(--block-padding-y);
  --ae-density-x:  var(--block-padding-x);
}

/* ───── Densités officielles V1.3 — air / std / dense ─────
   Une seule nomenclature. Chaque densité ne modifie QUE les tokens V1.3 ;
   les anciens noms héritent automatiquement via les alias du :root.
   .density-light est conservé en pur alias rétro-compat ci-dessous. */

.density-air,
.density-light /* @deprecated alias V9 */ {
  --block-gap-sm:      0.20in;
  --block-gap-md:      0.28in;
  --block-gap-lg:      0.40in;
  --section-gap:       0.50in;
  --footer-safe-gap:   0.34in;
  --page-header-gap:   0.44in;
  --page-title-gap:    0.26in;
  --block-padding-x:   0.22in;
  --block-padding-y:   0.20in;
  --block-tab-clear:   0.14in;
  --intra-block-gap:   0.12in;
  --ae-line-h:         1.62;
  --ae-answer-h:       0.84in;
}

.density-std {
  /* défaut = valeurs du :root, donc rien à redéfinir.
     Bloc volontairement vide pour que la classe existe et soit testable. */
}

.density-dense {
  --block-gap-sm:      0.10in;
  --block-gap-md:      0.14in;
  --block-gap-lg:      0.20in;
  --section-gap:       0.26in;
  --footer-safe-gap:   0.20in;
  --page-header-gap:   0.26in;
  --page-title-gap:    0.16in;
  --block-padding-x:   0.14in;
  --block-padding-y:   0.11in;
  --block-tab-clear:   0.08in;
  --intra-block-gap:   0.08in;
  --ae-line-h:         1.42;
  --ae-answer-h:       0.46in;
}

/* ─── Alias rétro-compat V9 ───
   .density-light est l'ANCIEN nom de .density-air. Nomenclature officielle :
   air / std / dense. Tous les nouveaux templates DOIVENT utiliser density-air.
   L'alias est défini via le sélecteur groupé sur .density-air ci-dessus. */

/* ---------- App reset ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--ae-font-body);
  color: var(--ae-text);
  background: var(--ae-bg-cool);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,h5 { font-family: var(--ae-font-title); margin: 0; font-weight: 600; letter-spacing: -0.005em; color: var(--ae-primary-deep); }
p { margin: 0; }
a { color: var(--ae-primary); text-decoration: none; }
button { font-family: inherit; }

/* =========================================================================
   App shell — site de la charte
   ========================================================================= */
.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 264px 1fr;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  background: #0A1751;
  color: #DCE3FA;
  padding: 28px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar-brand .logo-mark {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: white;
  display: grid; place-items: center;
  position: relative;
  flex: 0 0 auto;
}
.sidebar-brand .logo-mark svg { width: 26px; height: 26px; }
.sidebar-brand .logo-text {
  font-family: var(--ae-font-title);
  font-weight: 600;
  line-height: 1;
}
.sidebar-brand .logo-text .l1 { color: white; font-size: 17px; display: block; }
.sidebar-brand .logo-text .l2 { color: var(--ae-orange); font-size: 17px; display: block; margin-top: 2px;}
.sidebar-brand .logo-text .l3 { color: rgba(255,255,255,.55); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; margin-top: 4px; display: block; }

.sidebar-meta {
  font-size: 11px;
  color: rgba(255,255,255,.55);
  line-height: 1.5;
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 14px;
}
.sidebar-meta .pill {
  display: inline-block;
  background: rgba(245,120,28,.18);
  color: #FFB87A;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.nav { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.nav .nav-section {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  font-weight: 700;
  padding: 10px 10px 6px;
}
.nav button {
  background: transparent;
  border: 0;
  color: #C7D0EE;
  text-align: left;
  font-size: 13.5px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  transition: background .12s;
}
.nav button .num {
  font-size: 10.5px;
  color: rgba(255,255,255,.4);
  font-variant-numeric: tabular-nums;
  width: 18px;
}
.nav button:hover { background: rgba(255,255,255,.06); color: white; }
.nav button.active { background: rgba(245,120,28,.18); color: white; }
.nav button.active .num { color: var(--ae-orange); }

.main {
  padding: 36px 56px 80px;
  max-width: 1280px;
}

.main-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--ae-border);
}
.main-header .eyebrow {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ae-orange); font-weight: 700;
}
.main-header h1 {
  font-size: 38px;
  line-height: 1.05;
  margin-top: 6px;
  color: var(--ae-primary-deep);
  letter-spacing: -0.015em;
}
.main-header .lede {
  font-size: 15px;
  color: var(--ae-text-soft);
  margin-top: 10px;
  max-width: 56ch;
  line-height: 1.55;
}
.main-header .step-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ae-primary-soft);
  color: var(--ae-primary-deep);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.main-header .step-pill .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ae-orange);
}

/* Section intra-page */
.section { margin-top: 44px; }
.section > h2 {
  font-size: 22px;
  color: var(--ae-primary-deep);
  letter-spacing: -0.01em;
}
.section > .section-sub {
  font-size: 13.5px;
  color: var(--ae-muted);
  margin-top: 6px;
  margin-bottom: 18px;
  max-width: 64ch;
  line-height: 1.55;
}

/* Cards (charte UI, not page UI) */
.doc-card {
  background: white;
  border: 1px solid var(--ae-border);
  border-radius: 14px;
  padding: 22px;
}
.doc-grid {
  display: grid;
  gap: 20px;
}

/* =========================================================================
   Page 8.5×11 — composants d'identité de la collection
   ========================================================================= */

/* Outer frame around 8.5×11 page when shown in the mini-site */
.page-frame {
  background: white;
  border: 1px solid var(--ae-border);
  border-radius: 14px;
  padding: 16px;
  display: inline-block;
}
.page-frame .frame-meta {
  font-size: 11px;
  color: var(--ae-muted);
  letter-spacing: .04em;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  font-weight: 600;
}
.page-frame .frame-meta .meta-pill {
  background: var(--ae-primary-soft);
  color: var(--ae-primary-deep);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
}

/* Page = 8.5 × 11 inches */
.ae-page {
  width: var(--ae-page-w);
  height: var(--ae-page-h);
  background: white;
  position: relative;
  overflow: hidden;
  font-family: var(--ae-font-body);
  font-size: 0.13in;
  color: var(--ae-text);
  line-height: 1.45;
  box-shadow: 0 8px 28px rgba(15, 26, 61, .10), 0 1px 0 rgba(15,26,61,.05);
  /* When shown at scale we crisp up */
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.ae-page.scaled {
  /* default scaled-down preview ~ fit width */
  transform: scale(var(--ae-page-scale, 0.7));
  transform-origin: top left;
}

/* HEADER ============================================================ */
.ae-header {
  height: var(--ae-header-h);
  background: var(--ae-primary);
  position: relative;
  color: white;
  padding: 0 var(--ae-margin-side);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Curved bottom edge */
.ae-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.28in;
  height: 0.42in;
  background: var(--ae-primary);
  -webkit-mask: radial-gradient(120% 0.42in at 50% 0%, black 99%, transparent 100%);
          mask: radial-gradient(120% 0.42in at 50% 0%, black 99%, transparent 100%);
}

.ae-header-logo {
  display: flex;
  align-items: center;
  gap: 0.1in;
  flex: 0 0 auto;
}
.ae-header-logo .lg-mark {
  width: 0.42in; height: 0.42in;
  display: grid; place-items: center;
}
.ae-header-logo .lg-text {
  line-height: 0.95;
  font-family: var(--ae-font-title);
}
.ae-header-logo .lg-text .lg1 {
  display: block;
  font-size: 0.22in;
  color: white;
  font-weight: 600;
}
.ae-header-logo .lg-text .lg2 {
  display: block;
  font-size: 0.22in;
  color: var(--ae-orange);
  font-weight: 600;
  margin-top: 0.02in;
}
.ae-header-logo .lg-text .lg3 {
  display: block;
  font-size: 0.1in;
  color: rgba(255,255,255,.7);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-top: 0.04in;
  font-weight: 600;
}

.ae-header-pill {
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.45);
  border-radius: 999px;
  padding: 0.07in 0.3in;
  font-family: var(--ae-font-title);
  font-size: 0.2in;
  font-weight: 500;
  color: white;
  display: flex;
  align-items: center;
  gap: 0.1in;
  white-space: nowrap;
}
.ae-header-pill .dot {
  width: 0.06in; height: 0.06in; border-radius: 50%;
  background: var(--ae-yellow);
}

.ae-header-page {
  background: var(--ae-yellow);
  color: var(--ae-primary-deep);
  border-radius: 999px;
  padding: 0.07in 0.2in;
  font-family: var(--ae-font-title);
  font-weight: 600;
  font-size: 0.16in;
  white-space: nowrap;
}
.ae-header-page.muted {
  background: rgba(255,255,255,.18);
  color: white;
}

/* Doodles in header (subtle) */
.ae-header-doodle {
  position: absolute;
  pointer-events: none;
  opacity: .45;
}

/* CONTENT AREA ====================================================== */
.ae-content {
  position: absolute;
  top: var(--ae-header-h);
  bottom: var(--ae-footer-h);
  left: var(--ae-margin-side);
  right: var(--ae-margin-side);
  /* V1.3 — espacement piloté par tokens, pas de hardcode. */
  padding-top: var(--page-header-gap);
  padding-bottom: var(--footer-safe-gap);
  display: flex;
  flex-direction: column;
  gap: var(--block-gap-md);
  /* Clip dur — pages qui dépassent la zone safe sont coupées,
     l'auditeur visuel les flague (voir .audit-on plus bas). */
  overflow: hidden;
  min-height: 0;
}

/* FOOTER ============================================================ */
.ae-footer {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: var(--ae-footer-h);
  display: grid;
  grid-template-columns: 1.6fr 2fr 0.8fr;
  align-items: center;
  padding: 0 var(--ae-margin-side) 0.18in;
  gap: 0.2in;
}
.ae-footer .ft-score {
  border: 1.5px dashed var(--ae-primary);
  border-radius: var(--ae-r-md);
  padding: 0.08in 0.18in;
  font-family: var(--ae-font-title);
  color: var(--ae-primary-deep);
  font-size: 0.18in;
  display: inline-flex;
  align-items: center;
  gap: 0.08in;
  width: max-content;
}
.ae-footer .ft-score .blank {
  display: inline-block;
  border-bottom: 1.5px solid var(--ae-primary);
  width: 0.6in;
  height: 0.18in;
}
.ae-footer .ft-qr {
  display: flex;
  align-items: center;
  gap: 0.14in;
  justify-self: center;
}
.ae-footer .ft-qr .qr-square {
  width: 0.55in; height: 0.55in;
  background: white;
  border: 1px solid var(--ae-border);
  border-radius: 0.04in;
  padding: 0.025in;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.ae-footer .ft-qr .qr-square svg { display: block; }
.ae-footer .ft-qr .qr-text {
  font-size: 0.13in;
  line-height: 1.25;
  color: var(--ae-text-soft);
  font-weight: 600;
}
.ae-footer .ft-qr .qr-text .sub {
  font-size: 0.10in;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ae-muted);
  font-weight: 700;
  margin-bottom: 0.02in;
}
.ae-footer .ft-qr .qr-text .url { color: var(--ae-orange); }

.ae-footer .ft-page {
  justify-self: end;
  width: 0.55in; height: 0.55in;
  border-radius: 50%;
  background: var(--ae-primary);
  color: white;
  display: grid; place-items: center;
  font-family: var(--ae-font-title);
  font-weight: 600;
  font-size: 0.22in;
}

/* COMPONENTS ON PAGE ================================================ */

/* Title block (matière / leçon) */
.ae-title {
  font-family: var(--ae-font-title);
  color: var(--ae-primary-deep);
  font-weight: 600;
  line-height: 1.1;
  font-size: 0.36in;
  letter-spacing: -0.005em;
}
.ae-title .underline {
  display: inline-block;
  border-bottom: 0.025in solid var(--ae-primary);
  padding-bottom: 0.04in;
}
.ae-subtitle {
  font-family: var(--ae-font-title);
  color: var(--ae-primary);
  font-size: 0.2in;
  font-weight: 500;
  margin-top: 0.05in;
}

/* Card de leçon */
.ae-lesson {
  border: 1.5px solid var(--ae-yellow-dark);
  background: var(--ae-yellow-soft);
  border-radius: var(--ae-r-lg);
  padding: 0.18in 0.22in 0.18in 0.22in;
  position: relative;
}
.ae-lesson .ae-lesson-title {
  display: inline-flex;
  align-items: center;
  gap: 0.08in;
  background: var(--ae-yellow);
  color: var(--ae-primary-deep);
  font-family: var(--ae-font-title);
  font-weight: 600;
  font-size: 0.18in;
  padding: 0.05in 0.16in;
  border-radius: 999px;
  position: absolute;
  top: -0.13in;
  left: 0.2in;
}
.ae-lesson .ae-lesson-title .ic {
  width: 0.18in; height: 0.18in;
  background: var(--ae-primary);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ae-yellow);
  font-size: 0.12in;
}
.ae-lesson .formula {
  font-family: var(--ae-font-title);
  font-size: 0.26in;
  text-align: center;
  border: 1.5px solid var(--ae-orange);
  border-radius: var(--ae-r-md);
  padding: 0.08in;
  color: var(--ae-orange-dark);
  background: white;
  margin-top: 0.06in;
}

/* Encadré méthode */
.ae-method {
  border: 1.5px solid var(--ae-success);
  background: var(--ae-success-soft);
  border-radius: var(--ae-r-lg);
  padding: 0.16in 0.22in;
  position: relative;
}
.ae-method .lab {
  position: absolute;
  top: -0.11in;
  left: 0.2in;
  background: var(--ae-success);
  color: white;
  font-family: var(--ae-font-title);
  font-size: 0.15in;
  padding: 0.04in 0.14in;
  border-radius: 999px;
  font-weight: 600;
}

/* Encadré erreur à éviter */
.ae-warn {
  border: 1.5px solid var(--ae-error);
  background: var(--ae-error-soft);
  border-radius: var(--ae-r-lg);
  padding: 0.16in 0.22in;
  position: relative;
}
.ae-warn .lab {
  position: absolute;
  top: -0.11in;
  left: 0.2in;
  background: var(--ae-error);
  color: white;
  font-family: var(--ae-font-title);
  font-size: 0.15in;
  padding: 0.04in 0.14in;
  border-radius: 999px;
  font-weight: 600;
}

/* Exercice */
.ae-exo {
  border: 1.5px solid var(--ae-primary);
  border-radius: var(--ae-r-lg);
  padding: 0.18in 0.22in 0.2in;
  position: relative;
}
.ae-exo.exo-orange { border-color: var(--ae-orange); }
.ae-exo.exo-green  { border-color: var(--ae-success); }
.ae-exo .ae-exo-tab {
  position: absolute;
  top: -0.13in;
  left: 0.2in;
  background: var(--ae-primary);
  color: white;
  font-family: var(--ae-font-title);
  font-weight: 600;
  font-size: 0.16in;
  padding: 0.04in 0.18in;
  border-radius: 999px 0 0 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.1in;
}
.ae-exo.exo-orange .ae-exo-tab { background: var(--ae-orange); }
.ae-exo.exo-green  .ae-exo-tab { background: var(--ae-success); }
.ae-exo .ae-exo-tab .num {
  background: white;
  color: inherit;
  width: 0.22in; height: 0.22in;
  border-radius: 4px;
  display: grid; place-items: center;
  font-size: 0.16in;
  margin-left: -0.06in;
}
.ae-exo .ae-exo-tab .num.q { background: rgba(255,255,255,.2); color: white; }
.ae-exo .ae-exo-prompt {
  margin-left: 1.1in;
  font-weight: 700;
  color: var(--ae-text);
  font-size: 0.15in;
  margin-top: -0.04in;
}

/* Numéro question */
.ae-q-num {
  display: inline-grid; place-items: center;
  width: 0.22in; height: 0.22in;
  border-radius: 4px;
  background: var(--ae-primary);
  color: white;
  font-family: var(--ae-font-title);
  font-weight: 600;
  font-size: 0.14in;
  flex: 0 0 auto;
}
.ae-q-num.orange { background: var(--ae-orange); }
.ae-q-num.green  { background: var(--ae-success); }

.ae-answer-line {
  display: inline-block;
  border-bottom: 1px dotted var(--ae-text-soft);
  min-width: 1.3in;
  height: 0.16in;
}

/* Zone de réponse */
.ae-answer-box {
  border: 1px solid var(--ae-rule);
  border-radius: var(--ae-r-sm);
  background: white;
  height: 0.6in;
  width: 100%;
}
.ae-answer-box.ruled {
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 0.21in,
    var(--ae-border) 0.21in,
    var(--ae-border) calc(0.21in + 1px)
  );
}
.ae-answer-box.tall { height: 1in; }
.ae-answer-box.short { height: 0.36in; }

/* Checkbox QCM */
.ae-check {
  display: inline-grid; place-items: center;
  width: 0.18in; height: 0.18in;
  border: 1.2px solid var(--ae-text-soft);
  border-radius: 3px;
  background: white;
  flex: 0 0 auto;
}
.ae-check.lg { width: 0.22in; height: 0.22in; }

.ae-qcm-letter {
  display: inline-grid; place-items: center;
  width: 0.2in; height: 0.2in;
  border: 1.2px solid var(--ae-orange);
  border-radius: 3px;
  font-family: var(--ae-font-title);
  font-weight: 600;
  font-size: 0.13in;
  color: var(--ae-orange-dark);
  flex: 0 0 auto;
}
.ae-qcm-letter.blue { border-color: var(--ae-primary); color: var(--ae-primary); }

/* Bulle Ketty */
.ae-ketty {
  display: flex;
  gap: 0.1in;
  align-items: flex-start;
}
.ae-ketty.compact { gap: 0.08in; }
.ae-ketty .k-slot {
  width: 0.85in;
  flex: 0 0 auto;
  position: relative;
}
.ae-ketty .k-slot.lg { width: 1.2in; }
.ae-ketty .k-bubble {
  flex: 1;
  border: 1.5px solid var(--ae-primary);
  border-radius: var(--ae-r-lg);
  padding: 0.12in 0.16in 0.12in 0.18in;
  position: relative;
  background: white;
}
.ae-ketty .k-bubble::before {
  content: "";
  position: absolute;
  left: -0.1in;
  top: 0.16in;
  width: 0.16in;
  height: 0.12in;
  background: white;
  border-left: 1.5px solid var(--ae-primary);
  border-bottom: 1.5px solid var(--ae-primary);
  transform: rotate(45deg);
  border-radius: 2px;
}
.ae-ketty .k-bubble .k-lab {
  display: inline-block;
  background: var(--ae-primary);
  color: white;
  font-family: var(--ae-font-title);
  font-size: 0.14in;
  font-weight: 600;
  padding: 0.04in 0.14in;
  border-radius: 999px;
  margin-bottom: 0.06in;
}

/* Ketty placeholder slot — shows "Ketty PNG transparent — pose à insérer ici" */
.ketty-slot {
  width: 100%;
  aspect-ratio: 0.85 / 1;
  border: 1.5px dashed var(--ae-primary);
  border-radius: var(--ae-r-md);
  background: var(--ae-primary-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.08in;
  position: relative;
}
.ketty-slot .silhouette {
  width: 70%;
  height: 60%;
  background: linear-gradient(180deg, rgba(27,63,184,.18), rgba(27,63,184,.06));
  -webkit-mask: var(--ketty-mask) center/contain no-repeat;
          mask: var(--ketty-mask) center/contain no-repeat;
}
.ketty-slot .ks-cap {
  font-size: 0.1in;
  color: var(--ae-primary-deep);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 0.05in;
  line-height: 1.25;
}
.ketty-slot .ks-pose {
  font-size: 0.09in;
  color: var(--ae-muted);
  margin-top: 0.02in;
  font-weight: 600;
}

/* Tableau */
.ae-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.13in;
}
.ae-table th, .ae-table td {
  border: 1px solid var(--ae-border);
  padding: 0.08in 0.1in;
  text-align: left;
}
.ae-table th {
  background: var(--ae-primary-soft);
  color: var(--ae-primary-deep);
  font-weight: 700;
}
.ae-table tr:nth-child(even) td { background: var(--ae-bg-cool); }

/* Checklist */
.ae-checklist { display: flex; flex-direction: column; gap: 0.08in; }
.ae-checklist li {
  display: flex; align-items: flex-start;
  gap: 0.1in;
  list-style: none;
  font-size: 0.13in;
}

/* Bilan / score */
.ae-bilan {
  background: linear-gradient(90deg, var(--ae-yellow-soft) 0%, var(--ae-orange-soft) 100%);
  border: 1.5px solid var(--ae-yellow-dark);
  border-radius: var(--ae-r-lg);
  padding: 0.16in 0.22in;
  display: flex;
  align-items: center;
  gap: 0.2in;
  font-family: var(--ae-font-title);
  font-size: 0.16in;
  color: var(--ae-primary-deep);
}
.ae-bilan .stamp {
  background: var(--ae-orange);
  color: white;
  width: 0.6in; height: 0.6in;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.18in;
  flex: 0 0 auto;
}

/* Mini-défi */
.ae-defi {
  border: 1.5px dashed var(--ae-orange);
  border-radius: var(--ae-r-lg);
  padding: 0.14in 0.2in;
  display: flex;
  gap: 0.16in;
  align-items: center;
}
.ae-defi .badge {
  background: var(--ae-orange);
  color: white;
  border-radius: 999px;
  padding: 0.04in 0.14in;
  font-family: var(--ae-font-title);
  font-weight: 600;
  font-size: 0.14in;
  flex: 0 0 auto;
}

/* QR block on page (large) */
.ae-qr-block {
  display: flex;
  align-items: center;
  gap: 0.16in;
  border: 1.5px dashed var(--ae-yellow-dark);
  background: var(--ae-yellow-soft);
  border-radius: var(--ae-r-lg);
  padding: 0.14in 0.2in;
}
.ae-qr-block .qr {
  width: 0.9in; height: 0.9in;
  background: white;
  border: 1.5px solid var(--ae-text);
  padding: 0.05in;
}
.ae-qr-block .copy {
  font-family: var(--ae-font-title);
  color: var(--ae-primary-deep);
  font-size: 0.16in;
  line-height: 1.25;
}

/* ───── ⚠ Ancien bloc "Density modifiers" supprimé V1.3 ─────
   Les densités sont définies UNE SEULE FOIS en haut du fichier
   (voir ":root" + ".density-air / .density-std / .density-dense").
   Aucun override de --ae-block-gap, --ae-density-y, ou gap n'est autorisé ici. */

/* =========================================================================
   V1.2.2 — SEMANTIC SLOT MARKERS
   Every page declares which block is the "major" one (absorbs leftover
   vertical space) and which ones stay "minor" (compact). Without these
   markers, pages either leave a white hole at the bottom or feel cramped.
   ========================================================================= */

/* Major block — grows to fill remaining vertical space. One per page. */
.ae-major {
  flex: 1 1 auto !important;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.ae-major > .bk-exo,
.ae-major > .bk-box,
.ae-major > .bk-callout,
.ae-major > .bk-grid,
.ae-major > .bk-leçon,
.ae-major > .bk-table-wrap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.ae-major .bk-body,
.ae-major .bk-exo-body { flex: 1 1 auto; min-height: 0; }

/* Minor block — stays at intrinsic height. Never grows. Default. */
.ae-minor { flex: 0 0 auto !important; }

/* Answer zones inside a major block stretch to fill */
.ae-major .ae-answer-box {
  min-height: var(--ae-answer-h);
  height: auto;
  flex: 1 1 auto;
}

/* =========================================================================
   V1.2.2 — HARD FOOTER GUARDRAIL
   Content NEVER touches the footer. .ae-content already has overflow:hidden;
   we now visually signal any clipped content so the auditor catches it.
   ========================================================================= */

/* When the auditor toggles `.audit-on` on the page, overflowing pages flash. */
.audit-on .ae-page .ae-content { position: relative; }
.audit-on .ae-page .ae-content::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0.18in;
  background: linear-gradient(to top, rgba(220,38,38,.22), transparent);
  pointer-events: none;
  z-index: 99;
}

/* Pages missing a major block: hatched yellow corner badge */
.audit-on .ae-page .ae-content:not(:has(.ae-major))::before {
  content: "MAJOR ?";
  position: absolute;
  top: 0; right: 0;
  font-family: var(--ae-font-mono);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;
  color: white;
  background: #c2410c;
  padding: 2px 6px;
  border-radius: 0 0 0 6px;
  z-index: 100;
}

/* Overflow detection: page bordered red if content overflows safe zone */
.audit-on .ae-page[data-overflow="true"] {
  outline: 3px solid #dc2626;
  outline-offset: -3px;
}
.audit-on .ae-page[data-overflow="true"]::after {
  content: "OVERFLOW — split this page";
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--ae-font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  color: white;
  background: #dc2626;
  padding: 3px 10px;
  border-radius: 999px;
  z-index: 100;
}

/* Split page indicator (e.g. "1 / 2", "2 / 2" in the header pill area) */
.ae-split-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,.22);
  color: white;
  font-family: var(--ae-font-mono);
  font-weight: 700;
  font-size: 0.11in;
  padding: 0.04in 0.14in;
  border-radius: 999px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Show grid overlay on page */
.ae-page.show-grid::before {
  content: "";
  position: absolute;
  top: var(--ae-header-h); bottom: var(--ae-footer-h);
  left: var(--ae-margin-side); right: var(--ae-margin-side);
  background:
    repeating-linear-gradient(to right,
      rgba(245,120,28,.18) 0,
      rgba(245,120,28,.18) 1px,
      transparent 1px,
      transparent calc((var(--ae-content-w) - 5 * 0.18in) / 6)
    ),
    rgba(27,63,184,.04);
  pointer-events: none;
  z-index: 50;
}
.ae-page.show-margins::after {
  content: "";
  position: absolute;
  top: var(--ae-header-h);
  bottom: var(--ae-footer-h);
  left: var(--ae-margin-side);
  right: var(--ae-margin-side);
  border: 1px dashed rgba(27,63,184,.45);
  pointer-events: none;
  z-index: 49;
}
.ae-page.show-bleed-zone .ae-header,
.ae-page.show-bleed-zone .ae-footer { outline: 1px dashed rgba(255,255,255,.4); outline-offset: -2px; }

/* Doodles SVG (header decorative) */
.ae-bg-doodle { position:absolute; pointer-events:none; z-index:0; opacity: .9; }

/* =========================================================================
   Print / KDP — V1.2 official rule
   ========================================================================= */
@page { size: 8.5in 11in; margin: 0; }

@media print {
  html, body { background: white !important; margin: 0; padding: 0; }
  .app-shell, .sidebar, .main-header, .section, .tweaks-panel,
  .tpl-tabs, .stress-rail, .stress-meta, .stress-verdict, .info-grid,
  .page-frame .frame-meta { display: none !important; }
  .page-preview { background: white !important; padding: 0 !important; border: 0 !important; }
  .ae-page.scaled { transform: none !important; }
  .ae-page { box-shadow: none !important; page-break-after: always; break-after: page; }
}

/* =========================================================================
   V1.1 — LOCKED BLOCKS
   ========================================================================= */

/* Vertical rhythm: one .ae-stack per page, single source of spacing.
   V1.2.1 — .ae-stack now FILLS the available content height so pages
   don't leave a large white hole at the bottom. Use .ae-grow on the
   block that should absorb extra height (default: the last large block).
   For pages that intentionally end early, set .ae-stack--top on the wrapper. */
.ae-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ae-block-gap);
  min-height: 100%;
}
.ae-stack > * { width: 100%; }
.ae-stack--top { min-height: 0; }

/* Any block can opt-in to absorb leftover vertical space */
.ae-grow { flex: 1 1 auto; min-height: 0; }
.ae-grow > .bk-body,
.ae-grow > .bk-exo-body { height: 100%; }

/* Answer zones stretch when their parent grows — kills "tight cluster" feel */
.ae-grow .ae-answer-box { height: 100%; min-height: var(--ae-answer-h); }

/* V1.2.2 — Auto-fill: when the LAST block on a page is an exercise card,
   it absorbs the leftover height and its writing area grows. Closes the
   "big white hole at the bottom" we kept seeing on Brevet/Maths pages.
   Opt out by adding .ae-no-grow on the trailing block. */
.ae-stack > .bk-box.is-exo:last-child:not(.ae-no-grow) {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.ae-stack > .bk-box.is-exo:last-child:not(.ae-no-grow) > .bk-exo-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.ae-stack > .bk-box.is-exo:last-child:not(.ae-no-grow) .ae-answer-box:last-child,
.ae-stack > .bk-box.is-exo:last-child:not(.ae-no-grow) .bk-answer:last-child {
  flex: 1 1 auto;
  min-height: var(--ae-answer-h);
}

/* Page title (always first) */
.bk-pagetitle .eyebrow {
  font-family: var(--ae-font-body);
  font-size: var(--ae-fs-page-eyebrow);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ae-orange);
  margin-bottom: 0.06in;
}
.bk-pagetitle .title {
  font-family: var(--ae-font-title);
  font-weight: 600;
  font-size: var(--ae-fs-page-title);
  color: var(--ae-primary-deep);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.bk-pagetitle .title::after {
  content: "";
  display: block;
  width: 0.7in;
  height: 0.04in;
  background: var(--ae-orange);
  border-radius: 999px;
  margin-top: 0.08in;
}
.bk-pagetitle .subtitle {
  font-family: var(--ae-font-body);
  font-weight: 600;
  font-size: var(--ae-fs-page-subtitle);
  color: var(--ae-text-soft);
  margin-top: 0.08in;
  max-width: 75%;
}

/* Box backbone — same padding, same radius, same border */
.bk-box {
  position: relative;
  border-radius: var(--ae-r-lg);
  padding: var(--ae-pad-box-y) var(--ae-pad-box-x);
  background: white;
  border: 1.5px solid var(--ae-border);
}
/* V1.2.2 — tabs ride OUTSIDE the box (top: -0.13in); the body content must
   clear them with real breathing room, not just touch them. */
.bk-box.has-tab { padding-top: calc(var(--ae-pad-box-y) + 0.12in); }
.bk-box.is-dashed { border-style: dashed; }

.bk-tab {
  position: absolute;
  top: -0.13in;
  left: 0.18in;
  display: inline-flex;
  align-items: center;
  gap: 0.06in;
  background: var(--ae-primary);
  color: white;
  border-radius: 999px;
  padding: 0.04in 0.14in 0.045in;
  font-family: var(--ae-font-title);
  font-weight: 600;
  font-size: var(--ae-fs-block-tab);
  line-height: 1;
  box-shadow: 0 0 0 2.5px white;
}
.bk-tab .ic {
  width: 0.16in; height: 0.16in;
  display: grid; place-items: center;
  background: white;
  color: var(--ae-primary);
  border-radius: 999px;
  font-size: 0.11in;
  font-weight: 700;
}

/* Tones */
.bk-box.tone-primary  { background: var(--ae-primary-soft);  border-color: var(--ae-primary); }
.bk-box.tone-primary  .bk-tab { background: var(--ae-primary); }
.bk-box.tone-primary  .bk-tab .ic { color: var(--ae-primary); }

.bk-box.tone-yellow   { background: var(--ae-yellow-soft);   border-color: var(--ae-yellow-dark); }
.bk-box.tone-yellow   .bk-tab { background: var(--ae-yellow-dark); color: var(--ae-primary-deep); }
.bk-box.tone-yellow   .bk-tab .ic { color: var(--ae-yellow-dark); }

.bk-box.tone-green    { background: var(--ae-success-soft);  border-color: var(--ae-success); }
.bk-box.tone-green    .bk-tab { background: var(--ae-success); }
.bk-box.tone-green    .bk-tab .ic { color: var(--ae-success); }

.bk-box.tone-red      { background: var(--ae-error-soft);    border-color: var(--ae-error); }
.bk-box.tone-red      .bk-tab { background: var(--ae-error); }
.bk-box.tone-red      .bk-tab .ic { color: var(--ae-error); }

.bk-box.tone-orange   { background: var(--ae-orange-soft);   border-color: var(--ae-orange); }
.bk-box.tone-orange   .bk-tab { background: var(--ae-orange); }
.bk-box.tone-orange   .bk-tab .ic { color: var(--ae-orange); }

.bk-box.tone-cool     { background: var(--ae-bg-cool);       border-color: var(--ae-rule); }
.bk-box.tone-cool     .bk-tab { background: var(--ae-primary-deep); }
.bk-box.tone-cool     .bk-tab .ic { color: var(--ae-primary-deep); }

.bk-box.tone-neutral  { background: var(--ae-bg-cream);      border-color: var(--ae-border); }
.bk-box.tone-neutral  .bk-tab { background: var(--ae-text-soft); }
.bk-box.tone-neutral  .bk-tab .ic { color: var(--ae-text-soft); }

/* Box body content */
.bk-body {
  font-family: var(--ae-font-body);
  font-size: var(--ae-fs-body);
  line-height: var(--ae-line-h);
  color: var(--ae-text);
}
.bk-text { font-size: var(--ae-fs-body); line-height: var(--ae-line-h); }
.bk-formula {
  margin-top: 0.1in;
  font-family: var(--ae-font-title);
  font-weight: 600;
  font-size: var(--ae-fs-h-inblock);
  text-align: center;
  background: white;
  border: 1.2px dashed var(--ae-yellow-dark);
  border-radius: var(--ae-r-md);
  padding: 0.08in 0.1in;
  color: var(--ae-primary-deep);
}

.bk-bullets { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.06in; }
.bk-bullets li { display: flex; align-items: flex-start; gap: 0.08in; font-size: var(--ae-fs-body); }
.bk-bullets li .dot {
  width: 0.09in; height: 0.09in; flex: 0 0 auto; margin-top: 0.05in;
  border-radius: 999px; background: var(--ae-primary);
}

.bk-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.07in; }
.bk-steps li { display: flex; gap: 0.1in; align-items: flex-start; font-size: var(--ae-fs-body); line-height: var(--ae-line-h); }
.bk-steps li .n {
  width: 0.22in; height: 0.22in; flex: 0 0 auto;
  background: var(--ae-success); color: white;
  border-radius: 999px;
  display: grid; place-items: center;
  font-family: var(--ae-font-title); font-weight: 600; font-size: 0.13in;
}

.bk-checklist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.07in; }
.bk-checklist li { display: flex; gap: 0.1in; align-items: center; font-size: var(--ae-fs-body); }
.bk-check {
  width: 0.16in; height: 0.16in; flex: 0 0 auto;
  border: 1.5px solid var(--ae-primary);
  background: white;
  border-radius: 0.04in;
}

/* Exercise card */
.bk-box.is-exo .bk-consigne {
  font-family: var(--ae-font-title);
  font-weight: 500;
  font-size: var(--ae-fs-consigne);
  color: var(--ae-primary-deep);
  margin-bottom: 0.1in;
  line-height: 1.3;
}
.bk-exo-body { display: flex; flex-direction: column; gap: 0.08in; font-size: var(--ae-fs-body); }
.bk-q { display: flex; gap: 0.1in; align-items: baseline; }
.bk-q-content { flex: 1; }
.bk-qcm-row { display: flex; flex-wrap: wrap; gap: 0.16in; font-size: var(--ae-fs-body); }
.bk-qcm-opt { display: inline-flex; align-items: center; gap: 0.06in; }

/* Score */
.bk-score {
  display: flex; align-items: center; gap: 0.16in;
  background: linear-gradient(90deg, var(--ae-yellow-soft) 0%, var(--ae-orange-soft) 100%);
  border: 1.5px solid var(--ae-yellow-dark);
  border-radius: var(--ae-r-lg);
  padding: 0.12in 0.18in;
}
.bk-score .stamp {
  width: 0.42in; height: 0.42in;
  background: var(--ae-yellow);
  color: var(--ae-primary-deep);
  display: grid; place-items: center;
  border-radius: 999px;
  font-family: var(--ae-font-title);
  font-weight: 700;
  font-size: 0.22in;
  flex: 0 0 auto;
}
.bk-score .copy { flex: 1; line-height: 1.3; }
.bk-score .lab { font-family: var(--ae-font-title); font-weight: 600; font-size: var(--ae-fs-h-inblock); color: var(--ae-primary-deep); }
.bk-score .msg { font-size: var(--ae-fs-body); color: var(--ae-text-soft); }
.bk-score .value {
  font-family: var(--ae-font-title); font-weight: 700;
  font-size: 0.28in; color: var(--ae-primary-deep);
  white-space: nowrap;
}
.bk-score .value .den { font-size: 0.16in; color: var(--ae-muted); }

/* Table */
.bk-table-wrap.has-title .bk-table-title {
  font-family: var(--ae-font-title); font-weight: 600;
  font-size: var(--ae-fs-h-inblock); color: var(--ae-primary-deep);
  margin-bottom: 0.06in;
}
.bk-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: var(--ae-fs-body);
  border: 1.5px solid var(--ae-border);
  border-radius: var(--ae-r-md);
  overflow: hidden;
}
.bk-table th {
  font-family: var(--ae-font-title); font-weight: 600;
  background: var(--ae-primary); color: white;
  text-align: left;
  padding: 0.08in 0.12in;
  font-size: var(--ae-fs-body);
}
.bk-table td {
  padding: 0.08in 0.12in;
  border-top: 1px solid var(--ae-border);
  background: white;
}
.bk-table tr:nth-child(even) td { background: var(--ae-bg-cool); }

/* Figure */
.bk-figure {
  margin: 0;
  border: 1.5px solid var(--ae-border);
  border-radius: var(--ae-r-md);
  padding: 0.12in;
  background: white;
}
.bk-figure-frame {
  background: repeating-linear-gradient(135deg, var(--ae-bg-cool) 0 0.08in, white 0.08in 0.16in);
  border: 1px dashed var(--ae-rule);
  border-radius: var(--ae-r-sm);
  display: grid; place-items: center;
}
.bk-figure-placeholder {
  font-family: var(--ae-font-body);
  font-size: var(--ae-fs-micro);
  color: var(--ae-muted);
  font-style: italic;
}
.bk-figure figcaption {
  margin-top: 0.08in;
  font-size: var(--ae-fs-micro);
  color: var(--ae-text-soft);
}

/* QR Block (in-content, not footer) */
.bk-qrblock {
  display: flex; align-items: center; gap: 0.16in;
  border: 1.5px solid var(--ae-primary);
  background: white;
  border-radius: var(--ae-r-lg);
  padding: 0.12in 0.18in;
}
.bk-qrblock .bk-qr {
  flex: 0 0 auto;
  background: white;
  padding: 0.04in;
  border: 1px solid var(--ae-border);
  border-radius: var(--ae-r-sm);
}
.bk-qrblock .bk-qr-copy .t {
  font-family: var(--ae-font-title); font-weight: 600;
  font-size: var(--ae-fs-h-inblock); color: var(--ae-primary-deep);
}
.bk-qrblock .bk-qr-copy .u {
  font-family: var(--ae-font-mono); font-size: var(--ae-fs-micro);
  color: var(--ae-orange-dark); margin-top: 0.04in;
}

/* Ketty Bubble */
.bk-ketty { display: grid; grid-template-columns: 0.95in 1fr; gap: 0.14in; align-items: stretch; }
.bk-ketty-slot { width: 100%; }
.bk-ketty-bubble {
  position: relative;
  background: white;
  border: 1.5px solid var(--ae-primary);
  border-radius: var(--ae-r-lg);
  padding: var(--ae-pad-box-y) var(--ae-pad-box-x);
  padding-top: calc(var(--ae-pad-box-y) + 0.06in);
}
.bk-ketty-bubble.tone-yellow  { border-color: var(--ae-yellow-dark);  background: var(--ae-yellow-soft); }
.bk-ketty-bubble.tone-green   { border-color: var(--ae-success);      background: var(--ae-success-soft); }
.bk-ketty-bubble.tone-orange  { border-color: var(--ae-orange);       background: var(--ae-orange-soft); }
.bk-ketty-lab {
  position: absolute; top: -0.11in; left: 0.16in;
  background: var(--ae-primary); color: white;
  border-radius: 999px; padding: 0.03in 0.14in 0.04in;
  font-family: var(--ae-font-title); font-weight: 600;
  font-size: var(--ae-fs-block-tab); line-height: 1;
  box-shadow: 0 0 0 2.5px white;
}
.bk-ketty-bubble.tone-yellow  .bk-ketty-lab { background: var(--ae-yellow-dark); color: var(--ae-primary-deep); }
.bk-ketty-bubble.tone-green   .bk-ketty-lab { background: var(--ae-success); }
.bk-ketty-bubble.tone-orange  .bk-ketty-lab { background: var(--ae-orange); }
.bk-ketty-text { font-size: var(--ae-fs-body); line-height: var(--ae-line-h); }

/* Cols helper */
.bk-cols { display: grid; }

/* =========================================================================
   Token swatches, type specimens, etc. (mini-site UI)
   ========================================================================= */

.swatch-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.swatch {
  background: white;
  border: 1px solid var(--ae-border);
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
}
.swatch .chip { height: 110px; position: relative; }
.swatch .chip .ratio {
  position: absolute; bottom: 8px; right: 10px;
  background: rgba(255,255,255,.85);
  color: #0F1A3D;
  font-family: var(--ae-font-mono);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
}
.swatch .chip.dark .ratio { background: rgba(0,0,0,.45); color: white; }
.swatch .meta { padding: 10px 12px; }
.swatch .meta .name { font-weight: 700; font-size: 13px; color: var(--ae-text); }
.swatch .meta .hex { font-family: var(--ae-font-mono); font-size: 11.5px; color: var(--ae-muted); margin-top: 2px; }
.swatch .meta .var { font-family: var(--ae-font-mono); font-size: 10.5px; color: var(--ae-primary); margin-top: 2px; }

/* Type specimen */
.type-specimen {
  display: grid;
  grid-template-columns: 130px 1fr 100px;
  gap: 18px;
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid var(--ae-border-soft);
}
.type-specimen:first-child { border-top: 0; }
.type-specimen .sp-meta { font-size: 12px; color: var(--ae-muted); font-family: var(--ae-font-mono); }
.type-specimen .sp-meta .lbl { font-family: var(--ae-font-body); font-size: 13px; color: var(--ae-text); font-weight: 700; margin-bottom: 4px; }
.type-specimen .sp-sample { color: var(--ae-text); }
.type-specimen .sp-size { font-family: var(--ae-font-mono); font-size: 12px; color: var(--ae-muted); text-align: right; }

/* Do/Dont */
.dd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.dd-card {
  border-radius: 12px;
  background: white;
  border: 1px solid var(--ae-border);
  overflow: hidden;
}
.dd-card .dd-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 13px;
}
.dd-card.do .dd-head { background: var(--ae-success-soft); color: var(--ae-success); border-bottom: 1px solid #C7E5D2; }
.dd-card.dont .dd-head { background: var(--ae-error-soft); color: var(--ae-error); border-bottom: 1px solid #F2C2C2; }
.dd-card .dd-body { padding: 14px 16px; font-size: 13px; color: var(--ae-text-soft); line-height: 1.5; }
.dd-card .dd-visual {
  height: 110px;
  background: var(--ae-bg-cool);
  border-bottom: 1px solid var(--ae-border-soft);
  position: relative;
  padding: 14px;
}

/* Token table */
.token-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.token-table th, .token-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--ae-border-soft);
  vertical-align: middle;
}
.token-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ae-muted);
  font-weight: 700;
  background: var(--ae-bg-cool);
}
.token-table td.tk { font-family: var(--ae-font-mono); color: var(--ae-primary); }
.token-table td.val { font-family: var(--ae-font-mono); color: var(--ae-text-soft); }

/* Code block */
pre.code {
  background: #0A1751;
  color: #DCE3FA;
  padding: 18px 20px;
  border-radius: 12px;
  font-family: var(--ae-font-mono);
  font-size: 12px;
  line-height: 1.55;
  overflow-x: auto;
}
pre.code .k { color: #FFB87A; }
pre.code .s { color: #B6F2C9; }
pre.code .n { color: #FFE39A; }
pre.code .c { color: rgba(255,255,255,.4); font-style: italic; }

/* Levels grid */
.levels-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.level-card {
  background: white;
  border: 1px solid var(--ae-border);
  border-radius: 12px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 12.5px;
  color: var(--ae-text-soft);
  line-height: 1.45;
}
.level-card h4 {
  font-family: var(--ae-font-title);
  font-size: 14px;
  color: var(--ae-primary-deep);
  display: flex; align-items: center; gap: 6px;
}
.level-card .pill {
  display: inline-block;
  background: var(--ae-primary-soft);
  color: var(--ae-primary-deep);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
  width: max-content;
}
.level-card ul { padding-left: 14px; margin: 0; }
.level-card ul li { margin-bottom: 4px; }
.level-card .meter { display: flex; gap: 2px; margin-top: 4px; }
.level-card .meter span {
  flex: 1; height: 6px; border-radius: 2px; background: var(--ae-border-soft);
}
.level-card .meter span.on { background: var(--ae-orange); }

/* Page-tabs container in templates section */
.tpl-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.tpl-tabs button {
  background: white;
  border: 1px solid var(--ae-border);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ae-text-soft);
  cursor: pointer;
}
.tpl-tabs button.active {
  background: var(--ae-primary);
  border-color: var(--ae-primary);
  color: white;
}

/* Misc info chips */
.info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.info-chip {
  background: white;
  border: 1px solid var(--ae-border);
  border-radius: 10px;
  padding: 12px 14px;
}
.info-chip .lbl { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ae-muted); font-weight: 700; }
.info-chip .val { font-family: var(--ae-font-mono); font-size: 14px; color: var(--ae-primary-deep); margin-top: 4px; font-weight: 700; }
.info-chip .desc { font-size: 12px; color: var(--ae-muted); margin-top: 4px; line-height: 1.45; }

/* ─────────────────────────────────────────────────────────────────────
   Stress test tab
   ───────────────────────────────────────────────────────────────────── */
.stress-rail {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.stress-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: white;
  border: 1px solid var(--ae-border);
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  font-family: var(--ae-font-body);
  transition: all .15s ease;
  min-width: 0;
}
.stress-chip:hover { border-color: var(--ae-primary); background: var(--ae-primary-soft); }
.stress-chip.active {
  background: var(--ae-primary);
  border-color: var(--ae-primary);
  color: white;
  box-shadow: 0 4px 14px rgba(27,63,184,.25);
}
.stress-chip .num {
  font-family: var(--ae-font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ae-muted);
  background: var(--ae-bg-cool);
  padding: 2px 6px;
  border-radius: 4px;
  flex: 0 0 auto;
}
.stress-chip.active .num { color: var(--ae-primary-deep); background: var(--ae-yellow); }
.stress-chip .lab { font-size: 12px; font-weight: 600; line-height: 1.25; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.stress-meta {
  display: flex;
  gap: 16px;
  align-items: center;
  margin: 18px 0 14px;
  padding: 14px 18px;
  background: white;
  border: 1px solid var(--ae-border);
  border-left: 4px solid var(--ae-primary);
  border-radius: 10px;
}
.stress-meta-num {
  font-family: var(--ae-font-title);
  font-weight: 700;
  font-size: 28px;
  color: var(--ae-primary);
  line-height: 1;
  flex: 0 0 auto;
}
.stress-meta-body { flex: 1; min-width: 0; }
.stress-meta-title {
  font-family: var(--ae-font-title);
  font-weight: 600;
  font-size: 16px;
  color: var(--ae-primary-deep);
}
.stress-meta-note {
  font-size: 12px;
  color: var(--ae-muted);
  line-height: 1.45;
  margin-top: 2px;
}
.stress-meta-pills {
  display: flex; gap: 6px; flex-wrap: wrap;
  flex: 0 0 auto;
}
.stress-meta-pills .meta-pill {
  font-family: var(--ae-font-mono);
  font-size: 10px;
  background: var(--ae-bg-cool);
  border: 1px solid var(--ae-border);
  color: var(--ae-text-soft);
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 600;
}

.stress-verdict {
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 22px 24px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--ae-yellow-soft) 0%, var(--ae-orange-soft) 100%);
  border: 1px solid var(--ae-yellow-dark);
}
.stress-verdict-stamp {
  width: 56px; height: 56px;
  background: var(--ae-success);
  color: white;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 30px; font-weight: 700;
  box-shadow: 0 6px 18px rgba(31,158,90,.35);
  flex: 0 0 auto;
}
.stress-verdict-title {
  font-family: var(--ae-font-title);
  font-weight: 700;
  font-size: 18px;
  color: var(--ae-primary-deep);
}
.stress-verdict-text {
  font-size: 13px;
  color: var(--ae-text-soft);
  line-height: 1.5;
  margin-top: 4px;
}

/* Grid spec diagram */
.grid-diagram {
  position: relative;
  background: white;
  border: 1px solid var(--ae-border);
  border-radius: 14px;
  padding: 24px;
}
.grid-diagram svg { width: 100%; height: auto; display: block; }

/* Page preview wrapper that scales */
.page-preview {
  width: 100%;
  overflow: auto;
  display: flex;
  justify-content: center;
}
.page-preview .ae-page {
  flex: 0 0 auto;
}

/* Print */
@media print {
  body { background: white; }
  .sidebar, .twk-panel, .main-header { display: none; }
  .main { padding: 0; max-width: none; }
  .ae-page { box-shadow: none; }
}