/* Domino Lakou KaraDan' — styles communs aux écrans. */
@font-face { font-family: "Bricolage"; src: url("vendor/bricolage.woff2") format("woff2"); font-weight: 200 800; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Bricolage"; src: url("vendor/bricolage-ext.woff2") format("woff2"); font-weight: 200 800; font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  --tapis: #0f3b2e;      /* fond : tapis de jeu vert */
  --tapis-2: #154a3a;    /* panneaux */
  --tapis-3: #23604d;    /* champs, lignes */
  --creme: #fff6e0;      /* texte, cartons */
  --brume: #b9d6c8;      /* texte secondaire */
  --encre: #13221c;      /* texte sur crème */
  --rouge: #e5484d;      /* boules, pastilles */
  --or: #ffc94a;         /* étape, gagnants */
  --lagon: #3fd6b5;      /* validé */
  --alerte: #ff9d8f;
  --rayon: 14px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background: var(--tapis); color: var(--creme);
  font-family: "Bricolage", "Segoe UI", system-ui, sans-serif; font-size: 17px; line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(1.8rem, 6vw, 2.6rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; }
h2 { font-size: 1.3rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
h3 { font-size: 1rem; font-weight: 600; color: var(--brume); }
.discret { color: var(--brume); }
.petit { font-size: 0.9rem; }
.pile > * + * { margin-top: var(--pas, 14px); }
.ligne { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ecart { justify-content: space-between; }
.cache { display: none !important; }
a { color: var(--creme); }

/* --- boutons et champs */
button, input, select, textarea { font: inherit; color: inherit; }
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 10px 18px; border-radius: 999px; border: 2px solid var(--tapis-3);
  background: transparent; color: var(--creme); font-weight: 600; cursor: pointer; text-decoration: none;
}
.bouton:hover { border-color: var(--brume); }
.bouton.principal { background: var(--creme); border-color: var(--creme); color: var(--encre); font-weight: 700; }
.bouton.principal:hover { background: #fff; border-color: #fff; }
.bouton.or { background: var(--or); border-color: var(--or); color: var(--encre); font-weight: 800; }
.bouton.geant { min-height: 66px; padding: 14px 30px; font-size: 1.3rem; width: 100%; }
.bouton.mini { min-height: 34px; padding: 4px 12px; font-size: 0.88rem; }
.bouton:disabled { opacity: 0.45; cursor: default; }
:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; }
label { display: block; font-weight: 600; margin-bottom: 6px; }
input[type="text"], input[type="number"], select {
  width: 100%; padding: 11px 14px; border-radius: var(--rayon); border: 2px solid var(--tapis-3);
  background: var(--tapis); color: var(--creme);
}
input::placeholder { color: #7fa594; }
.case { display: flex; align-items: center; gap: 10px; font-weight: 500; margin: 0; cursor: pointer; }
.case input { width: 22px; height: 22px; accent-color: var(--or); }
.erreur { color: var(--alerte); font-weight: 600; min-height: 1.45em; }
.ok { color: var(--lagon); font-weight: 600; }
.panneau { background: var(--tapis-2); border-radius: 20px; padding: 18px; }

/* --- la boule */
.boule {
  --t: 120px;
  width: var(--t); height: var(--t); border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: radial-gradient(circle at 32% 28%, #ff9a9d 0, var(--rouge) 38%, #9c1d22 100%);
  box-shadow: inset -6px -8px 14px rgba(0,0,0,.28), 0 8px 18px rgba(0,0,0,.35);
}
.boule span {
  width: 64%; height: 64%; border-radius: 50%; background: #fffdf6; color: var(--encre);
  display: grid; place-items: center; font-weight: 800; font-size: calc(var(--t) * 0.34); letter-spacing: -0.03em; line-height: 1;
}
.boule.vide { background: radial-gradient(circle at 32% 28%, #5f8a7a 0, #2f5a4a 60%, #1d3d31 100%); }
.boule.vide span { background: rgba(255,255,255,.12); color: var(--brume); }
.boule.neuve { animation: rouler .7s cubic-bezier(.2,.9,.3,1.2); }
@keyframes rouler { from { transform: scale(.3) rotate(-160deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .boule.neuve { animation: none; } }

/* --- étiquettes */
.etiquette { display: inline-block; padding: 3px 12px; border-radius: 999px; font-weight: 700; font-size: 0.9rem; background: rgba(255,201,74,.16); color: var(--or); }
.etape-bandeau { background: var(--or); color: var(--encre); border-radius: 16px; padding: 10px 16px; font-weight: 800; }
.etape-bandeau .lot { font-weight: 600; }
.surnom-tele, .express { color: var(--or); font-weight: 800; }

/* --- fête des gagnants */
.fete {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; text-align: center; padding: 24px;
  background: radial-gradient(circle at 50% 40%, rgba(255,201,74,.96), rgba(229,72,77,.96));
  color: var(--encre); animation: apparait .4s ease-out;
}
.fete .quoi { font-size: clamp(2.2rem, 10vw, 7rem); font-weight: 800; line-height: .95; letter-spacing: -0.03em; }
.fete .qui { font-size: clamp(1.4rem, 5vw, 3.4rem); font-weight: 800; margin-top: .4em; overflow-wrap: anywhere; }
.fete .lot { font-size: clamp(1rem, 3vw, 2rem); font-weight: 600; margin-top: .4em; }
@keyframes apparait { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* --- madras : la touche antillaise */
.madras { height: 8px; background: repeating-linear-gradient(90deg, #d2412f 0 22px, var(--or) 22px 34px, #2f9b5a 34px 50px, var(--or) 50px 56px, #d2412f 56px 70px); }

/* --- les dominos */
.domino { --u: 14px; display: inline-flex; flex: none; background: #f6efdf; border-radius: calc(var(--u) * .45); padding: calc(var(--u) * .12);
  box-shadow: 0 calc(var(--u) * .14) 0 #cdbf9f, 0 calc(var(--u) * .3) calc(var(--u) * .5) rgba(0,0,0,.35); vertical-align: middle; }
.domino.h { flex-direction: row; } .domino.v { flex-direction: column; }
.domino .moitie { width: calc(var(--u) * 2.3); height: calc(var(--u) * 2.3); display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: calc(var(--u) * .2); }
.domino.h .moitie + .moitie { border-left: max(1px, calc(var(--u) * .12)) solid #b9ab8e; }
.domino.v .moitie + .moitie { border-top: max(1px, calc(var(--u) * .12)) solid #b9ab8e; }
.domino i { width: 72%; height: 72%; margin: auto; border-radius: 50%; background: #1b1410; }
.domino i.o { background: transparent; }
.domino.dernier { box-shadow: 0 0 0 calc(var(--u) * .28) var(--or), 0 calc(var(--u) * .3) calc(var(--u) * .6) rgba(0,0,0,.4); animation: pose .6s cubic-bezier(.2,1.3,.4,1); }
@keyframes pose { from { transform: scale(1.5); opacity: .2; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .domino.dernier { animation: none; } }
.dos-liste { display: inline-flex; flex-wrap: wrap; gap: 3px; vertical-align: middle; }
.dos { width: 10px; height: 18px; border-radius: 3px; background: #e6dcc4; box-shadow: inset 0 0 0 1px #b9ab8e; }
.pastilles { display: inline-flex; gap: 5px; vertical-align: middle; }
.pastilles span { width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--or); }
.pastilles span.on { background: var(--or); }

/* Équipes (4 places, partenaires face à face) */
.eq { display: inline-block; padding: .08em .55em; border-radius: 99px; font-size: .62em; font-weight: 800; vertical-align: middle; letter-spacing: .01em; white-space: nowrap; color: #1d120b; }
.eq.e1 { background: #ff8a5c; }
.eq.e2 { background: #7cc4ff; }
.siege.e1 { border-top-color: #ff8a5c; } .siege.e2 { border-top-color: #7cc4ff; }

/* Partie aux points */
.score-pts { font-weight: 800; color: var(--or); white-space: nowrap; }
.score-pts small { font-weight: 600; opacity: .7; font-size: .8em; }

/* Tableau d'honneur de la soirée */
.honneur { width: 100%; border-collapse: collapse; }
.honneur th { font-size: .8em; font-weight: 700; color: var(--brume); text-align: center; padding: .3em .5em; }
.honneur th:nth-child(2) { text-align: left; }
.honneur td { padding: .35em .5em; text-align: center; border-top: 1px solid rgba(255,255,255,.1); font-variant-numeric: tabular-nums; }
.honneur td.qui { text-align: left; font-weight: 700; }
.honneur td.rang { width: 2.2em; font-weight: 800; color: var(--brume); }
.honneur td small { opacity: .65; font-weight: 600; }
.honneur tr.premier td { color: var(--or); font-size: 1.12em; }
.honneur .tag-cochon { font-size: .7em; background: #f4a6b8; color: #3b1020; border-radius: 99px; padding: .1em .55em; font-weight: 800; white-space: nowrap; }