/* ===== BLOG · Rassine Agency =====
   Charge APRES style.css. Reutilise --accent, --bg, --text, etc.
   Mobile-first, palette turquoise #0f9f7e, typo Space Grotesk + Inter.
*/

/* ===== UTILITAIRE LARGEUR ARTICLE ===== */
.container-narrow{
  max-width:760px;
  margin:0 auto;
  padding:0 24px;
}
@media (max-width:780px){
  .container-narrow{padding:0 18px}
}

/* ===== BLOG INDEX · HERO ===== */
.blog-hero{
  padding:140px 0 64px;
  position:relative;
  z-index:1;
}
.blog-hero .container-narrow{text-align:center}
.blog-hero h1{
  font-family:var(--font-display);
  font-size:clamp(34px,5vw,58px);
  line-height:1.08;
  letter-spacing:-0.03em;
  font-weight:600;
  margin-bottom:20px;
  color:var(--text);
}
.blog-hero h1 .accent{
  background:linear-gradient(120deg,var(--accent),var(--blue));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.blog-hero p{
  font-size:18px;
  color:var(--text-1);
  line-height:1.6;
  max-width:620px;
  margin:0 auto;
}
@media (max-width:780px){
  .blog-hero{padding:120px 0 40px}
  .blog-hero p{font-size:16px}
}

/* ===== BLOG INDEX · LISTE ARTICLES ===== */
.blog-list{padding:64px 0 100px}
.blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:28px;
  max-width:1120px;
  margin:0 auto;
}
.blog-card{
  background:var(--surface-raised);
  border:1px solid var(--border-2);
  border-radius:var(--r-lg);
  padding:32px 28px;
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .3s var(--ease-out);
  display:flex;
  flex-direction:column;
}
.blog-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-3);
  border-color:var(--border-accent);
}
.blog-card .blog-category{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 11px 4px 9px;
  background:var(--surface);
  border:1px solid var(--border-accent);
  border-radius:var(--r-full);
  font-size:11px;
  font-weight:600;
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:0.1em;
  margin-bottom:18px;
  align-self:flex-start;
}
.blog-card .blog-category::before{
  content:'';
  width:5px;height:5px;
  background:var(--accent);
  border-radius:50%;
  box-shadow:0 0 8px var(--accent);
}
.blog-card h2{
  font-family:var(--font-display);
  font-size:22px;
  font-weight:600;
  line-height:1.25;
  letter-spacing:-0.02em;
  margin-bottom:14px;
  color:var(--text);
}
.blog-card h2 a{
  color:inherit;
  transition:color .2s;
}
.blog-card h2 a:hover{color:var(--accent)}
.blog-meta{
  font-size:13px;
  color:var(--text-3);
  margin-bottom:16px;
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
}
.blog-meta span{display:inline-flex;align-items:center;gap:6px}
.blog-excerpt{
  font-size:15px;
  color:var(--text-1);
  line-height:1.6;
  margin-bottom:20px;
  flex:1;
}
.blog-readmore{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--accent);
  font-weight:600;
  font-size:14.5px;
  transition:gap .3s var(--ease-out);
  align-self:flex-start;
}
.blog-readmore:hover{gap:10px;color:var(--accent-h)}

/* ===== ARTICLE PAGE ===== */
.article-page{padding-top:120px}
.article-header{
  padding:0 0 56px;
}
.article-header .container-narrow{text-align:left}

.breadcrumb{
  font-size:13px;
  color:var(--text-3);
  margin-bottom:24px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.breadcrumb a{color:var(--text-2);transition:color .2s}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb span{color:var(--text-1);font-weight:500}

.article-header h1{
  font-family:var(--font-display);
  font-size:clamp(30px,4.4vw,46px);
  line-height:1.12;
  letter-spacing:-0.025em;
  font-weight:600;
  margin-bottom:24px;
  color:var(--text);
}
.article-header h1 .accent{
  background:linear-gradient(120deg,var(--accent),var(--blue));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.article-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
  font-size:14px;
  color:var(--text-2);
  padding:18px 0;
  border-top:1px solid var(--border-1);
  border-bottom:1px solid var(--border-1);
  margin-bottom:32px;
}
.article-meta .author strong{color:var(--text)}
.article-meta .author a{color:var(--accent);font-weight:500}
.article-meta .date,
.article-meta .reading-time{color:var(--text-3)}

.article-intro{
  font-size:19px;
  line-height:1.6;
  color:var(--text-1);
  font-weight:450;
  padding:24px 28px;
  background:var(--surface);
  border-left:3px solid var(--accent);
  border-radius:var(--r-sm);
  margin-bottom:8px;
}
@media (max-width:780px){
  .article-page{padding-top:104px}
  .article-intro{font-size:17px;padding:20px 22px}
}

/* ===== ARTICLE BODY ===== */
.article-body{
  padding:32px 0 64px;
  font-size:17px;
  line-height:1.75;
  color:var(--text-1);
}
.article-body > .container-narrow > *{margin-bottom:24px}
.article-body h2{
  font-family:var(--font-display);
  font-size:clamp(24px,2.8vw,32px);
  line-height:1.2;
  letter-spacing:-0.02em;
  font-weight:600;
  color:var(--text);
  margin-top:48px;
  margin-bottom:20px;
}
.article-body h2:first-child{margin-top:0}
.article-body h3{
  font-family:var(--font-display);
  font-size:clamp(20px,2.2vw,24px);
  line-height:1.3;
  letter-spacing:-0.015em;
  font-weight:600;
  color:var(--text);
  margin-top:36px;
  margin-bottom:14px;
}
.article-body h4{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:600;
  color:var(--text);
  margin-top:28px;
  margin-bottom:10px;
}
.article-body p{
  margin-bottom:20px;
  color:var(--text-1);
}
.article-body p strong,
.article-body li strong{color:var(--text);font-weight:600}
.article-body p em{color:var(--accent);font-style:normal;font-weight:500}
.article-body a{
  color:var(--accent);
  font-weight:500;
  border-bottom:1px solid var(--border-accent);
  transition:color .2s,border-color .2s;
}
.article-body a:hover{color:var(--accent-h);border-color:var(--accent)}

.article-body ul,
.article-body ol{
  margin:0 0 24px;
  padding-left:24px;
}
.article-body li{
  margin-bottom:10px;
  color:var(--text-1);
}
.article-body ul li::marker{color:var(--accent)}
.article-body ol li::marker{color:var(--accent);font-weight:600}

/* Featured snippet style direct answer */
.snippet-answer{
  padding:18px 22px;
  background:linear-gradient(135deg,rgba(15,159,126,0.06),rgba(106,168,255,0.04));
  border:1px solid var(--border-accent);
  border-radius:var(--r-md);
  font-size:17px;
  font-weight:500;
  color:var(--text);
  margin:8px 0 28px;
}

/* Encadres Astuce / Attention */
.callout{
  padding:20px 24px;
  border-radius:var(--r-md);
  border:1px solid var(--border-2);
  background:var(--surface);
  margin:28px 0;
  font-size:16px;
  line-height:1.65;
}
.callout strong{display:block;margin-bottom:6px;font-family:var(--font-display);font-size:15px;letter-spacing:-0.01em}
.callout.tip{
  border-color:var(--border-accent);
  background:linear-gradient(135deg,rgba(15,159,126,0.06),rgba(99,220,190,0.03));
}
.callout.tip strong{color:var(--accent)}
.callout.warn{
  border-color:rgba(245,163,91,0.4);
  background:linear-gradient(135deg,rgba(245,163,91,0.07),rgba(245,163,91,0.02));
}
.callout.warn strong{color:var(--warm)}

/* Tableaux article */
.article-body table{
  width:100%;
  border-collapse:collapse;
  margin:28px 0;
  font-size:15px;
  background:var(--surface-raised);
  border-radius:var(--r-md);
  overflow:hidden;
  box-shadow:var(--shadow-1);
  border:1px solid var(--border-2);
}
.article-body thead{
  background:linear-gradient(135deg,var(--bg-1),var(--bg-2));
}
.article-body th{
  text-align:left;
  padding:14px 16px;
  font-family:var(--font-display);
  font-size:13px;
  font-weight:600;
  color:var(--text);
  text-transform:uppercase;
  letter-spacing:0.05em;
  border-bottom:1px solid var(--border-2);
}
.article-body td{
  padding:14px 16px;
  border-bottom:1px solid var(--border-1);
  color:var(--text-1);
  line-height:1.55;
  vertical-align:top;
}
.article-body tr:last-child td{border-bottom:none}
.article-body tr:hover td{background:var(--bg-1)}
@media (max-width:780px){
  .article-body{font-size:16.5px;line-height:1.72}
  .article-body table{font-size:14px;display:block;overflow-x:auto}
  .article-body th,.article-body td{padding:12px 14px}
}

/* Citation / quote */
.article-body blockquote{
  margin:32px 0;
  padding:24px 28px;
  border-left:3px solid var(--accent);
  background:var(--surface);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:18px;
  line-height:1.55;
  color:var(--text);
  font-style:normal;
  font-weight:450;
}
.article-body blockquote cite{
  display:block;
  margin-top:12px;
  font-size:14px;
  color:var(--text-3);
  font-weight:500;
}

/* Image dans article */
.article-body figure{
  margin:32px 0;
}
.article-body figure img{
  width:100%;
  height:auto;
  border-radius:var(--r-md);
  border:1px solid var(--border-2);
  box-shadow:var(--shadow-2);
}
.article-body figcaption{
  margin-top:12px;
  font-size:13px;
  color:var(--text-3);
  text-align:center;
  font-style:normal;
}

/* ===== ARTICLE FAQ ===== */
.article-faq{
  padding:80px 0;
  background:var(--bg-1);
  border-block:1px solid var(--border-1);
}
.article-faq h2{
  font-family:var(--font-display);
  font-size:clamp(28px,3.4vw,40px);
  line-height:1.1;
  letter-spacing:-0.025em;
  font-weight:600;
  text-align:center;
  margin-bottom:36px;
  color:var(--text);
}
.article-faq .faq-list{max-width:760px}
.article-faq .faq-chevron{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;height:28px;
  border-radius:50%;
  border:1px solid var(--border-2);
  background:var(--surface);
  transition:all .25s var(--ease-out);
  flex-shrink:0;
}
.article-faq .faq-chevron svg{width:14px;height:14px;transition:transform .25s var(--ease-out)}

/* ===== CTA SECTION ARTICLE ===== */
.article-cta{
  padding:96px 0 80px;
  position:relative;
}
.article-cta .cta-inner{
  background:linear-gradient(135deg,var(--surface-raised),var(--surface));
  border:1px solid var(--border-accent);
  border-radius:var(--r-xl);
  padding:56px 40px;
  text-align:center;
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow-3);
}
.article-cta .cta-inner::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%,var(--accent-glow-soft),transparent 60%),
    radial-gradient(ellipse 40% 30% at 100% 100%,rgba(106,168,255,0.06),transparent 50%);
  pointer-events:none;
  z-index:0;
}
.article-cta .cta-inner > *{position:relative;z-index:1}
.article-cta h2{
  font-family:var(--font-display);
  font-size:clamp(28px,3.4vw,40px);
  line-height:1.1;
  letter-spacing:-0.025em;
  font-weight:600;
  margin-bottom:14px;
  color:var(--text);
}
.article-cta h2 .accent{
  background:linear-gradient(120deg,var(--accent),var(--blue));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.article-cta p{
  font-size:17px;
  color:var(--text-1);
  margin-bottom:28px;
  line-height:1.6;
}
.article-cta .cta-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
}
@media (max-width:780px){
  .article-cta{padding:64px 0}
  .article-cta .cta-inner{padding:40px 24px}
}

/* ===== RELATED ARTICLES ===== */
.related-articles{
  padding:80px 0;
  background:var(--bg-1);
  border-top:1px solid var(--border-1);
}
.related-articles h2{
  font-family:var(--font-display);
  font-size:clamp(24px,2.8vw,32px);
  line-height:1.2;
  letter-spacing:-0.02em;
  font-weight:600;
  text-align:center;
  margin-bottom:36px;
  color:var(--text);
}
.related-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
  max-width:1120px;
  margin:0 auto;
}
.related-card{
  background:var(--surface-raised);
  border:1px solid var(--border-2);
  border-radius:var(--r-lg);
  padding:24px;
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .3s var(--ease-out);
}
.related-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-2);
  border-color:var(--border-accent);
}
.related-card h3{
  font-family:var(--font-display);
  font-size:17px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:-0.015em;
  margin-bottom:10px;
}
.related-card h3 a{color:var(--text);transition:color .2s}
.related-card h3 a:hover{color:var(--accent)}
.related-card p{font-size:14px;color:var(--text-2);line-height:1.55;margin:0}

/* ===== AUTHOR BIO ===== */
.author-bio{
  padding:64px 0 96px;
}
.author-bio .author-card{
  background:var(--surface);
  border:1px solid var(--border-2);
  border-radius:var(--r-lg);
  padding:28px 32px;
  display:flex;
  gap:24px;
  align-items:flex-start;
}
.author-bio .author-avatar{
  flex-shrink:0;
  width:72px;height:72px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--blue));
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-family:var(--font-display);
  font-weight:700;
  font-size:26px;
  letter-spacing:-0.02em;
  box-shadow:var(--shadow-2);
}
.author-bio h3{
  font-family:var(--font-display);
  font-size:14px;
  font-weight:600;
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:0.1em;
  margin-bottom:8px;
}
.author-bio p{
  font-size:15.5px;
  line-height:1.65;
  color:var(--text-1);
  margin:0;
}
.author-bio p strong{color:var(--text);font-weight:600}
.author-bio p a{color:var(--accent);font-weight:500;border-bottom:1px solid var(--border-accent)}
.author-bio p a:hover{color:var(--accent-h)}
@media (max-width:680px){
  .author-bio .author-card{flex-direction:column;gap:16px;padding:24px}
  .author-bio .author-avatar{width:60px;height:60px;font-size:22px}
}

/* ===== TAGS / KEYWORDS ===== */
.article-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:24px 0 8px;
}
.article-tags span{
  font-size:12px;
  color:var(--text-2);
  padding:5px 12px;
  background:var(--surface);
  border:1px solid var(--border-2);
  border-radius:var(--r-full);
  letter-spacing:-0.005em;
}