/*
 * Moteur MOTS FLÉCHÉS maison (liseuse web) — grille responsive : les cases sont
 * dimensionnées en `--aw-cell`, recalculé par le JS pour tenir dans la largeur
 * disponible (mobile-first, jusqu'aux grandes grilles 13×20).
 */
.aw { --aw-cell: 46px; }
.aw-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.aw-grid { border-collapse: collapse; table-layout: fixed; margin: 0 auto; background: #fff; }
.aw-grid td {
    width: var(--aw-cell); height: var(--aw-cell);
    border: 1px solid #7C8B99; padding: 0; vertical-align: top; background: #fff;
    touch-action: manipulation;
}

/* Case-définition : 1 ou 2 définitions empilées, chacune avec sa flèche.
   Le contenu est SORTI DU FLUX (position absolue) : une définition longue ne peut
   plus agrandir sa ligne — TOUTES les cases restent strictement carrées (retour
   client 2026-08-20), la grille mesure exactement lignes × case. */
/* overflow VISIBLE : les flèches (.aw-fl) débordent volontairement vers la case-lettre
   voisine ; le texte, lui, est rogné par les .aw-def-l (hors flux + overflow hidden). */
.aw-grid td.aw-def { background: #EEF3F7; position: relative; overflow: visible; }
.aw-def-l { position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1px 2px; box-sizing: border-box; overflow: hidden; }
.aw-def-l ~ .aw-def-l { border-top: 1px solid #7C8B99; } /* séparation des 2 définitions à mi-hauteur, comme le PDF */
/* Césure FRANÇAISE (retour client 2026-08-20) : un mot coupé en fin de ligne prend
   un tiret (hyphens:auto + lang=fr posé par le JS) ; plus de coupe brute sans tiret. */
.aw-def-t { font: 700 max(7px, calc(var(--aw-cell) * .19)) / 1.1 "Hanken Grotesk", system-ui, sans-serif; color: #22303C; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
/* Définitions longues : police réduite pour tenir dans la case (classes posées par le JS). */
.aw-def-t.aw-t-long { font-size: max(7px, calc(var(--aw-cell) * .165)); }
.aw-def-t.aw-t-tres-long { font-size: max(6px, calc(var(--aw-cell) * .14)); }
/* Flèches SVG posées sur le trait de la case-déf, entrant dans la case-lettre
   (même géométrie que le PDF : longueur 0,21 case). */
.aw-fl { position: absolute; width: calc(var(--aw-cell) * .3); height: calc(var(--aw-cell) * .3); z-index: 2; pointer-events: none; overflow: visible; }
.aw-fl.aw-fl-coude { width: calc(var(--aw-cell) * .4); height: calc(var(--aw-cell) * .4); }
.aw-fl path { fill: none; stroke: #10161C; stroke-width: 2.4; stroke-linecap: butt; stroke-linejoin: miter; }

/* Case-lettre saisissable. */
.aw-cell { text-align: center; vertical-align: middle; cursor: pointer; user-select: none; position: relative; }
/* Lettre CENTRÉE dans la case (flex) : avec l'ancienne ligne de base = hauteur de case,
   la queue du Q chevauchait la bordure basse (retour client 2026-08-20). */
.aw-cell span { display: flex; align-items: center; justify-content: center; height: 100%; font: 700 calc(var(--aw-cell) * .5) / 1 "Bricolage Grotesque", system-ui, sans-serif; color: #2C8FC9; }
.aw-cell.aw-fige span { color: #10161C; }
.aw-cell.aw-mot { background: #DFF0FA; }
.aw-cell.aw-cur { background: #B9E0F4; box-shadow: inset 0 0 0 2px #2C8FC9; }
.aw-cell:focus { outline: none; }
.aw-cell:focus-visible { outline: 2px solid #2C8FC9; outline-offset: -2px; }
.aw-grid td.aw-vide { background: #22303C; border-color: #22303C; }

/* Rappel de la définition active, sous la grille. */
.aw-active { margin-top: 8px; background: #fff; border: 1px solid #E6EEF2; border-radius: 12px; padding: 9px 12px; min-height: 20px; font: 400 13.5px/1.4 "Hanken Grotesk", system-ui, sans-serif; color: #22303C; text-align: center; }
.aw-active b { font-family: "Bricolage Grotesque", system-ui, sans-serif; color: #2C8FC9; }