.boot{position:fixed;inset:auto 0 50% 0;text-align:center;color:var(--muted);font-weight:600}
.brand{gap:8px}.brand h1{margin-right:auto}
.acct-btn{white-space:nowrap}
.acct{position:fixed;inset:0;z-index:40;background:rgba(10,18,30,.45);display:grid;place-items:end center}
.acct[hidden]{display:none}
.acct-in{width:min(760px,100%);max-height:92vh;overflow:auto;background:var(--paper);border-radius:16px 16px 0 0;padding:16px 16px calc(24px + env(safe-area-inset-bottom,0px));display:grid;gap:12px}
.acct-bar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.acct-bar h2{font-family:var(--f-display);font-size:1.6rem;margin:0}
.acct-form{display:grid;gap:8px}
.acct-form input,.acct-input{font:inherit;font-size:1.05rem;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);width:100%}
.acct-ok,.acct-off{display:grid;gap:2px;border-radius:12px;padding:12px 14px}
.acct-ok{background:var(--yes-soft);color:var(--ink)} .acct-ok b{color:var(--yes)}
.acct-off{background:var(--surface);border:1px solid var(--line)}
.acct-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.acct-plan{display:grid;gap:4px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;cursor:pointer;color:var(--ink)}
.acct-plan:hover{border-color:var(--accent)} .acct-plan span{color:var(--accent);font-weight:700}
.btn.danger{background:var(--no);border-color:var(--no);margin-top:8px}
.acct-links a{color:var(--accent)}
.brand h1{white-space:nowrap}
.who{white-space:nowrap}
@media (max-width:440px){.brand h1{font-size:1.2rem}.brand .who{padding:4px 9px;font-size:.82rem}}
@media (max-width:400px){.brand{gap:6px}.brand h1{font-size:1.05rem;letter-spacing:.03em}.brand .who{max-width:42vw;overflow:hidden;text-overflow:ellipsis}}

/* ---------- Écran de bienvenue et connexion (style plateforme de diffusion) ---------- */
html.jx-ouvert,html.jx-ouvert body{overflow:hidden}
.jx{--or:#F2C14E;--or-fonce:#E0AC2E;--texte:#fff;--pale:rgba(255,255,255,.72);--champ:rgba(22,24,28,.72);--bord:rgba(255,255,255,.38);
  position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;background:#07111F;color:var(--texte);font-family:var(--f-body);color-scheme:dark}
.jx[hidden]{display:none}
.jx-fond{position:absolute;inset:0;pointer-events:none;background:#07111F url("img/fond-accueil.jpg") center/cover no-repeat}
.jx-fond::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(4,10,20,.92) 0%,rgba(4,10,20,.55) 30%,rgba(4,10,20,.6) 62%,rgba(4,10,20,.96) 100%),
  radial-gradient(80% 60% at 50% 45%,rgba(7,17,31,.35),rgba(4,10,20,.85))}
.jx[data-vue]:not([data-vue="accueil"]) .jx-fond::after{background:rgba(4,10,20,.86)}
.jx-entete{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(14px + env(safe-area-inset-top,0px)) clamp(16px,4vw,48px) 10px}
.jx-logo{display:flex;align-items:center;gap:8px}
.jx-logo svg{width:34px;height:34px}
.jx-logo b{font-family:var(--f-display);font-weight:700;font-size:1.55rem;letter-spacing:.16em;color:var(--or)}
.jx-entete-btn{font:inherit;font-weight:700;font-size:.95rem;padding:8px 16px;border-radius:8px;border:0;background:var(--or);color:#141414;cursor:pointer}
.jx-entete-btn:hover{background:var(--or-fonce)}
.jx-scene{position:relative;z-index:1;flex:1;overflow:auto;-webkit-overflow-scrolling:touch;display:flex;justify-content:center;padding:8px 16px calc(24px + env(safe-area-inset-bottom,0px))}
#jx-vue{width:100%;max-width:680px;margin:auto 0;animation:jx-in .25s ease-out}
#jx-vue:not([data-vue="accueil"]){max-width:450px}
@keyframes jx-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#jx-vue{animation:none}}

/* Accueil */
.jx-hero{display:grid;gap:14px;text-align:center;justify-items:center;padding:4vh 0 2vh}
.jx-grand{margin:0;font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(2.6rem,9.5vw,4.6rem);line-height:.95;letter-spacing:.01em;text-shadow:0 4px 30px rgba(0,0,0,.5)}
.jx-grand em{font-style:normal;color:var(--or)}
.jx-hero-sous{margin:4px 0 0;font-size:clamp(1.08rem,2.6vw,1.35rem);font-weight:600;line-height:1.4;max-width:34em}
.jx-hero-essai{margin:0;color:var(--pale);font-size:1.02rem}
.jx-pret{margin:10px 0 0;font-size:1.02rem;line-height:1.4}
.jx-depart{display:flex;gap:10px;width:100%;max-width:560px}
.jx-depart .jx-champ{flex:1}
.jx-depart .jx-b{width:auto;flex:none;padding:0 22px;font-size:1.2rem}
.jx-depart .jx-b svg{width:20px;height:20px}
.jx-note{margin:0;padding:10px 14px;border-radius:10px;background:rgba(242,193,78,.16);border:1px solid rgba(242,193,78,.45);line-height:1.4;max-width:34em}
.jx-sociaux{display:grid;gap:10px;width:100%;max-width:360px}
.jx-invite{color:var(--pale);font-weight:600}

/* Panneaux (connexion, inscription…) */
.jx-panneau{display:grid;gap:14px;background:rgba(0,0,0,.72);border-radius:10px;padding:clamp(22px,5vw,48px) clamp(20px,5vw,56px)}
.jx-h{margin:0;font-family:var(--f-display);font-weight:700;font-size:2rem;line-height:1.1}
.jx-etape{margin:0;font-size:.85rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pale)}
.jx-sous{margin:-4px 0 4px;color:var(--pale);line-height:1.45}
.jx-sous b{color:var(--texte)}
.jx-retour{display:inline-flex;align-items:center;gap:4px;justify-self:start;margin:-8px 0 0 -6px;padding:6px 8px 6px 2px;border:0;background:none;color:var(--pale);font:inherit;font-weight:600;cursor:pointer;border-radius:8px}
.jx-retour:hover{color:var(--texte)} .jx-retour svg{width:20px;height:20px}
.jx-form{display:grid;gap:12px}
.jx-form[hidden]{display:none}

/* Champs à étiquette flottante */
.jx-champ{position:relative}
.jx-in{display:block;width:100%;height:56px;padding:22px 16px 6px;font:inherit;font-size:1.05rem;color:var(--texte);background:var(--champ);border:1px solid var(--bord);border-radius:6px;-webkit-appearance:none;appearance:none}
.jx-champ label{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--pale);font-size:1.02rem;pointer-events:none;transition:all .15s ease}
.jx-in:focus{outline:none;border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.jx-in:focus + label,.jx-in:not(:placeholder-shown) + label{top:14px;transform:none;font-size:.78rem;font-weight:600}
.jx-in:-webkit-autofill{-webkit-text-fill-color:#fff;-webkit-box-shadow:0 0 0 40px #222a35 inset;caret-color:#fff}
.jx-code{font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;font-size:1.5rem;letter-spacing:.45em}
.jx-mdp .jx-in{padding-right:56px}
.jx-oeil{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--pale);cursor:pointer}
.jx-oeil[aria-pressed="true"]{color:var(--or)} .jx-oeil svg{width:22px;height:22px}
.jx-aide{margin:-4px 0 0;font-size:.9rem;color:var(--pale)} .jx-aide.ok{color:#7FD1A6}
.jx-case{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;line-height:1.4;color:var(--pale);cursor:pointer}
.jx-case input{width:22px;height:22px;flex:none;margin:1px 0 0;accent-color:var(--or)}
.jx a{color:#fff;text-underline-offset:2px}

/* Boutons */
.jx-b{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;padding:12px 18px;border-radius:6px;border:0;font:inherit;font-size:1.06rem;font-weight:700;cursor:pointer;transition:background .15s,transform .06s}
.jx-b:active{transform:scale(.985)}
.jx-b svg{width:22px;height:22px;flex:none}
.jx-b-or{background:var(--or);color:#141414} .jx-b-or:hover{background:var(--or-fonce)}
.jx-b-gris{background:rgba(128,128,128,.4);color:#fff} .jx-b-gris:hover{background:rgba(128,128,128,.55)}
.jx-b-google{background:#fff;color:#1f1f1f} .jx-b-google:hover{background:#eceff1}
.jx-b-apple{background:#fff;color:#000}
.jx-b:disabled{opacity:.75;cursor:progress}
.jx-b.jx-charge > span,.jx-b.jx-charge > svg{visibility:hidden}
.jx-b.jx-charge::after{content:"";position:absolute;width:22px;height:22px;border-radius:50%;border:3px solid currentColor;border-right-color:transparent;animation:jx-tourne .7s linear infinite}
@keyframes jx-tourne{to{transform:rotate(360deg)}}
.jx-lien{border:0;background:none;padding:4px 2px;font:inherit;color:#fff;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.jx-lien:hover{color:var(--or)}
.jx-centre{justify-self:center}
.jx-fort{font-weight:700;text-decoration:none} .jx-fort:hover{text-decoration:underline}
.jx-bas{margin:4px 0 0;color:var(--pale)}
.jx-legal{margin:0;font-size:.8rem;line-height:1.4;color:rgba(255,255,255,.55)}
.jx-ou{display:flex;align-items:center;gap:12px;width:100%;color:var(--pale);font-size:.85rem;text-transform:uppercase;letter-spacing:.08em}
.jx-hero .jx-ou{max-width:360px}
.jx-ou::before,.jx-ou::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.25)}
.jx-msg{margin:0;font-weight:600;line-height:1.4}
.jx-msg:empty{display:none}
.jx-msg.err{color:#FF8A80} .jx-msg.ok{color:#7FD1A6} .jx-msg.info{color:var(--or)}
.jx-hero .jx-msg{text-align:center}

@media (max-width:600px){
  .jx-depart{flex-direction:column}
  .jx-depart .jx-b{width:100%;padding:12px 18px}
  .jx-panneau{background:transparent;padding:8px 4px}
  .jx-scene{align-items:flex-start}
  #jx-vue{margin:0}
  .jx[data-vue]:not([data-vue="accueil"]) .jx-fond{background-image:none}
  .jx-hero{padding-top:6vh}
}
.jx-bas .jx-lien{padding:0}
/* Statut étudiant */
.etu{display:grid;gap:4px;border-radius:12px;padding:12px 14px;border:1px solid var(--line);background:var(--surface)}
.etu b{font-size:1rem} .etu .btn{justify-self:start;margin-top:6px;padding:8px 14px}
.etu-ok{background:var(--yes-soft);border-color:transparent} .etu-ok b{color:var(--yes)}
.etu-att{background:var(--accent-soft);border-color:transparent}
.etu-non{background:var(--warn-soft);border-color:transparent} .etu-non b{color:var(--warn)}
.acct-plan small{color:var(--muted);font-size:.8rem;font-weight:600}
.acct-plan.verrou span{color:var(--muted)}
.acct-plan.verrou b::after{content:" 🔒";font-size:.85em}
.etu-retour{justify-self:start;padding:6px 12px}
.etu-code{font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;font-size:1.4rem;letter-spacing:.4em;text-align:center}
#acct-body .fine.ok{color:var(--yes);font-weight:600} #acct-body .fine.err{color:var(--no);font-weight:600}
#acct-body input[type=file]{padding:10px}
/* ---------- Choix du forfait (style plateforme de diffusion) ---------- */
.jx[data-vue="forfaits"] .jx-fond::after{background:rgba(4,10,20,.9)}
#jx-vue[data-vue="forfaits"]{max-width:860px}
.jx-forfaits{display:grid;gap:16px;padding:6px 0 10px}
.jx-h-grand{font-size:clamp(2rem,6vw,2.8rem);line-height:1.02}
.jx-avantages{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.jx-avantages li{display:flex;gap:10px;align-items:flex-start;color:var(--pale);font-size:1.02rem}
.jx-avantages li::before{content:"";flex:none;width:20px;height:20px;margin-top:2px;background:no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23F2C14E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E")}
.jx-periode{justify-self:start;display:inline-flex;padding:4px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18)}
.jx-periode button{font:inherit;font-weight:700;border:0;border-radius:999px;padding:8px 18px;background:transparent;color:var(--pale);cursor:pointer}
.jx-periode button[aria-checked="true"]{background:#fff;color:#141414}
.jx-periode span{font-size:.8rem;color:var(--or);margin-left:4px}
.jx-periode button[aria-checked="true"] span{color:#9A6B00}
.jx-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.jx-plan{position:relative;display:flex;flex-direction:column;gap:12px;text-align:left;padding:10px 10px 16px;border-radius:16px;border:2px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:#fff;font:inherit;cursor:pointer;transition:border-color .15s,transform .1s,box-shadow .15s}
.jx-plan:hover{border-color:rgba(255,255,255,.4)}
.jx-plan.choisi{border-color:#fff;box-shadow:0 0 0 3px rgba(242,193,78,.55),0 20px 40px -20px rgba(0,0,0,.8)}
.jx-plan-tete{position:relative;display:grid;gap:2px;padding:14px 14px 16px;border-radius:10px;color:#fff;min-height:96px}
.jx-plan-policier .jx-plan-tete{background:linear-gradient(135deg,#8A5A00 0%,#D99A1E 55%,#F2C14E 100%)}
.jx-plan-etudiant .jx-plan-tete{background:linear-gradient(135deg,#0E2747 0%,#1F57A0 60%,#3E7BC9 100%)}
.jx-plan-tete b{font-family:var(--f-display);font-weight:800;font-size:1.7rem;text-transform:uppercase;letter-spacing:.03em;line-height:1}
.jx-plan-tete small{font-size:.88rem;opacity:.92}
.jx-plan-tete em{justify-self:start;margin-top:6px;font-style:normal;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:rgba(0,0,0,.35);padding:3px 8px;border-radius:999px}
.jx-coche{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.7)}
.jx-plan.choisi .jx-coche{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23141414' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center/16px;border-color:#fff}
.jx-plan-prix{display:flex;align-items:baseline;gap:8px;padding:0 6px}
.jx-plan-prix strong{font-family:var(--f-display);font-weight:800;font-size:2.4rem;line-height:1}
.jx-plan-prix span{color:var(--pale)}
.jx-plan ul{list-style:none;margin:0;padding:0 6px;display:grid;gap:0}
.jx-plan li{padding:9px 0;border-top:1px solid rgba(255,255,255,.12);font-size:.95rem;color:rgba(255,255,255,.88)}
.jx-plan-verrou{margin:0 6px;padding:8px 10px;border-radius:8px;background:rgba(242,193,78,.14);color:var(--or);font-size:.88rem;font-weight:700}
.jx-bas-forfait{display:grid;gap:10px;justify-items:center;text-align:center;margin-top:4px}
.jx-cta-forfait{display:grid;justify-items:center}
.jx-b-xl{max-width:440px;min-height:58px;font-size:1.2rem}
.jx-fin{margin:0;max-width:560px;font-size:.85rem;line-height:1.45;color:rgba(255,255,255,.6)}
.jx-liens-forfait{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:center}
.jx-liens-forfait .jx-lien{color:var(--pale)}
@media (max-width:600px){
  .jx-plans{grid-template-columns:1fr}
  .jx-plan{padding:8px 8px 12px}
  .jx-plan-tete{min-height:0}
  .jx-plan:not(.choisi) ul,.jx-plan:not(.choisi) .jx-plan-verrou{display:none}
  .jx-cta-forfait{position:sticky;bottom:calc(-24px - env(safe-area-inset-bottom,0px));margin:0 -16px;padding:18px 16px calc(14px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,rgba(4,10,20,0),rgba(4,10,20,.97) 30%)}
}
.acct-voir{width:100%;background:var(--gold);border-color:var(--gold);color:#141D27;font-size:1.05rem;padding:14px}
@media (min-width:601px){.jx-cta-forfait{order:1}.jx-bas-forfait{order:2}}