/* Journal des Mamans — gabarit d'article (option A, éditorial serif)
   Chargé sur les articles (body.jdm-single) et dans l'éditeur de blocs.
   Reprend fidèlement les aperçus d'article validés (Fraunces + Inter, rose/blush). */

:root{
  --jdm-rose:#B82E5F; --jdm-rose-deep:#9A2450; --jdm-plum:#2B1620; --jdm-mauve:#6E5560;
  --jdm-artline:#ECD7DB; --jdm-blush:#FBEEF1; --jdm-blush-soft:#FDF7F8; --jdm-white:#FFFFFF;
  --jdm-artshadow:0 18px 40px -24px rgba(43,22,32,.35);
  --jdm-serif:"Fraunces",Georgia,"Times New Roman",serif;
  --jdm-artsans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

/* ---- Page article : bascule police + fond ---- */
body.jdm-single{ background:var(--jdm-blush-soft); font-family:var(--jdm-artsans); color:var(--jdm-plum); line-height:1.65; font-size:17px; }

/* ---- En-tête éditorial (header-article.php) ---- */
.art-topbar{ position:sticky; top:0; z-index:20; background:rgba(255,255,255,.9); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--jdm-artline); }
.art-topbar-inner{ max-width:760px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.art-topbar .art-logo img, .art-topbar .custom-logo{ max-height:34px; width:auto; display:block; }
.art-topbar .custom-logo-link{ display:inline-flex; align-items:center; line-height:0; }
.art-topbar nav{ font-size:13.5px; }
.art-topbar nav a{ color:var(--jdm-mauve); text-decoration:none; padding:6px 10px; border-radius:999px; }
.art-topbar nav a:hover{ background:var(--jdm-blush); color:var(--jdm-rose-deep); }

/* ---- Corps de l'article ---- */
.art-main{ max-width:760px; margin:0 auto; padding:0 20px 40px; }
.art-reading{ max-width:680px; margin:0 auto; }
.art-hero{ margin:26px auto 0; max-width:720px; text-align:center; }
.art-badge{ display:inline-flex; align-items:center; gap:9px; font-family:var(--jdm-artsans); font-weight:600; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--jdm-rose-deep); background:var(--jdm-blush); border:1px solid var(--jdm-artline); padding:4px 16px 4px 4px; border-radius:999px; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease; }
.art-badge:hover{ transform:translateY(-1px); box-shadow:0 8px 18px -10px rgba(184,46,95,.55); }
.art-badge-icon{ width:30px; height:30px; flex:0 0 auto; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--jdm-blush); }
.art-badge-icon img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }
.art-badge-icon svg{ width:16px; height:16px; color:var(--jdm-rose); }
.art-picto{ width:76px; height:76px; margin:26px auto 0; border-radius:50%; overflow:hidden; border:1px solid var(--jdm-artline); box-shadow:0 10px 22px -12px rgba(184,46,95,.5); display:flex; align-items:center; justify-content:center; background:radial-gradient(120% 120% at 50% 20%, #FFF6F8 0%, var(--jdm-blush) 70%, #F3D2DC 100%); }
.art-picto svg{ width:34px; height:34px; color:var(--jdm-rose); }
.art-picto img{ width:100%; height:100%; object-fit:cover; }

.jdm-single h1, .art-hero h1{ font-family:var(--jdm-serif); font-weight:600; text-align:center; font-size:clamp(30px,6.4vw,46px); line-height:1.1; letter-spacing:-.015em; margin:18px 0 0; color:var(--jdm-plum); }
.art-hero .rule{ display:block; width:64px; height:5px; margin:18px auto 0; border-radius:4px; background:linear-gradient(90deg,var(--jdm-rose),#E7789F); }
.art-meta{ display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:center; margin-top:18px; color:var(--jdm-mauve); font-size:14px; }
.art-meta span{ display:inline-flex; align-items:center; gap:7px; }

/* Image mise en avant / images de contenu */
.art-figure{ margin:34px 0; }
.art-figure img{ border-radius:20px; border:1px solid var(--jdm-artline); box-shadow:var(--jdm-artshadow); width:100%; }
.art-figure figcaption{ margin-top:10px; font-size:13px; color:var(--jdm-mauve); text-align:center; font-style:italic; }

/* ---- Corps de texte (venant de l'éditeur) ---- */
.art-body{ font-size:17px; }
.art-body p{ margin:14px 0; }
.art-body .chapo{ font-size:18px; line-height:1.6; color:var(--jdm-plum); margin:26px 0 8px; }

/* ---- Images du corps : coins arrondis, centrées, taille plafonnée (sans déformation), légende centrée ---- */
.art-body .wp-block-image{ margin:28px 0; text-align:center; background:transparent; }
.art-body .wp-block-image img{ max-width:100%; max-height:620px; width:auto; height:auto; display:inline-block; }
.art-body img{ border-radius:20px; }
.art-body figcaption,
.art-body .wp-block-image figcaption{ text-align:center; font-style:italic; font-size:13px; color:var(--jdm-mauve); margin-top:10px; }

/* Motif « Section (sur-titre + titre) » : h2 avec eyebrow */
.art-body h2{ font-family:var(--jdm-serif); font-weight:600; font-size:clamp(22px,3.6vw,27px); line-height:1.25; letter-spacing:-.01em; margin:44px 0 6px; padding-top:6px; color:var(--jdm-plum); }
/* Motif « Section » : le sur-titre est un bloc séparé (p.eyebrow) juste au-dessus du titre. */
.art-body p.eyebrow{ display:block; font-family:var(--jdm-artsans); font-weight:600; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--jdm-rose); margin:44px 0 6px; }
.art-body p.eyebrow + h2{ margin-top:0; padding-top:0; }
/* Compatibilité ascendante si le sur-titre est encore une balise dans le titre. */
.art-body h2 .eyebrow{ display:block; font-family:var(--jdm-artsans); font-weight:600; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--jdm-rose); margin-bottom:10px; }
.art-body h3{ font-family:var(--jdm-artsans); font-weight:600; font-size:17px; color:var(--jdm-rose-deep); margin:26px 0 2px; }
.art-body a{ color:var(--jdm-rose-deep); text-underline-offset:2px; }

.art-body ul{ margin:14px 0; padding-left:0; list-style:none; }
.art-body ul li{ position:relative; padding-left:26px; margin:9px 0; }
.art-body ul li::before{ content:""; position:absolute; left:4px; top:11px; width:7px; height:7px; border-radius:50%; background:var(--jdm-rose); }
.art-body ol{ margin:14px 0 14px 1.2em; }
.art-body ol li{ margin:9px 0; }

/* ---- Résumé (callout) ---- */
.art-body .resume{ margin:44px 0; border-radius:20px; background:var(--jdm-blush); border:1px solid var(--jdm-artline); border-left:5px solid var(--jdm-rose); padding:26px 26px 22px; box-shadow:var(--jdm-artshadow); }
.art-body .resume h2{ margin:0 0 6px; padding:0; display:flex; align-items:center; gap:10px; font-size:22px; }
.art-body .resume h2 svg{ width:22px; height:22px; color:var(--jdm-rose); flex:none; }
.art-body .resume p{ margin:8px 0 0; color:var(--jdm-plum); }

/* ---- FAQ (accordéon details/summary) ---- */
.art-body .faq h2{ margin-bottom:8px; }
.art-body details{ border:1px solid var(--jdm-artline); border-radius:16px; background:var(--jdm-white); margin:12px 0; overflow:hidden; transition:border-color .2s ease; }
.art-body details[open]{ border-color:#E3B9C6; }
.art-body summary{ list-style:none; cursor:pointer; padding:18px 52px 18px 20px; position:relative; font-family:var(--jdm-artsans); font-weight:600; font-size:16.5px; color:var(--jdm-plum); }
.art-body summary::-webkit-details-marker{ display:none; }
.art-body summary:hover{ color:var(--jdm-rose-deep); }
.art-body summary::after{ content:""; position:absolute; right:20px; top:50%; width:13px; height:13px; margin-top:-7px; border-right:2px solid var(--jdm-rose); border-bottom:2px solid var(--jdm-rose); transform:rotate(45deg); transition:transform .25s ease; }
.art-body details[open] summary::after{ transform:rotate(-135deg); }
.art-body .answer{ padding:0 20px 20px; color:var(--jdm-mauve); }
.art-body .answer p{ margin:0; }
/* Bloc « Détails » natif (core/details) : de l'air entre le texte et le cadre */
.art-body .wp-block-details > :not(summary){ padding:0 20px; color:var(--jdm-mauve); }
.art-body .wp-block-details > :not(summary):first-of-type{ margin-top:2px; }
.art-body .wp-block-details > :not(summary):last-child{ padding-bottom:20px; margin-bottom:0; }
.art-body .wp-block-details summary{ border-bottom:0; }

/* ---- Disclaimer + pied éditorial ---- */
.art-disclaimer{ background:var(--jdm-blush-soft); border:1px solid var(--jdm-artline); border-left:4px solid var(--jdm-rose); border-radius:12px; padding:14px 18px; margin:34px 0 0; font-size:14px; color:var(--jdm-mauve); }
.art-disclaimer b{ color:var(--jdm-plum); }
.art-footer{ border-top:1px solid var(--jdm-artline); margin-top:36px; background:var(--jdm-white); }
.art-foot-inner{ max-width:680px; margin:0 auto; padding:30px 20px 44px; color:var(--jdm-mauve); font-size:13px; text-align:center; }
.art-foot-inner .art-foot-logo img{ height:64px; width:auto; margin:0 auto 12px; display:block; }
.art-foot-nav{ margin:6px 0 14px; }
.art-foot-nav a{ color:var(--jdm-mauve); text-decoration:none; padding:0 9px; }
.art-foot-nav a:hover{ color:var(--jdm-rose-deep); }

@media (max-width:520px){
  body.jdm-single{ font-size:16px; }
  .art-main{ padding-left:16px; padding-right:16px; }
  .art-body .resume, .art-figure img{ border-radius:16px; }
}