/* ==========================================================================
   SQUELETTE DE LECTURE PARTAGE (namespace .cdp-read*).
   Source de verite unique de la mise en page « 2 colonnes + barre laterale »
   commune au template « Lecon / Chapitre » (templates/lecon.html) ET au
   template des articles (templates/single.html).

   Charge par cdp_enqueue_styles() sur les lecons ET les articles, et via
   add_editor_style() (rendu correct dans l'Editeur du site).

   - Le DESKTOP (>= 1024px) est la reference ; l'empilement se fait sous
     @media (max-width: 1023.98px), coherent avec le breakpoint du site.
   - Le SPECIFIQUE au type de contenu vit dans lecon.css / article.css :
     * lecon.css   : section basse « Recevez », masquage de l'aside en mobile.
     * article.css : image a la une, meta, chips, articles lies, sommaire,
                     commentaires, aside conservee sous le contenu en mobile.
   - Le POSITIONNEMENT sticky de l'aside est defini par chaque template (la
     lecon rend le CTA sticky ; l'article rend le sommaire sticky).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Neutralise le padding global de Gutenberg (var(--wp--custom--spacing--gap),
   ~30px L/R via has-global-padding, cf. useRootPaddingAwareAlignments) sur le
   <main> et la bande base. Sans ca, le contenu est retrait de 30px comme le
   corrige deja global.css pour .entry-content / .wp-block-post-content.
   L'inset horizontal du contenu reste gere uniquement par .cdp-read-inner.
   -------------------------------------------------------------------------- */
.cdp-read.has-global-padding,
.cdp-read-bg.has-global-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* --------------------------------------------------------------------------
   Bande de fond « base » (comme l'accueil : couleur base, partition visible
   dans les marges au-dela de 1280px). Contient tout le contenu de la page.
   -------------------------------------------------------------------------- */
.cdp-read-bg {
    padding-top: clamp(28px, 5vw, 56px);
    padding-bottom: 0;   /* pas d'espace avant le footer */
}
/* Retrait horizontal du contenu par rapport aux bords de la bande base. */
.cdp-read-inner {
    padding-inline: clamp(20px, 5vw, 64px);
}

/* --------------------------------------------------------------------------
   Fil d'ariane ([cdp_breadcrumb] cote lecon, [cdp_post_breadcrumb] cote article)
   -------------------------------------------------------------------------- */
.cdp-breadcrumb {
    margin: 0 0 24px;
    font-family: "Figtree", sans-serif;
    font-size: 0.9rem;
    color: var(--wp--preset--color--contrast-muted, rgba(36, 26, 22, 0.67));
}
.cdp-breadcrumb__link {
    color: var(--wp--preset--color--contrast-muted, rgba(36, 26, 22, 0.67));
    text-decoration: none;
}
.cdp-breadcrumb__link:hover,
.cdp-breadcrumb__link:focus-visible {
    text-decoration: underline;
}
.cdp-breadcrumb__current {
    color: var(--wp--preset--color--contrast, #241A16);
}
/* Meme taille pour le lien parent et la page courante (le courant paraissait
   plus petit). */
.cdp-breadcrumb .cdp-breadcrumb__link,
.cdp-breadcrumb .cdp-breadcrumb__current {
    font-size: 0.95rem;
    line-height: 1.4;
}
.cdp-breadcrumb__sep {
    margin: 0 8px;
}

/* --------------------------------------------------------------------------
   Colonnes
   -------------------------------------------------------------------------- */
.cdp-read__cols {
    gap: 32px;
    align-items: flex-start;   /* les colonnes ne s'etirent pas -> sticky OK */
}

/* --------------------------------------------------------------------------
   Carte de contenu (gauche)
   -------------------------------------------------------------------------- */
.cdp-read__card {
    background: var(--wp--preset--color--paper, #FCFCFC);
    border: 1px solid var(--wp--preset--color--contrast, #241A16);
    border-radius: 20px;
    box-shadow: 3px 4px 0 0 var(--wp--preset--color--contrast, #241A16);
    padding: clamp(24px, 4vw, 48px);
}
.cdp-read__card > .wp-block-post-title {
    margin-top: 0;
    font-family: "Playfair Display", serif;
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    line-height: 1.15;
    color: var(--wp--preset--color--contrast, #241A16);
}
/* (Tailles des titres de contenu h2/h3 -> gerees a la source dans global.css
   section 11, sur .wp-block-post-content, pour la parite front/editeur.) */

/* Liens de contenu : beaucoup de liens dans ces pages -> on allege (plus de
   soulignement systematique). Couleur primaire + soulignement au survol.
   (Le fil d'ariane, la nav et les boutons ont leurs propres styles.) */
.cdp-read__card :is(p, li) a {
    color: var(--wp--preset--color--primary, #9B423E);
    text-decoration: none;
}
.cdp-read__card :is(p, li) a:hover,
.cdp-read__card :is(p, li) a:focus-visible {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Navigation Precedent / Suivant
   ([cdp_lecon_nav] cote lecon, [cdp_post_nav] cote article)
   -------------------------------------------------------------------------- */
.cdp-read__nav {
    display: flex;
    gap: 20px;
    margin-top: 28px;
}
.cdp-read__nav-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 22px;
    background: var(--wp--preset--color--paper, #FCFCFC);
    border: 1px solid var(--wp--preset--color--contrast, #241A16);
    border-radius: 14px;
    box-shadow: 2px 3px 0 0 var(--wp--preset--color--contrast, #241A16);
    text-decoration: none;
    transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.cdp-read__nav-item:hover,
.cdp-read__nav-item:focus-visible {
    transform: translate(1px, 2px);
    box-shadow: 1px 1px 0 0 var(--wp--preset--color--contrast, #241A16);
}
.cdp-read__nav-item--next {
    text-align: right;
}
.cdp-read__nav-item.is-empty {
    visibility: hidden;
    box-shadow: none;
    border: none;
}
.cdp-read__nav-dir {
    font-family: "Figtree", sans-serif;
    font-size: 0.82rem;
    color: var(--wp--preset--color--contrast-muted, rgba(36, 26, 22, 0.67));
}
.cdp-read__nav-title {
    font-family: "Figtree", sans-serif;
    font-weight: 700;
    color: var(--wp--preset--color--contrast, #241A16);
}

/* --------------------------------------------------------------------------
   Encart auteur (pattern frost-child/lecon-author)
   -------------------------------------------------------------------------- */
.cdp-author {
    align-items: center;
    gap: 14px;
    margin-top: 28px;
}
.cdp-author__avatar {
    flex: 0 0 auto;
    margin: 0;
}
.cdp-author__avatar img {
    border-radius: 50%;
}
.cdp-author__name {
    font-family: "Figtree", sans-serif;
}
.cdp-author__meta {
    line-height: 1.35;
}

/* --------------------------------------------------------------------------
   Carte CTA de la barre laterale (pattern frost-child/lecon-sidebar-cta).
   VISUEL uniquement ; le positionnement sticky est defini par chaque template
   (voir lecon.css / article.css).
   -------------------------------------------------------------------------- */
.cdp-read__aside .cdp-lecon-cta {
    background: var(--wp--preset--color--secondary, #F5F0E6);
    border: 1px solid var(--wp--preset--color--contrast, #241A16);
    border-radius: 20px;
    box-shadow: 3px 4px 0 0 var(--wp--preset--color--contrast, #241A16);
    padding: 26px;
}
.cdp-lecon-cta__img {
    margin: 0 0 16px;
}
.cdp-lecon-cta__img img {
    width: 100%;
    height: auto;
}
.cdp-lecon-cta__title {
    margin: 0 0 10px;
    font-family: "Playfair Display", serif;
    font-size: clamp(1.4rem, 2vw, 1.7rem);
    line-height: 1.15;
    color: var(--wp--preset--color--contrast, #241A16);
}
.cdp-lecon-cta__text {
    margin: 0 0 18px;
    font-family: "Figtree", sans-serif;
    font-size: 0.95rem;
    color: var(--wp--preset--color--contrast-muted, rgba(36, 26, 22, 0.67));
}
.cdp-lecon-cta__rating {
    margin-top: 14px;
    align-items: center;
}
.cdp-lecon-cta__rating img {
    display: block;
}

/* --------------------------------------------------------------------------
   Bande CTA basse « Recevez gratuitement » (pattern frost-child/lecon-cta-recevez)
   Utilisee en bas des LECONS et des ARTICLES (pleine largeur de la bande base).
   -------------------------------------------------------------------------- */
.cdp-lecon-recevez {
    margin-top: clamp(32px, 5vw, 56px);
    /* Pas de "box" : bande a ras, pleine largeur. */
    border-radius: 0;
}
.cdp-lecon-recevez :is(h2, h2.wp-block-heading) {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    line-height: 1.15;
}

/* ==========================================================================
   RESPONSIVE (< 1024px) : empilement des colonnes.
   (La visibilite de l'aside une fois empilee depend du type de contenu :
    lecon -> masquee ; article -> conservee. Voir lecon.css / article.css.)
   ========================================================================== */
@media (max-width: 1023.98px) {

    /* Empilement des colonnes (le site bascule a 1024, pas au 782 par defaut). */
    .cdp-read__cols {
        flex-direction: column !important;
        gap: 28px;
    }
    .cdp-read__cols > .wp-block-column {
        flex-basis: 100% !important;
    }
}

@media (max-width: 600px) {
    .cdp-read__nav {
        flex-direction: column;
        gap: 14px;
    }
    .cdp-read__nav-item--next {
        text-align: left;
    }
}