/* =====================================================================
   Ulalu — le livre d'or d'exemple et les trois façons de l'acheter
   ---------------------------------------------------------------------
   _DemoGuestbook (D-188) : le lecteur, la mention, la transcription, les
   pages du carnet à feuilleter, les crédits et le bouton qui garde
   l'intention. _OfferIntents (D-192) : « Pour mon événement », « En
   surprise pour quelqu'un », « Pour l'offrir », chacune avec les mêmes
   six questions. Et la frise de la surprise de /livre-d-or.
   Chargé par les partiels eux-mêmes (une fois par page) ou par la page
   dans son en-tête. Jetons et composants : ulalu.css, docs/08.
   ===================================================================== */

/* ---------- 1. Le lecteur ---------- */
.demo-gb__player { margin: 2rem auto 0; max-width: 52rem; }
.demo-gb--compact .demo-gb__player { max-width: none; }
/* La scène porte l'arrondi et l'ombre : le bouton posé sur l'affiche s'y découpe comme la vidéo. */
.demo-gb__stage {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: #17121c;
    box-shadow: var(--shadow-3);
}
.demo-gb__video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: 72vh;
    background: #17121c;
}
/* Le bouton du site sur l'affiche : ce qu'on va entendre, puis « Écouter ». Toute l'affiche se touche. Ses couleurs ne
   suivent pas le thème : il est posé sur une photo, sombre ou claire, sous un voile qui garde le texte lisible. */
.demo-gb__play {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: end;
    justify-items: start;
    gap: .2rem;
    width: 100%;
    margin: 0;
    padding: clamp(.9rem, .6rem + 1.4vw, 1.6rem);
    border: 0;
    border-radius: 0;
    background: linear-gradient(to top, rgba(18, 12, 22, .9) 0%, rgba(18, 12, 22, .55) 45%, rgba(18, 12, 22, .12) 100%);
    color: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.demo-gb__play[hidden] { display: none; }
.demo-gb__play-title {
    font-family: var(--font-display);
    font-size: var(--t-lg);
    font-weight: 600;
    line-height: 1.15;
    text-wrap: balance;
}
.demo-gb__play-sub { font-size: var(--t-sm); color: rgba(255, 255, 255, .88); }
.demo-gb__play-go {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 2.75rem;
    margin-top: .55rem;
    padding: .55rem 1.15rem .55rem 1rem;
    border-radius: 999px;
    /* La braise foncée du thème clair, dans les deux thèmes : du blanc dessus se lit à 5,2 pour 1. */
    background: #c23a1e;
    color: #fff;
    font-weight: 650;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
    transition: transform .2s cubic-bezier(.2, .8, .2, 1), background .2s;
}
.demo-gb__play-go::before {
    content: "";
    border-style: solid;
    border-width: .42rem 0 .42rem .68rem;
    border-color: transparent transparent transparent currentColor;
}
.demo-gb__play:hover .demo-gb__play-go { transform: translateY(-1px); background: #a93018; }
.demo-gb__play:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }
/* La durée, puis la mention : elle dit que tout est inventé, et se lit toujours — à l'encre, jamais au gris des notes. */
.demo-gb__caption { display: grid; gap: .25rem; margin-top: .9rem; text-align: center; font-size: var(--t-sm); }
.demo-gb__notice { color: var(--ink-2); }
.demo-gb__meta { color: var(--muted-ink); }
/* La vidéo entière, dans son repli. */
.demo-gb__whole { display: grid; gap: .7rem; margin: 0 0 1.2rem; }
.demo-gb__whole .demo-gb__meta { margin: 0; text-align: center; font-size: var(--t-sm); }

/* ---------- 2. Les replis : transcription et crédits ---------- */
.demo-gb__fold { max-width: 48rem; margin: 1.6rem auto 0; }
.demo-gb__transcript { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: .8rem; }
/* Une voix et un mot écrit se distinguent par leur libellé ; le filet ne fait que le redire. */
.demo-gb__line { padding-left: .9rem; border-left: 3px solid var(--amber); }
.demo-gb__line--voice { border-left-color: var(--ember); }
.demo-gb__who { display: block; font-size: var(--t-sm); color: var(--ink-2); }
.demo-gb__said { display: block; color: var(--ink); }
.demo-gb__credits ul { margin: 0 0 1rem; padding-left: 1.2rem; font-size: var(--t-sm); color: var(--ink-2); }
.demo-gb__credits .demo-gb__credits-title { padding-bottom: .3rem; font-weight: 600; color: var(--ink); }

/* ---------- 3. Le carnet ---------- */
.demo-gb__carnet { margin: 2.6rem auto 0; max-width: 64rem; text-align: center; }
.demo-gb__carnet h3 { font-size: var(--t-xl); }
.demo-gb__carnet > p { margin-inline: auto; }
/* Au téléphone et à la tablette : une bande qui défile et s'accroche page par page, la suivante déjà visible au bord,
   sans script. La bande est focalisable : les flèches du clavier la font défiler. */
.demo-gb__pages {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1rem;
    padding: .4rem 1rem 1rem;
    margin-inline: -1rem;
    border-radius: var(--r);
}
.demo-gb__pages:focus-visible { outline: 2px solid var(--focus-line); outline-offset: 2px; box-shadow: var(--focus); }
.demo-gb__pages ul { display: flex; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.demo-gb__pages li { flex: 0 0 min(84%, 26rem); scroll-snap-align: start; }
.demo-gb__pages a { display: block; border-radius: var(--r); }
.demo-gb__pages img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--r);
    background: var(--surface);
    box-shadow: var(--shadow-2);
    transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .25s;
}
.demo-gb__pages a:hover img { transform: translateY(-3px); box-shadow: var(--shadow-3); }
.demo-gb__hint { margin: .2rem auto 0; }
.demo-gb__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin: 1.2rem auto 0; }
/* Sur un grand écran, les pages se rangent en grille : une molette ne fait pas défiler de côté. */
@media (min-width: 62rem) {
    .demo-gb__pages { overflow: visible; scroll-snap-type: none; padding: 0; margin: 1.2rem 0 0; }
    .demo-gb__pages ul { flex-wrap: wrap; justify-content: center; gap: 1.4rem; }
    .demo-gb__pages li { flex: 0 1 19.5rem; }
}
@media (hover: hover) and (pointer: fine) {
    .demo-gb__hint { display: none; }
}

/* ---------- 4. Le bouton qui suit ---------- */
.demo-gb__next { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; max-width: none; margin: 2.2rem 0 0; }
@media (max-width: 33.99rem) {
    .demo-gb__next .button { flex: 1 1 100%; }
    .demo-gb__actions .button { flex: 1 1 100%; }
}

/* ---------- 5. Pour qui est-ce ? (D-192) ---------- */
/* Trois cartes de même forme, les mêmes six questions dans le même ordre : on compare d'un coup d'œil. La porte que la
   page mène vient en premier, avec le seul bouton plein ; aucune n'est « conseillée ». */
.intents__list { list-style: none; padding: 0; margin: 2rem auto 0; display: grid; gap: clamp(1rem, .6rem + 1.4vw, 1.8rem); max-width: 40rem; }
@media (min-width: 48rem) {
    .intents__list--2 { grid-template-columns: repeat(2, 1fr); max-width: 56rem; }
}
@media (min-width: 62rem) {
    .intents__list--3 { grid-template-columns: repeat(3, 1fr); max-width: none; }
}
.intents__list > .card { margin-block: 0; display: flex; flex-direction: column; container-type: inline-size; }
.intent--primary { border-color: color-mix(in srgb, var(--ember) 45%, var(--line)); box-shadow: var(--shadow-2); }
.intent__title { font-size: var(--t-lg); margin: 0 0 .9rem; }
.intent__facts { display: grid; gap: .7rem; margin: 0 0 1.4rem; }
/* Le libellé est discret : c'est la réponse qu'on lit. Une carte assez large les pose côte à côte, ce qui raccourcit
   la carte de moitié au téléphone ; une carte étroite (trois de front vers 1 000 px) les empile. */
.intent__fact dt {
    font-size: var(--t-xs);
    font-weight: 650;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted-ink);
}
.intent__fact dd { margin: .1rem 0 0; font-size: var(--t-sm); color: var(--ink-2); }
@container (min-width: 17.5rem) {
    .intent__fact { display: grid; grid-template-columns: 6.6rem 1fr; gap: .8rem; align-items: baseline; }
    .intent__fact dd { margin: 0; }
}
.intent .button { margin-top: auto; }

/* ---------- 6. La surprise, étape par étape (/livre-d-or#surprise) ---------- */
.gb-steps { margin: 2rem auto 0; max-width: 40rem; }
@media (min-width: 48rem) {
    .gb-steps { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 2rem; max-width: 56rem; }
}
@media (min-width: 62rem) {
    .gb-steps { grid-template-columns: repeat(3, 1fr); max-width: none; }
}

/* ---------- 7. Mouvement ---------- */
@media (prefers-reduced-motion: reduce) {
    .demo-gb__play-go { transition: none; }
    .demo-gb__play:hover .demo-gb__play-go { transform: none; }
    .demo-gb__pages img { transition: none; }
    .demo-gb__pages a:hover img { transform: none; }
}