/* Styles communs du Gardien, extraits de la page d'accueil. */

        #gardien-bouton {
            position: fixed;
            bottom: 24px;
            right: 24px;
            z-index: 10000;

            width: 76px;
            height: 76px;

            display: flex;
            align-items: center;
            justify-content: center;

            background: linear-gradient(145deg, #8d60a0, #4c285c);
            border: 3px solid #d3aa68;
            border-radius: 50%;

            font-size: 42px;
            cursor: pointer;

            box-shadow: 0 6px 22px rgba(35, 15, 45, 0.4);
            transition: transform 0.2s ease;
        }

        #gardien-bouton:hover {
            transform: scale(1.08);
        }

        #gardien-bouton:focus-visible,
        #gardien-fermer:focus-visible {
            outline: 3px solid #d3aa68;
            outline-offset: 3px;
        }

        #gardien-fenetre {
            position: fixed;
            bottom: 112px;
            right: 24px;
            z-index: 10000;

            width: 360px;
            max-width: calc(100vw - 32px);
            max-height: calc(100dvh - 140px);
            overflow-y: auto;

            background: #f8eee7;
            border: 2px solid #c7a06b;
            border-radius: 22px;

            box-shadow: 0 12px 40px rgba(25, 10, 35, 0.35);

            font-family: inherit;
        }

        #gardien-fenetre[hidden] {
            display: none !important;
        }

        .gardien-entete {
            display: flex;
            align-items: center;
            justify-content: space-between;

            padding: 16px 20px;

            background: #5b3567;
            color: #fff7ed;

            border-radius: 19px 19px 0 0;
        }

        .gardien-entete strong {
            font-size: 1.1rem;
        }

        #gardien-fermer {
            border: none;
            background: transparent;
            color: white;

            font-size: 25px;
            cursor: pointer;
        }

        .gardien-contenu {
            padding: 22px;
            color: #57395b;
            line-height: 1.6;
        }

        .gardien-message {
            padding: 16px;

            background: #fffaf5;
            border: 1px solid #e4d2c2;
            border-radius: 16px;

            margin-bottom: 16px;
        }

        .gardien-information {
            text-align: center;
            font-size: 0.85rem;
            color: #8b6b85;
        }

        @media (max-width: 600px) {
            #gardien-bouton {
                bottom: 18px;
                right: 18px;
                width: 66px;
                height: 66px;
                font-size: 36px;
            }

            #gardien-fenetre {
                bottom: 96px;
                right: 16px;
            }
        }

        /* Zone de discussion du Gardien */

        .gardien-messages {
            max-height: 240px;
            overflow-y: auto;
            margin-bottom: 18px;
            padding-right: 4px;
        }

        .gardien-message {
            overflow-wrap: anywhere;
        }

        .gardien-formulaire {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .gardien-formulaire label {
            font-weight: bold;
            font-size: 0.9rem;
            color: #59355d;
        }

        #gardien-question {
            width: 100%;
            box-sizing: border-box;
            min-height: 65px;
            padding: 12px;
            resize: vertical;

            font: inherit;
            font-size: 0.95rem;

            color: #4c3152;
            background: #fffaf5;

            border: 1px solid #d6bfa9;
            border-radius: 12px;
        }

        #gardien-question:focus {
            outline: 2px solid #aa80b5;
            outline-offset: 2px;
        }

        #gardien-envoyer {
            align-self: flex-end;
            padding: 11px 22px;

            background: #653b70;
            color: #fffaf5;

            border: none;
            border-radius: 25px;

            font: inherit;
            font-weight: bold;
            cursor: pointer;
        }

        #gardien-envoyer:hover {
            background: #81508c;
        }

        #gardien-envoyer:focus-visible {
            outline: 3px solid #d3aa68;
            outline-offset: 3px;
        }
#gardien-messages .gardien-message p { white-space: pre-line; }