/* Le juste chiffre : le jeu (assets/juste-chiffre.js). Se charge après stoems.css et en reprend les couleurs.
   Un afficheur de chiffres comme dans les jeux télévisés, un grand curseur, une règle qui montre l'écart entre
   l'estimation et le vrai chiffre, un score à tamponner et à partager. */

/* Paliers d'une réponse : dans le mille, proche, approximative, loin */
.p-mille{--pc:var(--encre);--psur:var(--sur-encre)}
.p-proche{--pc:var(--lavande);--psur:var(--texte)}
.p-approx{--pc:var(--pate);--psur:var(--sur-pate)}
.p-loin{--pc:var(--rose);--psur:var(--sur-rose)}

.chiffre{max-width:34rem;width:100%;margin-top:.4rem;scroll-margin-top:.6rem}

/* Accueil */
.c-accueil{display:grid;gap:1.1rem;justify-items:start}
.c-defi{font-weight:700;background:var(--rose);color:var(--sur-rose);padding:.55rem .85rem;box-shadow:4px 4px 0 var(--encre);animation:pop .45s cubic-bezier(.3,1.6,.5,1) both}
.c-compteur{display:flex;gap:.45rem}
.c-compteur span{display:grid;place-items:center;width:3.3rem;height:4.2rem;font-family:var(--titre);font-size:2.6rem;line-height:1;color:var(--sur-encre);background:var(--encre);border-radius:6px;
  box-shadow:inset 0 -.35rem 0 rgba(0,0,0,.18),4px 4px 0 var(--rose);animation:roule 2.4s ease-in-out infinite}
.c-compteur span:nth-child(2){animation-delay:.15s}.c-compteur span:nth-child(3){animation-delay:.3s}.c-compteur span:nth-child(4){animation-delay:.45s}
@keyframes roule{0%,70%,100%{transform:none}80%{transform:translateY(-.4rem) rotate(-4deg)}90%{transform:translateY(.1rem)}}
.c-consigne{font-size:1.15rem;font-weight:700;max-width:32ch}
.c-jouer{font-family:var(--titre);font-weight:400;text-transform:uppercase;font-size:1.35rem;padding:.85rem 2.8rem}
@keyframes pop{from{transform:scale(.4);opacity:0}}

/* En jeu */
.c-jeu{display:grid;gap:.9rem}
.c-progres{display:flex;gap:4px;margin:0;padding:0;list-style:none}
.c-progres li{flex:1;height:.75rem;border-radius:99px;background:var(--filet)}
.c-progres li.en-cours{background:var(--discret)}
.c-progres li[class^="p-"]{background:var(--pc)}
.c-carte{display:grid;gap:.8rem;padding:1rem 1.25rem 1.2rem;background:var(--papier-2);border:3px solid var(--encre);box-shadow:6px 6px 0 var(--rose);min-width:0}
.c-carte > *{min-width:0}
.c-numero{font-family:var(--titre);font-size:.85rem;color:var(--discret)}
.c-question{font-weight:700;font-size:clamp(1.15rem,4.6vw,1.4rem);line-height:1.3;text-wrap:balance}
.c-affichage{justify-self:center;font-family:var(--titre);font-size:clamp(2.4rem,12vw,3.6rem);line-height:1.05;color:var(--encre);text-shadow:.05em .045em 0 var(--ombre);white-space:nowrap}
.c-affichage.long,.c-reponse b.long{font-size:clamp(1.6rem,7.4vw,2.6rem)}
.c-reglage{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.6rem}
.c-pas{display:grid;place-items:center;width:2.75rem;height:2.75rem;padding:0;font-family:var(--titre);font-size:1.5rem;line-height:1;color:var(--encre);background:var(--papier);border:3px solid var(--encre);border-radius:50%;cursor:pointer}
.c-pas:active:not(:disabled){transform:translateY(2px)}
.c-pas:disabled{opacity:.4;cursor:default}
.c-curseur{-webkit-appearance:none;appearance:none;width:100%;height:2.75rem;margin:0;background:transparent;cursor:pointer}
.c-curseur::-webkit-slider-runnable-track{height:.9rem;border-radius:99px;background:linear-gradient(to right,var(--encre) var(--rempli,50%),var(--filet) var(--rempli,50%))}
.c-curseur::-webkit-slider-thumb{-webkit-appearance:none;width:2.2rem;height:2.2rem;margin-top:-.65rem;border-radius:50%;background:var(--rose);border:4px solid var(--encre);box-shadow:0 3px 0 var(--encre)}
.c-curseur::-moz-range-track{height:.9rem;border-radius:99px;background:var(--filet)}
.c-curseur::-moz-range-progress{height:.9rem;border-radius:99px;background:var(--encre)}
.c-curseur::-moz-range-thumb{width:1.5rem;height:1.5rem;border-radius:50%;background:var(--rose);border:4px solid var(--encre)}
.c-curseur:disabled{cursor:default;opacity:.55}
.c-curseur:focus-visible{outline:3px solid var(--rose);outline-offset:4px}
.c-bornes{display:flex;justify-content:space-between;gap:1rem;margin-top:-.5rem;padding-inline:3.35rem;font-size:.8rem;font-weight:700;color:var(--discret)}
.c-valider,.c-suivant{justify-content:center;font-family:var(--titre);font-weight:400;text-transform:uppercase;font-size:1.2rem}

/* La réponse : une règle avec l'estimation et le vrai chiffre, le compteur qui défile, les points */
.c-revelation{display:grid;gap:.7rem;padding-top:.4rem;border-top:2px dashed var(--filet)}
.c-regle{position:relative;height:4.4rem;margin-inline:.4rem}
.c-regle::before{content:"";position:absolute;left:0;right:0;top:calc(50% - 3px);height:6px;border-radius:99px;background:var(--filet)}
.c-ecart{position:absolute;top:calc(50% - 3px);height:6px;left:var(--debut);width:calc(var(--fin) - var(--debut));border-radius:99px;background:var(--rose);animation:apparait .3s .85s both}
.c-marque{position:absolute;top:calc(50% - .75rem);left:var(--x);width:1.5rem;height:1.5rem;margin-left:-.75rem;border-radius:50%;border:3px solid var(--papier-2)}
.c-vous{--x:var(--vous);background:var(--rose)}
.c-reel{--x:var(--reel);background:var(--encre);animation:glisse .9s cubic-bezier(.2,.8,.3,1)}
.c-marque i{position:absolute;left:50%;transform:translateX(-50%);font-style:normal;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:var(--discret)}
.c-vous i{bottom:calc(100% + .2rem)}
.c-reel i{top:calc(100% + .2rem);color:var(--encre)}
@keyframes glisse{from{left:0}}
@keyframes apparait{from{opacity:0}}
.c-reponse{display:grid;justify-items:center;gap:.1rem}
.c-reponse span{font-size:.78rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--discret)}
.c-reponse b{font-family:var(--titre);font-weight:400;font-size:clamp(2.2rem,11vw,3.2rem);line-height:1.05;color:var(--encre);text-shadow:.05em .045em 0 var(--ombre);white-space:nowrap}
.c-points{justify-self:center;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:.2rem .5rem;padding:.3rem .9rem;border-radius:99px;
  font-family:var(--titre);font-size:1.2rem;background:var(--pc);color:var(--psur);animation:pop .4s .8s cubic-bezier(.3,1.6,.5,1) both}
.c-points small{font-family:var(--corps);font-weight:700;font-size:.85rem}
.c-contexte{font-size:.98rem;line-height:1.5}
.c-source{font-size:.84rem;line-height:1.45;color:var(--discret)}
.c-source a{overflow-wrap:anywhere}

/* Le score */
.c-fin{display:grid;gap:1rem;justify-items:start}
.c-fin > *{min-width:0;max-width:100%}
.c-score{margin:.5rem 0 .3rem .4rem}
.c-tampon{display:inline-flex;align-items:baseline;gap:.1em;font-family:var(--titre);font-size:clamp(3.6rem,19vw,6rem);line-height:1;color:var(--encre);background:var(--papier-2);
  border:6px solid var(--encre);padding:.12em .3em .1em;box-shadow:7px 7px 0 var(--rose);rotate:-6deg;animation:tampon .5s cubic-bezier(.3,1.5,.5,1) both}
.c-tampon small{font-size:.38em}
@keyframes tampon{from{transform:scale(2.4);opacity:0}}
.c-verdict{font-family:var(--titre);text-transform:uppercase;color:var(--encre);font-size:clamp(1.15rem,5vw,1.5rem);line-height:1.2;max-width:26ch;text-wrap:balance}
.c-grille{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;width:100%;max-width:26rem;margin:0;padding:0;list-style:none}
.c-grille li{aspect-ratio:1;display:grid;place-items:center;border-radius:4px;font-family:var(--titre);font-size:clamp(.8rem,3.6vw,1.05rem);background:var(--pc);color:var(--psur);animation:retourne .45s both}
.c-grille li:nth-child(2){animation-delay:.08s}.c-grille li:nth-child(3){animation-delay:.16s}.c-grille li:nth-child(4){animation-delay:.24s}
.c-grille li:nth-child(5){animation-delay:.32s}.c-grille li:nth-child(6){animation-delay:.4s}.c-grille li:nth-child(7){animation-delay:.48s}.c-grille li:nth-child(8){animation-delay:.56s}
@keyframes retourne{from{transform:rotateX(90deg)}}
.c-duel{font-weight:700;background:var(--rose);color:var(--sur-rose);padding:.4rem .8rem}
.c-boutons{display:flex;flex-wrap:wrap;gap:.8rem}
.c-boutons .choix{text-decoration:none;display:inline-flex;align-items:center}
.c-etat{font-size:.92rem;color:var(--discret);white-space:pre-line;overflow-wrap:anywhere}
.c-etat:empty{display:none}
.c-image{display:grid;gap:.8rem;justify-items:start}
.c-image img{width:min(15rem,100%);height:auto;border:3px solid var(--encre);box-shadow:5px 5px 0 var(--rose)}
.c-recap-titre{font-family:var(--titre);font-weight:400;text-transform:uppercase;color:var(--encre);font-size:1.3rem;margin-top:.8rem}
.c-recap{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;width:100%}
.c-recap li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.8rem;align-items:start;padding:.7rem .85rem;background:var(--papier-2);border:2px solid var(--encre);border-left:9px solid var(--pc)}
.c-recap li > div{display:grid;gap:.25rem;min-width:0}
.c-recap-pastille{font-size:1.4rem;line-height:1.2}
.c-recap p{font-size:.95rem;line-height:1.4}
.c-recap .c-source{font-size:.82rem}
.c-suite{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;font-weight:700}