/**
 * Article de blog — maquette « variante A, héros carte » (08/10/2026)
 *
 * Chargé sur is_singular('post') seulement, avec cp-article-blocks.css qui
 * porte les blocs partagés avec l'éditeur (détails, boutons, citations…).
 * Jetons, dégradé et arcs repris de l'accueil, de l'annuaire et de la fiche
 * pro : voir cp-home.css et relpro-profile.css.
 *
 * @package CalepiParentalite
 */

.single-post {
    --cp-coral-700:  #B8442C;
    --cp-coral-100:  #FBE3D5;
    --cp-teal-700:   #3F8780;
    --cp-teal-200:   #C8E2DF;
    --cp-teal-100:   #E4F1EF;
    --cp-n-200:      #ECE3D6;
    --cp-n-300:      #D9CFC1;
    --cp-n-500:      #847C72;
    --cp-n-600:      #5C5650;
    --cp-hero-a:     #F7D3C3;
    --cp-hero-b:     #FBE6D3;
    --cp-r-lg:       18px;
    --cp-r-xl:       28px;
    --cp-r-pill:     999px;
    --cp-shadow-sm:  0 2px 6px rgba(44, 44, 42, .06), 0 1px 2px rgba(44, 44, 42, .04);
    --cp-shadow-md:  0 6px 18px rgba(44, 44, 42, .08), 0 2px 4px rgba(44, 44, 42, .04);
    --cp-shadow-lg:  0 10px 30px rgba(59, 42, 36, .07), 0 2px 6px rgba(59, 42, 36, .04);
}

/* ── Enveloppe GeneratePress : neutralisée, comme sur l'accueil ─────────────── */

.single-post #page.grid-container { max-width: none; padding: 0; }
.single-post .site-content { padding: 0; display: block; }
.single-post .site-main { margin: 0; }

.cp-art {
    max-width:   1140px;
    margin:      0 auto;
    padding:     0 24px 56px;
    font-family: 'Lato', sans-serif;
    font-size:   16px;
    line-height: 1.7;
    color:       var(--cp-graphite);
}

/* ── Fil d'Ariane ────────────────────────────────────────────────────────────── */

.cp-art__crumb, .cp-art__crumb * { font-size: 13px; line-height: 1.5; }
.cp-art__crumb { margin: 20px 0 14px; color: var(--cp-n-500); }
.cp-art__crumb .rank-math-breadcrumb p { margin: 0; }
.cp-art__crumb a { color: var(--cp-n-500); text-decoration: none; }
.cp-art__crumb a:hover { color: var(--cp-coral); }
.cp-art__crumb .last { color: var(--cp-n-500); }

/* ── Étiquette ───────────────────────────────────────────────────────────────── */

.cp-art__eyebrow {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    font-size:       12px;
    font-weight:     700;
    letter-spacing:  .14em;
    text-transform:  uppercase;
    color:           var(--cp-teal-700);
    text-decoration: none;
}
.cp-art__eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cp-coral); }
a.cp-art__eyebrow:hover { color: var(--cp-coral); }

/* ── En-tête : carte pêche ───────────────────────────────────────────────────── */

.cp-art__hero {
    position:              relative;
    overflow:              hidden;
    display:               grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap:                   40px;
    align-items:           center;
    padding:               44px 48px 40px;
    border-radius:         32px;
    background:            linear-gradient(140deg, var(--cp-hero-a), var(--cp-hero-b));
}
.cp-art__hero--sans-image { grid-template-columns: 1fr; }
.cp-art__hero::after  { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; border: 2px solid rgba(212, 85, 58, .16); right: -130px; top: -190px; pointer-events: none; }
.cp-art__hero::before { content: ""; position: absolute; width: 240px; height: 240px; border-radius: 50%; border: 2px solid rgba(212, 85, 58, .10); left: 42%; bottom: -170px; pointer-events: none; }
.cp-art__hero > * { position: relative; z-index: 1; min-width: 0; }

.single-post .cp-art__titre {
    font-family:   'Caveat', cursive;
    font-weight:   700;
    font-size:     clamp(38px, 4.6vw, 58px);
    line-height:   1.05;
    margin:        12px 0 14px;
    color:         var(--cp-graphite);
    text-wrap:     balance;
}
.cp-art__lede { font-size: 17.5px; line-height: 1.6; color: var(--cp-n-600); margin: 0 0 22px; max-width: 560px; text-wrap: pretty; }

.cp-art__hero-image { margin: 0; }
.cp-art__hero-image img {
    width:         100%;
    height:        auto;
    aspect-ratio:  16 / 11;
    object-fit:    cover;
    border-radius: 24px;
    border:        5px solid #fff;
    box-shadow:    0 16px 36px rgba(59, 42, 36, .14);
    display:       block;
}

.cp-art__byline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: 14px; color: var(--cp-n-600); }
.cp-art__auteur { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--cp-graphite); text-decoration: none; }
.cp-art__auteur:hover { color: var(--cp-coral); }
.cp-art__auteur img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: center 30%; border: 3px solid #fff; box-shadow: var(--cp-shadow-sm); }
.cp-art__sep { color: var(--cp-n-300); }

.cp-art__pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cp-art__pill {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    height:          30px;
    padding:         0 12px;
    border-radius:   var(--cp-r-pill);
    background:      #fff;
    font-size:       13px;
    font-weight:     700;
    color:           var(--cp-graphite);
    box-shadow:      var(--cp-shadow-sm);
    text-decoration: none;
}
.cp-art__pill--teal { background: var(--cp-teal-100); color: var(--cp-teal-700); }

/* ── Tuiles « En bref » ──────────────────────────────────────────────────────── */

.cp-art__facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 20px 0 36px; }
.cp-art__facts--3 { grid-template-columns: repeat(3, 1fr); }
.cp-art__facts--2 { grid-template-columns: repeat(2, 1fr); }
.cp-art__facts--1 { grid-template-columns: 1fr; }
.cp-art__facts-label { grid-column: 1 / -1; margin: -4px 0 -6px; }
.cp-art__fact {
    display:       flex;
    gap:           14px;
    align-items:   flex-start;
    background:    #fff;
    border:        1px solid var(--cp-n-200);
    border-radius: var(--cp-r-lg);
    padding:       18px 20px;
    box-shadow:    var(--cp-shadow-sm);
}
.cp-art__fact p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--cp-n-600); }
.cp-art__fact-ico {
    flex:          none;
    min-width:     44px;
    height:        44px;
    padding:       0 8px;
    border-radius: 14px;
    display:       grid;
    place-items:   center;
    font:          700 20px/1 'Caveat', cursive;
    white-space:   nowrap;
}
.cp-art__fact-ico--coral { background: var(--cp-coral-100); color: var(--cp-coral); }
.cp-art__fact-ico--teal  { background: var(--cp-teal-100);  color: var(--cp-teal-700); }
.cp-art__fact-ico--peach { background: var(--cp-peach);     color: var(--cp-orange); }

/* ── Colonnes ────────────────────────────────────────────────────────────────── */

.cp-art__cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; margin-top: 8px; }
.cp-art__main { max-width: 760px; }
.cp-art__side { position: sticky; top: 24px; display: grid; gap: 18px; }

/* ── Corps du texte ──────────────────────────────────────────────────────────── */

.cp-art .entry-content p { margin: 0 0 1.2em; }
.cp-art .entry-content > p:first-of-type { font-size: 19px; line-height: 1.65; color: var(--cp-n-600); }
.single-post .cp-art .entry-content h2 {
    font-family:       'Lato', sans-serif;
    font-weight:       700;
    font-size:         28px;
    line-height:       1.25;
    margin:            2.4em 0 .7em;
    scroll-margin-top: 24px;
}
.cp-art .entry-content h2::before { content: ""; display: block; width: 36px; height: 4px; border-radius: 4px; background: var(--cp-coral); margin-bottom: 14px; }
.single-post .cp-art .entry-content h3 { font-size: 20px; margin: 1.8em 0 .6em; }
.single-post .cp-art .entry-content h4 { font-size: 17px; margin: 1.5em 0 .5em; }
.cp-art .entry-content ul, .cp-art .entry-content ol { padding-left: 1.3em; margin: 0 0 1.3em; }
.cp-art .entry-content li { margin: .35em 0; }
.cp-art .entry-content li::marker { color: var(--cp-coral); font-weight: 700; }
.cp-art .entry-content a { color: var(--cp-teal-700); text-decoration: underline; text-decoration-color: rgba(91, 168, 160, .4); text-underline-offset: 3px; }
.cp-art .entry-content a:hover { color: var(--cp-coral); }
.cp-art .entry-content figure { margin: 2em 0; }
.cp-art .entry-content .wp-block-image img { border-radius: var(--cp-r-lg); width: 100%; }

/* Citations en exergue : carte pêche à arc */
.cp-art .entry-content .wp-block-quote,
.cp-art .entry-content blockquote {
    position:      relative;
    overflow:      hidden;
    margin:        2em 0;
    padding:       22px 28px 22px 32px;
    border:        1px solid #F3DDD0;
    border-left:   1px solid #F3DDD0;
    border-radius: var(--cp-r-xl);
    background:    linear-gradient(150deg, #fff 0%, var(--cp-hero-b) 100%);
    box-shadow:    var(--cp-shadow-lg);
    font-style:    italic;
    font-size:     17px;
}
.cp-art .entry-content blockquote::after  { content: ""; position: absolute; width: 180px; height: 180px; border-radius: 50%; border: 2px solid rgba(212, 85, 58, .14); right: -60px; top: -80px; }
.cp-art .entry-content blockquote::before { content: "“"; position: absolute; left: 18px; top: -6px; font: 700 72px/1 'Caveat', cursive; color: var(--cp-coral); opacity: .45; }
.cp-art .entry-content blockquote p:last-child { margin: 0; }

/* Sommaire replié : mobile seulement (la colonne porte le vrai sommaire) */
.cp-art .cp-toc--mobile { display: none; }

/* Questions fréquentes */
.cp-art .wp-block-details { padding: 14px 18px; border-radius: 12px; transition: box-shadow .2s; }
.cp-art .wp-block-details[open] { box-shadow: var(--cp-shadow-md); border-color: var(--cp-teal-200); }
.cp-art .wp-block-details summary { display: flex; justify-content: space-between; gap: 16px; align-items: center; font-size: 16px; }
.cp-art .wp-block-details summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--cp-peach); color: var(--cp-coral); display: grid; place-items: center; font-size: 18px; transition: transform .2s; }
.cp-art .wp-block-details[open] summary::after { transform: rotate(45deg); }

/* Sources */
.cp-art .cp-sources { margin-top: 48px; padding: 26px 28px; border: 0; border-radius: var(--cp-r-lg); background: var(--cp-peach); }
.single-post .cp-art .cp-sources h2 { font-size: 14px !important; letter-spacing: .12em; text-transform: uppercase; color: var(--cp-teal-700); margin: 0 0 14px !important; }
.cp-art .cp-sources h2::before { display: none; }
.cp-art .cp-sources ol { margin: 0; padding-left: 1.2em; }
.cp-art .cp-sources li { font-size: 14px; margin: 6px 0; }

/* Appel à l'action final : bande corail dégradée, comme l'accueil */
.cp-art .cp-article-cta {
    position:              relative;
    overflow:              hidden;
    display:               grid;
    grid-template-columns: 1fr auto;
    gap:                   24px;
    align-items:           center;
    margin:                40px 0 0;
    padding:               34px 36px;
    border-radius:         var(--cp-r-xl);
    background:            linear-gradient(135deg, var(--cp-coral) 0%, var(--cp-orange) 100%);
    color:                 #fff;
}
.cp-art .cp-article-cta::after { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); right: -80px; top: -120px; }
.cp-art .cp-article-cta__titre { font: 700 38px/1 'Caveat', cursive; margin: 0 0 8px; color: #fff; }
.cp-art .cp-article-cta__texte { margin: 0; max-width: 560px; color: rgba(255, 255, 255, .9); font-size: 15px; }
.cp-art .cp-article-cta__bouton {
    position:        relative;
    z-index:         1;
    display:         inline-flex;
    align-items:     center;
    height:          48px;
    padding:         0 24px;
    border-radius:   var(--cp-r-pill);
    background:      #fff;
    color:           var(--cp-coral) !important;
    font-weight:     700;
    font-size:       15px;
    text-decoration: none !important;
    white-space:     nowrap;
}
.cp-art .cp-article-cta__bouton:hover { background: var(--cp-cream); }

/* Boîte auteur (balisage dans functions.php, cp_author_box) */
.cp-art .cp-author-box { display: flex; gap: 18px; align-items: center; margin-top: 28px; padding: 22px 24px; border-radius: var(--cp-r-lg); background: #fff; border: 1px solid var(--cp-n-200); }
.cp-art .cp-author-box__avatar { flex: none; }
.cp-art .cp-author-box__avatar .cp-author-avatar { display: block; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: center 30%; border: 4px solid var(--cp-peach); }
.cp-art .cp-author-box__content { flex: 1; min-width: 0; }
.cp-art .cp-author-box__name { display: block; font: 700 26px/1 'Caveat', cursive; color: var(--cp-graphite); text-decoration: none; margin-bottom: 4px; }
.cp-art .cp-author-box__name:hover { color: var(--cp-coral); }
.cp-art .entry-content .cp-author-box__bio { font-size: 14px; color: var(--cp-n-600); margin: 0; }

/* L'appel à l'action est dans .entry-content : on repasse devant la règle des paragraphes */
.cp-art .entry-content .cp-article-cta__titre { margin: 0 0 8px; }
.cp-art .entry-content .cp-article-cta__texte { margin: 0; }
.cp-art .entry-content .cp-sources li { margin: 6px 0; }

/* Emplacements publicitaires : rien n'est réservé quand ils sont vides */
.cp-art-ad { margin: 24px 0; text-align: center; }
.cp-art__pub-haut { max-width: 760px; margin: 0 0 8px; }
.cp-art-ad--sidebar_haut, .cp-art-ad--sidebar_bas { margin: 0; }

/* Commentaires */
.cp-art .comments-area { margin-top: 48px; }

/* ── Colonne ─────────────────────────────────────────────────────────────────── */

.cp-art-card { background: #fff; border: 1px solid var(--cp-n-200); border-radius: var(--cp-r-lg); padding: 22px; box-shadow: var(--cp-shadow-sm); }
.single-post .cp-art-card__titre { font-family: 'Lato', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cp-n-500); margin: 0 0 14px; }

.cp-art-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: t; }
.cp-art-toc li { counter-increment: t; display: flex; gap: 12px; align-items: flex-start; padding: 7px 0; font-size: 14px; line-height: 1.4; border-top: 1px solid var(--cp-n-200); margin: 0; }
.cp-art-toc li:first-child { border-top: 0; padding-top: 0; }
.cp-art-toc li::before { content: counter(t); flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--cp-peach); color: var(--cp-coral); font: 700 16px/22px 'Caveat', cursive; text-align: center; }
.cp-art-toc a { color: var(--cp-graphite); text-decoration: none; }
.cp-art-toc a:hover { color: var(--cp-coral); }

.cp-art-book { position: relative; overflow: hidden; border: 1px solid #F3DDD0; border-radius: var(--cp-r-xl); background: linear-gradient(150deg, #fff 0%, var(--cp-hero-b) 100%); box-shadow: var(--cp-shadow-lg); padding: 26px; }
.cp-art-book::after { content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%; border: 2px solid rgba(212, 85, 58, .14); right: -70px; top: -90px; }
.single-post .cp-art-book__titre { font: 700 30px/1 'Caveat', cursive; color: var(--cp-graphite); margin: 0 0 6px; }
.cp-art-book p { font-size: 14px; color: var(--cp-n-600); margin: 0 0 16px; position: relative; }

.cp-art-btn {
    position:        relative;
    z-index:         1;
    display:         inline-flex;
    justify-content: center;
    align-items:     center;
    gap:             10px;
    width:           100%;
    height:          48px;
    padding:         0 24px;
    border-radius:   var(--cp-r-pill);
    background:      var(--cp-coral);
    color:           #fff !important;
    font-weight:     700;
    font-size:       15px;
    text-decoration: none !important;
    transition:      transform .2s, box-shadow .2s, background .2s;
}
.cp-art-btn:hover { background: var(--cp-coral-700); transform: translateY(-2px); box-shadow: var(--cp-shadow-md); }
.cp-art-btn__arrow { transition: transform .2s; }
.cp-art-btn:hover .cp-art-btn__arrow { transform: translateX(3px); }

.cp-art-lire { display: grid; gap: 4px; }
.cp-art-lire .cp-art-card__titre { margin-bottom: 8px; }
.cp-art-lire__item { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: center; text-decoration: none; color: inherit; padding: 8px; margin: 0 -8px; border-radius: 12px; transition: background .2s; }
.cp-art-lire__item:hover { background: var(--cp-peach); }
.cp-art-lire__item img, .cp-art-lire__vide { width: 84px; height: 64px; object-fit: cover; border-radius: 8px; background: var(--cp-peach); display: block; }
.cp-art-lire__texte { display: grid; gap: 2px; min-width: 0; }
.cp-art-lire__cat { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-teal-700); }
.cp-art-lire__titre { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--cp-graphite); }
.cp-art-lire__item:hover .cp-art-lire__titre { color: var(--cp-coral); }
.cp-art-lire__meta { font-size: 12px; color: var(--cp-muted); }

/* ── Mobile ──────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .cp-art { padding: 0 16px 40px; }
    .cp-art__hero { grid-template-columns: 1fr; padding: 24px 20px 26px; border-radius: 24px; gap: 20px; }
    .cp-art__hero-fav { top: 12px; right: 12px; }
    .cp-art__hero-image { order: -1; }
    .cp-art__hero-image img { aspect-ratio: 16 / 10; }
    .cp-art__facts, .cp-art__facts--3, .cp-art__facts--2 { grid-template-columns: 1fr; gap: 10px; margin-bottom: 28px; }
    .cp-art__cols { grid-template-columns: 1fr; gap: 28px; }
    .cp-art__side { position: static; }
    .cp-art-toc, .cp-art-ad--sidebar_haut, .cp-art-ad--sidebar_bas { display: none; }
    .cp-art .cp-toc--mobile { display: block; }
    .single-post .cp-art .entry-content h2 { font-size: 24px; }
    .cp-art .cp-article-cta { grid-template-columns: 1fr; padding: 28px 24px; }
    .cp-art .cp-article-cta__bouton { justify-content: center; }
}

/* ── Commentaires (gabarit GeneratePress, habillé aux jetons) ────────────────── */

.cp-art__commentaires { max-width: 760px; }
.cp-art .comments-area { margin-top: 32px; padding: 26px 28px; border-radius: var(--cp-r-lg); background: #fff; border: 1px solid var(--cp-n-200); }
.single-post .cp-art .comments-area .comments-title,
.single-post .cp-art .comments-area .comment-reply-title { font-family: 'Lato', sans-serif; font-size: 20px; font-weight: 700; margin: 0 0 14px; }
.cp-art .comments-area .comment-notes,
.cp-art .comments-area .logged-in-as { font-size: 13px; color: var(--cp-n-500); }
.cp-art .comments-area label { font-size: 13px; font-weight: 700; }
.cp-art .comments-area textarea,
.cp-art .comments-area input[type="text"],
.cp-art .comments-area input[type="email"],
.cp-art .comments-area input[type="url"] { width: 100%; border: 1px solid var(--cp-n-300); border-radius: 12px; padding: 10px 14px; background: var(--cp-cream); font-family: 'Lato', sans-serif; font-size: 15px; }
.cp-art .comments-area input[type="submit"] { background: var(--cp-coral); color: #fff; border: 0; border-radius: var(--cp-r-pill); padding: 0 24px; height: 48px; font-weight: 700; cursor: pointer; }
.cp-art .comments-area input[type="submit"]:hover { background: var(--cp-coral-700); }
.cp-art .comments-area .comment-list { list-style: none; margin: 0 0 24px; padding: 0; }
.cp-art .comments-area .comment-list .comment { padding: 16px 0; border-top: 1px solid var(--cp-n-200); }
.cp-art .comments-area .comment-author .avatar { border-radius: 50%; }

/* ── « Enregistrer l'article » (favoris relpro) ───────────────────────────────────── */

/* En haut à droite de la carte d'en-tête, au-dessus de l'image. */
.cp-art__hero-fav { position: absolute; top: 18px; right: 18px; z-index: 3; }

.cp-fav { display: inline-flex; align-items: center; gap: 8px; text-decoration: none !important; cursor: pointer; transition: background .15s, color .15s, transform .15s; }
.cp-fav--texte { height: 34px; padding: 0 14px; border-radius: var(--cp-r-pill); background: #fff; border: 1px solid transparent; color: var(--cp-coral) !important; font: 700 13px 'Lato', sans-serif; box-shadow: var(--cp-shadow-sm); }
.cp-fav--texte:hover { border-color: var(--cp-coral); transform: translateY(-1px); }
.cp-fav--texte.is-active { background: var(--cp-coral-100); }
.cp-fav svg { flex: none; }
.cp-fav--icone { width: 36px; height: 36px; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--cp-coral) !important; border: 0; box-shadow: var(--cp-shadow-sm); }
.cp-fav--icone:hover { transform: scale(1.08); }
.cp-fav--apercu { cursor: help; opacity: .75; }