/* ==========================================================================
   DESIGN SUR MESURE POUR GWOLLE GUESTBOOK
   ========================================================================== */

:root {
    /* MODIFIEZ CES COULEURS SELON VOTRE CHARTE GRAPHIQUE : */
    --gb-primary: #2563eb;       /* Couleur principale (ex: Couleur de vos boutons) */
    --gb-primary-hover: #1d4ed8; /* Couleur au survol du bouton principal */
    --gb-text-dark: #1f2937;     /* Couleur des textes principaux (titres, champs) */
    --gb-text-muted: #6b7280;    /* Couleur des textes secondaires (dates, indices) */
    --gb-bg-light: #f9fafb;      /* Fond très clair des champs de saisie */
    --gb-border: #d1d5db;        /* Couleur des bordures */
}

/* --- 1. LES BOUTONS (Tailles ajustées et harmonisées) --- */
div.gwolle-gb input[type="button"],
div.gwolle-gb input[type="submit"],
div.gwolle-gb button,
div.gwolle-gb .button,
div.gwolle-gb .gwolle_gb_write_button input,
div.gwolle-gb .gwolle_gb_write_button button {
    background-color: var(--gb-primary) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 10px 20px !important;       /* Taille ajustée (plus compacte et élégante) */
    font-size: 14px !important;          /* Taille de police proportionnée */
    font-weight: 500 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    display: inline-block !important;
    text-shadow: none !important;
}

/* Bouton Secondaire / Aperçu */
div.gwolle-gb input[name="preview"],
div.gwolle-gb .button-secondary {
    background-color: #f3f4f6 !important;
    color: var(--gb-text-dark) !important;
    border: 1px solid var(--gb-border) !important;
}

/* Effets au survol */
div.gwolle-gb input[type="button"]:hover,
div.gwolle-gb input[type="submit"]:hover,
div.gwolle-gb button:hover,
div.gwolle-gb .button:hover,
div.gwolle-gb .gwolle_gb_write_button input:hover {
    background-color: var(--gb-primary-hover) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

div.gwolle-gb input[name="preview"]:hover,
div.gwolle-gb .button-secondary:hover {
    background-color: #e5e7eb !important;
    color: var(--gb-text-dark) !important;
}


/* --- 2. LE FORMULAIRE DE SAISIE --- */
div.gwolle-gb .gwolle_gb_write {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 24px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
    margin-bottom: 30px !important;
}

/* Forcer la lisibilité de tous les textes et étiquettes */
div.gwolle-gb .gwolle_gb_write label,
div.gwolle-gb .gwolle_gb_write p,
div.gwolle-gb .gwolle_gb_write span,
div.gwolle-gb .gwolle_gb_write legend {
    color: var(--gb-text-dark) !important;
    font-size: 14px !important;
}

div.gwolle-gb .gwolle_gb_write label {
    font-weight: 600 !important;
    display: block !important;
    margin-bottom: 6px !important;
}

/* Champs de texte et zones de saisie */
div.gwolle-gb .gwolle_gb_write .input input[type="text"],
div.gwolle-gb .gwolle_gb_write .input input[type="email"],
div.gwolle-gb .gwolle_gb_write .input input[type="url"],
div.gwolle-gb .gwolle_gb_write .input textarea,
div.gwolle-gb .gwolle_gb_write input[type="text"],
div.gwolle-gb .gwolle_gb_write input[type="email"],
div.gwolle-gb .gwolle_gb_write input[type="url"],
div.gwolle-gb .gwolle_gb_write textarea {
    width: 100% !important;
    padding: 10px 14px !important;
    border: 1px solid var(--gb-border) !important;
    border-radius: 6px !important;
    background-color: var(--gb-bg-light) !important;
    color: var(--gb-text-dark) !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
}

/* Focus actif sur les champs */
div.gwolle-gb .gwolle_gb_write .input input:focus,
div.gwolle-gb .gwolle_gb_write .input textarea:focus,
div.gwolle-gb .gwolle_gb_write input:focus,
div.gwolle-gb .gwolle_gb_write textarea:focus {
    background-color: #ffffff !important;
    border-color: var(--gb-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}


/* --- 3. LES AVIS (BULLES FLOTTANTES) --- */
div.gwolle-gb .gb-entry {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

div.gwolle-gb .gb-entry:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.04) !important;
}

/* Auteur et date */
div.gwolle-gb .gb-entry .gb-author-info {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    border-bottom: 1px solid #f3f4f6 !important;
    padding-bottom: 10px !important;
    margin-bottom: 12px !important;
}

div.gwolle-gb .gb-entry .gb-author-name {
    font-weight: 700 !important;
    color: var(--gb-text-dark) !important;
    font-size: 15px !important;
}

div.gwolle-gb .gb-entry .gb-date {
    color: var(--gb-text-muted) !important;
    font-size: 13px !important;
    font-style: normal !important;
}

/* Texte de l'avis */
div.gwolle-gb .gb-entry .gb-entry-content {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--gb-text-dark) !important;
}

/* Étoiles de notation */
div.gwolle-gb .gwolle_gb_stars .star {
    color: #f59e0b !important;
}

/* Masque le lien "Permalien" */
div.gwolle-gb .gb-entry .gb-permalink,
div.gwolle-gb .gb-entry a.gwolle_gb_permalink {
    display: none !important;
}

/* Masque le menu des trois points et ses options (Signaler, Edit, etc.) */
div.gwolle-gb .gb-entry .gb-admin-icons,
div.gwolle-gb .gb-entry .gwolle-gb-admin-icons,
div.gwolle-gb .gb-entry .admin-icons {
    display: none !important;
}