/* =========================================================================
   IASHARK — Liste des matchs de l'accueil (home-list.js). Maquette v2 validee
   le 15/09/2026, integree le 16/09 (+ pastille de niveau prob_band), simplifiee le 16/09
   (3 onglets de jour, etoile par match, « Mes matchs »).
   Tout est prefixe .hl- (aucun conflit avec .mc, .day-tab, .filters d'index.html).
   Tokens : ceux d'index.html uniquement (--page, --surface, --surface-2,
   --cyan, --cyan2, --amber, --green, --red, --text, --soft, --line).
   Cyan = signal et actions. Ambre = favoris et verrou Pro.
   Animations : transform/box-shadow uniquement (jamais d'opacite 0 bloquante),
   toutes coupees par prefers-reduced-motion.
   ========================================================================= */
.hl{max-width:860px;margin:0 auto;color:var(--text,#f4f7fb);font-family:'Inter',system-ui,sans-serif;}
.hl *,.hl *::before,.hl *::after{box-sizing:border-box;}
.hl button{font-family:inherit;}
.hl .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ---------- En-tete ---------- */
.hl-head{margin-bottom:12px;}
.hl-title{margin:0;font-size:24px;font-weight:800;letter-spacing:-.7px;line-height:1.15;}
.hl-sub{margin:4px 0 0;font-size:12.5px;color:var(--soft,#a6b4c6);}

/* ---------- Jours : Aujourd'hui / Demain / Apres-demain ---------- */
.hl-days{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 0 12px;}
.hl-day{min-width:0;min-height:52px;padding:6px 4px;border-radius:11px;border:1px solid var(--line,rgba(141,179,211,.14));background:rgba(10,20,32,.6);
  color:var(--soft,#a6b4c6);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;cursor:pointer;transition:color .15s,background .15s,border-color .15s;}
.hl-day-name{max-width:100%;font-size:13px;font-weight:700;line-height:1.15;overflow-wrap:anywhere;}
.hl-day-sub{max-width:100%;font-size:11px;line-height:1.2;font-variant-numeric:tabular-nums;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hl-day:hover:not(:disabled){color:var(--text,#f4f7fb);border-color:rgba(141,179,211,.3);}
.hl-day.is-active{color:var(--cyan,#20d5ef);border-color:rgba(32,213,239,.5);background:rgba(32,213,239,.1);box-shadow:inset 0 -2px 0 var(--cyan,#20d5ef);}
.hl-day:disabled{cursor:default;color:rgba(166,180,198,.55);background:transparent;border-style:dashed;}
.hl-day:focus-visible{outline:2px solid var(--cyan,#20d5ef);outline-offset:2px;}

/* ---------- Blocs ---------- */
.hl-block-title{display:flex;align-items:center;gap:7px;margin:0 0 8px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--soft,#a6b4c6);}
.hl-block-title svg{width:13px;height:13px;color:var(--cyan,#20d5ef);fill:currentColor;}
.hl-mine{margin:4px 0 14px;}
.hl-offer{margin:4px 0 14px;}
.hl-offer-rows{border:1px solid rgba(32,213,239,.35);border-radius:14px;background:rgba(10,20,32,.6);overflow:hidden;box-shadow:0 0 22px -12px rgba(32,213,239,.6);}
.hl-offer-rows>.hl-item:first-child>.hl-row{border-top:0;}
/* Etoile allumee dans le bloc du match offert (visuel seulement : le vrai favori reste pilote par le bouton). */
.hl-offer .hl-mstar{color:var(--cyan,#20d5ef);}
.hl-offer .hl-mstar svg{fill:currentColor;filter:drop-shadow(0 0 5px rgba(32,213,239,.4));}
.hl-mine-n{min-width:18px;height:16px;padding:0 5px;border-radius:8px;background:rgba(32,213,239,.14);color:var(--cyan,#20d5ef);font-size:10px;line-height:16px;letter-spacing:0;text-align:center;}
.hl-mine-rows{border:1px solid rgba(245,158,11,.28);border-radius:14px;background:rgba(10,20,32,.6);overflow:hidden;}
.hl-mine-rows>.hl-item:first-child>.hl-row{border-top:0;}
.hl-leagues{margin-top:10px;}

/* ---------- Competition (21st.dev "Accordion") ---------- */
.hl-league{margin-bottom:8px;border:1px solid var(--line,rgba(141,179,211,.14));border-radius:14px;background:rgba(10,20,32,.6);overflow:hidden;}
.hl-league-head{display:flex;align-items:center;background:rgba(13,25,38,.92);}
.hl-star{flex:none;width:44px;height:54px;display:grid;place-items:center;background:none;border:0;color:var(--soft,#a6b4c6);cursor:pointer;transition:color .15s;}
.hl-star svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;}
.hl-star:hover{color:var(--text,#f4f7fb);}
.hl-star.is-on{color:var(--cyan,#20d5ef);}
.hl-star.is-on svg{fill:currentColor;filter:drop-shadow(0 0 6px rgba(32,213,239,.4));}
.hl-star.is-pop svg{animation:hlPop .5s cubic-bezier(.3,1.6,.5,1);}
@keyframes hlPop{0%{transform:scale(1)}35%{transform:scale(1.4) rotate(-8deg)}65%{transform:scale(.9)}100%{transform:scale(1)}}
.hl-league-h{flex:1;min-width:0;margin:0;font-size:inherit;font-weight:inherit;}
.hl-league-toggle{width:100%;min-height:54px;padding:7px 12px 7px 0;display:flex;align-items:center;gap:10px;background:none;border:0;color:inherit;text-align:left;cursor:pointer;}
.hl-league-logo{flex:none;width:28px;height:28px;border-radius:8px;background:#f4f7fa;display:grid;place-items:center;box-shadow:0 3px 8px rgba(0,0,0,.25);}
.hl-league-logo img{width:20px;height:20px;object-fit:contain;display:block;}
.hl-league-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.hl-league-l1{display:flex;align-items:baseline;gap:7px;min-width:0;}
.hl-league-name{flex:none;max-width:70%;font-size:14px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hl-league-country{min-width:0;font-size:11.5px;color:var(--soft,#a6b4c6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hl-league-stats{font-size:11.5px;color:var(--soft,#a6b4c6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;}
.hl-league-stats b{font-weight:650;color:var(--cyan,#20d5ef);}
.hl-chev{flex:none;width:16px;height:16px;color:var(--soft,#a6b4c6);transition:transform .22s cubic-bezier(.23,1,.32,1);}
.hl-league.is-collapsed .hl-chev{transform:rotate(-90deg);}
.hl-star:focus-visible,.hl-league-toggle:focus-visible{outline:2px solid var(--cyan,#20d5ef);outline-offset:-3px;border-radius:10px;}
.hl-league-panel{display:grid;grid-template-rows:1fr;transition:grid-template-rows .28s cubic-bezier(.23,1,.32,1);}
.hl-league.is-collapsed .hl-league-panel{grid-template-rows:0fr;}
.hl-league-inner{min-height:0;overflow:hidden;}
.hl-rows{list-style:none;margin:0;padding:0;}

/* ---------- Ligne match ---------- */
.hl-grid{display:grid;grid-template-columns:40px minmax(0,1fr) 128px;column-gap:8px;}
.hl-item{position:relative;}
.hl-row{grid-template-areas:"time teams zone" "time meta meta";align-items:center;min-height:64px;padding:7px 10px;
  border-top:1px solid var(--line,rgba(141,179,211,.14));color:inherit;text-decoration:none;position:relative;transition:background .18s;}
.hl-row:hover{background:rgba(32,213,239,.045);}
.hl-row:focus-visible{outline:2px solid var(--cyan,#20d5ef);outline-offset:-3px;border-radius:8px;}
.hl-time{grid-area:time;align-self:start;padding-top:1px;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text,#f4f7fb);}
.hl-row.cd-finished .hl-kick,.hl-row.cd-postponed .hl-kick{color:var(--soft,#a6b4c6);}
.hl-teams{grid-area:teams;display:flex;flex-direction:column;gap:3px;min-width:0;}
.hl-team{display:flex;align-items:center;gap:7px;min-width:0;font-size:13.5px;font-weight:500;line-height:17px;}
.hl-tname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hl-logo{flex:none;width:18px;height:18px;object-fit:contain;}
.hl-logo-ph{display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.07);font-size:7.5px;font-weight:700;color:var(--soft,#a6b4c6);}

/* Etoile du match : bouton frere du lien, pose sous l'heure (cible tactile 44x34). */
.hl-mstar{position:absolute;left:2px;bottom:2px;z-index:1;width:44px;height:34px;display:grid;place-items:center;padding:0;background:none;border:0;border-radius:8px;color:rgba(166,180,198,.75);cursor:pointer;transition:color .15s;}
.hl-mstar svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;}
.hl-mstar:hover{color:var(--text,#f4f7fb);}
.hl-mstar.is-on{color:var(--cyan,#20d5ef);}
.hl-mstar.is-on svg{fill:currentColor;filter:drop-shadow(0 0 5px rgba(32,213,239,.4));}
.hl-mstar.is-pop svg{animation:hlPop .5s cubic-bezier(.3,1.6,.5,1);}
.hl-mstar:focus-visible{outline:2px solid var(--cyan,#20d5ef);outline-offset:-3px;}
.hl-league.is-fav{border-color:rgba(245,158,11,.26);}

/* Indicateurs publics */
/* Retour a la ligne + hauteur fixe : un indicateur qui ne tient pas passe sur
   une 2e ligne masquee au lieu d'etre coupe en deux. */
.hl-meta{grid-area:meta;display:flex;flex-wrap:wrap;align-items:center;gap:5px;min-width:0;height:17px;margin-top:4px;overflow:hidden;white-space:nowrap;}
.hl-tag{flex:none;display:inline-flex;align-items:center;gap:4px;height:17px;padding:0 6px;border-radius:5px;font-size:10px;font-weight:600;line-height:1;
  color:var(--soft,#a6b4c6);background:rgba(141,179,211,.08);}
.hl-tag-free{background:var(--cyan,#20d5ef);color:var(--page,#060b12);font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;}
.hl-tag-derby{background:rgba(239,68,68,.13);color:#fca5a5;font-weight:750;letter-spacing:.03em;}
.hl-tag-time.is-soon{background:rgba(32,213,239,.12);color:var(--cyan,#20d5ef);}
.hl-tag-time.is-live{background:rgba(245,158,11,.12);color:var(--amber,#f59e0b);}
.hl-tag-time.is-live::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;animation:hlBlink 1.6s ease-in-out infinite;}
@keyframes hlBlink{50%{transform:scale(.55)}}
/* Qualite des donnees : point cyan (le vert est reserve aux ecarts chiffres : controle UX du 04/10/2026, tour 2). */
.hl-tag-q i{width:6px;height:6px;border-radius:50%;background:var(--cyan,#20d5ef);}
.hl-tag-q.is-mid i{background:var(--soft,#a6b4c6);}
.hl-tag-q.is-low i{background:transparent;box-shadow:inset 0 0 0 1px var(--soft,#a6b4c6);}

/* Zone droite */
.hl-zone{grid-area:zone;min-width:0;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:4px;text-align:right;}

/* -- Visiteur : analyse prete + pastille HyperUI « Badges » n° 2 (assets/composants.css,
   .hu-badge), CYAN : cadenas Lucide + « Débloquer avec Pro ». Plus de pilule ambree ni de
   fausses barres dessinees (controle UX du 04/10/2026 : l'or est reserve a la Selection en or). -- */
.hl-ready{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;line-height:12px;color:var(--cyan,#20d5ef);white-space:nowrap;}
.hl-ico{flex:none;width:12px;height:12px;}
.hu-badge.hl-probadge{gap:5px;height:24px;padding:0 10px;font:700 11px/1 var(--body,"DM Sans",system-ui,sans-serif);background:rgba(32,213,239,.12);color:#cffafe;box-shadow:inset 0 0 0 1px rgba(32,213,239,.42);transition:background .15s;}
.hu-badge.hl-probadge .hl-lock-ico{width:12px;height:12px;margin:0;color:var(--cyan,#20d5ef);}
.hl-row.is-locked:hover .hu-badge.hl-probadge,.hl-row.is-locked:focus-visible .hu-badge.hl-probadge{background:rgba(32,213,239,.2);}

/* -- Visiteur : niveau public prob_band (high / good / moderate), jamais un chiffre -- */
.hl-zone-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:3px 8px;max-width:100%;}
.hu-badge.hl-band{gap:4px;height:18px;padding:0 6px;font:700 9.5px/1 var(--body,"DM Sans",system-ui,sans-serif);}
.hu-badge.hl-band .hl-ico{width:11px;height:11px;margin:0;}
.hu-badge.hl-band.is-high{background:rgba(32,213,239,.14);color:var(--cyan,#20d5ef);}
.hu-badge.hl-band.is-good{background:rgba(32,213,239,.07);color:rgba(143,227,241,.92);}
.hu-badge.hl-band.is-moderate{background:rgba(141,179,211,.08);color:var(--soft,#a6b4c6);}
.hu-badge.hl-band .hl-band-i{width:10px;height:10px;opacity:.7;}
.hl-band-note{margin:8px 0 0;display:flex;align-items:center;gap:7px;font-size:11.5px;line-height:1.4;color:var(--soft,#a6b4c6);}
.hl-band-note .hl-ico{width:13px;height:13px;}

/* -- Pas de signal -- */
.hl-zone-none{gap:2px;}
.hl-none-t{font-size:11px;font-weight:600;color:var(--soft,#a6b4c6);white-space:nowrap;}
.hl-none-s{font-size:9.5px;line-height:1.3;color:rgba(166,180,198,.8);white-space:normal;max-width:19ch;}

/* -- Pro / match offert -- */
.hl-prob-row{display:flex;align-items:baseline;justify-content:flex-end;gap:5px;white-space:nowrap;line-height:15px;}
.hl-prob-lbl{font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--soft,#a6b4c6);}
.hl-prob b{font-size:15px;font-weight:800;letter-spacing:-.02em;color:var(--cyan,#20d5ef);font-variant-numeric:tabular-nums;}
.hl-prob small{font-size:9.5px;color:var(--soft,#a6b4c6);}
.hl-prelim{font-size:10px;font-style:italic;color:var(--soft,#a6b4c6);}
.hl-freepill{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;border:1px solid rgba(32,213,239,.45);background:rgba(32,213,239,.08);color:var(--cyan,#20d5ef);font-size:10.5px;font-weight:800;white-space:nowrap;}
.hl-row.is-free{box-shadow:inset 3px 0 0 var(--cyan,#20d5ef);background:linear-gradient(90deg,rgba(32,213,239,.07),transparent 65%);}
.hl-d{display:none;}

/* ---------- Apparition en cascade (depuis un etat visible) ---------- */
.hl-enter .hl-row{animation:hlRise .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 32ms);}
@keyframes hlRise{from{transform:translateY(7px);opacity:.45}to{transform:none;opacity:1}}

/* ---------- Etats ---------- */
.hl-empty{margin-top:18px;padding:34px 20px;border:1px solid var(--line,rgba(141,179,211,.14));border-radius:14px;background:rgba(10,20,32,.5);text-align:center;}
.hl-empty svg{width:34px;height:34px;color:var(--soft,#a6b4c6);opacity:.8;}
.hl-empty h3{margin:10px 0 6px;font-size:17px;font-weight:750;}
.hl-empty p{margin:0 auto;max-width:380px;font-size:13.5px;line-height:1.5;color:var(--soft,#a6b4c6);}
.hl-btn{margin-top:16px;min-height:44px;padding:0 18px;border-radius:10px;border:1px solid rgba(32,213,239,.45);background:rgba(32,213,239,.08);color:var(--cyan,#20d5ef);font-size:13.5px;font-weight:700;cursor:pointer;}
.hl-btn:hover{background:rgba(32,213,239,.14);}
.hl-btn:focus-visible{outline:2px solid var(--cyan,#20d5ef);outline-offset:3px;}
.hl-error svg{color:var(--soft,#a6b4c6);}
.hl-skel{margin-top:18px;}
.hl-skel-league{margin-bottom:8px;border:1px solid var(--line,rgba(141,179,211,.14));border-radius:14px;overflow:hidden;}
.hl-skel-head{height:54px;display:flex;align-items:center;gap:10px;padding:0 14px;background:rgba(13,25,38,.92);}
.hl-skel-row{height:72px;display:flex;align-items:center;gap:10px;padding:0 10px;border-top:1px solid var(--line,rgba(141,179,211,.14));}
.hl-sk{display:block;border-radius:6px;background:linear-gradient(90deg,rgba(141,179,211,.07) 25%,rgba(141,179,211,.16) 50%,rgba(141,179,211,.07) 75%);background-size:200% 100%;animation:hlShimmer 1.3s linear infinite;}
@keyframes hlShimmer{to{background-position:-200% 0}}

/* ---------- Desktop ---------- */
@media(min-width:700px){
  .hl-title{font-size:27px;}
  .hl-grid{grid-template-columns:58px minmax(0,1fr) 250px;column-gap:16px;}
  .hl-row{grid-template-areas:"time teams zone" "time meta zone";min-height:74px;padding:10px 16px;}
  .hl-mstar{left:8px;bottom:5px;width:48px;height:36px;}
  .hl-mstar svg{width:17px;height:17px;}
  .hl-time{font-size:13px;}
  .hl-team{font-size:14px;line-height:18px;}
  .hl-teams{gap:4px;}
  .hl-meta{margin-top:6px;height:auto;flex-wrap:nowrap;}
  .hl-zone{gap:6px;}
  .hl-ready{font-size:11.5px;}
  .hu-badge.hl-band{height:20px;padding:0 7px;gap:5px;font-size:10.5px;}
  .hu-badge.hl-probadge{height:28px;padding:0 12px;font-size:12px;}
  .hl-none-s{max-width:none;}
  .hl-freepill{height:28px;padding:0 12px;font-size:12px;}
  .hl-none-t{font-size:12.5px;}
  .hl-none-s{font-size:11px;}
  .hl-prob-lbl{font-size:10px;}
  .hl-prob b{font-size:17px;}
  .hl-d{display:inline;}
  .hl-m{display:none;}
}

@media(prefers-reduced-motion:reduce){
  .hl-league-panel,.hl-chev,.hl-probadge{transition:none;}
  .hl-tag-time.is-live::before,.hl-sk,.hl-enter .hl-row,.hl-star.is-pop svg,.hl-mstar.is-pop svg{animation:none!important;}
}

/* Onglet « Hier » (20/09/2026) : la ligne garde exactement la meme forme que
   les autres jours ; seul un liseré de couleur dit si la recommandation est
   passee. Jamais la couleur seule pour porter l'information : le lecteur
   d'ecran recoit « Recommandation passée / non passée » dans l'aria-label. */
:root{--hl-win:#34d399;--hl-win-wash:rgba(52,211,153,.10);--hl-loss:#fb8a8a;--hl-loss-wash:rgba(251,138,138,.10)}
.hl-row.hl-win{box-shadow:inset 3px 0 0 var(--hl-win);background:var(--hl-win-wash)}
.hl-row.hl-loss{box-shadow:inset 3px 0 0 var(--hl-loss);background:var(--hl-loss-wash)}
.hl-row.is-past{cursor:default}

/* Appel discret vers la preuve de la veille. */
.hl-proof{display:flex;align-items:center;gap:9px;width:100%;margin:9px 0 0;padding:9px 13px;border-radius:12px;
  border:1px solid rgba(52,211,153,.32);background:rgba(52,211,153,.07);color:inherit;font:inherit;cursor:pointer;text-align:left}
.hl-proof:hover{border-color:rgba(52,211,153,.55);background:rgba(52,211,153,.11)}
.hl-proof:focus-visible{outline:2px solid var(--hl-win);outline-offset:2px}
.hl-proof-dot{width:8px;height:8px;border-radius:50%;background:var(--hl-win);flex:none}
.hl-proof-t{flex:1;font-size:13.5px;font-weight:700;line-height:1.3}
.hl-proof-go{color:var(--hl-win);font-weight:800}