/* orthogone.css - une seule feuille pour toutes les pages. * * Les couleurs viennent de UParams.SetColors du programme Delphi, converties de * BGR en RGB. Les huit palettes d'origine sont conservees ; le choix est pose * sur par commun.js avant le premier rendu, pour * eviter que la page clignote au chargement. * * Aucune ressource externe : ni police, ni script, ni feuille distante. Le site * fonctionne derriere un pare-feu et ne fuite rien vers un tiers. */ :root { --bg: #000080; --panel: #F0FFFF; --grille: #004080; --fixe: #0080C0; --texte-grille: #FFFFFF; --encre: #101010; --encre-douce: #4A4A4A; --clair: #FFFFFF; --ombre: #7A8080; --creux: #506060; --pris-joueur: #40709F; --pris-ordi: #002549; --ui: Tahoma, Verdana, "DejaVu Sans", sans-serif; --chiffres: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "DejaVu Sans Mono", monospace; --u: 8px; } html[data-palette="noir"] { --bg:#B2B2B2; --panel:#DCDCDC; --grille:#000000; --fixe:#808080; } html[data-palette="rouge"] { --bg:#FF8080; --panel:#FFF2F2; --grille:#A60000; --fixe:#8A0000; } html[data-palette="vert"] { --bg:#CCFFCC; --panel:#ECFFEC; --grille:#01453A; --fixe:#019680; } html[data-palette="jaune"] { --bg:#ECEC00; --panel:#FFFFCC; --grille:#AAAA00; --fixe:#808000; } html[data-palette="bleu"] { --bg:#000080; --panel:#F0FFFF; --grille:#004080; --fixe:#0080C0; } html[data-palette="pourpre"] { --bg:#400040; --panel:#9E3663; --grille:#4A1A2F; --fixe:#5E203A; --encre:#FFFFFF; --encre-douce:#E4C6D2; } html[data-palette="turquoise"]{ --bg:#006666; --panel:#BFFFFF; --grille:#008080; --fixe:#00A8A8; } html[data-palette="gris"] { --bg:#2D2D2D; --panel:#C0C0C0; --grille:#1F1F1F; --fixe:#414141; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; padding: calc(var(--u) * 3) var(--u); min-height: 100vh; background: var(--bg); font-family: var(--ui); font-size: 13px; line-height: 1.5; color: var(--encre); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2); } .fenetre { width: 100%; max-width: 940px; background: var(--panel); border: 2px solid; border-color: var(--clair) var(--creux) var(--creux) var(--clair); box-shadow: 0 10px 34px rgba(0, 0, 0, .45); } .barre-titre { display: flex; align-items: center; gap: var(--u); padding: 5px 6px; margin: 2px; background: linear-gradient(90deg, var(--grille) 0%, var(--fixe) 100%); color: #FFFFFF; } .barre-titre h1 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } .barre-titre .sous { font-weight: 400; letter-spacing: .04em; text-transform: none; opacity: .8; margin-left: 10px; } .barre-titre .pousse { flex: 1; } nav.menu { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; margin: 0 2px; } nav.menu a { padding: 5px 11px; font-size: 12px; text-decoration: none; color: var(--encre); background: var(--panel); border: 2px solid; border-color: var(--clair) var(--creux) var(--creux) var(--clair); } nav.menu a[aria-current="page"] { border-color: var(--creux) var(--clair) var(--clair) var(--creux); font-weight: 700; } nav.menu .pousse { flex: 1; } nav.menu .moi { font-size: 12px; padding: 5px 8px; color: var(--encre-douce); border: 0; } main { padding: 0 var(--u) var(--u); } .bloc { margin-bottom: calc(var(--u) * 2); } h2 { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--encre-douce); } h3 { margin: 16px 0 4px; font-size: 13px; } p { margin: 6px 0; max-width: 70ch; } button { font-family: var(--ui); font-size: 12px; color: var(--encre); background: var(--panel); padding: 6px 12px; min-height: 30px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; border: 2px solid; border-color: var(--clair) var(--creux) var(--creux) var(--clair); } button:active:not(:disabled) { border-color: var(--creux) var(--clair) var(--clair) var(--creux); } button:disabled { color: var(--creux); cursor: default; } button.primaire { font-weight: 700; } input[type="text"], input[type="email"], select { font-family: var(--ui); font-size: 13px; color: var(--encre); background: #FFFFFF; padding: 6px 8px; min-height: 30px; border: 2px solid; border-color: var(--creux) var(--clair) var(--clair) var(--creux); } input[type="text"], input[type="email"] { width: min(320px, 100%); } :focus-visible { outline: 2px dotted var(--encre); outline-offset: -5px; } /* --- grille ---------------------------------------------------------- */ .jeu { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--u); } .cadre-grille { padding: var(--u); background: var(--grille); border: 2px solid; border-color: var(--creux) var(--clair) var(--clair) var(--creux); display: flex; justify-content: center; } /* LE SELECTEUR PORTE SUR L'IDENTIFIANT, PAS SUR UNE CLASSE. L'element est designe par `id="grille"` dans les deux pages et par `$('#grille')` dans les scripts. La feuille visait `.grille`, une classe que personne ne posait : `display: grid` ne s'appliquait donc jamais, et les trente-six cases retombaient en une seule colonne. Rien ne le signalait - ni la console, ni les essais, qui comptaient les cases sans regarder leur disposition. */ #grille { display: grid; gap: 2px; width: 100%; max-width: 500px; } .case { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-family: var(--chiffres); font-size: clamp(13px, 3.4vw, 21px); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--texte-grille); background: var(--grille); border: 1px solid transparent; padding: 0; } .case.entete { background: var(--fixe); font-size: clamp(10px, 2.2vw, 13px); font-weight: 700; opacity: .55; } .case.piege { color: #FFC9C9; } /* LES CASES JOUABLES DOIVENT SE VOIR SANS QU'ON LES CHERCHE. La regle du jeu est peu commune : on ne rejoue que sur la ligne ou la colonne du dernier coup. Un joueur qui decouvre le jeu ne la devine pas, il la subit - il clique, on lui refuse, il recommence. Trois choses la rendent lisible d'un coup d'oeil, et elles se completent : - la case jouable est eclairee et cerclee de blanc ; - la case libre HORS de portee est estompee ; - les reperes de la ligne et de la colonne actives sont mis en avant. La derniere est celle qui enseigne la regle : elle dessine la croix. */ .case.jouable { cursor: pointer; background: var(--fixe); color: #FFFFFF; font-weight: 700; box-shadow: inset 0 0 0 2px var(--texte-grille); filter: brightness(1.12); } .case.jouable:hover { filter: brightness(1.35); } .case.jouable:active { filter: brightness(1.5); } /* Un piege a portee reste jouable, et doit le rester : c'est parfois le seul coup, et souvent le bon a laisser. Il s'annonce en rouge plutot que de se fondre dans les autres cases eclairees. */ .case.jouable.piege { background: #8C2020; color: #FFE0E0; } /* Libre mais hors de portee. L'estompe fait ressortir les jouables sans ajouter de couleur : c'est ce qui evite que la grille devienne un sapin de Noel. */ .case.inerte { opacity: .38; } .case.prise-joueur { background: var(--pris-joueur); opacity: .9; } .case.prise-ordi { background: var(--pris-ordi); opacity: .75; } /* Le dernier coup joue : c'est de lui que part la croix. */ .case.dernier { box-shadow: inset 0 0 0 3px #FFD34D; } /* Les reperes de la ligne et de la colonne ou l'on peut jouer. */ .case.entete.axe { opacity: 1; color: #FFD34D; } /* --- panneau lateral -------------------------------------------------- */ .cote { display: flex; flex-direction: column; gap: var(--u); min-width: 0; } .scores { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; } .score { padding: 7px 10px; background: var(--panel); border: 2px solid; border-color: var(--creux) var(--clair) var(--clair) var(--creux); } .score .qui { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-douce); } .score .valeur { font-family: var(--chiffres); font-size: 27px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; } .score.mene .valeur { color: var(--grille); } .liste { flex: 1; min-height: 180px; max-height: 300px; overflow-y: auto; background: #FFFFFF; border: 2px solid; border-color: var(--creux) var(--clair) var(--clair) var(--creux); } table { width: 100%; border-collapse: collapse; font-size: 12px; } th { position: sticky; top: 0; background: var(--panel); text-align: left; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-douce); padding: 5px 8px; border-bottom: 2px solid var(--creux); white-space: nowrap; } td { padding: 4px 8px; border-bottom: 1px solid #EBEBEB; white-space: nowrap; color: #101010; } td.num { font-family: var(--chiffres); font-variant-numeric: tabular-nums; text-align: right; } td.vide { color: #666; font-style: italic; text-align: center; padding: 22px 8px; } tr.moi td { font-weight: 700; background: #FFF6D5; } tr.passe td { color: #666; font-style: italic; } /* --- barre d'etat ----------------------------------------------------- */ .etat { display: flex; gap: 3px; padding: 3px; margin: 0 2px 2px; font-size: 12px; } .etat > span { padding: 5px 9px; background: var(--panel); border: 2px solid; border-color: var(--creux) var(--clair) var(--clair) var(--creux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .etat .message { flex: 1; min-width: 0; } .etat .tour { font-weight: 700; min-width: 92px; } /* --- divers ----------------------------------------------------------- */ .avis { padding: 9px 12px; margin-bottom: var(--u); border: 2px solid; border-color: var(--creux) var(--clair) var(--clair) var(--creux); background: #FFF6D5; color: #101010; } .avis.bon { background: #DFF5DF; } .avis.mauvais { background: #FFE2E2; } .palettes { display: flex; flex-wrap: wrap; gap: 5px; } .palettes button { width: 46px; height: 32px; padding: 0; } .palettes button[aria-pressed="true"] { border-color: var(--creux) var(--clair) var(--clair) var(--creux); } .coche { display: flex; align-items: flex-start; gap: 9px; margin: 10px 0; cursor: pointer; max-width: 70ch; } .coche input { width: 16px; height: 16px; margin-top: 2px; flex: none; } .aparte { color: var(--encre-douce); font-size: 12px; } .rangs { font-family: var(--chiffres); } footer { max-width: 940px; width: 100%; color: #FFF; opacity: .6; font-size: 11px; text-align: center; } footer a { color: inherit; } @media (max-width: 760px) { body { padding: var(--u) 0; } .fenetre, footer { max-width: none; } .jeu { grid-template-columns: minmax(0, 1fr); } .etat { flex-wrap: wrap; } .etat .message { flex-basis: 100%; } } /* L'APPARITION DES CASES JOUABLES EST SIGNALEE UNE FOIS, PUIS SE TAIT. Une grille qui clignote en permanence fatigue et finit par etre ignoree. L'animation ne joue qu'au moment ou les cases sont redessinees, c'est-a-dire quand la main revient au joueur : c'est un signal, pas une decoration. */ @keyframes apparition { from { box-shadow: inset 0 0 0 2px var(--texte-grille), 0 0 0 7px rgba(255, 211, 77, .5); } to { box-shadow: inset 0 0 0 2px var(--texte-grille), 0 0 0 0 rgba(255, 211, 77, 0); } } .case.jouable { animation: apparition .6s ease-out 1; } /* CE REGLAGE N'EST PAS UN CONFORT. Une animation qui se repete declenche des malaises chez certaines personnes - troubles vestibulaires, migraine avec aura. Le systeme le signale, il suffit de l'ecouter. */ @media (prefers-reduced-motion: reduce) { .case.jouable { animation: none; } * { transition: none !important; } }