/* ═══════════════════════════════════════════════════════════
   BLOG — style aligné sur les pages "création de site internet"
   Thème SOMBRE de la charte (fond navy, texte clair, accents bleus),
   hero façon .cs-hero, cartes en panneaux. Chargé UNIQUEMENT sur
   body.blog-page → aucun impact sur le reste du site.
   Réutilise les variables de style.css (--bg, --txt, --blue, --border…).
   ═══════════════════════════════════════════════════════════ */

body.blog-page {
  --paper-2: rgba(19,27,42,.55);
  --copper:  #4f7cff;                 /* accent = bleu charte */
  --read:    #c3ccdb;                 /* texte de lecture */
  background: var(--bg);
  color: var(--read);
}

/* ---------- HERO article (façon .cs-hero) ---------- */
.blog-page .post-head {
  position: relative; overflow: hidden; text-align: center;
  padding: 130px 1.4rem 96px;
  background:
    radial-gradient(120% 120% at 50% 0%, #16233d 0%, #0d1523 58%, var(--bg) 100%);
}
.blog-page .post-head::before,
.blog-page .post-head::after {
  content: ""; position: absolute; transform: rotate(45deg); border-radius: 16px; pointer-events: none;
}
.blog-page .post-head::before { top: -50px; left: -40px; width: 150px; height: 150px; border: 1px solid rgba(255,255,255,.06); }
.blog-page .post-head::after  { bottom: -30px; right: -50px; width: 210px; height: 210px; border: 1px solid rgba(79,124,255,.18); }
.blog-page .post-container { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }

.blog-page .post-back {
  display: inline-block; font-family: 'Poppins', sans-serif; font-size: .78rem;
  letter-spacing: .04em; color: var(--txt-soft); text-decoration: none; margin-bottom: 1.2rem;
  transition: color .2s;
}
.blog-page .post-back:hover { color: var(--blue); }

/* Catégorie = façon .section-tag (bleu, majuscules, filet) */
.blog-page .post-cat {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 10px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--blue); margin-bottom: 1rem;
}
.blog-page .post-cat::before { content: ""; width: 22px; height: 1px; background: var(--blue); display: block; }

.blog-page .post-title {
  font-family: 'Cormorant Garamond', serif; font-weight: 700;
  font-size: clamp(2.3rem, 5.4vw, 4rem); line-height: 1.06; letter-spacing: -.01em;
  color: var(--txt); margin: 0 auto; max-width: 18ch;
}
.blog-page .post-title em { color: var(--blue); font-style: italic; }
.blog-page .post-meta { font-family: 'Inter', sans-serif; font-size: .86rem; color: var(--gray); margin: 1.2rem 0 0; }
.blog-page .post-meta strong { color: var(--txt-soft); }

/* ---------- Image hero (cadre + halo, chevauche le hero) ---------- */
.blog-page .post-hero { max-width: 940px; margin: -70px auto 0; padding: 0 1.4rem; position: relative; z-index: 3; }
.blog-page .post-hero img {
  width: 100%; height: clamp(220px, 42vw, 430px); object-fit: cover;
  border-radius: 16px; border: 1px solid var(--border);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(79,124,255,.08);
}
.blog-page figure { margin: 2.4rem 0; }
.blog-page figure img { width: 100%; border-radius: 14px; border: 1px solid var(--border); box-shadow: 0 24px 54px -30px rgba(0,0,0,.7); }
.blog-page figcaption { text-align: center; font-size: .82rem; color: var(--gray); font-style: italic; margin-top: .7rem; }

/* ---------- Corps de l'article (sombre, lisible) ---------- */
.blog-page .post-body {
  max-width: 720px; margin: 2.8rem auto 0; padding: 0 1.4rem 1rem;
  font-family: 'Inter', sans-serif; font-size: 1.07rem; line-height: 1.85; color: var(--read);
}
.blog-page .post-body p { margin: 0 0 1.4rem; }

.blog-page .post-lead { font-size: 1.24rem; line-height: 1.7; color: #dbe2ee; }
.blog-page .post-lead::first-letter {
  font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 3.6rem; line-height: .8;
  float: left; margin: .1em .12em 0 0; color: var(--blue);
}

/* Titres de section : filet + losange bleu (rappel charte) */
.blog-page .post-body h2 {
  font-family: 'Cormorant Garamond', serif; font-weight: 700;
  font-size: clamp(1.65rem, 3.4vw, 2.1rem); line-height: 1.15; color: var(--txt);
  margin: 2.8rem 0 1rem; padding-top: 1.9rem; border-top: 1px solid var(--border);
}
.blog-page .post-body h2::before {
  content: ""; display: block; width: 12px; height: 12px; margin: 0 0 1rem;
  background: linear-gradient(135deg, var(--blue), #7ea0ff); transform: rotate(45deg);
  border-radius: 3px; box-shadow: 0 5px 14px -3px rgba(79,124,255,.7);
}
.blog-page .post-body h3 { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.1rem; color: var(--blue); margin: 1.9rem 0 .7rem; }

/* Liens & emphase */
.blog-page .post-body a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.blog-page .post-body a:hover { color: #7ea0ff; }
.blog-page .post-body strong { color: var(--txt); font-weight: 600; }
.blog-page .post-body em { color: var(--blue); font-style: italic; }

/* Listes */
.blog-page .post-body ul, .blog-page .post-body ol { margin: 0 0 1.5rem; padding-left: 0; list-style: none; }
.blog-page .post-body li { position: relative; padding-left: 1.8rem; margin: 0 0 .75rem; }
.blog-page .post-body ul li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; background: var(--blue); transform: rotate(45deg); border-radius: 2px; }
.blog-page .post-body ol { counter-reset: li; }
.blog-page .post-body ol li { counter-increment: li; }
.blog-page .post-body ol li::before {
  content: counter(li); position: absolute; left: 0; top: .1em; width: 1.3rem; height: 1.3rem;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .8rem; color: var(--blue);
  background: rgba(79,124,255,.14); border: 1px solid rgba(79,124,255,.35);
  border-radius: 50%; display: grid; place-items: center;
}

/* Tableaux (panneaux sombres) */
.blog-page .post-body table {
  width: 100%; border-collapse: collapse; margin: 1.9rem 0; font-size: .95rem;
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
}
.blog-page .post-body thead th {
  background: var(--bg-3); color: var(--txt); font-family: 'Poppins', sans-serif; font-weight: 600;
  font-size: .8rem; letter-spacing: .02em; text-align: left; padding: .85rem 1rem;
}
.blog-page .post-body tbody td { padding: .85rem 1rem; border-top: 1px solid var(--border); vertical-align: top; color: var(--read); }
.blog-page .post-body tbody tr:nth-child(even) td { background: rgba(19,27,42,.5); }

/* Citation */
.blog-page .post-body blockquote {
  margin: 2.2rem 0; padding: .2rem 0 .2rem 1.5rem; border-left: 3px solid var(--blue);
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.55rem; line-height: 1.4; color: var(--txt);
}

/* Encadré "À retenir" */
.blog-page .callout {
  background: rgba(79,124,255,.08); border: 1px solid rgba(79,124,255,.28); border-left: 4px solid var(--blue);
  border-radius: 12px; padding: 1.15rem 1.35rem; margin: 2rem 0; font-size: 1rem; line-height: 1.7; color: var(--read);
}
.blog-page .callout p { margin: 0; }
.blog-page .callout strong { color: var(--blue); }

/* Séparateur fin de lecture */
.blog-page .post-end { text-align: center; color: var(--blue); font-size: 1.1rem; letter-spacing: .5em; margin: 2.6rem 0 .5rem; opacity: .8; }

/* ---------- INDEX du blog ---------- */
.blog-page .blog-hero {
  position: relative; overflow: hidden; text-align: center; padding: 128px 1.4rem 70px;
  background: radial-gradient(120% 120% at 50% 0%, #16233d 0%, #0d1523 58%, var(--bg) 100%);
}
.blog-page .blog-hero::after { content: ""; position: absolute; bottom: -60px; right: -46px; width: 200px; height: 200px; border: 1px solid rgba(79,124,255,.18); transform: rotate(45deg); border-radius: 14px; }
.blog-page .blog-hero .container { position: relative; z-index: 2; max-width: 720px; }
.blog-page .blog-hero .post-cat { justify-content: center; }
.blog-page .blog-hero h1 { font-family: 'Cormorant Garamond', serif; font-weight: 700; color: var(--txt); font-size: clamp(2.4rem, 5.5vw, 3.6rem); line-height: 1.06; margin: .3rem 0 0; }
.blog-page .blog-hero p { color: var(--txt-soft); font-size: 1.02rem; line-height: 1.7; max-width: 60ch; margin: 1.1rem auto 0; }

.blog-page .blog-grid {
  max-width: 1080px; margin: 3rem auto 0; padding: 0 1.4rem 1rem;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.4rem;
}
.blog-page .blog-card {
  display: flex; flex-direction: column; background: rgba(19,27,42,.6);
  border: 1px solid var(--border); border-radius: 16px; overflow: hidden; text-decoration: none;
  transition: transform .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.blog-page .blog-card:hover { transform: translateY(-5px); border-color: rgba(79,124,255,.42); box-shadow: 0 30px 60px -34px rgba(0,0,0,.8); }
.blog-page .blog-card-img { aspect-ratio: 16/10; overflow: hidden; border-bottom: 1px solid var(--border); }
.blog-page .blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.blog-page .blog-card:hover .blog-card-img img { transform: scale(1.05); }
.blog-page .blog-card-body { padding: 1.25rem 1.35rem 1.5rem; display: flex; flex-direction: column; gap: .55rem; }
.blog-page .blog-card .post-cat { margin: 0; }
.blog-page .blog-card h2 { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 1.45rem; line-height: 1.2; color: var(--txt); margin: 0; }
.blog-page .blog-card p { color: var(--txt-soft); font-size: .92rem; line-height: 1.6; margin: 0; }
.blog-page .blog-card .card-meta { margin-top: auto; font-size: .76rem; color: var(--gray); font-family: 'Poppins', sans-serif; }
.blog-page .blog-note { text-align: center; color: var(--gray); font-size: .95rem; margin: 2.8rem auto 0; max-width: 60ch; }

/* ---------- Barre de progression de lecture ---------- */
.blog-page .reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: rgba(255,255,255,.06); pointer-events: none; }
.blog-page .reading-progress-fill { height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--blue), #9db8ff); box-shadow: 0 0 12px rgba(79,124,255,.6); }

/* ---------- Carte auteur ---------- */
.blog-page .author-card {
  display: flex; gap: 1.15rem; align-items: center; margin: 3rem 0 0; padding: 1.4rem 1.5rem;
  background: linear-gradient(120deg, #16233d, #0e1626); border: 1px solid var(--border); border-radius: 16px; color: var(--txt);
}
.blog-page .author-diamond {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 13px; position: relative;
  background: linear-gradient(135deg, var(--blue), #8aa8ff); transform: rotate(45deg);
  box-shadow: 0 10px 24px -8px rgba(79,124,255,.7);
}
.blog-page .author-diamond::after { content: "✦"; position: absolute; inset: 0; display: grid; place-items: center; transform: rotate(-45deg); color: #fff; font-size: 1.15rem; }
.blog-page .author-txt { display: flex; flex-direction: column; gap: .12rem; }
.blog-page .author-kicker { font-family: 'Poppins', sans-serif; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gray); }
.blog-page .author-name { font-family: 'Cormorant Garamond', serif; font-size: 1.55rem; color: var(--txt); line-height: 1.1; }
.blog-page .author-role { font-size: .9rem; color: var(--txt-soft); }
.blog-page .author-link { font-family: 'Poppins', sans-serif; font-size: .85rem; color: var(--blue); text-decoration: none; margin-top: .35rem; }
.blog-page .author-link:hover { text-decoration: underline; }

/* ---------- Apparition en fondu (progressive) ---------- */
.blog-page.js-reveal .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.blog-page.js-reveal .reveal.reveal-in { opacity: 1; transform: none; }

@media (max-width: 640px) {
  .blog-page .post-head { padding: 100px 1.2rem 80px; }
  .blog-page .post-hero { margin-top: -54px; }
  .blog-page .post-body { font-size: 1.02rem; }
  .blog-page .post-lead { font-size: 1.14rem; }
  .blog-page .author-card { flex-direction: column; text-align: center; }
}