/* =============================================================================
   XP WEB — le modèle « Match du CAB » (14/10/2026). Noir et blanc, le ballon.
   Tout est conditionné par `html[data-xp="cab"]` 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.
   ============================================================================= */

html[data-xp="cab"] {
  /* L'accent du bandeau sur fond Nuit, le trait des surtitres sur fond clair. */
  --xp-accent: #F7F7FA;
  --xp-trait: #111A3A;
}

/* ---- UNE : le fond, la bordure, le décor, Barbotte -------------------------- */
html[data-xp="cab"][data-xp-emplacements~="une"] [data-bfm="hero"] {
  background:
    radial-gradient(ellipse at 88% 110%, rgba(255, 255, 255, 0.14), transparent 48%),
    var(--gradient-nuit, linear-gradient(160deg, #1B2650 0%, #111A3A 60%, #0A1029 100%));
  border-image: repeating-linear-gradient(90deg, #0A1029 0 28px, #F7F7FA 28px 56px) 1;
}
html[data-xp="cab"][data-xp-emplacements~="une"][data-xp-intensite="festif"] [data-xp-decor="cab"] {
  display: block;
}
html[data-xp="cab"][data-xp-emplacements~="une"] [data-xp-barbotte="cab"] {
  display: block;
  right: 40px;
  transform: rotate(-6deg);
}
@media (max-width: 767px) {
  html[data-xp="cab"][data-xp-emplacements~="une"] [data-xp-barbotte="cab"] {
    right: 12px;
  }
}

/* ---- COIN : le ballon sur son tee, qui se balance ; il tourne au survol ---- */
html[data-xp="cab"][data-xp-emplacements~="coin"][data-xp-intensite="festif"] [data-xp-coin="cab"] {
  display: block;
}
[data-xp-coin="cab"] .xp-ballon {
  transform-box: fill-box;
  transform-origin: 50% 90%;
  animation: xp-cab-balance 3.2s ease-in-out infinite;
}
[data-bfm="hero"]:hover [data-xp-coin="cab"] .xp-ballon {
  animation: xp-cab-tourne 1.1s cubic-bezier(0.2, 0.7, 0.3, 1) 1;
}
@keyframes xp-cab-balance {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
}
@keyframes xp-cab-tourne {
  from { transform: rotate(-6deg); }
  to { transform: rotate(354deg); }
}

/* ---- ICO et ENVOL : l'Onde devient un ballon (le mot lu ne change pas) -----
   Le dessin de l'icône est MASQUÉ, et un pseudo-élément porte la forme du
   moment par un masque CSS : la couleur reste celle du texte, la taille celle
   demandée (`--taille`), et il n'y a pas un octet d'image. Les Cœurs gardent
   leur forme : deux natures, deux dessins (WCAG 1.4.1). */
html[data-xp="cab"][data-xp-emplacements~="ico"] [data-icone="onde"]:not([data-bfm="envol"] *) > svg,
html[data-xp="cab"][data-xp-emplacements~="envol"] [data-bfm="envol"] [data-icone="onde"] > svg {
  display: none;
}
html[data-xp="cab"][data-xp-emplacements~="ico"] [data-icone="onde"]:not([data-bfm="envol"] *)::before,
html[data-xp="cab"][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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'><ellipse cx='12' cy='12' rx='10' ry='6' transform='rotate(-35 12 12)'/><path d='M8.5 14.5 15.5 9.5'/><path d='m10.2 10.8 1.4 1.4M12.1 9.4l1.4 1.4M14 8l1.4 1.4'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'><ellipse cx='12' cy='12' rx='10' ry='6' transform='rotate(-35 12 12)'/><path d='M8.5 14.5 15.5 9.5'/><path d='m10.2 10.8 1.4 1.4M12.1 9.4l1.4 1.4M14 8l1.4 1.4'/></svg>") center / contain no-repeat;
}

/* ---- VIG : les vignettes sans photo, noir et blanc ------------------------- */
html[data-xp="cab"][data-xp-emplacements~="vig"] [data-vignette] {
  background:
    repeating-linear-gradient(-55deg, transparent 0 34px, rgba(255, 255, 255, 0.10) 34px 48px),
    linear-gradient(135deg, #1C1C24 0%, #111A3A 100%);
}

/* ---- SURT : le trait des surtitres ----------------------------------------- */
html[data-xp="cab"][data-xp-emplacements~="surt"] [data-kicker]::before {
  background: var(--xp-trait);
}

/* ---- Le bandeau de la une : l'accent du modèle ----------------------------- */
html[data-xp="cab"] [data-bfm="xp-bandeau"] {
  --xp-accent: #F7F7FA;
}