/* La Clique — Tableau de bord de l'apprenant (19 oct. 2026), d'après la maquette choisie par Gabriel :
   graphiques en 3D, fenêtres en verre translucide, couleurs néon, ciel de nuit avec aurores boréales
   (vert fluo et bleu en haut, rose-magenta plus bas — exemple C). Tout bouge tranquillement ;
   tout s'arrête si l'appareil demande moins d'animations.
   Couleurs : palette « Neon Pulse » de La Clique, cyan principal. */
:root{
  --nuit:#050a14; --tx:#e6f1ff; --mu:#93a8c6; --mu2:#6f84a3;
  --cy:#00ffff; --bleu:#0034ff; --vi:#8338ec; --vil:#b48cff; --mag:#ff00ff; --rose:#ff0080;
  --vert:#39ff14; --menthe:#06ffa5; --lime:#c6ff33;
  --verre:rgba(255,255,255,.055); --verre2:rgba(255,255,255,.02); --bord:rgba(255,255,255,.12);
  --f:'Space Grotesk',system-ui,'Segoe UI',sans-serif; --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--nuit);color:var(--tx);font-family:var(--f);min-height:100vh;overflow-x:hidden}
/* Fond (19 oct., demandé par Gabriel) : un ciel de nuit, pas tout noir, avec des aurores boréales vert fluo et bleu
   qui ondulent lentement. Dessinées en petit puis agrandies et adoucies : ça reste léger pour l'ordi et le cell. */
.fond{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:linear-gradient(180deg,#020611 0%,#04101f 45%,#061626 75%,#050a14 100%)}
.fond canvas{position:absolute;inset:0;width:100%;height:100%}
#aurore{filter:blur(9px) saturate(190%) brightness(1.2);opacity:1}
#etoiles{opacity:.9}
.fond::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 110%,rgba(5,10,20,.85),transparent 60%)}
.page{position:relative;z-index:1;max-width:1280px;margin:0 auto;padding-block:18px 56px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:18px}

/* Verre */
.verre{position:relative;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(8,16,32,.38));border:1px solid var(--bord);border-radius:18px;backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 60px rgba(0,0,0,.35);overflow:hidden}
.verre:hover{border-color:rgba(0,255,255,.6)}
/* Plus néon (19 oct., v2) : rebord lumineux sur le verre */
.verre{border-color:rgba(0,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 22px rgba(0,255,255,.05),0 0 18px rgba(0,255,255,.10),0 24px 60px rgba(0,0,0,.35)}

/* Barre du haut */
.barre{display:flex;align-items:center;gap:18px;padding:12px 16px}
.marque{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.24em;font-size:14px;white-space:nowrap}
.nav{display:flex;gap:4px;margin-left:12px;flex:1}
.nav a{color:#c8d6ea;text-decoration:none;font-size:14.5px;padding:9px 14px;border-radius:999px}
.nav a.on{background:linear-gradient(90deg,var(--bleu),var(--cy));color:#04122a;font-weight:600;box-shadow:0 0 16px rgba(0,255,255,.6),0 0 34px rgba(0,52,255,.45)}
.nav a:hover:not(.on){color:#fff;background:rgba(255,255,255,.06)}
.moi{display:flex;align-items:center;gap:10px;padding:5px 6px 5px 14px;border-radius:999px;border:1px solid var(--bord);font-size:14.5px;white-space:nowrap}
.moi span.av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#04122a;background:linear-gradient(135deg,var(--mag),var(--cy))}
.menu{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--bord);background:transparent;color:var(--tx)}

/* Accueil du tableau */
.tete{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px;padding:10px 4px 0}
.sur{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--cy);display:flex;align-items:center;gap:8px;margin:0 0 8px}
.sur{flex-wrap:wrap;row-gap:4px}.sur,.sur{white-space:nowrap}
.sur::before{content:"";width:7px;height:7px;background:var(--vert);box-shadow:0 0 8px var(--vert)}
h1{margin:0;font-size:clamp(28px,4.2vw,44px);line-height:1.05;letter-spacing:-.02em}
.degrade{background:linear-gradient(90deg,#39ff14,#00ffff,#ff00ff,#39ff14);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:verre 6s linear infinite}
@keyframes verre{to{background-position:300% 0}}
.st{margin:8px 0 0;color:#c8d6ea;font-size:15px}
.tete h1,.tete .st,.tete .sur{text-shadow:0 2px 14px rgba(2,6,17,.95),0 0 2px rgba(2,6,17,.9)}
.tete .degrade{text-shadow:none;filter:drop-shadow(0 2px 10px rgba(2,6,17,.95))}
.clic{position:relative;width:150px;height:156px;justify-self:end}
.clic img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(0,0,0,.6)) drop-shadow(0 0 16px rgba(0,255,255,.35));animation:respire 4s ease-in-out infinite;transform-origin:50% 100%}
@keyframes respire{50%{transform:translateY(-5px) scale(1.02)}}
.bulle{position:absolute;right:calc(100% + 14px);top:18px;width:max-content;max-width:260px;padding:13px 18px;border-radius:26px;background:rgba(6,14,30,.94);border:1px solid rgba(0,255,255,.65);font-size:15px;line-height:1.4;box-shadow:0 14px 40px rgba(0,0,0,.5),0 0 22px rgba(0,255,255,.18)}
.bulle::after{content:"";position:absolute;right:-20px;top:34px;width:22px;height:20px;background:no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' preserveAspectRatio='none'%3E%3Cpath d='M0 8 Q30 30 60 46 Q28 40 0 40 Z' fill='%23060e1e'/%3E%3Cpath d='M0 8 Q30 30 60 46 Q28 40 0 40' fill='none' stroke='%2300ffff' stroke-opacity='.65' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}

/* Grille */
.grille{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.c3{grid-column:span 3}.c4{grid-column:span 4}.c5{grid-column:span 5}.c7{grid-column:span 7}.c8{grid-column:span 8}.c12{grid-column:span 12}
.titre-c{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px 0}
.titre-c h2{margin:0;font-size:16px;font-weight:500;color:#dfe9f7;letter-spacing:-.005em}
.titre-c small{font-family:var(--mono);font-size:11.5px;color:var(--mu)}

/* Cartes chiffres (image 3) */
.kpi{min-height:200px;display:flex;flex-direction:column}
.kpi .titre-c h2{color:var(--mu);font-weight:400}
.kpi .ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center}
.gros{text-shadow:0 0 14px rgba(0,255,255,.6),0 0 30px rgba(0,255,255,.25);padding:6px 18px 0;font-size:40px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.gros small{font-size:18px;color:var(--mu);font-weight:500;margin-left:4px}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:6px 18px 0;font-size:12.5px}
.trio b{display:block;color:#fff;font-weight:600;font-size:13px}
.trio span{color:var(--mu)}
.trio div:nth-child(2){text-align:center}.trio div:nth-child(3){text-align:right}
.spark{margin-top:auto;display:block;width:100%;height:78px}
.prochaine{padding:4px 18px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
.prochaine .nom{font-size:21px;font-weight:600;line-height:1.2}
.prochaine p{margin:0;color:var(--mu);font-size:14px}
.btn{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 20px;border-radius:999px;border:0;font:inherit;font-weight:700;font-size:15px;color:#02121c;background:linear-gradient(90deg,#00ffff,#8338ec,#00ffff);background-size:200% 100%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.62);cursor:pointer;animation:glisse 6s linear infinite;text-decoration:none}
.btn:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85),0 10px 30px rgba(0,255,255,.4)}
@keyframes glisse{to{background-position:200% 0}}
.mini-barre{height:8px;border-radius:8px;background:rgba(255,255,255,.08);overflow:hidden}
.mini-barre i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,#c6ff33,#00ffff)}

svg text{font-family:var(--mono)}
.graph{display:block;width:100%;height:auto}
.defile{overflow-x:auto;padding:0 6px 6px}
.glisse{display:none;margin:6px 18px 0;font-family:var(--mono);font-size:11.5px;color:var(--mu)}

/* Parcours (image 4, flèches de couleur) */
.chemin{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:18px}
.etape{position:relative;padding:14px 26px 14px 20px;min-height:116px;display:flex;flex-direction:column;gap:6px;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 50%,calc(100% - 22px) 100%,0 100%,22px 50%);margin-left:-10px}
.etape:first-child{clip-path:polygon(0 0,calc(100% - 22px) 0,100% 50%,calc(100% - 22px) 100%,0 100%);margin-left:0;padding-left:18px}
.etape .no{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;opacity:.85}
.etape .nm{font-size:17px;font-weight:700;line-height:1.15}
.etape .et{font-size:13px;opacity:.9}
.e1{background:linear-gradient(120deg,#39ff14,#06ffa5);color:#03140c}
.e2{background:linear-gradient(120deg,#00ffff,#0034ff);color:#02121c}
.e2 .nm{color:#02121c}
.e2{padding-left:40px}
.e3{background:linear-gradient(120deg,#8338ec,#ff00ff);color:#fff;padding-left:40px}
.metiers{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.metiers span{font-size:11.5px;font-family:var(--mono);border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:2px 8px}

/* Tubes de progression (image 1) */
.tubes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:14px 18px 18px;align-items:end}
.tube{display:flex;flex-direction:column;align-items:center;gap:10px}
.verre-tube{position:relative;width:62px;height:190px;border-radius:40px;background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.12) 45%,rgba(255,255,255,.03));border:2px solid rgba(255,255,255,.35);box-shadow:inset 0 0 18px rgba(0,0,0,.6),0 10px 30px rgba(0,0,0,.4);overflow:hidden}
.verre-tube .liq{position:absolute;left:6px;right:6px;bottom:6px;border-radius:30px;opacity:.85;filter:saturate(1.4)}
.verre-tube .boule{position:absolute;left:50%;width:44px;height:44px;margin-left:-22px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:11px;font-weight:600;color:#04122a}
.tube .lb{font-size:13px;text-align:center;color:#dfe9f7}
.tube .lb small{display:block;color:var(--mu);font-family:var(--mono);font-size:11px}

/* Attestations */
.attest{display:flex;flex-direction:column;gap:12px;padding:14px 18px 18px}
.att{display:grid;grid-template-columns:54px minmax(0,1fr);gap:14px;align-items:center;padding:12px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.medaille{width:54px;height:54px;border-radius:14px;display:grid;place-items:center}
.att .nm{font-weight:600}
.att .dt{color:var(--mu);font-size:13px}
.att a{color:var(--cy);font-size:13.5px;text-decoration:none}
.att.verrou{opacity:.8}

/* Activité (image 3, liste avec crochets) */
.activite{list-style:none;margin:0;padding:12px 14px 16px;display:flex;flex-direction:column;gap:8px}
.activite li{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.activite .pt{width:30px;height:30px;border-radius:50%;display:grid;place-items:center}
.activite .q{font-size:14px}
.activite .q small{display:block;color:var(--mu);font-size:12px}
.activite .note{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums}

:focus-visible{outline:2px solid var(--cy);outline-offset:3px}
@media (max-width:1100px){.c3{grid-column:span 6}.c8,.c4,.c7,.c5{grid-column:span 12}}
@media (max-width:820px){
  .nav{display:none}.menu{display:grid;place-items:center;margin-left:auto}.moi .nm{display:none}.moi{padding:4px}
  /* Cellulaire : Clic et sa bulle (à gauche de sa tête) passent au-dessus du titre, sur leur propre rangée */
  .tete{grid-template-columns:minmax(0,1fr)}
  .clic{order:-1;width:100%;height:auto;display:flex;justify-content:flex-end;align-items:center;gap:22px}
  .clic img{width:100px;height:104px;flex:none}
  .bulle{position:relative;right:auto;top:auto;max-width:210px;font-size:14px;padding:11px 15px}
  .bulle::after{top:calc(50% - 10px)}
  .defile .graph{min-width:640px}
  .glisse{display:block}
  .chemin{grid-template-columns:minmax(0,1fr);gap:8px}
  .etape,.etape:first-child{clip-path:none;margin-left:0;border-radius:14px;min-height:0;padding:14px 16px}
}
@media (max-width:640px){.c3{grid-column:span 12}.gros{font-size:34px}}

/* Mouvement doux (19 oct., demandé par Gabriel) : tout bouge tranquillement, rien de fatigant pour l'œil. */
.b3{transform-box:view-box;animation:monte 1.4s cubic-bezier(.2,.8,.2,1) both;cursor:pointer;transition:filter .4s;filter:drop-shadow(0 0 7px var(--lueur,#0ff))}
.b3:hover{filter:brightness(1.3) drop-shadow(0 0 16px var(--lueur,#0ff))}
@keyframes monte{from{transform:scaleY(0);opacity:0}}
#beigneCorps{animation:flotte 5.5s ease-in-out infinite}
@keyframes flotte{50%{transform:translateY(-6px)}}
.seg{transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .6s;cursor:pointer}
.comete{fill:none;stroke-width:3.4;stroke-linecap:round;vector-effect:non-scaling-stroke;animation:comete 6s ease-in-out infinite}
@keyframes comete{0%{stroke-dashoffset:var(--l0)}70%,100%{stroke-dashoffset:var(--l1)}}
.verre-tube .liq::before{content:"";position:absolute;left:-40%;right:-40%;top:-7px;height:14px;border-radius:50%;background:inherit;filter:brightness(1.4);animation:vague 4s ease-in-out infinite}
@keyframes vague{50%{transform:translateX(18%) scaleY(.7)}}
.verre-tube .boule{animation:bulle 3.8s ease-in-out infinite}
.tube:nth-child(2) .boule{animation-delay:-2s}.tube:nth-child(3) .boule{animation-delay:-3.5s}
@keyframes bulle{50%{transform:translateY(-5px)}}
.etape{overflow:hidden}
.etape::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);transform:translateX(-120%);animation:balaye 7.5s ease-in-out infinite}
.e2::after{animation-delay:2.5s}.e3::after{animation-delay:5s}
@keyframes balaye{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.kpi{transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .4s}
.kpi:hover{transform:translateY(-3px)}
.clic img{animation:respire 3.8s ease-in-out infinite}

/* ---------- Ajouts pour la vraie page (branchée sur la progression) ---------- */
.marque{color:var(--tx);text-decoration:none}
.moi{position:relative;background:transparent;color:var(--tx);font:inherit;font-size:14.5px;cursor:pointer}
.moi:hover{border-color:rgba(0,255,255,.5)}
.deroule{position:absolute;right:16px;top:calc(100% + 8px);z-index:20;min-width:220px;padding:8px;border-radius:16px;background:rgba(6,14,30,.99);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(0,255,255,.35);box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 22px rgba(0,255,255,.12);display:flex;flex-direction:column;gap:2px}
.deroule[hidden]{display:none}
.deroule a,.deroule button{display:block;width:100%;text-align:left;padding:11px 14px;border-radius:10px;border:0;background:transparent;color:#dfe9f7;font:inherit;font-size:15px;text-decoration:none;cursor:pointer}
.deroule a:hover,.deroule button:hover{background:rgba(255,255,255,.07);color:#fff}
.deroule a.on{color:var(--cy)}
.deroule .sortie{color:#ff5a8c;border-top:1px solid rgba(255,255,255,.08);border-radius:0 0 10px 10px;margin-top:4px}
.deroule .liens-cell{display:none}
.barre{position:relative;z-index:30;overflow:visible}
@media (max-width:820px){.deroule .liens-cell{display:block}}

/* Onglets du graphique (L'Alphabet / Cyber-Algèbre) */
.onglets{display:flex;gap:6px}
.onglets button{font:inherit;font-family:var(--mono);font-size:11.5px;color:var(--mu);background:transparent;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:5px 11px;cursor:pointer}
.onglets button[aria-pressed="true"]{color:#04122a;background:linear-gradient(90deg,var(--cy),#7df9ff);border-color:transparent;box-shadow:0 0 12px rgba(0,255,255,.45)}
.titre-c.avec-onglets{flex-wrap:wrap}

/* Ton chemin : les étapes sont des liens ; une étape pas encore ouverte est plus pâle */
a.etape{text-decoration:none}
a.etape:hover .nm{text-decoration:underline;text-underline-offset:3px}
.etape.attente{filter:saturate(.45) brightness(.7)}
.etape.attente::after{display:none}
.vide{color:var(--mu);font-size:14px;padding:4px 2px}
.kpi .vide{padding:8px 18px 0}
.att a{display:inline-block;margin-top:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}