/* Skinator WAKFU — interface. Trois colonnes : le personnage a gauche, la
   scene au centre, l'equipement a droite. Vanilla, comme le reste du site. */

:root {
    --fond: #0b111d;
    --panneau: #111a2b;
    --panneau-clair: #16233a;
    --bord: #24334d;
    --bord-vif: #3b82f6;
    --texte: #e2e8f0;
    --attenue: #8296b4;
    --vert: #22c55e;
    --rose: #ec4899;
    --bleu: #3b82f6;
}

* { box-sizing: border-box; }
h1, h2, h3 { font-family: 'Uncial Antiqua', 'Rajdhani', serif; font-weight: 400; }
html, body { height: 100%; overflow: hidden; }

/* ── Cadre fixe ─────────────────────────────────────────────────────────────
   Toute l'interface est composee a une taille unique, puis reduite ou agrandie
   d'un seul bloc pour tenir dans la fenetre. Rien ne se reorganise selon la
   place disponible : un 4K, un portable, un zoom navigateur donnent la meme
   image, aux memes proportions, aux memes dimensions relatives. */
/* Hauteur de reference de la zone de travail : le 1080 de l'ecran moins
   l'entete, qui reste pleine largeur et hors du cadre. */
:root { --sk-cadre-l: 1920px; --sk-cadre-h: 1041px; --sk-echelle: 1; }
#sk-cadre {
    /* « zoom » cree un contexte d empilement : sans z-index ici, celui du
       canevas ne vaudrait qu a l interieur du cadre, sous le bandeau. */
    position: relative; z-index: 20;
    margin: auto;
    width: 100%; height: var(--sk-cadre-h);
    display: flex; flex-direction: column;
    /* zoom plutot que transform : il met a l'echelle la mise en page elle-meme,
       et non le seul rendu. La boite occupe donc sa taille reelle — le cadre se
       centre tout seul, et les elements colles comme l'entete restent alignes
       dessus. Un scale() les aurait laisses raisonner sur la taille d'origine. */
    zoom: var(--sk-echelle);
}
body {
    margin: 0;
    display: flex; flex-direction: column;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
    font: 400 15px/1.45 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
    color: var(--texte);
    background: var(--fond);
    position: relative;
}
/* Fond : une vue du jeu, adoucie et assombrie pour que tout ce qui se
   pose dessus reste lisible. */
body::before {
    content: '';
    position: fixed; inset: 0; z-index: -1;
    background:
        radial-gradient(1600px 1000px at 50% 0%, rgba(8, 16, 26, .46) 0%, rgba(6, 11, 19, .68) 72%),
        url('fond-vitre.webp') center / cover no-repeat;
}
button, select, input { font: inherit; color: inherit; }
h1, h2 { margin: 0; }

/* ── Entete ─────────────────────────────────────────────────────────────── */
.sk-bouton-vert {
    padding: 9px 16px; border: 1px solid rgba(160, 255, 200, .45); border-radius: 9px;
    cursor: pointer; font-weight: 700; color: #ffffff;
    background: linear-gradient(180deg, #1f9d5c 0%, #137a45 100%);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}
.sk-bouton-vert:hover { filter: brightness(1.08); }
.sk-bouton-vert { padding: 7px 13px; }

/* Choix du socle, deplie sous le bouton d’export. Les deux exports —
   l'image fixe et le GIF du cycle — sont empiles l'un sous l'autre. */
/* PNG et GIF l'un sous l'autre : ils portent des mots de longueurs
   differentes, on impose donc la meme largeur plutot que de la laisser
   suivre le texte. */
.sk-exports { display: inline-flex; flex-direction: column; gap: 5px; align-items: stretch; }
.sk-export { position: relative; display: block; }
.sk-export > .sk-bouton-vert { display: block; width: 100%; text-align: center; }
.sk-export-choix {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 5;
    display: flex; flex-direction: column; gap: 4px; padding: 6px;
    border: 1px solid var(--bord); border-radius: 10px; background: var(--panneau);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
}
.sk-export-choix[hidden] { display: none; }
.sk-export-choix button {
    padding: 7px 12px; white-space: nowrap; text-align: left;
    border: 1px solid var(--bord); border-radius: 8px;
    background: var(--panneau-clair); color: var(--texte); cursor: pointer;
}
.sk-export-choix button:hover { border-color: var(--bord-vif); }

/* ── Grille principale ──────────────────────────────────────────────────── */
.sk-grille-principale {
    flex: 1; min-height: 0;
    display: grid;
    /* Le personnage et sa dalle tiennent dans un carre : au-dela d'une certaine
       largeur la scene ne gagne rien et se remplit de vide. On la plafonne donc,
       et tout l'espace restant va aux deux colonnes qui, elles, en profitent. */
    /* Proportions de la maquette : les deux colonnes ont une largeur fixe, et
       toute la place restante revient a la scene. */
    grid-template-columns: 400px minmax(420px, 1fr) 540px;
    gap: 14px; padding: 40px;
}
.sk-colonne { display: flex; flex-direction: column; min-height: 0; }
.sk-colonne > .sk-bloc {
    position: relative; z-index: 2;
    flex: 1; min-height: 0; display: flex; flex-direction: column;
    gap: 10px; overflow-y: auto;
}
.sk-bloc {
    padding: 12px 14px; border-radius: 16px;
    border: 1px solid rgba(86, 120, 150, .32);
    background: linear-gradient(180deg, rgba(14, 24, 38, .62) 0%, rgba(8, 15, 25, .52) 100%);
    backdrop-filter: blur(14px) saturate(1.2);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .14),
        0 14px 32px rgba(0, 0, 0, .38);
}
@supports not (backdrop-filter: blur(1px)) {
    .sk-bloc { background: linear-gradient(180deg, rgba(14, 24, 38, .92), rgba(8, 15, 25, .88)); }
}
.sk-bloc h2 {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 10px; font-size: 19px; font-weight: 700;
}
.sk-bloc h2 i {
    display: grid; place-items: center;
    width: 20px; height: 20px; border-radius: 6px;
    font: 700 11px/1 system-ui; font-style: normal;
    color: #05210f; background: var(--vert);
}
.sk-bloc h3 {
    color: #ffffff;
    display: flex; align-items: center; gap: 6px;
    margin: 2px 0 0; font-size: 17px; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase;
}
.sk-bloc h2 { margin-bottom: 0; }
.hint { margin: 0; font-size: 16px; color: #dbe6f2; }

/* Palette : les couleurs mises de cote, prises en main d’un clic. */
.sk-palette { display: flex; flex-wrap: wrap; gap: 6px; }
.sk-favori {
    width: 26px; height: 26px; padding: 0; cursor: grab;
    border: 1px solid rgba(255, 255, 255, .2); border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 6px rgba(0, 0, 0, .35);
}
.sk-favori:hover { border-color: var(--bord-vif); transform: translateY(-1px); }
.sk-favori.actif { border-color: var(--vert); box-shadow: 0 0 12px rgba(34, 197, 94, .5); }
.sk-favori:active { cursor: grabbing; }

/* ── Genre ──────────────────────────────────────────────────────────────── */
.sk-genres { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Coiffures : une ligne posee sur le fond, en haut de la scene, hors des
   panneaux. Elle defile horizontalement quand il y en a beaucoup. */
.sk-coiffures {
    flex: 1; min-width: 0;
    display: flex; gap: 6px; padding-bottom: 2px;
}
.sk-coiffures[hidden] { display: none; }
.sk-coiffures .sk-apparence {
    flex: none; width: 54px; height: 54px; border-radius: 10px;
    background: rgba(9, 16, 26, .55); backdrop-filter: blur(8px);
}
.sk-coiffures .sk-apparence img { object-position: 50% 50%; }
.sk-genres button {
    padding: 9px; border: 1px solid var(--bord); border-radius: 9px;
    background: var(--panneau-clair); cursor: pointer; font-weight: 600;
}
.sk-genres button:hover { border-color: var(--bord-vif); }
.sk-genres button[data-genre="male"].actif { border-color: var(--bleu); background: #1e3a8a; color: #dbeafe; }
.sk-genres button[data-genre="female"].actif { border-color: var(--rose); background: #831843; color: #fce7f3; }

.sk-rangee-corps { display: flex; align-items: center; gap: 10px; }
.sk-rangee-corps .sk-apparences { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.sk-rangee-corps .sk-apparence {
    flex: none; width: 58px; height: 74px; border-radius: 10px;
    background: rgba(9, 16, 26, .55); backdrop-filter: blur(8px);
}

/* ── Classes ────────────────────────────────────────────────────────────── */
/* L'illustration seule, sans nom ni carte : plus lisible et bien plus compact. */
.sk-classes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.sk-classe {
    display: grid; place-items: center; padding: 0;
    border: 2px solid transparent; border-radius: 10px;
    background: none; cursor: pointer;
}
.sk-classe img {
    width: 100%; aspect-ratio: 1; object-fit: contain;
    filter: grayscale(.45) brightness(.8); transition: filter 120ms ease;
}
.sk-classe:hover img { filter: none; }
.sk-classe.actif { border-color: var(--vert); background: #052e1a; }
.sk-classe.actif img { filter: none; }

/* ── Vignettes (apparence, coiffure) ────────────────────────────────────── */
.sk-vignettes { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.sk-vignettes[hidden] { display: none; }
.sk-vignettes .sk-apparence { width: auto; height: auto; aspect-ratio: 1; border-radius: 7px; }
.sk-vignettes .sk-apparence img { object-position: 50% 50%; }
.sk-vignette {
    min-width: 38px; padding: 7px 10px;
    border: 1px solid var(--bord); border-radius: 9px;
    background: var(--panneau-clair); cursor: pointer;
}
.sk-vignette:hover { border-color: var(--bord-vif); }
.sk-vignette.actif { border-color: var(--vert); background: #052e1a; }

/* ── Scene ──────────────────────────────────────────────────────────────── */
.sk-scene {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; gap: 10px; min-height: 0;
    padding: 4px 6px; border: 0; background: none;
}
.sk-poses { display: flex; align-items: flex-start; gap: 10px; justify-content: flex-end; }

/* Poses : au bas de la scene, centrees entre les fleches de rotation. */
.pose-group {
    /* Decale de la demi-largeur du bouton d'enregistrement, qui occupe le coin
       droit : centre sur la scene, le groupe passait dessous des que les
       vignettes de variante etaient la — et leur place est reservee meme
       lorsqu'elles sont masquees. */
    position: absolute; left: calc(50% - 95px); bottom: 3%; z-index: 3;
    transform: translateX(-50%);
    display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; white-space: nowrap;
}
.pose-group .sf-bouton { padding: 9px 16px; font-size: 15px; border-radius: 11px; font-weight: 700; }
.pose-group .sf-bouton-vert, .pose-group .sf-bouton.actif {
    color: #ffffff; border: 1px solid rgba(160, 255, 200, .5);
    background: linear-gradient(180deg, #23a765 0%, #14824a 100%);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
    box-shadow: 0 8px 20px rgba(20, 130, 74, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.pose-group .sf-bouton-vitre { color: #ffffff; background: rgba(8, 15, 25, .78); }
.pose-group .sf-bouton svg { width: 16px; height: 16px; }
.pose-variantes { display: inline-flex; gap: 8px; }
.pose-variantes[hidden] { display: none; }
/* Chaque variante montre son attente : l’image dit ce que le chiffre
   ne disait pas. */
.pose-variantes button {
    width: 84px; height: 84px; padding: 3px; cursor: pointer;
    border: 1px solid rgba(86, 120, 150, .4); border-radius: 12px;
    background: rgba(9, 16, 26, .6); backdrop-filter: blur(8px);
}
.pose-variantes button:hover { border-color: var(--bord-vif); }
.pose-variantes button.actif { border-color: var(--vert); box-shadow: 0 0 14px rgba(34, 197, 94, .4); }
.pose-variantes img { width: 100%; height: 100%; object-fit: contain; }
.sk-outils-scene { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.sk-outils-scene button {
    min-width: 34px; padding: 7px 11px;
    border: 1px solid rgba(140, 175, 210, .35); border-radius: 9px;
    background: rgba(8, 15, 25, .78); color: #ffffff; cursor: pointer;
    font-weight: 600;
}
.sk-outils-scene button:hover { border-color: var(--vert); color: #ffffff; }
.sk-outils-scene output {
    min-width: 52px; text-align: center; font-size: 13px;
    color: #ffffff; font-weight: 600;
}

.pose-group { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; }
.pose-group button {
    padding: 7px 14px; border: 1px solid var(--bord); border-radius: 9px;
    background: var(--panneau-clair); cursor: pointer; font-weight: 600;
}
.pose-group button:hover { border-color: var(--bord-vif); }
.pose-group button.actif { border-color: var(--vert); background: var(--vert); color: #05210f; }
/* En colonne, le long du bord gauche de la scene et dans le prolongement
   des apparences : la ou le regard descend deja. En bas avec « Statique »
   et « Animé », elles empietaient sur les boutons d enregistrement. */
.pose-variantes {
    /* « top » est pose par placerColonnePoses() : les rangees du haut
       changent de hauteur selon la classe, et une valeur figee laissait
       la colonne chevaucher les apparences ou flotter dans le vide. */
    position: absolute; left: 6px; top: 228px; z-index: 4;
    display: flex; flex-direction: column; gap: 6px; margin: 0;
}
.pose-variantes[hidden] { display: none; }
.pose-variantes button { padding: 7px 11px; min-width: 34px; }

.canvas-wrap {
    position: relative; flex: 1 1 auto; min-height: 0;
    aspect-ratio: 1; width: auto; max-width: 100%; margin: 0 auto;
    display: grid; place-items: center; overflow: visible;
    background: none;
}
/* Le canevas deborde de sa case, de 70 %, et passe derriere les panneaux :
   les arrivees venant de loin ne sont plus tranchees par son bord. Le zoom du
   rendu est divise d'autant, le personnage garde donc sa taille. */
#sk-cadre .canvas-wrap canvas {
    /* Au-dessus de tout, bandeau compris : une arrivee traverse l ecran par
       dessus l interface. Le canevas est transparent et ne prend aucun clic,
       il ne gene donc rien. */
    z-index: 30;
    /* Taille et centrage poses en pixels par le moteur : la case n'est pas
       carree, un pourcentage y donnait un facteur different de celui du zoom,
       et la grille ne recentre pas un enfant plus grand que sa case. */
    position: absolute; left: 50%; top: 50%;
    max-width: none; max-height: none;
    pointer-events: none;
}
#piedestal { position: absolute; pointer-events: none; z-index: 0; }
#piedestal[hidden] { display: none; }
#skin-canvas { transition: opacity 180ms ease; }

/* Enregistrement : bouton pose sous la fleche de droite. */
.sk-sauver {
    position: absolute; right: 3%; bottom: 3%; z-index: 4;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 11px 20px; border-radius: 12px; cursor: pointer;
    font-size: 15px; font-weight: 700; color: #ffffff;
    border: 1px solid rgba(160, 255, 200, .5);
    background: linear-gradient(180deg, #23a765 0%, #14824a 100%);
    box-shadow: 0 10px 24px rgba(20, 130, 74, .4), inset 0 1px 0 rgba(255, 255, 255, .25);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
    transition: transform 140ms ease, box-shadow 140ms ease;
}
.sk-sauver svg { width: 18px; height: 18px; fill: currentColor; }
.sk-sauver:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(20, 130, 74, .5); }
.sk-sauver:disabled { opacity: .6; cursor: default; transform: none; }
.sk-sauver.fait { background: linear-gradient(180deg, #2fbf78 0%, #189a58 100%); }

/* Rotation : deux chevrons poses au sol, de part et d’autre du personnage.
   Ils flottent sur la scene, sans cadre, comme dans l'ecran de creation. */
.sk-fleche {
    position: absolute; bottom: 16%; z-index: 2;
    width: 74px; padding: 6px; border: 0; background: none; cursor: pointer;
    opacity: .85; transition: opacity 140ms ease, transform 140ms ease;
}
.sk-fleche svg { display: block; width: 100%; height: auto; }
.sk-fleche path { fill: #eef4ff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .75)); }
.sk-fleche:hover { opacity: 1; }
.sk-fleche-gauche { left: 4%; }
.sk-fleche-droite { right: 4%; transform: scaleX(-1); }
.sk-fleche-gauche:hover { transform: translateX(-3px); }
.sk-fleche-droite:hover { transform: scaleX(-1) translateX(-3px); }
.sk-note { margin: 0; font-size: 11px; color: var(--attenue); text-align: center; }

/* ── Equipement ─────────────────────────────────────────────────────────── */
.sk-emplacements { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
/* La bascule du masque coiffe la scene. */
/* Sous la commande de zoom, contre le bord droit : le bouton suivait les
   apparences et se retrouvait au milieu de la rangee, loin de ce qu il fait. */
.sk-bascule-masque { display: flex; flex: none; margin-left: auto; }
.sk-bascule-masque[hidden] { display: none; }
.sk-sans-masque {
    padding: 7px 14px; white-space: nowrap;
    border: 1px solid rgba(140, 175, 210, .35); border-radius: 9px;
    background: rgba(8, 15, 25, .78); color: #ffffff;
    cursor: pointer; font-size: 13px; font-weight: 600;
}
/* Emplacement neutralise par un costume : visible, mais sans effet. */
.sk-emplacement.inactif { opacity: .4; }
.sk-emplacement.inactif img { filter: grayscale(1); }

.sk-sans-masque:hover { border-color: var(--vert); }
.sk-sans-masque.actif { border-color: var(--vert); box-shadow: 0 0 12px rgba(34, 197, 94, .35); }
.sk-emplacement {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 7px 2px; border: 1px solid var(--bord); border-radius: 9px;
    background: var(--panneau-clair); cursor: pointer;
}
/* Meme gabarit pour l icone de categorie et la vignette portee : sinon la
   rangee grandit de quelques pixels et toute la colonne se decale. */
.sk-emplacement img { width: 32px; height: 32px; object-fit: contain; }
.sk-emplacement span { font-size: 9px; color: var(--attenue); }
.sk-emplacement:hover { border-color: var(--bord-vif); }
.sk-emplacement.actif { border-color: var(--vert); background: #052e1a; }
.sk-emplacement.actif span { color: var(--texte); }
.sk-emplacement.equipe { border-color: var(--vert); }


.sk-barre-recherche { display: flex; gap: 7px; align-items: center; flex: 1 1 0; min-width: 0; }
.sk-barre-recherche input[type="search"] {
    flex: 1; min-width: 0; padding: 8px 11px;
    border: 1px solid var(--bord); border-radius: 9px; background: var(--panneau);
}
.sk-barre-recherche input:focus, .sk-barre-recherche select:focus { outline: 0; border-color: var(--bord-vif); }
.sk-barre-recherche select {
    padding: 8px 9px; border: 1px solid var(--bord); border-radius: 9px; background: var(--panneau);
}
.text-button {
    padding: 0; border: 0; background: none; cursor: pointer;
    color: #60a5fa; font-size: 12px;
}
.text-button:hover { text-decoration: underline; }

.sk-filtres-couleur {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    padding: 8px 10px; border: 1px solid var(--bord); border-radius: 10px;
    background: var(--panneau);
}
.sk-filtres-couleur[hidden] { display: none; }
.sk-filtres-titre { font-size: 12px; color: var(--attenue); margin-right: 2px; }

.sk-pastilles { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.sk-pastille {
    position: relative;
    width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
    border: 2px solid rgba(255, 255, 255, .22);
}
.sk-pastille:hover { border-color: #fff; transform: scale(1.08); }
.sk-pastille[draggable="true"] { cursor: grab; }
.sk-pastille[draggable="true"]:active { cursor: grabbing; }
.sk-pastille.retirable { box-shadow: 0 0 0 1px var(--bord); }

.sk-catalogue {
    flex: 1; min-height: 140px; overflow-y: auto;
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px;
    align-content: start;
    padding: 8px; border-radius: 12px;
    border: 1px solid rgba(86, 120, 150, .22);
    background: rgba(6, 12, 20, .32);
}
/* Cases du catalogue : le cadre vient des bordures du client, une couleur
   par emplacement — bleu coiffe, jaune cape, vert epaulettes, rouge plastron,
   orange bottes, dore costume. L'icone se pose dedans, d'ou la marge. */
.sk-objet {
    aspect-ratio: 1; display: grid; place-items: center; padding: 0;
    border: 0; border-radius: 10px; cursor: pointer;
    /* Verre obtenu par un degrade translucide, non par backdrop-filter : le
       catalogue aligne plusieurs centaines de cases, et autant de filtres
       d'arriere-plan coutent cher au defilement. Le cadre se pose par-dessus. */
    background:
        var(--cadre, none) center / 100% 100% no-repeat,
        linear-gradient(160deg, rgba(255, 255, 255, .12) 0%, rgba(var(--teinte, 120 170 220), .05) 44%, rgba(var(--teinte, 120 170 220), .15) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}
.sk-catalogue[data-slot="Coiffe"] { --cadre: url('../wakasset/wakassets-main/client/theme/images/textures/Tooltip-Borders-Memory.png'); --teinte: 25, 171, 255; }
.sk-catalogue[data-slot="Cape"] { --cadre: url('../wakasset/wakassets-main/client/theme/images/textures/Tooltip-Borders-Legendary.png'); --teinte: 237, 245, 0; }
.sk-catalogue[data-slot="Epaulettes"] { --cadre: url('../wakasset/wakassets-main/client/theme/images/textures/Tooltip-Borders-Rare.png'); --teinte: 19, 255, 138; }
.sk-catalogue[data-slot="Plastron"] { --cadre: url('../wakasset/wakassets-main/client/theme/images/textures/Tooltip-Borders-Admin.png'); --teinte: 242, 0, 77; }
.sk-catalogue[data-slot="Bottes"] { --cadre: url('../wakasset/wakassets-main/client/theme/images/textures/Tooltip-Borders-Mythic.png'); --teinte: 242, 186, 0; }
.sk-catalogue[data-slot="Costume"] { --cadre: url('../wakasset/wakassets-main/client/theme/images/textures/Tooltip-Borders-Selector.png'); --teinte: 238, 205, 139; }
/* Compagnons : les memes cadres que leurs deux entrees, pour qu on sache
   d un coup d oeil quel catalogue on regarde. */
.sk-catalogue[data-slot="familier"] { --cadre: url('../wakasset/wakassets-main/client/theme/images/textures/Tooltip-Borders-Epic.png'); --teinte: 236, 72, 153; }
.sk-catalogue[data-slot="monture"] { --cadre: url('../wakasset/wakassets-main/client/theme/images/textures/Tooltip-Borders-Relic.png'); --teinte: 150, 80, 200; }
.sk-catalogue[data-slot="aura"] { --cadre: url('../wakasset/wakassets-main/client/theme/images/textures/Tooltip-Borders-Spell.png'); --teinte: 226, 190, 146; }
/* Taille explicite, et non un simple plafond : une image pas encore
   chargee n'a aucune dimension propre, elle occupait donc 0 x 0 — et une
   image en chargement differe de taille nulle n'est jamais demandee. Aucune
   vignette du catalogue ne se chargeait. */
/* Emprise fixe, la meme pour toutes les pieces : les icones ne remplissent
   pas leur carre de la meme facon — un plastron en occupe 98 %, un costume
   92 % — et les laisser s'etendre a toute la case faisait mordre le cadre aux
   plus genereuses. Deux tiers de la case, centres, pour tout le monde. */
.sk-objet img { width: 66%; height: 66%; object-fit: contain; }
.sk-objet-vide { color: var(--attenue); }
.sk-objet:hover { filter: brightness(1.25); }
.sk-objet.choisi { box-shadow: inset 0 0 0 2px var(--vert), inset 0 1px 0 rgba(255, 255, 255, .14); }
.sk-objet.equipe { background-color: rgba(5, 46, 26, .55); box-shadow: inset 0 0 0 2px var(--vert), inset 0 1px 0 rgba(255, 255, 255, .14); }

.sk-detail {
    display: flex; align-items: center; gap: 12px; padding: 12px;
    /* Hauteur figee, pas seulement minimale : sinon la grille se decalait
       de quelques pixels selon que le panneau soit rempli ou vide. */
    height: 112px; flex: none; overflow: hidden;
    border: 1px solid rgba(86, 120, 150, .22); border-radius: 12px;
    background: rgba(6, 12, 20, .32);
}
.sk-detail.vide { justify-content: center; }
.sk-detail.vide .hint { margin: 0; }
.sk-detail-img {
    width: 74px; height: 74px; object-fit: contain; flex: none;
    border: 1px solid var(--bord); border-radius: 10px; background: var(--panneau-clair);
}
.sk-detail-infos { min-width: 0; }
.sk-detail-infos strong { display: block; }
.sk-detail-infos small { color: var(--attenue); }



/* ── Corps : apparences et couleurs ─────────────────────────────────────── */
/* Les deux boutons de couleur se collent a droite du titre. */
.sk-bloc h2 .sk-icone { margin-left: 6px; }
.sk-bloc h2 .sk-icone:first-of-type { margin-left: auto; }
.sk-icone {
    display: grid; place-items: center;
    width: 28px; height: 28px; padding: 0;
    border: 1px solid var(--bord); border-radius: 7px;
    background: var(--panneau-clair); color: var(--attenue);
    cursor: pointer; font-size: 15px; line-height: 1;
}
.sk-icone:hover { border-color: var(--bord-vif); color: var(--texte); }

.sk-apparences { display: flex; gap: 7px; margin-bottom: 9px; }
.sk-apparences[hidden] { display: none; }
.sk-apparence {
    width: 62px; height: 78px; padding: 0; overflow: hidden;
    border: 2px solid var(--bord); border-radius: 9px;
    background: var(--panneau-clair); cursor: pointer;
}
.sk-apparence img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.sk-apparence:hover { border-color: var(--bord-vif); }
.sk-apparence.actif { border-color: var(--vert); }

.sk-groupes-couleur { display: flex; gap: 6px; margin-bottom: 8px; }
.sk-groupes-couleur button:disabled { opacity: .4; cursor: default; }

/* Une ligne par zone : libelle, pastille avec son code, remise a zero. */
.sk-zones { display: flex; flex-direction: column; gap: 5px; }
.sk-zone {
    /* Quatre colonnes fixes : la derniere accueille le bouton de collage,
       qui n apparait que lorsqu une couleur est en main. */
    display: grid; grid-template-columns: 1fr auto auto auto auto; align-items: center; gap: 8px;
    padding: 4px 6px; border: 1px solid transparent; border-radius: 8px;
}
.sk-zone:hover, .sk-zone.cible { border-color: var(--bord-vif); background: var(--panneau-clair); }
.sk-zone.cible { border-style: dashed; }
/* Bouton de collage : il porte la couleur en main, on voit ce qu on pose. */
.sk-coller { border-color: var(--bord-vif); box-shadow: inset 0 0 0 1px #0006; }
.sk-coller:hover { transform: scale(1.12); }
.sk-zone-nom { font-size: 18px; color: #ffffff; }
.sk-zone:hover .sk-zone-nom { color: #ffffff; }
.sk-zone-puce {
    display: flex; align-items: center;
    padding: 2px; cursor: pointer;
    border: 1px solid var(--bord); border-radius: 6px; background: var(--panneau);
}
.sk-zone-puce:hover { border-color: var(--bord-vif); }
.sk-zone-puce input[type="color"] {
    width: 24px; height: 24px; padding: 0; border: 0; border-radius: 5px;
    background: none; cursor: pointer;
}
/* Champ du code : un clic le selectionne en entier, pour copier ou remplacer. */
/* Le dièse vit hors du champ : il ne se selectionne plus avec la couleur, ne
   se retape plus, ne se colle plus en double. Les deux forment une seule
   boite au regard. */
.sk-zone-hexa {
    display: inline-flex; align-items: stretch; flex: none;
    border: 1px solid var(--bord); border-radius: 6px; overflow: hidden;
    background: var(--panneau);
}
.sk-zone-hexa:hover { border-color: var(--bord-vif); }
.sk-zone-hexa:focus-within { border-color: var(--vert); }
.sk-zone-diese {
    display: grid; place-items: center; padding: 0 7px;
    font-size: 15px; color: var(--attenue);
    background: rgba(255, 255, 255, .05);
    border-right: 1px solid var(--bord);
    user-select: none;
}
.sk-zone-code {
    /* Neuf caracteres pour en montrer six : « ch » vaut la largeur du zero,
       or les lettres majuscules d'un code sont plus larges, et l'interlettre
       s'ajoute. A 7ch les deux derniers chiffres etaient rognes. */
    width: 9ch; padding: 5px 8px;
    border: 0; background: none; color: var(--texte);
    font: inherit; font-size: 15px; letter-spacing: .02em; text-transform: uppercase;
}
.sk-zone-code:focus { outline: none; }
/* Confirmation de copie : le champ le dit lui-meme, sans bulle. */
/* Confirmation de copie : la bordure appartient desormais a la boite. */
.sk-zone-code.copie { color: var(--vert); text-transform: none; letter-spacing: 0; }
.sk-zone-hexa:has(.copie) { border-color: var(--vert); }

.sk-presse-papier {
    display: flex; align-items: center; gap: 7px; margin-top: 9px;
    padding: 6px 8px; border: 1px solid var(--bord); border-radius: 9px;
    background: var(--panneau-clair);
}
.sk-presse-papier[hidden] { display: none; }
.sk-presse-papier code { font-size: 11px; color: var(--attenue); }

/* Barres de defilement : la meme matiere que les panneaux. La glissiere
   est un creux a peine teinte, le curseur une lame de verre claire qui
   s’allume au survol. */
.sk-catalogue, .sk-colonne > .sk-bloc, .sk-zones {
    scrollbar-width: thin;
    scrollbar-color: rgba(150, 190, 225, .38) rgba(6, 12, 20, .35);
}
.sk-catalogue::-webkit-scrollbar,
.sk-colonne > .sk-bloc::-webkit-scrollbar { width: 10px; }
.sk-catalogue::-webkit-scrollbar-track,
.sk-colonne > .sk-bloc::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(6, 12, 20, .35);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.sk-catalogue::-webkit-scrollbar-thumb,
.sk-colonne > .sk-bloc::-webkit-scrollbar-thumb {
    border-radius: 999px;
    border: 2px solid transparent; background-clip: padding-box;
    background-image: linear-gradient(180deg,
        rgba(190, 220, 245, .55) 0%, rgba(120, 160, 200, .38) 55%, rgba(90, 130, 170, .5) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}
.sk-catalogue::-webkit-scrollbar-thumb:hover,
.sk-colonne > .sk-bloc::-webkit-scrollbar-thumb:hover {
    background-image: linear-gradient(180deg,
        rgba(120, 240, 180, .7) 0%, rgba(46, 226, 122, .5) 60%, rgba(30, 170, 100, .6) 100%);
}
.sk-catalogue::-webkit-scrollbar-corner,
.sk-colonne > .sk-bloc::-webkit-scrollbar-corner { background: transparent; }

/* ── Place reservee ─────────────────────────────────────────────────────────
   Ces trois rangees n'ont pas le meme contenu d'une classe a l'autre : une
   seule apparence, pas de coiffure, pas de seconde pose. Quand elles se
   vidaient, la scene remontait et le socle avec elle. Leur hauteur est donc
   reservee, et ce qui est masque garde sa place. */
/* Les hauteurs tiennent compte de la barre de defilement horizontale, qui
   n'apparait qu'au-dela d'un certain nombre de vignettes : 42 px de vignette
   plus 16 px de barre. Sans cette reserve, passer d'une classe a huit
   coiffures a une classe a neuf faisait descendre toute la scene. */
/* Les rangees du haut se compactent : une seule ligne de coiffures, ou pas
   de seconde apparence, et tout ce qui suit remonte. La reserve permanente
   qui tenait deux lignes evitait a la scene de bouger, mais laissait un vide
   sous les classes courtes — et la colonne de poses venait s y chevaucher.
   La plage reste plafonnee a deux lignes : l Ouginak en a dix-neuf. */
.sk-poses { min-height: 0; }
.sk-coiffures { max-height: 114px; flex-wrap: wrap; align-content: flex-start; overflow: hidden; }
.sk-rangee-corps { min-height: 0; }
.sk-rangee-corps .sk-apparences { height: auto; }
/* Masque veut dire absent : garder la place reproduirait le vide qu on vient
   de supprimer. */
.sk-coiffures[hidden], .sk-apparences[hidden], .pose-variantes[hidden] {
    display: none;
}

/* Skin d'un autre : son portrait en bas a gauche de la scene, en miroir du
   bouton d'enregistrement. Il mene a ses creations, d'ou le bouton. */
.sk-auteur {
    /* Coin bas gauche, au-dessus de la fleche de rotation : plus bas il
       recouvrait la fleche (16 %) puis le bouton « Statique », les poses
       etant centrees mais larges. */
    position: absolute; left: 1%; bottom: 28%; z-index: 4;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 9px 20px 9px 9px; border-radius: 999px; cursor: pointer;
    color: #e9f3ff; text-align: left;
    border: 1px solid rgba(140, 175, 210, .35);
    background: rgba(8, 15, 25, .78); backdrop-filter: blur(8px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
    transition: transform 140ms ease, border-color 140ms ease;
}
.sk-auteur[hidden] { display: none; }
.sk-auteur:hover { transform: translateY(-1px); border-color: var(--vert); }
.sk-auteur img, .sk-auteur-initiale {
    width: 50px; height: 50px; border-radius: 50%; flex: none;
    object-fit: cover; background: rgba(46, 226, 122, .18);
    border: 1px solid rgba(255, 255, 255, .22);
}
.sk-auteur-initiale { display: grid; place-items: center; font-weight: 700; font-size: 21px; }
.sk-auteur-texte { display: flex; flex-direction: column; line-height: 1.2; }
.sk-auteur-texte small { font-size: 14px; color: #8fa6bd; }
.sk-auteur-texte strong { font-size: 19px; }

/* Couleur retenue comme filtre : un anneau vert et sa coche. Sans repere, on
   recliquait dessus sans comprendre pourquoi rien ne bougeait. */
.sk-pastille.retenue {
    outline: 2px solid var(--vert);
    outline-offset: 2px;
    box-shadow: 0 0 10px rgba(46, 226, 122, .6);
}
.sk-pastille.retenue::after {
    content: '✓';
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-size: 13px; font-weight: 700; color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}



/* ── Code du jeu ─────────────────────────────────────────────────────────
   Un champ sous ce qu'il decrit : l'apparence sous les couleurs, l'ensemble
   sous les objets. Il montre le code courant et applique celui qu'on y
   colle — le geste est coller, pas chercher un bouton. */
.sk-code {
    display: flex; flex-direction: column; gap: 4px; flex: none;
    margin-top: 10px;
}
.sk-code-titre {
    /* Le nom doit se lire d un coup d oeil ; le code, lui, reste petit —
       on ne le dechiffre pas, on le copie. */
    font-size: 16px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: #cfe0f0;
}
.sk-code-ligne { display: flex; gap: 5px; align-items: stretch; }
.sk-code input {
    flex: 1; min-width: 0; padding: 6px 9px; border-radius: 7px;
    font: inherit; font-size: 12px; color: #cfe0f0;
    text-overflow: ellipsis;
    border: 1px solid var(--bord); background: rgba(0, 0, 0, .35);
}
/* Coller et copier : des icones, la place ne tient pas les mots. */
.sk-code-bouton {
    flex: none; display: grid; place-items: center;
    width: 30px; border-radius: 7px; cursor: pointer;
    border: 1px solid var(--bord); background: var(--panneau);
    color: var(--attenue);
    transition: color 140ms ease, border-color 140ms ease;
}
.sk-code-bouton svg { width: 15px; height: 15px; fill: currentColor; }
.sk-code-bouton:hover { color: var(--texte); border-color: var(--vert); }
.sk-code-signe { font-size: 14px; font-weight: 700; color: var(--vert); }
.sk-code input:hover { border-color: var(--bord-vif); }
.sk-code input:focus { outline: none; border-color: var(--vert); color: var(--texte); }
/* Code refuse : le champ le dit, sans ligne d'etat a lire ailleurs. */
.sk-code input.refuse { border-color: #ff7a7a; color: #ffbcbc; }

/* Boutons du bloc Corps : tirage au hasard et remise a zero. Plus grands que
   les icones de ligne — ils agissent sur toutes les zones a la fois, et se
   visaient mal a 28 px. */
.sk-icone-large {
    width: 36px; height: 36px; font-size: 20px;
    border-color: var(--bord-vif);
}
.sk-icone-large:hover { color: var(--vert); border-color: var(--vert); }

/* « Tout retirer » : une croix rouge plutot qu'un mot. Le geste efface un
   assemblage entier, il se confirme. */
.sk-danger {
    display: grid; place-items: center;
    width: 30px; height: 30px; padding: 0; flex: none;
    border-radius: 8px; cursor: pointer;
    font-size: 16px; line-height: 1; font-weight: 700;
    color: #ff8a8a;
    border: 1px solid rgba(255, 110, 110, .4);
    background: rgba(120, 30, 30, .28);
    transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
}
.sk-danger:hover {
    color: #ffffff; background: rgba(190, 40, 40, .85);
    border-color: rgba(255, 140, 140, .9);
}

/* Note du bloc détail : les pastilles filtrent le catalogue, mais rien ne le
   disait — seule l'infobulle, qu'il fallait déjà penser à chercher. La
   flèche désigne la rangée de couleurs. */
.sk-detail-astuce {
    margin: 0 0 0 auto; flex: none;
    display: flex; align-items: center; gap: 8px;
    max-width: 210px; padding: 8px 12px 8px 9px;
    border-radius: 9px; font-size: 16px; line-height: 1.3;
    color: #ffffff; text-align: left;
    border: 1px dashed rgba(120, 230, 175, .3);
    background: rgba(46, 226, 122, .06);
}
.sk-astuce-fleche {
    font-size: 22px; line-height: 1; color: var(--vert); flex: none;
    animation: sk-designe 1.8s ease-in-out infinite;
}
/* Un va-et-vient court : de quoi attirer l'œil sans agiter le panneau. */
@keyframes sk-designe {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-4px); }
}
@media (prefers-reduced-motion: reduce) {
    .sk-astuce-fleche { animation: none; }
}

/* Note de la palette : le glisser-déposer ne se devine pas. Elle occupe toute
   la largeur du bloc, sous les pastilles — la palette est une grille souple,
   sans cela la note se serait rangée à côté d'une couleur. */
.sk-palette-astuce {
    flex: 1 0 100%; margin: 6px 0 0;
    font-size: 16px; line-height: 1.35; color: #ffffff;
}
.sk-palette-astuce::before {
    content: '↕ '; color: var(--vert); font-size: 17px;
}

/* ── Bulle d'objet ───────────────────────────────────────────────────────
   L'infobulle du navigateur arrivait avec retard, dans la police du système,
   et sans montrer l'objet. Celle-ci paraît aussitôt, à la main de Stratfu.
   Elle vit hors du cadre, donc hors de sa mise à l'échelle : ses tailles
   sont en pixels d'écran. */
.sk-bulle {
    position: fixed; z-index: 9990; pointer-events: none;
    display: flex; align-items: center; gap: 10px;
    max-width: 320px; padding: 8px 14px 8px 8px;
    border-radius: 12px;
    font: 400 15px/1.3 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
    color: #e7f0fa;
    background: linear-gradient(180deg, rgba(12, 22, 34, .97), rgba(6, 12, 20, .97));
    border: 1px solid rgba(46, 226, 122, .45);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .6), 0 0 22px rgba(46, 226, 122, .12);
    animation: sk-bulle-arrive 120ms ease-out;
}
.sk-bulle[hidden] { display: none; }
/* L'opacité seule : une bulle qui se déplace en apparaissant poursuivrait le
   curseur, qu'elle suit déjà. */
@keyframes sk-bulle-arrive { from { opacity: 0; } to { opacity: 1; } }
.sk-bulle img {
    width: 44px; height: 44px; flex: none; object-fit: contain;
    border-radius: 9px; background: rgba(0, 0, 0, .35);
    border: 1px solid rgba(140, 175, 210, .25);
}
.sk-bulle-texte { display: flex; flex-direction: column; min-width: 0; }
.sk-bulle-texte strong {
    font-size: 16px; font-weight: 700; color: #ffffff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sk-bulle-texte small { font-size: 13px; color: var(--vert); letter-spacing: .02em; }

/* « Dupliquer » : posé à gauche de « Sauvegarder », et plus discret — sur son
   propre skin, enregistrer est le geste courant, dupliquer l'exception. */
/* « Dupliquer » occupe le coin, « Sauvegarder » se decale a sa gauche —
   et seulement quand il est la, sinon le bouton d'enregistrement flotterait
   loin du bord pour rien. */
.sk-scene:has(#sk-dupliquer:not([hidden])) .sk-sauver:not(.sk-dupliquer) {
    /* Juste la largeur de « Dupliquer » et un filet d espace : plus large,
       « Sauvegarder » passait sur les vignettes de pose. */
    right: calc(3% + 148px);
}
.sk-dupliquer {
    right: 3%;
    background: linear-gradient(180deg, #2a3a4e 0%, #1b2836 100%);
    border-color: rgba(140, 175, 210, .45);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.sk-dupliquer:hover { box-shadow: 0 12px 26px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .22); }
.sk-dupliquer[hidden] { display: none; }

/* Avec « Dupliquer », le coin droit occupe pres du double : le groupe de
   poses doit s'ecarter d'autant, sinon les vignettes passent sous les
   boutons — la reserve de 95 px ne vaut que pour un seul bouton. */
.sk-scene:has(#sk-dupliquer:not([hidden])) .pose-group {
    left: calc(50% - 175px);
}

/* La recherche s'etire jusqu'au bord du bloc, quelle que soit la largeur de
   la colonne : auparavant le champ gardait sa taille et debordait. Le titre,
   lui, ne se laisse pas comprimer. */
.sk-bloc h2 > .sk-barre-recherche { flex: 1 1 0; min-width: 0; }
.sk-bloc h2 { flex-wrap: nowrap; }
.sk-bloc h2 > .sk-danger { margin-left: auto; }

/* Le picto de telechargement precede chaque sigle : PNG et GIF seuls ne
   disaient pas ce qu ils declenchaient. */
.sk-export > .sk-bouton-vert { display: flex; align-items: center; justify-content: center; gap: 6px; }
.sk-export > .sk-bouton-vert svg { width: 15px; height: 15px; fill: currentColor; flex: none; }

/* Poses fixes : un numero suffit. Il en existe jusqu'a six par apparence, et
   les illustrer toutes coûterait plus que cela ne rapporterait tant que la
   beta dure. Meme gabarit que les vignettes d'attente, pour que la colonne
   ne change pas de largeur d'un etat a l'autre. */
.sk-pose-fixe {
    display: grid; place-items: center;
    font-size: 22px; font-weight: 700; color: #cfe0f0;
}
.sk-pose-fixe.actif { color: #ffffff; }

/* Depot d'une couleur : la ligne visee clignote. Le seul changement de
   bordure se remarquait mal quand la main suivait le curseur, et l'on
   lachait une teinte sur la mauvaise zone. */
@keyframes sk-cible-clignote {
    0%, 100% {
        border-color: var(--bord-vif);
        box-shadow: 0 0 0 0 rgba(46, 226, 122, 0);
    }
    50% {
        border-color: var(--vert, #2ee27a);
        box-shadow: 0 0 14px 2px rgba(46, 226, 122, .55);
    }
}
.sk-zone.cible {
    animation: sk-cible-clignote 620ms ease-in-out infinite;
}
/* Sans mouvement : la bordure vive et le halo restent, figes. */
@media (prefers-reduced-motion: reduce) {
    .sk-zone.cible {
        animation: none;
        border-color: var(--vert, #2ee27a);
        box-shadow: 0 0 14px 2px rgba(46, 226, 122, .55);
    }
}

/* Les cinq poses communes a toutes les classes tiennent le bord droit :
   les distinguer de celles que la classe est seule a posseder evite de
   chercher lesquelles sont partagees. */
.pose-communes { left: auto; right: 6px; }
/* Les poses nommees portent un mot, pas un chiffre : la taille suit. */
.sk-pose-fixe.sk-pose-nommee { font-size: 13px; font-weight: 700; letter-spacing: .02em; }
/* Illustration d'une pose fixe : elle remplit le bouton, fond compris. */
.sk-pose-fixe img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Retour arriere : dans la barre de scene, avant le zoom. Eteint tant qu il
   n y a rien a defaire — un bouton qui ne fait rien vaut mieux eteint. */
#sk-annuler { display: grid; place-items: center; padding: 6px 9px; }
#sk-annuler svg { width: 17px; height: 17px; fill: currentColor; }
#sk-annuler:disabled { opacity: .35; cursor: default; border-color: rgba(140, 175, 210, .2); }
#sk-annuler:disabled:hover { border-color: rgba(140, 175, 210, .2); }

/* ── Compagnons ─────────────────────────────────────────────────────────
   Deux entrees sous les poses communes, a droite : elles ouvrent le
   catalogue des familiers ou des montures dans la colonne d'equipement. */
.pose-compagnons {
    position: absolute; right: 6px; z-index: 4;
    display: flex; flex-direction: column; gap: 6px;
}
/* Les cadres du jeu plutot qu'une bordure dessinee : le violet de la
   relique pour les montures, le rose de l'epique pour les familiers. Ils
   font 78 px et se dessinent en fond, l'icone tenant au centre. */
.pose-compagnons button {
    position: relative;
    width: 84px; height: 84px; padding: 13px; cursor: pointer;
    border: 0; border-radius: 12px; background: none;
    transition: filter 140ms ease, transform 140ms ease;
}
.pose-compagnons button::before {
    content: ''; position: absolute; inset: 0;
    background: center / 100% 100% no-repeat;
}
.pose-compagnons [data-compagnon='monture']::before {
    background-image: url('../wakasset/wakassets-main/client/theme/images/textures/Tooltip-Borders-Relic.png');
}
.pose-compagnons [data-compagnon='familier']::before {
    background-image: url('../wakasset/wakassets-main/client/theme/images/textures/Tooltip-Borders-Epic.png');
}
/* Auras et courses portent le cadre des sorts : ni la relique de la
   monture, ni l epique du familier — on distingue les familles d un coup
   d oeil. */
.pose-compagnons [data-compagnon='aura']::before,
.pose-compagnons [data-compagnon='course']::before {
    background-image: url('../wakasset/wakassets-main/client/theme/images/textures/Tooltip-Borders-Spell.png');
}
/* En test : la bulle dit que c est ouvert aux testeurs, sans griser. */
.pose-compagnons .en-test { position: relative; }
.pose-compagnons .en-test::after {
    content: attr(data-a-venir);
    position: absolute; right: calc(100% + 10px); top: 50%;
    transform: translateY(-50%);
    padding: 4px 10px; border-radius: 999px; white-space: nowrap;
    font-size: 12px; font-weight: 600; color: #ffeec2;
    border: 1px solid rgba(226, 190, 146, .5);
    background: rgba(26, 20, 6, .92);
    opacity: 0; transition: opacity 140ms ease; pointer-events: none;
}
.pose-compagnons .en-test:hover::after { opacity: 1; }
.pose-compagnons button:hover { filter: brightness(1.15); }
.pose-compagnons button.actif { transform: scale(1.04); filter: brightness(1.2); }
.pose-compagnons button.actif::before { filter: drop-shadow(0 0 8px rgba(255, 255, 255, .45)); }
.pose-compagnons img {
    position: relative; width: 100%; height: 100%;
    object-fit: contain; display: block;
}

/* Montrer ou cacher le compagnon equipe. A cote de « Animé », parce que
   c'est le meme genre de reglage : ce qu'on voit, pas ce qu'on porte. */
.sk-compagnon-vue { padding: 9px 16px; font-size: 15px; border-radius: 12px; }
.sk-compagnon-vue[hidden] { display: none; }

/* Familiers et montures : la mécanique est là, les créatures pas encore.
   Les deux entrées restent visibles — pour annoncer ce qui vient — mais
   grisées, et le survol le dit plutôt que de laisser cliquer dans le vide. */
.pose-compagnons .a-venir {
    filter: grayscale(1) brightness(.62);
    cursor: not-allowed;
    position: relative;
}
.pose-compagnons .a-venir:hover { filter: grayscale(.85) brightness(.75); }
.pose-compagnons .a-venir::after {
    content: attr(data-a-venir);
    position: absolute; left: 50%; top: -6px;
    transform: translate(-50%, -100%);
    padding: 4px 9px; border-radius: 8px;
    font: 600 12px/1 'Rajdhani', system-ui, sans-serif;
    letter-spacing: .04em; white-space: nowrap;
    color: #eafff3; background: rgba(9, 14, 20, .96);
    border: 1px solid rgba(46, 226, 122, .45);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
    opacity: 0; transition: opacity 140ms ease;
    pointer-events: none;
}
.pose-compagnons .a-venir:hover::after { opacity: 1; }




/* Auras et courses partagent une ligne, la course a gauche : une quatrieme
   entree sous les trois autres aurait allonge la colonne jusqu'au bas de
   la scene. */
.pose-compagnons .pose-rangee { display: flex; flex-direction: row; gap: 6px; }

/* Idle ou Course, sous « Animé » : deux etats d'une meme chose, donc
   cote a cote et non empiles. */
.sk-course-vue { display: inline-flex; gap: 6px; }
.sk-course-vue[hidden] { display: none; }
.sk-course-vue .sf-bouton { padding: 7px 14px; font-size: 14px; border-radius: 10px; }