/* Le jeu de la connaissance — charte du site : Cormorant Garamond + Montserrat,
   fond bleuté #f2f5fa, bleu de marque #1d3a5f, or #b89a5a réservé aux filets
   et aux aplats (jamais du texte : 2,5:1 sur fond clair).
   Structure : la transmission orale puis la civilisation en colonne de
   gauche, les améliorations au centre, les douze relais à droite. */
:root{
  --ink:#12233a; --paper:#f2f5fa; --paper-dark:#e6ecf6; --pale:#eaf0f8;
  --brand:#1d3a5f; --brand-dark:#16304f; --brand-light:#4a6b95;
  --muted:#66788f; --line:rgba(29,58,95,.22); --line-fort:rgba(29,58,95,.42);
  --gold:#b89a5a; --gold-txt:#7a5d22;
  --ko:#b04a3a; --ok:#2f7a4d; --nav-h:72px;
}
*{box-sizing:border-box}
html,body{margin:0}
html{scroll-padding-top:calc(var(--nav-h) + 10px)}
body{
  background:var(--paper); color:var(--ink);
  font-family:'Montserrat',system-ui,sans-serif; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand)}

/* ── En-tête ── */
.entete{max-width:1080px;margin:0 auto;padding:calc(var(--nav-h) + 1.6rem) 1.1rem 0;text-align:center}
@media (max-width:560px){.entete{padding-top:calc(var(--nav-h) + 1rem)}}
.entete h1{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(2.2rem,5.5vw,3.4rem);margin:0;color:var(--brand);line-height:1.05}
.entete .accroche{max-width:680px;margin:.8rem auto 0;color:#34455c;font-size:1.02rem}
.entete .filet{width:64px;height:2px;background:var(--gold);margin:1.3rem auto .2rem;opacity:.7}

main{max-width:1340px;margin:0 auto;padding:1.2rem 1.1rem 2.5rem}

/* ── Grille de jeu ──
   Quatre blocs placés explicitement : la parole et la civilisation en
   colonne 1 (l'une sous l'autre), les améliorations au centre, la boutique
   à droite sur toute la hauteur. Sur mobile tout s'empile, mais la boutique
   remonte juste après la case de transmission orale : c'est là qu'on joue. */
.jeu{display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr) minmax(0,370px);gap:0 1.1rem;align-items:start}
.col-gauche{grid-column:1;grid-row:1}
.col-civ   {grid-column:1;grid-row:2}
.col-centre{grid-column:2;grid-row:1 / span 2}
.col-droite{grid-column:3;grid-row:1 / span 2}
@media (max-width:1120px){
  .jeu{grid-template-columns:minmax(0,1fr) minmax(0,330px)}
  .col-gauche{grid-column:1;grid-row:1}
  .col-centre{grid-column:1;grid-row:2}
  .col-civ   {grid-column:1;grid-row:3}
  .col-droite{grid-column:2;grid-row:1 / span 3}
}
@media (max-width:780px){
  .jeu{grid-template-columns:1fr}
  .col-gauche,.col-centre,.col-civ,.col-droite{grid-column:auto;grid-row:auto}
  .col-gauche{order:1} .col-droite{order:2} .col-centre{order:3} .col-civ{order:4}
}

.carte{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1rem;
  box-shadow:0 6px 24px rgba(18,35,58,.06);margin-bottom:1rem}
.carte h2{font-family:'Cormorant Garamond',serif;color:var(--brand);font-size:1.35rem;margin:.1rem 0 .6rem;font-weight:600}
.carte h2 small{font-family:'Montserrat',sans-serif;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500;display:block;margin-top:.15rem}

/* ── Compteur ── */
.compteur{text-align:center}
.compteur .gros{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,6vw,2.9rem);font-weight:600;color:var(--brand);line-height:1;font-variant-numeric:tabular-nums}
.compteur .unite{display:block;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:.25rem}
.compteur .cps{margin:.6rem 0 0;color:#34455c;font-size:.95rem}
.compteur .cps b{color:var(--brand)}
.compteur .detail{margin:.25rem 0 0;font-size:.82rem;color:var(--muted)}

/* Effets en cours */
#buffs{display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center;margin-top:.6rem}
.buff{background:var(--pale);color:var(--brand);border-radius:999px;padding:.18rem .7rem;font-size:.76rem;font-weight:600}
.buff.mal{background:rgba(176,74,58,.14);color:var(--ko)}
/* Les règles du bonus, juste au-dessus de leur pastille et EN SURCOUCHE : en
   flux, l'encart poussait la pastille vers le bas, le curseur la quittait et
   tout clignotait. */
.bonus-zone{position:relative}
.bonus-aide{position:absolute;bottom:100%;left:0;right:0;margin-bottom:6px;z-index:5;
  background:#fff;border:1px solid rgba(184,154,90,.6);
  box-shadow:0 6px 20px rgba(18,35,58,.16);
  border-radius:10px;padding:.6rem .75rem;text-align:left;font-size:.78rem;
  color:#34455c;line-height:1.45}
.bonus-aide[hidden]{display:none}
.bonus-aide > b{display:block;font-family:'Cormorant Garamond',serif;font-size:1.05rem;
  font-weight:600;color:var(--gold-txt);margin-bottom:.25rem}
.bonus-aide p{margin:.3rem 0 0}
.bonus-aide b{color:var(--brand)}
.bonus-aide a{color:var(--brand);font-weight:600}

/* La pastille du bonus est un BOUTON : elle ouvre ses règles au-dessus d'elle. */
.buff.bonus{background:rgba(184,154,90,.24);color:var(--gold-txt);cursor:pointer;
  border:1px solid rgba(184,154,90,.5);font-family:inherit;font-size:.76rem;font-weight:600}
.buff.bonus:hover{background:rgba(184,154,90,.4)}

/* ── La case de transmission orale ── */
.tile{position:relative;display:block;width:100%;margin:.9rem 0 0;cursor:pointer;
  background:linear-gradient(160deg,#fdfdff,var(--pale));border:1.5px solid var(--line-fort);
  border-radius:16px;padding:1rem .8rem .85rem;text-align:center;
  transition:transform .08s ease,box-shadow .15s ease,border-color .15s ease;
  box-shadow:0 5px 18px rgba(18,35,58,.09);font-family:inherit;color:inherit}
.tile:hover{border-color:var(--brand);box-shadow:0 8px 24px rgba(18,35,58,.16)}
.tile:active{transform:scale(.975)}
.tile svg{width:100%;max-width:210px;height:auto;display:block;margin:0 auto}
.tile .tile-nom{display:block;font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-weight:600;color:var(--brand);margin-top:.35rem}
.tile .tile-sub{display:block;font-size:.78rem;color:var(--muted);margin-top:.1rem}
.volant{position:absolute;pointer-events:none;transform:translate(-50%,-50%);
  font-weight:700;color:var(--brand);font-size:1rem;animation:monte 1.1s ease-out forwards;text-shadow:0 1px 2px rgba(255,255,255,.9)}
@keyframes monte{from{opacity:1;transform:translate(-50%,-50%)}to{opacity:0;transform:translate(-50%,-160%)}}

/* ── Civilisation / prestige ── */
.civ-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:.2rem 0 .7rem}
.civ-case{background:var(--pale);border-radius:10px;padding:.5rem .6rem;text-align:center}
.civ-case b{display:block;font-size:1.1rem;color:var(--brand);font-variant-numeric:tabular-nums}
.civ-case small{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
#civAide{font-size:.85rem;color:var(--muted);margin:.2rem 0 .7rem;text-align:center}
.compte-etat{font-size:.78rem;color:var(--muted);text-align:center;margin:.8rem 0 0;line-height:1.4}
.compte-etat a{color:var(--brand);font-weight:600}
.btn{display:inline-block;border:none;cursor:pointer;font-family:'Montserrat',sans-serif;font-weight:600;
  background:var(--brand);color:#fff;border-radius:999px;padding:.6rem 1.4rem;font-size:.95rem;
  transition:background .12s,transform .1s;width:100%}
.btn:hover:not(:disabled){background:var(--brand-dark);transform:translateY(-1px)}
.btn:disabled{background:#d4dcea;color:#78889e;cursor:not-allowed}
.btn-mini{width:auto;background:transparent;color:var(--brand);border:1px solid var(--line-fort);padding:.35rem .9rem;font-size:.8rem;margin:.15rem .1rem}
/* ⚠️ `.btn:hover:not(:disabled)` est PLUS SPÉCIFIQUE que `.btn-mini:hover` :
   sans le même `:not(:disabled)` ici, le survol repassait au bleu foncé du
   bouton plein tout en gardant le texte bleu foncé — illisible. */
.btn-mini:hover:not(:disabled){background:var(--paper-dark);color:var(--brand);transform:none}

/* ── Boutique des bâtiments ── */
.qtes{display:flex;gap:.35rem;justify-content:flex-end;margin-bottom:.5rem}
.qte{cursor:pointer;font-family:inherit;font-weight:600;font-size:.78rem;border:1px solid var(--line);
  background:#fff;color:var(--muted);border-radius:999px;padding:.2rem .7rem}
.qte.active{background:var(--brand);color:#fff;border-color:var(--brand)}
#store{display:flex;flex-direction:column;gap:.4rem}
/* Une ligne = DEUX commandes : la fiche à gauche (ne dépense rien), le bouton
   d'achat à droite. Séparées par un filet, pour qu'on voie où l'on paie. */
.bat{display:flex;align-items:stretch;gap:0;width:100%;
  background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:10px;
  overflow:hidden;transition:border-color .12s}
.bat.mystere{align-items:center;gap:.6rem;padding:.5rem .6rem;opacity:.7;border-left-color:#c8d2e0;color:var(--muted)}

.bat-fiche{display:flex;align-items:center;gap:.6rem;flex:1 1 auto;min-width:0;text-align:left;
  cursor:pointer;font-family:inherit;background:none;border:none;padding:.5rem .55rem;
  transition:background .12s}
.bat-fiche:hover{background:var(--pale)}

/* Le bouton d'achat garde sa largeur naturelle : le prix tient sur une ligne.
   Sur un téléphone il se resserre au contraire (média sous 480 px) et le prix
   passe à la ligne — voir prixCoupe() dans js/game.js. */
.bat-achat{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:.2rem;
  cursor:pointer;font-family:inherit;background:var(--pale);border:none;
  border-left:1px solid var(--line);padding:.5rem .5rem;min-width:84px;text-align:center;line-height:1.2;
  color:var(--brand);font-weight:700;transition:background .12s,color .12s}
.bat-achat:hover:not(:disabled){background:var(--brand);color:#fff}
.bat-achat:disabled,.bat-achat.ko{background:transparent;color:#9aa8bb;cursor:not-allowed}
.bat-plus{font-size:1rem;line-height:1}

.bat-em{font-size:1.5rem;line-height:1;flex:0 0 auto}
.bat-txt{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.bat-txt b{font-size:.92rem;color:var(--ink)}
.bat-cout{font-size:.8rem;font-variant-numeric:tabular-nums;font-weight:700;min-width:0}
.bat-prod{font-size:.72rem;color:var(--muted)}
/* Sur un écran étroit, la boutique se resserre : « Radiodiffusion » ne se
   coupe pas, et c'est ce mot-là qui imposait la largeur de la colonne. */
@media (max-width:480px){
  .bat-fiche{padding:.5rem .4rem;gap:.45rem}
  .bat-em{font-size:1.3rem}
  .bat-achat{flex:0 1 auto;min-width:74px;padding:.5rem .35rem}
  .bat-n{font-size:1.4rem;margin-left:.25rem}
}

.bat-n{font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-weight:600;color:rgba(29,58,95,.5);flex:0 0 auto;font-variant-numeric:tabular-nums;margin-left:.4rem;padding-right:.15rem}

/* ── Améliorations ── */
#upGrid,#upOwned{display:flex;flex-wrap:wrap;gap:.4rem}
.up{position:relative;width:46px;height:46px;font-size:1.35rem;line-height:1;cursor:pointer;border-radius:10px;
  border:1.5px solid var(--gold);background:linear-gradient(160deg,#fdfdff,var(--pale));
  display:inline-flex;align-items:center;justify-content:center;transition:transform .1s,box-shadow .12s}
.up:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(18,35,58,.18)}
.up.ko{opacity:.42;border-color:#c8d2e0;cursor:not-allowed}
/* Acquise : plus petite et sans or, mais cliquable — on doit pouvoir relire
   ce qu'elle fait sans se souvenir de tout. */
.up.owned{width:30px;height:30px;font-size:.95rem;border-color:var(--line);background:var(--paper-dark);font-family:inherit;padding:0}
/* Pastille de rang : les six améliorations d'un relais partagent son emoji,
   le chiffre dit laquelle c'est sans avoir à survoler. */
.up-r{position:absolute;right:2px;bottom:0;font-style:normal;font-size:.6rem;font-weight:700;
  color:var(--brand);background:rgba(255,255,255,.85);border-radius:4px;padding:0 2px;line-height:1.2}
.up.owned .up-r{font-size:.5rem;color:var(--muted);background:transparent}
#upOwned{margin-top:.5rem}
.up-tout{margin:0 0 .7rem;text-align:center}
/* Bouton « Tout acheter » armé : il attend une confirmation. */
#btnToutUp.arme{background:var(--gold-txt);color:#fff;border-color:var(--gold-txt)}
#btnToutUp.arme:hover:not(:disabled){background:var(--gold-txt);color:#fff}
#upVide{color:var(--muted);font-size:.9rem;margin:.2rem 0}

/* Encadré d'information (survol) */
.info{min-height:120px;background:var(--pale);border:1px dashed var(--line-fort);border-radius:12px;padding:.8rem .9rem;margin-bottom:1rem}
/* Sur ordinateur, la fiche s'ouvre au SURVOL et se trouve AU-DESSUS de la
   grille des améliorations : si sa hauteur change d'une fiche à l'autre, la
   vignette survolée s'échappe sous le curseur et le clic manque sa cible. On
   réserve donc la hauteur de la plus haute (les synergies, 221 px). Au doigt il
   n'y a pas de survol : sous 900 px la fiche reprend sa hauteur naturelle. */
@media (min-width:900px){ .info{min-height:222px} }
.info-h{display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem}
.info-h span{font-size:1.8rem;line-height:1}
.info-h b{font-family:'Cormorant Garamond',serif;font-size:1.25rem;color:var(--brand);display:block;line-height:1.15}
.info-h small{color:var(--muted);font-size:.76rem}
.info p{margin:.3rem 0;font-size:.9rem;color:#34455c}
.info .info-chiffres{font-size:.85rem;color:var(--muted)}
.info .info-chiffres b{color:var(--brand)}
/* Le seul endroit où l'on achète une amélioration : la vignette ouvre la
   fiche, la fiche porte le bouton. */
.info-achat{display:block;width:100%;margin:.7rem 0 0;cursor:pointer;
  font-family:'Montserrat',sans-serif;font-size:.92rem;font-weight:600;
  background:var(--brand);color:#fff;border:none;border-radius:999px;padding:.55rem 1.1rem;
  transition:background .12s,transform .1s}
.info-achat b{font-weight:700}
.info-achat:hover:not(:disabled){background:var(--brand-dark);transform:translateY(-1px)}
.info-achat:disabled,.info-achat.ko{background:#d4dcea;color:#78889e;cursor:not-allowed;transform:none}
.info-acquise{margin:.7rem 0 0;font-size:.9rem;font-weight:600;color:var(--brand);text-align:center}

/* Bandeau d'actualités */
.news{background:var(--brand);color:#e7edf6;border-radius:10px;padding:.5rem .9rem;font-size:.85rem;font-style:italic;margin-bottom:1rem;text-align:center}

/* ── Onglets ── */
.tabs{display:flex;gap:.3rem;flex-wrap:wrap;margin-bottom:.6rem}
.tab{cursor:pointer;font-family:inherit;font-weight:600;font-size:.78rem;letter-spacing:.06em;
  border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:999px;padding:.32rem .95rem}
.tab.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.pane{display:none}
.pane.on{display:block}

/* Journal */
#journal{list-style:none;margin:0;padding:0;max-height:280px;overflow:auto}
#journal li{border-bottom:1px solid rgba(29,58,95,.1);padding:.38rem 0;font-size:.87rem;color:#34455c}
#journal li:last-child{border-bottom:none}

/* Découvertes */
#achList{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.4rem;max-height:340px;overflow:auto}
.ach{background:var(--paper-dark);border-radius:9px;padding:.45rem .6rem;opacity:.55}
.ach.ok{background:linear-gradient(160deg,#fdfdff,var(--pale));border:1px solid rgba(184,154,90,.55);opacity:1}
.ach.muet{opacity:.38}
.ach.muet small{font-style:italic}
.ach b{display:block;font-size:.86rem;color:var(--brand)}
.ach small{font-size:.75rem;color:var(--muted)}

/* Barre ancrée (téléphones et petites tablettes) : sur ces largeurs la mise en
   page s'empile, et le compteur disparaît dès qu'on descend dans les relais ou
   les explications. Elle se cale sous le bandeau du site, et remonte en haut
   quand celui-ci s'efface au défilement (classe nav--hidden posée par site.js). */
.mini{position:fixed;left:0;right:0;top:var(--nav-h);z-index:1090;display:none;
  align-items:baseline;justify-content:space-between;gap:.8rem;
  padding:.4rem .95rem;background:var(--brand);color:#fff;
  font-size:.82rem;font-variant-numeric:tabular-nums;
  transform:translateY(-130%);transition:transform .25s ease,top .32s ease;
  box-shadow:0 3px 12px rgba(18,35,58,.28)}
.mini b{font-family:'Cormorant Garamond',serif;font-size:1.15rem;font-weight:600;color:#fff}
.mini.on{transform:translateY(0)}
.mini.haut{top:0}
@media (max-width:1120px){ .mini{display:flex} }

/* Statistiques */
/* Même gabarit que les découvertes et les legs : hauteur bornée, défilement. */
#paneStats.on{max-height:340px;overflow:auto;padding-right:.25rem}
#statsList{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.5rem}
.stat{background:var(--pale);border-radius:9px;padding:.5rem .7rem}
.stat-lib{display:block;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.stat-val{display:block;font-family:'Cormorant Garamond',serif;font-size:1.35rem;font-weight:600;
  color:var(--brand);line-height:1.15;margin-top:.15rem;font-variant-numeric:tabular-nums}
.stat-sous{display:block;font-size:.74rem;color:var(--muted);margin-top:.15rem}

.stats-prestige{margin-top:.9rem;border-top:1px solid var(--line);padding-top:.8rem}
.stats-tete{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;
  font-size:.86rem;color:var(--muted);margin-bottom:.4rem}
.stats-tete b{color:var(--brand)}
.stats-piste{height:10px;border-radius:999px;background:var(--paper-dark);overflow:hidden}
.stats-piste span{display:block;height:100%;background:var(--gold);border-radius:999px;transition:width .3s ease}
#statsReste{margin:.5rem 0 0;font-size:.82rem;color:var(--muted)}
#statsReste b{color:var(--brand)}

/* Legs de civilisation */
.legs-tete{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;margin-bottom:.5rem;flex-wrap:wrap}
.legs-tete b{color:var(--brand);font-size:1.05rem}
/* Vingt legs : même gabarit que la liste des découvertes, hauteur bornée et
   défilement, sinon le panneau pousse tout le reste de la page vers le bas. */
#legsList{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.4rem;
  max-height:340px;overflow:auto;padding-right:.2rem}
.legs{display:flex;align-items:flex-start;gap:.45rem;text-align:left;cursor:pointer;font-family:inherit;
  background:#fff;border:1px solid var(--line);border-radius:9px;padding:.45rem .55rem;transition:background .12s}
.legs:hover:not(:disabled){background:var(--pale)}
.legs.ko{opacity:.5;cursor:not-allowed}
.legs.pris{background:linear-gradient(160deg,#fdfdff,var(--pale));border-color:rgba(184,154,90,.6);cursor:default}
.legs-em{font-size:1.15rem;line-height:1.15;flex:0 0 auto}
.legs-txt{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.legs-txt b{font-size:.83rem;color:var(--ink);line-height:1.2}
.legs-eff{font-size:.72rem;color:#34455c;margin-top:.1rem;line-height:1.35}
/* La citation d'ambiance passe en infobulle : elle doublait la hauteur. */
.legs-cit{display:none}
.legs-cout{flex:0 0 auto;font-size:.72rem;font-weight:700;color:var(--brand);white-space:nowrap}

/* ── Avant la civilisation suivante ── */
.modale{position:fixed;inset:0;z-index:1300;display:flex;align-items:center;justify-content:center;padding:1rem}
.modale[hidden]{display:none}
.modale-fond{position:absolute;inset:0;background:rgba(18,35,58,.55)}
.modale-boite{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 50px rgba(18,35,58,.35);padding:1.1rem 1.2rem 1rem;width:min(560px,100%);
  max-height:min(88vh,760px);overflow:auto}
.modale-boite h2{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:600;color:var(--brand);
  margin:0 0 .4rem;letter-spacing:.01em}
.modale-intro{margin:0 0 .8rem;font-size:.88rem;line-height:1.5;color:#34455c}
.modale-intro b{color:var(--brand)}
.modale-x{position:absolute;top:.4rem;right:.5rem;background:none;border:none;font-size:1.5rem;line-height:1;
  color:var(--muted);cursor:pointer;font-family:inherit;padding:.1rem .3rem}
.modale-x:hover{color:var(--ink)}
#civLegs{display:flex;flex-direction:column;gap:.35rem;max-height:min(46vh,340px);overflow:auto;padding-right:.2rem}
/* Un legs pris à l'instant, pas encore payé : on peut encore se raviser. */
.legs.choisi{background:linear-gradient(160deg,#fdfdff,var(--pale));border-color:var(--brand)}
.legs.choisi .legs-cout{color:var(--ok)}
.modale-pied{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:.9rem}
.modale-pied .btn{width:auto;flex:1 1 auto;margin:0}
.modale-pied .btn-mini{flex:0 0 auto}

/* Choix de l'écriture des nombres, au bas des statistiques. */
.stats-ecriture{margin:.9rem 0 0;text-align:center;color:var(--muted);font-size:.82rem}
.stats-ecriture .btn-mini{margin-left:.3rem}

/* ── Éclair de génie ── */
.eclair{position:fixed;z-index:1050;width:64px;height:64px;font-size:2.1rem;line-height:1;cursor:pointer;
  border:none;background:radial-gradient(circle,rgba(255,236,170,.95),rgba(255,236,170,0) 70%);
  border-radius:50%;animation:pulse 1.1s ease-in-out infinite}
.eclair:hover{transform:scale(1.12)}
@keyframes pulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 6px rgba(255,205,80,.8))}50%{transform:scale(1.12);filter:drop-shadow(0 0 18px rgba(255,205,80,1))}}

/* ── Notifications ── */
.toast,.retour{position:fixed;left:50%;transform:translateX(-50%) translateY(20px);bottom:1.2rem;z-index:1200;
  background:var(--brand);color:#eef2f8;border-radius:12px;padding:.7rem 1.2rem;font-size:.9rem;text-align:center;
  box-shadow:0 8px 26px rgba(18,35,58,.3);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;max-width:min(92vw,460px)}
.toast.on,.retour.on{opacity:1;transform:translateX(-50%) translateY(0)}
.toast span{color:#c3d0e2;font-size:.82rem}
.retour{bottom:auto;top:calc(var(--nav-h) + 1rem);transform:translateX(-50%) translateY(-20px)}

/* ── Classement des parties (bas de page) ── */
  margin:0 0 .4rem;text-align:center}
/* Le tableau défile de lui-même sur un téléphone : sept colonnes n'y tiennent
   pas, et la page entière ne doit pas déborder pour autant. */
  border-bottom:1px solid var(--line)}

/* ── Textes de bas de page ── */
.explications{max-width:820px;margin:2.4rem auto 0;background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.4rem 1.6rem}
/* Le mode d'emploi replié : son résumé est le titre de la carte, et le triangle
   natif est remplacé par un chevron qui pivote à l'ouverture. */
.explications > .expl-titre{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;
  font-family:'Cormorant Garamond',serif;font-weight:600;color:var(--brand);
  font-size:clamp(1.3rem,3vw,1.8rem);line-height:1.2}
.explications > .expl-titre::-webkit-details-marker{display:none}
.explications > .expl-titre::before{content:"›";display:inline-block;font-size:1.4em;line-height:.8;
  color:var(--gold);transition:transform .15s}
.explications[open] > .expl-titre::before{transform:rotate(90deg)}
.explications > .expl-titre:hover{color:var(--brand-dark)}
.explications > .expl-titre:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
/* Replié, la carte n'est plus qu'un bandeau : pas de blanc superflu. */
.explications:not([open]){padding:.9rem 1.6rem}
.explications[open] > .expl-titre{margin-bottom:.6rem}
.explications h2{font-family:'Cormorant Garamond',serif;font-weight:600;color:var(--brand);font-size:clamp(1.3rem,3vw,1.8rem);margin:1.4rem 0 .5rem}
.explications h2:first-child{margin-top:0}
.explications p{font-size:.96rem;line-height:1.7;margin:0 0 .7rem;color:#34455c}
.explications details{border-top:1px solid rgba(184,154,90,.35);padding:.75rem 0}
.explications details:last-child{border-bottom:1px solid rgba(184,154,90,.35)}
.explications summary{cursor:pointer;font-weight:600;color:var(--brand);font-size:1rem}
.explications details p{margin:.5rem 0 .2rem;color:var(--muted);font-size:.94rem}
.tableau-scroll{overflow-x:auto}
.explications table{width:100%;min-width:520px;border-collapse:collapse;font-size:.88rem;margin:.4rem 0 .9rem}
.explications th,.explications td{text-align:left;padding:.32rem .5rem;border-bottom:1px solid rgba(29,58,95,.12)}
.explications th{color:var(--brand);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}
.explications td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── Pied de page (styles communs dans /assets/site.css) ── */
footer{margin-top:2.5rem}

/* Sélecteur de partie (deux parties en parallèle) */
.parties{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.4rem;margin:.7rem 0 0}
/* ⚠️ Un `display` d'auteur écrase TOUJOURS le display:none de l'attribut
   hidden, quelle que soit la spécificité : sans ces deux règles, .parties
   (flex) et les boutons (.btn, inline-block) restaient visibles malgré
   element.hidden = true, et le bouton d'ouverture d'une deuxième partie
   s'affichait même quand on en avait déjà deux. Même garde que .modale[hidden]
   et .bonus-aide[hidden] plus haut. */
.parties[hidden]{display:none}
.parties .btn[hidden]{display:none}
.parties-lib{font-size:.82rem;color:var(--muted)}
.parties .btn-mini[aria-pressed="true"]{background:var(--brand);color:#fff;border-color:var(--brand)}
.parties .btn-mini sup{font-size:.7em}