/* ============================================================
   blog.css — gabarit d'article du blog Expert Copro Gestion
   S'appuie sur les variables de main.css (DA dark/or).
   ============================================================ */

/* --- Fil d'Ariane --- */
.article-breadcrumb {
    background: var(--bg-light, #f8fafc);
    border-bottom: 1px solid var(--border-light, #e2e8f0);
    padding: 0.875rem 0;
    font-size: 0.875rem;
}
.article-breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin: 0;
    padding: 0;
}
.article-breadcrumb li { display: flex; align-items: center; gap: 0.5rem; }
.article-breadcrumb li:not(:last-child)::after {
    content: "/";
    color: var(--text-muted, #94a3b8);
}
.article-breadcrumb a { color: var(--primary); text-decoration: none; }
.article-breadcrumb a:hover { text-decoration: underline; }
.article-breadcrumb [aria-current="page"] { color: var(--text-muted, #64748b); }

/* --- Hero d'article --- */
.article-hero {
    background: linear-gradient(135deg, var(--dark) 0%, var(--primary-dark) 100%);
    color: var(--white);
    padding: 3.5rem 0 3rem;
}
.article-hero .container { max-width: 760px; }
.article-hero .category {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-gold);
    margin-bottom: 1rem;
}
.article-hero h1 {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    line-height: 1.15;
    margin-bottom: 1rem;
}
.article-hero .author-role {
    color: #cbd5e1;
    font-size: 1.0625rem;
    margin: 0;
}
.article-hero .author-links {
    margin: 0.75rem 0 0;
}
.article-hero .author-links a {
    color: var(--accent-gold);
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
}
.article-hero .author-links a:hover { text-decoration: underline; }
.article-hero .author-links i { margin-right: 0.35rem; }
.author-photo {
    float: right;
    width: 220px;
    max-width: 45%;
    margin: 0 0 1.25rem 1.75rem;
}
.author-photo img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
}
@media (max-width: 560px) {
    .author-photo { float: none; width: 180px; margin: 0 auto 1.5rem; }
}
.article-hero .article-meta {
    color: #cbd5e1;
    font-size: 0.9375rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}
.article-hero .article-meta i { color: var(--accent-gold); margin-right: 0.35rem; }

/* --- Corps de l'article (prose) --- */
.article-body {
    padding: 3rem 0 4rem;
    background: var(--white);
}
.article-body .container { max-width: 720px; }
.prose { color: #334155; font-size: 1.0625rem; line-height: 1.75; }
.prose h2 {
    font-size: clamp(1.375rem, 2.6vw, 1.75rem);
    color: var(--dark);
    margin: 2.5rem 0 1rem;
    line-height: 1.25;
    scroll-margin-top: 90px;
}
.prose h3 {
    font-size: 1.1875rem;
    color: var(--dark);
    margin: 1.75rem 0 0.75rem;
}
.prose p { margin: 0 0 1.25rem; }
.prose a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--primary-dark); }
.prose strong { color: var(--dark); font-weight: 700; }
.prose ul, .prose ol { margin: 0 0 1.25rem; padding-left: 1.5rem; }
.prose li { margin-bottom: 0.5rem; }
.prose ul.checklist { list-style: none; padding-left: 0; }
.prose ul.checklist li {
    position: relative;
    padding-left: 1.9rem;
}
.prose ul.checklist li::before {
    content: "\f0c8"; /* far square */
    font-family: "Font Awesome 6 Free";
    font-weight: 400;
    position: absolute;
    left: 0;
    top: 0.1rem;
    color: var(--accent-gold);
}

/* Citations / encadrés */
.prose blockquote {
    margin: 1.75rem 0;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--accent-gold);
    background: var(--accent-gold-light, rgba(245,158,11,0.1));
    border-radius: 0 8px 8px 0;
    color: #475569;
}
.prose blockquote p:last-child { margin-bottom: 0; }

/* Code */
.prose code {
    background: #f1f5f9;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--primary-dark);
}
.prose pre {
    background: var(--dark);
    color: #e2e8f0;
    padding: 1.25rem;
    border-radius: 10px;
    overflow-x: auto;
    margin: 0 0 1.5rem;
    font-size: 0.875rem;
    line-height: 1.6;
}
.prose pre code { background: none; color: inherit; padding: 0; }

/* Tableaux */
.prose .table-wrap { overflow-x: auto; margin: 0 0 1.5rem; }
.prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}
.prose th, .prose td {
    border: 1px solid var(--border-light, #e2e8f0);
    padding: 0.625rem 0.875rem;
    text-align: left;
    vertical-align: top;
}
.prose th { background: var(--bg-light, #f8fafc); color: var(--dark); font-weight: 600; }
.prose hr { border: 0; border-top: 1px solid var(--border-light, #e2e8f0); margin: 2.5rem 0; }

.prose .disclaimer {
    font-size: 0.875rem;
    color: var(--text-muted, #64748b);
    font-style: italic;
    border-top: 1px solid var(--border-light, #e2e8f0);
    padding-top: 1.25rem;
    margin-top: 2rem;
}

/* --- FAQ accordéon --- */
.article-faq { margin-top: 2.5rem; }
.article-faq h2 { margin-bottom: 1rem; }
.faq-item {
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: 10px;
    margin-bottom: 0.75rem;
    overflow: hidden;
    background: var(--white);
}
.faq-item .faq-q {
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: 1rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--dark);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    min-height: 44px;
}
.faq-item .faq-q i { color: var(--accent-gold); transition: transform 0.25s ease; flex-shrink: 0; }
.faq-item[open] .faq-q i, .faq-item .faq-q[aria-expanded="true"] i { transform: rotate(180deg); }
.faq-item .faq-a { padding: 0 1.25rem 1.1rem; color: #475569; line-height: 1.7; }

/* --- Encadré CTA produit --- */
.article-cta-box {
    margin: 2.5rem 0 0;
    background: linear-gradient(135deg, var(--dark) 0%, var(--primary-dark) 100%);
    color: var(--white);
    border-radius: 14px;
    padding: 2rem 1.75rem;
    text-align: center;
}
.article-cta-box h3 { color: var(--white); font-size: 1.25rem; margin-bottom: 0.75rem; }
.article-cta-box p { color: #cbd5e1; margin-bottom: 1.5rem; }
.article-cta-box .btn-primary { background: var(--accent-gold); color: var(--dark); }
.article-cta-box .btn-primary:hover { background: var(--accent-gold-hover); }

/* --- Articles liés --- */
.related-articles { padding: 3rem 0; background: var(--bg-light, #f8fafc); }
.related-articles h2 { text-align: center; font-size: 1.5rem; color: var(--dark); margin-bottom: 1.75rem; }
.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    max-width: 960px;
    margin: 0 auto;
}
.related-card {
    background: var(--white);
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: 12px;
    padding: 1.5rem;
    text-decoration: none;
    display: block;
    transition: transform 0.2s, box-shadow 0.2s;
}
.related-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(15,23,42,0.08); }
.related-card .category { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--primary); font-weight: 600; }
.related-card h3 { font-size: 1.0625rem; color: var(--dark); line-height: 1.4; margin-top: 0.5rem; }

/* ============================================================
   GATE — teaser + déverrouillage email
   ============================================================ */
.gate-zone { position: relative; margin-top: 1rem; }

/* Contenu verrouillé : visible dans le DOM (SEO) mais flouté + non interactif */
.gated-content {
    filter: blur(6px);
    opacity: 0.55;
    pointer-events: none;
    user-select: none;
    max-height: 360px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 92%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 92%);
}
.gate-zone.unlocked .gated-content {
    filter: none;
    opacity: 1;
    pointer-events: auto;
    user-select: auto;
    max-height: none;
    -webkit-mask-image: none;
    mask-image: none;
}

/* Carte de capture email */
.gate-card {
    position: relative;
    margin: -3rem auto 0;
    max-width: 560px;
    background: var(--white);
    border: 1px solid var(--accent-gold);
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.12);
    border-radius: 16px;
    padding: 2rem 1.75rem;
    text-align: center;
    z-index: 2;
}
.gate-zone.unlocked .gate-card { display: none; }
.gate-card .gate-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--accent-gold-light, rgba(245,158,11,0.15));
    color: var(--accent-gold-hover);
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
.gate-card h2 { font-size: 1.3rem; color: var(--dark); margin-bottom: 0.6rem; }
.gate-card p.gate-pitch { color: #475569; font-size: 0.975rem; line-height: 1.6; margin-bottom: 1.25rem; }
.gate-form .field {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}
.gate-form input[type="email"] {
    flex: 1 1 260px;
    padding: 0.8rem 1rem;
    border: 1px solid var(--border-light, #cbd5e1);
    border-radius: 10px;
    font-size: 1rem;
    font-family: inherit;
}
.gate-form input[type="email"]:focus {
    outline: 3px solid var(--accent-gold);
    outline-offset: 1px;
    border-color: var(--accent-gold);
}
.gate-form button {
    background: var(--accent-gold);
    color: var(--dark);
    border: 0;
    border-radius: 10px;
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    min-height: 44px;
}
.gate-form button:hover { background: var(--accent-gold-hover); }
.gate-form button:disabled { opacity: 0.6; cursor: not-allowed; }
.gate-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    text-align: left;
    font-size: 0.8125rem;
    color: var(--text-muted, #64748b);
    margin-top: 0.9rem;
    line-height: 1.5;
}
.gate-consent input { margin-top: 0.2rem; flex-shrink: 0; }
.gate-consent a { color: var(--primary); }
.gate-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.gate-message { margin-top: 0.85rem; font-size: 0.9rem; min-height: 1.2em; }
.gate-message.error { color: #b91c1c; }
.gate-message.success { color: #15803d; }

/* Bandeau de succès affiché après déverrouillage */
.gate-unlocked-banner { display: none; }
.gate-zone.unlocked .gate-unlocked-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #ecfdf5;
    border: 1px solid #86efac;
    color: #166534;
    border-radius: 12px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}
.gate-unlocked-banner a { color: #166534; font-weight: 700; }

@media (max-width: 600px) {
    .gate-card { margin-left: 0.5rem; margin-right: 0.5rem; padding: 1.5rem 1.25rem; }
    .article-hero { padding: 2.5rem 0 2rem; }
}