/* =====================================
   ✨ ANIMATIONS & UX — LIVRE D'OR FINAL
===================================== */

/* OUVERTURE / FERMETURE COMMENTAIRES */
.gb-comments {
    max-height: 0;
    opacity: 0;
    transform: translateY(-8px);
    transition: max-height .4s ease, opacity .25s ease, transform .25s ease;
}

.gb-comments.open {
    max-height: 999px;
    opacity: 1;
    transform: translateY(0);
}

/* BOUTON commentaires */
.gb-toggle,
.gb-toggle-comments {
    transition: all .25s ease;
}

.gb-toggle-comments.open {
    color: #8FD83A;
    text-shadow: 0 0 6px rgba(143,216,58,0.5);
}

/* CARTE MESSAGE — HOVER */
.guestbook-message,
.gb-msg {
    transition: transform .2s ease, box-shadow .2s ease;
}
.guestbook-message:hover,
.gb-msg:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}

/* APPARITION DES RÉPONSES */
.gb-reply {
    animation: replyFade .25s ease-out;
}
@keyframes replyFade {
    from {opacity:0; transform:translateY(6px)}
    to   {opacity:1; transform:translateY(0)}
}

/* ANIMATION LIKE */
.gb-like-btn,
.like-btn {
    transition: transform .15s ease, color .2s ease;
}

.gb-like-btn.liked,
.like-btn.liked {
    color: #ff4d6d;
    font-weight: bold;
}

.gb-like-btn.pulse,
.like-btn.pulse {
    animation: likePulse .3s ease;
}

@keyframes likePulse {
    0%   {transform:scale(1)}
    50%  {transform:scale(1.25)}
    100% {transform:scale(1)}
}

/* PAGINATION ANIMÉE */
.pagination button,
.pagination .page-link {
    transition: all .2s ease;
}

.pagination button:hover,
.pagination .page-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(143,216,58,.25);
}

.pagination .active {
    background: #8FD83A;
    color: #000;
    font-weight: bold;
}

/* BADGES STAFF PLUS CLASSE */
.badge.staff {
    background: linear-gradient(135deg, #8FD83A, #d9b44a);
    color: black;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 11px;
    margin-left: 6px;
}

/* MODE NUIT — AMÉLIORÉ */
body.dark .guestbook-message,
body.dark .gb-msg {
    background: #111;
    border-color: #222;
}

body.dark .gb-toggle-comments.open {
    color: #d9b44a;
    text-shadow: 0 0 6px rgba(217,180,74,0.4);
}

/* =================================================
   LIVRE D'OR – STYLE FINAL (réponses, formulaire)
================================================= */

/* Message principal & réponses */
.guestbook-message,
.gb-reply {
    background: linear-gradient(180deg, #121212, #0c0c0c);
    border: 1px solid rgba(143,216,58,.25);
}

/* Auteur */
.gb-author strong {
    color: #8FD83A;
    font-weight: 600;
}

/* Date */
.gb-date {
    font-size: 12px;
    opacity: .65;
}

/* Contenu message */
.gb-body {
    margin-top: 6px;
    font-size: 14.5px;
    line-height: 1.6;
    color: #eee;
}

/* Boutons */
.gb-like-btn,
.gb-toggle-comments {
    background: rgba(143,216,58,.15);
    border: 1px solid rgba(143,216,58,.5);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    color: #8FD83A;
    cursor: pointer;
    transition: all .2s ease;
}

.gb-like-btn:hover,
.gb-toggle-comments:hover {
    background: rgba(143,216,58,.35);
    box-shadow: 0 0 10px rgba(143,216,58,.4);
}

/* Badge STAFF */
.badge.staff {
    background: linear-gradient(135deg,#d9b44a,#8FD83A);
    color: #000;
    font-weight: bold;
}

/* Zone de réponse */
.gb-reply-form {
    margin-top: 12px;
}

.gb-reply-text {
    width: 100%;
    border-radius: 12px;
    padding: 10px;
    resize: none;
    border: 1px solid rgba(255,255,255,.1);
    background: #090909;
    color: #fff;
    outline: none;
}

.gb-reply-text:focus {
    border-color: #8FD83A;
    box-shadow: 0 0 6px rgba(143,216,58,0.6);
}

/* Bouton Envoyer */
.gb-reply-send {
    margin-top: 8px;
    background: linear-gradient(135deg, #8FD83A, #d9b44a);
    color: #000;
    border: none;
    border-radius: 10px;
    padding: 6px 14px;
    font-weight: bold;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

.gb-reply-send:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(217,180,74,.5);
}

/* Commentaires */
.gb-comments {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(143,216,58,.3);
}

/* Message vide */
.gb-empty-replies {
    font-style: italic;
    opacity: .6;
}

/* ===============================
   ALERT LIVRE D’OR — THEMES FIX
=============================== */

.alert.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #b6dfc5;
    font-weight: 600;
}

/* MODE NUIT */
body.dark .alert.success {
    background: rgba(40, 70, 40, 0.95);
    color: #caff9b !important;
    border: 1px solid #7ecb54;
}

/* Texte normal en carte */
body.dark .card {
    color: #eaeaea;
}

/* Corrige texte à l’intérieur des alerts */
body.dark .alert * {
    color: inherit !important;
}

/* Forcer suppression du noir en mode jour */
body:not(.dark) .alert.success {
    background: #d4edda !important;
    color: #155724 !important;
}

/* ===============================
   LIVRE D’OR — FIX MODE JOUR / NUIT
=============================== */

/* -------- MODE JOUR (FORÇAGE CLAIR) -------- */
body:not(.dark) .guestbook-message,
body:not(.dark) .gb-reply,
body:not(.dark) .card.guestbook-message {
    background: linear-gradient(160deg, #ffffff, #f4f4f4) !important;
    color: #222 !important;
    border: 1px solid #ddd !important;
}

/* Texte */
body:not(.dark) .guestbook-message .gb-body,
body:not(.dark) .guestbook-message .gb-author,
body:not(.dark) .guestbook-message .gb-date {
    color: #222 !important;
}

/* Badges & boutons */
body:not(.dark) .gb-toggle-comments {
    background: #e9f5df;
    color: #1a4d1a;
}

/* -------- MODE NUIT (ON GARDE TON STYLE ACTUEL) -------- */
body.dark .guestbook-message,
body.dark .gb-reply {
    background: linear-gradient(145deg, #0f0f0f, #1a1a1a) !important;
    color: #eaeaea;
    border: 1px solid #222;
}

/* ===============================
   LIVRE D’OR — MEME STYLE QUE INDEX
=============================== */

/* MODE JOUR → même fond que page d’accueil */
body:not(.dark) .guestbook-message,
body:not(.dark) .gb-reply,
body:not(.dark) .card.guestbook-message {

    background: #fbf7ec !important;   /* même ton que l'index */
    border: 1px solid #e3dbc6 !important;
    color: #222 !important;
}

/* Texte */
body:not(.dark) .guestbook-message .gb-body,
body:not(.dark) .guestbook-message .gb-author,
body:not(.dark) .guestbook-message .gb-date {
    color: #222 !important;
}

/* Boutons */
body:not(.dark) .gb-toggle-comments,
body:not(.dark) .gb-like-btn {
    background: #eef6e5 !important;
    border: 1px solid #cfe4b2 !important;
    color: #2a5e2a !important;
}

/* Nettoyage des fonds parasites */
body:not(.dark) .guestbook-message * {
    background-color: transparent !important;
}

/* ==============================
   LIVRE D'OR — ZONE RÉPONSE (MODE JOUR)
============================== */
body:not(.dark) .gb-reply-form,
body:not(.dark) .gb-comments {
    background: #fffdf6;
    border: 1px solid #d1cfa8;
    border-radius: 8px;
}

body:not(.dark) .gb-reply-text {
    background: #ffffff;
    color: #111;
    border: 1px solid #c9c68e;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
}

body:not(.dark) .gb-reply-text::placeholder {
    color: #777;
}

body:not(.dark) .gb-reply-send {
    background: #8fd83a;
    color: #102500;
    font-weight: bold;
}

/* ==============================
   LIVRE D’OR — BOUTON ENVOYER (MODE JOUR)
============================== */
body:not(.dark) .gb-reply-send {
    background: linear-gradient(135deg, #9be34b, #7fc029);
    border: 1px solid #5c8f1f;
    color: #102500;
    font-weight: bold;
    padding: 8px 18px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    transition: transform .1s ease, box-shadow .1s ease;
}

body:not(.dark) .gb-reply-send:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
    background: linear-gradient(135deg, #a9f05a, #88cf34);
}

/* ==========================================================
   LIVRE D’OR — FORMULAIRE SIGNATURE (DESIGN PREMIUM)
========================================================== */

.guestbook-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 15px;
}

/* Label */
.guestbook-form label {
    font-size: 14px;
    font-weight: 600;
    color: #baff64;
}

/* Champ message */
.guestbook-form textarea {
    width: 100%;
    min-height: 70px;
    resize: vertical;
    padding: 14px 16px;
    border-radius: 12px;
    background: #0e0e0e;
    color: #e8ffd0;
    border: 1px solid #333;
    outline: none;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.5;
    transition: all .2s ease;
}

/* Focus premium */
.guestbook-form textarea:focus {
    border-color: var(--green, #9efd38);
    box-shadow: 0 0 0 2px rgba(158, 253, 56, 0.25);
}

/* Placeholder */
.guestbook-form textarea::placeholder {
    color: #777;
}

/* Bouton Envoyer */
.guestbook-form .btn.primary {
    align-self: flex-start;
    background: linear-gradient(145deg, #9efd38, #6fae24);
    color: #000;
    padding: 10px 22px;
    border-radius: 999px;
    border: none;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,.2);
    transition: all .2s ease;
}

/* Hover button */
.guestbook-form .btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(158, 253, 56, 0.35);
    filter: brightness(1.05);
}

/* Message succès / erreur */
.alert.success {
    background: rgba(158, 253, 56, 0.08);
    border: 1px solid #8fd83a;
    color: #c8ff8a;
}

.alert.error {
    background: rgba(255, 80, 80, 0.12);
    border: 1px solid #ff6b6b;
    color: #ffd4d4;
}