/* ============================================================
   assets/style.css — CSS commun à toutes les apps Mahjong En Seine
   Préfixe BEM : .mes-*  (évite les conflits avec le thème WordPress)
   ============================================================ */

/* ── Reset ciblé ────────────────────────────────────────────────────────────── */
.mes-app *,
.mes-app *::before,
.mes-app *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── Conteneur principal ────────────────────────────────────────────────────── */
.mes-app {
    font-family: 'Segoe UI', Arial, sans-serif;
    color: #222;
    max-width: 1100px;
    margin: 0 auto;
    background: #f5f5f5;
    border-radius: 12px;
    padding: 28px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .10);
}

/* ── En-tête ────────────────────────────────────────────────────────────────── */
.mes-entete {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.mes-titre {
    font-size: 1.3rem;
    color: #1565c0;
}
.mes-compteur {
    font-size: .85rem;
    color: #555;
    padding: 4px 12px;
    background: #e0e0e0;
    border-radius: 20px;
    white-space: nowrap;
}

/* ── Zone table de jeu ──────────────────────────────────────────────────────── */
.mes-zone-main {
    background-color: #2d7a3a;
    background-image:
        repeating-linear-gradient(45deg,
            rgba(255, 255, 255, .03) 0px, rgba(255, 255, 255, .03) 1px,
            transparent 1px, transparent 8px),
        repeating-linear-gradient(-45deg,
            rgba(255, 255, 255, .03) 0px, rgba(255, 255, 255, .03) 1px,
            transparent 1px, transparent 8px);
    border-radius: 10px;
    padding: 16px 16px 24px;
    margin-bottom: 20px;
    border: 2px solid #1e5f2e;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, .25);
}

/* ── Vents ──────────────────────────────────────────────────────────────────── */
.mes-vents {
    display: flex;
    gap: 32px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.mes-vent-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.mes-vent-label {
    color: #c8e6c9;
    font-size: .8rem;
    text-align: center;
    white-space: nowrap;
}
.mes-vent-valeur {
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
}

/* ── Sections de tuiles (Exposés / Cachés) ──────────────────────────────────── */
.mes-tuiles-section {
    border: 1.5px solid #a5d6a7;
    border-radius: 8px;
    padding: 10px 12px 12px;
    margin-bottom: 10px;
}
.mes-tuiles-section:last-of-type {
    margin-bottom: 0;
}
.mes-tuiles-label {
    font-size: .78rem;
    color: #fff;
    font-weight: 700;
    letter-spacing: .03em;
    margin-bottom: 8px;
}
.mes-main-tuiles {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}
.mes-tuiles-section--cachees .mes-main-tuiles {
    min-height: 210px;
}

/* ── Groupes de tuiles ──────────────────────────────────────────────────────── */
.mes-groupe {
    display: flex;
    flex-direction: row;
    gap: 0;
    padding: 4px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .06);
    align-items: flex-end;
}
.mes-groupe--avec-fin {
    flex-direction: column;
    align-items: center;
}

.mes-tuile-fin-haut {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: 4px;
}
.mes-groupe-bas {
    display: flex;
    flex-direction: row;
    gap: 0;
    align-items: flex-end;
}

/* ── Tuiles ─────────────────────────────────────────────────────────────────── */
.mes-tuile {
    height: 92px;
    width: auto;
    margin-right: -30px;
    position: relative;
    z-index: 1;
}
.mes-groupe-bas .mes-tuile:last-child,
.mes-groupe > .mes-tuile:last-child {
    margin-right: 0;
}
.mes-groupe .mes-tuile:hover,
.mes-groupe-bas .mes-tuile:hover {
    z-index: 2;
}

/* Tuile gagnante */
.mes-tuile--fin {
    margin-right: 0 !important;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .6));
}
.mes-tuile-fin--tiree .mes-tuile--fin {
    height: 92px;
}
.mes-tuile-fin--donnee .mes-tuile--fin {
    transform: rotate(90deg);
    transform-origin: center center;
    height: 92px;
    margin-top: -20px;
    margin-bottom: -20px;
}

/* ── Boutons ────────────────────────────────────────────────────────────────── */
.mes-btn {
    padding: 10px 22px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: .95rem;
    font-weight: 600;
    transition: background .2s, transform .1s;
    text-decoration: none;
    display: inline-block;
    line-height: 1.4;
}
.mes-btn:active { transform: scale(.97); }
.mes-btn--sm    { padding: 5px 14px; font-size: .85rem; }

.mes-btn--primary   { background: #1565c0; color: #fff; }
.mes-btn--secondary { background: #e0e0e0; color: #333; }
.mes-btn--success   { background: #1e5f2e; color: #fff; }
.mes-btn--orange    { background: #C8A84B; color: #fff; }

.mes-btn--primary:hover   { background: #0d47a1; color: #fff; }
.mes-btn--secondary:hover { background: #bdbdbd; color: #333; }
.mes-btn--success:hover   { background: #154a22; color: #fff; }
.mes-btn--orange:hover    { background: #a8893a; color: #fff; }

/* ── Loader ─────────────────────────────────────────────────────────────────── */
.mes-loader {
    text-align: center;
    color: #888;
    padding: 16px 0;
    font-size: .95rem;
}

/* ── Saisie réponse ─────────────────────────────────────────────────────────── */
.mes-reponse-section {
    margin-top: 24px;
}
.mes-reponse-label {
    display: block;
    margin-bottom: 10px;
    font-size: .95rem;
    color: #333;
}
.mes-reponse-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.mes-reponse-row input[type="number"] {
    width: 120px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 2px solid #ccc;
    background: #fff;
    color: #222;
    font-size: 1.1rem;
    outline: none;
    transition: border .2s;
}
.mes-reponse-row input[type="number"]:focus {
    border-color: #1565c0;
}

/* ── Résultat vérification ──────────────────────────────────────────────────── */
.mes-resultat {
    margin-top: 14px;
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
}
.mes-resultat--correct {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}
.mes-resultat--faux {
    background: #ffebee;
    color: #c62828;
    border: 1px solid #ef9a9a;
}

/* ── Solution ───────────────────────────────────────────────────────────────── */
.mes-solution-box {
    margin-top: 20px;
    padding: 18px;
    background: #2e7d32;
    border-radius: 8px;
    border-left: 4px solid #1b5e20;
}
.mes-solution-valeur {
    font-size: 1.4rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 10px;
}
.mes-solution-liste {
    list-style: none !important;
    padding: 0;
}
.mes-solution-liste li {
    list-style: none !important;
    padding: 0;
}
.mes-solution-liste li::marker {
    content: none;
}
.mes-solution-liste li {
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.6;
    padding: 3px 0 3px 16px;
    position: relative;
}
.mes-solution-liste li::before {
    content: '·';
    position: absolute;
    left: 4px;
    color: #a5d6a7;
    font-weight: bold;
}

/* ── Signalement ────────────────────────────────────────────────────────────── */
.mes-signalement {
    margin-top: 28px;
    padding: 20px;
    border-radius: 10px;
    background: #eeeeee;
}
.mes-signalement h3 {
    font-size: 1rem;
    color: #444;
    margin-bottom: 14px;
}
.mes-form-group {
    margin-bottom: 12px;
}
.mes-form-group label {
    display: block;
    font-size: .85rem;
    color: #555;
    margin-bottom: 4px;
}
.mes-form-group input,
.mes-form-group textarea {
    width: 100%;
    padding: 9px 13px;
    border-radius: 6px;
    border: 1.5px solid #ccc;
    background: #fff;
    color: #222;
    font-size: .9rem;
    outline: none;
    transition: border .2s;
}
.mes-form-group input:focus,
.mes-form-group textarea:focus {
    border-color: #1565c0;
}
.mes-form-group textarea {
    resize: vertical;
    min-height: 80px;
}
.mes-signalement-retour {
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: .9rem;
    font-weight: 600;
}
.mes-signalement-retour--ok    { background: #e8f5e9; color: #2e7d32; }
.mes-signalement-retour--erreur { background: #ffebee; color: #c62828; }

/* Honeypot : caché visuellement mais présent dans le DOM */
.mes-hp {
    position: absolute;
    left: -9999px;
    visibility: hidden;
    pointer-events: none;
}

/* ── Bouton nouvelle main ───────────────────────────────────────────────────── */
.mes-btn-aleatoire-section {
    margin-top: 20px;
}

/* ── Utilitaires responsive show/hide ──────────────────────────────────────── */
@media (max-width: 600px)  { .mes--desktop-only { display: none !important; } }
@media (min-width: 601px)  { .mes--mobile-only  { display: none !important; } }

/* ── Responsive — portrait mobile ───────────────────────────────────────────── */
@media (max-width: 600px) {
    .mes-app             { padding: 8px; }
    .mes-entete          { margin-bottom: 10px; }
    .mes-zone-main       { padding: 8px 8px 12px; margin-bottom: 10px; }
    .mes-vents           { gap: 10px; margin-bottom: 12px; }
    .mes-tuiles-section  { padding: 6px 8px 8px; margin-bottom: 6px; }
    .mes-tuile           { height: 44px; margin-right: -14px; }
    .mes-main-tuiles     { gap: 4px; }
    .mes-tuiles-section--cachees .mes-main-tuiles { min-height: 100px; }
    .mes-reponse-row     { flex-direction: column; align-items: flex-start; }

    /* identification_attentes : boutons Vérifier + Solution côte à côte */
    .ia-reponse-header              { flex-direction: column; align-items: stretch; }
    .ia-reponse-header .mes-reponse-row { flex-direction: row; flex-wrap: wrap; }
    .ia-reponse-header .mes-btn     { flex: 1 1 auto; text-align: center; }
    /* Bouton mobile Main aléatoire pleine largeur */
    .mes-btn-aleatoire-section .mes-btn { width: 100%; }

    /* Tuile gagnante : même hauteur que les autres */
    .mes-tuile-fin--tiree .mes-tuile--fin,
    .mes-tuile-fin--donnee .mes-tuile--fin { height: 44px; }
    .mes-tuile-fin--donnee .mes-tuile--fin { margin-top: -6px; margin-bottom: -6px; }
}

/* ── Responsive — paysage mobile ────────────────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
    .mes-app             { padding: 6px; }
    .mes-entete          { margin-bottom: 6px; }
    .mes-zone-main       { padding: 6px 6px 8px; margin-bottom: 6px; }
    .mes-vents           { gap: 8px; margin-bottom: 8px; }
    .mes-vent-label      { font-size: .7rem; }
    .mes-vent-valeur     { font-size: .85rem; }
    .mes-tuiles-section  { padding: 4px 6px 6px; margin-bottom: 4px; }
    .mes-tuile           { height: 36px; margin-right: -12px; }
    .mes-main-tuiles     { gap: 3px; }
    .mes-tuiles-section--cachees .mes-main-tuiles { min-height: 80px; }
    .mes-reponse-row     { flex-direction: column; align-items: flex-start; }

    /* identification_attentes : tous les boutons sur une seule ligne en paysage */
    .ia-reponse-header              { flex-wrap: nowrap; align-items: center; }
    .ia-reponse-header .mes-reponse-row { flex-direction: row; flex-wrap: nowrap; gap: 6px; }
    .ia-reponse-header .mes-reponse-label { white-space: nowrap; font-size: .8rem; }
    .ia-reponse-header .mes-btn     { padding: 7px 12px; font-size: .8rem; white-space: nowrap; }

    /* Tuile gagnante en paysage */
    .mes-tuile-fin--tiree .mes-tuile--fin,
    .mes-tuile-fin--donnee .mes-tuile--fin { height: 36px; }
    .mes-tuile-fin--donnee .mes-tuile--fin { margin-top: -5px; margin-bottom: -5px; }
}

/* ── App lecture_mains ──────────────────────────────────────────────────────── */
/* À ajouter à la fin de style.css                                              */

/* Carte par main */
.mes-lecture-main {
    background: #fff;
    border-radius: 10px;
    margin-bottom: 28px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    overflow: hidden;
}

/* Numéro + label */
.mes-lecture-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: #1e5f2e;
    color: #fff;
}
.mes-lecture-id {
    font-size: 1rem;
    font-weight: 700;
    background: rgba(255,255,255,.15);
    border-radius: 6px;
    padding: 2px 10px;
    white-space: nowrap;
}
.mes-lecture-label {
    font-size: .95rem;
    font-weight: 600;
}

/* Corps : plateau | solution */
.mes-lecture-corps {
    display: flex;
    gap: 0;
    align-items: stretch;
}
.mes-lecture-plateau {
    flex: 1 1 auto;
    padding: 16px;
    min-width: 0;
}
.mes-lecture-plateau .mes-zone-main {
    margin-bottom: 0;
}

/* Solution à droite */
.mes-lecture-solution {
    flex: 0 0 240px;
    border-left: 2px solid #e0e0e0;
    padding: 16px;
    background: #f9f9f9;
    display: flex;
    align-items: flex-start;
}
.mes-solution-box--visible {
    display: block !important; /* override le display:none du JS */
    width: 100%;
}

/* Solution box en gris dans lecture_mains (override du vert par défaut) */
.mes-lecture-solution .mes-solution-box {
    background: #eeeeee;
    border-left: 4px solid #bdbdbd;
}
.mes-lecture-solution .mes-solution-valeur {
    color: #1e5f2e;
}
.mes-lecture-solution .mes-solution-valeur--negatif {
    color: #c62828;
}
.mes-lecture-solution .mes-solution-liste li {
    color: #333;
    padding-left: 0;
}
.mes-lecture-solution .mes-solution-liste li::before {
    content: none;
}


/* Pagination */
.mes-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #ddd;
}
.mes-pagination-info {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.mes-pagination-info a {
    color: #1565c0;
    text-decoration: none;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
}
.mes-pagination-info a:hover {
    background: #e3f2fd;
}
.mes-pagination-active {
    color: #1e5f2e;
    font-size: 1.05rem;
}
.mes-pagination--entete {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    margin-left: auto;
    justify-content: flex-end;
}

/* Bouton signalement dans la colonne solution */
.mes-lecture-solution {
    flex-direction: column;
    gap: 12px;
}
.mes-btn-ouvrir-signalement {
    align-self: flex-start;
    white-space: nowrap;
    text-transform: none;
}

/* Responsive : plateau au-dessus, solution en dessous */
@media (max-width: 700px) {
    .mes-lecture-corps     { flex-direction: column; }
    .mes-lecture-solution  { flex: none; border-left: none; border-top: 2px solid #e0e0e0; }
}

/* ── App : identification_attentes ──────────────────────────────────────────── */

/* Main du joueur : overlap natif + retour à la ligne */
#ia-cachees {
    min-height: 0;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0;
    overflow: hidden;
}
#ia-cachees .mes-tuile {
    flex-shrink: 0;
}

/* Conteneur flex-column : cartouche en premier (mobile-first),
   header remonte via order sur écran large */
#ia-reponse-section {
    display: flex;
    flex-direction: column;
}
@media (min-width: 601px) {
    #ia-reponse-section .ia-reponse-header { order: -1; }
}

/* Ligne label + boutons d'action */
.ia-reponse-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}
.ia-reponse-header .mes-reponse-label {
    margin: 0;
    white-space: nowrap;
}
.ia-reponse-header .mes-reponse-row {
    margin: 0;
}

/* Cartouche de réponse */
.ia-cartouche {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 52px;
    padding: 8px 12px;
    background: #f5f5f5;
    border: 2px dashed #bdbdbd;
    border-radius: 8px;
    margin-bottom: 12px;
    align-items: center;
}
.ia-cartouche:empty::before {
    content: 'Aucune tuile sélectionnée';
    color: #aaa;
    font-size: .85rem;
    font-style: italic;
}
.ia-cartouche-tuile {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    position: relative;
    line-height: 0;
    outline: none;
}
.ia-cartouche-tuile:focus-visible {
    outline: none;
}
.ia-cartouche-tuile .mes-tuile {
    margin-right: 0;
    transition: opacity .15s;
}
.ia-cartouche-tuile:hover .mes-tuile {
    opacity: .5;
}
.ia-cartouche-tuile::after {
    content: '×';
    position: absolute;
    top: -5px;
    right: -5px;
    background: #e53935;
    color: #fff;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
}

/* Nouvel item cartouche avec options */
.ia-cartouche-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    background: #fff;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    padding: 6px 8px 8px;
}
.ia-cartouche-item-top {
    position: relative;
    display: flex;
    align-items: center;
}
.ia-cartouche-item-top .mes-tuile {
    margin-right: 0;
}
.ia-cartouche-remove {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #e53935;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
}
.ia-cartouche-remove:hover {
    background: #b71c1c;
}
.ia-cartouche-options {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
}
.ia-cartouche-options label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .75rem;
    color: #333;
    cursor: pointer;
    white-space: nowrap;
}
.ia-cartouche-options input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
    accent-color: #1565c0;
}

/* Neutralise l'overlap (-30px) hors contexte groupe */
.mes-vent-item .mes-tuile,
.ia-tuile-picker-btn .mes-tuile { margin-right: 0; }

/* Sélecteur de tuiles */
.ia-tuile-picker {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
    margin-bottom: 16px;
}
.ia-tuile-picker-famille {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.ia-tuile-picker-label {
    font-size: .75rem;
    color: #888;
    width: 72px;
    flex-shrink: 0;
}
.ia-tuile-picker-tuiles {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}
.ia-tuile-picker-btn {
    background: none;
    border: 2px solid transparent;
    border-radius: 4px;
    padding: 1px;
    cursor: pointer;
    transition: border-color .15s, transform .1s;
    line-height: 0;
    outline: none;
}
.ia-tuile-picker-btn:hover {
    transform: scale(1.08);
}
.ia-tuile-picker-btn--selected {
    border-color: transparent;
    background: none;
}
.ia-tuile-picker-btn .mes-tuile {
    display: block;
}

/* Premier <li> de la solution : tuiles sans puce */
.ia-solution-tuiles-li {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
    padding-left: 0 !important;
    margin-bottom: 8px;
}
.ia-solution-tuiles-li::before { display: none; }
.ia-solution-tuiles-li .mes-tuile { margin-right: 0; }

/* Item tuile + label de mode dans la solution */
.ia-solution-attente-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.ia-solution-attente-labels {
    font-size: .7rem;
    color: #c8e6c9;
    text-align: center;
    white-space: nowrap;
}

/* ── Modale signalement (lecture_mains) ─────────────────────────────────────── */
.mes-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mes-modal {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .25);
    width: min(480px, 92vw);
    max-height: 90vh;
    overflow-y: auto;
}
.mes-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid #eee;
}
.mes-modal-header h3 {
    font-size: 1rem;
    color: #444;
    margin: 0;
}
.mes-modal-close {
    background: none;
    border: none;
    font-size: 1.6rem;
    cursor: pointer;
    color: #888;
    line-height: 1;
    padding: 0 4px;
}
.mes-modal-close:hover { color: #333; }
.mes-modal-body {
    padding: 18px 22px 22px;
}

/* Tuiles individuelles sans overlap (contrairement aux groupes) */
.mes-main-tuiles--attente {
    gap: 4px;
}
.mes-main-tuiles--attente .mes-tuile {
    margin-right: 0;
}
 
/* Bloc tuiles attendues */
.mes-lma-attentes {
    display: flex;
    flex-direction: row;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.mes-lma-attente-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.mes-lma-attente-item .mes-tuile {
    height: 52px;
    margin-right: 0;
}
.mes-lma-attente-mode {
    font-size: .75rem;
    color: #444;
    font-style: italic;
    text-align: center;
}