/* Au fil de l'eau — feuille de style du jeu.
   Charte du site : fond bleu clair #f2f5fa, Cormorant Garamond pour les
   titres, Montserrat pour le texte, or #b89a5a en filets et bordures
   (jamais en texte : 2,5:1 seulement — on écrit en --gold-txt). */
:root{
  --ink:#1a1814; --paper:#f2f5fa; --paper-dark:#e6ecf6;
  --gold:#b89a5a; --gold-txt:#7a5d22; --muted:#6e6659;
  --eau:#4a8ec2; --eau-clair:#7fb2d6; --eau-fonce:#2b6a96;
  --ok:#3f9a58; --ok-fond:#e9f7ee; --ko:#c0392b; --ko-fond:#fdeceb;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:'Montserrat',system-ui,sans-serif;line-height:1.6}
main{max-width:1180px;margin:0 auto;padding:0 1rem 3rem}
h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;margin:0}
h1{font-size:2.6rem;font-style:italic}
h2{font-size:1.6rem;font-style:italic;margin:0 0 .5rem}
h3{font-size:1.15rem}
a{color:var(--eau-fonce)}
.mut{color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

.entete{text-align:center;padding:5.5rem 1rem 1.2rem;max-width:820px;margin:0 auto}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;color:var(--gold-txt);margin:0 0 .4rem}
.accroche{color:var(--muted);margin:.6rem 0 0}
.filet{width:120px;height:1px;background:var(--gold);margin:1.1rem auto 0}

.bloc{background:#fff;border:1px solid rgba(184,154,90,.28);border-radius:10px;
  padding:1.3rem 1.3rem;margin:1.2rem 0}

/* ---------- réglages ---------- */
.reg-ligne{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;margin:.7rem 0}
.reg-ligne > b{min-width:9.5rem;font-weight:600;font-size:.9rem}
.chk{display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem;cursor:pointer;
  border:1px solid #ccd6e2;border-radius:999px;padding:.28rem .8rem;background:var(--paper)}
.chk:has(input:checked){border-color:var(--gold);background:#fbf7ee}
.chk input{accent-color:var(--eau-fonce)}
#nbFleuves{flex:1;min-width:160px;max-width:280px;accent-color:var(--eau-fonce)}
#nbVu{font-weight:700;font-size:1.2rem;min-width:1.4rem;display:inline-block;text-align:center}
#dispo{font-size:.85rem;color:var(--muted)}
#dispo.warn{color:var(--ko)}
#apercu{font-size:.82rem;color:var(--muted);margin:.5rem 0 0}
.btn{font:inherit;font-weight:600;border:1px solid var(--eau-fonce);background:var(--eau-fonce);
  color:#fff;border-radius:6px;padding:.55rem 1.3rem;cursor:pointer}
.btn:hover:not(:disabled){background:#215878}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-2{background:#fff;color:var(--eau-fonce)}
.btn-2:hover:not(:disabled){background:var(--paper-dark);color:var(--eau-fonce)}

/* ---------- barre de partie ---------- */
.barre{position:sticky;top:56px;z-index:20;display:flex;flex-wrap:wrap;gap:.6rem 1rem;
  align-items:center;background:var(--paper);border-bottom:1px solid rgba(184,154,90,.3);
  padding:.6rem .2rem;margin-bottom:.4rem}
#chrono{font-family:'Cormorant Garamond',serif;font-size:1.9rem;font-weight:600;min-width:3.4rem}
#malusVu{color:var(--ko);font-size:.82rem;font-weight:600}
#progres{font-size:.85rem;color:var(--muted)}
.barre .grow{flex:1}
/* Le bandeau d'erreur se pose EN BAS : au milieu de l'écran il recouvrait
   les schémas au moment précis où l'on cherche ce qui cloche. */
#flash{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:3000;
  background:var(--ko);color:#fff;border-radius:8px;padding:.6rem 1.2rem;font-weight:600;
  opacity:0;pointer-events:none;transition:opacity .2s}
#flash.vu{opacity:1}
#aide{font-size:.82rem;color:var(--muted);margin:.2rem 0 .6rem}

/* ---------- tas d'étiquettes ---------- */
.pool{display:flex;flex-wrap:wrap;gap:6px;padding:9px;min-height:52px;
  max-height:34vh;overflow-y:auto;align-content:flex-start;
  background:rgba(184,154,90,.07);border:1px solid rgba(184,154,90,.28);border-radius:8px}
.pool:empty::after{content:'(tas vide)';color:var(--muted);font-size:.78rem;font-style:italic}
.etiq{font:inherit;font-size:.73rem;line-height:1.2;padding:4px 7px;border:1px solid #c8d2de;
  border-radius:5px;background:#fff;color:var(--ink);cursor:grab;text-align:center;
  max-width:100%;touch-action:none;-webkit-user-select:none;user-select:none}
.etiq:hover{border-color:var(--gold)}
.etiq.sel{outline:2px solid var(--gold);outline-offset:1px;background:#fbf7ee}
.etiq.parti{opacity:.22}
.ghost{position:fixed;z-index:4000;pointer-events:none;box-shadow:0 6px 18px rgba(0,0,0,.22);
  transform:rotate(-1.5deg);opacity:.96}

/* ---------- plateau ---------- */
.board{display:flex;gap:18px;overflow-x:auto;padding:14px 2px 6px;scrollbar-width:thin}
.carte{flex:0 0 auto;width:322px}
.carte-tete{text-align:center;margin-bottom:.3rem}
/* Le nom du cours d'eau est un EMPLACEMENT, pas un titre : il occupe la
   place du titre mais se remplit comme les autres. Seule la ligne de
   métadonnées reste écrite — c'est le seul indice pour le reconnaître. */
.carte-tete .slot-N{position:static;width:100%;height:46px;margin:0 0 .2rem;border-radius:8px}
.carte-tete .slot-N .etiq{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.3rem;
  font-style:italic;font-weight:500;padding:0 4px;line-height:1.15}
.carte-tete .slot-N .etiq[data-l="2"]{font-size:1.05rem}
.carte-tete .slot-N .etiq[data-l="3"]{font-size:.9rem}
.carte-tete .slot-N .etiq[data-l="4"]{font-size:.8rem}
.carte-tete .slot-N .slot-hint{font-size:.74rem}
.carte-meta{font-size:.72rem;color:var(--muted);margin:.1rem 0 0;line-height:1.35}
.schema{position:relative;background:#fff;border:1px solid rgba(184,154,90,.3);border-radius:10px}
.schema-svg{position:absolute;inset:0}
.cours{fill:none;stroke:var(--eau);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.affl{fill:none;stroke:var(--eau-clair);stroke-width:2.6;stroke-linecap:round}
.lien{fill:none;stroke:#b9c3cf;stroke-width:1;stroke-dasharray:2 3}
.mk-V circle{fill:var(--ink)}
.mk-A circle{fill:var(--eau-clair);stroke:var(--eau-fonce);stroke-width:1}
.mk-L rect{fill:var(--eau);stroke:var(--eau-fonce);stroke-width:1}
.mk-M rect{fill:var(--gold);stroke:#8a6d3b;stroke-width:1}
.mk-G path{fill:#4a8c5a;stroke:#2f6b3c;stroke-width:1}
.mk-S path{fill:var(--eau-clair);stroke:var(--eau-fonce);stroke-width:1.4}
.mk-E path{fill:none;stroke:var(--eau-fonce);stroke-width:2;stroke-linecap:round}

.slot{position:absolute;display:flex;align-items:center;justify-content:center;
  border:1.5px dashed #a9b6c6;border-radius:6px;background:rgba(255,255,255,.82);
  padding:2px;overflow:hidden;cursor:pointer}
.slot .etiq{border:none;background:transparent;padding:2px;min-width:0}
/* Les emplacements font 116 px de large sur 34 de haut : « La confluence du
   Grand et du Petit Ienisseï (Kyzyl) » n'y tient pas au corps normal. On
   rapetisse selon la longueur du libellé — dans le tas, où la place est
   libre, l'étiquette garde sa taille. */
.slot .etiq[data-l="2"]{font-size:.63rem;line-height:1.1}
.slot .etiq[data-l="3"]{font-size:.56rem;line-height:1.05}
.slot .etiq[data-l="4"]{font-size:.5rem;line-height:1.02}
.slot-S .etiq[data-l="3"],.slot-E .etiq[data-l="3"]{font-size:.62rem}
.slot-S .etiq[data-l="4"],.slot-E .etiq[data-l="4"]{font-size:.56rem}
.slot-hint{font-size:.63rem;font-style:italic;color:#8b97a6;text-align:center;line-height:1.15;
  pointer-events:none}
.slot.vise{border-color:var(--gold);background:#fbf3e2;box-shadow:0 0 0 2px rgba(184,154,90,.25)}
.slot.rempli{border-style:solid;border-color:#c8d2de;background:#fff}
.slot.ko{border-color:var(--ko);border-style:solid;background:var(--ko-fond);
  box-shadow:0 0 0 2px rgba(192,57,43,.18)}
/* La croix est un élément de la ligne, pas une pastille posée dessus :
   en coin, elle recouvrait les libellés longs. La couleur seule ne suffit
   pas — un daltonien doit voir la marque. */
.slot.ko::before{content:'✗';color:var(--ko);font-weight:700;font-size:.72rem;
  flex:0 0 auto;margin-right:3px;line-height:1;pointer-events:none}
.slot.secousse{animation:secoue .35s}
/* Le REPÈRE : l'étiquette tirée au sort et posée d'avance. Elle est figée —
   ni déplaçable, ni comptée dans ce qu'il reste à placer. */
.slot.fixe{border-style:solid;border-color:var(--gold);background:#fbf3e2;cursor:default}
.slot.fixe::before{content:'⚓';font-size:.7rem;margin-right:3px;flex:0 0 auto;opacity:.7;
  line-height:1;pointer-events:none}
.etiq.fixe{cursor:default;background:transparent;border-color:transparent}
.etiq.fixe:hover{border-color:transparent}
.slot-S,.slot-E{border-width:2px}
@keyframes secoue{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

.legende{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;font-size:.75rem;color:var(--muted);
  margin:.5rem 0 0}
.legende span{display:inline-flex;align-items:center;gap:.35rem}
.lg{width:12px;height:12px;display:inline-block}
.lg-V{background:var(--ink);border-radius:50%}
.lg-A{background:var(--eau-clair);border:1px solid var(--eau-fonce);border-radius:50%}
.lg-L{background:var(--eau);transform:rotate(45deg)}
.lg-M{background:var(--gold)}
.lg-G{width:0;height:0;background:none;border-left:6px solid transparent;
  border-right:6px solid transparent;border-bottom:11px solid #4a8c5a}

/* ---------- fin de partie ---------- */
#finScore{text-align:center;margin:.4rem 0 1rem;font-size:1rem;color:var(--muted)}
.gros{display:block;font-family:'Cormorant Garamond',serif;font-size:3.2rem;font-weight:600;
  color:var(--ink);line-height:1}
.detail{width:100%;border-collapse:collapse;font-size:.86rem}
.detail th{text-align:left;font-weight:600;padding:.3rem .8rem .3rem 0;vertical-align:top;
  white-space:nowrap;color:var(--muted)}
.detail td{padding:.3rem 0}
.fiche{border:1px solid rgba(184,154,90,.28);border-radius:8px;padding:.5rem .8rem;margin:.5rem 0;
  background:#fff}
.fiche summary{cursor:pointer;font-size:.95rem}
.fiche-pays{font-size:.78rem;margin:.3rem 0 .2rem}
.corr{width:100%;border-collapse:collapse;font-size:.82rem;margin-top:.3rem}
.corr th{text-align:left;color:var(--muted);font-weight:600;border-bottom:1px solid #e3e8ef;padding:.25rem .5rem}
.corr td{padding:.22rem .5rem;border-bottom:1px solid #f0f3f7}
.corr .pos{color:var(--muted);width:3.2rem}
.corr .quoi{color:var(--muted);width:11rem}
.corr .mark{width:1.6rem;text-align:center}
.corr tr.juste .mark{color:var(--ok)}
.corr tr.rate .mark{color:var(--ko)}
.corr tr.rate td{background:#fdf3f2}
.corr tr.donne td{background:#fbf7ee}

/* ---------- classement ---------- */
.lb-tabs{display:flex;gap:.4rem;margin:.6rem 0}
.lb-tab{font:inherit;font-size:.84rem;border:1px solid #ccd6e2;background:#fff;border-radius:999px;
  padding:.25rem .9rem;cursor:pointer;color:var(--ink)}
.lb-tab.active{background:var(--eau-fonce);border-color:var(--eau-fonce);color:#fff}
.lb{width:100%;border-collapse:collapse;font-size:.88rem}
.lb th{text-align:left;color:var(--muted);font-weight:600;border-bottom:1px solid #e3e8ef;padding:.35rem .5rem}
.lb td{padding:.32rem .5rem;border-bottom:1px solid #f0f3f7}
.lb .num{text-align:right}
.lb-rank{width:2.4rem;color:var(--muted)}
.lb-player{display:inline-flex;align-items:center;gap:.45rem}
.lb-player img{width:22px;height:22px;border-radius:50%;object-fit:cover}
.lb-row-me{background:#fbf7ee;font-weight:600}
.lb-sep td{text-align:center;color:#9aa3af}
.lb-empty{color:var(--muted);font-style:italic;text-align:center;padding:1rem}
#lbMsg{font-size:.85rem;color:var(--muted);margin:.4rem 0}

.explications summary{cursor:pointer;font-family:'Cormorant Garamond',serif;font-size:1.4rem;
  font-style:italic}
.explications{background:#fff;border:1px solid rgba(184,154,90,.28);border-radius:10px;
  padding:1rem 1.2rem;margin:1.4rem 0}
.explications ul{margin:.4rem 0 .8rem;padding-left:1.2rem}
.explications li{margin:.25rem 0;font-size:.92rem}
.sources-licences{font-size:.8rem;color:var(--muted);margin-top:1.6rem}

footer{text-align:center;padding:2rem 1rem;color:var(--muted);font-size:.8rem;
  border-top:1px solid rgba(184,154,90,.3)}

@media (max-width:640px){
  h1{font-size:2rem}
  .entete{padding-top:4.5rem}
  .barre{top:0}
  .reg-ligne > b{min-width:100%}
}