/* La lasagne belge : le jeu (assets/lasagne.js). Se charge après stoems.css et en reprend les couleurs.
   Cinq couches comme des feuilles de pâte aux bords ondulés, une carte qui plonge dans la couche choisie,
   une réponse qui monte du bas de l'écran, un score à tamponner et à partager. */

/* Les cinq couches : bleu, rose, lavande, pâte, nuit (teintes définies dans stoems.css) */
.c-europe{--c:var(--encre);--sur:var(--sur-encre)}
.c-federal{--c:var(--rose);--sur:var(--sur-rose)}
.c-communaute{--c:var(--lavande);--sur:var(--texte)}
.c-region{--c:var(--pate);--sur:var(--sur-pate)}
.c-commune{--c:var(--texte);--sur:var(--papier)}
.c-europe,.c-federal,.c-communaute,.c-region,.c-commune{--bord:rgba(0,0,0,.28)}
@supports (color:color-mix(in srgb,red,blue)){.c-europe,.c-federal,.c-communaute,.c-region,.c-commune{--bord:color-mix(in srgb,var(--c) 68%,#000)}}

/* Une couche : bord ondulé en haut, épaisseur en bas (comme un gros bouton qu'on enfonce) */
.l-etage,.l-couche{position:relative;background:var(--c);color:var(--sur);border-radius:0 0 12px 12px/0 0 8px 8px;box-shadow:0 4px 0 var(--bord)}
.l-etage::before,.l-couche::before{content:"";position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:6px;
  background:radial-gradient(circle at 8px 8px,var(--c) 7px,transparent 7.5px) 0 0/16px 6px repeat-x}

/* Ouverture de la page */
.jeu-ouverture{padding-block:.6rem clamp(2.5rem,7vw,4rem)}
.jeu-ouverture .cadre{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr)}
.jeu-ouverture h1{font-size:clamp(2.2rem,10.5vw,4.6rem);line-height:1}
.jeu-ouverture .chapo{color:var(--texte);max-width:44ch}
.lasagne{max-width:36rem;width:100%;margin-top:.4rem;scroll-margin-top:.6rem}
.lasagne.l-ouverte{padding-bottom:17rem}

/* Accueil : la lasagne s'empile, puis le bouton Jouer */
.l-accueil{display:grid;gap:1.6rem;align-items:center}
@media (min-width:700px){.lasagne{max-width:52rem}.l-accueil{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.l-plat{display:grid;gap:9px;padding-top:7px;max-width:21rem;rotate:-2deg}
.l-etage{display:block;padding:.4rem .9rem .45rem;font-family:var(--titre);text-transform:uppercase;font-size:1rem;line-height:1.2;animation:empile .55s cubic-bezier(.3,1.45,.5,1) both}
.l-etage:nth-child(odd){margin-right:.8rem}
.l-etage:nth-child(even){margin-left:.8rem}
.l-etage:nth-child(1){animation-delay:.05s}.l-etage:nth-child(2){animation-delay:.17s}.l-etage:nth-child(3){animation-delay:.29s}
.l-etage:nth-child(4){animation-delay:.41s}.l-etage:nth-child(5){animation-delay:.53s}
@keyframes empile{from{transform:translateY(-140%) rotate(-4deg);opacity:0}}
.l-intro{display:grid;gap:.9rem;justify-items:start}
.l-consigne{font-size:1.15rem;font-weight:700;max-width:30ch}
.l-jouer{font-family:var(--titre);font-weight:400;text-transform:uppercase;font-size:1.35rem;padding:.85rem 2.8rem;animation:appel .6s 1.1s both}
@keyframes appel{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:none}}

/* En jeu : progression, carte, couches */
.l-jeu{display:grid;gap:.8rem;max-width:34rem;margin-inline:auto}
.lasagne:has(.l-jeu){max-width:none}
.l-tete{display:flex;align-items:center;gap:.7rem;min-height:1.9rem}
.l-progres{flex:1;display:flex;gap:4px;margin:0;padding:0;list-style:none}
.l-progres li{flex:1;height:.75rem;border-radius:99px;background:var(--filet);transition:background-color .25s}
.l-progres li.en-cours{background:var(--discret)}
.l-progres li.juste{background:var(--encre);box-shadow:inset 0 3px 0 rgba(255,255,255,.28)}
.l-progres li.rate{background:var(--rose);background-image:repeating-linear-gradient(-45deg,transparent 0 3px,rgba(255,255,255,.45) 3px 5px)}
.l-serie{margin:0;flex:none;font-weight:700;font-size:.85rem;line-height:1.5;color:var(--sur-rose);background:var(--rose);padding:0 .55rem;border-radius:99px;white-space:nowrap}
.l-serie.arrive{animation:pop .4s cubic-bezier(.3,1.7,.5,1)}
@keyframes pop{from{transform:scale(.3);opacity:0}}

/* La pile : la carte du dessus et deux autres en dessous, de travers */
.l-pile{position:relative;z-index:2;display:grid;padding:.5rem .4rem .3rem}
.l-pile::before,.l-pile::after{content:"";position:absolute;inset:.5rem .4rem .3rem;border:3px solid var(--encre);background:var(--papier-2)}
.l-pile::before{rotate:3deg;opacity:.55}
.l-pile::after{rotate:-3.5deg;translate:3px 4px;opacity:.8}
.l-carte{position:relative;z-index:1;display:grid;justify-items:center;align-content:center;gap:.4rem;min-height:11.5rem;padding:1rem 1.2rem 1.1rem;
  text-align:center;background:var(--papier-2);border:3px solid var(--encre);box-shadow:6px 6px 0 var(--rose);rotate:-1.2deg;outline:none}
.l-carte.arrive{animation:donne .45s cubic-bezier(.2,.9,.3,1.15)}
@keyframes donne{from{transform:translate(55%,-8%) rotate(16deg);opacity:0}}
.l-carte.vole{transition:transform .38s cubic-bezier(.55,0,.8,.3),opacity .38s ease-in;transform:translate(var(--dx,0),var(--dy,0)) rotate(12deg) scale(.22);opacity:0}
.l-carte.posee{animation:revient .3s ease-out}
@keyframes revient{from{opacity:0;transform:scale(.9)}}
.l-cachet{position:absolute;right:-.5rem;bottom:-.8rem;max-width:calc(100% - 1rem);rotate:-6deg;font-family:var(--titre);text-transform:uppercase;font-size:1.05rem;line-height:1.1;
  padding:.35rem .75rem .4rem;background:var(--c);color:var(--sur);box-shadow:0 4px 0 var(--bord);animation:cachet .4s .12s cubic-bezier(.3,1.6,.5,1) both}
@keyframes cachet{from{transform:scale(2.4);opacity:0}}
.l-numero{position:absolute;top:.45rem;left:.7rem;font-family:var(--titre);font-size:.85rem;color:var(--discret)}
.l-emoji{font-size:2.9rem;line-height:1.1}
.l-texte{font-family:var(--titre);text-transform:uppercase;color:var(--encre);font-size:clamp(1.2rem,5.4vw,1.6rem);line-height:1.18;text-wrap:balance;max-width:22ch}
.l-question{display:inline-block;margin-top:.15rem;font-weight:700;font-size:.8rem;letter-spacing:.07em;text-transform:uppercase;background:var(--rose);color:var(--sur-rose);padding:.1rem .5rem}

.l-couches{display:grid;gap:10px;margin-top:.5rem;padding-top:6px}
.l-couche{display:grid;grid-template-columns:auto minmax(0,1fr) 1.7rem;align-items:center;gap:.75rem;width:100%;min-height:3.35rem;
  padding:.35rem .8rem .4rem .7rem;font:inherit;text-align:left;border:0;cursor:pointer;
  transition:translate .1s,box-shadow .1s,opacity .25s;-webkit-tap-highlight-color:transparent}
.l-couche:nth-child(odd){rotate:-.45deg}
.l-couche:nth-child(even){rotate:.35deg}
.l-couche:hover:not(:disabled){translate:0 -2px;box-shadow:0 6px 0 var(--bord)}
.l-couche:active:not(:disabled){translate:0 3px;box-shadow:0 1px 0 var(--bord)}
.l-couche kbd{display:grid;place-items:center;width:1.75rem;height:1.75rem;border:2px solid currentColor;border-radius:50%;font-family:var(--titre);font-size:.8rem;line-height:1}
.l-couche span{display:grid;line-height:1.15;min-width:0}
.l-couche b{font-family:var(--titre);font-weight:400;text-transform:uppercase;font-size:1.1rem;letter-spacing:.01em}
.l-couche small{font-size:.78rem;font-weight:700;opacity:.9}
.l-couche i{font-style:normal;font-family:var(--titre);font-size:1.35rem;text-align:center}
.l-couche.bonne i::after{content:"✓"}
.l-couche.rate i::after{content:"✗"}
.l-fige .l-couche{cursor:default}
.l-fige .l-couche:not(.bonne):not(.choisie){opacity:.3}
.l-couche.bonne{outline:3px solid var(--texte);outline-offset:3px}
.l-couche.choisie{animation:plonge .4s ease-out}
.l-couche.rate{animation:secoue .45s ease-out}
@keyframes plonge{30%{scale:1.03 .82}65%{scale:.99 1.06}}
@keyframes secoue{20%{translate:-8px 0}40%{translate:7px 0}60%{translate:-4px 0}80%{translate:2px 0}}
.l-touches{display:none;font-size:.85rem;color:var(--discret)}
@media (hover:hover) and (pointer:fine){.l-touches{display:block}}

/* La réponse monte du bas de l'écran */
.l-feuille{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--f);color:var(--sur-f);box-shadow:0 -5px 0 var(--bord-f);
  padding-bottom:env(safe-area-inset-bottom,0px)}
.l-feuille.juste{--f:var(--encre);--sur-f:var(--sur-encre);--bord-f:var(--rose)}
.l-feuille.rate{--f:var(--rose);--sur-f:var(--sur-rose);--bord-f:var(--encre)}
.l-feuille.arrive{animation:monte .32s cubic-bezier(.2,.9,.3,1.1)}
@keyframes monte{from{transform:translateY(100%)}}
.l-feuille-dedans{max-width:34rem;margin:0 auto;display:grid;gap:.45rem;padding-block:.9rem 1rem;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.l-retour{display:flex;align-items:center;gap:.6rem;font-family:var(--titre);text-transform:uppercase;font-size:1.45rem;line-height:1.1}
.l-retour span{display:grid;place-items:center;flex:none;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--sur-f);color:var(--f);font-size:1.15rem}
.l-bonne{font-weight:700}
.l-explication{font-size:.98rem;line-height:1.45}
.l-feuille .l-source{font-size:.84rem;line-height:1.4}
.l-feuille a{color:inherit;overflow-wrap:anywhere}
.l-feuille :focus-visible{outline-color:var(--sur-f)}
.l-feuille .bouton{justify-content:center;margin-top:.35rem;font-family:var(--titre);font-weight:400;text-transform:uppercase;font-size:1.15rem;
  background:var(--sur-f);color:var(--f);box-shadow:0 4px 0 rgba(0,0,0,.3)}
.l-feuille .bouton:hover{transform:translateY(-2px);box-shadow:0 6px 0 rgba(0,0,0,.3)}
.l-feuille .bouton:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.3)}

/* Le score : un tampon, une grille de carrés, le partage */
.l-fin{display:grid;gap:1rem;justify-items:start}
.l-fin > *{min-width:0;max-width:100%}
.l-score{margin:.5rem 0 .3rem .4rem}
.l-tampon{display:inline-block;font-family:var(--titre);font-size:clamp(3.3rem,17vw,5.5rem);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}
@keyframes tampon{from{transform:scale(2.4);opacity:0}}
.l-verdict{font-family:var(--titre);text-transform:uppercase;color:var(--encre);font-size:clamp(1.2rem,5.2vw,1.6rem);line-height:1.2;max-width:24ch;text-wrap:balance}
.l-grille{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px;width:100%;max-width:30rem;margin:0;padding:0;list-style:none}
.l-grille li{aspect-ratio:1;display:grid;place-items:center;font-size:clamp(.85rem,4.2vw,1.35rem);line-height:1;border-radius:3px;animation:retourne .45s both}
.l-grille li.juste{background:var(--encre)}
.l-grille li.rate{background:var(--rose)}
.l-grille li:nth-child(2){animation-delay:.08s}.l-grille li:nth-child(3){animation-delay:.16s}.l-grille li:nth-child(4){animation-delay:.24s}
.l-grille li:nth-child(5){animation-delay:.32s}.l-grille li:nth-child(6){animation-delay:.4s}.l-grille li:nth-child(7){animation-delay:.48s}
.l-grille li:nth-child(8){animation-delay:.56s}.l-grille li:nth-child(9){animation-delay:.64s}.l-grille li:nth-child(10){animation-delay:.72s}
@keyframes retourne{from{transform:rotateX(90deg)}}
.l-boutons{display:flex;flex-wrap:wrap;gap:.8rem}
.l-etat{font-size:.92rem;color:var(--discret);white-space:pre-line;overflow-wrap:anywhere}
.l-etat:empty{display:none}
.l-demain{font-weight:700}
.l-recap-titre{font-family:var(--titre);font-weight:400;text-transform:uppercase;color:var(--encre);font-size:1.3rem;margin-top:.8rem}
.l-recap{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;width:100%}
.l-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-width:9px}
.l-recap li.rate{border-left-color:var(--rose)}
.l-recap li > div{display:grid;gap:.2rem;min-width:0}
.l-recap .l-emoji{font-size:1.6rem}
.l-recap p{font-size:.95rem;line-height:1.4}
.l-recap .l-source{font-size:.82rem;color:var(--discret)}
.l-recap a{overflow-wrap:anywhere}

/* Les cinq couches expliquées : on ouvre une couche pour lire ce qu'elle décide (sans JavaScript, une à la fois) */
.legende{display:grid;gap:10px;padding-top:7px;max-width:34rem}
.legende details{border:0;padding:0}
.legende summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3rem;padding:.5rem 1rem .55rem;
  font-size:1.1rem;list-style:none;cursor:pointer;animation:none;transition:translate .1s,box-shadow .1s}
.legende summary::-webkit-details-marker{display:none}
.legende summary::after{content:"+";font-size:1.5rem;line-height:1}
.legende details[open] > summary{margin-bottom:0}
.legende details[open] > summary::after{content:"−"}
.legende details:nth-child(odd) > summary{rotate:-.4deg}
.legende details:nth-child(even) > summary{rotate:.35deg}
.legende summary:hover{translate:0 -2px;box-shadow:0 6px 0 var(--bord)}
.legende details > p{margin:.8rem 0 .6rem;padding:.1rem 0 .1rem .9rem;border-left:5px solid var(--c);max-width:62ch}