/* =============================================================================
   AMELIORE — Mur d'actualités LinkedIn
   Les couleurs sont pilotées par des variables : elles reprennent par défaut
   celles de la section actuelle. Pour basculer sur la charte 2026, il suffit
   de redéfinir ces variables dans le CSS du site, sans toucher à ce fichier.
   ========================================================================== */

.ameliore-li{
  --li-accent:#b63120;          /* charte 2026 : #1D6F6A */
  --li-accent-doux:#f7e7e4;     /* charte 2026 : #E3EFED */
  --li-encre:#333A3D;
  --li-titre:#2b2b2b;           /* charte 2026 : #17384F */
  --li-attenue:#585858;
  --li-carte:#ffffff;
  --li-bordure:#e7e2e0;         /* charte 2026 : #DCE5E3 */
  --li-rayon:16px;
  --li-ombre:0 14px 34px rgba(63,42,37,.10);

  max-width:1280px;
  margin-inline:auto;
  padding-inline:24px;
  color:var(--li-encre);
}

.ameliore-li__surtitre{
  margin:0 0 10px;
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--li-accent);
}

.ameliore-li__titre{
  margin:0 0 16px;
  font-size:clamp(28px,3.2vw,40px);
  line-height:1.2;
  color:var(--li-titre);
}

.ameliore-li__chapo{
  margin:0 0 36px;
  max-width:720px;
  font-size:17px;
  line-height:1.6;
  color:var(--li-attenue);
}

/* --- Grille ---------------------------------------------------------------- */
.ameliore-li__grille{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
}

.ameliore-li__carte{
  display:flex;
  flex-direction:column;
  background:var(--li-carte);
  border:1px solid var(--li-bordure);
  border-radius:var(--li-rayon);
  box-shadow:var(--li-ombre);
  overflow:hidden;
}

/* --- Visuel ---------------------------------------------------------------- */
/* Cadre carre, au format dominant des publications LinkedIn, et visuel
   affiche en entier : les visuels de reseaux sociaux portent du texte, un
   recadrage en couperait le message. Les carrousels, au format portrait,
   laissent alors deux bandes laterales neutres. */
.ameliore-li__visuel{
  position:relative;
  aspect-ratio:1 / 1;
  background:#F1F4F3;
  overflow:hidden;
}

.ameliore-li__visuel img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

/* Repère de format, pour les carrousels et les vidéos */
.ameliore-li__format{
  position:absolute;
  left:12px;
  bottom:12px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  color:var(--li-accent);
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
}

/* Publications sans media : l'accroche tient lieu de visuel.
   Aucun fichier n'est produit, le fond est entierement en CSS.
   Les trois variantes n'emploient que des fonds dont le contraste avec
   le blanc depasse 4,5:1, quelle que soit l'etape du degrade. */
.ameliore-li__visuel--texte{
  display:flex;
  align-items:center;
  padding:30px 28px;
  background:linear-gradient(135deg,#17384F 0%,#1D6F6A 100%);
}
.ameliore-li__visuel--texte[data-variante="1"]{
  background:linear-gradient(135deg,#1D6F6A 0%,#17384F 100%);
}
.ameliore-li__visuel--texte[data-variante="2"]{
  background:linear-gradient(135deg,#17384F 0%,#333A3D 100%);
}
.ameliore-li__visuel--texte::after{
  content:"";
  position:absolute;
  inset:auto -18% -55% auto;
  width:70%;
  aspect-ratio:1;
  border-radius:50%;
  background:rgba(255,255,255,.07);
}

.ameliore-li__accroche{
  position:relative;
  z-index:1;
  margin:0;
  color:#fff;
  font-size:clamp(19px,1.45vw,25px);
  font-weight:700;
  line-height:1.3;
  letter-spacing:-0.01em;
  text-wrap:balance;
  display:-webkit-box;
  -webkit-line-clamp:7;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* --- Corps de carte -------------------------------------------------------- */
.ameliore-li__corps{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:24px 24px 26px;
  flex:1 1 auto;
}

.ameliore-li__rang{
  margin:0;
  font-size:13px;
  font-weight:700;
  color:var(--li-accent);
}

.ameliore-li__meta{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin:0;
  font-size:13px;
  color:var(--li-attenue);
}

.ameliore-li__badge{
  padding:4px 10px;
  border-radius:999px;
  background:var(--li-accent-doux);
  color:var(--li-accent);
  font-weight:700;
  font-size:12px;
}

.ameliore-li__carte-titre{
  margin:2px 0 0;
  font-size:19px;
  line-height:1.32;
  color:var(--li-titre);
}

.ameliore-li__extrait{
  margin:0;
  font-size:15px;
  line-height:1.6;
  color:var(--li-attenue);
}

.ameliore-li__lien{
  margin-top:auto;
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:11px 20px;
  border:1px solid var(--li-accent);
  border-radius:999px;
  color:var(--li-accent);
  font-size:15px;
  font-weight:700;
  text-decoration:none;
  transition:background-color .18s ease, color .18s ease;
}
.ameliore-li__lien:hover,
.ameliore-li__lien:focus-visible{
  background:var(--li-accent);
  color:#fff;
}
.ameliore-li__lien:focus-visible{
  outline:3px solid var(--li-accent);
  outline-offset:3px;
}

/* --- Pied ------------------------------------------------------------------ */
.ameliore-li__pied{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  margin:28px 0 0;
  font-size:15px;
  color:var(--li-attenue);
}
.ameliore-li__pied a{
  color:var(--li-accent);
  font-weight:700;
  text-decoration:none;
}
.ameliore-li__pied a:hover,
.ameliore-li__pied a:focus-visible{ text-decoration:underline; }

/* --- Adaptatif ------------------------------------------------------------- */
@media (max-width:991px){
  .ameliore-li__grille{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:767px){
  .ameliore-li__grille{ grid-template-columns:1fr; gap:20px; }
  .ameliore-li__chapo{ max-width:none; }
  .ameliore-li__pied{ flex-direction:column; align-items:flex-start; }
}

@media (prefers-reduced-motion:reduce){
  .ameliore-li__lien{ transition:none; }
}