/************************************************************
 *  DECK BAR – JEUX PRÉFÉRÉS DU STAFF
 *  Style complet et commenté
 ************************************************************/

/* -----------------------------------------------------------------
   1) CONTENEUR GÉNÉRAL
   ----------------------------------------------------------------- */

/* Wrapper global du shortcode */
.dsf-wrapper {
    background: #65c0c6;          /* bleu canard Deck Bar */
    padding: 40px 30px 60px;
    border-radius: 30px;
    color: #053645;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Pour éviter que le contenu soit collé aux bords sur les grands écrans */
.dsf-wrapper > * {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}


/* -----------------------------------------------------------------
   2) BANDEAU : "Les jeux préférés de" + sélection du staff
   ----------------------------------------------------------------- */

/* Ligne contenant le texte et les prénoms */
.dsf-staff-bar {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

/* Texte "Les jeux préférés de" (2rem comme demandé) */
.dsf-title-prefix {
    font-size: 2rem;
    font-weight: 600;
    margin-right: 10px;
}

/* Bloc qui contenant les boutons/prénoms du staff */
.dsf-staff-selector {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* Boutons avec les prénoms du staff */
.dsf-staff-btn {
    background: transparent;
    border: none;
    padding: 4px 0;
    font-size: 1.8rem;     /* prénoms bien visibles */
    font-weight: 700;
    cursor: pointer;
    position: relative;
}

/* Lignes soulignées pour le staff actif */
.dsf-staff-btn.dsf-active {
    color: #053645;
}

.dsf-staff-btn.dsf-active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 2px;
    background: #053645;
}


/* -----------------------------------------------------------------
   3) PANNEAUX STAFF (un par personne)
   ----------------------------------------------------------------- */

/* Tous les panneaux sont cachés… */
.dsf-panel {
    display: none;
}

/* …sauf celui marqué .dsf-active (géré en JS) */
.dsf-panel.dsf-active {
    display: block;
}

/* Mise en colonnes : photo à gauche, jeux à droite */
.dsf-columns {
    display: flex;
    gap: 40px;
    align-items: center;
}

/* Colonne photo (staff) */
.dsf-photo-col {
    flex: 0 0 280px;
    display: flex;
    justify-content: center;
}

/* Photo ronde du staff */
.dsf-photo-img {
    width: 240px;
    height: 240px;
    border-radius: 50%;
    object-fit: cover;
    background: #ffffff;
}

/* Si pas de photo : pastille blanche avec initiale */
.dsf-photo-placeholder {
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    font-weight: 600;
    color: #333;
}

/* Colonne des jeux */
.dsf-games-col {
    flex: 1 1 auto;
}


/* -----------------------------------------------------------------
   4) PASTILLES DE MOTS-CLÉS (tags de type de jeu)
   ----------------------------------------------------------------- */

.dsf-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 30px;
}

/* Pastille jaune type "AMBiance", "Enfants"… */
.dsf-tag-btn {
    border-radius: 9999px;
    border: 2px solid #f6b734;
    background: #f6b734;
    color: #053645;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);
    transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
}

/* Effet au survol */
.dsf-tag-btn:hover {
    transform: translateY(1px);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
}

/* Tag actif : fond blanc, bord jaune */
.dsf-tag-btn.dsf-active {
    background: #ffffff;
    border-color: #f6b734;
}


/* -----------------------------------------------------------------
   5) FICHES JEUX
   ----------------------------------------------------------------- */

.dsf-games {
    position: relative;
}

/* Par défaut, on cache toutes les fiches… */
.dsf-game {
    display: none;
}

/* …sauf celle qui a .dsf-active (gérée en JS) */
.dsf-game.dsf-active {
    display: block;
}

/* En-tête du bloc jeu : pastille + titre */
.dsf-game-header {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 24px;
}

/* -----------------------------------------------------------------
   5a) PASTILLE RONDE POUR LA BOÎTE DU JEU
   ----------------------------------------------------------------- */

/* Conteneur rond 300×300 pour la boîte du jeu */
.dsf-game-box {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: #ffffff;
    overflow: hidden;            /* rien ne déborde */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
    border: 4px solid #ffffff;   /* petit liseré blanc propre */
}

/* L’image tient ENTIEREMENT dans le cercle, sans déformation */
.dsf-game-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;         /* image entièrement visible */
    display: block;
}

/* -----------------------------------------------------------------
   5b) TITRE DU JEU
   ----------------------------------------------------------------- */

.dsf-game-title-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Grosse guillemet décorative */
.dsf-game-quote {
    font-size: 4rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.6);
}

/* Nom du jeu */
.dsf-game-title {
    font-size: 2.4rem;
    line-height: 1.2;
    margin: 0;
    color: #0c4a5a;
    font-weight: 700;
}

/* -----------------------------------------------------------------
   5c) MÉTADONNÉES (âge, joueurs, durée…)
   ----------------------------------------------------------------- */

.dsf-game-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 12px;
    font-size: 0.95rem;
}

.dsf-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dsf-meta-icon {
    font-size: 1rem;
}

.dsf-meta-text {
    font-size: 0.95rem;
}

/* -----------------------------------------------------------------
   5d) TAGLINE + DESCRIPTION
   ----------------------------------------------------------------- */

/* Petite phrase type "Génial" : 2rem et gras */
.dsf-tagline {
    font-size: 2rem;      /* demandé */
    font-weight: 700;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

/* Texte de description, plus petit */
.dsf-description {
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 680px;
}

/* -----------------------------------------------------------------
   5e) BOUTON "DÉCOUVRIR LE JEU"
   ----------------------------------------------------------------- */

.dsf-button {
    display: inline-block;
    margin-top: 18px;
    padding: 12px 28px;
    background: #000000;
    color: #ffffff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.9rem;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
    transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
}

.dsf-button:hover {
    background: #111111;
    transform: translateY(1px);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}

/* -----------------------------------------------------------------
   6) RESPONSIVE : TABLETTES & MOBILES
   ----------------------------------------------------------------- */

@media (max-width: 1024px) {
    .dsf-columns {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .dsf-photo-col {
        flex: 0 0 auto;
    }

    .dsf-game-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .dsf-game-title-block {
        align-items: center;
    }

    .dsf-game-meta {
        justify-content: center;
    }

    .dsf-description {
        text-align: left; /* lisible même si le reste est centré */
    }
}

/* -----------------------------------------------------------------
   6) RESPONSIVE : MOBILE
   ----------------------------------------------------------------- */
@media (max-width: 768px) {
    .dsf-wrapper {
        padding: 30px 16px 40px;
    }

    .dsf-title-prefix {
        font-size: 1.6rem;
    }

    .dsf-staff-btn {
        font-size: 1.4rem;
    }

    /* Pastille du JEU un peu plus petite */
    .dsf-game-box {
        width: 240px;
        height: 240px;
    }

    .dsf-game-title {
        font-size: 2rem;
    }

    .dsf-tagline {
        font-size: 1.6rem;
    }

    /* Pastille du STAFF plus petite */
    .dsf-photo-img,
    .dsf-photo-placeholder {
        width: 140px !important;
        height: 140px !important;
        font-size: 2.4rem;
    }

    /* 🔹 On casse le flex : on repasse la zone en bloc simple */
    .dsf-columns {
        display: block;      /* plus de flex ici */
    }

    /* 🔹 Pastille du staff flottante à gauche */
    .dsf-photo-col {
        float: left;
        margin: 0 12px 8px 0;   /* espace à droite + un peu en bas */
    }

    /* 🔹 La colonne jeux "nettoie" le float (tout ce qui suit passe en dessous) */
    .dsf-games-col::after {
        content: "";
        display: block;
        clear: both;
    }

    /* 🔹 Les tags se placent à droite de la pastille, en colonne */
    .dsf-tags {
        display: flex;
        flex-direction: column;    /* un tag par ligne */
        align-items: flex-start;
        gap: 8px;
        margin-top: 20px;          /* descendre un peu pour être aligné verticalement */
    }

    .dsf-tag-btn {
        width: 180px;              /* largeur maîtrisée */
        max-width: 100%;
        text-align: center;
        box-shadow: 0 3px 0 rgba(0,0,0,0.15);
    }

    /* 🔹 Le bloc .dsf-games (grosse pastille + texte) passe sous le float */
    .dsf-games {
        clear: both;               /* s'affiche sous la pastille + tags */
        margin-top: 20px;
    }

    /* On garde les réglages précédents pour le contenu du jeu */
    .dsf-game-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .dsf-game-title-block {
        align-items: center;
    }

    .dsf-game-meta {
        justify-content: center;
    }

    .dsf-description {
        text-align: left;
    }
}