:root{
  /* fonds et texte */
  --paper:#FFF6EC; --card:#FFFFFF; --ink:#2A1A14; --ink2:#7A5B4E; --line:#F2DFCF;
  /* couleurs de marque */
  --jaune:#FFC81E;  --jaune-soft:#FFF0C2;   /* action principale */
  --corail:#FF6B35; --corail-soft:#FFE6DB;  /* second accent */
  --rose:#FF7FB0;   --rose-soft:#FFE4EF;    /* touche, surlignage */
  --vert:#7CA82F;   --vert-soft:#EEF6DC;    /* validé */
  --alerte:#D93A26; --alerte-soft:#FFE3DE;  /* à relancer, erreur */
  /* anciens noms conservés pour ne rien casser */
  --blue:var(--corail); --blue-soft:var(--corail-soft);
  --green:var(--vert);  --green-soft:var(--vert-soft);
  --coral:var(--alerte);--coral-soft:var(--alerte-soft);
  --amber:#B07400;      --amber-soft:var(--jaune-soft);
  --trait:var(--ink);      /* contour des cartes et boutons */
  --btn-bg:var(--ink); --btn-fg:var(--paper);
  --r:20px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:'Outfit',system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.6}
h1,h2,h3,h4{font-family:'Fredoka','Outfit',sans-serif;font-weight:700;letter-spacing:-.01em;line-height:1.12}
a{color:var(--blue)}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
img{max-width:100%}
.mono{font-variant-numeric:tabular-nums}

header.site{position:sticky;top:0;z-index:40;background:rgba(255,246,236,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hwrap{max-width:1040px;margin:0 auto;padding:12px 18px;display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:9px;font-family:'Fredoka';font-weight:700;font-size:20px;line-height:1;text-decoration:none;color:var(--ink);letter-spacing:-.02em}
.brand .pt{font-style:normal;color:var(--corail)}
.brand .lg{width:30px;height:30px;flex-shrink:0;display:block}
.hnav{display:flex;gap:14px;margin-left:auto;align-items:center;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hnav::-webkit-scrollbar{display:none}
.hnav a{font-size:14.5px;color:var(--ink2);text-decoration:none;white-space:nowrap;padding:8px 2px}
.hnav a:hover{color:var(--ink)}
main{max-width:1040px;margin:0 auto;padding:0 18px 70px}
.narrow{max-width:760px}
.crumbs{font-size:13px;color:var(--ink2);padding:16px 0 0;line-height:2}
.crumbs a{color:var(--ink2);text-decoration:none}
.crumbs a:hover{text-decoration:underline}

.hero{padding:34px 0 8px}
h2,#res,#cv,#lettre{scroll-margin-top:84px}
.surligne{background:linear-gradient(transparent 58%, var(--rose-soft) 58%);padding:0 2px}
:root[data-skin="shonen"] .surligne{background:linear-gradient(transparent 58%, rgba(255,210,48,.28) 58%)}
:root[data-skin="arene"] .surligne{background:linear-gradient(transparent 58%, rgba(200,170,110,.3) 58%)}
:root[data-skin="neon"] .surligne{background:linear-gradient(transparent 58%, rgba(255,46,151,.35) 58%)}
h1{font-size:clamp(28px,4.6vw,44px);margin-bottom:12px}
.lead{font-size:17px;color:var(--ink2);max-width:62ch}
h2{font-size:25px;margin:38px 0 10px}
h3{font-size:18px;margin:22px 0 8px}
p{margin-bottom:12px}
.card{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:0 2px 0 var(--line)}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(265px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(205px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;border-radius:20px;padding:3px 9px}
.t-blue{background:var(--blue-soft);color:var(--blue)} .t-green{background:var(--green-soft);color:var(--green)}
.t-coral{background:var(--coral-soft);color:var(--coral)} .t-amber{background:var(--amber-soft);color:var(--amber)}
.t-ink{background:#ECE8DF;color:var(--ink2)}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--btn-bg);color:var(--btn-fg);border:2px solid var(--trait);border-radius:999px;padding:11px 19px;font-weight:700;font-size:15px;text-decoration:none;transition:transform .15s,box-shadow .15s;box-shadow:0 3px 0 rgba(42,26,20,.2)}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 0 rgba(42,26,20,.2)}
.btn:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(42,26,20,.2)}
.btn.blue{background:var(--jaune);color:var(--ink);border-color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--trait);box-shadow:none}
.btn.sm{padding:8px 15px;font-size:14px}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.hint{font-size:13.5px;color:var(--ink2)}
.note{border:1px dashed var(--line);background:var(--card);border-radius:12px;padding:13px 15px;font-size:14px;color:var(--ink2)}
.warn{border:1px solid var(--amber);background:var(--amber-soft);border-radius:12px;padding:13px 15px;font-size:14px;color:#6B4A00}
ul.clean{list-style:none;display:flex;flex-direction:column;gap:8px}
ul.clean li{padding-left:20px;position:relative;font-size:15px}
ul.clean li::before{content:'▸';position:absolute;left:0;color:var(--corail)}
ul.check li::before{content:'✓';color:var(--green);font-weight:700}

/* formulaire outil */
.tool{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:0 2px 0 var(--line)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.fld label{display:block;font-size:12.5px;font-weight:600;color:var(--ink2);margin-bottom:5px}
.fld input,.fld select,.fld textarea{width:100%;background:#FFFDF8;border:1.5px solid var(--line);border-radius:14px;padding:11px 13px;color:var(--ink);font-family:inherit;font-size:16px;outline:none}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--ink);box-shadow:0 0 0 3px var(--jaune-soft)}
.fld textarea{min-height:88px;resize:vertical}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--line);background:var(--card);border-radius:999px;padding:8px 15px;font-size:14px;font-weight:500}
.chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip.qa.on{background:var(--corail);border-color:var(--corail);color:#fff}
.chip.reco{border-color:var(--ink)}
.out{display:none;margin-top:16px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;white-space:pre-wrap;font-size:15px;line-height:1.75}
.out.show{display:block}
.rowbtn{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}

/* liens offres */
.olist{display:flex;flex-direction:column;gap:9px}
.olink{display:flex;align-items:center;gap:13px;border:2px solid var(--trait);background:var(--card);border-radius:16px;padding:13px 15px;text-decoration:none;color:var(--ink);box-shadow:0 3px 0 var(--trait);transition:transform .15s,box-shadow .15s}
.olink:hover{transform:translateX(3px) translateY(-1px);box-shadow:0 4px 0 var(--trait)}
.olink .ic{width:40px;height:40px;border-radius:11px;background:var(--jaune-soft);display:grid;place-items:center;font-size:19px;flex-shrink:0}
.olink b{display:block;font-size:15px}
.olink small{color:var(--ink2);font-size:13px}
.olink .go{margin-left:auto;color:var(--ink2)}

/* faq */
.faq{border:1px solid var(--line);background:var(--card);border-radius:12px;margin-bottom:9px;overflow:hidden}
.faq>button{width:100%;text-align:left;padding:15px;display:flex;gap:12px;align-items:center;font-weight:600;font-size:16px}
.faq>button i{font-style:normal;margin-left:auto;color:var(--corail);font-size:22px}
.faq .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s}
.faq.open .a{grid-template-rows:1fr}
.faq .a>div{overflow:hidden;padding:0 15px;color:var(--ink2);font-size:15px}
.faq.open .a>div{padding-bottom:15px}

/* cartes de liens internes */
.cards a{text-decoration:none;color:inherit}
.mcard{display:flex;gap:12px;align-items:center;border:2px solid var(--trait);background:var(--card);border-radius:18px;padding:14px;box-shadow:0 3px 0 var(--trait);transition:transform .15s,box-shadow .15s}
.mcard:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--trait)}
.mcard .em{font-size:24px}
.mcard b{font-size:15px;display:block}
.mcard small{color:var(--ink2);font-size:13px}

.bar{height:8px;border-radius:6px;background:#EDE8DE;overflow:hidden}
.bar i{display:block;height:100%;border-radius:6px;background:var(--corail)}

/* ── parcours d'inscription ── */
.onb{max-width:720px;margin:0 auto;padding-top:26px}
.onb-bar{height:5px;background:#EDE8DE;border-radius:5px;overflow:hidden;margin-bottom:34px;position:sticky;top:70px;z-index:10}
.onb-bar i{display:block;height:100%;width:0;background:var(--corail);border-radius:5px;transition:width .45s cubic-bezier(.2,.9,.2,1)}
.etape{display:none}
.etape.on{display:block;animation:monte .45s cubic-bezier(.2,.9,.2,1) both}
@keyframes monte{from{opacity:0;transform:translateY(16px)}}
.q{font-size:clamp(25px,4.4vw,36px);margin-bottom:8px}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:11px;margin:20px 0 26px}
.opt{display:flex;align-items:center;gap:13px;text-align:left;background:var(--card);border:2px solid var(--trait);
  border-radius:18px;padding:15px;box-shadow:0 3px 0 var(--trait);transition:transform .18s,box-shadow .18s,border-color .18s;position:relative}
.opt:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--trait)}
.opt .em{font-size:23px;flex-shrink:0}
.opt b{display:block;font-size:15.5px}
.opt small{color:var(--ink2);font-size:13px}
.opt.on{border-color:var(--corail);box-shadow:0 3px 0 var(--corail)}
.opt.on::after{content:'✓';position:absolute;top:10px;right:12px;color:var(--corail);font-weight:800;font-size:16px}
.onb-pied{display:flex;gap:10px;justify-content:space-between;align-items:center;padding-bottom:30px}
.btn.grand{padding:15px 26px;font-size:17px;border-radius:13px}
.switch{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1.5px solid var(--line);
  border-radius:14px;padding:15px;max-width:520px;margin-top:14px;cursor:pointer}
.switch input{width:20px;height:20px;margin-top:2px;accent-color:var(--corail);flex-shrink:0}
.switch b{display:block;font-size:15px}
.switch small{color:var(--ink2);font-size:13px}
.final{text-align:center;padding:10px 0 40px}
.coche{width:62px;height:62px;border-radius:50%;background:var(--vert-soft);color:var(--vert);display:grid;
  place-items:center;font-size:30px;margin:0 auto 18px;animation:pop .5s cubic-bezier(.3,1.6,.5,1) both}
@keyframes pop{from{transform:scale(.4);opacity:0}}
.final .lead{margin:0 auto 22px;max-width:52ch}

/* ── mini graphique ── */
.spark{display:flex;align-items:flex-end;gap:3px;height:120px}
.spark span{flex:1;display:flex;align-items:flex-end;height:100%}
.spark i{display:block;width:100%;background:var(--corail);border-radius:3px 3px 0 0;min-height:2px}

footer.site{border-top:1px solid var(--line);background:var(--card)}
.fwrap{max-width:1040px;margin:0 auto;padding:26px 18px;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));font-size:14px;color:var(--ink2)}
.fwrap a{color:var(--ink2);text-decoration:none;display:block;padding:8px 0;min-height:34px}
.fwrap a:hover{color:var(--ink)}
.fwrap b{color:var(--ink);display:block;margin-bottom:6px;font-size:14px}
.legal{border-top:1px solid var(--line);padding:14px 18px;font-size:12.5px;color:var(--ink2);text-align:center}

@media (max-width:620px){
  .f-row{grid-template-columns:1fr}
  .hnav{gap:12px;margin-left:12px}
  .hnav a{font-size:14px}
  .hnav a.hide-s{display:none}
  .hwrap{padding:10px 14px;gap:8px}
  .brand{font-size:18px}
  main{padding:0 14px 60px}
  h1{font-size:clamp(26px,7vw,34px)}
  h2{font-size:22px;margin:30px 0 10px}
  .btn{padding:13px 20px}
  .g3,.g4{grid-template-columns:1fr}
  #badges{grid-template-columns:1fr 1fr;gap:10px}
  #badges .card{padding:12px}
  .olink .ic{width:36px;height:36px;font-size:17px}
  .fwrap{gap:10px;grid-template-columns:1fr 1fr}
}
@media (max-width:380px){
  .grid{gap:10px}
  .opt{padding:13px}
  .tool,.card{padding:15px}
}
@media print{
  header.site,footer.site,.noprint{display:none!important}
  body{background:#fff}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* ═══════════════ UNIVERS AU CHOIX ═══════════════ */

/* Shonen : nuit d'encre, jaune éclatant, rouge de combat */
:root[data-skin="shonen"]{
  --paper:#12101A; --card:#1C1828; --ink:#FFF6E6; --ink2:#AFA6C0; --line:#302A44;
  --jaune:#FFD230; --jaune-soft:#3A2F12;
  --corail:#FF4D4D; --corail-soft:#3B1A1A;
  --rose:#FF7BD0;   --rose-soft:#3A1F34;
  --vert:#5BE08D;   --vert-soft:#16321F;
  --alerte:#FF6B4A; --alerte-soft:#3B1E16;
  --trait:#FFF6E6; --btn-bg:#FFF6E6; --btn-fg:#12101A;
}
:root[data-skin="shonen"] .btn.blue{background:var(--jaune);color:#12101A;border-color:#FFF6E6}
:root[data-skin="shonen"] .chip.on{background:var(--jaune);color:#12101A;border-color:var(--jaune)}
:root[data-skin="shonen"] header.site{background:rgba(18,16,26,.92)}
:root[data-skin="shonen"] .note,:root[data-skin="shonen"] .out{background:#191527}
:root[data-skin="shonen"] .fld input,:root[data-skin="shonen"] .fld select,:root[data-skin="shonen"] .fld textarea{background:#191527;color:var(--ink)}
:root[data-skin="shonen"] .olink .ic{background:#2A2340}
:root[data-skin="shonen"] .brand .pt{color:var(--jaune)}
:root[data-skin="shonen"] h1,:root[data-skin="shonen"] h2{text-shadow:2px 2px 0 rgba(255,210,48,.25)}

/* Arène : bleu nuit et or, esprit jeu de rôle */
:root[data-skin="arene"]{
  --paper:#0B1220; --card:#121C2E; --ink:#F0E6D2; --ink2:#A0A8B8; --line:#26334A;
  --jaune:#C8AA6E; --jaune-soft:#2A2314;
  --corail:#0AC8B9; --corail-soft:#0C2A2C;
  --rose:#9B7BE0;   --rose-soft:#221B33;
  --vert:#4CC98A;   --vert-soft:#123023;
  --alerte:#E05252; --alerte-soft:#331818;
  --trait:#C8AA6E; --btn-bg:#C8AA6E; --btn-fg:#0B1220;
  --r:10px;
}
:root[data-skin="arene"] .btn{border-radius:8px}
:root[data-skin="arene"] .btn.blue{background:var(--jaune);color:#0B1220}
:root[data-skin="arene"] .btn.ghost{color:var(--jaune)}
:root[data-skin="arene"] .chip{border-radius:8px}
:root[data-skin="arene"] .chip.on{background:var(--jaune);color:#0B1220;border-color:var(--jaune)}
:root[data-skin="arene"] header.site{background:rgba(11,18,32,.92)}
:root[data-skin="arene"] .card,:root[data-skin="arene"] .tool{border-radius:10px}
:root[data-skin="arene"] .mcard,:root[data-skin="arene"] .opt,:root[data-skin="arene"] .olink{border-radius:10px}
:root[data-skin="arene"] .note,:root[data-skin="arene"] .out{background:#0F1828}
:root[data-skin="arene"] .fld input,:root[data-skin="arene"] .fld select,:root[data-skin="arene"] .fld textarea{background:#0F1828;color:var(--ink);border-color:#26334A}
:root[data-skin="arene"] .olink .ic{background:#1B2740}
:root[data-skin="arene"] .brand .pt{color:var(--corail)}

/* Néon : noir profond, magenta et cyan */
:root[data-skin="neon"]{
  --paper:#08080C; --card:#131320; --ink:#F2F0FF; --ink2:#9B98B8; --line:#282640;
  --jaune:#3BF0E4; --jaune-soft:#0C2E2C;
  --corail:#FF2E97; --corail-soft:#330F24;
  --rose:#FF2E97;   --rose-soft:#330F24;
  --vert:#5BE08D;   --vert-soft:#123021;
  --alerte:#FF5A5A; --alerte-soft:#331616;
  --trait:#3BF0E4; --btn-bg:#3BF0E4; --btn-fg:#08080C;
}
:root[data-skin="neon"] .btn.blue{background:var(--jaune);color:#08080C;box-shadow:0 0 18px rgba(59,240,228,.45)}
:root[data-skin="neon"] .chip.on{background:var(--corail);color:#fff;border-color:var(--corail)}
:root[data-skin="neon"] header.site{background:rgba(8,8,12,.92)}
:root[data-skin="neon"] .note,:root[data-skin="neon"] .out{background:#10101C}
:root[data-skin="neon"] .fld input,:root[data-skin="neon"] .fld select,:root[data-skin="neon"] .fld textarea{background:#10101C;color:var(--ink)}
:root[data-skin="neon"] .olink .ic{background:#1E1C33}
:root[data-skin="neon"] .brand .pt{color:var(--corail)}
:root[data-skin="neon"] .mcard:hover,:root[data-skin="neon"] .opt:hover{box-shadow:0 0 16px rgba(59,240,228,.35)}

/* Pastel : doux, lilas et menthe */
:root[data-skin="pastel"]{
  --paper:#FBF7FF; --card:#FFFFFF; --ink:#3B2E4D; --ink2:#7E7191; --line:#EADFF5;
  --jaune:#B79CFF; --jaune-soft:#F0E9FF;
  --corail:#FF9FB6; --corail-soft:#FFE9EF;
  --rose:#FF9FB6;   --rose-soft:#FFE9EF;
  --vert:#5CC9A7;   --vert-soft:#E3F6EF;
  --alerte:#F07A6B; --alerte-soft:#FDE9E6;
  --trait:#3B2E4D; --btn-bg:#3B2E4D; --btn-fg:#FBF7FF;
}
:root[data-skin="pastel"] .btn.blue{background:var(--jaune);color:#231B30}
:root[data-skin="pastel"] .brand .pt{color:var(--corail)}


/* ── couche de jeu ── */
.niveau{border:2px solid var(--trait);box-shadow:0 3px 0 var(--trait)}
.rang{width:54px;height:54px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  font-family:'Fredoka';font-size:24px;font-weight:700;background:var(--jaune);color:#2A1A14;border:2px solid var(--trait)}
:root[data-skin="shonen"] .rang,:root[data-skin="arene"] .rang,:root[data-skin="neon"] .rang{color:var(--paper)}
.badge{opacity:.45;filter:grayscale(1)}
.badge.gagne{opacity:1;filter:none;border-color:var(--vert)}

/* ---- cartes de même hauteur dans les grilles ---- */
.cards>a{display:flex}
.cards>a>.mcard,.cards>.mcard{flex:1;width:100%}
.grid>.card{height:100%}

/* ---- parcours : choix de l'univers avec aperçu ---- */
.univers{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:12px;margin:20px 0 26px}
.uv{display:flex;flex-direction:column;gap:3px;text-align:left;background:var(--card);border:2px solid var(--line);border-radius:18px;padding:10px 10px 12px;color:var(--ink);font:inherit;cursor:pointer;transition:transform .15s,border-color .15s}
.uv:hover{transform:translateY(-2px)}
.uv.on{border-color:var(--ink);box-shadow:0 0 0 3px var(--jaune)}
.uv b{font-size:15px;margin-top:6px}.uv small{color:var(--ink2);font-size:12.5px}
.uv-ecran{display:flex;flex-direction:column;gap:6px;background:var(--a);border-radius:11px;padding:10px;aspect-ratio:4/3;border:1px solid rgba(0,0,0,.12)}
.uv-ecran i{display:block;border-radius:4px}
.uv-barre{height:6px;background:var(--d);opacity:.25}
.uv-titre{height:11px;width:70%;background:var(--d)}
.uv-l{height:5px;background:var(--d);opacity:.4}.uv-l.court{width:55%}
.uv-btn{margin-top:auto;height:15px;width:52%;background:var(--b);border-radius:99px!important;box-shadow:12px 0 0 -2px var(--c)}

/* ---- parcours : carte d'identité et cartes qualités ---- */
.carte-id{background:var(--card);border:2px solid var(--trait);border-radius:20px;padding:16px;margin-top:18px;box-shadow:0 3px 0 var(--trait)}
.cartes-q{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:9px;margin:12px 0 26px}
.cq{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;background:var(--card);border:2px solid var(--line);border-radius:16px;font:inherit;font-weight:600;font-size:14px;color:var(--ink);cursor:pointer;transition:transform .15s}
.cq span{font-size:24px}
.cq.on{border-color:var(--ink);background:var(--jaune-soft);transform:rotate(-2deg) translateY(-2px)}
.cq.non{animation:non .35s}
@keyframes non{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* ---- atelier CV ---- */
.cv-app{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:22px;align-items:start}
.cv-droite{position:sticky;top:84px}
.cv-coach{background:var(--card);border:2px solid var(--trait);border-radius:18px;padding:14px 16px;margin-bottom:14px;box-shadow:0 3px 0 var(--trait)}
.cv-coach-t{display:flex;justify-content:space-between;align-items:baseline}
.cv-coach-t span{font-weight:800;font-variant-numeric:tabular-nums}
.cv-jauge{height:7px;background:var(--line);border-radius:9px;margin:8px 0 10px;overflow:hidden}
.cv-jauge i{display:block;height:100%;width:0;background:var(--vert);transition:width .4s}
.cv-coach ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cv-coach li{display:flex;gap:10px;align-items:center;justify-content:space-between;font-size:14px;color:var(--ink2);border-top:1px dashed var(--line);padding-top:8px}
.cv-coach li .btn{flex-shrink:0}
.cv-sec{background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:4px 16px;margin-bottom:12px}
.cv-sec[open]{padding-bottom:16px}
.cv-sec summary{font-weight:800;font-size:16.5px;padding:12px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between}
.cv-sec summary::after{content:'+';font-weight:400}.cv-sec[open] summary::after{content:'-'}
.cv-sec summary::-webkit-details-marker{display:none}
.cv-mini{display:block;font-size:12.5px;font-weight:600;color:var(--ink2);margin:12px 0 7px}
.cv-photo{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.cv-photo-box{width:84px;height:84px;border-radius:50%;background:var(--jaune-soft);border:2px dashed var(--ink2);display:grid;place-items:center;font-size:28px;overflow:hidden;flex-shrink:0}
.cv-photo-box img{width:100%;height:100%;object-fit:cover}
.lien-x{background:none;border:0;color:var(--ink2);text-decoration:underline;font:inherit;font-size:13.5px;cursor:pointer;padding:0 4px}
.cv-bloc{border:1.5px dashed var(--line);border-radius:14px;padding:12px;margin-bottom:12px}
.cv-bloc-t{display:flex;justify-content:space-between;margin-bottom:8px}
.cv-types{margin-bottom:10px}.cv-types .chip{padding:5px 11px;font-size:13px}
.cv-missions .chip{text-align:left;font-size:13.5px}
.cv-ajout{display:flex;gap:8px;margin-top:10px}
.cv-ajout input{flex:1;min-width:0;border:1.5px solid var(--line);border-radius:12px;padding:8px 11px;font:inherit;font-size:15px;background:var(--card);color:var(--ink)}
#cv-props{display:grid;gap:8px;margin:10px 0 12px}
.cv-prop{text-align:left;background:var(--jaune-soft);border:1.5px solid transparent;border-radius:12px;padding:10px 12px;font:inherit;font-size:14px;color:var(--ink);cursor:pointer}
.cv-prop:hover{border-color:var(--ink)}
.cv-couleurs{display:flex;gap:10px}
.pastille{width:34px;height:34px;border-radius:50%;border:3px solid var(--card);box-shadow:0 0 0 1.5px var(--line);cursor:pointer}
.pastille.on{box-shadow:0 0 0 3px var(--ink)}
.cv-voir{display:none;width:100%;justify-content:center}
.cv-dl{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-bottom:12px}
.cv-alerte{color:var(--alerte)}
.cv-scale{position:relative;overflow:hidden;border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,.18);background:#fff}
.cv-a4{width:794px;height:1123px;transform-origin:0 0;background:#fff}
.cv-bravo{margin-top:12px}
.cv-export{position:fixed;left:-10000px;top:0}
@media (max-width:900px){.cv-app{grid-template-columns:minmax(0,1fr)}.cv-droite{position:static}.cv-voir{display:flex}}

/* ---- le document CV (aperçu, PDF, impression) ---- */
.cvp{width:794px;height:1123px;overflow:hidden;background:#fff;color:#1d2126;font-family:Arial,Helvetica,sans-serif;font-size:12.5px;line-height:1.5;display:flex;text-align:left}
.cvp *{box-sizing:border-box;margin:0;padding:0}
.cvp .sb{width:262px;flex-shrink:0;background:var(--c);color:#fff;padding:38px 24px}
.cvp .ph{display:block;width:128px;height:128px;border-radius:50%;object-fit:cover;border:4px solid rgba(255,255,255,.85);margin:0 auto 18px}
.cvp h2{font-size:25px;line-height:1.12;font-weight:700;letter-spacing:-.01em;text-shadow:none}
.cvp .job{font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin:7px 0 6px;opacity:.85}
.cvp .sl{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin:22px 0 8px;padding-bottom:5px;border-bottom:1px solid rgba(255,255,255,.35)}
.cvp .sb p,.cvp .sb li{font-size:12px;color:rgba(255,255,255,.92);margin-bottom:5px;list-style:none;overflow-wrap:anywhere}
.cvp .mn{flex:1;padding:40px 34px}
.cvp .acc{font-size:13px;line-height:1.65;color:#333;border-left:3px solid var(--c);padding:2px 0 2px 14px;margin-bottom:24px}
.cvp h3{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--c);border-bottom:2px solid var(--c);padding-bottom:5px;margin:22px 0 12px}
.cvp .mn>h3:first-child,.cvp .acc+h3{margin-top:0}
.cvp .it{margin-bottom:14px}
.cvp .it-h{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.cvp .it-h b{font-size:14px}
.cvp .it-h i{font-style:normal;font-size:11px;color:#777;white-space:nowrap}
.cvp .it-s{font-size:11.5px;color:#666;font-style:italic;margin-top:1px}
.cvp .it ul{margin-top:6px}
.cvp .it li{list-style:none;position:relative;padding-left:13px;margin-bottom:3px;color:#3a3f46}
.cvp .it li::before{content:'';position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--c)}
.cvp .vide{color:#999;font-style:italic}
.cvp.m-clair .sb{background:#F4F5F7;color:#1d2126;border-right:4px solid var(--c)}
.cvp.m-clair .sb p,.cvp.m-clair .sb li{color:#3a3f46}
.cvp.m-clair .sl{color:var(--c);border-color:#d8dbe0}
.cvp.m-clair h2{color:var(--c)}
.cvp.m-clair .ph{border-color:#fff;box-shadow:0 0 0 2px var(--c)}
.cvp.m-bandeau{flex-direction:column}
.cvp .bd{display:flex;gap:22px;align-items:center;background:var(--c);color:#fff;padding:32px 38px}
.cvp .bd .ph{margin:0;width:112px;height:112px}
.cvp .bd .ct{font-size:12px;opacity:.92;margin-top:4px;display:flex;flex-wrap:wrap;gap:6px}
.cvp .cols{display:flex;flex:1}
.cvp.m-bandeau .sb{background:#F4F5F7;color:#1d2126;padding:30px 22px;order:2}
.cvp.m-bandeau .sb p,.cvp.m-bandeau .sb li{color:#3a3f46}
.cvp.m-bandeau .sl{color:var(--c);border-color:#d8dbe0}
.cvp.m-bandeau .sb .sl:first-child{margin-top:0}
.cvp.m-bandeau .mn{padding:30px 34px}
body.cv-print{background:#fff}
@media print{body.cv-print .cvp{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
.cvp h2,.cvp h3{font-family:Arial,Helvetica,sans-serif}


/* ═══════════════ CHASSE : l'univers d'origine, hérité de Duo en chasse ═══════════════ */
:root{--ciel:#2BB8FF}
:root[data-skin="chasse"]{
  --paper:#070A18; --card:#10162E; --card2:#161E3D; --ink:#EEF1FF; --ink2:#8C94BF; --line:#243058;
  --jaune:#FFC857; --jaune-soft:rgba(255,200,87,.1);
  --corail:#8B7BFF; --corail-soft:rgba(139,123,255,.14);
  --ciel:#2BB8FF;
  --rose:#8B7BFF;   --rose-soft:rgba(139,123,255,.22);
  --vert:#3FE0A0;   --vert-soft:rgba(63,224,160,.12);
  --alerte:#FF6B6B; --alerte-soft:rgba(255,107,107,.12);
  --amber:#FFC857;
  --trait:var(--line); --btn-bg:var(--card2); --btn-fg:var(--ink);
  --degrade:linear-gradient(90deg,#8B7BFF,#2BB8FF,#8B7BFF);
  color-scheme:dark;
}
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
.fx-aurore,.fx-etoiles{display:none}
:root[data-skin="chasse"] .fx-aurore{display:block;position:fixed;inset:-20%;z-index:0;pointer-events:none;opacity:.3;
  background:radial-gradient(45% 40% at 18% 12%,#8B7BFF,transparent 75%),radial-gradient(40% 35% at 85% 30%,#2BB8FF,transparent 75%),radial-gradient(35% 30% at 50% 95%,#3FE0A0,transparent 75%)}
@keyframes fx-drift{to{transform:translate(4%,6%) rotate(8deg)}}
:root[data-skin="chasse"] .fx-etoiles{display:block;position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.fx-confettis{position:fixed;inset:0;width:100%;height:100%;z-index:90;pointer-events:none}
.fx-toast{position:fixed;left:50%;bottom:28px;z-index:95;transform:translate(-50%,140px);background:#161E3D;border:1px solid #FFC857;color:#FFC857;
  font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:17px;padding:12px 22px;border-radius:14px;transition:transform .5s cubic-bezier(.3,1.6,.5,1);box-shadow:0 10px 40px -10px #FFC857;pointer-events:none}
.fx-toast.show{transform:translate(-50%,0)}
:root[data-skin="chasse"] main,:root[data-skin="chasse"] footer.site{position:relative;z-index:1}

/* typo jeu vidéo */
:root[data-skin="chasse"] h1,:root[data-skin="chasse"] h2,:root[data-skin="chasse"] h3,:root[data-skin="chasse"] .q,
:root[data-skin="chasse"] .brand{font-family:'Chakra Petch','Outfit',sans-serif;letter-spacing:.01em}
:root[data-skin="chasse"] h1{font-size:clamp(32px,6vw,56px);line-height:1.03;text-wrap:balance}
:root[data-skin="chasse"] .surligne,:root[data-skin="chasse"] h1 em{font-style:normal;background:var(--degrade);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fx-shine 4s linear infinite;padding:0}
@keyframes fx-shine{to{background-position:200% center}}
:root[data-skin="chasse"] .tag{font-family:'Chakra Petch',sans-serif;letter-spacing:.14em;text-transform:uppercase;font-size:11px;background:transparent;border:1px solid currentColor}
:root[data-skin="chasse"] .t-amber{color:#FFC857}

/* entête et pied */
:root[data-skin="chasse"] header.site{background:rgba(7,10,24,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
:root[data-skin="chasse"] .brand .pt{color:#2BB8FF}
:root[data-skin="chasse"] footer.site{background:rgba(16,22,46,.7)}
:root[data-skin="chasse"] a{color:#9FD8FF}

/* boutons : le dégradé qui brille */
:root[data-skin="chasse"] .btn{border:1px solid var(--line);box-shadow:none;border-radius:14px}
:root[data-skin="chasse"] .btn:hover{border-color:var(--corail)}
:root[data-skin="chasse"] .btn.blue{background:var(--degrade);background-size:200% auto;color:#070A18;border:0;font-family:'Chakra Petch',sans-serif;letter-spacing:.02em}
:root[data-skin="chasse"] .btn.blue:hover{animation:fx-shine 3s linear infinite;transform:translateY(-2px);box-shadow:0 12px 30px -12px #8B7BFF}
:root[data-skin="chasse"] .btn.ghost{background:rgba(16,22,46,.6)}

/* surfaces */
:root[data-skin="chasse"] .card,:root[data-skin="chasse"] .tool,:root[data-skin="chasse"] .note,:root[data-skin="chasse"] .out,
:root[data-skin="chasse"] .faq,:root[data-skin="chasse"] .switch,:root[data-skin="chasse"] .cv-sec,:root[data-skin="chasse"] .carte-id,:root[data-skin="chasse"] .cv-coach{
  background:rgba(16,22,46,.82);border:1px solid var(--line);box-shadow:none;backdrop-filter:blur(6px)}
:root[data-skin="chasse"] .fld input,:root[data-skin="chasse"] .fld select,:root[data-skin="chasse"] .fld textarea,:root[data-skin="chasse"] .cv-ajout input{background:var(--card2);border:1px solid var(--line);color:var(--ink)}
:root[data-skin="chasse"] .fld input:focus,:root[data-skin="chasse"] .fld select:focus,:root[data-skin="chasse"] .fld textarea:focus{border-color:var(--corail);box-shadow:0 0 0 3px rgba(139,123,255,.2)}
:root[data-skin="chasse"] .fld select option{background:var(--card)}
:root[data-skin="chasse"] .chip{background:rgba(16,22,46,.8);border:1px solid var(--line);color:var(--ink)}
:root[data-skin="chasse"] .chip.on{background:var(--degrade);background-size:200% auto;color:#070A18;border-color:transparent;font-weight:600}
:root[data-skin="chasse"] .bar,:root[data-skin="chasse"] .onb-bar{background:var(--line)}
:root[data-skin="chasse"] .bar i,:root[data-skin="chasse"] .onb-bar i,:root[data-skin="chasse"] .cv-jauge i{background:var(--degrade);background-size:200% auto}
:root[data-skin="chasse"] .t-ink{background:var(--card2);color:var(--ink2)}
:root[data-skin="chasse"] .warn{background:var(--jaune-soft);color:#FFE3A3}

/* cartes : lévitation, bordure qui tourne, reflet holo */
:root[data-skin="chasse"] .mcard,:root[data-skin="chasse"] .opt,:root[data-skin="chasse"] .olink,:root[data-skin="chasse"] .uv,:root[data-skin="chasse"] .cq{
  position:relative;background:rgba(16,22,46,.85);border:1px solid var(--line);box-shadow:none;isolation:isolate;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out,border-color .25s,box-shadow .3s}
:root[data-skin="chasse"] .mcard::before,:root[data-skin="chasse"] .opt::before,:root[data-skin="chasse"] .olink::before,:root[data-skin="chasse"] .uv::before{
  content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;z-index:-1;opacity:0;transition:opacity .3s;
  background:conic-gradient(from var(--ang),#8B7BFF,#2BB8FF,#3FE0A0,#8B7BFF);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
@keyframes fx-spin{to{--ang:360deg}}
:root[data-skin="chasse"] .mcard::after,:root[data-skin="chasse"] .opt::after,:root[data-skin="chasse"] .olink::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;mix-blend-mode:color-dodge;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.35),transparent 45%),linear-gradient(115deg,transparent 30%,rgba(139,123,255,.25) 45%,rgba(43,184,255,.25) 55%,transparent 70%)}
:root[data-skin="chasse"] .mcard:hover,:root[data-skin="chasse"] .opt:hover,:root[data-skin="chasse"] .olink:hover{box-shadow:0 18px 40px -18px #8B7BFF;border-color:transparent}
:root[data-skin="chasse"] .mcard:hover::before,:root[data-skin="chasse"] .opt:hover::before,:root[data-skin="chasse"] .olink:hover::before,
:root[data-skin="chasse"] .opt.on::before,:root[data-skin="chasse"] .uv.on::before{opacity:1}
:root[data-skin="chasse"] .mcard:hover::after,:root[data-skin="chasse"] .opt:hover::after,:root[data-skin="chasse"] .olink:hover::after{opacity:.5}
:root[data-skin="chasse"] .opt.on{border-color:transparent;box-shadow:0 0 34px -10px #8B7BFF}
:root[data-skin="chasse"] .opt.on::after{content:'✓';opacity:1;mix-blend-mode:normal;background:none;color:#3FE0A0;inset:auto;top:10px;right:12px}
:root[data-skin="chasse"] .mcard .em,:root[data-skin="chasse"] .olink .ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--card2);border:1px solid var(--line);flex-shrink:0}
:root[data-skin="chasse"] .uv.on{box-shadow:0 0 34px -8px #8B7BFF;border-color:transparent}
:root[data-skin="chasse"] .cq.on{background:rgba(139,123,255,.18);border-color:#8B7BFF}

/* apparition en cascade */
:root[data-skin="chasse"] .grid>*,:root[data-skin="chasse"] .opts>*,:root[data-skin="chasse"] .olist>*{animation:fx-pop .6s cubic-bezier(.3,1.5,.5,1) both}
:root[data-skin="chasse"] .grid>*:nth-child(2),:root[data-skin="chasse"] .olist>*:nth-child(2){animation-delay:.05s}
:root[data-skin="chasse"] .grid>*:nth-child(3),:root[data-skin="chasse"] .olist>*:nth-child(3){animation-delay:.1s}
:root[data-skin="chasse"] .grid>*:nth-child(4),:root[data-skin="chasse"] .olist>*:nth-child(4){animation-delay:.15s}
:root[data-skin="chasse"] .grid>*:nth-child(n+5){animation-delay:.2s}
@keyframes fx-pop{from{opacity:0;transform:scale(.92) translateY(14px)}}
@media (prefers-reduced-motion:reduce){.fx-aurore{animation:none}}
:root[data-skin="chasse"] .cards a,:root[data-skin="chasse"] a.mcard,:root[data-skin="chasse"] a.olink{color:var(--ink)}
.brand{white-space:nowrap}


/* ═══════════════ CARTES PERSO (héritées de Duo en chasse) ═══════════════ */
.pcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;perspective:1400px;margin-bottom:8px}
.pcard{--ca:#8B7BFF;--cb:#2BB8FF;--rx:0deg;--ry:0deg;--mx:50%;--my:50%;position:relative;display:block;border-radius:24px;padding:3px;text-decoration:none;color:var(--ink);
  background:var(--line);transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .25s ease-out;isolation:isolate}
.pcard.t-b{--ca:#3FE0A0;--cb:#2BB8FF}.pcard.t-c{--ca:#FFC857;--cb:#FF8A3D}
.pcard::before{content:'';position:absolute;inset:0;border-radius:24px;background:conic-gradient(from var(--ang),var(--ca),var(--cb),var(--ca),var(--cb),var(--ca));z-index:-1}
.pcard:hover::before,.pcard.on::before{animation:fx-spin 5s linear infinite}
.pcard:hover::after,.pcard.on::after{content:'';position:absolute;inset:-12px;border-radius:34px;z-index:-2;background:conic-gradient(from var(--ang),var(--ca),var(--cb),var(--ca));filter:blur(26px);opacity:.45;animation:fx-spin 5s linear infinite}
.pc-in{position:relative;background:var(--card);border-radius:21px;padding:18px;overflow:hidden;height:100%;display:flex;flex-direction:column}
.pc-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pc-lvl{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:12.5px;background:linear-gradient(90deg,var(--ca),var(--cb));color:#070A18;padding:3px 10px;border-radius:8px}
.pc-cls{font-size:12px;color:var(--ink2);text-transform:capitalize;text-align:right}
.pc-av{width:104px;height:104px;border-radius:50%;margin:18px auto 10px;padding:4px;background:conic-gradient(from var(--ang),var(--ca),var(--cb),var(--ca));box-shadow:0 0 46px -8px var(--ca)}
.pcard:hover .pc-av,.pcard.on .pc-av{animation:fx-spin 4s linear infinite,fx-bob 3s ease-in-out infinite}
@keyframes fx-bob{50%{translate:0 -5px}}
.pc-av>div{width:100%;height:100%;border-radius:50%;background:var(--card2,#161E3D);display:grid;place-items:center;overflow:hidden;font-family:'Chakra Petch',sans-serif;font-size:42px;font-weight:700;color:#fff}
.pc-av img{width:100%;height:100%;object-fit:cover}
.pc-nom{text-align:center;font-family:'Chakra Petch',sans-serif;font-size:24px;font-weight:700;line-height:1.15}
.pc-role{text-align:center;color:var(--ink2);font-size:13.5px;margin-bottom:14px}
.pc-stat{margin-bottom:9px}
.pc-stat>div:first-child{display:flex;justify-content:space-between;font-size:12px;color:var(--ink2);margin-bottom:4px}
.pc-stat b{font-family:'Chakra Petch',sans-serif;color:var(--ink)}
.pc-bar{height:8px;background:var(--line);border-radius:6px;overflow:hidden}
.pc-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--ca),var(--cb));border-radius:6px;transition:width 1.2s cubic-bezier(.2,.9,.2,1);position:relative;overflow:hidden}
.pc-bar i::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent)}
.pcard:hover .pc-bar i::after,.pcard.on .pc-bar i::after{animation:fx-sweep 2.2s infinite}
@keyframes fx-sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.pc-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:8px}
.pc-bdg{font-size:11.5px;border:1px solid var(--line);border-radius:8px;padding:3px 8px;color:#C99A2E;background:rgba(255,200,87,.08)}
:root[data-skin="chasse"] .pc-bdg{color:#FFC857}
.pc-go{margin-top:auto;padding-top:10px;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:14px;text-align:center;color:var(--ink)}
.pc-holo{position:absolute;inset:0;pointer-events:none;mix-blend-mode:color-dodge;opacity:0;transition:opacity .3s;
  background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.45),transparent 40%),linear-gradient(115deg,transparent 30%,rgba(139,123,255,.25) 42%,rgba(43,184,255,.25) 50%,rgba(63,224,160,.25) 58%,transparent 70%)}
.pcard:hover .pc-holo{opacity:.45}.pcard.on .pc-holo{opacity:.25}
.joueur{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:26px;align-items:center;margin:18px 0 8px}
.joueur-txt{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
@media (max-width:620px){.joueur{grid-template-columns:1fr}.pcards{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.pcard::before,.pc-av{animation:none}}
:root[data-skin] a.pcard,a.pcard{color:var(--ink)}.pc-nom{color:var(--ink)}

/* espace : les 4 outils */
.outils{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:22px 0 6px}
.outil{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:16px;border:2px solid var(--trait);border-radius:18px;background:var(--card);text-decoration:none;color:var(--ink);box-shadow:0 3px 0 var(--trait);transition:transform .15s}
.outil:hover{transform:translateY(-3px)}
.outil .em{font-size:28px;margin-bottom:6px}
.outil b{font-size:16.5px}.outil small{color:var(--ink2);font-size:13px}
:root[data-skin="chasse"] .outil{background:rgba(16,22,46,.85);border:1px solid var(--line);box-shadow:none;color:var(--ink)}
:root[data-skin="chasse"] .outil b{font-family:'Chakra Petch',sans-serif}
:root[data-skin="chasse"] .outil:hover{border-color:#8B7BFF;box-shadow:0 16px 34px -16px #8B7BFF}
@media (max-width:720px){.outils{grid-template-columns:1fr 1fr}}

/* accueil : recherche de classe */
.classe-rech{max-width:640px}
.classe-rech label{display:block;font-weight:700;font-size:15px;margin-bottom:8px}
.classe-champ input{width:100%;font:inherit;font-size:18px;padding:16px 18px;border-radius:16px;border:2px solid var(--trait);background:var(--card);color:var(--ink);outline:none}
.classe-champ input:focus{border-color:var(--corail);box-shadow:0 0 0 4px var(--corail-soft)}
.classe-rech .hint{margin-top:8px}
.pcards.seule{grid-template-columns:minmax(0,340px)}
:root[data-skin="chasse"] .classe-champ input{background:var(--card2);border:1px solid var(--line)}
:root[data-skin="chasse"] .classe-champ input:focus{border-color:#8B7BFF;box-shadow:0 0 0 4px rgba(139,123,255,.2)}

:root[data-skin="chasse"] .mcard:hover::before,:root[data-skin="chasse"] .opt:hover::before,:root[data-skin="chasse"] .olink:hover::before,:root[data-skin="chasse"] .opt.on::before,:root[data-skin="chasse"] .uv.on::before{animation:fx-spin 4s linear infinite}

/* parcours confirmé */
.olink[data-pro]{display:none}
:root[data-niveau="confirme"] .olink[data-pro]{display:flex;order:-1}
.si-confirme{display:none}
:root[data-niveau="confirme"] .si-confirme{display:block}
.verdict{border:2px solid var(--line);border-radius:18px;padding:16px 18px;margin:-8px 0 24px;background:var(--card);animation:monte .4s both}
.verdict b{font-size:17px;display:block;margin-bottom:4px}
.verdict p{margin:0 0 8px;color:var(--ink2)}
.verdict ul{margin:0 0 10px 18px;font-size:14.5px}
.verdict.pro{border-color:#FFC857;box-shadow:0 0 0 3px rgba(255,200,87,.18)}
:root[data-skin="chasse"] .verdict{background:rgba(16,22,46,.85)}
.cv-niveau{font-size:14px;font-weight:600;margin:0 0 12px;padding:9px 13px;border-radius:12px;background:var(--jaune-soft);color:var(--ink)}

.chip.filtre{display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.chip.filtre input{accent-color:var(--corail);width:16px;height:16px}
.chip.filtre:has(input:checked){border-color:var(--corail);background:var(--corail-soft)}

/* affiche A4 */
.affiche{width:min(100%,595px);aspect-ratio:210/297;margin:20px auto;background:#070A18;color:#EEF1FF;border-radius:10px;padding:48px 44px;display:flex;flex-direction:column;align-items:center;text-align:center;font-family:'Outfit',sans-serif;
  background-image:radial-gradient(60% 40% at 15% 10%,rgba(139,123,255,.45),transparent 70%),radial-gradient(50% 40% at 90% 30%,rgba(43,184,255,.35),transparent 70%)}
.af-haut{font-family:'Chakra Petch',sans-serif;font-weight:700;letter-spacing:.3em;color:#FFC857;font-size:15px}
.af-titre{font-family:'Chakra Petch',sans-serif;font-size:clamp(26px,5.5vw,38px);line-height:1.08;margin:18px 0 22px;color:#fff}
.af-liste{list-style:none;padding:0;margin:0 0 24px;font-size:16px;display:grid;gap:7px}
.af-liste li::before{content:'✓ ';color:#3FE0A0;font-weight:700}
.af-qr{background:#fff;padding:12px;border-radius:12px;margin-top:auto}
.af-qr img,.af-qr canvas{display:block;max-width:100%;height:auto}
.af-url{font-family:'Chakra Petch',sans-serif;font-size:20px;margin:12px 0 4px;color:#fff}
.af-pied{font-size:13px;color:#B9C0E6;margin:0}
@media print{.noprint,header.site,footer.site,.fx-aurore,.fx-etoiles{display:none!important}.affiche{width:100%;border-radius:0;margin:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}@page{size:A4;margin:0}}
article.narrow h2{margin-top:30px}

/* escouade : parrainage entre élèves */
.escouade{display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center;margin:22px 0 6px;padding:20px;border-radius:22px;border:2px solid var(--trait);background:var(--card)}
.esc-qr{background:#fff;padding:10px;border-radius:16px;border:0;cursor:zoom-in;line-height:0}
.esc-qr img,.esc-qr canvas{display:block}
.esc-compte{font-size:15px;margin-bottom:8px}.esc-compte b{font-size:26px;margin-right:4px;font-family:'Chakra Petch',sans-serif}
.esc-badges{display:flex;gap:6px;flex-wrap:wrap}
.pc-bdg.verrou{opacity:.45;filter:grayscale(1)}
.esc-plein{position:fixed;inset:0;z-index:100;background:rgba(7,10,24,.86);display:grid;place-items:center;padding:16px}
.esc-plein>div{background:#fff;color:#14161B;border-radius:22px;padding:22px;text-align:center;display:grid;gap:12px;justify-items:center}
.esc-plein p{margin:0;font-weight:700}
.invite{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:18px 0 0;padding:12px 16px;border-radius:16px;border:1px solid var(--jaune);background:var(--jaune-soft)}
:root[data-skin="chasse"] .escouade{background:rgba(16,22,46,.85);border:1px solid var(--line);position:relative;isolation:isolate}
:root[data-skin="chasse"] .escouade::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;z-index:-1;background:conic-gradient(from var(--ang),#FFC857,#8B7BFF,#2BB8FF,#FFC857);animation:fx-spin 6s linear infinite;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
@media (max-width:620px){.escouade{grid-template-columns:1fr}.esc-qr{justify-self:center;order:-1}}
.esc-plein[hidden]{display:none}

/* page 404 */
.p404{text-align:center;padding:30px 0 10px;max-width:720px;margin:0 auto}
.p404 .lead{margin-left:auto;margin-right:auto}
.p404-glitch{display:flex;justify-content:center;gap:clamp(6px,2vw,16px);margin-bottom:10px;font-family:'Chakra Petch','Outfit',sans-serif;font-weight:700;font-size:clamp(96px,24vw,190px);line-height:1}
.p404-glitch span{position:relative;display:inline-block;color:var(--ink);animation:p404-flotte 3.2s ease-in-out infinite}
.p404-glitch span:nth-child(2){animation-delay:.25s}.p404-glitch span:nth-child(3){animation-delay:.5s}
.p404-glitch span::before,.p404-glitch span::after{content:attr(data-t);position:absolute;inset:0;opacity:.7}
.p404-glitch span::before{color:#8B7BFF;animation:p404-g1 2.6s steps(2) infinite}
.p404-glitch span::after{color:#2BB8FF;animation:p404-g2 2.6s steps(2) infinite}
.p404-zero{transform-origin:50% 60%}
@keyframes p404-flotte{50%{transform:translateY(-12px) rotate(-3deg)}}
@keyframes p404-g1{0%,86%,100%{transform:none;clip-path:inset(0 0 0 0);opacity:0}88%{transform:translate(-5px,2px);clip-path:inset(20% 0 55% 0);opacity:.8}92%{transform:translate(4px,-2px);clip-path:inset(60% 0 10% 0);opacity:.8}}
@keyframes p404-g2{0%,88%,100%{transform:none;opacity:0}90%{transform:translate(5px,-1px);clip-path:inset(40% 0 30% 0);opacity:.8}95%{transform:translate(-4px,2px);clip-path:inset(5% 0 70% 0);opacity:.8}}
.p404-rech{display:flex;gap:8px;max-width:520px;margin:18px auto 14px}
.p404-rech input{flex:1;min-width:0;font:inherit;font-size:16px;padding:12px 15px;border-radius:14px;border:2px solid var(--trait);background:var(--card);color:var(--ink)}
:root[data-skin="chasse"] .p404-rech input{background:var(--card2);border:1px solid var(--line)}
.p404-jeu{margin-top:30px}
.p404-arene{position:relative;height:150px;border:1.5px dashed var(--line);border-radius:18px;overflow:hidden}
.p404-bug{position:absolute;width:48px;height:48px;border-radius:50%;font-size:28px;line-height:48px;background:var(--card);border:1.5px solid var(--line);cursor:pointer;transition:left .45s cubic-bezier(.3,1.4,.5,1),top .45s cubic-bezier(.3,1.4,.5,1)}
.p404-bug:disabled{cursor:default;left:calc(50% - 24px)!important;top:calc(50% - 24px)!important}
@media (max-width:520px){.p404-rech{flex-direction:column}}
@media (prefers-reduced-motion:reduce){.p404-glitch span,.p404-glitch span::before,.p404-glitch span::after{animation:none}}
.t404{width:100%;border-collapse:collapse;font-size:14px}.t404 th{text-align:left;font-size:12px;color:var(--ink2);font-weight:600;padding:6px 8px;border-bottom:1px solid var(--line)}.t404 td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}