/* ══════════════════════════════════════════════════════════════════════════════
   ASap FC — la planche d'animations de l'habillage SUR MESURE.
   Écrite le 21/08/2026, sur la demande de Silva : « la page spécificités, c'est
   là qu'il faut mettre les animations sur-mesure qu'on a faites — compo,
   maillot, balayage, les scrollers derniers matchs calendrier, animations de
   cotes, classement, tout quoi ».

   — Pourquoi ces démos-là ici, et pas sur l'accueil —
   L'accueil montre les habillages du CATALOGUE, et seulement leurs animations
   (halo, agrandissement, lavis). Cette page-ci vend un habillage DESSINÉ POUR
   UNE CHAÎNE : c'est le seul endroit où la panoplie complète a sa place, parce
   que c'est justement ce qu'on y achète. La distinction est la même que celle
   posée le 21/08 au matin — on n'illustre pas un produit avec ce qu'il ne fait
   pas, dans un sens comme dans l'autre.

   Palette : celle de la capture qui ouvre la page (thème Ligue des Champions),
   or #f0c040 et cyan #22d3ee. Les jetons `--gold` et `--green` portés par
   `.ovl` suffisent à rehabiller toute la planche : c'est précisément ce que
   fait le sur-mesure.
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── ANIMATIONS D'ÉVÉNEMENT — démos reprises de l'original (produit) ── */
.anims{padding:88px 0 0}
.anims .tete{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:end}
.anims .tete p{font-size:15.5px;color:var(--ovl-texte-2);margin:0}
.seq{margin-top:36px;display:flex;flex-direction:column;gap:16px}
.seq-row{display:grid;grid-template-columns:130px minmax(0,1fr);gap:20px;align-items:center}
.seq-meta .n{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:20px;letter-spacing:.08em;text-transform:uppercase;background:var(--ovl-etiquette);display:inline-block;padding:1px 8px}
.seq-meta .t{margin-top:8px;font-size:13px;line-height:1.5;color:var(--ovl-texte-2)}
.ovl{--gold:#f5c518;position:relative;overflow:hidden;background:rgba(6,10,7,.94);border:3px solid var(--ovl-cadre);font-family:'Barlow Condensed',sans-serif;color:#f1f5f9;container-type:inline-size}
.ovl-bar{position:relative;display:flex;align-items:center;height:104px;isolation:isolate}
.ovl-bar::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,rgba(245,197,24,.7),transparent)}
.ovl-side{flex:1;display:flex;align-items:center;gap:14px;min-width:0;padding:0 18px}
.ovl-side.left{justify-content:flex-end}
.ovl-side.right{justify-content:flex-start}
.ovl-team{text-align:center;line-height:1}
.ovl-name{font-size:26px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.ovl-code{margin-top:5px;font-size:13px;font-weight:700;letter-spacing:.16em;color:#8595a6}
.ovl-scorers{display:flex;flex-direction:column;gap:3px;font-family:Archivo,sans-serif;font-size:12px;color:#aeb9c7;white-space:nowrap}
.ovl-scorers b{color:var(--gold);font-weight:700;font-size:11.5px}
.ovl-mid{flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 20px 8px;height:100%;background:rgba(0,0,0,.24);border-left:1px solid rgba(255,255,255,.07);border-right:1px solid rgba(255,255,255,.07)}
.ovl-score{display:flex;align-items:center;gap:14px;line-height:1}
.ovl-n{position:relative;display:inline-block;min-width:42px;text-align:center;font-size:58px;font-weight:900;color:#fff;text-shadow:0 3px 12px rgba(0,0,0,.8)}
.ovl-n i{font-style:normal;display:block}
.ovl-n i.b{position:absolute;left:0;right:0;top:0;opacity:0}
.ovl-sep{font-size:38px;font-weight:300;color:var(--gold);opacity:.55}
.ovl-min{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:19px;font-weight:800;letter-spacing:.1em;color:var(--green);text-shadow:0 0 12px rgba(34,197,94,.45)}
.ovl-min em{width:6px;height:6px;border-radius:50%;background:var(--green);display:block}
.ovl-card{display:inline-block;width:12px;height:16px;border-radius:2px;margin-left:7px;vertical-align:middle;opacity:0;background:linear-gradient(160deg,#f87171,#dc2626);box-shadow:0 0 10px rgba(239,68,68,.6)}
.ovl-sweep{position:absolute;top:0;bottom:0;left:-30%;width:28%;z-index:2;pointer-events:none;opacity:0;transform:skewX(-18deg);background:linear-gradient(105deg,transparent,rgba(255,255,255,.13) 45%,rgba(255,226,122,.2) 55%,transparent)}
.demo-but .ovl-bar{animation:dGlow 6s infinite}
.demo-but .ovl-n.swap{animation:dPop 6s infinite}
.demo-but .ovl-n.swap i.a{animation:dOld 6s infinite}
.demo-but .ovl-n.swap i.b{animation:dNew 6s infinite}
.demo-but .ovl-sweep{animation:dSweep 6s infinite}
.demo-but .ovl-scorers .new{animation:dScorer 6s infinite}
@keyframes dPop{0%,14%{transform:scale(1);color:#fff}19%{transform:scale(1.55);color:var(--green);text-shadow:0 0 26px rgba(34,197,94,.9)}23%{transform:scale(1.12);color:var(--green)}28%,100%{transform:scale(1);color:#fff;text-shadow:0 3px 12px rgba(0,0,0,.8)}}
@keyframes dOld{0%,14%{opacity:1}16%,94%{opacity:0}100%{opacity:1}}
@keyframes dNew{0%,14%{opacity:0}16%,94%{opacity:1}100%{opacity:0}}
@keyframes dGlow{0%,14%,34%,100%{box-shadow:none}20%{box-shadow:0 0 60px rgba(34,197,94,.4),inset 0 0 44px rgba(34,197,94,.14)}}
@keyframes dSweep{0%,14%{left:-30%;opacity:0}16%{opacity:1}27%{opacity:1}29%,100%{left:110%;opacity:0}}
@keyframes dScorer{0%,16%{opacity:0;transform:translateY(-5px)}21%,93%{opacity:1;transform:translateY(0)}98%,100%{opacity:0;transform:translateY(-5px)}}
.demo-carton .ovl-bar{animation:dRed 6s infinite}
.demo-carton .ovl-card{animation:dCard 6s infinite}
@keyframes dCard{0%,14%{opacity:0;transform:rotate(-75deg) scale(.5)}19%{opacity:1;transform:rotate(8deg) scale(1.15)}22%{transform:rotate(-4deg) scale(.97)}25%,88%{opacity:1;transform:rotate(0) scale(1)}95%,100%{opacity:0;transform:rotate(0) scale(1)}}
@keyframes dRed{0%,14%,32%,100%{box-shadow:none}20%{box-shadow:0 0 48px rgba(239,68,68,.38),inset 0 0 34px rgba(239,68,68,.13)}}
.anim-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-top:34px;align-items:start}
.anim-card{border:3px solid var(--ovl-cadre);background:var(--ovl-fond);overflow:hidden;display:flex;flex-direction:column}
.anim-card .visual{background:#070a09;padding:16px;display:flex;align-items:center;justify-content:center}
.anim-card .body{padding:18px 20px 20px;border-top:3px solid var(--ovl-cadre)}
.anim-card .body .k{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ovl-texte-2)}
.anim-card .body h4{margin:8px 0 6px;font-family:'Barlow Condensed',sans-serif;font-size:21px;font-weight:800;text-transform:uppercase}
.anim-card .body p{margin:0;font-size:14px;color:var(--ovl-texte-2)}
.ovl-pitch{border:0;overflow:hidden;width:100%;max-width:400px}
.op-head{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(0,0,0,.22)}
.op-head .t{font-size:18px;font-weight:900;letter-spacing:.05em;text-transform:uppercase}
.op-head .f{font-size:13px;font-weight:800;letter-spacing:.08em;color:var(--gold);min-width:74px;text-align:center;border:1px solid rgba(245,197,24,.3);background:rgba(245,197,24,.1);border-radius:5px;padding:2px 9px}
.op-field{position:relative;aspect-ratio:1/1.02;overflow:hidden;background:repeating-linear-gradient(180deg,rgba(255,255,255,.035) 0 26px,transparent 26px 52px),linear-gradient(180deg,#1f6b39,#175730)}
.op-field::before{content:'';position:absolute;left:50%;top:50%;width:34%;aspect-ratio:1;transform:translate(-50%,-50%);border:2px solid rgba(255,255,255,.14);border-radius:50%}
.op-field::after{content:'';position:absolute;left:0;right:0;top:50%;height:2px;background:rgba(255,255,255,.14)}
.op-dot{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px}
.op-dot span{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;color:#3a2a05;background:radial-gradient(circle at 50% 32%,#ffd75e,#e8a020);border:2px solid rgba(255,255,255,.5);box-shadow:0 3px 9px rgba(0,0,0,.45)}
.op-dot b{font-size:10px;font-weight:800;letter-spacing:.03em;background:rgba(4,10,6,.78);border-radius:3px;padding:1px 5px}
.op-wipe{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transform:translateX(-110%) skewX(-14deg);background:linear-gradient(100deg,transparent,rgba(245,197,24,.09) 42%,rgba(255,226,122,.22) 50%,rgba(245,197,24,.09) 58%,transparent)}
.op-banner{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);z-index:4;opacity:0;min-width:62%;padding:12px 20px 14px;text-align:center;border-radius:12px;background:linear-gradient(155deg,rgba(6,18,10,.96),rgba(2,8,4,.97));border:1px solid rgba(34,197,94,.45);box-shadow:0 18px 50px rgba(0,0,0,.7),0 0 40px rgba(34,197,94,.35)}
.op-banner .k{font-size:12px;font-weight:900;letter-spacing:.22em;text-transform:uppercase;color:var(--green);text-shadow:0 0 14px rgba(34,197,94,.7)}
.op-banner .m{margin-top:2px;font-size:10.5px;font-weight:800;letter-spacing:.12em;color:#8595a6}
.op-banner .o,.op-banner .i{margin-top:7px;font-size:17px;font-weight:800;letter-spacing:.04em}
.op-banner .o{color:#fca5a5}
.op-banner .i{font-size:19px;color:#bbf7d0}
.demo-subst .op-banner{animation:dBanner 7s infinite}
.demo-subst .op-wipe{animation:dWipe 7s infinite}
@keyframes dBanner{0%,10%{opacity:0;transform:translate(-50%,-42%) scale(.72);filter:blur(4px)}16%{opacity:1;transform:translate(-50%,-50%) scale(1.06);filter:blur(0)}19%,84%{opacity:1;transform:translate(-50%,-50%) scale(1)}92%,100%{opacity:0;transform:translate(-50%,-56%) scale(.94)}}
@keyframes dWipe{0%,9%{transform:translateX(-110%) skewX(-14deg);opacity:0}11%{opacity:1}17%{opacity:1}19%,100%{transform:translateX(110%) skewX(-14deg);opacity:0}}
.op-tabs{display:flex;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(0,0,0,.18)}
.op-tabs span{flex:1;text-align:center;padding:8px 0;font-size:12.5px;font-weight:800;letter-spacing:.07em;color:#5b6b76}
.op-swap{position:relative;display:inline-block}
.op-swap i{font-style:normal;display:block;white-space:nowrap}
.op-swap i.b{position:absolute;left:0;top:0;right:0}
.op-dot.pb span{background:radial-gradient(circle at 50% 32%,#8ae7ff,#0891b2);color:#04252e}
.op-dot.pa,.op-dot.pb{opacity:0}
.demo-switch .op-dot.pa{animation:dPlA 10s infinite;animation-delay:calc(var(--i) * 35ms)}
.demo-switch .op-dot.pb{animation:dPlB 10s infinite;animation-delay:calc(var(--i) * 35ms)}
.demo-switch .op-swap i.a{animation:dSideA 10s infinite}
.demo-switch .op-swap i.b{animation:dSideB 10s infinite}
.demo-switch .op-tabs .ta{animation:dTabA 10s infinite}
.demo-switch .op-tabs .tb{animation:dTabB 10s infinite}
.demo-switch .op-wipe{animation:dWipe2 10s infinite}
@keyframes dPlA{0%{opacity:0;transform:translate(-50%,-50%) scale(.55);filter:blur(3px)}4%{opacity:1;transform:translate(-50%,-50%) scale(1.09);filter:blur(0)}7%,44%{opacity:1;transform:translate(-50%,-50%) scale(1)}48%,100%{opacity:0;transform:translate(-50%,-50%) scale(.92)}}
@keyframes dPlB{0%,48%{opacity:0;transform:translate(-50%,-50%) scale(.92)}50%{opacity:0;transform:translate(-50%,-50%) scale(.55);filter:blur(3px)}54%{opacity:1;transform:translate(-50%,-50%) scale(1.09);filter:blur(0)}57%,94%{opacity:1;transform:translate(-50%,-50%) scale(1)}98%,100%{opacity:0;transform:translate(-50%,-50%) scale(.92)}}
@keyframes dSideA{0%,44%{opacity:1;transform:translateX(0);color:var(--gold)}48%,95%{opacity:0;transform:translateX(-12px);color:var(--gold)}99%,100%{opacity:1;transform:translateX(0);color:var(--gold)}}
@keyframes dSideB{0%,48%{opacity:0;transform:translateX(12px);color:#22d3ee}53%,94%{opacity:1;transform:translateX(0);color:#22d3ee}98%,100%{opacity:0;transform:translateX(12px);color:#22d3ee}}
@keyframes dTabA{0%,44%{color:var(--gold);box-shadow:inset 0 -2px 0 var(--gold)}48%,95%{color:#5b6b76;box-shadow:none}99%,100%{color:var(--gold);box-shadow:inset 0 -2px 0 var(--gold)}}
@keyframes dTabB{0%,48%{color:#5b6b76;box-shadow:none}53%,94%{color:#22d3ee;box-shadow:inset 0 -2px 0 #22d3ee}98%,100%{color:#5b6b76;box-shadow:none}}
@keyframes dWipe2{0%,43%{transform:translateX(-110%) skewX(-14deg);opacity:0}45%{opacity:1}49%{transform:translateX(110%) skewX(-14deg);opacity:1}50%,93%{opacity:0;transform:translateX(-110%) skewX(-14deg)}95%{opacity:1}99%,100%{transform:translateX(110%) skewX(-14deg);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .ovl *,.ovl,.ovl-pitch{animation:none !important}
  .ovl-n i.b,.ovl-scorers .new,.ovl-card,.op-banner,.op-dot.pa{opacity:1}
  .ovl-n i.a,.op-dot.pb,.op-swap i.b{opacity:0}
}
@container (max-width:760px){.ovl-bar{height:88px}.ovl-name{font-size:21px}.ovl-n{font-size:46px;min-width:34px}.ovl-sep{font-size:30px}.ovl-min{font-size:16px}.ovl-scorers{font-size:11px}}
@container (max-width:560px){.ovl-bar{height:74px}.ovl-scorers{display:none}.ovl-side{padding:0 10px;gap:8px}.ovl-mid{padding:0 12px 6px}.ovl-name{font-size:17px}.ovl-code{font-size:11px;margin-top:3px}.ovl-n{font-size:34px;min-width:24px}.ovl-sep{font-size:23px}.ovl-min{font-size:13px;gap:5px}.ovl-min em{width:5px;height:5px}}

/* ═══════════════════════════════════════════════════════════════════════════
   LES TROIS FAMILLES QUI MANQUAIENT À LA PLANCHE
   Cotes, classement, et les pistes défilantes (derniers matchs / calendrier).
   Elles reproduisent ce que fait l'overlay : les cotes basculent quand le
   bookmaker bouge, le classement se resserre autour des deux équipes, et les
   listes trop longues défilent au lieu d'être tronquées.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Cadre commun des trois ─────────────────────────────────────────────── */
.sm{
  position:relative; overflow:hidden; container-type:inline-size;
  background:rgba(6,10,7,.94); border:2px solid var(--ovl-cadre,#0b1329);
  font-family:'Barlow Condensed',sans-serif; color:#f1f5f9;
  --gold:#f0c040; --green:#22d3ee;
}
.sm-tete{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:10px 14px; border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.22);
  font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:#8595a6;
}
.sm-tete b{ color:var(--gold); font-weight:800 }

/* ── 1. Les cotes ───────────────────────────────────────────────────────────
   Trois issues. Quand une cote change, l'ancienne valeur sort par le haut, la
   nouvelle entre par le bas, et la cellule flashe — vert si la cote monte,
   rouge si elle descend. C'est la mécanique de l'overlay, à la milliseconde
   près : mêmes durées, même décalage de 110 ms entre les trois cellules.     */
.sm-cotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.07) }
.sm-cel{ background:rgba(6,10,7,.96); padding:14px 10px 16px; text-align:center; position:relative; overflow:hidden }
.sm-cel .lab{ font-size:11px; font-weight:700; letter-spacing:.18em; color:#8595a6 }
.sm-cel .val{ position:relative; height:40px; margin-top:6px }
.sm-cel .val i{ position:absolute; left:0; right:0; top:0; font-style:normal;
  font-size:34px; font-weight:800; letter-spacing:-.02em; line-height:40px; color:#fff }
@keyframes smSort{ 0%,26%{opacity:1;transform:translateY(0)} 32%,100%{opacity:0;transform:translateY(-90%)} }
@keyframes smEntre{ 0%,26%{opacity:0;transform:translateY(90%)} 32%,100%{opacity:1;transform:translateY(0)} }
@keyframes smMonte{ 0%,26%,46%,100%{background:rgba(6,10,7,.96)} 33%{background:rgba(34,197,94,.22)} }
@keyframes smBaisse{ 0%,26%,46%,100%{background:rgba(6,10,7,.96)} 33%{background:rgba(239,68,68,.22)} }
.demo-sm-cotes .val i.a{ animation:smSort 7s infinite }
.demo-sm-cotes .val i.b{ animation:smEntre 7s infinite }
.demo-sm-cotes .sm-cel:nth-child(1){ animation:smMonte 7s infinite }
.demo-sm-cotes .sm-cel:nth-child(2){ animation:smBaisse 7s infinite .11s }
.demo-sm-cotes .sm-cel:nth-child(3){ animation:smBaisse 7s infinite .22s }
.demo-sm-cotes .sm-cel:nth-child(2) i.a,.demo-sm-cotes .sm-cel:nth-child(2) i.b{ animation-delay:.11s }
.demo-sm-cotes .sm-cel:nth-child(3) i.a,.demo-sm-cotes .sm-cel:nth-child(3) i.b{ animation-delay:.22s }

/* ── 2. Le classement ───────────────────────────────────────────────────────
   Six lignes, resserrées autour des deux équipes du match : c'est la règle de
   l'overlay — on ne montre pas vingt clubs, on montre le voisinage qui compte.
   Les lignes arrivent en cascade, et les deux équipes du match sont marquées. */
.sm-cl{ padding:6px 0 8px }
.sm-lg{ display:grid; grid-template-columns:26px 1fr 34px 34px; align-items:center; gap:10px;
  padding:7px 14px; font-size:15px; font-weight:700 }
.sm-lg .r{ font-size:12px; color:#8595a6; text-align:right }
.sm-lg .n{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600 }
.sm-lg .j,.sm-lg .p{ text-align:right; font-size:13px; color:#aeb9c7 }
.sm-lg .p{ color:#fff; font-weight:800 }
.sm-lg.ici{ background:rgba(240,192,64,.12); box-shadow:inset 3px 0 0 var(--gold) }
.sm-lg.ici .n{ color:var(--gold) }
@keyframes smLigne{
  0%{ opacity:0; transform:translateX(-14px) }
  8%,88%{ opacity:1; transform:none }
  96%,100%{ opacity:0; transform:translateX(-14px) }
}
.demo-sm-classement .sm-lg{ animation:smLigne 8s infinite backwards; animation-delay:calc(var(--i) * 90ms) }

/* ── 3. Les pistes défilantes ───────────────────────────────────────────────
   Derniers matchs et calendrier : quand la liste dépasse la hauteur du
   panneau, elle défile lentement en aller-retour au lieu d'être tronquée.
   C'est le `wcPing` de l'overlay, et le `murPing` du mur de temps.
   `alternate` et non `infinite` sec : une liste qui repart d'un coup se lit
   comme un bug, alors qu'un va-et-vient se lit comme une consultation.       */
.sm-piste{ height:180px; overflow:hidden; position:relative }
.sm-piste .rail{ padding:4px 0 }
.sm-ln{ display:grid; grid-template-columns:1fr 46px 1fr; align-items:center; gap:8px;
  padding:6px 14px; font-size:14px; font-weight:600 }
.sm-ln .g{ text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.sm-ln .d{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#aeb9c7 }
/* Les écussons de la piste (23/08) : 16 px, calés sur la ligne, côté score. */
.sm-ln img{ display:inline-block; width:16px; height:16px; vertical-align:-3px; object-fit:contain }
.sm-ln .g img{ margin-left:7px } .sm-ln .d img{ margin-right:7px }
.sm-ln .s{ text-align:center; font-weight:800; color:var(--gold); font-size:13px;
  background:rgba(240,192,64,.12); border-radius:3px; padding:1px 0 }
.sm-ln .s.a{ color:#8595a6; background:rgba(255,255,255,.05) }
@keyframes smDefile{ from{ transform:translateY(0) } to{ transform:translateY(var(--course,-120px)) } }
.demo-sm-piste .rail{ animation:smDefile 9s ease-in-out infinite alternate }
.sm-piste::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:34px; pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(6,10,7,.94));
}

@container (max-width:520px){
  .sm-cel .val i{ font-size:26px } .sm-lg{ font-size:13px } .sm-ln{ font-size:12.5px }
}

@media (prefers-reduced-motion:reduce){
  .sm *,.sm{ animation:none !important }
  .sm-cel .val i.a{ opacity:0 } .sm-cel .val i.b{ opacity:1 }
}

/* ── Les écussons ───────────────────────────────────────────────────────────
   Ajoutés le 21/08 : sans eux, les démos disaient « Fenerbahçe » quand
   l'overlay, lui, montre l'écusson. Servis en LOCAL (assets/logos/) et non
   depuis le CDN de la source de données : le site s'interdit toute requête
   tierce, et `confidentialite.html` l'affirme. Ramenés de 150 px à 60 px au
   passage — 302 Ko à eux six pour du décor, ce n'était pas raisonnable.
   `object-fit:contain` : un écusson déformé se remarque immédiatement.       */
.ovl-ecu{ width:38px; height:38px; flex:none; object-fit:contain }
/* L'ecusson et le nom tiennent sur UNE ligne : en flux normal, l'image
   poussait le nom au-dessous et l'en-tete du terrain doublait de hauteur. */
.op-head .t{ display:flex; align-items:center; gap:7px; min-width:0 }
.op-ecu{ width:20px; height:20px; flex:none; object-fit:contain }
.sm-lg .n{ display:flex; align-items:center; gap:9px }
.sm-lg .n img{ width:20px; height:20px; flex:none; object-fit:contain }
@container (max-width:560px){ .ovl-ecu{ width:28px; height:28px } }