// template-pack-3-hg-sciences.jsx
// PACK 3 · HISTOIRE-GEO / SCIENCES — Allo Education Books v1.2
// 10 templates pour les pages visuelles complexes : frises, cartes,
// documents, photographies, croquis, protocoles, schémas, tableaux,
// équations chimiques, fiches notion. Tous composés strictement à partir
// des blocs verrouillés (PageShell, PageTitle, Box, Cols, KettyBubble,
// QRBlock, TableBlock, FigureBlock) + helpers visuels locaux.
// Aucun emoji, tous les pictos via iconKey / <Icon>. Format 8.5×11
// préservé, header / footer hérités du PageShell.

const { Fragment: P3_F } = React;

/* ────────────────────────────────────────────────────────────────────────
   Helpers visuels locaux — uniquement du SVG / CSS, jamais d'emoji
   ──────────────────────────────────────────────────────────────────────── */

function P3Pin({ n, tone = "primary" }) {
  const bg = tone === "orange" ? "var(--ae-orange)" : tone === "green" ? "var(--ae-success)" : "var(--ae-primary)";
  return (
    <span style={{
      display: "inline-grid", placeItems: "center",
      width: "0.24in", height: "0.24in", borderRadius: "999px",
      background: bg, color: "white",
      fontFamily: "var(--ae-font-title)", fontWeight: 700,
      fontSize: "0.12in", flex: "0 0 auto",
      boxShadow: "0 1px 0 rgba(0,0,0,.15)",
    }}>{n}</span>
  );
}

function P3LegendSwatch({ color, hatch, children }) {
  return (
    <div style={{ display: "flex", gap: "0.08in", alignItems: "center", fontSize: "0.115in", lineHeight: 1.35 }}>
      <span style={{
        display: "inline-block", width: "0.2in", height: "0.14in",
        background: hatch ? `repeating-linear-gradient(45deg, ${color} 0 2px, transparent 2px 5px)` : color,
        border: hatch ? "1px solid var(--ae-text-soft)" : "1px solid rgba(0,0,0,.1)",
        borderRadius: "0.02in", flex: "0 0 auto",
      }} />
      <span>{children}</span>
    </div>
  );
}

function P3DocChip({ iconKey, label, value }) {
  return (
    <div style={{
      display: "flex", gap: "0.08in", alignItems: "center",
      padding: "0.04in 0.09in",
      border: "1px solid var(--ae-border)", borderRadius: "0.06in",
      background: "white", fontSize: "0.105in",
    }}>
      <span style={{ color: "var(--ae-primary)" }}>
        <Icon k={iconKey} size="0.13in" />
      </span>
      <span style={{ color: "var(--ae-muted)", textTransform: "uppercase", letterSpacing: "0.04em", fontSize: "0.09in" }}>{label}</span>
      <span style={{ fontWeight: 600, color: "var(--ae-text)" }}>{value}</span>
    </div>
  );
}

/* ═════════════════════════════════════════════════════════════════
   01 · timeline-lesson — Frise chronologique (Histoire)
   ═════════════════════════════════════════════════════════════════ */
function P3TimelineLesson({ density, qrVisible, scoreVisible, scale = 1 }) {
  const events = [
    { date: "1789", label: "Prise de la Bastille",         tone: "primary" },
    { date: "1791", label: "Constitution",                  tone: "primary" },
    { date: "1792", label: "Proclamation de la République", tone: "orange"  },
    { date: "1793", label: "Exécution de Louis XVI",        tone: "orange"  },
    { date: "1794", label: "Chute de Robespierre",          tone: "primary" },
    { date: "1799", label: "Coup d'État de Bonaparte",      tone: "green"   },
  ];

  return (
    <PageShell
      matiere="Histoire" niveau="4ᵉ" page={"Chapitre 2 · Page 18"}
      density={density} qrVisible={qrVisible} scoreVisible={scoreVisible}
      qrSlug="AE-4E-HIST-001-2026-V1-P018"
      qrLabel="Frise interactive"
      scale={scale}
    >
      <PageTitle
        eyebrow="Histoire · Révolutions"
        title="Les grandes étapes de la Révolution française"
        subtitle="De la Bastille au coup d'État de Bonaparte (1789 — 1799)."
      />

      <ObjectiveBox
        title="Objectifs"
        items={[
          "Repérer les dates clés de la décennie révolutionnaire.",
          "Distinguer monarchie, République et Consulat.",
          "Construire une frise chronologique correcte.",
        ]}
      />

      {/* Frise — axe horizontal */}
      <Box tone="neutral" label="Frise · 1789 → 1799" iconKey="icon-horloge">
        <div style={{ position: "relative", padding: "0.45in 0.1in 0.55in", marginTop: "0.05in" }}>
          {/* axe */}
          <div style={{ position: "absolute", left: "0.1in", right: "0.1in", top: "50%", height: "0.04in", background: "var(--ae-primary)", borderRadius: "0.02in" }} />
          {/* graduations */}
          <div style={{ display: "grid", gridTemplateColumns: `repeat(${events.length}, 1fr)`, gap: 0, position: "relative" }}>
            {events.map((e, i) => {
              const above = i % 2 === 0;
              const dotColor = e.tone === "orange" ? "var(--ae-orange)" : e.tone === "green" ? "var(--ae-success)" : "var(--ae-primary)";
              return (
                <div key={i} style={{ position: "relative", textAlign: "center", height: "0in" }}>
                  {/* tick */}
                  <div style={{ position: "absolute", left: "50%", top: "calc(50% - 0.04in)", transform: "translate(-50%, -50%)", width: "0.16in", height: "0.16in", borderRadius: "999px", background: "white", border: `2.5px solid ${dotColor}`, zIndex: 2 }} />
                  {/* connector */}
                  <div style={{ position: "absolute", left: "50%", top: above ? "calc(50% - 0.34in)" : "calc(50% + 0.04in)", width: "1.5px", height: "0.3in", background: dotColor }} />
                  {/* label */}
                  <div style={{
                    position: "absolute", left: "50%", transform: "translateX(-50%)",
                    top: above ? "calc(50% - 0.7in)" : "calc(50% + 0.36in)",
                    width: "1.15in", textAlign: "center",
                  }}>
                    <div style={{ fontFamily: "var(--ae-font-title)", fontWeight: 700, color: dotColor, fontSize: "0.13in" }}>{e.date}</div>
                    <div style={{ fontSize: "0.1in", color: "var(--ae-text-soft)", lineHeight: 1.2, marginTop: "0.02in" }}>{e.label}</div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
        <div style={{ display: "flex", gap: "0.18in", flexWrap: "wrap", marginTop: "0.05in" }}>
          <P3LegendSwatch color="var(--ae-primary)">Monarchie constitutionnelle</P3LegendSwatch>
          <P3LegendSwatch color="var(--ae-orange)">Première République</P3LegendSwatch>
          <P3LegendSwatch color="var(--ae-success)">Consulat</P3LegendSwatch>
        </div>
      </Box>

      <Cols ratio="1.4fr 1fr">
        <ExerciseCard number={1} consigne="Place ces 3 événements au bon endroit sur la frise (en années).">
          <div style={{ display: "grid", gap: "0.06in", fontSize: "var(--ae-fs-body)" }}>
            <QInput n={1}>Déclaration des droits de l'homme : <AnswerLine width="0.7in" /></QInput>
            <QInput n={2}>Fin de la monarchie : <AnswerLine width="0.7in" /></QInput>
            <QInput n={3}>Sacre de Napoléon : <AnswerLine width="0.7in" /></QInput>
          </div>
        </ExerciseCard>
        <KettyBubble pose="pointing" label="Astuce Ketty" tone="primary">
          Pour bien lire une frise, repère <b>l'unité</b> (année, siècle), puis les <b>périodes de couleur</b>.
        </KettyBubble>
      </Cols>
    </PageShell>
  );
}

/* ═════════════════════════════════════════════════════════════════
   02 · map-labeling — Carte à compléter (Géographie)
   ═════════════════════════════════════════════════════════════════ */
function P3MapLabeling({ density, qrVisible, scoreVisible, scale = 1 }) {
  // Carte muette stylisée de la France métropolitaine — silhouette simple en SVG
  const FranceShape = () => (
    <svg viewBox="0 0 320 300" width="100%" height="100%" style={{ display: "block" }}>
      <defs>
        <linearGradient id="seaP3" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#E8EEFB" />
          <stop offset="1" stopColor="#D7E2F5" />
        </linearGradient>
      </defs>
      <rect x="0" y="0" width="320" height="300" fill="url(#seaP3)" />
      {/* silhouette France approx */}
      <path d="M105 38 L150 30 L205 42 L240 60 L255 95 L275 130 L268 175 L255 215 L220 255 L175 270 L130 268 L90 245 L65 205 L60 165 L55 125 L70 85 L90 55 Z"
            fill="#FFFEF7" stroke="#0F1A3D" strokeWidth="1.6" strokeLinejoin="round" />
      {/* fleuves stylisés */}
      <path d="M105 88 Q140 110 175 105 Q210 100 245 130" fill="none" stroke="#1B3FB8" strokeWidth="1.2" strokeLinecap="round" opacity="0.55" />
      <path d="M150 200 Q175 215 210 220" fill="none" stroke="#1B3FB8" strokeWidth="1.2" strokeLinecap="round" opacity="0.55" />
      {/* points à placer (étiquettes A-E) */}
      {[
        { x: 165, y: 100, n: "A" },
        { x: 100, y: 165, n: "B" },
        { x: 215, y: 145, n: "C" },
        { x: 175, y: 215, n: "D" },
        { x: 240, y: 220, n: "E" },
      ].map((p, i) => (
        <g key={i}>
          <circle cx={p.x} cy={p.y} r="9" fill="white" stroke="#F5781C" strokeWidth="2.2" />
          <text x={p.x} y={p.y + 4} textAnchor="middle" fontFamily="Fredoka, sans-serif" fontWeight="700" fontSize="11" fill="#0F1A3D">{p.n}</text>
        </g>
      ))}
      {/* rose des vents */}
      <g transform="translate(285,255)">
        <circle r="14" fill="white" stroke="#0F1A3D" strokeWidth="1" />
        <text textAnchor="middle" y="-4" fontSize="9" fontFamily="Fredoka" fontWeight="700" fill="#0F1A3D">N</text>
        <path d="M0 -10 L0 8" stroke="#0F1A3D" strokeWidth="1.4" />
      </g>
    </svg>
  );

  return (
    <PageShell
      matiere="Géographie" niveau="6ᵉ" page={"Chapitre 1 · Page 12"}
      density={density} qrVisible={qrVisible} scoreVisible={scoreVisible}
      qrSlug="AE-6E-GEO-001-2026-V1-P012"
      qrLabel="Carte interactive"
      scale={scale}
    >
      <PageTitle
        eyebrow="Géographie · La France"
        title="Compléter la carte de la France métropolitaine"
        subtitle="Repère les grands fleuves, montagnes et villes — puis place chaque étiquette."
      />

      <Cols ratio="1.4fr 1fr">
        <Box tone="neutral" label="Carte muette" iconKey="icon-loupe" className="">
          <div style={{ height: "3.4in", borderRadius: "0.06in", overflow: "hidden", border: "1px solid var(--ae-border)" }}>
            <FranceShape />
          </div>
        </Box>

        <Box tone="cool" label="Légende à compléter" iconKey="icon-crayon">
          <div style={{ display: "grid", gap: "0.08in", fontSize: "var(--ae-fs-body)" }}>
            <div style={{ display: "flex", gap: "0.1in", alignItems: "center" }}>
              <P3Pin n="A" tone="orange" /> <AnswerLine width="1.6in" />
            </div>
            <div style={{ display: "flex", gap: "0.1in", alignItems: "center" }}>
              <P3Pin n="B" tone="orange" /> <AnswerLine width="1.6in" />
            </div>
            <div style={{ display: "flex", gap: "0.1in", alignItems: "center" }}>
              <P3Pin n="C" tone="orange" /> <AnswerLine width="1.6in" />
            </div>
            <div style={{ display: "flex", gap: "0.1in", alignItems: "center" }}>
              <P3Pin n="D" tone="orange" /> <AnswerLine width="1.6in" />
            </div>
            <div style={{ display: "flex", gap: "0.1in", alignItems: "center" }}>
              <P3Pin n="E" tone="orange" /> <AnswerLine width="1.6in" />
            </div>
          </div>
          <div style={{ marginTop: "0.1in", fontSize: "0.105in", color: "var(--ae-muted)" }}>
            Mots à utiliser : <b>Loire · Garonne · Pyrénées · Alpes · Marseille</b>
          </div>
        </Box>
      </Cols>

      <ExerciseCard number={1} tone="primary" consigne="Réponds aux questions courtes ci-dessous.">
        <div style={{ display: "grid", gap: "0.06in", fontSize: "var(--ae-fs-body)" }}>
          <QInput n={1}>Quel océan borde la France à l'ouest ? <AnswerLine width="2in" /></QInput>
          <QInput n={2}>Cite deux pays voisins de la France : <AnswerLine width="2.6in" /></QInput>
          <QInput n={3}>Quelle est la plus haute montagne ? <AnswerLine width="2in" /></QInput>
        </div>
      </ExerciseCard>
    </PageShell>
  );
}

/* ═════════════════════════════════════════════════════════════════
   03 · historical-document-study — Étude de document
   ═════════════════════════════════════════════════════════════════ */
function P3HistoricalDocStudy({ density, qrVisible, scoreVisible, scale = 1 }) {
  return (
    <PageShell
      matiere="Histoire" niveau="3ᵉ" page={"Chapitre 4 · Page 32"}
      density={density} qrVisible={qrVisible} scoreVisible={scoreVisible}
      qrSlug="AE-3E-HIST-002-2026-V1-P032"
      qrLabel="Document audio"
      scale={scale}
    >
      <PageTitle
        eyebrow="Histoire · Première Guerre mondiale"
        title="Étude de document — Lettre d'un poilu"
        subtitle="Analyser un témoignage écrit du front pour comprendre l'expérience combattante."
      />

      {/* Ligne d'identité du document */}
      <div style={{ display: "flex", gap: "0.08in", flexWrap: "wrap", marginBottom: "0.06in" }}>
        <P3DocChip iconKey="icon-livre"   label="Nature"   value="Lettre privée" />
        <P3DocChip iconKey="icon-question" label="Auteur"  value="Henri B., soldat" />
        <P3DocChip iconKey="icon-horloge" label="Date"     value="3 mars 1916" />
        <P3DocChip iconKey="icon-loupe"   label="Source"   value="Archives départementales" />
      </div>

      {/* Document — bien séparé visuellement */}
      <Box tone="cream" label="Document" iconKey="icon-livre">
        <div style={{
          background: "#FFFEF7",
          border: "1px solid var(--ae-yellow-dark)",
          borderRadius: "0.06in",
          padding: "0.16in 0.2in",
          fontFamily: "Lora, Georgia, serif",
          fontSize: "0.125in", lineHeight: 1.55,
          color: "var(--ae-text)",
          fontStyle: "italic",
          position: "relative",
        }}>
          <span style={{ position: "absolute", top: "0.04in", right: "0.1in", fontFamily: "Fredoka, sans-serif", fontSize: "0.09in", fontStyle: "normal", color: "var(--ae-muted)", textTransform: "uppercase", letterSpacing: "0.05em" }}>
            Verdun, 3 mars 1916
          </span>
          « Ma chère Marie,
          <br />
          Voilà bientôt huit jours que nous tenons cette tranchée. La boue nous arrive aux genoux,
          le froid mord nos mains malgré les gants. Hier, l'artillerie allemande a tonné toute la nuit ;
          ce matin, le silence est presque pire que le bruit. Nous mangeons peu, nous dormons par
          quart d'heure. Mais nous tenons. Pour vous, pour la France.
          <br />
          Embrasse les enfants pour moi. — Henri. »
        </div>
        <div style={{ fontSize: "0.1in", color: "var(--ae-muted)", marginTop: "0.06in" }}>
          Source : Archives départementales de la Meuse, série R, lettre n°1342 (extrait abrégé).
        </div>
      </Box>

      <Cols ratio="1fr 1fr">
        <ExerciseCard number={1} title="Questions" consigne="Lis le document puis réponds dans l'ordre.">
          <div style={{ display: "grid", gap: "0.06in", fontSize: "var(--ae-fs-body)" }}>
            <QInput n={1}>Qui écrit, à qui, quand ? <AnswerLine width="2in" /></QInput>
            <QInput n={2}>Quels mots décrivent les conditions de vie ? <AnswerLine width="2.4in" /></QInput>
            <QInput n={3}>Quelle bataille est évoquée ? <AnswerLine width="1.6in" /></QInput>
            <QInput n={4}>Cite une émotion exprimée : <AnswerLine width="1.8in" /></QInput>
            <QInput n={5}>Pourquoi tient-il malgré tout ? <AnswerLine width="2.2in" /></QInput>
          </div>
        </ExerciseCard>

        <Box tone="primary" label="Je conclus en une phrase" iconKey="icon-fleche">
          <div style={{ fontSize: "0.115in", color: "var(--ae-muted)", marginBottom: "0.06in" }}>
            Que m'apprend ce document sur la vie des soldats en 1916 ?
          </div>
          <AnswerBox height="1.0in" ruled />
        </Box>
      </Cols>
    </PageShell>
  );
}

/* ═════════════════════════════════════════════════════════════════
   04 · image-analysis — Analyse d'image / photo
   ═════════════════════════════════════════════════════════════════ */
function P3ImageAnalysis({ density, qrVisible, scoreVisible, scale = 1 }) {
  return (
    <PageShell
      matiere="Histoire des arts" niveau="5ᵉ" page={"Chapitre 3 · Page 24"}
      density={density} qrVisible={qrVisible} scoreVisible={scoreVisible}
      qrSlug="AE-5E-ARTS-001-2026-V1-P024"
      qrLabel="Image en haute déf."
      scale={scale}
    >
      <PageTitle
        eyebrow="Histoire des arts · Renaissance"
        title="Analyse d'image — Le Printemps de Botticelli"
        subtitle="Décrire, analyser, interpréter une œuvre majeure de la Renaissance italienne."
      />

      {/* Image placeholder — grande */}
      <Box tone="neutral" label="Document iconographique" iconKey="icon-loupe">
        <div style={{
          height: "2.6in",
          borderRadius: "0.06in",
          background: "linear-gradient(135deg, #E8EEFB 0%, #FFEEDC 50%, #FFF6D6 100%)",
          border: "1px solid var(--ae-border)",
          position: "relative",
          display: "grid", placeItems: "center",
          overflow: "hidden",
        }}>
          {/* picto de placeholder image */}
          <svg viewBox="0 0 120 80" width="1.4in" height="auto" style={{ opacity: 0.45 }}>
            <rect x="6" y="10" width="108" height="60" rx="3" fill="none" stroke="#0F1A3D" strokeWidth="1.6" />
            <circle cx="34" cy="32" r="6" fill="#0F1A3D" opacity="0.4" />
            <path d="M14 64 L42 42 L62 56 L82 36 L106 64 Z" fill="#0F1A3D" opacity="0.4" />
          </svg>
          <div style={{ position: "absolute", top: "0.08in", left: "0.1in", fontSize: "0.09in", textTransform: "uppercase", letterSpacing: "0.05em", color: "var(--ae-muted)", fontFamily: "Fredoka" }}>
            [ Image · placeholder production ]
          </div>
          <div style={{ position: "absolute", bottom: "0.08in", right: "0.1in", fontSize: "0.09in", color: "var(--ae-muted)" }}>
            data-prod-replace="image"
          </div>
        </div>
        <div style={{ fontSize: "0.105in", color: "var(--ae-muted)", marginTop: "0.06in" }}>
          <b>Sandro Botticelli</b>, <i>La Primavera</i>, c.&nbsp;1482, tempera sur bois, 203 × 314 cm — Galerie des Offices, Florence.
        </div>
      </Box>

      <Cols ratio="1fr 1fr">
        <Box tone="primary" label="Je décris" iconKey="icon-loupe">
          <div style={{ fontSize: "0.115in", color: "var(--ae-muted)", marginBottom: "0.06in" }}>
            Ce que je vois — sans interpréter.
          </div>
          <AnswerBox height="0.9in" ruled />
        </Box>
        <Box tone="orange" label="J'explique" iconKey="icon-ampoule">
          <div style={{ fontSize: "0.115in", color: "var(--ae-muted)", marginBottom: "0.06in" }}>
            Ce que cela signifie — symboles, contexte, intention.
          </div>
          <AnswerBox height="0.9in" ruled />
        </Box>
      </Cols>

      <Cols ratio="1.4fr 1fr">
        <ExerciseCard number={1} consigne="Questions guidées sur l'œuvre.">
          <div style={{ display: "grid", gap: "0.05in", fontSize: "var(--ae-fs-body)" }}>
            <QInput n={1}>Combien de personnages au total ? <AnswerLine width="0.8in" /></QInput>
            <QInput n={2}>Quel est le personnage central ? <AnswerLine width="1.6in" /></QInput>
            <QInput n={3}>Quelle saison est évoquée ? <AnswerLine width="1.4in" /></QInput>
            <QInput n={4}>Cite un détail naturaliste : <AnswerLine width="2in" /></QInput>
          </div>
        </ExerciseCard>
        <Box tone="cool" label="Vocabulaire utile" iconKey="icon-livre">
          <ul style={{ margin: 0, paddingLeft: "0.18in", fontSize: "0.115in", lineHeight: 1.45 }}>
            <li><b>Allégorie</b> — représentation d'une idée par une figure.</li>
            <li><b>Tempera</b> — peinture à l'œuf utilisée à la Renaissance.</li>
            <li><b>Composition</b> — organisation des personnages.</li>
            <li><b>Mécène</b> — celui qui finance l'œuvre.</li>
          </ul>
        </Box>
      </Cols>
    </PageShell>
  );
}

/* ═════════════════════════════════════════════════════════════════
   05 · geo-sketch — Croquis / schéma de géographie
   ═════════════════════════════════════════════════════════════════ */
function P3GeoSketch({ density, qrVisible, scoreVisible, scale = 1 }) {
  // Croquis simplifié : une métropole avec ses centres et périphéries
  const SketchSVG = () => (
    <svg viewBox="0 0 360 240" width="100%" height="100%">
      <rect x="0" y="0" width="360" height="240" fill="#F6F8FC" />
      {/* couronnes */}
      <ellipse cx="180" cy="125" rx="135" ry="95" fill="#FFF6D6" stroke="#E6A82B" strokeWidth="1.2" strokeDasharray="3 3" />
      <ellipse cx="180" cy="125" rx="80"  ry="55" fill="#FFEEDC" stroke="#F5781C" strokeWidth="1.4" />
      <ellipse cx="180" cy="125" rx="32"  ry="22" fill="#1B3FB8" />
      {/* axes */}
      <path d="M20 125 L340 125" stroke="#0F1A3D" strokeWidth="1.6" />
      <path d="M180 20 L180 220" stroke="#0F1A3D" strokeWidth="1.6" />
      {/* gares */}
      <g fill="#D62E2E" stroke="white" strokeWidth="1.2">
        <circle cx="180" cy="125" r="5" />
        <circle cx="220" cy="100" r="4" />
        <circle cx="135" cy="150" r="4" />
      </g>
      {/* hachures industrielles */}
      <rect x="262" y="60" width="50" height="32" fill="url(#hatchP3)" stroke="#0B1F66" strokeWidth="0.8" />
      <defs>
        <pattern id="hatchP3" patternUnits="userSpaceOnUse" width="6" height="6" patternTransform="rotate(45)">
          <line x1="0" y1="0" x2="0" y2="6" stroke="#0B1F66" strokeWidth="1.2" />
        </pattern>
      </defs>
      {/* étiquettes */}
      <text x="180" y="129" textAnchor="middle" fontSize="9" fontFamily="Fredoka" fontWeight="700" fill="white">CBD</text>
      <text x="287" y="80" textAnchor="middle" fontSize="9" fontFamily="Fredoka" fontWeight="700" fill="#0B1F66">ZI</text>
      <text x="50" y="35" fontSize="10" fontFamily="Fredoka" fontWeight="600" fill="#6A748F">Périurbain</text>
      <text x="50" y="200" fontSize="10" fontFamily="Fredoka" fontWeight="600" fill="#6A748F">Banlieue</text>
    </svg>
  );

  return (
    <PageShell
      matiere="Géographie" niveau="3ᵉ" page={"Chapitre 5 · Page 38"}
      density={density} qrVisible={qrVisible} scoreVisible={scoreVisible}
      qrSlug="AE-3E-GEO-002-2026-V1-P038"
      qrLabel="Méthode du croquis"
      scale={scale}
    >
      <PageTitle
        eyebrow="Géographie · Espaces urbains"
        title="Croquis d'une grande métropole française"
        subtitle="Organiser et hiérarchiser un espace urbain à l'aide d'une légende construite."
      />

      <Cols ratio="1.5fr 1fr">
        <Box tone="neutral" label="Croquis" iconKey="icon-crayon">
          <div style={{ height: "2.8in", borderRadius: "0.06in", overflow: "hidden", border: "1px solid var(--ae-border)" }}>
            <SketchSVG />
          </div>
        </Box>
        <Box tone="cool" label="Légende organisée" iconKey="icon-section">
          <div style={{ display: "grid", gap: "0.12in" }}>
            <div>
              <div style={{ fontSize: "0.11in", textTransform: "uppercase", letterSpacing: "0.04em", color: "var(--ae-primary-deep)", fontWeight: 700, marginBottom: "0.04in" }}>I · Centres et fonctions</div>
              <div style={{ display: "grid", gap: "0.04in" }}>
                <P3LegendSwatch color="#1B3FB8">Centre des affaires (CBD)</P3LegendSwatch>
                <P3LegendSwatch color="#FFEEDC">Couronne dense résidentielle</P3LegendSwatch>
                <P3LegendSwatch color="#0B1F66" hatch>Zone industrielle / logistique</P3LegendSwatch>
              </div>
            </div>
            <div>
              <div style={{ fontSize: "0.11in", textTransform: "uppercase", letterSpacing: "0.04em", color: "var(--ae-primary-deep)", fontWeight: 700, marginBottom: "0.04in" }}>II · Réseaux</div>
              <div style={{ display: "grid", gap: "0.04in" }}>
                <P3LegendSwatch color="#0F1A3D">Axe majeur (autoroute, RER)</P3LegendSwatch>
                <P3LegendSwatch color="#D62E2E">Pôle multimodal (gare)</P3LegendSwatch>
              </div>
            </div>
            <div>
              <div style={{ fontSize: "0.11in", textTransform: "uppercase", letterSpacing: "0.04em", color: "var(--ae-primary-deep)", fontWeight: 700, marginBottom: "0.04in" }}>III · Dynamiques</div>
              <div style={{ display: "grid", gap: "0.04in" }}>
                <P3LegendSwatch color="#FFF6D6" hatch>Étalement périurbain</P3LegendSwatch>
              </div>
            </div>
          </div>
        </Box>
      </Cols>

      <Cols ratio="1fr 1fr">
        <ExerciseCard number={1} tone="orange" consigne="Cite trois caractéristiques d'une métropole observable sur ce croquis.">
          <AnswerBox height="0.7in" ruled />
        </ExerciseCard>
        <SelfCheck
          title="Auto-check du croquis"
          items={[
            "Mon titre indique le sujet et l'espace étudié.",
            "Ma légende est organisée en parties (I, II, III).",
            "J'ai utilisé au moins 4 figurés différents.",
            "L'orientation et l'échelle sont visibles.",
          ]}
        />
      </Cols>
    </PageShell>
  );
}

/* ═════════════════════════════════════════════════════════════════
   06 · science-protocol — Protocole expérimental (SVT / Physique)
   ═════════════════════════════════════════════════════════════════ */
function P3ScienceProtocol({ density, qrVisible, scoreVisible, scale = 1 }) {
  const steps = [
    "Verser 50 mL d'eau dans un bécher propre.",
    "Mesurer la température initiale T₀ avec le thermomètre.",
    "Allumer le bec Bunsen et placer le bécher sur la grille.",
    "Toutes les 30 secondes, relever la température et noter.",
    "Arrêter dès que la température reste constante (palier).",
  ];
  const matos = ["Bécher 100 mL", "Bec Bunsen", "Trépied + grille", "Thermomètre", "Eau distillée 50 mL", "Chronomètre"];

  return (
    <PageShell
      matiere="Physique-Chimie" niveau="5ᵉ" page={"Chapitre 4 · Page 28"}
      density={density} qrVisible={qrVisible} scoreVisible={scoreVisible}
      qrSlug="AE-5E-PC-001-2026-V1-P028"
      qrLabel="Protocole en vidéo"
      scale={scale}
    >
      <PageTitle
        eyebrow="Physique-Chimie · Changements d'état"
        title="Protocole — Mesurer le palier d'ébullition de l'eau"
        subtitle="Observer la température lors d'un changement d'état."
      />

      <Cols ratio="1fr 1fr">
        <Box tone="primary" label="Question de départ" iconKey="icon-question">
          <div style={{ fontSize: "var(--ae-fs-body)", lineHeight: 1.5 }}>
            La température de l'eau continue-t-elle d'augmenter pendant qu'elle bout ?
          </div>
        </Box>
        <Box tone="yellow" label="Hypothèse" iconKey="icon-ampoule">
          <div style={{ fontSize: "0.115in", color: "var(--ae-muted)", marginBottom: "0.04in" }}>Je propose une réponse à vérifier.</div>
          <AnswerBox height="0.55in" ruled />
        </Box>
      </Cols>

      <Cols ratio="1fr 1.4fr">
        <Box tone="cool" label="Matériel" iconKey="icon-section">
          <ul style={{ margin: 0, paddingLeft: "0.18in", fontSize: "0.115in", lineHeight: 1.5 }}>
            {matos.map((m, i) => <li key={i}>{m}</li>)}
          </ul>
        </Box>
        <Box tone="green" label="Protocole expérimental" iconKey="icon-check">
          <ol style={{ margin: 0, paddingLeft: 0, listStyle: "none", display: "grid", gap: "0.06in" }}>
            {steps.map((s, i) => (
              <li key={i} style={{ display: "grid", gridTemplateColumns: "0.3in 1fr", gap: "0.08in", alignItems: "start", fontSize: "0.115in", lineHeight: 1.45 }}>
                <P3Pin n={i+1} tone="green" />
                <span>{s}</span>
              </li>
            ))}
          </ol>
        </Box>
      </Cols>

      <WarningBox title="Sécurité" iconKey="icon-attention">
        Allume le bec Bunsen <b>après</b> avoir attaché tes cheveux et baissé tes lunettes de sécurité.
        Manipule le bécher avec la pince — il est très chaud.
      </WarningBox>

      <Cols ratio="1fr 1fr">
        <Box tone="primary" label="Observation" iconKey="icon-loupe">
          <div style={{ fontSize: "0.115in", color: "var(--ae-muted)", marginBottom: "0.04in" }}>Ce que j'ai relevé pendant l'expérience.</div>
          <AnswerBox height="0.7in" ruled />
        </Box>
        <Box tone="orange" label="Conclusion" iconKey="icon-fleche">
          <div style={{ fontSize: "0.115in", color: "var(--ae-muted)", marginBottom: "0.04in" }}>Réponse à la question, en lien avec mon hypothèse.</div>
          <AnswerBox height="0.7in" ruled />
        </Box>
      </Cols>
    </PageShell>
  );
}

/* ═════════════════════════════════════════════════════════════════
   07 · science-diagram-labeling — Schéma à légender
   ═════════════════════════════════════════════════════════════════ */
function P3DiagramLabeling({ density, qrVisible, scoreVisible, scale = 1 }) {
  // Schéma : cellule animale stylisée
  const CellSVG = () => (
    <svg viewBox="0 0 360 240" width="100%" height="100%">
      <rect x="0" y="0" width="360" height="240" fill="#FFFEF7" />
      {/* membrane */}
      <ellipse cx="180" cy="120" rx="135" ry="95" fill="#FFEEDC" stroke="#0F1A3D" strokeWidth="1.6" />
      {/* cytoplasme */}
      <ellipse cx="180" cy="120" rx="125" ry="86" fill="#FFF6D6" stroke="none" />
      {/* noyau */}
      <circle cx="195" cy="115" r="32" fill="#E8EEFB" stroke="#1B3FB8" strokeWidth="1.6" />
      <circle cx="200" cy="112" r="9" fill="#1B3FB8" opacity="0.4" />
      {/* mitochondries */}
      <ellipse cx="120" cy="90"  rx="18" ry="9" fill="#F5781C" stroke="#0F1A3D" strokeWidth="1" />
      <ellipse cx="135" cy="160" rx="15" ry="8" fill="#F5781C" stroke="#0F1A3D" strokeWidth="1" />
      {/* vacuoles */}
      <circle cx="250" cy="160" r="14" fill="#D7E2F5" stroke="#0F1A3D" strokeWidth="1" />
      {/* repères numérotés */}
      {[
        { x: 195, y: 115, n: 1, lx: 320, ly: 50  },
        { x: 320, y: 50,  n: 1, label: true },
        { x: 120, y: 90,  n: 2, lx: 40,  ly: 50  },
        { x: 40,  y: 50,  n: 2, label: true },
        { x: 305, y: 120, n: 3, lx: 340, ly: 130 },
        { x: 340, y: 130, n: 3, label: true },
        { x: 250, y: 160, n: 4, lx: 320, ly: 200 },
        { x: 320, y: 200, n: 4, label: true },
      ].filter(p => !p.label).map((p, i) => (
        <g key={i}>
          <line x1={p.x} y1={p.y} x2={p.lx} y2={p.ly} stroke="#0F1A3D" strokeWidth="1" />
        </g>
      ))}
      {[
        { x: 320, y: 50,  n: 1 },
        { x: 40,  y: 50,  n: 2 },
        { x: 340, y: 130, n: 3 },
        { x: 320, y: 200, n: 4 },
      ].map((p, i) => (
        <g key={i}>
          <circle cx={p.x} cy={p.y} r="11" fill="white" stroke="#1B3FB8" strokeWidth="2" />
          <text x={p.x} y={p.y + 4} textAnchor="middle" fontSize="11" fontFamily="Fredoka" fontWeight="700" fill="#0B1F66">{p.n}</text>
        </g>
      ))}
    </svg>
  );

  return (
    <PageShell
      matiere="SVT" niveau="6ᵉ" page={"Chapitre 2 · Page 16"}
      density={density} qrVisible={qrVisible} scoreVisible={scoreVisible}
      qrSlug="AE-6E-SVT-001-2026-V1-P016"
      qrLabel="Schéma animé"
      scale={scale}
    >
      <PageTitle
        eyebrow="SVT · La cellule"
        title="Schéma à légender — La cellule animale"
        subtitle="Identifier les organites principaux et leur rôle dans la cellule."
      />

      <Cols ratio="1.5fr 1fr">
        <Box tone="neutral" label="Schéma" iconKey="icon-loupe">
          <div style={{ height: "2.8in", borderRadius: "0.06in", overflow: "hidden", border: "1px solid var(--ae-border)" }}>
            <CellSVG />
          </div>
        </Box>
        <Box tone="cool" label="Étiquettes à associer" iconKey="icon-crayon">
          <div style={{ fontSize: "0.105in", color: "var(--ae-muted)", marginBottom: "0.06in" }}>
            Choisis dans la liste : <b>Membrane · Noyau · Mitochondrie · Vacuole</b>
          </div>
          <div style={{ display: "grid", gap: "0.08in", fontSize: "var(--ae-fs-body)" }}>
            {[1,2,3,4].map(n => (
              <div key={n} style={{ display: "flex", gap: "0.1in", alignItems: "center" }}>
                <P3Pin n={n} tone="primary" />
                <AnswerLine width="1.6in" />
              </div>
            ))}
          </div>
        </Box>
      </Cols>

      <Cols ratio="1fr 1fr">
        <ExerciseCard number={1} tone="primary" consigne="Relie chaque organite à son rôle.">
          <div style={{ display: "grid", gap: "0.05in", fontSize: "var(--ae-fs-body)" }}>
            <QInput n={1}>Noyau : <AnswerLine width="2.4in" /></QInput>
            <QInput n={2}>Mitochondrie : <AnswerLine width="2.4in" /></QInput>
            <QInput n={3}>Membrane : <AnswerLine width="2.4in" /></QInput>
          </div>
        </ExerciseCard>
        <ChallengeBox title="Question bonus">
          Cite <b>une différence</b> entre une cellule animale et une cellule végétale : <AnswerLine width="2.6in" />
        </ChallengeBox>
      </Cols>
    </PageShell>
  );
}

/* ═════════════════════════════════════════════════════════════════
   08 · classification-table — Tableau de classification
   ═════════════════════════════════════════════════════════════════ */
function P3ClassificationTable({ density, qrVisible, scoreVisible, scale = 1 }) {
  const rows = [
    ["Truite",   "Eau",  "Branchies", "Écailles",  "✔ exemple"],
    ["Aigle",    "—",    "—",         "—",          ""],
    ["Grenouille","—",   "—",         "—",          ""],
    ["Dauphin",  "—",    "—",         "—",          ""],
    ["Lézard",   "—",    "—",         "—",          ""],
  ];

  return (
    <PageShell
      matiere="SVT" niveau="6ᵉ" page={"Chapitre 3 · Page 22"}
      density={density} qrVisible={qrVisible} scoreVisible={scoreVisible}
      qrSlug="AE-6E-SVT-002-2026-V1-P022"
      qrLabel="Banque d'animaux"
      scale={scale}
    >
      <PageTitle
        eyebrow="SVT · Classification du vivant"
        title="Classer les vertébrés selon leurs caractères"
        subtitle="Compléter le tableau en croisant chaque animal avec ses caractéristiques."
      />

      <ObjectiveBox
        title="Compétence"
        items={[
          "Repérer les caractères communs entre êtres vivants.",
          "Construire un tableau à double entrée.",
          "Conclure sur les groupes (poissons, oiseaux, amphibiens, mammifères, reptiles).",
        ]}
      />

      <Box tone="neutral" label="Tableau de classification" iconKey="icon-section">
        <div style={{ overflow: "hidden", borderRadius: "0.06in", border: "1.5px solid var(--ae-text)" }}>
          <table style={{
            width: "100%", borderCollapse: "collapse",
            fontFamily: "var(--ae-font-body)", fontSize: "0.115in",
          }}>
            <thead>
              <tr style={{ background: "var(--ae-primary)" }}>
                {["Animal", "Milieu", "Respiration", "Revêtement", "État"].map((h, i) => (
                  <th key={i} style={{
                    padding: "0.07in 0.1in", color: "white",
                    fontFamily: "var(--ae-font-title)", fontWeight: 600,
                    textAlign: i === 0 ? "left" : "center",
                    borderRight: i < 4 ? "1px solid rgba(255,255,255,.25)" : "none",
                  }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {rows.map((r, ri) => (
                <tr key={ri} style={{ background: ri === 0 ? "var(--ae-yellow-soft)" : (ri % 2 ? "var(--ae-bg-cool)" : "white") }}>
                  {r.map((c, ci) => (
                    <td key={ci} style={{
                      padding: "0.07in 0.1in",
                      borderTop: "1px solid var(--ae-border)",
                      borderRight: ci < 4 ? "1px solid var(--ae-border)" : "none",
                      textAlign: ci === 0 ? "left" : "center",
                      fontWeight: ci === 0 ? 600 : 400,
                      color: ci === 0 ? "var(--ae-primary-deep)" : "var(--ae-text-soft)",
                      fontStyle: ci === 4 && ri === 0 ? "italic" : "normal",
                      minHeight: "0.32in",
                    }}>{c || "\u00A0"}</td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Box>

      <Cols ratio="1fr 1fr">
        <ExerciseCard number={1} tone="primary" consigne="Compare le dauphin et la truite : qu'ont-ils en commun ? Qu'est-ce qui les sépare ?">
          <AnswerBox height="0.8in" ruled />
        </ExerciseCard>
        <SelfCheck
          title="Auto-évaluation"
          items={[
            "J'ai rempli toutes les cases du tableau.",
            "J'ai bien distingué milieu et respiration.",
            "Je sais nommer les 5 grands groupes de vertébrés.",
          ]}
        />
      </Cols>
    </PageShell>
  );
}

/* ═════════════════════════════════════════════════════════════════
   09 · chemistry-equation — Équation chimique
   ═════════════════════════════════════════════════════════════════ */
function P3ChemistryEquation({ density, qrVisible, scoreVisible, scale = 1 }) {
  // Atomes stylisés sous forme de pastilles colorées
  const Atom = ({ symbol, color }) => (
    <span style={{
      display: "inline-grid", placeItems: "center",
      width: "0.28in", height: "0.28in", borderRadius: "999px",
      background: color, color: "white",
      fontFamily: "var(--ae-font-title)", fontWeight: 700,
      fontSize: "0.13in",
      boxShadow: "inset 0 -2px 0 rgba(0,0,0,.18), 0 1px 0 rgba(0,0,0,.12)",
    }}>{symbol}</span>
  );
  const Plus = () => (<span style={{ fontFamily: "var(--ae-font-title)", fontWeight: 600, fontSize: "0.18in", color: "var(--ae-muted)", padding: "0 0.06in" }}>+</span>);
  const Arrow = () => (<span style={{ fontFamily: "var(--ae-font-title)", fontWeight: 600, fontSize: "0.18in", color: "var(--ae-primary)", padding: "0 0.1in" }}>→</span>);

  return (
    <PageShell
      matiere="Physique-Chimie" niveau="3ᵉ" page={"Chapitre 6 · Page 44"}
      density={density} qrVisible={qrVisible} scoreVisible={scoreVisible}
      qrSlug="AE-3E-PC-002-2026-V1-P044"
      qrLabel="Animation moléculaire"
      scale={scale}
    >
      <PageTitle
        eyebrow="Physique-Chimie · Réactions"
        title="Équilibrer une équation chimique"
        subtitle="Compléter les coefficients pour conserver les atomes de chaque élément."
      />

      <LessonBox title="Méthode" iconKey="icon-ampoule">
        <ol style={{ margin: 0, paddingLeft: "0.2in", fontSize: "var(--ae-fs-body)", lineHeight: 1.5 }}>
          <li>Compter les atomes de chaque type, à <b>gauche</b> et à <b>droite</b>.</li>
          <li>Ajouter des <b>coefficients</b> devant les molécules pour équilibrer.</li>
          <li>Ne jamais modifier les indices d'une formule (H₂O reste H₂O).</li>
        </ol>
      </LessonBox>

      {/* Réaction principale illustrée */}
      <Box tone="primary" label="Combustion du méthane" iconKey="icon-section">
        <div style={{ display: "flex", gap: "0.06in", alignItems: "center", justifyContent: "center", flexWrap: "wrap", padding: "0.1in 0", fontFamily: "var(--ae-font-title)", fontSize: "0.16in", color: "var(--ae-text)" }}>
          <span>CH₄</span>
          <span style={{ display: "inline-flex", gap: "0.03in" }}>
            <Atom symbol="C" color="#0F1A3D" />
            <Atom symbol="H" color="#D7E2F5" />
            <Atom symbol="H" color="#D7E2F5" />
            <Atom symbol="H" color="#D7E2F5" />
            <Atom symbol="H" color="#D7E2F5" />
          </span>
          <Plus />
          <span>2&nbsp;O₂</span>
          <span style={{ display: "inline-flex", gap: "0.03in" }}>
            <Atom symbol="O" color="#D62E2E" />
            <Atom symbol="O" color="#D62E2E" />
            <Atom symbol="O" color="#D62E2E" />
            <Atom symbol="O" color="#D62E2E" />
          </span>
          <Arrow />
          <span>CO₂</span>
          <Plus />
          <span>2&nbsp;H₂O</span>
        </div>
        <Cols ratio="1fr 1fr" gap="0.18in">
          <div style={{
            background: "white", border: "1px solid var(--ae-border)", borderRadius: "0.06in",
            padding: "0.08in 0.1in",
          }}>
            <div style={{ fontSize: "0.1in", textTransform: "uppercase", letterSpacing: "0.04em", color: "var(--ae-muted)", marginBottom: "0.04in" }}>Atomes avant</div>
            <div style={{ fontSize: "var(--ae-fs-body)" }}>1 C · 4 H · 4 O</div>
          </div>
          <div style={{
            background: "white", border: "1px solid var(--ae-border)", borderRadius: "0.06in",
            padding: "0.08in 0.1in",
          }}>
            <div style={{ fontSize: "0.1in", textTransform: "uppercase", letterSpacing: "0.04em", color: "var(--ae-muted)", marginBottom: "0.04in" }}>Atomes après</div>
            <div style={{ fontSize: "var(--ae-fs-body)" }}>1 C · 4 H · 4 O</div>
          </div>
        </Cols>
      </Box>

      <ExerciseCard number={1} tone="orange" consigne="Complète les coefficients manquants pour équilibrer.">
        <div style={{ display: "grid", gap: "0.1in", fontFamily: "var(--ae-font-title)", fontSize: "0.155in", color: "var(--ae-text)" }}>
          <div style={{ display: "flex", gap: "0.05in", alignItems: "center", flexWrap: "wrap" }}>
            <span style={{ display: "inline-block", width: "0.32in", borderBottom: "1.6px solid var(--ae-text)", textAlign: "center" }}>&nbsp;</span>
            <span>H₂</span><Plus />
            <span style={{ display: "inline-block", width: "0.32in", borderBottom: "1.6px solid var(--ae-text)", textAlign: "center" }}>&nbsp;</span>
            <span>O₂</span><Arrow />
            <span style={{ display: "inline-block", width: "0.32in", borderBottom: "1.6px solid var(--ae-text)", textAlign: "center" }}>&nbsp;</span>
            <span>H₂O</span>
          </div>
          <div style={{ display: "flex", gap: "0.05in", alignItems: "center", flexWrap: "wrap" }}>
            <span>Fe</span><Plus />
            <span style={{ display: "inline-block", width: "0.32in", borderBottom: "1.6px solid var(--ae-text)", textAlign: "center" }}>&nbsp;</span>
            <span>O₂</span><Arrow />
            <span style={{ display: "inline-block", width: "0.32in", borderBottom: "1.6px solid var(--ae-text)", textAlign: "center" }}>&nbsp;</span>
            <span>Fe₂O₃</span>
          </div>
          <div style={{ display: "flex", gap: "0.05in", alignItems: "center", flexWrap: "wrap" }}>
            <span>C</span><Plus />
            <span style={{ display: "inline-block", width: "0.32in", borderBottom: "1.6px solid var(--ae-text)", textAlign: "center" }}>&nbsp;</span>
            <span>O₂</span><Arrow />
            <span>CO₂</span>
          </div>
        </div>
      </ExerciseCard>
    </PageShell>
  );
}

/* ═════════════════════════════════════════════════════════════════
   10 · science-concept-card — Fiche notion scientifique
   ═════════════════════════════════════════════════════════════════ */
function P3ScienceConceptCard({ density, qrVisible, scoreVisible, scale = 1 }) {
  // Schéma simple d'un circuit électrique
  const CircuitSVG = () => (
    <svg viewBox="0 0 280 180" width="100%" height="100%">
      <rect x="0" y="0" width="280" height="180" fill="#FFFEF7" />
      {/* fil */}
      <rect x="40" y="40" width="200" height="100" fill="none" stroke="#0F1A3D" strokeWidth="2" rx="4" />
      {/* pile */}
      <g transform="translate(60,40)">
        <rect x="-12" y="-8" width="24" height="16" fill="#FFC533" stroke="#0F1A3D" strokeWidth="1.4" />
        <line x1="-2" y1="-12" x2="-2" y2="12" stroke="#0F1A3D" strokeWidth="2" />
        <line x1="2"  y1="-6"  x2="2"  y2="6"  stroke="#0F1A3D" strokeWidth="2" />
        <text x="0" y="-16" textAnchor="middle" fontSize="9" fontFamily="Fredoka" fontWeight="600" fill="#0F1A3D">Pile</text>
      </g>
      {/* lampe */}
      <g transform="translate(220,90)">
        <circle r="14" fill="#FFEEDC" stroke="#F5781C" strokeWidth="2" />
        <line x1="-10" y1="-10" x2="10" y2="10" stroke="#F5781C" strokeWidth="1.4" />
        <line x1="-10" y1="10" x2="10" y2="-10" stroke="#F5781C" strokeWidth="1.4" />
        <text x="0" y="32" textAnchor="middle" fontSize="9" fontFamily="Fredoka" fontWeight="600" fill="#0F1A3D">Lampe</text>
      </g>
      {/* interrupteur */}
      <g transform="translate(140,140)">
        <line x1="-14" y1="0" x2="14" y2="0" stroke="#0F1A3D" strokeWidth="2" strokeDasharray="0" />
        <line x1="-14" y1="0" x2="10" y2="-8" stroke="#1B3FB8" strokeWidth="2" />
        <circle cx="-14" cy="0" r="2.6" fill="#0F1A3D" />
        <circle cx="14"  cy="0" r="2.6" fill="#0F1A3D" />
        <text x="0" y="20" textAnchor="middle" fontSize="9" fontFamily="Fredoka" fontWeight="600" fill="#0F1A3D">Interrupteur</text>
      </g>
      {/* flèches courant */}
      <path d="M120 40 L160 40" stroke="#1B3FB8" strokeWidth="2" markerEnd="url(#arrP3)" />
      <defs>
        <marker id="arrP3" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
          <path d="M0 0 L6 3 L0 6 Z" fill="#1B3FB8" />
        </marker>
      </defs>
    </svg>
  );

  return (
    <PageShell
      matiere="Physique-Chimie" niveau="5ᵉ" page={"Chapitre 7 · Page 52"}
      density={density} qrVisible={qrVisible} scoreVisible={scoreVisible}
      qrSlug="AE-5E-PC-003-2026-V1-P052"
      qrLabel="Mini-cours vidéo"
      scale={scale}
    >
      <PageTitle
        eyebrow="Physique-Chimie · Électricité"
        title="Fiche notion — Le circuit électrique"
        subtitle="Comprendre comment circule le courant dans un circuit simple."
      />

      <Cols ratio="1.2fr 1fr">
        <Box tone="yellow" label="Définition" iconKey="icon-ampoule">
          <div style={{ fontSize: "var(--ae-fs-body)", lineHeight: 1.55 }}>
            Un <b>circuit électrique</b> est un ensemble fermé de composants reliés par des fils
            conducteurs, qui permet la <b>circulation du courant</b> entre les bornes d'un générateur.
          </div>
        </Box>
        <Box tone="neutral" label="Schéma" iconKey="icon-loupe">
          <div style={{ height: "1.7in", borderRadius: "0.06in", overflow: "hidden", border: "1px solid var(--ae-border)" }}>
            <CircuitSVG />
          </div>
        </Box>
      </Cols>

      <Cols ratio="1fr 1fr">
        <Box tone="primary" label="Exemple concret" iconKey="icon-section">
          <div style={{ fontSize: "var(--ae-fs-body)", lineHeight: 1.5 }}>
            Une <b>lampe de poche</b> contient une pile (générateur), une ampoule (récepteur)
            et un interrupteur. Quand on appuie sur l'interrupteur, le circuit se ferme et l'ampoule s'allume.
          </div>
        </Box>
        <WarningBox title="Erreur à éviter" iconKey="icon-attention">
          Le courant ne circule <b>que</b> si le circuit est <b>fermé</b>. Un fil coupé ou un interrupteur
          ouvert = pas de courant, donc lampe éteinte.
        </WarningBox>
      </Cols>

      <ExerciseCard number={1} tone="orange" consigne="Mini-exercice — vrai ou faux ? (entoure la bonne réponse)">
        <div style={{ display: "grid", gap: "0.06in", fontSize: "var(--ae-fs-body)" }}>
          <div>1. Le courant circule dans un circuit ouvert. &nbsp; <b>V / F</b></div>
          <div>2. La pile fournit l'énergie au circuit. &nbsp; <b>V / F</b></div>
          <div>3. L'interrupteur sert à allumer ou éteindre le circuit. &nbsp; <b>V / F</b></div>
        </div>
      </ExerciseCard>
    </PageShell>
  );
}

/* ────────────────────────────────────────────────────────────────────────
   Exports
   ──────────────────────────────────────────────────────────────────────── */
Object.assign(window, {
  P3TimelineLesson,
  P3MapLabeling,
  P3HistoricalDocStudy,
  P3ImageAnalysis,
  P3GeoSketch,
  P3ScienceProtocol,
  P3DiagramLabeling,
  P3ClassificationTable,
  P3ChemistryEquation,
  P3ScienceConceptCard,
});
