/* Livre d'or : ligne bleue derrière les surfaces blanches du contenu. */
html:has(body .guestbook-main) { color-scheme: light; background: #fff; }
body:has(.guestbook-main) {
    --guestbook-blue: #0091ff;
    --guestbook-ink: #111;
    position: relative;
    isolation: isolate;
    background: #fff;
    color: var(--guestbook-ink);
}
body:has(.guestbook-main)::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    transform: translateX(-50%);
    background: var(--guestbook-blue);
    pointer-events: none;
}
body:has(.guestbook-main) > :is(.site-header, .guestbook-main, .site-footer) { position: relative; z-index: 1; }
.guestbook-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(40px, 6vw, 64px);
    width: min(100% - 40px, 900px);
    margin: 18px auto 76px;
    overflow-wrap: anywhere;
}
.guestbook-main > * { min-width: 0; }
.guestbook-heading { display: flex; flex-direction: column; align-items: center; width: min(100%, 680px); background: #fff; }
.guestbook-main h1 {
    width: fit-content;
    max-width: 100%;
    margin: 0;
    padding: 14px 20px;
    background: #fff;
    font-size: clamp(1.35rem, 3vw, 1.8rem);
    font-weight: 500;
    letter-spacing: .1em;
    line-height: 1.35;
    text-align: center;
}
.guestbook-introduction,
.guestbook-compose,
.guestbook-messages,
.guestbook-pagination,
.guestbook-main > p { width: min(100%, 680px); }
.guestbook-introduction { padding: 12px 20px; background: #fff; font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.75; text-align: center; }
.guestbook-introduction:empty { display: none; }
.guestbook-introduction > :first-child { margin-top: 0; }
.guestbook-introduction > :last-child { margin-bottom: 0; }
.guestbook-compose { padding: 12px 20px; background: #fff; scroll-margin-top: 24px; }
.guestbook-toggle { display: list-item; width: fit-content; max-width: 100%; min-height: 48px; padding: 12px 18px; border: 1px solid #005baa; border-radius: 4px; background: #005baa; color: #fff; font-size: .9375rem; font-weight: 600; letter-spacing: .06em; cursor: pointer; list-style-position: inside; }
.guestbook-toggle:hover { background: #004681; }
.guestbook-toggle:focus-visible { outline: 2px solid var(--guestbook-blue); outline-offset: 4px; }
.guestbook-compose-body { margin-top: 24px; }
.guestbook-form { display: grid; gap: 18px; width: 100%; scroll-margin-top: 24px; }
.guestbook-hint { margin: 7px 0 0; color: #555; font-size: .875rem; line-height: 1.6; }
.guestbook-form > .guestbook-hint { margin: 0; }
.guestbook-field { min-width: 0; }
.guestbook-field label { display: block; margin-bottom: 7px; font-weight: 500; }
.guestbook-field input,
.guestbook-field textarea { display: block; width: 100%; min-height: 48px; padding: 11px 12px; border: 1px solid #777; border-radius: 4px; background: #fff; color: #111; font-size: 1rem; line-height: 1.5; }
.guestbook-field textarea { resize: vertical; }
.guestbook-main :is(input, textarea, button, a):focus-visible { outline: 2px solid var(--guestbook-blue); outline-offset: 4px; }
.guestbook-field :is(input, textarea):focus-visible { border-color: #005baa; }
.guestbook-field [aria-invalid="true"] { border-color: #a32727; border-width: 2px; }
.guestbook-error { margin: 8px 0 0; color: #9d1c1c; font-size: .9375rem; font-weight: 500; }
.guestbook-notice { margin: 0 0 24px; padding: 14px 16px; border-left: 3px solid var(--guestbook-blue); background: #f1f8ff; color: #111; scroll-margin-top: 24px; }
.guestbook-notice[role="alert"] { border-left-color: #a32727; background: #fff4f4; }
.guestbook-notice p { margin-top: 0; }
.guestbook-notice ul { margin-bottom: 0; padding-left: 1.4em; }
.guestbook-notice a { color: #005baa; }
.guestbook-send { justify-self: start; max-width: 100%; min-height: 48px; padding: 12px 20px; border: 1px solid #005baa; border-radius: 4px; background: #005baa; color: #fff; font-weight: 600; letter-spacing: .06em; cursor: pointer; }
.guestbook-send:hover { background: #004681; }
.guestbook-close { min-height: 44px; margin-top: 16px; padding: 8px 0; border: 0; background: transparent; color: #005baa; text-decoration: underline; cursor: pointer; }
.guestbook-close[hidden] { display: none; }
.guestbook-messages { display: flex; flex-direction: column; gap: clamp(32px, 5vw, 52px); }
.guestbook-message { min-width: 0; margin: 0; padding: 12px 20px 28px; background: linear-gradient(#fff, #fff) top / 100% calc(100% - 20px) no-repeat; }
.guestbook-message blockquote { margin: 0 0 20px; font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.75; }
.guestbook-message blockquote > :first-child { margin-top: 0; }
.guestbook-message blockquote > :last-child { margin-bottom: 0; }
.guestbook-message figcaption { color: #444; font-size: .9rem; line-height: 1.6; }
.guestbook-message:nth-child(even) { text-align: right; }
.guestbook-pagination { padding: 8px 16px; background: #fff; }
.guestbook-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; list-style: none; margin: 0; padding: 0; }
.guestbook-pagination a,
.guestbook-pagination span { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px; }
.guestbook-pagination .current { border-bottom: 2px solid var(--guestbook-blue); font-weight: 600; }
.guestbook-pagination a:hover,
.guestbook-main > p a:hover { color: #005baa; }
.guestbook-main > p { margin: 0; padding: 12px 20px; background: #fff; }
@media (max-width: 40rem) {
    .guestbook-main { width: min(100% - 36px, 680px); margin-top: 12px; margin-bottom: 56px; gap: 40px; }
    .guestbook-main h1 { padding: 12px; font-size: clamp(1.3rem, 5vw, 1.65rem); }
    .guestbook-introduction,
    .guestbook-compose,
    .guestbook-main > p { padding: 10px 12px; }
    .guestbook-message { padding: 10px 12px 24px; }
    .guestbook-pagination { padding-inline: 8px; }
}