/* ============================================================
   Thèmes (variables de couleurs)

   Le fond est celui du planificateur Satisfactory : c'est la teinte
   commune à tout le site, jeux et atelier compris, pour qu'on ne change
   jamais de terrain en passant d'un onglet à l'autre.

   Seule la couleur d'accent change d'une zone à l'autre (voir plus bas
   « Couleur par zone ») : elle habille les liens, les boutons et l'onglet
   courant, et donne à chaque partie du site son identité.
   ============================================================ */
:root[data-theme="sombre"] {
  --fond: #0d1013;
  --fond-carte: #171c21;
  --fond-carte-2: #1d232a;
  --bordure: #262e37;
  --texte: #dfe5eb;
  --texte-discret: #93a0ad;
  --accent: #fa9549;
  --accent-fonce: #d97a33;
  --accent-texte: #1d1508;
  --succes: #4ec97a;
  --succes-fond: #12301f;
  --erreur: #ff5f56;
  --erreur-fond: #331a19;
  --info: #54a8ff;
  --info-fond: #142534;
  --nouveau: #ffb020;
  --nouveau-fond: #32260e;
  --ombre: 0 4px 20px rgba(0, 0, 0, 0.45);
  --ombre-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* Même terrain, en clair : les gris tirent sur le bleu-gris du fond
   sombre, pour que le site reste le même site dans les deux thèmes. */
:root[data-theme="clair"] {
  --fond: #f1f3f6;
  --fond-carte: #ffffff;
  --fond-carte-2: #e9edf2;
  --bordure: #d9e0e8;
  --texte: #161a1f;
  --texte-discret: #5f6b78;
  --accent: #c2661c;
  --accent-fonce: #a2530f;
  --accent-texte: #ffffff;
  --succes: #1e9e55;
  --succes-fond: #e2f6ea;
  --erreur: #d64545;
  --erreur-fond: #fbe7e7;
  --info: #2f6fe0;
  --info-fond: #e8f0fe;
  --nouveau: #b97708;
  --nouveau-fond: #fdf1da;
  --ombre: 0 4px 20px rgba(15, 20, 30, 0.09);
  --ombre-sm: 0 1px 3px rgba(15, 20, 30, 0.07);
}

:root {
  --rayon: 14px;
  --rayon-sm: 9px;
  --largeur-sidebar: 252px;
  /* Voile de l'accent (onglet courant, badges) : recalculé juste après
     à partir de --accent ; cette valeur sert de repli aux navigateurs
     qui ne connaissent pas color-mix(). */
  --accent-fond: rgba(250, 149, 73, 0.16);
}
@supports (color: color-mix(in srgb, red, blue)) {
  :root, body[data-zone] {
    --accent-fond: color-mix(in srgb, var(--accent) 16%, transparent);
  }
}

/* ============================================================
   Couleur par zone
   Le fond ne bouge pas ; seule la couleur secondaire change.
   ============================================================ */
body[data-zone="partage"] { --accent: #e8edf3; --accent-fonce: #c6ced8; --accent-texte: #14181d; }
body[data-zone="nas"]     { --accent: #4f8cff; --accent-fonce: #3a6fd8; --accent-texte: #ffffff; }
body[data-zone="jeux"]    { --accent: #9d7bff; --accent-fonce: #7b5ae0; --accent-texte: #ffffff; }
body[data-zone="atelier"] { --accent: #c8a15a; --accent-fonce: #a8813c; --accent-texte: #221b10; }
body[data-zone="maj"]     { --accent: #ffb020; --accent-fonce: #d98f10; --accent-texte: #241a06; }
body[data-zone="admin"]   { --accent: #45c8b0; --accent-fonce: #2ea792; --accent-texte: #06231d; }
/* L'accueil et le compte gardent l'orange, la couleur de la maison. */

/* En thème clair, un accent blanc ou trop pâle ne se verrait pas :
   ces zones prennent une version foncée de la même idée. */
:root[data-theme="clair"] body[data-zone="partage"] { --accent: #39424e; --accent-fonce: #262d36; --accent-texte: #ffffff; }
:root[data-theme="clair"] body[data-zone="nas"]     { --accent: #2f6fe0; --accent-fonce: #2458b8; --accent-texte: #ffffff; }
:root[data-theme="clair"] body[data-zone="jeux"]    { --accent: #6d4fd8; --accent-fonce: #573db4; --accent-texte: #ffffff; }
:root[data-theme="clair"] body[data-zone="atelier"] { --accent: #8a6a24; --accent-fonce: #6d5219; --accent-texte: #ffffff; }
:root[data-theme="clair"] body[data-zone="maj"]     { --accent: #b97708; --accent-fonce: #955f04; --accent-texte: #ffffff; }
:root[data-theme="clair"] body[data-zone="admin"]   { --accent: #14806d; --accent-fonce: #0e6455; --accent-texte: #ffffff; }

/* Couleur des tuiles de l'accueil : la même que celle de leur zone,
   déclarée ici plutôt qu'en ligne pour que le thème clair puisse
   corriger celles qui y seraient invisibles (le blanc du partage). */
.zone-fichiers { --teinte: #e8edf3; }
.zone-nas      { --teinte: #4f8cff; }
.zone-jeux     { --teinte: #9d7bff; }
.zone-atelier  { --teinte: #c8a15a; }
.zone-dofus    { --teinte: #2e9e6b; }
.zone-maj      { --teinte: #ffb020; }
.zone-admin    { --teinte: #45c8b0; }
:root[data-theme="clair"] .zone-fichiers { --teinte: #39424e; }
:root[data-theme="clair"] .zone-atelier  { --teinte: #8a6a24; }
:root[data-theme="clair"] .zone-maj      { --teinte: #b97708; }
:root[data-theme="clair"] .zone-admin    { --teinte: #14806d; }

/* Les jeux gardent leur propre couleur, à l'intérieur comme dans le
   listing : orange FICSIT, rouge Valorant et vert Dofus. */
body[data-zone="satisfactory"] { --accent: #fa9549; --accent-fonce: #d97a33; --accent-texte: #1d1508; }
body[data-zone="valorant"]     { --accent: #ff4655; --accent-fonce: #d8323f; --accent-texte: #ffffff; }
body[data-zone="dofus"]        { --accent: #2e9e6b; --accent-fonce: #237a52; --accent-texte: #ffffff; }
:root[data-theme="clair"] body[data-zone="satisfactory"] { --accent: #c2661c; --accent-texte: #ffffff; }
:root[data-theme="clair"] body[data-zone="valorant"]     { --accent: #d1303e; --accent-texte: #ffffff; }
:root[data-theme="clair"] body[data-zone="dofus"]        { --accent: #1d7a50; --accent-texte: #ffffff; }

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; }

/* `hidden` doit cacher, point. Le `display:none` que le navigateur
   attache à [hidden] vient de sa feuille par défaut : la moindre règle de
   classe l'emporte dessus. `.bouton { display:inline-flex }` laissait
   ainsi « Supprimer » et « Modifier » à l'écran sur les personnages des
   autres — le serveur refusait bien (403), mais on ne le découvrait qu'en
   cliquant. Cette règle vaut pour tout le site : ne plus ajouter de
   `.machin[hidden] { display:none }` au cas par cas. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--fond);
  color: var(--texte);
  min-height: 100vh;
  line-height: 1.5;
  transition: background 0.25s, color 0.25s;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 1.5rem; margin: 0; }
h2 { font-size: 1.1rem; margin: 0 0 0.75rem; }

.discret { color: var(--texte-discret); font-weight: normal; font-size: 0.9em; }

.ic {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.18em;
}
.ic.logo { color: var(--accent); width: 1.35em; height: 1.35em; }

/* ============================================================
   Layout tableau de bord (sidebar + contenu)
   ============================================================ */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--largeur-sidebar);
  flex-shrink: 0;
  background: var(--fond-carte);
  border-right: 1px solid var(--bordure);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 30;
}

.sidebar-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.1rem 0.6rem;
}
.marque {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--texte);
}
.marque:hover { text-decoration: none; }
.marque span { line-height: 1.2; }

.sidebar-nav {
  flex: 1;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow-y: auto;
}
.sidebar-pied {
  padding: 0.5rem;
  border-top: 1px solid var(--bordure);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.62rem 0.8rem;
  border-radius: var(--rayon-sm);
  color: var(--texte-discret);
  font-weight: 500;
  font-size: 0.95rem;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.nav-item:hover { background: var(--fond-carte-2); color: var(--texte); text-decoration: none; }
.nav-item.actif {
  background: var(--accent-fond);
  color: var(--accent);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--accent);
}
.nav-item .ic { width: 1.25em; height: 1.25em; }
.nav-danger:hover { background: var(--erreur-fond); color: var(--erreur); }
.pastille {
  margin-left: auto;
  background: var(--accent);
  color: var(--accent-texte);
  border-radius: 99px;
  font-size: 0.7rem;
  padding: 0.05rem 0.45rem;
  font-weight: 700;
}
.libelle-theme { flex: 1; }

.contenu-principal {
  flex: 1;
  min-width: 0;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 1.75rem 2rem 3rem;
}

/* ── Barre du haut et tiroir ───────────────────────────────
   Le menu de gauche est un tiroir à toutes les tailles : il glisse
   depuis la gauche et vient se poser exactement là où il s'affichait
   avant, par-dessus la page. Le contenu, lui, occupe toute la largeur. */
.topbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--fond-carte);
  border-bottom: 1px solid var(--bordure);
  padding: 0.6rem 0.9rem;
}
.topbar-titre { font-weight: 700; display: inline-flex; align-items: center; gap: 0.5rem; }
.app { flex-direction: column; }
.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  height: 100vh;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  box-shadow: var(--ombre);
}
body.menu-ouvert .sidebar { transform: translateX(0); }
.overlay { display: none; }
body.menu-ouvert .overlay {
  display: block;
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 25;
}
.sidebar .fermer-menu { display: inline-flex; }
.icone-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--texte);
  cursor: pointer;
  padding: 0.4rem;
  border-radius: var(--rayon-sm);
  font-size: 1.3rem;
}
.icone-bouton:hover { background: var(--fond-carte-2); }

/* La porte d'entrée du site : pas d'inscription, on demande un compte. */
.connexion-sans-compte { margin: 1rem 0 0; text-align: center; font-size: 0.9rem; }

/* Page de connexion (sans sidebar) : centrée dans le flex .app */
.conteneur-simple { width: 100%; max-width: 420px; margin: auto; padding: 2rem 1rem; }

/* ============================================================
   En-tête de page
   ============================================================ */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.page-header .titre-bloc { display: flex; flex-direction: column; gap: 0.35rem; }
.page-header h1 { display: flex; align-items: center; gap: 0.6rem; }
.page-header .actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.ariane {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex-wrap: wrap;
  color: var(--texte-discret);
  font-size: 0.9rem;
}
.ariane a { color: var(--texte-discret); display: inline-flex; align-items: center; gap: 0.3rem; }
.ariane a:hover { color: var(--accent); text-decoration: none; }
.ariane .sep { width: 1em; height: 1em; opacity: 0.5; }

/* ============================================================
   Cartes / alertes
   ============================================================ */
.carte {
  background: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 1.25rem;
  box-shadow: var(--ombre-sm);
  margin-bottom: 1.25rem;
}
.carte.vide { text-align: center; color: var(--texte-discret); padding: 2.5rem; }

.alerte {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border-radius: var(--rayon-sm);
  margin-bottom: 1rem;
  border: 1px solid transparent;
  font-weight: 500;
}
.alerte .ic { width: 1.2em; height: 1.2em; }
.alerte-succes { background: var(--succes-fond); color: var(--succes); border-color: var(--succes); }
.alerte-erreur { background: var(--erreur-fond); color: var(--erreur); border-color: var(--erreur); }
.alerte-info   { background: var(--accent-fond); color: var(--accent); border-color: var(--accent); }

/* ============================================================
   Boutons
   ============================================================ */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 1px solid var(--bordure);
  background: var(--fond-carte-2);
  color: var(--texte);
  border-radius: var(--rayon-sm);
  padding: 0.5rem 0.95rem;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
}
.bouton:hover { text-decoration: none; filter: brightness(1.08); }
.bouton:active { transform: scale(0.97); }
.bouton .ic { width: 1.1em; height: 1.1em; }

.bouton-principal { background: var(--accent); border-color: var(--accent-fonce); color: var(--accent-texte); }
.bouton-principal:hover { background: var(--accent-fonce); }
.bouton-danger { background: transparent; border-color: var(--erreur); color: var(--erreur); }
.bouton-danger:hover { background: var(--erreur-fond); }
.bouton-discret { background: transparent; color: var(--texte-discret); }
.bouton-petit { padding: 0.35rem 0.65rem; font-size: 0.85rem; }
.bouton-large { width: 100%; padding: 0.7rem; font-size: 1rem; }
.bouton-carre { padding: 0.4rem; }         /* bouton icône seule */
.bouton-carre .ic { width: 1.15em; height: 1.15em; }

/* ============================================================
   Formulaires
   ============================================================ */
label { display: block; margin: 0.8rem 0 0.3rem; font-weight: 600; font-size: 0.92rem; }

input[type="text"], input[type="password"], input[type="number"], textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border-radius: var(--rayon-sm);
  border: 1px solid var(--bordure);
  background: var(--fond);
  color: var(--texte);
  font-size: 0.95rem;
  font-family: inherit;
}
input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
form .bouton[type="submit"] { margin-top: 1rem; }

.ligne-champs { display: flex; gap: 1rem; flex-wrap: wrap; }
.ligne-champs > div { flex: 1; min-width: 130px; }
.champ-large { flex: 2 !important; }

.case {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.4rem 0.8rem 0.4rem 0;
  font-weight: normal;
  cursor: pointer;
}
.case input { accent-color: var(--accent); width: 1rem; height: 1rem; }
.case-tout { color: var(--accent); }
.quota-champ { display: block; margin-top: 0.5rem; }

/* ============================================================
   Page fichiers / NAS
   ============================================================ */
.bandeau-maj {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--info-fond);
  border: 1px solid var(--accent);
  color: var(--texte);
  border-radius: var(--rayon);
  padding: 0.7rem 1rem;
  margin-bottom: 1.25rem;
}
.bandeau-maj:hover { text-decoration: none; filter: brightness(1.04); }
.bandeau-maj .bandeau-date { margin-left: auto; color: var(--texte-discret); font-size: 0.85rem; }

.carte-tableau { padding: 0.4rem 0.75rem; overflow-x: auto; }
.tableau-fichiers { width: 100%; border-collapse: collapse; }
.tableau-fichiers th {
  text-align: left;
  color: var(--texte-discret);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid var(--bordure);
}
.tableau-fichiers td { padding: 0.55rem 0.5rem; border-bottom: 1px solid var(--bordure); }
.tableau-fichiers tr:last-child td { border-bottom: none; }
.tableau-fichiers tbody tr:hover td { background: var(--fond-carte-2); }

.lien-fichier { color: var(--texte); font-weight: 500; display: inline-flex; align-items: center; gap: 0.55rem; }
.lien-fichier .ic { color: var(--texte-discret); }
a.lien-fichier:hover { color: var(--accent); text-decoration: none; }
a.lien-fichier:hover .ic { color: var(--accent); }

.cellule-action { text-align: right; white-space: nowrap; }
.col-actions { text-align: right; }

/* Zone NAS */
.nas-outils { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; margin-bottom: 1.25rem; }
.nas-outils .carte-upload { margin-bottom: 0; }
.carte-upload {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 0.9rem 1.25rem; border-style: dashed;
}
.carte-upload .upload-titre { flex: 1; min-width: 180px; display: inline-flex; align-items: center; gap: 0.5rem; }
.carte-upload input[type="file"] { width: auto; background: transparent; border: none; padding: 0; }
.carte-upload .bouton { margin-top: 0 !important; }
.nas-actions { display: flex; gap: 0.35rem; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.nas-actions .bouton { margin-top: 0 !important; }
.form-inline { display: inline; margin: 0; }
.form-inline .bouton { margin-top: 0 !important; }

/* Jauge de quota */
.carte-quota { padding: 0.9rem 1.25rem; margin-bottom: 1.25rem; }
.quota-entete { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.5rem; }
.quota-entete .ic { color: var(--texte-discret); }
.jauge { height: 10px; background: var(--fond-carte-2); border-radius: 99px; overflow: hidden; }
.jauge-remplissage { height: 100%; background: var(--accent); border-radius: 99px; transition: width 0.3s; }
.jauge-attention { background: var(--nouveau); }
.jauge-pleine { background: var(--erreur); }

/* ============================================================
   Badges
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.12rem 0.55rem;
  vertical-align: middle;
}
.badge-nouveau { background: var(--nouveau-fond); color: var(--nouveau); margin-left: 0.4rem; }
.badge-admin { background: var(--accent-fond); color: var(--accent); }
.badge-attente { background: var(--nouveau-fond); color: var(--nouveau); }
.badge-version { background: var(--accent); color: var(--accent-texte); font-size: 0.85rem; }
.badge-derniere { background: var(--succes-fond); color: var(--succes); }

/* ============================================================
   Page mises à jour (timeline)
   ============================================================ */
.frise { position: relative; }
.carte-version { margin-bottom: 1rem; }
.entete-version { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.entete-version h2 { margin: 0; }
.date-version { margin-left: auto; color: var(--texte-discret); font-size: 0.85rem; }
.notes-version {
  margin-top: 0.8rem; padding: 0.9rem 1rem;
  background: var(--fond-carte-2); border-radius: var(--rayon-sm);
  white-space: pre-wrap; line-height: 1.55;
}

/* ============================================================
   Administration
   ============================================================ */
.onglets {
  display: flex; gap: 0.25rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--bordure);
  margin-bottom: 1.5rem;
}
.onglet-btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.65rem 1rem; border: none; background: none;
  color: var(--texte-discret); font-weight: 600; font-size: 0.95rem;
  cursor: pointer; border-bottom: 2px solid transparent; font-family: inherit;
}
.onglet-btn:hover { color: var(--texte); }
.onglet-btn.actif { color: var(--accent); border-bottom-color: var(--accent); }
.onglet-panneau { display: none; }
.onglet-panneau.actif { display: block; }

/* Dans l'application Dofus, les onglets de la page sont les entrées du menu.
   Ils gardent la classe `.onglet-btn` — c'est elle que `theme.js` commande —
   et prennent l'allure d'un `.nav-item`. Le sélecteur est plus spécifique
   que `.onglet-btn` seul, sinon le soulignement de la barre horizontale
   l'emporterait (il est déclaré plus bas dans la feuille). */
.sidebar-nav .onglet-btn {
  display: flex; width: 100%; gap: 0.7rem;
  padding: 0.62rem 0.8rem;
  border-radius: var(--rayon-sm);
  border-bottom: none;
  font-weight: 500; font-size: 0.95rem;
  text-align: left;
}
.sidebar-nav .onglet-btn:hover { background: var(--fond-carte-2); color: var(--texte); }
.sidebar-nav .onglet-btn.actif {
  background: var(--accent-fond); color: var(--accent);
  font-weight: 600; box-shadow: inset 3px 0 0 var(--accent);
}
.sidebar-nav .onglet-btn .ic { width: 1.25em; height: 1.25em; }

/* Second niveau : des pastilles plutôt qu'un second soulignement, qui se
   confondrait avec la barre d'onglets juste au-dessus. */
.sous-onglets { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.sous-onglet-btn {
  padding: 0.4rem 0.9rem; border: 1px solid var(--bordure); border-radius: 999px;
  background: none; color: var(--texte-discret); font-weight: 600;
  font-size: 0.9rem; font-family: inherit; cursor: pointer;
}
.sous-onglet-btn:hover { color: var(--texte); border-color: var(--texte-discret); }
.sous-onglet-btn.actif {
  color: var(--fond); background: var(--accent); border-color: var(--accent);
}
.sous-onglet-panneau { display: none; }
.sous-onglet-panneau.actif { display: block; }

.grille-admin { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 820px) { .grille-admin { grid-template-columns: 1fr; } }
.titre-section { margin: 0 0 1rem; display: flex; align-items: center; gap: 0.5rem; }

/* Un compte = une ligne repliée, qu'on ouvre pour régler ses droits.
   Plié, on voit l'essentiel : qui, quels droits, dernière connexion. */
.carte-compte { padding: 0; margin-bottom: 0.55rem; }
.carte-compte > summary {
  padding: 0.7rem 1rem;
  cursor: pointer;
  list-style: none;
  border-radius: var(--rayon);
}
.carte-compte > summary::-webkit-details-marker { display: none; }
.carte-compte > summary:hover { background: var(--fond-carte-2); }
.carte-compte[open] > summary { border-bottom: 1px solid var(--bordure); border-radius: var(--rayon) var(--rayon) 0 0; }
.carte-compte > *:not(summary) { padding-left: 1.25rem; padding-right: 1.25rem; }
.carte-compte > *:last-child { padding-bottom: 1rem; }
.chevron-details { display: inline-flex; color: var(--texte-discret); transition: transform 0.18s; }
.carte-compte[open] .chevron-details { transform: rotate(90deg); }
.entete-compte { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.nom-compte { font-weight: 700; font-size: 1.05rem; display: inline-flex; align-items: center; gap: 0.4rem; }
.etiquettes-compte { display: inline-flex; gap: 0.35rem; }
/* Le résumé prend la place qui reste et s'efface le premier quand l'écran
   rétrécit : c'est un rappel, pas une information critique. */
.resume-droits {
  flex: 1;
  min-width: 8rem;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.derniere-compte { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 760px) {
  .resume-droits { flex-basis: 100%; text-align: left; }
  .derniere-compte { display: none; }
}
.liste-cases { background: var(--fond-carte-2); border-radius: var(--rayon-sm); padding: 0.5rem 0.9rem; margin: 0.5rem 0; }
.actions-compte {
  display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center;
  margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px dashed var(--bordure);
}
.form-en-ligne { display: flex; gap: 0.5rem; align-items: center; }
.form-en-ligne input { width: 210px; }
.form-en-ligne .bouton, .actions-compte .bouton { margin-top: 0 !important; }
.form-droits .bouton { margin-top: 0.4rem; }
.separateur-carte { border: none; border-top: 1px solid var(--bordure); margin: 1.25rem 0 1rem; }

/* Carte adresses */
.carte-adresses { border-left: 3px solid var(--accent); }
.ligne-adresse { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin: 0.6rem 0; }
.etiquette-adresse { font-weight: 600; min-width: 150px; display: inline-flex; align-items: center; gap: 0.4rem; }
.valeur-adresse {
  background: var(--fond); border: 1px solid var(--bordure); border-radius: var(--rayon-sm);
  padding: 0.4rem 0.7rem; font-family: "Consolas", monospace; font-size: 0.95rem;
  color: var(--accent); user-select: all;
}
.ligne-adresse .bouton { margin-top: 0 !important; }
.note-adresse { margin-top: 0.9rem; margin-bottom: 0; display: flex; align-items: center; gap: 0.4rem; }

/* ============================================================
   Connexion / compte / erreur
   ============================================================ */
.carte-connexion { text-align: center; padding: 2rem; }
.carte-connexion h1 { justify-content: center; font-size: 1.35rem; margin-bottom: 0.25rem; }
.carte-connexion .sous-titre { color: var(--texte-discret); margin-top: 0; }
.carte-connexion form { text-align: left; }
.logo-connexion { color: var(--accent); }
.logo-connexion .ic { width: 3rem; height: 3rem; }

.carte-erreur { text-align: center; padding: 2.5rem; }
.erreur-code { font-size: 3rem; font-weight: 800; color: var(--accent); }
.erreur-message { color: var(--texte-discret); margin: 0.5rem 0 1.5rem; }

/* ============================================================
   Responsive : sidebar → tiroir mobile
   ============================================================ */
@media (max-width: 880px) {
  .contenu-principal { padding: 1.25rem 1rem 2.5rem; }
  .nas-outils { grid-template-columns: 1fr; }
  .page-header { align-items: flex-start; }
  .form-en-ligne input { width: 100%; }
}

/* ============================================================
   Onglet Jeux : listing des sites accessibles
   ============================================================ */
.grille-jeux {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.tuile-jeu {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.15rem 1.25rem;
  background: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-sm);
  color: var(--texte);
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.tuile-jeu:hover {
  text-decoration: none;
  transform: translateY(-2px);
  border-color: var(--teinte, var(--accent));
  box-shadow: var(--ombre);
}
/* Filet de couleur du jeu, en haut de la tuile. */
.tuile-jeu::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--teinte, var(--accent));
}
.tuile-jeu-jeu {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--teinte, var(--accent));
}
.tuile-jeu h2 { margin: 0; font-size: 1.15rem; }
.tuile-jeu p { margin: 0; flex: 1; }
.tuile-jeu-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.4rem;
}
.tuile-jeu-pied .badge { background: var(--fond-carte-2); color: var(--texte-discret); }

/* Liste des accès (page Mon compte, onglet Jeux de l'admin) */
.liste-acces { list-style: none; padding: 0; margin: 0.4rem 0 0; }
.liste-acces li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--bordure);
}
.liste-acces li:last-child { border-bottom: none; }
.liste-cases-jeux { display: flex; flex-wrap: wrap; gap: 0.2rem 1.2rem; }

/* ============================================================
   Cadre d'un jeu intégré (bandeau de retour + plein écran)
   ============================================================ */
body.page-jeu { margin: 0; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.bandeau-jeu {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
  z-index: 20;
  flex: none;
  padding: 0.5rem 0.9rem;
  background: var(--fond-carte);
  border-bottom: 1px solid var(--bordure);
  border-top: 3px solid var(--teinte, var(--accent));
}
.retour-site { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 700; color: var(--texte); }
.retour-site:hover { color: var(--accent); text-decoration: none; }
/* Le chevron du sprite pointe à droite : on le retourne pour un retour. */
.retour-fleche { transform: rotate(180deg); }
.bandeau-jeu-nom {
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--teinte, var(--accent));
}
.bandeau-jeu-fin { margin-left: auto; margin-top: 0 !important; }
.cadre-jeu { flex: 1; width: 100%; border: 0; display: block; background: var(--fond); }

@media (max-width: 700px) {
  .bandeau-jeu-titre { display: none; }
}

/* ============================================================
   Page d'accueil
   ============================================================ */
.hero {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1.6rem;
  margin-bottom: 1.5rem;
  border-radius: var(--rayon);
  background: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-left: 4px solid var(--accent);
  box-shadow: var(--ombre-sm);
}
.hero-date { color: var(--texte-discret); font-size: 0.85rem; }
.hero h1 { font-size: 1.7rem; margin: 0.1rem 0 0.3rem; }
.hero-sous { color: var(--texte-discret); }
.hero-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; }
.hero-badges .badge { background: var(--fond-carte-2); color: var(--texte-discret); }
.hero-maj {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--rayon-sm);
  background: var(--fond-carte-2);
  border: 1px solid var(--bordure);
  color: var(--texte);
  max-width: 340px;
}
.hero-maj:hover { border-color: var(--accent); text-decoration: none; }

/* À faire */
.carte-afaire { border-left: 3px solid var(--nouveau); margin-bottom: 1.5rem; }
.liste-afaire { list-style: none; padding: 0; margin: 0; }
.liste-afaire li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--bordure);
}
.liste-afaire li:last-child { border-bottom: none; }
.liste-afaire li > span { flex: 1; min-width: 200px; }
.liste-afaire .ic { color: var(--nouveau); }
.liste-afaire .bouton { margin-top: 0 !important; }

/* Tuiles d'espaces */
.grille-espaces {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  margin-bottom: 0.6rem;
}
.tuile-espace {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.2rem 1.25rem 1.1rem;
  border-radius: var(--rayon);
  background: var(--fond-carte);
  border: 1px solid var(--bordure);
  box-shadow: var(--ombre-sm);
  color: var(--texte);
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.tuile-espace:hover {
  text-decoration: none;
  transform: translateY(-2px);
  border-color: var(--teinte, var(--accent));
  box-shadow: var(--ombre);
}
.tuile-espace::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: var(--rayon) var(--rayon) 0 0;
  background: var(--teinte, var(--accent));
}
.tuile-espace-ico { color: var(--teinte, var(--accent)); }
.tuile-espace-ico .ic { width: 1.6em; height: 1.6em; }
.tuile-espace h3 { margin: 0; font-size: 1.1rem; }
.tuile-espace p { margin: 0; flex: 1; }
.tuile-chiffres { display: flex; gap: 1.4rem; margin: 0.5rem 0 0.2rem; }
.chiffre { display: flex; flex-direction: column; line-height: 1.2; }
.chiffre b { font-size: 1.35rem; color: var(--teinte, var(--accent)); font-variant-numeric: tabular-nums; }
.chiffre span { font-size: 0.78rem; color: var(--texte-discret); }
.tuile-espace .jauge { margin-top: 0.35rem; }
.tuile-espace-action {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--teinte, var(--accent));
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.grille-compte {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.grille-compte .carte { display: flex; flex-direction: column; gap: 0.4rem; }
.grille-compte .bouton { align-self: flex-start; margin-top: 0.6rem; }

@media (max-width: 700px) {
  .hero { padding: 1.2rem; }
  .hero h1 { font-size: 1.4rem; }
  .hero-maj { max-width: none; width: 100%; }
}

/* ============================================================
   Vue galerie et dossiers privés du NAS
   Une grille de photos, une visionneuse plein écran et une page
   de verrou — pensées d'abord pour le téléphone.
   ============================================================ */
.badge-prive { background: var(--accent-fond); color: var(--accent); }
.bouton-actif { border-color: var(--accent); color: var(--accent); background: var(--accent-fond); }
.rangee-galerie { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.champ-filtre-court select { min-width: 5.5rem; }

.galerie-outils {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-bottom: 1.2rem;
}
.carte-envoi { display: flex; flex-direction: column; gap: 0.6rem; }
.carte-envoi .bouton { align-self: flex-start; }

.grille-albums {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  margin-bottom: 1.3rem;
}
.boite-album { position: relative; display: flex; }
.boite-album .tuile-album { flex: 1; min-width: 0; }
.album-supprimer {
  position: absolute;
  top: 6px;
  right: 6px;
  opacity: 0;
  transition: opacity 0.15s;
}
.boite-album:hover .album-supprimer,
.album-supprimer:focus-within { opacity: 1; }
.album-supprimer .icone-bouton { background: rgba(0, 0, 0, 0.55); color: #fff; border-color: transparent; }
/* Au doigt il n'y a pas de survol : le bouton reste visible sur téléphone. */
@media (hover: none) { .album-supprimer { opacity: 1; } }

.tuile-album {
  display: flex;
  flex-direction: column;
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--fond-carte);
  border: 1px solid var(--bordure);
  color: var(--texte);
  transition: transform 0.15s, border-color 0.15s;
}
.tuile-album:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--accent); }
.tuile-album img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.album-vide {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: var(--accent-fond);
  color: var(--accent);
}
.album-vide .ic { width: 2em; height: 2em; }
.tuile-album-texte {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.55rem 0.7rem 0.65rem;
  font-size: 0.9rem;
  min-width: 0;
}
.tuile-album-texte strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tuile-album-texte .discret { font-size: 0.78rem; }

.grille-photos {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  margin-bottom: 1.4rem;
}
.vignette {
  position: relative;
  padding: 0;
  border: 0;
  background: var(--fond-carte-2);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1;
}
.vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vignette:hover img { filter: brightness(1.08); }
.vignette:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.badge-video {
  position: absolute;
  right: 5px;
  bottom: 5px;
  display: inline-flex;
  padding: 3px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
}
.badge-video .ic { width: 0.95em; height: 0.95em; }

/* ---- Visionneuse ---- */
body.visionneuse-ouverte { overflow: hidden; }
.visionneuse {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  grid-template-rows: auto 1fr;
  /* Opaque, pas translucide : on ne veut pas deviner la page derrière. */
  background: #06080a;
}
.visionneuse-barre {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  color: #f2f4f7;
  background: rgba(0, 0, 0, 0.35);
}
.visionneuse-nom {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.visionneuse-barre .discret { color: #9aa3ad; white-space: nowrap; }
.visionneuse-barre #visionneuse-telecharger,
.visionneuse-barre form { margin-left: auto; }
.visionneuse-barre form + a,
.visionneuse-barre a + button { margin-left: 0; }
.visionneuse-barre .icone-bouton { color: #f2f4f7; }
.visionneuse-scene {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0.5rem;
}
.visionneuse-scene img,
.visionneuse-scene video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
}
.visionneuse-fleche {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
}
.visionneuse-fleche:hover { background: rgba(0, 0, 0, 0.7); }
.visionneuse-fleche.precedent { left: 0.6rem; }
.visionneuse-fleche.precedent .ic { transform: rotate(180deg); }
.visionneuse-fleche.suivant { right: 0.6rem; }

/* ---- Page de verrou ---- */
.carte-verrou {
  max-width: 420px;
  margin: 3rem auto;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  text-align: center;
}
.carte-verrou form { display: flex; flex-direction: column; gap: 0.6rem; }
.verrou-sceau {
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--accent-fond);
  color: var(--accent);
}
.verrou-sceau .ic { width: 1.8em; height: 1.8em; }

@media (max-width: 700px) {
  .grille-photos { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 3px; }
  .grille-albums { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  /* Sur téléphone on navigue au doigt : les flèches ne servent plus à rien. */
  .visionneuse-fleche { display: none; }
  .visionneuse-barre .discret { display: none; }
}

/* ============================================================
   Activité : tableau d'ensemble et journal
   ============================================================ */
.entete-carte {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}
.entete-carte h2 { margin: 0; }

/* Un tableau ne doit jamais élargir la page : il défile dans sa boîte. */
.tableau-defilant { overflow-x: auto; margin: 0 -0.2rem; }

.tableau-activite, .tableau-journal {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  white-space: nowrap;
}
.tableau-activite th, .tableau-journal th {
  text-align: left;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--texte-discret);
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--bordure);
}
.tableau-activite .sous-entete th { text-transform: none; letter-spacing: 0; padding-top: 0; }
.tableau-activite td, .tableau-journal td {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--bordure);
}
.tableau-activite tbody tr:hover, .tableau-journal tbody tr:hover { background: var(--fond-carte-2); }
.tableau-activite td .discret { margin-left: 0.35rem; font-size: 0.8rem; }
.chiffre-cellule { text-align: right; font-variant-numeric: tabular-nums; }
.journal-date { color: var(--texte-discret); font-variant-numeric: tabular-nums; }
.journal-detail {
  white-space: normal;
  max-width: 40ch;
  overflow-wrap: anywhere;
}

/* Une pastille de couleur par catégorie, pour retrouver d'un coup d'œil
   les connexions au milieu des téléchargements. */
.tableau-journal tbody tr td:first-child { border-left: 3px solid transparent; }
.tableau-journal tr.cat-connexion td:first-child { border-left-color: var(--accent); }
.tableau-journal tr.cat-fichiers  td:first-child { border-left-color: #e8edf3; }
.tableau-journal tr.cat-nas       td:first-child { border-left-color: #4f8cff; }
.tableau-journal tr.cat-jeux      td:first-child { border-left-color: #9d7bff; }
:root[data-theme="clair"] .tableau-journal tr.cat-fichiers td:first-child { border-left-color: #39424e; }

.liste-journal { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ligne-journal {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 0.4rem 0.2rem 0.4rem 0.7rem;
  border-bottom: 1px solid var(--bordure);
  border-left: 3px solid transparent;
  font-size: 0.9rem;
}
.ligne-journal:last-child { border-bottom: 0; }
.ligne-journal.cat-connexion { border-left-color: var(--accent); }
.ligne-journal.cat-fichiers  { border-left-color: #e8edf3; }
.ligne-journal.cat-nas       { border-left-color: #4f8cff; }
.ligne-journal.cat-jeux      { border-left-color: #9d7bff; }
:root[data-theme="clair"] .ligne-journal.cat-fichiers { border-left-color: #39424e; }
.journal-compte { font-weight: 600; }
.journal-detail { overflow-wrap: anywhere; }

.carte-filtres {
  display: flex;
  gap: 0.8rem;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.champ-filtre { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.9rem; }
.champ-filtre select, .champ-filtre input { min-width: 11rem; }
.champ-filtre-large { flex: 1; min-width: 12rem; }
.champ-filtre-large input { width: 100%; }

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 1rem 0;
}
.ic.retourne { transform: rotate(180deg); }
.note-journal { display: flex; gap: 0.4rem; align-items: flex-start; margin-top: 1.2rem; }

/* ============================================================
   Diaporama du NAS
   ============================================================ */
.carte-lecture {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.lecture-principal { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 0.5rem; }
.lecture-principal .bouton { align-self: flex-start; max-width: 22rem; }
.lecture-reglages {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 1.2rem;
  border-left: 1px solid var(--bordure);
}
.lien-portee { font-size: 0.85rem; display: inline-flex; align-items: center; gap: 0.3rem; }

.diaporama-compteur { margin-left: auto; font-variant-numeric: tabular-nums; }
.bouton-pause .quand-pause { display: none; }
.bouton-pause.en-pause .quand-lecture { display: none; }
.bouton-pause.en-pause .quand-pause { display: inline-block; }

/* Le temps qui reste avant la photo suivante, en bas de l'écran. */
.diaporama-progression {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.12);
}
.diaporama-progression span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
}

@media (max-width: 700px) {
  .lecture-reglages { padding-left: 0; border-left: 0; border-top: 1px solid var(--bordure); padding-top: 0.8rem; width: 100%; }
  .lecture-principal .bouton { max-width: none; align-self: stretch; }
  .carte-filtres { gap: 0.6rem; }
  .champ-filtre, .champ-filtre select, .champ-filtre input { min-width: 0; width: 100%; }
}

/* ============================================================
   Dofus : le suivi des quêtes
   La liste peut faire mille lignes : elles restent basses et
   régulières, pour qu'on descende vite sans perdre le fil.
   ============================================================ */
.dofus-barre {
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem;
  align-items: center; justify-content: space-between;
  margin-bottom: 1rem;
}
.dofus-barre-choix { display: flex; gap: 0.5rem; align-items: flex-end; flex-wrap: wrap; }
.dofus-barre-etat { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 0.35rem; }
.dofus-jauge { height: 8px; border-radius: 999px; background: var(--fond-carte-2); overflow: hidden; }
.dofus-jauge-barre { height: 100%; background: var(--accent); transition: width 0.25s ease; }
.dofus-chiffres { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; }
.dofus-prochaine { font-size: 0.9rem; color: var(--texte-discret); }
.dofus-erreur { color: var(--erreur); font-size: 0.9rem; }

/* Almanax : le calendrier des offrandes. */
.dofus-alm-table { padding: 0; }
.dofus-alm-jour {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.45rem 0.8rem; border-bottom: 1px solid var(--bordure);
}
.dofus-alm-jour:last-child { border-bottom: none; }
.dofus-alm-jour.faite { opacity: 0.55; }
.dofus-alm-jour.aujourdhui { box-shadow: inset 3px 0 0 var(--accent); }
.dofus-alm-date { width: 3.4rem; flex: none; font-variant-numeric: tabular-nums;
  color: var(--texte-discret); font-size: 0.9rem; }
.dofus-alm-protecteur { width: 9rem; flex: none; font-weight: 600; }
.dofus-alm-offrande { flex: 1; min-width: 13rem; display: flex;
  align-items: center; gap: 0.4rem; }
.dofus-alm-bonus { width: 12rem; flex: none; font-size: 0.85rem; }
@media (max-width: 760px) {
  .dofus-alm-protecteur, .dofus-alm-bonus { width: auto; }
}

/* Multi-compte : une colonne de cases par personnage joué en parallèle. */
.dofus-multi-choix { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
.dofus-multi-perso {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0.7rem; border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm); background: var(--fond-carte-2); cursor: pointer;
}
.dofus-multi-perso.actif { border-color: var(--accent); }
.dofus-multi-perso:has(input:disabled) { opacity: 0.5; cursor: default; }
.dofus-multi-table { padding: 0; overflow-x: auto; }
.dofus-multi-ligne {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.8rem; border-bottom: 1px solid var(--bordure);
}
.dofus-multi-ligne:last-child { border-bottom: none; }
.dofus-multi-entete {
  position: sticky; top: 0; z-index: 1;
  background: var(--fond-carte); font-weight: 600; font-size: 0.85rem;
}
/* Les deux temps d'un chemin, dans le multi-compte : un bandeau, pas une
   ligne de quête — d'où le fond d'accent et l'absence de colonnes. */
.dofus-multi-phase {
  display: block; background: var(--accent-fond);
  border-top: 2px solid var(--accent); padding: 0.6rem 0.8rem;
}
.dofus-multi-quete { flex: 1; min-width: 14rem; display: flex; flex-wrap: wrap;
  align-items: center; gap: 0.4rem; }
.dofus-multi-case { width: 5.5rem; flex: none; text-align: center; }

/* Cocher par succès : un raccourci replié, pas le sujet de la page. */
.dofus-succes { margin-bottom: 1rem; }
.dofus-succes-titre { width: 100%; justify-content: flex-start; }
.dofus-succes-ligne {
  display: flex; align-items: center; gap: 0.6rem; width: 100%;
  padding: 0.5rem 0.7rem; margin-bottom: 0.3rem; text-align: left;
  background: var(--fond-carte-2); color: var(--texte);
  border: 1px solid var(--bordure); border-radius: var(--rayon-sm);
  cursor: pointer; font: inherit;
}
.dofus-succes-ligne:hover:not(:disabled) { border-color: var(--accent); }
.dofus-succes-ligne > span:first-child { flex: 1; min-width: 0; }
.dofus-succes-ligne.fini { opacity: 0.55; cursor: default; }

.dofus-creation { margin-bottom: 1rem; display: flex; flex-direction: column; gap: 0.8rem; }
.dofus-creation .ligne-champs > label { flex: 1; min-width: 130px; }
.dofus-creation-actions { display: flex; gap: 0.5rem; }

.dofus-resume { margin-bottom: 0.6rem; }
.dofus-liste { list-style: none; margin: 0; padding: 0; }
.dofus-quete {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--bordure);
}
.dofus-quete:hover { background: var(--fond-carte-2); }
/* Une quête faite s'efface sans disparaître : on doit pouvoir la
   décocher, et voir d'un coup d'œil où l'on en est. */
.dofus-quete.faite .dofus-nom { text-decoration: line-through; color: var(--texte-discret); }
.dofus-quete.faite { opacity: 0.6; }
/* Fermée à ce personnage (autre camp, autre ordre, autre classe) : on la
   montre en retrait quand on demande à tout voir, jamais comme un retard. */
.dofus-quete.fermee { opacity: 0.45; }
.dofus-quete.fermee .dofus-nom { font-style: italic; }
.badge-reserve { background: var(--erreur-fond); color: var(--erreur); }
/* Même étape, autre camp ou autre ordre. */
.badge-equivalent { background: var(--info-fond); color: var(--info); }
/* Une quête que la liste propose mais dont il manque un prérequis que
   personne n'a fait : elle buterait en jeu, on la signale. */
.badge-bloquee { background: var(--erreur-fond); color: var(--erreur); }
/* L'arrêt de récolte : le seul badge qui parle d'argent et de temps
   gagné, donc le même vert que le reste des bonnes nouvelles. */
.badge-recolte { background: var(--succes-fond); color: var(--succes); }

/* Les blocs du Guide Optimisé : un palier de niveau, puis ses étapes
   titrées. C'est le découpage du guide, et c'est comme ça qu'on le suit —
   un palier, une session de jeu. Ils ne sortent que sur l'ordre du guide
   (pas sous une recherche, qui disperse les quêtes). */
.dofus-bloc {
  list-style: none; display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.7rem 0.9rem 0.5rem; background: var(--fond-carte-2);
  border-bottom: 1px solid var(--bordure);
}
.dofus-bloc-palier {
  margin-top: 1.1rem; border-top: 2px solid var(--accent);
  border-radius: 8px 8px 0 0;
}
.dofus-liste .dofus-bloc:first-child { margin-top: 0; }
/* Un interrupteur au milieu des champs de filtre : il doit s'aligner sur
   la ligne de saisie, pas sur l'étiquette au-dessus. */
.champ-interrupteur {
  flex-direction: row; align-items: center; gap: 0.5rem;
  align-self: flex-end; padding-bottom: 0.45rem; cursor: pointer;
}
.champ-interrupteur input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); }
.champ-interrupteur span { font-size: 0.9rem; }

/* Réparer un lien de tutoriel : une ligne par quête, l'adresse en clair
   et de quoi l'ouvrir pour vérifier avant d'enregistrer. */
.dofus-lien-ligne {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.45rem 0.2rem; border-bottom: 1px solid var(--bordure);
}
.dofus-lien-ligne .dofus-nom { min-width: 12rem; }
.dofus-lien-etat { flex: none; }
.dofus-lien-champ {
  flex: 1; min-width: 16rem; font-size: 0.85rem;
  padding: 0.3rem 0.5rem; border-radius: 8px;
  background: var(--fond); color: inherit; border: 1px solid var(--bordure);
}

/* ============================================================
   Dofus : les fiches de personnage
   ============================================================ */
.dofus-fiches { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.6rem; }
.dofus-fiche-carte {
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  width: 10.5rem; padding: 0.7rem; border-radius: 12px; cursor: pointer;
  background: var(--fond-carte-2); border: 1px solid var(--bordure);
  color: inherit; font: inherit; text-align: center;
}
.dofus-fiche-carte:hover { border-color: var(--accent); }
.dofus-fiche-carte.actif { border-color: var(--accent); background: var(--accent-fond); }
.dofus-fiche-carte img,
.dofus-fiche-carte .dofus-portrait-vide {
  width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover;
}
.dofus-portrait-vide {
  display: flex; align-items: center; justify-content: center;
  background: var(--fond); color: var(--texte-discret); font-size: 0.8rem;
  border: 1px dashed var(--bordure);
}
.dofus-fiche-corps { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: flex-start; }
.dofus-fiche-portrait { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.dofus-fiche-portrait img,
.dofus-fiche-portrait .dofus-portrait-vide {
  width: 8rem; height: 8rem; border-radius: 12px; object-fit: cover;
}
.dofus-fiche-boutons { display: flex; flex-direction: column; gap: 0.3rem; }
.dofus-fiche-champs { flex: 1; min-width: 18rem; padding: 0; background: none; border: none; }

/* Cocher par lieu : des cases larges, une par zone, avec le compte. */
.dofus-zones-boxes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.4rem; margin-top: 0.6rem;
}
.dofus-zone-box {
  display: flex; align-items: center; gap: 0.5rem; cursor: pointer;
  padding: 0.45rem 0.6rem; border-radius: 8px;
  background: var(--fond-carte-2); border: 1px solid var(--bordure);
}
.dofus-zone-box:hover { border-color: var(--accent); }
.dofus-zone-box.actif { border-color: var(--succes); }
.dofus-zone-box span:first-of-type { flex: 1; }
.dofus-zone-box input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); }

/* La relecture d'une capture : ce qui a été lu, ce qu'on a reconnu, et de
   quoi corriger. Rien n'est coché sans passer par là. */
.dofus-propositions { list-style: none; margin: 0.8rem 0 0; padding: 0; }
.dofus-proposition {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--bordure);
}
.dofus-proposition.sans-trouvaille { opacity: 0.7; }
.dofus-prop-lu { font-family: ui-monospace, monospace; font-size: 0.88rem; }
.dofus-prop-fleche { color: var(--texte-discret); }
.dofus-prop-trouve { flex: 1; min-width: 12rem; font-weight: 600; }

/* Le comparatif en équipe : une colonne de cases par personnage, et deux
   temps — se rejoindre, puis avancer ensemble. C'est un tableau et non
   une liste, parce que la question est « qui l'a, qui ne l'a pas ». */
.dofus-equipe {
  width: 100%; border-collapse: collapse; margin-top: 0.8rem;
  background: var(--fond-carte); border-radius: 12px; overflow: hidden;
}
.dofus-equipe th, .dofus-equipe td {
  padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--bordure);
  text-align: left; vertical-align: top;
}
.dofus-equipe thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--fond-carte-2); font-size: 0.85rem;
}
/* Les colonnes de personnages restent étroites : c'est la quête qu'on lit,
   les cases ne sont qu'un état. */
.dofus-equipe-tete {
  width: 5.5rem; text-align: center !important;
  display: table-cell; line-height: 1.25;
}
.dofus-equipe-tete .discret { display: block; font-size: 0.72rem; font-weight: 400; }
.dofus-equipe-case { text-align: center !important; width: 5.5rem; }
.dofus-equipe-ok { color: var(--succes); font-weight: 700; }
.dofus-equipe-quete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.dofus-equipe-quete .dofus-nom { flex: 0 1 auto; }
/* La consigne du guide passe sous le nom, sur toute la largeur. */
.dofus-equipe-consigne { flex-basis: 100%; font-size: 0.85rem; }
/* Les deux temps de la feuille de route : un bandeau, pas une ligne. */
.dofus-equipe-phase td {
  background: var(--accent-fond); border-top: 2px solid var(--accent);
  padding: 0.6rem 0.7rem;
}
@media (max-width: 700px) {
  .dofus-equipe th, .dofus-equipe td { padding: 0.4rem 0.35rem; }
  .dofus-equipe-tete, .dofus-equipe-case { width: 3.2rem; font-size: 0.75rem; }
  .dofus-equipe-tete .discret { display: none; }
}

/* Ce que le guide ne couvre pas : on le signale sans en faire un palier. */
.dofus-bloc-hors { margin-top: 1.1rem; border-top: 2px solid var(--bordure); }
.dofus-bloc-hors .dofus-bloc-niveau { color: var(--texte-discret); }
.dofus-bloc-niveau { font-weight: 700; color: var(--accent); font-size: 1.05rem; }
/* Le titre d'étape est une phrase entière chez eux : il doit pouvoir
   passer à la ligne sans pousser la liste. */
.dofus-bloc-etape { font-size: 0.88rem; color: var(--texte-discret); }
/* La quête qu'on vient de demander à voir : elle doit sauter aux yeux
   le temps qu'on la repère, puis redevenir une ligne comme les autres. */
.dofus-quete-visee {
  background: var(--accent-fond) !important;
  box-shadow: inset 3px 0 0 var(--accent);
  transition: background 0.4s ease;
}
.dofus-coche { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); flex: none; cursor: pointer; }
.dofus-quete-corps { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.dofus-rang {
  flex: none; min-width: 3.2rem; font-variant-numeric: tabular-nums;
  color: var(--texte-discret); font-size: 0.85rem;
}
.dofus-nom { font-weight: 600; }
/* Les coordonnées sont la clé de lecture de l'ordre : deux lignes qui se
   suivent portent presque toujours le même point. Un clic copie la
   commande de voyage du jeu, à coller dans le chat de Dofus. */
.dofus-coord {
  font-variant-numeric: tabular-nums; font-size: 0.8rem;
  color: var(--accent); background: var(--accent-fond);
  padding: 0.05rem 0.35rem; border-radius: 6px; flex: none;
  border: 1px solid transparent; font-family: inherit; cursor: pointer;
}
.dofus-coord:hover { border-color: var(--accent); }
.dofus-coord.copie { background: var(--succes-fond); color: var(--succes); }
.dofus-meta { font-size: 0.85rem; }
.dofus-quete-actions { display: flex; gap: 0.35rem; flex: none; }
.dofus-vide { padding: 1.5rem; text-align: center; }
.dofus-suite { margin-top: 1rem; }
/* La reprise du suivi dans l'application : un fichier, un bouton. */
.dofus-reprise {
  display: flex; align-items: center; gap: 0.6rem;
  flex-wrap: wrap; margin: 0.8rem 0;
}
.dofus-source { margin-top: 1.5rem; }

.dofus-bilan { padding: 0.9rem 1.25rem; margin-bottom: 1rem; }
.dofus-deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
.dofus-colonne .dofus-liste { max-height: 60vh; overflow-y: auto; }

@media (max-width: 820px) {
  .dofus-deux-colonnes { grid-template-columns: 1fr; }
  .dofus-quete-actions { flex-direction: column; }
  .dofus-rang { min-width: 2.5rem; }
}

/* Symbole de classe : petit, à côté du nom du personnage. */
.dofus-symbole { width: 1.6rem; height: 1.6rem; vertical-align: middle; flex: none; }
.dofus-barre-etat .dofus-symbole { width: 2.2rem; height: 2.2rem; }

/* ============================================================
   Dofus : la bannière et les onglets
   Un habillage un peu plus tenu que le reste du site : c'est la
   page la plus fournie, et elle se regarde longtemps.
   ============================================================ */
.dofus-banniere {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  align-items: flex-end; justify-content: space-between;
  padding: 1.5rem 1.75rem; margin-bottom: 1.25rem;
  border-radius: 14px; border: 1px solid var(--bordure);
  /* Un dégradé qui part du vert de la zone : la page s'annonce sans
     hurler, et reste lisible dans les deux thèmes. */
  background:
    radial-gradient(120% 140% at 0% 0%, var(--accent-fond) 0%, transparent 60%),
    linear-gradient(135deg, var(--fond-carte) 0%, var(--fond-carte-2) 100%);
}
.dofus-banniere h1 { margin: 0.2rem 0 0.4rem; font-size: 1.9rem; }
.dofus-banniere p { margin: 0; max-width: 46ch; color: var(--texte-discret); }
.dofus-surtitre {
  text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 0.72rem; font-weight: 700; color: var(--accent);
}
.dofus-banniere-chiffres { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.dofus-banniere-chiffres span {
  display: flex; flex-direction: column; font-size: 0.82rem;
  color: var(--texte-discret); text-transform: lowercase;
}
.dofus-banniere-chiffres strong {
  font-size: 1.45rem; color: var(--texte); font-variant-numeric: tabular-nums;
}

/* Les onglets de Dofus : des pastilles, plus lisibles que des soulignés
   quand il y en a six. */
body[data-zone="dofus"] .onglets { border-bottom: none; gap: 0.4rem; margin-bottom: 1.25rem; }
body[data-zone="dofus"] .onglet-btn {
  border: 1px solid var(--bordure); border-radius: 999px;
  padding: 0.5rem 0.95rem; background: var(--fond-carte);
}
body[data-zone="dofus"] .onglet-btn:hover { border-color: var(--accent); }
body[data-zone="dofus"] .onglet-btn.actif {
  background: var(--accent); border-color: var(--accent-fonce);
  color: var(--accent-texte); border-bottom-color: var(--accent-fonce);
}

/* ============================================================
   Dofus : le guide pas à pas (Ganymède)
   ============================================================ */
.guide-cadre {
  display: grid; grid-template-columns: minmax(230px, 300px) 1fr;
  gap: 1.25rem; align-items: start;
}
.guide-panneau { position: sticky; top: 1rem; }
.guide-liste { max-height: 58vh; overflow-y: auto; margin: 0.6rem -0.35rem 0.6rem 0; }
.guide-entree {
  display: flex; align-items: center; gap: 0.6rem; width: 100%;
  padding: 0.45rem 0.55rem; margin-bottom: 0.2rem;
  border: 1px solid transparent; border-radius: 8px;
  background: none; color: inherit; cursor: pointer;
  font-family: inherit; text-align: left; font-size: 0.92rem;
}
.guide-entree:hover { background: var(--fond-carte-2); }
.guide-entree.actif { background: var(--accent-fond); border-color: var(--accent); }
.guide-numero {
  flex: none; min-width: 2.9rem; font-size: 0.75rem; font-weight: 700;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.guide-numero-libre { color: var(--texte-discret); }
.guide-titre { flex: 1; min-width: 0; }
.guide-entree .discret { flex: none; font-size: 0.78rem; }

.guide-entete {
  display: flex; align-items: center; gap: 1rem;
  flex-wrap: wrap; margin-bottom: 0.75rem;
}
.guide-progression { flex: 1; min-width: 180px; }
.guide-rang { font-size: 0.85rem; color: var(--texte-discret); }
.guide-progression .dofus-jauge { margin-top: 0.3rem; }
.guide-lieu { display: flex; align-items: center; gap: 0.5rem; }

/* Le texte vient de chez eux : on l'habille sans le réécrire. */
.guide-texte { line-height: 1.6; }
.guide-texte p { margin: 0 0 0.7rem; }
.guide-texte img { max-width: 100%; height: auto; vertical-align: middle; }
.guide-texte quest, .guide-texte item, .guide-texte dungeon, .guide-texte monster {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.05rem 0.4rem; border-radius: 6px; font-weight: 600;
}
.guide-texte quest { background: var(--accent-fond); color: var(--accent); }
.guide-texte item { background: var(--nouveau-fond); color: var(--nouveau); }
.guide-texte dungeon { background: var(--erreur-fond); color: var(--erreur); }
.guide-texte monster { background: var(--info-fond); color: var(--info); }
.guide-texte checkbox::before { content: "☐ "; color: var(--accent); }
.guide-texte [data-type="quest-block"] {
  border-left: 3px solid var(--accent); padding: 0.5rem 0 0.5rem 0.75rem;
  margin: 0.6rem 0; background: var(--fond-carte-2); border-radius: 0 8px 8px 0;
}

.guide-liees {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem;
  margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px solid var(--bordure);
}
.guide-liees .discret { width: 100%; font-size: 0.8rem; }
.guide-liee {
  padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.85rem;
  border: 1px solid var(--bordure);
}
.guide-liee-quest { color: var(--accent); border-color: var(--accent); }
.guide-liee-item { color: var(--nouveau); border-color: var(--nouveau); }
.guide-liee-dungeon { color: var(--erreur); border-color: var(--erreur); }

.guide-navigation {
  display: flex; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap;
  margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--bordure);
}
.guide-navigation .bouton-principal { margin-left: auto; }
.fleche-gauche { transform: rotate(180deg); }

/* La consigne du guide, sous la ligne de la quête. Elle n'est plus
   derrière un bouton : la marche à suivre est ce qu'on vient lire, et la
   replier obligeait à cliquer mille fois. La ligne au-dessus, elle, ne
   change pas — coche, rang, nom, /travel, niveau, catégorie, « Noobs ».
   Les quêtes sans consigne n'ont pas de bloc du tout : le guide ne
   commente que là où il a quelque chose à dire. */
.dofus-description {
  list-style: none; margin: 0 0 0.5rem 2.6rem;
  padding: 0.6rem 1rem; border-left: 3px solid var(--accent);
  background: var(--fond-carte-2); border-radius: 0 8px 8px 0;
  font-size: 0.92rem;
}
.dofus-description p { margin: 0; }
.dofus-description p + p { margin-top: 0.45rem; }
/* Une reprise : la même quête, revue à un palier plus tard, avec une
   autre consigne. On la distingue sans la reléguer. */
.dofus-consigne-reprise {
  padding-left: 0.6rem; border-left: 2px solid var(--bordure);
  color: var(--texte-discret);
}
/* Une quête faite garde sa consigne : on doit pouvoir la relire, mais
   elle ne doit plus attirer l'œil — comme la ligne qui la porte. */
.dofus-description.faite { opacity: 0.45; border-left-color: var(--bordure); }
.dofus-guide-etape + .dofus-guide-etape {
  margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--bordure);
}
.dofus-guide-entete {
  display: flex; align-items: center; gap: 0.5rem;
  flex-wrap: wrap; margin-bottom: 0.4rem;
}
.dofus-guide-source { margin: 0.8rem 0 0; }

@media (max-width: 900px) {
  .dofus-description { margin-left: 0.5rem; }
}

/* ============================================================
   Dofus : la carte du monde
   ============================================================ */
.carte-plan { padding: 0.6rem; }
#carte-plan {
  display: block; width: 100%; border-radius: 8px;
  background: var(--fond); cursor: grab; touch-action: none;
}
#carte-plan:active { cursor: grabbing; }
.carte-outils {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.6rem; flex-wrap: wrap;
}
.carte-outils .discret { font-variant-numeric: tabular-nums; }

.carte-ressources { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.carte-ressource {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.3rem 0.6rem; border: 1px solid var(--bordure); border-radius: 999px;
  background: var(--fond-carte); color: inherit; cursor: pointer;
  font-family: inherit; font-size: 0.9rem;
}
.carte-ressource:hover { border-color: var(--accent); }
/* Ce que le joueur a compté sur la case : le même jaune que les
   pastilles peintes sur la carte, pour qu'on relie les deux. */
.carte-releves {
  margin: 0.35rem 0 0; padding: 0.4rem 0.6rem;
  background: var(--fond-carte-2); border-left: 3px solid #ffd166;
  border-radius: 0 8px 8px 0; font-size: 0.9rem;
}

/* La ressource suivie sur la carte : même jaune que le surlignage. */
.carte-ressource.actif { border-color: #ffd34d; color: #ffd34d; background: var(--accent-fond); }
/* Combien il y en a : le chiffre qu'on vient chercher. */
.carte-quantite {
  font-variant-numeric: tabular-nums; font-weight: 700;
  color: var(--accent); background: var(--accent-fond);
  padding: 0.02rem 0.35rem; border-radius: 999px; font-size: 0.82rem;
}
.carte-ressource.actif .carte-quantite { color: #ffd34d; }
.carte-entete-case { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.carte-entete-case h2 { margin: 0; font-size: 1.05rem; }

/* ============================================================
   Dofus : le cahier des comptes (craft)
   ============================================================ */
.craft-bilan-chiffres {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.75rem; align-items: flex-end;
}
.craft-chiffre { display: flex; flex-direction: column; }
.craft-chiffre-valeur { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.craft-chiffre.gain .craft-chiffre-valeur { color: var(--succes); }
.craft-chiffre.perte .craft-chiffre-valeur { color: var(--erreur); }

.craft-resultats {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.6rem; margin-bottom: 1.25rem;
}
.craft-resultat {
  display: flex; align-items: center; gap: 0.6rem; text-align: left;
  padding: 0.5rem 0.7rem; border: 1px solid var(--bordure); border-radius: 10px;
  background: var(--fond-carte); color: inherit; cursor: pointer; font-family: inherit;
}
.craft-resultat:hover { border-color: var(--accent); background: var(--fond-carte-2); }
.craft-resultat-nom { font-weight: 600; }
.craft-resultat > span:last-child { margin-left: auto; white-space: nowrap; }

.craft-icone { width: 40px; height: 40px; flex: none; image-rendering: auto; }
.craft-icone-petite { width: 26px; height: 26px; flex: none; }

.craft-objet { margin-bottom: 1.25rem; border-left: 3px solid var(--bordure); }
/* La couleur du bord dit d'un coup d'œil si la ligne gagne ou perd. */
.craft-objet.rentable { border-left-color: var(--succes); }
.craft-objet.perte { border-left-color: var(--erreur); }
/* Une ligne vendue est de l'histoire : elle reste lisible mais passe au
   second plan, le cahier servant surtout à décider de ce qui reste. */
.craft-objet.vendu { opacity: 0.72; border-left-style: dashed; }

/* Repliée, une ligne du cahier tient en trois chiffres : investi (taxe
   comprise), vente, bénéfice. C'est ce qu'on lit quand on a vingt objets ;
   le détail s'ouvre d'un clic. */
.craft-resume {
  display: flex; align-items: center; gap: 0.75rem;
  cursor: pointer; list-style: none;
}
.craft-resume::-webkit-details-marker { display: none; }
/* Un chevron plutôt que le triangle du navigateur, qui n'a pas la même
   taille d'un moteur à l'autre. */
.craft-resume::before {
  content: "›"; flex: none; width: 1rem;
  font-size: 1.3rem; line-height: 1; color: var(--texte-discret);
  transition: transform 0.15s;
}
.craft-objet[open] > .craft-resume::before { transform: rotate(90deg); }
.craft-resume-nom { font-weight: 600; }
.craft-resume-chiffres {
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem;
  margin-left: auto; text-align: right;
}
.craft-resume-chiffre { display: flex; flex-direction: column; min-width: 6.5rem; }
.craft-resume-chiffre.gain .craft-chiffre-valeur { color: var(--succes); }
.craft-resume-chiffre.perte .craft-chiffre-valeur { color: var(--erreur); }
/* Le farm n'est ni un gain ni une perte : c'est du non-dépensé. Il se
   distingue sans prendre la couleur du bénéfice, qui dirait autre chose. */
.craft-resume-chiffre.farme .craft-chiffre-valeur { color: var(--accent); }
.craft-etiquette {
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  padding: 0.1rem 0.4rem; border-radius: 0.3rem;
  background: var(--fond-carte-2); color: var(--texte-discret);
}

.craft-entete {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 0.9rem 0 0.75rem; padding-top: 0.9rem;
  border-top: 1px solid var(--bordure);
}
.craft-entete h2 { margin: 0; font-size: 1.05rem; }
.craft-suivi {
  display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem;
  align-items: flex-end; margin-left: 1rem;
}
.craft-suivi input[type="date"] { width: 9.5rem; }
.craft-vendu-coche { display: flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.craft-actions { margin-left: auto; }
.craft-table th, .craft-table td { padding: 0.3rem 0.5rem; }
.craft-champ { width: 7rem; }
/* Dix colonnes dans la table des ingrédients : les champs s'y resserrent
   plutôt que de renvoyer tout le monde dans la barre de défilement — mais
   pas en deçà de sept chiffres, un lot de 1 000 se payant des millions, et
   un prix qu'on ne peut pas relire ne sert à rien. */
.craft-table .craft-champ { width: 6.6rem; }
.craft-cout { font-variant-numeric: tabular-nums; white-space: nowrap; }
.craft-cout.gain { color: var(--succes); }
.craft-cout.perte { color: var(--erreur); }
/* Un ingrédient récolté soi-même ne coûte rien : la ligne le dit sans
   crier, la vraie information restant le coût en face. */
.craft-farme td:nth-child(2) { color: var(--succes); }
/* L'intertitre de famille dans le carnet de prix : ressources,
   consommables, équipements, autres — le découpage du jeu lui-même. */
.craft-famille td {
  padding-top: 0.9rem; font-weight: 700; font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent);
}
/* Le lot qui paie le mieux à l'unité : c'est celui qu'on mettra en vente. */
.craft-meilleur { background: var(--fond-carte-2); }
.craft-meilleur td:first-child { font-weight: 700; }
.craft-pied {
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem;
  align-items: flex-end; margin-top: 0.9rem;
  padding-top: 0.9rem; border-top: 1px solid var(--bordure);
}
.craft-comptes { flex: 1; min-width: 260px; }
.dofus-taxe { display: flex; align-items: center; gap: 0.35rem; }

@media (max-width: 700px) {
  .craft-pied { flex-direction: column; align-items: stretch; }
  .craft-champ { width: 100%; }
  .craft-entete { flex-wrap: wrap; }
  .craft-suivi { margin-left: 0; width: 100%; }
  /* Sur téléphone la ligne de résumé passe sur deux étages plutôt que de
     serrer trois chiffres contre le nom. */
  .craft-resume { flex-wrap: wrap; }
  .craft-resume-chiffres { margin-left: 0; width: 100%; text-align: left; }
}