/* ==========================================================================
   Louise & Leads — rubrique Actualités
   Réutilise le design system du site (noir #0A0A0A, crème #F5F5F3,
   bleu #0077FF, Schibsted Grotesk). Ajoute uniquement les styles article.
   ========================================================================== */

/* ---- Index actualités ---- */
.act-head{background:#F5F5F3;padding:72px 0 64px}
.act-head__in{display:flex;flex-direction:column;gap:20px;max-width:820px}
.act-head h1{max-width:14em}
.act-head .lead{max-width:620px}

.act-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
@media (max-width:640px){.act-grid{grid-template-columns:1fr}}
.act-card{display:flex;flex-direction:column;border:1px solid #DCDCD8;border-radius:16px;overflow:hidden;background:#fff;text-decoration:none;color:inherit;transition:box-shadow .25s,transform .25s}
.act-card:hover{box-shadow:0 10px 30px rgba(10,10,10,.10);transform:translateY(-4px);color:inherit}
.act-card__media{aspect-ratio:16/10;background:#0A0A0A;position:relative;display:flex;align-items:flex-end;padding:18px;overflow:hidden}
.act-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.act-card:hover .act-card__media img{transform:scale(1.06)}
.act-card__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.15) 0%,rgba(10,10,10,.55) 100%)}
.act-card__tag{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.16);color:#fff;font-size:12px;font-weight:600;letter-spacing:.02em;backdrop-filter:blur(6px)}
.act-card__body{display:flex;flex-direction:column;gap:12px;padding:26px 26px 28px;flex:1}
.act-card__meta{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#7A7A77}
.act-card h2{font-size:23px;line-height:1.15;letter-spacing:-.03em}
.act-card p{font-size:15px;line-height:1.55;color:#585856;flex:1}
.act-card__more{font-size:14px;font-weight:600;color:#0077FF}
.act-grid .act-card:nth-child(4n+1) .act-card__media{background:linear-gradient(135deg,#0A0A0A,#123064)}
.act-grid .act-card:nth-child(4n+2) .act-card__media{background:linear-gradient(135deg,#0A0A0A,#2B4BFF 130%)}
.act-grid .act-card:nth-child(4n+3) .act-card__media{background:linear-gradient(135deg,#141414,#0A0A0A 55%,#0C5FCC)}
.act-grid .act-card:nth-child(4n+4) .act-card__media{background:linear-gradient(135deg,#0A0A0A,#1E1E1C 50%,#073A8A)}

.art-hero__figure{max-width:1000px;margin:44px auto 0;border-radius:16px;overflow:hidden;position:relative}
.art-hero__figure img{width:100%;aspect-ratio:16/8;object-fit:cover;display:block}
.art-hero__credit{max-width:1000px;margin:0 auto;font-size:12px;color:#7A7A77;padding-top:8px}
.art-hero__credit a{color:#8A8A87;text-decoration:underline;text-underline-offset:2px}

/* ---- Article ---- */
.art-hero{background:#0A0A0A;color:#fff;padding:64px 0 72px}
.art-hero__in{display:flex;flex-direction:column;gap:22px;max-width:860px}
.art-hero .eyebrow{color:#8FB4FF}
.art-hero h1{color:#fff;font-size:clamp(30px,4.4vw,54px);line-height:1.04;letter-spacing:-.04em}
.art-hero__lead{font-size:19px;line-height:1.55;color:#C9C9C6;max-width:680px}
.art-hero__meta{display:flex;flex-wrap:wrap;gap:10px 24px;font-size:13px;color:#8A8A87;align-items:center}
.art-hero__meta b{color:#fff;font-weight:600}
.art-crumb{font-size:13px;color:#8A8A87}
.art-crumb a{color:#8FB4FF;text-decoration:none}.art-crumb a:hover{text-decoration:underline}

.art-wrap{max-width:780px;margin:0 auto;padding:0 32px}
.art-body{padding:64px 0 72px;font-size:18px;line-height:1.72;color:#1A1A19}
.art-body>.art-wrap{display:flex;flex-direction:column;gap:24px}
.art-body h2{font-size:clamp(26px,3.2vw,36px);line-height:1.12;letter-spacing:-.035em;margin-top:20px}
.art-body h3{font-size:21px;font-weight:700;letter-spacing:-.02em;margin-top:8px}
.art-body p{margin:0}
.art-body ul,.art-body ol{display:flex;flex-direction:column;gap:10px;margin:0;padding-left:0}
.art-body ul li{position:relative;padding-left:24px}
.art-body ul li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:#0077FF}
.art-body ol{counter-reset:li}
.art-body ol li{position:relative;padding-left:40px;counter-increment:li}
.art-body ol li::before{content:counter(li);position:absolute;left:0;top:-1px;width:26px;height:26px;border-radius:50%;background:#0A0A0A;color:#fff;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center}
.art-body a{color:#005FCC;text-decoration:underline;text-underline-offset:2px}
/* les boutons restent lisibles : ne pas hériter du style de lien du corps */
.art-body a.btn,.art-cta a.btn{color:#fff;text-decoration:none}
.art-body a.btn--primary,.art-cta a.btn--primary{color:#fff}
.art-body a.btn--outline{color:#0A0A0A}
.art-body a.btn--light{color:#0A0A0A}
.art-body a.btn--dark{color:#fff}
.art-body strong{font-weight:700}
.art-body blockquote{font-weight:600;font-size:22px;line-height:1.4;letter-spacing:-.02em;padding:24px 0 24px 28px;border-left:4px solid #0077FF;border-top:0;color:#0A0A0A;background:#F5F5F3;border-radius:0 12px 12px 0}
.art-body .callout{background:#F5F5F3;border-radius:16px;padding:28px 30px;display:flex;flex-direction:column;gap:12px}
.art-body .callout h3{margin:0}
.art-body table{width:100%;border-collapse:collapse;font-size:15px;border:1px solid #DCDCD8;border-radius:12px;overflow:hidden}
.art-body th,.art-body td{padding:13px 16px;text-align:left;border-top:1px solid #E6E6E3}
.art-body thead th{background:#0A0A0A;color:#fff;font-weight:600;border-top:0}
.art-body tbody tr:nth-child(even){background:#FAFAF9}

.art-cta{margin:16px 0 8px;background:#0A0A0A;color:#fff;border-radius:16px;padding:36px 34px;display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.art-cta h3{font-size:24px;letter-spacing:-.03em;color:#fff;margin:0}
.art-cta p{color:#B9B9B6;font-size:16px;line-height:1.55}

.art-related{background:#F5F5F3;padding:56px 0}
.art-related h2{font-size:24px;letter-spacing:-.03em;margin-bottom:28px}
.art-related__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:20px}
.art-related a{background:#fff;border:1px solid #DCDCD8;border-radius:12px;padding:22px;text-decoration:none;color:#0A0A0A;display:flex;flex-direction:column;gap:8px;transition:box-shadow .2s,transform .2s}
.art-related a:hover{box-shadow:0 8px 20px rgba(10,10,10,.08);transform:translateY(-3px)}
.art-related span{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#7A7A77}
.art-related strong{font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:1.25}

@media (max-width:720px){
  .act-head{padding:48px 0 40px}
  .art-hero{padding:40px 0 48px}
  .art-body{font-size:17px;padding:44px 0 52px;line-height:1.68}
  .art-wrap{padding:0 20px}
  .art-body table{font-size:14px}
  .art-body th,.art-body td{padding:11px 12px}
  .art-cta{padding:28px 22px}
  .art-related{padding:44px 0}
}