/*
 * CSS Confort de lecture des articles - migre depuis le Customizer le 2026-07-04.
 * Contient uniquement les blocs "PLAYMOWEB - CONFORT DE LECTURE" (v1) et "fidelite maquette" (v2).
 * Les autres regles du Customizer (technos, realisations, effets) restent dans le Customizer.
 */

/* ============================================================
   PLAYMOWEB - CONFORT DE LECTURE DES ARTICLES (v1, ajout Claude)
   Perimetre : pages articles uniquement (body.single-post)
   ============================================================ */
body.single-post .blog-post { max-width: 760px; margin-left: auto; margin-right: auto; }
body.single-post .blog-post p { line-height: 1.75; margin-bottom: 1.35em; color: rgba(22,23,55,0.72); }
body.single-post .blog-post li { color: rgba(22,23,55,0.72); font-size: 1.1rem; line-height: 1.75; }
body.single-post .blog-post p strong, body.single-post .blog-post li strong { color: #161737; }
body.single-post .blog-post h2 { scroll-margin-top: 110px; margin-top: 2.4em; line-height: 1.25; }

/* Puces et numeros : le theme reset list-style sur les listes Gutenberg.
   Les exceptions (sommaire, encadre essentiel) re-neutralisent plus bas. */
body.single-post .blog-post ul, body.single-post .blog-post ul li { list-style: disc outside; }
body.single-post .blog-post ol, body.single-post .blog-post ol li { list-style: decimal outside; }

/* Sommaire en pastilles.
   Note : :has() imbriqué dans :has() est invalide (regle rejetee par les
   navigateurs) — toujours utiliser p:has(+ ol > li > a[...]). */
body.single-post .blog-post p:has(+ ol > li > a[href^="#"]) { margin-bottom: 0.5em; }
body.single-post .blog-post ol:has(> li > a[href^="#"]) { list-style: none; background: #FFFFFF; border: 2px solid #CBBCF1; border-radius: 24px; padding: 18px 20px; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 2.2em; }
body.single-post .blog-post ol:has(> li > a[href^="#"]) li { margin: 0; padding: 0; list-style: none; }
body.single-post .blog-post ol:has(> li > a[href^="#"]) a { display: inline-block; background: #F6F6F3; color: #161737; border-radius: 999px; padding: 7px 16px; font-size: 0.85em; font-weight: 600; text-decoration: none; transition: background 0.15s ease; }
body.single-post .blog-post ol:has(> li > a[href^="#"]) a:hover { background: #E7DEF8; }

/* Tableaux.
   Les coins arrondis sont portes par la figure (overflow:hidden sur une
   <table> ne rogne pas le fond des cellules) + arrondis de secours sur les
   cellules d'angle pour les tableaux hors figure. */
body.single-post .blog-post table { width: 100%; border-collapse: separate; border-spacing: 0; background: #FFFFFF; border-radius: 20px; font-size: 0.92em; box-shadow: 0 2px 12px rgba(22,23,55,0.06); }
body.single-post .blog-post table th { background: #161737; color: #FFFFFF; text-align: left; padding: 13px 16px; border: none !important; }
body.single-post .blog-post table td { padding: 13px 16px; border: none !important; border-top: 1px solid #F6F6F3 !important; vertical-align: top; }
body.single-post .blog-post table tr:has(> td:first-child strong) td { background: #FFF6D6; }
body.single-post .blog-post table tr:first-child > *:first-child { border-top-left-radius: 20px; }
body.single-post .blog-post table tr:first-child > *:last-child { border-top-right-radius: 20px; }
body.single-post .blog-post table tr:last-child > *:first-child { border-bottom-left-radius: 20px; }
body.single-post .blog-post table tr:last-child > *:last-child { border-bottom-right-radius: 20px; }
body.single-post .blog-post figure.wp-block-table { margin: 1.8em 0; border-radius: 20px; overflow: hidden; box-shadow: 0 2px 12px rgba(22,23,55,0.06); background: #FFFFFF; }
body.single-post .blog-post figure.wp-block-table table { box-shadow: none; margin: 0; }

/* CTA final en carte bleu nuit */
body.single-post .blog-post blockquote { background: #161737; color: #FFFFFF; border: none; border-radius: 24px; padding: 30px 32px; margin: 2.5em 0 0; text-align: center; }
body.single-post .blog-post blockquote p { color: #FFFFFF; margin: 0 0 16px; }
body.single-post .blog-post blockquote p:last-child { margin-bottom: 0; }
body.single-post .blog-post blockquote strong { color: #FFFFFF; }
body.single-post .blog-post blockquote a { display: inline-block; background: #FFFFFF; color: #161737 !important; border-radius: 999px; padding: 12px 26px; font-weight: 700; text-decoration: none; }
body.single-post .blog-post blockquote a:hover { background: #FFDE6B; }

/* Encadre L'essentiel */
body.single-post .pm-essentiel { background: #FFFFFF; border: 2px solid #CBBCF1; border-radius: 24px; padding: 24px 26px; margin: 0 0 2em; }
body.single-post .pm-essentiel .pm-essentiel__title { font-weight: 700; margin: 0 0 10px; color: #161737; }
body.single-post .pm-essentiel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
body.single-post .pm-essentiel li, body.single-post .pm-essentiel ul li { position: relative; padding-left: 22px; line-height: 1.55; color: #161737; font-size: 1rem; list-style: none; }
body.single-post .pm-essentiel li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 10px; height: 10px; border-radius: 50%; background: #7BD4B0; }
body.single-post .pm-essentiel .pm-essentiel__deadline { display: inline-block; margin-top: 14px; background: #FFF6D6; border-radius: 999px; padding: 6px 16px; font-weight: 700; font-size: 0.85em; }

/* Callout chiffre cle */
body.single-post .pm-callout { display: flex; gap: 18px; align-items: center; background: #FFFFFF; border-left: 6px solid #FF9A7B; border-radius: 20px; padding: 18px 22px; margin: 1.8em 0; }
body.single-post .pm-callout .pm-callout__num { font-size: 1.7em; font-weight: 700; line-height: 1.15; white-space: nowrap; color: #161737; }
body.single-post .pm-callout p { margin: 0; font-size: 0.9em; }

/* Barre de progression de lecture (CSS pur) */
@supports (animation-timeline: scroll()) {
  body.single-post::before { content: ""; position: fixed; top: 0; left: 0; height: 4px; width: 100%; background: linear-gradient(90deg, #161737, #CBBCF1); transform-origin: 0 50%; transform: scaleX(0); animation: pmProgress linear; animation-timeline: scroll(root); z-index: 9999; }
  @keyframes pmProgress { to { transform: scaleX(1); } }
}

/* ============================================================
   PLAYMOWEB - CONFORT DE LECTURE v2 : fidelite maquette
   (titres, largeur du H1, sommaire en carte verticale)
   ============================================================ */
/* Titres : DMSans.ttf est une police variable (wght 100-1000, opsz 9-40)
   servie par defaut en graisse 400 / taille optique 9pt — d'ou des grands
   titres a la fois mous et epais. On force la graisse 700 de la maquette et
   la taille optique 40 (dessin grand corps, plus net). */
body.single-post .hero-actu__title h1 { max-width: 760px; margin-left: auto; margin-right: auto; font-size: clamp(34px, 4.5vw, 48px); line-height: 1.15; letter-spacing: -0.01em; font-weight: 700; font-variation-settings: "opsz" 40, "wght" 700; }
body.single-post .blog-post h2, body.single-post .blog-post h3 { font-weight: 700; font-variation-settings: "opsz" 40, "wght" 700; }
body.single-post .hero-actu__title { max-width: 760px; margin-left: auto; margin-right: auto; }
body.single-post .hero-actu__title + div { max-width: 760px; margin-left: auto; margin-right: auto; }
body.single-post .blog-post h2 { font-size: clamp(24px, 2.4vw, 30px); padding-top: 0; margin-top: 52px; margin-bottom: 18px; }
body.single-post .blog-post h3 { font-size: clamp(19px, 1.8vw, 22px); }

/* Sommaire replie en accordeon sur mobile (maquette toc-mobile, <= 900px).
   Le <details> est construit par lecture-toc.js au chargement. */
body.single-post .pm-toc-accordion { max-width: 420px; margin: 0 0 2.2em; }
body.single-post .pm-toc-accordion summary { background: #FFFFFF; border: 2px solid #CBBCF1; border-radius: 24px; padding: 14px 22px; font-weight: 700; color: #161737; cursor: pointer; }
body.single-post .pm-toc-accordion[open] summary { border-bottom: none; border-radius: 24px 24px 0 0; }
body.single-post .pm-toc-accordion ol:has(> li > a[href^="#"]) { margin-bottom: 0; }

/* Sommaire : carte verticale comme la maquette */
body.single-post .blog-post p:has(+ ol > li > a[href^="#"]) { max-width: 420px; margin-left: 0; background: #FFFFFF; border: 2px solid #CBBCF1; border-bottom: none; border-radius: 24px 24px 0 0; padding: 18px 22px 0; margin-bottom: 0; color: #161737; font-weight: 700; }
body.single-post .blog-post ol:has(> li > a[href^="#"]) { flex-direction: column; gap: 2px; max-width: 420px; border-top: none; border-radius: 0 0 24px 24px; padding: 10px 14px 16px; }
body.single-post .blog-post ol:has(> li > a[href^="#"]) a { display: block; background: transparent; font-size: 0.88em; padding: 8px 14px; }
body.single-post .blog-post ol:has(> li > a[href^="#"]) a:hover { background: #E7DEF8; }