/*
 * Styles pour les articles individuels
 */

.scroll-down, .scroll-up {
    background: #fff !important;
}
li#menu-item-486 {
    background: var(--color-primary);
}
/* ============================================
   BREADCRUMB
   ============================================ */

.breadcrumb-wrapper {
    background: #FFFCF3;
    padding-top: 120px;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-primary);
}

.breadcrumb a {
    text-decoration: none;
    transition: color 0.2s;
    border: 1px solid var(--color-primary);
    padding: 0 15px;
    border-radius: 50px;
}

.breadcrumb a:hover {
    color: #1e293b;
}

.breadcrumb .separator {
}

.breadcrumb .current {
    font-weight: 500;
    border: 1px solid var(--color-primary);
    padding: 0 15px;
    border-radius: 50px;
}

header.site-header {
    background: #fffcf3;
}
/* ============================================
   HERO ARTICLE
   ============================================ */

.article-hero {
    background: #FFFCF3;
    padding-bottom: 60px;
    padding-top: 30px;
}

.article-category {
    letter-spacing: 0.05em;
    font-weight: 500;
    font-size: 18px;
}

.article-title {
    font-family: var(--font-display);
    font-size: 48px;
    font-weight: 300;
    line-height: 1.2;
    color: #1e293b;
}

.article-authors {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-top: 20px;
}

.author-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.author-photo {
    width: 94px;
    height: 94px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-primary);
}

.author-name {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.9375rem;
}

.author-role {
}

.article-rating {
    display: flex;
    gap: 0.25rem;
}

.star {
    font-size: 1.25rem;
    filter: grayscale(100%);
    opacity: 0.3;
}

.star.filled {
    filter: grayscale(0%);
    opacity: 1;
}


/* ============================================
   LAYOUT 3 COLONNES
   ============================================ */

.article-layout {
    display: grid;
    grid-template-columns: 285px 676px 1fr;
    gap: 1rem;
}

.sidebar-left,
.sidebar-right {
    position: sticky;
    top: 87px;
    align-self: start;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
}

section {margin-bottom: 50px;}
/* ============================================
   SIDEBAR GAUCHE : SOMMAIRE
   ============================================ */

.table-of-contents {
    background: #FFFCF3;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 50px;
}

.toc-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--color-primary);
}

.toc-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.toc-nav li {
    margin-bottom: 0.75rem;
    line-height: 14px;
}

.toc-link {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    line-height: 12px;
    color: var(--color-text);
}

.toc-link:hover {
    color: #1e293b;
    border-left-color: #cbd5e1;
}

.toc-link.active {
    color: #6366f1;
    border-left-color: #6366f1;
    font-weight: 500;
}
.buttons-share {
    display: flex;
    gap: 15px;
    padding-left: 15px;
    margin-top: 10px;
}

.share-post .share-label {
    margin-bottom: 10px !important;
    padding-left: 15px;
    color: var(--color-text);
    font-size: 14px;
    font-weight: 500;
}

/* ============================================
   CONTENU PRINCIPAL
   ============================================ */

.article-main-content {
    max-width: 100%;
}

.content-block {
    margin-bottom: 2rem;
}

.content-block h2 {
   font-size: 1.5rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: #1e293b;
}

.content-block h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: #1e293b;
}

.content-block p {
    line-height: 24px;
    margin-bottom: 1.25rem;
    color: var(--color-text);
    font-size: 16px;
}

.content-block ul,
.content-block ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.content-block li {
    line-height: 18px;
    margin-bottom: 0.5rem;
    color: var(--color-text);
    font-family: var(--font-body);
}

.content-block img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 2rem 0;
}

/* ============================================
   CONTENU ESSENTIEL
   ============================================ */
   .essentiel-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
	}

	.article-essentiel h2 {
		font-family: var(--font-display);
		font-weight: 600;
		font-size: 18px;
		line-height: 18px;
		margin: 0;
	}
	.article-essentiel {
		background: #FFFCF3;
		padding: 30px;
		margin-bottom: 50px;
		}
	.essentiel-content {
		font-family: var(--font-body);
		font-weight: 400;
		font-size: 16px;
		line-height: 24px;
		}
	.essentiel-content ul {
		padding-left: 20px;
		}
/* ============================================
   ENCARTS COLORÉS
   ============================================ */

.encart {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: 8px;
    margin: 2rem 0;
}

.encart-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.encart-content {
    flex: 1;
}

.encart-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    line-height: 18px;
    letter-spacing: 0%;
}

.encart-text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 18px;
    letter-spacing: 0%;
}

.encart-text p:last-child {
    margin-bottom: 0;
}
.sidebar-cta .card-body {
    padding: 40px 10px;
    background-image: url(/wp-content/uploads/2026/03/Vector-5.png);
    background-position: center bottom;
    background-repeat: no-repeat;
}

.sidebar-cta.card {
    background: rgba(255, 192, 166, 0.2);
}
.sidebar-cta .btn {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
}

/* ============================================
   CTA BLOCK
   ============================================ */

.cta-block {
    padding-left: 20px;
    border-radius: 12px;
    margin: 3rem 0;
}

.cta-block h3 {
}

.cta-block p {
    color: #475569;
    line-height: 1.6;
}

.cta-image img {
    max-width: 300px;
    border-radius: 8px;
}


/* ============================================
   SIDEBAR DROITE : CTA
   ============================================ */

.sidebar-cta {
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.sidebar-cta h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 24px;
    line-height: 24px;
    margin-bottom: 50px;
}

.sidebar-cta input {
    width: 100%;
    padding: 0.75rem;
    border-radius: 6px;
}

.sidebar-cta input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.sidebar-cta button {
    background: white !important;
    color: #FF7F50 !important;
    font-weight: 600;
}
.sidebar-cta span.nineties {
    font-family: Behind The Nineties;
    font-weight: 700;
    font-size: 28px;
    line-height: 34px;
}

/* ============================================
   NOTE DE FIN D'ARTICLE
   ============================================ */

.article-footer-rating {
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.rating-stars {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}


/* ============================================
   FAQ ACCORDÉON
   ============================================ */

/* ============================================
   FAQ ACCORDÉON avec SVG personnalisés
   ============================================ */

.faq-accordion {
    max-width: 100%;
}

.faq-item {
    border: 0.5px solid var(--color-text);
    margin-bottom: 10px;
    border-radius: 10px;
    padding: 20px;
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.125rem;
    font-weight: 500;
    color: #1e293b;
    text-align: left;
    transition: color 0.2s;
}

.faq-question:hover {
    color: var(--color-primary);
}

.faq-question.active {
    color: var(--color-primary);
}

/* IMPORTANT : Conteneur des icônes SVG */
.faq-icon {
    position: relative;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Par défaut : afficher SEULEMENT le + (plus) */
.faq-icon .icon-plus {
    display: block;
}

.faq-icon .icon-minus {
    display: none;
}

/* Quand actif : afficher SEULEMENT le - (moins) */
.faq-question.active .faq-icon .icon-plus {
    display: none;
}

.faq-question.active .faq-icon .icon-minus {
    display: block;
}

/* Transition smooth sur les SVG */
.faq-icon svg {
    transition: transform 0.3s ease;
    position: absolute;
    top: 0;
    left: 0;
}

.faq-question:hover .faq-icon svg {
    transform: scale(1.05);
}

/* Réponse FAQ */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-answer p {
    padding-bottom: 1.5rem;
    line-height: 1.7;
    color: #475569;
}

.article-faq .container.flex {
    gap: 120px;
    max-width: 1200px;
}
.colonne-fixe {
    width: 390px;
    flex-shrink: 0; 
}

.colonne-flexible {
    flex: 1; 
}
.faq h2 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 38px;
    line-height: 48px;
}

.faq .nineties {
    font-weight: 700;
}

/* ============================================
   ARTICLES SIMILAIRES
   ============================================ */

.related-articles 
.post-card {
    background: rgba(190, 154, 242, 0.1);
    border: none;
    border-radius: var(--radius-sm);
}
.related-articles-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 60px;
}

.related-articles .faq h2 {
    margin: 0;
}

.faq p {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 18px;
    line-height: 100%;
}
/* ============================================
	METADONNEES
   ============================================ */
.article-meta{}
.article-meta-wrapper{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1.5rem}
.meta-left{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.meta-item{display:flex;align-items:center;gap:.5rem;color: var(--color-text);font-size: 14px;font-weight: 500;}
.meta-separator{color:#cbd5e1}
.meta-rating{color:#1e293b}
.rating-value{font-weight:600}
.meta-right{display:flex;align-items:center;gap:.75rem}
.share-label{font-family: var(--font-body);font-weight: 500;font-size: 14px;line-height: 18px;}
.share-btn{display:inline-flex;align-items:center;justify-content:center;width: 30px;height: 30px;border-radius:50%;background:var(--color-primary);color: var(--color-text);border:none;cursor:pointer;transition:all .2s}
.share-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.15)}
.share-whatsapp:hover{/* background:#25D366; */}
.share-linkedin:hover{}
.share-facebook:hover{}
.share-copy{}
.author-name::after{content:'';width:14px;height:14px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FFC107' stroke-width='2'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");background-size:contain;margin-left:.375rem}
@media (max-width:768px){.article-meta-wrapper{flex-direction:column;align-items:flex-start}.share-label{display:none}}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
    .article-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .sidebar-left,
    .sidebar-right {
        display: none;
    }
    
    .article-title {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .article-title {
        font-size: 1.75rem;
    }
    
    .cta-block .flex {
        flex-direction: column;
    }
    
    .content-block h2 {
        font-size: 1.5rem;
    }
    
    .article-authors {
        flex-direction: column;
        gap: 1rem;
    }
}

/* ============================================
   NOUVEAUX BLOCS ARTICLE - CSS
   ============================================ */

/* CTA Discussion */
.cta-discussion-card {
    background: #fff;
    padding: 3rem;
}

.cta-discussion-content h2 {
    font-size: 2rem;
    line-height: 1.3;
    margin-bottom: 1.5rem;
}

.cta-discussion-content h2 strong {
    font-family: var(--font-nineties);
    font-weight: 700;
}

.cta-discussion-image img {
    border-radius: 12px;
}

/* Bio Auteur */
.author-bio-card {
    background: rgba(255, 252, 243, 1);
}

.author-bio-photo {
    flex-shrink: 0;
}

.author-photo-circle {
    width: 94px; 
	height: 94px; 
	border-radius: 50%; 
	overflow: hidden; 
	background: #FFC107;
}
.author-photo-circle img{
width: 100%; 
height: 100%; 
object-fit: cover;
}
.author-bio-content .author-label {
    font-weight: 300;
    font-size: 14px;
    line-height: 16px;
    font-family: var(--font-body);:;:
    f;
}

.author-bio-content h3 {
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.author-bio-content .author-role {
    font-size: 14px;
}

/* Guide Téléchargeable */
.guide-card {
    overflow: hidden;
    border-radius: 12px;
    background-color: #EFE7D4;
    padding: 50px 50px 50px 40px;
    background-image: url(/wp-content/uploads/2026/03/livre-blanc-mockup-placeholder-1-3.png);
    background-position: top right;
    background-repeat: no-repeat;
}

.guide-content h3 {
    font-size: 1.75rem;
    font-weight: 600;
    color: #1e293b;
}

.guide-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
}
.article-guide h5 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    line-height: 100%;
}

.article-guide p {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 18px;
    color: var(--color-text);
}

.guide {
    margin-top: var(--space-2xl);
}
/* Bandeau Download */
.download-banner {
    transition: background 0.3s;
    margin-left: 1rem;
    margin-right: 1rem;
    border-radius: 5px;
}

.download-banner:hover {
    background: #FFD54F;
}

.banner-link {
    padding: 0.5rem 0;
    transition: transform 0.2s;
}

.banner-link:hover {
    transform: translateX(4px);
}

.banner-link h3 {
    flex: 1;
    font-family: Bricolage Grotesque;
    font-weight: 600;
    font-size: 18px;
    line-height: 100%;
    max-width: 468px;
}

.banner-link svg {
    flex-shrink: 0;
    transition: transform 0.3s;
}

.banner-link:hover svg {
    transform: translateY(4px);
}
.cta-content h3 {
    font-size: 24px;
    line-height: 100%;
    font-family: var(--font-display);
    font-weight: 500;
}
.cta-content .nineties {
    font-weight: 700;
    font-size: 28px;
    line-height: 34px;
    letter-spacing: 0%;
    display: block;
}
.cta-content .btn {
    background: var(--color-text);
    color: #fff;
    padding: 12px 18px;
	font-size: 14px;
}
.cta-block .flex.items-center.gap-xl {
    justify-content: space-between;
    padding-left: 50px;
}

/* ============================================
   WIDGET DE NOTATION D'ARTICLE
   ============================================ */

.article-rating-widget {
    background: #FFFCF3;
    border-left: 2px solid var(--color-primary);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 0 1rem;
}

/* Affichage de la note moyenne */
.rating-display {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.rating-stars {
    display: flex;
    gap: 0.25rem;
    font-size: 1.5rem;
}

.rating-stars .star.filled {
    color: #FFC107;
}

.rating-stars .star.half {
    color: #FFC107;
    opacity: 0.5;
}

.rating-stars .star.empty {
    color: #cbd5e1;
}

.rating-info {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    color: #475569;
}

.rating-info strong {
    font-size: 1.25rem;
    color: #1e293b;
}

.rating-info span {
    font-size: 0.875rem;
}

/* Formulaire de vote */
.rating-form {
    text-align: center;
}

.rating-label {
    margin-bottom: 1rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
}

.rating-buttons {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.rating-star-btn {
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0.25rem;
    position: relative;
}

.rating-star-btn .star-svg {
    display: block;
    transition: all 0.2s;
}

/* Étoile non sélectionnée - juste le contour */
.rating-star-btn .star-svg path {
    fill: none;
    stroke: #F6BD00;
    stroke-width: 2;
    transition: fill 0.2s;
}

.rating-star-btn:hover {
    transform: scale(1.15);
}

/* Étoile sélectionnée - remplie */
.rating-star-btn.selected .star-svg path {
    fill: #F6BD00;
    stroke: #F6BD00;
}

/* Classe pour marquer le vote définitif de l'utilisateur */
.rating-star-btn.user-selected .star-svg path {
    fill: #F6BD00;
    stroke: #F6BD00;
}

.rating-star-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.rating-message {
    min-height: 24px;
    font-size: 0.9375rem;
    font-weight: 500;
}
span.rating-votes {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 14px;
}
/* Responsive */
@media (max-width: 768px) {
    .rating-display {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .rating-star-btn {
        font-size: 1.75rem;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .rating-display {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .rating-star-btn {
        font-size: 1.75rem;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .cta-discussion-card .flex,
    .author-bio-card .flex,
    .guide-card .flex {
        flex-direction: column;
    }
    
    .cta-discussion-image,
    .guide-image {
        max-width: 100% !important;
        margin-top: 2rem;
    }
    
    .author-bio-photo {
        margin-bottom: 1.5rem;
    }
    
    .cta-discussion-card {
        padding: 2rem 1.5rem;
    }
    
    .banner-link {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .banner-link h3 {
        font-size: 1.25rem;
    }
}