:root {

    --bg-page: #fdfaf6;

    --rose-panier: #e889a6;

    --vert-ui: #455a3c;

    --gris-nul: #7a6e65;

    --texte-principal: #332e2b;

}


* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}


body.fond-app {

    background-color: var(--bg-page);

    background-image: url('img/download\ \(3\).jpg');

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    color: var(--texte-principal);

    font-family: 'Fredoka', system-ui, -apple-system, sans-serif;

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 1.25rem;

}


header {

    text-align: center;

    margin-bottom: 0.8rem;

}


header h1 {

    font-size: 2.3rem;

    font-weight: 700;

    color: var(--vert-ui);

    text-shadow: 2px 2px 0px rgba(232, 137, 166, 0.4);

    letter-spacing: 0.5px;

    margin-bottom: 0.2rem;

}


#statut-jeu {

    font-size: 0.95rem;

    font-weight: 600;

    color: #5c6e54;

    background: rgba(255, 255, 255, 0.92);

    padding: 0.4rem 1rem;

    border-radius: 20px;

    display: inline-block;

    box-shadow: 0 3px 10px rgba(0,0,0,0.08);

    transition: all 0.3s ease;

}


#statut-jeu.alerte-victoire {

    background: var(--vert-ui);

    color: #fff;

    transform: scale(1.05);

}


#statut-jeu.alerte-nul {

    background: var(--gris-nul);

    color: #fff;

}


.conteneur-principal {

    width: 100%;

    max-width: 400px;

    display: flex;

    flex-direction: column;

    gap: 0.8rem;

}


.config-joueurs {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 0.6rem;

    background: rgba(255, 255, 255, 0.92);

    backdrop-filter: blur(6px);

    padding: 0.5rem 0.7rem;

    border-radius: 16px;

    border: 2px solid #e0d7cd;

}


.groupe-config {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 0.4rem;

}


.label-camp {

    font-size: 0.82rem;

    font-weight: 600;

}


.player-1-box .label-camp { color: var(--vert-ui); }

.player-2-box .label-camp { color: #d06d8b; }


.choix-mini-groupe {

    display: flex;

    gap: 0.3rem;

}


.btn-choix-camp {

    background-color: #f7f3ec;

    border: 1.5px solid #d5cbc0;

    border-radius: 10px;

    width: 38px;

    height: 38px;

    background-size: 65%;

    background-position: center;

    background-repeat: no-repeat;

    cursor: pointer;

    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);

}


.btn-choix-camp[data-base="oeuf"] { background-image: url('img/oeuff.png'); }

.btn-choix-camp[data-base="biscuit"] { background-image: url('img/biscuitt.png'); }

.btn-choix-camp[data-base="pomme"] { background-image: url('img/pomme.png'); }

.btn-choix-camp[data-base="baguette"] { background-image: url('img/pain.png'); }


.btn-choix-camp:hover {

    transform: scale(1.08);

}


.btn-choix-camp.actif {

    background-color:var(--vert-ui);

    border-color: var(--vert-ui);

}


.btn-choix-camp.actif-j2 {

    background-color: var(--rose-panier);

    border-color: var(--rose-panier);

}


.scene-panier {

    position: relative;

    width: 100%;

    aspect-ratio: 4 / 4.4;

    border-radius: 24px;

    overflow: hidden;

    box-shadow: 0 14px 35px rgba(0,0,0,0.12);

    display: flex;

    align-items: center;

    justify-content: center;

}


.panier-filaire {

    position: relative;

    z-index: 1;

    width: 90%;

    height: 88%;

    border: 4px solid var(--rose-panier);

    border-radius: 18px;

    background: rgba(255, 255, 255, 0.78);

    backdrop-filter: blur(8px);

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0.85rem;

    box-shadow: inset 0 0 20px rgba(232, 137, 166, 0.35), 0 8px 20px rgba(0,0,0,0.1);

}


.poignee-f {

    position: absolute;

    width: 14px;

    height: 32px;

    border: 3.5px solid var(--rose-panier);

    border-top: none;

    border-radius: 0 0 10px 10px;

    top: 32%;

}

.g-poignee { left: -15px; border-right: none; }

.d-poignee { right: -15px; border-left: none; }


/* Correction pour assurer l'affichage et la visibilité complète de la grille */

.panier-filaire > section {

    display: flex;

    align-items: center;

    justify-content: center;

}


#grille.grille-jeu {

    width: 100%;

    height: 100%;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    grid-template-rows: repeat(3, 1fr);

    gap: 0.5rem;

}


.case {

    background: rgba(255, 255, 255, 0.95);

    border: 2px solid rgba(232, 137, 166, 0.6);

    border-radius: 12px;

    cursor: pointer;

    background-size: 70%;

    background-position: center;

    background-repeat: no-repeat;

    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease;

}


.case:hover {

    background-color: #ffffff;

    transform: scale(0.95);

}


.case.gagnante {

    background-color: #fff8e1 !important;

    border: 3px solid var(--vert-ui) !important;

    transform: scale(1.1) !important;

    z-index: 5;

}

.case.item-oeuf { background-image: url('img/oeuff.png'); animation: popBubble 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

.case.item-biscuit { background-image: url('img/biscuitt.png'); animation: popBubble 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

.case.item-pomme { background-image: url('img/pomme.png'); animation: popBubble 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

.case.item-baguette { background-image: url('img/pain.png'); animation: popBubble 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }


@keyframes popBubble {

    from { opacity: 0; transform: scale(0.2) rotate(-20deg); }

    to { opacity: 1; transform: scale(1) rotate(0deg); }

}


.panier-filaire.victoire-anim {

    animation: pulseVictoire 0.5s ease-in-out infinite alternate;

}


@keyframes pulseVictoire {

    from { border-color: var(--rose-panier); }

    to { border-color: var(--vert-ui); box-shadow: 0 0 30px rgba(69,90,60,0.6), inset 0 0 25px rgba(69,90,60,0.4); }

}


.overlay-victoire {

    position: absolute;

    inset: 0;

    background: rgba(45, 56, 40, 0.45);

    backdrop-filter: blur(2px);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 10;

    transition: opacity 0.3s ease, transform 0.3s ease;

}


.overlay-victoire.hidden {

    opacity: 0;

    pointer-events: none;

    transform: scale(0.9);

}


.overlay-victoire.nul .badge-victoire {

    background: var(--gris-nul);

}


.badge-victoire {

    background: var(--vert-ui);

    color: #fff;

    padding: 0.9rem 1.8rem;

    border-radius: 20px;

    font-size: 1.4rem;

    font-weight: 700;

    box-shadow: 0 8px 25px rgba(0,0,0,0.3);

    border: 3px solid #fff;

}


footer {

    display: flex;

    justify-content: center;

}


#replay {

    background: var(--vert-ui);

    color: #fff;

    border: none;

    padding: 0.8rem 1.8rem;

    border-radius: 16px;

    font-family: 'Fredoka', sans-serif;

    font-weight: 600;

    font-size: 1rem;

    cursor: pointer;

    box-shadow: 0 5px 15px rgba(69,90,60,0.3);

}


#replay:hover {

    background: #374930;

    transform: translateY(-2px) scale(1.02);

}