/* YAPPARI — composants réutilisables « TELOP » (dépend de tokens.css) */

body.ypr { margin:0; background:var(--studio); color:var(--sumi); font-family:var(--font-corps); -webkit-font-smoothing:antialiased; }
.ypr a { color:var(--bleu-jt); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:2px; }
.ypr a:hover { background:var(--jaune); color:var(--sumi); }
.ypr :focus-visible { outline:2px solid var(--sumi); outline-offset:2px; }
.ypr a:active, .ypr button:active { transform:translateY(1px); }

/* ---- Surlignage signature (UN mot-clé par titre) ---- */
.ypr mark, .ypr-mark {
  background-color:transparent; color:var(--sumi); padding:0 .08em;
  background-image:linear-gradient(var(--jaune), var(--jaune));
  background-size:100% 100%; background-repeat:no-repeat;
}
.ypr-hover-sweep:hover mark { animation:ypr-sweep var(--d-sweep) var(--ease-regie); }

/* ---- Cartouche rubrique ---- */
.ypr-cartouche {
  display:inline-flex; gap:7px; align-items:center;
  font-size:10.5px; padding:3px 9px; color:#FFFFFF;
  transition:transform var(--d-micro) var(--ease-regie);
}
.ypr-cartouche .jp { font-family:var(--font-jp); font-weight:900; }
.ypr-cartouche .fr { font-family:var(--font-display); font-weight:800; font-stretch:75%; letter-spacing:.1em; }
.ypr-cartouche--politique { background:var(--bleu-jt); }
.ypr-cartouche--economie  { background:var(--or); color:var(--sumi); } /* contraste AA */
.ypr-cartouche--societe   { background:var(--vert); }
.ypr-cartouche--meteo     { background:var(--sokuho); }
.ypr-cartouche--culture   { background:var(--violet); }

/* ---- Obi de section (bandeau plat pleine largeur) ---- */
.ypr-obi { color:#FFFFFF; }
.ypr-obi--politique { background:var(--bleu-jt); } .ypr-obi--economie { background:var(--or); }
.ypr-obi--societe { background:var(--vert); } .ypr-obi--meteo { background:var(--sokuho); }
.ypr-obi--culture { background:var(--violet); }
.ypr-obi__inner { max-width:var(--conteneur); margin:0 auto; padding:0 var(--s-4); display:flex; align-items:stretch; flex-wrap:wrap; justify-content:space-between; gap:0 var(--s-3); }
.ypr-obi__kanji { font-family:var(--font-jp); font-weight:900; font-size:22px; background:var(--sumi); color:#FFFFFF; padding:0 16px; display:flex; align-items:center; }
.ypr-obi__titre { margin:0; padding:13px 0; font-family:var(--font-display); font-weight:900; font-stretch:66%; font-size:var(--t-h2-obi); letter-spacing:.05em; align-self:center; }
.ypr-obi__lien { align-self:center; background:var(--sumi); color:#FFFFFF; text-decoration:none; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; padding:5px 10px; }

/* ---- Carte vidéo (toute la carte cliquable) ---- */
.ypr-carte { min-width:0; }
.ypr-carte > a { display:flex; flex-direction:column; gap:11px; color:inherit; text-decoration:none; background:none; cursor:pointer; }
.ypr-thumb { position:relative; aspect-ratio:16/9; overflow:hidden; } /* fond = --*-thumb */
.ypr-thumb__kanji { position:absolute; right:-12px; top:50%; transform:translateY(-50%); font-family:var(--font-jp); font-weight:900; font-size:140px; line-height:1; color:#FFFFFF; opacity:.12; user-select:none; }
.ypr-thumb__ov { position:absolute; inset:0; background:rgba(17,17,20,.22); opacity:0; pointer-events:none; transition:opacity var(--d-micro) var(--ease-regie); }
.ypr-thumb__play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:46px; height:46px; background:var(--sumi); display:flex; align-items:center; justify-content:center; transition:transform var(--d-micro) var(--ease-regie); }
.ypr-thumb__play::after { content:''; width:0; height:0; border-left:13px solid #FFFFFF; border-top:8px solid transparent; border-bottom:8px solid transparent; margin-left:3px; }
.ypr-thumb__duree { position:absolute; right:0; bottom:0; background:var(--sumi); color:#FFFFFF; font-family:var(--font-mono); font-size:11px; padding:2px 8px; }
.ypr-thumb__skel { position:absolute; inset:0; background:var(--skeleton); pointer-events:none; animation:ypr-skel .38s ease-in-out 2 alternate, ypr-skelout .18s var(--ease-regie) .76s forwards; }
.ypr-carte__titre { margin:0; font-family:var(--font-display); font-weight:900; font-stretch:68%; font-size:var(--t-card); line-height:1.12; }
.ypr-carte__meta { margin:0; font-family:var(--font-mono); font-size:var(--t-meta); color:var(--gris-texte); }
.ypr-carte:hover .ypr-thumb__ov, .ypr-carte:focus-within .ypr-thumb__ov { opacity:1; }
.ypr-carte:hover .ypr-thumb__play, .ypr-carte:focus-within .ypr-thumb__play { transform:translate(-50%,-50%) scale(1.08); }
.ypr-carte:hover .ypr-cartouche, .ypr-carte:focus-within .ypr-cartouche { transform:translateX(2px); }
.ypr-carte:hover mark, .ypr-carte:focus-within mark { animation:ypr-sweep var(--d-sweep) var(--ease-regie); }

/* ---- Dépêche (fil d'agence) ---- */
.ypr-depeche { display:grid; grid-template-columns:42px 9px 1fr; gap:10px; align-items:start; padding:8px 2px; border-bottom:1px solid var(--filet); font-size:var(--t-depeche); line-height:1.35; transition:transform var(--d-micro) var(--ease-regie); }
.ypr-depeche time { font-family:var(--font-mono); font-size:11px; color:var(--gris-texte); }
.ypr-depeche__puce { width:9px; height:9px; box-sizing:border-box; border:2px solid currentColor; margin-top:4px; transition:background-color var(--d-micro) var(--ease-regie); } /* color = couleur rubrique */
.ypr-depeche:hover { transform:translateX(4px); }
.ypr-depeche:hover .ypr-depeche__puce { background-color:currentColor; }

/* ---- Ticker 速報 (marquee sans saccade : contenu dupliqué ×2, translateX -50%) ---- */
.ypr-ticker { background:var(--bleu-jt); color:#FFFFFF; display:flex; align-items:stretch; overflow:hidden; }
.ypr-ticker__label { background:var(--jaune); color:var(--sumi); padding:8px 16px; display:flex; align-items:center; gap:8px; flex:none; font-family:var(--font-jp); font-weight:900; font-size:15px; }
.ypr-ticker__wrap { overflow:hidden; flex:1; display:flex; align-items:center; }
.ypr-ticker__track { display:flex; width:max-content; will-change:transform; animation:ypr-tick 42s linear infinite; }
.ypr-ticker__track:hover { animation-play-state:paused; }
.ypr-ticker time { font-family:var(--font-mono); font-size:11.5px; color:var(--jaune); }

/* ---- Roulette horloge (chaque chiffre dans un span keyé par sa valeur) ---- */
.ypr-roll-wrap { display:inline-flex; overflow:hidden; font-variant-numeric:tabular-nums; }
.ypr-roll { display:inline-block; min-width:1ch; text-align:center; animation:ypr-roll var(--d-roll) var(--ease-regie) both; }

/* ---- Keyframes ---- */
@keyframes ypr-tick { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes ypr-sweep { from{background-size:0% 100%} to{background-size:100% 100%} }
@keyframes ypr-roll { from{transform:translateY(100%)} to{transform:none} }
@keyframes ypr-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
@keyframes ypr-skel { from{opacity:1} to{opacity:.72} }
@keyframes ypr-skelout { to{opacity:0;visibility:hidden} }
@keyframes ypr-blink { 0%,55%{opacity:1} 56%,100%{opacity:.2} } /* 2 itérations max, jamais infini */

/* ---- Accessibilité mouvement ---- */
@media (prefers-reduced-motion: reduce) {
  .ypr *, .ypr *::before, .ypr *::after { animation:none !important; transition:none !important; }
  .ypr-thumb__skel { opacity:0 !important; }
}
@media (max-width:639px) {
  .ypr-ticker__track { animation:none; } /* afficher la dernière dépêche seule */
  .ypr [data-touch] { min-height:44px; display:inline-flex; align-items:center; }
}