/* =============================================================================
XP WEB — le modèle « Foire du Livre » (28/10/2026). Une lampe de lecture,
des pages qui flottent, une pile de livres aux couleurs de la charte, la
page qui vole. Tout est conditionné par `html[data-xp="livre"]` et par les
emplacements cochés (`[data-xp-emplacements~="…"]`) — le serveur les pose
au rendu, l'îlot les corrige aux bornes de la fenêtre. Liée SEULEMENT
quand l'opération est en cours ou proche (socle.css).
Les couleurs sont celles de la charte : le Violet Bréniges pour le trait des
surtitres (6,38:1 sur blanc), le Corail pour l'accent sur Bleu Nuit, le
papier en blanc cassé voilé.
============================================================================= */
html[data-xp="livre"] {
--xp-accent: #FF8756;
--xp-trait: #7E3DBD;
}
/* ---- UNE : la lampe de lecture, le décor, Barbotte à gauche --------------- */
html[data-xp="livre"][data-xp-emplacements~="une"] [data-bfm="hero"] {
background:
radial-gradient(circle at 14% 8%, rgba(247, 247, 250, 0.16), transparent 34%),
var(--gradient-nuit, linear-gradient(160deg, #1B2650 0%, #111A3A 60%, #0A1029 100%));
}
html[data-xp="livre"][data-xp-emplacements~="une"][data-xp-lueur="non"] [data-bfm="hero"] {
background: var(--gradient-nuit, linear-gradient(160deg, #1B2650 0%, #111A3A 60%, #0A1029 100%));
}
html[data-xp="livre"][data-xp-emplacements~="une"][data-xp-intensite="festif"] [data-xp-decor="livre"] {
display: block;
}
/* Barbotte aux demi-lunettes lit en bas à GAUCHE, sous la lampe — à droite,
la bulle du direct et la pastille d'urgence la recouvriraient sur un écran
de 900 px de haut (vu à l'aperçu du 28/10) ; la pile de livres du décor
tient le coin droit. */
html[data-xp="livre"][data-xp-emplacements~="une"] [data-xp-barbotte="livre"] {
display: block;
left: 40px;
transform: rotate(5deg);
}
@media (max-width: 767px) {
html[data-xp="livre"][data-xp-emplacements~="une"] [data-xp-barbotte="livre"] {
left: 12px;
}
}
/* En léger, quatre pages sur sept — on masque le groupe qui PLACE la page. */
html[data-xp-quantite="leger"] [data-xp-decor="livre"] .xp-pages > g:nth-child(n + 5) {
display: none;
}
/* Les pages flottent lentement, chacune à son rythme (animation-delay), et
s'inclinent autour de LEUR centre : le groupe animé ne porte aucun attribut
transform (28/10/2026), sinon l'inclinaison se ferait autour du coin de la
scène. */
[data-xp-decor="livre"] .xp-page {
transform-box: fill-box;
transform-origin: center;
animation: xp-livre-flotte 7s ease-in-out infinite alternate;
}
@keyframes xp-livre-flotte {
from { translate: 0 -10px; rotate: -2deg; }
to { translate: 0 10px; rotate: 2deg; }
}
/* ---- COIN : la pile de livres, le marque-page qui se balance -------------- */
html[data-xp="livre"][data-xp-emplacements~="coin"][data-xp-intensite="festif"] [data-xp-coin="livre"] {
display: block;
}
[data-xp-coin="livre"] .xp-marque {
transform-box: fill-box;
transform-origin: 50% 0;
animation: xp-livre-balance 2.8s ease-in-out infinite alternate;
animation-duration: calc(2.8s * var(--xp-coin-lenteur, 1));
}
[data-bfm="hero"]:hover [data-xp-coin="livre"] .xp-pile {
animation: xp-livre-leve 0.5s ease-out 1;
}
@keyframes xp-livre-balance {
from { rotate: -7deg; }
to { rotate: 7deg; }
}
@keyframes xp-livre-leve {
50% { translate: 0 -8px; }
}
/* ---- TRAV : la page vole droit, et volette --------------------------------- */
html[data-xp="livre"] [data-bfm="xp-traversee"] {
animation-name: xp-livre-traverse-droite;
}
html[data-xp="livre"] [data-bfm="xp-traversee"][data-sens="gauche"] {
animation-name: xp-livre-traverse-gauche;
}
[data-bfm="xp-traversee"] .xp-feuille {
transform-box: fill-box;
transform-origin: center;
animation: xp-livre-volette 0.9s ease-in-out infinite alternate;
}
@keyframes xp-livre-volette {
from { scale: 1 1; }
to { scale: 0.55 1; }
}
@keyframes xp-livre-traverse-droite {
from { transform: translateX(-110%); }
to { transform: translateX(calc(100vw + 10%)); }
}
@keyframes xp-livre-traverse-gauche {
from { transform: translateX(calc(100vw + 10%)); }
to { transform: translateX(-110%); }
}
/* ---- ICO et ENVOL : les Ondes en petits livres (les Cœurs gardent leur forme)
Le dessin de l'icône est MASQUÉ, un pseudo-élément porte la forme du
moment par un masque CSS — le mot lu ne change pas. Le réglage « qui se
déguise » : « les Cœurs seuls » laisse tout tel quel. */
html[data-xp="livre"]:not([data-xp-ico="coeurs"])[data-xp-emplacements~="ico"] [data-icone="onde"]:not([data-bfm="envol"] *) > svg,
html[data-xp="livre"]:not([data-xp-ico="coeurs"])[data-xp-emplacements~="envol"] [data-bfm="envol"] [data-icone="onde"] > svg {
display: none;
}
html[data-xp="livre"]:not([data-xp-ico="coeurs"])[data-xp-emplacements~="ico"] [data-icone="onde"]:not([data-bfm="envol"] *)::before,
html[data-xp="livre"]:not([data-xp-ico="coeurs"])[data-xp-emplacements~="envol"] [data-bfm="envol"] [data-icone="onde"]::before {
content: "";
display: inline-block;
width: var(--taille, 14px);
height: var(--taille, 14px);
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
/* ---- VIG : les vignettes sans photo, Nuit → Violet Bréniges ---------------- */
html[data-xp="livre"][data-xp-emplacements~="vig"] [data-vignette] {
background: linear-gradient(135deg, #111A3A 0%, #3A1F63 55%, #7E3DBD 100%);
}
/* ---- SURT : le trait des surtitres ----------------------------------------- */
html[data-xp="livre"][data-xp-emplacements~="surt"] [data-kicker]::before {
background: var(--xp-trait);
}
/* ---- Le bandeau de la une : l'accent du modèle ----------------------------- */
html[data-xp="livre"] [data-bfm="xp-bandeau"] {
--xp-accent: #FF8756;
}
/* ---- Le fond de page (la scène étendue aux pages cochées) ------------------ */
[data-bfm="xp-fond"][data-xp-fond="livre"] {
background: radial-gradient(circle at 14% 0%, rgba(126, 61, 189, 0.14), transparent 50%);
}