/* ==========================================================================
   Article (templates/article.php) — spécifique, en complément de cd.css (.cd-prose,
   .cd-essential, .cd-alert, .cd-list-rule). Valeurs reprises des maquettes
   article-*.dc.html. Flat design : aucune ombre, aucune bordure de carte, radius 0
   (boutons 4px via .cd-btn).
   ========================================================================== */

/* ─── En-tête : colonne 720px ──────────────────────────────────────────── */
.cd-article__head { max-width: 720px; margin: 0 auto; padding: clamp(24px, 5vw, 40px) 20px 0; display: flex; flex-direction: column; gap: 20px; }
.cd-article__back { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 16px; }
.cd-article__back a { color: var(--cd-text-3); }
.cd-article__back a:hover { color: var(--cd-green); }
.cd-article__title { font-size: clamp(34px, 4.6vw, 52px); line-height: 1.15; text-wrap: balance; }
.cd-article__meta { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 16px; color: var(--cd-text-3); }

/* ─── Image à la une : conteneur 1000px, largeur 100 %, hauteur auto ───── */
.cd-article__media { max-width: 1000px; margin: clamp(28px, 5vw, 48px) auto 0; padding: 0 20px; }
.cd-article__media img { width: 100%; height: auto; display: block; background: var(--cd-pale); }

/* ─── Corps : conteneur 1120px, chaque bloc centré sur 720px ───────────── */
/* La rangée de cartes (.cd-cards-row) s'étend seule sur toute la largeur du conteneur. */
.cd-article__body { padding-top: clamp(32px, 6vw, 56px); padding-bottom: clamp(56px, 9vw, 96px); }
.cd-article__body > * { max-width: 720px; margin-left: auto; margin-right: auto; }
.cd-article__body > .cd-cards-row { max-width: none; }

/* Chapô 22px : extrait manuel (.cd-article__lead), sinon le premier paragraphe du contenu. */
.cd-article__lead,
.cd-article__body:not(.cd-article__body--chapo) > p:first-child { font-size: 22px; color: var(--cd-dark); }
.cd-article__lead + *,
.cd-article__body:not(.cd-article__body--chapo) > p:first-child + * { margin-top: 28px; }

/* Articles structurés en H3 uniquement : rendus comme les H2 des maquettes. */
.cd-article__body--no-h2 h3 { font-size: clamp(26px, 3vw, 32px); font-weight: 400; line-height: 1.25; text-wrap: balance; }
.cd-article__body--no-h2 h3 strong { font-weight: 400; }

/* ─── Contenu WordPress : images, figures, listes ──────────────────────── */
.cd-article__body img { max-width: 100%; height: auto; }
.cd-article__body > figure, .cd-article__body .wp-block-image { margin-top: 32px; }
.cd-article__body > figure + *, .cd-article__body .wp-block-image + * { margin-top: 32px; }
.cd-article__body .wp-block-image img { width: 100%; display: block; }
.cd-article__body figcaption { margin-top: 8px; font-size: 16px; color: var(--cd-text-3); }
.cd-article__body a { overflow-wrap: anywhere; }

/* Listes à filets dans le contenu (.cd-list-rule) : neutraliser les puces de .cd-prose. */
.cd-article__body .cd-list-rule { padding-left: 0; list-style: none; }
.cd-article__body .cd-list-rule li + li { margin-top: 0; }

/* Encarts « L'essentiel » et « Quand consulter ? » (classes de cd.css). */
.cd-article__body .cd-essential ul, .cd-article__body .cd-alert ul { padding-left: 20px; }
.cd-article__body .cd-essential li + li, .cd-article__body .cd-alert li + li { margin-top: 0; }
.cd-article__body .cd-alert { margin-top: 40px; }
.cd-article__body .cd-alert h2 { margin-top: 0; }

/* ─── Rangée de cartes blanches (phases, niveaux…) ─────────────────────── */
/* <div class="cd-cards-row"><div><small>J1 – J5</small><strong>Règles</strong><p>…</p><em>Sport : …</em></div>…</div> */
.cd-article__body .cd-cards-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; margin-top: clamp(28px, 5vw, 40px); margin-bottom: clamp(28px, 5vw, 40px); font-size: 17px; line-height: 1.6; }
.cd-cards-row > * { background: var(--cd-white); padding: 24px; display: flex; flex-direction: column; gap: 8px; margin: 0; }
.cd-cards-row small { font-size: 15px; color: var(--cd-eyebrow); letter-spacing: 0.08em; }
.cd-cards-row strong { font-family: var(--cd-heading); font-weight: 500; font-size: 22px; line-height: 1.3; color: var(--cd-dark); }
.cd-cards-row p { margin: 0; color: var(--cd-text-2); }
.cd-cards-row em { font-style: normal; margin-top: auto; padding-top: 8px; color: var(--cd-green); }

/* ─── Actions : « Demander conseil » + téléphone ───────────────────────── */
.cd-article__actions { margin-top: 32px; }

/* ─── Article suivant (section blanche) ────────────────────────────────── */
.cd-article__next { padding: clamp(40px, 6vw, 64px) 0; }
.cd-article__next-in { max-width: 720px; margin: 0 auto; padding: 0 20px; display: flex; flex-direction: column; gap: 12px; }
.cd-article__next-link { font-family: var(--cd-heading); font-size: clamp(24px, 3vw, 30px); line-height: 1.3; color: var(--cd-dark); text-decoration: none; text-wrap: balance; transition: color .2s ease; }
.cd-article__next-link:hover { color: var(--cd-green); }