/* ============================================
   Palette officielle Papir V2 — Orthopus
   ============================================
   --col_1: #FFFFFF — Fond blanc principal · Texte sur fond dark
   --col_2: #212233 — Texte principal · Fond dark · Borders
   --col_3: #B399FF — Accent violet · Pilule catégorie · États actifs
   --col_4: #92FFAC — Accent vert · Pilule "déjà disponible"
   --col_5: #E1FFF9 — Accent menthe clair · Ombres / fonds doux

   Règles de cohérence :
   - Sur fond blanc (--col_1) → texte --col_2
   - Sur fond dark (--col_2) → texte --col_1
   - Pas de var(--col_6), --col_7, --col_8 : INEXISTANTES dans la palette
   ============================================ */

/**
 * Papir V2 — Styles template article (single.php)
 *
 * Chargé conditionnellement sur is_singular('post').
 * Consomme les tokens de var.css — jamais de valeurs brutes pour
 * les couleurs, tailles de police ou espacements.
 */

/* ============================================
   Container partagé pour le single article
   ============================================ */
.wp-singular #page{
    background:var(--col_2);
}
.single-article__body{
    background:var(--col_1);
}
.single-article__container {
    max-width: var(--medium_width);
    margin-inline: auto;
    padding-inline: var(--global-edge-spacing);
    
}
.single-article__related  .single-article__container {
 padding: var(--global-edge-spacing);
    box-shadow: rgb(225, 255, 249) 15px 15px 0px 0px;

}
/* ============================================
   Breadcrumb
   ============================================ */

.single-article__breadcrumb {
    padding-block: var(--global-sm-spacing);
    font-size: var(--font-size-xs);
    color: var(--col_3);
}

.single-article__breadcrumb a {
    text-decoration: none;
    color: var(--col_1);
}

.single-article__breadcrumb a:hover {
    text-decoration: underline;
    color: var(--col_3 );
}

/* ============================================
   Header article
   ============================================ */

.single-article__header {
    padding-block: var(--global-lg-spacing) var(--global-md-spacing);
    text-align: center;
    background: var(--col_2);
    
    position: relative;
    overflow: hidden;
    z-index: 0; /* crée un stacking context pour que z-index:-1 du wave reste dans le header */
    --header-wave-fill: var(--col_1);
    --header-wave-height: 180px;
}

.single-article__categories {
    display: flex;
    justify-content: center;
    gap: var(--global-xs-spacing);
    margin-bottom: var(--global-sm-spacing);
}

.single-article__category {
    display: inline-block;
    padding: 0.3em 0.8em;
    font-size: var(--font-size-xxs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--letter-spacing);
    text-transform: uppercase;
    text-decoration: none;
    background: var(--col_4);
    border: solid 2px var(--col_2);
    border-radius: 999px;
    color: var(--col_2);
    transition: opacity 0.2s;
}

.single-article__category:hover {
    opacity: 0.7;
}

.single-article__title {
    font-size: var(--font-size-xxxl);
    font-weight: var(--fw-bold);
    line-height: var(--line-height-tight);
    margin-block: 0 var(--global-sm-spacing);
    max-width: 20ch;
    margin-inline: auto;
    color:var(--col_1);
}

.single-article__excerpt {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    color: var(--col_1);
    max-width: 60ch;
    margin-inline: auto;
    margin-block: 0 var(--global-md-spacing);
}

.single-article__excerpt p {
    margin: 0;
}

.single-article__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--global-xs-spacing);
    font-size: var(--font-size-sm);
    color: var(--col_3);
}

.single-article__meta a {
    color: inherit;
    text-decoration: none;
    font-weight: var(--fw-semibold);
}

.single-article__meta a:hover {
    text-decoration: underline;
}

.single-article__meta-sep {
    opacity: 0.5;
}

/* ============================================
   Image mise en avant
   ============================================ */

.single-article__featured-image {
    max-width: var(--medium_width);
    margin: var(--global-lg-spacing) auto 0;
    padding-inline: var(--global-edge-spacing);
}

.single-article__featured-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 40px;

    box-shadow: rgb(225, 255, 249) 15px 15px 0px 0px;
}


.single-article__featured-caption {
    margin-top: var(--global-xs-spacing);
    font-size: var(--font-size-xs);
    color: var(--col_3);
    text-align: center;
    font-style: italic;
}

/* ============================================
   Wave séparateur — bas du header
   --header-wave-fill : couleur de remplissage du SVG.
   Doit correspondre au fond de la section qui suit le header.
   À surcharger dans styles/custom.css si besoin.
   --header-wave-height : hauteur apparente de la vague.
   ============================================ */

.single-article__header-wave {
    position: absolute;
    bottom: 0;
    left: -1px;
    width: calc(100% + 2px); /* +2px évite les gaps d'antialiasing sur les bords */
    line-height: 0;
    z-index: -1; /* derrière le contenu du header, devant son fond --col_2 */
    border-bottom: solid 150px var(--col_1);
}

.single-article__header-wave svg {
    display: block;
    width: 100%;
    height: var(--header-wave-height, 60px);
    fill: var(--header-wave-fill, var(--col_1));
}

/* ============================================
   Responsive — header
   ============================================ */

@media (max-width: 768px) {
    .single-article__title {
        font-size: var(--font-size-xxl);
    }

    .single-article__excerpt {
        font-size: var(--font-size-md);
    }
}

/* ============================================
   Body article — layout 2 colonnes
   --header-height n'est pas déclaré dans var.css.
   Définir cette variable dans Kadence ou custom.css
   une fois la hauteur réelle du header mesurée.
   Valeur de fallback : 80px.
   ============================================ */

.single-article__body {
    padding-block: var(--global-lg-spacing);
}

.single-article__body .single-article__container {
    display: grid;
    gap: var(--global-md-spacing);
    align-items: start;
}

.single-article__body--with-toc .single-article__container {
    grid-template-columns: 280px minmax(0, 1fr);
}

.single-article__body--no-toc .single-article__container {
    grid-template-columns: minmax(0, 72ch);
    justify-content: center;
}

/* ============================================
   TOC — colonne gauche, sticky
   ============================================ */

.single-article__toc {
    position: sticky;
    top: calc(180px + var(--global-sm-spacing));
    max-height: calc(100vh - var(--header-height, 80px) - var(--global-md-spacing));
    overflow-y: auto;
    font-size: var(--font-size-sm);
}

/* Desktop : le <summary> est masqué, le sommaire est toujours visible */
.single-article__toc-summary {
    display: none;
}

.single-article__toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.single-article__toc li {
    margin-bottom: var(--global-xs-spacing);
}

.single-article__toc a {
    display: block;
    padding: 0.25em 0 0.25em 0.75em;
    color: var(--col_2);
    text-decoration: none;
    line-height: var(--line-height-snug);
    border-left: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}

.single-article__toc a:hover,
.single-article__toc a:focus {
    color: var(--col_3);
    border-left-color: var(--col_3);
    outline: none;
}

.single-article__toc a.is-active {
    color: var(--col_3);
    border-left-color: var(--col_3);
    font-weight: var(--fw-semibold);
}

/* ============================================
   Contenu article — colonne droite
   ============================================ */

.single-article__content {
    max-width: 72ch;
    font-size: var(--font-size-md);
    line-height: var(--line-height-relaxed);
}

.single-article__content > * + * {
    margin-top: var(--global-sm-spacing);
}

.single-article__content h2 {
    margin-top: var(--global-lg-spacing);
    margin-bottom: var(--global-sm-spacing);
    scroll-margin-top: calc(var(--header-height, 80px) + var(--global-sm-spacing));
}

.single-article__content h3 {
    margin-top: var(--global-md-spacing);
    margin-bottom: var(--global-xs-spacing);
    scroll-margin-top: calc(var(--header-height, 80px) + var(--global-sm-spacing));
}

/* Blocs alignfull : brisent le container 72ch pour aller pleine largeur viewport */
.single-article__content .alignfull {
    max-width: none;
    width: calc(100vw - var(--scrollbar-width, 0px));
    margin-inline: calc(50% - 50vw + var(--scrollbar-width, 0px) / 2);
}

/* Blocs alignwide : s'élargissent jusqu'à --medium_width */
.single-article__content .alignwide {
    max-width: none;
    width: min(calc(100vw - var(--scrollbar-width, 0px)), var(--medium_width));
    margin-inline: auto;
}

/* ============================================
   TOC — Desktop (≥ 1025px) : sticky colonne gauche
   Force l'affichage du contenu indépendamment de l'état [open] du <details>
   ============================================ */

@media (min-width: 1025px) {
    .single-article__toc-details > .single-article__toc-content {
        display: block !important;
    }

    .single-article__toc-summary {
        display: none;
    }
}

/* ============================================
   TOC — Tablet (768px – 1024px) : collapsible inline en haut du contenu
   ============================================ */

@media (min-width: 768px) and (max-width: 1024px) {
    .single-article__body--with-toc .single-article__container {
        grid-template-columns: minmax(0, 1fr);
    }

    .single-article__toc {
        position: static;
        max-height: none;
        overflow: visible;
        margin-bottom: var(--global-md-spacing);
        padding: var(--global-sm-spacing);
        background: var(--col_5);
        border-radius: 4px;
    }

    .single-article__toc-summary {
        display: block;
        cursor: pointer;
        font-weight: var(--fw-semibold);
        font-size: var(--font-size-md);
        padding: 0.5em 1.5em 0.5em 0;
        list-style: none;
        position: relative;
    }

    .single-article__toc-summary::-webkit-details-marker {
        display: none;
    }

    .single-article__toc-summary::after {
        content: '+';
        position: absolute;
        right: 0.5em;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.4em;
        line-height: 1;
    }

    .single-article__toc-details[open] .single-article__toc-summary::after {
        content: '−';
    }

    .single-article__toc-content {
        margin-top: var(--global-xs-spacing);
    }

    .single-article__content {
        max-width: none;
    }
}

/* ============================================
   TOC — Mobile (≤ 767px) : fixed bottom, full width
   Ouvert par défaut via l'attribut [open] côté PHP.
   ============================================ */

@media (max-width: 767px) {
    /* Layout 1 colonne */
    .single-article__body--with-toc .single-article__container {
        grid-template-columns: minmax(0, 1fr);
    }

    .single-article__content {
        max-width: none;
    }

    /* Barre TOC fixée en bas du viewport */
    .single-article__toc {
        /*position: fixed;*/
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        margin: 0;
        padding: 0;
        max-height: none;
        overflow: visible;
        background: transparent;
        border-radius: 0;
        font-size: var(--font-size-sm);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    }

    /* Barre cliquable : fond --col_3, texte --col_2 */
    .single-article__toc-summary {
        display: block;
        background: var(--col_3);
        color: var(--col_2);
        padding: 0.875em var(--global-edge-spacing);
        margin: 0;
        font-size: var(--font-size-md);
        font-weight: var(--fw-semibold);
        list-style: none;
        cursor: pointer;
        position: relative;
    }

    .single-article__toc-summary::-webkit-details-marker {
        display: none;
    }

    .single-article__toc-summary::after {
        content: '−';
        position: absolute;
        right: var(--global-edge-spacing);
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.4em;
        line-height: 1;
        color: var(--col_2);
    }

    .single-article__toc-details:not([open]) .single-article__toc-summary::after {
        content: '+';
    }

    /* Panneau déplié : fond --col_2, scroll interne jusqu'à 60vh */
    .single-article__toc-content {
        background: var(--col_2);
        max-height: 60vh;
        overflow-y: auto;
        padding: var(--global-sm-spacing) var(--global-edge-spacing);
        margin: 0;
        -webkit-overflow-scrolling: touch;
    }

    .single-article__toc-details:not([open]) .single-article__toc-content {
        display: none;
    }

    .single-article__toc-content ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .single-article__toc li {
        margin-bottom: 0;
    }

    /* Liens : --col_1 par défaut */
    .single-article__toc a {
        color: var(--col_1);
        border-left-color: transparent;
        padding: 0.6em 0.75em;
    }

    /* Actif, hover, focus : --col_3 */
    .single-article__toc a:hover,
    .single-article__toc a:focus,
    .single-article__toc a.is-active {
        color: var(--col_3);
        border-left-color: var(--col_3);
        font-weight: var(--fw-semibold);
    }

    /* Compensation : la barre fixe (~50–60px) ne doit pas masquer le pied d'article */
    body.single-post {
       /* padding-bottom: 64px;*/
    }
}

/* ============================================
   Navigation prev / next
   ============================================ */

.single-article__post-nav {
    padding-block: var(--global-md-spacing);
    border-top: 1px solid var(--col_5);
    background:var(--col_1);
}

.single-article__post-nav-inner {
    display: flex;
    gap: var(--global-md-spacing);
    justify-content: space-between;
    align-items: stretch;
}

.single-article__post-nav-prev,
.single-article__post-nav-next {
    flex: 1;
    min-width: 0;
}

.single-article__post-nav-next {
    text-align: right;
}

.single-article__post-nav-link {
    display: flex;
    flex-direction: column;
    gap: var(--global-xs-spacing);
    padding: var(--global-sm-spacing);
    color: var(--col_2);
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.2s;
    height: 100%;
}

.single-article__post-nav-link:hover {
    background: var(--col_5);
}

.single-article__post-nav-label {
    font-size: var(--font-size-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing);
    color: var(--col_3);
}

.single-article__post-nav-title {
    font-size: var(--font-size-md);
    font-weight: var(--fw-semibold);
    line-height: var(--line-height-snug);
}

.single-article__post-nav-next .single-article__post-nav-link {
    align-items: flex-end;
}

/* ============================================
   Articles similaires
   ============================================ */

.single-article__related {
    padding-block: var(--global-lg-spacing);
    background: var(--col_1);
}
.single-article__related .single-article__container{
    background: var(--col_3);
    border-radius:40px;

}
.single-article__related-title {
    font-size: var(--font-size-xl);
    font-weight: var(--fw-bold);
    margin-block: 0 var(--global-md-spacing);
    text-align: center;
}

.single-article__related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--global-md-spacing);
}

/* Pilule catégorie — override local : vert + border dans le bloc articles similaires */
.single-article__related .article-card__category {
    background: var(--col_4);
    border: solid 2px var(--col_2);
}

/* ============================================
   Responsive — ≤ 1024px : grille similaires 2 col
   ============================================ */

@media (max-width: 1024px) {
    .single-article__related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   Responsive — ≤ 640px : 1 col + nav empilée
   ============================================ */

@media (max-width: 640px) {
    .single-article__related-grid {
        grid-template-columns: 1fr;
    }

    .single-article__post-nav-inner {
        flex-direction: column;
        gap: var(--global-sm-spacing);
    }

    .single-article__post-nav-prev,
    .single-article__post-nav-next {
        max-width: none;
    }

    .single-article__post-nav-next {
        text-align: left;
    }

    .single-article__post-nav-next .single-article__post-nav-link {
        align-items: flex-start;
    }
}

/* ============================================
   CTA intercalé — variant sombre (is-style-papir-cta-dark)
   Scope intentionnel : .single-article__content uniquement.
   Pour utiliser ailleurs, ajouter un autre scope parent.
   ============================================ */

.single-article__content .is-style-papir-cta-dark {
    background: var(--col_2);             /* fond DARK */
    color: var(--col_1);                  /* texte BLANC */
    padding: var(--global-md-spacing);
    border-radius: 6px;
    margin-block: var(--global-md-spacing);
    text-align: center;
}

.single-article__content .is-style-papir-cta-dark .papir-cta__title,
.single-article__content .is-style-papir-cta-dark h3 {
    color: var(--col_1);
    margin-top: 0;
    margin-bottom: var(--global-xs-spacing);
    font-size: var(--font-size-xl);
    font-weight: var(--fw-bold);
}

.single-article__content .is-style-papir-cta-dark .papir-cta__text,
.single-article__content .is-style-papir-cta-dark p {
    color: var(--col_1);
    opacity: 0.85;
    margin-bottom: var(--global-sm-spacing);
}

.single-article__content .is-style-papir-cta-dark .wp-block-button__link {
    background: var(--col_3);             /* bouton accent VIOLET */
    color: var(--col_2);                  /* texte SOMBRE sur violet */
    font-weight: var(--fw-semibold);
    transition: opacity 0.2s;
}

.single-article__content .is-style-papir-cta-dark .wp-block-button__link:hover {
    opacity: 0.85;
}

.single-article__content .is-style-papir-cta-dark.alignwide {
    max-width: var(--medium_width);
}

/* ============================================
   Newsletter — pied d'article
   Le style visuel vient du bloc réutilisable assigné.
   Ce sélecteur assure uniquement l'isolation du conteneur.
   ============================================ */

.single-article__newsletter {
    /*margin-top: var(--global-lg-spacing);*/
}