/*
 * Habillage COMMUN des players de la Liseuse web (mobile-first). Extrait du
 * player mots croisés (historiquement en styles inline) pour être partagé par
 * les 8 jeux print : en-tête, menu, popin de règles, bandeau de fin.
 * Les moteurs de jeu apportent leurs propres styles (front/<jeu>/<jeu>.css).
 */
.l-wrap { background: #EEF3F7; border-radius: 16px; padding: 8px; position: relative; }
.l-head { display: flex; align-items: center; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; background: #fff; border: 1px solid #E6EEF2; border-radius: 14px; box-shadow: 0 4px 14px rgba(16,22,28,.05); padding: 8px 14px; }
.l-head-l { min-width: 0; }
.l-head h2 { font-family: "Bricolage Grotesque", system-ui, sans-serif; margin: 0; color: var(--encre); font-size: 15px; }
.l-head p { margin: 1px 0 0; color: #5A6470; font-size: 11.5px; }
.l-menu { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; justify-content: flex-end; margin: 0; }
.l-menu button, .l-menu a.l-lien { font: 700 12px/1 "Hanken Grotesk", system-ui, sans-serif; border: 1px solid #CFDDE4; background: #fff; color: var(--encre); border-radius: 100px; padding: 6px 11px; min-height: 32px; cursor: pointer; }
.l-menu a.l-lien { text-decoration: none; display: inline-flex; align-items: center; }
.l-menu button:hover, .l-menu a.l-lien:hover { border-color: var(--glacier-d); color: var(--glacier-d); }
.l-menu button[disabled] { opacity: .45; cursor: default; }
.l-help { position: relative; }
.l-help-menu { display: none; position: absolute; top: 110%; right: 0; z-index: 30; background: #fff; border: 1px solid var(--trait); border-radius: 12px; padding: 6px; min-width: 190px; box-shadow: 0 12px 30px rgba(16,22,28,.16); }
.l-help-menu.open { display: block; }
.l-help-menu button { display: block; width: 100%; text-align: left; border: 0; border-radius: 8px; padding: 12px 12px; min-height: 44px; }
.l-help-menu button:hover { background: var(--glacier-soft); }
.l-board { padding: 0; }
/* Le layout global (partials/head) pose table{width:100%} : les grilles de jeu
   doivent garder leur largeur naturelle (cases carrées) — council 2026-08-17. */
.l-board table { width: auto; }

/* Popin (règles du jeu, message de fin). */
.l-modal { position: fixed; inset: 0; z-index: 9999; background: rgba(16,22,28,.5); display: flex; align-items: center; justify-content: center; padding: 16px; }
.l-modal[hidden] { display: none; }
.l-modal-card { background: #fff; border-radius: 16px; box-shadow: 0 24px 70px rgba(16,22,28,.35); max-width: 480px; width: 100%; max-height: 86vh; display: flex; flex-direction: column; overflow: hidden; }
.l-modal-h { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--trait); font-size: 15px; }
.l-modal-x { margin-left: auto; border: 0; background: none; font-size: 18px; cursor: pointer; color: var(--gris); min-width: 44px; min-height: 44px; }
.l-modal-body { padding: 16px 18px; overflow: auto; font-size: 13.5px; line-height: 1.55; color: var(--encre); }
.l-modal-body ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }

/* Panneau de jeu générique (carte blanche) + bandeau d'état. */
.l-card { background: #fff; border: 1px solid #E6EEF2; border-radius: 14px; box-shadow: 0 4px 14px rgba(16,22,28,.05); padding: 12px 14px; margin-top: 8px; }
.l-card h3 { font-family: "Bricolage Grotesque", system-ui, sans-serif; margin: 0 0 8px; font-size: 14px; color: var(--encre); }
.l-note { margin: 8px 0 0; font-size: 12.5px; color: #5A6470; }
.l-flash { margin-top: 8px; border-radius: 12px; padding: 9px 12px; font: 700 13px/1.35 "Hanken Grotesk", system-ui, sans-serif; }
.l-flash-ok { background: #E7F6EC; color: #1B6B3A; }
.l-flash-ko { background: #FDECEA; color: #7A1F1F; }
.l-done { margin-top: 8px; background: linear-gradient(135deg, #2C8FC9, #1B6B3A); color: #fff; border-radius: 14px; padding: 14px 16px; text-align: center; }
.l-done b { display: block; font: 700 17px/1.3 "Bricolage Grotesque", system-ui, sans-serif; }
.l-done[hidden] { display: none; }

/* Clavier à l'écran partagé (lettres ou chiffres). */
.l-kb { margin: 10px auto 0; display: flex; flex-direction: column; gap: 6px; align-items: center; max-width: 520px; }
.l-kb-row { display: flex; gap: 5px; justify-content: center; width: 100%; }
.l-kb button { flex: 1 1 0; min-width: 0; height: 44px; border: 1px solid #CFDDE4; background: #fff; border-radius: 9px; font: 700 15px/1 "Hanken Grotesk", system-ui, sans-serif; color: var(--encre); cursor: pointer; }
.l-kb button:active { background: var(--glacier-soft); }
.l-kb button.l-kb-wide { flex: 2 1 0; font-size: 13px; }
.l-kb[hidden] { display: none; }
.l-kb button[aria-pressed="true"] { background: #2C8FC9; border-color: #2C8FC9; color: #fff; }

/* Mobile (lecteur PDF sur téléphone) : clavier écran obligatoire, pas de bouton. */
@media (max-width: 760px) {
    .l-hide-mobile { display: none !important; }
    /* Menu Aide : ancré à droite il sortait de l'écran à gauche quand la nav passe
       à la ligne sous le titre (libellés tronqués) — council 2026-08-17. */
    .l-help-menu { position: fixed; left: 12px; right: 12px; top: auto; min-width: 0; }
    /* Cibles tactiles ≥ 44 px sur mobile (menu du jeu). */
    .l-menu button, .l-menu a.l-lien { min-height: 44px; padding: 8px 6px; font-size: 12px; }
    /* Boutons d'en-tête sur UNE SEULE ligne (retour client 2026-08-17) : la nav
       passe sous le titre en pleine largeur, boutons répartis, sans retour à la ligne. */
    .l-head { flex-direction: column; align-items: stretch; }
    .l-menu { flex-wrap: nowrap; justify-content: stretch; width: 100%; }
    /* Tous les éléments du menu (boutons ET liens) partagent la largeur à parts égales : tailles harmonisées. */
    .l-menu > button, .l-menu > .l-help, .l-menu > a.l-lien { flex: 1 1 0; min-width: 0; justify-content: center; }
    .l-menu > .l-help > button { width: 100%; }
    .l-menu button, .l-menu a.l-lien { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 6px; padding-right: 6px; }
}

/* Popins de FIN (gagné / perdu) : en SUPERPOSITION, centrées sur la ZONE DE JEU
   (.l-wrap) et non sur la page — retour client 2026-08-17. Le voile couvre le jeu. */
.l-fin { position: absolute; inset: 0; z-index: 10000; border-radius: 16px; }
.l-fin-card { position: relative; background: #fff; color: #10161C; border-radius: 18px; box-shadow: 0 24px 70px rgba(16,22,28,.35); max-width: 420px; width: 100%; padding: 26px 22px 22px; text-align: center; font: 400 15px/1.5 "Hanken Grotesk", system-ui, sans-serif; animation: l-fin-in .28s ease-out; }
.l-fin-x { position: absolute; top: 4px; right: 4px; color: inherit; opacity: .6; }
.l-fin-x:hover { opacity: 1; }
.l-fin-emoji { font-size: 52px; line-height: 1; }
.l-fin-emoji:empty { display: none; }
.l-fin-body { margin-top: 12px; }
.l-fin-body p { margin: 0 0 6px; }
.l-fin-body a { color: inherit; text-decoration: underline; font-weight: 700; }
.l-fin-body img { max-width: 100%; height: auto; border-radius: 10px; }
.l-fin-actions { margin-top: 16px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.l-fin-actions:empty { display: none; }
.l-fin-btn { display: inline-block; border: 0; border-radius: 100px; padding: 12px 22px; min-height: 44px; font: 700 14px/1 "Hanken Grotesk", system-ui, sans-serif; cursor: pointer; background: #2C8FC9; color: #fff; text-decoration: none; }
.l-fin-btn:hover { filter: brightness(.95); }
@keyframes l-fin-in { from { transform: translateY(14px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }

/* Animation COMMUNE « mot trouvé » (retour client 2026-08-17) : un rond coloré
   pulse sur chaque lettre, de lettre en lettre (délai posé par L.clignoter). */
.l-rond-hote { position: relative; }
.l-rond { position: absolute; inset: 12%; border-radius: 50%; border: 3px solid #2C8FC9; opacity: 0; pointer-events: none; z-index: 3; animation: l-rond .5s ease-out 2; }
@keyframes l-rond { 0% { opacity: 0; transform: scale(.4); } 40% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.12); } }
.l-lettre { display: inline-block; position: relative; padding: 0 1px; }
@media (prefers-reduced-motion: reduce) { .l-rond { animation: none; } }

/* Cadres blancs des plateaux : les jeux occupent TOUTE la zone (bord à bord du
   fond gris), comme Mots coupés / Alphamo — retour client 2026-08-17. */
.l-board .aw, .l-board .sk, .l-board .meg-left { background: #fff; border: 1px solid #E6EEF2; border-radius: 14px; box-shadow: 0 4px 14px rgba(16,22,28,.05); padding: 12px 14px 14px; margin-top: 8px; }
.l-board .cw-root.cw-fill { margin-top: 8px; }
/* Mots croisés (écran large) : définitions 1/3, grille 2/3 — retour client 2026-08-17. */
@media (min-width: 761px) {
  .l-board .cw-fill .cw-layout { justify-content: stretch; }
  .l-board .cw-fill .cw-side { flex: 0 0 calc(33.333% - 6px) !important; width: auto !important; max-width: none; }
  .l-board .cw-fill .cw-main { flex: 1 1 auto !important; min-width: 0; }
}/* Second bouton de popin (retour client 2026-09-17) : contour aux couleurs du bouton, sous le premier. */
.l-fin-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.l-fin-btn.l-fin-btn-second { background: #fff; color: #2C8FC9; border: 2px solid #2C8FC9; padding: 10px 22px; }

/* ---- Collecte e-mail dans la popin de fin (retour client 11/10) ---- */
.l-fin-collecte { margin: 14px 2px 4px; padding: 14px 16px 12px; border-radius: 14px; background: linear-gradient(180deg, #F3FAFD, #fff); border: 1px solid #D7ECF4; text-align: left; }
.l-fc-titre { display: flex; align-items: center; gap: 8px; font: 800 14.5px/1.3 "Bricolage Grotesque", system-ui, sans-serif; color: #10161C; }
.l-fc-emoji { font-size: 18px; line-height: 1; }
.l-fc-texte { font: 500 12.5px/1.5 "Hanken Grotesk", system-ui, sans-serif; color: #44505C; margin: 6px 0 10px; }
.l-fc-ligne { display: flex; gap: 8px; }
.l-fc-email { flex: 1; min-width: 0; padding: 10px 14px; border: 1px solid #CFE3EC; border-radius: 100px; font: 500 13px "Hanken Grotesk", system-ui, sans-serif; color: #10161C; background: #fff; }
.l-fc-email:focus { outline: 2px solid #3FA9C9; outline-offset: 0; border-color: #3FA9C9; }
.l-fc-btn { flex: none; border: 0; cursor: pointer; border-radius: 100px; padding: 10px 18px; font: 700 13px "Hanken Grotesk", system-ui, sans-serif; background: #2C8FC9; color: #fff; transition: filter .15s; }
.l-fc-btn:hover { filter: brightness(1.08); }
.l-fc-btn:disabled { opacity: .6; cursor: wait; }
.l-fc-note { font: 400 11px/1.4 "Hanken Grotesk", system-ui, sans-serif; color: #7A8794; margin: 7px 0 0; }
.l-fc-err { font: 600 12px/1.4 "Hanken Grotesk", system-ui, sans-serif; color: #B5392A; margin: 7px 0 0; }
.l-fc-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.l-fc-merci { font: 600 13.5px/1.5 "Hanken Grotesk", system-ui, sans-serif; color: #1F7A53; }
.l-fc-turnstile { margin-top: 8px; }
.l-fc-turnstile:empty { margin-top: 0; }
@media (max-width: 460px) { .l-fc-ligne { flex-direction: column; } .l-fc-btn { width: 100%; } }