/*
 * Les nouveautés du tableau de bord (Tour/banner.html.twig, stamina-core-tour-banner) : un titre, puis les cartes côte à
 * côte, --tb-n colonnes (une par nouveauté, trois au plus). Plusieurs : l'illustration en haut de la carte, le texte
 * dessous ; une seule : en largeur, le texte à gauche, l'illustration à droite. Une couleur par nouveauté (--violet,
 * --night, --light, choisie par le Tour) et une illustration animée fournie par son module (.tb-ill : une scène de
 * 440 × 300 px mise à l'échelle, à dessiner avec les .tb-fc ci-dessous). Pas de couleur en dur hors des cartes
 * elles-mêmes : jetons du socle (ui-bundle/Resources/tailwind/app.css).
 */
.tb { --tb-n: 1; container: tb / inline-size; position: relative; margin-bottom: 2rem; transition: opacity .6s var(--ease-out, cubic-bezier(.2, .8, .2, 1)), transform .6s var(--ease-out, cubic-bezier(.2, .8, .2, 1)); }
.tb.is-out { opacity: 0; transform: translateY(-.875rem); pointer-events: none; }

/* ================= Le titre et « Plus tard » ================= */
.tb-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: .875rem; }
.tb-heading { margin: 0; font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; color: var(--color-ink); }

/* ================= Les cartes ================= */
.tb-grid { display: grid; grid-template-columns: repeat(var(--tb-n), minmax(0, 1fr)); gap: 1rem; }
.tb-card {
    --tb-k: .62; --tb-pad: 1.5rem; --tb-ink: #fff; --tb-ink-2: rgb(255 255 255 / .8); --tb-meta: rgb(255 255 255 / .65); --tb-meta-ink: rgb(255 255 255 / .92);
    position: relative; display: flex; flex-direction: column; overflow: hidden; isolation: isolate;
    border-radius: 1.625rem; color: var(--tb-ink); box-shadow: var(--shadow-card);
    transition: opacity .5s var(--ease-out, cubic-bezier(.2, .8, .2, 1)), transform .5s var(--ease-out, cubic-bezier(.2, .8, .2, 1));
}
/* Sortie : la carte vue s'efface et rapetisse, les autres prennent la place. */
.tb-card.is-leaving { opacity: 0; transform: scale(.96); pointer-events: none; }

.tb-card--violet { background: linear-gradient(155deg, var(--color-primary-600) 0%, var(--color-primary-700) 55%, color-mix(in srgb, var(--color-primary-800) 70%, #000) 100%); }
.tb-card--night { background: var(--color-night); }
.tb-card--light {
    --tb-ink: var(--color-ink); --tb-ink-2: var(--color-ink-2); --tb-meta: var(--color-muted); --tb-meta-ink: var(--color-ink-2);
    background: linear-gradient(150deg, var(--color-surface) 0%, var(--color-primary-50) 58%, color-mix(in srgb, #ff9ac1 18%, var(--color-surface)) 130%);
    box-shadow: 0 0 0 1px var(--color-line), var(--shadow-card);
}
/* Un halo qui dérive derrière l'illustration. */
.tb-card::before { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; animation: tb-drift 12s ease-in-out infinite alternate; }
.tb-card--violet::before { width: 35rem; height: 35rem; right: -8.75rem; bottom: -18.75rem; background: radial-gradient(circle, rgb(255 255 255 / .14), transparent 65%); }
.tb-card--night::before { width: 32.5rem; height: 32.5rem; right: -3.75rem; top: -12.5rem; background: radial-gradient(circle, color-mix(in srgb, var(--color-primary-500) 60%, transparent), transparent 65%); animation-duration: 14s; }
.tb-card--light::before { width: 28.75rem; height: 28.75rem; right: -5rem; top: -12.5rem; background: radial-gradient(circle, rgb(255 154 193 / .35), transparent 65%); animation-duration: 14s; }
@keyframes tb-drift { to { transform: translate(-3.75rem, 2.5rem) scale(1.12); } }

/* ================= Le texte ================= */
.tb-txt { position: relative; z-index: 2; display: flex; flex: 1; flex-direction: column; padding: 0 var(--tb-pad) var(--tb-pad); }
.tb-eyebrow { display: inline-flex; align-items: center; align-self: flex-start; padding: .25rem .75rem; border-radius: 999px; background: rgb(255 255 255 / .16); font-size: .8125rem; font-weight: 600; }
.tb-card--night .tb-eyebrow { background: rgb(255 255 255 / .1); }
.tb-card--light .tb-eyebrow { background: var(--color-primary-50); color: var(--color-primary-700); }
.tb-title { margin: .625rem 0 0; font-size: 1.75rem; font-weight: 800; letter-spacing: -.04em; line-height: 1.04; text-wrap: balance; }
.tb-title em { font-style: normal; background: linear-gradient(100deg, var(--color-primary-300), #ff9ac1 60%, #ffc28a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tb-card--light .tb-title em { background-image: linear-gradient(100deg, var(--color-primary-600), #e0489a); }
.tb-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; margin: .5rem 0 1.25rem; overflow: hidden; font-size: .9375rem; line-height: 1.5; color: var(--tb-ink-2); }
.tb-act { display: flex; align-items: center; gap: 1rem; margin-top: auto; }
.tb-go {
    display: inline-flex; align-items: center; gap: .625rem; height: 2.875rem; padding: 0 1.25rem 0 .375rem; border: 0; border-radius: 999px; background: #fff; color: var(--color-night);
    font: 800 .875rem var(--font-sans); letter-spacing: -.01em; cursor: pointer; box-shadow: 0 14px 28px -12px rgb(20 10 50 / .6); transition: transform .2s var(--ease-out, cubic-bezier(.2, .8, .2, 1));
}
.tb-go:hover { transform: translateY(-2px); }
.tb-go-ic { display: grid; place-items: center; width: 2.125rem; height: 2.125rem; padding-left: 2px; border-radius: 50%; background: var(--color-night); color: #fff; font-size: .6875rem; }
.tb-card--night .tb-go-ic { background: linear-gradient(140deg, var(--color-primary-500), var(--color-primary-700)); }
.tb-card--light .tb-go { background: var(--color-night); color: #fff; box-shadow: 0 14px 28px -14px rgb(30 21 53 / .7); }
.tb-card--light .tb-go-ic { background: #fff; color: var(--color-night); }
.tb-go:focus-visible, .tb-later:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 3px; }
.tb-card--violet .tb-go:focus-visible, .tb-card--night .tb-go:focus-visible { outline-color: #fff; }
.tb-meta { font-size: .78125rem; line-height: 1.4; color: var(--tb-meta); }
.tb-meta b { display: block; font-size: .8125rem; color: var(--tb-meta-ink); }

/* ================= L'illustration ================= */
/* Une scène de 440 × 300 px, centrée en haut de la carte et mise à l'échelle (--tb-k). */
.tb-ill-box { position: relative; z-index: 1; height: calc(18.75rem * var(--tb-k) + 1.5rem); pointer-events: none; }
.tb-ill-box .tb-ill { inset: auto; left: 50%; top: .75rem; width: 27.5rem; height: 18.75rem; transform: translateX(-50%) scale(var(--tb-k)); transform-origin: center top; }
.tb-ill { position: absolute; inset: 0; }
/* Un élément flottant de l'illustration : une petite carte blanche qui respire. */
.tb-fc { position: absolute; padding: .75rem .875rem; border-radius: .875rem; background: #fff; color: #181c32; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 1px rgb(30 21 53 / .05), 0 18px 36px -18px rgb(30 21 53 / .4); animation: tb-floaty 6s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes tb-floaty { 50% { transform: translateY(-9px); } }
.tb-spark { position: absolute; color: #ffc3da; animation: tb-twinkle 3s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes tb-twinkle { 50% { opacity: .25; transform: scale(.7) rotate(20deg); } }

/* ================= « Plus tard » ================= */
.tb-later { margin-left: auto; padding: .375rem .25rem; border: 0; background: none; cursor: pointer; font: 600 .78125rem var(--font-sans); color: var(--color-muted); }
.tb-later:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ================= La présentation (cadre plein écran) ================= */
.tb-dialog { inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; overflow: hidden; padding: 0; border: 0; background: #0d0a1a; }
.tb-dialog::backdrop { background: #0d0a1a; }
.tb-dialog iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Lu seulement par les lecteurs d'écran : l'annonce du changement de carte. */
.tb-status, .tb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ================= Une seule nouveauté : en largeur ================= */
.tb.is-single .tb-card { --tb-k: .8; flex-direction: row-reverse; align-items: center; min-height: 17rem; }
.tb.is-single .tb-ill-box { flex: 0 0 calc(27.5rem * var(--tb-k)); height: calc(18.75rem * var(--tb-k)); margin-right: 1.5rem; }
.tb.is-single .tb-txt { max-width: 36rem; padding: var(--tb-pad) 2.25rem; }
.tb.is-single .tb-title { font-size: 2.25rem; }

/* ================= Téléphone : une carte unique, à voir sur ordinateur ================= */
.tb--phone .tb-txt { padding: 1.5rem; }
.tb--phone .tb-text { margin-bottom: 0; }

/* ================= Zone de contenu étroite ================= */
/* Les cartes passent l'une sous l'autre ; l'illustration rapetisse, puis s'efface. */
@container tb (max-width: 62rem) { .tb-card { --tb-k: .55; } .tb-title { font-size: 1.5rem; } }
@container tb (max-width: 48rem) {
    .tb-grid { grid-template-columns: minmax(0, 1fr); }
    .tb .tb-card { flex-direction: column; align-items: stretch; min-height: 0; }
    .tb .tb-ill-box { display: none; }
    .tb .tb-txt { max-width: none; padding: var(--tb-pad); }
}

@media (prefers-reduced-motion: reduce) {
    .tb, .tb-card, .tb-go { transition-duration: .01s !important; }
    .tb-card::before, .tb-fc, .tb-spark, .tb-ill *, .tb-ill *::before, .tb-ill *::after { animation: none !important; }
}