/* ============================================================
   BLOG.CSS — Présentation des articles corpoream.fr/blog
   Auto-suffisant (n'importe PAS lecon-magazine.css) : le texte SIMPLE
   (titres + paragraphes bruts, comme Sophie l'écrit) est mis en page
   avec un vrai rythme. 4 styles au choix, pilotés par la classe
   .blog-style-<serenite|revue|carnet|net> sur .blog-article
   (réglage `blog_style` choisi par Sophie dans /reglages-blog).

   PORTE OUVERTE : ajouter/retoucher un style = éditer ce seul fichier,
   sans toucher aux leçons.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Nunito:wght@300;400;600;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;0,900;1,400;1,600&family=DM+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* ---------- Coquille commune ---------- */
.blog-article{
  max-width: var(--blog-max, 660px);
  margin: 0 auto;
  padding: 46px 22px 76px;
}
.blog-article-head{ margin-bottom: 6px; }
.blog-crumb{ font-family:'Nunito',sans-serif; font-size:13px; color:#8a8074; margin-bottom:16px; }
.blog-crumb a{ color:inherit; text-decoration:none; }
.blog-crumb a:hover{ color: var(--blog-accent,#1A5D68); }

.blog-article-head h1{
  font-family: var(--blog-title-font, 'DM Sans', sans-serif);
  font-weight: var(--blog-h1-weight, 800);
  font-size: clamp(30px, 5.2vw, var(--blog-h1-max, 44px));
  color: var(--blog-h1-color, #0F2B4C);
  line-height: 1.1;
  letter-spacing: var(--blog-h1-ls, -.01em);
  margin: 6px 0 8px;
  text-wrap: balance;
}
.blog-byline{ display:flex; align-items:center; gap:12px; margin:16px 0 4px; }
.blog-avatar{
  width:46px; height:46px; border-radius:50%; flex:0 0 auto;
  background:radial-gradient(circle at 30% 25%, #2C7C88, #1A5D68 70%);
  color:#fff; font-family:'DM Sans',sans-serif; font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center;
}
.blog-who{ font-family:'Nunito',sans-serif; font-weight:700; color:#0F2B4C; font-size:15px; }
.blog-who small{ display:block; font-weight:400; color:#6E655B; font-size:13px; }

/* ---------- Corps : styles pour HTML SIMPLE (+ mapping ed-*) ---------- */
.blog-body{ margin-top: 20px; }

.blog-body :is(p, .ed-p){
  font-family: var(--blog-body-font, 'Inter', sans-serif);
  font-size: var(--blog-p-size, 17.5px);
  line-height: var(--blog-p-lh, 1.8);
  color: var(--blog-ink, #33302b);
  margin: 0 0 1.3em;
}
/* Chapô = 1er paragraphe (ou .lead / .ed-intro), plus grand */
.blog-body > p:first-of-type,
.blog-body .lead,
.blog-body .ed-intro{
  font-family: var(--blog-lead-font, var(--blog-body-font));
  font-size: var(--blog-lead-size, 20px);
  line-height: 1.65;
  color: var(--blog-lead-color, #5b5248);
  font-style: var(--blog-lead-style, normal);
  margin: 24px 0 1.4em;
}
.blog-body :is(h2, .ed-h2){
  font-family: var(--blog-title-font, 'DM Sans', sans-serif);
  font-weight: var(--blog-h2-weight, 700);
  font-size: var(--blog-h2-size, 27px);
  color: var(--blog-h2-color, #0F2B4C);
  line-height: 1.2;
  margin: 2.3em 0 .5em;
  text-wrap: balance;
  border: 0; padding: 0;
}
.blog-body :is(h3, .ed-h3){
  font-family: var(--blog-title-font, 'DM Sans', sans-serif);
  font-weight: 600;
  font-size: var(--blog-h3-size, 20px);
  color: var(--blog-h2-color, #1A5D68);
  line-height: 1.3;
  margin: 1.9em 0 .4em;
  border: 0; padding: 0;
}
.blog-body ul, .blog-body ol{ margin: 0 0 1.3em; padding-left: 1.4em; }
.blog-body li{
  font-family: var(--blog-body-font, 'Inter', sans-serif);
  font-size: var(--blog-p-size, 17.5px);
  line-height: 1.75; color: var(--blog-ink, #33302b); margin-bottom: .5em;
}
.blog-body blockquote{
  font-family: var(--blog-title-font, serif);
  font-style: italic; font-size: 22px; line-height: 1.42;
  color: var(--blog-quote-color, var(--blog-accent, #9F790B));
  border-left: 3px solid var(--blog-accent, #9F790B);
  padding: 2px 0 2px 22px; margin: 1.7em 0;
}
.blog-body img{ max-width:100%; height:auto; border-radius:12px; margin:1.7em 0; }
.blog-body figure{ margin:1.7em 0; }
.blog-body figcaption{ font-family:'Nunito',sans-serif; font-size:13px; color:#8a8074; text-align:center; margin-top:8px; font-style:italic; }
/* Chute (dernier mot / phrase de clôture) — si <p class="chute"> */
.blog-body .chute{ margin-top: 2em; }

/* Bloc FAQ (details) — cohérent, teinté par l'accent du thème */
.blog-body details{ border:1px solid #e6ddce; border-radius:10px; background:#fff; margin:.7em 0; overflow:hidden; }
.blog-body details > summary{
  cursor:pointer; list-style:none; padding:14px 16px;
  font-family: var(--blog-body-font, 'Inter', sans-serif); font-weight:700;
  color: var(--blog-h2-color, #0F2B4C); display:flex; gap:10px; align-items:center;
}
.blog-body details > summary::-webkit-details-marker{ display:none; }
.blog-body details > summary::after{ content:"+"; margin-left:auto; color:var(--blog-accent,#9F790B); font-size:20px; line-height:1; }
.blog-body details[open] > summary::after{ content:"–"; }
.blog-body .mag-details-content, .blog-body details > div{
  padding:0 16px 15px; font-family: var(--blog-body-font,'Inter',sans-serif);
  color: var(--blog-ink,#33302b); line-height:1.7;
}

/* =========================================================================
   STYLE 1 — SÉRÉNITÉ  (épuré, aéré ; Cormorant + Nunito ; filets or)
   ========================================================================= */
.blog-style-serenite{
  --blog-title-font:'Cormorant Garamond', Georgia, serif;
  --blog-body-font:'Nunito', sans-serif;
  --blog-h1-color:#0F2B4C; --blog-h1-weight:600; --blog-h1-ls:0; --blog-h1-max:46px;
  --blog-h2-color:#1A5D68; --blog-h2-weight:600; --blog-h2-size:28px;
  --blog-lead-size:20px; --blog-lead-color:#5b5248;
  --blog-accent:#9F790B; --blog-quote-color:#783F23;
  --blog-max:600px; --blog-p-size:18px; --blog-p-lh:1.85; --blog-ink:#38332d;
}
.blog-style-serenite .blog-body > p:first-of-type,
.blog-style-serenite .blog-body .lead,
.blog-style-serenite .blog-body .ed-intro{
  border-bottom:1px solid #e7d3a3; padding-bottom:26px;
}
.blog-style-serenite .blog-body .chute{
  text-align:center; font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:24px; color:#783F23; border-top:1px solid #e7d3a3; padding-top:24px;
}

/* =========================================================================
   STYLE 2 — REVUE  (essai littéraire ; Playfair + Inter ; lettrine, filet or)
   ========================================================================= */
.blog-style-revue{
  --blog-title-font:'Playfair Display', Georgia, serif;
  --blog-body-font:'Inter', sans-serif;
  --blog-h1-color:#0F2B4C; --blog-h1-weight:900; --blog-h1-ls:-.5px; --blog-h1-max:48px;
  --blog-h2-color:#0F2B4C; --blog-h2-weight:700; --blog-h2-size:29px;
  --blog-lead-size:19px; --blog-lead-color:#463f38;
  --blog-accent:#9F790B; --blog-quote-color:#0F2B4C;
  --blog-max:660px; --blog-p-size:17.5px; --blog-p-lh:1.8; --blog-ink:#2b2622;
}
.blog-style-revue .blog-body > p:first-of-type::first-letter,
.blog-style-revue .blog-body .lead::first-letter,
.blog-style-revue .blog-body .ed-intro::first-letter{
  float:left; font-family:'Playfair Display',serif; font-weight:900;
  font-size:68px; line-height:.72; color:#AC7D69; padding:6px 12px 0 0;
}
.blog-style-revue .blog-body :is(h2,.ed-h2)::after{
  content:""; display:block; width:46px; height:2px; background:#9F790B; margin:14px 0 2px;
}
.blog-style-revue .blog-body .chute{
  font-family:'Playfair Display',serif; font-style:italic; font-size:24px; line-height:1.4;
  color:#0F2B4C; border-left:3px solid #9F790B; padding:2px 0 2px 22px;
}

/* =========================================================================
   STYLE 3 — CARNET  (intime ; page crème posée ; Cormorant italique + Nunito)
   ========================================================================= */
.blog-style-carnet{
  --blog-title-font:'Cormorant Garamond', Georgia, serif;
  --blog-body-font:'Nunito', sans-serif;
  --blog-h1-color:#783F23; --blog-h1-weight:600; --blog-h1-ls:0; --blog-h1-max:42px;
  --blog-h2-color:#AC7D69; --blog-h2-weight:600; --blog-h2-size:25px;
  --blog-lead-font:'Cormorant Garamond',serif; --blog-lead-style:italic; --blog-lead-size:23px; --blog-lead-color:#6b4a33;
  --blog-accent:#9F790B; --blog-quote-color:#783F23;
  --blog-max:620px; --blog-p-size:17px; --blog-p-lh:1.82; --blog-ink:#453a30;
}
.blog-style-carnet.blog-article{
  background:#FCF8F1; border:1px solid #e5d8c2; border-radius:16px;
  box-shadow:0 10px 40px rgba(120,63,35,.10);
  margin:36px auto; padding:48px 44px 56px;
}
.blog-style-carnet .blog-body :is(h2,.ed-h2)::before{ content:"✦ "; color:#9F790B; font-size:.7em; vertical-align:middle; }
.blog-style-carnet .blog-body .chute{
  text-align:center; font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:23px; color:#783F23; border-top:1px dashed #d8c3a3; padding-top:22px;
}

/* =========================================================================
   STYLE 4 — NET  (contemporain, structuré ; DM Sans + Inter ; barres teal)
   ========================================================================= */
.blog-style-net{
  --blog-title-font:'DM Sans', sans-serif;
  --blog-body-font:'Inter', sans-serif;
  --blog-h1-color:#0F2B4C; --blog-h1-weight:800; --blog-h1-ls:-.01em; --blog-h1-max:44px;
  --blog-h2-color:#0F2B4C; --blog-h2-weight:700; --blog-h2-size:24px;
  --blog-lead-size:19px; --blog-lead-color:#4a4038;
  --blog-accent:#9F790B; --blog-quote-color:#1A5D68;
  --blog-max:680px; --blog-p-size:17px; --blog-p-lh:1.75; --blog-ink:#33302b;
}
.blog-style-net .blog-body > p:first-of-type,
.blog-style-net .blog-body .lead,
.blog-style-net .blog-body .ed-intro{
  border-left:3px solid #9F790B; padding-left:18px;
}
.blog-style-net .blog-body :is(h2,.ed-h2){ padding-left:14px; border-left:3px solid #1A5D68; }
.blog-style-net .blog-body .chute{
  background:#e8f2f2; border-radius:12px; padding:18px 22px; color:#1A5D68; font-weight:600;
  font-family:'DM Sans',sans-serif;
}

/* =========================================================================
   MAILLAGE INTERNE — ligne « Lire aussi » (corps) + bloc « À lire aussi » (pied)
   Sobre, teinté par les variables du style choisi.
   ========================================================================= */
.blog-body .blog-lire-aussi{
  font-family: var(--blog-body-font, 'Inter', sans-serif);
  font-size: 16px; line-height: 1.5; font-style: italic;
  color: #6E655B;
  border-left: 2px solid var(--blog-accent, #9F790B);
  padding: 2px 0 2px 16px; margin: 2em 0 0;
}
.blog-body .blog-lire-aussi a{
  color: var(--blog-h2-color, #1A5D68); font-weight: 700; font-style: normal;
  text-decoration: underline; text-decoration-color: #e7d3a3; text-underline-offset: 3px;
}
.blog-body .blog-lire-aussi a:hover{ text-decoration-color: currentColor; }

.blog-related{ margin-top: 56px; padding-top: 30px; border-top: 1px solid #e7d3a3; }
.blog-related h2{
  font-family: var(--blog-title-font, 'DM Sans', sans-serif);
  font-weight: var(--blog-h2-weight, 700);
  font-size: 24px; line-height: 1.2;
  color: var(--blog-h2-color, #0F2B4C);
  margin: 0 0 10px; border: 0; padding: 0;
}
.blog-related ul{ list-style: none; margin: 0; padding: 0; }
.blog-related li{ border-bottom: 1px solid #efe6d6; }
.blog-related li:last-child{ border-bottom: 0; }
.blog-related a{
  display: flex; align-items: center; gap: 16px;
  padding: 14px 0; text-decoration: none; color: inherit;
}
.blog-related img, .blog-related-ph{
  width: 96px; height: 72px; flex: 0 0 auto;
  object-fit: cover; border-radius: 10px; margin: 0;
  background: linear-gradient(120deg, #E7EEF0, #F3E7D4);
}
.blog-related-txt{ min-width: 0; }
.blog-related-titre{
  display: block;
  font-family: var(--blog-title-font, 'DM Sans', sans-serif);
  font-weight: 600; font-size: 21px; line-height: 1.25;
  color: var(--blog-h1-color, #0F2B4C);
  text-wrap: balance;
}
.blog-related a:hover .blog-related-titre{ color: var(--blog-accent, #9F790B); }
.blog-related small{
  display: block; margin-top: 4px;
  font-family: 'Nunito', sans-serif; font-size: 13px; color: #6E655B;
}

@media (max-width:600px){
  .blog-related{ margin-top: 40px; padding-top: 24px; }
  .blog-related img, .blog-related-ph{ width: 76px; height: 58px; }
  .blog-related-titre{ font-size: 18px; }
  .blog-article{ padding:30px 18px 48px; }
  .blog-style-carnet.blog-article{ margin:18px 12px; padding:32px 22px 40px; }
}

/* ---------- Partage (liens simples, sans compteur) ---------- */
.blog-share{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.blog-share-haut{ margin-top:18px; }
.blog-share-bas{ margin-top:48px; padding-top:22px; border-top:1px solid #e7d3a3; }
.blog-share-label{
  font-family:'Inter', sans-serif; font-size:13px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:#6E655B; margin-right:4px;
}
.blog-share-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; padding:0; cursor:pointer;
  background:#FBF6F0; border:1px solid #e7d3a3; color:#1A5D68;
  transition:background .15s, color .15s, border-color .15s;
}
.blog-share-btn svg{ width:18px; height:18px; fill:currentColor; }
.blog-share-btn:hover, .blog-share-btn:focus-visible{ background:#1A5D68; border-color:#1A5D68; color:#fff; }
.blog-share-btn:focus-visible{ outline:2px solid #9F790B; outline-offset:2px; }
.blog-share-btn.is-copied{ background:#9F790B; border-color:#9F790B; color:#fff; }
.blog-share-copied{
  position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%);
  white-space:nowrap; font:600 12px 'Inter', sans-serif; color:#9F790B; pointer-events:none;
}

/* ---------- Capture email « Recevez mes prochains articles » ---------- */
.blog-subscribe{
  margin:40px 0 0; padding:26px 26px 22px; border-radius:14px;
  background:#FBF6F0; border:1px solid #e7d3a3; border-top:3px solid #9F790B;
  font-family:'Inter', sans-serif;
}
.blog-article .blog-subscribe-titre{
  font-family:var(--blog-title-font, 'DM Sans', sans-serif); font-weight:700;
  font-size:24px; line-height:1.2; color:#1A5D68; margin:0 0 6px;
}
.blog-article .blog-subscribe-sous{ font-size:15px; line-height:1.55; color:#5b5248; margin:0 0 16px; }
.blog-subscribe-row{ display:flex; gap:8px; flex-wrap:wrap; }
.blog-subscribe-row input[type=email]{
  flex:1 1 220px; min-width:0; padding:12px 14px; font-size:16px;
  border:1px solid #d9cdb8; border-radius:8px; background:#fff; color:#33302b;
}
.blog-subscribe-row input[type=email]:focus{ outline:2px solid #1A5D68; outline-offset:1px; border-color:#1A5D68; }
.blog-subscribe-row button{
  flex:0 0 auto; padding:12px 20px; font:600 15px 'Inter', sans-serif;
  background:#9F790B; color:#fff; border:0; border-radius:8px; cursor:pointer;
}
.blog-subscribe-row button:hover{ background:#86650a; }
.blog-subscribe-row button:disabled{ opacity:.6; cursor:wait; }
.blog-subscribe-rgpd{ display:flex; align-items:flex-start; gap:8px; margin-top:12px; cursor:pointer; }
.blog-subscribe-rgpd input{ margin-top:3px; flex:0 0 auto; accent-color:#1A5D68; }
.blog-article .blog-subscribe-rgpd span{ font-size:12.5px; line-height:1.45; color:#6E655B; }
.blog-article .blog-subscribe-erreur{ margin:8px 0 0; font-size:14px; color:#a3352a; }
.blog-subscribe-erreur:empty{ display:none; }
.blog-article .blog-subscribe-merci{ margin:4px 0 0; font-size:16px; color:#1A5D68; font-weight:600; }
/* Variante discrète de milieu d'article */
.blog-subscribe-milieu{ margin:36px 0; padding:18px 20px 14px; border-top-width:1px; background:transparent; }
.blog-article .blog-subscribe-milieu .blog-subscribe-titre{ font-size:19px; margin-bottom:10px; }

@media (max-width:600px){
  .blog-subscribe{ padding:22px 18px 18px; }
  .blog-subscribe-row button{ width:100%; }
}