/*
Theme Name: Scrabble Classique
Theme URI: https://votresite.com/
Author: Votre Nom
Author URI: https://votresite.com/
Description: Un thème WordPress one-page personnalisé et responsive, inspiré par l'esthétique classique et chaleureuse du jeu de Scrabble.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-page, game, custom-background, responsive-layout, theme-options, board-game
Text Domain: scrabble-classique-onepage
*/

/* --- CHANGEMENT MAJEUR : Police et Fond --- */
/* Remplacement de la police futuriste par des polices classiques et lisibles. */
/* Le fond est maintenant un vert foncé uni, rappelant le plateau de jeu. */
/* La couleur du texte est passée à un ivoire doux pour un meilleur confort de lecture. */
body {
    font-family: 'Lato', sans-serif; /* Police lisible pour le texte courant */
    background: #1a4a2a; /* Vert foncé, couleur du plateau de Scrabble */
    color: #e8e6e1; /* Couleur ivoire/crème pour le texte */
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Ajout d'une police serif pour les titres pour un look classique */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Merriweather', serif;
}


/* --- EFFETS VISUELS ADAPTÉS --- */
/* L'effet de verre est conservé mais adapté avec un fond plus sombre et subtil */
.glass-effect {
    background: rgba(0, 0, 0, 0.15); /* Fond noir très transparent */
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1); /* Bordure claire subtile */
    border-radius: 10px; /* Bordures légèrement moins arrondies */
}

/* Le survol du bouton utilise une ombre classique au lieu d'une lueur néon */
.action-button {
    transition: all 0.3s ease;
}
.action-button:hover {
    transform: translateY(-3px); /* Effet de soulèvement */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* --- SUPPRESSION DES FORMES GÉOMÉTRIQUES --- */
/* Les formes flottantes (triangle, cercle) et leur animation ont été entièrement supprimées */
/* car elles ne correspondent pas au thème du Scrabble. */
.geometric-shape {
    display: none;
}
@keyframes float { /* L'animation n'est plus utilisée mais conservée si besoin */
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}


/* --- MISE À JOUR DES COMPOSANTS AVEC LA NOUVELLE PALETTE --- */
.faq-item {
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 1rem;
}

/* La couleur d'accentuation des questions est un bleu doux (case Lettre Compte Double) */
.faq-item h4 {
    cursor: pointer;
    font-weight: bold;
    color: #a8d8ea; /* Bleu clair inspiré du Scrabble */
    transition: color 0.3s ease;
}

.faq-item p {
    display: none;
    margin-top: 0.5rem;
    color: rgba(232, 230, 225, 0.9); /* Texte ivoire légèrement transparent */
}

/* La couleur de la question active devient un rouge doux (case Mot Compte Double) */
.faq-item.active h4 {
    color: #e57373; /* Rouge/Rose inspiré du Scrabble */
}
.faq-item.active p {
    display: block;
}

.game-iframe-wrapper {
    width: 100%;
    max-width: 1100px; /* Max-width de notre jeu */
    margin: 2em auto;
    padding: 1rem;
    background: #1a4a2a; /* Fond assorti */
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.game-iframe-wrapper iframe {
    width: 100%;
    height: 850px; /* Hauteur fixe confortable pour la vue bureau */
    border: none;
    display: block;
}

/* Pour rendre la hauteur de l'iframe adaptative sur mobile */
@media (max-width: 900px) {
    .game-iframe-wrapper iframe {
        height: 1200px; /* Hauteur plus grande car les éléments s'empilent */
    }
}
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: #1a4a2a; /* Fond vert foncé comme le body */
    border: 2px solid #d4c8a8; /* Bordure couleur bois */
    border-radius: 10px;
    padding: 1.5rem;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
}

.close-button {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 1.5rem; /* Augmentation pour meilleure visibilité */
    cursor: pointer;
    color: #fff;
}
/* La couleur de survol du bouton fermer est maintenant le bleu d'accentuation */
.close-button:hover {
    color: #a8d8ea;
}

/* Couleur du message d'erreur mise à jour */
.iframe-error {
    display: none;
    color: #e57373; /* Rouge/Rose d'accentuation */
    text-align: center;
    margin-top: 1rem;
}

/* --- STYLE DU CONTENU PRINCIPAL --- */

.section-heading {
    text-align: center;
    color: #d4c8a8; /* Couleur bois pour les titres de section */
    font-size: 1.5rem;
    font-weight: bold;
}
.info-card {
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.bg-secondary-card-border {
    background-color: #8b4513; /* Marron "SaddleBrown", pour un effet bois */
}
.line-clamp-1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Style du contenu textuel (articles, descriptions) */
.entry-content h3 {
    font-size: 1.75rem;
    font-weight: bold;
    color: #a8d8ea; /* Bleu clair pour les sous-titres */
    margin-top: 2rem;
    margin-bottom: 1rem;
}
.entry-content p, .entry-content ol, .entry-content ul {
    margin-bottom: 1.25rem;
    font-size: 1.125rem;
    line-height: 1.7;
}
.entry-content ol, .entry-content ul {
    padding-left: 1.5rem;
}
.entry-content li {
    margin-bottom: 0.75rem;
}
.entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 10px; /* Bordure assortie au reste du design */
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    border: 2px solid #d4c8a8;
}

@media (max-width: 768px) {
    .game-iframe {
        height: 400px;
        border-width: 2px;
    }
}
.game-desktop,
.game-mobile {
    margin-bottom: 20px;
}

.game-desktop iframe,
.game-mobile iframe {
    width: 100%;
    height: 500px; /* Adjust height as needed */
    border: none;
    border-radius: 8px;
}

@media (max-width: 768px) {
    .game-desktop {
        display: none; /* Hide desktop version on mobile */
    }
}

@media (min-width: 769px) {
    .game-mobile {
        display: none; /* Hide mobile version on desktop */
    }
}