// template-pack-6-fin-livre-commercial.jsx
// PACK 6 · FIN DE LIVRE / QR / COLLECTION / COMMERCIAL — Allo Education Books v1.2
// 12 templates premium, utiles, imprimables, fermant toutes les collections.
// Toutes les pages passent par <PageShell>. Aucun header/footer recréé.
// Pas d'emoji. Toutes icônes via <Icon /> ou iconKey. Pilotables par data.

/* ════════════════════════════════════════════════════════════════════════
   Helpers locaux Pack 6
   ════════════════════════════════════════════════════════════════════════ */

function P6QRBlock({ slug, label, sub, size = "1in", tone = "primary" }) {
  // Decorative QR placeholder (deterministic pattern from slug)
  const cells = 13;
  const seed = (slug || "ae").split("").reduce((a, c) => a + c.charCodeAt(0), 0);
  const grid = [];
  for (let y = 0; y < cells; y++) {
    for (let x = 0; x < cells; x++) {
      const corner = (x < 3 && y < 3) || (x > cells - 4 && y < 3) || (x < 3 && y > cells - 4);
      const v = ((x * 31 + y * 17 + seed) * 2654435761) >>> 0;
      const on = corner ? ((x + y) % 2 === 0 || (x === 0 || y === 0 || x === 2 || y === 2 || x === cells - 1 || y === cells - 1 || x === cells - 3 || y === cells - 3)) : (v % 7 < 3);
      grid.push({ x, y, on });
    }
  }
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "0.04in", alignItems: "center" }}>
      <div style={{
        width: size, height: size,
        background: "white",
        border: `2px solid var(--ae-${tone})`,
        borderRadius: "0.06in",
        padding: "0.04in",
      }}>
        <svg viewBox={`0 0 ${cells} ${cells}`} style={{ width: "100%", height: "100%", display: "block" }}>
          {grid.map((c, i) => c.on && <rect key={i} x={c.x} y={c.y} width="1" height="1" fill="var(--ae-text)" />)}
        </svg>
      </div>
      {label && (
        <div style={{
          fontSize: "0.11in", textAlign: "center", lineHeight: 1.3,
          color: "var(--ae-text-soft)", maxWidth: size,
        }}>
          <b style={{ color: "var(--ae-primary-deep)" }}>{label}</b>
          {sub && <div style={{ fontSize: "0.1in", color: "var(--ae-muted)" }}>{sub}</div>}
        </div>
      )}
    </div>
  );
}

function P6PremiumBorder({ children, tone = "primary" }) {
  return (
    <div style={{
      position: "relative",
      padding: "0.28in 0.3in",
      border: `2px solid var(--ae-${tone})`,
      borderRadius: "0.18in",
      background: "linear-gradient(180deg, var(--ae-yellow-soft) 0%, white 40%, white 100%)",
    }}>
      {/* corner ornaments */}
      {[
        { t: 0, l: 0 }, { t: 0, r: 0 }, { b: 0, l: 0 }, { b: 0, r: 0 },
      ].map((p, i) => (
        <div key={i} style={{
          position: "absolute",
          top: p.t === 0 ? "-0.12in" : undefined,
          bottom: p.b === 0 ? "-0.12in" : undefined,
          left: p.l === 0 ? "-0.12in" : undefined,
          right: p.r === 0 ? "-0.12in" : undefined,
          width: "0.32in", height: "0.32in",
          background: "var(--ae-yellow)",
          border: `2px solid var(--ae-${tone})`,
          borderRadius: "999px",
          display: "grid", placeItems: "center",
        }}>
          <Icon k="icon-etoile" style={{ color: "var(--ae-primary-deep)", fontSize: "0.16in" }} />
        </div>
      ))}
      <div style={{
        position: "absolute",
        inset: "0.06in",
        border: `1px solid var(--ae-${tone})`,
        borderRadius: "0.14in",
        opacity: 0.4,
        pointerEvents: "none",
      }} />
      <div style={{ position: "relative" }}>{children}</div>
    </div>
  );
}

function P6FieldLine({ label, value, w = "100%" }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "0.04in", width: w }}>
      <div style={{
        fontSize: "var(--ae-fs-eyebrow)", textTransform: "uppercase",
        letterSpacing: "0.08em", color: "var(--ae-primary)", fontWeight: 800,
      }}>{label}</div>
      <div style={{
        borderBottom: "2px solid var(--ae-primary)",
        height: "0.42in",
        display: "flex", alignItems: "center",
        fontFamily: "var(--ae-font-title)", fontWeight: 600,
        fontSize: "0.22in", color: "var(--ae-primary-deep)",
      }}>{value}</div>
    </div>
  );
}

/* ════════════════════════════════════════════════════════════════════════
   1 · DIPLÔME / CERTIFICAT (template: "completion-certificate")
   ════════════════════════════════════════════════════════════════════════ */

function F1Certificate({ density, qrVisible, scoreVisible, scale = 1 }) {
  return (
    <PageShell
      matiere="Diplôme" niveau="Cahier terminé" page="Fin de cahier"
      density={density} qrVisible={qrVisible} scoreVisible={false}
      qrSlug="diplome-cahier-vacances-cm2"
      qrLabel="Partager mon diplôme" qrSubLabel="alloeducation.fr/diplome"
      scale={scale}
    >
      <div style={{ height: "0.1in" }} />
      <P6PremiumBorder tone="primary">
        <div style={{
          textAlign: "center",
          fontSize: "var(--ae-fs-eyebrow)", textTransform: "uppercase",
          letterSpacing: "0.18em", color: "var(--ae-primary)", fontWeight: 800,
          marginBottom: "0.08in",
        }}>Allo Education Books · Diplôme officiel</div>

        <h1 style={{
          textAlign: "center",
          fontFamily: "var(--ae-font-title)", fontWeight: 700,
          fontSize: "0.62in", color: "var(--ae-primary-deep)",
          margin: "0.04in 0 0.06in", lineHeight: 1.05,
        }}>Diplôme de progression</h1>

        <div style={{
          textAlign: "center", fontSize: "0.16in", color: "var(--ae-text-soft)",
          marginBottom: "0.22in",
        }}>Décerné par <b style={{ color: "var(--ae-primary)" }}>Allo Education</b> à</div>

        {/* Name */}
        <div style={{
          textAlign: "center",
          fontFamily: "Lora, serif", fontStyle: "italic", fontWeight: 700,
          fontSize: "0.6in", color: "var(--ae-primary-deep)",
          paddingBottom: "0.08in",
          borderBottom: "2px dashed var(--ae-primary)",
          margin: "0 0.4in 0.16in",
        }}>Léa Martinez</div>

        <div style={{
          textAlign: "center", fontSize: "0.18in", lineHeight: 1.5,
          color: "var(--ae-text)", marginBottom: "0.18in",
        }}>
          a terminé avec succès le cahier <br/>
          <b style={{ color: "var(--ae-primary)" }}>Cahier de Vacances · CM2 → 6ᵉ</b>
          <br/>
          en travaillant <b>les 12 chapitres</b> et <b>les 6 défis</b>.
        </div>

        {/* Stats row */}
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)",
          gap: "0.14in", margin: "0.1in 0.3in",
        }}>
          {[
            { n: "12", l: "Chapitres" },
            { n: "186", l: "Exercices" },
            { n: "94 %", l: "Réussite" },
          ].map(s => (
            <div key={s.l} style={{
              textAlign: "center",
              padding: "0.08in 0.04in",
              border: "1.5px solid var(--ae-primary)",
              borderRadius: "0.1in",
              background: "white",
            }}>
              <div style={{
                fontFamily: "var(--ae-font-title)", fontWeight: 700,
                fontSize: "0.36in", color: "var(--ae-primary)", lineHeight: 1,
              }}>{s.n}</div>
              <div style={{
                fontSize: "var(--ae-fs-eyebrow)", textTransform: "uppercase",
                letterSpacing: "0.08em", color: "var(--ae-text-soft)", fontWeight: 700,
                marginTop: "0.04in",
              }}>{s.l}</div>
            </div>
          ))}
        </div>

        {/* Date + signatures */}
        <div style={{
          display: "grid", gridTemplateColumns: "1fr 1fr 1fr",
          gap: "0.14in", marginTop: "0.2in",
          padding: "0 0.1in",
        }}>
          <P6FieldLine label="Délivré le" value="21 / 08 / 2026" />
          <P6FieldLine label="Signature parent" value="" />
          <P6FieldLine label="Signature prof" value="" />
        </div>

        <div style={{
          marginTop: "0.18in", textAlign: "center",
          fontSize: "0.12in", color: "var(--ae-muted)", letterSpacing: "0.04em",
        }}>
          Référence diplôme · <b style={{ color: "var(--ae-primary)" }}>AE-CV-CM2-2026-00184</b>
        </div>
      </P6PremiumBorder>

      <div style={{ marginTop: "0.16in" }}>
        <KettyBubble pose="celebrating" tone="yellow" label="Ketty">
          Bravo Léa, tu peux être fière de toi. Tu as travaillé chaque jour, tu
          as pris soin de tes corrections — c'est exactement ça, progresser.
        </KettyBubble>
      </div>
    </PageShell>
  );
}

/* ════════════════════════════════════════════════════════════════════════
   2 · BILAN FINAL PERSONNEL (template: "final-self-assessment")
   ════════════════════════════════════════════════════════════════════════ */

function F2SelfAssessment({ density, qrVisible, scoreVisible, scale = 1 }) {
  const competences = [
    "Lire un texte long et le résumer",
    "Conjuguer aux 3 temps du passé",
    "Calcul mental jusqu'à 1000",
    "Résoudre un problème en 2 étapes",
    "Utiliser une équation simple",
    "Identifier un quadrilatère",
    "Repérer sur un repère orthonormé",
    "Présenter une réponse rédigée",
  ];
  return (
    <PageShell
      matiere="Bilan final" niveau="6ᵉ — Tous chapitres" page="Fin de cahier"
      density={density} qrVisible={qrVisible} scoreVisible={scoreVisible}
      qrSlug="bilan-final-6e-2026"
      qrLabel="Conseils Ketty"
      scale={scale}
    >
      <PageTitle
        eyebrow="Mon bilan final"
        title="Je fais le point sur tout ce que j'ai appris"
        subtitle="Honnêtement, sans jugement. C'est mon outil pour mieux préparer la suite."
      />

      {/* Score global */}
      <div style={{
        display: "grid", gridTemplateColumns: "1.3in 1fr",
        gap: "0.16in", alignItems: "center",
        padding: "0.14in 0.18in",
        background: "var(--ae-primary-soft)",
        border: "2px solid var(--ae-primary)",
        borderRadius: "var(--ae-r-lg)",
      }}>
        <svg viewBox="0 0 100 100" style={{ width: "1.3in", height: "1.3in" }}>
          <circle cx="50" cy="50" r="42" fill="none" stroke="var(--ae-border)" strokeWidth="10" />
          <circle cx="50" cy="50" r="42" fill="none" stroke="var(--ae-primary)" strokeWidth="10"
            strokeLinecap="round" strokeDasharray={`${0.86 * 264} 264`} transform="rotate(-90 50 50)" />
          <text x="50" y="48" textAnchor="middle" fontSize="22" fill="var(--ae-primary-deep)" fontFamily="var(--ae-font-title)" fontWeight="700">86</text>
          <text x="50" y="64" textAnchor="middle" fontSize="9" fill="var(--ae-text-soft)" fontFamily="var(--ae-font-title)" fontWeight="700" letterSpacing="2">SUR 100</text>
        </svg>
        <div>
          <div style={{
            fontSize: "var(--ae-fs-eyebrow)", textTransform: "uppercase",
            letterSpacing: "0.08em", color: "var(--ae-primary)", fontWeight: 800,
          }}>Mon score global</div>
          <div style={{
            fontFamily: "var(--ae-font-title)", fontWeight: 700,
            fontSize: "0.32in", color: "var(--ae-primary-deep)", lineHeight: 1.1,
            margin: "0.04in 0",
          }}>Excellent travail régulier</div>
          <div style={{ fontSize: "0.14in", color: "var(--ae-text-soft)", lineHeight: 1.5 }}>
            Calculé sur l'ensemble des chapitres terminés et corrigés. Le score n'est
            qu'un indicateur — ce qui compte, c'est ce que je sais faire seul·e.
          </div>
        </div>
      </div>

      {/* Compétences grid */}
      <Box tone="primary" label="Compétences travaillées" iconKey="icon-cible">
        <div style={{
          display: "grid",
          gridTemplateColumns: "1fr 0.7in 0.7in 0.7in",
          rowGap: "0.04in", columnGap: "0.08in",
          alignItems: "center", fontSize: "0.14in",
        }}>
          <div className="bk-col-head"></div>
          <div className="bk-col-head" style={{ textAlign: "center" }}>Maîtrisé</div>
          <div className="bk-col-head" style={{ textAlign: "center" }}>Presque</div>
          <div className="bk-col-head" style={{ textAlign: "center" }}>À revoir</div>
          {competences.map((c, i) => (
            <div key={i} style={{ display: "contents" }}>
              <div style={{
                padding: "0.06in 0",
                borderTop: "1px dashed var(--ae-border)",
                fontSize: "0.14in",
              }}>{c}</div>
              {[
                "var(--ae-success)", "var(--ae-yellow-dark)", "var(--ae-error)",
              ].map((color, j) => (
                <div key={j} style={{
                  display: "grid", placeItems: "center",
                  borderTop: "1px dashed var(--ae-border)",
                  padding: "0.06in 0",
                }}>
                  <span style={{
                    width: "0.26in", height: "0.26in", borderRadius: "0.05in",
                    border: `1.5px solid ${color}`, background: "white",
                  }} />
                </div>
              ))}
            </div>
          ))}
        </div>
      </Box>

      {/* Open zones */}
      <Cols ratio="1fr 1fr" gap="0.16in">
        <Box tone="green" label="Ce dont je suis fier·e" iconKey="icon-trophee">
          <div style={{
            minHeight: "0.6in",
            background: "repeating-linear-gradient(180deg, white 0 22px, var(--ae-border) 22px 23px)",
            borderRadius: "0.06in",
            padding: "0.04in",
          }} />
        </Box>
        <Box tone="orange" label="Ce que je veux encore améliorer" iconKey="icon-cible">
          <div style={{
            minHeight: "0.6in",
            background: "repeating-linear-gradient(180deg, white 0 22px, var(--ae-border) 22px 23px)",
            borderRadius: "0.06in",
            padding: "0.04in",
          }} />
        </Box>
      </Cols>

      <div style={{
        fontSize: "0.13in", color: "var(--ae-text-soft)", fontStyle: "italic",
        textAlign: "center", padding: "0.04in 0.2in",
      }}>
        <b style={{ color: "var(--ae-primary)" }}>Conseil Ketty —</b> reprends d'abord les compétences en orange : deux séances de 20 minutes suffisent souvent à les faire passer en vert.
      </div>
    </PageShell>
  );
}

/* ════════════════════════════════════════════════════════════════════════
   3 · PAGE RESSOURCES QR (template: "qr-resources-hub")
   ════════════════════════════════════════════════════════════════════════ */

function F3QRHub({ density, qrVisible, scoreVisible, scale = 1 }) {
  const cards = [
    { slug: "ressources-corrections", icon: "icon-info", lab: "Corrections enrichies", sub: "Pas-à-pas commentés", tone: "primary" },
    { slug: "ressources-similaires",  icon: "icon-cible", lab: "Exercices similaires",  sub: "Banque actualisée",   tone: "orange" },
    { slug: "ressources-quiz",        icon: "icon-trophee", lab: "Quiz interactifs",   sub: "Score & feedback",     tone: "yellow" },
    { slug: "ressources-ketty",       icon: "icon-ketty",   lab: "Aide Ketty",         sub: "Coach pédagogique",    tone: "green" },
  ];
  return (
    <PageShell
      matiere="Ressources QR" niveau="Toutes ressources" page="Fin de cahier"
      density={density} qrVisible={false} scoreVisible={false}
      qrSlug="ressources-hub-collection"
      scale={scale}
    >
      <PageTitle
        eyebrow="Toutes les ressources de ce cahier"
        title="Le QR principal et les ressources complémentaires"
        subtitle="Ces ressources sont gratuites selon disponibilité. Elles complètent — elles ne remplacent jamais le travail sur papier."
      />

      {/* Hero QR */}
      <div style={{
        display: "grid", gridTemplateColumns: "1.6in 1fr",
        gap: "0.18in", alignItems: "center",
        padding: "0.18in 0.2in",
        background: "var(--ae-primary-soft)",
        border: "2px solid var(--ae-primary)",
        borderRadius: "var(--ae-r-lg)",
      }}>
        <P6QRBlock slug="ae-collection-hub-2026" size="1.6in" tone="primary" />
        <div>
          <div style={{
            fontSize: "var(--ae-fs-eyebrow)", textTransform: "uppercase",
            letterSpacing: "0.08em", color: "var(--ae-primary)", fontWeight: 800,
          }}>QR principal du livre</div>
          <div style={{
            fontFamily: "var(--ae-font-title)", fontWeight: 700,
            fontSize: "0.34in", color: "var(--ae-primary-deep)",
            lineHeight: 1.1, margin: "0.04in 0 0.06in",
          }}>Ouvrir l'espace ressources</div>
          <div style={{ fontSize: "0.15in", color: "var(--ae-text-soft)", lineHeight: 1.5 }}>
            Scanne ce QR pour accéder à <b>toutes les ressources</b> du cahier en un seul
            endroit. URL : <b>alloeducation.fr/qr/cahier-cm2-2026</b>
          </div>
        </div>
      </div>

      <Box tone="cream" label="Ressources complémentaires" iconKey="icon-info">
        <div style={{
          display: "grid", gridTemplateColumns: "1fr 1fr",
          gap: "0.14in",
        }}>
          {cards.map(c => (
            <div key={c.slug} style={{
              display: "grid", gridTemplateColumns: "0.9in 1fr",
              gap: "0.12in", alignItems: "center",
              padding: "0.1in",
              background: "white",
              border: `1.5px solid var(--ae-${c.tone})`,
              borderRadius: "0.1in",
            }}>
              <P6QRBlock slug={c.slug} size="0.9in" tone={c.tone} />
              <div>
                <div style={{ display: "flex", alignItems: "center", gap: "0.06in" }}>
                  <Icon k={c.icon} style={{ color: `var(--ae-${c.tone})` }} />
                  <span style={{
                    fontSize: "var(--ae-fs-eyebrow)", textTransform: "uppercase",
                    letterSpacing: "0.08em", color: `var(--ae-${c.tone})`, fontWeight: 800,
                  }}>QR ressource</span>
                </div>
                <div style={{
                  fontFamily: "var(--ae-font-title)", fontWeight: 700,
                  fontSize: "0.2in", color: "var(--ae-primary-deep)",
                  margin: "0.04in 0 0.02in",
                }}>{c.lab}</div>
                <div style={{ fontSize: "0.13in", color: "var(--ae-text-soft)" }}>{c.sub}</div>
              </div>
            </div>
          ))}
        </div>
      </Box>

      <Box tone="cool" label="Bon à savoir" iconKey="icon-info">
        <ul className="bk-bullets" style={{ fontSize: "0.14in", margin: 0 }}>
          <li>Les ressources QR <b>complètent</b> le cahier ; elles ne le remplacent pas.</li>
          <li>Aucune création de compte n'est obligatoire pour les corrections de base.</li>
          <li>Les ressources évoluent : un QR conduit toujours à la version la plus récente.</li>
          <li>En cas de coupure réseau, le cahier reste 100 % utilisable en autonomie.</li>
        </ul>
      </Box>
    </PageShell>
  );
}

/* ════════════════════════════════════════════════════════════════════════
   4 · CONTINUER AVEC ALLO EDUCATION (template: "continue-with-alloeducation")
   ════════════════════════════════════════════════════════════════════════ */

function F4Continue({ density, qrVisible, scoreVisible, scale = 1 }) {
  const blocks = [
    { icon: "icon-livre",   tone: "primary", lab: "Réviser",                desc: "Reprendre les notions essentielles, à mon rythme, avec mémo et fiche d'autonomie." },
    { icon: "icon-cible",   tone: "orange",  lab: "S'entraîner",            desc: "Banque d'exercices supplémentaires, niveau adaptable, corrigés guidés." },
    { icon: "icon-ketty",   tone: "green",   lab: "Progresser avec Ketty", desc: "Mini-coaching pédagogique : objectifs, encouragements, suivi régulier." },
  ];
  return (
    <PageShell
      matiere="Continuer" niveau="Toutes matières" page="Fin de cahier"
      density={density} qrVisible={false} scoreVisible={false}
      qrSlug="continuer-allo-education"
      scale={scale}
    >
      <PageTitle
        eyebrow="Et après ce cahier ?"
        title="Continuer avec Allo Education"
        subtitle="Le cahier est terminé, mais l'entraînement, lui, continue. Voici trois manières simples de garder le rythme — sans forcer."
      />

      <div style={{
        display: "grid", gridTemplateColumns: "1fr 1fr 1fr",
        gap: "0.14in",
      }}>
        {blocks.map(b => (
          <div key={b.lab} style={{
            display: "flex", flexDirection: "column", gap: "0.08in",
            padding: "0.16in 0.14in",
            background: "white",
            border: `1.5px solid var(--ae-${b.tone})`,
            borderRadius: "var(--ae-r-lg)",
          }}>
            <div style={{
              width: "0.6in", height: "0.6in",
              borderRadius: "999px",
              background: `var(--ae-${b.tone}-soft)`,
              border: `2px solid var(--ae-${b.tone})`,
              display: "grid", placeItems: "center",
            }}>
              <Icon k={b.icon} style={{ color: `var(--ae-${b.tone}-dark, var(--ae-${b.tone}))`, fontSize: "0.3in" }} />
            </div>
            <div style={{
              fontFamily: "var(--ae-font-title)", fontWeight: 700,
              fontSize: "0.24in", color: "var(--ae-primary-deep)",
            }}>{b.lab}</div>
            <div style={{ fontSize: "0.14in", color: "var(--ae-text-soft)", lineHeight: 1.5 }}>
              {b.desc}
            </div>
          </div>
        ))}
      </div>

      {/* QR & CTA douce */}
      <div style={{
        display: "grid", gridTemplateColumns: "1.4in 1fr",
        gap: "0.16in", alignItems: "center",
        padding: "0.18in 0.2in",
        background: "var(--ae-yellow-soft)",
        border: "2px solid var(--ae-yellow-dark)",
        borderRadius: "var(--ae-r-lg)",
      }}>
        <P6QRBlock slug="continue-cm2" size="1.4in" tone="yellow-dark" label="alloeducation.fr/continuer" />
        <div>
          <div style={{
            fontFamily: "var(--ae-font-title)", fontWeight: 700,
            fontSize: "0.28in", color: "var(--ae-primary-deep)", lineHeight: 1.15,
          }}>Prolonger l'élan, à la maison ou en classe.</div>
          <div style={{
            fontSize: "0.15in", color: "var(--ae-text-soft)",
            lineHeight: 1.55, marginTop: "0.06in",
          }}>
            Scanne le QR pour découvrir les pages d'entraînement, les fiches gratuites
            et les conseils Ketty. <b>Pas d'abonnement obligatoire</b> — la majorité des
            ressources reste accessible librement, selon les ressources disponibles.
          </div>
        </div>
      </div>

      <KettyBubble pose="pointing" tone="primary" label="Ketty">
        Pas besoin de tout faire d'un coup. <b>10 minutes par jour</b> valent
        mieux qu'une heure une fois par semaine. La régularité, ça change tout.
      </KettyBubble>
    </PageShell>
  );
}

/* ════════════════════════════════════════════════════════════════════════
   5 · COLLECTION SHOWCASE (template: "collection-showcase")
   ════════════════════════════════════════════════════════════════════════ */

function MiniCover({ matiere, niveau, tone, n }) {
  return (
    <div style={{
      aspectRatio: "0.77",
      borderRadius: "0.1in",
      background: `var(--ae-${tone}-soft, var(--ae-${tone}))`,
      border: `2px solid var(--ae-${tone})`,
      padding: "0.1in 0.08in 0.06in",
      display: "flex", flexDirection: "column",
      position: "relative", overflow: "hidden",
    }}>
      <div style={{
        fontSize: "0.09in", textTransform: "uppercase",
        letterSpacing: "0.1em", color: `var(--ae-${tone})`, fontWeight: 800,
      }}>Allo Education</div>
      <div style={{
        fontFamily: "var(--ae-font-title)", fontWeight: 700,
        fontSize: "0.18in", color: `var(--ae-${tone === "yellow" ? "primary-deep" : tone})`,
        lineHeight: 1.1, marginTop: "0.04in",
      }}>{matiere}</div>
      <div style={{
        fontSize: "0.12in", color: "var(--ae-primary-deep)", fontWeight: 700,
        marginTop: "auto",
      }}>{niveau}</div>
      <div style={{
        position: "absolute", right: "-0.16in", bottom: "-0.16in",
        width: "0.56in", height: "0.56in",
        borderRadius: "999px", background: `var(--ae-${tone})`, opacity: 0.18,
      }} />
      <div style={{
        position: "absolute", left: "0.06in", top: "0.06in",
        fontFamily: "var(--ae-font-mono)", fontSize: "0.08in",
        color: "var(--ae-muted)",
      }}>#{String(n).padStart(2, "0")}</div>
    </div>
  );
}

function F5Collection({ density, qrVisible, scoreVisible, scale = 1 }) {
  const livres = [
    { matiere: "Maths", niveau: "CM2 — 6ᵉ", tone: "primary" },
    { matiere: "Français", niveau: "CM1 — CM2", tone: "orange" },
    { matiere: "Cahier de Vacances", niveau: "CE2 → CM1", tone: "yellow" },
    { matiere: "Anglais", niveau: "6ᵉ — 5ᵉ", tone: "green" },
    { matiere: "Histoire-Géo", niveau: "5ᵉ — 4ᵉ", tone: "primary" },
    { matiere: "Maths Brevet", niveau: "3ᵉ", tone: "orange" },
  ];
  // (compact layout: covers à 0.92 ratio + label inline + QR row mince)
  return (
    <PageShell
      matiere="Collection" niveau="Allo Education Books" page="Fin de cahier"
      density={density} qrVisible={qrVisible} scoreVisible={false}
      qrSlug="collection-allo-education-books"
      qrLabel="Voir la collection complète"
      scale={scale}
    >
      <PageTitle
        eyebrow="Dans la même collection"
        title="Allo Education Books"
        subtitle="Une bibliothèque cohérente, du CP au lycée, avec la même méthode, le même soin et la même Ketty."
      />

      <div style={{
        display: "grid", gridTemplateColumns: "repeat(3, 1fr)",
        columnGap: "0.16in", rowGap: "0.14in",
      }}>
        {livres.map((l, i) => (
          <div key={i} style={{
            display: "grid", gridTemplateColumns: "1.05in 1fr",
            gap: "0.1in", alignItems: "center",
          }}>
            <div style={{ width: "1.05in" }}>
              <MiniCover {...l} n={i + 1} />
            </div>
            <div>
              <div style={{
                fontSize: "var(--ae-fs-eyebrow)", textTransform: "uppercase",
                letterSpacing: "0.08em", color: `var(--ae-${l.tone === "yellow" ? "yellow-dark" : l.tone})`,
                fontWeight: 800,
              }}>{l.niveau}</div>
              <div style={{
                fontFamily: "var(--ae-font-title)", fontWeight: 700,
                fontSize: "0.16in", color: "var(--ae-primary-deep)",
                marginTop: "0.02in", lineHeight: 1.15,
              }}>{l.matiere}</div>
              <div style={{ fontSize: "0.11in", color: "var(--ae-muted)", marginTop: "0.02in", fontFamily: "var(--ae-font-mono)" }}>
                AE-{l.matiere.slice(0, 3).toUpperCase()}-{2026 + (i % 2)}
              </div>
            </div>
          </div>
        ))}
      </div>

      <div style={{
        display: "grid", gridTemplateColumns: "1in 1fr",
        gap: "0.14in", alignItems: "center",
        padding: "0.1in 0.14in",
        background: "var(--ae-bg-cool)",
        border: "1px solid var(--ae-border)",
        borderRadius: "var(--ae-r-lg)",
      }}>
        <P6QRBlock slug="collection-aeb" size="1in" tone="primary" />
        <div>
          <div style={{
            fontFamily: "var(--ae-font-title)", fontWeight: 700,
            fontSize: "0.18in", color: "var(--ae-primary-deep)",
          }}>Découvrir la collection complète · alloeducation.fr/livres</div>
          <div style={{ fontSize: "0.12in", color: "var(--ae-text-soft)", lineHeight: 1.45, marginTop: "0.04in" }}>
            <b>Note aux parents et enseignants.</b> Tous les cahiers de la collection partagent la même charte, le même format et la même approche pas-à-pas — utilisables en parallèle sans risque.
          </div>
        </div>
      </div>
    </PageShell>
  );
}

/* ════════════════════════════════════════════════════════════════════════
   6 · BONUS / CHALLENGE FINAL (template: "final-bonus-challenge")
   ════════════════════════════════════════════════════════════════════════ */

function F6BonusChallenge({ density, qrVisible, scoreVisible, scale = 1 }) {
  const niveaux = [
    {
      lab: "Niveau 1 · Facile", tone: "green", stars: 1,
      titre: "Calcule rapidement.",
      lignes: ["12 + 28 = …", "45 − 17 = …", "6 × 7 = …"],
    },
    {
      lab: "Niveau 2 · Moyen", tone: "yellow", stars: 2,
      titre: "Résous le problème.",
      lignes: ["3 paquets de 12 stylos coûtent 18 €.",
               "Combien coûte un seul paquet ?",
               "Quel est le prix d'un stylo ?"],
    },
    {
      lab: "Niveau 3 · Défi", tone: "orange", stars: 3,
      titre: "Devine la suite logique.",
      lignes: ["2 — 4 — 8 — 16 — …", "1 — 1 — 2 — 3 — 5 — …",
               "Justifie ton raisonnement en une phrase."],
    },
  ];
  return (
    <PageShell
      matiere="Défi final" niveau="Toutes matières" page="Fin de cahier"
      density={density} qrVisible={qrVisible} scoreVisible={scoreVisible}
      qrSlug="defi-final-bonus"
      qrLabel="Bonus interactif"
      scale={scale}
    >
      <PageTitle
        eyebrow="Le défi final · 3 niveaux"
        title="Un dernier défi avant de fermer le cahier"
        subtitle="Pas obligé de tout faire. Choisis ton niveau, prends ton temps, et amuse-toi."
      />

      <div style={{ display: "flex", flexDirection: "column", gap: "0.14in" }}>
        {niveaux.map((n, i) => (
          <div key={i} style={{
            display: "grid", gridTemplateColumns: "0.6in 1fr 1in",
            gap: "0.14in", alignItems: "stretch",
            padding: "0.14in 0.18in",
            border: `2px solid var(--ae-${n.tone === "yellow" ? "yellow-dark" : n.tone})`,
            background: `var(--ae-${n.tone}-soft, var(--ae-${n.tone}))`,
            borderRadius: "var(--ae-r-lg)",
          }}>
            {/* Stars column */}
            <div style={{
              display: "flex", flexDirection: "column",
              alignItems: "center", justifyContent: "center", gap: "0.04in",
              borderRight: "1.5px dashed var(--ae-border)", paddingRight: "0.06in",
            }}>
              {Array.from({ length: 3 }).map((_, j) => (
                <Icon key={j} k="icon-etoile"
                  style={{
                    fontSize: "0.2in",
                    color: j < n.stars ? "var(--ae-yellow-dark)" : "var(--ae-border)",
                  }} />
              ))}
            </div>

            {/* Body */}
            <div>
              <div style={{
                fontSize: "var(--ae-fs-eyebrow)", textTransform: "uppercase",
                letterSpacing: "0.08em", color: `var(--ae-${n.tone === "yellow" ? "yellow-dark" : n.tone})`,
                fontWeight: 800,
              }}>{n.lab}</div>
              <div style={{
                fontFamily: "var(--ae-font-title)", fontWeight: 700,
                fontSize: "0.2in", color: "var(--ae-primary-deep)",
                margin: "0.04in 0 0.06in",
              }}>{n.titre}</div>
              <div style={{ display: "flex", flexDirection: "column", gap: "0.04in" }}>
                {n.lignes.map((l, k) => (
                  <div key={k} style={{ fontSize: "0.15in", color: "var(--ae-text)" }}>
                    <span style={{ color: `var(--ae-${n.tone === "yellow" ? "yellow-dark" : n.tone})`, fontWeight: 700, marginRight: "0.06in" }}>•</span>
                    {l}
                  </div>
                ))}
              </div>
            </div>

            {/* Score */}
            <div style={{
              display: "flex", flexDirection: "column", justifyContent: "center", gap: "0.06in",
              alignItems: "center",
            }}>
              <div style={{
                fontSize: "var(--ae-fs-eyebrow)", textTransform: "uppercase",
                letterSpacing: "0.08em", color: "var(--ae-text-soft)", fontWeight: 800,
              }}>Score</div>
              <div style={{
                fontFamily: "var(--ae-font-mono)", fontWeight: 700,
                fontSize: "0.34in", color: "var(--ae-primary-deep)",
                background: "white",
                border: "2px dashed var(--ae-primary)",
                borderRadius: "0.08in",
                padding: "0.04in 0.14in",
                minWidth: "0.7in", textAlign: "center",
              }}>__/3</div>
            </div>
          </div>
        ))}
      </div>

      <Cols ratio="1.4fr 1fr">
        <KettyBubble pose="thinking" tone="yellow" label="Ketty">
          Le défi 3 est volontairement difficile. Si tu bloques, c'est <b>normal</b> :
          relis les indices, pose les calculs, et fais une pause si besoin.
        </KettyBubble>
        <div style={{ display: "flex", justifyContent: "center" }}>
          <P6QRBlock slug="bonus-interactif" size="1.1in" tone="primary" label="Bonus interactif" sub="Réponses + variantes" />
        </div>
      </Cols>
    </PageShell>
  );
}

/* ════════════════════════════════════════════════════════════════════════
   7 · NOTES / BROUILLON PREMIUM (template: "notes-draft-page")
   ════════════════════════════════════════════════════════════════════════ */

function F7NotesDraft({ density, qrVisible, scoreVisible, scale = 1 }) {
  return (
    <PageShell
      matiere="Brouillon" niveau="Page personnelle" page="Notes"
      density={density} qrVisible={false} scoreVisible={false}
      qrSlug="notes-page"
      scale={scale}
    >
      <PageTitle
        eyebrow="Mes notes &amp; brouillon"
        title="Idées · calculs · brouillon"
        subtitle="Une page à moi pour poser ma réflexion, sans pression de la note."
      />

      {/* Title bar */}
      <div style={{
        display: "grid", gridTemplateColumns: "1fr 1.2in 1.2in",
        gap: "0.14in",
        padding: "0.1in 0.14in",
        border: "1.5px solid var(--ae-primary)",
        background: "white",
        borderRadius: "0.1in",
      }}>
        <P6FieldLine label="Sujet de la page" value="" />
        <P6FieldLine label="Renvoi page" value="p. ___" />
        <P6FieldLine label="Exercice" value="n° ___" />
      </div>

      {/* Big draft zone */}
      <div style={{
        flex: 1,
        minHeight: "5.6in",
        background: `
          linear-gradient(0deg, var(--ae-border) 1px, transparent 1px) 0 0/100% 0.32in,
          linear-gradient(90deg, var(--ae-border) 1px, transparent 1px) 0 0/0.32in 100%,
          white
        `,
        backgroundColor: "white",
        border: "1.5px solid var(--ae-primary)",
        borderRadius: "0.12in",
        position: "relative",
      }}>
        {/* Top-right tag */}
        <div style={{
          position: "absolute", top: "-0.14in", right: "0.14in",
          padding: "0.04in 0.14in",
          background: "var(--ae-primary)",
          color: "white",
          fontSize: "var(--ae-fs-eyebrow)", textTransform: "uppercase",
          letterSpacing: "0.1em", fontWeight: 800,
          borderRadius: "999px",
          display: "flex", alignItems: "center", gap: "0.06in",
        }}>
          <Icon k="icon-crayon" style={{ fontSize: "0.12in" }} />
          Brouillon libre
        </div>
      </div>

      <div style={{
        display: "flex", justifyContent: "space-between", alignItems: "center",
        fontSize: "0.12in", color: "var(--ae-muted)", fontStyle: "italic",
        marginTop: "0.04in",
      }}>
        <span>Le brouillon n'est jamais corrigé — il sert d'abord à <b>moi</b>.</span>
        <span>Allo Education Books · Page brouillon premium</span>
      </div>
    </PageShell>
  );
}

/* ════════════════════════════════════════════════════════════════════════
   8 · MES ERREURS À REVOIR (template: "mistakes-to-review")
   ════════════════════════════════════════════════════════════════════════ */

function F8Mistakes({ density, qrVisible, scoreVisible, scale = 1 }) {
  const rows = [
    { page: "p. 24", notion: "Conjugaison · imparfait", err: "j'écrivais → j'écrivai", corr: "imparfait : -ais", date: "" },
    { page: "p. 36", notion: "Calcul · retenue",        err: "47+18=55",                corr: "8+7=15, retenue 1 → 65", date: "" },
    { page: "p. 41", notion: "Géométrie · périmètre",   err: "P = côté × 2",            corr: "P = côté × 4 (carré)",   date: "" },
    { page: "p. 58", notion: "Lecture · sens",          err: "qu'est-ce qu'il dit ?",   corr: "Il dit que…",            date: "" },
    { page: "p. 67", notion: "Vocabulaire · synonymes", err: "rapide ≠ vite",           corr: "rapide = vite",          date: "" },
  ];
  return (
    <PageShell
      matiere="Carnet d'erreurs" niveau="Toutes matières" page="Fin de cahier"
      density={density} qrVisible={qrVisible} scoreVisible={scoreVisible}
      qrSlug="mes-erreurs-a-revoir"
      qrLabel="Méthode du carnet d'erreurs"
      scale={scale}
    >
      <PageTitle
        eyebrow="Mes erreurs à revoir"
        title="Je note mes erreurs · je les corrige · j'y reviens"
        subtitle="Une erreur, ce n'est pas un échec : c'est une information. Ce carnet sert à transformer chaque erreur en progrès durable."
      />

      <Box tone="cool" label="Méthode du carnet d'erreurs" iconKey="icon-info">
        <ol className="bk-steps">
          <li><span className="n">1</span><span className="t">Je note l'erreur exacte que j'ai faite, sans la cacher.</span></li>
          <li><span className="n">2</span><span className="t">J'écris la correction en <b>vert</b>, avec la règle.</span></li>
          <li><span className="n">3</span><span className="t">Je me fixe une date pour <b>refaire</b> un exercice du même type.</span></li>
        </ol>
      </Box>

      <div style={{
        border: "1.5px solid var(--ae-border)",
        borderRadius: "0.1in",
        background: "white",
        overflow: "hidden",
      }}>
        <div style={{
          display: "grid",
          gridTemplateColumns: "0.7in 1.5in 1.7in 1.7in 0.9in 0.5in",
          background: "var(--ae-primary-soft)",
          padding: "0.06in 0.1in",
          fontSize: "0.11in", textTransform: "uppercase",
          letterSpacing: "0.08em", fontWeight: 800,
          color: "var(--ae-primary-deep)",
          gap: "0.06in",
        }}>
          <span>Page</span><span>Notion</span><span>Mon erreur</span>
          <span>Correction</span><span>À refaire le</span><span>Fait</span>
        </div>
        {rows.map((r, i) => (
          <div key={i} style={{
            display: "grid",
            gridTemplateColumns: "0.7in 1.5in 1.7in 1.7in 0.9in 0.5in",
            padding: "0.08in 0.1in",
            borderTop: "1px dashed var(--ae-border)",
            fontSize: "0.13in",
            alignItems: "center", gap: "0.06in",
          }}>
            <span style={{ fontFamily: "var(--ae-font-mono)", fontWeight: 600, color: "var(--ae-primary)" }}>{r.page}</span>
            <span style={{ fontWeight: 700 }}>{r.notion}</span>
            <span style={{ color: "var(--ae-error)" }}>{r.err}</span>
            <span style={{ color: "var(--ae-success)", fontWeight: 600 }}>{r.corr}</span>
            <span style={{ color: "var(--ae-text-soft)", fontFamily: "var(--ae-font-mono)" }}>__/__</span>
            <span style={{
              width: "0.26in", height: "0.26in", borderRadius: "0.05in",
              border: "1.5px solid var(--ae-success)", background: "white",
              justifySelf: "center",
            }} />
          </div>
        ))}
        {/* Empty rows for student to add */}
        {Array.from({ length: 4 }).map((_, i) => (
          <div key={`e${i}`} style={{
            display: "grid",
            gridTemplateColumns: "0.7in 1.5in 1.7in 1.7in 0.9in 0.5in",
            padding: "0.08in 0.1in",
            borderTop: "1px dashed var(--ae-border)",
            gap: "0.06in", height: "0.36in",
          }} />
        ))}
      </div>

      <KettyBubble pose="pointing" tone="green" label="Conseil méthode">
        Une erreur ramassée = un point de progrès. Mieux vaut <b>5 erreurs notées</b>
        et <b>refaites</b> que 50 erreurs ignorées.
      </KettyBubble>
    </PageShell>
  );
}

/* ════════════════════════════════════════════════════════════════════════
   9 · PLANNING DE RÉVISION (template: "revision-planner")
   ════════════════════════════════════════════════════════════════════════ */

function F9RevisionPlanner({ density, qrVisible, scoreVisible, scale = 1 }) {
  const jours = ["Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi", "Dimanche"];
  const objectifs = [
    { jour: "Lundi",    obj: "Conjugaison · imparfait",   duree: "20 min", pages: "p. 24-25" },
    { jour: "Mardi",    obj: "Calcul mental · tables",    duree: "15 min", pages: "p. 30" },
    { jour: "Mercredi", obj: "Lecture · texte court",     duree: "30 min", pages: "p. 42-43" },
    { jour: "Jeudi",    obj: "Géométrie · quadrilatères", duree: "20 min", pages: "p. 51" },
    { jour: "Vendredi", obj: "Problèmes · 2 étapes",      duree: "25 min", pages: "p. 60-61" },
    { jour: "Samedi",   obj: "Carnet d'erreurs · refaire", duree: "30 min", pages: "p. 80" },
    { jour: "Dimanche", obj: "Repos · ou défi facultatif", duree: "—",      pages: "Bonus" },
  ];
  return (
    <PageShell
      matiere="Planning" niveau="Semaine de révision" page="Annexe"
      density={density} qrVisible={qrVisible} scoreVisible={scoreVisible}
      qrSlug="planning-revision-semaine"
      qrLabel="Modèle 4 semaines"
      scale={scale}
    >
      <PageTitle
        eyebrow="Mon planning de révision · 1 semaine"
        title="Une page, sept objectifs courts"
        subtitle="Mieux vaut 20 minutes par jour qu'une grosse séance le dimanche soir."
      />

      <div style={{
        border: "1.5px solid var(--ae-border)",
        borderRadius: "0.1in",
        background: "white",
        overflow: "hidden",
      }}>
        <div style={{
          display: "grid",
          gridTemplateColumns: "0.9in 1fr 0.8in 1.1in 0.5in",
          background: "var(--ae-primary)", color: "white",
          padding: "0.08in 0.12in",
          fontSize: "0.12in", textTransform: "uppercase",
          letterSpacing: "0.08em", fontWeight: 800,
          gap: "0.06in",
        }}>
          <span>Jour</span><span>Objectif</span><span>Durée</span>
          <span>Pages</span><span style={{ textAlign: "center" }}>Fait</span>
        </div>
        {objectifs.map((o, i) => (
          <div key={i} style={{
            display: "grid",
            gridTemplateColumns: "0.9in 1fr 0.8in 1.1in 0.5in",
            padding: "0.1in 0.12in",
            borderTop: "1px dashed var(--ae-border)",
            background: i % 2 ? "var(--ae-bg-cool)" : "white",
            alignItems: "center",
            gap: "0.06in",
            fontSize: "0.15in",
          }}>
            <span style={{
              fontFamily: "var(--ae-font-title)", fontWeight: 700,
              color: "var(--ae-primary-deep)",
            }}>{o.jour}</span>
            <span>{o.obj}</span>
            <span style={{ fontFamily: "var(--ae-font-mono)", color: "var(--ae-text-soft)" }}>{o.duree}</span>
            <span style={{ fontFamily: "var(--ae-font-mono)", color: "var(--ae-text-soft)" }}>{o.pages}</span>
            <span style={{
              width: "0.3in", height: "0.3in", borderRadius: "0.05in",
              border: "1.5px solid var(--ae-success)", background: "white",
              justifySelf: "center",
            }} />
          </div>
        ))}
      </div>

      <Cols ratio="1.2fr 1fr">
        <Box tone="yellow" label="Astuce planning" iconKey="icon-cible">
          <ul className="bk-bullets" style={{ fontSize: "0.14in", margin: 0 }}>
            <li>Je mets mon planning <b>visible</b> près de mon bureau.</li>
            <li>Je commence par <b>l'objectif le plus court</b> du jour.</li>
            <li>Je coche dès que c'est fait — c'est très motivant.</li>
            <li>Je me félicite à la fin de la semaine, peu importe le score.</li>
          </ul>
        </Box>
        <KettyBubble pose="celebrating" tone="primary" label="Ketty">
          Ce planning est à toi. Si tu ne tiens pas un jour, ce n'est pas grave —
          tu reprends le lendemain, sans culpabilité.
        </KettyBubble>
      </Cols>
    </PageShell>
  );
}

/* ════════════════════════════════════════════════════════════════════════
   10 · MENTIONS / LÉGAL / ÉDITION (template: "legal-edition-page")
   ════════════════════════════════════════════════════════════════════════ */

function F10Legal({ density, qrVisible, scoreVisible, scale = 1 }) {
  return (
    <PageShell
      matiere="Mentions" niveau="Édition &amp; crédits" page="Mentions légales"
      density={density} qrVisible={false} scoreVisible={false}
      qrSlug="mentions-edition"
      scale={scale}
    >
      <PageTitle
        eyebrow="Mentions légales &amp; édition"
        title="Allo Education Books · informations éditoriales"
      />

      <Cols ratio="1fr 1fr" gap="0.18in">
        <Box tone="primary" label="Édition" iconKey="icon-livre">
          <dl style={{
            display: "grid", gridTemplateColumns: "1in 1fr",
            rowGap: "0.06in", columnGap: "0.1in",
            fontSize: "0.13in", margin: 0,
          }}>
            <dt style={{ fontWeight: 700, color: "var(--ae-text-soft)" }}>Éditeur</dt>
            <dd style={{ margin: 0 }}>Éditions Allo Education</dd>
            <dt style={{ fontWeight: 700, color: "var(--ae-text-soft)" }}>Direction</dt>
            <dd style={{ margin: 0 }}>Direction pédagogique Allo Education</dd>
            <dt style={{ fontWeight: 700, color: "var(--ae-text-soft)" }}>Conception</dt>
            <dd style={{ margin: 0 }}>Équipe Auteurs &amp; Illustration · Allo Education</dd>
            <dt style={{ fontWeight: 700, color: "var(--ae-text-soft)" }}>ISBN</dt>
            <dd style={{ margin: 0, fontFamily: "var(--ae-font-mono)" }}>978-2-XXXXXX-XX-X</dd>
            <dt style={{ fontWeight: 700, color: "var(--ae-text-soft)" }}>Dépôt légal</dt>
            <dd style={{ margin: 0 }}>Septembre 2026</dd>
            <dt style={{ fontWeight: 700, color: "var(--ae-text-soft)" }}>Imprimé par</dt>
            <dd style={{ margin: 0 }}>Amazon KDP · Print on demand</dd>
            <dt style={{ fontWeight: 700, color: "var(--ae-text-soft)" }}>Format</dt>
            <dd style={{ margin: 0 }}>8.5 × 11 in · 300 dpi · CMJN</dd>
          </dl>
        </Box>

        <Box tone="cream" label="Version &amp; release" iconKey="icon-info">
          <dl style={{
            display: "grid", gridTemplateColumns: "1in 1fr",
            rowGap: "0.06in", columnGap: "0.1in",
            fontSize: "0.13in", margin: 0,
          }}>
            <dt style={{ fontWeight: 700, color: "var(--ae-text-soft)" }}>Charte</dt>
            <dd style={{ margin: 0 }}>Allo Education Books · v1.2 verrouillée</dd>
            <dt style={{ fontWeight: 700, color: "var(--ae-text-soft)" }}>Release</dt>
            <dd style={{ margin: 0, fontFamily: "var(--ae-font-mono)" }}>aeb-2026.09.r1</dd>
            <dt style={{ fontWeight: 700, color: "var(--ae-text-soft)" }}>Référence cahier</dt>
            <dd style={{ margin: 0, fontFamily: "var(--ae-font-mono)" }}>AE-CV-CM2-2026</dd>
            <dt style={{ fontWeight: 700, color: "var(--ae-text-soft)" }}>Mise à jour</dt>
            <dd style={{ margin: 0 }}>Les ressources QR sont mises à jour automatiquement.</dd>
          </dl>
        </Box>
      </Cols>

      <Box tone="cool" label="Avertissement ressources QR" iconKey="icon-info">
        <div style={{ fontSize: "0.13in", lineHeight: 1.55, color: "var(--ae-text)" }}>
          Les ressources accessibles par QR Code complètent ce cahier. Elles
          sont fournies <b>gratuitement, selon disponibilité</b>. Allo Education se
          réserve le droit de les modifier ou de les retirer sans préavis. L'accès aux
          ressources peut nécessiter une connexion Internet ; le cahier reste
          parfaitement utilisable hors-ligne.
        </div>
      </Box>

      <Cols ratio="1fr 1fr" gap="0.16in">
        <Box tone="primary" label="Crédits images &amp; icônes">
          <ul className="bk-bullets" style={{ fontSize: "0.12in", margin: 0 }}>
            <li>Mascotte Ketty © Allo Education — tous droits réservés.</li>
            <li>Pictogrammes : icon set propriétaire Allo Education v1.2.</li>
            <li>Photographies : banque interne ou domaine public.</li>
            <li>Polices : Fredoka, Nunito Sans, JetBrains Mono · licences SIL/OFL.</li>
          </ul>
        </Box>
        <Box tone="cream" label="Copyright">
          <div style={{ fontSize: "0.12in", lineHeight: 1.55 }}>
            © 2026 <b>Allo Education</b>. Tous droits réservés. Toute reproduction,
            même partielle, par quelque procédé que ce soit, est interdite sans
            autorisation écrite préalable de l'éditeur. La reproduction des
            <b> fiches gratuites</b> à usage <b>personnel ou en classe</b> est expressément autorisée.
          </div>
        </Box>
      </Cols>

      <div style={{
        textAlign: "center", fontSize: "0.11in", color: "var(--ae-muted)",
        fontStyle: "italic", marginTop: "0.06in",
      }}>
        Marque déposée · <b style={{ color: "var(--ae-primary)" }}>Allo Education</b> ·
        contact éditorial : edition@alloeducation.fr
      </div>
    </PageShell>
  );
}

/* ════════════════════════════════════════════════════════════════════════
   11 · COUVERTURE INTÉRIEURE COLLECTION (template: "inner-cover-collection")
   ════════════════════════════════════════════════════════════════════════ */

function F11InnerCover({ density, qrVisible, scoreVisible, scale = 1 }) {
  return (
    <PageShell
      matiere="Cahier de Vacances" niveau="CM2 → 6ᵉ" page="Couverture intérieure"
      density={density} qrVisible={false} scoreVisible={false}
      qrSlug="inner-cover-cv-cm2-2026"
      scale={scale}
    >
      <div style={{ height: "0.1in" }} />

      <div style={{
        position: "relative",
        padding: "0.32in 0.36in",
        background: "linear-gradient(160deg, var(--ae-primary) 0%, var(--ae-primary-deep) 100%)",
        color: "white",
        borderRadius: "var(--ae-r-lg)",
        overflow: "hidden",
      }}>
        {/* Decorative shapes */}
        <div style={{
          position: "absolute", top: "-1in", right: "-1in",
          width: "3.2in", height: "3.2in", borderRadius: "999px",
          background: "var(--ae-yellow)", opacity: 0.18,
        }} />
        <div style={{
          position: "absolute", bottom: "-1.2in", left: "-1.2in",
          width: "3in", height: "3in", borderRadius: "999px",
          background: "var(--ae-orange)", opacity: 0.18,
        }} />

        <div style={{
          fontSize: "var(--ae-fs-eyebrow)", textTransform: "uppercase",
          letterSpacing: "0.18em", fontWeight: 800, opacity: 0.85,
        }}>Allo Education Books</div>

        <h1 style={{
          fontFamily: "var(--ae-font-title)", fontWeight: 700,
          fontSize: "0.7in", lineHeight: 1.05,
          margin: "0.1in 0 0.04in",
        }}>Cahier de Vacances</h1>

        <div style={{
          fontFamily: "var(--ae-font-title)", fontWeight: 500,
          fontSize: "0.32in", color: "var(--ae-yellow)",
          marginBottom: "0.18in",
        }}>de CM2 vers la 6ᵉ</div>

        {/* Tags */}
        <div style={{ display: "flex", gap: "0.1in", flexWrap: "wrap", marginBottom: "0.2in" }}>
          {["Maths", "Français", "Anglais", "Méthode", "Jeux"].map(t => (
            <span key={t} style={{
              padding: "0.05in 0.12in",
              borderRadius: "999px",
              border: "1.5px solid rgba(255,255,255,.55)",
              background: "rgba(255,255,255,.08)",
              fontSize: "0.12in", fontWeight: 700, letterSpacing: "0.04em",
            }}>{t}</span>
          ))}
        </div>

        <div style={{
          fontSize: "0.16in", lineHeight: 1.55, maxWidth: "5in",
          opacity: 0.92,
        }}>
          15 minutes par jour, pas plus. Tout l'été pour réviser sans pression
          et arriver en 6ᵉ avec confiance.
        </div>

        {/* Owner block */}
        <div style={{
          marginTop: "0.32in",
          padding: "0.16in 0.18in",
          background: "rgba(255,255,255,.1)",
          border: "1.5px dashed rgba(255,255,255,.55)",
          borderRadius: "0.12in",
          display: "grid", gridTemplateColumns: "1.2in 1fr",
          gap: "0.16in", alignItems: "center",
        }}>
          <div style={{
            fontSize: "var(--ae-fs-eyebrow)", textTransform: "uppercase",
            letterSpacing: "0.1em", color: "var(--ae-yellow)", fontWeight: 800,
          }}>Ce cahier appartient à</div>
          <div style={{
            borderBottom: "2px solid rgba(255,255,255,.7)",
            height: "0.5in", display: "flex", alignItems: "center",
            fontFamily: "Lora, serif", fontStyle: "italic", fontWeight: 700,
            fontSize: "0.32in",
          }}>&nbsp;</div>
        </div>
      </div>

      <Cols ratio="1fr 1fr 1fr" gap="0.14in">
        {[
          { lab: "12 chapitres", desc: "Maths, français, anglais, méthode, jeux." },
          { lab: "Pas-à-pas",    desc: "Méthode claire, exemples guidés, corrigés." },
          { lab: "Avec Ketty",   desc: "Coach pédagogique sur chaque chapitre." },
        ].map((b, i) => (
          <div key={i} style={{
            padding: "0.12in 0.14in",
            background: "var(--ae-yellow-soft)",
            border: "1.5px solid var(--ae-yellow-dark)",
            borderRadius: "0.12in",
          }}>
            <div style={{
              fontFamily: "var(--ae-font-title)", fontWeight: 700,
              fontSize: "0.18in", color: "var(--ae-primary-deep)",
            }}>{b.lab}</div>
            <div style={{ fontSize: "0.13in", color: "var(--ae-text-soft)", lineHeight: 1.5, marginTop: "0.04in" }}>
              {b.desc}
            </div>
          </div>
        ))}
      </Cols>
    </PageShell>
  );
}

/* ════════════════════════════════════════════════════════════════════════
   12 · TRANSITION DE CHAPITRE (template: "chapter-transition-page")
   ════════════════════════════════════════════════════════════════════════ */

function F12ChapterTransition({ density, qrVisible, scoreVisible, scale = 1 }) {
  return (
    <PageShell
      matiere="Maths" niveau="6ᵉ" page="Chapitre 4 · Ouverture"
      density={density} qrVisible={qrVisible} scoreVisible={false}
      qrSlug="ch4-fractions-intro"
      qrLabel="Vidéo d'introduction" qrSubLabel="3 min"
      scale={scale}
    >
      <div style={{
        position: "relative",
        padding: "0.36in 0.32in 0.28in",
        background: "var(--ae-primary-soft)",
        border: "2px solid var(--ae-primary)",
        borderRadius: "var(--ae-r-lg)",
        overflow: "hidden",
      }}>
        <div style={{
          position: "absolute", top: "0.18in", right: "0.22in",
          padding: "0.06in 0.14in",
          background: "var(--ae-yellow)",
          color: "var(--ae-primary-deep)",
          fontFamily: "var(--ae-font-title)", fontWeight: 700,
          fontSize: "0.16in", letterSpacing: "0.02em",
          borderRadius: "999px",
        }}>Chapitre 4</div>

        <div style={{
          fontSize: "var(--ae-fs-eyebrow)", textTransform: "uppercase",
          letterSpacing: "0.16em", color: "var(--ae-primary)", fontWeight: 800,
        }}>Ouverture du chapitre</div>

        <h1 style={{
          fontFamily: "var(--ae-font-title)", fontWeight: 700,
          fontSize: "0.6in", color: "var(--ae-primary-deep)",
          lineHeight: 1.05, margin: "0.06in 0 0.04in", maxWidth: "6in",
        }}>Les fractions, simplement.</h1>

        <div style={{
          fontSize: "0.18in", color: "var(--ae-text-soft)",
          lineHeight: 1.55, maxWidth: "6in",
        }}>
          Comprendre, comparer, additionner. Tout commence par une part de pizza
          et une bonne paire de yeux.
        </div>

        {/* Meta row */}
        <div style={{
          display: "flex", gap: "0.18in", marginTop: "0.22in",
          flexWrap: "wrap",
        }}>
          {[
            { icon: "icon-horloge", lab: "Durée", val: "5 séances · 60 min" },
            { icon: "icon-cible",   lab: "Niveau", val: "6ᵉ · accessible" },
            { icon: "icon-trophee", lab: "Difficulté", val: "★★ sur 3" },
          ].map((m, i) => (
            <div key={i} style={{
              display: "flex", alignItems: "center", gap: "0.08in",
              padding: "0.06in 0.12in",
              background: "white",
              border: "1.5px solid var(--ae-primary)",
              borderRadius: "999px",
            }}>
              <Icon k={m.icon} style={{ color: "var(--ae-primary)" }} />
              <span style={{
                fontSize: "var(--ae-fs-eyebrow)", textTransform: "uppercase",
                letterSpacing: "0.08em", color: "var(--ae-text-soft)", fontWeight: 800,
              }}>{m.lab}</span>
              <span style={{
                fontFamily: "var(--ae-font-title)", fontWeight: 700,
                fontSize: "0.14in", color: "var(--ae-primary-deep)",
              }}>{m.val}</span>
            </div>
          ))}
        </div>
      </div>

      <Cols ratio="1fr 1fr" gap="0.18in">
        <Box tone="green" label="Objectifs du chapitre" iconKey="icon-cible">
          <ol className="bk-steps">
            <li><span className="n">1</span><span className="t">Comprendre une fraction comme partage.</span></li>
            <li><span className="n">2</span><span className="t">Comparer deux fractions simples.</span></li>
            <li><span className="n">3</span><span className="t">Additionner des fractions de même dénominateur.</span></li>
          </ol>
        </Box>

        <Box tone="orange" label="Compétences travaillées" iconKey="icon-trophee">
          <ul className="bk-bullets" style={{ fontSize: "0.14in", margin: 0 }}>
            <li>Représenter une situation par une fraction.</li>
            <li>Lire et écrire une fraction en chiffres et en mots.</li>
            <li>Justifier une comparaison à l'écrit.</li>
            <li>Articuler dessin + calcul.</li>
          </ul>
        </Box>
      </Cols>

      <KettyBubble pose="hello" tone="primary" label="Ketty">
        Ce chapitre démarre tout doucement. On commence par <b>regarder</b>, puis
        on pose les calculs. À la fin, tu sauras dire pourquoi <b>3/4</b> est
        plus grand que <b>2/4</b>.
      </KettyBubble>
    </PageShell>
  );
}

/* ────────────────────────────────────────────────────────────────────────
   Export
   ──────────────────────────────────────────────────────────────────────── */
Object.assign(window, {
  F1Certificate, F2SelfAssessment, F3QRHub, F4Continue,
  F5Collection, F6BonusChallenge, F7NotesDraft, F8Mistakes,
  F9RevisionPlanner, F10Legal, F11InnerCover, F12ChapterTransition,
});