/* ============================================================================
   RCF · LOT 7 — CYCLODEX — STYLE
   ----------------------------------------------------------------------------
   Aucune direction artistique nouvelle : tout est exprimé avec les JETONS du
   thème (--panel, --edge, --ink, --dim, --faint, --hivis, --radius, --tap,
   --disp, --mono). Les repères sont écrits avec un repli (`var(--tap, 48px)`)
   pour rester valables dans un thème plus ancien.

   Deux registres, comme le cahier l'exige :
     · MÉTIERS          — hommage rétro : cadre d'écran, chiffres en chasse fixe,
                          liste dense, sélection franche. Le rétro est AUTOUR de
                          l'illustration, jamais dessus : les 55 visuels validés
                          restent nets.
     · CARRIÈRES et ACCOMPLISSEMENTS — RCF moderne et premium, sans rétro.
   ============================================================================ */

/* Écran plein format, comme l'accueil et la Bible. */
.wrap:has(#scCyclodex.on) header.top{display:none}
.cyclodex-wrap{padding-bottom:26px}

/* --- En-têtes ------------------------------------------------------------ */
.cy-head{display:flex;align-items:center;gap:12px;margin:2px 0 14px;flex-wrap:wrap}
.cy-head--home{display:block}
.cy-title{font-family:var(--disp);font-size:24px;line-height:1.1;letter-spacing:.02em;
  text-transform:uppercase;color:var(--ink);margin:2px 0 0}
.cy-title--big{font-size:28px;margin-top:2px}
.cy-sub{font-size:13px;color:var(--dim);margin:5px 0 0}
.cy-back{flex:0 0 auto}

/* --- Accueil : trois accès ------------------------------------------------ */
.cy-card{position:relative;display:block;width:100%;text-align:left;cursor:pointer;
  margin:0 0 12px;padding:15px 40px 15px 15px;color:var(--ink);
  border:1px solid var(--edge);border-radius:var(--radius,18px);
  background:var(--glassgrad,linear-gradient(165deg,rgba(18,47,70,.62),rgba(4,15,26,.82)))}
.cy-card:hover{border-color:var(--steel);transform:translateY(-1px)}
.cy-card:active{transform:scale(.99)}
.cy-card:focus-visible{outline:none;box-shadow:var(--shadow-focus,0 0 0 2px rgba(255,192,46,.24))}
.cy-card--jobs{padding-bottom:12px;border-color:rgba(255,192,46,.34)}
.cy-card-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.cy-card-t{font-family:var(--disp);font-size:19px;letter-spacing:.02em;text-transform:uppercase}
.cy-count{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--hivis)}
.cy-card-d{font-size:13px;line-height:1.45;color:var(--dim);margin:7px 0 0}
.cy-card-c{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--faint);font-size:18px}
.cy-pair{display:flex;gap:14px;flex-wrap:wrap;margin-top:5px}

.cy-thumbs{display:flex;gap:7px;margin-top:11px}
.cy-thumb{width:46px;height:46px;border-radius:10px;overflow:hidden;flex:0 0 46px;
  border:1px solid var(--edge);background:rgba(4,15,26,.5)}
.cy-thumb-i{width:100%;height:100%;object-fit:cover;display:block}
.cy-thumb--unknown{display:flex;align-items:center;justify-content:center;color:var(--faint)}
.cy-thumb--unknown svg{width:26px;height:26px}

.cy-mini{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:10px;padding-top:9px;
  border-top:1px solid var(--edge);font-size:12.5px;color:var(--dim)}
.cy-mini-n{font-family:var(--mono);color:var(--faint)}
.cy-mini-r{color:var(--ink)}
.cy-mini-s{color:var(--hivis)}

.cy-complete{margin-top:16px;padding:13px 14px;border-radius:var(--radius-sm,12px);
  border:1px solid rgba(255,192,46,.42);background:rgba(255,192,46,.07)}
.cy-complete-t{display:block;font-family:var(--disp);font-size:15px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--hivis)}
.cy-complete-d{display:block;font-size:12.5px;color:var(--dim);margin-top:4px}

/* ============================================================================
   MÉTIERS — LE DEX (cible de conception Lot 7.2)
   ----------------------------------------------------------------------------
   Un TERMINAL INDUSTRIEL à hauteur fixe : barre de console, fiche active,
   index. La grammaire vient du registre de collection — identité par le numéro,
   liste dense, sélection franche, inconnus à leur vraie place. Le vocabulaire
   reste RCF : bleu nuit, métal, jaune hivis, plaques, filets fins.

   La règle qui commande tout le reste : à 360 × 800, la fiche ET l'index
   tiennent dans le même écran. Le corps est donc une composition à hauteur
   contrainte, jamais une colonne qui s'allonge.

   Aucune couleur, aucune police hors jetons du thème.
   ============================================================================ */

/* La console occupe la hauteur utile. `--cy-chrome` retire les marges de la
   page : sans cela, l'index repasserait sous la ligne de flottaison. */
.cy-dex{
  /* Marges réelles de la page autour de la console, une fois les deux règles
     ci-dessous appliquées : 8 px + 18 px au-dessus, 10 px + 8 px en dessous.
     Les retirer est ce qui garantit que la console ENTIÈRE tient dans le
     viewport — c'est la condition pour que l'index soit visible sans défiler. */
  --cy-chrome:44px;
  height:min(744px,calc(100dvh - var(--cy-chrome)));
  min-height:600px;
  display:grid;
  grid-template-rows:46px minmax(0,1fr);
  overflow:hidden;
  border:1px solid var(--steel);
  border-radius:var(--radius-sm,12px);
  background:var(--panel2);
  box-shadow:var(--shadow,0 24px 70px -38px #000)}
.cyclodex-wrap:has(.cy-dex){padding-bottom:0}
/* Sur l'écran du registre, la page n'est plus qu'un cadre : les marges basses
   généreuses du jeu sont rendues à l'illustration et à l'index. La portée est
   strictement cet écran — dès que le joueur en sort, tout revient au thème. */
body:has(.cy-dex){padding-bottom:8px}
.wrap:has(.cy-dex){padding-bottom:10px}

/* --- Barre de console ----------------------------------------------------- */
.cy-dex-bar{position:relative;display:flex;align-items:center;gap:9px;min-height:46px;
  padding:0 10px 0 14px;border-bottom:1px solid var(--edge);background:var(--panel)}
.cy-dex-strip{position:absolute;inset:0 auto 0 0;width:4px;background:var(--hivis)}
.cy-dex-back{width:30px;height:30px;flex:0 0 30px;cursor:pointer;font-size:19px;line-height:1;
  color:var(--dim);border:1px solid var(--edge);border-radius:5px;background:var(--floor2)}
.cy-dex-back:hover{color:var(--ink);border-color:var(--steel)}
.cy-dex-back:focus-visible{outline:none;box-shadow:var(--shadow-focus,0 0 0 2px rgba(255,192,46,.35))}
.cy-dex-t{flex:1;min-width:0;font-family:var(--disp);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cy-dex-t i{font-style:normal;color:var(--faint);margin:0 5px}
.cy-dex-prog{flex:0 0 auto;font-family:var(--mono);font-size:14px;color:var(--dim)}
.cy-dex-prog b{font-size:18px;font-weight:700;color:var(--hivis)}
.cy-dex-prog i{font-style:normal;color:var(--faint);margin:0 2px}
.cy-dex-lamp{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:var(--steel);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.55)}
.cy-dex-lamp.is-full{background:var(--green);box-shadow:0 0 8px var(--green)}

/* --- Corps : fiche au-dessus, index en dessous --------------------------- */
.cy-dex-body{min-height:0;display:grid;grid-template-columns:1fr;
  grid-template-rows:minmax(330px,1.28fr) minmax(250px,.92fr)}
.cy-pane{min-width:0;min-height:0;overflow:hidden;padding:9px 10px 8px;
  border-bottom:1px solid var(--edge)}
.cy-fiche{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:6px}

/* Plaque d'identité, AVANT l'image : le numéro est l'identité de l'entrée. */
.cy-idplate{position:relative;grid-row:1;margin:0;padding:3px 0 5px 11px;
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:9px;align-items:end}
.cy-idplate-bar{position:absolute;inset:2px auto 3px 0;width:3px;background:var(--hivis)}
.cy-idplate-no{grid-row:1 / span 2;align-self:center;min-width:58px;
  font-family:var(--mono);font-weight:700;font-size:21px;line-height:1;
  letter-spacing:.06em;color:var(--hivis)}
.cy-idplate-n{grid-column:2;font-family:var(--disp);font-size:21px;line-height:1.02;
  letter-spacing:.02em;text-transform:uppercase;color:var(--ink);margin:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cy-idplate-s{grid-column:2;font-family:var(--mono);font-size:9.5px;line-height:1.1;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:2px 0 0}

/* L'illustration domine : elle prend toute la hauteur disponible du panneau.
   `max-width:100%` la garde dans la colonne — aucune barre horizontale. */
.cy-screen{grid-row:2;position:relative;width:auto;height:100%;max-width:100%;
  aspect-ratio:1/1;justify-self:center;margin:0;padding:5px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  border:1px solid var(--steel);border-radius:7px;background:var(--floor);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5),inset 0 10px 30px -18px rgba(0,0,0,.9)}
.cy-screen::after{content:"";position:absolute;inset:5px;pointer-events:none;
  border:1px solid var(--edge)}
.cy-screen-i{width:100%;height:100%;object-fit:contain;display:block}
.cy-screen-bolts{position:absolute;inset:0;pointer-events:none;z-index:2}
.cy-screen-bolts::before,.cy-screen-bolts::after{content:"";position:absolute;width:5px;height:5px;
  border-radius:50%;background:var(--steel);box-shadow:inset 0 1px 1px rgba(0,0,0,.6)}
.cy-screen-bolts::before{top:6px;left:6px}
.cy-screen-bolts::after{top:6px;right:6px}
.cy-unknown{display:flex;align-items:center;justify-content:center;color:var(--faint);opacity:.42}

/* Faits : UNE ligne technique, pas trois cartes. */
.cy-facts{grid-row:3;display:flex;align-items:center;gap:0;margin:0;padding:5px 7px;
  overflow-x:auto;white-space:nowrap;font-family:var(--mono);font-size:10px;color:var(--ink);
  border:1px solid var(--edge);border-radius:6px;background:var(--floor2)}
.cy-fact{display:inline-flex;align-items:baseline;gap:4px;padding:0 6px;
  border-right:1px solid var(--edge)}
.cy-fact:first-child{padding-left:0}
.cy-fact:last-child{border-right:0;padding-right:0}
.cy-fact i{font-style:normal;font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}

/* Description : deux à trois lignes visibles, défilement interne au besoin —
   elle ne pousse jamais l'index hors de l'écran. */
.cy-fiche-d{grid-row:4;max-height:4.35em;overflow:auto;margin:0;
  font-family:var(--body,inherit);font-size:11.5px;line-height:1.45;color:var(--dim)}

/* --- Index ---------------------------------------------------------------- */
.cy-index{min-width:0;min-height:0;display:grid;grid-template-rows:34px 36px minmax(0,1fr);
  background:var(--floor2);border-top:0}
.cy-index-h{display:flex;align-items:center;gap:10px;min-width:0;min-height:34px;padding:0 10px;
  border-bottom:1px solid var(--edge);background:var(--panel)}
.cy-index-h>span:first-child{font-family:var(--disp);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cy-index-c{flex:0 0 auto;margin-left:auto;font-family:var(--mono);font-size:9.5px;color:var(--faint)}

/* Filtres : outils de l'index, hauteur contenue. */
.cy-dex-filters{display:flex;align-items:center;min-width:0;height:36px;padding:3px 8px;gap:5px;
  overflow:hidden;background:var(--panel2);border-bottom:1px solid var(--edge)}
.cy-fsel{flex:1 1 60px;min-width:0;min-height:29px;height:29px;padding:4px 22px 4px 8px;cursor:pointer;
  border:1px solid var(--edge);border-radius:5px;background-color:var(--floor2);
  color:var(--dim);font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;
  text-overflow:ellipsis;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%237890a5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;
  background-position:right 6px center;background-size:10px 6px}
.cy-fsel:focus{outline:none;border-color:var(--hivis);color:var(--ink)}
.cy-fseg{display:flex;flex:0 0 auto;gap:3px}
.cy-fseg-b{min-height:29px;height:29px;padding:4px 7px;cursor:pointer;white-space:nowrap;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--edge);border-radius:5px;background:var(--panel2);color:var(--dim)}
.cy-fseg-b.is-on{border-color:var(--hivis);color:var(--floor);background:var(--hivis)}
.cy-fseg-b:focus-visible{outline:none;box-shadow:var(--shadow-focus,0 0 0 2px rgba(255,192,46,.35))}

/* La liste est le seul élément qui défile. */
.cy-index-l{position:relative;min-height:0;max-height:none;overflow-y:auto;
  overscroll-behavior:contain;padding:3px 5px 5px;
  scrollbar-width:thin;scrollbar-color:var(--hivis) var(--panel2)}
.cy-index-l::-webkit-scrollbar{width:8px}
.cy-index-l::-webkit-scrollbar-track{background:var(--panel2);border-left:1px solid var(--edge)}
.cy-index-l::-webkit-scrollbar-thumb{background:var(--hivis);border:2px solid var(--panel2);border-radius:4px}

/* Une ligne = une entrée du registre. */
.cy-e{position:relative;display:grid;grid-template-columns:22px 38px minmax(0,1fr);
  align-items:center;gap:6px;width:100%;height:39px;min-height:39px;padding:0 22px 0 7px;
  text-align:left;cursor:pointer;background:transparent;color:var(--ink);
  border:1px solid transparent;border-bottom-color:var(--edge);border-radius:3px}
.cy-e:hover{background:rgba(255,255,255,.045)}
.cy-e .cy-wheel{grid-column:1;grid-row:1}
.cy-e-no{grid-column:2;grid-row:1;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--dim)}
.cy-e-n{grid-column:3;grid-row:1;min-width:0;font-size:12px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cy-e-mark{position:absolute;left:0;top:4px;bottom:4px;width:3px;border-radius:0;background:transparent}
.cy-e-cur{position:absolute;right:7px;top:50%;transform:translateY(-50%);font-size:13px;
  color:var(--faint);opacity:0}
.cy-e:focus-visible{outline:none;box-shadow:var(--shadow-focus,0 0 0 2px rgba(255,192,46,.35))}

/* Sélection : cadre, rail latéral, numéro en accent et curseur — jamais la
   seule couleur. */
.cy-e.is-sel{border-color:var(--hivis);
  background:linear-gradient(90deg,var(--panel),var(--panel2));
  box-shadow:inset 3px 0 0 var(--hivis)}
.cy-e.is-sel .cy-e-mark{background:var(--hivis)}
.cy-e.is-sel .cy-e-no,.cy-e.is-sel .cy-e-cur{color:var(--hivis)}
.cy-e.is-sel .cy-e-cur{opacity:1}

/* Inconnu : intrigant, jamais désactivé. */
.cy-e.is-unknown{opacity:.78}
.cy-e.is-unknown .cy-e-n{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--dim)}
.cy-e.is-unknown .cy-wheel{opacity:.62}
.cy-fiche.is-unknown .cy-screen{border-style:solid}
.cy-fiche.is-unknown .cy-unknown{opacity:.55}
.cy-fiche.is-unknown .cy-fiche-d{font-style:normal;color:var(--dim)}

/* La roue de vélo remplace la Pokéball : creuse tant que le métier est inconnu. */
.cy-wheel{display:inline-flex;flex:0 0 auto;color:var(--faint);opacity:.62}
.cy-wheel.is-on{color:var(--hivis);opacity:1}
.cy-e.is-sel .cy-wheel{opacity:1}

/* --- Très petits mobiles -------------------------------------------------- */
@media (max-width:380px){
  .cy-dex{height:calc(100dvh - var(--cy-chrome));min-height:600px}
  .cy-dex-body{grid-template-rows:minmax(315px,1.2fr) minmax(245px,.95fr)}
  .cy-idplate-no{font-size:19px;min-width:54px}
  .cy-idplate-n{font-size:19px}
  .cy-e{height:38px;min-height:38px}
}

/* --- Desktop et tablette : le vrai split fiche / index -------------------- */
@media (min-width:780px){
  .cy-dex{height:min(760px,calc(100dvh - var(--cy-chrome)))}
  .cy-dex-body{grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);grid-template-rows:1fr}
  .cy-pane{border-bottom:0;border-right:1px solid var(--edge);padding:14px}
  .cy-screen{max-height:470px}
  .cy-index{grid-template-rows:38px 40px minmax(0,1fr)}
  .cy-index-h{min-height:38px}
  .cy-dex-filters{height:40px}
  .cy-e{height:42px;min-height:42px}
}

/* Tris et onglets des autres rubriques (Carrières, Accomplissements) : ils
   gardent le langage moderne RCF, pas celui du registre. */
.cy-seg{display:flex;gap:6px;flex-wrap:wrap}
.cy-seg-b{min-height:38px;padding:8px 12px;cursor:pointer;font-size:12.5px;
  border:1px solid var(--edge);border-radius:999px;background:rgba(8,24,39,.54);color:var(--dim)}
.cy-seg-b.is-on{border-color:var(--hivis);color:var(--ink);background:rgba(255,192,46,.13)}
.cy-seg-b:focus-visible{outline:none;box-shadow:var(--shadow-focus,0 0 0 2px rgba(255,192,46,.24))}

/* --- MES CARRIÈRES : moderne, premium, aucun rétro ----------------------- */
.cy-sorts{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.cy-career{position:relative;display:block;width:100%;text-align:left;cursor:pointer;
  margin:0 0 10px;padding:14px 15px;color:var(--ink);
  border:1px solid var(--edge);border-radius:var(--radius-sm,12px);
  background:linear-gradient(180deg,rgba(19,40,61,.86),rgba(7,22,37,.92))}
.cy-career:hover{border-color:var(--steel);transform:translateY(-1px)}
.cy-career:focus-visible{outline:none;box-shadow:var(--shadow-focus,0 0 0 2px rgba(255,192,46,.24))}
.cy-career-h{display:flex;align-items:center;gap:9px}
.cy-career-n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.cy-career-y{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--dim)}
.cy-fav{color:var(--hivis);font-size:13px}
.cy-career-r{font-family:var(--disp);font-size:17px;letter-spacing:.02em;margin-top:4px}
.cy-career-s{font-size:13px;color:var(--hivis);margin-top:2px}
.cy-career-a{font-size:12.5px;color:var(--dim);margin-top:3px}
.cy-career-k{font-size:12px;color:var(--faint);margin-top:4px}

.cy-detail{padding:15px}
.cy-detail-h{display:flex;align-items:flex-start;gap:12px}
.cy-detail-y{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;color:var(--faint);margin:0}
.cy-detail-r{font-family:var(--disp);font-size:20px;letter-spacing:.02em;margin:3px 0 0}
.cy-fav-b{margin-left:auto;width:40px;height:40px;flex:0 0 40px;cursor:pointer;font-size:17px;
  border:1px solid var(--edge);border-radius:10px;background:rgba(8,24,39,.54);color:var(--faint)}
.cy-fav-b.is-on{color:var(--hivis);border-color:var(--hivis)}
.cy-kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:13px}
@media (min-width:520px){ .cy-kpis{grid-template-columns:1fr 1fr 1fr} }
.cy-kpis--rec{grid-template-columns:1fr}
@media (min-width:520px){ .cy-kpis--rec{grid-template-columns:1fr 1fr} }
.cy-detail-amb{margin-top:13px;padding-top:11px;border-top:1px solid var(--edge);
  display:flex;flex-direction:column;gap:2px}
.cy-detail-amb-t{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.cy-detail-amb-v{font-size:15px;color:var(--ink)}
.cy-detail-amb-s{font-size:12.5px;color:var(--hivis)}

/* Parcours : reconstruit depuis les seuls identifiants archivés. */
.cy-path{display:flex;align-items:stretch;gap:8px;overflow-x:auto;padding:2px 2px 8px;
  overscroll-behavior-x:contain}
.cy-step{flex:0 0 96px;cursor:pointer;padding:8px;text-align:center;color:var(--ink);
  border:1px solid var(--edge);border-radius:var(--radius-sm,12px);background:rgba(8,24,39,.54)}
.cy-step:hover{border-color:var(--hivis)}
.cy-step:focus-visible{outline:none;box-shadow:var(--shadow-focus,0 0 0 2px rgba(255,192,46,.24))}
.cy-step-i{display:block;width:100%;aspect-ratio:1/1;overflow:hidden;border-radius:8px;
  background:rgba(4,15,26,.5);display:flex;align-items:center;justify-content:center}
.cy-step-img{width:100%;height:100%;object-fit:cover;display:block}
.cy-step-i .cy-unknown svg{width:38px;height:38px}
.cy-step-n{display:block;font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:6px}
.cy-step-l{display:block;font-size:11.5px;line-height:1.25;margin-top:2px;min-height:2.5em}

.cy-chips{display:flex;flex-wrap:wrap;gap:7px}
.cy-chip{padding:8px 12px;border:1px solid var(--edge);border-radius:999px;
  background:rgba(8,24,39,.54);font-size:12.5px;color:var(--ink)}

/* --- ACCOMPLISSEMENTS ---------------------------------------------------- */
.cy-award{padding:13px 14px;margin:0 0 9px;border:1px solid var(--edge);
  border-radius:var(--radius-sm,12px);background:rgba(8,24,39,.42);opacity:.52}
.cy-award.is-on{opacity:1;border-color:rgba(255,192,46,.42);
  background:linear-gradient(180deg,rgba(24,48,71,.9),rgba(8,24,39,.92))}
.cy-award-t{font-family:var(--disp);font-size:16px;letter-spacing:.02em;color:var(--ink)}
.cy-award-d{font-size:12.5px;line-height:1.45;color:var(--dim);margin-top:3px}
.cy-award-f{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--hivis);margin-top:5px}

/* --- LOT 9 · Quêtes et Défis dans Accomplissements ------------------------
   Les deux nouveaux onglets réutilisent `.cy-award` : ce sont les mêmes
   cartes, il n'y avait aucune raison d'en dessiner d'autres. Seuls trois
   éléments manquaient : l'intertitre de famille, la pastille de difficulté
   et la ligne d'objectif d'un Défi. */
.cy-fam{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin:16px 0 8px;padding:0 2px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.cy-fam:first-child{margin-top:2px}
.cy-fam-n{font-size:10.5px;letter-spacing:.1em;color:var(--hivis)}
.cy-diff{display:inline-block;margin-left:7px;padding:2px 7px;border-radius:999px;
  border:1px solid var(--edge);font-family:var(--mono);font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;vertical-align:middle;color:var(--dim)}
.cy-diff--facile{border-color:rgba(120,200,140,.45);color:rgba(150,215,168,.95)}
.cy-diff--normale{border-color:rgba(120,170,220,.45);color:rgba(155,195,235,.95)}
.cy-diff--difficile{border-color:rgba(255,192,46,.45);color:var(--hivis)}
.cy-diff--extreme{border-color:rgba(232,120,96,.5);color:rgba(244,152,130,.98)}
.cy-award-o{font-size:12px;line-height:1.4;color:var(--ink);opacity:.86;margin-top:5px}

/* --- LOT 9 · l'en-tête de collection des Quêtes ---------------------------
   `.cy-fseg-b` existe déjà pour l'index des métiers : le filtre Toutes /
   Terminées / À faire le réutilise tel quel, il n'y avait aucune raison d'en
   dessiner un second. Seul l'en-tête X / 35 est nouveau. */
.cy-coll{margin:2px 0 12px;padding:14px 15px;border:1px solid rgba(255,192,46,.30);
  border-radius:var(--radius-sm,12px);background:rgba(255,192,46,.05)}
.cy-coll-n{font-family:var(--disp);font-size:30px;line-height:1;color:var(--hivis)}
.cy-coll-t{font-size:17px;color:var(--dim)}
.cy-coll-l{font-size:12px;line-height:1.4;color:var(--dim);margin-top:5px}
.cy-coll-bar{margin-top:10px;height:5px;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.10)}
.cy-coll-bar>i{display:block;height:100%;background:var(--hivis);
  transition:width .28s ease}
.cy-filters{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}

/* --- Bloc de fin de carrière --------------------------------------------- */
.cy-end{margin:14px 0 0;padding:14px 15px;border:1px solid rgba(255,192,46,.38);
  border-radius:var(--radius-sm,12px);background:rgba(255,192,46,.06)}
.cy-end-t{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--hivis);margin:0 0 9px}
.cy-end-l{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px;color:var(--ink)}
.cy-end-p{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--dim);margin:9px 0 0}
.cy-end-th{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap}
.cy-end-th .cy-thumb{width:40px;height:40px;flex-basis:40px}

/* --- Toast de découverte -------------------------------------------------- */
.cy-toast{position:fixed;left:50%;bottom:22px;z-index:95;transform:translate(-50%,14px);
  opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease;
  min-width:min(90vw,330px);padding:12px 16px;text-align:center;
  border:1px solid rgba(255,192,46,.5);border-radius:var(--radius-sm,12px);
  background:linear-gradient(180deg,rgba(20,44,66,.98),rgba(6,20,34,.98));
  box-shadow:0 24px 54px -28px rgba(0,0,0,.95)}
.cy-toast.on{opacity:1;transform:translate(-50%,0)}
.cy-toast-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--hivis)}
.cy-toast-v{font-family:var(--disp);font-size:16px;letter-spacing:.03em;color:var(--ink);margin-top:5px}
.cy-toast-d{font-size:11.5px;color:var(--dim);margin-top:3px}

/* --- Confort mobile ------------------------------------------------------- */
@media (max-width:400px){
  .cy-title{font-size:22px}
  .cy-title--big{font-size:26px}
  .cy-card-t{font-size:17px}
}

/* --- Réduction de mouvement respectée ------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .cy-toast{transition:none}
  .cy-card:hover,.cy-career:hover{transform:none}
}