/* =========================================================================
   Grilles Logiques — socle CSS commun aux pages de jeu
   -------------------------------------------------------------------------
   Chargé par chaque page via <link rel="stylesheet" href="commun.css">, AVANT
   son propre <style> (ainsi les règles propres au jeu, de même spécificité,
   l'emportent).

   Contenu : la coquille d'interface (variables, en-tête, cartes, boutons,
   modales, tableau de quantités) et le cadre d'impression (#printArea, .pgrid,
   .pcard, corrections sur pages séparées).

   Reste dans la page : le plateau (dimensions, couleurs des cases, palettes),
   les classes de cases propres au jeu, et les cellules spécifiques du tableau
   d'impression (.path, .ep, .ship, .water, .pf, .pp, .blk, .head, .sol…).
   Jeton anti-cache : chaque page appelle ce fichier avec « ?v=<octets> »
   (idem commun.js). Après TOUTE retouche de commun.css ou commun.js, remettre
   les 146 jetons à jour d'un coup :  ./.venv/bin/python bump_versions.py
   ========================================================================= */

/* ---------- variables ---------- */
:root{
  --bg:#f4f6fb; --panel:#ffffff; --ink:#1a2738; --muted:#6b7a90;
  --line:#d9e0ea; --accent:#2f6fed; --accent2:#0e9f6e; --bad:#e0483b;
  --shadow:0 10px 30px rgba(20,40,80,.08); --radius:14px;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;padding:18px}
h1{font-size:22px;margin:0}
h2{font-size:16px;margin:0 0 8px}
.wrap{max-width:1080px;margin:0 auto}

/* ---------- en-tête ---------- */
header{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
a.back-link{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--accent);
  font-weight:600;font-size:14px;background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:9px 14px;box-shadow:var(--shadow)}
a.back-link:hover{background:#eef4ff;border-color:#bcd2ff}
header .sub{color:var(--muted);font-size:13px;margin-left:auto}
.icon-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--panel);
  cursor:pointer;display:grid;place-items:center;box-shadow:var(--shadow);color:var(--accent)}
.icon-btn:hover{background:#eef4ff}
.icon-btn svg{width:22px;height:22px;display:block}

/* ---------- cartes et barre d'outils ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin-bottom:16px}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
label.field{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--muted)}
select,input[type=number]{font:inherit;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:8px 10px}
input[type=number]{width:78px}
button.btn{font:inherit;font-weight:600;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:9px 13px;cursor:pointer}
button.btn:hover{background:#eef4ff;border-color:#bcd2ff}
button.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
button.btn.primary:hover{filter:brightness(1.06)}
/* bouton « 💡 Aide » (initAideBtn dans commun.js) : allumé = jaune ; éteint, les indices cliquables sont inertes */
#helpBtn[aria-pressed=true]{background:#fff4d6;border-color:#d9a400;color:#6b4d00}
body:not(.aide-on) .aide-clue{pointer-events:none;cursor:default}
body:not(.aide-on) .aide-only{display:none !important}
.aide-same{background:#fff1c7 !important}
button.btn:disabled{opacity:.5;cursor:not-allowed}
.status{font-size:14px;color:var(--muted);min-height:20px;margin-top:10px}
.status.good{color:var(--accent2);font-weight:600}
.status.err{color:var(--bad);font-weight:600}
.legend{font-size:13px;color:var(--muted);text-align:center;margin-top:10px}
.hint{font-size:13px;color:var(--muted)}

/* ---------- modales ---------- */
.modal{position:fixed;inset:0;background:rgba(16,26,44,.55);display:none;z-index:50;padding:20px;overflow:auto}
.modal.open{display:block}
.modal-card{background:#fff;max-width:900px;margin:24px auto;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden}
.modal-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.modal-head h2{margin:0;font-size:18px}
.modal-head .spacer{margin-left:auto}
.modal-body{padding:18px}
.rules li{margin:6px 0}

/* ---------- tableau des quantités à imprimer ---------- */
.counts-wrap{overflow:auto;margin:8px 0}
table.counts{border-collapse:collapse;font-size:13px}
table.counts th,table.counts td{border:1px solid var(--line);padding:5px 8px;text-align:center;white-space:nowrap}
table.counts thead th{background:#f2f6fc}
table.counts tbody th{background:#f7f9fc;text-align:left}
table.counts td.na{background:#f7f8fa;color:#c2c9d4}
table.counts input{width:58px;padding:5px 6px;text-align:center;border:1px solid var(--line);border-radius:8px}

/* ---------- cadre d'impression ----------
   Cases carrées garanties par table-layout:fixed + largeur explicite posée par
   le script (style="width:<colonnes*22>px"). Ne jamais mettre width:100% ici. */
#printArea{display:block}
.pgrid{width:auto;margin:0 auto;border-collapse:collapse;table-layout:fixed}
.pgrid td{position:relative;border:1px solid #9aa7b8;text-align:center;font-weight:700;font-size:13px;
  height:22px;width:22px;min-width:22px;padding:0;line-height:20px;color:#22303f;background:#fff;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.pgrid td.void{border:none;background:transparent}
/* tracé imprimé (Anglers…) : mêmes barres et points que le plateau, débordant
   de 1 px pour franchir la bordure partagée entre deux cases */
.pgrid i.cn{position:absolute;display:block;z-index:1;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.pgrid i.cn.up{left:calc(50% - 1.5px);top:-1px;width:3px;height:calc(50% + 1px)}
.pgrid i.cn.down{left:calc(50% - 1.5px);bottom:-1px;width:3px;height:calc(50% + 1px)}
.pgrid i.cn.left{top:calc(50% - 1.5px);left:-1px;height:3px;width:calc(50% + 1px)}
.pgrid i.cn.right{top:calc(50% - 1.5px);right:-1px;height:3px;width:calc(50% + 1px)}
.pgrid i.dot{position:absolute;z-index:2;left:calc(50% - 2.5px);top:calc(50% - 2.5px);width:5px;height:5px;
  border-radius:50%;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.pgrid .pl{position:relative;z-index:3}
.pcard{border:1px solid #b9c4d4;border-radius:10px;padding:10px;break-inside:avoid;page-break-inside:avoid}
.pcard h3{margin:0 0 8px;font-size:14px}
.pgrid-wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.corrections{break-before:page;page-break-before:always}
.print-title{font-size:18px;margin:0 0 4px}
.print-note{color:#555;font-size:12px;margin:0 0 14px}

/* ---------- blocs de la fiche : règle en tête, exemple, astuces en pied ---------- */
.print-block{margin:0 0 16px}
.print-block .print-title{margin:0 0 6px}
.print-block .rules{margin:0}
.print-block .rules p,.print-block .rules li{font-size:12.5px}
.print-block .rules li{margin-bottom:4px}
.print-example .pgrid-wrap{margin-top:4px}
.print-example .pcard h3{font-size:12px}
.print-tips .hint,.print-tips p{font-size:12.5px;margin:0 0 6px}
.print-tips .hint{color:#374151}
/* option « Inclure la date » de l'outil d'impression */
label.check{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#374151;cursor:pointer}
label.check input{width:15px;height:15px;accent-color:#2563eb}

/* ---------- pied de page commun ----------
   Posé par initSiteFooter() (commun.js) sur toutes les pages de jeu : lien vers
   les mentions légales et rappel des licences. Jamais imprimé (bloc @media print
   ci-dessous), comme le reste de la coquille. */
.site-foot{max-width:1080px;margin:16px auto 2px;text-align:center;color:var(--muted);font-size:12px}
.site-foot a{color:inherit;text-decoration:underline}
.site-foot a:hover{color:var(--accent)}

/* ---------- impression ----------
   On isole l'aperçu par display:none, JAMAIS par visibility:hidden +
   position:absolute : cette dernière astuce duplique tout le contenu sur chaque
   page et rend break-before:page inopérant (vérifié sur Chromium). */
@media print{
  body{background:#fff;padding:0;margin:0}
  .wrap{display:none !important}
  .site-foot{display:none !important}
  .modal{display:none !important}
  #printModal{display:block !important;position:static;inset:auto;background:none;
    box-shadow:none;padding:0;overflow:visible;z-index:auto}
  #printModal .modal-card{box-shadow:none;border:none;border-radius:0;margin:0;max-width:none;overflow:visible}
  #printModal .modal-head{display:none !important}
  #printModal .modal-body{padding:0}
  #printArea{display:block;width:auto;padding:0}
  .pcard{break-inside:avoid;page-break-inside:avoid}
  .print-block{break-inside:avoid;page-break-inside:avoid}
  .corrections{break-before:page;page-break-before:always}
  @page{size:A4;margin:12mm;
    /* mention de licence en bas de chaque feuille (boîtes de marge : Chromium ≥ 131) */
    @bottom-right{content:"La Fabrique à Grilles · CC BY-SA 4.0";font:7pt sans-serif;color:#888}}
}

/* ---------- règles / astuces : une modale, deux vues ---------- */
#ruleModal[data-view="rule"] .rt-tip,
#ruleModal[data-view="tips"] .rt-rule,
#ruleModal[data-view="tips"] .rt-head{display:none}

/* ---------- attente de génération, à la place de la grille ---------- */
.board-wait{display:none;position:absolute;inset:0;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;pointer-events:none}
.waiting{position:relative;min-height:180px}
.waiting > .board-wait{display:flex}
.waiting > :not(.board-wait){opacity:.25;pointer-events:none;filter:grayscale(1)}
.waiting > :empty:not(.board-wait){display:none}
/* quatre blocs noirs reliés par les coins, qui tournent (transform seul : animé
   même pendant le calcul) */
.wait-blocks{position:relative;width:56px;height:56px;animation:waitSpin 1.6s linear infinite}
.wait-blocks i{position:absolute;width:24px;height:24px;background:#1a2738;border-radius:3px}
.wait-blocks i:nth-child(1){left:0;top:0}
.wait-blocks i:nth-child(2){left:28px;top:28px;background:var(--accent2)}
.wait-blocks i:nth-child(3){left:34px;top:6px;width:12px;height:12px;background:#8a94a6}
.wait-blocks i:nth-child(4){left:6px;top:34px;width:12px;height:12px;background:#8a94a6}
.wait-text{font-size:14px;font-weight:600;color:var(--muted)}
@keyframes waitSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.wait-blocks{animation-duration:4s}}