/* Signaux : la page d'accueil (rejoindre une partie, le jeu en 3 temps, l'essai d'une probabilité) et les pages simples. */
.a-tete { display: flex; justify-content: space-between; align-items: center; max-width: 980px; margin: 0 auto; padding: 18px 20px; }
.a-tete .marque { font-size: 22px; }
.accueil { max-width: 980px; margin: 0 auto; padding: 8px 20px 60px; display: grid; gap: 22px; }
.accueil section { background: var(--carte); border: 1px solid var(--trait); border-radius: 16px; padding: 22px 24px; box-shadow: var(--ombre); display: grid; gap: 12px; }
.a-rejoindre h1 { font-size: 28px; }
.f-code { display: grid; gap: 8px; }
.f-code label { color: var(--doux); font-weight: 700; }
.f-code div { display: flex; gap: 10px; flex-wrap: wrap; }
.f-code input { width: 180px; font-size: 32px; letter-spacing: .25em; text-transform: uppercase; padding: 8px 12px; border: 2px solid var(--trait2); border-radius: 12px; background: var(--carte2); font-family: var(--f-titre); }
.surtitre { color: var(--signal); font-weight: 700; font-size: 14.5px; }
.a-jeu h2 { font-size: 26px; line-height: 1.2; max-width: 30em; }
.temps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 4px; }
.temps li { background: var(--carte2); border-radius: 12px; padding: 14px 16px; display: grid; gap: 6px; align-content: start; }
.temps b { font-family: var(--f-titre); font-size: 19px; color: var(--encre); }
.t-num { width: 32px; height: 32px; border-radius: 50%; background: var(--signal-vif); color: #fff; font-weight: 800; display: grid; place-items: center; font-family: var(--f-titre); }
.temps li:last-child .t-num { background: var(--encre); color: var(--carte); }
.a-essai h2, .a-retenir h2 { font-size: 21px; }
.curseur { display: grid; gap: 8px; font-weight: 700; max-width: 520px; }
.curseur b { font-family: var(--f-titre); font-size: 22px; color: var(--signal); }
.curseur input { width: 100%; accent-color: var(--signal-vif); }
.jauges { display: grid; gap: 8px; max-width: 620px; }
.jauge { display: grid; grid-template-columns: 9.5em 1fr 4.5em; gap: 12px; align-items: center; }
.j-lib { font-weight: 700; }
.j-barre { height: 14px; border-radius: 99px; background: var(--carte2); overflow: hidden; }
.j-barre .barre { display: block; height: 100%; width: var(--w, 0%); border-radius: 99px; background: var(--ok); transition: width .2s; }
.jauge.non .barre { background: var(--h0); }
.jauge b { font-family: var(--f-titre); font-size: 20px; text-align: right; }
.jauge small { font-family: var(--f-texte); font-weight: 400; font-size: 13px; color: var(--doux); }
.aide { color: var(--doux); font-size: 14.5px; }
.a-retenir ul { padding-left: 20px; display: grid; gap: 6px; }
@media (max-width: 760px) { .temps { grid-template-columns: 1fr; } .jauge { grid-template-columns: 7.5em 1fr 4em; } .a-jeu h2 { font-size: 22px; } }