/* ==== Interface/styles.css ==== */
/* Codex AoE IV — thèmes clair et sombre.
 * Mise en page métier conservée ; surfaces, palette et états sans effets lumineux.
 * Aucune feuille du thème historique ne doit être chargée avec ce fichier.
 */

/* Palette et surfaces */
@import url("Interface/refresh-clair-20261012.css?v=3");
@import url("Interface/accueil-illustration-20261012.css?v=6");
@import url("Interface/cadres-outils-20261012.css?v=1");
:root {
  --paper: #f7f7f4;
  --white: #fff;
  --navy: #162032;
  --ink: #202a39;
  --muted: #626c7a;
  --line: #dfe3e9;
  --blue: #376bc1;
  --pale: #eaf0fb;
  --lightblue: #a5c1f1;
  --green: #357657;
  --max: 1320px;
  --nuit: var(--paper);
  --nuit-haut: var(--paper);
  --blanc: var(--ink);
  --gris: var(--muted);
  --gris-clair: #586373;
  --jaune: #987000;
  --carte: var(--white);
  --carte-2: #f1f3f6;
  --carte-nuit: var(--white);
  --survol: #eef3fb;
  --ligne: var(--line);
  --or: var(--blue);
  --or-sombre: var(--blue);
  --bleu: var(--blue);
  --cyan: #267583;
  --roux: #975d2c;
  --violet: #7253a2;
  --rose: #a54777;
  --vert: #357657;
  /* Palette commune aux âges et aux segments des statistiques. */
  --age1: #f17969;
  --age2: #f29d70;
  --age3: #f3bd5c;
  --age4: #48bfa0;
  --nourriture: #bd4740;
  --bois: #98602f;
  --or-res: #80611a;
  --pierre: #62738c;
  --huile: #5f7036;
  --temps: #806c28;
  --feu: #a35b22;
  --pos: #26704b;
  --neg: #bd4740;
  --piste-barre: #dce3ed;
  --texte-info-taille: 15.5px;
  --texte-info-graisse: 400;
  --texte-info-couleur: var(--gris-clair);
  --intitule-taille: 12px;
  --intitule-graisse: 600;
  --intitule-couleur: var(--gris-clair);
  --bandeau-haut-hauteur: 0px;
  --bandeau-gauche-largeur: 0px;
  --bandeau-droit-largeur: 0px;
  --corps-air: 0px;
  --ad: 0px;
  font-family: Inter,Arial,sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}
body {
  min-height: 100vh;
  font-family: Inter,Arial,sans-serif;
}
.surface , .surface-on.on, .surface-on:hover {
  position: relative;
}
.surface-survol {
  cursor: pointer;
  transition: border-color .15s,background-color .15s;
}

/* Polices */
@font-face {
  font-family: Inter;
  src: url("Asset/Font/Inter-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url("Asset/Font/Inter-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url("Asset/Font/Inter-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url("Asset/Font/Inter-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url("Asset/Font/Inter-800.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url("Asset/Font/Inter-900.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}
/* Caractères étendus : mêmes graisses Inter, chargées seulement si le texte les utilise. */
@font-face {
  font-family: Inter;
  src: url("Asset/Font/Inter-latin-ext-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: Inter;
  src: url("Asset/Font/Inter-cyrillic-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: Inter;
  src: url("Asset/Font/Inter-latin-ext-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: Inter;
  src: url("Asset/Font/Inter-cyrillic-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: Inter;
  src: url("Asset/Font/Inter-latin-ext-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: Inter;
  src: url("Asset/Font/Inter-cyrillic-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: Inter;
  src: url("Asset/Font/Inter-latin-ext-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: Inter;
  src: url("Asset/Font/Inter-cyrillic-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: Inter;
  src: url("Asset/Font/Inter-latin-ext-800.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: Inter;
  src: url("Asset/Font/Inter-cyrillic-800.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: Inter;
  src: url("Asset/Font/Inter-latin-ext-900.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: Inter;
  src: url("Asset/Font/Inter-cyrillic-900.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: Barlow;
  src: url("Asset/Font/BarlowCondensed-700.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("Asset/Font/BarlowCondensed-700.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

/* Fonction/Icone/icone */
.icone {
  display: inline-block;
  flex: none;
  background: currentColor;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
}

/* Fonction/Age/age */
.age-banniere {
  width: 1.5em;
  height: 1.5em;
  color: var(--age-couleur);
  vertical-align: -.4em;
}

/* Fonction/TitrePage/titre-page */
.titre-page {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.titre-page-ligne {
  display: flex;
  align-items: stretch;
}
.titre-page-textes {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
}
.titre-page-mot {
  font-size: 35px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  color: var(--ink);
}
.titre-page-sous {
  line-height: 1.45;
  font-size: 12px;
}

/* Fonction/Trait/trait */
.trait {
  --trait-couleur: var(--or);
  flex: none;
  background: var(--carte);
}
.trait-droite {
  --trait-sens: 90deg;
  height: 1px;
  width: 100%;
}
.trait-gauche {
  --trait-sens: 270deg;
  height: 1px;
  width: 100%;
}
.trait-bas {
  --trait-sens: 180deg;
  width: 1px;
  height: 100%;
}
.trait-haut {
  --trait-sens: 0deg;
  width: 1px;
  height: 100%;
}
.trait-centre {
  height: 1px;
  width: 100%;
  background: var(--carte);
}

/* Fonction/BoutonDynamique/bouton-dynamique */
:root {
  --bd-hauteur: 36px;
  --bd-largeur: 100px;
  --bd-fermee: 38px;
  --bd-icone: 16px;
  --bd-espace: 8px;
  --bd-recherche: 260px;
}
.bd-groupe {
  display: flex;
  align-items: center;
  gap: var(--bd-espace);
}
.bd {
  position: relative;
  flex: none;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bd-largeur);
  height: var(--bd-hauteur);
  padding: 0 10px;
  box-sizing: border-box;
  border: 1px solid var(--ligne);
  border-left: 2px solid var(--or-sombre);
  border-radius: 4px;
  background: var(--carte);
  color: var(--blanc);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .05em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease,
             width .3s cubic-bezier(.4,0,.2,1), padding .3s cubic-bezier(.4,0,.2,1);
}
.bd:hover {
  background: var(--survol);
  border-color: var(--or-sombre);
  color: var(--or);
}
.bd.on {
  background: var(--or-sombre);
  border-color: var(--or-sombre);
  color: var(--carte);
}
.bd>.icone {
  width: var(--bd-icone);
  height: var(--bd-icone);
}
.bd>span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  max-width: 90px;
  margin-left: 9px;
  opacity: 1;
  transition: max-width .3s cubic-bezier(.4,0,.2,1), margin-left .3s cubic-bezier(.4,0,.2,1),
             opacity .17s ease;
}
.bd>span:first-child {
  margin-left: 0;
}
.bd-groupe.replie .bd , .bd.ferme {
  width: var(--bd-fermee);
  padding: 0 9px;
}
.bd-groupe.replie .bd>span , .bd.ferme>span {
  max-width: 0;
  margin-left: 0;
  opacity: 0;
}
.bd-oeil {
  position: relative;
  flex: none;
  width: 32px;
  height: var(--bd-hauteur);
  padding: 0;
  border: 0;
  background: none;
  color: var(--or);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bd-oeil:hover {
  color: var(--blanc);
}
.bd-oeil[aria-pressed="true"] {
  color: var(--gris);
}
.bd-oeil-pile {
  display: grid;
  width: 19px;
  height: 19px;
}
.bd-oeil-pile>.icone {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
}
.bd-oeil-barre {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 19'><line x1='2' y1='17' x2='17' y2='2' stroke='%23000' stroke-width='1' stroke-linecap='round'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 19'><line x1='2' y1='17' x2='17' y2='2' stroke='%23000' stroke-width='1' stroke-linecap='round'/></svg>");
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s cubic-bezier(.4,0,.2,1);
}
.bd-oeil[aria-pressed="true"] .bd-oeil-barre {
  transform: scaleX(1);
}
.bd-rech {
  width: var(--bd-fermee);
  padding: 0 9px;
  justify-content: flex-start;
  cursor: pointer;
}
.bd-rech>input {
  flex: none;
  width: 0;
  min-width: 0;
  margin-left: 0;
  border: 0;
  outline: 0;
  background: none;
  color: var(--blanc);
  font: inherit;
  font-weight: 400;
  letter-spacing: 0;
  opacity: 0;
  transition: opacity .17s ease, margin-left .3s cubic-bezier(.4,0,.2,1);
}
.bd-rech>input::placeholder {
  color: var(--gris);
}
.bd-rech>input::-webkit-search-cancel-button {
  display: none;
}
.bd-rech-croix {
  display: none;
  flex: none;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--blanc);
  cursor: pointer;
}
.bd-rech-croix>.icone {
  width: 16px;
  height: 16px;
}
.bd-rech-croix:hover {
  color: var(--or);
}
.bd-rech.ouverte , .bd-groupe.replie .bd-rech.ouverte {
  width: var(--bd-recherche);
  padding: 0 10px;
  cursor: text;
}
.bd-rech.ouverte>input {
  opacity: 1;
  margin-left: 9px;
  width: auto;
  flex: 1;
}
.bd-rech.ouverte>.bd-rech-croix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Fonction/BoutonDrapeau/bouton-drapeau */
:root {
  --bdr-drapeau-l: 32px;
  --bdr-drapeau-h: 18px;
  --bdr-hauteur: 26px;
  --bdr-espace: 4px;
  --bdr-colonne: 56px;
  --bdr-etoile: 10px;
  --bdr-etoile-ecart: 2px;
  --bdr-etoiles-l: calc(3 * var(--bdr-etoile) + 2 * var(--bdr-etoile-ecart));
  --bdr-nom-loupe: 1.12;
}
.bdr-liste {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--bdr-espace);
  width: 100%;
  padding: 10px 0;
  box-sizing: border-box;
  scrollbar-width: none;
}
.bdr-liste::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.bdr-groupe {
  display: flex;
  flex-direction: column;
  gap: var(--bdr-espace);
}
.bdr-trait {
  align-items: center;
  padding: 7px 0 7px 3px;
}
.bdr-trait {
  display: none;
}
.bdr-groupe:not(.cache)~.bdr-groupe:not(.cache)>.bdr-trait {
  display: flex;
}
.bdr.cache , .bdr-groupe.cache {
  display: none;
}
.bdr {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  height: var(--bdr-hauteur);
  padding-left: calc((var(--bdr-colonne) - var(--bdr-drapeau-l)) / 2);
  padding-right: 10px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--gris-clair);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 18px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .14s ease, color .14s ease;
}
.bdr.on {
  font-weight: 600;
}
.bdr-drapeau {
  width: var(--bdr-drapeau-l);
  height: var(--bdr-drapeau-h);
  flex: none;
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  opacity: 1;
  transition: opacity .15s ease;
}
.bdr-drapeau>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bdr-nom.carrousel-loupe {
  --carrousel-loupe: var(--bdr-nom-loupe);
  transform-origin: calc(-8px - var(--bdr-drapeau-l) / 2) center;
}
.bdr-etoiles:not(.bdr .bdr-etoiles) {
  display: flex;
}
.bdr-nom {
  display: none;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  max-width: calc((100% - var(--bdr-drapeau-l) - 16px - var(--bdr-etoiles-l)) / var(--bdr-nom-loupe) - 3px);
}
.bdr-etoiles {
  display: none;
  flex: none;
  align-items: center;
  gap: var(--bdr-etoile-ecart);
  height: var(--bdr-hauteur);
  margin-left: auto;
}
.bdr-etoile {
  width: var(--bdr-etoile);
  height: var(--bdr-etoile);
  color: var(--jaune);
  opacity: .3;
}
.bdr-etoile.on {
  color: var(--jaune);
  opacity: 1;
}
.infobulle.bdr-bulle {
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0;
}
.bdr-liste.large .bdr-trait {
  padding-left: 9px;
}
.bdr-liste.large .bdr-nom {
  display: block;
}
.bdr-liste.large .bdr-etoiles {
  display: flex;
}
.bdr-liste.large .bdr:hover , .bdr-liste.large .bdr.on {
  color: var(--or);
}
.bdr-liste.large .bdr.variante {
  position: relative;
}
.bdr-liste.large .bdr.variante::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 5px;
  bottom: 5px;
  width: 1px;
  background: var(--ligne);
}

/* Fonction/Carrousel/carrousel */
.carrousel {
  --carrousel-loupe: 1.40;
}
.carrousel-loupe {
  transform-origin: center;
  transition: transform .18s cubic-bezier(.4,0,.2,1);
}
.carrousel-element:hover .carrousel-loupe , .carrousel-element.carrousel-loupe:hover {
  transform: scale(var(--carrousel-loupe));
}

/* Fonction/Infobulle/infobulle */
.infobulle {
  position: fixed;
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-5px);
  border-left: 2px solid var(--or-sombre);
  border-radius: 4px;
  padding: 5px 11px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .05em;
  white-space: nowrap;
  transition: opacity .11s ease, transform .11s ease;
}
.infobulle.on {
  opacity: 1;
  transform: translateX(0);
}
.infobulle.infobulle-riche {
  white-space: normal;
  max-width: 280px;
  padding: 12px 14px;
  font-weight: 400;
  letter-spacing: 0;
}

/* Fonction/CadreDetails/cadre-details */
.cadre-details {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}
.cadre-details-contenu {
  flex: 1;
  min-height: 0;
  scrollbar-width: none;
}
.cadre-details-contenu::-webkit-scrollbar {
  display: none;
}
.cadre-details-contenu::after {
  content: "";
  display: block;
  height: 50%;
}

/* Fonction/MenuDeroulant/menu-deroulant */
.deroulant {
  position: fixed;
  z-index: 300;
  min-width: 180px;
  box-sizing: border-box;
  padding: 4px;
  overflow-y: auto;
  border-radius: 6px;
  scrollbar-width: thin;
}
.deroulant-ligne {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  height: 30px;
  padding: 0 9px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--gris-clair);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.deroulant-ligne:hover {
  background: var(--survol);
  color: var(--blanc);
}
.deroulant-ligne.on {
  color: var(--or);
}
.deroulant-image {
  width: 24px;
  height: 15px;
  border-radius: 2px;
  object-fit: cover;
  flex: none;
}
.deroulant-icone {
  width: 16px;
  height: 16px;
}
.deroulant-texte {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.deroulant-sous {
  color: var(--gris);
  font-size: 12px;
}
.deroulant-titre {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px 3px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--or);
  white-space: nowrap;
}
.deroulant-titre .trait {
  flex: 1 1 auto;
  width: auto;
}
.deroulant-carre .deroulant-image {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  object-fit: contain;
  background: var(--carte-2);
}
.deroulant-ligne.inactif {
  color: var(--gris);
  cursor: default;
  opacity: .55;
}
.deroulant-ligne.inactif:hover {
  background: none;
  color: var(--gris);
}

/* Fonction/Panneau/panneau */
.panneau {
  --panneau-couleur: var(--bleu);
  background: var(--carte);
  border: 1px solid color-mix(in srgb, var(--panneau-couleur) 45%, transparent);
  border-radius: 5px;
  box-sizing: border-box;
}
.panneau-titre {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.panneau-point {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--panneau-couleur);
  flex: none;
}
.panneau-contenu p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--gris-clair);
}

/* Fonction/Taux/taux */
.taux {
  --taux-couleur: var(--gris);
  display: grid;
  gap: 7px;
  align-content: start;
  padding: 11px 14px 13px;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--taux-couleur) 55%, transparent);
  border-radius: 5px;
}
.taux-titre {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--blanc);
}
.taux-rangee {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.taux-valeur {
  font-size: 23px;
  font-weight: 700;
  line-height: 1;
  color: var(--taux-couleur);
  font-variant-numeric: tabular-nums;
}
.taux-droite {
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--taux-couleur);
}
.taux-barre>i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--taux-couleur);
  transition: width .3s ease;
}
.taux-barre>i {
  position: relative;
  border-radius: 2px 0 0 2px;
}
.taux-barre>i::after {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 1px;
  background: var(--surface);
  border-radius: 1px;
  pointer-events: none;
  right: -.5px;
}
.taux-barre>i[style*="width: 0%"]::after {
  display: none;
}

/* Fonction/Barre/barre */
.barre {
  position: relative;
  display: flex;
  width: 100%;
  overflow: hidden;
}
.barre>i {
  display: block;
  height: 100%;
  background: var(--barre-couleur, var(--or));
  transition: width .3s ease;
}
.barre:not(.barre-double) {
  background: color-mix(in srgb, var(--barre-couleur, var(--ligne)) 28%, var(--carte-2));
}
.barre-double>i {
  flex: none;
}
.barre-double .barre-gauche {
  background: var(--bleu);
  border-radius: 3px 0 0 3px;
}
.barre-double .barre-droite {
  background: var(--neg);
  border-radius: 0 3px 3px 0;
}
.barre>.barre-etincelle {
  position: absolute;
  top: -1px;
  bottom: -1px;
  height: auto;
  width: 1px;
  margin-left: -.5px;
  background: var(--surface);
  border-radius: 1px;
  transition: none;
  pointer-events: none;
}
.barre-centre {
  overflow: visible;
  background: none;
}
.barre-moitie {
  position: relative;
  display: flex;
  flex: 1 1 50%;
  height: 100%;
  overflow: visible;
}
.barre-moitie-gauche {
  justify-content: flex-end;
  border-radius: 3px 0 0 3px;
}
.barre-moitie-droite {
  justify-content: flex-start;
  border-radius: 0 3px 3px 0;
}
.barre-moitie>i {
  display: block;
  height: 100%;
  flex: none;
  transition: width .3s ease;
}
.barre-moitie-gauche>.barre-gauche {
  background: var(--bleu);
  border-radius: 3px 0 0 3px;
}
.barre-moitie-droite>.barre-droite {
  background: var(--neg);
  border-radius: 0 3px 3px 0;
}
.barre-moitie>.barre-etincelle {
  position: absolute;
  top: -1px;
  bottom: -1px;
  height: auto;
  width: 1px;
  background: var(--surface);
  border-radius: 1px;
  transition: none;
  pointer-events: none;
}
.barre-moitie-gauche>.barre-etincelle {
  right: var(--bout);
  margin-right: -.5px;
}
.barre-moitie-droite>.barre-etincelle {
  left: var(--bout);
  margin-left: -.5px;
}
.barre-centre>.barre-centre-trait {
  position: absolute;
  left: 50%;
  top: -1px;
  bottom: -1px;
  height: auto;
  width: 1px;
  margin-left: -.5px;
  background: var(--surface);
  border-radius: 1px;
  pointer-events: none;
  z-index: 1;
}
.barre:not(.barre-double):not(.barre-centre):not(.duel-civ-barre)>i {
  position: relative;
}
.barre:not(.barre-double):not(.barre-centre):not(.duel-civ-barre)>i:first-child {
  border-radius: 3px 0 0 3px;
}
.barre>i.barre-zero::after , .barre>i[hidden] {
  display: none;
}
.barre:not(.barre-double):not(.barre-centre):not(.duel-civ-barre)>i::after {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 1px;
  background: var(--surface);
  border-radius: 1px;
  pointer-events: none;
  right: -.5px;
}
.barre:not(.barre-double):not(.barre-centre):not(.duel-civ-barre)>i[style*="width: 0%"]::after {
  display: none;
}

/* Fonction/Onglets/onglets */
.onglets {
  --onglets-actif: var(--or);
  padding: 10px 0 0;
}
.onglets-rangee {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 6px;
}
.onglets-trait {
  --trait-couleur: var(--onglets-actif);
}
.onglet {
  --onglet-couleur: var(--or);
  --codex-accent: var(--onglet-couleur);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px 6px 11px;
  border: 1px solid transparent;
  background: none;
  color: var(--gris);
  font-family: inherit;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .14s ease, color .14s ease;
}
.onglet-icone {
  width: 20px;
  height: 20px;
  transition: color .15s ease;
}
.onglet:hover {
  color: var(--onglet-couleur);
}
.onglets-serre>.onglets-rangee {
  gap: 2px;
}
.onglets-serre>.onglets-rangee>.onglet {
  padding: 6px 8px 6px 7px;
  gap: 6px;
  letter-spacing: .02em;
}
.onglets-sans-icone>.onglets-rangee>.onglet>.onglet-icone {
  display: none;
}
.onglets-petit>.onglets-rangee>.onglet {
  font-size: 11px;
  letter-spacing: 0;
}
.onglets-tri {
  padding: 4px 0 0;
}
.onglets-tri .onglets-rangee {
  gap: 2px;
  padding-bottom: 4px;
}
.onglets-tri .onglet {
  padding: 5px 10px;
  font-size: 11.5px;
  letter-spacing: .06em;
}
.onglets-tri .onglet-icone {
  width: 17px;
  height: 17px;
}
.onglet-icone-apres {
  margin-left: -1.5px;
  color: var(--or);
}
.onglet[hidden] {
  display: none;
}

/* Fonction/MotsCles/mots-cles */
.mot {
  --codex-accent: currentColor;
  font-weight: 700;
  cursor: pointer;
  border-radius: 2px;
}
.mot-u {
  color: var(--roux);
}
.mot-b {
  color: var(--bleu);
}
.mot-t {
  color: var(--vert);
}
.mot-c {
  color: var(--violet);
}
.mot-p {
  color: var(--cyan);
}
.mot:hover {
  background: color-mix(in srgb, currentColor 18%, transparent);
}
.mot:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 2px;
  background: color-mix(in srgb, currentColor 18%, transparent);
}
.mot-attente {
  color: var(--neg);
  cursor: default;
}
.mot-attente:hover {
  background: none;
}

/* Fonction/Carte/carte */
.carte {
  min-width: 0;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  color: var(--gris-clair);
  font-family: inherit;
}
.carte-image {
  flex: none;
  width: 42px;
  height: 42px;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--surface-accent, var(--or)) 41%, transparent);
  border-radius: 6px;
  background: var(--carte);
  overflow: hidden;
}
.carte-image>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.carte-co {
  flex: 1;
  min-width: 0;
}
.carte-tt {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.carte-titre {
  margin: 0;
  letter-spacing: .03em;
}
.carte-compacte .carte-titre {
  letter-spacing: 0;
}
.carte-titre {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.carte-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--jaune);
  white-space: nowrap;
}
.carte-badge-etoile {
  width: 9px;
  height: 9px;
}
.carte-sous {
  margin: 3px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gris-clair);
}
.carte-bloc {
  margin-top: 13px;
}
.carte-bloc-titre {
  font-size: 14.5px;
}
.carte-bloc-titre+.carte-ligne {
  margin-top: 6px;
}
.carte-bloc-ouvrable {
  cursor: pointer;
}
.carte-corps:empty {
  display: none;
}
.carte-titre+.carte-corps:not(:empty) , .carte-tt+.carte-corps:not(:empty) {
  margin-top: 6px;
}
.carte-ligne {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
}
.carte-lead {
  font-weight: 400;
  color: var(--blanc);
}
.carte-compacte .carte-lead {
  color: var(--gris-clair);
}
.carte-suite {
  color: var(--gris);
  margin-top: 6px;
}
.carte-puce {
  color: var(--blanc);
  margin-top: 3px;
  padding-left: 1.1em;
  text-indent: -1.1em;
}
.carte-lead+.carte-puce {
  margin-top: 5px;
}
.carte-suite+.carte-puce {
  margin-top: 4px;
}
.carte-puce+.carte-suite {
  margin-top: 9px;
}
.carte-explication {
  margin-top: 8px;
  color: var(--gris-clair);
}
.carte-point {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
}
.carte-point>b {
  flex: none;
  font-weight: 700;
  opacity: .85;
}
.carte-lead+.carte-point , .carte-suite+.carte-point, .carte-explication+.carte-point {
  margin-top: 10px;
}
.carte-point+.carte-point {
  margin-top: 2px;
}
.carte-plus {
  color: var(--pos);
}
.carte-moins {
  color: var(--neg);
}
.carte-pied {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 11px;
}
.carte-etiquette {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  border: 1px solid var(--ligne);
  border-radius: 3px;
  padding: 2px 7px;
  color: var(--gris);
}
.carte-etiquette-vert {
  border-color: var(--pos);
  color: var(--pos);
  background: color-mix(in srgb, var(--pos) 12%, transparent);
}
.carte-etiquette .mot {
  font-weight: 700;
}
.carte-note {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--gris-clair);
}
.carte-note-etiquette {
  flex: none;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid var(--or);
  border-radius: 3px;
  padding: 2px 6px;
  color: var(--or);
}

/* Fonction/Pli/pli */
.pli {
  --pli-couleur: var(--or);
  margin: 0 0 10px;
}
.pli-tete {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  margin: 0;
  padding: 12px 0 8px 4px;
  border: 0;
  background: none;
  color: var(--pli-couleur);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.pli-tete:hover {
  color: var(--blanc);
}
.pli-chevron {
  width: 10px;
  height: 10px;
  transform: rotate(90deg);
  transition: transform .14s ease;
}
.pli.replie .pli-chevron {
  transform: rotate(0deg);
}
.pli-titre {
  flex: 0 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.pli-trait {
  flex: 1;
  width: auto;
  --trait-couleur: var(--pli-couleur);
}
.pli-corps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
}
.pli-corps[hidden] {
  display: none;
}
.pli-surface .pli-titre {
  --titre-couleur: var(--pli-couleur);
}
.pli-surface>.pli-tete:hover .pli-titre {
  --titre-couleur: var(--blanc);
}
.pli-age .pli-titre {
  display: flex;
}
.pli-age .age-banniere {
  width: 20px;
  height: 20px;
  margin: -4px 0;
}
.pli-age>.pli-tete:hover .age-banniere {
  color: var(--blanc);
}

/* Fonction/Bloc/bloc */
.bloc {
  --bloc-couleur: var(--or);
  position: relative;
  padding: 14px;
  color: var(--gris-clair);
}
.bloc:not(.surface) {
  background: var(--carte);
  border: 1px solid var(--ligne);
  border-left: 3px solid var(--bloc-couleur);
  border-radius: 8px;
}
.bloc[hidden] , .bloc-corps[hidden] {
  display: none;
}
.bloc-tete {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.bloc-mots {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.bloc-titre {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--bloc-titre-couleur, var(--bloc-couleur));
}
.bloc-sous {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--gris-clair);
}
.bloc-chevron {
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: 2px;
  color: var(--bloc-couleur);
  transform: rotate(-90deg);
  transition: transform .14s ease;
}
.bloc.replie .bloc-chevron {
  transform: rotate(90deg);
}
.bloc-tete:hover .bloc-chevron {
  color: var(--blanc);
}
.bloc-a-tete>.bloc-corps {
  margin-top: 10px;
}

/* Fonction/Jauge/jauge */
.jauge {
  display: block;
  width: 100%;
  background: var(--jauge-fond);
}
.jauge {
  position: relative;
}
.jauge::after {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 1px;
  background: var(--surface);
  border-radius: 1px;
  pointer-events: none;
  left: var(--jauge-bout, 0);
  margin-left: -.5px;
}
.jauge.jauge-vide::after {
  display: none;
}

/* Fonction/Rang/rang */
:root {
  --rang-conquerant: #96600f;
  --rang-diamant: #376bc1;
  --rang-platine: #267583;
  --rang-or: #866224;
  --rang-argent: #5f6d7c;
  --rang-bronze: #8b5b2c;
}
.rang-icone {
  display: block;
  flex: none;
  object-fit: contain;
}

/* Fonction/Filtre/filtre */
.filtre {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px;
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color .14s ease, background-color .14s ease;
}
.filtre.deroulant-ouvert {
  border-color: var(--or);
  background: var(--survol);
}
.filtre[hidden] {
  display: none;
}
.filtre-libelle {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--bleu);
}
.filtre-valeur {
  font-weight: 600;
}
.filtre-chevron {
  width: 11px;
  height: 11px;
  color: var(--gris);
  transform: rotate(90deg);
}
.filtre.deroulant-ouvert .filtre-chevron {
  transform: rotate(-90deg);
}

/* Fonction/Recherche/recherche */
.recherche {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 32px;
  padding: 0 10px;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--ligne);
  border-radius: 8px;
  background: var(--carte);
  cursor: text;
}
.recherche:focus-within {
  border-color: var(--or);
}
.recherche-loupe {
  width: 14px;
  height: 14px;
  color: var(--gris);
  flex: none;
}
.recherche input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  color: var(--blanc);
  font-family: inherit;
  font-size: 12.5px;
}
.recherche input::placeholder {
  color: var(--gris);
}
.recherche input::-webkit-search-cancel-button {
  display: none;
}
.recherche-croix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--blanc);
  cursor: pointer;
}
.recherche-croix[hidden] {
  display: none;
}
.recherche-croix>.icone {
  width: 15px;
  height: 15px;
}
.recherche-croix:hover {
  color: var(--or);
}

/* Fonction/Photo/photo */
.photo {
  position: relative;
  display: block;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: var(--carte);
  border: 1px solid var(--ligne);
  box-sizing: border-box;
}
.photo>img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-vide {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 58%;
  height: 58%;
  color: var(--gris-clair);
}

/* Fonction/Source/source */
.source {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  border: 1px solid var(--gris);
  border-radius: 8px;
  color: var(--gris-clair);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}
.source.on {
  border-color: var(--or-sombre);
  color: var(--or);
}
.source-bulle {
  position: absolute;
  z-index: 50;
  top: calc(100% + 8px);
  left: -6px;
  width: 280px;
  padding: 9px 12px;
  border: 1px solid var(--ligne);
  border-left: 2px solid var(--or-sombre);
  border-radius: 6px;
  background: var(--carte);
  color: var(--gris-clair);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .12s ease;
}
.source.on .source-bulle {
  opacity: 1;
  visibility: visible;
}

/* Corp/Details/details */
.details {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 0 16px;
}
.details .bloc:not(.surface) {
  background: var(--carte-nuit);
}
.details-identite {
  position: sticky;
  top: 0;
  z-index: 2;
}
.details-rien {
  margin: 0;
  font-size: 12px;
  font-style: italic;
  color: var(--gris);
}
.details-icones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.details-icone {
  --icone-couleur: var(--or);
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--icone-couleur);
  border-radius: 6px;
  background: var(--carte-2);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .14s ease, transform .14s ease;
}
.details-icone>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Les images de monuments portent déjà un cadre doré : il reste hors de la vignette. */
.details-icone > img.image-monument,
.carte-image > img.image-monument {
  clip-path: inset(5%);
  transform: scale(1.12);
}
.details-icone:hover {
  border-color: var(--blanc);
}
.details-icone-bascule {
  border-color: var(--ligne);
}
.details-icone-bascule>img {
  transition: filter .14s ease;
}
.details-icone-bascule:hover {
  border-color: var(--gris-clair);
}
.details-icone-bascule.on {
  border-color: var(--icone-couleur);
}
.details-icone-indispo {
  opacity: .35;
  cursor: default;
}
.details-icone-indispo:hover {
  border-color: var(--ligne);
  transform: none;
}
.details-icone-bascule.on.details-icone-inclus {
  border-color: var(--ligne);
  opacity: .7;
}
.infobulle.details-bulle {
  max-width: 300px;
}
.details-fenetre {
  --fenetre-couleur: var(--or);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.details-fenetre-nom {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fenetre-couleur);
}
.details-fenetre-nom {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
}
.details-fenetre-nom-texte {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.details-fenetre-sous {
  margin: 0;
  font-size: 12.5px;
  color: var(--gris-clair);
}
.details-fenetre-age {
  flex: none;
  width: 24px;
  height: 24px;
  vertical-align: top;
  margin: -4px 0 -5.5px;
}
.details-fenetre-texte {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--blanc);
}

/* Corp/Details/Identite/identite */
.details-identite-ligne {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-right: 30px;
}
.details-image {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 6px;
  background: var(--carte-2);
  overflow: hidden;
}
.details-image>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.details-texte {
  flex: 1;
  min-width: 0;
}
.details-nom {
  margin: -1px 0 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--bloc-couleur);
}
.details-nom {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
}
.details-nom-texte {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.details-sous {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 400;
  color: var(--gris-clair);
}
.details-age {
  flex: none;
  width: 24px;
  height: 24px;
  vertical-align: top;
  margin: -3px 0 -3.5px;
}
.details-classe {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 400;
  color: var(--gris-clair);
}
.details-unique {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 400;
  color: var(--jaune);
}
.details-unique-ligne {
  margin: 4.5px 0 0;
  font-size: 12px;
  line-height: 1.25;
}
.details-unique-etoile {
  width: 11px;
  height: 11px;
}
.details-croix {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cadre-rouge);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .14s ease;
}
.details-croix .icone {
  width: 22px;
  height: 22px;
}
.details-croix:hover {
  color: var(--blanc);
}
.details-identite-sobre .details-identite-ligne {
  align-items: center;
  min-height: 0;
}
.details-identite-sobre .details-nom {
  margin: 0;
}
.details-plus {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 6px 0 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--blanc);
  cursor: pointer;
  transition: color .14s ease;
}
.details-plus:hover {
  color: var(--bloc-couleur);
}
.details-plus-chevron {
  width: 11px;
  height: 11px;
  transform: rotate(90deg);
  transition: transform .14s ease;
}
.details-plus.ouvert .details-plus-chevron {
  transform: rotate(-90deg);
}
.details-infos {
  margin-top: 12px;
  font: 400 14px/1.6 Inter, Arial, sans-serif;
}
.details-classe-seule {
  margin: 0 0 10px;
}
.details-infos[hidden] {
  display: none;
}

/* Corp/Details/Informations/informations */
.details-info-texte {
  margin: 0;
  font: inherit;
  color: var(--blanc);
}
.details-info-point {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 8px 0 0;
  font: inherit;
}
.details-info-point>b {
  flex: none;
  font-weight: 700;
}
.details-info-texte+.details-info-point {
  margin-top: 12px;
}
.details-info-suite {
  margin: 8px 0 0;
  font: inherit;
  color: var(--blanc);
}
.details-info-plus {
  color: var(--pos);
}
.details-info-moins {
  color: var(--neg);
}
.details-info-plus,
.details-info-moins,
.carte-plus,
.carte-moins {
  font-weight: 500;
}

/* Corp/Details/Cout/cout */
.details-cout {
  display: flex;
  gap: 9px;
}
.details-cout {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 14px;
}
.details-cout-producteur {
  flex-basis: 100%;
}
.details-cout-ligne {
  display: flex;
  align-items: center;
  gap: 6px 14px;
  flex-wrap: wrap;
}
.details-cout-ressource {
  --cout-couleur: var(--gris-clair);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--cout-couleur);
}
.details-cout-icone {
  width: 18px;
  height: 18px;
}
.details-cout-chiffre-temps {
  color: var(--blanc);
}
.details-cout-producteur {
  font-size: .92em;
  opacity: .92;
  flex-wrap: wrap;
}
.details-cout-producteur-nom {
  color: var(--gris-clair);
  white-space: nowrap;
}
.details-cout-gratuit {
  font-style: normal;
}
.details-cout-gratuit , .details-cout-producteur-nom {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
}
.details-cout-gratuit {
  color: var(--blanc);
}

/* Corp/Details/Composition/composition */
.details-composition-corps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.details-composition-groupe {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.details-composition-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.details-composition-lieu {
  margin: 0;
  font-size: 12px;
  opacity: .75;
}
.details-composition-ligne {
  display: flex;
  align-items: center;
  gap: 10px;
}
.details-composition-ligne .details-icones {
  flex: 0 0 auto;
}
.details-composition-texte {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Corp/Details/Statistiques/statistiques */
.details-statistiques {
  --stats-base: var(--age1);
  --stats-age2: var(--age2);
  --stats-age3: var(--age3);
  --stats-age4: var(--age4);
  --stats-tech: var(--age4);
  --stats-chiffre: #23324a;
  --nourriture: #ec7068;
  --roux: #da9951;
  --armure-melee: #54ad96;
  --armure-distance: #648fce;
}
.details-statistiques .jauge { --jauge-fond: #edf1f7; }

:root {
  --armure-melee: var(--vert);
  --armure-distance: var(--bleu);
}
.details-stats-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.details-stats-tete-nue {
  justify-content: flex-start;
}
.details-stats-titre {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--bloc-couleur);
}
:root {
  --stats-age: 26px;
}
.details-stats-ages {
  display: flex;
  gap: 6px;
}
.details-stats-age {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 4px;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--age-couleur);
  opacity: .45;
  transition: opacity .14s ease;
}
.details-stats-age.on {
  opacity: 1;
}
.details-stats-age-banniere {
  width: var(--stats-age);
  height: var(--stats-age);
  display: block;
}
.details-stats-age:disabled {
  opacity: .3;
  filter: grayscale(1);
  cursor: default;
}
.details-stats-lignes {
  display: flex;
  flex-direction: column;
}
.details-stat {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 6px;
  padding: 7px 0;
  font-size: 12px;
  color: var(--blanc);
}
.details-stat-ouvrable {
  cursor: pointer;
}
.details-stat-icone {
  width: 18px;
  height: 18px;
}
.details-stat-nom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}
.details-stat-nombres {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.details-stat-nombres > b {
  font-weight: inherit;
}
.details-stat-avec-prefixe {
  grid-template-columns: 18px auto minmax(0, 1fr);
}
.details-stat-avec-prefixe .details-stat-nombres {
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 8px;
}
.details-stat-avec-prefixe .details-stat-nombres>b {
  flex: none;
}
.details-stat-prefixe {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--gris);
}
.details-stat-chevron {
  width: 11px;
  height: 11px;
  color: var(--gris);
  transform: rotate(90deg);
  transition: transform .14s ease;
}
.details-stat.ouvert .details-stat-chevron {
  transform: rotate(-90deg);
}
.details-stat-trou .details-stat-nombres {
  color: var(--neg);
}
.details-stat-zero .details-stat-nombres , .details-stat-zero .details-stat-nom, .details-stat-zero .details-stat-icone {
  color: var(--gris);
}
.details-stat-aucune .details-stat-nombres {
  color: var(--gris);
  font-style: italic;
}
.details-stat-jauge {
  grid-column: 1 / -1;
}
.details-stat-detail {
  display: none;
  flex-direction: column;
  padding: 2px 0 6px 28px;
}
.details-stat.ouvert+.details-stat-detail {
  display: flex;
}
.details-stat.ouvert {
  padding-bottom: 0;
}
.details-stat.ouvert+.details-stat-detail {
  padding-top: 3px;
}
.details-stat-sous {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  font-size: 12px;
  color: var(--gris-clair);
}
.details-stat-sous+.details-stat-sous {
  border-top: 1px solid var(--ligne);
}
.details-stat-sous-nom {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.details-stat-sous .details-stat-nombres {
  flex: none;
  color: inherit;
  font-weight: 500;
}
.details-stat-sous-joue {
  color: var(--blanc);
  font-weight: 600;
}
.details-stats-armes {
  display: flex;
  gap: 6px;
  padding: 4px 0 2px;
}
.details-stats-arme {
  flex: 1 1 0;
  padding: 4px 8px;
  border: 1px solid var(--ligne);
  border-radius: 5px;
  background: var(--carte);
  color: var(--gris-clair);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  transition: border-color .14s ease, box-shadow .14s ease, color .14s ease;
}
.details-stats-arme:hover {
  border-color: var(--gris-clair);
  color: var(--blanc);
}
.details-stats-arme.on {
  border-color: var(--vert);
  color: var(--blanc);
  cursor: default;
}
.details-stat-eteinte {
  opacity: .5;
}
.details-stat-aoe {
  display: inline-block;
  padding: 0;
  border: 0;
  font-size: 9px;
  line-height: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--cyan);
  vertical-align: middle;
}

/* Corp/Civilisation/civilisation */
.civilisation {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.civilisation:is(.civ-en-stats, .civ-en-builds)>:is(.civ-taux, .civ-panneaux, .civ-onglets) {
  display: none;
}

/* Corp/Civilisation/EnTete/en-tete */
.civ-entete {
  display: contents;
}
.civ-identite {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: calc(-1 * var(--corps-air)) calc(-1 * var(--corps-air)) 0;
}
.civ-drapeau {
  flex: none;
  border-radius: 3px;
}
.civ-titre {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.civ-nom {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.1;
}
.civ-stats {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  min-width: 134px;
  padding: 0 11px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  transform-origin: center;
}
.civ-stats:active {
  transform: scale(.93);
}
.civ-boutons {
  display: flex;
  align-items: center;
  gap: 8px;
}
.civ-stats.civ-builds {
  color: var(--violet);
}
.civ-detail {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.civ-periode , .civ-devise {
  margin: 0;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.3;
}
.civ-presentation {
  margin: 0;
  max-width: 92ch;
  font-size: var(--texte-info-taille);
  font-weight: var(--texte-info-graisse);
  line-height: 1.6;
  color: var(--blanc);
}

/* Corp/Civilisation/Taux/taux */
.civ-taux {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Corp/Civilisation/Panneaux/panneaux */
.civ-panneaux {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.civ-panneaux[hidden] {
  display: none;
}

/* Corp/Civilisation/Codex/codex */
.codex {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 0;
  margin-top: -14px;
  --codex-filtres-h: 37px;
}
.codex-filtres {
  top: calc(var(--civ-identite-h, 66px) + var(--civ-tete-h, 90px) - var(--corps-air));
  display: flex;
  gap: 8px;
  height: var(--codex-filtres-h);
  box-sizing: border-box;
  padding-top: 9px;
}
.codex-filtre {
  --codex-famille: var(--or);
  width: 124px;
  height: 28px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: none;
  color: var(--codex-famille);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  transform-origin: center;
  transition: border-color .14s ease, box-shadow .14s ease, transform .1s ease;
}
.codex-filtre-nom {
  white-space: nowrap;
}
.codex-filtre.on {
  transition: border-color .14s ease, box-shadow .14s ease, transform .1s ease;
}
.codex-filtre:active {
  transform: scale(.93);
}
.codex-filtre-unites {
  --codex-famille: var(--roux);
}
.codex-filtre-technologies {
  --codex-famille: var(--vert);
}
.codex-filtre-uniques {
  --codex-famille: var(--or);
}
.codex-arbre {
  --codex-branche: 14px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 0 12px;
}
.codex-ligne {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--codex-age);
  opacity: .75;
  pointer-events: none;
  z-index: 2;
}
.codex-entete {
  top: calc(var(--civ-identite-h, 66px) + var(--civ-tete-h, 90px) - var(--corps-air) + var(--codex-filtres-h) + 9px);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: none;
}
.codex-age {
  padding: 12px 0 10px calc(var(--codex-branche) + 4px);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--codex-age);
}
.codex-age .age-banniere {
  display: block;
  width: 22px;
  height: 22px;
  margin: -3px 0 -4px;
}
.codex-batiment {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px 0;
  align-items: start;
}
.codex:has(.codex-choisi) .codex-batiment:not(.codex-choisi) {
  opacity: .6;
}
.codex-barre {
  --codex-famille: var(--bleu);
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  grid-row: 1;
  margin-left: 0;
  margin-right: 10px;
  min-height: 44px;
}
.codex-age-batiments {
  --codex-age: var(--blanc);
  padding-left: 4px;
}
.codex-barre-nom {
  border: 0 !important;
  background: none !important;
  flex: 1;
  min-width: 0;
}
.codex-chevron {
  width: 40px;
  align-self: stretch;
  border: 0;
  border-left: 1px solid var(--ligne);
  background: none;
  color: var(--blanc);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.codex-chevron .icone {
  width: 11px;
  height: 11px;
  transform: rotate(90deg);
  transition: transform .14s ease;
}
.codex-batiment.replie .codex-chevron .icone {
  transform: rotate(0deg);
}
.codex-batiment.replie .codex-enfants , .codex-uniques .codex-batiment:not(.codex-garde-unique), .codex-uniques .codex-enfants .codex-item:not(.codex-item-unique) {
  display: none;
}
.codex-image>img {
  transition: filter .14s ease, opacity .14s ease;
}
.codex-batiment:not(.codex-choisi) .codex-image>img {
  opacity: 1;
}
.codex-batiment:not(.codex-choisi) .codex-unique , .codex-batiment:not(.codex-choisi) .codex-chevron {
  color: var(--gris);
}
.codex-barre , .codex-enfants .codex-item {
  --surface-accent: var(--ligne);
  --codex-accent: var(--codex-famille);
}
.codex .codex-choisi .codex-barre , .codex .codex-choisi .codex-enfants .codex-item {
  --surface-accent: var(--codex-famille);
  border-color: var(--surface-accent) !important;
}
.codex-choisi .codex-nom {
  --titre-couleur: var(--codex-famille);
}
.codex-batiment:not(.codex-choisi) .codex-nom {
  --titre-couleur: var(--gris);
}
.codex-enfants {
  grid-column: 2 / -1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.codex-rangee {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.codex-sans-unites .codex-rangee-unites:not(.codex-rangee-technologies) , .codex-sans-technologies .codex-rangee-technologies:not(.codex-rangee-unites), .codex-sans-unites.codex-sans-technologies .codex-rangee, .codex-uniques .codex-rangee:not(.codex-rangee-unique) {
  display: none;
}
.codex-rangee {
  position: relative;
}
.codex-lien {
  position: absolute;
  z-index: 3;
  top: 22px;
  height: 1px;
  left: calc(var(--de) * 25% - 10px);
  width: calc((var(--a) - var(--de) - 1) * 25% + 24px);
  background: var(--codex-famille, var(--or));
  pointer-events: none;
  transition: background-color .14s ease, box-shadow .14s ease;
}
.codex-lien-unites {
  --codex-famille: var(--roux);
}
.codex-lien-technologies {
  --codex-famille: var(--vert);
}
.codex-batiment:not(.codex-choisi) .codex-lien {
  background: var(--ligne);
}
.codex-sans-unites .codex-lien-unites , .codex-sans-technologies .codex-lien-technologies, .codex-uniques .codex-lien-commun {
  display: none;
}
.codex-colonne {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 10px;
}
.codex-item {
  --codex-famille: var(--or);
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: var(--codex-branche);
  min-height: 36px;
  padding: 4px 10px 4px 6px;
  color: var(--blanc);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.codex-item-unites {
  --codex-famille: var(--roux);
}
.codex-item-technologies {
  --codex-famille: var(--vert);
}
.codex-item-batiments {
  --codex-famille: var(--bleu);
}
.codex-barre .codex-item {
  margin-left: 0;
}
.codex-image {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--carte-2);
}
.codex-image>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.codex-nom {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.codex-unique {
  width: 12px;
  height: 12px;
  color: var(--jaune);
  flex: none;
}
.codex-sans-unites .codex-item-unites , .codex-sans-technologies .codex-item-technologies {
  display: none;
}

/* Corp/Civilisation/Onglets/onglets */
.civ-onglets-tete {
  top: calc(var(--civ-identite-h, 66px) - var(--corps-air));
  margin: 0 calc(-1 * var(--corps-air));
}
.civ-onglets-tete>.onglets:not(.onglets-tri) .onglet {
  --onglet-haut: var(--gris);
  --onglet-bas: var(--gris);
  transition: transform .14s ease, --onglet-haut .14s ease, --onglet-bas .14s ease;
}
.civ-onglets-tete>.onglets:not(.onglets-tri) .onglet:is(:hover, .on) {
  --onglet-bas: var(--onglet-couleur);
}
.civ-onglets-tete>.onglets:not(.onglets-tri) .onglet>span , .civ-onglets-tete>.onglets:not(.onglets-tri) .onglet>.onglet-icone {
  background: currentColor;
}
.civ-tri[hidden] {
  display: none;
}
.onglets.civ-tri {
  padding-top: 9px;
}
.onglets.civ-tri .onglets-rangee {
  gap: 6px;
  padding-bottom: 4px;
}
.onglets.civ-tri .onglet {
  width: auto;
  height: 28px;
  box-sizing: border-box;
  justify-content: center;
  padding: 0 12px;
  border-radius: 7px;
  color: var(--onglet-couleur);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
  white-space: nowrap;
  transform-origin: center;
  transition: border-color .14s ease, box-shadow .14s ease, transform .1s ease;
}
.onglets.civ-tri .onglet:hover , .onglets.civ-tri .onglet.on {
  transform: none;
}
.onglets.civ-tri .onglet:active {
  transform: scale(.93);
}
.onglets.civ-tri:not(.civ-tri-capacites) .onglet {
  padding: 0 8px;
  gap: 0;
  transition: border-color .14s ease, box-shadow .14s ease, transform .1s ease;
}
.onglets.civ-tri:not(.civ-tri-capacites) .onglet>.onglet-icone {
  width: 17px;
  height: 17px;
}
.onglets.civ-tri:not(.civ-tri-capacites) .onglet>span {
  display: inline-block;
  max-width: 0;
  margin-left: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width .2s cubic-bezier(.4, 0, .2, 1), margin-left .2s cubic-bezier(.4, 0, .2, 1), opacity .16s ease;
}
.onglets.civ-tri:not(.civ-tri-capacites) .onglet.on>span {
  max-width: var(--mot, 120px);
  margin-left: 6px;
  opacity: 1;
}
@media (prefers-reduced-motion:reduce) {
  .onglets.civ-tri .onglet , .onglets.civ-tri .onglet>span {
    transition: none;
  }
}
.civ-ages {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-right: 8px;
  margin-right: 2px;
  border-right: 1px solid var(--ligne);
}
.civ-age {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--gris);
  cursor: pointer;
  transition: color .14s ease, transform .1s ease;
}
.civ-age .icone {
  width: 20px;
  height: 20px;
}
.civ-age.on {
  color: var(--age-couleur);
}
.civ-age:not(.on):hover {
  color: color-mix(in srgb, var(--age-couleur) 55%, var(--gris));
}
.civ-age:active {
  transform: scale(.93);
}
.civ-age:focus-visible {
  outline: 1px solid var(--age-couleur);
  outline-offset: 0;
}
.onglets.civ-tri.civ-tri-capacites .onglet {
  width: auto;
}
.civ-contenu {
  padding: 14px 0 0;
}
.civ-contenu-texte {
  margin: 0;
  max-width: 92ch;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--gris-clair);
}
.civ-cartes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-top: 4px;
}
.civ-choix {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 9px;
  align-items: stretch;
  grid-template-rows: repeat(10,auto);
}
.civ-choix>* {
  height: 100%;
}
.civ-choix>.carte {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1/-1;
}
.civ-choix>.carte>.carte-co {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1/-1;
  align-content: start;
}
.civ-choix>.carte>.carte-co>.carte-corps {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 2/-1;
  align-content: start;
}
.civ-choix>.carte>.carte-co>.carte-corps>* {
  align-self: start;
}
@media (max-width:720px) {
  .civ-choix {
    grid-auto-flow: row;
    grid-template-rows: none;
  }
  .civ-choix>.carte , .civ-choix>.carte>.carte-co, .civ-choix>.carte>.carte-co>.carte-corps {
    display: block;
    grid-row: auto;
  }
}
.civ-groupes {
  display: flex;
  flex-direction: column;
}
.civ-colonnes>.pli-corps , .civ-cartes.civ-trois {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width:720px) {
  .civ-colonnes>.pli-corps , .civ-cartes.civ-trois {
    grid-template-columns: minmax(0, 1fr);
  }
}
.civ-colonnes>.pli-corps>.civ-ligne {
  grid-column-start: 1;
}
.civ-groupes .pli>.pli-tete {
  position: sticky;
  top: calc(var(--civ-identite-h, 66px) + var(--civ-tete-h, 90px) - var(--corps-air));
  z-index: 10;
  background: none;
}

/* Corp/Civilisation/StatCiv/stat-civ */
.civ-statistiques {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.civ-statistiques[hidden] {
  display: none;
}
.civ-stat-rangee {
  display: grid;
  gap: 16px;
}
.civ-stat-bas {
  grid-template-columns: 1.35fr 1.15fr .75fr .75fr;
  align-items: start;
}
.civ-stat-cadre {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px 16px 16px;
}
.civ-stat-tete {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.civ-stat-tete>div {
  min-width: 0;
  flex: 1;
}
.civ-stat-ico {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 1px;
  color: var(--or);
}
.civ-stat-titre {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}
.civ-stat-sous {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--gris-clair);
}
.civ-stat-corps {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.civ-stat-attente {
  margin: auto 0;
  padding: 24px 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--gris);
}
.civ-stat-ligne {
  display: grid;
  align-items: center;
  gap: 12px;
  min-height: 29px;
}
.civ-stat-ligne+.civ-stat-ligne {
  border-top: 1px solid color-mix(in srgb, var(--ligne) 55%, transparent);
}
.civ-stat-ligne.peu {
  opacity: .42;
}
.civ-stat-drapeau {
  width: 24px;
  height: 16px;
  border-radius: 3px;
  object-fit: cover;
  flex: none;
}
.civ-stat-vignette {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 22px;
  border-radius: 4px;
  background: var(--carte);
  border: 1px solid var(--ligne);
  color: var(--gris);
  flex: none;
}
.civ-stat-vignette>.icone {
  width: 14px;
  height: 14px;
}
.civ-stat-nom {
  font-size: 12.5px;
  color: var(--blanc);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.civ-stat-cellule {
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.civ-stat-cellule.gauche {
  color: var(--bleu);
  text-align: right;
}
.civ-stat-cellule.valeur {
  text-align: right;
}

/* Corp/Civilisation/StatCiv/Global/global */
.civ-stat-global {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.civ-stat-global-haut {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.civ-stat-source {
  margin-left: 6px;
  align-self: center;
}
.civ-stat-source , .civ-stat-source.on {
  color: var(--blanc);
  z-index: 1;
}
.civ-stat-global-haut .filtre {
  box-sizing: border-box;
  min-width: 110px;
}
.civ-stat-global-haut .filtre-libelle:empty {
  display: none;
}
.civ-stat-global-haut .filtre-valeur {
  flex: 1;
  text-align: center;
  white-space: nowrap;
}
.civ-stat-global-haut .filtre-chevron {
  display: none;
}
.civ-stat-compteurs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

/* Corp/Civilisation/StatCiv/Duels/duels */
.civ-stat-duels {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.civ-stat-duels .victoire .civ-stat-ligne {
  grid-template-columns: 24px minmax(90px, 150px) 52px minmax(0, 1fr);
}
.civ-stat-duels .duree .civ-stat-ligne {
  grid-template-columns: 24px minmax(90px, 150px) 44px minmax(0, 1fr);
}

/* Corp/Civilisation/StatCiv/Cartes/cartes */
.civ-stat-cartes {
  display: contents;
}
.civ-stat-cartes .civ-stat-ligne {
  gap: 8px;
}
.civ-stat-cartes .victoire .civ-stat-ligne {
  grid-template-columns: 30px minmax(0, 1fr) 44px minmax(40px, .9fr);
}
.civ-stat-cartes .duree .civ-stat-ligne {
  grid-template-columns: 30px minmax(0, 1fr) 40px minmax(40px, .9fr);
}

/* Corp/Civilisation/StatCiv/Meilleurs/meilleurs */
.civ-stat-meilleurs {
  display: contents;
}
.civ-stat-meilleurs .civ-stat-ligne {
  grid-template-columns: 22px 30px minmax(0, 1fr) 48px;
  gap: 8px;
  min-height: 34px;
}
.civ-stat-meilleurs .duels .civ-stat-ligne {
  grid-template-columns: 22px 24px minmax(0, 1fr) 48px;
}
.civ-stat-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--carte);
  border: 1px solid var(--ligne);
  font-size: 11px;
  font-weight: 700;
  color: var(--blanc);
}

/* Corp/Mentions/mentions */
.mentions {
  padding: 56px 0 72px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.85;
  overflow-wrap: anywhere;
}
.mentions-titre {
  font: 700 clamp(36px,4vw,60px)/1.08 Barlow,sans-serif;
  margin: 0 0 22px;
  color: var(--ink);
}
.mentions .mentions-maj {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 30px;
}
.mentions h2 {
  font: 700 29px/1.2 Barlow,sans-serif;
  margin: 40px 0 16px;
  color: var(--ink);
  scroll-margin-top: 24px;
}
.mentions h3 {
  font-size: 15px;
  margin: 24px 0 10px;
  color: var(--ink);
}
.mentions p , .mentions ul {
  margin: 0 0 16px;
  color: var(--muted);
}
.mentions a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mentions strong {
  color: var(--ink);
}
.mentions ul {
  padding-left: 22px;
}
.mentions li {
  margin: 6px 0;
}
.mentions-sommaire {
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 30px 0;
}
.mentions .mentions-sommaire-titre {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink);
  margin: 0 0 12px;
}
.mentions-sommaire ol {
  columns: 2;
  column-gap: 28px;
  padding-left: 20px;
  font-size: 12px;
  margin: 0;
}
.mentions-sommaire li {
  break-inside: avoid;
}
.mentions-sommaire a {
  text-decoration: none;
}
.mentions .mentions-anglais {
  padding: 16px 20px;
  border-left: 3px solid #aac4eb;
  background: var(--tint-eef3fa);
  font-size: 13px;
}
.mentions-bandeau {
  width: 43px;
  height: 43px;
  margin: 20px 0;
}
.mentions .mentions-intro {
  font-size: 15px;
  max-width: 720px;
  margin-bottom: 14px;
}
.mentions-navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
  margin: 24px 0;
}
.mentions-navigation a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
.mentions-navigation a[aria-current=page] {
  background: #162032;
  border-color: #162032;
  color: #fff;
}
.mentions .mentions-choix-etat {
  font-size: 12px;
  margin-top: 12px;
}
.mentions-section[hidden] , .mentions-sommaire li[hidden] {
  display: none !important;
}
.mentions-form {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  display: grid;
  gap: 18px;
}
.mentions-champ {
  display: grid;
  gap: 8px;
  font-size: 13px;
}
.mentions-champ em {
  font-size: 12px;
  color: var(--muted);
  font-style: normal;
}
.mentions-form input , .mentions-form select, .mentions-form textarea {
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  box-sizing: border-box;
}
.mentions-form textarea {
  resize: vertical;
  min-height: 150px;
}
.mentions-piege {
  display: none;
}
.mentions-bouton {
  padding: 13px 20px;
  background: #162032;
  color: #fff;
  border: 0;
  border-radius: 5px;
  font: 600 12px Inter,sans-serif;
  cursor: pointer;
}
.mentions-bouton:disabled {
  opacity: .5;
}
.mentions-form-pied {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.mentions .mentions-form-etat {
  font-size: 12px;
  margin: 0;
}
.mentions .mentions-form-etat.erreur {
  color: #b63e3e;
}
.mentions .mentions-form-etat.ok {
  color: #357657;
}
@media (max-width:650px) {
  .mentions {
    padding: 30px 0 48px;
  }
  .mentions-sommaire ol {
    columns: 1;
  }
  .mentions-sommaire , .mentions-form {
    padding: 18px;
  }
}

/* Corp/Controle/controle */
.controle {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 2px 24px;
}
.controle-mot {
  margin: 0;
  font-size: var(--texte-info-taille);
  font-weight: var(--texte-info-graisse);
  color: var(--texte-info-couleur);
  max-width: 900px;
}
.controle-mot b {
  color: var(--blanc);
  font-weight: 600;
}
.controle-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.controle-bouton {
  padding: 6px 12px;
  border: 1px solid var(--ligne);
  border-radius: 5px;
  background: var(--carte);
  color: var(--gris-clair);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.controle-bouton:hover {
  background: var(--survol);
  border-color: var(--or-sombre);
  color: var(--blanc);
}
.controle-bouton:first-child {
  color: var(--or);
}
.controle-rapports {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.controle-corps {
  padding: 2px 4px 10px;
}
.controle-comptes {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--gris);
}
.controle-section {
  margin: 12px 0 4px;
  font-size: var(--intitule-taille);
  font-weight: var(--intitule-graisse);
  color: var(--intitule-couleur);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.controle-section-douce {
  color: var(--gris);
}
.controle-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.controle-ligne {
  --controle-couleur: var(--or);
  display: grid;
  grid-template-columns: minmax(140px, 260px) 90px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 4px 10px;
  border-left: 2px solid var(--controle-couleur);
  background: var(--carte-2);
  border-radius: 0 4px 4px 0;
  font-size: 12.5px;
}
.controle-ligne b {
  color: var(--blanc);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.controle-famille {
  color: var(--controle-couleur);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.controle-texte {
  color: var(--gris-clair);
  overflow-wrap: anywhere;
}

/* Corp/Ladder/ladder */
:root {
  --ladder-air: 16px;
}
.ladder {
  display: flex;
  flex-direction: column;
  padding-bottom: 24px;
}
.ladder-liste {
  margin-top: var(--ladder-air);
}

/* Corp/Ladder/Filtres/filtres */
.ladder-filtres {
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
}
.ladder-source {
  align-self: center;
}
.ladder-source , .ladder-source.on {
  border-color: var(--bleu);
  color: var(--blanc);
  background-color: var(--carte);
}
.ladder-filtres-rangee {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ladder-filtres .filtre {
  border-color: var(--bleu);
  background-color: var(--carte);
}
.ladder-filtres .filtre:hover , .ladder-filtres .filtre.deroulant-ouvert {
  border-color: var(--bleu);
  background-color: var(--survol);
}
.ladder-filtres .filtre {
  box-sizing: border-box;
}
.ladder-filtres .filtre-libelle:empty {
  display: none;
}
.ladder-filtres .filtre-valeur {
  flex: 1;
  text-align: center;
  white-space: nowrap;
}
.ladder-filtres .filtre-chevron {
  display: none;
}
.deroulant.ladder-deroulant {
  padding: 6px;
  border-radius: 8px;
}
.deroulant.ladder-deroulant .deroulant-ligne {
  min-height: 32px;
  height: auto;
  padding: 7px 10px;
}
.deroulant.ladder-deroulant .deroulant-ligne.on {
  background: var(--pale);
  color: var(--bleu);
  font-weight: 600;
}
.deroulant.ladder-deroulant .deroulant-ligne.on::after {
  content: "✓";
  flex: none;
}
.ladder-filtres .filtre.filtre-desactive {
  pointer-events: none;
  cursor: default;
  border-color: var(--ligne);
  opacity: .5;
}
.ladder-filtres .filtre.filtre-desactive .filtre-libelle , .ladder-filtres .filtre.filtre-desactive .filtre-valeur, .ladder-filtres .filtre.filtre-desactive .filtre-chevron {
  color: var(--gris);
}
.ladder-recherche {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 32px;
  padding: 0 10px;
  min-width: 200px;
  flex: 1;
  max-width: 280px;
  cursor: text;
  border-radius: 8px;
  background-color: var(--carte);
}
.ladder-recherche-loupe {
  width: 14px;
  height: 14px;
  color: var(--gris);
  flex: none;
}
.ladder-recherche input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  color: var(--blanc);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
}
.ladder-recherche input::placeholder {
  color: var(--gris);
  font-weight: 400;
}
.ladder-recherche input::-webkit-search-cancel-button {
  display: none;
}
.ladder-recherche-croix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--blanc);
  cursor: pointer;
}
.ladder-recherche-croix[hidden] {
  display: none;
}
.ladder-recherche-croix>.icone {
  width: 15px;
  height: 15px;
}
.ladder-recherche-croix:hover {
  color: var(--or);
}
.ladder-filtres-trait {
  margin-top: 2px;
}
.ladder-filtres>.titre-page {
  margin-bottom: 18px;
}

/* Corp/Ladder/Liste/liste */
.ladder-liste {
  --ladder-grille: 60px 36px minmax(180px,220px) minmax(0,1fr) 72px 78px minmax(0,1fr) 72px minmax(150px,270px) minmax(0,1fr) 118px 16px;
}
.ladder-colonnes , .ladder-ligne {
  display: grid;
  grid-template-columns: var(--ladder-grille);
  align-items: center;
  column-gap: 12px;
  padding: 0 16px;
}
.ladder-liste {
  container-type: inline-size;
}
.ladder-colonnes {
  z-index: 4;
  height: 38px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris);
  white-space: nowrap;
  background: var(--carte-nuit);
}
.ladder-colonnes>span:nth-child(1) , .ladder-colonnes>span:nth-child(5), .ladder-colonnes>span:nth-child(6), .ladder-colonnes>span:nth-child(8), .ladder-colonnes>span:nth-child(9), .ladder-colonnes>span:nth-child(11) {
  text-align: center;
}
.ladder-lignes {
  display: flex;
  flex-direction: column;
}
.ladder-ligne-bloc {
  background: var(--carte-nuit);
  border-left: 1px solid var(--ligne);
  border-right: 1px solid var(--ligne);
  border-bottom: 1px solid color-mix(in srgb, var(--ligne) 70%, transparent);
}
.ladder-ligne-bloc:last-child {
  border-bottom: 0;
}
.ladder-ligne {
  width: 100%;
  height: 60px;
  border: 0;
  color: var(--blanc);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background-color .14s ease;
}
.ladder-ligne-bloc.ouvert>.ladder-ligne {
  background: color-mix(in srgb, var(--or) 14%, var(--carte-nuit));
}
.ladder-cellule {
  min-width: 0;
}
.ladder-rang {
  display: flex;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gris-clair);
}
.ladder-nom {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.ladder-nom>b {
  flex: 0 1 auto;
  min-width: 0;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ladder-pastille {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 17px;
  padding: 0 5px;
  border: 1px solid;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}
.ladder-pro {
  color: var(--or);
  border-color: color-mix(in srgb, var(--or) 55%, transparent);
}
.ladder-twitch {
  color: var(--violet);
  border-color: color-mix(in srgb, var(--violet) 55%, transparent);
}
.ladder-twitch.on {
  color: var(--blanc);
  background: var(--violet);
  border-color: var(--violet);
}
.ladder-twitch:hover {
  border-color: var(--violet);
  background: color-mix(in srgb, var(--violet) 25%, transparent);
}
.ladder-vieux {
  color: var(--gris);
  border-color: var(--ligne);
}
.ladder-elo {
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ladder-ecusson {
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--gris-clair);
}
.ladder-parties {
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ladder-taux {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.ladder-taux-pc {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ladder-taux-barre {
  display: block;
  width: 100%;
  height: 5px;
  border-radius: 3px;
  background: var(--piste-barre);
}
.ladder-taux-barre>i {
  display: block;
  height: 100%;
  border-radius: 3px;
}
.ladder-activite {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  color: var(--gris-clair);
}
.ladder-point {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--gris);
}
.ladder-point.on {
  background: var(--pos);
}
.ladder-chevron {
  width: 12px;
  height: 12px;
  color: var(--gris);
  transform: rotate(90deg);
  transition: transform .14s ease;
  justify-self: end;
}
.ladder-ligne-bloc.ouvert .ladder-chevron {
  transform: rotate(-90deg);
}
.ladder-pied {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--carte-nuit);
  border: 1px solid var(--ligne);
  border-radius: 0 0 12px 12px;
  overflow: hidden;
}
.ladder-plus {
  width: 100%;
  height: 44px;
  border: 0;
  background: none;
  color: var(--blanc);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .14s ease, color .14s ease;
}
.ladder-plus:hover {
  background: var(--survol);
  color: var(--or);
}
.ladder-message {
  margin: 0;
  padding: 14px;
  font-size: 12.5px;
  color: var(--gris);
}
.ladder-liste.attend .ladder-lignes {
  opacity: .45;
  transition: opacity .2s ease;
}
.ladder-taux-barre {
  overflow: visible;
}
.ladder-taux-barre>i {
  position: relative;
}
.ladder-taux-barre>i::after {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 1px;
  background: var(--surface);
  border-radius: 1px;
  pointer-events: none;
  right: -.5px;
}
.ladder-taux-barre>i[style*="width: 0%"]::after {
  display: none;
}

/* Corp/Ladder/Fiche/fiche */
.fiche {
  --fiche-air: 12px;
  display: flex;
  flex-direction: column;
  gap: var(--fiche-air);
  margin: var(--fiche-air);
  font-size: 13px;
}
.fiche[hidden] {
  display: none;
}
.fiche {
  animation: fiche-parait .45s ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  .fiche {
    animation: none;
  }
}
.fiche-rangee {
  display: grid;
  gap: var(--fiche-air);
}
.fiche-trois {
  grid-template-columns: repeat(3,minmax(0,1fr));
  grid-auto-rows: minmax(150px,auto);
}
.fiche-deux {
  grid-template-columns: minmax(0,1.6fr) minmax(0,1fr);
  grid-auto-rows: 139px;
}
.fiche-bas {
  grid-template-columns: minmax(0,auto) minmax(280px,1fr);
  min-height: 170px;
}
.fiche-colonne {
  display: flex;
  flex-direction: column;
  gap: var(--fiche-air);
}
.fiche-colonne>div {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.fiche-colonne>div>.fiche-cadre {
  flex: 1;
}
.fiche-rangee>div {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.fiche-rangee>div>.fiche-cadre {
  flex: 1;
}
.fiche-cadre {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 12px 14px;
}
.fiche-cadre.mini {
  padding: 12px 14px;
}
.fiche-titre {
  margin: 0 0 11px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  --titre-couleur: var(--gris);
}
.fiche-cadre.vert .fiche-titre {
  --titre-couleur: var(--pos);
}
.fiche-cadre.rouge .fiche-titre {
  --titre-couleur: var(--neg);
}
.fiche-titre-rangee {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.fiche-attente {
  margin: auto 0;
  padding: 40px 0;
  text-align: center;
  font-size: 13px;
  color: var(--gris);
}
.fiche-roue {
  display: block;
  margin: 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, var(--gris) 32%, transparent);
  border-top-color: var(--or);
  animation: fiche-tourne .8s linear infinite;
}
.fiche-trio {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
}
.fiche-trio.bas {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--ligne) 60%, transparent);
}
.fiche-trio>span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.fiche-trio b {
  font-weight: 700;
  color: var(--blanc);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fiche-cadre.perf .fiche-trio {
  grid-template-columns: minmax(0,.9fr) minmax(0,1.3fr) minmax(0,.8fr);
}
.fiche-cadre:has(>.fiche-trio) {
  container-type: inline-size;
}
.fiche-trio b {
  font-size: clamp(13px, 6cqi, 19px);
}
.fiche-trio em {
  font-style: normal;
  font-size: 11px;
  color: var(--gris);
}
.fiche-civ {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 13px;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--blanc);
}
.fiche-civ .fiche-drapeau {
  width: 46px;
  height: 29px;
  border-radius: 4px;
  object-fit: cover;
  flex: none;
}
.fiche-carte {
  display: grid;
  grid-template-columns: minmax(0,1fr) 58px 42px;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}
.fiche-carte+.fiche-carte {
  border-top: 1px solid color-mix(in srgb, var(--ligne) 55%, transparent);
}
.fiche-carte-nom {
  font-size: 12.5px;
  color: var(--blanc);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fiche-carte b {
  font-size: 12.5px;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.fiche-carte-n {
  font-size: 12.5px;
  font-weight: 700;
  text-align: right;
  color: var(--blanc);
  font-variant-numeric: tabular-nums;
}
.fiche-cadre.historique {
  overflow: visible;
  z-index: 1;
}
.fiche-courbe-boite {
  position: relative;
  flex: 1;
  min-height: 70px;
  display: flex;
  margin: 6px -14px -12px;
  cursor: crosshair;
}
.fiche-courbe {
  display: block;
  width: 100%;
  height: 100%;
  clip-path: inset(0 round 0 0 10px 10px);
}
.fiche-trace {
  fill: none;
  stroke: var(--violet);
  stroke-width: 1.2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.fiche-degrade-haut {
  stop-color: var(--violet);
  stop-opacity: .45;
}
.fiche-degrade-bas {
  stop-color: var(--violet);
  stop-opacity: .04;
}
.fiche-point {
  position: absolute;
  z-index: 2;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--violet);
  pointer-events: none;
}
.fiche-point[hidden] {
  display: none;
}
.fiche-point-elo {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--carte);
  border: 1px solid var(--ligne);
  border-left: 2px solid var(--violet);
  border-radius: 4px;
  padding: 5px 11px;
  color: var(--blanc);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .05em;
  line-height: normal;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fiche-saisons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.fiche-saison {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 26px;
  padding: 0 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  color: var(--gris);
  background: var(--carte);
  border: 1px solid var(--ligne);
  border-radius: 6px;
}
.fiche-saison.on {
  color: var(--violet);
  border-color: color-mix(in srgb, var(--violet) 55%, transparent);
}
.fiche-pastilles {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.fiche-pastille {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}
.fiche-pastille.v {
  color: var(--pos);
  background: color-mix(in srgb, var(--pos) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--pos) 40%, transparent);
}
.fiche-pastille.d {
  color: var(--neg);
  background: color-mix(in srgb, var(--neg) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--neg) 40%, transparent);
}
.fiche-sous {
  margin: 10px 0 0;
  font-size: 11px;
  color: var(--gris);
}
.fiche-cadre.recents .fiche-pastilles {
  margin: auto 0;
}
.fiche-barres {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0,34px);
  justify-content: start;
  gap: 6px;
  align-items: end;
  height: 118px;
}
.fiche-barre {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  height: 100%;
  justify-content: flex-end;
}
.fiche-barre-tube {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  max-width: 34px;
  border: 1px solid color-mix(in srgb, var(--ligne) 85%, var(--gris));
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
}
.fiche-barre-plein {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 3px 3px 0 0;
  background: var(--tx, var(--bleu));
}
.fiche-barre-pc {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity .12s ease;
  pointer-events: none;
  color: var(--blanc);
}
.fiche-barre:hover .fiche-barre-pc {
  opacity: 1;
}
.fiche-barre-drapeau {
  width: 26px;
  height: 17px;
  border-radius: 3px;
  overflow: hidden;
  flex: none;
}
.fiche-barre-drapeau .fiche-drapeau {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fiche-cadre.civs {
  overflow-x: auto;
  scrollbar-width: thin;
}
.fiche-barre-zero::after {
  display: none;
}
.fiche-barre-plein::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -.5px;
  height: 1px;
  background: var(--surface);
  border-radius: 1px;
  pointer-events: none;
}

/* Corp/Builder/builder */
.civ-builder {
  display: grid;
  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.civ-builder[hidden] {
  display: none;
}
.civ-builder.vide {
  grid-template-columns: minmax(0, 1fr);
}
.civ-builder.vide>:not(.builder-liste) {
  display: none;
}
.builder-liste {
  grid-column: 1/-1;
  grid-row: 1;
  box-sizing: border-box;
  min-width: 0;
  padding: 16px 0;
}
.builder-ordre {
  grid-column: 2;
  grid-row: 2;
}
.builder-cote {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.builder-ordre, .builder-conseils, .builder-infos {
  box-sizing: border-box;
  min-width: 0;
  padding: 16px;
}
.builder-conseils[hidden] {
  display: none;
}
.builder-titre {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}
.builder-liste-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.builder-cartes {
  display: flex;
  flex-direction: row;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--bleu) transparent;
  padding-bottom: 10px;
}
@supports selector(::-webkit-scrollbar) {
  .builder-cartes {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }
}
.builder-cartes::-webkit-scrollbar {
  height: 4px;
  background: transparent;
}
.builder-cartes::-webkit-scrollbar-track {
  background: transparent;
}
.builder-cartes::-webkit-scrollbar-thumb {
  background: var(--bleu);
  border-radius: 999px;
}
.builder-cartes::-webkit-scrollbar-button {
  display: none;
}
.builder-carte {
  display: flex;
  flex-direction: column;
  gap: 9px;
  box-sizing: border-box;
  padding: 14px 16px;
  border-bottom-width: 2px;
  border-radius: 8px;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .14s ease, background-color .14s ease;
}
.builder-carte:hover {
  border-color: color-mix(in srgb, var(--or) 35%, var(--ligne));
  background-color: var(--survol);
}
.builder-carte.on {
  border-color: color-mix(in srgb, var(--or) 35%, var(--ligne));
  border-bottom-color: var(--or);
  background-color: color-mix(in srgb, var(--or) 6%, var(--carte));
}
.builder-carte:focus-visible {
  outline-offset: -3px;
}
.builder-carte-tete {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.builder-carte-titre {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--bleu);
  line-height: 1.5;
}
.builder-carte.on .builder-carte-titre {
  color: var(--bleu);
}
.builder-vues {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 1px;
  font-size: 12px;
  color: var(--gris-clair);
  font-variant-numeric: tabular-nums;
}
.builder-vues>.icone {
  width: 14px;
  height: 14px;
}
.builder-vues>b {
  font-weight: 600;
}
.builder-etiquettes {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.builder-etiquette {
  --t: var(--blanc);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--t) 60%, transparent);
  background: color-mix(in srgb, var(--t) 14%, transparent);
}
.builder-carte .builder-etiquettes {
  margin-top: auto;
  gap: 6px;
}
.builder-carte .builder-etiquette {
  padding: 0;
  border: 0;
  background: none;
  font-size: 11.5px;
  line-height: 1.4;
  font-weight: 500;
}
.builder-carte .builder-etiquette+.builder-etiquette::before {
  content: "·";
  margin-right: 6px;
  color: var(--gris-clair);
}
.builder-carte-pied {
  --bdr-etoile: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.builder-carte-pied .builder-vues {
  font-size: 11px;
  color: var(--gris-clair);
}
.builder-carte-pied .bdr-etoiles {
  height: auto;
  margin-left: 0;
}
.builder-rien {
  margin: 0;
  font-size: 13px;
  color: var(--gris);
}
.builder-ordre-tete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.builder-ordre-titres {
  min-width: 0;
}
.builder-ordre-sous {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--gris-clair);
}
.builder-actions {
  flex: none;
  display: flex;
  gap: 8px;
}
.builder-bouton {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  box-sizing: border-box;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color .14s ease;
}
.builder-bouton>.icone {
  width: 15px;
  height: 15px;
}
.builder-bouton.fait {
  color: var(--pos);
}
.builder-ages {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.builder-age {
  border-radius: 9px;
  overflow: hidden;
}
.builder-age-tete {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
  padding: 9px 14px;
  border: 0;
  color: var(--blanc);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.builder-age-nom {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 700;
}
.builder-age-nom>.age-banniere {
  width: 20px;
  height: 20px;
  color: var(--blanc);
}
.builder-age-filet {
  flex: none;
  width: 1px;
  align-self: stretch;
  background: rgba(255, 255, 255, .25);
}
.builder-age-temps {
  flex: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.builder-age-titre {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--gris-clair);
  overflow: hidden;
  text-overflow: ellipsis;
}
.builder-age-villageois {
  flex: none;
  font-size: 12.5px;
  color: var(--gris-clair);
  white-space: nowrap;
}
.builder-age-chevron {
  flex: none;
  width: 16px;
  height: 16px;
  transform: rotate(90deg);
  transition: transform .15s ease;
}
.builder-age.replie .builder-age-chevron {
  transform: none;
}
.builder-age.replie>.builder-age-corps {
  display: none;
}
.builder-age-corps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 220px);
  gap: 18px;
  padding: 12px 14px 14px;
}
.builder-etapes {
  list-style: none;
  margin: 0;
  padding: 0 0 0 16px;
  border-left: 1px solid color-mix(in srgb, var(--age-c) 45%, transparent);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.builder-etape {
  position: relative;
  display: grid;
  grid-template-columns: 44px 22px 26px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 1.55;
}
.builder-etape::before {
  content: "";
  position: absolute;
  left: -20.5px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--age-c);
}
.builder-etape-temps {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gris-clair);
  font-variant-numeric: tabular-nums;
}
.builder-etape-nombre {
  font-weight: 700;
  color: var(--blanc);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.builder-etape-texte {
  color: color-mix(in srgb,var(--blanc) 82%,var(--gris-clair));
}
.builder-vignette {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--carte-2);
  display: flex;
}
.builder-vignette>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.builder-icone {
  width: 20px;
  height: 20px;
  color: var(--gris-clair);
  justify-self: center;
}
.builder-objectif {
  align-self: start;
  padding-left: 16px;
  border-left: 1px solid var(--ligne);
}
.builder-objectif-titre {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--blanc);
}
.builder-objectif-titre>.icone {
  width: 14px;
  height: 14px;
  color: var(--age-c);
}
.builder-objectif-texte {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--gris-clair);
}
.builder-etape[title] {
  cursor: help;
}
.builder-ordre {
  container-type: inline-size;
}
.builder-cote-titre {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.builder-cote-icone {
  width: 20px;
  height: 20px;
  color: var(--or);
}
.builder-infos .builder-cote-icone {
  color: var(--or);
}
.builder-conseils-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.builder-conseil {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--gris-clair);
}
.builder-conseil>.builder-icone {
  width: 18px;
  height: 18px;
  color: var(--or);
  margin-top: 1px;
}
.builder-conseil>.builder-vignette {
  width: 20px;
  height: 20px;
}
.builder-infos-liste {
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px 14px;
  align-items: center;
  font-size: 13px;
}
.builder-infos-liste>dt {
  color: var(--gris);
  font-weight: 600;
  white-space: nowrap;
}
.builder-infos-liste>dd {
  margin: 0;
  min-width: 0;
  color: var(--blanc);
  overflow-wrap: anywhere;
}
.builder-infos-liste>.builder-infos-plein {
  grid-column: 1 / -1;
}
.builder-infos-liste>dt.builder-infos-plein {
  margin-top: 4px;
}
.builder-infos-liste .bdr-etoiles {
  --bdr-etoile: 12px;
  height: auto;
  margin-left: 0;
}
.builder-monuments {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.builder-monument {
  display: flex;
  align-items: center;
  gap: 8px;
}
.builder-monument>.builder-vignette {
  flex: none;
  width: 26px;
  height: 26px;
}
.builder-auteur {
  color: var(--blanc);
  font-weight: 600;
  text-decoration: none;
}
a.builder-auteur {
  border-bottom: 1px solid color-mix(in srgb, var(--blanc) 35%, transparent);
}
a.builder-auteur:hover {
  color: var(--or);
  border-bottom-color: var(--or);
}
.builder-source {
  color: var(--gris);
}
.builder-video[hidden] {
  display: none;
}
.builder-video-tete {
  margin-bottom: 10px;
}
.builder-video-logo {
  color: var(--neg);
}
.builder-video-chaine {
  font-size: 16px;
}
.builder-video-ecran {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  cursor: pointer;
}
.builder-video-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .85;
  transition: opacity .15s ease;
}
.builder-video-ecran:hover .builder-video-image {
  opacity: 1;
}
.builder-video-apercu {
  display: flex;
  height: 100%;
  min-height: 160px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 20px 12px;
  box-sizing: border-box;
  background: var(--pale);
  color: var(--blanc);
}
.builder-video-apercu small {
  max-width: 32ch;
  text-align: center;
  color: var(--gris);
  font-size: 12px;
  line-height: 1.5;
}
.builder-lecteur.builder-lecteur-consentement {
  width: min(480px,100%);
  aspect-ratio: auto;
  padding: 26px;
  box-sizing: border-box;
  background: var(--white);
  color: var(--blanc);
}
.builder-lecteur-information h2 {
  margin: 0 0 14px;
  font-size: 21px;
}
.builder-lecteur-information p {
  line-height: 1.65;
  color: var(--gris);
}
.builder-lecteur-liens {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
}
.builder-lecteur-liens a {
  color: var(--or);
}
.builder-video-lecture {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 38px;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  background: color-mix(in srgb, var(--neg) 88%, #000);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.builder-video-lecture>.icone {
  width: 18px;
  height: 18px;
  margin-left: 2px;
}
.builder-lecteur-voile {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, .78);
  backdrop-filter: blur(2px);
}
.builder-lecteur {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  background: #000;
}
.builder-lecteur-video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 10px;
  background: #000;
}
.builder-lecteur-fermer {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--neg) 70%, transparent);
  background: #000;
  color: var(--blanc);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.builder-lecteur-fermer>.icone {
  width: 16px;
  height: 16px;
}
.builder-lecteur-fermer:hover {
  color: var(--neg);
}
.builder-langue-reference {
  margin: 0 0 16px;
  padding: 10px 12px;
  border-left: 2px solid var(--or);
  color: var(--gris-clair);
  font-size: .85rem;
  line-height: 1.5;
}
.builder-langue-reference[hidden] {
  display: none;
}

/* Corp/Duel/armurerie */
.armurerie {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
:root {
  --armurerie-grille-air: 10px;
}
.armurerie-entete {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  margin-bottom: 30px;
}

/* Corp/Duel/Technos/technos */
:root {
  --armurerie-techno: 30px;
  --armurerie-techno-air: 6px;
}
.armurerie-technos {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--armurerie-techno-air);
  min-width: 0;
}
.armurerie-techno {
  flex: none;
  width: var(--armurerie-techno);
  height: var(--armurerie-techno);
  padding: 0;
  border: 1px solid var(--ligne);
  border-radius: 5px;
  background: var(--carte);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.armurerie-techno>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter .14s ease;
}
.armurerie-techno:hover {
  border-color: var(--gris-clair);
}
.armurerie-techno.on {
  border-color: var(--vert);
}
.armurerie-techno {
  position: relative;
}
.armurerie-techno-aoe {
  position: absolute;
  right: 1px;
  bottom: 0;
  font-size: 8px;
  line-height: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--cyan);
  pointer-events: none;
}
.armurerie-techno-capacite.on {
  border-color: var(--violet);
}
.armurerie-techno-batiment.on {
  border-color: var(--cyan);
}
.armurerie-technos-cadre {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.armurerie-technos-cadre[hidden] {
  display: none;
}
.armurerie-technos-titre {
  margin: 0;
  font-size: var(--intitule-taille);
  font-weight: var(--intitule-graisse);
  letter-spacing: .01em;
  line-height: 1.2;
  color: var(--intitule-couleur);
}
.armurerie-technos-rien {
  font-size: 12px;
  color: var(--gris);
  line-height: var(--armurerie-techno);
}
.armurerie-ameliorations {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.armurerie-ameliorations .armurerie-technos-titre {
  display: none;
}
.armurerie-ameliorations-onglets {
  padding: 0;
}
.armurerie-ameliorations-onglets>.onglets-rangee {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 0;
}
.armurerie-ameliorations-onglets .onglet {
  flex: 1 1 0;
  min-width: max-content;
  height: 36px;
  box-sizing: border-box;
  justify-content: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--onglet-couleur) 35%, transparent);
  border-radius: 8px;
  background-color: var(--tint-f5f7fa);
  color: var(--gris-clair);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
  white-space: nowrap;
  transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease, color .14s ease;
}
.armurerie-ameliorations-onglets .onglet:is(:hover, .on) {
  transform: none;
  color: var(--blanc);
}
.armurerie-ameliorations-onglets .onglet:hover {
  border-color: var(--onglet-couleur);
}
.armurerie-ameliorations-onglets .onglet.on {
  border-color: var(--onglet-couleur);
  background-color: var(--carte);
}
.armurerie-ameliorations-onglets .onglet:active {
  transform: scale(.97);
}
.armurerie-ameliorations-onglets .onglet-icone {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--onglet-couleur);
}
.armurerie-ameliorations-nombre {
  flex: none;
  margin-left: -3px;
  font-size: 12px;
  font-weight: 500;
  color: var(--gris);
}
.armurerie-ameliorations-onglets .onglet.on .armurerie-ameliorations-nombre {
  color: var(--onglet-couleur);
}
.armurerie-ameliorations-sans-nombre .armurerie-ameliorations-nombre , .armurerie-ameliorations-seul-nom .onglet:not(.on)>span, .armurerie-ameliorations-icones .onglet>span {
  display: none;
}
.armurerie-ameliorations-seul-nom .onglet {
  padding: 0 8px;
}
.armurerie-ameliorations-onglets .onglet:disabled {
  pointer-events: none;
  cursor: default;
  color: var(--gris);
  border-color: color-mix(in srgb, var(--gris) 28%, transparent);
  background-color: var(--tint-f5f7fa);
}
.armurerie-ameliorations-onglets .onglet:disabled .onglet-icone , .armurerie-ameliorations-onglets .onglet:disabled .armurerie-ameliorations-nombre {
  color: var(--gris);
}
.armurerie-ameliorations-onglets .onglet:disabled .onglet-icone {
  opacity: .7;
}

/* Corp/Duel/Combat/combat */
.armurerie-combat-ligne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--combat-milieu, auto) minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  height: 22px;
  padding: 0;
}
.armurerie-combat-titre {
  display: flex;
  justify-content: center;
  font-size: var(--intitule-taille);
  font-weight: var(--intitule-graisse);
  letter-spacing: .01em;
  color: var(--intitule-couleur);
  white-space: nowrap;
}
.armurerie-combat-val {
  display: flex;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--combat-c);
}
.armurerie-combat-nombre {
  position: relative;
}
.armurerie-combat-signe {
  position: absolute;
  right: 100%;
  top: 0;
}
.armurerie-combat-gris .armurerie-combat-titre , .armurerie-combat-gris .armurerie-combat-val {
  color: var(--gris);
  font-weight: 600;
}
.armurerie-combat-reel , .armurerie-combat-total {
  height: 24px;
}
.armurerie-combat-reel .armurerie-combat-val , .armurerie-combat-total .armurerie-combat-val {
  font-size: 15px;
}
.armurerie-combat-reel .armurerie-combat-titre , .armurerie-combat-total .armurerie-combat-titre {
  color: var(--blanc);
}
.armurerie-combat-reel , .armurerie-combat-total {
  margin-bottom: 29px;
}
.armurerie-combat-dot .armurerie-combat-titre {
  cursor: help;
}
.armurerie-combat-section {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 16px;
  margin-bottom: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--or);
  white-space: nowrap;
}
.armurerie-combat-section .trait {
  flex: 1 1 0;
  width: auto;
}
.armurerie-combat-quantite {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 139px;
  height: 60px;
}
.armurerie-combat-quantite-titre {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris);
}
.armurerie-combat-quantite-rangee {
  display: inline-flex;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--combat-c);
  border-radius: 6px;
  background: var(--carte);
  overflow: hidden;
}
.armurerie-combat-quantite-bouton {
  flex: 1 1 0;
  height: 34px;
  border: 0;
  background: none;
  color: var(--combat-c);
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .14s ease;
}
.armurerie-combat-quantite-bouton:hover:not(:disabled) {
  background: var(--survol);
}
.armurerie-combat-quantite-bouton:disabled {
  opacity: .3;
  cursor: default;
}
.armurerie-combat-quantite-val {
  flex: 1.4 1 0;
  min-width: 0;
  width: 0;
  padding: 0;
  text-align: center;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--blanc);
  font-variant-numeric: tabular-nums;
  background: none;
  border: 0;
  border-left: 1px solid var(--ligne);
  border-right: 1px solid var(--ligne);
  outline: none;
  -moz-appearance: textfield;
}
.armurerie-combat-quantite-val::-webkit-outer-spin-button , .armurerie-combat-quantite-val::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.armurerie-combat-quantite-val:focus {
  background: var(--survol);
}

/* Corp/Duel/Haut/haut */
.armurerie-haut-gauche {
  --haut-camp: var(--bleu);
}
.armurerie-haut-droite {
  --haut-camp: var(--neg);
}
.armurerie-haut-choix {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.armurerie-haut-civ {
  height: 34px;
  box-sizing: border-box;
  background-color: var(--carte);
}
.armurerie-haut-familles .onglet {
  height: 34px;
  box-sizing: border-box;
  border: 1px solid var(--haut-c);
  border-radius: 8px;
  background-color: var(--carte);
}
.armurerie-haut-civ {
  --haut-c: var(--haut-camp);
  flex: 0 1 280px;
  min-width: 0;
  padding: 0 12px;
  gap: 10px;
}
.armurerie-haut-civ:hover , .armurerie-haut-civ.deroulant-ouvert {
  border-color: var(--haut-c);
  background-color: var(--survol);
}
.armurerie-haut-civ .filtre-valeur {
  flex: 1;
  min-width: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.armurerie-haut-drapeau {
  flex: none;
  width: 22px;
  height: 14px;
  border-radius: 2px;
  object-fit: cover;
}
.armurerie-haut-familles {
  padding: 0;
}
.armurerie-haut-familles>.onglets-rangee {
  padding-bottom: 0;
  flex-wrap: nowrap;
  gap: 8px;
}
.armurerie-haut-familles>.onglets-trait {
  display: none;
}
.armurerie-haut-familles .onglet {
  --haut-c: var(--gris);
  --onglet-haut: var(--gris);
  --onglet-bas: var(--gris);
  padding: 0 14px 0 12px;
  transition: border-color .14s ease, --onglet-haut .14s ease, --onglet-bas .14s ease;
}
.armurerie-haut-familles .onglet:is(:hover, .on) {
  --haut-c: var(--onglet-couleur);
  --onglet-bas: var(--onglet-couleur);
  transform: none;
}
.armurerie-haut-familles .onglet-icone {
  width: 18px;
  height: 18px;
}
.armurerie-haut-familles .onglet>span , .armurerie-haut-familles .onglet>.onglet-icone {
  background: currentColor;
}
.armurerie-haut-tris {
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 10px;
}
.armurerie-haut-tris>.onglets.civ-tri {
  flex: 1;
  min-width: 0;
}
.armurerie-haut-tris>.onglets.civ-tri {
  padding-top: 0;
}
.armurerie-haut-tris .onglets.civ-tri .onglets-rangee {
  flex-wrap: nowrap;
  padding-bottom: 0;
  gap: 4px;
}
.armurerie-haut-tris .onglets.civ-tri:not(.civ-tri-capacites) .onglet {
  padding: 0 6px;
  flex-shrink: 0;
}
.armurerie-haut-tris .onglets.civ-tri .onglet.on>span {
  max-width: 0;
  margin-left: 0;
  opacity: 0;
}
.armurerie-haut-tris .civ-ages {
  border-right-color: color-mix(in srgb, var(--gris) 40%, var(--carte));
}
.armurerie-haut-tris .onglets.civ-tri .onglet {
  transition: color .14s ease, border-color .14s ease, box-shadow .14s ease, transform .1s ease;
}
.armurerie-haut-tris .onglets.civ-tri .onglet:not(.on):not(:hover) {
  color: var(--gris);
}
.armurerie-haut-liste {
  position: absolute;
  inset: 12px 14px;
  padding: 3px;
  overflow: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
  align-content: start;
}
.armurerie-haut-liste .carte-sous {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.armurerie-haut-rien {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 12px;
  color: var(--gris);
}
.armurerie-haut-choix {
  align-self: stretch;
}
.armurerie-haut-croix {
  flex: none;
  margin-left: auto;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cadre-rouge);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .14s ease;
}
.armurerie-haut-croix .icone {
  width: 22px;
  height: 22px;
}
.armurerie-haut-croix:hover {
  color: var(--blanc);
}
.armurerie-face {
  flex: none;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(250px, 19.79vw, 380px) minmax(0, 1fr);
  column-gap: var(--armurerie-grille-air);
  grid-template-rows: auto auto auto;
  row-gap: var(--armurerie-grille-air);
}
.armurerie-face>.armurerie-face-haut.armurerie-face-gauche {
  grid-column: 1;
  grid-row: 1;
}
.armurerie-face>.armurerie-face-haut.armurerie-face-droite {
  grid-column: 3;
  grid-row: 1;
}
.armurerie-face>.armurerie-face-bas.armurerie-face-gauche {
  grid-column: 1;
  grid-row: 2;
}
.armurerie-face>.armurerie-face-bas.armurerie-face-droite {
  grid-column: 3;
  grid-row: 2;
}
.armurerie-face>.armurerie-face-centre {
  grid-column: 2;
  grid-row: 1 / 4;
}
.armurerie-face>.armurerie-face-plus.armurerie-face-gauche {
  grid-column: 1;
  grid-row: 3;
}
.armurerie-face>.armurerie-face-plus.armurerie-face-droite {
  grid-column: 3;
  grid-row: 3;
}
.armurerie-face-plus {
  min-height: 150px;
}
.armurerie-face-plus {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 16px;
}
.armurerie-face>.armurerie-face-bas {
  min-height: 436px;
}
.armurerie-face>* {
  position: relative;
  isolation: isolate;
  min-width: 0;
  box-sizing: border-box;
}
.armurerie-face-camp {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
}
.armurerie-face-entete {
  flex: 1 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}
.armurerie-face-stats {
  padding: 10px 16px 14px;
}
.armurerie-face-cout {
  margin: auto 16px 14px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--gris) 30%, transparent);
}
.armurerie-face-stats .details-stat:has(.details-stat-jauge)~.details-stat:not(:has(.details-stat-jauge)):not(.details-stat:not(:has(.details-stat-jauge))~.details-stat) {
  margin-top: 5px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--gris) 30%, transparent);
}
.armurerie-face-cout .details-cout {
  row-gap: 6px;
}
.armurerie-face-ouvre {
  cursor: pointer;
}
.armurerie-face-nom.armurerie-face-ouvre:hover {
  color: var(--or);
}
.armurerie-face-stats .bloc , .armurerie-face-cout .bloc {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.armurerie-face-stats .details-stats-tete {
  display: none;
}
.armurerie-face-coin {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.armurerie-face-textes {
  flex: 1;
}
.armurerie-face-haut.armurerie-face-gauche .armurerie-face-entete {
  flex-direction: row;
}
.armurerie-face-image {
  flex: none;
  aspect-ratio: 1;
  display: block;
}
.armurerie-face-image>img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.armurerie-face-image-vide {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ligne);
  border-radius: 8px;
  background: var(--pale);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--gris-clair);
}
.armurerie-face-textes {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.armurerie-face-nom {
  max-width: 100%;
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--blanc);
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}
.armurerie-face-type {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.armurerie-face-ligne {
  margin-top: 5px;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 13.8px;
}
.armurerie-face-ligne>[hidden] {
  display: none;
}
.armurerie-face-changer {
  margin-top: 10px;
}
.armurerie-face-quantite.armurerie-gauche {
  --combat-c: var(--bleu);
}
.armurerie-face-quantite.armurerie-droite {
  --combat-c: var(--neg);
}
.armurerie-face-quantite {
  align-items: flex-start;
  height: auto;
  width: auto;
  min-width: 0;
}
.armurerie-face-quantite-gauche , .armurerie-face-quantite-droite {
  grid-row: 5;
  align-self: end;
  justify-self: center;
  width: min(143.5px, 100% - 16px);
}
.armurerie-face-quantite-gauche {
  grid-column: 1;
}
.armurerie-face-quantite-droite {
  grid-column: 3;
}
.armurerie-face-quantite {
  gap: 6px;
}
.armurerie-face-quantite .armurerie-combat-quantite-titre {
  align-self: center;
}
.armurerie-face-quantite .armurerie-combat-quantite-bouton {
  height: 31.25px;
}
.armurerie-face-quantite .armurerie-combat-quantite-rangee {
  border-radius: 7px;
  background-color: var(--carte);
}
.armurerie-face-changer {
  --changer-c: var(--bleu);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 139px;
  height: 32px;
  box-sizing: border-box;
  padding: 0 12px;
  border-radius: 7px;
  background-color: var(--carte);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .14s ease;
}
.armurerie-face-droite .armurerie-face-changer {
  --changer-c: var(--neg);
}
.armurerie-face-changer:hover {
  background-color: var(--survol);
}
.armurerie-face-changer:active {
  transform: scale(.97);
}
.armurerie-face-centre {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.armurerie-face-duel {
  position: relative;
  flex: 1 1 auto;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: calc(94px + var(--coups-taille, 44px) / 2) 24px auto minmax(0, 1fr) auto 27px;
  column-gap: 0;
  min-width: 0;
  padding: 0;
}
.armurerie-face-duel>.armurerie-face-combat {
  grid-row: 3;
  grid-column: 1 / -1;
}
.armurerie-face-coups-gauche , .armurerie-face-coups-droite, .armurerie-face-vs {
  grid-row: 1;
  align-self: end;
}
.armurerie-face-coups-gauche {
  grid-column: 1;
}
.armurerie-face-vs {
  grid-column: 2;
}
.armurerie-face-coups-droite {
  grid-column: 3;
}
.armurerie-face-combat {
  flex: none;
  display: flex;
  flex-direction: column;
  padding: 0 16px;
  min-width: 0;
}
.armurerie-face-combat .armurerie-gauche {
  --combat-c: var(--bleu);
}
.armurerie-face-combat .armurerie-droite {
  --combat-c: var(--neg);
}
.armurerie-face-combat {
  gap: 0;
}
.armurerie-face-combat .armurerie-combat-ligne {
  height: 24px;
}
.armurerie-face-combat .armurerie-combat-reel , .armurerie-face-combat .armurerie-combat-total {
  height: 26px;
}
.armurerie-face-combat .armurerie-combat-section {
  margin-bottom: 9px;
  font-size: 11.5px;
}
.armurerie-face-combat .armurerie-combat-titre {
  font-size: 12.5px;
}
.armurerie-face-combat .armurerie-combat-val {
  font-size: 14px;
}
.armurerie-face-combat .armurerie-combat-gris {
  height: 22px;
}
.armurerie-face-combat .armurerie-combat-gris .armurerie-combat-titre {
  font-size: 11.5px;
}
.armurerie-face-combat .armurerie-combat-gris .armurerie-combat-val {
  font-size: 13px;
}
.armurerie-face-combat .armurerie-combat-reel .armurerie-combat-val , .armurerie-face-combat .armurerie-combat-total .armurerie-combat-val {
  font-size: 16px;
}
.armurerie-face-combat .armurerie-combat-reel , .armurerie-face-combat .armurerie-combat-total {
  margin-bottom: 21px;
}
.armurerie-face-coups {
  position: relative;
  top: 1px;
  min-width: 0;
  white-space: nowrap;
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.armurerie-face-coups-gauche {
  color: var(--bleu);
  justify-self: center;
}
.armurerie-face-coups-droite {
  color: var(--neg);
  justify-self: center;
}
.armurerie-face { container-type: inline-size; }
.duel-resultat {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.armurerie-face-vs {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.armurerie-face-versus-icone {
  position: relative;
  top: 0;
  display: block;
}
.armurerie-face-titre {
  position: absolute;
  top: 22px;
  left: 16px;
  right: 16px;
  margin: 0;
  font-size: 11.5px;
}
.armurerie-face>.armurerie-face-choix {
  display: none;
}
.armurerie-face.choix-gauche>.armurerie-face-choix.armurerie-face-gauche , .armurerie-face.choix-droite>.armurerie-face-choix.armurerie-face-droite {
  display: flex;
}
.armurerie-face.choix-gauche>.armurerie-face-gauche:not(.armurerie-face-choix) , .armurerie-face.choix-droite>.armurerie-face-droite:not(.armurerie-face-choix) {
  visibility: hidden;
}
.armurerie-face>.armurerie-face-choix-tris.armurerie-face-gauche {
  grid-column: 1;
  grid-row: 1;
}
.armurerie-face>.armurerie-face-choix-tris.armurerie-face-droite {
  grid-column: 3;
  grid-row: 1;
}
.armurerie-face>.armurerie-face-choix-liste.armurerie-face-gauche {
  grid-column: 1;
  grid-row: 2 / 4;
}
.armurerie-face>.armurerie-face-choix-liste.armurerie-face-droite {
  grid-column: 3;
  grid-row: 2 / 4;
}
.armurerie-face-choix-tris {
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 9px;
  padding: 0 14px;
}
.armurerie-face-choix-tris>.armurerie-haut-familles {
  align-self: flex-start;
}

/* Structure du site */
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}
a {
  color: inherit;
  text-decoration: none;
}
button , input, select {
  color: inherit;
}
button , a, input, select {
  touch-action: manipulation;
}
button {
  border: 0;
}
img {
  display: block;
  max-width: 100%;
}
h1 , h2, h3, p {
  margin: 0;
}
b, strong {
  font-weight: 700;
}
h1 , h2 {
  font-family: Barlow,Inter,sans-serif;
  font-weight: 700;
  line-height: 1.06;
  text-transform: uppercase;
  letter-spacing: -.025em;
}
h1 {
  font-size: 64px;
}
h2 {
  font-size: 35px;
}
h3 {
  font-size: 16px;
  line-height: 1.35;
  font-weight: 600;
}
p {
  color: var(--muted);
}
:focus-visible {
  outline: 3px solid #5787d6;
  outline-offset: 4px;
}
.wrap {
  margin-inline: auto;
}
.icon {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
  vertical-align: middle;
}
.skip {
  position: absolute;
  top: -100px;
  left: 12px;
  background: var(--surface);
  padding: 12px;
  z-index: 50;
}
.skip:focus {
  top: 8px;
}
.site-header {
  background: var(--navy);
  color: #fff;
}
.header-inner {
  min-height: 86px;
  display: flex;
  align-items: center;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: none;
}
.brand img {
  width: 40px;
  height: 43px;
}
.brand strong {
  display: block;
  font-family: Barlow,Inter,sans-serif;
  font-size: 29px;
  line-height: 1;
  letter-spacing: .005em;
}
.brand small {
  display: block;
  font-size: 8px;
  letter-spacing: .23em;
  margin-top: 7px;
  font-weight: 600;
}
.main-nav {
  display: flex;
  align-items: stretch;
  justify-content: center;
  align-self: stretch;
  flex: 1;
}
.main-nav a {
  position: relative;
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  color: #bec5d0;
  white-space: nowrap;
}
.main-nav a:hover , .main-nav a.active {
  color: #fff;
}
.main-nav a.active:after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 3px;
  background: var(--lightblue);
  left: 0;
  right: 0;
}
.header-actions {
  display: flex;
  align-items: center;
}
.language {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: #c4ccda;
  background: none;
  padding: 10px 0;
}
.language strong {
  color: #fff;
}
.language span {
  opacity: .45;
  margin-inline: 5px;
}
.menu-button {
  display: none;
  background: none;
  color: #fff;
  padding: 10px;
}
.flag-band {
  background: var(--tint-eaf0f7);
  border-bottom: 1px solid var(--line);
}
.flag-inner {
  display: flex;
  align-items: center;
  min-height: 66px;
}
.flag-caption {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
}
.flags {
  align-items: center;
  flex: 1;
}
.flag-link {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 5px;
  border: 1px solid transparent;
}
.flag-link img {
  width: 27px;
  height: auto;
  border: 1px solid #000;
  display: block;
}
.flag-link:hover {
  background: var(--paper);
}
.flag-link.active {
  background: var(--pale);
  border-color: #b5caed;
}
.eyebrow {
  font-size: 10px;
  letter-spacing: .15em;
  font-weight: 700;
  color: var(--blue);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}
.eyebrow:before {
  content: "";
  width: 5px;
  height: 5px;
  background: currentColor;
}
.home-intro {
  padding: 62px 0 40px;
  display: grid;
}
.home-intro h1 {
  margin-top: 18px;
}
.home-intro h1 span {
  color: var(--blue);
}
.intro-copy {
  padding-bottom: 2px;
}
.intro-copy p {
  font-size: 15px;
  line-height: 1.85;
  max-width: 445px;
}
.actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 44px;
  border-radius: 5px;
  padding: 11px 17px;
  font-size: 12px;
  font-weight: 600;
  background: var(--blue);
  color: white;
  border: 1px solid var(--blue);
}
.button:hover {
  background: #2b579f;
}
.button.secondary {
  background: transparent;
  color: var(--ink);
  border-color: #d0d5dd;
}
.button.secondary:hover {
  background: var(--surface);
}
.button.text {
  border: 0;
  background: transparent;
  color: var(--blue);
  padding-inline: 0;
  gap: 9px;
}
.button.small {
  font-size: 11px;
  min-height: 37px;
  padding: 8px 12px;
}
.section {
  padding: 38px 0 52px;
}
.section.top-line {
  border-top: 1px solid var(--line);
}
.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
}
.section-head p {
  font-size: 12px;
  margin-top: 9px;
}
.section-head .eyebrow {
  margin-bottom: 12px;
}
.text-link {
  color: var(--blue);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}
.civ-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 15px;
}
.civ-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 23px;
  transition: border-color .15s,background .15s;
  display: flex;
  align-items: center;
  gap: 17px;
  min-width: 0;
}
.civ-card:hover {
  border-color: #9cb8e5;
  background: var(--tint-fbfcff);
}
.civ-card>img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex: none;
}
.civ-card h3 {
  margin: 0;
}
.civ-card p {
  font-size: 12px;
  line-height: 1.6;
  margin-top: 9px;
}
.tools-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 34px;
}
.home-discovery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.home-discovery-grid article {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  min-width: 0;
}
.home-discovery-civ {
  display: flex;
  align-items: center;
  gap: 28px;
}
.home-discovery-civ > img {
  flex: none;
  width: 112px;
  height: 76px;
  object-fit: contain;
}
.home-discovery-civ > div, .home-discovery-build {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.home-discovery-civ > div { align-self: stretch; min-width: 0; }
.home-discovery-grid h3 {
  margin: 10px 0;
  font-size: 22px;
  line-height: 1.35;
}
.home-discovery-build h3 { color: var(--bleu); }
.home-discovery-types { color: var(--blanc); font-size: 13px; }
.home-discovery-difficulty {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
  margin: 12px 0 20px;
}
.home-discovery-grid .button { width: fit-content; }
.home-discovery-civ .button { margin-top: auto; }
.home-discovery-difficulty .bdr-etoiles { margin-left: 0; }
@media(max-width: 760px){
  .home-discovery-grid { grid-template-columns: 1fr; }
  .home-discovery-grid article { padding: 22px; }
  .home-discovery-civ { gap: 20px; }
  .home-discovery-civ > img { width: 72px; height: 54px; }
}
.tool {
  display: block;
  position: relative;
  padding: 4px 0;
}
.tool .tool-icon {
  color: var(--blue);
  margin-bottom: 15px;
}
.tool h3 {
  font-size: 16px;
}
.tool p {
  font-size: 12px;
  line-height: 1.8;
  margin-top: 8px;
  max-width: 310px;
}
.tag {
  font-size: 10px;
  padding: 4px 9px;
  background: var(--tint-e9edf2);
  color: #56677f;
  border-radius: 4px;
}
.select {
  background: var(--surface);
  border: 1px solid #d9dee5;
  border-radius: 5px;
  padding: 10px 34px 10px 12px;
  font-size: 12px;
  min-height: 44px;
  max-width: 100%;
}
.rating {
  font-weight: 700;
  font-size: 14px;
}
.level {
  font-size: 10px;
  color: #7d6a3e;
  display: flex;
  gap: 6px;
  align-items: center;
  white-space: nowrap;
}
.level .icon {
  width: 16px;
  height: 16px;
}
.streak {
  color: var(--green);
  font-size: 11px;
}
.streak.negative {
  color: #a45858;
}
.pagination {
  display: flex;
  gap: 6px;
}
.empty {
  padding: 35px;
  text-align: center;
  color: var(--muted);
}
.site-footer {
  margin-top: 20px;
}
.footer-links {
  display: flex;
  gap: 34px;
  font-size: 11px;
  align-items: center;
  flex-wrap: wrap;
}
.footer-bottom {
  border-top: 1px solid #344053;
  padding-top: 18px;
  margin-top: 28px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 10px;
}
.footer-bottom button {
  color: inherit;
  background: none;
  padding: 0;
  font-size: 10px;
}
.dialog {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 30px;
  max-width: 460px;
  width: calc(100% - 35px);
  color: var(--ink);
  box-shadow: 0 20px 90px #16203230;
}
.dialog::backdrop {
  background: #16203265;
}
.dialog h2 {
  font-size: 30px;
}
.dialog p {
  font-size: 13px;
  margin-top: 15px;
}
.dialog .button {
  margin-top: 24px;
}
.hidden {
  display: none !important;
}
.flags {
  gap: 7px;
  scrollbar-width: none;
}
.flags::-webkit-scrollbar {
  display: none;
}
.pagination {
  flex-wrap: wrap;
  max-width: 100%;
}
.dialog h2 {
  overflow-wrap: anywhere;
}
.dialog dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 22px;
  margin: 22px 0 0;
  font-size: 13px;
}
.dialog dt {
  color: var(--muted);
}
.dialog dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}
@media (min-width:1700px) {
  .civ-grid {
    grid-template-columns: repeat(4,minmax(0,1fr));
  }
  .civ-card {
    padding: 27px;
  }
  .flags {
    gap: 15px;
  }
}
@media (max-width:1150px) {
  .main-nav a {
    font-size: 12px;
  }
  .flag-caption {
    display: none;
  }
}
@media (max-width:900px) {
  .header-inner {
    min-height: 76px;
    justify-content: space-between;
  }
  .main-nav {
    display: none;
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    z-index: 30;
    background: var(--navy);
    padding: 10px 24px 22px;
    box-shadow: 0 8px 15px #16203218;
  }
  .main-nav.open {
    display: flex;
    flex-direction: column;
  }
  .main-nav a {
    padding: 13px 8px;
    font-size: 14px;
  }
  .main-nav a.active:after {
    width: 3px;
    height: auto;
    top: 10px;
    bottom: 10px;
    right: auto;
  }
  .menu-button {
    display: block;
  }
  .home-intro {
    padding-top: 42px;
  }
  .intro-copy {
    max-width: 700px;
  }
  .intro-copy p {
    max-width: 600px;
  }
  .home-intro h1 br {
    display: none;
  }
  .civ-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .footer-links {
    gap: 20px;
    max-width: 320px;
  }
}
@media (max-width:640px) {
  body {
    font-size: 13px;
  }
  .header-inner {
    min-height: 72px;
  }
  .brand img {
    width: 32px;
    height: 36px;
  }
  .brand {
    gap: 8px;
  }
  .brand strong {
    font-size: 25px;
  }
  .brand small {
    font-size: 6.5px;
    letter-spacing: .2em;
    margin-top: 6px;
  }
  .language {
    font-size: 11px;
  }
  .main-nav {
    top: 72px;
    padding-inline: 18px;
  }
  .flag-inner {
    min-height: 57px;
  }
  .flags {
    gap: 8px;
  }
  .home-intro {
    padding: 35px 0 29px;
  }
  .eyebrow {
    font-size: 9px;
    letter-spacing: .12em;
  }
  .home-intro h1 {
    margin-top: 17px;
  }
  .home-intro h1 br {
    display: initial;
  }
  .intro-copy p {
    font-size: 13px;
    line-height: 1.85;
  }
  .actions {
    gap: 10px;
    margin-top: 20px;
  }
  .button {
    font-size: 11px;
    padding: 11px 14px;
    gap: 13px;
    min-height: 44px;
  }
  .section {
    padding-block: 28px 34px;
  }
  .section-head {
    gap: 16px;
    margin-bottom: 20px;
    align-items: center;
  }
  .section-head h2 {
    font-size: 29px;
  }
  .section-head p {
    font-size: 11px;
  }
  .section-head .text-link {
    font-size: 10px;
    white-space: nowrap;
    gap: 5px;
  }
  .civ-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 11px;
  }
  .civ-card {
    padding: 18px 19px;
    gap: 15px;
  }
  .civ-card>img {
    width: 40px;
    height: 40px;
  }
  .civ-card h3 {
    font-size: 14px;
  }
  .tools-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
  .tool {
    padding: 0 0 22px;
    border-bottom: 1px solid var(--line);
  }
  .tool:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
  .tool .tool-icon {
    float: left;
    margin-right: 17px;
    margin-top: 2px;
  }
  .tool h3 , .tool p, .tool .text-link {
    margin-left: 36px;
  }
  .tool p {
    max-width: none;
  }
  .tag {
    font-size: 9px;
  }
  .select {
    font-size: 12px;
    min-height: 44px;
  }
  .rating {
    font-size: 12px;
  }
  .site-footer {
    margin-top: 0;
    padding-top: 30px;
  }
  .footer-links {
    max-width: none;
    gap: 15px 24px;
    font-size: 11px;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 14px;
    font-size: 9px;
    margin-top: 24px;
    line-height: 1.8;
  }
}
@media (prefers-reduced-motion:reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}
.language-picker {
  position: relative;
}
.language-trigger {
  display: flex;
  align-items: center;
  min-height: 44px;
}
.language-trigger>.icon:first-child {
  width: 17px;
  height: 17px;
}
.language-trigger>.icon:last-child {
  width: 12px;
  height: 12px;
}
.language-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 13px);
  width: 330px;
  max-width: calc(100vw - 36px);
  z-index: 45;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 14px 45px #16203224;
  padding: 17px;
}
.language-menu[hidden] {
  display: none;
}
.language-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  max-height: 55vh;
  overflow: auto;
}
.language-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 8px;
  min-height: 44px;
  border-radius: 4px;
  background: transparent;
  font-size: 12px;
  text-align: left;
}
.language-option:hover , .language-option[aria-pressed=true] {
  background: var(--pale);
  color: var(--blue);
}
.language-option img {
  width: 19px;
  height: 13px;
  object-fit: cover;
  border: 1px solid #e6e9ee;
  flex: none;
}
.language-option>span {
  margin: 0;
  opacity: 1;
}
.flag-inner {
  gap: 16px;
}
.flags {
  min-width: 0;
  display: block;
  padding-block: 8px;
  overflow: auto;
  mask-image: linear-gradient(to right,transparent,#000 14px,#000 calc(100% - 14px),transparent);
  overscroll-behavior-x: contain;
}
.flag-track {
  display: flex;
  gap: 15px;
  width: max-content;
  margin-inline: auto;
  position: relative;
}
.flag-set {
  display: flex;
  align-items: center;
  gap: 15px;
  flex: none;
}
.flag-link {
  padding: 4px;
  flex: none;
}
.flag-controls {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
}
.flag-controls button {
  width: 30px;
  height: 40px;
  padding: 7px;
  background: transparent;
  color: #5f6d81;
  border-radius: 4px;
  display: grid;
  place-items: center;
}
.flag-controls button:hover {
  background: var(--pale);
  color: var(--blue);
}
.flag-controls .icon {
  width: 15px;
  height: 15px;
}
.flag-step.previous .icon {
  transform: rotate(180deg);
}
@media (max-width:640px) {
  .language-trigger>.icon:first-child {
    width: 15px;
    height: 15px;
  }
  .language-trigger>.icon:last-child {
    display: none;
  }
  .language-menu {
    position: fixed;
    top: 64px;
    left: 18px;
    right: 18px;
    width: auto;
    max-width: none;
    padding: 15px;
  }
  .flag-inner {
    gap: 6px;
  }
  .flag-track , .flag-set {
    gap: 9px;
  }
  .flag-controls .flag-step {
    display: none;
  }
  .flag-controls .flag-toggle {
    width: 32px;
    height: 44px;
  }
  .flags {
    mask-image: linear-gradient(to right,transparent,#000 7px,#000 calc(100% - 7px),transparent);
  }
}

/* Composition des pages */
html , body {
  height: auto;
  overflow: visible;
  background: var(--paper);
  color: var(--ink);
}
body {
  min-width: 0;
}
button , input, select, textarea {
  font: inherit;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: default;
  opacity: .5;
}
[hidden] {
  display: none !important;
}
.corps {
  position: relative;
  inset: auto;
  height: auto;
  overflow: visible;
  min-height: 62vh;
  padding: 0 0 56px;
  margin: 0 auto;
  z-index: auto;
}
.corps::after , .fond, .defileur, .trait {
  display: none !important;
}
.page {
  min-width: 0;
}
.page:not(.codex-home) {
  padding-top: 42px;
}
.wrap {
  width: calc(100% - 80px);
  max-width: 1320px;
}
.bandeau-haut {
  position: relative;
  inset: auto;
  width: auto;
  height: auto;
  z-index: 80;
  display: block;
  border: 0;
  padding: 0;
}
.bandeau-gauche {
  position: relative;
  inset: auto;
  width: auto;
  height: auto;
  padding: 0;
}
.header-inner {
  gap: 32px;
}
.main-nav {
  gap: 22px;
}
.header-actions {
  gap: 14px;
}
.ui-icon {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.brand , .brand strong {
  color: #fff;
}
.brand small {
  color: #b6c0d1;
}
.language-trigger {
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 12px;
  gap: 8px;
}
.language-options a {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 8px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--ink);
}
.language-options a:hover , .language-options [aria-current] {
  background: var(--pale);
  color: var(--blue);
}
.language-options img {
  width: 19px;
  height: 13px;
  object-fit: cover;
}
.site-header .bd-rech {
  border-color: #465269;
  background: transparent;
}
.flag-band .flags {
  scrollbar-width: none;
}
.flag-band .flags::-webkit-scrollbar {
  display: none;
}
.flag-band .flag-toggle {
  font-size: 13px;
}
.site-footer {
  margin-bottom: 0;
}
.footer-links button {
  color: inherit;
  background: none;
  padding: 0;
  font-size: inherit;
}
.footer-bottom {
  color: #b6c0d1;
}
.catalogue {
  padding-bottom: 30px;
}
.catalogue .section-head {
  margin: 0 0 36px;
}
.catalogue-search {
  font-size: 12px;
  display: flex;
  gap: 12px;
  align-items: center;
  color: var(--muted);
}
.catalogue-search input {
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 12px;
  background: var(--surface);
  max-width: 100%;
}
.civ-card {
  position: relative;
}
.civ-card img {
  object-fit: contain;
  flex: none;
}
.tool .text-link {
  margin-top: 20px;
}
.tool-icon .ui-icon {
  width: 27px;
  height: 27px;
}
.catalogue h1 {
  font-size: 54px;
}
.catalogue-empty {
  padding-block: 40px;
}
.surface , .surface-on.on, .surface-on:hover {
  background: var(--surface) !important;
  border: 1px solid var(--ligne) !important;
  border-radius: 7px;
}
.surface-survol:hover {
  border-color: #9cb8e5 !important;
  background: var(--tint-fbfcff) !important;
}
.surface-titre {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--ink);
}
.carte {
  padding: 17px;
  border-radius: 7px;
}
.carte-titre {
  font-size: 14px;
  font-weight: 600;
  color: var(--surface-accent, var(--ink));
}
.carte[role=button] {
  --codex-accent: var(--surface-accent, currentColor);
}
.carte-compacte {
  padding: 12px;
}
.panneau {
  padding: 24px;
}
.panneau-titre {
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 14px;
}
.panneau p {
  font-size: 14px;
  line-height: 1.75;
}
.onglet {
  font-size: 12px;
  min-height: 40px;
  border-radius: 4px;
}
.onglet>span {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}
.onglet.on {
  color: var(--onglet-couleur);
}
.onglet:is(:hover, .on) > .surface-titre {
  color: inherit;
}
.onglets-rangee {
  gap: 12px;
}
.onglets-trait {
  height: 1px;
  background: var(--ligne);
}
.filtre {
  background: var(--surface) !important;
  border: 1px solid var(--ligne) !important;
  color: var(--ink);
  border-radius: 5px;
  min-height: 40px;
}
.civ-stats {
  background: var(--surface) !important;
  border: 1px solid var(--ligne) !important;
  color: var(--blue);
  border-radius: 5px;
  min-height: 40px;
}
.civ-builds {
  background: var(--surface) !important;
  border: 1px solid var(--ligne) !important;
  color: var(--violet);
  border-radius: 5px;
  min-height: 40px;
}
.builder-bouton , .armurerie-haut-civ {
  background: var(--surface) !important;
  border: 1px solid var(--ligne) !important;
  color: var(--ink);
  border-radius: 5px;
  min-height: 40px;
}
.filtre:hover , .civ-stats:hover, .civ-builds:hover {
  border-color: #9cb8e5 !important;
  background: var(--pale) !important;
}
.deroulant , .infobulle, .rech-resultats {
  background: var(--surface) !important;
  color: var(--ink);
  border: 1px solid var(--ligne);
  box-shadow: 0 10px 34px #16203220 !important;
  max-width: calc(100vw - 24px);
}
.deroulant-option {
  color: var(--ink);
}
.deroulant-option:hover , .deroulant-option.on {
  background: var(--pale);
}
.titre-page {
  padding: 8px 0 28px;
  margin-bottom: 16px;
  gap: 14px;
  border-bottom: 1px solid var(--ligne);
}
.titre-page h1 , .titre-page-nom {
  font: 700 52px/1.05 Barlow,Inter,sans-serif;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--ink);
  background: none;
  -webkit-text-fill-color: currentColor;
}
.pli-titre {
  font-size: 17px;
  color: var(--ink);
}
.pli-trait {
  background: var(--ligne);
}
.civ-identite {
  position: relative;
  top: auto;
  background: transparent;
  padding: 6px 0 28px;
  gap: 24px;
  z-index: auto;
}
.civ-drapeau {
  width: 86px;
  height: auto;
  border: 1px solid #000;
  border-radius: 0;
}
.civ-nom {
  font: 700 52px/1.05 Barlow,Inter,sans-serif;
  text-transform: uppercase;
  color: var(--ink);
}
.civ-titre {
  gap: 12px;
}
@media (min-width: 1024px) {
  .civ-drapeau {
    /* Une ligne de titre, son espacement et la rangée de boutons. */
    height: calc(52px * 1.05 + 12px + 40px);
    width: auto;
  }
}
.civ-periode {
  font-size: 12px;
  color: var(--muted);
}
.civ-devise {
  color: var(--blue);
  font-size: 12px;
}
.civ-resume {
  font-size: 15px;
  line-height: 1.8;
  max-width: 960px;
  color: var(--muted);
  margin-block: 14px 30px;
}
.civ-panneaux {
  gap: 18px;
  margin-block: 24px 32px;
}
.civ-onglets>.onglets-rangee {
  position: relative !important;
  top: auto !important;
  background: var(--paper) !important;
  flex-wrap: wrap;
  border-block: 1px solid var(--ligne);
  padding: 12px 0;
}
.civ-onglets>.onglets-trait {
  display: none;
}
.civ-onglets {
  margin-top: 30px;
}
.civ-tri {
  margin-block: 12px;
}
.civ-tri .onglets-rangee {
  flex-wrap: wrap;
}
.civ-cartes , .civ-taux {
  gap: 14px;
}
.taux {
  background: var(--surface);
}
.civ-codex {
  max-width: 100%;
  overflow-x: auto;
}
.codex-grille {
  min-width: max-content;
}
.civ-en-stats .civ-identite , .civ-en-builds .civ-identite {
  position: relative;
}
.stat-civ {
  min-width: 0;
}
.bandeau-droit {
  /* Les fiches gardent la palette nuit sur le voile, dans les deux thèmes. */
  --jaune: #f3cc58;
  --ink: #e6edf7;
  --muted: #a7b6cc;
  --line: #38475e;
  --blue: #97baff;
  --surface: #1b2636;
  --pale: #233652;
  --blanc: #e6edf7;
  --gris: #a7b6cc;
  --gris-clair: #a7b6cc;
  --ligne: #38475e;
  --bleu: #97baff;
  --or: #97baff;
  --or-sombre: #97baff;
  --carte: #1b2636;
  --carte-2: #243248;
  --survol: #293c57;
  --cyan: #7cd3e1;
  --violet: #c4a5ff;
  --roux: #e8b477;
  --rose: #f1a1cf;
  --vert: #79d3af;
  --nourriture: #fa9690;
  --bois: #e3b278;
  --or-res: #e7cc72;
  --pierre: #b4c4dd;
  --huile: #becb83;
  --temps: #e1ce8c;
  --feu: #f2b172;
  --pos: var(--age4);
  --neg: var(--age1);
  --piste-barre: #34435a;
  display: none;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  background: transparent;
  color: var(--ink);
  z-index: 140;
  padding: 80px 40px;
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: none;
  border: 0;
}
.bandeau-droit[open] {
  display: flex;
  flex-direction: column;
}
.bandeau-droit::backdrop {
  background: rgb(5 9 16 / 92%);
  backdrop-filter: blur(5px);
}
html.details-ouvertes {
  overflow: hidden;
}
.cadre-details {
  border: 0;
  background: none;
  height: auto;
  max-height: none;
  overflow: visible;
}
.bandeau-droit .cadre-details {
  width: min(100%, 1160px);
  flex: none;
  margin: auto;
}
.cadre-details-contenu {
  overflow: visible;
  max-height: none;
}
.bandeau-droit .cadre-details-contenu::after {
  display: none;
}
.cadre-details-fermer {
  --codex-accent: var(--age1);
  position: fixed;
  top: max(16px, env(safe-area-inset-top, 0px));
  right: max(16px, env(safe-area-inset-right, 0px));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  padding: 6px 13px;
  background: #111924;
  color: var(--age1);
  font: 600 13px/1.4 Inter, sans-serif;
  cursor: pointer;
  z-index: 10;
  border: 1px solid currentColor;
  border-radius: 5px;
}
.cadre-details-fermer-croix {
  display: flex;
  width: 18px;
  height: 18px;
  flex: none;
}
.cadre-details-fermer-croix > svg {
  width: 100%;
  height: 100%;
}
.cadre-details-fermer:hover {
  color: var(--age1);
  background: color-mix(in srgb, var(--age1) 12%, transparent);
}
.cadre-details-fermer:focus-visible {
  outline-color: var(--age1);
}
.details-identite {
  background: var(--surface) !important;
}
.bandeau-droit :is(h1,h2,h3) {
  font-family: Inter,sans-serif;
  text-transform: none;
  letter-spacing: normal;
}
.details-titre {
  color: var(--ink);
}
.bandeau-droit .details {
  gap: 28px;
  padding: 0;
  width: min(100%, 640px);
  margin-inline: auto;
}
.bandeau-droit .details-fiche {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px 54px;
  width: 100%;
  align-items: start;
}
.details-presentation {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
  grid-column: 1;
  grid-row: 1;
}
.details-fiche > .details-statistiques {
  grid-column: 2;
  grid-row: 1;
}
.details-fiche > :is(.details-cout-bloc, .details-relations, .details-debloque) {
  grid-column: 1 / -1;
}
.details-fiche .details-cout {
  align-items: center;
  justify-content: center;
  padding-block: 18px;
  border-block: 1px solid var(--line);
}
.details-fiche .details-cout-ligne {
  justify-content: center;
}
.details-relations {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 54px;
  min-width: 0;
  align-items: start;
}
.details-relations > .details-amelioration {
  grid-column: 1;
  grid-row: 1;
}
.details-relations > .details-origine {
  grid-column: 2;
  grid-row: 1;
}
.details-relations > .details-capacites {
  grid-column: 3;
  grid-row: 1;
}
.bandeau-droit .details .bloc {
  position: static;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  min-width: 0;
}
.bandeau-droit .details .bloc::before,
.bandeau-droit .details .bloc::after {
  display: none;
}
.bandeau-droit .bloc-tete-fixe {
  cursor: default;
}
.bandeau-droit .details-identite-ligne {
  align-items: center;
  gap: 22px;
  padding-right: 0;
}
.bandeau-droit .details-image {
  width: 104px;
  height: 104px;
  background: transparent;
  border-radius: 0;
}
.bandeau-droit .details-image > img {
  object-fit: contain;
}
.bandeau-droit .details-nom {
  align-items: center;
  font: 700 32px/1.1 Barlow, Inter, sans-serif;
  color: var(--bloc-couleur);
  white-space: normal;
}
.bandeau-droit .details-nom-texte {
  overflow: visible;
  overflow-wrap: anywhere;
}
.bandeau-droit .details-age {
  width: 1em;
  height: 1em;
  margin: 0;
  align-self: center;
}
.bandeau-droit .details-sous {
  margin-top: 8px;
}
.bandeau-droit .details-infos {
  margin-top: 24px;
}
.bandeau-droit .details-cout-chiffre-ameliore {
  color: var(--age4);
}
.bandeau-droit .details-icone-bascule {
  background: #dce4ee;
}
.bandeau-droit .details-icone {
  --codex-accent: var(--icone-couleur);
}
.bandeau-droit .details-icone-bascule.on {
  background: #bbdfd0;
  border-color: #65bb97;
}
.bandeau-droit .details-statistiques {
  --stats-chiffre: #e6edf7;
  --nourriture: #fa9690;
  --roux: #e8b477;
  --armure-melee: #81d4bc;
  --armure-distance: #9cbfff;
}
.bandeau-droit .details-statistiques .jauge {
  --jauge-fond: #33425a;
}
.bandeau-droit [data-comparaison="armure-melee"] > .details-stat-icone {
  --armure-melee: var(--age4);
  color: var(--armure-melee);
}
.bandeau-droit [data-comparaison="armure-distance"] > .details-stat-icone,
.bandeau-droit [data-comparaison="vitesse"] > .details-stat-icone {
  --armure-distance: var(--bleu);
  color: var(--armure-distance);
}
.bandeau-droit [data-comparaison="armure-feu"] > .details-stat-icone {
  --feu: var(--age1);
  color: var(--feu);
}
@media (max-width: 760px) {
  .bandeau-droit {
    padding: 76px 24px 32px;
  }
  .bandeau-droit .details-fiche,
  .bandeau-droit .details-relations {
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-width: 520px;
    align-items: stretch;
  }
  .bandeau-droit .details-nom {
    font-size: 28px;
  }
  .bandeau-droit .details-image {
    width: 80px;
    height: 80px;
  }
}
.ladder-filtres {
  position: relative !important;
  top: auto !important;
  background: transparent !important;
}
.ladder-entete {
  background: var(--paper) !important;
  top: 0 !important;
}
.ladder-ligne {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--ligne);
}
.ladder-ligne:hover {
  background: var(--tint-f2f5fa) !important;
}
.ladder-liste {
  border: 1px solid var(--ligne);
  border-radius: 7px;
  overflow: clip;
}
.ladder-pagination {
  flex-wrap: wrap;
}
.ladder-joueur-nom {
  color: var(--ink);
}
.ladder-fiche {
  background: var(--surface) !important;
}
.armurerie-haut {
  margin-top: 10px;
}
.armurerie-haut-cadre {
  background: var(--surface) !important;
  border-color: var(--ligne) !important;
}
.armurerie-haut-tris {
  overflow-x: auto;
  max-width: 100%;
}
.armurerie-haut-liste {
  scrollbar-width: thin;
}
.builder {
  min-width: 0;
}
.builder-liste {
  gap: 16px;
}
.builder-carte {
  background: var(--surface) !important;
  border: 1px solid var(--ligne) !important;
}
.builder-liste , .builder-etapes {
  max-width: 100%;
}
.mentions {
  max-width: 1000px;
  margin: auto;
}
.mentions p {
  line-height: 1.8;
}
.mentions h2 {
  font-size: 28px;
  margin-block: 28px 16px;
}
.mentions h3 {
  margin-block: 20px 12px;
}
@media (min-width:1600px) {
  .wrap , .corps {
    max-width: 1440px;
  }
}
@media (max-width:1199px) {
  .header-inner {
    min-height: 76px;
    gap: 20px;
    justify-content: space-between;
  }
  .menu-button {
    display: grid;
    place-items: center;
  }
  .main-nav {
    display: none;
    position: absolute;
    inset: 76px 0 auto;
    background: var(--navy);
    padding: 16px 24px;
    z-index: 90;
    gap: 4px;
  }
  .main-nav.open {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
  .main-nav a {
    padding: 14px 12px;
    white-space: normal;
    min-height: 48px;
  }
  .main-nav a.active:after {
    bottom: 4px;
    left: 12px;
    right: 12px;
  }
  .header-actions {
    margin-left: auto;
  }
  .civ-nom {
    font-size: 44px;
  }
}
@media (max-width:800px) {
  .wrap {
    width: calc(100% - 40px);
  }
  .corps {
    padding-bottom: 40px;
  }
  .civ-panneaux {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .civ-identite {
    flex-wrap: wrap;
    gap: 16px;
  }
  .civ-onglets>.onglets-rangee {
    gap: 8px;
  }
  .civ-onglets .onglet {
    min-height: 44px;
  }
  .civ-cartes {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
  .armurerie-haut {
    grid-template-columns: minmax(0,1fr) !important;
  }
  .armurerie-haut-milieu {
    order: 3;
  }
  .armurerie-haut-camp {
    min-height: 380px;
  }
  .ladder-filtres {
    flex-wrap: wrap;
    gap: 12px;
  }
  .ladder-liste {
    overflow-x: auto;
  }
  .stat-civ-grille {
    grid-template-columns: minmax(0, 1fr);
  }
  .catalogue .section-head {
    align-items: start;
    flex-direction: column;
  }
  .catalogue-search {
    width: 100%;
  }
  .catalogue-search input {
    flex: 1;
    min-width: 0;
  }
}
@media (max-width:540px) {
  .wrap {
    width: calc(100% - 32px);
  }
  .header-inner {
    min-height: 68px;
    gap: 10px;
  }
  .brand {
    gap: 7px;
  }
  .brand img {
    width: 32px;
    height: 36px;
  }
  .brand strong {
    font-size: 23px;
  }
  .brand small {
    font-size: 6px;
    letter-spacing: .18em;
  }
  .main-nav {
    top: 68px;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
  .header-actions {
    gap: 4px;
  }
  .language-trigger {
    font-size: 10px;
    gap: 4px;
  }
  .language-trigger>.ui-icon {
    display: none;
  }
  .menu-button {
    padding: 8px;
  }
  .language-menu {
    top: 68px;
  }
  .page:not(.codex-home) {
    padding-top: 28px;
  }
  .home-intro {
    padding-top: 36px;
  }
  .catalogue h1 , .titre-page h1, .titre-page-nom {
    font-size: 40px;
  }
  .civ-nom {
    font-size: 36px;
  }
  .civ-drapeau {
    width: 58px;
    height: auto;
  }
  .civ-titre {
    min-width: 0;
    flex: 1;
  }
  .civ-resume {
    font-size: 14px;
  }
  .civ-cartes {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .panneau {
    padding: 20px;
  }
  .civ-onglets>.onglets-rangee {
    gap: 4px;
  }
  .onglet {
    font-size: 11px;
    padding-inline: 8px;
  }
  .civ-stats , .civ-builds {
    font-size: 11px;
    min-height: 40px;
  }
  .civ-taux , .armurerie-haut-choix, .armurerie-haut-familles>.onglets-rangee {
    flex-wrap: wrap;
  }
  .armurerie-haut-civ {
    flex: 1;
    max-width: 100%;
  }
  .armurerie-haut-camp , .armurerie-haut-cadre {
    min-width: 0;
  }
  .builder-entete , .builder-outils {
    flex-wrap: wrap;
  }
  .builder-grille {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .footer-links {
    gap: 16px 22px;
  }
  .bandeau-droit {
    padding: 72px 20px 28px;
  }
  .flag-caption {
    display: none;
  }
}
.armurerie-face>* {
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: 8px;
}
.armurerie-face>.gagne.armurerie-face-gauche { background: var(--tint-edf3fe); border-color: #618fdc; }
.armurerie-face>.gagne.armurerie-face-droite { background: var(--tint-fff0ed); border-color: #ed8982; }
.armurerie-face-coin {
  width: 76px;
  min-width: 64px;
}
.armurerie-face-image {
  width: 76px;
}
.armurerie-face-textes {
  padding-block: 0;
}
.armurerie-face-changer {
  background: var(--pale) !important;
  border: 1px solid var(--ligne) !important;
  color: var(--blue);
}
.armurerie-face-entete {
  width: 100%;
  max-width: 500px;
  margin-inline: auto;
  padding: 20px 24px;
  min-height: 160px;
  gap: 20px;
}
.armurerie-face-plus .onglets-rangee {
  flex-wrap: wrap;
}
.titre-page .titre-page-mot {
  font: 700 52px/1.05 Barlow,Inter,sans-serif !important;
  color: var(--ink) !important;
}
.titre-page-ligne {
  gap: 0 !important;
}
.titre-page-sous {
  margin-top: 12px;
  color: var(--muted);
}
.civ-stat-cadre {
  background: var(--surface) !important;
  border-color: var(--ligne) !important;
}
.civ-stat-titre {
  color: var(--ink);
}
.ladder-colonnes {
  position: relative;
  top: auto;
  border: 0;
  border-radius: 0;
}
.ladder-fiche {
  max-width: 100%;
}
@media (max-width:1100px) {
  .armurerie-face {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 16px;
  }
  .armurerie-face>.armurerie-face-haut.armurerie-face-gauche {
    grid-area: 1/1;
  }
  .armurerie-face>.armurerie-face-haut.armurerie-face-droite {
    grid-area: 1/2;
  }
  .armurerie-face>.armurerie-face-bas.armurerie-face-gauche {
    grid-area: 2/1;
  }
  .armurerie-face>.armurerie-face-bas.armurerie-face-droite {
    grid-area: 2/2;
  }
  .armurerie-face>.armurerie-face-plus.armurerie-face-gauche {
    grid-area: 3/1;
  }
  .armurerie-face>.armurerie-face-plus.armurerie-face-droite {
    grid-area: 3/2;
  }
  .armurerie-face>.armurerie-face-centre {
    grid-area: 4/1/5/3;
  }
  .civ-stat-bas {
    grid-template-columns: 1fr 1fr;
  }
  .civ-builder {
    grid-template-columns: minmax(200px,250px) minmax(0,1fr);
  }
}
/* Compact face-to-face Duel; desktop keeps its three columns. */
.duel-mobile-table, .duel-mobile-calcul, .duel-mobile-ameliorations { display: none; }
.duel-mobile-options:not([open]) { display: none; }
@media (max-width:700px) {
  .armurerie-face {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    grid-template-rows: auto auto auto auto;
    gap: 12px;
  }
  .armurerie-face>.armurerie-face-haut.armurerie-face-gauche { grid-area: 1/1; }
  .armurerie-face>.armurerie-face-haut.armurerie-face-droite { grid-area: 1/2; }
  .armurerie-face>.armurerie-face-centre { grid-area: 2/1/3/3; background: #172131; border-color: #172131; }
  .armurerie-face>.armurerie-face-bas, .armurerie-face>.armurerie-face-plus { display: none; }
  .armurerie-face-haut:is(.armurerie-face-gauche,.armurerie-face-droite) .armurerie-face-entete {
    flex-direction: column;
    padding: 12px 8px;
    gap: 7px;
    min-height: 0;
  }
  .armurerie-face-haut:is(.armurerie-face-gauche,.armurerie-face-droite) .armurerie-face-textes {
    margin: 0; padding: 0; width: 100%; gap: 6px;
  }
  .armurerie-face .armurerie-face-coin { width: auto; }
  .armurerie-face .armurerie-face-image { width: 48px; height: 48px; }
  .armurerie-face .armurerie-face-image>img { width: 100%; height: 100%; }
  .armurerie-face .armurerie-face-nom { font-size: 13px; line-height: 1.3; }
  .armurerie-face .armurerie-face-type { font-size: 10px; line-height: 1.3; margin: 0; }
  .armurerie-face-ligne { display: none !important; }
  .armurerie-face .armurerie-face-changer, .duel-mobile-ameliorations {
    display: block; width: 100%; min-height: 36px; padding: 7px 4px; margin: 0;
    border: 1px solid #d5deed; border-radius: 5px; background: var(--tint-edf2fb);
    color: #245dc0; font: inherit; font-size: 11px; cursor: pointer;
  }
  .duel-mobile-ameliorations { background: var(--surface); }
  .armurerie-face-duel { grid-template-rows: auto auto; padding: 12px; row-gap: 8px; }
  .armurerie-face-duel>.armurerie-face-titre { position: static; grid-area: 1/1/2/4; margin: 0; color: #c8ddff; font-size: 10px; }
  .armurerie-face-duel>.armurerie-face-coups, .armurerie-face-duel>.armurerie-face-vs { grid-row: 2; align-self: center; justify-self: center; top: 0; }
  .armurerie-face-duel>.armurerie-face-coups { font-size: 32px; }
  .armurerie-face-duel>.armurerie-face-coups-gauche { color: #a9c7ff; }
  .armurerie-face-duel>.armurerie-face-coups-droite { color: #ffa49e; }
  .armurerie-face .armurerie-face-versus-icone { width: 28px; height: 28px; }
  .armurerie-face>.duel-mobile-table {
    display: table; grid-area: 3/1/4/3; width: 100%; table-layout: fixed;
    border-collapse: separate; border-spacing: 0; background: var(--surface);
    border: 1px solid #d5deed; border-radius: 8px; overflow: hidden;
  }
  .duel-mobile-table td, .duel-mobile-table th { padding: 10px 5px; border-bottom: 1px solid #edf0f6; text-align: center; font-size: 12px; overflow-wrap: anywhere; }
  .duel-mobile-table tr:last-child>* { border-bottom: 0; }
  .duel-mobile-table th { width: 38%; font-weight: 400; color: #52627b; font-size: 11px; }
  .duel-mobile-table td { width: 31%; font-weight: 600; font-variant-numeric: tabular-nums; color: #2864cd; }
  .duel-mobile-table td:last-child { color: #ca4542; }
  .duel-mobile-table .armurerie-face-quantite { padding: 0; margin: 0; }
  .duel-mobile-table .armurerie-combat-quantite-titre { display: none; }
  .duel-mobile-table .armurerie-combat-quantite-rangee { gap: 0; justify-content: center; }
  .duel-mobile-table .armurerie-combat-quantite-rangee button { width: 24px; min-width: 24px; height: 32px; padding: 0; }
  .duel-mobile-table .armurerie-combat-quantite-rangee input { width: 36px; min-width: 0; padding: 0; font-size: 12px; }
  .armurerie-face>.duel-mobile-calcul { display: block; grid-area: 4/1/5/3; padding: 0; background: var(--surface); border: 1px solid #d5deed; border-radius: 8px; }
  .duel-mobile-calcul summary { padding: 14px; cursor: pointer; font-size: 12px; font-weight: 600; }
  .duel-mobile-calcul .armurerie-face-combat { padding: 0 10px 14px; }
  .duel-mobile-options[open] {
    display: flex; flex-direction: column; position: fixed; inset: 12px 10px auto;
    margin: 0 auto; width: calc(100% - 20px); max-width: 600px; box-sizing: border-box;
    max-height: calc(100dvh - var(--codex-ad-height) - env(safe-area-inset-bottom,0px) - 24px);
    padding: 0; border: 1px solid #a9c7ff; border-radius: 12px; background: var(--surface); color: #172131;
  }
  .duel-mobile-options::backdrop { background: rgb(23 33 49 / .35); }
  .duel-mobile-options-tete { display: flex; align-items: center; gap: 10px; padding: 14px; border-bottom: 1px solid #d5deed; }
  .duel-mobile-options-titre { font: inherit; font-weight: 700; font-size: 14px; margin: 0; flex: 1; }
  .duel-mobile-fermer { padding: 9px; border: 1px solid #d5deed; border-radius: 5px; background: var(--tint-edf2fb); color: #172131; font: inherit; font-size: 12px; cursor: pointer; }
  .duel-mobile-options-contenu { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .duel-mobile-options .armurerie-face-bas { display: block; min-height: 0; }
  .duel-mobile-options .armurerie-face-plus { min-height: 0; padding: 12px; }
  .duel-mobile-options .armurerie-face-stats .details-stats-tete { display: flex; }
  .armurerie-face-camp { min-height: 0; }
  .civ-builder {
    display: flex;
    flex-direction: column;
  }
  .civ-builder>* , .builder-liste {
    width: 100%;
  }
  .builder-age-corps {
    grid-template-columns: minmax(0, 1fr);
  }
  .builder-ordre-tete , .builder-outils {
    flex-wrap: wrap;
  }
  .civ-stat-global {
    overflow-x: auto;
  }
  .titre-page .titre-page-mot {
    font-size: 42px !important;
  }
  .civ-identite {
    padding-bottom: 16px;
  }
  .civ-boutons {
    flex-wrap: wrap;
  }
}
@media (min-width:701px) and (max-width:1100px) {
  .armurerie-face>.armurerie-face-choix-tris.armurerie-face-droite {
    grid-area: 1/2;
  }
  .armurerie-face>.armurerie-face-choix-liste.armurerie-face-droite {
    grid-area: 2/2/4/3;
  }
}
@media (max-width:700px) {
  .armurerie-face:is(.choix-gauche,.choix-droite)>:not(.armurerie-face-choix) {
    display: none;
  }
  .armurerie-face>.armurerie-face-choix-tris:is(.armurerie-face-gauche,.armurerie-face-droite) {
    grid-area: 1/1/2/3;
    min-height: 170px;
    padding-block: 16px;
  }
  .armurerie-face>.armurerie-face-choix-liste:is(.armurerie-face-gauche,.armurerie-face-droite) {
    grid-area: 2/1/3/3;
    min-height: 420px;
  }
  .armurerie-haut-liste {
    position: relative;
    inset: auto;
    max-height: 65vh;
    width: 100%;
    padding: 14px;
  }
  .armurerie-face-choix-liste {
    padding: 0 !important;
  }
}
.ladder-elo {
  color: var(--ink) !important;
}
.ladder-source {
  border: 1px solid var(--ligne);
  background: var(--surface);
  margin-left: auto;
}
.ladder-source .source-bulle {
  left: auto;
  right: 0;
}
.ladder-filtres .filtre, .civ-stat-global-haut .filtre {
  height: 32px;
  min-height: 32px;
}
.ladder-recherche {
  background: var(--surface);
  border: 1px solid var(--ligne);
}
@media (max-width:800px) {
  .ladder-colonnes , .ladder-ligne {
    grid-template-columns: 34px minmax(0,1fr) 59px 64px;
    gap: 7px;
    padding-inline: 10px;
  }
  .ladder-colonnes>:is(:nth-child(2),:nth-child(4),:nth-child(6),:nth-child(7),:nth-child(8),:nth-child(10),:nth-child(11),:nth-child(12)) , .ladder-ligne>:is(:nth-child(2),:nth-child(4),:nth-child(6),:nth-child(7),:nth-child(8),:nth-child(10),:nth-child(11),:nth-child(12)) {
    display: none;
  }
  .ladder-colonnes {
    font-size: 9px;
    white-space: normal;
    line-height: 1.3;
    height: 48px;
  }
  .ladder-ligne {
    height: 65px;
    font-size: 12px;
  }
  .ladder-nom {
    min-width: 0;
  }
  .ladder-pro , .ladder-twitch {
    display: none !important;
  }
  .ladder-taux {
    min-width: 0;
    width: auto;
  }
  .ladder-taux .barre {
    display: none;
  }
  .ladder-filtres-rangee {
    gap: 8px;
  }
  .ladder-filtres .filtre {
    max-width: 100%;
  }
  .ladder-liste {
    overflow: visible;
  }
  .ladder-fiche {
    overflow-x: auto;
  }
  .ladder-elo , .ladder-rang {
    font-size: 12px;
  }
}
.builder-select {
  display: none;
}
.builder-etiquette {
  color: var(--t);
}
.builder-age-titre {
  white-space: normal;
}
.builder-age-tete , .builder-age-resume {
  min-width: 0;
}
.titre-page-mot {
  margin: 0 !important;
}
.titre-page-sous {
  margin: 12px 0 0 !important;
}
@media (max-width:800px) {
  .fiche-rangee {
    grid-template-columns: minmax(0,1fr);
    grid-auto-rows: auto;
  }
  .fiche-deux>div {
    min-height: 160px;
  }
  .fiche-bas {
    min-height: 0;
  }
  .fiche-cadre {
    min-height: 140px;
  }
  .builder-cartes {
    display: none;
  }
  .builder-select {
    display: block;
    width: 100%;
    min-height: 46px;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--ligne);
    border-radius: 5px;
    padding: 10px;
    font-size: 14px;
  }
  .builder-actions , .builder-age-tete {
    flex-wrap: wrap;
  }
  .builder-age-texte {
    min-width: 0;
  }
  .builder-age-pop {
    white-space: normal;
  }
}
.builder-age-tete {
  background: color-mix(in srgb,var(--age-c) 32%,white);
}
.builder-age {
  background: var(--surface);
  border: 1px solid var(--ligne);
}
@media (max-width:800px) {
  .builder-age-tete {
    display: grid;
    grid-template-columns: 1fr auto 16px;
    text-align: left;
    gap: 8px;
    padding: 14px;
    align-items: center;
  }
  .builder-age-filet {
    display: none;
  }
  .builder-age-nom {
    grid-area: 1/1;
  }
  .builder-age-temps {
    grid-area: 1/2;
  }
  .builder-age-chevron {
    grid-area: 1/3;
  }
  .builder-age-titre {
    grid-area: 2/1/3/4;
    width: auto;
    font-size: 13px;
    line-height: 1.5;
    overflow: visible;
  }
  .builder-age-villageois {
    grid-area: 3/1/4/4;
    font-size: 12px;
  }
  .builder-etape {
    grid-template-columns: 38px 18px 20px minmax(0,1fr);
    gap: 5px;
    font-size: 13px;
  }
  .builder-etapes {
    padding-left: 0;
  }
  .builder-etape::before {
    display: none;
  }
  .builder-age-corps {
    padding: 14px;
  }
}
.source-bulle {
  display: none;
  box-sizing: border-box;
}
.source.on .source-bulle {
  display: block;
}
.builder-resume {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
}
.builder-resume::after {
  content: "⌄";
  color: var(--blue);
}
.builder-resume::-webkit-details-marker {
  display: none;
}
.builder-video {
  padding: 16px;
}
.builder-lecteur {
  width: min(100%,calc((100dvh - 120px)*16/9),1400px);
}
@media (max-width:700px) {
  .source.on .source-bulle {
    position: fixed;
    left: 16px;
    right: 16px;
    top: 180px;
    width: auto;
    max-width: calc(100vw - 32px);
    z-index: 150;
  }
  .civ-onglets-tete {
    top: auto !important;
  }
  .civ-onglets-tete>.onglets-rangee , .civ-stat-global-haut {
    flex-wrap: wrap;
  }
  .civ-stat-duels .civ-stat-ligne {
    grid-template-columns: 24px minmax(0,1fr) 52px 60px;
    gap: 8px;
  }
  .civ-colonnes>.pli-corps {
    grid-template-columns: minmax(0, 1fr);
  }
  .civ-nom {
    overflow-wrap: anywhere;
  }
  .civ-stat-bas {
    grid-template-columns: minmax(0, 1fr);
  }
  .civ-age {
    min-width: 32px;
    min-height: 40px;
  }
  .ladder-recherche {
    max-width: 100%;
    min-width: 0;
    flex: 1 0 100%;
    height: 44px;
  }
  .codex-arbre {
    max-width: 100%;
    overflow: auto;
  }
  .details-stats , .catalogue .civ-card {
    min-width: 0;
  }
}
@media (max-width:800px) {
  .codex {
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 18px;
  }
  .codex-arbre {
    min-width: 860px;
    overflow: visible;
  }
  .codex-entete {
    top: auto;
  }
  .codex-filtres {
    top: auto;
    flex-wrap: wrap;
    height: auto;
    min-width: 280px;
  }
  .civ-stat-duels {
    grid-template-columns: minmax(0, 1fr);
  }
  .civ-stat-duels :is(.victoire,.duree) .civ-stat-ligne {
    grid-template-columns: 24px minmax(0,1fr) 48px 40px;
    gap: 8px;
  }
  .civ-stat-cartes :is(.victoire,.duree) .civ-stat-ligne {
    grid-template-columns: 24px minmax(0,1fr) 44px 36px;
    gap: 8px;
  }
}
.jauge {
  --jauge-fond: #dce3ed;
  height: 7px;
  border-radius: 4px;
  overflow: hidden;
}
.barre , .taux-barre {
  height: 7px;
  border-radius: 4px;
}
.barre:not(.barre-double):not(.barre-centre) , .barre-double, .barre-moitie, .taux-barre {
  background: var(--piste-barre);
}
.barre:not(.barre-double):not(.barre-centre):not(.duel-civ-barre) , .taux-barre {
  overflow: hidden;
}
.barre-moitie-gauche {
  background: var(--tint-dce6f5);
}
.barre-moitie-droite {
  background: var(--tint-f0dfe2);
}
.barre.barre-centre {
  background: none;
}
.jauge::after , .taux-barre>i::after, .barre:not(.barre-double):not(.barre-centre):not(.duel-civ-barre)>i::after {
  display: none;
}
.barre .barre-etincelle , .barre .barre-centre-trait {
  top: 0;
  bottom: 0;
}
.armurerie-face-vs {
  margin-bottom: calc((var(--coups-taille,44px) - 36px)/2);
}
.armurerie-face-versus-icone {
  width: 36px;
  height: 36px;
  background: var(--blanc);
  -webkit-mask: url('Asset/Icones/duel-swords.svg') center / contain no-repeat;
  mask: url('Asset/Icones/duel-swords.svg') center / contain no-repeat;
}
.armurerie-face-titre , .armurerie-face-combat .armurerie-combat-section {
  justify-content: center;
  text-align: center;
}
.civ-onglets-tete , .civ-contenu .pli-tete, .codex-entete, .codex-filtres {
  position: relative !important;
  inset: auto !important;
  z-index: auto;
}
.civ-onglets-tete {
  background: var(--paper);
  padding: 12px 0;
  margin-bottom: 16px;
  border-block: 1px solid var(--ligne);
}
.civ-onglets-tete .onglets-rangee {
  flex-wrap: wrap;
  gap: 10px;
}
.builder-carte {
  flex: 0 0 225px;
  min-width: 0;
  max-width: none;
  min-height: 148px;
  overflow: hidden;
  scroll-snap-align: start;
}
.builder-carte-titre {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 42px;
}
.builder-carte .builder-etiquettes {
  flex-wrap: nowrap;
  overflow: hidden;
  width: 100%;
  height: 18px;
  flex: none;
  white-space: nowrap;
}
.builder-carte .builder-etiquette {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 1 auto;
}
.builder-carte .builder-etiquette+.builder-etiquette {
  flex: 1 1 auto;
}

/* En-tête Codex */
body .site-header {
  position: sticky;
  top: 0;
  z-index: 80;
}
body .flag-band {
  position: sticky;
  top: var(--codex-header-height, 86px);
  z-index: 70;
}
html {
  scroll-padding-top: calc(var(--codex-sticky-height, 152px) + 16px);
}
body main.corps {
  box-sizing: border-box;
  min-height: calc(100svh - var(--codex-sticky-height, 152px));
  padding-bottom: 64px;
}
.flag-inner>.flag-step {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.flag-inner>.flag-step:is(:hover,:focus-visible) {background:var(--pale);color:var(--blue)}
.flag-inner>.flag-step svg {width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:700px){body main.corps{padding-bottom:48px}.flag-inner>.flag-step{flex-basis:28px}}
body .site-header .header-inner {
  box-sizing: border-box;
  max-width: 1440px;
  width: calc(100% - 64px);
  min-height: 86px;
  margin: auto;
  display: grid;
  grid-template-columns: 280px minmax(0,1fr) 280px;
  align-items: center;
  gap: 20px;
  padding: 0;
}
body .site-header .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  text-decoration: none;
}
body .site-header .brand>img {
  width: 43px;
  height: 43px;
  object-fit: contain;
  flex: none;
}
body .site-header .brand strong , body .site-header .brand-name {
  font-family: Barlow,"Barlow Condensed",sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
}
body .site-header .brand small , body .site-header .brand-name span {
  display: block;
  font-family: Inter,sans-serif;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .22em;
  margin-top: 7px;
  line-height: 1.4;
  white-space: nowrap;
}
body .site-header .main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-width: 0;
}
body .site-header .main-nav>a {
  font: 500 13px/1.4 Inter,sans-serif;
  white-space: nowrap;
  padding: 32px 0;
}
body .site-header .header-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 15px;
  min-width: 0;
}
body .site-header .language-picker {
  position: relative;
}
body .site-header .language-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font: 500 12px/1 Inter,sans-serif;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}
body .site-header .language-trigger::-webkit-details-marker {
  display: none;
}
body .site-header .language-trigger svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  flex: none;
}
body .site-header .language-trigger .language-chevron {
  width: 12px;
  height: 12px;
}
body .site-header .language-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  left: auto;
  width: 300px;
  max-width: calc(100vw - 32px);
  padding: 14px;
  border: 1px solid #dfe3e9;
  border-radius: 8px;
  background: var(--surface);
  color: #202a39;
  box-shadow: 0 12px 36px #16203224;
  z-index: 100;
}
body .site-header .language-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
body .site-header .language-options a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 8px;
  font: 500 12px/1.4 Inter,sans-serif;
  color: #202a39;
  text-decoration: none;
  border-radius: 4px;
  min-width: 0;
}
body .site-header .language-options a:hover , body .site-header .language-options a[aria-current] {
  background: var(--tint-eef3fb);
  color: #376bc1;
}
body .site-header .language-options img {
  width: 19px;
  height: 13px;
  object-fit: cover;
}
body .site-header .steam-btn, body .home-intro .steam-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(105deg,#c09aff,#a8bafa 48%,#71e0ed);
  color: #171323;
  border: 0;
  border-radius: 5px;
  padding: 12px 16px;
  min-height: 48px;
  width: 200px;
  flex: none;
  box-sizing: border-box;
  text-decoration: none;
  white-space: nowrap;
  font: 600 11px/1.2 Inter,sans-serif;
}
body .site-header .steam-btn .steam-icon, body .home-intro .steam-btn .steam-icon {
  width: 23px;
  height: 23px;
  flex: none;
}
body .site-header .steam-btn strong, body .home-intro .steam-btn strong {
  font-size: 14px;
  text-transform: uppercase;
}
body .site-header :is(.menu-btn,.menu-button) {
  display: none;
}
@media (max-width:1390px) {
  body .site-header .header-inner {
    grid-template-columns: 1fr auto;
    gap: 20px;
  }
  body .site-header .main-nav {
    display: none;
    position: absolute;
    inset: 100% 0 auto;
    margin: 0;
    padding: 20px 32px;
    background: inherit;
    background-color: #1b1725;
    border-top: 1px solid #ffffff20;
    flex-wrap: wrap;
    justify-content: center;
    box-shadow: 0 8px 14px #16203220;
  }
  body .site-header .main-nav.open {
    display: flex;
  }
  body .site-header .main-nav>a {
    padding: 12px;
  }
  body .site-header :is(.menu-btn,.menu-button) {
    display: grid;
    place-items: center;
    width: 40px;
    height: 44px;
    padding: 8px;
    border: 0;
    background: transparent;
    color: white;
    font-size: 22px;
  }
}
@media (max-width:700px) {
  body .site-header .header-inner {
    width: calc(100% - 32px);
    min-height: 76px;
    gap: 12px;
  }
  body .site-header .brand strong , body .site-header .brand-name {
    font-size: 24px;
  }
  body .site-header .brand small , body .site-header .brand-name span {
    font-size: 7px;
    letter-spacing: .16em;
  }
  body .site-header .brand>img {
    width: 36px;
    height: 36px;
  }
  body .site-header .header-actions {
    gap: 8px;
  }
  body .site-header .steam-btn {
    width: 40px;
    min-height: 40px;
    padding: 9px;
  }
  body .site-header .steam-button-label {
    display: none;
  }
  body .site-header .language-menu {
    position: fixed;
    top: 70px;
    right: 16px;
    left: 16px;
    width: auto;
  }
}
@media (max-width:420px) {
  body .site-header .header-inner {
    width: calc(100% - 24px);
    gap: 6px;
  }
  body .site-header .brand {
    gap: 7px;
  }
  body .site-header .brand>img {
    width: 28px;
    height: 34px;
  }
  body .site-header .brand strong , body .site-header .brand-name {
    font-size: 21px;
  }
  body .site-header .brand small , body .site-header .brand-name span {
    font-size: 6px;
    letter-spacing: .1em;
  }
  body .site-header .language-trigger {
    gap: 4px;
    font-size: 10px;
  }
  body .site-header .language-trigger>svg:first-child {
    display: none;
  }
  body .site-header .header-actions {
    gap: 5px;
  }
  body .site-header :is(.menu-btn,.menu-button) {
    width: 30px;
  }
}

/* Interface/patchs */
.home-intro {
  grid-template-columns: 1.05fr .95fr;
  gap: 60px;
  padding-block: 70px 65px;
  align-items: center;
}
.home-intro h1 {
  font-size: clamp(48px,5vw,80px);
  max-width: 680px;
  line-height: 1.03;
}
.home-intro .intro-copy {
  max-width: 510px;
  margin-top: 24px;
}
.home-intro .intro-copy p {
  font-size: 15px;
  line-height: 1.8;
}
.patch-stage {
  position: relative;
  min-height: 390px;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.patch-stage-back {
  position: absolute;
  width: 250px;
  height: 300px;
  left: 8%;
  top: 35px;
  transform: rotate(-11deg);
  background: var(--tint-dce6f5);
  border: 1px solid #b5c7e4;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  color: #62738c;
  font: 700 28px Barlow,sans-serif;
}
.patch-stage-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 290px;
  min-height: 342px;
  padding: 28px;
  background: #162032;
  color: #fff;
  border-radius: 12px;
  transform: rotate(5deg);
  box-shadow: 0 20px 35px #16203216;
  text-decoration: none;
  transition: transform .2s;
}
.patch-stage-card:hover {
  transform: rotate(0);
}
.patch-stage-card .eyebrow {
  color: #a9c5f4;
  font-size: 10px;
}
.patch-stage-number {
  font: 700 76px/.95 Barlow,sans-serif;
  letter-spacing: -.02em;
  margin: 28px 0 20px;
  color: #fff;
}
.patch-stage-number strong {
  color: #a9c5f4;
  font-weight: 700;
}
.patch-stage-label {
  font-size: 14px;
  font-weight: 600;
}
.patch-stage-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #ffffff30;
  margin-top: 22px;
  padding-top: 18px;
  font-size: 11px;
  color: #ccd7e8;
}
.patch-stage-bottom b {
  font-size: 22px;
  color: #a9c5f4;
}
.patch-stage-tag {
  position: absolute;
  bottom: 10px;
  right: 4%;
  transform: rotate(-5deg);
  background: var(--tint-c5e5df);
  padding: 14px 19px;
  font: 700 11px Inter,sans-serif;
  color: #234a43;
  letter-spacing: .06em;
}
.home-journal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-block: 1px solid var(--line);
  padding: 20px 0;
  font-size: 11px;
  color: var(--muted);
}
.home-journal a {
  color: var(--blue);
  font-weight: 600;
}
.patch-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}
.patch-heading h1 {
  font: 700 64px/1 Barlow,sans-serif;
  margin: 14px 0;
}
.patch-heading p {
  color: var(--muted);
  line-height: 1.7;
}
.patch-feature {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  padding: 44px;
  background: #162032;
  color: #fff;
  border-radius: 10px;
  margin-bottom: 32px;
}
.patch-feature h2 {
  font: 700 clamp(42px,5vw,70px)/1 Barlow,sans-serif;
  margin: 24px 0 18px;
  color: #a9c5f4;
}
.patch-feature h3 {
  font-size: 18px;
  margin: 0 0 12px;
}
.patch-feature p {
  color: #ccd7e8;
  line-height: 1.7;
  max-width: 650px;
}
.patch-feature .button {
  margin-top: 24px;
  background: #a9c5f4;
  color: #162032;
}
.patch-feature>img {
  flex: none;
  width: 150px;
  height: 150px;
  margin-inline: 30px;
}
.patch-pill {
  display: inline-block;
  border: 1px solid #b5c7e4;
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
}
.patch-entry {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 24px;
  margin-bottom: 14px;
}
.patch-entry summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  cursor: pointer;
  list-style: none;
  min-height: 60px;
}
.patch-entry summary::-webkit-details-marker {
  display: none;
}
.patch-entry summary small {
  display: block;
  color: var(--blue);
  font-size: 11px;
  margin-bottom: 9px;
}
.patch-entry summary strong {
  font-size: 20px;
  line-height: 1.4;
}
.patch-expand {
  font-size: 26px;
  color: var(--blue);
  font-weight: 400;
}
.patch-entry [open] .patch-expand {
  transform: rotate(45deg);
}
.patch-entry-body {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
}
.patch-entry-body ul {
  padding-left: 20px;
  margin: 0 0 20px;
}
.patch-disclosure {
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted);
  max-width: 920px;
  margin-block: 30px;
}
@media (max-width:900px) {
  .home-intro {
    gap: 24px;
  }
  .patch-stage {
    min-height: 350px;
  }
  .patch-stage-card {
    width: 230px;
    min-height: 310px;
    padding: 23px;
  }
  .patch-stage-back {
    width: 210px;
    height: 280px;
    left: 0;
  }
  .patch-stage-number {
    font-size: 64px;
  }
  .patch-stage-tag {
    right: 0;
  }
  .patch-feature>img {
    margin: 0;
    width: 110px;
    height: 110px;
  }
}
@media (max-width:700px) {
  .home-intro {
    grid-template-columns: minmax(0, 1fr);
    padding-block: 38px;
    gap: 25px;
  }
  .home-intro h1 {
    font-size: 48px;
  }
  .patch-stage {
    width: 100%;
    max-width: 360px;
    min-height: 350px;
    margin: auto;
  }
  .patch-stage-back {
    left: 9%;
  }
  .patch-stage-card {
    margin-left: 25px;
  }
  .patch-stage-tag {
    right: 0;
    bottom: 0;
  }
  .home-journal {
    flex-wrap: wrap;
    line-height: 1.6;
  }
  .patch-heading {
    align-items: start;
    flex-direction: column;
  }
  .patch-heading h1 {
    font-size: 48px;
  }
  .patch-feature {
    gap: 16px;
  }
  .patch-entry {
    padding: 20px;
  }
  .patch-controls {
    align-items: start;
  }
  .patch-search {
    width: 100%;
    justify-content: space-between;
  }
  .patch-search input {
    min-width: 0;
  }
  .patch-entry summary strong {
    font-size: 18px;
  }
}
@media (prefers-reduced-motion:reduce) {
  .patch-stage-card {
    transition: none;
  }
}
.patch-version-bar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
.patch-version-bar label {
  display: grid;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  flex: 1;
  max-width: 620px;
  min-width: 0;
}
.patch-version-bar select {
  width: 100%;
  padding: 14px 36px 14px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  text-overflow: ellipsis;
}
.patch-pagination {
  display: flex;
  gap: 10px;
}
.patch-pagination button {
  padding: 14px 18px;
  min-height: 48px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 12px;
}
.patch-pagination button:disabled {
  opacity: .4;
  cursor: default;
}
@media (max-width:700px) {
  .patch-version-bar {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }
  .patch-version-bar label {
    max-width: none;
  }
  .patch-pagination {
    justify-content: space-between;
  }
  .patch-feature {
    padding: 26px;
  }
  .patch-feature>img {
    display: none;
  }
}
.patch-details {
  min-height: 100px;
}
.patch-entry-body li {
  margin-block: 8px;
  overflow-wrap: anywhere;
}
.patch-entry-body li::marker {
  color: var(--blue);
}

/* Pied de page Codex */
.site-footer {
  background: var(--tint-eaf0f7);
  color: var(--ink);
  padding: 45px 0 26px;
  margin: 0;
  border-top: 1px solid #dce3ee;
}
.site-footer>.wrap {
  max-width: 1480px;
  width: calc(100% - 80px);
  margin: auto;
}
.site-footer .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #162032;
}
.site-footer .brand img {
  width: 43px;
  height: 43px;
  object-fit: contain;
}
.site-footer .brand strong {
  font: 700 28px/1 Barlow,sans-serif;
  letter-spacing: .01em;
  color: #101820;
}
.site-footer .brand small {
  display: block;
  color: #5b6d84;
  font: 600 8px/1.4 Inter,sans-serif;
  letter-spacing: .22em;
  margin-top: 7px;
}
.footer-main {
  display: flex;
  justify-content: space-between;
  gap: 35px;
}
.site-footer .footer-tagline {
  font-size: 12px;
  color: var(--muted);
  margin-top: 15px;
}
.site-footer .footer-links {
  display: flex;
  align-items: flex-start;
  gap: 45px;
  max-width: none;
  flex-wrap: nowrap;
}
.site-footer .footer-links div {
  display: flex;
  flex-direction: column;
  gap: 13px;
  font-size: 12px;
}
.site-footer .footer-links strong {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.site-footer .footer-links a {
  color: var(--muted);
}
.site-footer a:hover {
  color: var(--blue);
}
.site-footer .footer-privacy {
  margin: 20px 0;
  font-size: 12px;
  text-decoration: underline;
}
.site-footer .footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  margin-top: 35px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 10px;
  line-height: 1.8;
  color: var(--muted);
}
.site-footer .footer-bottom p {
  max-width: 730px;
  margin: 0;
  color: inherit;
}
.site-footer .footer-bottom>span {
  flex: none;
}
@media (max-width:850px) {
  .footer-main {
    flex-direction: column;
    gap: 30px;
  }
  .site-footer .footer-links {
    gap: 28px;
    justify-content: space-between;
  }
  .site-footer .footer-links div {
    gap: 13px;
    font-size: 11px;
  }
  .site-footer .footer-links strong {
    font-size: 9px;
  }
  .site-footer .footer-bottom {
    flex-direction: column;
    gap: 12px;
    font-size: 9px;
    margin-top: 27px;
    padding-top: 19px;
  }
}
@media (max-width:520px) {
  .site-footer>.wrap {
    width: calc(100% - 36px);
  }
  .site-footer .footer-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 18px;
  }
  .site-footer .footer-links div {
    min-width: 0;
  }
  .site-footer .footer-links a {
    overflow-wrap: anywhere;
  }
}

/* Publicité */
:root {
  --codex-ad-height: 66px;
  --codex-ad-bg: #f1f5fc;
  --codex-ad-line: #cfdaed;
  --codex-ad-ink: #526581;
}
body {
  padding-bottom: calc(var(--codex-ad-height) + env(safe-area-inset-bottom,0px));
}
html {
  scroll-padding-bottom: calc(var(--codex-ad-height) + env(safe-area-inset-bottom,0px) + 16px);
}
.codex-ad {
  position: fixed;
  inset: auto 0 0;
  z-index: 120;
  height: calc(var(--codex-ad-height) + env(safe-area-inset-bottom,0px));
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom,0px));
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--codex-ad-line);
  background: var(--codex-ad-bg);
  color: var(--codex-ad-ink);
  text-align: center;
  box-shadow: 0 -3px 16px #17243b08;
}
.codex-ad strong {
  display: block;
  font: 600 11px/1.5 Inter,"Segoe UI",sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.codex-ad span {
  display: block;
  font: 400 10px/1.5 Inter,"Segoe UI",sans-serif;
  margin-top: 3px;
}
@media (max-width:640px) {
  :root {
    --codex-ad-height: 60px;
  }
  .codex-ad span {
    font-size: 9px;
  }
}

/* Game artwork on the shared light surfaces. The filter removes only its diffuse dark fringe. */
img[src*="Asset/Elements/"] {
  filter: url("Asset/Icones/icones-claires.svg#codex");
}
.armurerie-techno.on, .details-icone-bascule.on {
  position: relative;
  background: var(--tint-eefaf4);
  border-color: #409b78;
}
.armurerie-techno.on::after, .details-icone-bascule.on::after {
  content: "✓"; position: absolute; right: 0; bottom: 0;
  width: 11px; height: 11px; display: grid; place-items: center;
  border-radius: 3px 0 3px 0; background: #347d60; color: white;
  font: 700 9px/1 Inter,sans-serif; pointer-events: none;
}

/* Commande partagée par les deux sites Codex. */
:root{--surface:#fff;--surface-soft:#eef2f7;--theme-accent:#376bc1;--theme-panel:#fff;--theme-text:#202a39;--theme-line:#dfe3e9;--theme-hover:#edf2fb}
:root[data-theme=dark]{--theme-panel:#202b3c;--theme-text:#e9eef7;--theme-line:#3c4a5f;--theme-hover:#2c3b53}
.codex-brand-group{display:flex;align-items:center;gap:12px;min-width:0}
.codex-theme{position:relative;flex:none;color:var(--theme-text)}
.codex-theme summary{display:grid;place-items:center;list-style:none;width:36px;height:40px;padding:6px;border:1px solid #ffffff35;border-radius:7px;cursor:pointer;color:#edf2fb;background:transparent}
.codex-theme summary::-webkit-details-marker{display:none}
.codex-theme svg{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.codex-theme summary:hover,.codex-theme[open] summary{background:#ffffff15}
.codex-theme fieldset{position:absolute;z-index:150;left:0;top:calc(100% + 12px);width:240px;padding:15px;margin:0;border:1px solid var(--theme-line);border-radius:10px;background:var(--theme-panel);color:var(--theme-text);box-shadow:0 12px 32px #0002}
.codex-theme legend{float:left;width:100%;font:600 13px/1.5 Inter,sans-serif;padding:0 0 10px}
.codex-theme label{clear:both;display:flex;align-items:center;gap:10px;min-height:43px;padding:8px;border-radius:6px;font:500 13px/1.5 Inter,sans-serif;cursor:pointer}
.codex-theme label:has(input:checked){background:var(--theme-hover);color:var(--theme-accent)}
.codex-theme label:hover{background:var(--theme-hover)}
.codex-theme input{width:15px;height:15px;accent-color:var(--theme-accent);margin:0;flex:none}
.codex-theme small{display:block;font:400 11px/1.6 Inter,sans-serif;margin-top:10px;color:var(--muted)}
.codex-theme summary:focus-visible,.codex-theme label:focus-within{outline:2px solid var(--theme-accent);outline-offset:3px}
@media(max-width:700px){.codex-brand-group{gap:7px}.codex-theme fieldset{position:fixed;top:76px;left:16px;right:16px;width:auto}.codex-theme summary{width:32px;height:36px}}
@media(max-width:420px){.codex-brand-group{gap:5px}body .site-header .brand strong,body .site-header .brand-name{font-size:18px}body .site-header .brand>img{width:24px}body .site-header .brand small,body .site-header .brand-name span{font-size:5.5px;letter-spacing:.04em}.codex-theme summary{width:28px;height:34px;padding:5px}.codex-theme svg{width:17px;height:17px}body .site-header .header-actions{gap:4px}}

:root{--tint-eef3fa:#eef3fa;--tint-f5f7fa:#f5f7fa;--tint-e4edfd:#e4edfd;--tint-ffe8e4:#ffe8e4;--tint-edf0f5:#edf0f5;--tint-fbfcff:#fbfcff;--tint-e9edf2:#e9edf2;--tint-f2f5fa:#f2f5fa;--tint-edf3fe:#edf3fe;--tint-fff0ed:#fff0ed;--tint-edf2fb:#edf2fb;--tint-dce6f5:#dce6f5;--tint-f0dfe2:#f0dfe2;--tint-eef3fb:#eef3fb;--tint-c5e5df:#c5e5df;--tint-eaf0f7:#eaf0f7;--tint-eefaf4:#eefaf4;}
:root[data-theme=dark]{--tint-eef3fa:var(--surface-soft);--tint-f5f7fa:var(--surface-soft);--tint-e4edfd:var(--surface-soft);--tint-ffe8e4:var(--surface-soft);--tint-edf0f5:var(--surface-soft);--tint-fbfcff:var(--surface-soft);--tint-e9edf2:var(--surface-soft);--tint-f2f5fa:var(--surface-soft);--tint-edf3fe:var(--surface-soft);--tint-fff0ed:var(--surface-soft);--tint-edf2fb:var(--surface-soft);--tint-dce6f5:var(--surface-soft);--tint-f0dfe2:var(--surface-soft);--tint-eef3fb:var(--surface-soft);--tint-c5e5df:var(--surface-soft);--tint-eaf0f7:var(--surface-soft);--tint-eefaf4:var(--surface-soft);}
/* Palette nuit AoE IV : surfaces bleutées et accents lisibles. */
:root[data-theme=dark]{--paper:#111924;--white:#1b2636;--surface:#1b2636;--surface-soft:#243248;--ink:#e6edf7;--muted:#a7b6cc;--line:#38475e;--blue:#97baff;--pale:#233652;--lightblue:#bfd4fc;--green:#79d3af;--gris-clair:#b5c3d6;--carte-2:#223046;--survol:#293c57;--cyan:#7cd3e1;--violet:#c4a5ff;--roux:#e8b477;--rose:#f1a1cf;--vert:#79d3af;--bois:#e3b278;--or-res:#e7cc72;--pierre:#b4c4dd;--huile:#becb83;--temps:#e1ce8c;--feu:#f2b172;--pos:#85d7ae;--neg:#fa9690;--piste-barre:#34435a;--theme-accent:#a9c7ff;--codex-ad-bg:#172233;--codex-ad-line:#35455e;--codex-ad-ink:#b5c5df}
:root[data-theme=dark] .details-statistiques{--stats-chiffre:#e6edf7;--nourriture:#fa9690;--roux:#e8b477;--armure-melee:#81d4bc;--armure-distance:#9cbfff}
:root[data-theme=dark] .details-statistiques .jauge{--jauge-fond:#33425a}
:root[data-theme=dark] :is(.duel-mobile-table,.duel-mobile-calcul,.duel-mobile-options){color:var(--ink);border-color:var(--line)}
:root[data-theme=dark] .duel-mobile-table .duel-mobile-valeur-gauche{color:#a9c7ff}
:root[data-theme=dark] .duel-mobile-table .duel-mobile-valeur-droite{color:#ffaaa3}
:root[data-theme=dark] .armurerie-face>.gagne.armurerie-face-gauche{background:#233955}
:root[data-theme=dark] .armurerie-face>.gagne.armurerie-face-droite{background:#452d39}
:root[data-theme=dark] .site-footer :is(.brand strong,.brand small){color:var(--ink)}
:root[data-theme=dark] body .site-header :is(.language-menu,.language-options a){color:var(--ink);border-color:var(--line)}
:root[data-theme=dark] :is(.tag,.patch-version-bar label,.armurerie-face-changer,.duel-mobile-ameliorations,.duel-mobile-fermer){color:var(--blue)}
:root[data-theme=dark] .builder-age-tete{background:color-mix(in srgb,var(--age-c) 26%,var(--surface))}
:root[data-theme=dark] .armurerie-haut-filtres .on{color:var(--ink)}
:root[data-theme=dark] :is(.armurerie-techno,.details-icone-bascule){background:#dce4ee}
:root[data-theme=dark] :is(.armurerie-techno.on,.details-icone-bascule.on){background:#bbdfd0;border-color:#65bb97}
:root[data-theme=dark] .button:not(.secondary){color:#142036}
:root[data-theme=dark] .patch-stage-tag{color:#a8d9cb}
:root[data-theme=dark] .patch-stage-back{color:#adbed9}
:root[data-theme=dark] .duel-mobile-table th{color:var(--muted)}
:root[data-theme=dark] .duel-mobile-table td{color:#a9c7ff}
:root[data-theme=dark] .duel-mobile-table td:last-child{color:#ffaaa3}
:root[data-theme=dark] .duel-mobile-table :is(td,th){border-color:var(--line)}

/* Même retrait à droite et centrage vertical du chevron des listes natives. */
select:not([multiple]):not([size]),select[size="1"]{appearance:none;-webkit-appearance:none;background-image:url("Asset/Icones/select-chevron.svg");background-repeat:no-repeat;background-size:14px 14px;background-position:right 16px center;padding-right:44px}
@media(forced-colors:active){select:not([multiple]):not([size]),select[size="1"]{appearance:auto;-webkit-appearance:auto;background-image:none;padding-right:16px}}

/* Étoiles : difficulté, éléments uniques, filtres et favoris du sélecteur Codex. */
:root[data-theme=dark] { --jaune: #f3cc58; }
.icone.icone-etoile { color: var(--jaune); }
body .codex-family-star,
body .codex-family-star[aria-pressed=true] { color: var(--jaune); }

/* Fiches joueurs sur le voile commun et séparations uniques du classement. */
.builder-age-nom { color: color-mix(in srgb, var(--age-c) 40%, #152238); }
.builder-age-nom > .age-banniere { color: color-mix(in srgb, var(--age-c) 72%, #152238); }
:root[data-theme=dark] .builder-age-nom,
:root[data-theme=dark] .builder-age-nom > .age-banniere { color: color-mix(in srgb, var(--age-c) 78%, white); }
.ladder-liste .ladder-ligne-bloc { border: 0; }
.ladder-liste .ladder-ligne-bloc + .ladder-ligne-bloc { border-top: 1px solid color-mix(in srgb, var(--ligne) 55%, transparent); }
.ladder-liste .ladder-ligne { border: 0; }
.ladder-liste .ladder-chevron { transform: rotate(-90deg); }
.ladder-profil-identite { display: flex; align-items: center; gap: 20px; margin-bottom: 36px; }
.bandeau-droit .ladder-profil-identite .details-nom { margin: 0; font-size: clamp(24px, 3vw, 36px); overflow-wrap: anywhere; }
.ladder-profil-identite p { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.bandeau-droit .fiche { --fiche-air: 32px; margin: 0; }
.bandeau-droit .fiche-cadre { background: transparent !important; border: 0 !important; border-radius: 0; box-shadow: none !important; padding: 0; }
.bandeau-droit .fiche-cadre::before, .bandeau-droit .fiche-cadre::after { display: none; }
.bandeau-droit .fiche .fiche-titre { margin-bottom: 18px; color: var(--muted); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
.bandeau-droit .fiche-trio { gap: 16px; }
.bandeau-droit .fiche-trio.bas { padding-top: 16px; margin-top: 16px; }
.bandeau-droit .fiche-courbe-boite { margin-inline: 0; }
@media(max-width:800px) {
  .bandeau-droit .fiche-rangee { grid-template-columns: minmax(0,1fr); grid-auto-rows: auto; }
  .bandeau-droit .fiche { --fiche-air: 30px; }
  .ladder-profil-identite { gap: 14px; margin-bottom: 32px; }
}
/* Long translated headings remain inside compact layouts. */
.catalogue h1 { overflow-wrap: anywhere; }
.ladder-colonnes > * { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 360px) { .catalogue h1 { font-size: 36px; } }

/* ==== Interface/codex-ui/codex-ui.css ==== */
/* Codex UI 1.1.0 — mêmes composants, palettes propres aux jeux. */
/* Contrôles : aucun halo au clic ; repère fin pendant la navigation clavier.
   Ces règles communes priment sur les anciens focus propres à chaque site. */
html[data-codex-site] :focus-visible{outline:1px solid var(--codex-accent,currentColor)!important;outline-offset:2px!important}
html[data-codex-input=pointer] :focus,html[data-codex-input=pointer] :focus-within{outline:none!important}
@media(forced-colors:active){html[data-codex-site] :focus-visible{outline-color:Highlight!important}}
:root{--codex-content-max:1360px;--codex-header-max:1600px;--codex-radius-control:6px;--codex-radius-panel:12px;--codex-bg:var(--paper,var(--bg));--codex-surface:var(--surface,var(--white));--codex-text:var(--ink);--codex-muted:var(--muted);--codex-line:var(--line)}
html[data-codex-site=aoe]{--max:1360px;--codex-accent:var(--blue);--codex-hero:#162032;--codex-hero-accent:#a5c1f1;--codex-soft:#eaf0f7}
html[data-codex-site=spam]{--max:1360px;--codex-accent:var(--purple);--codex-hero:#14111d;--codex-hero-accent:#c2aff0;--codex-soft:#ede8f4}
html[data-theme=dark]{--codex-soft:var(--surface-soft,var(--carte-2))}
body .wrap{max-width:var(--codex-content-max);width:calc(100% - 80px)}
body .site-footer>.wrap{max-width:var(--codex-content-max)}
body .site-header .header-inner{max-width:var(--codex-header-max)}
body .site-header.codex-nav-managed .header-inner{display:grid;grid-template-columns:minmax(0,1fr) max-content minmax(0,1fr);gap:20px;position:relative;min-height:86px}
body .site-header.codex-nav-managed .codex-brand-group{justify-self:start;width:max-content}
body .site-header.codex-nav-managed .header-actions{justify-self:end;width:max-content}
body .site-header.codex-nav-managed .main-nav,body .site-header .codex-nav-probe{display:flex;position:static;inset:auto;width:max-content;max-width:none;flex-direction:row;flex-wrap:nowrap;gap:20px;justify-content:center;align-items:center;padding:0;margin:0;border:0;background:none;box-shadow:none}
body .site-header.codex-nav-managed .main-nav>a,body .site-header .codex-nav-probe>a{font:500 13px/1.4 Inter,sans-serif;white-space:nowrap;padding:32px 0}
body .site-header .codex-nav-probe{position:absolute!important;left:0!important;top:0!important;visibility:hidden!important;pointer-events:none!important}
body .site-header.codex-nav-managed :is(.menu-btn,.menu-button){display:none}
body .site-header.codex-nav-compact .header-inner{grid-template-columns:1fr auto}
body .site-header.codex-nav-compact .main-nav{display:none}
body .site-header.codex-nav-compact .main-nav.open{display:flex;position:absolute;inset:100% -32px auto;width:auto;max-height:calc(100dvh - 180px);overflow:auto;padding:16px 32px;background:var(--codex-hero);border-top:1px solid #ffffff30;flex-wrap:wrap;justify-content:center;gap:8px 20px;box-shadow:0 12px 28px #0003}
body .site-header.codex-nav-compact .main-nav>a{padding:12px}
body .site-header.codex-nav-compact :is(.menu-btn,.menu-button){display:grid;place-items:center;width:40px;height:44px;border:0;background:transparent;color:#fff;font-size:22px;padding:8px}
.codex-family{position:relative;width:fit-content;margin:20px 0}.codex-family>summary{display:flex;gap:16px;align-items:center;list-style:none;cursor:pointer;padding:12px 16px;min-height:44px;border:1px solid var(--codex-line);border-radius:6px;background:var(--codex-surface);color:var(--codex-text);font:600 13px/1.4 Inter,sans-serif}.codex-family>summary::-webkit-details-marker{display:none}.codex-family-fallback{display:grid;gap:12px;padding:18px 0}.codex-family:not([open])>.codex-family-fallback{display:none}.codex-family-fallback a{display:flex;align-items:center;gap:12px;font-size:13px}.codex-family-fallback img{object-fit:contain}
.codex-family-dialog{box-sizing:border-box;width:min(900px,calc(100% - 32px));max-height:calc(100dvh - 40px);padding:0;border:1px solid var(--codex-line);border-radius:14px;background:var(--codex-bg);color:var(--codex-text);box-shadow:0 24px 80px #0005;margin:auto;z-index:200;font:400 14px/1.5 Inter,sans-serif}.codex-family-dialog[open]{display:flex;flex-direction:column}.codex-family-dialog::backdrop{background:#101622b8;backdrop-filter:blur(4px)}.codex-family-heading{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:24px 28px 16px}.codex-family-heading h2{font-family:'Barlow Condensed',Barlow,Impact,sans-serif;font-size:38px;line-height:1.1;color:var(--codex-text);margin:0;text-transform:uppercase}.codex-family-close{flex:none;border:1px solid var(--codex-line);border-radius:6px;background:var(--codex-surface);color:var(--codex-text);width:44px;height:44px;cursor:pointer;font:24px Inter,sans-serif}.codex-family-tools{display:grid;gap:10px;padding:0 28px 18px;border-bottom:1px solid var(--codex-line)}.codex-family-tools>label{font-weight:600;font-size:12px}.codex-family-tools input[type=search]{box-sizing:border-box;min-width:0;width:100%;min-height:46px;padding:12px;border:1px solid var(--codex-line);border-radius:6px;background:var(--codex-surface);color:var(--codex-text);font:14px Inter,sans-serif}.codex-family-tools>div{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:12px}.codex-family-tools input[type=checkbox]{accent-color:var(--codex-accent);width:16px;height:16px;vertical-align:middle}.codex-family-count{color:var(--codex-muted)}.codex-family-scroll{min-height:120px;overflow:auto;overscroll-behavior:contain;padding:20px 28px}.codex-family-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.codex-family-card{position:relative;display:flex;align-items:center;gap:12px;padding:18px 42px 18px 14px;min-height:96px;border:1px solid var(--codex-line);border-radius:12px;background:var(--codex-surface);min-width:0}.codex-family-card>img{width:38px;height:38px;object-fit:contain;flex:none}.codex-family-card a{font-size:13px;font-weight:700;color:var(--codex-text);text-decoration:none;overflow-wrap:anywhere}.codex-family-card a::after{content:'';position:absolute;inset:0;border-radius:12px}.codex-family-card small{display:block;font-size:11px;color:var(--codex-muted);margin-top:4px;line-height:1.4}.codex-family-card .codex-family-current{color:var(--codex-accent);font-weight:600}.codex-family-star{position:absolute;right:2px;top:3px;border:0;background:none;color:var(--codex-muted);width:40px;height:44px;font-size:24px;cursor:pointer;z-index:1}.codex-family-star[aria-pressed=true]{color:var(--codex-accent)}.codex-family-empty{padding:25px;text-align:center;color:var(--codex-muted)}.codex-family-note{margin:0;padding:16px 28px;font-size:11px;color:var(--codex-muted);border-top:1px solid var(--codex-line);background:var(--codex-surface)}.codex-family-dialog :is(button,a,input):focus-visible,.codex-family>summary:focus-visible{outline:3px solid var(--codex-accent);outline-offset:3px}
/* Gabarits : les outils métier conservent leurs grilles spécialisées. */
body .button,body .btn{border-radius:var(--codex-radius-control)}
body .catalogue>.section-head{display:flex;flex-direction:column;align-items:stretch;gap:24px;margin-bottom:32px}
body .catalogue-search{display:flex;gap:12px;align-items:center}body .catalogue-search input{max-width:620px;flex:1;min-height:46px}
body .catalogue h1,body .page-head h1{font-size:clamp(40px,4.7vw,64px);line-height:1.05}
body .catalogue-description{font-size:14px;color:var(--muted);line-height:1.75;margin-top:16px;max-width:700px}
body .flag-band[hidden]{display:none}
html[data-codex-site=aoe] body .home-intro{position:relative;background:var(--codex-hero);color:#fff;box-shadow:0 0 0 100vmax var(--codex-hero);clip-path:inset(0 -100vmax);grid-template-columns:1fr 1fr;gap:40px;padding:64px 0;min-height:590px}
.home-intro>.home-steam{position:absolute;z-index:1;left:calc(75% + 10px);top:var(--home-steam-y,75%);transform:translate(-50%,-50%)}
html[data-codex-site=aoe] body .home-intro :is(h1,.intro-copy p){color:#fff}html[data-codex-site=aoe] body .home-intro h1 span,html[data-codex-site=aoe] body .home-intro .eyebrow{color:var(--codex-hero-accent)}
body .home-intro h1,body .hero h1{font-size:clamp(48px,5.8vw,88px);line-height:.98}
html[data-codex-site=aoe] body .home-intro .intro-copy p{color:#c5cede;font-size:15px;max-width:470px}
html[data-codex-site=aoe] body .home-intro .button{background:var(--codex-hero-accent);color:#162032;border-color:transparent}html[data-codex-site=aoe] body .home-intro .button.secondary{background:transparent;color:white;border-color:#65748b}
.codex-hero-art{width:100%;height:auto;display:block;max-height:470px;object-fit:contain}
body .home-news{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:64px 0;border-top:1px solid var(--line)}body .home-news h2{font-size:clamp(34px,3.6vw,54px);margin:14px 0 22px}.home-news-copy .eyebrow{color:var(--blue)}
body .hero-inner{min-height:590px}body .hero-copy{padding:64px 0 90px}
@media(max-width:1000px){.codex-family-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){body .wrap{width:calc(100% - 48px)}html[data-codex-site=aoe] body .home-intro{grid-template-columns:1fr;padding:45px 0;gap:20px;min-height:0}.home-intro>.home-steam{left:50%;top:auto;bottom:45px;transform:translateX(-50%)}body .home-news{grid-template-columns:1fr;gap:20px}.codex-hero-art{max-height:340px}}
@media(max-width:700px){body .wrap{width:calc(100% - 32px)}body .site-header.codex-nav-managed .header-inner{min-height:76px;gap:12px}body .site-header.codex-nav-compact .main-nav.open{inset:100% -16px auto;padding:14px 20px;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:2px}body .site-header.codex-nav-compact .main-nav>a{padding:12px}.codex-family-dialog{width:calc(100% - 16px);max-height:calc(100dvh - 16px)}.codex-family-heading{padding:20px 18px 14px}.codex-family-heading h2{font-size:32px}.codex-family-tools{padding:0 18px 16px}.codex-family-scroll{padding:16px 18px}.codex-family-grid{grid-template-columns:1fr}.codex-family-note{padding:14px 18px}.codex-family-card{min-height:84px}body .catalogue-search{align-items:stretch;flex-direction:column}body .catalogue-search input{max-width:none}body .home-intro h1,body .hero h1{font-size:clamp(44px,12vw,62px)}}
@media(prefers-reduced-motion:reduce){.codex-family-dialog::backdrop{backdrop-filter:none}}

#codex-hero-carousel{--cr-bg:#162032;--cr-accent:#a8c3ef;--cr-dim:#c5cede;background:var(--cr-bg);color:#fff;position:relative;box-shadow:0 0 0 100vmax var(--cr-bg);clip-path:inset(0 -100vmax)}
html[data-codex-site=spam] #codex-hero-carousel{--cr-bg:#14111d;--cr-accent:#c6afee;--cr-dim:#bfb5ce}
#codex-hero-carousel .cr-stage{display:grid;isolation:isolate;overflow:clip}
#codex-hero-carousel .cr-slide{grid-area:1/1;min-width:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s;align-self:stretch}
#codex-hero-carousel .cr-slide[data-active=true]{opacity:1;visibility:visible;pointer-events:auto;z-index:1}
#codex-hero-carousel .cr-slide>.hero,#codex-hero-carousel .cr-slide>.home-intro{height:100%;margin:0}
#codex-hero-carousel .cr-inner{min-height:590px;height:100%;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:64px 0}
html[data-codex-site=spam] #codex-hero-carousel .cr-inner{max-width:1360px;width:calc(100% - 80px);margin:auto;min-height:655px;grid-template-columns:45% 55%;gap:0}
#codex-hero-carousel .cr-copy{position:relative;z-index:2;min-width:0}
#codex-hero-carousel .cr-eyebrow{font-size:11px;letter-spacing:.15em;font-weight:700;text-transform:uppercase;color:var(--cr-accent);margin-bottom:24px}
#codex-hero-carousel .cr-copy h1{font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(48px,5.8vw,88px);font-weight:700;line-height:.98;text-transform:uppercase;margin:0;letter-spacing:-.02em;color:#fff}
#codex-hero-carousel .cr-copy h1 span{color:var(--cr-accent)}
#codex-hero-carousel .cr-copy>p{font:400 15px/1.8 Inter,Arial,sans-serif;color:var(--cr-dim);max-width:470px;margin:28px 0}
#codex-hero-carousel .cr-links{display:flex;gap:12px;flex-wrap:wrap}
#codex-hero-carousel .cr-social{display:inline-flex;align-items:center;gap:12px;padding:14px 20px;min-height:48px;border-radius:5px;background:var(--cr-accent);color:var(--cr-bg);border:1px solid transparent;font:600 13px/1.5 Inter,Arial,sans-serif;text-decoration:none}
#codex-hero-carousel .cr-social:nth-child(2){background:transparent;border-color:#6b7080;color:#fff}
#codex-hero-carousel .cr-social img{height:20px;width:20px;object-fit:contain;filter:brightness(0)}
#codex-hero-carousel .cr-social:nth-child(2) img{filter:brightness(0) invert(1)}
#codex-hero-carousel .cr-link-arrow{margin-left:10px}
#codex-hero-carousel .cr-creator-art{height:440px;position:relative;isolation:isolate;min-width:0}
#codex-hero-carousel .cr-orbit{position:absolute;border:1px solid #ffffff12;border-radius:50%;width:90%;aspect-ratio:1;max-width:440px;left:5%;top:0;z-index:-2}
#codex-hero-carousel .cr-art-base{position:absolute;left:0;top:0;width:64%;height:85%;object-fit:contain;opacity:.4;transform:rotate(-15deg);z-index:-1}
html[data-codex-site=spam] #codex-hero-carousel .cr-art-base{object-fit:cover;left:0;top:40px;border-radius:10px;max-width:290px;height:350px;opacity:.65}
#codex-hero-carousel .cr-back-panel{position:absolute;right:8%;top:25px;width:53%;height:82%;border:1px solid var(--cr-accent);background:color-mix(in srgb,var(--cr-accent) 10%,var(--cr-bg));transform:rotate(14deg);z-index:-1}
#codex-hero-carousel .cr-poster{position:absolute;left:23%;top:15px;width:58%;height:88%;border:1px solid color-mix(in srgb,var(--cr-accent) 65%,transparent);padding:22px;background:linear-gradient(145deg,color-mix(in srgb,var(--cr-accent) 24%,var(--cr-bg)),var(--cr-bg));box-shadow:0 24px 65px #0006;transform:rotate(-5deg);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
#codex-hero-carousel .cr-poster:before{content:'';position:absolute;inset:10px;border:1px solid #ffffff15;pointer-events:none}
#codex-hero-carousel .cr-poster-top{font:600 10px Inter,Arial,sans-serif;letter-spacing:.18em;color:var(--cr-accent)}
#codex-hero-carousel .cr-monogram{font:700 clamp(110px,13vw,180px)/1 'Barlow Condensed',Impact,sans-serif;text-align:center;color:var(--cr-accent);text-shadow:9px 12px 0 #ffffff08;letter-spacing:-.07em}
#codex-hero-carousel .cr-poster-name{font:700 28px 'Barlow Condensed',Impact,sans-serif;text-transform:uppercase;color:#fff;border-top:1px solid #ffffff25;padding-top:15px}
#codex-hero-carousel .cr-portrait{height:78%;width:100%;object-fit:cover}
#codex-hero-carousel .cr-art-tag{position:absolute;right:0;bottom:4px;background:#b7ded8;color:#1d3339;padding:16px 22px;font:700 12px Inter,Arial,sans-serif;transform:rotate(-6deg)}
#codex-hero-carousel .cr-controls{min-height:66px;border-top:1px solid #ffffff18;display:flex;align-items:center;gap:28px;max-width:1360px;margin:auto;padding:12px 0;color:var(--cr-dim)}
html[data-codex-site=spam] #codex-hero-carousel .cr-controls{width:calc(100% - 80px)}
#codex-hero-carousel .cr-controls[hidden]{display:none}
#codex-hero-carousel .cr-buttons{display:flex;align-items:center;gap:5px}
#codex-hero-carousel .cr-controls button{font:500 11px Inter,Arial,sans-serif;background:transparent;border:1px solid transparent;color:inherit;border-radius:4px;min-height:36px;padding:7px 10px;cursor:pointer}
#codex-hero-carousel .cr-controls button:hover{background:#ffffff0d;color:#fff}
#codex-hero-carousel .cr-controls button:focus-visible,#codex-hero-carousel a:focus-visible{outline:2px solid var(--cr-accent);outline-offset:3px}
#codex-hero-carousel .cr-dots{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#codex-hero-carousel .cr-dots button{border-bottom:2px solid transparent;border-radius:0}
#codex-hero-carousel .cr-dots button[aria-pressed=true]{color:var(--cr-accent);border-bottom-color:var(--cr-accent)}
#codex-hero-carousel .cr-count{margin-left:auto;font:500 10px Inter,Arial,sans-serif;white-space:nowrap;letter-spacing:.15em}
@media(max-width:900px){#codex-hero-carousel .cr-inner,html[data-codex-site=spam] #codex-hero-carousel .cr-inner{grid-template-columns:1fr;padding:45px 0 26px;gap:20px;min-height:0}#codex-hero-carousel .cr-creator-art{height:340px;max-width:500px;width:100%;margin:auto}#codex-hero-carousel .cr-poster{width:54%;left:26%}#codex-hero-carousel .cr-monogram{font-size:138px}#codex-hero-carousel .cr-controls{gap:12px}#codex-hero-carousel .cr-dots{gap:4px}#codex-hero-carousel .cr-count{display:none}}
@media(max-width:700px){html[data-codex-site=spam] #codex-hero-carousel .cr-inner,html[data-codex-site=spam] #codex-hero-carousel .cr-controls{width:calc(100% - 32px)}#codex-hero-carousel .cr-copy h1{font-size:clamp(44px,12vw,62px)}#codex-hero-carousel .cr-copy>p{font-size:13px;margin:22px 0}#codex-hero-carousel .cr-eyebrow{font-size:10px;letter-spacing:.1em}#codex-hero-carousel .cr-creator-art{height:310px}#codex-hero-carousel .cr-poster{left:18%;width:66%;padding:20px}#codex-hero-carousel .cr-back-panel{right:1%}#codex-hero-carousel .cr-art-tag{font-size:10px;padding:13px 16px}#codex-hero-carousel .cr-poster-top{font-size:8px}#codex-hero-carousel .cr-poster-name{font-size:24px}#codex-hero-carousel .cr-monogram{font-size:128px}#codex-hero-carousel .cr-controls{flex-wrap:wrap;justify-content:center;gap:0;padding:8px 0}#codex-hero-carousel .cr-dots{justify-content:center;gap:0}#codex-hero-carousel .cr-controls button{min-height:40px;padding:7px 8px}}
@media(max-width:900px){#codex-hero-carousel .cr-inner,html[data-codex-site=spam] #codex-hero-carousel .cr-inner{align-content:start;grid-auto-rows:max-content}}
@media(prefers-reduced-motion:reduce){#codex-hero-carousel .cr-slide{transition:none}}

#codex-hero-carousel .cr-dots{position:absolute;right:10px;top:9px;z-index:3;display:flex;align-items:center;gap:0;max-width:calc(100% - 20px);flex-wrap:wrap;justify-content:flex-end}
html[data-codex-site=spam] #codex-hero-carousel .cr-dots{right:max(10px,calc((100% - 1360px)/2))}
#codex-hero-carousel .cr-dots button{padding:0;width:28px;height:28px;min-height:28px;border:0;border-radius:50%;display:grid;place-items:center;background:transparent;color:var(--cr-accent);cursor:pointer}
#codex-hero-carousel .cr-dots button::before{content:'';display:block;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.28}
#codex-hero-carousel .cr-dots button[aria-pressed=true]::before{opacity:1}
#codex-hero-carousel .cr-dots button:hover::before{opacity:.8}
#codex-hero-carousel .cr-dots button:focus-visible{outline:2px solid var(--cr-accent);outline-offset:1px}
#codex-hero-carousel .cr-custom-art{display:grid;place-items:center}
#codex-hero-carousel .cr-custom-image{display:block;width:100%;height:100%;max-height:440px;object-fit:contain}
@media(max-width:700px){#codex-hero-carousel .cr-dots{top:5px}#codex-hero-carousel .cr-custom-image{max-height:310px}}

/* ==== Interface/codex-ui/codex-viewport.css ==== */
/* Ajustements partagés compatibles avec les deux générations du socle. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body .codex-ad[data-viewport] { top: var(--codex-ad-top); bottom: auto; }
body .site-header.codex-nav-compact .main-nav.open {
  inset-inline: calc((100% - 100vw) / 2);
  max-height: var(--codex-menu-space, calc(100dvh - 160px));
  overflow-y: auto;
  overscroll-behavior: contain;
}
body .site-header.codex-nav-managed .main-nav > a.active::after {
  top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 3px;
}
body .site-header.codex-nav-compact .main-nav > a.active::after {
  top: 12px; bottom: 12px; left: 0; right: auto; width: 3px; height: auto;
}
@media (max-width: 700px) {
  body .site-header .codex-theme fieldset {
    position: fixed; top: 70px; left: 16px; right: 16px;
    width: auto; min-width: 0; max-width: none; max-height: var(--codex-menu-space, calc(100dvh - 160px));
    overflow-y: auto;
  }
}