/* tresorank : les jetons de marque, les polices et les pieces communes.
   Seule source des couleurs et des polices du produit. Aucune page n ecrit une
   couleur en dur : elle lit un jeton. Rien ici n est propre a une page.
   Les autres feuilles l importent en premiere ligne : @import url('/marque.css');

   L univers est celui de la boutique du premier projet : fond d arene bleu roi,
   cadres biseautes a lisere dore, or reserve a la rarete et au prix.
   Les ors, le bronze, l argent et les bleus viennent des teintes mesurees sur le
   visuel du fondateur (docs/marque/), pas d un choix libre : le detail des mesures
   et des contrastes est dans docs/identite.md.

   Interdits partout : tiret cadratin, emoji, ressource externe hors Google Fonts. */

@import url('https://fonts.googleapis.com/css2?family=Lilita+One&family=Plus+Jakarta+Sans:wght@400;600;800&display=swap');

:root {
  color-scheme: dark;

  /* structure */
  --marine: #0a1a33;          /* fond principal, bords de l arene */
  --marine-nuit: #0d153b;     /* mesure sur le visuel : le bleu le plus sombre */
  --marine-clair: #12294f;    /* fond des blocs poses sur le marine */
  --bleu-roi: #1b4aa8;        /* coeur de l arene */
  --bleu-profond: #0f2a62;    /* bord de l arene */
  --marine-bord: rgba(255, 255, 255, .14);
  --encre: #0b1220;           /* texte sur fond clair */
  --papier: #f5f7fb;          /* fond clair */

  /* texte sur le marine */
  --texte: #ffffff;
  --texte-doux: #cfdcf5;      /* paragraphes */
  --texte-faible: #9db4d6;    /* mentions, dates, pied de page. 3,83:1 sur le
                                 centre clair de l arene : a poser dans un bloc. */

  /* les ors, mesures sur le visuel */
  --or-clair: #fcdf5c;        /* la lumiere du metal */
  --or: #ffcc33;              /* la rarete Legendaire, les prix, un accent par ecran */
  --or-profond: #f8b31a;      /* le bas d un degrade dore */
  --bronze: #c06303;          /* l ombre du metal, le bas des biseaux */
  --or-sombre: #946a00;       /* or lisible sur fond clair, texte courant compris */
  --argent: #d7d6da;          /* le chrome du mot du visuel, et la rarete Commune */

  --succes: #15804a;          /* achat, etat valide : porte du texte blanc */
  --alerte: #c62f22;

  /* paliers de marche : la rarete dit la taille du marche, pas la facilite */
  --commune: #dce3ec;
  --rare: #2f7de1;
  --epique: #7a4ddb;
  --legendaire: #ffcc33;
  --mystere: #6b4fd8;
  /* les memes, eclaircies : des qu il s agit de TEXTE pose sur le marine.
     Mesure : sur le centre clair de l arene (#1b4aa8) elles tombent a 4,2 et 3,8
     pour un, donc sous 4,5. Une etiquette de rarete se pose dans un bloc ou sur
     le marine, jamais au milieu de l arene. */
  --commune-clair: #e8eef7;
  --rare-clair: #8cc0ff;
  --epique-clair: #c8adff;
  --legendaire-clair: #ffcc33;
  --mystere-clair: #b7a6f5;
  --mystere-fond: #241a4d;    /* le violet sombre du fond d une carte Mystere */

  /* polices */
  --titre: 'Lilita One', 'Plus Jakarta Sans', system-ui, sans-serif;
  --courant: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* formes */
  --rayon-s: 10px;
  --rayon: 14px;
  --rayon-l: 20px;
  --relief: 0 4px 0 var(--marine);      /* le socle d un bouton de jeu */
  --ombre: 0 10px 28px rgba(0, 0, 0, .34);
  --largeur: 1180px;
  /* le halo qui detache un titre clair du fond d arene */
  --halo: 0 2px 0 var(--marine), 0 -2px 0 var(--marine), 2px 0 0 var(--marine), -2px 0 0 var(--marine),
          1.5px 1.5px 0 var(--marine), -1.5px 1.5px 0 var(--marine), 1.5px -1.5px 0 var(--marine), -1.5px -1.5px 0 var(--marine);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: clip; }

body {
  background: var(--marine);
  color: var(--texte-doux);
  font: 16px/1.6 var(--courant);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; }
.cadre :focus-visible, dialog :focus-visible { outline-color: var(--marine); }
::selection { background: var(--or); color: var(--marine); }

/* ------------------------------------------------------------------- l arene
   Le fond du produit : marine sur les bords, lumiere bleu roi au centre et en
   haut, rayons discrets. A poser sur le body des pages qui jouent le jeu ;
   une page de facture ou de reglages garde le marine plat. */
.arene::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 32% at 50% 0%, rgba(96, 160, 255, .40), transparent 72%),
    repeating-conic-gradient(from 0deg at 50% -20%, rgba(255, 255, 255, .035) 0 4deg, transparent 4deg 11deg),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 38px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 38px),
    radial-gradient(62% 58% at 50% 32%, var(--bleu-roi) 0%, #153b8a 34%, var(--bleu-profond) 64%, var(--marine) 92%);
}

/* ------------------------------------------------------------------- titres
   Lilita One n a qu une graisse : on ne lui demande jamais de gras. */
h1, h2, h3, h4 { font-family: var(--titre); font-weight: 400; color: var(--texte); margin: 0 0 .5em; letter-spacing: .3px; }
h1 { font-size: clamp(30px, 5vw, 46px); line-height: 1.1; }
h2 { font-size: clamp(23px, 3.4vw, 30px); line-height: 1.15; }
h3 { font-size: 21px; line-height: 1.2; }
h4 { font-size: 17px; line-height: 1.25; }
.arene h1, .titre-halo { text-shadow: var(--halo), 0 6px 0 var(--marine), 0 10px 18px rgba(0, 0, 0, .35); }
.sur-titre {
  display: inline-block; padding: 7px 17px; border-radius: 999px;
  background: var(--marine); color: var(--or); border: 3px solid var(--or);
  font: 800 12px/1 var(--courant); letter-spacing: .16em; text-transform: uppercase;
}

p { margin: 0 0 1em; }
strong, b { font-weight: 800; color: var(--texte); }
small, .mention { font-size: 14px; color: var(--texte-faible); }

a { color: var(--texte); text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--or); }
a.sobre { color: var(--texte-doux); text-decoration: none; }
a.sobre:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ boutons
   Trois seulement : plein (l action principale), creux (l action seconde),
   achat (celle qui engage un paiement). Rien d autre ne s invente. */
.bouton, .bouton--creux, .bouton--achat {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 24px; border-radius: var(--rayon);
  font: 800 16.5px/1 var(--courant); text-decoration: none; cursor: pointer;
  border: 3px solid var(--marine); transition: transform .07s, box-shadow .07s, filter .12s;
}
.bouton {
  background: linear-gradient(var(--or-clair) 0 18%, var(--or) 18%, var(--or-profond) 100%);
  color: var(--marine);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 var(--bronze), var(--relief);
}
.bouton--achat {
  background: linear-gradient(#4cc98a 0 18%, var(--succes) 18%, #0d5f36 100%);
  color: var(--texte);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .28), var(--relief);
}
.bouton--creux {
  background: transparent; color: var(--texte);
  border-color: rgba(255, 255, 255, .35); box-shadow: none;
}
.bouton:hover, .bouton--achat:hover { filter: brightness(1.06); }
.bouton--creux:hover { border-color: var(--or); color: var(--or); }
.bouton:active, .bouton--achat:active { transform: translateY(3px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .3), 0 1px 0 var(--marine); }
.bouton[disabled], .bouton--achat[disabled], .bouton--creux[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.bouton--petit { min-height: 40px; padding: 0 16px; font-size: 14.5px; border-width: 2px; }

/* -------------------------------------------------------------------- blocs
   .cadre : la planche biseautee a lisere dore et rivets, la piece signature.
   .bloc et .carte : des blocs sobres, pour tout ce qui se lit plus qu il ne se joue. */
.cadre {
  position: relative; padding: 28px 30px; border: 4px solid var(--marine); border-radius: var(--rayon-l);
  background:
    radial-gradient(circle at 18px 18px, #fff6c9 0 3px, #b37a00 3.5px 5.5px, transparent 6px),
    radial-gradient(circle at calc(100% - 18px) 18px, #fff6c9 0 3px, #b37a00 3.5px 5.5px, transparent 6px),
    radial-gradient(circle at 18px calc(100% - 18px), #fff6c9 0 3px, #b37a00 3.5px 5.5px, transparent 6px),
    radial-gradient(circle at calc(100% - 18px) calc(100% - 18px), #fff6c9 0 3px, #b37a00 3.5px 5.5px, transparent 6px),
    linear-gradient(#1f56c8 0%, #173f9c 55%, #10306f 100%);
  box-shadow: inset 0 0 0 3px var(--or), inset 0 0 0 5px rgba(10, 26, 51, .55),
              inset 0 9px 0 rgba(255, 255, 255, .12), 0 8px 0 var(--marine), 0 20px 34px rgba(0, 0, 0, .4);
  color: var(--texte);
}
.bloc, .carte {
  background: var(--marine-clair); border: 1px solid var(--marine-bord);
  border-radius: var(--rayon-l); padding: 22px 24px;
}
.carte { box-shadow: var(--ombre); }
.contenu { max-width: var(--largeur); margin: 0 auto; padding: 0 20px; }

/* le prix : l argument numero un, jamais noye */
.prix { font-family: var(--titre); font-weight: 400; font-size: 30px; color: var(--or); line-height: 1; }
.prix-note { font-size: 14px; color: var(--texte-faible); }

/* -------------------------------------------------------------- les raretes
   data-rarete sur n importe quel element pose ses deux nuances. Le texte pose
   sur une couleur de rarete n est jamais blanc : on lit la nuance claire sur le
   marine, ou l encre sur l or. */
[data-rarete] { --rarete: var(--commune); --rarete-clair: var(--commune-clair); }
[data-rarete='rare'] { --rarete: var(--rare); --rarete-clair: var(--rare-clair); }
[data-rarete='epique'] { --rarete: var(--epique); --rarete-clair: var(--epique-clair); }
[data-rarete='legendaire'] { --rarete: var(--legendaire); --rarete-clair: var(--legendaire-clair); }
[data-rarete='mystere'] { --rarete: var(--mystere); --rarete-clair: var(--mystere-clair); }

.etiquette {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px;
  border-radius: 999px; border: 2px solid var(--rarete, var(--marine-bord));
  background: color-mix(in srgb, var(--rarete, #ffffff) 14%, transparent);
  color: var(--rarete-clair, var(--texte-doux));
  font: 800 13.5px/1 var(--courant); letter-spacing: .02em;
}

/* --------------------------------------------------------------- le logo
   Le visuel actuel est une image matricielle : il ne se recolore pas et il se
   ferme quand on le reduit. Mesure le 17/09/2026 : le mot « TRESO RANK » reste
   lisible jusqu a 40 px de haut, plus bas il se referme ; l icone carree tient
   jusqu a 32 px. D ou les deux planchers ci-dessous, qui ne se contournent pas. */
.logo { display: block; height: 48px; min-height: 40px; width: auto; }
.logo--petit { height: 40px; }
.logo-icone { display: block; width: 48px; height: 48px; min-width: 32px; min-height: 32px; }

/* ------------------------------------------------------------ fond clair
   Pour une page imprimable, une facture ou un document : on bascule les jetons. */
.sur-papier { background: var(--papier); color: var(--encre); }
.sur-papier h1, .sur-papier h2, .sur-papier h3, .sur-papier h4, .sur-papier strong { color: var(--encre); }
.sur-papier h1 { text-shadow: none; }
.sur-papier a, .sur-papier .prix { color: var(--or-sombre); }
.sur-papier small, .sur-papier .mention { color: #4a5a75; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}