/* ==========================================================================
   Couche DA de l'Entrecarte (charte v3, partie B : Lie & sauge vieillie,
   MedievalSharp pour les titres, Comfortaa pour les textes).
   Chargee en DERNIER par chaque page. Les couleurs, elles, sont deja
   reecrites dans chaque feuille (outils/appliquer-da.py) : ici ne vivent que
   les corrections qui demandent un selecteur.
   ========================================================================== */

/* MedievalSharp n'a qu'une graisse : le gras demande partout (700) etait un
   faux gras calcule par le navigateur, qui empate les lettres. */
html { font-synthesis-weight: none; }

/* Ni Comfortaa ni MedievalSharp n'ont d'italique : Chrome penchait les lettres de
   force (sous-titres, citations), ce qui faisait bricole (sa validation du 31 oct.).
   Le texte reste droit ; une citation se reconnait a ses guillemets et a sa couleur. */
html { font-synthesis-style: none; }
blockquote, q, cite, em, i { color: #a8a48c; }
blockquote em, blockquote i { color: inherit; }

/* Un titre de section ne porte plus d'ornement a lui (barre, losange, etoiles) :
   le seul ornement est le separateur enlumine entre les grandes sections. */
h2::after,
.page-bestiaire h2::after,
.cj-notes h2::after,
.mdj-block-header h2::after,
.profil-section-title::after,
body.pj .pj-progression .profil-section-title::after,
.sv-bloc h2::after,
.sv-final-titre::after,
.sidebar-title::after,
.content-title::after,
.category-title::after { content: none !important; display: none !important; }

/* La nav tient sur une ligne au telephone : elle defile, centree quand elle tient,
   et s'estompe a droite pour dire qu'il y a la suite. */
@media (max-width: 768px) {
  .nav {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: .15rem;
    padding: .55rem 12px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
            mask-image: linear-gradient(to right, #000 88%, transparent);
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: 0 0 auto; white-space: nowrap; letter-spacing: .06em; }
  .nav a:first-child { margin-left: auto; }
  .nav a:last-child { margin-right: auto; padding-right: 1.2rem; }
}

/* « C'est ton profil ? » : une ligne et un bouton, plus un panneau */
.gst-invite,
body.pj .gst-invite { padding: 12px 18px; gap: 16px; align-items: center; }
.gst-invite-titre { font-size: .9rem; }
.gst-invite-sous,
body.pj .gst-invite-sous { margin: 2px 0 0; font-size: .8rem; }
.gst-invite .gst-twitch { padding: 7px 14px; font-size: .8rem; }

/* Le texte courant en Comfortaa 500 (charte B4) */
body { font-weight: 500; }

/* Comfortaa, plus large que Fredoka, faisait paraitre tout plus grand (son retour du 1er nov.).
   Presque tout le site est en rem : on baisse la base d'un cran, 18 -> 17 px (-5,5 %), partout pareil. */
html { font-size: 17px; }

/* --------------------------------------------------------------------------
   Le heros commun des pages du QG (.ec-tete, balisage pose par outils/tetes.py)
   Meme hauteur, meme ordre, meme traitement de la video sur toutes les pages :
   rubrique / titre / une phrase / filet enlumine.
   -------------------------------------------------------------------------- */
.ec-tete {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 340px;
  padding: 96px 20px 40px;          /* la nav fixe fait ~62 px */
  overflow: hidden;
  text-align: center;
  isolation: isolate;
}
.ec-tete-fond {
  position: absolute;
  inset: 0;
  z-index: -1;
}
/* La video s'arrete 16 px avant le bas, sous la partie OPAQUE du fondu : le bas du heros
   tombe souvent sur un demi-pixel, et a 125 % (Windows) ou dans la regie, la rangee
   partagee entre video et fondu laissait passer un liseré clair (BUGLOG 2026-10-31). */
.ec-tete-fond video {
  display: block;
  width: 100%;
  height: calc(100% - 16px);
  object-fit: cover;
  opacity: .5;
  filter: saturate(.65) sepia(.18);  /* la video passee comme un vieux tirage */
}
.ec-tete-fond::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(27, 16, 19, .55) 0%, rgba(27, 16, 19, .15) 40%, #1b1013 calc(100% - 28px)),
    radial-gradient(ellipse at center, transparent 40%, rgba(27, 16, 19, .55) 100%);
}
/* Le profil pose toute sa page sur un fond d'ambiance (la scene) : son ancien bandeau
   s'y fondait « sans ligne de separation » (son retour du 2026-09-13, profil-refonte.css).
   Ici le fond du heros s'efface donc vers le transparent au lieu de finir en nuit pleine. */
body.pj .ec-tete-fond {
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
}
body.pj .ec-tete-fond::after {
  background: radial-gradient(ellipse at center, transparent 40%, rgba(27, 16, 19, .55) 100%),
              linear-gradient(to bottom, rgba(27, 16, 19, .55), rgba(27, 16, 19, .15) 40%);
}
.ec-tete-contenu {
  max-width: 980px;                 /* les titres longs tiennent sur une ligne au bureau */
  min-width: 0;
}
/* Sous le heros, le contenu commence partout a la meme distance : les anciens
   heros etaient compenses par des marges propres a chaque page. */
.ec-tete + .lore-wrap { margin-top: 0 !important; padding-top: 1.5rem; }   /* style en ligne sur les fiches */
.ec-tete + .hub-quest-section { padding-top: 2rem; }
.ec-tete + .hub-quest-section .hub-quest-intro { margin-top: 0; }
.ec-tete + .quete-tabs { margin-top: 0; }
.ec-tete-rubrique {
  margin: 0 0 .5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #a8a48c;
}
.ec-tete-titre {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 2.9rem);
  line-height: 1.15;
  letter-spacing: .02em;
  color: #a8895a;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .6);
}
.ec-tete-phrase {
  margin: .9rem auto 0;
  max-width: 58ch;
  font-size: .95rem;
  line-height: 1.6;
  color: #ebe1cf;
  opacity: .88;
}
/* filet-tete.png = le separateur du portail recadre sur son motif (900 x 412) :
   la boite a SA proportion et l'image y tient en entier (contain), rien n'est rogne. */
.ec-tete-filet {
  display: block;
  width: 150px;
  aspect-ratio: 900 / 412;
  margin: 1rem auto 0;
  background: url(../img/filet-tete.png) center / contain no-repeat;
}
.ec-tete-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin-top: 1rem;
}
.ec-tete-lien {
  font-size: .82rem;
  color: #a8895a;
  text-decoration: none;
  border-bottom: 1px solid rgba(168, 137, 90, .4);
  padding-bottom: 1px;
  transition: color .2s, border-color .2s;
}
.ec-tete-lien:hover { color: #ebe1cf; border-color: #ebe1cf; }
@media (max-width: 640px) {
  .ec-tete { min-height: 260px; padding: 76px 16px 28px; }
  .ec-tete-phrase { font-size: .9rem; }
}

/* ==========================================================================
   AMELIORATIONS (ses choix du 1er nov. : 1, 4, la main, 8 ; puis 2, 3, 7)
   Les regles prefixees :root:not([data-mq-sans~="…"]) peuvent etre coupees
   depuis la regie (maquette.js pose l'attribut). Au portage, le prefixe est
   inoffensif (l'attribut n'existe jamais en ligne) ; on peut le retirer.
   ========================================================================== */

/* --- La main : Gaegu Maison pour ses apartes et la Voix manuscrite ---------
   Charte v3.1 : « la main » = apartes, petits mots, commentaires (jamais un
   titre, une etiquette ni un menu), en 700, +30 % par rapport au texte. */
@font-face {
  font-family: 'Gaegu Maison';
  src: url(../fonts/GaeguMaison-Bold.woff2) format('woff2');
  font-weight: 700;
  font-display: swap;
}
:root:not([data-mq-sans~="main"]) :is(.ec-main, .ec-fiche .ec-note, .ec-editeur .ec-note) {
  font-family: 'Gaegu Maison', var(--font-body);
  font-weight: 700;
  font-style: normal;
  font-size: 1.3em;
  line-height: 1.05;
  letter-spacing: 0;
  color: #d8c7a6;
  opacity: 1;
}
.ec-main { position: relative; }
.ec-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ec-fleche { display: block; position: absolute; overflow: visible; pointer-events: none; }
.ec-fleche path { fill: none; stroke: #d8c7a6; stroke-linecap: round; stroke-linejoin: round; }
.ec-fleche .ec-fleche-tige,
.ec-fleche .ec-fleche-tete { stroke-width: 2.1; }
.ec-fleche .ec-fleche-repasse { stroke-width: .9; opacity: .55; }
:root[data-mq-sans~="main"] .ec-fleche { display: none; }
/* au telephone, une fleche n'a plus la place de viser : elle part */
@media (max-width: 700px) { .ec-fleche { display: none; } }
.ec-fleche-sans { display: none; }
/* le « < » de Gaegu se lit comme une parenthese : un <3 reste en police de texte */
.ec-main-signe { font-family: var(--font-body); font-size: .72em; font-weight: 700; }

/* --- 1. Transitions entre pages (View Transitions, natif ; ailleurs, rien) --
   Le titre du heros glisse vers le titre de la page suivante, la nav ne bouge
   pas, le reste se fond. */
@view-transition { navigation: auto; }
.nav { view-transition-name: ec-nav; }
.ec-tete-rubrique { view-transition-name: ec-rubrique; }
.ec-tete-titre { view-transition-name: ec-titre; }
.ec-tete-filet { view-transition-name: ec-filet; }
::view-transition-group(*) { animation-duration: .5s; animation-timing-function: cubic-bezier(.3, .7, .2, 1); }
::view-transition-old(root) { animation: .28s ease-in both ec-vt-sortie; }
::view-transition-new(root) { animation: .5s cubic-bezier(.3, .7, .2, 1) both ec-vt-entree; }
@keyframes ec-vt-sortie { to { opacity: 0; } }
@keyframes ec-vt-entree { from { opacity: 0; translate: 0 10px; } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* --- 4. Apparitions au defilement (CSS seul, animation-timeline: view()) ----
   `translate` et non `transform` : les cartes gardent leur soulevement au
   survol. Les blocs qui ont DEJA leur animation (cartes de quete, frise, les
   fondus de Decouvrir) ne sont pas dans la liste : on ne leur retire rien. */
@keyframes ec-apparait { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: none; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    :root:not([data-mq-sans~="apparitions"]) :is(.hub-section, .section-divider, .hub-stat-card, .hub-ranking-card,
        .viewer-card, .lore-card, .cj-pli, .sv-ouverture, .sv-eventail, .sv-bloc, .article-card, .ec-fiche .chap) {
      animation: ec-apparait linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }
}

/* --- 8. Les Archives en manuscrit -------------------------------------------
   Lettrine sur le premier vrai paragraphe de chaque feuillet (posee par
   main-ec.js, qui saute les apartes entre parentheses) ; la citation devient
   une page de carnet : papier jauni, encre. */
/* la lettrine reste dans son paragraphe, meme si celui-ci est plus court qu'elle */
:root:not([data-mq-sans~="manuscrit"]) .ec-lettrine { display: flow-root; }
:root:not([data-mq-sans~="manuscrit"]) .ec-lettrine::first-letter {
  float: left;
  margin: .08em .14em 0 0;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 3.5em;
  line-height: .8;
  color: #a8895a;
}
:root:not([data-mq-sans~="manuscrit"]) .ec-fiche .article-blockquote {
  margin: 1.4rem .2rem;
  padding: 1.3rem 1.6rem 1.2rem;
  border: 0;
  border-radius: 2px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 250, 235, .35), transparent 60%),
    linear-gradient(180deg, #e8dcc4, #d8c7a6);
  color: #2b1a22;
  opacity: 1;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 10px 24px -12px rgba(0, 0, 0, .8);
}
:root:not([data-mq-sans~="manuscrit"]) .ec-fiche .article-blockquote :is(p, strong, b, em, a, li) { color: #2b1a22; }
:root:not([data-mq-sans~="manuscrit"]) .ec-fiche .article-blockquote a { text-decoration-color: #62243c; }
:root:not([data-mq-sans~="manuscrit"]) .ec-fiche .article-blockquote .ec-note { color: #62243c; }

/* --- 2. La nav : un sceau de cire sous l'onglet actif, et elle s'affine au defilement
   Le sceau reprend la galette du site (carte.css, slot 4 ; cachets du Carnet), en cire
   lie-de-vin, avec l'empreinte de la cle ailee (la cle = le seuil de l'Entrecarte, charte B2).
   Il pend au bord de la nav comme un sceau a un ruban. */
:root:not([data-mq-sans~="sceau"]) .nav a.active { position: relative; background: none; color: #d8c7a6; }
:root:not([data-mq-sans~="sceau"]) .nav a.active::before,
:root:not([data-mq-sans~="sceau"]) .nav a.active::after {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(100% + 5px);
  width: 22px;
  height: 22px;
  margin-left: -11px;
  pointer-events: none;
}
:root:not([data-mq-sans~="sceau"]) .nav a.active::before {
  clip-path: polygon(50% 0%, 64% 3%, 74% 9%, 86% 12%, 92% 22%, 97% 33%, 100% 48%, 96% 62%, 97% 74%, 87% 82%,
    79% 91%, 66% 96%, 52% 100%, 38% 97%, 25% 93%, 15% 85%, 7% 75%, 2% 62%, 0% 48%, 3% 34%, 9% 22%, 18% 12%, 30% 6%, 38% 2%);
  background:
    radial-gradient(circle at 33% 26%, rgba(255, 255, 255, .34), transparent 44%),
    radial-gradient(circle at 72% 80%, rgba(0, 0, 0, .5), transparent 55%),
    radial-gradient(circle at 50% 50%, #8a3a58 0%, #62243c 62%, #3d1424 100%);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6));
}
:root:not([data-mq-sans~="sceau"]) .nav a.active::after {
  background: #3d1424;
  opacity: .85;
  -webkit-mask: url(../carte/empreintes/014-cle-ailee.webp) center / 13px no-repeat;
          mask: url(../carte/empreintes/014-cle-ailee.webp) center / 13px no-repeat;
}
@keyframes ec-nav-fine { to { padding-top: .4rem; padding-bottom: .4rem; background-color: rgba(27, 16, 19, .96); } }
@supports (animation-timeline: scroll()) {
  :root:not([data-mq-sans~="sceau"]) .nav {
    animation: ec-nav-fine linear both;
    animation-timeline: scroll(root);
    animation-range: 0 160px;
  }
}
@media (max-width: 768px) {
  /* la nav defile au telephone : le sceau y serait coupe, un filet laiton le remplace */
  :root:not([data-mq-sans~="sceau"]) .nav a.active::before,
  :root:not([data-mq-sans~="sceau"]) .nav a.active::after { content: none; }
  :root:not([data-mq-sans~="sceau"]) .nav a.active { box-shadow: inset 0 -2px 0 #a8895a; }
}

/* --- 7. La lanterne : allumee quand le live tourne (data/live.json, depose par le bot) --
   La « Lanterne d'expedition » du butin, a sa taille native (pixel art d'artiste). */
.ec-lanterne {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-left: .8rem;
  padding: 0 .4rem !important;
  color: #d8c7a6 !important;
  text-transform: none !important;
  letter-spacing: .02em !important;
  font-family: var(--font-body) !important;
  font-weight: 700;
  background: none !important;
}
.ec-lanterne img {
  width: 32px;
  height: 32px;
  margin: -8px 0;
  image-rendering: pixelated;
  animation: ec-lueur 2.8s ease-in-out infinite;
}
@keyframes ec-lueur {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 170, 70, .35)); }
  50%      { filter: drop-shadow(0 0 9px rgba(255, 170, 70, .6)); }
}
@media (prefers-reduced-motion: reduce) { .ec-lanterne img { animation: none; filter: drop-shadow(0 0 6px rgba(255, 170, 70, .45)); } }
@media (max-width: 768px) { .ec-lanterne span { display: none; } }

/* Les tableaux du Lore (Guildes, Peuples) poussaient la page au telephone (deja en ligne :
   425 px pour 390, 470 avec Comfortaa) : le tableau defile dans son propre cadre. */
@media (max-width: 700px) {
  .lore-table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Grands titres restes dans la police de texte : MedievalSharp, en laiton */
h2,
.hub-title,
.fiche-hero-title,
.cj-titre {
  font-family: var(--font-title);
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* --- Petits titres : MedievalSharp jamais sous 24 px (charte B4) -> Comfortaa 700.
   GENERE par outils/appliquer-da.py depuis outils/petits-titres.json (218 selecteurs).
   !important : certaines feuilles posent la police avec un selecteur plus fort. */
.activity-entry span { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
.book-page h3 { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
.bst-compteur span { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
.chap-bar-info b { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
.chr-tete span { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
.chron-stats b { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
.cj-geste-tape span { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
.cj-groupe-titre strong { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
.cj-pli span { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
.cj-pli-corps.mdj-block h3 { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
.comptoir-feed-users a { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
.comptoir-howto-step code { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
.comptoir-howto-step strong { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
.comptoir-howto-toggle span { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
.comptoir-trend-value a { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
.comptoir-trend-value span { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
.comptoir-widget h3 { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
.comptoir-widget.comptoir-widget-tendances h3 { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
.gal-qui b { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
.guide-invit.guide-invit--la h3 { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
.hab-field span { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
.hub-ranking-card h3 { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
.legacy-item span { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
.lore-card h3 { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
.lore-table th { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
.mdj-raccourcis summary { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
.mdj-step h3 { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
.nav a { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
.onboarding-step h3 { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
.panel.fade-in p { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
.profil-inventory-toggle span { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
.prop-inline a { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
.quete-field label { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
.role-card-back h3 { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
.role-card-front h3 { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
.side-nav a { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
.subnav.cmd-subnav a { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
.sv-etape b { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
.sv-outils b { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
.sv-voie h3 { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
.timeline-list.timeline-rich span { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
.timeline-panel button { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
a.btn { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
a.btn-404 { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
a.btn-chronicle { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
a.btn-quill { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
a.btn.btn-chronicle { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
a.btn.btn-chronicle.btn-login { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
a.cat-badge { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
a.cj-tuile-aller { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
a.cmd-mini-btn { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
a.comptoir-quick-btn { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
a.hub-stat-link-value { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
a.lien-carte-nom { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
a.perso-cta-btn { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
a.profil-scriptorium-link { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
a.prop-tag { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
a.sealed-key-slot-name { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
a.sv-bouton { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
a.sv-bouton.sv-bouton--plein { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
a.tag { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
a.timeline-link { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
button.book-nav-btn { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
button.bst-onglet { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
button.btn-quete.btn-roll { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
button.btn-quete.btn-surprise { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
button.btn-see-more { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
button.chap-all { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
button.chip { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
button.cmd-mini-btn { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
button.filter-btn { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
button.filter-btn.rarity-btn { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
button.load-more-btn { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
button.mdj-demo-tab { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
button.month-head { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
button.profil-loot-filtre { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
button.profil-loot-filtre.profil-loot-filtre--actif { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
button.tab-btn { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
button.timeline-tab-btn { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
button.view-toggle-btn { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
div.cj-classe-nom { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
div.cj-geste-quand { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
div.cj-moment-heure { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
div.comptoir-feed-users { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
div.comptoir-trend-label { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
div.comptoir-trend-value { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
div.demo-bubble { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
div.demo-scenario-title { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
div.lore-preview-badge { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
div.lore-preview-title { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
div.lore-sidebar-title { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
div.lore-teaser-title { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
div.lore-tree-cat { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
div.portal-btn-title { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
div.subtitle-404 { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
div.timeline-date { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
div.toc-title { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
div.zorbin-quote { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
h1.profil-name { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
h2.category-title { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
h2.comptoir-col-title { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
h2.obs-title { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
h3.article-title { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
h3.bst-bloc-titre { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
h3.bst-meca-titre { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
h3.cj-geste-titre { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
h3.cj-moment-titre { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
h3.comments-title { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
h3.echo-title { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
h3.legacy-title { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
h3.quete-bloc-title.sealed-title { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
h3.quete-bloc-title.side-quest-title { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
h3.sidebar-title { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
h4.hab-name { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
p.bst-compteur { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
p.bst-groupe { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
p.bst-groupe.bst-groupe-soeurs { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
p.bst-soeurs-titre { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
p.bst-surtitre { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
p.cj-groupe-titre { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
p.coffre-loot-name { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
p.comment-body { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
p.comptoir-col-sub { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
p.comptoir-zorbin-text { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
p.gal-intro-titre { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
p.gift-legend { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
p.gst-atelier-titre { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
p.gst-invite-titre { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
p.hub-recent-article-eyebrow { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
p.lien-bloc-titre { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
p.mdj-amorce { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
p.mdj-tiers-label { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
p.perso-cta-titre { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
p.portal-tagline { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
p.profil-irl-eyebrow { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
p.profil-irl-title { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
p.profil-motto { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
p.profil-section-title { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
p.quete-card-eyebrow { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
p.quete-profil-irl-eyebrow { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
p.quete-rarity.quete-rarity-commune { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
p.quete-rarity.quete-rarity-legendaire { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
p.quete-view-eyebrow { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
p.side-title { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
p.viewer-name { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.article-card-like-badge { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.article-card-tag { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.article-card-tag.article-card-tag--vagabond { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.badge.badge-mod { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.badge.badge-sub { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.badge.badge-vip { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.bst-chasseur-nom { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.bst-chasseur-rang { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.bst-chasseur-sur { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.bst-compteur-affrontees { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.bst-entree-nom { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.bst-entree-num { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.bst-zorbin-qui { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.btn-arrow { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.chap-idx { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.chap-title { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.cj-etape-num { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.cj-ou { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.cj-pli-ico { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.cj-tuile-nom { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.coffre-owner-name { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.coffre-owners-count { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.coffre-owners-more { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.coffre-rarity-badge { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.comment-author { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.comment-badge { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.comments-count { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.comptoir-feed-type.type-gift { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.comptoir-feed-type.type-trade { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.comptoir-howto-caret { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.comptoir-howto-num { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.demo-cmd { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.equip-slot-item.rarity-cursed { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.equip-slot-item.rarity-epic { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.equip-slot-label { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.gift-slot-placeholder { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.hab-kind { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.hub-ranking-rank { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.hub-ranking-value { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.hub-recent-article-status.hub-recent-article-status--default { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.hub-recent-article-status.hub-recent-article-status--stable { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.hub-recent-article-title { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.hub-stat-label { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.hub-stat-role-count { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.hub-stat-value { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.hub-stat-value.hub-stat-counter { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.legacy-card-name { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.legacy-card-stat-val { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.lieu-label-text { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.mdj-gauge-label { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.perso-cta-fleche { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.pj-lib { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.popup-owner-name { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.profil-pack-name { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.profil-role-name { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.prop-inline { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.psg-day { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.quest-type-badge.quest-type-badge--guild { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.quest-type-badge.quest-type-badge--irl { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.quetes-actives-label { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.rail-year { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.role-stat-label { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.role-stat-val { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.sealed-tracker-count { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.tab-count { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.tag-count { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.timeline-tag.tag-anomalie { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.timeline-tag.tag-overlay { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.timeline-tag.tag-site { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.toc-chapter { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.tooltip-word { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.zorbin-dialogue-name { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }
span.zorbin-sig { font-family: 'Comfortaa', sans-serif !important; font-weight: 700 !important; letter-spacing: .04em; }