/* ==========================================================================
   quetes-refonte.css — refonte visuelle des pages de quêtes (toutes les cartes)
   Style du concept de ton ami : noir chaud, crème et or, menu latéral.
   Couleurs mesurées sur la capture du concept ; polices choisies à l'œil
   (à confirmer auprès de ton ami, voir le bloc :root).

   À charger APRÈS le CSS de la page, une ligne dans le <head> de chaque page :
   <link rel="stylesheet" href="../css/quetes-refonte.css?v=3.0">
   et, juste AVANT <script src="../js/lanChange.js"></script> :
   <script src="../js/quetes-refonte.js?v=3.0"></script>

   Ne touche à aucune structure de tableau : les <tr>, les data-en / data-fr et le
   script de suivi par clic (*_symbol_color et *_symbol_clr) restent tels quels.
   Pour annuler la refonte : retirer ces deux lignes.
   ========================================================================== */

/* Polices : Barlow Condensed (titres) et Inter (texte), chargées ici pour que les deux lignes de la page suffisent */

:root {
  --ft-bg: #12130f;          /* fond de page */
  --ft-bar: #0e100e;         /* barre du haut */
  --ft-side: #0f1110;        /* menu latéral */
  --ft-panel: #171b19;       /* cartes, pastilles inactives */
  --ft-panel-2: #1f2421;     /* petites pastilles en relief */
  --ft-line: #2c302d;        /* bordures */
  --ft-fg: #e7e4da;          /* texte principal (crème) */
  --ft-muted: #a4a59a;       /* texte secondaire */
  --ft-cream: #e7e4da;       /* pastille active */
  --ft-accent: #ddb552;      /* or */
  --ft-accent-ink: #1b1608;  /* texte sur fond or */
  --ft-kappa: #fa6a11;       /* ton orange (Kappa) */
  --ft-light: #5b73ff;       /* bleu Lightkeeper, éclairci pour rester lisible sur fond sombre */
  --ft-side-w: 260px;        /* largeur du menu latéral (grands écrans) */
  --ft-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --ft-quest: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;   /* noms de quêtes : un peu plus large que Barlow Condensed */
  --ft-text: "Inter", "Segoe UI", Arial, sans-serif;
  --ft-mono: var(--ft-text);
}

/* --- Fond de page et texte --- */
body {
  background: var(--ft-bg);
  color: var(--ft-fg);
  font-family: var(--ft-text);
}
/* Photo de fond de la carte (Factory seulement), assombrie pour garder le texte lisible.
   Fichier à téléverser : public_html/img/factory-bg.jpg */
body:has(.factory_table) {
  background:
    linear-gradient(rgba(18,19,15,0.72), rgba(18,19,15,0.90)),
    url(../img/factory-bg.jpg) center top / cover no-repeat fixed,
    var(--ft-bg);
}
/* Customs : sa propre photo de fond. Fichier à téléverser : public_html/img/custom-bg.jpg */
body:has(.custom_table) {
  background:
    linear-gradient(rgba(18,19,15,0.72), rgba(18,19,15,0.90)),
    url(../img/custom-bg.jpg) center top / cover no-repeat fixed,
    var(--ft-bg);
}
/* Ground Zero : sa propre photo de fond. */
body:has(.ground_table) {
  background:
    linear-gradient(rgba(18,19,15,0.72), rgba(18,19,15,0.90)),
    url(../img/ground-zero-bg.jpg) center top / cover no-repeat fixed,
    var(--ft-bg);
}
/* Interchange : sa propre photo de fond. */
body:has(.inter_table) {
  background:
    linear-gradient(rgba(18,19,15,0.72), rgba(18,19,15,0.90)),
    url(../img/interchange-bg.jpg) center top / cover no-repeat fixed,
    var(--ft-bg);
}
/* Labs : sa propre photo de fond. */
body:has(.labs_table) {
  background:
    linear-gradient(rgba(18,19,15,0.72), rgba(18,19,15,0.90)),
    url(../img/labs-bg.jpg) center top / cover no-repeat fixed,
    var(--ft-bg);
}
/* Lighthouse : sa propre photo de fond. */
body:has(.light_table) {
  background:
    linear-gradient(rgba(18,19,15,0.72), rgba(18,19,15,0.90)),
    url(../img/lighthouse-bg.jpg) center top / cover no-repeat fixed,
    var(--ft-bg);
}
/* Reserve : sa propre photo de fond. */
body:has(.reserve_table) {
  background:
    linear-gradient(rgba(18,19,15,0.72), rgba(18,19,15,0.90)),
    url(../img/reserve-bg.jpg) center top / cover no-repeat fixed,
    var(--ft-bg);
}
/* Shoreline : sa propre photo de fond. */
body:has(.shore_table) {
  background:
    linear-gradient(rgba(18,19,15,0.72), rgba(18,19,15,0.90)),
    url(../img/shoreline-bg.jpg) center top / cover no-repeat fixed,
    var(--ft-bg);
}
/* Streets : sa propre photo de fond. */
body:has(.street_table) {
  background:
    linear-gradient(rgba(18,19,15,0.72), rgba(18,19,15,0.90)),
    url(../img/streets-bg.jpg) center top / cover no-repeat fixed,
    var(--ft-bg);
}
/* Woods : sa propre photo de fond. */
body:has(.woods_table) {
  background:
    linear-gradient(rgba(18,19,15,0.72), rgba(18,19,15,0.90)),
    url(../img/woods-bg.jpg) center top / cover no-repeat fixed,
    var(--ft-bg);
}
/* L'image de fond de la carte reste, mais très discrète */
[class*="-bg-image"] { opacity: 0.16; }

/* --- Barre du haut --- */
.nav--background {
  margin-block: 0 !important;      /* l'espace est dans le padding : contenu centré entre le haut de la page et la ligne du bas */
  padding-block: 0.6rem;
  background-color: var(--ft-bar);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ft-line);
}
.Pages_name {
  background: transparent !important;
  color: var(--ft-accent);
  font-family: var(--ft-display);
  font-weight: 700;
  font-size: 2.25rem;
  letter-spacing: 0.03em;
}
.nav--background .navbar_button {
  background: var(--ft-panel);
  color: var(--ft-fg);
  border: 1px solid var(--ft-line);
  border-radius: 999px;
}
.nav--background .navbar_button:hover { border-color: var(--ft-accent); outline: 0; }
.menu_icon { color: var(--ft-accent); }
.menu_icon:hover { color: var(--ft-fg); }
.menu_version { color: var(--ft-accent); font-family: var(--ft-display); }

/* Boutons « How to use the page » et langue : même pastille que le reste de la page.
   Les effets de l'ancien style (bordure animée en dégradé) sont retirés. */
.nav--background .instructions,
.nav--background .language-change {
  height: 2.4rem;
  padding: 0 1.1rem;
  background: var(--ft-panel);
  color: var(--ft-fg);
  border: 1px solid var(--ft-line);
  border-radius: 999px;
  font: 600 0.95rem/1 var(--ft-text);
  letter-spacing: normal;
  transition: border-color 0.2s, color 0.2s;
}
.nav--background .instructions::before,
.nav--background .instructions::after,
.nav--background .language-change::before,
.nav--background .language-change::after { content: none !important; display: none !important; }
/* Effet arc-en-ciel du bouton de langue : il est dessiné par le conteneur .lan__change-div, pas par le bouton */
.nav--background .lan__change-div::before,
.nav--background .lan__change-div::after { content: none !important; display: none !important; animation: none !important; }
.nav--background .instructions:hover,
.nav--background .language-change:hover { background: var(--ft-panel); border-color: var(--ft-accent); color: var(--ft-accent); }
.nav--background .instructions:active,
.nav--background .language-change:active { background: var(--ft-accent); color: var(--ft-accent-ink); }
.nav--background .instructions:focus-visible,
.nav--background .language-change:focus-visible { outline: 2px solid var(--ft-accent); outline-offset: 2px; }
@media (max-width: 815px) {
  .nav--background .instructions,
  .nav--background .language-change { height: 2.2rem; padding: 0 0.8rem; font-size: 0.85rem; }
}

/* --- Menu latéral (grands écrans) : le menu actuel devient permanent --- */
#offcanvasWithBothOptions {
  background-color: var(--ft-side);
  color: var(--ft-fg);
  border-right: 1px solid var(--ft-line);
  font-family: var(--ft-text);
}
#offcanvasWithBothOptions .nav_links { align-items: stretch !important; gap: 0.15rem !important; margin-left: 0 !important; }
#offcanvasWithBothOptions .nav_links a {
  display: block;
  padding: 0.55rem 0.8rem;
  border-radius: 10px;
  color: var(--ft-muted) !important;
  font: 500 1rem/1.3 var(--ft-text);
  letter-spacing: normal;
  text-decoration: none;
}
#offcanvasWithBothOptions .nav_links a:hover { background: var(--ft-panel); color: var(--ft-fg) !important; }
#offcanvasWithBothOptions .nav_links a.active {
  background: var(--ft-panel);
  color: var(--ft-fg) !important;
  font-weight: 600 !important;
  box-shadow: inset 3px 0 0 var(--ft-accent);
}
.side-brand { padding: 0.25rem 0.8rem 1rem; font: 700 1.5rem/1 var(--ft-display); letter-spacing: 0; white-space: nowrap; color: var(--ft-fg); }
.side-brand span { color: var(--ft-accent); }
.side-title { margin: 1.1rem 0.8rem 0.3rem; color: var(--ft-muted); font: 600 0.75rem/1 var(--ft-text); letter-spacing: 0.14em; text-transform: uppercase; }
.side-title:first-of-type { margin-top: 0.25rem; }
.side-map::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.75rem;
  border-radius: 50%;
  background: var(--ft-line);
  vertical-align: 0.1em;
}
.nav_links a.active.side-map::before { background: var(--ft-accent); }

@media (min-width: 1200px) {
  #offcanvasWithBothOptions {
    visibility: visible !important;
    transform: none !important;
    transition: none;
    position: fixed;
    top: var(--ft-top, 0px);
    bottom: 0;
    left: 0;
    width: var(--ft-side-w);
    z-index: 1020;
  }
  #offcanvasWithBothOptions .offcanvas-header,
  #offcanvasWithBothOptions + .offcanvas-backdrop { display: none; }
  .navbar_button { display: none !important; }
  .all_elements { padding-left: var(--ft-side-w); }
}

/* --- Menu latéral rétractable (grands écrans) : le bouton est ajouté par quetes-refonte.js ---
   Un seul bouton : poignée ronde dorée sur le bord du menu quand il est ouvert,
   pastille « Menu » en haut à gauche quand il est replié. */
.side-toggle { display: none; }
@media (min-width: 1200px) {
  .side-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    position: fixed;
    top: 4.5rem;
    left: calc(var(--ft-side-w) - 15px);
    z-index: 1030;
    width: 30px;
    height: 30px;
    padding: 0;
    background: var(--ft-panel);
    color: var(--ft-accent);
    border: 1px solid var(--ft-accent);
    border-radius: 999px;
    font: 600 0.95rem/1 var(--ft-text);
    cursor: pointer;
  }
  .side-toggle:hover { background: var(--ft-accent); color: var(--ft-accent-ink); }
  .side-toggle:focus-visible { outline: 2px solid var(--ft-accent); outline-offset: 2px; }
  .side-toggle svg { width: 16px; height: 16px; flex: none; }
  .side-toggle .side-toggle-label { display: none; }

  /* Menu replié : il disparaît et le bouton devient une pastille « Menu » ; l'image prend la place libérée */
  html.side-collapsed #offcanvasWithBothOptions { visibility: hidden !important; transform: translateX(-100%) !important; }
  html.side-collapsed .all_elements { padding-left: 0; }
  html.side-collapsed .side-toggle {
    top: 0.6rem;                   /* même espace que le padding de la barre : centré entre les deux lignes */
    left: 1.25rem;
    width: auto;
    height: 2.4rem;
    padding: 0 1rem 0 0.7rem;
  }
  html.side-collapsed .side-toggle svg { transform: rotate(180deg); }
  html.side-collapsed .side-toggle .side-toggle-label { display: inline; }
  html.side-collapsed .side-toggle .visually-hidden { display: none; }
}

/* --- En-tête de page (ajouté par quetes-refonte.js) --- */
.has-head .Pages_name { display: none; }
.page-head { padding: 1.25rem clamp(0.75rem, 2vw, 1.25rem) 0; }
.page-head .eyebrow { display: flex; align-items: center; gap: 0.5rem; color: var(--ft-accent); font: 600 0.85rem/1 var(--ft-text); letter-spacing: 0.14em; text-transform: uppercase; }
.page-head .eyebrow svg { width: 1.1rem; height: 1.1rem; }
.page-head h1 { margin: 0.4rem 0 0.35rem; color: var(--ft-fg); font: 700 clamp(2.2rem, 5vw, 3.2rem)/1 var(--ft-display); letter-spacing: 0.01em; }
.page-head p { margin: 0; color: var(--ft-muted); font: 400 1rem/1.5 var(--ft-text); }

/* --- Image de la carte dans un cadre --- */
.col-lg-9 .img-fluid { border: 1px solid var(--ft-line); border-radius: 14px !important; width: 100%; height: auto; }

/* --- Pastilles de navigation entre les cartes (ajoutées par quetes-refonte.js) --- */
.map-pills {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.85rem clamp(0.75rem, 2vw, 1.25rem) 0.35rem;
  scrollbar-width: thin;
}
.map-pill {
  flex: none;
  padding: 0.45rem 1.05rem;
  border: 1px solid var(--ft-line);
  border-radius: 999px;
  background: var(--ft-panel);
  color: var(--ft-muted);
  font: 600 0.95rem/1.2 var(--ft-text);
  text-decoration: none;
  white-space: nowrap;
}
.map-pill:hover { color: var(--ft-fg); border-color: var(--ft-muted); }
.map-pill[aria-current="page"] { background: var(--ft-cream); border-color: var(--ft-cream); color: var(--ft-bg); }
.map-pill:focus-visible { outline: 2px solid var(--ft-accent); outline-offset: 2px; }

/* --- Bouton Keys : même pastille que « How to use the page » et le bouton de langue --- */
.key_button {
  height: 2.9rem;
  padding: 0 1.7rem;
  background: var(--ft-panel);
  color: var(--ft-accent);          /* l'or du bouton ☰ du menu */
  border: 1px solid var(--ft-line);
  border-radius: 999px;
  font: 600 1.1rem/1 var(--ft-text);
  letter-spacing: normal;
  transition: border-color 0.2s, color 0.2s;
}
.key_button::before, .key_button::after { content: none !important; display: none !important; }
.key_button:hover { background: var(--ft-panel); border-color: var(--ft-accent); color: var(--ft-fg); filter: none; }
.key_button:active { background: var(--ft-accent); color: var(--ft-accent-ink); }
.key_button:focus-visible { outline: 2px solid var(--ft-accent); outline-offset: 2px; }
/* Petite pulsation dorée sur la bordure, lente et discrète, pour attirer l'oeil (arrêtée au survol et si le visiteur réduit les animations) */
@keyframes ftKeysPulse {
  0%, 100% { border-color: var(--ft-line); box-shadow: 0 0 0 0 rgba(221, 181, 82, 0), 0 0 0 rgba(221, 181, 82, 0); }
  50%      { border-color: var(--ft-accent); box-shadow: 0 0 0 5px rgba(221, 181, 82, 0.35), 0 0 16px rgba(221, 181, 82, 0.5); }
}
.key_button { animation: ftKeysPulse 2s ease-in-out infinite; }
.key_button:hover, .key_button:active { animation: none; }
@media (prefers-reduced-motion: reduce) { .key_button { animation: none; } }

/* --- Colonnes : l'image de la carte prend la plus grande part, comme sur le site d'origine (75 / 25).
   La colonne des quêtes garde une largeur lisible : 28 % de la ligne, entre 340 px et 480 px.
   Valable menu ouvert ou replié : l'image s'adapte à la place restante. --- */
@media (min-width: 992px) {
  .container-fluid > .row > .col-lg-3 { flex: 0 0 auto; width: clamp(340px, 28%, 480px); }
  .container-fluid > .row > .col-lg-9 { flex: 0 0 auto; width: calc(100% - clamp(340px, 28%, 480px)); }
}
[class*="_table"] { padding-inline: 0.75rem; }

/* --- Légendes (Kappa / Lightkeeper) et sens des couleurs de pastilles --- */
small.not_needed_title {
  display: inline-block;
  max-width: calc(100% - 1.5rem);
  margin: 0 0 0.25rem 0.75rem;
  padding: 0.15rem 0.6rem;
  background: var(--ft-panel) !important;
  border: 1px solid var(--ft-line);
  border-radius: 8px;
  color: var(--ft-muted);
  font: 500 0.78rem/1.35 var(--ft-text);
}
.orange_bg { background-color: var(--ft-kappa); color: #1a0a00; border-radius: 3px; }
.blue_bg { background-color: var(--ft-light); color: #fff; border-radius: 3px; }

.states {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.4rem;
  margin: 0.1rem 0.75rem 0.55rem;
  font: 600 0.78rem/1.3 var(--ft-text);
}
.states .st-break { flex-basis: 100%; height: 0; }
.states button {
  display: inline-flex;
  align-items: center;
  min-height: 1.7rem;
  padding: 0.1rem 0.6rem;
  background: transparent;
  border: 1px solid var(--ft-line);
  border-radius: 999px;
  color: var(--ft-muted);
  font: inherit;
  cursor: pointer;
}
.states button[data-state]::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.45rem;
  border-radius: 3px;
  background: var(--c);
}
.states button[data-count]::after { content: attr(data-count); margin-left: 0.45rem; opacity: 0.75; font-variant-numeric: tabular-nums; }
.states button:hover { color: var(--ft-fg); border-color: var(--ft-muted); }
.states button[aria-pressed="true"] { background: var(--ft-panel-2); border-color: var(--ft-accent); color: var(--ft-accent); }
.states button:focus-visible { outline: 2px solid var(--ft-accent); outline-offset: 2px; }
.states .st-none { --c: #212529; }
.states .st-none::before { border: 1px solid var(--ft-muted); }
.states .st-blue { --c: blue; }
.states .st-red { --c: red; }
.states .st-green { --c: green; }
.filter-empty { margin: 0 0.75rem 0.75rem; color: var(--ft-muted); font: 500 0.95rem/1.4 var(--ft-text); }
.filter-empty[hidden] { display: none; }
[class*="_table"] table tbody tr.tt-hide { display: none !important; }

/* --- Tableau : une carte par quête --- */
[class*="_table"] table { display: block; width: 100%; border: 0; background: transparent; }
[class*="_table"] thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[class*="_table"] tbody { display: grid; gap: 0.6rem; border: 0; }

[class*="_table"] table tbody tr {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  grid-template-areas: "sym quest" ". keys" ". notes";
  gap: 0.15rem 0.9rem;
  align-items: start;
  padding: 0.85rem;
  background: var(--ft-panel);
  border: 1px solid var(--ft-line);
  border-radius: 14px;
}
[class*="_table"] table tbody td {
  margin: 0;
  padding: 0 !important;
  width: auto;
  border: 0;
  text-align: left;
  background: transparent;
  box-shadow: none;
  color: var(--ft-fg);
  font-size: 1rem;
}
[class*="_table"] table tbody td:empty:not(:is([class*="_symbol_color"],[class*="_symbol_clr"])) { display: none; }

/* Colonne 1 : Quête */
[class*="_table"] table tbody td:nth-child(1) {
  grid-area: quest;
  padding: 0.2rem 0.55rem !important;
  border-radius: 6px;
  font: 700 1.2rem/1.2 var(--ft-quest);
  letter-spacing: 0.03em;
}
[class*="_table"] table tbody td:nth-child(1) a { font: inherit; color: var(--ft-fg); text-decoration: none; }
[class*="_table"] table tbody td:nth-child(1) a:hover { color: var(--ft-accent); text-decoration: underline; text-underline-offset: 3px; }
[class*="_table"] table tbody td:nth-child(1) a[href]:not([href=""])::before {
  content: "";
  display: inline-block;
  margin-right: 0.5em;
  border-left: 0.55em solid var(--ft-accent);
  border-top: 0.35em solid transparent;
  border-bottom: 0.35em solid transparent;
  vertical-align: 0.05em;
}

/* Kappa (orange) et Lightkeeper (bleu) : bande + fond léger */
[class*="_table"] table tbody td.quest_not_needed {
  background-color: color-mix(in srgb, var(--ft-kappa) 22%, transparent) !important;
  box-shadow: inset 4px 0 0 var(--ft-kappa);
  color: var(--ft-fg) !important;
}
[class*="_table"] table tbody td.quest_not_needed_blue {
  background-color: color-mix(in srgb, var(--ft-light) 28%, transparent) !important;
  box-shadow: inset 4px 0 0 var(--ft-light);
  color: var(--ft-fg) !important;
}

/* Colonne 2 : Symbole — la cellule devient la pastille que ton script colore */
[class*="_table"] table tbody td:is([class*="_symbol_color"],[class*="_symbol_clr"]) {
  grid-area: sym;
  display: grid;
  place-items: center;
  width: 3.25rem;
  min-height: 2.6rem;
  text-align: center;
  background-color: var(--ft-panel-2);
  border: 1px solid var(--ft-line);
  border-radius: 10px;
  color: var(--ft-accent);
  font: 700 1.6rem/1 var(--ft-display);
  user-select: none;
  -webkit-user-select: none;
  transition: background-color 0.3s;
}
/* Quand ton script a coloré la pastille (bleu / rouge / vert) */
[class*="_table"] table tbody td:is([class*="_symbol_color"],[class*="_symbol_clr"])[style*="background"] { color: #fff; border-color: transparent; }
[class*="_table"] table tbody td:is([class*="_symbol_color"],[class*="_symbol_clr"]):empty { border-style: dashed; opacity: 0.55; }
/* Repères décrits en mots (ex. « Sector B ») — classe posée par quetes-refonte.js */
[class*="_table"] table tbody td.sym-label {
  padding: 0.25rem !important;
  font: 500 0.6rem/1.1 var(--ft-mono);
  overflow-wrap: anywhere;
}
/* Plusieurs repères pour une même quête (ex. « A / E ») : gros et lisible */
[class*="_table"] table tbody td.sym-multi {
  width: auto !important;
  min-width: 3.25rem;
  padding: 0.25rem 0.6rem !important;
  font-size: 1.6rem !important;   /* même taille qu'une lettre seule */
  white-space: nowrap;
}
/* la colonne de la carte s'élargit pour ces quêtes (ex. « A / E ») */
[class*="_table"] table tbody tr:has(> td.sym-multi) { grid-template-columns: auto minmax(0, 1fr); }
@media (max-width: 815px) { [class*="_table"] table tbody td.sym-multi { min-width: 2.75rem; padding: 0.25rem 0.4rem !important; } }

/* Colonne 3 : Clés */
[class*="_table"] table tbody td:nth-child(3) {
  grid-area: keys;
  justify-self: start;
  margin: 0.15rem 0 0 0.55rem;
  padding: 0.1rem 0.75rem !important;
  background: rgba(221, 181, 82, 0.09);
  border: 1px solid rgba(221, 181, 82, 0.4);
  border-radius: 999px;
  color: var(--ft-accent);
  font: 600 0.8rem/1.4 var(--ft-text);
}

/* Colonne 4 : Notes */
[class*="_table"] table tbody td:nth-child(4) {
  grid-area: notes;
  padding: 0.1rem 0.55rem 0 !important;
  max-width: 62ch;
  font: 400 0.93rem/1.5 var(--ft-text);
}

/* Quête sans clé : la note vient juste sous le nom (le repère s'étend sur les deux lignes) */
[class*="_table"] table tbody tr.no-keys {
  grid-template-areas: "sym quest" "sym notes";
  row-gap: 0;
}
[class*="_table"] table tbody tr.no-keys td:nth-child(4) { padding-top: 0.1rem !important; }
[class*="_table"] table tbody tr.no-keys.no-notes { grid-template-areas: "sym quest"; }


/* --- Fenêtre « How to use the page » --- */
.modal-content {
  background-color: var(--ft-panel) !important;
  color: var(--ft-fg);
  border: 1px solid var(--ft-line);
  border-radius: 18px;
  font-family: var(--ft-text);
}
.modal-xl { border: 0; }
.modal-header { border-bottom: 1px solid var(--ft-line); }
.modal-title { font-family: var(--ft-display); font-weight: 700; letter-spacing: 0.02em; color: var(--ft-fg); }
.modal-body .question { font-family: var(--ft-display); font-weight: 700; letter-spacing: 0.02em; color: var(--ft-accent); }
.modal-body .answer { color: var(--ft-fg); font: 400 1rem/1.55 var(--ft-text); }
.modal-header .btn-close {
  background-color: transparent;
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 0.7;
}
.modal-header .btn-close:hover { opacity: 1; }

/* --- Stream Twitch (livestream.php) : seul l'habillage change, le code du stream reste le tien.
   Les styles en ligne de la fenêtre flottante sont remplacés avec !important. --- */
#twitch-float {
  border-top-color: transparent !important;   /* la barre de déplacement prend le fond ci-dessous */
  background: linear-gradient(var(--ft-muted), var(--ft-muted)) center -15.5px / 40px 4px no-repeat, var(--ft-panel-2) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--ft-line);
}
#main-twitch { border: 1px solid var(--ft-line); border-radius: 14px; overflow: hidden; }
.twitch-image a:hover span, .youtube-image a:hover span, .twitter-image a:hover span, .discord-image a:hover span { color: var(--ft-accent) !important; }

/* --- Mobile : mêmes cartes, plus compactes (remplace les 10 px du CSS de page) --- */
@media (max-width: 815px) {
  [class*="_table"] { padding-inline: 0.5rem; }
  small.not_needed_title { margin-left: 0.5rem; max-width: calc(100% - 1rem); }
  .states, .filter-empty { margin-inline: 0.5rem; }
  [class*="_table"] table tbody tr { grid-template-columns: 2.75rem minmax(0, 1fr); gap: 0.3rem 0.7rem; padding: 0.7rem; }
  [class*="_table"] table tbody td:is([class*="_symbol_color"],[class*="_symbol_clr"]) { width: 2.75rem; }
  [class*="_table"] table tbody td,
  [class*="_table"] table tbody td a { font-size: 0.93rem; }
  [class*="_table"] table tbody td:nth-child(1),
  [class*="_table"] table tbody td:nth-child(1) a { font-size: 1.2rem; }
  .Pages_name { font-size: 1.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  [class*="_table"] table tbody td { transition: none !important; }
}

/* Petits logos à côté des liens Twitch / Youtube / Twitter / Discord.
   On neutralise d'abord d'éventuelles anciennes icônes (style.css) pour ne pas les doubler. */
.twitch-image, .youtube-image, .twitter-image, .discord-image,
.twitch-image a, .youtube-image a, .twitter-image a, .discord-image a {
  background-image: none !important;
}
.twitch-image::before, .youtube-image::before, .twitter-image::before, .discord-image::before,
.twitch-image::after, .youtube-image::after, .twitter-image::after, .discord-image::after,
.twitch-image a::after, .youtube-image a::after, .twitter-image a::after, .discord-image a::after,
.twitch-image span::before, .youtube-image span::before, .twitter-image span::before, .discord-image span::before { content: none !important; display: none !important; }
.twitch-image img, .youtube-image img, .twitter-image img, .discord-image img { display: none !important; }
.twitch-image a, .youtube-image a, .twitter-image a, .discord-image a { display: inline-flex; align-items: center; gap: 0.6rem; }
.twitch-image a::before, .youtube-image a::before, .twitter-image a::before, .discord-image a::before {
  content: ""; display: inline-block; flex: none; width: 1.7rem; height: 1.7rem;
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
.twitch-image a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%239146FF%22 d=%22M3 1h19v13l-6 6h-4l-3 3v-3H3z%22/%3E%3Cpath fill=%22%23fff%22 d=%22M9 6h2v5H9zm5 0h2v5h-2z%22/%3E%3C/svg%3E"); }
.youtube-image a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Crect x=%221%22 y=%224%22 width=%2222%22 height=%2216%22 rx=%225%22 fill=%22%23FF0000%22/%3E%3Cpath fill=%22%23fff%22 d=%22M10 8.5v7l6-3.5z%22/%3E%3C/svg%3E"); }
.twitter-image a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M4 3l16 18M20 3L4 21%22 stroke=%22%23fff%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M4 3h4l12 18h-4z%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%221.6%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
.discord-image a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%235865F2%22 d=%22M4 5c3-2 5-2.5 5-2.5l.6 1.2a14 14 0 0 1 4.800 0L15 2.500S17 3 20 5c2 4 3 8 2.500 13-2 1.500-4 2.200-4 2.200l-1-1.800a9 9 0 0 1-1.200.4l-.6-.6h-6.400l-.6.600a9 9 0 0 1-1.200-.4l-1 1.800S3.500 19.500 1.500 18C1 13 2 9 4 5z%22/%3E%3Cellipse cx=%228.800%22 cy=%2212.500%22 rx=%221.900%22 ry=%222.100%22 fill=%22%23fff%22/%3E%3Cellipse cx=%2215.200%22 cy=%2212.500%22 rx=%221.900%22 ry=%222.100%22 fill=%22%23fff%22/%3E%3C/svg%3E"); }
/* Repères sur la carte (utilisés par la page ET par l'outil de placement) */
.rp-m { position: absolute; width: 0; height: 0; z-index: 2; }
.rp-b {
  position: absolute; transform: translate(-50%, -50%);
  min-width: 1.9em; height: 1.9em; padding: 0 0.35em; box-sizing: border-box;
  display: grid; place-items: center; white-space: nowrap;
  border-radius: 999px; background: var(--c, #fffe00); color: var(--ct, #111);
  border: var(--bw, 0.12em) solid #000; box-shadow: 0 1px 6px rgba(0,0,0,0.6);
  font: 700 1em/1 "Barlow Condensed", "Arial Narrow", Arial, sans-serif; letter-spacing: 0.02em; text-transform: uppercase;
  transition: opacity 0.2s, transform 0.2s, filter 0.2s;
}
.rp-b > .rp-l { font-size: 1.25em; line-height: 1; }
.rp-s-square { border-radius: 0.35em; }
.rp-s-diamond, .rp-s-hex { background: transparent; border: 0; box-shadow: none; min-width: 2.1em; height: 2.1em; filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6)); }
.rp-s-diamond::before { content: ""; position: absolute; inset: 0.3em; background: var(--c, #fffe00); border: var(--bw, 0.12em) solid #000; transform: rotate(45deg); z-index: -1; }
.rp-s-hex::before, .rp-s-hex::after { content: ""; position: absolute; z-index: -1; clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); }
.rp-s-hex::before { inset: 0; background: #000; }
.rp-s-hex::after { inset: calc(var(--bw, 0.12em) * 1.2); background: var(--c, #fffe00); }
.rp-t { position: absolute; left: 0; top: 0; transform-origin: 0 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7)); transition: opacity 0.2s; }
.rp-t-tri { width: 0; height: 0; border-left: 1.4em solid var(--c, #fffe00); border-top: 0.55em solid transparent; border-bottom: 0.55em solid transparent; transform: rotate(var(--d)) scale(var(--len, 1), 1) translate(-1.4em, -0.55em); }
.rp-t-long { --L: 1.5; width: calc(0.95em + var(--L) * 1em); height: 1em; background: linear-gradient(var(--c, #fffe00), var(--c, #fffe00)) 0 50% / calc(var(--L) * 1em) 0.3em no-repeat; transform: rotate(var(--d)) translate(calc(-0.95em - var(--L) * 1em), -0.5em); }
.rp-t-long::after { content: ""; position: absolute; right: 0; top: 0; border-left: 0.95em solid var(--c, #fffe00); border-top: 0.5em solid transparent; border-bottom: 0.5em solid transparent; }
.rp-t-chev { left: -0.5em; top: -0.5em; width: 1em; height: 1em; box-sizing: border-box; border-top: 0.28em solid var(--c, #fffe00); border-right: 0.28em solid var(--c, #fffe00); transform: rotate(var(--d)) translate(-0.71em, 0) rotate(45deg); transform-origin: 50% 50%; }

.rp-wrap { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.rp-wrap > img { max-width: 100%; height: auto; }
.rp-wrap { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }
.rp-wrap > img { width: auto; max-height: calc(100vh + 90px); }
.rp-m { pointer-events: none; }
.rp-hidden { opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0s 0.2s; }
.rp-focus .rp-m:not(.rp-on):not(.rp-free) { opacity: 0.22; }
.rp-tip .rp-b { pointer-events: auto; cursor: help; }
.rp-on { z-index: 5; }
.rp-on .rp-b { filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 9px var(--c, #fffe00)); animation: rpPulse 1.1s ease-out 3; }
@keyframes rpPulse { 0%, 100% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-50%,-50%) scale(1.35); } }
@media (prefers-reduced-motion: reduce) { .rp-on .rp-b { animation: none; } }
[class*="_table"] table tbody tr { cursor: default; }
[class*="_table"] table tbody tr.rp-cur { border-color: var(--ft-accent); box-shadow: 0 0 0 1px var(--ft-accent); }
.rp-demo { position: absolute; left: 0.5rem; bottom: 0.5rem; background: rgba(0,0,0,0.75); color: #ddb552; font: 600 0.75rem/1.3 sans-serif; padding: 0.2rem 0.5rem; border-radius: 6px; }

/* --- Très grand écran (1800 px et plus) : la légende Kappa/Lightkeeper et les filtres se placent en haut à droite,
   à la hauteur du titre, AU-DESSUS de la liste ; les quêtes commencent tout en haut, à droite de la carte. --- */
@media (min-width: 1800px) {
  .ft-sidehead { position: relative; height: 0; z-index: 3; }
  .ft-sidehead-in { position: absolute; left: 0; right: 0; bottom: 0.6rem; }
}

/* Logo de stream sous la carte */
.ft-logo { display: block; width: 170px; max-width: 45%; margin: .9rem auto 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--ft-border, #2c302d); opacity: .92; transition: opacity .2s, transform .2s; }
.ft-logo:hover { opacity: 1; transform: translateY(-2px); }
.ft-logo img { display: block; width: 100%; height: auto; }


/* ===== Ajustements v4.3 ===== */
/* Symbole vide (quête sans repère) : un tiret discret au lieu d'une case qui semble oubliée */
[class*="_table"] table tbody td:is([class*="_symbol_color"],[class*="_symbol_clr"]):empty::before { content: "\2014"; color: var(--ft-muted); font: 500 1.1rem/1 var(--ft-text); }

/* Légende Kappa / Lightkeeper : un peu plus aérée */
small.not_needed_title { padding: 0.3rem 0.75rem; line-height: 1.5; margin-bottom: 0.45rem; }

/* Mobile : le logo est plus petit et se place sous la liste des quêtes (déplacé par quetes-refonte.js) */
@media (max-width: 991px) {
  .ft-logo { width: 96px; max-width: 30%; margin: 1.1rem auto 1.4rem; }
}

/* Mobile : un appui sur la carte l'ouvre en grand (zoom) */
@media (max-width: 991px) {
  .rp-wrap:not(.rp-zoom-wrap) { cursor: zoom-in; }
  .rp-wrap:not(.rp-zoom-wrap)::after {
    content: "\2922"; position: absolute; right: 0.5rem; bottom: 0.5rem; width: 2rem; height: 2rem;
    display: grid; place-items: center; border-radius: 999px; background: rgba(14,16,14,0.82);
    border: 1px solid var(--ft-line); color: var(--ft-accent); font: 600 1.1rem/1 var(--ft-text); pointer-events: none;
  }
}
.rp-zoom { position: fixed; inset: 0; z-index: 2000; background: rgba(8,9,8,0.96); display: flex; flex-direction: column; }
.rp-zoom-scroll { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; padding: 3.6rem 0.5rem 0.5rem; }
.rp-zoom-close {
  position: absolute; top: 0.7rem; right: 0.7rem; z-index: 2; width: 2.6rem; height: 2.6rem; border-radius: 999px;
  border: 1px solid var(--ft-accent); background: var(--ft-panel); color: var(--ft-accent); font: 600 1.5rem/1 var(--ft-text); cursor: pointer;
}
.rp-zoom-wrap { max-width: none !important; cursor: default; }
.rp-zoom-wrap > img { max-width: none !important; width: 100%; }