@font-face{font-family:Outfit;src:url(/assets/brand/fonts/outfit.78b1e336842f.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:Fraunces;src:url(/assets/brand/fonts/fraunces-web.7c8b4bab375a.woff2) format("woff2");font-weight:100 900;font-display:swap}

  :root{
    --ink:#1B3A33;
    --ink-soft:#4C6660;
    --teal:#146B62;
    --teal-ink:#14524A;
    --mint:#DDF0EC;
    --sky:#E2EEF6;
    --peach:#F5E1D5;
    --lea:#D9734B;
  }
  /* Fond transparent : l'animation se fond dans la page qui l'intègre */
  html,body{margin:0;height:100%;background:transparent;overflow:hidden}
  body{font-family:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
    display:flex;align-items:center;justify-content:center}
  /* Netteté : la scène est mise à l'échelle avec `zoom` (texte redessiné à sa taille finale) */
  #stage{position:relative;flex:none;width:600px;height:680px;overflow:hidden}
  .abs{position:absolute;left:0;top:0}

  #frame{left:10px;top:10px;width:580px;height:660px;border-radius:34px;overflow:hidden;
    background:linear-gradient(160deg,#D3EAE5 0%,#D9E9EC 50%,#DDE8F1 100%)}
  #caption{left:0;top:634px;width:600px;text-align:center;font-size:12px;color:#4C6F6A}

  /* Fil d'Ariane : les trois étapes restent visibles, l'étape en cours est mise en avant */
  #steps{left:40px;top:30px;width:520px;height:34px;display:flex;align-items:center;gap:10px}
  .bc{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;white-space:nowrap;flex:none}
  .bc .n{position:relative;width:26px;height:26px;border-radius:50%;box-sizing:border-box;border:1.5px solid #B9CFC9;background:#fff;flex:none}
  .bc .n b,.bc .n i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:600;font-style:normal}
  .ln{flex:1;height:2px;border-radius:1px;background:rgba(20,107,98,.16);overflow:hidden}
  .ln i{display:block;height:100%;background:var(--teal);transform-origin:0 50%;transform:scaleX(0)}

  #card{left:40px;top:80px;width:520px;height:530px;border-radius:24px;background:#fff;
    box-shadow:0 18px 40px rgba(30,70,65,.08),0 1px 3px rgba(30,70,65,.05);transform-origin:50% 60%}
  #clip{left:40px;top:80px;width:520px;height:530px;border-radius:24px;overflow:hidden}

  /* Écran 1 : conversation (prof) */
  .av{border-radius:50%;background:var(--peach);display:flex;align-items:center;justify-content:center;font-weight:500}
  #s1av{left:26px;top:24px;width:44px;height:44px;font-size:19px}
  #s1name{left:82px;top:22px;font-size:20px;font-weight:600}
  #s1sub{left:82px;top:48px;font-size:14px;color:var(--ink-soft)}
  #s1line{left:26px;top:86px;width:468px;height:1px;background:#E7EEEB}
  .bub{border-radius:18px;box-sizing:border-box;padding:14px 18px;font-size:16.5px;line-height:25px}
  #typing{left:26px;top:106px;width:76px;height:44px;background:var(--sky);border-radius:18px;display:flex;align-items:center;justify-content:center;gap:6px;transform-origin:0 100%}
  #typing i{width:7px;height:7px;border-radius:50%;background:#7E9AAE}
  #bubL{left:26px;top:106px;width:350px;background:var(--sky);transform-origin:0 100%}
  #bubT{left:124px;top:228px;width:370px;background:var(--mint);transform-origin:100% 100%}
  #bubT .sp{height:32px;margin:6px 0}
  #sent{left:294px;top:384px;width:200px;text-align:right;font-size:12.5px;color:var(--ink-soft)}
  #compose{left:26px;top:466px;width:468px;height:46px;border-radius:23px;background:#F3F6F4;box-sizing:border-box;border:1px solid #E1E9E5}
  #compose .ph{position:absolute;left:18px;top:12px;font-size:15px;color:#8AA09A}
  #chip{position:absolute;right:5px;top:5px;height:34px;border-radius:17px;background:var(--teal);color:#fff;font-size:14.5px;font-weight:500;
    display:flex;align-items:center;gap:8px;padding:0 15px;white-space:nowrap}

  /* Le lien : dans la bulle, puis barre d'adresse chez l'élève */
  #link{border-radius:10px;overflow:hidden;white-space:nowrap}
  #link .tx{position:absolute;top:0;bottom:0;display:flex;align-items:center;gap:8px;font-size:15.5px}

  /* Écran 2 : page de l'élève */
  #brand{left:26px;top:74px;font-family:"Fraunces",Georgia,serif;font-size:23px}
  #s2sub{left:26px;top:108px;font-size:14.5px;color:var(--ink-soft)}
  #s2q{left:26px;top:138px;font-size:19px;font-weight:600;white-space:nowrap}
  .dh{width:138px;text-align:center;font-size:13px;color:var(--ink-soft);top:178px}
  .tl{left:26px;width:40px;font-size:12.5px;color:var(--ink-soft)}
  .cell{width:138px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:13.5px}
  .cell.off{background:#F1F5F6;color:#A9B8B6}
  .cell.on{background:var(--mint);color:var(--teal);font-weight:500}
  #count{left:26px;top:406px;font-size:13.5px;color:var(--ink-soft);white-space:nowrap}
  #send{left:26px;top:436px;width:468px;height:50px;border-radius:13px;background:var(--teal);color:#fff;font-size:16px;font-weight:600}
  #send span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px}
  #s2foot{left:26px;top:498px;width:468px;text-align:center;font-size:12.5px;color:var(--ink-soft)}

  /* Écran 3 : demande reçue (prof) */
  #s3new{left:26px;top:26px;display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-soft);white-space:nowrap}
  #s3new i{width:8px;height:8px;border-radius:50%;background:var(--lea)}
  #s3av{left:26px;top:58px;width:44px;height:44px;font-size:19px}
  #s3name{left:82px;top:56px;font-size:20px;font-weight:600}
  #s3sub{left:82px;top:82px;font-size:14px;color:var(--ink-soft)}
  #s3lbl{left:26px;top:128px;font-size:12px;letter-spacing:.07em;color:var(--ink-soft)}
  #toast{left:26px;top:310px;height:44px;border-radius:22px;background:var(--mint);color:var(--teal-ink);font-size:15px;font-weight:500;
    display:flex;align-items:center;gap:8px;padding:0 18px;white-space:nowrap}
  #s3foot{left:26px;top:372px;font-size:13.5px;color:var(--ink-soft);white-space:nowrap}

  /* Créneaux choisis : de la grille (élève) vers les demandes (prof) */
  .pick{border-radius:10px;overflow:hidden}
  .pick .a{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;color:#fff;font-size:13.5px;font-weight:500;white-space:nowrap}
  .pick .b{position:absolute;left:18px;top:0;bottom:0;display:flex;align-items:center;gap:10px;font-size:16.5px;font-weight:500;white-space:nowrap}
  .pick .btn{position:absolute;right:11px;top:11px;width:116px;height:38px;border-radius:19px;font-size:14.5px;font-weight:600}
  .pick .btn span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}

  /* Curseurs nommés */
  .cur{pointer-events:none;transform-origin:3px 3px}
  .cur .lab{position:absolute;left:22px;top:24px;font-size:12px;font-weight:600;color:#fff;padding:3px 9px;border-radius:999px;white-space:nowrap}
  #curT .lab{background:var(--teal)} #curL .lab{background:var(--lea)}