/* Les petites cartouches : un gabarit commun, l'identité de chaque projet dans ses couleurs, sa police et son détail animé. */
@font-face{font-family:"Geist";src:url("../assets/fonts/geist-latin.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"IM Fell English";src:url("../assets/fonts/IMFellEnglish-latin.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url("../assets/fonts/Inter-latin.woff2") format("woff2");font-weight:100 900;font-display:swap}

.pf{position:absolute;inset:0;container-type:size;overflow:hidden;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4cqh 6cqw 10cqh;background:var(--p);color:var(--ptx);font-family:"Public Sans",Arial,sans-serif;--e:min(1cqw,1.7cqh)}
.pf>*{margin:0}
.pf__scene{position:relative;flex:none;width:calc(var(--e)*46);height:calc(var(--e)*23);margin-bottom:calc(var(--e)*2.8)}
.pf__nom{font-size:clamp(28px,calc(var(--e)*6.2),92px);line-height:1;color:var(--pt);letter-spacing:-.02em}
.pf__sous{margin-top:calc(var(--e)*1.5)!important;font:600 clamp(16px,calc(var(--e)*2.2),33px)/1.2 "Public Sans",sans-serif}
.pf__desc{margin-top:calc(var(--e)*1.3)!important;max-width:60ch;font:400 clamp(13px,calc(var(--e)*1.28),19px)/1.5 "Public Sans",sans-serif;opacity:.84}
.pf__meta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 14px;margin-top:calc(var(--e)*1.7)!important;font:500 clamp(10.5px,calc(var(--e)*.95),14px)/1.2 "IBM Plex Mono",ui-monospace,monospace}
.pf__etat{background:var(--pe,var(--pt));color:var(--pet,var(--p));padding:6px 9px;border-radius:2px}
.pf__tech{opacity:.82}
.pf__note{margin-top:calc(var(--e)*.9)!important;font:400 clamp(11px,calc(var(--e)*.95),13.5px)/1.3 "Public Sans",sans-serif;opacity:.82}
.pf__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pf__lien{margin-top:calc(var(--e)*1.7)!important;display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box;padding:0 20px;border:1.5px solid var(--pt);border-radius:6px;color:var(--ptx);font:600 clamp(14px,calc(var(--e)*1.25),19px)/1 "Public Sans",sans-serif;text-decoration:none;transition:background-color .15s,color .15s}
.pf__lien:hover{background:var(--pt);color:var(--p)}
.pf__lien:focus-visible{outline:3px solid var(--ptx);outline-offset:3px}
/* Mouvement réduit : chaque détail s'arrête sur son image la plus parlante. */
.pf.est-reduit *,.pf.est-reduit *::after{animation-delay:var(--fige,-2.5s)!important;animation-play-state:paused!important}

/* PeerCheck : les cinq cases du logo se remplissent une à une (380 ms, 70 ms d'écart, comme dans l'app). */
.pf-peercheck .pf__scene{display:flex;align-items:center;justify-content:center;gap:calc(var(--e)*4.5)}
.pf-peer__grille{display:grid;grid-template-columns:repeat(5,calc(var(--e)*3.6));gap:calc(var(--e)*.6)}
.pf-peer__grille i{aspect-ratio:1;border-radius:calc(var(--e)*.5);background:#1B1E23;box-shadow:inset 0 0 0 1px #2E333A}
.pf-peer__grille i.est-coche{animation:pc-case 4.6s calc(var(--i)*70ms + .3s) infinite both}
@keyframes pc-case{0%{background:#1B1E23;box-shadow:inset 0 0 0 1px #2E333A}8.3%,78%{background:#FF6B2C;box-shadow:inset 0 0 0 1px #FF6B2C}88%,100%{background:#1B1E23;box-shadow:inset 0 0 0 1px #2E333A}}
.pf-peer__note{font:500 calc(var(--e)*2.3)/1.25 "Geist Mono",ui-monospace,monospace;letter-spacing:-.02em;color:#9AA1AB;text-align:left}
.pf-peer__note b{color:#FF6B2C;font-weight:600}
.pf-peercheck .pf__nom{letter-spacing:-.04em}

/* Cheatsheets : l'arbre de compétences s'allume nœud par nœud, chaque sujet dans la couleur de sa catégorie. */
.pf-cheatsheets{--pe:#39ff14}
.pf-cheatsheets .pf__scene{display:flex;align-items:center;justify-content:center;gap:calc(var(--e)*3)}
.pf-cs__arbre{position:relative;height:100%;aspect-ratio:100/104}
.pf-cs__arbre svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pf-cs__arbre span{position:absolute;transform:translate(-50%,-50%);will-change:transform;font:600 calc(var(--e)*1.15)/1 "IBM Plex Mono",ui-monospace,monospace;color:#c8d0e8;white-space:nowrap}
.pf-cs__arbre line{stroke:var(--c);stroke-width:1.1;stroke-dasharray:40;stroke-dashoffset:40;animation:cs-ligne 5s calc(var(--i)*.22s - .12s) infinite both}
@keyframes cs-ligne{0%{stroke-dashoffset:40;opacity:1}10%,82%{stroke-dashoffset:0;opacity:1}92%,100%{stroke-dashoffset:0;opacity:0}}
.pf-cs__arbre circle{fill:#0f0f1a;stroke:#1e1e3a;stroke-width:1.3;animation:cs-noeud 5s calc(var(--i)*.22s) infinite both}
@keyframes cs-noeud{0%{stroke:#1e1e3a;fill:#0f0f1a}8%,82%{stroke:var(--c);fill:#141428}92%,100%{stroke:#1e1e3a;fill:#0f0f1a}}
.pf-cs__lvl{font:600 calc(var(--e)*2.3)/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.08em;color:#39ff14;border:2px solid #39ff14;border-radius:3px;padding:calc(var(--e)*.7) calc(var(--e)*1);animation:cs-lvl 5s infinite both}
@keyframes cs-lvl{0%,30%{opacity:.25;text-shadow:none}38%,82%{opacity:1;text-shadow:0 0 calc(var(--e)*1) #39ff14aa}92%,100%{opacity:.25;text-shadow:none}}
.pf-cheatsheets .pf__nom{text-shadow:0 0 calc(var(--e)*1.6) #39ff1466}

/* Card Game : le booster se déchire, quatre cartes sortent en éventail, la mythique brille. */
.pf-cardgame{background:radial-gradient(ellipse 70% 45% at 50% 0,#e1003c30,transparent 70%),#0e0d12;--fige:-3.6s}
.pf-cg__scene{position:absolute;inset:0}
.pf-cg__paquet{position:absolute;left:50%;bottom:0;width:calc(var(--e)*11);height:calc(var(--e)*15.5);margin-left:calc(var(--e)*-5.5);border-radius:calc(var(--e)*.8);background:linear-gradient(160deg,#ff3d6a,#e1003c 45%,#840124);box-shadow:0 calc(var(--e)*1) calc(var(--e)*2.4) #000a;animation:cg-paquet 6.5s infinite both;z-index:2}
.pf-cg__paquet span{position:absolute;left:0;right:0;bottom:24%;font:700 calc(var(--e)*1.1)/1 "Public Sans",sans-serif;letter-spacing:.3em;color:#ffffffc0}
.pf-cg__bande{position:absolute;left:0;right:0;top:0;height:19%;border-radius:calc(var(--e)*.8) calc(var(--e)*.8) 0 0;background:linear-gradient(160deg,#ff5d80,#e1003c);border-bottom:calc(var(--e)*.18) dashed #ffffff70;transform-origin:100% 100%;animation:cg-bande 6.5s infinite both}
@keyframes cg-paquet{0%{opacity:0;transform:translateY(calc(var(--e)*2))}6%,24%{opacity:1;transform:none}34%,100%{opacity:0;transform:translateY(calc(var(--e)*5))}}
@keyframes cg-bande{0%,14%{transform:none;opacity:1}21%,100%{transform:translate(calc(var(--e)*5),calc(var(--e)*-4)) rotate(24deg);opacity:0}}
.pf-cg__cartes{position:absolute;left:50%;bottom:calc(var(--e)*1.2);width:0;height:0;z-index:1}
.pf-cg__carte{--x:calc((var(--i) - 1.5) * var(--e) * 7.6);--a:calc((var(--i) - 1.5) * 11deg);position:absolute;left:calc(var(--e)*-4.6);bottom:0;width:calc(var(--e)*9.2);height:calc(var(--e)*13);box-sizing:border-box;border-radius:calc(var(--e)*.7);background:#15141a;border:calc(var(--e)*.3) solid var(--r);box-shadow:0 calc(var(--e)*.6) calc(var(--e)*1.6) #000b;overflow:hidden;transform-origin:50% 130%;animation:cg-carte 6.5s calc(var(--i)*.12s) infinite both}
.pf-cg__carte span{position:absolute;left:8%;right:8%;top:7%;height:58%;border-radius:calc(var(--e)*.35);background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--r) 70%,#fff) 0,var(--r) 30%,#15141a 85%)}
.pf-cg__carte b{position:absolute;left:0;right:0;bottom:12%;font:800 calc(var(--e)*.95)/1 "Public Sans",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#ff3d6a}
.pf-cg__carte:last-child{box-shadow:0 0 calc(var(--e)*2.2) #ff3d6a90,0 calc(var(--e)*.6) calc(var(--e)*1.6) #000b}
.pf-cg__carte:last-child::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,#ffffff70 45%,#9ef6ff60 52%,transparent 64%) no-repeat;background-size:250% 100%;animation:cg-holo 6.5s infinite both}
@keyframes cg-carte{0%,22%{transform:translate(0,calc(var(--e)*5));opacity:0}25%{opacity:1}36%,84%{transform:translate(var(--x),calc(var(--e)*-1)) rotate(var(--a));opacity:1}94%,100%{transform:translate(var(--x),calc(var(--e)*-1)) rotate(var(--a));opacity:0}}
@keyframes cg-holo{0%,38%{background-position:130% 0}62%,100%{background-position:-60% 0}}

/* Cockpit : des tuiles de verre sur le fond d'écran ; une action se coche et le bandeau Annuler reste quelques secondes. */
.pf-cockpit{background:linear-gradient(180deg,#1b2230,#121722)}
.pf-ck__bureau{position:absolute;inset:0;border-radius:calc(var(--e)*1.2);overflow:hidden;display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:calc(var(--e)*1.2);align-items:start;padding:calc(var(--e)*2.2) calc(var(--e)*1.8);box-sizing:border-box;background:radial-gradient(circle at 16% 92%,#ff9d6c 0,transparent 40%),radial-gradient(circle at 82% 30%,#7b6cff 0,transparent 45%),radial-gradient(circle at 55% 95%,#2fb5a8 0,transparent 50%),linear-gradient(135deg,#3b4a8c,#6b3e7a);box-shadow:0 calc(var(--e)*1) calc(var(--e)*3) #0008}
.pf-ck__tuile{text-align:left;color:#fff;text-shadow:0 1px 2px #0005;background:rgba(28,34,58,.32);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);border:1px solid rgba(255,255,255,.38);border-radius:calc(var(--e)*1.1);padding:calc(var(--e)*1.1) calc(var(--e)*1.2);font:500 calc(var(--e)*1.05)/1.35 -apple-system,"SF Pro Text",Inter,sans-serif;box-shadow:0 calc(var(--e)*.4) calc(var(--e)*1.4) #0003}
.pf-ck__tuile small{display:block;font-weight:600;font-size:calc(var(--e)*.9);letter-spacing:.02em;opacity:.8;margin-bottom:calc(var(--e)*.6)}
.pf-ck__tuile p{display:flex;align-items:center;gap:calc(var(--e)*.6);margin:calc(var(--e)*.35) 0 0}
.pf-ck__tuile i{flex:none;width:calc(var(--e)*1);height:calc(var(--e)*1);border-radius:50%;box-shadow:inset 0 0 0 1.5px #ffffffc0}
.pf-ck__sup i{background:#5be08a;box-shadow:none}
.pf-ck__faire{position:relative;padding-bottom:calc(var(--e)*3.6)}
.pf-ck__faire .est-cochee{animation:ck-texte 5s infinite both}
.pf-ck__faire .est-cochee i{animation:ck-coche 5s infinite both}
@keyframes ck-coche{0%,20%{background:transparent;box-shadow:inset 0 0 0 1.5px #ffffffc0}26%,84%{background:#5be08a;box-shadow:inset 0 0 0 1.5px #5be08a}92%,100%{background:transparent;box-shadow:inset 0 0 0 1.5px #ffffffc0}}
@keyframes ck-texte{0%,22%{opacity:1}28%,84%{opacity:.8}92%,100%{opacity:1}}
.pf-ck__annuler{position:absolute;left:calc(var(--e)*1.2);right:calc(var(--e)*1.2);bottom:calc(var(--e)*.9);padding:calc(var(--e)*.45) calc(var(--e)*.7);border-radius:calc(var(--e)*.6);background:rgba(20,24,34,.55);font-size:calc(var(--e)*.92);animation:ck-annuler 5s infinite both}
.pf-ck__annuler u{text-decoration:none;color:#9fd0ff;font-weight:600}
@keyframes ck-annuler{0%,26%{opacity:0;transform:translateY(calc(var(--e)*.5))}32%,72%{opacity:1;transform:none}78%,100%{opacity:0;transform:none}}
.pf-cockpit .pf__nom{font-family:-apple-system,"SF Pro Display",Inter,sans-serif}

/* Jalon : la jauge de la barre des menus ne monte que lorsqu'une étape est vérifiée. */
.pf-jalon{--fige:-3s}
.pf-jl__ecran{position:absolute;inset:0;border-radius:calc(var(--e)*1.2);overflow:hidden;background:radial-gradient(circle at 20% 80%,#b9d3f2 0,transparent 50%),radial-gradient(circle at 85% 70%,#e4d3f3 0,transparent 45%),linear-gradient(160deg,#d7dfec,#efebf4);box-shadow:0 calc(var(--e)*.6) calc(var(--e)*2.4) #0002}
.pf-jl__barre{display:flex;justify-content:flex-end;align-items:center;gap:calc(var(--e)*.6);height:calc(var(--e)*2.2);padding:0 calc(var(--e)*1.6);background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font:600 calc(var(--e)*1.05)/1 -apple-system,"SF Pro Text",Inter,sans-serif;color:#1D1D1F}
.pf-jl__icone{position:relative;width:calc(var(--e)*1.9);height:calc(var(--e)*1.3)}
.pf-jl__icone i{position:absolute;left:0;bottom:0;width:100%;height:28%;border-radius:9px;background:linear-gradient(90deg,#0066CC 68%,#D1D1D6 68%)}
.pf-jl__icone b{position:absolute;right:8%;bottom:20%;width:7%;height:80%;background:#1D1D1F;border-radius:2px}
.pf-jl__icone b::after{content:"";position:absolute;left:100%;top:0;width:calc(var(--e)*.55);height:calc(var(--e)*.45);background:#FF6B2C;clip-path:polygon(0 0,100% 0,70% 50%,100% 100%,0 100%)}
.pf-jl__pc{position:relative;display:inline-block;width:calc(var(--e)*3.4);height:1em;text-align:left;white-space:nowrap}
.pf-jl__pc span{position:absolute;left:0;top:0}
.pf-jl__pc span:first-child{animation:jl-avant 5.4s infinite both}
.pf-jl__pc span:last-child{animation:jl-apres 5.4s infinite both}
@keyframes jl-avant{0%,32%{opacity:1}36%,88%{opacity:0}94%,100%{opacity:1}}
@keyframes jl-apres{0%,32%{opacity:0}36%,88%{opacity:1}94%,100%{opacity:0}}
.pf-jl__panneau{position:absolute;right:calc(var(--e)*2.4);top:calc(var(--e)*2.8);width:calc(var(--e)*20);box-sizing:border-box;padding:calc(var(--e)*1.2) calc(var(--e)*1.4);text-align:left;color:#1D1D1F;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgba(255,255,255,.8);border-radius:calc(var(--e)*1.1);box-shadow:0 calc(var(--e)*.8) calc(var(--e)*2.4) #0002;font:500 calc(var(--e)*1)/1.3 -apple-system,"SF Pro Text",Inter,sans-serif}
.pf-jl__titre{margin:0 0 calc(var(--e)*.7);font-weight:600}
.pf-jl__jauge{height:calc(var(--e)*.65);border-radius:99px;background:#D1D1D6;margin-bottom:calc(var(--e)*.8);overflow:hidden}
.pf-jl__jauge i{display:block;height:100%;width:86%;border-radius:99px;background:#0066CC;animation:jl-jauge 5.4s infinite both}
@keyframes jl-jauge{0%,32%{width:86%}40%{width:91%}44%,88%{width:90%}96%,100%{width:86%}}
.pf-jl__etape{display:flex;align-items:center;gap:calc(var(--e)*.6);margin:calc(var(--e)*.38) 0 0}
.pf-jl__etape i{flex:none;width:calc(var(--e)*1);height:calc(var(--e)*1);border-radius:50%;box-shadow:inset 0 0 0 1.5px #A1A1AA}
.pf-jl__etape.est-faite i{background:#248A3D;box-shadow:none}
.pf-jl__d i{animation:jl-etape 5.4s infinite both}
@keyframes jl-etape{0%,28%{background:transparent;box-shadow:inset 0 0 0 1.5px #A1A1AA}32%,88%{background:#248A3D;box-shadow:none}94%,100%{background:transparent;box-shadow:inset 0 0 0 1.5px #A1A1AA}}
.pf-jl__d em{margin-left:auto;font-style:normal;font-size:calc(var(--e)*.85);color:#1A6E30;animation:jl-preuve 5.4s infinite both}
@keyframes jl-preuve{0%,28%{opacity:0}34%,80%{opacity:1}90%,100%{opacity:0}}
.pf-jalon .pf__nom{font-family:-apple-system,"SF Pro Display",Inter,sans-serif}

/* Gonfanon : la frontière avance à l'encre sur le parchemin. */
.pf-gonfanon{background:radial-gradient(ellipse at 50% 40%,#efe3c6,#e6d8b8 60%,#d3c19a)}
.pf-gf__parchemin{position:absolute;inset:0;box-sizing:border-box;padding:calc(var(--e)*.9);background:#efe3c6;border:calc(var(--e)*.22) solid #2e2118;border-radius:2px;box-shadow:inset 0 0 calc(var(--e)*2.4) #c9b48a,0 calc(var(--e)*.5) calc(var(--e)*1.6) #5a463240}
.pf-gf__carte{display:block;width:100%;height:100%}

/* La jaquette d'une petite cartouche */
.cartouche--petite .jaquette.jp{background:var(--p);display:flex;align-items:center;justify-content:center;padding:0 calc(var(--ck)*.25);text-align:center;box-shadow:inset 0 calc(var(--ck)*-.35) 0 var(--pt)}
.jp b{font-size:calc(var(--ck)*.8);line-height:1.05;color:var(--pt);letter-spacing:-.01em}
.jp-peercheck b{letter-spacing:-.04em;white-space:nowrap}
.jp-cheatsheets b{font-size:calc(var(--ck)*.6);white-space:nowrap;text-shadow:0 0 calc(var(--ck)*.4) #39ff1480}
.jp-cockpit b,.jp-jalon b{font-size:calc(var(--ck)*.86)}
.jp-gonfanon b{font-size:calc(var(--ck)*.92)}

/* Téléphone debout : le détail se réduit, le texte garde sa place. */
@container (max-aspect-ratio:1/1){
  .pf__scene{--e:1.8cqw}
}