/* ==========================================================================
   marque.css - Thème « marque » des espaces d'organisme (portail organismes, lot 1).

   RÈGLE ABSOLUE : toutes les règles ci-dessous sont préfixées par `html[data-marque]`. Sans cet
   attribut (le jeu public), ce fichier n'a AUCUN effet : le rendu de Biodeck reste identique.
   L'attribut et les variables calculées (--accent, --accent-ink, --m-wash, --accent2) sont posés par
   marque.js (appliquerMarque), à partir du logo et des deux couleurs de l'organisme.

   Thème de départ : « neutre » - fond blanc, gris très clair, texte presque noir, menu clair.
   Les cartes gardent leur rendu (couleurs de rareté) : seul le cadre de l'interface change.
   ========================================================================== */

/* ---- jetons : le thème neutre redéfinit les variables déjà utilisées par toute l'interface ---- */
html[data-marque]{
  --paper:#ffffff;--panel:#f6f7f8;--ink:#1d2126;--ink-soft:#3d444d;--muted:#5d6672;--line:#e2e5e9;
  --shadow:0 1px 2px rgba(20,24,30,.06),0 12px 28px -14px rgba(20,24,30,.2);
  /* valeurs de repli (bleu ardoise) : marque.js les remplace par celles de l'organisme */
  --accent:#2f4a63;--accent-ink:#2f4a63;--m-wash:#e9eef3;--m-on-accent:#ffffff;--accent2:#5d6672;--m-menu:#ffffff;
  --police-titre:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}

/* ---- menu latéral (clair) ---- */
html[data-marque] .menu{background:var(--m-menu);border-right:1px solid var(--line)}
html[data-marque] .menu-logo{color:var(--ink)}
html[data-marque] .menu-logo .ml-logo{height:34px;width:auto;max-width:170px;object-fit:contain;flex:0 1 auto}
html[data-marque] .menu-logo .ml-nom{flex:1 1 auto;min-width:0;font-weight:600;font-size:1.1rem;line-height:1.2;
  color:var(--ink);overflow-wrap:anywhere}
html[data-marque] .cloche,
html[data-marque] .menu-social a{color:var(--muted)}
html[data-marque] .cloche:hover,
html[data-marque] .menu-social a:hover{color:var(--ink);background:var(--panel)}
html[data-marque] .menu-social{display:none}
html[data-marque] .lien{color:var(--muted)}
html[data-marque] .lien:hover{color:var(--ink);background:var(--panel)}
html[data-marque] .lien.actif{background:var(--m-wash);color:var(--accent-ink)}
html[data-marque] .lien.actif::after{background:var(--accent)}
html[data-marque] .pastille-menu{box-shadow:0 0 0 2px var(--m-menu)}
html[data-marque] .menu-nouveau{background:var(--accent);color:var(--m-on-accent)}
html[data-marque] #app #menu-evenement[data-contour]:not(.actif),
html[data-marque] #app #menu-evenement-prochain[data-contour]{color:var(--muted)}

/* ---- entrée « Événement » : l'or d'origine est illisible sur fond blanc, on reprend la couleur de l'organisme ---- */
html[data-marque] #menu-evenement.ev-a-jouer:not([hidden]){box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent-ink)}
html[data-marque] #menu-evenement.ev-a-jouer:not([hidden]) svg{color:var(--accent)}
html[data-marque] #menu-evenement.ev-a-jouer:not([hidden])::before,
html[data-marque] .menu-plus-btn.ev-a-jouer::before{color:var(--accent)}
html[data-marque] #menu-evenement .menu-nouveau,
html[data-marque] .menu-overflow > #menu-evenement .menu-nouveau{background:var(--accent) !important;color:var(--m-on-accent)}
html[data-marque] .menu-plus-btn.ev-a-jouer{box-shadow:inset 0 0 0 1.5px var(--accent)}
html[data-marque] .menu-ev-prochain{color:var(--accent-ink);box-shadow:inset 0 0 0 1.5px var(--accent)}
html[data-marque] .menu-ev-prochain:hover{background:var(--m-wash);color:var(--accent-ink)}

/* ---- mention « Propulsé par Biodeck » : toujours visible, non retirable par l'organisme ---- */
html[data-marque] .marque-propulse{font-size:.72rem;line-height:1.4;color:var(--muted);text-align:center}
html[data-marque] .marque-propulse a{color:var(--muted);text-decoration:none;font-weight:600}
html[data-marque] .marque-propulse a:hover{color:var(--ink);text-decoration:underline}
html[data-marque] .menu .marque-propulse{margin-top:auto;padding:14px 12px 4px;border-top:1px solid var(--line)}
html[data-marque] .principal .marque-propulse{display:none}

/* ---- éléments propres à la communauté Biodeck, absents d'un espace d'organisme ---- */
html[data-marque] a[href*="discord"],
html[data-marque] .btn-discord{display:none}

/* ---- pastille de rang : couleur secondaire de l'organisme ---- */
html[data-marque] .rang-pill{background:var(--m-wash) !important;color:var(--accent-ink)}

/* ---- mobile : le menu devient une barre en haut ---- */
@media (max-width:820px){
  html[data-marque] .menu{border-right:0;border-bottom:1px solid var(--line)}
  html[data-marque] .menu-logo .ml-logo{height:28px;max-width:130px}
  html[data-marque] .menu .marque-propulse{display:none}
  html[data-marque] .principal .marque-propulse{display:block;margin-top:28px;padding-top:14px;border-top:1px solid var(--line)}
  html[data-marque] .menu-plus-btn.on{color:var(--accent-ink);background:var(--m-wash)}
  html[data-marque] .menu-overflow{background:var(--m-menu);border:1px solid var(--line);box-shadow:0 10px 30px rgba(20,24,30,.14)}
}

/* ---- fonds au choix (marque.js pose --paper, --panel, --ink... et data-decor) : dégradés CSS purs, aucune image à héberger.
        Le texte est blanc ou noir selon la luminance du fond (calculé dans marque.js). ---- */
html[data-marque][data-decor] body{background:transparent}
html[data-marque][data-decor]{background-color:var(--paper);background-repeat:no-repeat,no-repeat,no-repeat,repeat,repeat,repeat;background-attachment:scroll}
html[data-marque][data-decor="galaxie"]{background-image:
  radial-gradient(ellipse at 18% 8%,rgba(125,76,210,.55),transparent 55%),
  radial-gradient(ellipse at 88% 78%,rgba(36,112,210,.42),transparent 55%),
  linear-gradient(180deg,#080b24 0%,#0e1238 55%,#070a1d 100%),
  radial-gradient(1.4px 1.4px at 24px 36px,#fff,transparent),
  radial-gradient(1px 1px at 132px 92px,#d6e4ff,transparent),
  radial-gradient(1.2px 1.2px at 210px 160px,#fff,transparent);
  background-size:auto,auto,auto,260px 210px,330px 280px,190px 240px}
html[data-marque][data-decor="aurore"]{background-image:
  radial-gradient(ellipse at 20% 15%,rgba(80,230,170,.38),transparent 55%),
  radial-gradient(ellipse at 85% 30%,rgba(120,110,240,.34),transparent 55%),
  linear-gradient(170deg,#0a1830 0%,#0d3a46 50%,#12292f 100%);
  background-size:auto}
html[data-marque][data-decor="ocean"]{background-image:
  radial-gradient(ellipse at 50% -10%,rgba(120,200,255,.45),transparent 60%),
  linear-gradient(180deg,#127bb0 0%,#0d5486 40%,#072f55 100%);
  background-size:auto}
html[data-marque][data-decor="nature"]{background-image:
  radial-gradient(ellipse at 12% 10%,rgba(255,255,225,.75),transparent 50%),
  radial-gradient(ellipse at 90% 85%,rgba(120,175,110,.45),transparent 55%),
  linear-gradient(165deg,#eef6e2 0%,#d6e9c8 55%,#bcd8ae 100%);
  background-size:auto}
html[data-marque][data-decor="sable"]{background-image:
  radial-gradient(ellipse at 85% 10%,rgba(255,244,214,.8),transparent 55%),
  linear-gradient(165deg,#f7eedd 0%,#ecdcbc 60%,#e3d0a8 100%);
  background-size:auto}
html[data-marque][data-decor="brume"]{background-image:
  radial-gradient(ellipse at 20% 0%,rgba(255,255,255,.8),transparent 55%),
  linear-gradient(165deg,#f0f3f7 0%,#dde5ec 60%,#cfd9e2 100%);
  background-size:auto}
@media (min-width:821px){html[data-marque][data-decor]{background-attachment:fixed}}

/* ---- barre d'aperçu administrateur : sortie vers le thème Biodeck d'origine, visible sur toutes les pages ---- */
html[data-marque] .marque-apercu-barre{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:2147483000;
  display:flex;align-items:center;gap:12px;max-width:calc(100vw - 24px);padding:8px 8px 8px 16px;border-radius:999px;
  background:#1d2126;color:#ffffff;font-size:.85rem;box-shadow:0 8px 24px rgba(0,0,0,.35)}
html[data-marque] .marque-apercu-barre span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-marque] .marque-apercu-barre button{flex:0 0 auto;font:inherit;font-weight:600;padding:7px 14px;border:0;border-radius:999px;
  background:#ffffff;color:#1d2126;cursor:pointer}
html[data-marque] .marque-apercu-barre button:focus-visible{outline:2px solid #ffffff;outline-offset:2px}

/* ---- polices de titres : généré par `python tests/outils_marque.py` ; le test tests/test_marque.py vérifie la synchronisation ---- */
/* POLICES-AUTO-DEBUT */
html[data-marque] .admin-apercu-carte h3,
html[data-marque] .admin-repli>summary,
html[data-marque] .aide-bloc h3,
html[data-marque] .amis-section h3,
html[data-marque] .auth-form h2,
html[data-marque] .cbt-defense h4,
html[data-marque] .cbt-impact-degats,
html[data-marque] .cbt-journal h4,
html[data-marque] .cbt-res,
html[data-marque] .cbt-section h3,
html[data-marque] .cbt-vol h4,
html[data-marque] .cbt-vs .mid,
html[data-marque] .classement-carte h3,
html[data-marque] .cm-apres,
html[data-marque] .confirm-modal h3,
html[data-marque] .connexion h1,
html[data-marque] .disp-couv-banner .disp-couv-nom,
html[data-marque] .disp-public h3,
html[data-marque] .dp-col-tray h4,
html[data-marque] .ech-section h3,
html[data-marque] .ef-tete h3,
html[data-marque] .ench-info h3,
html[data-marque] .ev-admin-tete h3,
html[data-marque] .ev-bloc h3,
html[data-marque] .ev-carte-btn b,
html[data-marque] .ev-class-bloc h4,
html[data-marque] .ev-entete h2,
html[data-marque] .ev-fs legend,
html[data-marque] .ev-histo-jour,
html[data-marque] .familles-toggle,
html[data-marque] .fiche-s,
html[data-marque] .fiche-t,
html[data-marque] .hier-inner h3,
html[data-marque] .jsolo-carte h3,
html[data-marque] .jsolo-titre,
html[data-marque] .maq-titre,
html[data-marque] .marque,
html[data-marque] .menu-logo,
html[data-marque] .profil-tete,
html[data-marque] .quete-section h3,
html[data-marque] .rappel-mobile .rm-titre,
html[data-marque] .rep-panel h3,
html[data-marque] .revue-ligne-tete b,
html[data-marque] .rm-astuce .rm-note-i,
html[data-marque] .seo-bloc h2,
html[data-marque] .seo-bloc h3,
html[data-marque] .seo-carte h2,
html[data-marque] .seo-hero h1,
html[data-marque] .seo-marque,
html[data-marque] .solo-compteur,
html[data-marque] .solo-consigne,
html[data-marque] .solo-explic h3,
html[data-marque] .solo-h,
html[data-marque] .solo-mode h3,
html[data-marque] .solo-parfait,
html[data-marque] .titre-vue,
html[data-marque] .vente-form h3,
html[data-marque] .vit-vitrine-tete h3,
html[data-marque] :is(#echange-form,#combat-form) .ef-v2 .ef-ap-nom,
html[data-marque] :is(#echange-form,#combat-form) .ef-v2 .ef-pt,
html[data-marque] h2{font-family:var(--police-titre)}
/* POLICES-AUTO-FIN */