/* LNHQ — styles du fil de nouvelles / annonces (voir nouvelles.js). */

/* Onglets Annonces / Nouvelles (accueil.html) */
.feed-band{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; }
.feed-tabs{ display:inline-flex; padding:4px; gap:4px; border-radius:11px; background:rgba(255,255,255,0.2); }
.feed-tabs button{
  min-height:40px; padding:0 18px; border:none; border-radius:8px; cursor:pointer;
  background:transparent; color:inherit;
  font-family:'Roboto', 'IBM Plex Sans', sans-serif; font-weight:700; font-size:14px;
  letter-spacing:0.02em; text-transform:uppercase;
}
.feed-tabs button:hover{ background:rgba(255,255,255,0.25); }
.feed-tabs button[aria-selected="true"]{ background:var(--surface); color:var(--ink); }

/* Pastille « En direct » (accueil) : visible seulement quand un DG diffuse avec #LNHQ. */
.live-pill{
  display:inline-flex; align-items:center; gap:8px; margin-right:auto; max-width:100%;
  padding:7px 14px; border-radius:999px; background:var(--surface);
  color:var(--ink); font-weight:700; font-size:13.5px; text-decoration:none; white-space:nowrap;
}
.live-pill span:last-child{ overflow:hidden; text-overflow:ellipsis; }
.live-pill:hover{ opacity:0.9; }
.live-point{
  flex-shrink:0; width:9px; height:9px; border-radius:50%; background:#E03131;
  box-shadow:0 0 0 0 rgba(224,49,49,0.6); animation:pouls 1.8s ease-out infinite;
}
@keyframes pouls{ to{ box-shadow:0 0 0 8px rgba(224,49,49,0); } }
@media (prefers-reduced-motion: reduce){ .live-point{ animation:none; } }

.publish-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--surface); color:var(--ink);
  font-family:'Roboto', 'IBM Plex Sans', sans-serif; font-weight:700; font-size:14px;
  letter-spacing:0.02em; text-transform:uppercase;
  padding:10px 18px; border-radius:9px; text-decoration:none;
}
.publish-btn:hover{ opacity:0.9; }
.publish-btn svg{ width:16px; height:16px; }

/* Téléphone : onglets et « Publier » sur une même ligne, la pastille « En direct » dessous. */
@media (max-width:600px){
  .feed-band{ gap:8px; }
  .feed-tabs{ order:1; padding:3px; gap:3px; }
  .feed-tabs button{ min-height:34px; padding:0 12px; font-size:13px; }
  .publish-btn{ order:2; margin-left:auto; padding:8px 12px; font-size:13px; }
  .live-pill{ order:3; padding:5px 12px; font-size:12.5px; }
}

/* Toute la largeur de la page, comme les tableaux des autres pages. */
.news-skeleton, .news-status, .news-list{ margin-left:auto; margin-right:auto; }
.news-skeleton .skeleton-row{ height:190px; border-radius:var(--radius); margin-bottom:18px; }

.news-list{ display:flex; flex-direction:column; gap:18px; padding:6px 0 24px; }

/* --type-ink : texte de l'étiquette de type, choisi pour ≥ 4,5:1 sur sa couleur. */
.news-card{
  --type-color:var(--accent); --type-ink:var(--accent-ink);
  background:var(--surface); border:1px solid var(--line); border-top:4px solid var(--type-color);
  border-radius:var(--radius); overflow:hidden;
  scroll-margin-top:12px;
}
.type-transaction{ --type-color:#1971C2; --type-ink:#fff; }
.type-resultat{ --type-color:#2F9E44; --type-ink:#181B20; }
.type-blessure{ --type-color:#E03131; --type-ink:#fff; }
.type-general{ --type-color:var(--accent); --type-ink:var(--accent-ink); }
.type-chronique{ --type-color:#C2255C; --type-ink:#fff; }
.type-reglement{ --type-color:#7048E8; --type-ink:#fff; }
.type-calendrier{ --type-color:#1098AD; --type-ink:#181B20; }
.type-evenement{ --type-color:#E0A800; --type-ink:#181B20; }

/* Image entière, dans ses propres proportions (jamais recadrée). Une image très haute
   est limitée à 60 % de l'écran, avec des bandes de fond de chaque côté. */
.news-cover{ display:block; width:100%; background:var(--stripe); }
.news-cover img{ display:block; width:100%; height:auto; max-height:60vh; object-fit:contain; }

/* Écran large : image à gauche, article à droite. L'image reste visible (sticky)
   pendant la lecture d'un long article. Sur téléphone, elle reste au-dessus. */
@media (min-width:900px){
  .news-card:has(> .news-cover){ display:grid; grid-template-columns:minmax(280px, 36%) 1fr; }
  .news-card > .news-cover{
    align-self:start; position:sticky; top:12px;
    margin:18px 0 18px 18px; border-radius:8px; overflow:hidden;
  }
  /* L'image garde toute la largeur de sa colonne. Une image très haute est coupée
     en bas à 480px, et s'affiche en entier quand on ouvre l'article (« Lire la suite »). */
  .news-card > .news-cover{ max-height:480px; }
  .news-card > .news-cover img{ max-height:none; }
  .news-card.is-deplie > .news-cover{ max-height:none; }
}

.news-body{ padding:14px clamp(14px, 2.5vw, 22px) 18px; }

.news-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px;
  font-size:13px; color:var(--ink-muted);
}
.news-team{ display:inline-flex; align-items:center; gap:6px; color:var(--ink); font-weight:600; text-decoration:none; }
a.news-team:hover{ color:var(--accent); }
.news-team img{ width:22px; height:22px; object-fit:contain; }
.news-type, .news-pin{
  font-family:'Roboto', 'IBM Plex Sans', sans-serif; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.05em;
  padding:3px 8px; border-radius:999px;
}
.news-type{ background:var(--type-color); color:var(--type-ink); }
.news-pin{ background:var(--accent-soft); color:var(--accent); }
.news-date{ margin-left:auto; }

.news-title{
  font-family:'Oswald', 'IBM Plex Sans', sans-serif; font-weight:500;
  text-transform:uppercase; letter-spacing:0.01em;
  font-size:clamp(22px, 1.2vw + 17px, 28px); line-height:1.15;
  margin:10px 0 8px; overflow-wrap:anywhere; color:var(--accent);
}

/* ---------- Texte Markdown ---------- */
.news-text{ font-size:15.5px; line-height:1.6; overflow-wrap:anywhere; }
.news-text.is-plain{ white-space:pre-line; }
.news-text > :first-child{ margin-top:0; }
.news-text > :last-child{ margin-bottom:0; }
.news-text p, .news-text ul, .news-text ol, .news-text blockquote, .news-text table{ margin:0 0 0.8em; }
.news-text ul, .news-text ol{ padding-left:1.3em; }
/* Casse normale : en majuscules, un titre dans le texte se confondrait avec le titre de la nouvelle. */
.news-text h1, .news-text h2, .news-text h3, .news-text h4, .news-text h5, .news-text h6{
  font-family:'Oswald', 'IBM Plex Sans', sans-serif; font-weight:500;
  line-height:1.2; margin:1em 0 0.4em;
}
/* Gras dans un titre (bouton « B » de l'éditeur) : plus épais que le titre normal. */
.news-text :is(h1, h2, h3, h4, h5, h6) strong{ font-weight:700; }
.news-text h1, .news-text h2{ font-size:1.5em; }
.news-text h3{ font-size:1.22em; }
.news-text h4, .news-text h5, .news-text h6{ font-size:1.05em; }
.news-text a{ color:var(--accent); }
.news-text img{ display:block; max-width:100%; height:auto; border-radius:6px; margin:0.6em 0; }
/* Logo d'équipe inséré avec le bouton « Logo » de l'éditeur (adresse terminée par #logo) :
   dans la ligne de texte, à sa hauteur, comme un emoji. */
.news-text img[src$="#logo"]{
  display:inline; width:auto !important; height:1.4em; max-width:none; margin:0 0.1em;
  vertical-align:-0.3em; border-radius:0; float:none;
}

/* Image placée à gauche ou à droite dans l'éditeur (#gauche / #droite à la fin de l'adresse) :
   le texte l'entoure. Sur téléphone, trop étroit, elle reprend toute la largeur. */
.news-text{ display:flow-root; }
@media (min-width:560px){
  .news-text img[src*="#gauche"]{ float:left; width:300px; max-width:60%; margin:0.3em 1.1em 0.6em 0; }
  .news-text img[src*="#droite"]{ float:right; width:300px; max-width:60%; margin:0.3em 0 0.6em 1.1em; }
  .news-text img[src*="#centre"]{ width:420px; max-width:100%; margin:0.6em auto; }
  /* Taille choisie dans l'éditeur, en pixels (mêmes valeurs que publier.css) pour
     qu'une image ait la même taille dans l'éditeur et sur le site, quelle que soit
     la largeur de l'écran : -30 petite, -45 moyenne, -60 grande. */
  .news-text img[src*="#"][src$="-30"]{ width:200px; }
  .news-text img[src*="#"][src$="-45"]{ width:300px; }
  .news-text img[src*="#"][src$="-60"]{ width:420px; }
  /* Les titres passent à côté de l'image ; seuls les tableaux et les lignes vont dessous. */
  .news-text table, .news-text hr{ clear:both; }
}
.news-text blockquote{
  padding:10px 14px; border-left:4px solid var(--accent); border-radius:0 6px 6px 0;
  background:var(--accent-soft); color:var(--ink); font-style:italic;
}
.news-text blockquote > :last-child{ margin-bottom:0; }
.news-text code{
  font-family:'IBM Plex Mono', monospace; font-size:0.9em;
  background:var(--stripe); padding:1px 5px; border-radius:4px;
}
.news-text hr{ border:none; border-top:1px solid var(--line); margin:1em 0; }
/* Tableaux Markdown (ex. résultats) : on annule le style des tableaux de données de site.css */
.news-text table{ display:block; max-width:100%; overflow-x:auto; border-collapse:collapse; font-size:14px; }
.news-text th, .news-text td{ border:1px solid var(--line); padding:4px 10px; white-space:nowrap; }
.news-text thead th, .news-text thead th:first-child, .news-text tbody td:first-child{
  position:static; box-shadow:none; cursor:default; background:var(--stripe);
}
.news-text tbody td:first-child{ background:transparent; }
.news-text thead th:hover{ color:inherit; }

/* ---------- Articles longs repliés (voir replier() dans nouvelles.js) ---------- */
.news-text.is-collapsed{
  max-height:420px; overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom, #000 70%, transparent);
  mask-image:linear-gradient(to bottom, #000 70%, transparent);
}
.news-more{
  display:inline-flex; align-items:center; min-height:40px; margin-top:6px; padding:0 14px;
  border:1px solid var(--line); border-radius:999px; background:transparent; cursor:pointer;
  color:var(--accent); font-weight:700; font-size:14px;
}
.news-more:hover{ border-color:var(--accent); }
.news-more[hidden]{ display:none; }

/* ---------- Galerie (photos 2 et suivantes) ---------- */
.news-gallery{ display:grid; grid-template-columns:repeat(auto-fill, minmax(88px, 1fr)); gap:8px; margin-top:14px; }
.news-gallery a{ display:block; aspect-ratio:1; border-radius:6px; overflow:hidden; background:var(--stripe); }
.news-gallery img{ display:block; width:100%; height:100%; object-fit:cover; }

/* ---------- Transactions : cartes des joueurs échangés (base : alignement.css) ---------- */
.ech{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:14px; margin-top:14px; }
.ech-equipe{ min-width:0; display:flex; flex-direction:column; gap:8px; padding:10px; border-radius:10px;
  background:var(--stripe); border-top:3px solid var(--al-couleur); }
.ech-titre{ display:flex; align-items:center; gap:8px; margin:0; font-family:'Oswald', 'IBM Plex Sans', sans-serif;
  font-weight:500; font-size:16px; text-transform:uppercase; letter-spacing:0.03em; }
.ech-titre img{ width:28px; height:28px; object-fit:contain; }
.al-cartes.ech-cartes{ grid-template-columns:repeat(auto-fill, minmax(124px, 1fr)); }
.ech-cartes .al-carte, .ech-cartes .al-carte.a-photo{ min-height:126px; }
.al-infos > .ech-salaire{ padding:1px 6px; margin-bottom:2px; border-radius:5px; background:rgba(0,0,0,0.5); font-weight:700; font-size:11px; white-space:nowrap; }
.al-infos > .ech-salaire.is-espoir{ background:rgba(47,158,68,0.85); }
.ech-choix .ech-choix-logo{ height:70%; max-width:52%; bottom:8%; right:4%; }
.ech-de{ position:absolute !important; top:8px; right:8px; z-index:3 !important; display:flex; align-items:center; gap:3px;
  padding:1px 5px 1px 6px; border-radius:999px; background:rgba(0,0,0,0.55); font-size:9.5px; font-weight:800; text-transform:uppercase; }
.ech-de img{ width:16px; height:16px; object-fit:contain; }
.ech-rien{ margin:0; color:var(--ink-muted); font-size:14px; }
@media (max-width:600px){
  .ech{ grid-template-columns:minmax(0, 1fr); }
  .al-cartes.ech-cartes{ grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); }
  .ech-cartes .al-carte, .ech-cartes .al-carte.a-photo{ min-height:116px; }
  .al-infos > .ech-salaire{ font-size:9.5px; padding:1px 4px; }
}