/* Réussites — la feuille de style.
   Copyright (c) 2026 Tristan Cazenave. Tous droits réservés — voir LICENSE.

   LA CARTE EST CELLE DE FUSION. Le site a déjà un dessin de carte — un coin qui
   porte la hauteur et la couleur, un gros symbole en bas à droite, un léger
   lustre en haut — et l'inventer une seconde fois n'aurait donné qu'une
   seconde manière de dessiner la même chose. Toute la taille tient dans
   `--cw` : le reste en découle, et une carte se met à l'échelle en changeant
   un seul nombre. */

:root {
  color-scheme: light dark;
  --fond: #f4f1ea;
  --surface: #fffdf8;
  --surface-2: #efeadf;
  --ink: #1d2126;
  --ink-2: #4a525c;
  --ink-3: #7b838d;
  --line: #d9d2c5;
  --accent: #2c4e7e;
  --accent-2: #24406a;
  --bad: #a6402f;
  --bon: #2f6b45;
  --tapis: #2f6b4f;
  --tapis-2: #275c43;
  --carte: #fffdf7;
  --carte-bord: #b9b1a2;
  --lustre: rgba(255, 255, 255, .8);
  --noir: #1b1f24;
  --rouge: #b0281f;
  --creux: rgba(0, 0, 0, .16);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #14171b;
    --surface: #1c2026;
    --surface-2: #242932;
    --ink: #e8eaed;
    --ink-2: #b3bac3;
    --ink-3: #868e98;
    --line: #333a44;
    --accent: #7aa2d6;
    --accent-2: #9dbce5;
    --bad: #e08b7c;
    --bon: #7fc79c;
    --tapis: #1f4a38;
    --tapis-2: #1a3e2f;
    --carte: #f2efe7;
    --carte-bord: #8e887c;
    --lustre: rgba(255, 255, 255, .09);
    --creux: rgba(0, 0, 0, .3);
  }
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--fond);
  color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
  padding-bottom: env(safe-area-inset-bottom);
}

.page { max-width: 1180px; margin: 0 auto; padding: 10px 12px 28px; }

/* ------------------------------------------------------------------ l'en-tête */

header.tete {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.pousse { margin-left: auto; }

.langues, .seg {
  display: inline-flex; border: 1px solid var(--line); border-radius: 999px;
  overflow: hidden; background: var(--surface);
}
.langues button, .seg button {
  font: inherit; font-size: 13px; line-height: 1; padding: 6px 10px;
  border: 0; background: none; color: var(--ink-2); cursor: pointer;
}
.langues button + button, .seg button + button { border-left: 1px solid var(--line); }
.langues button[aria-pressed="true"], .seg button[aria-pressed="true"] {
  background: var(--accent); color: #fff;
}

select, .btn {
  font: inherit; font-size: 14px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 9px; padding: 7px 12px; cursor: pointer;
}
select { padding-right: 26px; }
.btn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--accent); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primaire { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.primaire:hover { background: var(--accent-2); }

.compteurs { font-size: 13.5px; color: var(--ink-3); white-space: nowrap; }
.compteurs b { color: var(--ink-2); font-weight: 600; }

/* --------------------------------------------------------------------- le tapis */

.tapis {
  background: linear-gradient(170deg, var(--tapis), var(--tapis-2));
  border: 1px solid rgba(0, 0, 0, .22);
  border-radius: 14px;
  padding: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}

.haut {
  display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.lot { display: flex; gap: 6px; }
.lot.droite { margin-left: auto; }

/* Une place vide : le creux où une carte ira. On la dessine, sinon le joueur ne
   sait pas qu'il peut y poser quelque chose. */
.place {
  width: var(--cw); height: calc(var(--cw) * 1.4);
  border: 1.5px dashed rgba(255, 255, 255, .35);
  border-radius: calc(var(--cw) * .13);
  background: var(--creux);
  flex: 0 0 auto;
}
.place.but { border-color: #ffe9a8; border-style: solid; box-shadow: 0 0 0 3px rgba(255, 233, 168, .3); }

.colonnes {
  display: grid;
  grid-template-columns: repeat(var(--n), var(--cw));
  gap: 0 10px;
  justify-content: center;
}
.colonne { position: relative; min-height: calc(var(--cw) * 1.4); }

/* Une figure posée n'est pas une grille de colonnes : ses cartes ont des
   coordonnées à elles. La grille, réglée sur une seule colonne, la coinçait au
   centre et la laissait déborder à droite. */
.colonnes.figuree { display: block; }

/* ---------------------------------------------------------------- une carte */

.pc {
  position: absolute; left: 0;
  width: var(--cw); height: calc(var(--cw) * 1.4);
  border-radius: calc(var(--cw) * .13);
  background: linear-gradient(168deg, var(--lustre), rgba(255, 255, 255, 0) 58%), var(--carte);
  border: 1px solid var(--carte-bord);
  color: var(--noir);
  font: 700 calc(var(--cw) * .40)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: -.03em;
  box-shadow: 0 1px 2px rgba(20, 25, 35, .22);
  cursor: pointer;
  user-select: none; -webkit-user-select: none;
  transition: transform .11s, box-shadow .11s;
}
.pc.statique { position: static; }
.pc.r { color: var(--rouge); }

.pc .ix {
  position: absolute; top: calc(var(--cw) * .06); left: calc(var(--cw) * .11);
  display: flex; flex-direction: column; align-items: center; line-height: 1;
}
.pc .ix em {
  font-style: normal; font-size: calc(var(--cw) * .30); margin-top: .12em;
  font-family: system-ui, sans-serif;
}
.pc .gp {
  position: absolute; right: calc(var(--cw) * .07); bottom: calc(var(--cw) * .015);
  font-size: calc(var(--cw) * .56); font-family: system-ui, sans-serif;
  font-weight: 400; opacity: .92;
}

/* LE DOS. Un damier serré plutôt qu'un aplat : il se distingue d'un coup d'œil
   d'une carte retournée, même du coin de l'œil. */
.pc.dos {
  background:
    repeating-linear-gradient(45deg, #2b4a78 0 3px, #24406a 3px 6px);
  border-color: #1b3153;
  cursor: default;
}
.pc.dos.prenable { cursor: pointer; }

/* LA CARTE GRANDIT, ELLE NE MONTE PAS. Une carte qui se soulève sort de sous le
   curseur, perd son survol, retombe — et oscille. Un agrandissement pris par le
   bas ne peut pas avoir ce défaut : le rectangle d'arrivée contient celui de
   départ. C'est le même raisonnement qu'à la table de Fusion. */
.pc.jouable:hover { transform: scale(1.06); transform-origin: 50% 100%; z-index: 40; }
.pc.choisie {
  box-shadow: 0 0 0 3px #ffe9a8, 0 6px 14px rgba(20, 25, 35, .3);
  transform: scale(1.06); transform-origin: 50% 100%; z-index: 41;
}
.pc.but { box-shadow: 0 0 0 3px rgba(255, 233, 168, .85); }

/* UNE FIGURE POSÉE — pyramide, trois pics. Les cartes y sont placées à leurs
   coordonnées, et non empilées en colonnes : c'est la couverture qui fait le
   jeu, et il faut la voir. Une carte encore couverte s'éteint légèrement, pour
   qu'on distingue d'un coup d'œil ce qui se prend de ce qui attend. */
.figure { position: relative; margin: 0 auto; }
.pc.dessous { cursor: default; filter: brightness(.88) saturate(.85); }

/* --------------------------------------------------------------- les messages */

.dit {
  min-height: 1.5em; margin: 10px 2px 0; font-size: 14.5px; color: var(--ink-2);
}
.dit.bon { color: var(--bon); font-weight: 600; }
.dit.mauvais { color: var(--bad); }

.barre-bas { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }

/* ---------------------------------------------------------------- la modale */

.modale {
  position: fixed; inset: 0; background: rgba(10, 12, 16, .55);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  z-index: 100;
}
.modale[hidden] { display: none; }
.boite {
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-radius: 14px; padding: 20px; max-width: 540px; width: 100%;
  max-height: 84vh; overflow: auto;
}
.boite h2 { margin: 0 0 4px; font-size: 19px; }
.boite h3 { margin: 16px 0 4px; font-size: 15px; color: var(--ink-2); }
.boite p { margin: 4px 0; font-size: 14.5px; color: var(--ink-2); }
.boite ul { margin: 4px 0; padding-left: 20px; font-size: 14.5px; color: var(--ink-2); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cache { display: none !important; }

/* ------------------------------------------------------------ les tailles
   Trois tailles, et le pas entre deux cartes d'une colonne suit. Une carte de
   téléphone ne peut pas être celle d'un écran de bureau : c'est la largeur qui
   commande, et tout le reste en découle. */
.page { --cw: 74px; --pas: 26px; --pas-cache: 13px; }
@media (max-width: 1080px) { .page { --cw: 62px; --pas: 22px; --pas-cache: 11px; } }
@media (max-width: 860px)  { .page { --cw: 50px; --pas: 18px; --pas-cache: 9px; } }
@media (max-width: 680px)  { .page { --cw: 40px; --pas: 15px; --pas-cache: 8px; } }
@media (max-width: 520px)  { .page { --cw: 32px; --pas: 12px; --pas-cache: 6px; padding: 6px; } }