/* ==========================================================================
   Edabos — Blog
   Vient après style.css : réutilise les mêmes tokens (couleurs, radius, ombres).
   ========================================================================== */

/* --------------------------------------------------------------
   1. En-tête du blog
   -------------------------------------------------------------- */
.blog-hero{padding:150px 0 70px}
.blog-hero .badge{margin-bottom:22px}
.blog-hero .h1{margin-bottom:16px}
.blog-hero .lead{margin-inline:auto}

/* --------------------------------------------------------------
   2. Grille d’articles
   -------------------------------------------------------------- */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  padding:0 20px;
  max-width:var(--container);
  margin:0 auto;
}
.blog-card{
  display:flex;flex-direction:column;
  border-radius:var(--r-card);
  overflow:hidden;
  background:#fff;
  box-shadow:var(--shadow-card);
  transition:transform .25s ease,box-shadow .25s ease;
}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 20px 34px -10px rgba(17,17,26,.16)}

.blog-card__cover{
  position:relative;
  aspect-ratio:16/10;
  display:flex;align-items:center;justify-content:center;
  background:var(--gradient-linear);
  overflow:hidden;
}
.blog-card__cover .dots{opacity:.55}
.blog-card__cover img{width:44px;height:44px;position:relative;z-index:1;filter:brightness(0) invert(1)}
.blog-card__cover--2{background:linear-gradient(160deg,#111 0%,#3a3f52 55%,var(--violet) 130%)}
.blog-card__cover--3{background:linear-gradient(160deg,var(--brand) 0%,var(--violet) 100%)}

.blog-card__tag{
  position:absolute;top:14px;left:14px;z-index:2;
  padding:5px 12px;border-radius:30px;
  background:rgba(255,255,255,.92);
  font-family:Geist,sans-serif;font-size:12.5px;font-weight:600;color:#111;
}

.blog-card__body{display:flex;flex-direction:column;flex:1;padding:24px 24px 26px;gap:10px}
.blog-card__meta{font-family:Geist,sans-serif;font-size:13px;font-weight:500;color:var(--ink-mute)}
.blog-card__title{font-family:"DM Sans",sans-serif;font-weight:600;font-size:20px;line-height:1.28;letter-spacing:-.3px;color:var(--ink)}
.blog-card__excerpt{font-size:14px;line-height:1.6;color:var(--ink-soft);flex:1}
.blog-card__link{
  display:inline-flex;align-items:center;gap:8px;margin-top:6px;
  font-family:Geist,sans-serif;font-size:14px;font-weight:600;color:#111;
}
.blog-card__link .ico-arrow{width:11px;height:11px;transition:transform .25s ease}
.blog-card:hover .blog-card__link .ico-arrow{transform:translate(3px,-3px)}

/* --------------------------------------------------------------
   3. Article
   -------------------------------------------------------------- */
.article-hero{padding:150px 0 0}
.article-hero .container{max-width:820px}
.article-back{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:26px;
  font-family:Geist,sans-serif;font-size:14px;font-weight:600;color:var(--ink-soft);
}
.article-back svg{width:14px;height:14px;transform:rotate(180deg)}
.article-back:hover{color:var(--ink)}
.article-hero__tag{margin-bottom:18px}
.article-hero .h1{font-size:44px;line-height:1.14;margin-bottom:18px}
.article-hero__meta{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:Geist,sans-serif;font-size:14px;font-weight:500;color:var(--ink-mute);
  margin-bottom:36px;
}
.article-hero__meta span:not(:last-child)::after{content:"•";margin-left:10px;color:var(--line)}

.article-cover{
  position:relative;
  width:min(820px,calc(100% - 40px));
  margin:0 auto 56px;
  border-radius:var(--r-panel);
  aspect-ratio:2.6/1;
  display:flex;align-items:center;justify-content:center;
  background:var(--gradient-linear);
  overflow:hidden;
}
.article-cover img{width:44px;height:44px;position:relative;z-index:1;filter:brightness(0) invert(1)}

.article-body{max-width:760px;margin:0 auto;padding:0 20px 40px}
.article-body p{font-size:16.5px;line-height:1.75;color:var(--ink-soft);margin-bottom:22px}
.article-body h2{
  font-family:"DM Sans",sans-serif;font-weight:600;font-size:26px;line-height:1.28;
  letter-spacing:-.4px;color:var(--ink);margin:44px 0 16px;
}
.article-body h3{
  font-family:"DM Sans",sans-serif;font-weight:600;font-size:20px;line-height:1.3;
  color:var(--ink);margin:32px 0 12px;
}
.article-body ul{margin:0 0 22px;padding-left:0}
.article-body li{
  position:relative;padding-left:26px;margin-bottom:10px;
  font-size:16.5px;line-height:1.65;color:var(--ink-soft);
}
.article-body li::before{
  content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--brand);
}
.article-body blockquote{
  margin:32px 0;padding:22px 26px;border-left:3px solid #111;
  background:var(--grey-panel);border-radius:0 16px 16px 0;
  font-family:"DM Sans",sans-serif;font-size:19px;line-height:1.5;font-weight:500;color:var(--ink);
}
.article-body strong{color:var(--ink);font-weight:600}

.article-cta{
  max-width:760px;margin:20px auto 0;padding:0 20px;
}
.article-cta__card{
  border-radius:var(--r-card);padding:38px 34px;
  background:var(--gradient-linear);text-align:center;
}
.article-cta__card .h3{margin-bottom:10px}
.article-cta__card .lead{margin:0 auto 22px}

/* Lien secondaire sous le bouton de l'encadré final */
.article-cta__more{margin-top:18px;font-family:Geist,sans-serif;font-size:14px;font-weight:500;color:var(--ink-soft)}
.article-cta__more a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* « À lire aussi » : reprend la grille et les cartes de la page Blog */
.article-related{padding:90px 0 20px}
.article-related__title{text-align:center;margin:0 auto 36px;padding:0 20px}

/* --------------------------------------------------------------
   4. Responsive
   -------------------------------------------------------------- */
@media (max-width:1023.98px){
  .blog-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:809.98px){
  .blog-hero{padding:120px 0 46px}
  .blog-grid{grid-template-columns:1fr;gap:20px}
  .article-hero{padding:118px 0 0}
  .article-hero .h1{font-size:30px;line-height:1.2}
  .article-cover{width:calc(100% - 24px);aspect-ratio:16/10;margin:0 auto 40px}
  .article-cover img{width:36px;height:36px}
  .article-body p,.article-body li{font-size:16px}
  .article-cta__card{padding:30px 22px}
  .article-related{padding:60px 0 10px}
  .article-related__title{margin-bottom:24px}
}