/* ============================================================================
   LE QUIZ D'EXEMPLE -- refonte du 04/10/2026 (demande client : "un truc qui claque").
   ----------------------------------------------------------------------------
   TOUT EST EN CSS. Aucune librairie, aucun canvas, aucune particule creee a la
   volee : cette page est une vitrine referencee, elle ne doit pas s'alourdir de
   300 Ko pour trois secondes de fete. Le JS n'ORCHESTRE que des classes.

   LES QUATRE MOMENTS que l'ecran doit porter, et ou ils vivent ici :
     1. le fond vivant ........ .eqz-fond / .eqz-halo / .eqz-grille
     2. l'entree en scene ..... .eqz-q.active + cascade --i sur les reponses
     3. le moment de reponse .. .eqz-rep.juste / .faux, .eqz-explic
     4. le score final ........ .eqz-anneau, .eqz-confettis, .eqz-score-chiffre

   ATTENTION -- COULEURS : jamais en dur. Tout vient des variables de equiquiz.css
   (--primary, --primary-rgb, --ink, --slate-*, --or, --corail, --rond).

   ATTENTION -- prefers-reduced-motion : TOUT s'arrete en bas de ce fichier. Ce n'est pas
   une option -- un decor qui bouge sans arret peut donner la nausee, et la page
   doit rester entierement jouable sans la moindre animation.
   ========================================================================= */

/* ----------------------------------------------------------------- la scene */
.eqz-demo{
  position:relative;          /* ancre les halos, qui sont en absolute */
  overflow:hidden;            /* ils debordent volontairement : on les coupe ici */
  isolation:isolate;          /* un nouveau contexte d'empilement : le fond reste dessous */
  max-width:52rem;margin:0 auto;padding:3.2rem 1.25rem 3.6rem;
  border-radius:2rem;
}

/* LE FOND VIVANT. Trois halos flous qui derivent lentement, plus une trame de
   points tres discrete. Le tout est purement decoratif : aria-hidden cote HTML,
   pointer-events:none ici -- il ne doit jamais intercepter un clic. */
.eqz-fond{position:absolute;inset:0;pointer-events:none;z-index:0;}
.eqz-halo{
  position:absolute;border-radius:50%;
  filter:blur(70px);opacity:.42;
  will-change:transform;      /* la derive est une transform : on le dit au navigateur */
}
.eqz-halo-1{width:26rem;height:26rem;top:-8rem;left:-6rem;
  background:radial-gradient(circle,rgba(var(--primary-rgb),.55),transparent 70%);
  animation:eqzDerive 19s ease-in-out infinite;}
.eqz-halo-2{width:20rem;height:20rem;bottom:-7rem;right:-5rem;
  background:radial-gradient(circle,rgba(var(--primary-rgb),.40),transparent 70%);
  animation:eqzDerive 23s ease-in-out infinite reverse;animation-delay:-6s;}
.eqz-halo-3{width:15rem;height:15rem;top:38%;left:58%;
  background:radial-gradient(circle,rgba(var(--primary-rgb),.26),transparent 70%);
  animation:eqzDerive 27s ease-in-out infinite;animation-delay:-12s;}
@keyframes eqzDerive{
  0%,100%{transform:translate3d(0,0,0) scale(1);}
  33%    {transform:translate3d(2.5rem,-1.8rem,0) scale(1.09);}
  66%    {transform:translate3d(-1.6rem,2.2rem,0) scale(.95);}
}

/* La trame : des points, en degrade de masque pour qu'elle s'efface sur les
   bords plutot que de s'arreter net. */
.eqz-grille{
  position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(var(--primary-rgb),.16) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 42%,#000 10%,transparent 72%);
          mask-image:radial-gradient(ellipse at 50% 42%,#000 10%,transparent 72%);
}

/* Tout le contenu passe AU-DESSUS du fond. */
.eqz-demo > *:not(.eqz-fond){position:relative;z-index:1;}

/* ------------------------------------------------------------------ l'entete */
.eqz-demo-tete{text-align:center;max-width:40rem;margin:0 auto 2.2rem;}

.eqz-demo-kick{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.74rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--primary-dark);
  background:rgba(var(--primary-rgb),.10);
  border:1px solid rgba(var(--primary-rgb),.22);
  padding:.4rem .95rem;border-radius:999px;margin-bottom:1rem;
}
/* Le point qui bat : il dit "c'est vivant, ca se joue maintenant". */
.eqz-kick-point{
  width:.45rem;height:.45rem;border-radius:50%;background:var(--primary);
  box-shadow:0 0 0 0 rgba(var(--primary-rgb),.65);
  animation:eqzBat 2s ease-out infinite;
}
@keyframes eqzBat{
  0%  {box-shadow:0 0 0 0 rgba(var(--primary-rgb),.6);}
  70% {box-shadow:0 0 0 .55rem rgba(var(--primary-rgb),0);}
  100%{box-shadow:0 0 0 0 rgba(var(--primary-rgb),0);}
}

.eqz-demo h2{font-size:clamp(1.8rem,4.2vw,2.6rem);line-height:1.12;margin:0 0 .75rem;}
/* Le soulignement n'est pas un trait : il se DESSINE au chargement, de gauche a
   droite. C'est la premiere chose qui bouge, et elle attire l'oeil sur le titre. */
.eqz-titre-fort{position:relative;white-space:nowrap;color:var(--primary-dark);}
.eqz-titre-fort::after{
  content:'';position:absolute;left:0;right:0;bottom:-.12em;height:.22em;
  border-radius:999px;
  background:linear-gradient(90deg,var(--primary),var(--primary-light,var(--primary)));
  transform:scaleX(0);transform-origin:left;
  animation:eqzTrait .9s .35s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes eqzTrait{to{transform:scaleX(1);}}

.eqz-demo-sous{color:var(--ink-2,#475569);font-size:1.02rem;line-height:1.6;margin:0;}

/* -------------------------------------------------------------- la progression */
.eqz-progres{max-width:34rem;margin:0 auto 2rem;}

/* LES PASTILLES disent d'un coup d'oeil combien de questions, ou l'on en est, et
   ce qu'on a repondu. Une barre pleine ne dit aucun des trois. */
.eqz-plots{display:flex;gap:.4rem;justify-content:center;list-style:none;margin:0 0 .85rem;padding:0;}
.eqz-plot{
  width:1.6rem;height:.32rem;border-radius:999px;
  background:var(--slate-200,#e2e8f0);
  transition:background .35s ease,transform .35s cubic-bezier(.34,1.56,.64,1);
}
.eqz-plot.en-cours{background:var(--primary);transform:scaleY(2.1);}
.eqz-plot.juste   {background:var(--primary);}
.eqz-plot.faux    {background:var(--corail,#fb7185);}

.eqz-demo-barre{height:.28rem;border-radius:999px;background:var(--slate-200,#e2e8f0);overflow:hidden;}
.eqz-demo-barre span{
  display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--primary),var(--primary-dark));
  transition:width .55s cubic-bezier(.22,1,.36,1);
  position:relative;
}
/* Le reflet qui court sur la barre : il donne l'impression que ca avance meme
   quand la largeur ne change pas. */
.eqz-demo-barre span::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:eqzReflet 2.1s linear infinite;
}
@keyframes eqzReflet{from{transform:translateX(-100%);}to{transform:translateX(220%);}}

.eqz-demo-compteur{text-align:center;font-size:.86rem;color:var(--ink-3,#64748b);margin:.7rem 0 0;}
.eqz-demo-compteur b{color:var(--primary-dark);font-size:1rem;}

/* ------------------------------------------------------------- les questions */
.eqz-demo-liste{list-style:none;margin:0;padding:0;}

.eqz-q{
  background:#fff;
  border:1px solid var(--slate-200,#e2e8f0);
  border-radius:1.5rem;
  padding:1.9rem 1.5rem;
  margin-bottom:1.1rem;
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 12px 32px -18px rgba(15,23,42,.22);
}

/* EN MODE JEU, une seule question est montee a la fois. Sans JS, la classe
   `eqz-jeu` n'est jamais posee et les neuf restent lisibles a la suite : la page
   garde tout son contenu, c'est le principe de ce bloc (voir demo.js). */
.eqz-demo.eqz-jeu .eqz-q{display:none;}
.eqz-demo.eqz-jeu .eqz-q.active{
  display:block;
  animation:eqzEntree .55s cubic-bezier(.22,1,.36,1) both;
}
@keyframes eqzEntree{
  from{opacity:0;transform:translateY(1.6rem) scale(.97);}
  to  {opacity:1;transform:none;}
}

.eqz-q-tags{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 .9rem;}
.eqz-tag{
  font-size:.72rem;font-weight:600;padding:.26rem .7rem;border-radius:999px;
  background:var(--slate-100,#f1f5f9);color:var(--ink-3,#64748b);
}
.eqz-tag-niv{background:rgba(var(--primary-rgb),.12);color:var(--primary-dark);}

.eqz-q-titre{font-size:1.22rem;line-height:1.4;margin:0 0 1.3rem;color:var(--ink,#0f172a);}
.eqz-q-titre:focus-visible{outline:3px solid rgba(var(--primary-rgb),.45);outline-offset:4px;border-radius:.5rem;}

/* ---------------------------------------------------------------- les reponses */
.eqz-reps{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;}

/* LA CASCADE. Chaque reponse entre apres la precedente (--i porte son rang).
   On ne l'applique qu'en mode jeu : hors JS, rien ne doit retarder la lecture. */
.eqz-demo.eqz-jeu .eqz-q.active .eqz-reps > li{
  animation:eqzEntree .45s cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(.12s + var(--i) * .07s);
}

.eqz-rep{
  position:relative;overflow:hidden;
  width:100%;min-height:3.25rem;          /* >= 44px : cible tactile (design system) */
  display:flex;align-items:center;gap:.85rem;
  text-align:left;padding:.85rem 1rem;
  background:#fff;border:1.5px solid var(--slate-200,#e2e8f0);
  border-radius:1rem;cursor:pointer;font:inherit;color:var(--ink,#0f172a);
  transition:border-color .2s ease,box-shadow .25s ease,transform .18s ease,background .2s ease;
}
.eqz-rep:hover{
  border-color:rgba(var(--primary-rgb),.5);
  background:rgba(var(--primary-rgb),.04);
  transform:translateY(-2px);
  box-shadow:0 10px 22px -14px rgba(var(--primary-rgb),.75);
}
.eqz-rep:focus-visible{outline:3px solid rgba(var(--primary-rgb),.45);outline-offset:3px;}

/* L'onde partant du clic. Elle demarre a l'instant ou l'on repond : c'est le
   retour le plus immediat, avant meme la couleur. */
.eqz-rep::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle at var(--x,50%) var(--y,50%),rgba(var(--primary-rgb),.30),transparent 60%);
  opacity:0;transition:opacity .45s ease;
}
.eqz-q.repondu .eqz-rep::before{opacity:1;}

.eqz-lettre{
  flex:0 0 auto;width:2rem;height:2rem;border-radius:.7rem;
  display:grid;place-items:center;font-weight:700;font-size:.9rem;
  background:var(--slate-100,#f1f5f9);color:var(--ink-3,#64748b);
  transition:background .25s ease,color .25s ease,transform .3s cubic-bezier(.34,1.56,.64,1);
}
.eqz-rep:hover .eqz-lettre{background:rgba(var(--primary-rgb),.14);color:var(--primary-dark);}
.eqz-rep-tx{flex:1;}

/* La marque juste/faux : un rond qui apparait a droite, en rebond. */
.eqz-rep-marque{
  flex:0 0 auto;width:1.5rem;height:1.5rem;border-radius:50%;
  display:grid;place-items:center;font-size:.8rem;font-weight:700;color:#fff;
  transform:scale(0);transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}

/* --------------------------------------------------- le moment de la reponse */
.eqz-q.repondu .eqz-rep{cursor:default;transform:none;box-shadow:none;}
.eqz-q.repondu .eqz-rep:not(.juste):not(.faux){opacity:.5;}

.eqz-rep.juste{
  border-color:var(--primary);background:rgba(var(--primary-rgb),.08);
  animation:eqzJuste .6s cubic-bezier(.34,1.56,.64,1);
}
.eqz-rep.juste .eqz-lettre{background:var(--primary);color:#fff;transform:rotate(-8deg) scale(1.08);}
.eqz-rep.juste .eqz-rep-marque{background:var(--primary);transform:scale(1);}
.eqz-rep.juste .eqz-rep-marque::after{content:'\2713';}   /* coche */
@keyframes eqzJuste{
  0%{transform:scale(1);}  45%{transform:scale(1.035);}  100%{transform:scale(1);}
}

.eqz-rep.faux{
  border-color:var(--corail,#fb7185);background:rgba(251,113,133,.07);
  animation:eqzFaux .42s ease;
}
.eqz-rep.faux .eqz-lettre{background:var(--corail,#fb7185);color:#fff;}
.eqz-rep.faux .eqz-rep-marque{background:var(--corail,#fb7185);transform:scale(1);}
.eqz-rep.faux .eqz-rep-marque::after{content:'\2715';}    /* croix */
/* Le tremblement : court, et sur une faible amplitude. Il dit "non" sans punir. */
@keyframes eqzFaux{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-.4rem);}  40%{transform:translateX(.35rem);}
  60%{transform:translateX(-.2rem);}  80%{transform:translateX(.12rem);}
}

/* L'explication se DEPLIE : hauteur et opacite. On ne la masque pas en display:none,
   sinon elle serait absente du document pour qui lit la page sans JS. */
.eqz-explic{
  display:grid;grid-template-rows:0fr;opacity:0;
  margin:0;padding:0 1.05rem;
  border-radius:1rem;background:var(--primary-50,#ecfdf5);
  border:1px solid rgba(var(--primary-rgb),.18);
  transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1),opacity .35s ease .1s,
             padding .45s cubic-bezier(.22,1,.36,1),margin .45s cubic-bezier(.22,1,.36,1);
}
.eqz-explic > *{overflow:hidden;min-height:0;}
.eqz-q.repondu .eqz-explic{
  grid-template-rows:1fr;opacity:1;margin:1.1rem 0 0;padding:1.05rem;
}
.eqz-explic-tete{display:block;color:var(--primary-dark);margin-bottom:.35rem;}
.eqz-explic span{color:var(--ink-2,#475569);font-size:.95rem;line-height:1.6;}

.eqz-suivant{
  margin-top:1.2rem;min-height:3rem;
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.8rem 1.5rem;border:0;border-radius:999px;cursor:pointer;
  font:inherit;font-weight:650;color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  box-shadow:0 10px 26px -12px rgba(var(--primary-rgb),.9);
  transition:transform .2s ease,box-shadow .25s ease;
  animation:eqzEntree .4s .15s cubic-bezier(.22,1,.36,1) both;
}
.eqz-suivant:hover{transform:translateY(-2px);box-shadow:0 16px 32px -14px rgba(var(--primary-rgb),1);}
.eqz-suivant:focus-visible{outline:3px solid rgba(var(--primary-rgb),.45);outline-offset:3px;}
.eqz-suivant i{transition:transform .25s ease;}
.eqz-suivant:hover i{transform:translateX(.3rem);}

/* ------------------------------------------------------------ l'ecran de score */
.eqz-score{
  position:relative;text-align:center;
  max-width:34rem;margin:0 auto;padding:2.6rem 1.5rem 2.2rem;
  background:linear-gradient(165deg,#fff,var(--primary-50,#ecfdf5));
  border:1px solid rgba(var(--primary-rgb),.22);
  border-radius:1.75rem;
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 24px 56px -28px rgba(var(--primary-rgb),.6);
  animation:eqzEntree .6s cubic-bezier(.22,1,.36,1) both;
}

/* L'ANNEAU. On tourne de -90deg pour partir du HAUT : un anneau qui se remplit
   depuis la droite se lit mal. `stroke-dashoffset` est pose par demo.js. */
.eqz-anneau{position:relative;width:9rem;height:9rem;margin:0 auto 1.1rem;}
.eqz-anneau svg{width:100%;height:100%;transform:rotate(-90deg);}
.eqz-anneau circle{fill:none;stroke-width:9;stroke-linecap:round;}
.eqz-anneau-fond{stroke:rgba(var(--primary-rgb),.14);}
.eqz-anneau-jauge{
  stroke:url(#eqzGrad);stroke:var(--primary);
  transition:stroke-dashoffset 1.25s cubic-bezier(.22,1,.36,1) .25s;
}
.eqz-score-chiffre{
  position:absolute;inset:0;display:grid;place-content:center;gap:0;margin:0;
  font-variant-numeric:tabular-nums;   /* le chiffre ne doit pas sautiller en montant */
}
.eqz-score-chiffre b{font-size:2.9rem;line-height:1;color:var(--primary-dark);}
.eqz-score-sur{font-size:.95rem;color:var(--ink-3,#64748b);}

.eqz-score-mot{font-size:1.3rem;font-weight:700;color:var(--ink,#0f172a);margin:0 0 .6rem;}
.eqz-score-sous{color:var(--ink-2,#475569);line-height:1.6;margin:0 0 1.6rem;}
.eqz-score-actions{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin:0;}

/* Le bouton d'inscription respire doucement : c'est la seule action qu'on veut
   voir prise, et elle arrive au moment ou le visiteur est content de son score. */
.eqz-cta{animation:eqzRespire 2.8s ease-in-out infinite;}
@keyframes eqzRespire{
  0%,100%{box-shadow:0 10px 26px -12px rgba(var(--primary-rgb),.9);}
  50%    {box-shadow:0 14px 34px -10px rgba(var(--primary-rgb),1);}
}

/* ------------------------------------------------------------- les confettis */
/* Des spans DEJA dans la page, immobiles. La classe `.fete` les lache. Ils
   tombent une fois (forwards) et ne reviennent pas : une fete qui ne s'arrete
   pas devient un decor, et un decor ne fete rien. */
.eqz-confettis{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;}
.eqz-confettis span{
  position:absolute;top:-8%;
  width:.55rem;height:.85rem;border-radius:.12rem;opacity:0;
  left:calc(var(--i) * 4.17%);
}
.eqz-confettis span:nth-child(3n)  {background:var(--primary);}
.eqz-confettis span:nth-child(3n+1){background:var(--or,#fbbf24);}
.eqz-confettis span:nth-child(3n+2){background:var(--corail,#fb7185);}
.eqz-score.fete .eqz-confettis span{
  animation:eqzConfetti 2.4s cubic-bezier(.3,.6,.5,1) forwards;
  animation-delay:calc(var(--i) * .045s);
}
@keyframes eqzConfetti{
  0%  {opacity:0;transform:translate3d(0,0,0) rotate(0);}
  12% {opacity:1;}
  100%{opacity:0;transform:translate3d(calc(var(--i) * .22rem - 2.4rem),26rem,0) rotate(540deg);}
}

/* ------------------------------------------------------------------- mobile */
@media (max-width:640px){
  .eqz-demo{padding:2.4rem .9rem 2.8rem;border-radius:1.5rem;}
  .eqz-q{padding:1.5rem 1.15rem;border-radius:1.25rem;}
  .eqz-anneau{width:7.5rem;height:7.5rem;}
  .eqz-score-chiffre b{font-size:2.4rem;}
  .eqz-plot{width:1.1rem;}
  .eqz-score-actions .btn{width:100%;justify-content:center;}
}

/* ==========================================================================
   MOUVEMENT REDUIT -- obligatoire, et ce n'est pas une preference d'affichage.
   Un decor qui derive en continu peut provoquer un malaise. Tout s'arrete :
   halos, reflet, confettis, cascades. L'ecran reste ENTIEREMENT jouable, et
   les etats (juste, faux, explication depliee) restent visibles -- ils portent
   l'information, pas la decoration.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .eqz-halo,.eqz-kick-point,.eqz-demo-barre span::after,
  .eqz-cta,.eqz-confettis span,.eqz-score.fete .eqz-confettis span{animation:none !important;}
  .eqz-titre-fort::after{animation:none;transform:scaleX(1);}
  .eqz-demo.eqz-jeu .eqz-q.active,
  .eqz-demo.eqz-jeu .eqz-q.active .eqz-reps > li,
  .eqz-suivant,.eqz-score{animation:none !important;}
  .eqz-rep.juste,.eqz-rep.faux{animation:none !important;}
  .eqz-confettis{display:none;}
  .eqz-plot,.eqz-demo-barre span,.eqz-rep,.eqz-lettre,.eqz-rep-marque,
  .eqz-explic,.eqz-anneau-jauge{transition:none !important;}
  .eqz-rep-marque{transform:scale(1);}
}