/* Zeus — turquoise Égée, or et marbre. Thème clair et sombre (attribut data-theme sur <html>). */
:root {
  --fond: #F2EADA; --carte: #FCFAF5; --encre: #14110C; --gris: #5A5446; --gris-clair: #E2DBCB;
  --marine: #1F7F89; --barre: #1F7F89; --bleu: #1B7682; --vert: #138C4A; --rouge: #CC2417;
  --or: #FAC51C; --or-clair: #FFE58E; --or-fonce: #A9720A; --or-titre: #FFE9A0; --texte-or-fonce: #8A6410;
  --blanc: #FFFFFF; --champ-gris: #E4E7EE; --bord-champ: #C9CDD6; --panneau-turq: #E2F7F8; --panneau-vert: #E7F6EE;
  --selection: #E8EEFC; --sur-marine: #E2F7F8; --alerte: #B86E00;
  --deg1: #45B3BE; --deg2: #2E9AA6; --deg3: #1F7F89; --bouton: #1F7F89;
  --ombre: 0 3px 10px rgba(20, 12, 0, .08);
  --titre: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --grave: 'Cinzel', Georgia, 'Times New Roman', serif;
  --texte: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}
html[data-theme="sombre"] {
  --fond: #0B1E22; --carte: #132E33; --encre: #F2EADA; --gris: #A9C9CC; --gris-clair: #2A4A50;
  --marine: #2FA0AC; --barre: #0F2A2F; --bleu: #5CC3CD; --vert: #2FB36E; --rouge: #F0604F;
  --or-fonce: #E0A815; --texte-or-fonce: #E0B84A; --blanc: #17363C; --champ-gris: #1C3F45; --bord-champ: #3B5E64;
  --panneau-turq: #16393E; --panneau-vert: #15392C; --selection: #1C3F45; --alerte: #F0A030;
  --deg1: #1F4A50; --deg2: #173A40; --deg3: #132E33; --bouton: #1F7F89;
  --ombre: 0 3px 10px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--fond); color: var(--encre); font-family: var(--texte); font-size: 15px; line-height: 1.35;
  -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--bleu); }
.cache { display: none !important; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------ coque */
#app { min-height: 100%; display: flex; flex-direction: column; }
.barre {
  position: sticky; top: 0; z-index: 20; background: var(--barre); color: var(--or-titre);
  border-bottom: 1.2px solid rgba(250, 197, 28, .7); padding: calc(env(safe-area-inset-top) + 6px) 8px 6px;
  display: flex; align-items: center; gap: 4px; min-height: 56px;
}
.barre h1 {
  flex: 1; margin: 0; font: 700 21px/1.15 var(--grave); letter-spacing: 2.6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1.5px 2px rgba(10, 59, 64, .8), 0 0 8px rgba(242, 190, 46, .4);
}
.barre .info { font-size: 13px; font-weight: 600; color: var(--sur-marine); white-space: nowrap; padding-right: 8px; }
.icone-bouton {
  width: 44px; height: 44px; border-radius: 12px; border: 0; background: transparent; color: inherit;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.icone-bouton:active { background: rgba(255, 255, 255, .12); }
.icone-bouton svg { width: 24px; height: 24px; }
.barre .lien-barre { display: inline-flex; align-items: center; gap: 6px; color: var(--or); font-weight: 700; font-size: 14px; background: none; border: 0; min-height: 44px; padding: 0 8px; }

main#contenu { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: 12px 16px calc(96px + env(safe-area-inset-bottom)); }
nav#onglets {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--barre); display: flex;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(250, 197, 28, .25);
}
nav#onglets button {
  flex: 1; background: none; border: 0; color: var(--sur-marine); display: flex; flex-direction: column; align-items: center;
  gap: 3px; font-size: 11px; font-weight: 700; padding: 4px 0; min-height: 52px;
}
nav#onglets button .pastille { width: 56px; height: 30px; border-radius: 15px; display: flex; align-items: center; justify-content: center; }
nav#onglets button svg { width: 22px; height: 22px; }
nav#onglets button[aria-current="page"] { color: var(--or); }
nav#onglets button[aria-current="page"] .pastille { background: rgba(250, 197, 28, .22); }
@media (orientation: landscape) and (max-height: 520px) {
  nav#onglets { top: 0; bottom: 0; right: auto; width: 84px; flex-direction: column; justify-content: center; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) env(safe-area-inset-left); border-top: 0; border-right: 1px solid rgba(250, 197, 28, .25); }
  #app { padding-left: calc(84px + env(safe-area-inset-left)); }
  main#contenu { padding-bottom: 32px; padding-right: calc(16px + env(safe-area-inset-right)); }
}

/* ------------------------------------------------------------ menu latéral */
.voile { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 40; opacity: 0; transition: opacity .2s; }
.voile.ouvert { opacity: 1; }
#menu {
  position: fixed; top: 0; bottom: 0; left: 0; width: min(318px, 86vw); z-index: 41; overflow-y: auto;
  background: linear-gradient(180deg, #3AA8B3, #2A929E, var(--barre)); transform: translateX(-102%); transition: transform .22s ease;
  color: #fff; padding-bottom: env(safe-area-inset-bottom);
}
html[data-theme="sombre"] #menu { background: linear-gradient(180deg, #173A40, #102B30, #0B1E22); }
#menu.ouvert { transform: none; }
.menu-tete { background: var(--blanc); padding: calc(env(safe-area-inset-top) + 12px) 16px 12px; display: flex; align-items: center; gap: 12px; border-bottom: 2px solid #F2BE2E; }
.menu-tete .icone-bouton { background: var(--panneau-turq); color: var(--marine); }
.menu-tete strong { font: 700 20px var(--grave); letter-spacing: 4px; color: #B88209; }
.menu-bandeau { padding: 9px; text-align: center; font: 700 13px var(--grave); letter-spacing: 2px; }
.menu-entree {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 50px; padding: 0 18px; background: transparent; border: 0;
  border-left: 5px solid transparent; border-bottom: 1px solid rgba(255, 255, 255, .18); color: #fff; font-size: 15px; text-align: left;
}
.menu-entree.actif { background: #FFF6D6; color: #7A5306; border-left-color: #F2BE2E; font-weight: 700; }
.menu-entree .valeur { margin-left: auto; font-weight: 700; }
.menu-entree svg { width: 22px; height: 22px; flex: none; }
.menu-pied { padding: 12px 20px 24px; font-size: 13px; }

/* ------------------------------------------------------------ composants */
.titre-section { display: flex; align-items: center; gap: 12px; margin: 18px 2px 8px; font: 700 15px var(--grave); letter-spacing: 2px; color: var(--or-fonce); text-transform: uppercase; }
.titre-section::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(201, 160, 74, .8), transparent); }
.carte { background: var(--carte); border: 1px solid rgba(250, 197, 28, .3); border-radius: 14px; padding: 12px; box-shadow: var(--ombre); }
.carte + .carte { margin-top: 8px; }
.ligne { display: flex; align-items: center; gap: 8px; }
.ligne > .large { flex: 1; min-width: 0; }
.pile { display: flex; flex-direction: column; gap: 8px; }
.grille2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.petit { font-size: 12px; color: var(--gris); }
.tres-petit { font-size: 11px; color: var(--gris); }
.gras { font-weight: 700; }
.chiffre { font-family: var(--titre); font-weight: 800; line-height: 1.05; }
.grave { font-family: var(--grave); font-weight: 700; letter-spacing: 1.4px; }
.vert { color: var(--vert); } .rouge { color: var(--rouge); } .gris { color: var(--gris); } .or { color: var(--or-fonce); } .bleu { color: var(--bleu); }
.kpi .libelle { font: 700 10.5px var(--grave); letter-spacing: 1.2px; color: var(--or-fonce); text-transform: uppercase; }
.kpi .valeur { font: 800 26px/1.1 var(--titre); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.bouton {
  min-height: 44px; border-radius: 12px; border: 1px solid rgba(250, 197, 28, .55); background: var(--bouton); color: var(--or);
  font-weight: 700; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.bouton:disabled { opacity: .45; }
.bouton.plein { width: 100%; }
.bouton.vert { background: var(--vert); color: #fff; border-color: transparent; }
.bouton.rouge { background: var(--rouge); color: #fff; border-color: transparent; }
.bouton.gris { background: var(--gris); color: var(--fond); border-color: transparent; }
.bouton.or { background: var(--or); color: #14110C; border-color: #E0A815; }
.bouton.bleu { background: var(--bleu); color: #fff; border-color: transparent; }
.bouton.contour { background: transparent; color: var(--marine); border: 1px solid rgba(169, 114, 10, .6); }
.bouton.texte { background: transparent; border: 0; color: var(--bleu); padding: 0 8px; }
.bouton svg { width: 20px; height: 20px; }

label.champ { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 700; color: var(--gris); text-transform: uppercase; letter-spacing: .2px; min-width: 0; }
.saisie, select.saisie, textarea.saisie {
  width: 100%; min-height: 46px; border-radius: 10px; border: 1.5px solid var(--bord-champ); background: var(--blanc); color: var(--encre);
  padding: 10px 12px; font-size: 16px; font-weight: 600; text-transform: none; letter-spacing: 0;
}
.saisie:focus { outline: none; border: 2px solid var(--bleu); }
.saisie.grande { font: 800 22px var(--titre); }
.calcule { min-height: 48px; border-radius: 10px; background: var(--champ-gris); padding: 8px 12px; display: flex; align-items: center; font: 800 22px var(--titre); }
.onglets-mode { display: flex; gap: 4px; background: rgba(201, 205, 214, .35); border-radius: 14px; padding: 4px; overflow-x: auto; }
html[data-theme="sombre"] .onglets-mode { background: rgba(59, 94, 100, .45); }
.onglets-mode button { flex: 1; min-height: 40px; border: 0; border-radius: 10px; background: transparent; font-weight: 700; font-size: 14px; white-space: nowrap; padding: 0 8px; }
.onglets-mode button[aria-pressed="true"] { background: var(--bouton); color: var(--or); }
.puce { min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(169, 114, 10, .45); background: transparent; font-weight: 600; }
.puce[aria-pressed="true"] { background: rgba(250, 197, 28, .3); border-color: var(--or); font-weight: 700; }
.puces { display: flex; gap: 8px; flex-wrap: wrap; }

.bandeau { border-radius: 12px; padding: 10px 12px; border: 1px solid var(--marine); background: var(--panneau-turq); display: flex; gap: 10px; align-items: center; font-size: 13px; font-weight: 600; }
.bandeau.vert { border-color: var(--vert); background: var(--panneau-vert); color: var(--vert); }
.bandeau.alerte { border-color: var(--alerte); background: rgba(184, 110, 0, .08); color: var(--alerte); }
.bandeau.rouge { border-color: var(--rouge); background: rgba(204, 36, 23, .08); color: var(--rouge); }
.bandeau svg { width: 22px; height: 22px; flex: none; }
.bandeau .large { flex: 1; }

/* Grandes cartes d'Aujourd'hui */
.carte-or { border-radius: 18px; border: 1.5px solid #F2BE2E; background: linear-gradient(135deg, var(--deg1), var(--deg2), var(--deg3)); color: #fff; }
.carte-montante { padding: 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; text-align: left; font: inherit; color: #fff; cursor: pointer; }
.carte-montante .grave { font-size: 12px; letter-spacing: 2px; color: var(--sur-marine); }
.carte-montante .chiffre { font-size: 44px; color: #fff; }
.carte-montante .pl { font-size: 13px; color: var(--sur-marine); }
.carte-montante .filet { height: 1px; background: rgba(255, 255, 255, .35); margin: 6px 0; }
.trio { display: flex; gap: 8px; align-items: stretch; }
.jauge-olympe { width: 80px; padding: 10px 9px 12px; display: flex; flex-direction: column; gap: 3px; align-items: stretch; flex: none; cursor: pointer; color: #fff; }
.barre-maison { height: 9px; border-radius: 3px; background: rgba(255, 255, 255, .22); overflow: hidden; position: relative; }
.barre-maison i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #E0A815, #FFE27A); border-radius: 3px; }
.barre-maison.encours i::after {
  content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  background-size: 50% 100%; background-repeat: no-repeat; animation: vague 2.6s linear infinite;
}
@keyframes vague { from { background-position: -60% 0; } to { background-position: 160% 0; } }
.jauge-olympe .pc { font: 800 22px var(--titre); text-align: center; margin-top: 6px; }
.jauge-olympe .mn { font-size: 11px; text-align: center; color: var(--sur-marine); }
.jauge-tresor { width: 78px; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; cursor: pointer; color: #fff; }
.fiole { width: 46px; flex: 1; min-height: 110px; border-radius: 14px 14px 18px 18px; border: 1.5px solid #FFE27A; background: rgba(255, 255, 255, .22); overflow: hidden; position: relative; }
.fiole canvas, .billet canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Tickets */
.ticket { background: var(--carte); border-radius: 12px; border: 1px solid rgba(250, 197, 28, .35); padding: 12px; box-shadow: var(--ombre); }
.ticket.prono { border: 2px solid var(--or); }
.ticket + .ticket { margin-top: 8px; }
.ticket .tete { display: flex; align-items: center; gap: 6px; }
.ticket .tete .lib { flex: 1; font: 700 19px/1.15 var(--titre); min-width: 0; overflow-wrap: anywhere; }
.ticket .tete .co { font: 800 19px var(--titre); color: var(--bleu); white-space: nowrap; }
.sel { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12.5px; }
.sel .m { width: 14px; font-weight: 900; }
.sel .t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sel.perdue .t { text-decoration: line-through; color: var(--rouge); }
.sel.gagnee .t { color: var(--vert); }
.marque { width: 44px; height: 40px; border-radius: 8px; border: 1.5px solid currentColor; background: var(--blanc); font-weight: 900; font-size: 15px; flex: none; }
.marque.v { color: var(--vert); } .marque.r { color: var(--rouge); } .marque.g { color: var(--gris); }
.marque[aria-pressed="true"].v { background: var(--vert); color: #fff; border-color: var(--vert); }
.marque[aria-pressed="true"].r { background: var(--rouge); color: #fff; border-color: var(--rouge); }
.marque[aria-pressed="true"].g { background: var(--gris); color: var(--fond); border-color: var(--gris); }
.actions-ticket { display: grid; grid-template-columns: 1fr 1fr 1fr 56px; gap: 6px; margin-top: 10px; }
.actions-ticket .bouton { padding: 0 4px; font-size: 14px; }
.resultat-ticket { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.resultat-ticket .chiffre { font-size: 20px; }

/* Carte prono (maillots) */
.carte-prono { border-radius: 14px; overflow: hidden; background: linear-gradient(160deg, #0F2A5C, #1F7F89); color: #fff; padding: 12px; position: relative; }
.carte-prono .bande { display: flex; align-items: center; justify-content: space-between; font: 700 11px var(--grave); letter-spacing: 1.6px; color: #FFE27A; }
.carte-prono .duel { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; margin-top: 8px; text-align: center; }
.carte-prono .duel .nom { font: 800 16px var(--titre); letter-spacing: .5px; text-transform: uppercase; overflow-wrap: anywhere; }
.carte-prono svg.maillot { width: 64px; height: 58px; display: block; margin: 0 auto 4px; }
.carte-prono .vs { font: 700 14px var(--grave); color: #FFE27A; }
.cotes3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.cotes3 div { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 226, 122, .35); border-radius: 10px; text-align: center; padding: 4px; }
.cotes3 div.choisi { background: #FAC51C; color: #14110C; border-color: #E0A815; }
.cotes3 b { display: block; font-size: 11px; } .cotes3 span { font: 800 18px var(--titre); }

/* Calcul de Mon pari */
.panneau-calcul { background: var(--barre); color: #fff; border-radius: 12px; padding: 10px 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.panneau-calcul b { display: block; font-size: 10px; letter-spacing: .4px; color: var(--sur-marine); }
.panneau-calcul span { font: 800 20px var(--titre); white-space: nowrap; }
.controles li { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--gris-clair); font-size: 13px; }
.controles li:last-child { border-bottom: 0; }
.controles .pt { width: 10px; height: 10px; border-radius: 5px; flex: none; }
.controles .pt.ok { background: var(--vert); } .controles .pt.alerte { background: var(--alerte); } .controles .pt.bloque { background: var(--rouge); }
.controles ul { list-style: none; margin: 0; padding: 0; }
.selection-saisie { background: var(--carte); border: 1px solid rgba(250, 197, 28, .3); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.selection-saisie + .selection-saisie { margin-top: 8px; }
.supprimer { color: var(--rouge); }
.boule { width: 40px; height: 40px; border-radius: 20px; border: 1.5px solid var(--bord-champ); background: var(--blanc); font-weight: 800; }
.boule[aria-pressed="true"] { background: var(--marine); color: #fff; border-color: var(--or); }
.boules { display: flex; flex-wrap: wrap; gap: 5px; }

/* Montante et maisons */
.arc { display: block; margin: 0 auto; width: 100%; max-width: 300px; }
.maison { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--gris-clair); }
.maison:last-child { border-bottom: 0; }
.maison .num { width: 34px; height: 34px; border-radius: 17px; display: flex; align-items: center; justify-content: center; font: 800 16px var(--titre); border: 1.5px solid var(--or); flex: none; }
.maison.franchie .num { background: var(--or); color: #14110C; }
.maison.encours .num { background: var(--marine); color: #fff; box-shadow: 0 0 8px rgba(242, 194, 48, .6); }

/* Porte-monnaie */
.billet { position: relative; height: 180px; border-radius: 16px; border: 3px solid #1B5A46; overflow: hidden; background: linear-gradient(135deg, #5CC39C, #3A9E7C, #2A7F62, #226B53); color: #fff; box-shadow: 0 14px 24px rgba(0, 0, 0, .35); }
.billet .dessus { position: absolute; inset: 0; padding: 14px; display: flex; flex-direction: column; justify-content: space-between; }
.plaisir { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--gris-clair); }
.plaisir .n { width: 30px; height: 30px; border-radius: 15px; background: var(--champ-gris); display: flex; align-items: center; justify-content: center; font-weight: 800; flex: none; }
.plaisir.atteint .n { background: #2A7F62; color: #fff; }

/* Bilan */
.courbe svg { width: 100%; height: 180px; display: block; }
.repart { width: 100%; border-collapse: collapse; font-size: 13px; }
.repart td { padding: 6px 4px; border-bottom: 1px solid var(--gris-clair); }
.repart tr[aria-pressed="true"] td { background: var(--selection); }
.liste-paris .item { display: flex; gap: 8px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--gris-clair); background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; text-align: left; }
.liste-paris .item .large { flex: 1; min-width: 0; }

/* ------------------------------------------------------------ dialogues */
.couche { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .5); }
.couche.bas { align-items: flex-end; padding: 0; }
.dialogue { background: var(--carte); color: var(--encre); border: 1px solid rgba(250, 197, 28, .55); border-radius: 16px; width: 100%; max-width: 460px; max-height: 88vh; overflow-y: auto; padding: 18px; box-shadow: 0 20px 40px rgba(0, 0, 0, .35); }
.couche.bas .dialogue { max-width: 640px; border-radius: 18px 18px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.dialogue h2 { margin: 0 0 10px; font: 700 17px var(--grave); letter-spacing: 1.2px; color: var(--marine); }
.dialogue .boutons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.dialogue pre { white-space: pre-wrap; font-size: 12px; background: var(--fond); padding: 10px; border-radius: 10px; max-height: 50vh; overflow: auto; }
.option { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 0 8px; border: 0; background: none; text-align: left; border-bottom: 1px solid var(--gris-clair); font-size: 15px; }
#toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 70; background: var(--barre); color: var(--or-clair);
  border-radius: 12px; padding: 12px 14px; font-size: 14px; width: max-content; max-width: min(92vw, 520px); display: flex; gap: 12px; align-items: center; box-shadow: 0 8px 20px rgba(0, 0, 0, .3); }
#toast button { background: none; border: 0; color: var(--or); font-weight: 800; }
.alerte-haut { background: var(--rouge); color: #fff; padding: 8px 12px; display: flex; gap: 10px; align-items: center; font-size: 12.5px; font-weight: 600; }

/* ------------------------------------------------------------ intro et célébrations */
#intro { position: fixed; inset: 0; z-index: 100; background: #050A22; overflow: hidden; }
#intro canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#intro .boutons-intro { position: absolute; left: 20px; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; opacity: 0; visibility: hidden; transform: translateY(40px); pointer-events: none; }
#intro .boutons-intro.visibles { pointer-events: auto; }
.commencer { height: 58px; border-radius: 16px; border: 1px solid rgba(242, 194, 48, .55); background: linear-gradient(180deg, #1B3A7A, #0C1A4A 70%); color: #FAC51C;
  font-size: 18px; font-weight: 800; letter-spacing: .5px; display: flex; align-items: center; justify-content: center; gap: 10px; position: relative; overflow: hidden;
  box-shadow: 0 5px 0 #050E24, 0 12px 22px rgba(10, 26, 63, .35); }
.commencer::before { content: ''; position: absolute; top: 0; bottom: 0; width: 60px; left: -80px; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent); animation: reflet 4.5s ease-in-out infinite; }
@keyframes reflet { 0%, 70% { left: -80px; } 100% { left: 110%; } }
.mention { border-radius: 10px; padding: 6px 12px; background: rgba(255, 251, 240, .7); color: #3B2F12; font-size: 11px; text-align: center; line-height: 1.5; }
.jeu-responsable { border-radius: 10px; padding: 8px 10px; background: #FFE066; color: #14110C; font-size: 11px; font-weight: 700; text-align: center; line-height: 1.35; }
.celebration { position: fixed; inset: 0; z-index: 90; background: radial-gradient(circle at 50% 35%, #1B3A7A, #050A22 70%); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.celebration canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.celebration .texte { position: relative; max-width: 420px; }
.celebration h2 { font: 700 30px var(--grave); color: #FFD26E; letter-spacing: 2px; margin: 0 0 8px; text-shadow: 0 0 24px rgba(255, 210, 110, .8); }
.eclair-dore { position: fixed; inset: 0; z-index: 95; pointer-events: none; background: radial-gradient(circle at 50% 30%, rgba(255, 241, 176, .85), rgba(242, 190, 46, .25) 45%, transparent 70%); animation: eclair .9s ease-out forwards; }
@keyframes eclair { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .barre-maison.encours i::after, .commencer::before { animation: none; }
}

/* ------------------------------------------------------------ tableau de bord : nuit égéenne, cartes en relief */
body.dash-actif, html[data-theme="relief"] body { background: radial-gradient(120% 60% at 50% -10%, rgba(242, 190, 46, .22), transparent 55%), linear-gradient(180deg, #17606F 0%, #0F4553 38%, #0B3441 72%, #092B37 100%) fixed; }
body.dash-actif .barre { background: linear-gradient(180deg, rgba(23, 96, 111, .92), rgba(15, 69, 83, .88)); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255, 226, 122, .45); box-shadow: 0 4px 14px rgba(2, 28, 34, .35); color: #F1F5F9; }
body.dash-actif .barre h1 { font-size: 17px; letter-spacing: 2px; color: #FFE58E; text-shadow: 0 2px 0 #0A3A44, 0 0 10px rgba(242, 190, 46, .35); }
body.dash-actif nav#onglets { background: linear-gradient(180deg, #0F4553, #0A3440); border-top-color: rgba(255, 226, 122, .3); }
.scan-ticket { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; border-radius: 12px; border: 0; font: 800 13px var(--texte); white-space: nowrap;
  color: #2E1E02; background: linear-gradient(180deg, #FFD95A, #F2B41F 55%, #D99A0E); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 3px 0 #9C6A06, 0 6px 12px rgba(2, 28, 34, .35); }
.scan-ticket:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 1px 0 #9C6A06; }
.dash { display: flex; flex-direction: column; gap: 18px; color: #F1F5F9; padding-bottom: 6px; }
.dash-statut { font-size: 13px; color: #CDEBEE; text-align: center; }
.dash-statut b { color: #FFE58E; }
.dash-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.dash-actions button { min-height: 54px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .16); color: #E2F7F8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font: 700 11px var(--texte);
  background: linear-gradient(180deg, #2A8291, #19606E); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 4px 0 #0A3A44, 0 8px 14px rgba(2, 28, 34, .35); }
.dash-actions button:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 0 #0A3A44; }
.dash-actions button:nth-child(4) { color: #FFE58E; }
/* Une carte en relief : arête claire en haut, tranche épaisse en bas, ombre portée. */
.verre { position: relative; display: block; width: 100%; text-align: left; font: inherit; color: inherit; border-radius: 22px; padding: 14px; border: 1px solid rgba(142, 240, 201, .22);
  background: linear-gradient(165deg, rgba(48, 132, 146, .62) 0%, rgba(20, 78, 92, .86) 42%, rgba(12, 52, 64, .95) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -3px 6px rgba(0, 0, 0, .22), 0 7px 0 #072A33, 0 9px 0 rgba(255, 226, 122, .12), 0 20px 30px rgba(2, 22, 28, .55); }
.verre::before { content: ''; position: absolute; inset: 1px 1px auto; height: 46%; border-radius: 21px 21px 40% 40% / 21px 21px 18px 18px; background: linear-gradient(180deg, rgba(255, 255, 255, .1), transparent); pointer-events: none; }
button.verre { cursor: pointer; }
button.verre:active { transform: translateY(4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 3px 0 #072A33, 0 10px 18px rgba(2, 22, 28, .5); }
.verre-titre { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 800 14px var(--titre); letter-spacing: 1.2px; color: #F4FBFB; margin-bottom: 8px; flex-wrap: wrap; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.dash-chip { font: 800 13px var(--titre); padding: 3px 10px; border-radius: 999px; color: #3B2604; background: linear-gradient(180deg, #FFE58E, #E9B52A); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 2px 0 #9C6A06; text-shadow: none; letter-spacing: .4px; }
.dash-sous { position: relative; font-size: 13px; color: #D5EEF0; margin-top: 4px; }
.dash-sous b { color: #fff; }
.or-vif { color: #FFD34D !important; }
.coffre { padding: 0; overflow: hidden; border: 1px solid rgba(167, 243, 208, .7); background: linear-gradient(180deg, #B6F5DA, #8EF0C9 30%, #5ED9AE);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -3px 6px rgba(10, 80, 60, .3), 0 7px 0 #2A8A6B, 0 20px 30px rgba(2, 22, 28, .55); }
.coffre::before { display: none; }
.verre-tete { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 10px; font: 800 15px var(--titre); letter-spacing: 1px; color: #0F2A2F; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.coffre-or { position: relative; height: 184px; margin: 0 12px 14px; border-radius: 16px; overflow: hidden; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5), inset 0 8px 18px rgba(90, 56, 6, .35), 0 3px 0 #2A8A6B; }
.coffre-or canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.coffre-texte { position: absolute; left: 10px; top: 10px; z-index: 1; display: flex; flex-direction: column; gap: 2px; padding: 6px 12px 8px; border-radius: 12px; color: #3B2604; background: rgba(255, 250, 230, .66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 1px 0 #fff, 0 3px 0 rgba(122, 80, 6, .35), 0 6px 12px rgba(90, 56, 6, .25); }
.coffre-texte .chiffre { font-size: 32px; }
.coffre-texte span:last-child { font: 700 12px var(--texte); }
.dash-puces { display: inline-flex; gap: 4px; }
.dash-puces button { min-height: 30px; padding: 0 10px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(5, 40, 48, .45); color: #CDEBEE; font: 700 12px var(--texte); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3); }
.dash-puces button[aria-pressed="true"] { background: linear-gradient(180deg, #B6F5DA, #6EE7B7); color: #0F2A2F; border-color: transparent; box-shadow: inset 0 1px 0 #fff, 0 2px 0 #2A8A6B; }
.jauge-liquide { position: relative; display: block; width: 100%; height: 190px; border: 0; background: none; padding: 0; color: inherit; cursor: pointer; }
.jauge-liquide canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.jl-valeur { position: absolute; left: 0; right: 0; top: 52%; transform: translateY(-50%); text-align: center; font: 800 48px var(--titre); color: #fff; text-shadow: 0 3px 0 rgba(4, 40, 48, .7), 0 6px 14px rgba(0, 0, 0, .45); }
.jl-libelle { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font: 700 11px var(--texte); letter-spacing: 1.2px; color: #E2F7F8; }
.escalier { position: relative; display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 8px rgba(2, 22, 28, .45)); }
.pieces3d { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 6px; margin: 4px 0 6px; }
.piece3d { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.piece3d svg { width: 100%; max-width: 54px; height: auto; display: block; }
.piece3d span { font: 800 12px var(--titre); color: #CDEBEE; white-space: nowrap; }
.piece3d.acquis span { color: #FFE58E; }
.piece3d.prochain span { color: #fff; }
.piece3d.prochain svg { filter: drop-shadow(0 0 6px rgba(255, 211, 77, .55)); }
.dash-croissance { position: relative; font-size: 12.5px; color: #D5EEF0; text-align: right; margin: -2px 0 6px; }
.dash-courbe { position: relative; border-radius: 14px; padding: 6px 4px 2px; background: rgba(3, 30, 38, .45); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35), inset 0 -1px 0 rgba(255, 255, 255, .08); }
.dash-courbe svg { width: 100%; height: auto; display: block; }
.dash-legende { position: relative; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12px; color: #D5EEF0; margin-top: 8px; }
.dash-legende i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.chantier { border-color: rgba(255, 226, 122, .5); background: linear-gradient(165deg, rgba(64, 120, 110, .6), rgba(22, 70, 74, .9) 45%, rgba(14, 48, 56, .96)); }
.chantier-solde { position: relative; display: flex; flex-direction: column; gap: 2px; }
.chantier-solde .chiffre { font-size: 40px; color: #FFE58E; text-shadow: 0 3px 0 #6E4A06, 0 6px 14px rgba(0, 0, 0, .4); }
.chantier-solde span:last-child { font-size: 13px; color: #CDEBEE; }

/* ------------------------------------------------------------ victoires (archive ParionsSport, éclair de Zeus, en relief) */
.victoire { border-radius: 18px; overflow: hidden; background: var(--carte); border: 1px solid rgba(12, 26, 74, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 5px 0 rgba(12, 26, 74, .28), 0 14px 24px rgba(12, 26, 74, .22); }
.ticket + .victoire, .victoire + .ticket, .victoire + .victoire { margin-top: 12px; }
.vic-tete { position: relative; display: flex; align-items: center; min-height: 60px; padding: 0 0 0 16px; color: #fff; overflow: hidden;
  background: linear-gradient(180deg, #2B4FB8 0%, #16309E 48%, #0C1A4A 100%); border-bottom: 3px solid #E0A815; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.vic-tete::before { content: ''; position: absolute; inset: 0 0 52% 0; background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0)); pointer-events: none; }
.vic-titre { flex: 1; font: 800 21px var(--titre); letter-spacing: .4px; position: relative; z-index: 1; text-shadow: 0 2px 0 #071233, 0 0 10px rgba(120, 160, 255, .35); }
.vic-eclair { position: absolute; right: 50px; top: -3px; width: 150px; height: 66px; filter: drop-shadow(0 3px 0 rgba(7, 18, 51, .55)) drop-shadow(0 0 6px rgba(242, 190, 46, .45)); }
.vic-menu { position: relative; z-index: 1; width: 50px; height: 60px; border: 0; border-left: 1px solid rgba(255, 255, 255, .25); background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; }
.vic-corps { padding: 10px 14px 12px; }
.vic-ligne { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--gris-clair); }
.vic-ok { width: 30px; height: 30px; border-radius: 15px; color: #fff; display: flex; align-items: center; justify-content: center; flex: none;
  background: radial-gradient(circle at 35% 30%, #8FD14F, #4F9A1E 60%, #3A7714); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 #2C5C0E; }
.vic-lib { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.vic-date { font: 800 17px var(--titre); white-space: nowrap; }
.vic-boutons { display: grid; grid-template-columns: 1fr 1.3fr; gap: 12px; margin-top: 12px; }
.vic-details, .vic-partager { min-height: 46px; border-radius: 12px; font: 700 16px var(--titre); display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.vic-details { border: 1px solid rgba(0, 0, 0, .06); background: linear-gradient(180deg, #F4F6F9, #DCE2EA); color: #14110C; box-shadow: inset 0 1px 0 #fff, 0 3px 0 #B9C2CE; }
.vic-partager { border: 1.5px solid #D5DAE2; background: linear-gradient(180deg, #FFFFFF, #F1F3F7); color: #C2410C; box-shadow: inset 0 1px 0 #fff, 0 3px 0 #C9D0DA; }
.vic-details:active, .vic-partager:active { transform: translateY(2px); box-shadow: inset 0 1px 0 #fff, 0 1px 0 #B9C2CE; }
html[data-theme="sombre"] .vic-details { background: linear-gradient(180deg, #2A4A50, #1C3F45); color: var(--encre); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 3px 0 #0B2328; }
html[data-theme="sombre"] .vic-partager { background: linear-gradient(180deg, #1F4248, #17363C); border-color: #3B5E64; color: #FB923C; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 3px 0 #0B2328; }
.vic-liste { margin: 10px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.45; }
.vic-chiffres { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 3px; padding: 3px; background: #C9D0DA; }
html[data-theme="sombre"] .vic-chiffres { background: #0B2328; }
.vic-chiffres > div { position: relative; border-radius: 8px; text-align: center; padding: 8px 4px 9px; background: linear-gradient(180deg, #F2F4F8, #DDE3EB); box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0, 0, 0, .06); }
html[data-theme="sombre"] .vic-chiffres > div { background: linear-gradient(180deg, #23474D, #1A3A40); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
.vic-chiffres span { display: block; font: 700 15px var(--titre); }
.vic-chiffres b { display: block; font: 800 24px var(--titre); font-variant-numeric: tabular-nums; }
.vic-gain { padding-right: 40px !important; overflow: hidden; color: #3B2604;
  background: linear-gradient(180deg, #FFF8DC 0%, #FFEDB0 55%, #F8DA7A 100%) !important; box-shadow: inset 0 1px 0 #fff, inset 0 -3px 0 rgba(169, 114, 10, .35), 0 0 0 1px rgba(169, 114, 10, .25) !important; }
.vic-gain::before { content: ''; position: absolute; inset: 0; background: no-repeat 84% 50% / 44px 58px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M14 0 2 18h8l-2 14 14-20h-8l4-12z' fill='%23B8860B' fill-opacity='.42'/%3E%3C/svg%3E"); pointer-events: none; }
.vic-gain i { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 14px; color: #fff; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #8FD14F, #4F9A1E 60%, #3A7714); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 #2C5C0E; }
html[data-theme="sombre"] .vic-gain { background: linear-gradient(180deg, #6E5A1E, #4E4015) !important; color: #FFF3C4; }

/* ------------------------------------------------------------ chantiers */
.chantier-carte + .chantier-carte { margin-top: 8px; }
.chantier-tete { width: 100%; background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; gap: 10px; }
.chantier-detail { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

/* ------------------------------------------------------------ scanner en direct */
.scanner-couche { background: rgba(11, 15, 25, .95); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); }
.scanner-boite { width: 100%; max-width: 420px; border-radius: 24px; padding: 18px; background: rgba(15, 23, 42, .92); border: 1px solid rgba(71, 85, 105, .6); color: #E2E8F0; box-shadow: 0 24px 48px rgba(0, 0, 0, .5); }
.scanner-boite h2 { margin: 0; font: 800 17px var(--titre); display: flex; align-items: center; gap: 8px; color: #E2E8F0; }
.scanner-boite h2 svg { color: #FBBF24; }
.scanner-video { position: relative; margin-top: 10px; border-radius: 16px; overflow: hidden; background: #000; aspect-ratio: 3 / 4; border: 1px solid rgba(71, 85, 105, .5); }
.scanner-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scanner-cadre { position: absolute; inset: 12% 10%; border: 2px solid rgba(251, 191, 36, .85); border-radius: 14px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .25); }
.scanner-info { font-size: 12px; color: #94A3B8; text-align: center; margin: 10px 0; }

/* ------------------------------------------------------------ écrans en relief (Aujourd'hui) : mêmes couleurs que le tableau de bord */
body.dash-actif { --carte: rgba(18, 74, 88, .9); --encre: #F1F8F8; --gris: #CDEBEE; --gris-clair: rgba(255, 255, 255, .14); --blanc: #0E4150;
  --champ-gris: rgba(3, 30, 38, .45); --bord-champ: rgba(255, 255, 255, .22); --bleu: #8EE6F0; --vert: #5EE39A; --rouge: #FF8A7A; --or-fonce: #FFD34D;
  --panneau-turq: rgba(142, 240, 201, .12); --panneau-vert: rgba(94, 227, 154, .14); --alerte: #FFB547; --marine: #8EE6F0; color: var(--encre); }
body.dash-actif .titre-section { color: #FFE58E; text-shadow: 0 2px 0 rgba(2, 28, 34, .6); }
body.dash-actif .titre-section::after { background: linear-gradient(90deg, rgba(255, 226, 122, .7), transparent); }
body.dash-actif .carte, body.dash-actif .ticket, body.dash-actif .bandeau {
  border: 1px solid rgba(142, 240, 201, .22); background: linear-gradient(165deg, rgba(48, 132, 146, .62), rgba(20, 78, 92, .88) 45%, rgba(12, 52, 64, .96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 -3px 6px rgba(0, 0, 0, .2), 0 6px 0 #072A33, 0 16px 24px rgba(2, 22, 28, .5); border-radius: 18px; }
body.dash-actif .ticket + .ticket, body.dash-actif .carte + .carte, body.dash-actif .ticket + .victoire, body.dash-actif .victoire + .ticket { margin-top: 14px; }
body.dash-actif .bandeau { color: #E2F7F8; }
body.dash-actif .bandeau.vert { color: #B9F5CF; }
body.dash-actif .bandeau.alerte { color: #FFD9A0; }
body.dash-actif .carte-or { border: 1px solid rgba(255, 226, 122, .55); background: linear-gradient(160deg, #3FB0BC, #23899A 45%, #146272);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -4px 8px rgba(0, 0, 0, .22), 0 7px 0 #0A4752, 0 18px 28px rgba(2, 22, 28, .55); }
body.dash-actif .carte-montante .chiffre { text-shadow: 0 3px 0 #0A4752, 0 6px 14px rgba(0, 0, 0, .35); }
body.dash-actif .barre-maison { background: rgba(3, 30, 38, .45); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4); }
body.dash-actif .fiole { box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35); }
body.dash-actif .ticket .tete .co { color: #FFE58E; }
body.dash-actif .bouton { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 0 rgba(2, 28, 34, .6); }
body.dash-actif .bouton:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 0 rgba(2, 28, 34, .6); }
body.dash-actif .bouton.vert { background: linear-gradient(180deg, #2FB36E, #138C4A); }
body.dash-actif .bouton.rouge { background: linear-gradient(180deg, #F0604F, #C42B1C); }
body.dash-actif .bouton.gris { background: linear-gradient(180deg, #7C8B8F, #55646A); color: #fff; }
body.dash-actif .bouton.contour { background: rgba(3, 30, 38, .35); color: #FFE58E; border-color: rgba(255, 226, 122, .55); }
body.dash-actif .bouton.texte { box-shadow: none; color: #FFE58E; }
body.dash-actif .marque { background: rgba(3, 30, 38, .4); box-shadow: 0 3px 0 rgba(2, 28, 34, .6); }
body.dash-actif .marque.v { color: #5EE39A; } body.dash-actif .marque.r { color: #FF8A7A; } body.dash-actif .marque.g { color: #CDEBEE; }
/* La carte victoire garde ses couleurs claires, en relief sur le fond bleu. */
body.dash-actif .victoire { --carte: #FCFAF5; --encre: #14110C; --gris: #5A5446; --gris-clair: #E2DBCB; --champ-gris: #E4E7EE; --bord-champ: #C9CDD6; color: #14110C;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 6px 0 #0A2E3A, 0 18px 28px rgba(2, 22, 28, .55); border-color: rgba(255, 226, 122, .4); }
body.dash-actif .carte-prono { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 4px 0 #071233; }

/* ------------------------------------------------------------ relief sur tous les écrans */
body.dash-actif .onglets-mode { background: rgba(3, 30, 38, .45); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .35), inset 0 -1px 0 rgba(255, 255, 255, .08); }
body.dash-actif .onglets-mode button { color: #CDEBEE; }
body.dash-actif .onglets-mode button[aria-pressed="true"] { background: linear-gradient(180deg, #FFE58E, #E9B52A); color: #2E1E02; box-shadow: inset 0 1px 0 #fff, 0 3px 0 #9C6A06; }
body.dash-actif .puce { background: rgba(3, 30, 38, .35); border-color: rgba(255, 255, 255, .2); color: #E2F7F8; box-shadow: 0 3px 0 rgba(2, 28, 34, .55); }
body.dash-actif .puce[aria-pressed="true"] { background: linear-gradient(180deg, #FFE58E, #E9B52A); color: #2E1E02; border-color: transparent; box-shadow: inset 0 1px 0 #fff, 0 3px 0 #9C6A06; }
body.dash-actif .saisie, body.dash-actif select.saisie, body.dash-actif textarea.saisie { background: rgba(3, 30, 38, .55); border-color: rgba(255, 255, 255, .2); color: #F1F8F8; box-shadow: inset 0 2px 5px rgba(0, 0, 0, .35); }
body.dash-actif .saisie::placeholder { color: rgba(205, 235, 238, .5); }
body.dash-actif .saisie:focus { border-color: #FFD34D; }
body.dash-actif select.saisie option { background: #0E4150; color: #F1F8F8; }
body.dash-actif label.champ { color: #CDEBEE; }
body.dash-actif .calcule { background: rgba(3, 30, 38, .5); color: #FFE58E; box-shadow: inset 0 2px 5px rgba(0, 0, 0, .35); }
body.dash-actif .selection-saisie { border: 1px solid rgba(142, 240, 201, .22); background: linear-gradient(165deg, rgba(48, 132, 146, .55), rgba(14, 58, 70, .92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 5px 0 #072A33, 0 12px 20px rgba(2, 22, 28, .45); }
body.dash-actif .selection-saisie + .selection-saisie { margin-top: 12px; }
body.dash-actif .panneau-calcul { background: linear-gradient(180deg, #0C1A4A, #16309E); border: 1px solid rgba(255, 226, 122, .45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 5px 0 #071233, 0 12px 20px rgba(2, 22, 28, .45); }
body.dash-actif .controles .pt.ok { background: #5EE39A; box-shadow: 0 0 6px rgba(94, 227, 154, .7); }
body.dash-actif .controles .pt.alerte { background: #FFB547; } body.dash-actif .controles .pt.bloque { background: #FF8A7A; }
body.dash-actif .boule { background: radial-gradient(circle at 35% 30%, #FFFFFF, #D9E6EA 60%, #9DB4BB); color: #0C2A31; border: 0; box-shadow: 0 3px 0 #3E5A62, 0 5px 8px rgba(2, 22, 28, .4); }
body.dash-actif .boule[aria-pressed="true"] { background: radial-gradient(circle at 35% 30%, #FFF4C2, #F2C34A 55%, #B07A12); color: #3B2604; box-shadow: 0 3px 0 #7A4E06, 0 0 10px rgba(242, 190, 46, .6); }
body.dash-actif .kpi .libelle { color: #FFE58E; }
body.dash-actif .repart td, body.dash-actif .liste-paris .item, body.dash-actif .maison, body.dash-actif .plaisir, body.dash-actif .option, body.dash-actif .controles li { border-bottom-color: rgba(255, 255, 255, .12); }
body.dash-actif .liste-paris .item { color: #F1F8F8; }
body.dash-actif .repart tr[aria-pressed="true"] td { background: rgba(255, 226, 122, .14); }
body.dash-actif .maison .num { background: rgba(3, 30, 38, .45); box-shadow: 0 3px 0 rgba(2, 28, 34, .6); }
body.dash-actif .maison.franchie .num { background: radial-gradient(circle at 35% 30%, #FFF4C2, #F2C34A 55%, #B07A12); color: #3B2604; border-color: #FFE58E; }
body.dash-actif .maison.encours .num { background: linear-gradient(180deg, #2A8291, #19606E); color: #fff; }
body.dash-actif .plaisir .n { background: rgba(3, 30, 38, .45); box-shadow: 0 3px 0 rgba(2, 28, 34, .6); }
body.dash-actif .plaisir.atteint .n { background: radial-gradient(circle at 35% 30%, #FFF4C2, #F2C34A 55%, #B07A12); color: #3B2604; }
body.dash-actif .billet { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 0 #134A39, 0 20px 30px rgba(2, 22, 28, .55); }
body.dash-actif .option { color: #F1F8F8; }
body.dash-actif .jeu-responsable { box-shadow: 0 4px 0 #A88A1A; }
body.dash-actif .titre-section + .carte, body.dash-actif .titre-section + .ticket { margin-top: 4px; }
body.dash-actif .icone-bouton { color: inherit; }
body.dash-actif .supprimer { color: #FF8A7A; }
body.dash-actif a { color: #FFE58E; }
/* Dialogues, menus et messages : verre bleu en relief, opaque. */
body.dash-actif .dialogue { background: linear-gradient(170deg, #1C6F7E, #0F4553 50%, #0B3441); color: #F1F8F8; border: 1px solid rgba(255, 226, 122, .45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 8px 0 #072A33, 0 24px 40px rgba(0, 0, 0, .5); }
body.dash-actif .dialogue h2 { color: #FFE58E; }
body.dash-actif .dialogue pre { background: rgba(3, 30, 38, .55); color: #E2F7F8; }
body.dash-actif #toast { background: linear-gradient(180deg, #0C1A4A, #16309E); border: 1px solid rgba(255, 226, 122, .45); box-shadow: 0 5px 0 #071233, 0 12px 24px rgba(0, 0, 0, .4); }
body.dash-actif .carte-or.jauge-olympe, body.dash-actif .carte-or.jauge-tresor { padding-bottom: 14px; }