/* ==========================================================================
   Excellence — redesign "La Copie" (DA papier) — styles partagés
   Utilisé par iter2-a.html / iter2-b.html / iter2-c.html avec redesign.js
   ========================================================================== */

:root{
  --paper:#FBF7EF;
  --paper-deep:#F4EDE0;
  --ink:#1E1B16;
  --ink-soft:#5C564B;
  --seyes:rgba(116,154,201,.28);
  --seyes-bold:rgba(116,154,201,.45);
  --margin-red:#D6453A;
  --pen:#C2362B;
  --bic:#2540B8;
  --vert:#1E7A4F;
  --grade-0:#E21C1C; --grade-40:#D2A00F; --grade-60:#82B928; --grade-100:#22A064;
  /* tokens "produit" (fenêtres app, fidèles à l'app réelle) */
  --app-bg:#FFFFFF;
  --app-hair:#E4E4E7;
  --app-ink:#18181B;
  --app-soft:#71717A;
  --app-green:#16A34A;
  --app-green-soft:#F0FDF4;
  --app-violet:#7C3AED;
  --app-violet-soft:#F5F3FF;
  --radius:10px;
  --shadow-paper:0 1px 2px rgba(30,27,22,.08),0 12px 32px -12px rgba(30,27,22,.22);
  --shadow-app:0 1px 2px rgba(24,24,27,.05),0 24px 56px -24px rgba(24,24,27,.28);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  font-family:'Instrument Sans',sans-serif;
  background:var(--paper);color:var(--ink);line-height:1.6;overflow-x:hidden;
}
::selection{background:#F3D9B0;color:var(--ink)}
h1,h2,h3,.serif{font-family:'Fraunces',serif}
.pt{font-size:.72em} /* points finaux discrets dans les grands titres */
.hand{font-family:'Caveat',cursive}
.math{font-family:Georgia,'Times New Roman',serif;font-style:italic}
.container{max-width:1120px;margin:0 auto;padding:0 28px}

/* fond Seyès + marge rouge */
.seyes-bg{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(to right, transparent 71px, var(--margin-red) 71px, var(--margin-red) 73px, transparent 73px),
    repeating-linear-gradient(to bottom, transparent 0, transparent 30px, var(--seyes-bold) 30px, var(--seyes-bold) 31px),
    var(--paper);
  opacity:.5;
  mask-image:linear-gradient(to bottom, black 0%, transparent 34%);
  -webkit-mask-image:linear-gradient(to bottom, black 0%, transparent 34%);
}
@media (max-width:760px){ .seyes-bg{background:
  repeating-linear-gradient(to bottom, transparent 0, transparent 30px, var(--seyes-bold) 30px, var(--seyes-bold) 31px),
  var(--paper);} }
body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- header ---------- */
header.site{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(251,247,239,.86);backdrop-filter:blur(10px);
  border-bottom:1.5px solid var(--ink);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand img{height:34px;width:34px;border-radius:50%}
.brand span{font-family:'Fraunces',serif;font-weight:700;font-size:1.3rem;letter-spacing:-.01em}
nav.links{display:flex;gap:30px}
nav.links a{color:var(--ink-soft);text-decoration:none;font-weight:500;font-size:.95rem;position:relative}
nav.links a:hover{color:var(--ink)}
nav.links a:hover::after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:2px;background:var(--pen);transform:rotate(-1deg)}
.nav-cta{display:flex;align-items:center;gap:14px}
@media (max-width:880px){nav.links{display:none}}
@media (max-width:560px){
  .nav-cta{gap:8px}
  .nav-cta .btn-ghost{padding:9px 13px;font-size:.82rem}
}
/* header étroit : le bouton devient "Essayer", le CTA complet reste dans le hero */
@media (max-width:480px){.nav-cta .cta-long{display:none}}
@media (max-width:410px){.brand span{display:none}}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;
  padding:11px 22px;border-radius:999px;font-size:.95rem;transition:transform .18s ease, box-shadow .18s ease;
  font-family:'Instrument Sans',sans-serif;border:none;cursor:pointer;white-space:nowrap;
}
.btn-ink{background:var(--ink);color:var(--paper);border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--pen)}
.btn-ink:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--pen)}
.btn-ghost{color:var(--ink);border:1.5px solid var(--ink);background:transparent}
.btn-ghost:hover{background:var(--paper-deep)}
.btn-red{background:var(--pen);color:#fff;border:1.5px solid var(--pen);box-shadow:3px 3px 0 var(--ink)}
.btn-red:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}

/* ---------- hero générique ---------- */
.kicker{
  display:inline-flex;align-items:center;gap:10px;font-size:.8rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pen);margin-bottom:22px;
}
.hero h1{font-size:clamp(2.5rem,5vw,4.1rem);font-weight:900;line-height:1.05;letter-spacing:-.02em;margin-bottom:24px;text-wrap:balance}
.hero h1 .trait{font-style:italic;font-weight:600;position:relative;white-space:nowrap}
.hero h1 .trait svg{position:absolute;left:-2%;bottom:-10px;width:104%;height:18px;overflow:visible}
.hero h1 .trait svg path{stroke:var(--pen);stroke-width:3.5;fill:none;stroke-linecap:round;
  stroke-dasharray:600;stroke-dashoffset:600;animation:draw 1.1s .5s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hero p.lede{font-size:1.16rem;color:var(--ink-soft);max-width:34rem;margin-bottom:34px}
.hero p.lede b{color:var(--ink);font-weight:600}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.note-marge{font-family:'Caveat',cursive;font-size:1.3rem;color:var(--bic);transform:rotate(-1.5deg);display:inline-block}
.note-marge.verte{color:var(--vert)}
.note-marge.rouge{color:var(--pen)}

/* ---------- copie corrigée (hero variante A) ---------- */
.copie{
  position:relative;background:#FFFEFA;border:1px solid #E7DFCE;border-radius:4px;
  box-shadow:var(--shadow-paper);padding:34px 30px 30px 64px;transform:rotate(1.2deg);
  background-image:
    linear-gradient(to right, transparent 44px, rgba(214,69,58,.55) 44px, rgba(214,69,58,.55) 45.5px, transparent 45.5px),
    repeating-linear-gradient(to bottom, transparent 0, transparent 27px, var(--seyes) 27px, var(--seyes) 28px);
}
.copie::before{
  content:'';position:absolute;top:-16px;left:42px;width:16px;height:44px;border:3px solid #9AA3AE;
  border-radius:8px;border-bottom:none;clip-path:inset(0 0 18% 0);
}
.copie .head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.copie .head .meta{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft)}
.copie .head .meta b{display:block;font-size:.95rem;color:var(--ink);letter-spacing:0;text-transform:none;font-family:'Fraunces',serif}
.grade-stamp{
  font-family:'Caveat',cursive;font-weight:700;font-size:2.3rem;color:var(--pen);line-height:1;
  border:2.5px solid var(--pen);border-radius:50%;width:84px;height:84px;display:grid;place-items:center;
  transform:rotate(8deg) scale(0);animation:stamp .5s 2.1s cubic-bezier(.2,2.2,.4,1) forwards;
}
@keyframes stamp{to{transform:rotate(8deg) scale(1)}}
.copie .line{font-family:'Caveat',cursive;font-size:1.32rem;color:#2C3A8C;line-height:28px;white-space:nowrap;overflow:hidden;width:0}
.copie .line.l1{animation:type 1s .7s steps(28) forwards}
.copie .line.l2{animation:type 1s 1.1s steps(30) forwards}
.copie .line.l3{animation:type .9s 1.5s steps(22) forwards}
@keyframes type{to{width:100%}}
.copie .annot{
  font-family:'Caveat',cursive;color:var(--pen);font-size:1.25rem;font-weight:600;
  transform:rotate(-2deg);opacity:0;animation:fadeup .5s 2.5s ease forwards;margin-top:6px;
}
@keyframes fadeup{from{opacity:0;transform:translateY(8px) rotate(-2deg)}to{opacity:1;transform:rotate(-2deg)}}
.copie .progress-tag{
  position:absolute;bottom:-18px;right:22px;background:var(--ink);color:var(--paper);
  font-size:.78rem;font-weight:600;padding:8px 14px;border-radius:999px;display:flex;gap:8px;align-items:center;
  box-shadow:var(--shadow-paper);opacity:0;animation:fadeup .5s 2.9s ease forwards;
}
.dotg{width:9px;height:9px;border-radius:50%;background:var(--grade-100)}
.check-svg{flex:none}

/* ---------- partenaires ---------- */
.partners{padding:30px 0 50px;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);background:var(--paper-deep)}
.partners h3{font-family:'Instrument Sans',sans-serif;text-align:center;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin:18px 0 22px}
.logo-rail{overflow:hidden;mask-image:linear-gradient(to right,transparent,black 12%,black 88%,transparent)}
.logo-track{display:flex;align-items:center;width:max-content;animation:rail 26s linear infinite}
.logo-set{display:flex;align-items:center;gap:72px;padding-right:72px;flex:none}
@media (hover:hover){.logo-track:hover{animation-play-state:paused}} /* pas de pause au tap mobile */
/* --set = largeur exacte d'un jeu de logos, posée par redesign.js ; avant mesure le track reste immobile */
@keyframes rail{to{transform:translateX(calc(-1 * var(--set, 0px)))}}
/* logos officiels : hauteur uniforme, encre grisée qui reprend ses couleurs au survol,
   multiply pour fondre les blancs dans le papier */
.logo-track img{
  height:46px;width:auto;max-width:180px;object-fit:contain;
  filter:grayscale(1);opacity:.72;mix-blend-mode:multiply;transition:.25s;
}
.logo-track img:hover{filter:none;opacity:1}
.logo-track img[src*="saint-dominique"]{filter:grayscale(1) contrast(1.6) brightness(.8)}
.logo-track img[src*="saint-dominique"]:hover{filter:contrast(1.2)}

/* ---------- scaffolding sections "sujet d'examen" ---------- */
section.exo{padding:96px 0}
.exo-head{display:flex;align-items:baseline;gap:18px;margin-bottom:14px}
.exo-num{
  font-family:'Fraunces',serif;font-weight:900;font-size:1rem;background:var(--ink);color:var(--paper);
  padding:6px 14px;border-radius:3px;white-space:nowrap;
}
.exo-pts{font-family:'Caveat',cursive;color:var(--pen);font-size:1.25rem;white-space:nowrap}
.exo h2{font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:700;letter-spacing:-.015em;line-height:1.12;max-width:46rem;text-wrap:balance}
.exo .sub{color:var(--ink-soft);font-size:1.1rem;max-width:40rem;margin-top:14px}
.exo .sub b{color:var(--ink);font-weight:600}

/* ---------- le gros chiffre (avant les blocs problèmes) ---------- */
.constat-stat{display:flex;align-items:center;gap:28px;margin-top:30px;flex-wrap:wrap}
.cs-num{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(4.2rem,8vw,6.6rem);line-height:.9;color:var(--pen);letter-spacing:-.03em}
.cs-cap{max-width:26rem;font-size:1.12rem;color:var(--ink);font-weight:600;line-height:1.45}
.cs-src{display:block;width:max-content;margin-top:10px;font-size:.8rem;font-weight:500;color:var(--ink-soft);
  text-decoration:none;border-bottom:1px dashed #B8AF9C;padding-bottom:1px;transition:.2s}
.cs-src:hover{color:var(--pen);border-color:var(--pen)}

/* ---------- constat a/b/c ---------- */
.constat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:50px}
.constat-stat + .constat-grid{margin-top:24px}
.constat-grid.solutions .abc{color:var(--vert)}
@media (max-width:880px){.constat-grid{grid-template-columns:1fr}}
.constat{
  background:#FFFEFA;border:1px solid #E7DFCE;border-radius:var(--radius);padding:30px 28px;
  box-shadow:var(--shadow-paper);transition:transform .25s ease;
  display:flex;flex-direction:column;
}
.constat:nth-child(1){transform:rotate(-.5deg)}
.constat:nth-child(3){transform:rotate(.5deg)}
.constat:hover{transform:rotate(0) translateY(-6px)}
.constat .abc{font-family:'Fraunces',serif;font-style:italic;font-weight:600;font-size:2.4rem;color:var(--pen);line-height:1;margin-bottom:14px}
.constat h3{font-size:1.17rem;font-weight:700;margin-bottom:10px}
.constat p{color:var(--ink-soft);font-size:.97rem;margin-bottom:18px}
.constat .fleche{
  font-family:'Caveat',cursive;font-size:1.32rem;color:var(--vert);line-height:1.3;display:block;
  border-top:1px dashed #D8CFBC;padding-top:16px;transform:rotate(-.5deg);margin-top:auto;
}
.constat .fleche::before{content:'→ '}
.constat .fleche.rouge{color:var(--pen)}

/* ---------- piliers (icônes SVG trait de stylo) ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:50px}
.pillars.deux{grid-template-columns:repeat(2,1fr)}
@media (max-width:880px){.pillars,.pillars.deux{grid-template-columns:1fr}}
.pillar{
  background:#FFFEFA;border:1.5px solid var(--ink);border-radius:var(--radius);padding:30px 26px;
  box-shadow:5px 5px 0 var(--paper-deep);transition:.2s;
}
.pillar:hover{box-shadow:7px 7px 0 #E9DFC9;transform:translate(-2px,-2px)}
.pillar .pic{width:34px;height:34px;margin-bottom:14px}
.pillar .pic svg{width:100%;height:100%;overflow:visible}
.pillar .pic path,.pillar .pic circle,.pillar .pic line{
  stroke:var(--pen);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:300;stroke-dashoffset:300;
}
.pillar.in .pic path,.pillar.in .pic circle,.pillar.in .pic line{animation:draw 1.2s .3s ease forwards}
.pillar:nth-child(2) .pic path{stroke:var(--bic)}
.pillar:nth-child(3) .pic path,.pillar:nth-child(3) .pic circle{stroke:var(--vert)}
.pillar h3{font-size:1.35rem;margin-bottom:10px;font-weight:700}
.pillar p{color:var(--ink-soft);font-size:.99rem}
.pillar .hand-tag{font-family:'Caveat',cursive;color:var(--vert);font-size:1.25rem;display:inline-block;margin-top:14px;transform:rotate(-1.5deg)}

/* ==========================================================================
   FENÊTRE APP (fidèle au produit : fond blanc, zinc, pilules noires)
   ========================================================================== */
.appwin{
  position:relative;
  background:var(--app-bg);border:1px solid var(--app-hair);border-radius:16px;overflow:hidden;
  box-shadow:var(--shadow-app);font-size:.85rem;color:var(--app-ink);
  font-feature-settings:'ss01';
}
.awbar{display:flex;align-items:center;gap:7px;padding:11px 16px;border-bottom:1px solid var(--app-hair);background:#FAFAFA}
.awbar i{width:10px;height:10px;border-radius:50%;background:var(--app-hair)}
.awbar .url{font-size:.72rem;color:var(--app-soft);margin-left:10px;background:#F4F4F5;padding:4px 14px;border-radius:99px;font-weight:500}
.awbody{padding:22px 26px 26px}
.awhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.awhead h4{font-family:'Instrument Sans',sans-serif;font-weight:800;font-size:1.5rem;letter-spacing:-.02em}
.awhead small{color:var(--app-soft);font-size:.74rem;display:block;margin-top:2px}
.pill-draft{font-size:.66rem;font-weight:700;letter-spacing:.1em;background:#F4F4F5;color:var(--app-soft);padding:7px 14px;border-radius:99px}
.awtoggles{display:flex;gap:18px;flex-wrap:wrap;border:1px solid var(--app-hair);border-radius:12px;padding:12px 16px;margin-bottom:16px}
.tgl{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:600;color:var(--app-ink)}
.tgl i{width:30px;height:17px;border-radius:99px;background:#E4E4E7;position:relative;flex:none;transition:.2s}
.tgl i::after{content:'';position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:#fff;transition:.2s}
.tgl.on i{background:var(--app-ink)}
.tgl.on i::after{left:15px}

/* zone d'import */
.dropzone{
  position:relative;border:1.5px dashed #D4D4D8;border-radius:14px;min-height:190px;
  display:grid;place-items:center;text-align:center;padding:22px;overflow:hidden;background:#FCFCFC;
}
.dz-empty{transition:.3s}
.dz-empty .dz-ico{
  width:46px;height:46px;border-radius:12px;background:#fff;border:1px solid var(--app-hair);
  display:grid;place-items:center;margin:0 auto 10px;box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.dz-empty h5{font-family:'Instrument Sans',sans-serif;font-weight:800;font-size:1.05rem;margin-bottom:4px}
.dz-empty p{color:var(--app-soft);font-size:.8rem;max-width:30rem;margin:0 auto 14px}
.dz-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
.dz-btn{font-size:.78rem;font-weight:600;padding:9px 16px;border-radius:99px;display:inline-flex;align-items:center;gap:7px}
.dz-btn.noir{background:var(--app-ink);color:#fff}
.dz-btn.blanc{background:#fff;border:1px solid var(--app-hair);color:var(--app-ink)}
.dz-types{font-size:.7rem;color:var(--app-soft)}
.dz-types b{background:#F4F4F5;border-radius:5px;padding:2px 7px;font-weight:600;margin:0 2px;color:#52525B}

/* le PDF qui vole */
.pdf-chip{
  position:absolute;top:18px;right:24px;display:flex;align-items:center;gap:9px;
  background:#fff;border:1px solid var(--app-hair);border-radius:10px;padding:9px 14px;
  font-size:.76rem;font-weight:600;box-shadow:0 8px 22px -8px rgba(24,24,27,.3);opacity:0;z-index:3;
}
.pdf-chip .ftag{background:var(--pen);color:#fff;font-size:.6rem;font-weight:700;border-radius:4px;padding:3px 6px;letter-spacing:.06em}
/* lecture du pdf */
.dz-loading{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:11px;padding:0 56px;opacity:0;z-index:2;background:#FCFCFC}
.dz-loading .ttl{font-size:.78rem;font-weight:700;color:var(--app-ink);display:flex;align-items:center;gap:8px}
.dz-loading .ttl i{width:8px;height:8px;border-radius:50%;background:var(--app-green);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.3}}
.skel{height:11px;border-radius:99px;background:#EFEFF1;position:relative;overflow:hidden}
.skel::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);animation:shine 1.4s linear infinite}
@keyframes shine{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* cartes exercice (fidèles au produit) */
.exo-cards{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.exo-card{
  border:1px solid var(--app-hair);border-radius:14px;padding:18px 20px;background:#fff;
  opacity:0;transform:translateY(12px);position:relative;
}
.exo-card .top{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.exo-card .numtag{font-size:.68rem;font-weight:700;border:1px solid var(--app-hair);border-radius:99px;padding:3px 9px;color:var(--app-ink)}
.exo-card .mini{width:22px;height:22px;border-radius:99px;display:grid;place-items:center;font-size:.62rem}
.exo-card .mini.b{background:#EFF6FF;color:#2563EB}
.exo-card .mini.o{background:#FFF7ED;color:#EA580C}
.exo-card .enonce{font-size:.86rem;color:var(--app-ink);line-height:1.55}
.exo-card .enonce .math{font-size:1rem}
.exo-card .formule{text-align:center;font-family:Georgia,serif;font-style:italic;font-size:1.05rem;padding:9px 0}
.exo-card .corrige{
  margin-top:12px;border:1px solid #BBE3C8;background:var(--app-green-soft);color:#15803D;
  border-radius:10px;padding:9px 14px;font-size:.78rem;font-weight:600;display:flex;align-items:center;gap:8px;
  width:0;min-width:0;overflow:hidden;white-space:nowrap;opacity:0;
}
.exo-card .actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;opacity:0}
.exo-card .actions span{
  border:1px solid var(--app-hair);border-radius:9px;padding:8px 12px;font-size:.74rem;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:7px;color:var(--app-ink);background:#fff;
}
.exo-card .actions span.vert{border-color:#BBE3C8;background:var(--app-green-soft);color:#15803D}
.exo-card .actions span.violet{border-color:#DDD6FE;background:var(--app-violet-soft);color:var(--app-violet)}
/* badge final */
.demo-done{
  position:absolute;right:22px;bottom:18px;z-index:5;
  font-family:'Caveat',cursive;font-weight:700;font-size:1.35rem;color:var(--vert);
  border:2.5px solid var(--vert);border-radius:10px;padding:6px 16px;transform:rotate(-5deg) scale(0);background:#FFFEFA;
}

/* ----- timeline démo PROF (cycle 13s, infinite) ----- */
.demo-prof .dz-empty       {animation:dpEmpty 13s linear infinite}
.demo-prof .pdf-chip       {animation:dpChip 13s linear infinite}
.demo-prof .dz-loading     {animation:dpLoad 13s linear infinite}
.demo-prof .exo-card.e1    {animation:dpCard1 13s linear infinite}
.demo-prof .exo-card.e2    {animation:dpCard2 13s linear infinite}
.demo-prof .e1 .corrige    {animation:dpCorr1 13s linear infinite}
.demo-prof .e2 .corrige    {animation:dpCorr2 13s linear infinite}
.demo-prof .exo-card .actions{animation:dpActs 13s linear infinite}
.demo-prof .demo-done      {animation:dpDone 13s linear infinite}
@keyframes dpEmpty{0%,3%{opacity:0}6%,16%{opacity:1}19%,100%{opacity:0}}
@keyframes dpChip{0%,5%{opacity:0;transform:translate(60px,-50px) rotate(4deg)}9%{opacity:1}
  16%{opacity:1;transform:translate(-40%,70px) rotate(0) scale(1)}19%,100%{opacity:0;transform:translate(-40%,70px) scale(.3)}}
@keyframes dpLoad{0%,18%{opacity:0}21%,32%{opacity:1}35%,100%{opacity:0}}
@keyframes dpCard1{0%,34%{opacity:0;transform:translateY(12px)}38%,92%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes dpCard2{0%,40%{opacity:0;transform:translateY(12px)}44%,92%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes dpCorr1{0%,48%{opacity:0;width:0}49%{opacity:1}55%,92%{opacity:1;width:100%}96%,100%{opacity:0}}
@keyframes dpCorr2{0%,52%{opacity:0;width:0}53%{opacity:1}59%,92%{opacity:1;width:100%}96%,100%{opacity:0}}
@keyframes dpActs{0%,58%{opacity:0}63%,92%{opacity:1}96%,100%{opacity:0}}
@keyframes dpDone{0%,66%{transform:rotate(-5deg) scale(0)}70%,90%{transform:rotate(-5deg) scale(1)}94%,100%{transform:rotate(-5deg) scale(0)}}

/* ==========================================================================
   TÉLÉPHONE ÉLÈVE (mobile-first : photo de la copie manuscrite)
   ========================================================================== */
.phone{
  width:300px;background:#0F0F11;border-radius:38px;padding:10px;box-shadow:var(--shadow-app);
  margin:0 auto;position:relative;
}
.phone .ph-screen{
  background:var(--app-bg);border-radius:30px;overflow:hidden;position:relative;
  font-size:.78rem;color:var(--app-ink);min-height:520px;display:flex;flex-direction:column;
}
.phone .notch{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:84px;height:18px;background:#0F0F11;border-radius:99px;z-index:9}
.ph-head{padding:42px 18px 10px;border-bottom:1px solid var(--app-hair);display:flex;justify-content:space-between;align-items:center}
.ph-head b{font-size:.86rem;font-weight:800}
.ph-head small{font-size:.64rem;color:var(--app-soft);border:1px solid var(--app-hair);border-radius:99px;padding:3px 9px}
.ph-exo{padding:14px 18px;border-bottom:1px solid var(--app-hair)}
.ph-exo p{font-size:.76rem;line-height:1.5}
.ph-exo .formule{text-align:center;font-family:Georgia,serif;font-style:italic;font-size:.95rem;padding:7px 0 2px}
/* la copie manuscrite (photo) */
.ph-paper{
  margin:14px 16px 0;background:#FFFEF7;border:1px solid #EAE3D2;border-radius:10px;padding:14px 14px 12px 26px;position:relative;
  background-image:
    linear-gradient(to right, transparent 16px, rgba(214,69,58,.4) 16px, rgba(214,69,58,.4) 17px, transparent 17px),
    repeating-linear-gradient(to bottom, transparent 0, transparent 21px, var(--seyes) 21px, var(--seyes) 22px);
  flex:1;
}
.hw{display:block;font-family:'Caveat',cursive;font-size:1.05rem;color:#2C3A8C;line-height:22px;white-space:nowrap;overflow:hidden;width:0;position:relative}
.hw-wrap{position:relative;display:block}
/* annotations correction */
.ann-check{position:absolute;right:2px;top:0;opacity:0}
.ann-check svg{width:20px;height:16px}
.ann-check svg path{stroke:var(--vert);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ann-wavy{position:absolute;left:0;right:30%;bottom:0;height:5px;opacity:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='6'%3E%3Cpath d='M0 3 Q3 0 6 3 T12 3 T18 3 T24 3' fill='none' stroke='%23C2362B' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x}
.ann-note{font-family:'Caveat',cursive;color:var(--pen);font-size:.98rem;display:block;margin-top:4px;opacity:0;transform:rotate(-1.5deg)}
.ph-grade{
  position:absolute;bottom:8px;right:10px;font-family:'Caveat',cursive;font-weight:700;font-size:1.25rem;color:var(--pen);
  border:2px solid var(--pen);border-radius:50%;width:52px;height:52px;display:grid;place-items:center;line-height:1;
  transform:rotate(8deg) scale(0);background:rgba(255,254,247,.9);z-index:4;
}
/* flash + scan */
.ph-flash{position:absolute;inset:0;background:#fff;opacity:0;z-index:8;border-radius:30px;pointer-events:none}
.ph-scan{position:absolute;left:8%;right:8%;height:3px;border-radius:99px;background:var(--app-green);opacity:0;z-index:5;box-shadow:0 0 14px rgba(22,163,74,.55)}
/* barre du bas : bouton photo */
.ph-foot{padding:12px 16px 16px;display:flex;align-items:center;justify-content:center;gap:14px}
.ph-shutter{
  width:54px;height:54px;border-radius:50%;border:3.5px solid var(--app-ink);display:grid;place-items:center;background:#fff;
}
.ph-shutter i{width:40px;height:40px;border-radius:50%;background:var(--app-ink);display:block}
.ph-submit{
  background:var(--app-ink);color:#fff;font-weight:700;font-size:.74rem;border-radius:99px;padding:11px 18px;
  display:inline-flex;align-items:center;gap:7px;opacity:.35;
}
.ph-status{
  position:absolute;left:50%;transform:translateX(-50%);bottom:86px;z-index:6;
  background:var(--app-ink);color:#fff;font-size:.66rem;font-weight:600;border-radius:99px;padding:7px 14px;
  display:flex;align-items:center;gap:7px;opacity:0;white-space:nowrap;
}
.ph-status i{width:7px;height:7px;border-radius:50%;background:var(--app-green);animation:pulse 1s infinite}

/* ----- timeline démo ÉLÈVE (cycle 13s, infinite) ----- */
.demo-eleve .hw.h1        {animation:deH1 13s linear infinite}
.demo-eleve .hw.h2        {animation:deH2 13s linear infinite}
.demo-eleve .ph-cam       {animation:deShut 13s linear infinite}
.demo-eleve .ph-flash     {animation:deFlash 13s linear infinite}
.demo-eleve .ph-scan      {animation:deScan 13s linear infinite}
.demo-eleve .ph-status    {animation:deStatus 13s linear infinite}
.demo-eleve .ph-submit    {animation:deSubmit 13s linear infinite}
.demo-eleve .ann-check    {animation:deCheck 13s linear infinite}
.demo-eleve .ann-wavy     {animation:deWavy 13s linear infinite}
.demo-eleve .ann-note     {animation:deNote 13s linear infinite}
.demo-eleve .ph-grade     {animation:deGrade 13s linear infinite}
@keyframes deH1{0%,4%{width:0}16%,94%{width:100%}98%,100%{width:0}}
@keyframes deH2{0%,16%{width:0}28%,94%{width:100%}98%,100%{width:0}}
@keyframes deShut{0%,31%{transform:scale(1)}33%{transform:scale(.86)}35%,100%{transform:scale(1)}}
@keyframes deFlash{0%,32%{opacity:0}34%{opacity:.9}37%,100%{opacity:0}}
@keyframes deScan{0%,38%{opacity:0;top:24%}42%{opacity:1}54%{opacity:1;top:62%}58%,100%{opacity:0;top:62%}}
@keyframes deStatus{0%,38%{opacity:0}42%,56%{opacity:1}60%,100%{opacity:0}}
@keyframes deSubmit{0%,30%{opacity:.35}34%,94%{opacity:1}98%,100%{opacity:.35}}
@keyframes deCheck{0%,60%{opacity:0}64%,94%{opacity:1}98%,100%{opacity:0}}
@keyframes deWavy{0%,66%{opacity:0}70%,94%{opacity:1}98%,100%{opacity:0}}
@keyframes deNote{0%,70%{opacity:0;transform:translateY(6px) rotate(-1.5deg)}74%,94%{opacity:1;transform:rotate(-1.5deg)}98%,100%{opacity:0}}
@keyframes deGrade{0%,78%{transform:rotate(8deg) scale(0)}82%,94%{transform:rotate(8deg) scale(1)}98%,100%{transform:rotate(8deg) scale(0)}}

/* légendes sous démos : petite note épinglée qui chevauche la fenêtre */
.demo-caption{
  position:relative;z-index:6;display:table;margin:-16px auto 0;
  font-family:'Caveat',cursive;font-size:1.3rem;color:var(--ink);text-align:center;
  background:#FFFEFA;border:1.5px solid var(--ink);border-radius:10px;padding:7px 20px;
  box-shadow:3px 3px 0 var(--paper-deep);transform:rotate(-1deg);
}
.demo-caption b{color:var(--pen);font-weight:600}

/* ---------- layouts plateforme ---------- */
.plateforme-row{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:center;margin-top:56px}
.plateforme-row.inverse{grid-template-columns:.75fr 1.25fr}
@media (max-width:920px){.plateforme-row,.plateforme-row.inverse{grid-template-columns:1fr;gap:36px}}
.featlist{display:flex;flex-direction:column;gap:4px}
.featlist .fitem{display:flex;gap:14px;padding:16px 0;border-bottom:1px dashed #D8CFBC}
.featlist .fitem:last-child{border-bottom:none}
.fcheck{flex:none;width:24px;height:24px;margin-top:2px}
.fcheck svg{width:100%;height:100%;overflow:visible}
.fcheck svg path{stroke:var(--vert);stroke-width:3.5;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:60;stroke-dashoffset:60}
.in .fcheck svg path{animation:draw .6s .2s ease forwards}
.fitem h4{font-size:1.05rem;font-weight:700;font-family:'Instrument Sans',sans-serif;margin-bottom:3px}
.fitem p{color:var(--ink-soft);font-size:.93rem}
.qui-tag{
  display:inline-block;font-family:'Caveat',cursive;font-size:1.5rem;color:var(--pen);transform:rotate(-1.5deg);margin-bottom:14px;
}
.qui-tag.bleu{color:var(--bic)}

/* tabs (variante B) */
.tabs{display:inline-flex;border:1.5px solid var(--ink);border-radius:999px;overflow:hidden;margin-top:34px;background:#FFFEFA}
.tabs button{
  font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:.98rem;border:none;background:transparent;
  color:var(--ink-soft);padding:12px 26px;cursor:pointer;transition:.2s;
}
.tabs button.active{background:var(--ink);color:var(--paper)}
.tab-pane{display:none}.tab-pane.show{display:block;animation:paneIn .4s ease}
@keyframes paneIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* colonnes (variante C) */
.deux-cotes{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:54px;align-items:start}
@media (max-width:920px){.deux-cotes{grid-template-columns:1fr}}
.cote{background:#FFFEFA;border:1.5px solid var(--ink);border-radius:var(--radius);padding:34px 30px;box-shadow:6px 6px 0 var(--paper-deep)}
.cote h3{font-size:1.5rem;font-weight:900;margin-bottom:4px}

/* ---------- CTA carnet ---------- */
.cta-final{padding:110px 0 120px}
/* pas de rotation : le texte doit rester parfaitement net */
.carnet{
  max-width:860px;margin:0 auto;background:#FFFEFA;border:1.5px solid var(--ink);border-radius:6px;
  box-shadow:8px 8px 0 var(--paper-deep), var(--shadow-paper);padding:56px 48px;text-align:center;position:relative;
}
.carnet::before{
  content:'MOT AUX PROFESSEURS';position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--pen);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.18em;padding:7px 16px;border-radius:3px;
}
.carnet h2{font-size:clamp(1.7rem,3vw,2.25rem);font-weight:900;letter-spacing:-.015em;margin-bottom:16px;text-wrap:balance}
.carnet p{color:var(--ink-soft);font-size:1.12rem;max-width:32rem;margin:0 auto 32px}
.carnet .hero-ctas{justify-content:center}
.carnet .sign{font-family:'Caveat',cursive;font-size:1.4rem;color:var(--bic);margin-top:30px;transform:rotate(-2deg);display:inline-block}

/* ---------- footer ---------- */
footer.site{border-top:1.5px solid var(--ink);background:var(--paper-deep);padding:34px 0}
.foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot small{color:var(--ink-soft)}
.legal-links{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.legal-links a{font-size:.82rem;font-weight:600;color:var(--ink-soft);text-decoration:none;border-bottom:1px dashed #B8AF9C;padding-bottom:1px;transition:.2s}
.legal-links a:hover{color:var(--pen);border-color:var(--pen)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ==========================================================================
   DÉMO DUO — le devoir part chez le prof, la copie revient de l'élève
   (cycle synchronisé de 22s : appwin + téléphone)
   ========================================================================== */
.duo{position:relative;max-width:880px;margin:0 auto;padding-right:118px}
.duo .appwin{font-size:.84rem}
.duo .phone{
  position:absolute;right:-64px;bottom:-38px;width:252px;transform:rotate(2deg);z-index:5;margin:0;
}
.duo .phone .ph-screen{min-height:450px}
.duo .hw{font-size:.9rem;line-height:20px}
.duo .ph-exo .formule{font-size:.88rem}
@media (max-width:880px){
  .duo{padding-right:0;padding-bottom:46px}
  /* sur mobile le téléphone chevauche la fenêtre app ; sa profondeur est gérée par sBackM */
  .duo .phone{right:-8px;bottom:-40px;width:208px}
  .duo .phone .ph-screen{min-height:400px}
  .duo .hw{font-size:.78rem;line-height:18px}
  .duo .ph-exo{padding:10px 12px}
  .duo .ph-exo p{font-size:.66rem}
  .duo .ph-exo .formule{font-size:.78rem}
  .duo .ph-head{padding:34px 12px 8px}
  .duo .ph-head b{font-size:.76rem}
  .duo .ph-cam{font-size:.62rem;padding:10px 13px}
  .duo .ph-paper{margin:10px 10px 0;padding:10px 10px 8px 20px}
  .duo .ann-note{font-size:.84rem}
  .duo .ph-grade{width:42px;height:42px;font-size:1rem}
  .duo .ph-notif{font-size:.6rem;top:36px}
  .duo .ph-idle p{font-size:.68rem}
  .duo .ph-idle .hand{font-size:.92rem}
  .duo .ph-status{font-size:.6rem;bottom:66px}
}

/* en-tête : pilule brouillon -> assigné, bouton +, popover de classes */
.pill-zone{display:flex;align-items:center;gap:10px;position:relative}
/* les deux pilules occupent la même cellule : la zone est dimensionnée par la plus large,
   rien ne déborde sur le titre (mobile) */
.pill-stack{display:inline-grid;align-items:center}
.pill-stack > span{white-space:nowrap;grid-area:1/1;justify-self:end}
.pill-on{
  font-size:.66rem;font-weight:700;letter-spacing:.08em;padding:7px 14px;border-radius:99px;
  background:var(--app-green-soft);color:#15803D;border:1px solid #BBE3C8;opacity:0;
}
.plusbtn{
  width:30px;height:30px;border-radius:99px;border:1px solid var(--app-hair);display:grid;place-items:center;
  color:var(--app-ink);background:#fff;flex:none;
}
.assign-pop{
  position:absolute;top:40px;right:0;width:200px;background:#fff;border:1px solid var(--app-hair);
  border-radius:12px;box-shadow:0 18px 44px -16px rgba(24,24,27,.35);padding:10px;z-index:8;
  opacity:0;transform:translateY(-4px) scale(.97);
}
.assign-pop b{display:block;font-size:.66rem;font-weight:700;letter-spacing:.06em;color:var(--app-soft);margin:2px 4px 8px;text-transform:uppercase}
.ap-item{display:flex;justify-content:space-between;align-items:center;font-size:.76rem;font-weight:600;padding:8px 10px;border-radius:8px;color:var(--app-ink)}
.ap-item.sel{background:#F4F4F5}
.ap-item .apc{opacity:0}
.ap-item .apc svg{width:13px;height:11px}
.ap-item .apc svg path{stroke:#15803D;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* scène : le pdf vole, lecture, cartes, badge corrigé, copie rendue */
.stage{position:relative;min-height:270px}
.stage .pdf-chip{top:4px;right:14px}
.stage .dz-loading{position:absolute;inset:0;border-radius:12px}
.ctag{
  position:absolute;top:12px;right:14px;font-size:.64rem;font-weight:700;color:#15803D;
  background:var(--app-green-soft);border:1px solid #BBE3C8;border-radius:99px;padding:4px 10px;opacity:0;
}
.copie-chip{
  position:absolute;bottom:-14px;right:265px;z-index:6;background:var(--app-ink);color:#fff;
  font-size:.72rem;font-weight:600;border-radius:99px;padding:8px 14px;display:flex;align-items:center;gap:8px;
  box-shadow:0 12px 30px -10px rgba(24,24,27,.5);opacity:0;
}

/* la copie papier de l'élève : glissée sous le téléphone, inclinée comme lui,
   l'écriture reste lisible (le téléphone ne couvre que la marge droite) */
.copie-libre{
  position:absolute;right:90px;bottom:95px;width:min(410px,54%);z-index:4;opacity:0;
  background:#FFFEF7;border:1px solid #EAE3D2;border-radius:6px;box-shadow:var(--shadow-paper);
  padding:16px 40px 20px 36px;transform:rotate(3deg);
  background-image:
    linear-gradient(to right, transparent 22px, rgba(214,69,58,.4) 22px, rgba(214,69,58,.4) 23px, transparent 23px),
    repeating-linear-gradient(to bottom, transparent 0, transparent 25px, var(--seyes) 25px, var(--seyes) 26px);
}
.copie-libre .cl-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
.copie-libre .cl-head b{font-family:'Fraunces',serif;font-size:.86rem;color:var(--ink)}
.copie-libre .cl-head span{font-size:.72rem;color:var(--ink-soft)}
.copie-libre .hw{font-size:1.18rem;line-height:26px}
.duo .copie-libre{animation:cpIn 32s linear infinite}
.duo .copie-libre .hw.cl1{animation:cpH1 32s linear infinite}
.duo .copie-libre .hw.cl2{animation:cpH2 32s linear infinite}
@keyframes cpIn{0%,57.5%{opacity:0;transform:translate(14px,26px) rotate(6deg)}60%,67.5%{opacity:1;transform:rotate(3deg)}70.5%,100%{opacity:0;transform:rotate(3deg) translate(40px,24px) scale(.9)}}
@keyframes cpH1{0%,61%{width:0}64.5%,100%{width:100%}}
@keyframes cpH2{0%,64%{width:0}67.2%,100%{width:100%}}
/* mobile : la copie CSS laisse place à une VRAIE copie (photo) qui glisse sous le
   téléphone, se fait photographier au flash, part dans le téléphone, puis la
   correction s'affiche à l'écran (l'écriture n'apparaît qu'après la photo) */
.copie-photo{display:none}
@media (max-width:880px){
  .copie-libre{display:none}
  .copie-photo{
    display:block;position:absolute;left:-6px;bottom:250px;width:min(82%,310px);z-index:5;
    border:1px solid #E3DCC9;border-radius:6px;box-shadow:var(--shadow-paper);
    transform:rotate(-3deg);opacity:0;
  }
  .duo .copie-photo{animation:cpPhoto 32s linear infinite}
}
@keyframes cpPhoto{
  0%,53.5%{opacity:0;transform:rotate(-6deg) translateY(36px)}
  56%,68.5%{opacity:1;transform:rotate(-3deg) translateY(0)}
  70.5%,100%{opacity:0;transform:rotate(2deg) translate(130px,-30px) scale(.22)}
}

/* téléphone : état d'attente + notification (utilisés en mode sync) */
.ph-idle{
  position:absolute;inset:0;z-index:7;background:var(--app-bg);border-radius:30px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  opacity:0;pointer-events:none;
}
.ph-idle .ico{width:40px;height:40px;border-radius:12px;border:1px solid var(--app-hair);display:grid;place-items:center;margin-bottom:6px}
.ph-idle p{font-size:.74rem;color:var(--app-soft);font-weight:600}
.ph-idle .hand{font-size:1.05rem;color:var(--ink-soft);transform:rotate(-1.5deg)}
.ph-notif{
  position:absolute;top:42px;left:10px;right:10px;z-index:8;background:var(--app-ink);color:#fff;
  border-radius:14px;padding:10px 12px;font-size:.68rem;opacity:0;box-shadow:0 12px 30px -10px rgba(24,24,27,.6);
  display:flex;align-items:center;gap:9px;
}
.ph-notif img{width:26px;height:26px;border-radius:7px;flex:none}
.ph-notif b{display:block;font-size:.62rem;margin-bottom:2px;color:#A1A1AA;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.ph-notif span{color:#fff;font-weight:600}

/* ----- timeline appwin (32s : import -> variante (clic droit) -> assignation -> résultats) ----- */
/* pendant la phase élève, la fenêtre prof passe en retrait */
.demo-prof2             {animation:dqFade 32s linear infinite}
.demo-prof2 .pdf-chip   {animation:dqChip 32s linear infinite}
.demo-prof2 .dz-loading {animation:dqLoad 32s linear infinite}
.demo-prof2 .exo-card.e1{animation:dqCard1 32s linear infinite}
.demo-prof2 .exo-card.e2{animation:dqCard2 32s linear infinite}
.demo-prof2 .ctag       {animation:dqTag 32s linear infinite}
.demo-prof2 .ctx-menu   {animation:dqCtx 32s linear infinite}
.demo-prof2 .ci.sel     {animation:dqCtxSel 32s linear infinite}
.demo-prof2 .var-status {animation:dqVarSt 32s linear infinite}
.demo-prof2 .exo-card.e2b{animation:dqCard2b 32s linear infinite}
.demo-prof2 .plusbtn    {animation:dqPlus 32s linear infinite}
.demo-prof2 .assign-pop {animation:dqPop 32s linear infinite}
.demo-prof2 .ap-item .apc{animation:dqCheck 32s linear infinite}
.demo-prof2 .pill-draft {animation:dqPillA 32s linear infinite}
.demo-prof2 .pill-on    {animation:dqPillB 32s linear infinite}
.demo-prof2 .copie-chip {animation:dqCopie 32s linear infinite}
.demo-prof2 .resultats  {animation:rPanel 32s linear infinite}
.demo-prof2 .r-histo i  {animation:rBar 32s cubic-bezier(.22,.61,.36,1) infinite}
.demo-prof2 .r-col em   {animation:rCnt 32s linear infinite}
.demo-prof2 .r-chip     {animation:rChip 32s linear infinite}
@keyframes dqChip{0%,2%{opacity:0;transform:translate(80px,-50px) rotate(4deg)}3.5%{opacity:1;transform:translate(0,0) rotate(0)}
  6.5%{opacity:1;transform:translate(-200px,80px) scale(1)}8%,100%{opacity:0;transform:translate(-200px,80px) scale(.3)}}
@keyframes dqLoad{0%,7.5%{opacity:0}9%,13%{opacity:1}15%,100%{opacity:0}}
@keyframes dqCard1{0%,14%{opacity:0;transform:translateY(12px)}16%,96%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes dqCard2{0%,17%{opacity:0;transform:translateY(12px)}19%,96%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes dqTag{0%,20%{opacity:0;transform:scale(.85)}22%,96%{opacity:1;transform:scale(1)}99%,100%{opacity:0}}
@keyframes dqCtx{0%,23.5%{opacity:0;transform:scale(.96)}25%,28.5%{opacity:1;transform:scale(1)}30%,100%{opacity:0}}
@keyframes dqCtxSel{0%,25.5%{background:#fff}27%{background:#F4F4F5}28.5%{background:var(--app-violet-soft)}30%,100%{background:#fff}}
@keyframes dqVarSt{0%,29.5%{opacity:0}31%,33.5%{opacity:1}35%,100%{opacity:0}}
@keyframes dqCard2b{0%,34%{opacity:0;transform:translateY(12px)}36.5%,96%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes dqPlus{0%,38%{transform:scale(1);box-shadow:0 0 0 0 rgba(24,24,27,.25)}
  40%{transform:scale(1.22);box-shadow:0 0 0 7px rgba(24,24,27,0)}42%,100%{transform:scale(1)}}
@keyframes dqPop{0%,41%{opacity:0;transform:translateY(-4px) scale(.97)}43%,48%{opacity:1;transform:none}50%,100%{opacity:0}}
@keyframes dqCheck{0%,44%{opacity:0}45.5%,48%{opacity:1}50%,100%{opacity:0}}
@keyframes dqPillA{0%,49%{opacity:1}51%,100%{opacity:0}}
@keyframes dqPillB{0%,49%{opacity:0}51%,96%{opacity:1}99%,100%{opacity:0}}
@keyframes dqFade{0%,53.5%{opacity:1}56.5%,82.5%{opacity:.45}85.5%,100%{opacity:1}}
@keyframes dqCopie{0%,83.5%{opacity:0;transform:translateY(8px)}85.5%,91%{opacity:1;transform:none}93.5%,100%{opacity:0}}
@keyframes rPanel{0%,88%{opacity:0;transform:translateY(10px)}90%,98.5%{opacity:1;transform:none}99.9%,100%{opacity:0}}
@keyframes rBar{0%,90%{transform:scaleY(0)}94%,98.5%{transform:scaleY(1)}99.9%,100%{transform:scaleY(0)}}
@keyframes rChip{0%,94%{opacity:0;transform:translateY(6px)}95.5%,98.5%{opacity:1;transform:none}99.9%,100%{opacity:0}}
@keyframes rCnt{0%,93%{opacity:0}94.5%,98.5%{opacity:1}99.9%,100%{opacity:0}}

/* ----- timeline téléphone en mode sync (32s) ----- */
.demo-eleve.sync .ph-idle   {display:none} /* le téléphone n'existe qu'une fois le devoir assigné */
.demo-eleve.sync .ph-notif  {animation:sNotif 32s linear infinite}
.demo-eleve.sync .hw.h1     {animation:sH1 32s linear infinite}
.demo-eleve.sync .hw.h2     {animation:sH2 32s linear infinite}
.demo-eleve.sync .ph-cam    {animation:sShut 32s linear infinite}
.demo-eleve.sync .ph-flash  {animation:sFlash 32s linear infinite}
.demo-eleve.sync .ph-status {animation:sStatus 32s linear infinite}
.demo-eleve.sync .ann-check {animation:sCheck 32s linear infinite}
.demo-eleve.sync .ann-wavy  {animation:sWavy 32s linear infinite}
.demo-eleve.sync .ann-note  {animation:sNote 32s linear infinite}
.demo-eleve.sync .ph-grade  {animation:sGrade 32s linear infinite}
/* chronologie : pilule ASSIGNÉ (49-51) -> le téléphone arrive avec la notif (52) ->
   l'élève rédige sur papier -> photo (68) -> analyse -> annotations -> note ->
   la copie corrigée remonte chez le prof -> résultats */
@keyframes sNotif{0%,52.5%{opacity:0;transform:translateY(-12px)}54.5%,58.5%{opacity:1;transform:none}61%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes sH1{0%,68.8%{width:0}69.2%,97%{width:100%}99.5%,100%{width:0}}
@keyframes sH2{0%,69.1%{width:0}69.5%,97%{width:100%}99.5%,100%{width:0}}
@keyframes sShut{0%,66.5%{transform:scale(1)}68%{transform:scale(.92)}69.5%,100%{transform:scale(1)}}
@keyframes sFlash{0%,67.5%{opacity:0}69%{opacity:.9}71%,100%{opacity:0}}
@keyframes sStatus{0%,70%{opacity:0}72%,77%{opacity:1}79%,100%{opacity:0}}
@keyframes sCheck{0%,77.5%{opacity:0}79%,97%{opacity:1}99.5%,100%{opacity:0}}
@keyframes sWavy{0%,79%{opacity:0}80.5%,97%{opacity:1}99.5%,100%{opacity:0}}
@keyframes sNote{0%,80.5%{opacity:0;transform:translateY(6px) rotate(-1.5deg)}82%,97%{opacity:1;transform:rotate(-1.5deg)}99.5%,100%{opacity:0}}
@keyframes sGrade{0%,82%{transform:rotate(8deg) scale(0)}84%,97%{transform:rotate(8deg) scale(1)}100%{transform:rotate(8deg) scale(0)}}

/* ==========================================================================
   Génération de variante (démo duo) + KaTeX
   ========================================================================== */
.varbtn{
  display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  border:1px solid #DDD6FE;background:var(--app-violet-soft);color:var(--app-violet);
  border-radius:9px;padding:7px 13px;font-size:.74rem;font-weight:600;
}
.var-status{
  display:inline-flex;align-items:center;gap:8px;margin-left:10px;font-size:.7rem;font-weight:600;color:var(--app-soft);opacity:0;
}
.var-status i{width:7px;height:7px;border-radius:50%;background:var(--app-violet);animation:pulse 1s infinite}
.exo-card.e2b{border-left:3px solid var(--app-violet)}
.vtag{
  position:absolute;top:12px;right:14px;font-size:.64rem;font-weight:700;color:var(--app-violet);
  background:var(--app-violet-soft);border:1px solid #DDD6FE;border-radius:99px;padding:4px 10px;
}
.tex{display:inline-block}
.formule .tex{font-size:1.04em}

/* ==========================================================================
   DÉMO PILOTAGE (prof) — la classe, les notes, les savoir-faire
   ========================================================================== */
.prows{margin-top:4px}
.prow{display:flex;align-items:center;gap:12px;border:1px solid var(--app-hair);border-radius:10px;padding:10px 14px;margin-bottom:8px;opacity:0}
.pnom{font-weight:600;font-size:.82rem;width:92px;flex:none}
.pjauge{flex:1;height:7px;border-radius:99px;background:#F4F4F5;overflow:hidden}
.pjauge i{display:block;height:100%;border-radius:99px;transform:scaleX(0);transform-origin:left}
.pnote{font-weight:700;font-size:.78rem;width:46px;text-align:right;flex:none}
.psec{font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--app-soft);margin:18px 2px 10px;opacity:0}
.skill{display:flex;align-items:center;gap:12px;margin-bottom:10px;font-size:.78rem;font-weight:600;opacity:0}
.skill > span:first-child{width:46%;flex:none}
.palerte{
  margin-top:16px;background:var(--app-ink);color:#fff;border-radius:12px;padding:11px 15px;font-size:.76rem;
  display:flex;gap:10px;align-items:center;opacity:0;
}
.palerte i{width:8px;height:8px;border-radius:50%;background:var(--grade-0);animation:pulse 1s infinite;flex:none}
.palerte b{color:#fff}
.demo-pilotage .pstat.ps1{animation:pst1 13s linear infinite}
.demo-pilotage .pstat.ps2{animation:pst2 13s linear infinite}
.demo-pilotage .spark polyline{animation:psparkline 13s linear infinite}
.demo-pilotage .spark circle{animation:psparkdot 13s linear infinite}
.demo-pilotage .prow.p1{animation:pi1 13s linear infinite}
.demo-pilotage .prow.p2{animation:pi2 13s linear infinite}
.demo-pilotage .prow.p3{animation:pi3 13s linear infinite}
.demo-pilotage .prow .pjauge i{animation:pbar 13s linear infinite}
.demo-pilotage .psec{animation:psec 13s linear infinite}
.demo-pilotage .skill.s1{animation:ps1 13s linear infinite}
.demo-pilotage .skill.s2{animation:ps2 13s linear infinite}
.demo-pilotage .skill .pjauge i{animation:pbar2 13s linear infinite}
.demo-pilotage .palerte{animation:palerte 13s linear infinite}
.demo-pilotage .pa-btn{animation:pabtn 13s linear infinite}
@keyframes pst1{0%,2%{opacity:0;transform:translateY(8px)}5%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes pst2{0%,5%{opacity:0;transform:translateY(8px)}8%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes psparkline{0%,8%{stroke-dashoffset:160}22%,94%{stroke-dashoffset:0}98%,100%{stroke-dashoffset:160}}
@keyframes psparkdot{0%,21%{opacity:0;transform:scale(.4)}24%,94%{opacity:1;transform:scale(1)}98%,100%{opacity:0}}
@keyframes pi1{0%,12%{opacity:0;transform:translateY(8px)}15%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes pi2{0%,16%{opacity:0;transform:translateY(8px)}19%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes pi3{0%,20%{opacity:0;transform:translateY(8px)}23%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes pbar{0%,24%{transform:scaleX(0)}36%,94%{transform:scaleX(1)}98%,100%{transform:scaleX(0)}}
@keyframes psec{0%,38%{opacity:0}41%,94%{opacity:1}98%,100%{opacity:0}}
@keyframes ps1{0%,42%{opacity:0;transform:translateY(6px)}45%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes ps2{0%,47%{opacity:0;transform:translateY(6px)}50%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes pbar2{0%,52%{transform:scaleX(0)}64%,94%{transform:scaleX(1)}98%,100%{transform:scaleX(0)}}
@keyframes palerte{0%,68%{opacity:0;transform:translateY(8px)}72%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes pabtn{0%,76%{transform:scale(1)}78.5%{transform:scale(1.08)}81%,100%{transform:scale(1)}}

/* ==========================================================================
   DÉMO AUTONOMIE (élève) — séance conseillée, remédiation
   ========================================================================== */
.au-intro{font-size:.76rem;color:var(--app-soft);margin:16px 18px 12px;opacity:0}
.au-card{border:1px solid var(--app-hair);border-radius:14px;padding:14px 15px;margin:0 16px 12px;opacity:0}
.au-card b{font-size:.85rem;display:block;margin-bottom:3px}
.au-card p{font-size:.74rem;color:var(--app-soft);line-height:1.45;margin-bottom:10px}
.au-btn{display:inline-flex;align-items:center;font-size:.72rem;font-weight:700;border-radius:99px;padding:8px 16px}
.au-btn.noir{background:var(--app-ink);color:#fff}
.au-btn.blanc{border:1px solid var(--app-hair);color:var(--app-ink);background:#fff}
.au-prog{display:block;height:6px;border-radius:99px;background:#F4F4F5;margin-top:12px;overflow:hidden;opacity:0}
.au-prog i{display:block;height:100%;border-radius:99px;background:var(--app-green);transform:scaleX(0);transform-origin:left}
.au-state{font-size:.66rem;color:var(--app-soft);margin-top:6px;display:block;opacity:0}
.au-note{display:block;text-align:center;font-size:1.05rem;color:var(--ink-soft);margin-top:8px;transform:rotate(-1.5deg);opacity:0}
.demo-autonomie .au-intro{animation:au0 12s linear infinite}
.demo-autonomie .au-card.a1{animation:au1 12s linear infinite}
.demo-autonomie .au-card.a2{animation:au2 12s linear infinite}
.demo-autonomie .au-card.a1 .au-btn{animation:auBtn 12s linear infinite}
.demo-autonomie .au-prog{animation:auProg 12s linear infinite}
.demo-autonomie .au-prog i{animation:auBar 12s linear infinite}
.demo-autonomie .au-state{animation:auProg 12s linear infinite}
.demo-autonomie .au-note{animation:auNote 12s linear infinite}
@keyframes au0{0%,4%{opacity:0}7%,94%{opacity:1}98%,100%{opacity:0}}
@keyframes au1{0%,8%{opacity:0;transform:translateY(10px)}11%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes au2{0%,14%{opacity:0;transform:translateY(10px)}17%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes auBtn{0%,28%{transform:scale(1)}30%{transform:scale(.92)}32%,100%{transform:scale(1)}}
@keyframes auProg{0%,34%{opacity:0}37%,94%{opacity:1}98%,100%{opacity:0}}
@keyframes auBar{0%,36%{transform:scaleX(0)}66%,94%{transform:scaleX(.75)}98%,100%{transform:scaleX(0)}}
@keyframes auNote{0%,20%{opacity:0}24%,94%{opacity:1}98%,100%{opacity:0}}

/* ==========================================================================
   Itération 4 : menu contextuel, bouton photo, résultats, sessions
   ========================================================================== */

/* questions à la ligne dans les cartes exercice */
.exo-card .enonce + .enonce{margin-top:4px}
.exo-card .enonce.q{padding-left:2px}

/* menu contextuel (clic droit sur un exercice) */
.ctx-menu{
  position:absolute;top:34px;right:22px;width:198px;background:#fff;border:1px solid var(--app-hair);
  border-radius:12px;box-shadow:0 18px 44px -14px rgba(24,24,27,.4);padding:6px;z-index:9;opacity:0;
}
.ci{display:block;font-size:.76rem;font-weight:600;padding:8px 11px;border-radius:8px;color:var(--app-ink)}
.ci.sep{border-top:1px solid var(--app-hair);border-radius:0;margin-top:4px;padding-top:10px}
.var-status{display:inline-flex;margin-left:0;margin-top:10px}

/* bouton photo du téléphone (refait) */
.ph-cam{
  display:inline-flex;align-items:center;gap:9px;background:var(--app-ink);color:#fff;
  font-weight:700;font-size:.74rem;border-radius:99px;padding:12px 20px;
}
.ph-cam svg{flex:none}

/* panneau résultats (fin de cycle duo) */
.resultats{
  position:absolute;inset:0;background:#fff;z-index:10;
  padding:14px 6px 0;display:flex;flex-direction:column;opacity:0;
}
.r-head b{font-size:1.05rem;font-weight:800;letter-spacing:-.01em;display:block}
.r-head small{color:var(--app-soft);font-size:.74rem}
.r-sub{font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--app-soft);margin:12px 4px 0}
.r-histo{display:flex;align-items:stretch;gap:8px;flex:1;margin:10px 4px 4px;min-height:110px}
.r-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px}
.r-col em{font-style:normal;font-size:.64rem;font-weight:700;color:var(--app-soft);line-height:1;opacity:0}
.r-histo i{width:100%;border-radius:6px 6px 0 0;transform:scaleY(0);transform-origin:bottom;display:block;flex:none}
.r-axe{display:flex;gap:8px;margin:2px 4px 14px}
.r-axe span{flex:1;text-align:center;font-size:.6rem;color:var(--app-soft);font-weight:600;white-space:nowrap}
.r-faibles{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.r-lab{font-size:.76rem;font-weight:700}
.r-chip{
  font-size:.7rem;font-weight:600;background:#FEF2F2;border:1px solid #FECACA;color:#B91C1C;
  border-radius:99px;padding:5px 12px;opacity:0;
}

/* pilotage : plus smooth */
.demo-pilotage .prow,.demo-pilotage .psec,.demo-pilotage .skill,.demo-pilotage .palerte,
.demo-pilotage .pjauge i{animation-timing-function:cubic-bezier(.22,.61,.36,1)}

/* sessions recommandées (démo élève, style produit) */
.au-kick{
  display:inline-block;font-size:.58rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  border-left:3px solid currentColor;padding-left:7px;margin-bottom:7px;line-height:1.2;
}
.au-meta{display:flex;align-items:center;gap:8px;font-size:.68rem;color:var(--app-soft);font-weight:600;margin-bottom:11px}
.au-stars{display:inline-flex;gap:3px}
.au-stars i{width:7px;height:7px;border-radius:50%;background:#E4E4E7;display:block}
.au-stars i.on{background:#F59E0B}
.au-btn.bleu{background:#4F46E5;color:#fff}
.au-chat{
  margin:2px 16px 0;border:1px solid var(--app-hair);border-radius:99px;padding:10px 14px;
  font-size:.7rem;color:var(--app-soft);display:flex;align-items:center;gap:9px;opacity:0;background:#fff;
}
.demo-autonomie .au-chat{animation:auNote 12s linear infinite}

/* ==========================================================================
   Itération 5 : stats de classe, session élève, démarrage au scroll, phone en retrait
   ========================================================================== */

/* stats de classe (pilotage) */
.pstats{display:grid;grid-template-columns:1fr 1.1fr;gap:10px;margin-bottom:14px}
.pstat{border:1px solid var(--app-hair);border-radius:12px;padding:12px 14px;opacity:0;background:#fff}
.pstat small{font-size:.64rem;color:var(--app-soft);display:block;margin-bottom:3px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.pstat b{font-size:1.55rem;font-weight:800;letter-spacing:-.02em;line-height:1}
.pstat b i{font-style:normal;font-size:.8rem;color:var(--app-soft);font-weight:600}
.ptrend{display:block;font-size:.68rem;color:#15803D;font-weight:700;margin-top:5px}
.spark{width:100%;height:38px;margin-top:2px;overflow:visible}
.spark polyline{fill:none;stroke:#22A064;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:160;stroke-dashoffset:160}
.spark circle{fill:#22A064;transform-origin:center;transform-box:fill-box}
.spark .axe{stroke:var(--app-hair);stroke-width:1}
.palerte{justify-content:flex-start}
.pa-btn{
  margin-left:auto;background:#fff;color:var(--app-ink);border-radius:99px;padding:7px 14px;
  font-weight:700;font-size:.68rem;white-space:nowrap;flex:none;
}

/* session élève : 3 exercices simples */
.au-session{
  position:absolute;inset:0;background:#FAFAFA;z-index:6;opacity:0;border-radius:30px;
  padding:48px 14px 14px;
}
.au-session .as-head b{font-size:.92rem;font-weight:800;display:block}
.au-session .as-head small{font-size:.68rem;color:var(--app-soft)}
.au-exo{
  background:#fff;border:1px solid var(--app-hair);border-radius:12px;padding:11px 13px;
  margin-top:10px;opacity:0;font-size:.74rem;display:flex;gap:9px;align-items:baseline;
}
.au-exo .numtag{flex:none}
.demo-autonomie .au-session{animation:auSess 12s linear infinite}
.demo-autonomie .au-exo.x1{animation:auX1 12s linear infinite}
.demo-autonomie .au-exo.x2{animation:auX2 12s linear infinite}
.demo-autonomie .au-exo.x3{animation:auX3 12s linear infinite}
.demo-autonomie .au-q{animation:auQ 12s linear infinite}
.demo-autonomie .au-a{animation:auA 12s linear infinite}
@keyframes auSess{0%,34%{opacity:0;transform:translateX(26px)}38%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes auX1{0%,40%{opacity:0;transform:translateY(8px)}43%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes auX2{0%,44%{opacity:0;transform:translateY(8px)}47%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes auX3{0%,48%{opacity:0;transform:translateY(8px)}51%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
/* l'élève interroge le tuteur, le tuteur guide sans donner la réponse */
.au-q{
  margin:14px 4px 0 44px;background:var(--app-ink);color:#fff;border-radius:14px 14px 4px 14px;
  padding:9px 12px;font-size:.72rem;font-weight:600;opacity:0;
}
.au-a{
  margin:8px 44px 0 4px;background:#fff;border:1px solid var(--app-hair);border-radius:14px 14px 14px 4px;
  padding:9px 12px;font-size:.72rem;line-height:1.5;opacity:0;
}
.au-a b{display:block;font-size:.58rem;color:var(--app-violet);margin-bottom:2px;text-transform:uppercase;letter-spacing:.08em}
@keyframes auQ{0%,57%{opacity:0;transform:translateY(6px)}61%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes auA{0%,65%{opacity:0;transform:translateY(6px)}69%,94%{opacity:1;transform:none}98%,100%{opacity:0}}

/* le téléphone n'apparaît qu'une fois le devoir assigné, puis passe en arrière-plan
   quand les résultats arrivent */
.duo .demo-eleve.sync{animation:sBack 32s linear infinite}
/* le téléphone arrive à l'assignation, recule pendant que l'élève écrit sur SA copie,
   revient au premier plan pour la photo, puis s'efface pour les résultats */
@keyframes sBack{
  0%,49.5%{opacity:0;z-index:5;transform:rotate(2deg) translateY(26px)}
  52%,58.5%{opacity:1;z-index:5;transform:rotate(2deg)}
  61%,65.5%{opacity:.5;z-index:3;transform:rotate(2.5deg) translate(10px,8px) scale(.97)}
  68%,86.5%{opacity:1;z-index:5;transform:rotate(2deg)}
  89.5%,97.5%{opacity:.38;z-index:-1;transform:rotate(2deg) translate(16px,10px) scale(.95)}
  99.5%,100%{opacity:0;z-index:5;transform:rotate(2deg) translateY(26px)}
}
/* mobile : absent avant l'assignation, devant pendant la phase élève, derrière pour les résultats */
@keyframes sBackM{
  0%,49.5%{opacity:0;z-index:-1;transform:rotate(3.5deg) scale(.94) translateY(20px)}
  52%,86%{opacity:1;z-index:7;transform:rotate(2deg) scale(1)}
  89.5%,97.5%{opacity:.5;z-index:-1;transform:rotate(3.5deg) scale(.94)}
  100%{opacity:0;z-index:-1;transform:rotate(3.5deg) scale(.94) translateY(20px)}
}
@media (max-width:880px){.duo .demo-eleve.sync{animation:sBackM 32s linear infinite}}

/* les démos ne démarrent que lorsqu'elles entrent à l'écran (classe .go via JS) */
.duo:not(.go) *,
.demo-pilotage:not(.go) *,
.demo-autonomie:not(.go) *{animation-play-state:paused!important}
.duo:not(.go) .demo-eleve.sync{animation-play-state:paused!important}

/* confort mobile pour la démo duo */
@media (max-width:880px){
  .awbody{padding:18px 16px 20px}
  .ctx-menu{right:8px}
  .copie-chip{right:auto;left:8px}
  /* le PDF ne part plus hors écran : trajectoire raccourcie */
  .demo-prof2 .pdf-chip{animation-name:dqChipM}
}
@keyframes dqChipM{0%,2%{opacity:0;transform:translate(20px,-30px) rotate(4deg)}3.5%{opacity:1;transform:translate(0,0) rotate(0)}
  6.5%{opacity:1;transform:translate(-90px,60px) scale(1)}8%,100%{opacity:0;transform:translate(-90px,60px) scale(.3)}}

/* ==========================================================================
   Titre écrit à la craie (hero iter3) — piloté par chalkWrite() dans redesign.js
   ========================================================================== */
.craie-title{position:relative}
.craie-title .chw{white-space:nowrap;display:inline-block}
.craie-title .ch{opacity:0;display:inline-block}
.craie-title .ch.on{animation:chIn .15s linear both}
@keyframes chIn{
  0%{opacity:1;clip-path:inset(-25% 100% -25% -4%);filter:blur(1.5px)}
  100%{opacity:1;clip-path:inset(-25% -10% -25% -4%);filter:none}
}
.hero h1.craie-title .trait svg path{animation:none}
.hero h1.craie-title.done .trait svg path{animation:draw .9s ease .25s forwards}
/* le reste du hero n'apparaît qu'une fois le titre écrit */
.hero .post-craie{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.hero.written .post-craie{opacity:1;transform:none}
.hero.written .post-craie.pc2{transition-delay:.15s}
.hero.written .post-craie.pc3{transition-delay:.3s}
/* ... et le reste de la page aussi (rien d'autre que le titre pendant l'écriture) */
body.craie-intro main > *:not(.hero){opacity:0;transform:translateY(18px)}
body.craie-intro.written main > *:not(.hero){
  opacity:1;transform:none;
  transition:opacity .8s ease .35s,transform .8s ease .35s;
}
.chalk-stick{
  position:absolute;left:0;top:0;width:78px;height:78px;z-index:6;pointer-events:none;opacity:0;
  transition:transform .11s linear,opacity .3s ease;will-change:transform;
}
.chalk-stick.on{opacity:1}
.chalk-stick.lift{transition:transform .24s ease}
.chalk-stick.bye{opacity:0;transition:transform .55s ease,opacity .55s ease}
.chalk-stick svg{
  width:100%;height:100%;overflow:visible;filter:drop-shadow(0 4px 6px rgba(30,27,22,.3));
  animation:chalkWobble .3s ease-in-out infinite alternate;transform-origin:18.75% 87.5%;
}
@keyframes chalkWobble{from{transform:rotate(-2.5deg)}to{transform:rotate(4deg)}}
.chalk-dust{
  position:absolute;width:4px;height:4px;border-radius:50%;background:#CFC9B8;pointer-events:none;z-index:5;
  animation:dustFall .7s ease-out forwards;
}
@keyframes dustFall{from{opacity:.9;transform:translateY(0)}to{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){
  .craie-title .ch{opacity:1!important;animation:none;clip-path:none!important}
  .chalk-stick,.chalk-dust{display:none}
  .craie-title .trait svg path{stroke-dashoffset:0!important}
  .hero .post-craie{opacity:1!important;transform:none!important}
}

/* ==========================================================================
   Passe mobile
   ========================================================================== */
@media (max-width:880px){
  .awhead{flex-wrap:wrap;gap:10px}
  .awhead h4{font-size:1.2rem}
}
@media (max-width:560px){
  .container{padding:0 20px}
  section.exo{padding:64px 0}
  .hero{padding:116px 0 28px!important}
  .hero h1{font-size:clamp(1.9rem,8.4vw,2.6rem)}
  .hero p.lede{font-size:1.04rem}
  .kicker{font-size:.72rem}
  .btn{padding:10px 18px;font-size:.9rem}
  .nav .btn-ink{padding:9px 14px;font-size:.84rem}
  .brand span{font-size:1.15rem}
  .brand img{height:30px;width:30px}
  .chalk-stick{width:52px;height:52px}
  .chalk-dust{width:3px;height:3px}
  .tabs{display:flex;width:100%}
  .tabs button{flex:1;padding:11px 6px;font-size:.86rem}
  .pstats{grid-template-columns:1fr}
  .skill > span:first-child{width:42%}
  .carnet{padding:42px 24px;transform:none}
  .exo-head{flex-wrap:wrap;gap:8px 14px}
  .demo-caption{font-size:1.12rem}
  .awbody{padding:16px 12px 18px}
  .awbar .url{max-width:55vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .exo-card{padding:13px 13px}
  .exo-card .formule{font-size:.95rem}
  .ctx-menu{width:176px;right:6px}
  .copie-chip{font-size:.62rem;padding:7px 11px;right:auto;left:8px}
  .resultats{padding:10px 2px 0}
  .r-histo{gap:5px}
  .r-faibles{gap:6px}
  .r-chip{font-size:.62rem;padding:4px 9px}
  .qui-tag{font-size:1.3rem}
  .hero-ctas{gap:10px}
  .plateforme-row,.plateforme-row.inverse{gap:30px}
  footer.site .foot{justify-content:center;text-align:center}
  .copie{padding:26px 18px 24px 48px;transform:rotate(.6deg)}
  .grade-stamp{width:66px;height:66px;font-size:1.8rem}
}