/* Osalia — feuille unique du site (v3 « natif »).
   Habillage fait avec les éléments du client Dofus 3.7 (img/natif/, liste dans img/natif/LISTE.tsv) :
   polices Rowdies (titres) et Lexend (texte), couleurs du thème Standard (fenêtres bleu nuit, bouton primaire vert,
   surbrillance citron), boutons, onglets, cartes serverCard, bandeau ServerSelection, rubans et rayons LevelUp.
   L'or et le crème du logo Osalia restent la couleur d'accent. */
@font-face { font-family: "Rowdies"; src: url("../polices/Rowdies-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("../polices/Lexend-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("../polices/Lexend-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("../polices/Lexend-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("../polices/Lexend-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  /* Thème Standard du client (uss/Standard.uss). */
  --dark: #1b1d32;
  --dark-97: rgba(27, 29, 50, .97);
  --dark-80: rgba(27, 29, 50, .8);
  --medium: #3d405c;
  --medium-90: rgba(61, 64, 92, .9);
  --secondaire: rgba(45, 48, 83, .85);
  --secondaire-survol: rgba(80, 84, 126, .9);
  --lavande: #b6b3e6;
  --citron: #f0ff4f;
  --vert: #8ca800;
  /* Osalia. */
  --nuit: #0b1020;
  --creme: #fbefd2;
  --creme-2: #e6d7b4;
  --doux: #b4b6d2;
  --discret: #7d80a6;
  --or: #f5c142;
  --or-clair: #ffe28c;
  --or-fonce: #b77d10;

  --feu: #ff6a3d; --eau: #3fb2ff; --terre: #d9a24a; --air: #8fdc5a; --neutre: #cfd5e2;
  --commun: #b6c0d6; --rare: #4fb0ff; --unique: #3fe0b8; --evolution: #ff66cc; --epique: #e08cff; --legendaire: #ffd04d; --mythique: #ff4256;
  /* Dégradés des titres Rowdies (title_huge du client : crème vers or) et des icônes dorées. */
  --or-texte: linear-gradient(180deg, #fffbe9 0%, #ffe9a8 45%, #f5c142 72%, #d9952a 100%);
  --or-icone: linear-gradient(180deg, #fff6cf 0%, #ffd866 45%, #e9a92d 80%, #b77d10 100%);
  --balayage: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .95) 50%, transparent 58%);

  --titre: "Rowdies", "Lexend", "Segoe UI", sans-serif;
  --texte: "Lexend", "Segoe UI", Arial, sans-serif;
  --ombre-titre: 0 3px 0 rgba(0, 0, 0, .85), 0 0 2px rgba(0, 0, 0, .9);
  --ressort: cubic-bezier(.34, 1.56, .64, 1);
  --doux-sortie: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { background: var(--nuit); overflow-x: clip; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  color: var(--creme); font: 400 16px/1.55 var(--texte);
  position: relative; background: var(--nuit) url("../img/natif/bkgKrosmoz.jpg") center top / max(100%, 1300px) auto no-repeat;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(rgba(11, 16, 32, .45), rgba(11, 16, 32, .7) 420px, var(--nuit) 820px); }
main { flex: 1 0 auto; width: 100%; position: relative; z-index: 1; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--or-clair); text-decoration: none; }
h1, h2, h3, p { margin: 0; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--citron); outline-offset: 3px; }
.cache { display: none !important; }
.lecteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cadre { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 32px; }
#particules { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.ico { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Icône native du client (silhouette sombre) recolorée par masque. */
.ico-n { display: inline-block; width: 20px; height: 20px; flex: none; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }

/* ── Apparition au défilement : fondu + montée, en cascade (--i) ────── */
.apparait { opacity: 0; transform: translateY(34px); transition: opacity .7s ease, transform .8s var(--doux-sortie); transition-delay: calc(var(--i, 0) * 70ms); }
.apparait.vu, .sans-anim .apparait { opacity: 1; transform: none; }

/* ── Clic : enfoncement puis petit rebond (classe posée par commun.js) ── */
.rebond { animation: rebond .42s var(--ressort); }
@keyframes rebond { 0% { transform: scale(.93); } 55% { transform: scale(1.04); } 100% { transform: scale(1); } }

/* ── En-tête : barre du client ───────────────────────────────────────── */
.entete { position: sticky; top: 0; z-index: 40; background: var(--dark-97); box-shadow: 0 8px 20px rgba(0, 0, 0, .5); }
.entete::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: url("../img/natif/horizontalDividerLinearGradientShadow.png") center / 100% 100%; opacity: .9; }
.entete .cadre { display: flex; align-items: center; gap: 18px; height: 68px; max-width: 1360px; }
.marque img { height: 48px; width: auto; transition: transform .3s var(--ressort), filter .3s; }
.marque:hover img { transform: rotate(-3deg) scale(1.06); filter: drop-shadow(0 0 12px rgba(245, 193, 66, .6)); }
.nav { display: flex; gap: 2px; margin-left: 10px; flex: 1; }
.nav a {
  position: relative; display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 16px;
  font: 600 13px var(--texte); letter-spacing: .08em; text-transform: uppercase; color: var(--doux);
  border: 11px solid transparent; border-width: 0; border-radius: 6px; transition: color .2s, background-color .2s;
}
.nav a .ico-n { width: 18px; height: 18px; transition: transform .3s var(--ressort); }
.nav a:hover { color: var(--creme); background: rgba(182, 179, 230, .08); }
.nav a:hover .ico-n { transform: translateY(-2px) scale(1.12); }
.nav a[aria-current="page"] { color: var(--creme); background: url("../img/natif/tabBackground.png") center bottom / 100% 100% no-repeat; }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; background: var(--citron); box-shadow: 0 0 10px var(--citron); }
.entete .actions { display: flex; align-items: center; gap: 12px; }
.menu-bouton { display: none; }
/* Compte dans l'en-tête : « Créer un compte » (primaire, vert du bouton JOUER) et « Connexion » ; connecté : le pseudo,
   « Panel admin » (staff) et « Déconnexion ». Même forme que les autres boutons, en plus bas. */
.compte-h { display: flex; align-items: center; gap: 6px; }
.compte-h .bouton { flex: 0 1 auto; min-width: 0; }
/* Connecté, sur écran large mais pas immense : « Panel admin » et « Déconnexion » en icône seule (nom au survol),
   pour que le pseudo et la barre tiennent sur une ligne. */
@media (max-width: 1600px) and (min-width: 1101px) {
  .compte-h .pseudo-h ~ .bouton { padding: 0 10px 1px; min-width: 44px; }
  .compte-h .pseudo-h ~ .bouton > span:not(.ico-n) { display: none; }
}
.pseudo-h { display: inline-flex; align-items: center; gap: 8px; max-width: 280px; padding: 0 6px; color: var(--creme); font: 600 14px var(--texte); white-space: nowrap; }
.pseudo-h span { overflow: hidden; text-overflow: ellipsis; }
.pseudo-h .ico-n { width: 22px; height: 22px; background: var(--or-icone); }
.pseudo-h:hover { color: var(--or-clair); }

/* ── Pastille d'état ─────────────────────────────────────────────────── */
/* Sans pastille ni contour : le losange diamondFill du client (séparateur des infobulles), allumé et pulsant. */
.etat {
  display: inline-flex; align-items: center; gap: 9px; height: 32px; color: var(--doux);
  font: 600 13px var(--texte); white-space: nowrap; text-shadow: 0 1px 2px #000;
}
.etat i {
  position: relative; width: 12px; height: 12px; flex: none; background: var(--discret);
  -webkit-mask: url("../img/natif/diamondFill.png") center / contain no-repeat; mask: url("../img/natif/diamondFill.png") center / contain no-repeat;
}
.etat.en-ligne { color: #eaf7b0; }
.etat.en-ligne i { background: radial-gradient(circle, #fff 0, var(--citron) 45%, #a8b800 100%); animation: pouls 2.2s ease-in-out infinite; }
.etat.hors-ligne i { background: #ff7a62; }
@keyframes pouls { 50% { transform: scale(1.35) rotate(45deg); opacity: .7; } }

/* ── Boutons du client Dofus 3.7 : UNE classe, .bouton ───────────────── */
/* .bouton = DofusButtonCustom du thème Figma de la 3.7 (plaque à pans coupés recomposée par site/bouton_37.py à
   partir des couches defaultBackgoundButton / default|hover|pressedContentButton, couleurs --buttons_* du thème
   Standard). Secondaire par défaut ; .primaire = vert (action d'une fenêtre) ; .jouer = PlayButton de la sélection
   de personnage (l'action principale d'une page : Télécharger, Créer un compte) ; .petit = en-tête.
   Texte du client : Lexend gras, capitales, blanc à contour sombre fin (-unity-text-outline). */
.bouton {
  --h: 42px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--h); min-width: calc(var(--h) * 2.4); max-width: 100%; padding: 0 16px 1px; cursor: pointer;
  border: 0 solid transparent; border-radius: 0; background: none; box-shadow: none;
  border-image: url("../img/natif/btn37_secondaire_normal.png") 16 fill / 8px stretch;
  color: #fff; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  font: 700 12.5px/1 var(--texte); letter-spacing: .07em;
  -webkit-text-stroke: 2px rgba(10, 12, 24, .55); paint-order: stroke fill; text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
  transition: transform .18s var(--doux-sortie), filter .18s;
}
.bouton > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bouton .ico-n { position: relative; width: 18px; height: 18px; color: #fff; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .55)); }
.bouton:hover, .bouton:focus-visible { border-image-source: url("../img/natif/btn37_secondaire_survol.png"); transform: translateY(-1px); }
.bouton:active { border-image-source: url("../img/natif/btn37_secondaire_appui.png"); transform: translateY(1px); }
.bouton.primaire { border-image-source: url("../img/natif/btn37_primaire_normal.png"); -webkit-text-stroke-color: rgba(28, 34, 0, .6); }
.bouton.primaire:hover, .bouton.primaire:focus-visible { border-image-source: url("../img/natif/btn37_primaire_survol.png"); filter: drop-shadow(0 0 10px rgba(240, 255, 79, .35)); }
.bouton.primaire:active { border-image-source: url("../img/natif/btn37_primaire_appui.png"); filter: none; }
.bouton[disabled], .bouton[aria-disabled="true"] {
  border-image-source: url("../img/natif/btn37_secondaire_desactive.png"); color: rgba(255, 255, 255, .45);
  -webkit-text-stroke-color: transparent; text-shadow: none; cursor: not-allowed; transform: none; filter: none;
}
.bouton.primaire[disabled], .bouton.primaire[aria-disabled="true"] { border-image-source: url("../img/natif/btn37_primaire_desactive.png"); }
.bouton[disabled] .ico-n, .bouton[aria-disabled="true"] .ico-n { opacity: .45; }
.bouton.petit { --h: 36px; padding: 0 12px 1px; font-size: 11.5px; letter-spacing: .05em; min-width: 0; }
.bouton.large { width: 100%; }

/* .bouton.jouer : le bouton JOUER de la sélection de personnage (PlayButton), recomposé par site/bouton_jouer.py.
   Les pointes (130 px sur 600 de l'image) ne s'étirent pas ; le corps s'allonge avec le texte. Losanges à part. */
.bouton.jouer {
  --h: 86px; --pointe: calc(var(--h) * .482);
  min-width: calc(var(--h) * 3.3); padding: 0 calc(var(--h) * .12) 3px; border-width: 0 var(--pointe);
  border-image: url("../img/natif/btn_jouer_corps_normal.png") 0 130 fill / 0 var(--pointe) stretch;
  font: 700 calc(var(--h) * .3) / 1 var(--texte); letter-spacing: .02em;
  -webkit-text-stroke: 3px rgba(18, 22, 4, .8); text-shadow: 0 2px 0 rgba(0, 0, 0, .35);
  transition: transform .25s var(--ressort), filter .25s;
  animation: respire-btn 3.2s ease-in-out infinite;
}
.bouton.jouer::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: calc(var(--h) * .2); transform: translateX(-50%); pointer-events: none;
  background: url("../img/natif/btn_jouer_losange.png") center calc(var(--h) * .06) / 100% auto no-repeat,
              url("../img/natif/btn_jouer_losange.png") center calc(100% - var(--h) * .06) / 100% auto no-repeat;
}
.bouton.jouer::after {
  content: ""; position: absolute; top: calc(var(--h) * .22); bottom: calc(var(--h) * .24); left: calc(var(--h) * -.1); right: calc(var(--h) * -.1); pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%) -150% 0 / 250% 100% no-repeat;
  border-radius: 6px; animation: reflet 3.6s ease-in-out infinite;
}
@keyframes reflet { 0%, 55% { background-position: 160% 0; } 100% { background-position: -160% 0; } }
@keyframes respire-btn { 50% { filter: drop-shadow(0 0 12px rgba(240, 255, 79, .4)); } }
.bouton.jouer:hover, .bouton.jouer:focus-visible { border-image-source: url("../img/natif/btn_jouer_corps_survol.png"); transform: translateY(-3px) scale(1.03); filter: drop-shadow(0 0 20px rgba(240, 255, 79, .55)); }
.bouton.jouer:active { border-image-source: url("../img/natif/btn_jouer_corps_appui.png"); transform: translateY(1px) scale(.97); }
.bouton.jouer[aria-disabled="true"], .bouton.jouer[disabled] { border-image-source: url("../img/natif/btn_jouer_corps_desactive.png"); color: #d6d8c8; animation: none; }
.bouton.jouer[aria-disabled="true"]::after, .bouton.jouer[disabled]::after { display: none; }
.bouton.jouer > span { position: relative; z-index: 1; overflow: visible; }
/* ── Titres ──────────────────────────────────────────────────────────── */
.titre-xl { font: 400 64px/1.22 var(--titre); }
.titre-l { font: 400 42px/1.15 var(--titre); }
.titre-m { font: 400 26px/1.2 var(--titre); }
/* Titres Rowdies du client : remplissage en dégradé crème → or, ombre portée franche, reflet qui traverse
   (light sweep des titres de LevelUp). Ombre en filtre : un text-shadow passerait par-dessus le dégradé. */
.titre-xl, .titre-l, .titre-m, .titre-or {
  text-transform: uppercase; color: #ffe9a8;
  background: var(--balayage) 200% 0 / 250% 100% no-repeat, var(--or-texte);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .85)) drop-shadow(0 0 1px rgba(60, 30, 0, .9));
  animation: reflet-titre 6s ease-in-out infinite;
}
@keyframes reflet-titre { 0%, 62% { background-position: 200% 0, 0 0; } 100% { background-position: -100% 0, 0 0; } }
/* Petit sur-titre : ornement turnStartDeco du client devant, pas de lettres espacées façon « eyebrow ». */
.sur-titre { display: inline-flex; align-items: center; gap: 10px; font: 600 14px var(--texte); letter-spacing: .04em; color: var(--lavande); }
.sur-titre::before { content: ""; width: 60px; height: 9px; flex: none; background: url("../img/natif/turnStartDeco.png") left center / auto 100% no-repeat; opacity: .9; }
.ornement { display: block; width: min(560px, 90%); height: auto; aspect-ratio: 733 / 65; background: url("../img/natif/success_ornament.png") center / contain no-repeat; margin: 10px 0 0; }
.ornement.centre { margin-left: auto; margin-right: auto; }

/* Bandeau de titre de grande fenêtre (ServerSelection, ctr_header) : bandeau BorderBgHeader sur les côtés,
   deux coins slideCornerBgHeader (le droit en miroir) et le centre slideCenterBgHeader qui descend plus bas. */
/* 13/11 : une seule image (site/bouton_37.py, bandeau()) faite du coin du client, sans jointure : l'ancien montage
   en trois pièces étirées dessinait deux traits verticaux. Centrée, hauteur du bandeau, jamais étirée en largeur. */
.bandeau-titre {
  overflow: hidden;
  position: relative; height: 170px; display: grid; place-items: center; padding-bottom: 30px;
  background: url("../img/natif/bandeau_page.png") center top / auto 100% no-repeat;
}
.bandeau-titre > * { position: relative; z-index: 1; text-align: center; }
.bandeau-titre p { margin-top: 6px; color: var(--doux); font-size: 15px; }

/* ── Fenêtre du thème (WindowFigma) ──────────────────────────────────── */
/* WindowFigma : fond --window-bg, ombre intérieure windowInnerShadow (9-slice 70 px) posée par-dessus, ombre portée
   du client ; pas de liseré clair. En-tête : reflet headerHighlight + séparateur dégradé natif dessous. */
.fenetre {
  position: relative; background: var(--dark-97); border-radius: 12px;
  box-shadow: 0 22px 44px -10px rgba(0, 0, 0, .75);
}
.fenetre::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  border: 36px solid transparent; border-image: url("../img/natif/windowInnerShadow.png") 70 fill / 36px stretch;
  clip-path: inset(0 round 12px);
}
.fenetre > * { position: relative; z-index: 1; }
.fenetre-tete {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 20px 12px;
  border-radius: 12px 12px 0 0; isolation: isolate;
  font: 400 19px var(--titre); text-transform: uppercase; color: #ffe9a8;
}
/* Teinte d'en-tête : la texture tooltipBackground des en-têtes d'infobulle du client, teintée lavande. */
.fenetre-tete::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--lavande); opacity: .22;
  -webkit-mask: url("../img/natif/tooltipBackground.png") center / 100% 100% no-repeat; mask: url("../img/natif/tooltipBackground.png") center / 100% 100% no-repeat;
  transform: rotate(180deg);
}
.fenetre-tete::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: url("../img/natif/horizontalDividerLinearGradientShadow.png") center / 100% 100%; }
.fenetre-tete > span:not([class]), .fenetre-tete { text-shadow: 0 2px 0 #000; }
.fenetre-corps { padding: 20px 22px; }
.separateur { height: 2px; border: 0; margin: 16px 0; background: url("../img/natif/horizontalDividerLinearGradientShadow.png") center / 100% 100%; }

/* ── Médaillon d'élément (icônes natives tx_*) et de rareté ──────────── */
.el { display: inline-block; width: 24px; height: 24px; background: center / contain no-repeat; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .7)); flex: none; }
.el.terre { background-image: url("../img/natif/tx_strength.png"); }
.el.feu { background-image: url("../img/natif/tx_intelligence.png"); }
.el.eau { background-image: url("../img/natif/tx_chance.png"); }
.el.air { background-image: url("../img/natif/tx_agility.png"); }
.el.neutre { background-image: url("../img/natif/tx_neutral.png"); }
.el.meilleur { background-image: url("../img/natif/multiElement.png"); }
.el-feu { --el: var(--feu); --fond-el: url("../img/cartes/feu.webp"); }
.el-eau { --el: var(--eau); --fond-el: url("../img/cartes/eau.webp"); }
.el-terre { --el: var(--terre); --fond-el: url("../img/cartes/terre.webp"); }
.el-air { --el: var(--air); --fond-el: url("../img/cartes/air.webp"); }
.el-neutre { --el: var(--neutre); --fond-el: url("../img/cartes/neutre.webp"); }
/* Rareté : couleur (--r) et pastille du jeu (--gem : hexagones badge*_0 / intensityLevel*_0 du client). */
.r-commun { --r: var(--commun); --gem: url("../img/natif/rar_commun.png"); }
.r-rare { --r: var(--rare); --gem: url("../img/natif/rar_rare.png"); }
.r-unique { --r: var(--unique); --gem: url("../img/natif/rar_unique.png"); }
.r-evolution { --r: var(--evolution); --gem: url("../img/natif/rar_evolution.png"); }
.r-epique { --r: var(--epique); --gem: url("../img/natif/rar_epique.png"); }
.r-legendaire { --r: var(--legendaire); --gem: url("../img/natif/rar_legendaire.png"); }
.r-mythique { --r: var(--mythique); --gem: url("../img/natif/rar_mythique.png"); }
/* Pastille de rareté seule (hexagone du jeu, sans cadre). */
.gemme-r { display: inline-block; width: 18px; height: 20px; flex: none; background: var(--gem, url("../img/natif/rar_commun.png")) center / contain no-repeat; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .7)); }

/* ── Carte d'Altéré (serverCard du client : cadre containCardServer, cartouche containTitle, gemmes, ombre innerShadowCard) ── */
.carte-n {
  --el: var(--neutre); --r: var(--commun);
  position: relative; display: block; width: 100%; aspect-ratio: 346 / 590; padding: 0; border: 0; background: none;
  color: var(--creme); font: inherit; text-decoration: none; cursor: pointer;
  transition: transform .35s var(--ressort);
}
.carte-n .cn-cadre, .carte-n .cn-art, .carte-n .cn-ombre {
  position: absolute; -webkit-mask: url("../img/natif/containCardServerDefault.png") center / 100% 100%; mask: url("../img/natif/containCardServerDefault.png") center / 100% 100%;
}
.carte-n .cn-cadre { inset: 8% 0 0; background: linear-gradient(170deg, #8e8cb8, #4a4c72 35%, #2b2d4a 65%, #77759f); transition: background .3s, filter .3s; }
.carte-n .cn-art { inset: calc(8% + 5px) 5px 5px; background: var(--dark) var(--fond-el) center / cover; }
.carte-n .cn-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 62%, rgba(14, 15, 28, .85) 92%); }
.carte-n .cn-ombre { inset: calc(8% + 5px) 5px 5px; background: url("../img/natif/innerShadowCard.png") center / 100% 100%; opacity: .4; }
.carte-n .cn-perso {
  position: absolute; left: -7%; width: 114%; top: 15%; height: 58%; object-fit: contain; object-position: center bottom;
  filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .35)); transition: transform .45s var(--ressort), filter .3s;
}
.carte-n .cn-titre {
  position: absolute; left: 3%; right: 3%; top: 0; aspect-ratio: 316 / 96; display: grid; place-items: center; padding: 0 13% 2px;
  background: url("../img/natif/containTitleBg.png") center / 100% 100% no-repeat; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .6));
}
.carte-n .cn-titre::before {
  content: ""; position: absolute; inset: 4% 5%; background: var(--dark);
  -webkit-mask: url("../img/natif/containTitle.png") center / 100% 100%; mask: url("../img/natif/containTitle.png") center / 100% 100%;
}
.carte-n .cn-titre::after {
  content: ""; position: absolute; inset: 0; background: var(--r);
  -webkit-mask: url("../img/natif/gemBackground.png") center / 100% 100%; mask: url("../img/natif/gemBackground.png") center / 100% 100%;
}
/* Le nom suit la largeur de la carte (unités de conteneur) : il tient entre les chevrons du cartouche quelle que soit
   la grille (220 px des starters, 160 px de l'Osadex, 130 px de la page Monde, téléphone). */
.carte-n { container-type: inline-size; }
.carte-n .cn-nom { position: relative; z-index: 1; font: 400 min(16px, 10.4cqi)/1.02 var(--titre); white-space: nowrap; text-transform: uppercase; text-align: center; text-shadow: 0 2px 0 #000; }
.carte-n .cn-nom.long { font-size: min(13.5px, 7.9cqi); letter-spacing: -.01em; }
.carte-n .cn-nom.tres-long { font-size: min(11.5px, 6.2cqi); letter-spacing: -.02em; }
.carte-n .cn-nom.deux-lignes {
  white-space: normal; text-wrap: balance; font-size: min(11.5px, 6.6cqi); line-height: 1; letter-spacing: -.01em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere;
}
.carte-n .cn-meta { position: absolute; left: 0; right: 0; bottom: 5%; display: flex; justify-content: center; gap: 4px; }
.carte-n .cn-num { position: absolute; z-index: 2; top: 19%; left: 11%; font: 600 11px var(--texte); color: var(--creme-2); text-shadow: 0 1px 2px #000; }
.carte-n:hover, .carte-n:focus-visible { transform: translateY(-10px); }
.carte-n:hover .cn-cadre, .carte-n:focus-visible .cn-cadre { background: linear-gradient(170deg, #fff1b8, var(--or) 40%, var(--or-fonce) 75%, var(--or-clair)); filter: drop-shadow(0 0 18px var(--el)); }
.carte-n:hover .cn-perso, .carte-n:focus-visible .cn-perso { transform: translateY(-6%) scale(1.1); filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .35)) drop-shadow(0 0 22px var(--el)); }
.carte-n.vedette .cn-cadre { background: linear-gradient(170deg, #fff1b8, var(--or) 40%, var(--or-fonce) 75%, var(--or-clair)); filter: drop-shadow(0 0 24px rgba(245, 193, 66, .65)); }
/* ── Accueil : héros ─────────────────────────────────────────────────── */
.heros { position: relative; min-height: clamp(620px, calc(100vh - 68px), 900px); overflow: hidden; isolation: isolate; }
.heros .ciel { position: absolute; inset: 0; z-index: -3; background: url("../img/natif/CharacterCreationBackground.jpg") center / cover no-repeat; }
.heros .ciel::after { content: ""; position: absolute; inset: 0; background: url("../img/natif/stars.webp") center / cover; opacity: .8; animation: scintille 6s ease-in-out infinite; }
@keyframes scintille { 50% { opacity: .45; } }
.nuage { position: absolute; z-index: -2; opacity: .55; pointer-events: none; animation: derive linear infinite; }
.nuage.n1 { width: 760px; top: 4%; left: -12%; animation-duration: 90s; }
.nuage.n2 { width: 900px; bottom: -6%; left: 30%; animation-duration: 120s; animation-direction: reverse; opacity: .4; }
.nuage.n3 { width: 620px; top: 30%; right: -14%; animation-duration: 100s; opacity: .35; }
@keyframes derive { 0% { transform: translateX(-60px); } 50% { transform: translateX(80px); } 100% { transform: translateX(-60px); } }
.heros .degrade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 16, 32, .82) 0%, rgba(11, 16, 32, .35) 45%, transparent 70%), linear-gradient(transparent 70%, var(--nuit)); }
.heros .contenu { position: relative; display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); min-height: inherit; max-width: 1360px; margin: 0 auto; padding: 0 40px; }
.heros .gauche { align-self: center; padding: 40px 0 70px; z-index: 2; }
.heros .logo { width: 520px; max-width: 100%; margin-left: -18px; filter: drop-shadow(0 10px 0 rgba(0, 0, 0, .45)); }
.heros .accroche { margin: 4px 0 24px; max-width: 420px; font: 500 18px/1.45 var(--texte); color: var(--creme-2); text-shadow: 0 2px 4px #000; }
.heros .accroche b { color: var(--or-clair); font-weight: 600; }
.heros .actions-h { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-left: -8px; }
.heros .etat { margin-top: 18px; }
/* Scène du héros : Altéré tiré au hasard sur le socle de la création de personnage, fond à la couleur de sa rareté. */
.scene { position: relative; z-index: 1; }   /* --r : couleur de la rareté, posée par la classe r-<rareté> */
/* Lumière : projecteur (rayons de l'écran titre, teintés de la rareté) et halo, centrés sur l'Altéré (--cx, --cy, --dim
   posés par accueil.js d'après la taille réelle de son image). Le calque s'estompe en ellipse jusqu'à ses bords : rien
   n'est jamais coupé net, quelle que soit la taille de l'Altéré ou de l'écran. */
.scene .lumiere {
  position: absolute; z-index: 0; inset: 0; pointer-events: none;
  -webkit-mask: radial-gradient(closest-side at var(--cx, 50%) var(--cy, 55%), #000 50%, rgba(0, 0, 0, .6) 76%, transparent 100%);
  mask: radial-gradient(closest-side at var(--cx, 50%) var(--cy, 55%), #000 50%, rgba(0, 0, 0, .6) 76%, transparent 100%);
}
.scene .rayons {
  position: absolute; left: var(--cx, 50%); top: calc(var(--cy, 55%) - var(--dim, 400px) * 1.05); width: calc(var(--dim, 400px) * 1.9);
  height: calc(var(--dim, 400px) * 1.75); translate: -50% 0; transform-origin: 50% 0; pointer-events: none;
  background: var(--r); -webkit-mask: url("../img/natif/ray_masque.webp") center / 100% 100% no-repeat; mask: url("../img/natif/ray_masque.webp") center / 100% 100% no-repeat;
  opacity: .95; transition: opacity .5s ease, scale .7s var(--ressort), background-color .5s; animation: balance 9s ease-in-out infinite alternate;
}
@keyframes balance { from { rotate: -6deg; } to { rotate: 6deg; } }
.scene .halo-r {
  position: absolute; left: var(--cx, 50%); top: var(--cy, 55%); width: calc(var(--dim, 400px) * 1.45); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--r) 70%, transparent) 0, color-mix(in srgb, var(--r) 32%, transparent) 36%, transparent 66%);
  transition: opacity .5s ease, scale .7s var(--ressort); animation: pouls-halo 4s ease-in-out infinite;
}
@keyframes pouls-halo { 50% { opacity: .72; scale: 1.06; } }.scene .lueur { position: absolute; z-index: 1; left: 50%; bottom: -60px; width: 640px; transform: translateX(-50%); opacity: .22; pointer-events: none; }
.scene .socle { position: absolute; z-index: 1; left: 50%; bottom: -150px; width: 470px; transform: translateX(-50%); filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .6)); pointer-events: none; }
.scene.eteint .rayons, .scene.eteint .halo-r { opacity: 0; scale: .55; }
.scene.eteint .particules-r { opacity: 0; }

/* Particules qui montent, à la couleur de la rareté. */
.particules-r { position: absolute; z-index: 2; inset: 0; pointer-events: none; transition: opacity .4s; }
.particules-r i {
  position: absolute; width: var(--t); height: var(--t); border-radius: 50%; background: var(--r); box-shadow: 0 0 8px var(--r), 0 0 2px #fff;
  opacity: 0; animation: monte-p var(--d) ease-in var(--a) infinite;
}
.scene.kroma .particules-r i { background: hsl(var(--h) 95% 72%); box-shadow: 0 0 8px hsl(var(--h) 95% 60%), 0 0 2px #fff; }
@keyframes monte-p { 12% { opacity: .95; } 100% { translate: var(--x) -300px; opacity: 0; scale: .3; } }

/* Éclat sur le socle au moment où le nouvel Altéré se pose (animé par accueil.js). */
.scene .eclat {
  position: absolute; z-index: 3; left: 50%; bottom: 60px; width: 380px; height: 220px; margin-left: -190px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, #fff 0, color-mix(in srgb, var(--r) 85%, #fff) 30%, transparent 100%); mix-blend-mode: screen;
}
.eclat-p { position: absolute; z-index: 3; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; pointer-events: none; }

/* L'Altéré : un lien vers sa fiche de l'Osadex. */
.alt-vedette { position: absolute; z-index: 3; left: 50%; bottom: 130px; width: 470px; height: 470px; margin-left: -235px; cursor: pointer; animation: flotte 7s ease-in-out infinite; }
.alt-corps { position: absolute; inset: 0; isolation: isolate; transition: transform .45s var(--ressort), filter .3s; filter: drop-shadow(0 12px 0 rgba(0, 0, 0, .4)); }
.alt-corps img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.alt-corps img.silhouette { filter: brightness(0) drop-shadow(0 0 2px rgba(182, 179, 230, .9)); opacity: .85; }
.alt-vedette:hover .alt-corps, .alt-vedette:focus-visible .alt-corps { transform: translateY(-8px) scale(1.05); filter: drop-shadow(0 12px 0 rgba(0, 0, 0, .4)) drop-shadow(0 0 24px var(--r)); }
.alt-vedette:focus-visible { outline: none; }
/* Kroma : reflet holographique arc-en-ciel, découpé à la forme de l'Altéré. */
.holo {
  position: absolute; inset: 0; opacity: 0; pointer-events: none; mix-blend-mode: soft-light;
  -webkit-mask-position: center bottom; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat;
  mask-position: center bottom; mask-size: contain; mask-repeat: no-repeat;   /* image du masque posée par accueil.js */
  /* 13/11 : « color » remplaçait les teintes de l'Altéré et la bande répétée laissait une coupure verticale.
     Un seul dégradé continu (3 fois la largeur) qui glisse, en lumière douce : les couleurs d'origine restent. */
  background: linear-gradient(115deg, #ff5ea8, #ffcf4d, #70ff94, #4fd8ff, #9d7bff, #ff5ea8, #ffcf4d) 0 0 / 300% 100%;
  animation: holo 6s ease-in-out infinite alternate;
}
.holo::after {
  content: ""; position: absolute; inset: 0; mix-blend-mode: overlay;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .85) 48%, transparent 60%) 0 0 / 250% 100%; animation: reflet-holo 2.6s ease-in-out infinite;
}
@keyframes holo { from { background-position: 0% 0; } to { background-position: 100% 0; } }
@keyframes reflet-holo { 0% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
.scene.kroma .holo { opacity: .9; }
.scene.kroma .alt-corps img:not(.silhouette) { filter: saturate(1.25) brightness(1.06); }
.scene.kroma .rayons { background: conic-gradient(#ff5ea8, #ffcf4d, #70ff94, #4fd8ff, #9d7bff, #ff5ea8); }
.scene.kroma .halo-r { background: radial-gradient(circle, rgba(255, 255, 255, .5), rgba(157, 123, 255, .25) 38%, transparent 64%); animation: pouls-halo 4s ease-in-out infinite, arc-en-ciel 6s linear infinite; }
@keyframes arc-en-ciel { to { filter: hue-rotate(360deg); } }

/* Plaque sous l'Altéré (comme la plaque du personnage de l'écran de sélection) : gemme de rareté, nom, éléments. */
/* Infobulle d'Altéré, composée comme l'en-tête des infobulles du client (AlterationTooltip / dungeonTooltip) :
   fond --background_dark97, texture tooltipBackground teintée de la couleur de la rareté, flèche native de
   l'infobulle (arrow) tournée vers l'Altéré, pastille hexagonale de rareté du jeu, nom en Rowdies (title_medium),
   ligne « rareté ◆ éléments » avec le losange diamondFill du client. Aucun contour clair. */
.plaque-alt {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: 56px; width: fit-content; min-width: 200px; max-width: calc(100% - 40px); margin: 0 auto;
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  padding: 10px 20px 10px 12px; border-radius: 8px; text-decoration: none; color: var(--creme); isolation: isolate;
  background: var(--dark-97); box-shadow: 0 14px 28px -6px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .55);
  transition: transform .35s var(--ressort), filter .35s;
}
/* Teinte de rareté : tooltipBackground (430×126, lumineux d'un côté), retourné comme dans dungeonTooltip. */
.plaque-alt::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--r); opacity: .5;
  -webkit-mask: url("../img/natif/tooltipBackground.png") center / 100% 100% no-repeat; mask: url("../img/natif/tooltipBackground.png") center / 100% 100% no-repeat;
  transform: rotate(180deg); transition: opacity .3s;
}
/* Flèche native de l'infobulle (arrow, pointe à droite) tournée vers le haut, couleur du fond. */
.plaque-alt::after {
  content: ""; position: absolute; left: 50%; top: -13px; width: 22px; height: 20px; margin-left: -11px; background: var(--dark-97);
  -webkit-mask: url("../img/natif/tooltipArrow.png") center / contain no-repeat; mask: url("../img/natif/tooltipArrow.png") center / contain no-repeat;
  transform: rotate(-90deg);
}
.plaque-alt:hover, .plaque-alt:focus-visible { transform: translateY(-4px); filter: drop-shadow(0 0 14px color-mix(in srgb, var(--r) 60%, transparent)); outline: none; }
.plaque-alt:hover::before { opacity: .75; }
.plaque-alt .gemme {
  grid-row: 1 / 3; width: 40px; height: 44px; background: var(--gem) center / contain no-repeat;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .6)) drop-shadow(0 0 8px color-mix(in srgb, var(--r) 70%, transparent));
  animation: gemme-vit 3.4s ease-in-out infinite;
}
@keyframes gemme-vit { 50% { transform: scale(1.08); filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .6)) drop-shadow(0 0 14px var(--r)); } }
.scene.kroma .plaque-alt .gemme { animation: gemme-vit 3.4s ease-in-out infinite, arc-en-ciel 4s linear infinite; }
.plaque-alt b {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 2px 0 0;
  font: 400 23px/1.15 var(--titre); text-transform: uppercase; color: #fff;
  background: var(--balayage) 200% 0 / 250% 100% no-repeat, linear-gradient(180deg, #fff 30%, color-mix(in srgb, var(--r) 55%, #fff) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 #000); animation: reflet-titre 5s ease-in-out infinite;
}
.plaque-ligne { display: flex; align-items: center; gap: 8px; min-height: 22px; font: 700 12px/1.3 var(--texte); letter-spacing: .08em; text-transform: uppercase; color: var(--r); white-space: nowrap; text-shadow: 0 1px 2px #000, 0 0 10px color-mix(in srgb, var(--r) 50%, transparent); }
.plaque-ligne .el { width: 22px; height: 22px; }
#plaque-el { display: inline-flex; align-items: center; gap: 4px; }
#plaque-el:not(:empty)::before {
  content: ""; width: 8px; height: 8px; margin-right: 4px; background: rgba(255, 255, 255, .65);
  -webkit-mask: url("../img/natif/diamondFill.png") center / contain no-repeat; mask: url("../img/natif/diamondFill.png") center / contain no-repeat;
}
.plaque-ligne em { font-style: normal; background: linear-gradient(90deg, #ff5ea8, #ffcf4d, #70ff94, #4fd8ff, #9d7bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Rareté haute : le nom de la rareté scintille comme les objets légendaires du jeu. */
.scene.r-legendaire #plaque-rarete, .scene.r-mythique #plaque-rarete {
  background: var(--balayage) 200% 0 / 300% 100% no-repeat, linear-gradient(var(--r), var(--r));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: reflet-titre 3s ease-in-out infinite;
  text-shadow: none; filter: drop-shadow(0 1px 1px #000) drop-shadow(0 0 6px color-mix(in srgb, var(--r) 60%, transparent));
}

/* Bouton « Aléatoire » : un .bouton secondaire de la 3.7, posé à côté de la plaque ; dé du client (diceShadowOutline). */
.bouton.alea { --h: 44px; position: absolute; z-index: 4; bottom: 62px; left: calc(50% + var(--demi, 110px) + 16px); min-width: 158px; gap: 7px; }
.bouton.alea[disabled] { cursor: progress; border-image-source: url("../img/natif/btn37_secondaire_normal.png"); color: #fff; }
.scene.alea-dessous .bouton.alea { left: 50%; margin-left: -79px; bottom: 6px; }
.scene.alea-dessous .plaque-alt { bottom: 62px; }
.bouton.alea .de { width: 22px; height: 22px; background: url("../img/natif/diceShadowOutline.png") center / contain no-repeat; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .6)); }
.bouton.alea.roule .de { animation: roule-de .9s cubic-bezier(.2, .7, .3, 1); }
@keyframes roule-de { 30% { scale: 1.25; } to { rotate: 720deg; scale: 1; } }

@keyframes flotte { 50% { translate: 0 -12px; } }

/* ── Bande « Les Altérés » sur l'illustration de l'écran de connexion ─ */
.bande-or { position: relative; isolation: isolate; padding: 110px 0 90px; overflow: hidden; }
.bande-or::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("../img/natif/login_background.jpg") center 40% / cover no-repeat; }
.bande-or::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(var(--nuit), rgba(11, 16, 32, .25) 22%, rgba(11, 16, 32, .1) 60%, var(--nuit)), linear-gradient(90deg, rgba(11, 16, 32, .75), transparent 55%); }
.bande-or .cadre { display: grid; grid-template-columns: minmax(0, 470px) minmax(0, 1fr); gap: 30px; align-items: end; }
.ruban {
  --h: 96px; position: relative; display: inline-flex; justify-content: center; align-items: flex-start; height: var(--h); max-width: 100%;
  min-width: calc(var(--h) * 3.2); padding: calc(var(--h) * .17) calc(var(--h) * .1) 0; margin: 0 0 6px -30px; box-sizing: border-box;
  border: solid transparent; border-width: 0 calc(var(--h) * 1.03); border-image: url("../img/natif/background_levelup_banner.png") 0 140 fill / 0 calc(var(--h) * 1.03) stretch;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .5));
}
.ruban span { font: 400 calc(var(--h) * .3) / 1 var(--titre); text-transform: uppercase; white-space: nowrap; color: #fff8e0; text-shadow: 0 3px 0 #7a4a00, 0 0 3px #7a4a00, 1px 1px 0 #7a4a00, -1px -1px 0 #7a4a00; }
.bande-or .texte p { color: var(--creme); font-size: 17px; text-shadow: 0 2px 6px #000; max-width: 380px; }
/* Chiffres du mode : comme les scores de fin de combat du client — grand chiffre Rowdies doré posé sur l'ornement
   rewardOrnament, étiquette dessous ; séparés par le trait vertical natif. Aucune boîte, aucun contour. */
.regles { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px 0; margin: 24px 0 28px; }
.regle { position: relative; display: grid; justify-items: center; min-width: 92px; padding: 0 16px; text-align: center; cursor: default; transition: transform .35s var(--ressort); }
.regle b {
  position: relative; display: block; padding: 0 4px 10px; font: 400 40px/1.05 var(--titre); white-space: nowrap; color: #ffe9a8;
  background: var(--balayage) 200% 0 / 250% 100% no-repeat, var(--or-texte);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .85)); animation: reflet-titre 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .4s);
}
.regle b::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 96px; height: 7px; margin-left: -48px;
  background: url("../img/natif/rewardOrnament.png") center / 100% 100% no-repeat;
}
.regle span { max-width: 130px; margin-top: 4px; font: 700 12.5px/1.25 var(--texte); text-transform: uppercase; letter-spacing: .05em; color: #fff4d8; -webkit-text-stroke: 3px rgba(11, 16, 32, .85); paint-order: stroke fill; text-shadow: 0 1px 4px #000; }
.regle:hover { transform: translateY(-4px); }
.regle:hover b { animation-duration: 1.4s; animation-delay: 0s; }
.defile { position: relative; height: 360px; }
.defile img { position: absolute; bottom: 0; width: 25%; aspect-ratio: 1; object-fit: contain; object-position: bottom; filter: drop-shadow(0 12px 0 rgba(0, 0, 0, .35)); transition: transform .45s var(--ressort), filter .3s; cursor: pointer; }
.defile img:hover { transform: translateY(-18px) scale(1.08); filter: drop-shadow(0 12px 0 rgba(0, 0, 0, .35)) drop-shadow(0 0 24px rgba(255, 226, 140, .9)); }

/* ── Starters : composition de l'écran « Choix d'un serveur » ──────── */
.bande-sombre { position: relative; padding: 30px 0 100px; }
.starters { display: grid; grid-template-columns: repeat(4, minmax(0, 220px)); justify-content: center; gap: 28px; align-items: end; margin-top: 10px; }
.starters .carte-n:nth-child(2) { margin-bottom: 36px; }
.starters .carte-n:nth-child(3) { margin-bottom: 14px; }
.starters .carte-n .cn-sorts { position: absolute; left: 0; right: 0; bottom: 13%; display: flex; justify-content: center; gap: 4px; }
.starters .carte-n .cn-sorts img { width: 34px; height: 34px; border-radius: 7px; box-shadow: 0 2px 0 #000; transition: transform .3s var(--ressort); }
.starters .carte-n:hover .cn-sorts img { transform: translateY(-3px); }
.starters .carte-n:hover .cn-sorts img:nth-child(2) { transition-delay: .05s; }
.starters .carte-n:hover .cn-sorts img:nth-child(3) { transition-delay: .1s; }
.starters .carte-n .cn-meta { bottom: 4.5%; }

/* ── Dresseurs : grande illustration + symboles ─────────────────────── */
.dresseurs .cadre { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 0; align-items: center; }
.illus-classe { position: relative; aspect-ratio: 1980 / 1024; margin-right: -60px; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 50px rgba(0, 0, 0, .6); }
.illus-classe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s ease, transform 6s ease; }
.illus-classe:hover img { transform: scale(1.05); }
.illus-classe::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, rgba(11, 16, 32, .9)); }
.illus-classe .nom-classe { position: absolute; left: 22px; bottom: 16px; z-index: 1; font: 400 34px var(--titre); text-transform: uppercase; text-shadow: var(--ombre-titre); }
.dresseurs .texte { position: relative; z-index: 2; padding: 30px 0 30px 0; }
.dresseurs .texte .fenetre { padding: 26px 26px 24px 40px; }
.dresseurs .texte p { color: var(--doux); margin: 8px 0 18px; }
.symboles { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 20px; }
/* Symboles de classe nus (symbol_<n> du client), sans case : au survol ils montent et pivotent ; le choisi se pose
   sur le halo Standard_GlowUI_01 du client et grandit. */
.symbole { position: relative; display: grid; place-items: center; aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .35s var(--ressort); }
.symbole::before {
  content: ""; position: absolute; inset: -40% -75%; z-index: 0; pointer-events: none; opacity: 0; transform: scale(.4);
  background: url("../img/natif/fxLevelUp.png") center / contain no-repeat, radial-gradient(closest-side, rgba(255, 214, 102, .45), transparent 55%);
  transition: opacity .35s, transform .45s var(--ressort);
}
.symbole img { position: relative; z-index: 1; width: 82%; height: 82%; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .6)) saturate(.8) brightness(.85); transition: transform .4s var(--ressort), filter .3s; }
.symbole:hover { transform: translateY(-4px); }
.symbole:hover img { transform: scale(1.18) rotate(-8deg); filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .6)) saturate(1) brightness(1.08); }
.symbole:hover::before { opacity: .55; transform: scale(.85); }
.symbole[aria-pressed="true"]::before { opacity: 1; transform: scale(1); animation: halo-symbole 2.6s ease-in-out infinite; }
.symbole[aria-pressed="true"] img { transform: scale(1.22); filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .6)) brightness(1.12); }
@keyframes halo-symbole { 50% { transform: scale(1.12) rotate(20deg); opacity: .8; } }

/* ── Bas de l'accueil : actualités + téléchargement ─────────────────── */
.bas-accueil { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.actus { list-style: none; margin: 0; padding: 8px 10px 12px; }
.actus li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 14px 12px; transition: transform .35s var(--ressort); }
.actus li + li::before { content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 2px; background: url("../img/natif/horizontalDividerLinearGradientShadow.png") center / 100% 100%; }
/* Survol : la lueur d'onglet du client (tabBackground) se lève sous la ligne. */
.actus li::after { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../img/natif/tabBackground.png") center bottom / 100% 100% no-repeat; opacity: 0; transition: opacity .3s; }
.actus { position: relative; z-index: 0; }
.actus li:hover { transform: translateX(6px); }
.actus li:hover::after { opacity: 1; }
/* Icône native seule, dorée, sans case. */
.actus .tuile { width: 44px; height: 44px; display: grid; place-items: center; }
.actus .tuile .ico-n { width: 34px; height: 34px; background: var(--or-icone); transition: transform .4s var(--ressort); }
.actus li:hover .tuile .ico-n { transform: scale(1.15) rotate(-8deg); }
.actus time { font: 500 13px var(--texte); color: var(--lavande); }
.actus h3 { font: 400 19px/1.15 var(--titre); text-transform: uppercase; margin: 2px 0 3px; }
.actus p { color: var(--doux); font-size: 15px; }
.mini-dl { position: relative; overflow: hidden; text-align: center; padding: 26px 20px 26px; }
.mini-dl .oeuf { position: relative; width: 170px; margin: 0 auto -8px; }
.mini-dl .oeuf img { position: relative; z-index: 1; width: 150px; margin: 0 auto; animation: flotte 6s ease-in-out infinite; filter: drop-shadow(0 0 20px rgba(53, 205, 238, .55)); }
.mini-dl .oeuf::before { content: ""; position: absolute; left: 50%; top: 48%; width: 320px; aspect-ratio: 499 / 331; transform: translate(-50%, -50%); background: url("../img/natif/fxLevelUp.png") center / contain no-repeat; opacity: .8; }
.mini-dl p { color: var(--doux); margin: 8px 0 14px; font-size: 15px; }

/* ── Pages intérieures ───────────────────────────────────────────────── */
.page-tete { margin-top: 0; }
.onglets { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: -20px auto 18px; position: relative; z-index: 2; }
/* Onglets du client (DofusTab de la 3.7) : pas de case, texte seul ; l'onglet choisi a la lueur tabBackground et le
   trait citron qui s'étire depuis le centre. Les raretés portent leur pastille hexagonale du jeu. */
.onglets button {
  position: relative; height: 40px; padding: 0 12px; background: none; border: 0; border-radius: 0; cursor: pointer;
  font: 600 12.5px var(--texte); letter-spacing: .05em; text-transform: uppercase; color: var(--doux); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px; text-shadow: 0 1px 3px #000; transition: color .2s, transform .3s var(--ressort);
}
.onglets button::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../img/natif/tabBackground.png") center bottom / 100% 100% no-repeat; opacity: 0; transition: opacity .3s; }
.onglets button::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 2px; background: var(--citron); box-shadow: 0 0 8px var(--citron); transform: scaleX(0); transition: transform .35s var(--ressort); }
.onglets button:hover { color: var(--creme); transform: translateY(-2px); }
.onglets button:hover::before { opacity: .5; }
.onglets button[aria-pressed="true"] { color: #fff; }
.onglets button[aria-pressed="true"]::before { opacity: 1; }
.onglets button[aria-pressed="true"]::after { transform: scaleX(1); }
.onglets { isolation: isolate; }
.onglets .el { width: 20px; height: 20px; }
/* Pastille de rareté devant le nom (onglet porteur d'une classe r-<rareté>). */
.onglets button[class*="r-"] { padding-left: 34px; background: var(--gem) 10px center / 17px auto no-repeat; transition: color .2s, transform .3s var(--ressort), background-size .3s var(--ressort); }
.onglets button[class*="r-"]:hover { background-size: 19px auto; }
.outils { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin: 6px 0 34px; }
/* Champ de saisie (TextInput du client) : creux sombre sans contour, filet dégradé natif dessous qui passe au citron
   et s'élargit au focus ; icône qui s'allume. */
.champ {
  position: relative; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; min-width: 0; border-radius: 6px 6px 0 0;
  background: linear-gradient(rgba(5, 6, 14, .9), rgba(14, 16, 32, .85)); border: 0; color: var(--doux);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .6); transition: box-shadow .25s;
}
.champ::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none;
  background: url("../img/natif/horizontalDividerLinearGradient.png") center / 100% 100%; opacity: .8; transition: opacity .25s, filter .25s;
}
.champ:focus-within::after { background: linear-gradient(90deg, transparent, var(--citron) 20%, var(--citron) 80%, transparent); box-shadow: 0 0 10px var(--citron); }
.champ:focus-within { box-shadow: inset 0 3px 8px rgba(0, 0, 0, .6), 0 10px 18px -12px rgba(240, 255, 79, .5); }
.champ input { background: none; border: 0; outline: 0; width: 100%; min-width: 0; color: var(--creme); font-weight: 500; caret-color: var(--citron); }
.champ input::placeholder { color: var(--discret); }
.outils .champ { width: 320px; max-width: 100%; }
/* Bascule (Kroma) : un .bouton secondaire de la 3.7 ; allumée = plaque « survol », halo arc-en-ciel qui tourne. */
.bouton.bascule { --h: 42px; min-width: 128px; color: var(--doux); }
.bouton.bascule:hover { color: #fff; }
.bouton.bascule[aria-pressed="true"] { border-image-source: url("../img/natif/btn37_secondaire_survol.png"); color: #fff; animation: halo-kroma 3s linear infinite; }
@keyframes halo-kroma {
  0%, 100% { filter: drop-shadow(0 0 9px #ff5ea8); } 20% { filter: drop-shadow(0 0 9px #ffcf4d); } 40% { filter: drop-shadow(0 0 9px #70ff94); }
  60% { filter: drop-shadow(0 0 9px #4fd8ff); } 80% { filter: drop-shadow(0 0 9px #9d7bff); }
}
.compteur { font: 400 16px var(--titre); color: var(--or-clair); text-shadow: 0 2px 0 #000; }
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 22px 18px; }
.vide { grid-column: 1 / -1; padding: 50px 20px; text-align: center; color: var(--doux); }

/* Fiche : composition de la fenêtre LevelUp du client (rayons, socle de lumière, ruban). */
dialog.fiche {
  width: min(960px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0; overflow: auto; border: 0; border-radius: 12px; color: var(--creme);
  background: var(--dark);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .85);
}
dialog.fiche[open] { animation: ouvre .4s var(--ressort); }
@keyframes ouvre { from { opacity: 0; transform: translateY(24px) scale(.94); } }
dialog.fiche::backdrop { background: rgba(5, 6, 14, .82); }
.fiche-haut { position: relative; padding: 18px 20px 0; display: grid; place-items: center; }
.fiche-haut .ruban { --h: 100px; margin: 0 auto; }
.fiche-haut .ruban.long span { font-size: calc(var(--h) * .24); }
.fiche-haut .num { position: absolute; left: 20px; top: 18px; font: 400 18px var(--titre); color: var(--discret); }
/* Croix de fermeture du client (cross, version ShadowOutline) seule, sans case. */
.fermer { position: absolute; right: 12px; top: 12px; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; color: var(--creme); transition: transform .3s var(--ressort), color .2s; }
.fermer .ico-n { width: 26px; height: 29px; -webkit-mask: none; mask: none; background: url("../img/natif/crossShadowOutline.png") center / contain no-repeat; transition: filter .25s; }
.fermer:hover { transform: rotate(90deg) scale(1.12); }
.fermer:hover .ico-n { filter: drop-shadow(0 0 6px #ff6a4d) drop-shadow(0 0 2px #ff6a4d); }
.fermer:focus-visible { outline: none; }
.fermer:focus-visible .ico-n { filter: drop-shadow(0 0 6px var(--citron)); }
.fiche-corps { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 26px; padding: 6px 24px 26px; }
.revelation { position: relative; height: 380px; }
.revelation .rais { position: absolute; left: 50%; top: 0; width: 210px; height: 100%; transform: translateX(-50%); background: url("../img/natif/background_levelup_character.png") center bottom / contain no-repeat; }
.revelation .halo { position: absolute; left: 50%; top: 42%; width: 420px; aspect-ratio: 499 / 331; transform: translate(-50%, -50%); background: url("../img/natif/fxLevelUp.png") center / contain no-repeat; opacity: .9; animation: respire 3.5s ease-in-out infinite; }
@keyframes respire { 50% { opacity: .55; transform: translate(-50%, -50%) scale(1.06); } }
.revelation img { position: absolute; left: 50%; bottom: 46px; width: 290px; height: 290px; margin-left: -145px; object-fit: contain; object-position: bottom; filter: drop-shadow(0 10px 0 rgba(0, 0, 0, .4)); animation: flotte 5s ease-in-out infinite; }
.revelation .bouton.bascule { --h: 38px; position: absolute; right: 0; top: 0; min-width: 104px; font-size: 11.5px; }
/* Rareté et éléments sous l'Altéré : ligne d'infobulle du client (pastille hexagonale, texte coloré, losanges
   diamondFill entre les éléments), sans pastilles arrondies. */
.etiquettes { display: flex; flex-wrap: wrap; gap: 6px 0; justify-content: center; align-items: center; margin-top: 8px; }
.etiquette { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px; font: 600 14px var(--texte); color: var(--creme); text-shadow: 0 1px 2px #000; }
.etiquette + .etiquette::before {
  content: ""; width: 8px; height: 8px; margin: 0 10px 0 -10px; background: rgba(255, 255, 255, .55);
  -webkit-mask: url("../img/natif/diamondFill.png") center / contain no-repeat; mask: url("../img/natif/diamondFill.png") center / contain no-repeat;
}
.etiquette.rarete { color: var(--r); font: 400 17px var(--titre); text-transform: uppercase; text-shadow: 0 2px 0 #000, 0 0 12px color-mix(in srgb, var(--r) 55%, transparent); }
.etiquette.rarete::after { content: ""; order: -1; width: 26px; height: 29px; background: var(--gem) center / contain no-repeat; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .6)); animation: gemme-vit 3.4s ease-in-out infinite; }
.etiquette .el { width: 24px; height: 24px; }
.note { color: var(--doux); font-size: 14px; margin-top: 12px; text-align: center; }
/* Intitulé de section des infobulles du client (lbl_info de dungeonTooltip : bande noire à 25 %, section_medium,
   lavande). */
.fiche-infos h3, .bloc > h3 {
  display: flex; align-items: center; min-height: 28px; margin: 0 0 6px; padding: 0 12px; background: rgba(0, 0, 0, .25);
  font: 600 12.5px var(--texte); letter-spacing: .08em; text-transform: uppercase; color: rgba(182, 179, 230, .85);
}
.fiche-infos section + section { margin-top: 22px; }
/* Sort : icône nue (sans cadre ni case), lignes séparées par le diviseur natif à losange (Divider « DiamondOutline »
   des infobulles). Survol : la lueur d'onglet se lève, l'icône monte et s'illumine. */
.sort { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 8px 14px 4px; transition: transform .35s var(--ressort); }
.sort + .sort::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 10px;
  background: url("../img/natif/diamondOutline.png") center / 10px 10px no-repeat, url("../img/natif/horizontalDividerLinearGradientShadow.png") center / 100% 2px no-repeat;
  opacity: .8;
}
.sort::after { content: ""; position: absolute; inset: 4px 0; z-index: -1; background: url("../img/natif/tabBackground.png") center bottom / 100% 100% no-repeat; opacity: 0; transition: opacity .3s; }
.sort:hover { transform: translateX(4px); }
.sort:hover::after { opacity: .9; }
.sort .case { position: relative; width: 58px; height: 58px; display: grid; place-items: center; }
.sort .case img { width: 56px; height: 56px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .55)); transition: transform .4s var(--ressort), filter .3s; }
.sort:hover .case img { transform: translateY(-3px) scale(1.08) rotate(-3deg); filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .55)) drop-shadow(0 0 10px rgba(255, 226, 140, .7)); }
.fiche-infos section, .bloc, .fenetre-corps { isolation: isolate; }
/* Sort signature d'un Mythique : en-tête teinté comme une infobulle de rareté (tooltipBackground rouge), pastille
   hexagonale Mythique devant le mot « Signature ». */
.sort.signature::after {
  inset: 2px 0; opacity: .5; background: #e0483f;
  -webkit-mask: url("../img/natif/tooltipBackground.png") center / 100% 100% no-repeat; mask: url("../img/natif/tooltipBackground.png") center / 100% 100% no-repeat;
  transform: rotate(180deg);
}
.sort.signature:hover::after { opacity: .75; }
.sort .sceau { display: inline-flex; align-items: center; gap: 6px; letter-spacing: .06em !important; }
.sort .sceau::before { content: ""; width: 15px; height: 17px; background: url("../img/natif/rar_mythique.png") center / contain no-repeat; filter: drop-shadow(0 1px 1px #000); }
.sort .tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.sort b { font: 400 18px var(--titre); text-transform: uppercase; }
.sort .cout { font: 600 12px var(--texte); color: var(--citron); white-space: nowrap; }
.sort p { color: var(--doux); font-size: 14px; white-space: pre-line; margin-top: 2px; }
/* Zones : liste à losanges (puces diamondFill du client), niveau en doré ; pas de puces arrondies. */
.zones { display: flex; flex-wrap: wrap; gap: 4px 22px; list-style: none; margin: 0; padding: 0; }
.zones li { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; font-weight: 500; font-size: 14.5px; transition: transform .3s var(--ressort), color .2s; }
.zones li::before { content: ""; width: 9px; height: 9px; flex: none; background: var(--lavande); -webkit-mask: url("../img/natif/diamondFill.png") center / contain no-repeat; mask: url("../img/natif/diamondFill.png") center / contain no-repeat; transition: transform .35s var(--ressort), background-color .2s; }
.zones li:hover { transform: translateX(3px); color: #fff; }
.zones li:hover::before { background: var(--citron); transform: rotate(90deg) scale(1.3); }
.zones li span { color: var(--or-clair); font: 600 11.5px var(--texte); }

/* Classes : grande illustration du dieu de la classe, symboles en bandeau, kit en fenêtre. */
.heros-classe { position: relative; height: 470px; overflow: hidden; }
.heros-classe > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: opacity .4s ease; animation: zoom-lent 14s ease-in-out infinite alternate; }
@keyframes zoom-lent { to { transform: scale(1.06); } }
.heros-classe::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, var(--nuit)), linear-gradient(90deg, rgba(11, 16, 32, .7), transparent 50%); }
.heros-classe .cadre { position: relative; z-index: 1; max-width: 1240px; overflow: visible; height: 100%; display: flex; align-items: flex-end; gap: 20px; padding-bottom: 60px; }
.heros-classe .symb { width: 110px; height: 110px; object-fit: contain; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .5)) drop-shadow(0 0 20px rgba(245, 193, 66, .5)); animation: flotte 5s ease-in-out infinite; }
.heros-classe .sur-titre { display: flex; margin-bottom: 6px; color: #fff4d8; -webkit-text-stroke: 3px rgba(11, 16, 32, .8); paint-order: stroke fill; text-shadow: 0 2px 6px #000; }
/* Les 19 classes sur une seule ligne, sans barre de défilement : les symboles rétrécissent pour tenir (12/11/2026). */
.bande-symboles { position: relative; z-index: 2; margin-top: -34px; display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 4px; overflow: visible; padding: 8px 4px 14px; }
.bande-symboles .symbole { flex: 1 1 0; min-width: 0; max-width: 66px; }
.kit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: 18px; align-items: start; }
.kit .bloc + .bloc { margin-top: 20px; }
.tete-classe { display: flex; align-items: center; gap: 14px; }
.tete-classe img { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .6)); }

/* Guide : étapes alternées. Chaque étape : icône native nue posée sur le halo du client, numéro de l'étape en
   Rowdies doré en bas à droite (comme la quantité d'une case d'inventaire du jeu) ; pas de case, pas de rond citron. */
.chemin { position: relative; max-width: 980px; margin: 0 auto; display: grid; gap: 18px; counter-reset: pas; }
.pas { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: center; width: 82%; counter-increment: pas; }
.pas:nth-child(even) { margin-left: auto; }
.pas .tuile { position: relative; width: 96px; height: 96px; display: grid; place-items: center; transition: transform .4s var(--ressort); }
.pas .tuile::before {
  content: ""; position: absolute; inset: -30px -70px; z-index: -1;
  background: url("../img/natif/fxLevelUp.png") center / contain no-repeat, radial-gradient(closest-side, rgba(255, 214, 102, .3), transparent 50%);
  opacity: .55; animation: halo-symbole 4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.7s);
}
.pas .tuile::after {
  content: counter(pas); position: absolute; right: 2px; bottom: -4px; font: 400 34px/1 var(--titre); color: #ffe9a8;
  background: var(--or-texte); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .9)) drop-shadow(0 0 1px #000);
}
.pas .tuile img { width: 62px; height: 62px; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .6)); }
.pas .tuile .ico-n { width: 52px; height: 52px; background: var(--or-icone); }
.pas:hover .tuile { transform: rotate(-6deg) scale(1.1); }
.pas:hover .tuile::before { opacity: .9; }
.chemin { isolation: isolate; }
.pas .fenetre-corps { padding: 16px 20px; }
.pas h2 { font: 400 22px var(--titre); text-transform: uppercase; color: #ffe9a8; text-shadow: 0 2px 0 #000; }
.pas p { color: var(--doux); margin-top: 4px; }
.pas .suite { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
/* Starter du guide : portrait nu qui déborde, nom en Rowdies dessous ; halo de l'élément au survol. */
.mini-st { position: relative; display: inline-grid; justify-items: center; gap: 0; min-width: 92px; padding: 0 4px; font: 400 13px/1.1 var(--titre); text-transform: uppercase; color: var(--creme); text-shadow: 0 2px 0 #000; text-decoration: none; text-align: center; transition: transform .35s var(--ressort); }
.mini-st::before { content: ""; position: absolute; left: 50%; top: 4px; width: 76px; height: 76px; margin-left: -38px; z-index: -1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--el) 55%, transparent), transparent 68%); opacity: .55; transition: opacity .3s, transform .4s var(--ressort); }
.mini-st:hover { transform: translateY(-5px); }
.mini-st:hover::before { opacity: 1; transform: scale(1.25); }
.mini-st img { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .45)); transition: transform .4s var(--ressort); }
.mini-st:hover img { transform: scale(1.12); }
kbd { display: inline-block; min-width: 32px; padding: 1px 8px; border-radius: 6px; background: var(--medium); border-bottom: 3px solid #23253c; font: 700 14px var(--texte); color: var(--creme); text-align: center; }
.deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 980px; margin: 40px auto 0; }
.tableau { width: 100%; border-collapse: collapse; font-size: 15px; }
.tableau th, .tableau td { padding: 9px 12px; text-align: left; }
.tableau tbody tr { background: url("../img/natif/horizontalDividerLinearGradientShadow.png") center top / 100% 2px no-repeat; }
.tableau tbody tr:first-child { background: none; }
.tableau th { font: 600 12px var(--texte); letter-spacing: .08em; text-transform: uppercase; color: rgba(182, 179, 230, .85); background: rgba(0, 0, 0, .25); }
.tableau td { font-weight: 500; transition: color .2s; }
.tableau td:first-child { white-space: nowrap; }
.tableau tbody tr:hover td { color: #fff; }
.tableau td:last-child, .tableau th:last-child { text-align: right; }
.tableau td:last-child { font: 400 17px var(--titre); color: #ffe9a8; text-shadow: 0 2px 0 #000; }
/* Pastille de rareté du jeu (hexagone) au lieu d'un carré tourné. */
.tableau .point { display: inline-block; vertical-align: -5px; width: 19px; height: 21px; margin-right: 10px; background: var(--gem) center / contain no-repeat; filter: drop-shadow(0 1px 1px #000); transition: transform .35s var(--ressort); }
.tableau tbody tr:hover .point { transform: scale(1.2) rotate(30deg); }

/* Téléchargement. */
.dl-scene { position: relative; isolation: isolate; overflow: hidden; padding: 40px 0 70px; }
.dl-scene::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("../img/natif/CharacterCreationBackground.jpg") center / cover; }
.dl-scene::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(transparent 60%, var(--nuit)), linear-gradient(90deg, transparent 40%, rgba(11, 16, 32, .75)); }
.dl-scene .cadre { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 30px; align-items: center; }
.dl-gauche { position: relative; height: 520px; }
.dl-gauche .socle { position: absolute; left: 50%; bottom: -110px; width: 420px; transform: translateX(-50%); }
.dl-gauche .lueur { position: absolute; left: 50%; bottom: -40px; width: 560px; transform: translateX(-50%); opacity: .45; }
.dl-gauche .oeuf { position: absolute; left: 50%; bottom: 150px; width: 250px; margin-left: -125px; filter: drop-shadow(0 0 30px rgba(53, 205, 238, .6)); animation: flotte 6s ease-in-out infinite; }
.dl-droite .fenetre-corps { display: grid; gap: 16px; }
.dl-droite .info { color: var(--doux); font-size: 14px; min-height: 20px; }
/* Les trois étapes : compte, launcher, jeu (numéro, icône dorée, verbe, bouton). */
.dl-etapes { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 10px; }
.dl-etapes li { position: relative; display: grid; grid-template-columns: 30px 34px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 58px; padding: 6px 10px 6px 12px; background: var(--dark-80); border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(182, 179, 230, .14); }
.dl-etapes li + li::before { content: ""; position: absolute; left: 26px; top: -11px; width: 2px; height: 10px; background: var(--citron); opacity: .55; }
.dl-etapes .n { font: 400 24px/1 var(--titre); color: var(--citron); text-shadow: 0 2px 0 #000; text-align: center; }
.dl-etapes .t .ico-n { width: 30px; height: 30px; background: var(--or-icone); }
.dl-etapes b { font: 400 17px var(--titre); text-transform: uppercase; color: #ffe9a8; text-shadow: 0 2px 0 #000; }
.dl-etapes .bouton { --h: 42px; font-size: 12.5px; }
.atouts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.atouts li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; padding: 8px 6px; transition: transform .35s var(--ressort); }
.atouts li::after { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../img/natif/tabBackground.png") center bottom / 100% 100% no-repeat; opacity: 0; transition: opacity .3s; }
.atouts { isolation: isolate; }
.atouts li:hover { transform: translateX(5px); }
.atouts li:hover::after { opacity: 1; }
.atouts .t { position: relative; width: 44px; height: 44px; display: grid; place-items: center; }
.atouts .t img, .atouts .t .ico-n { width: 34px; height: 34px; background: var(--or-icone); transition: transform .4s var(--ressort); }
.atouts li:hover .t .ico-n { transform: scale(1.15) rotate(-8deg); }
.atouts b { display: block; font: 400 17px var(--titre); text-transform: uppercase; }
.atouts span { color: var(--doux); font-size: 14px; }

/* Compte. */
.compte { max-width: 460px; margin: 30px auto 0; }
.compte .onglets-c { display: grid; grid-template-columns: 1fr 1fr; padding: 8px 8px 0; }
.compte .onglets-c button { position: relative; height: 46px; background: none; border: 0; cursor: pointer; font: 600 13px var(--texte); letter-spacing: .1em; text-transform: uppercase; color: var(--doux); transition: color .2s; }
.compte .onglets-c button:hover { color: var(--creme); }
.compte .onglets-c button[aria-selected="true"] { color: var(--creme); background: url("../img/natif/tabBackground.png") center bottom / 100% 100% no-repeat; }
.compte .onglets-c button[aria-selected="true"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; background: var(--citron); box-shadow: 0 0 8px var(--citron); }
.formulaire { padding: 24px; display: grid; gap: 14px; }
.formulaire label { display: grid; gap: 6px; font: 600 13px var(--texte); color: rgba(182, 179, 230, .9); }
.formulaire .champ { height: 48px; }
.formulaire .bouton { margin-top: 8px; width: 100%; }
.message { min-height: 22px; font-weight: 600; text-align: center; }
.message.erreur { color: #ff8a72; } .message.ok { color: var(--citron); }

/* Espace du compte connecté (13/11) : en-tête du compte, puis deux colonnes de fenêtres WindowFigma. Ce qui n'existe
   pas encore : état vide (icône du client sur la lueur fxLevelUp, « Bientôt disponible »), jamais un chiffre inventé. */
.ec { max-width: 1180px; margin: 30px auto 0; display: grid; gap: 22px; }
.ec > .message:empty { display: none; }
.ec-tete { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: 24px 28px; }
.ec-portrait { position: relative; width: 112px; height: 112px; display: grid; place-items: center; }
.ec-portrait::before { content: ""; position: absolute; inset: -18px; background: url("../img/natif/fxLevelUp.png") center / contain no-repeat; opacity: .45; }
.ec-portrait::after { content: ""; position: absolute; inset: 0; background: url("../img/natif/borderTileGoldMedium.png") center / 100% 100% no-repeat; }
.ec-portrait img { position: relative; width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .6)); }
.ec-ident { min-width: 0; }
.ec-pseudo {
  font: 400 30px/1.15 var(--titre); text-transform: uppercase; overflow-wrap: anywhere;
  color: #ffe9a8; background: var(--or-texte); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .85));
}
.ec-login { margin-top: 2px; color: var(--doux); font-size: 14px; overflow-wrap: anywhere; }
.ec-login b { color: var(--creme); font-weight: 600; }
.ec-infos { display: flex; flex-wrap: wrap; gap: 10px 30px; margin: 14px 0 0; }
.ec-infos div { min-width: 0; }
.ec-infos dt { font: 600 11.5px var(--texte); letter-spacing: .06em; text-transform: uppercase; color: var(--discret); }
.ec-infos dd { margin: 2px 0 0; display: flex; align-items: center; gap: 7px; font-weight: 600; color: var(--creme); }
.ec-infos dd .ico-n { width: 18px; height: 18px; background: var(--or-icone); }
.ec-infos dd.staff { color: var(--or-clair); }
.ec-muet { color: var(--discret) !important; font-weight: 500 !important; }
.ec-actif { color: #eaf7b0 !important; }
.ec-actif i { width: 11px; height: 11px; flex: none; background: radial-gradient(circle, #fff 0, var(--citron) 45%, #a8b800 100%);
  -webkit-mask: url("../img/natif/diamondFill.png") center / contain no-repeat; mask: url("../img/natif/diamondFill.png") center / contain no-repeat; }
.ec-actions { display: grid; gap: 10px; justify-items: stretch; min-width: 210px; }

.ec-grille { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.ec-col { display: grid; gap: 22px; min-width: 0; }
.ec-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
.ec-bloc { overflow: hidden; }
.ec-bloc .fenetre-tete { font-size: 17px; margin: 0; }
.ec-bloc .fenetre-tete .ico-n { width: 22px; height: 22px; background: var(--or-icone); }
.ec-bloc .fenetre-tete > span:nth-child(2) { min-width: 0; }
.ec-bloc .fenetre-tete small { margin-left: auto; font: 600 13px var(--texte); color: var(--doux); text-transform: none; white-space: nowrap; }
/* « Bientôt » : intitulé de section des infobulles du client (bande sombre, lavande), pas une pastille. */
.bientot { margin-left: auto; padding: 3px 9px; background: rgba(0, 0, 0, .25); border-radius: 3px; font: 600 11px var(--texte); font-style: normal;
  letter-spacing: .05em; text-transform: uppercase; color: var(--lavande); text-shadow: none; white-space: nowrap; }

/* Personnages : tête de la classe sur le fond de portrait du client, nom, classe, niveau. */
.ec-persos { list-style: none; margin: 0; padding: 8px 14px 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.ec-persos li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 12px 8px 8px;
  background: var(--dark-80); border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(182, 179, 230, .1); }
.ec-persos .tete { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 6px; background: url("../img/natif/portraitBackground.png") center / cover; }
.ec-persos .tete img { width: 50px; height: 50px; object-fit: contain; }
.ec-persos b { display: block; font-weight: 600; line-height: 1.25; color: var(--creme); overflow-wrap: anywhere; }
.ec-persos .classe { display: block; font-size: 13px; color: var(--doux); }
.ec-persos .niv { font: 400 18px/1 var(--titre); color: #ffe9a8; text-shadow: 0 2px 0 #000; white-space: nowrap; }
.ec-persos .niv small { font: 600 11px var(--texte); color: var(--discret); margin-right: 3px; text-shadow: none; }
.ec-persos li.vide { grid-column: 1 / -1; display: block; background: none; box-shadow: none; padding: 6px 4px; color: var(--doux); }

/* État vide élégant : icône du client sur sa lueur, titre, une phrase. */
.ec-vide { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 22px 22px 26px; }
.ec-vide-ico { position: relative; width: 64px; height: 64px; display: grid; place-items: center; margin-bottom: 4px; }
.ec-vide-ico::before { content: ""; position: absolute; inset: -22px -40px; background: url("../img/natif/fxLevelUp.png") center / contain no-repeat; opacity: .3; }
.ec-vide-ico .ico-n { position: relative; width: 40px; height: 40px; background: var(--lavande); opacity: .75; }
.ec-vide b { font: 400 16px var(--titre); text-transform: uppercase; color: var(--lavande); text-shadow: 0 2px 0 #000; }
.ec-vide p { max-width: 340px; color: var(--discret); font-size: 14px; }

/* Lignes de la fenêtre Sécurité. */
.ec-ligne { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 20px;
  background: url("../img/natif/horizontalDividerLinearGradientShadow.png") center bottom / 100% 2px no-repeat; }
.ec-ligne-haut { padding-bottom: 6px; background: none; }
.ec-ligne-ico .ico-n { width: 26px; height: 26px; background: var(--or-icone); }
.ec-ligne b { font-weight: 600; color: var(--creme); }
.ec-ligne p { color: var(--doux); font-size: 13.5px; }
.ec-etat { font: 600 11px var(--texte); letter-spacing: .05em; text-transform: uppercase; color: var(--lavande); padding: 3px 9px; background: rgba(0, 0, 0, .25); border-radius: 3px; white-space: nowrap; }
.ec-etat.oui { color: var(--citron); }
.ec-bloc .formulaire.mdp { padding: 4px 20px 18px; background: rgba(0, 0, 0, .14); }
.ec-liste { list-style: none; margin: 0; padding: 4px 20px 6px; display: grid; }
.ec-liste li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(182, 179, 230, .09); }
.ec-liste li:last-child { border-bottom: 0; }
.ec-liste .ico-n { width: 22px; height: 22px; background: var(--lavande); }
.ec-liste b { display: block; font-weight: 600; font-size: 14.5px; color: var(--creme); }
.ec-liste span { display: block; font-size: 13px; color: var(--discret); overflow-wrap: anywhere; }
.ec-liste .ici { color: var(--citron); font: 600 11px var(--texte); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.ec-liste .finie { color: var(--discret); font: 600 11px var(--texte); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.ec-liste li.vide { display: block; color: var(--discret); font-size: 14px; }
.ec-pied { display: flex; justify-content: flex-end; padding: 6px 20px 18px; }
.ec-note { padding: 0 20px 16px; font-size: 12.5px; color: var(--discret); }

@media (max-width: 1200px) {
  .ec-duo { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
  .ec-grille { grid-template-columns: 1fr; }
  .ec-duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .ec { margin-top: 18px; gap: 16px; }
  .ec-tete { grid-template-columns: auto minmax(0, 1fr); gap: 14px 16px; padding: 18px 16px; }
  .ec-portrait { width: 76px; height: 76px; }
  .ec-portrait img { width: 58px; height: 58px; }
  .ec-pseudo { font-size: 22px; }
  .ec-infos { gap: 8px 20px; }
  .ec-actions { grid-column: 1 / -1; min-width: 0; grid-template-columns: 1fr; }
  .ec-grille, .ec-col { gap: 16px; }
  .ec-duo { grid-template-columns: 1fr; gap: 16px; }
  .ec-persos { grid-template-columns: 1fr; padding: 8px 10px 12px; }
  .ec-ligne { grid-template-columns: 30px minmax(0, 1fr) auto; padding: 12px 14px; gap: 10px; }
  .ec-liste, .ec-bloc .formulaire.mdp { padding-left: 14px; padding-right: 14px; }
  .ec-pied { padding: 6px 14px 16px; }
  .ec-note { padding: 0 14px 14px; }
}

/* ── Pied ────────────────────────────────────────────────────────────── */
.pied { position: relative; z-index: 1; margin-top: 60px; padding: 30px 0 36px; background: var(--dark-97); color: var(--discret); font-size: 13px; }
.pied::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: url("../img/natif/horizontalDividerLinearGradientShadow.png") center / 100% 100%; }
.pied .cadre { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; }
.pied img { height: 40px; width: auto; }
.pied nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.pied nav a { color: var(--doux); font: 600 12.5px var(--texte); text-transform: uppercase; letter-spacing: .08em; transition: color .2s; }
.pied nav a:hover { color: var(--or-clair); }
.pied small { margin-left: auto; max-width: 420px; text-align: right; }

/* ── Écrans moyens ───────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .nav a span:not(.ico-n) { display: none; }
  .nav a { padding: 0 12px; }
  .nav a .ico-n { width: 22px; height: 22px; }
  .heros .contenu { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); }
  .alt-vedette { width: 380px; height: 380px; margin-left: -190px; bottom: 140px; }
  .bas-accueil { grid-template-columns: 1fr; }
  .kit { grid-template-columns: 1fr; }
  .starters { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}

/* ── En-tête sur deux rangées : les boutons de compte sous le logo et les pages, toujours visibles ── */
@media (max-width: 1360px) {
  .entete .etat span { display: none; }
  .nav a span:not(.ico-n) { display: none; }
  .nav a { padding: 0 12px; }
  .nav a .ico-n { width: 22px; height: 22px; }
}
@media (max-width: 1100px) {
  .entete .cadre { flex-wrap: wrap; height: auto; min-height: 60px; padding-top: 8px; padding-bottom: 8px; row-gap: 6px; }
  .entete .actions { order: 3; width: 100%; justify-content: center; }
  .entete .etat { display: none; }
  .compte-h { width: 100%; justify-content: center; }
  .compte-h .bouton { flex: 0 1 240px; }
  .nav { flex: 1; }
}

/* ── Héros sur une colonne (tablette, téléphone) ─────────────────────── */
@media (max-width: 1000px) {
  .heros { min-height: 0; }
  .heros .contenu { grid-template-columns: 1fr; padding: 0 16px; }
  .heros .gauche { padding: 26px 0 0; text-align: center; }
  .heros .logo { width: 380px; margin: 0 auto; }
  .heros .accroche { margin: 4px auto 18px; font-size: 15px; }
  .heros .actions-h { justify-content: center; margin: 0; }
  .heros .etat { margin-top: 14px; }
  .heros .degrade { background: linear-gradient(rgba(11, 16, 32, .6), transparent 50%, var(--nuit)); }
  .scene { height: 480px; margin: 0 -16px; }
  .scene .socle { width: 320px; bottom: -40px; }
  .scene .lueur { width: 420px; bottom: 10px; }
  .scene .eclat { width: 280px; height: 160px; margin-left: -140px; bottom: 110px; }
  .alt-vedette { width: 270px; height: 270px; margin-left: -135px; bottom: 172px; }
  .plaque-alt { min-width: 190px; padding: 13px 18px 8px; }
  .plaque-alt b { font-size: 18px; }
}

/* ── Téléphone ───────────────────────────────────────────────────────── */@media (max-width: 760px) {
  body { font-size: 15px; }
  .cadre { padding: 0 16px; }
  .entete .cadre { gap: 10px; }
  .marque img { height: 40px; }
  .compte-h { gap: 4px; }
  .compte-h .bouton { flex: 1 1 0; font-size: 11px; letter-spacing: .02em; padding: 0 8px 1px; }
  .compte-h .bouton .ico-n { display: none; }
  /* Connecté : le pseudo prend la place, « Panel admin » et « Déconnexion » en icône seule (nom au survol). */
  .compte-h .pseudo-h { flex: 1 1 auto; max-width: none; }
  .compte-h .pseudo-h ~ .bouton { flex: 0 0 auto; min-width: 48px; }
  .compte-h .pseudo-h ~ .bouton > span:not(.ico-n) { display: none; }
  .compte-h .pseudo-h ~ .bouton .ico-n { display: inline-block; }
  .pseudo-h { font-size: 13px; padding: 0 2px; }
  .dl-etapes li { grid-template-columns: 26px 30px minmax(0, 1fr); }
  .dl-etapes li .bouton { grid-column: 3; justify-self: start; }
  .menu-bouton { display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto; padding: 0; border: 0; background: none; color: #ffe9a8; cursor: pointer; filter: drop-shadow(0 2px 0 #000); transition: transform .3s var(--ressort); }
  .menu-bouton[aria-expanded="true"] { transform: rotate(90deg); }
  .menu-bouton .ico { width: 24px; height: 24px; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 2px; padding: 8px 12px 14px; margin: 0; background: var(--dark-97); box-shadow: 0 14px 20px rgba(0, 0, 0, .5); }
  .nav.ouverte { display: flex; }
  .nav a { height: 48px; font-size: 14px; }
  .nav a span:not(.ico-n) { display: inline; }
  .nav a[aria-current="page"]::after { display: none; }

  .titre-xl { font-size: 40px; }
  .titre-l { font-size: 30px; }
  .titre-m { font-size: 22px; }

  .heros .logo { width: 290px; }


  .bande-or { padding: 70px 0 50px; }
  .bande-or .cadre { grid-template-columns: 1fr; }
  .ruban { --h: 78px; margin: 0 auto 6px; }
  .fiche-haut { padding: 16px 54px 0 10px; }
  .fiche-haut .ruban { --h: 70px; }
  .fiche-haut .ruban.long { --h: 60px; }
  .fiche-haut .ruban.long span { font-size: calc(var(--h) * .27); }
  /* Très longs noms (boss Mythiques) : deux lignes équilibrées dans la bande du ruban au lieu de déborder. */
  .fiche-haut .ruban.long { --h: 66px; align-items: center; padding-top: 0; padding-bottom: calc(var(--h) * .36); }
  .fiche-haut .ruban.long span { white-space: normal; text-wrap: balance; text-align: center; line-height: .95; font-size: calc(var(--h) * .2); }
  .bouton.jouer { --h: 74px; }
  .bande-or .texte { text-align: center; }
  .bande-or .texte p { margin: 0 auto; }
  .regles { justify-content: center; }
  .defile { height: 170px; }
  .starters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px; }
  .starters .carte-n:nth-child(n) { margin-bottom: 0; }
  .starters .carte-n:nth-child(even) { margin-top: 26px; }
  .starters .carte-n .cn-sorts img { width: 26px; height: 26px; }
  .dresseurs .cadre { grid-template-columns: 1fr; }
  .illus-classe { margin-right: 0; }
  .illus-classe .nom-classe { font-size: 24px; bottom: 34px; }
  /* Noms longs (boss Mythiques) : deux lignes équilibrées plutôt que des points de suspension. */
  .plaque-alt b { white-space: normal; text-wrap: balance; font-size: 19px; line-height: 1.08; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
  .bande-or::after { background: linear-gradient(var(--nuit), rgba(11, 16, 32, .5) 22%, rgba(11, 16, 32, .45) 60%, var(--nuit)); }
  .dresseurs .texte { padding: 0; margin-top: -24px; }
  .dresseurs .texte .fenetre { padding: 22px 16px 20px; }
  .symboles { grid-template-columns: repeat(5, 1fr); }

  .bandeau-titre { height: auto; min-height: 120px; padding: 18px 18px 34px; }
  .bandeau-titre .titre-l { font-size: 25px; }
  .fiche-haut .num { display: none; }
  .onglets { margin-top: -10px; }
  .onglets button { height: 34px; padding: 0 9px; font-size: 11.5px; }
  .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
  .fiche-corps { grid-template-columns: 1fr; padding: 4px 14px 18px; gap: 14px; }
  .revelation { height: 300px; }
  .revelation img { width: 220px; height: 220px; margin-left: -110px; bottom: 36px; }
  .revelation .halo { width: 340px; }
  .heros-classe { height: 300px; }
  .heros-classe .cadre { padding-bottom: 44px; gap: 12px; }
  .heros-classe .symb { width: 70px; height: 70px; }
  /* Téléphone : deux rangées plutôt qu'un défilement. */
  .bande-symboles { flex-wrap: wrap; justify-content: center; }
  .bande-symboles .symbole { flex: 0 0 calc((100% - 36px) / 10); }
  .pas { width: 100%; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
  .pas .tuile { width: 64px; height: 64px; }
  .pas .tuile .ico-n { width: 38px; height: 38px; }
  .pas .tuile img { width: 46px; height: 46px; }
  .pas .tuile::after { font-size: 26px; right: -2px; }
  .regle { min-width: 0; padding: 0 12px; }
  .regle b { font-size: 34px; }
  .pas h2 { font-size: 18px; }
  .deux { grid-template-columns: 1fr; }
  .dl-scene .cadre { grid-template-columns: 1fr; }
  .dl-gauche { height: 300px; margin-bottom: 84px; }
  .dl-gauche .socle { width: 290px; bottom: -80px; }
  .dl-gauche .lueur { width: 380px; }
  .dl-gauche .oeuf { width: 170px; margin-left: -85px; bottom: 100px; }
  .pied small { margin-left: 0; text-align: left; }
}

.sans-anim *, .sans-anim *::before, .sans-anim *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .apparait { opacity: 1; transform: none; }
}

.champ .ico-n { color: var(--discret); }
.champ:focus-within .ico-n { color: var(--citron); }

/* 13/11 soir : boutons nets et angulaires (demande de l'utilisateur) : aplat vert du client 3.7 pour le principal,
   contour fin pour le secondaire, un coin biseauté, pas d'arrondi, texte blanc gras espacé sans contour. */
.bouton {
  --h: 44px; --biseau: 12px;
  border-image: none !important; border-radius: 0; background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--biseau)), calc(100% - var(--biseau)) 100%, 0 100%);
  -webkit-text-stroke: 0; text-shadow: none; font-size: 12.5px; font-weight: 800; letter-spacing: .1em; padding: 0 22px;
  transition: background .15s, box-shadow .15s, color .15s;
}
.bouton:hover, .bouton:focus-visible { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); transform: none; }
.bouton:active { background: rgba(255, 255, 255, .14); transform: none; }
.bouton.primaire { background: #89a401; box-shadow: none; }
.bouton.primaire:hover, .bouton.primaire:focus-visible { background: #9cbb05; box-shadow: none; filter: none; }
.bouton.primaire:active { background: #7a9200; }
.bouton[disabled], .bouton[aria-disabled="true"] { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .35); }
.bouton.primaire[disabled], .bouton.primaire[aria-disabled="true"] { background: #4a5418; }
.bouton.petit { --h: 36px; --biseau: 9px; font-size: 11px; padding: 0 14px; }/* Gros boutons de l'accueil (.jouer) : même style, plus grands, aplat vert ; « Télécharger » en contour (.jouer.contour). */
.bouton.jouer { --h: 54px; --biseau: 16px; background: #89a401; box-shadow: none; font-size: 15px; padding: 0 34px; animation: none; border: 0; }
.bouton.jouer:hover, .bouton.jouer:focus-visible { background: #9cbb05; transform: none; filter: none; }
.bouton.jouer:active { background: #7a9200; transform: none; }
.bouton.jouer::before, .bouton.jouer::after { display: none !important; }
.bouton.jouer.contour { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
.bouton.jouer.contour:hover, .bouton.jouer.contour:focus-visible { background: rgba(255, 255, 255, .08); }