/* ------------------------------------------------------------------
   Onglet « LinkedIn » : la Page DeveloppIA, publiees et a venir.
   Reprend les variables du socle (styles.css) et les boutons de filtre
   d'instagram.css : le theme clair suit tout seul.
   ------------------------------------------------------------------ */

.li-tete{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:4px 0 18px}
.li-ouvrir{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;border-radius:999px;
  background:linear-gradient(135deg,var(--violet),var(--magenta));color:#fff;font-size:14.5px;font-weight:700;
  text-decoration:none;transition:transform .15s ease,filter .15s ease}
.li-ouvrir:hover{transform:translateY(-1px);filter:brightness(1.08)}
.li-tete code{font-family:var(--mono);font-size:12px;color:var(--texte-faible)}

.li-chiffres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:6px}
.li-chiffres div{padding:14px 16px;border:1px solid var(--trait);border-radius:var(--rayon);background:var(--carte);
  display:grid;gap:3px;min-width:0}
.li-chiffres b{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-0.01em;color:var(--texte)}
.li-chiffres b::first-letter{text-transform:uppercase}
.li-chiffres span{font-size:12px;color:var(--texte-faible)}

.li-titre{font-family:var(--display);font-weight:700;font-size:16px;margin:22px 0 10px;display:flex;align-items:center;gap:8px}
.li-titre i{font-style:normal;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px;
  background:var(--trait);color:var(--texte-doux)}

.li-liste{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.li-ligne{display:flex;align-items:stretch;gap:8px;border:1px solid var(--trait);border-radius:var(--rayon);
  background:var(--carte);overflow:hidden}
.li-ligne:hover{border-color:var(--trait-fort)}
.li-carte{flex:1;min-width:0;display:grid;grid-template-columns:150px 72px minmax(0,1fr) auto;align-items:center;gap:16px;
  padding:10px 14px;border:0;background:transparent;color:var(--texte);font-family:var(--corps);text-align:left;cursor:pointer}
.li-date{display:grid;gap:2px}
.li-date b{font-size:14px;font-weight:700}
.li-date b::first-letter{text-transform:uppercase}
.li-date i{font-style:normal;font-size:12px;color:var(--texte-faible)}
.li-vignette{position:relative;display:block;width:72px;height:90px}
.li-carte img{width:72px;height:90px;object-fit:cover;border-radius:8px;background:var(--nuit-2);display:block}
.li-joue{position:absolute;right:4px;top:4px;min-width:20px;height:20px;padding:0 4px;border-radius:6px;display:grid;place-items:center;
  background:rgba(0,0,0,.6);color:#fff;font-size:11px}
.li-mot{display:grid;gap:3px;min-width:0}
.li-mot b{font-size:14.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li-mot i{font-style:normal;font-size:13px;color:var(--texte-doux);display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.li-etiqs{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.li-etiq{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;border:1px solid var(--trait-fort);
  color:var(--texte-doux);white-space:nowrap}
.li-ok{border-color:var(--vert);color:var(--vert)}
.li-attente{border-color:var(--violet);color:var(--violet)}
.li-alerte{border-color:var(--orange);color:var(--orange)}
.li-publie .li-carte img{opacity:.92}
.li-voir{flex:none;align-self:center;margin-right:14px;font-size:13px;font-weight:600;color:var(--texte-doux);
  text-decoration:none;white-space:nowrap}
.li-voir:hover{color:var(--texte)}

/* la publication ouverte en grand */
.li-modale{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px}
.li-modale[hidden]{display:none}
.li-fond{position:absolute;inset:0;background:rgba(0,0,0,.62)}
.li-panneau{position:relative;display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);width:min(940px,100%);
  max-height:calc(100vh - 40px);background:var(--carte);border:1px solid var(--trait-fort);border-radius:18px;overflow:hidden}
.li-fermer{position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;border-radius:50%;border:1px solid var(--trait-fort);
  background:var(--carte);color:var(--texte);cursor:pointer;font-size:14px}
.li-visuel{position:relative;background:#000;display:grid;place-items:center}
.li-visuel video{display:block;width:100%;max-height:calc(100vh - 40px)}
.li-fleche{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.88);color:#111;font-size:20px;line-height:1}
.li-prec{left:10px}.li-suiv{right:10px}
.li-compteur{position:absolute;right:10px;top:10px;padding:3px 9px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font-size:12px}
.li-bandeau{margin:12px 0 4px;padding:12px 16px;border-radius:12px;border:1px solid var(--orange);color:var(--texte);font-size:13.5px;line-height:1.5}
.li-bandeau-ok{border-color:var(--vert)}
.li-visuel img{display:block;width:100%;height:auto;max-height:calc(100vh - 40px);object-fit:contain}
.li-texte{padding:22px 24px;overflow:auto;display:grid;gap:12px;align-content:start}
.li-chapeau{display:flex;flex-wrap:wrap;gap:6px;padding-right:40px}
.li-texte h3{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-0.01em}
.li-legende{white-space:pre-wrap;font-size:14px;line-height:1.55;color:var(--texte)}
.li-hashtags{font-size:13px;color:var(--violet);line-height:1.5}
.li-note{font-size:12.5px;color:var(--texte-faible);border-left:2px solid var(--trait-fort);padding-left:10px}
.li-liens{display:flex;flex-wrap:wrap;gap:16px}
.li-liens a{font-size:13.5px;font-weight:600;color:var(--texte-doux);text-decoration:none}
.li-liens a:hover{color:var(--texte)}

@media (max-width:760px){
  .li-chiffres{grid-template-columns:repeat(2,minmax(0,1fr))}
  .li-ligne{flex-direction:column;gap:0}
  .li-carte{grid-template-columns:60px minmax(0,1fr);grid-template-areas:"img date" "img mot" "etiq etiq";gap:6px 12px;padding:12px}
  .li-vignette{grid-area:img;width:60px;height:75px}
  .li-carte img{width:60px;height:75px}
  .li-date{grid-area:date}
  .li-mot{grid-area:mot}
  .li-mot b{white-space:normal}
  .li-etiqs{grid-area:etiq;flex-direction:row;align-items:center;justify-content:flex-start}
  .li-voir{align-self:flex-start;margin:0 12px 12px}
  .li-panneau{grid-template-columns:1fr;overflow:auto}
  .li-visuel img{max-height:46vh}
  .li-texte{overflow:visible}
}