/* =========================================================
   Alanzo Cartes — jeu de cartes animé
   Toutes les classes sont préfixées .alzc- pour rester
   totalement isolées du reste de la cascade CSS du site.
   ========================================================= */

.alzc-wrapper {
    --alzc-table-bg-1: #1f7a4d;
    --alzc-table-bg-2: #0a3d24;
    --alzc-card-bg: #faf6ec;
    --alzc-lava: #b8451f;
    --alzc-sky: #7fa3bd;
    --alzc-ink: #1c2420;
    --alzc-card-w: 200px;
    --alzc-card-h: 290px;

    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 16px 60px;
}

.alzc-controls {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 24px;
    position: relative;
    z-index: 100;
}

.alzc-btn {
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 12px 28px;
    border-radius: 999px;
    border: 2px solid var(--alzc-lava);
    background: var(--alzc-lava);
    color: #fff;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}

.alzc-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    background: #9c3a19;
}

.alzc-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.alzc-btn-secondary {
    background: transparent;
    color: var(--alzc-lava);
}

.alzc-btn-secondary:hover:not(:disabled) {
    background: var(--alzc-lava);
    color: #fff;
}

.alzc-btn-icon {
    background: transparent;
    border-color: rgba(0,0,0,0.15);
    color: var(--alzc-ink);
    padding: 12px 16px;
    font-size: 18px;
}

.alzc-btn-icon[aria-pressed="true"] {
    opacity: 0.5;
}

/* La table : tapis vert façon casino, avec texture feutre subtile */
.alzc-table {
    position: relative;
    min-height: 620px;
    border-radius: 24px;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0),
        radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.08), transparent 60%),
        linear-gradient(160deg, var(--alzc-table-bg-1), var(--alzc-table-bg-2));
    background-size: 7px 7px, cover, cover;
    box-shadow:
        inset 0 0 90px rgba(0,0,0,0.45),
        0 0 0 10px #5c3a22,
        0 0 0 12px rgba(0,0,0,0.3);
    padding: 40px 20px;
    overflow: hidden;
}

/* Pile de cartes visible avant distribution */
.alzc-deck {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--alzc-card-w);
    height: var(--alzc-card-h);
    margin-top: calc(var(--alzc-card-h) / -2);
    margin-left: calc(var(--alzc-card-w) / -2);
    border-radius: 14px;
    background: var(--alzc-card-bg);
    box-shadow:
        0 2px 0 -1px rgba(0,0,0,0.4),
        0 6px 0 -2px rgba(0,0,0,0.3),
        0 10px 20px rgba(0,0,0,0.5);
    border: 1px solid rgba(0,0,0,0.15);
    transition: opacity 0.4s ease;
}

.alzc-deck.alzc-deck-hidden {
    opacity: 0;
    pointer-events: none;
}

/* Conteneur des vraies cartes */
.alzc-cards {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--alzc-card-w), 1fr));
    gap: 24px;
    justify-items: center;
}

.alzc-card {
    position: relative;
    width: var(--alzc-card-w);
    height: var(--alzc-card-h);
    border-radius: 14px;
    background-color: var(--alzc-card-bg);
    background-size: cover;
    background-position: center;
    box-shadow:
        0 2px 0 -1px rgba(0,0,0,0.4),
        0 6px 0 -2px rgba(0,0,0,0.3),
        0 12px 24px rgba(0,0,0,0.45);
    border: 6px solid var(--alzc-card-bg);
    text-decoration: none;
    display: block;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.alzc-card:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow:
        0 2px 0 -1px rgba(0,0,0,0.4),
        0 10px 0 -2px rgba(0,0,0,0.3),
        0 20px 34px rgba(0,0,0,0.55);
    z-index: 5;
}

.alzc-card.alzc-no-thumb {
    background-image: linear-gradient(160deg, var(--alzc-sky), var(--alzc-lava));
}

.alzc-card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--alzc-sky);
    color: #10151a;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 10px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.alzc-card-title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 28px 12px 12px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0));
}

/* --- États pilotés en JS pour l'animation de distribution --- */

.alzc-card.alzc-dealing {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: calc(var(--alzc-card-h) / -2);
    margin-left: calc(var(--alzc-card-w) / -2);
    opacity: 0;
    transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease;
}

.alzc-card.alzc-dealt {
    position: relative;
    top: auto;
    left: auto;
    margin: 0;
    opacity: 1;
}

.alzc-empty {
    text-align: center;
    padding: 40px;
    color: #666;
}

/* Respect du confort de lecture : pas d'animation si demandé par l'utilisateur */
@media (prefers-reduced-motion: reduce) {
    .alzc-card,
    .alzc-deck {
        transition: none !important;
    }
}

/* Mobile : cartes un peu plus compactes */
@media (max-width: 560px) {
    .alzc-wrapper {
        --alzc-card-w: 150px;
        --alzc-card-h: 218px;
    }
    .alzc-table {
        min-height: 420px;
        padding: 24px 12px;
    }
}

/* ============================================================ */
/* MODE PHOTOS — cartes 16:9, volontairement grandes pour l'effet
   accroche-regard, mais rapprochées et sur un tapis élargi pour
   tenir 3-4 par ligne. Pour passer en carré, rendre --alzc-card-h
   égal à --alzc-card-w.                                          */
/* ============================================================ */
.alzc-wrapper[data-mode="photos"] {
    --alzc-card-w: 380px;
    --alzc-card-h: 214px;
    max-width: 1700px;
}

.alzc-wrapper[data-mode="photos"] .alzc-cards {
    gap: 16px;
}

@media (max-width: 900px) {
    .alzc-wrapper[data-mode="photos"] {
        --alzc-card-w: 300px;
        --alzc-card-h: 169px;
    }
}

@media (max-width: 560px) {
    .alzc-wrapper[data-mode="photos"] {
        --alzc-card-w: 260px;
        --alzc-card-h: 146px;
    }
    .alzc-wrapper[data-mode="photos"] .alzc-cards {
        gap: 10px;
    }
}

/* Survol en mode photos : la photo grossit nettement pour se laisser
   vraiment regarder, quitte à recouvrir ses voisines. Retour à la
   taille normale dès que la souris s'en va — pur CSS, pas de JS.
   z-index élevé pour passer au-dessus des cartes environnantes ;
   transform-origin: center pour grossir symétriquement autour de
   son propre centre plutôt que de partir dans un coin. */
.alzc-wrapper[data-mode="photos"] .alzc-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transform-origin: center center;
}

.alzc-wrapper[data-mode="photos"] .alzc-card:hover {
    transform: scale(2);
    z-index: 50;
    box-shadow:
        0 2px 0 -1px rgba(0,0,0,0.4),
        0 20px 0 -2px rgba(0,0,0,0.3),
        0 30px 60px rgba(0,0,0,0.6);
}

/* Sans ça, le tapis (overflow:hidden, pour bien découper ses coins
   arrondis) couperait le zoom des cartes situées près des bords. Les
   coins restent visuellement arrondis quand même : border-radius
   s'applique au fond du tapis indépendamment d'overflow. */
.alzc-wrapper[data-mode="photos"] .alzc-table {
    overflow: visible;
}