@font-face{font-family:"F241Fraunces";src:url(polices/Fraunces-500.ttf);font-weight:500}
@font-face{font-family:"F241Fraunces";src:url(polices/Fraunces-600.ttf);font-weight:600}
@font-face{font-family:"F241Plex";src:url(polices/IBMPlexSans-400.ttf);font-weight:400}
@font-face{font-family:"F241Plex";src:url(polices/IBMPlexSans-500.ttf);font-weight:500}
@font-face{font-family:"F241Plex";src:url(polices/IBMPlexSans-600.ttf);font-weight:600}
#f241{--fond:#F4F5F7;--encre:#1B2A44;--discret:#5A6478;--trait:#DDE1E8;--laiton:#B08D57;--laiton-fonce:#7A5C2E;--laiton-doux:#F4EEE3;--vert:#2E6B4F;--vert-doux:#E2EFE7;--nuit2:#2A3B5A;--nuit-texte:#C9D0DC}
#f241 *{box-sizing:border-box;margin:0;padding:0}
#f241 .f241-scene{position:absolute;left:0;top:0;transform-origin:0 0;width:1080px;height:1350px;overflow:hidden;font-family:F241Plex,sans-serif;color:var(--encre)}
#f241 .abs{position:absolute}
#f241 #f-nuit{inset:0;background:radial-gradient(ellipse at 50% 40%,#24375a 0%,#1B2A44 55%,#121d31 100%)}
#f241 #f-jour{inset:0;background:var(--fond)}
#f241 /* pages qui défilent */
.page{position:absolute;width:300px;height:400px;background:#fff;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.35);padding:34px 30px}
#f241 .page i{display:block;height:7px;background:#E3E7EE;border-radius:4px;margin-bottom:13px}
#f241 .page i.t{height:12px;background:#C9D0DC;width:60%;margin-bottom:22px}
#f241 #f-compteur{left:0;right:0;top:470px;text-align:center;font-family:F241Fraunces;font-weight:600;font-size:250px;color:#fff;letter-spacing:-.03em;line-height:1}
#f241 #f-compteurMot{left:0;right:0;top:740px;text-align:center;font-family:F241Fraunces;font-weight:500;font-size:64px;color:var(--laiton)}
#f241 #f-question1{left:0;right:0;top:560px;text-align:center;font-family:F241Fraunces;font-weight:600;font-size:110px;color:#fff;line-height:1.05}
#f241 #f-question1 em{font-style:normal;color:var(--laiton)}
#f241 #f-trait{left:140px;top:820px;height:3px;width:800px;background:var(--laiton);transform-origin:left}
#f241 /* titres de scène sur fond clair */
.titre{left:80px;right:80px;top:120px;font-family:F241Fraunces;font-weight:600;font-size:76px;line-height:1.08;letter-spacing:-.015em;color:var(--encre)}
#f241 .titre em{font-style:normal;color:var(--laiton-fonce)}
#f241 .sur{left:80px;top:84px;font-size:24px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--laiton-fonce)}
#f241 /* cartes du portail */
.carte{background:#fff;border:1px solid var(--trait);border-radius:22px;box-shadow:0 30px 80px rgba(27,42,68,.16);}
#f241 #f-demande{left:50px;width:980px;top:540px;padding:48px 50px}
#f241 #f-demande .lab{font-size:28px;font-weight:600;margin-bottom:22px}
#f241 #f-demande .txt{font-size:46px;line-height:1.35;min-height:250px}
#f241 #f-demande .curseur{display:inline-block;width:3px;height:40px;background:var(--encre);vertical-align:-6px;margin-left:2px}
#f241 #f-demande .bas{display:flex;justify-content:space-between;align-items:center;margin-top:26px}
#f241 .doc{display:flex;align-items:center;gap:16px;background:#ECEEF2;border-radius:14px;padding:16px 22px;font-size:27px}
#f241 .doc b{font-weight:600}
#f241 .doc span{color:var(--discret);font-size:24px;display:block}
#f241 .btn{background:var(--laiton-fonce);color:#fff;font-weight:600;font-size:30px;border-radius:999px;padding:22px 40px}
#f241 #f-lecture{left:50px;width:980px;top:500px;padding:50px}
#f241 #f-lecture h3{font-family:F241Fraunces;font-weight:600;font-size:44px;margin-bottom:28px}
#f241 .barre{height:22px;background:#E8ECF3;border-radius:99px;overflow:hidden}
#f241 .barre div{height:100%;background:var(--encre);border-radius:99px}
#f241 #f-lecture .info{display:flex;justify-content:space-between;align-items:center;margin-top:24px;font-size:30px;color:var(--discret)}
#f241 #f-lecture .num{font-family:F241Fraunces;font-weight:600;font-size:64px;color:var(--encre)}
#f241 .pastille{display:inline-block;font-size:25px;font-weight:600;border-radius:999px;padding:8px 20px}
#f241 .ok{color:var(--vert);background:var(--vert-doux)}
#f241 .att{color:var(--laiton-fonce);background:var(--laiton-doux);border:1.5px solid var(--laiton)}
#f241 .gris{color:var(--encre);background:#ECEEF2}
#f241 #f-accel{right:50px;top:440px;font-size:24px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--encre);border-radius:8px;padding:8px 14px}
#f241 #f-mini{left:60px;right:60px;top:860px;display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
#f241 .mp{width:62px;height:84px;background:#fff;border:1px solid var(--trait);border-radius:4px;position:relative;overflow:hidden}
#f241 .mp::after{content:"";position:absolute;left:0;right:0;bottom:0;background:var(--vert-doux);height:var(--h,0%)}
#f241 /* réponse */
#f-reponse{left:40px;width:1000px;top:380px;padding:48px 52px;transform-origin:50% 30%}
#f241 #f-reponse h3{font-family:F241Fraunces;font-weight:600;font-size:40px;margin-bottom:24px;display:flex;justify-content:space-between;align-items:baseline}
#f241 #f-reponse h3 small{font-family:F241Plex;font-weight:400;font-size:23px;color:var(--discret)}
#f241 #f-reponse p{font-size:35px;line-height:1.45}
#f241 #f-reponse ul{list-style:none;margin:22px 0 26px}
#f241 #f-reponse li{font-size:40px;line-height:1.5;margin:10px 0;display:flex;align-items:center;gap:12px}
#f241 #f-reponse li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--encre);margin-right:6px}
#f241 .chiffre{font-weight:600;border-bottom:2px dotted var(--encre);padding:0 4px;border-radius:6px}
#f241 .ref{color:var(--laiton-fonce);font-weight:500;text-decoration:underline;text-underline-offset:4px;padding:2px 6px;border-radius:8px}
#f241 .manque{margin-top:6px;padding:14px 18px;border-radius:12px}
#f241 .mention{margin-top:26px;background:#F1F3F6;border-radius:14px;padding:18px 22px;font-size:24px;line-height:1.45;color:var(--discret)}
#f241 /* volet page 160 */
#f-page160{left:90px;width:900px;top:1010px;padding:30px 34px;border-radius:18px;background:#fff;border:2px solid var(--laiton);box-shadow:0 30px 80px rgba(27,42,68,.25)}
#f241 #f-page160 .tag{display:inline-block;background:var(--laiton);color:#fff;font-weight:600;font-size:24px;border-radius:8px;padding:4px 12px;margin-bottom:14px}
#f241 #f-page160 .ttl{font-weight:600;font-size:30px;margin-bottom:10px}
#f241 #f-page160 .ext{font-size:28px;line-height:1.5;color:var(--discret)}
#f241 #f-page160 mark{background:#F3E3C3;color:var(--encre);padding:0 4px;border-radius:4px}
#f241 /* sources */
#f-sources{left:40px;width:1000px;top:400px;padding:44px 46px}
#f241 #f-sources .chips{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
#f241 .src{display:flex;gap:18px;align-items:flex-start;background:var(--laiton-doux);border-radius:14px;padding:24px 26px;margin-top:18px}
#f241 .src .p{background:var(--laiton);color:#fff;font-weight:600;font-size:24px;border-radius:8px;padding:4px 10px;white-space:nowrap;margin-top:2px}
#f241 .src b{display:block;font-size:30px;font-weight:600;margin-bottom:4px}
#f241 .src span{font-size:26px;color:var(--discret);line-height:1.4;display:block}
#f241 #f-curseur{width:44px;height:44px;left:0;top:0;z-index:50}
#f241 #f-curseur svg{filter:drop-shadow(0 3px 6px rgba(0,0,0,.35))}
#f241 .clic{position:absolute;width:70px;height:70px;border-radius:50%;border:3px solid var(--laiton);left:-35px;top:-35px}
#f241 /* fin */
#f-cadenas{left:0;right:0;top:360px;display:flex;justify-content:center}
#f241 #f-serveur1{left:60px;right:60px;top:560px;text-align:center;font-family:F241Fraunces;font-weight:600;font-size:80px;line-height:1.1;color:#fff}
#f241 #f-serveur2{left:60px;right:60px;top:800px;text-align:center;font-size:38px;line-height:1.5;color:var(--nuit-texte)}
#f241 #f-serveur2 b{color:#fff;font-weight:500}
#f241 #f-logo{left:0;right:0;top:330px;display:flex;justify-content:center}
#f241 #f-fin1{left:60px;right:60px;top:560px;text-align:center;font-family:F241Fraunces;font-weight:600;font-size:66px;line-height:1.15;color:#fff}
#f241 #f-fin1 em{font-style:normal;color:var(--laiton)}
#f241 #f-fin2{left:60px;right:60px;top:760px;text-align:center;font-size:30px;color:var(--nuit-texte);letter-spacing:.02em}
#f241 #f-fin3{left:0;right:0;top:880px;display:flex;justify-content:center}
#f241 #f-fin3 div{border:2px solid var(--laiton);color:#fff;font-weight:600;font-size:40px;border-radius:999px;padding:22px 54px;letter-spacing:.01em}
#f241 #f-fin4{left:60px;right:60px;top:1010px;text-align:center;font-size:28px;color:var(--laiton)}
#f241 /* bandeau permanent */
#f-mentionIA{left:0;right:0;bottom:0;height:64px;display:flex;align-items:center;justify-content:center;font-size:24px;letter-spacing:.01em}
#f241 #f-sceau{right:44px;top:40px;width:64px;height:64px}
#f241 #f-prog{left:0;top:0;height:5px;background:var(--laiton)}
/* ---- lecteur ---- */
#f241{position:relative;width:100%;aspect-ratio:4/5;background:#1B2A44;border-radius:12px;overflow:hidden;user-select:none;-webkit-user-select:none}
#f241:fullscreen{border-radius:0;aspect-ratio:auto;width:100vw;height:100vh;background:#0E1626}
#f241 .f241-cadre{position:absolute;inset:0;overflow:hidden}
#f241 .f241-grand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px;border:0;border-radius:999px;background:rgba(244,245,247,.95);color:#1B2A44;font:600 17px/1 "F241Plex",system-ui,sans-serif;padding:16px 26px 16px 20px;box-shadow:0 10px 30px rgba(0,0,0,.35);cursor:pointer;z-index:5}
#f241 .f241-grand span.r{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#7A5C2E;color:#fff}
#f241 .f241-grand:focus-visible,#f241 .f241-ctrl button:focus-visible{outline:3px solid #B08D57;outline-offset:2px}
#f241 .f241-ctrl{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:6px;padding:28px 10px 8px;background:linear-gradient(transparent,rgba(14,22,38,.75));opacity:0;transition:opacity .25s;z-index:6}
#f241.f241-lance:hover .f241-ctrl,#f241.f241-lance:focus-within .f241-ctrl,#f241.f241-pause .f241-ctrl{opacity:1}
#f241 .f241-ctrl button{border:0;background:transparent;color:#fff;width:36px;height:36px;border-radius:8px;display:grid;place-items:center;cursor:pointer;flex:none}
#f241 .f241-ctrl button:hover{background:rgba(255,255,255,.14)}
#f241 .f241-piste{flex:1;height:18px;display:flex;align-items:center;cursor:pointer}
#f241 .f241-piste div{height:4px;width:100%;background:rgba(255,255,255,.3);border-radius:99px;overflow:hidden}
#f241 .f241-piste i{display:block;height:100%;width:0;background:#B08D57}
#f241 .f241-temps{color:#fff;font:500 13px/1 "F241Plex",system-ui,sans-serif;min-width:74px;text-align:center;flex:none}
#f241 [hidden]{display:none!important}