/* Carnet : film d'ouverture plein écran */
#intro{display:none;position:fixed;inset:0;z-index:100;background:#03201a;overflow:hidden;-webkit-tap-highlight-color:transparent;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:#fff}
html.intro-on #intro{display:block}
html.intro-on,html.intro-on body{overflow:hidden;height:100%}
#intro video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#03201a}
/* fond flou derrière le film quand l'écran n'a pas exactement la forme de la vidéo */
#intro .flou{position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;filter:blur(40px) brightness(.55);transform:translateZ(0)}

#intro .haut-i{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
  padding:calc(12px + env(safe-area-inset-top)) 12px 0}
#intro button{font-family:inherit;cursor:pointer;border:0}
#intro .rond{background:rgba(2,26,18,.55);color:#fff;font-weight:800;font-size:16px;line-height:1;border-radius:999px;padding:13px 17px;
  border:1.5px solid rgba(255,255,255,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#intro .son{display:flex;align-items:center;gap:8px;background:#fff;color:#0a6b47;border-color:#fff;font-size:17px;padding:14px 20px;box-shadow:0 8px 26px rgba(0,0,0,.35);animation:bat-son 1.6s ease-in-out infinite}
#intro .son.ok{background:rgba(2,26,18,.55);color:#fff;border-color:rgba(255,255,255,.35);animation:none;box-shadow:none;font-size:16px;padding:13px 17px}
@keyframes bat-son{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

#intro .prog{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(255,255,255,.18);z-index:3}
#intro .prog i{display:block;height:100%;width:0;background:#ff8a1f}

/* lecture bloquée (économie de données, réglage « moins d'animations ») : un gros bouton */
#intro .lancer{position:absolute;left:50%;top:50%;z-index:4;transform:translate(-50%,-50%);width:104px;height:104px;border-radius:50%;
  background:#ff8a1f;color:#fff;font-size:42px;box-shadow:0 12px 40px rgba(0,0,0,.45);display:none}
#intro.attente .lancer{display:block}
#intro.fini .lancer{display:none}

/* fin du film : les boutons se posent sur la dernière image */
#intro .fin{position:absolute;left:0;right:0;bottom:0;z-index:4;display:none;flex-direction:column;align-items:center;gap:12px;
  padding:60px 18px calc(22px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(3,32,26,0),rgba(3,32,26,.92) 42%)}
#intro.fini .fin{display:flex}
#intro.fini .prog,#intro.fini .haut-i .son{display:none}
#intro .cta-i{display:block;width:100%;max-width:420px;text-align:center;background:#ff8a1f;color:#fff;font-weight:900;font-size:22px;line-height:1.15;
  padding:20px;border-radius:20px;text-decoration:none;box-shadow:0 8px 0 #b9560a,0 16px 36px rgba(0,0,0,.4)}
#intro .ligne{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
#intro .suite{background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.6);color:#fff;font-weight:800;font-size:17px;line-height:1;border-radius:14px;padding:15px 20px}