/**
 * Articles CSS - Emailing.fr
 * Styles communs pour les pages d'articles (guide, apprendre, exemples, ressources)
 */

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

.breadcrumb-section {
    padding: 100px 0 20px;
    text-align: center;
}

.breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
    justify-content: center;
}

.breadcrumb-item a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: var(--transition-smooth);
}

.breadcrumb-item a:hover {
    color: var(--color-primary-text);
}

.breadcrumb-item.active {
    color: var(--color-text);
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: var(--color-text-muted);
}

/* ==========================================================================
   Article Header
   ========================================================================== */

.article-header {
    padding: 20px 0 40px;
    text-align: center;
}

.article-category {
    display: inline-block;
    background: var(--color-accent-soft);
    color: var(--color-secondary);
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 20px;
}

.article-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    margin-bottom: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.article-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    flex-wrap: wrap;
}

.article-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Le bloc méta est hors de .article-body : sans cette règle, le lien de
   signature retombe sur le bleu par défaut de Bootstrap, à 4,37:1 sur le fond
   crème — sous le seuil AA. */
.article-meta a {
    color: var(--color-primary-text);   /* 5,03:1 */
    text-decoration: underline;
    text-underline-offset: 2px;
}

.article-meta a:hover {
    color: var(--color-primary-dark);
}

/* ==========================================================================
   Article Content
   ========================================================================== */

.article-content {
    padding: 40px 0 80px;
}

.article-body {
    max-width: 720px;
    margin: 0 auto;
}

.article-body p {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    color: var(--color-text);
}

.article-body h2 {
    font-size: 1.75rem;
    margin: 3rem 0 1.5rem;
    color: var(--color-text);
}

.article-body h3 {
    font-size: 1.35rem;
    margin: 2.5rem 0 1rem;
    color: var(--color-text);
}

.article-body a:not(.btn) {
    color: var(--color-primary-text);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: var(--transition-smooth);
}

.article-body a:not(.btn):hover {
    color: var(--color-primary-dark);
}

.article-body ul,
.article-body ol {
    margin: 1.5rem 0;
    padding-left: 1.5rem;
}

.article-body li {
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

/* ==========================================================================
   Highlight & Warning Boxes
   ========================================================================== */

.highlight-box {
    background: var(--color-accent-soft);
    border-left: 4px solid var(--color-accent);
    padding: 24px 28px;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin: 2rem 0;
}

.highlight-box p {
    margin-bottom: 0;
    font-size: 1.05rem;
}

.highlight-box strong {
    color: var(--color-secondary);
}

.warning-box {
    background: #FFF5F5;
    border-left: 4px solid #E53E3E;
    padding: 24px 28px;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin: 2rem 0;
}

.warning-box p {
    margin-bottom: 0;
    font-size: 1.05rem;
}

.warning-box strong {
    color: #C53030;
}

/* ==========================================================================
   Page 404
   ========================================================================== */

.error-section {
    padding: 140px 0 80px;
}

.error-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 48px;
}

.error-code {
    display: block;
    font-size: clamp(3.5rem, 10vw, 5.5rem);
    font-weight: 800;
    line-height: 1;
    color: var(--color-primary-text);
    margin-bottom: 12px;
}

.error-title {
    font-size: clamp(1.6rem, 4vw, 2.25rem);
    font-weight: 800;
    margin-bottom: 16px;
}

.error-subtitle {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    margin-bottom: 28px;
}

/* ==========================================================================
   Reassure Box
   ========================================================================== */

/* La charte impose une phrase de rassurance par article, et le texte la porte
   bien — mais elle était rendue comme un paragraphe ordinaire, donc invisible
   au balayage. Le site disposait de quatre composants pour l'inquiétude
   (.warning-box, .problem-identify, .cause-number, .trouble-box) et d'aucun
   pour l'apaisement, sur un public qui a peur de mal faire.

   UNE phrase, toujours au même endroit. Ce n'est pas un encadré fourre-tout :
   pour un aparté ou une astuce, utiliser .highlight-box. */
.reassure-box {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #ECFDF5;
    border-radius: var(--radius-md);
    padding: 20px 24px;
    margin: 2rem 0;
}

.reassure-box::before {
    /* Coche en SVG inline : pas de dépendance à Font Awesome pour un composant
       destiné à se répandre sur toutes les pages.
       La version précédente dessinait la coche avec border-left + border-bottom
       rotés — technique courante, mais que le détecteur de design lisait comme
       une bordure d'accent latérale sur carte arrondie. Un SVG lève
       l'ambiguïté et se lit mieux. Trait #047857 : 5,21:1 sur le fond. */
    content: '';
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 3px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.reassure-box p {
    margin-bottom: 0;
    font-size: 1.05rem;
    color: var(--color-text);          /* 16,19:1 */
}

.reassure-box strong {
    color: #065F46;                    /* 7,29:1 */
}

/* ==========================================================================
   CTA Box
   ========================================================================== */

.cta-box {
    background: linear-gradient(135deg, var(--color-secondary) 0%, #1A2F47 100%);
    border-radius: var(--radius-lg);
    padding: 40px;
    margin: 3rem 0;
    color: white;
}

.cta-box-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: white !important;
}

.cta-box p {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 24px;
}

/* ==========================================================================
   B2B Box (variant)
   ========================================================================== */

.b2b-box {
    background: linear-gradient(135deg, var(--color-secondary) 0%, #1A2F47 100%);
    border-radius: var(--radius-lg);
    padding: 32px;
    margin: 2.5rem 0;
    color: white;
}

.b2b-box-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: white !important;
}

.b2b-box p {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 20px;
}

.b2b-box ul {
    margin: 0;
    padding-left: 1.25rem;
}

.b2b-box li {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 8px;
}

/* ==========================================================================
   Email Templates
   ========================================================================== */

.email-template {
    background: var(--color-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-medium);
    overflow: hidden;
    margin: 2rem 0;
    border: 1px solid rgba(26, 26, 46, 0.08);
}

.email-template-header {
    background: var(--color-secondary);
    color: white;
    padding: 16px 24px;
    font-weight: 600;
}

.email-template-meta {
    background: var(--color-bg-alt);
    padding: 12px 24px;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    border-bottom: 1px solid rgba(26, 26, 46, 0.08);
}

.email-template-meta strong {
    color: var(--color-text);
}

.email-template-body {
    padding: 28px;
}

.email-template-content {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--color-text);
}

.email-template-content p {
    margin-bottom: 16px;
}

/* ==========================================================================
   Analysis Box (for examples)
   ========================================================================== */

.analysis-box {
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    margin: 1.5rem 0;
}

.analysis-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-primary-text);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.analysis-content {
    font-size: 0.95rem;
    color: var(--color-text-muted);
}

.analysis-content ul {
    margin: 0;
    padding-left: 1.25rem;
}

.analysis-content li {
    margin-bottom: 6px;
    font-size: 0.95rem;
}

/* ==========================================================================
   Method Cards (for tutorials)
   ========================================================================== */

.method-card {
    background: var(--color-card);
    border-radius: var(--radius-lg);
    padding: 28px;
    margin: 1.5rem 0;
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(26, 26, 46, 0.04);
}

.method-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.method-number {
    width: 36px;
    height: 36px;
    background: var(--color-primary);
    color: var(--color-text);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 700;
    flex-shrink: 0;
}

.method-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

.method-content p {
    margin-bottom: 0;
    font-size: 1rem;
    color: var(--color-text-muted);
}

/* ==========================================================================
   Step Cards (for tutorials)
   ========================================================================== */

.step-card {
    background: var(--color-card);
    border-radius: var(--radius-lg);
    padding: 28px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(26, 26, 46, 0.04);
}

.step-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.step-number {
    width: 40px;
    height: 40px;
    background: var(--color-primary);
    /* Texte sombre : en blanc, ces pastilles n'atteignaient que 2,84:1 sur
       l'orange. En sombre, 6,02:1. */
    color: var(--color-text);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    flex-shrink: 0;
}

.step-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

.step-content {
    padding-left: 56px;
}

.step-content p {
    font-size: 1rem;
    color: var(--color-text-muted);
    margin-bottom: 12px;
}

.step-content p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   FAQ Section
   ========================================================================== */

.faq-section {
    margin: 3rem 0;
}

/* ==========================================================================
   Sommaire (injecté par layouts/partials/toc.html)
   ========================================================================== */

.toc {
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    margin: 0 0 2.5rem;
}

.toc-summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--color-text);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

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

.toc-summary::after {
    content: '';
    margin-left: auto;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--color-primary-text);
    border-bottom: 2px solid var(--color-primary-text);
    transform: rotate(45deg);
    transition: transform var(--transition-smooth);
}

.toc[open] > .toc-summary::after { transform: rotate(-135deg); }

@media (prefers-reduced-motion: reduce) {
    .toc-summary::after { transition: none; }
}

.toc-list {
    margin: 16px 0 0;
    padding-left: 1.25rem;
}

.toc-list li {
    font-size: 1rem;
    margin-bottom: 8px;
}

.toc-list a {
    color: var(--color-text);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.toc-list a:hover {
    color: var(--color-primary-text);
    border-bottom-color: currentColor;
}

/* Les FAQ sont des <details> : elles ressemblaient à des accordéons sans en
   être, et leurs réponses dépliées allongeaient chaque page pour rien. */
.faq-item {
    background: var(--color-card);
    border-radius: var(--radius-md);
    padding: 24px 28px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(26, 26, 46, 0.04);
}

.faq-question {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    list-style: none;          /* retire le triangle par défaut */
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.faq-question::-webkit-details-marker { display: none; }

/* Le <h3> reste dans le <summary> pour préserver la structure de titres ;
   il ne doit pas réintroduire sa propre typographie ni ses marges. */
.faq-question h3 {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    margin: 0;
}

/* Chevron dessiné en CSS : pas de dépendance à Font Awesome dans un composant
   rendu sur 82 pages. */
.faq-question::after {
    content: '';
    flex-shrink: 0;
    /* auto plutôt que justify-content: space-between — deux variantes de
       balisage coexistent, l'une avec un seul <h3>, l'autre avec une icône
       suivie d'un <span>. */
    margin-left: auto;
    width: 10px;
    height: 10px;
    margin-top: 6px;
    border-right: 2px solid var(--color-primary-text);
    border-bottom: 2px solid var(--color-primary-text);
    transform: rotate(45deg);
    transition: transform var(--transition-smooth);
}

.faq-item[open] > .faq-question::after {
    transform: rotate(-135deg);
}

@media (prefers-reduced-motion: reduce) {
    .faq-question::after { transition: none; }
}

.faq-answer {
    font-size: 1rem;
    color: var(--color-text-muted);
    margin-bottom: 0;
    line-height: 1.7;
    padding-top: 12px;
}

.faq-answer p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Related Section
   ========================================================================== */

.related-section {
    padding: 60px 0;
    background: var(--color-bg-alt);
}

.related-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 32px;
}

.related-card {
    background: var(--color-card);
    border-radius: var(--radius-md);
    padding: 24px;
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
    border: 1px solid rgba(26, 26, 46, 0.04);
    transition: var(--transition-smooth);
}

.related-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-medium);
    color: inherit;
}

.related-card-category {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-primary-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

.related-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--color-text);
}

.related-card-excerpt {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-bottom: 0;
}

/* ==========================================================================
   Glossary (for vocabulary page)
   ========================================================================== */

.glossary-section {
    margin: 2rem 0;
}

.glossary-letter {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-primary-text);
    margin: 2.5rem 0 1rem;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-accent);
}

/* .glossary-item / .glossary-term / .glossary-definition retirés : inutilisés
   dans tout le site, et .glossary-term entrait en collision avec la classe du
   même nom dans le pageCss de /guide/vocabulaire-emailing/, où elle désignait
   la carte entière. La règle d'ici (font-weight: 700) était donc héritée par
   la définition, qui s'affichait en gras et dans la même couleur que le terme.
   La carte y est désormais .glossary-card. */

/* ==========================================================================
   Checklist (for resources)
   ========================================================================== */

.checklist-container {
    background: var(--color-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-medium);
    padding: 32px;
    margin: 2rem 0;
}

.checklist-section {
    margin-bottom: 32px;
}

.checklist-section:last-child {
    margin-bottom: 0;
}

.checklist-section-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-secondary);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--color-accent);
}

.checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(26, 26, 46, 0.08);
}

.checklist-item:last-child {
    border-bottom: none;
}

.checklist-checkbox {
    width: 24px;
    height: 24px;
    border: 2px solid var(--color-primary);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.checklist-checkbox:hover {
    background: var(--color-accent-soft);
}

.checklist-checkbox.checked {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.checklist-checkbox.checked i {
    color: white;
}

.checklist-checkbox i {
    color: transparent;
    font-size: 0.8rem;
}

.checklist-text {
    flex: 1;
}

.checklist-text strong {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
}

.checklist-text span {
    font-size: 0.95rem;
    color: var(--color-text-muted);
}

/* ==========================================================================
   Type Cards (for types-emailing page)
   ========================================================================== */

.type-card {
    background: var(--color-card);
    border-radius: var(--radius-lg);
    padding: 32px;
    margin: 2rem 0;
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(26, 26, 46, 0.04);
}

.type-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.type-icon {
    width: 56px;
    height: 56px;
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--color-primary-text);
    flex-shrink: 0;
}

.type-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 4px 0;
}

.type-subtitle {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 0;
}

.type-content p {
    font-size: 1rem;
    color: var(--color-text-muted);
    margin-bottom: 16px;
}

.type-content p:last-child {
    margin-bottom: 0;
}

.type-examples {
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin-top: 16px;
}

.type-examples-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.type-examples p {
    font-size: 0.95rem;
    margin-bottom: 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 767px) {
    .breadcrumb-section {
        padding: 90px 0 15px;
    }

    .article-header {
        padding: 15px 0 30px;
    }

    .article-title {
        font-size: 1.75rem;
    }

    .article-meta {
        gap: 12px;
        font-size: 0.85rem;
    }

    .article-content {
        padding: 20px 0 60px;
    }

    .article-body p,
    .article-body li {
        font-size: 1rem;
    }

    .article-body h2 {
        font-size: 1.4rem;
        margin: 2rem 0 1rem;
    }

    .article-body h3 {
        font-size: 1.15rem;
    }

    .highlight-box,
    .warning-box {
        padding: 18px 20px;
    }

    .cta-box {
        padding: 28px 20px;
    }

    .cta-box-title {
        font-size: 1.25rem;
    }

    .b2b-box {
        padding: 24px 20px;
    }

    .email-template-body {
        padding: 20px;
    }

    .method-card,
    .step-card {
        padding: 20px;
    }

    .method-number {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }

    .method-title {
        font-size: 1.05rem;
    }

    .step-content {
        padding-left: 0;
        margin-top: 12px;
    }

    .faq-item {
        padding: 18px 20px;
    }

    .faq-question {
        font-size: 1rem;
    }

    .related-title {
        font-size: 1.25rem;
        margin-bottom: 24px;
    }

    .checklist-container {
        padding: 20px;
    }

    .type-card {
        padding: 24px;
    }

    .type-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* ===================================
   TROUBLE/BLOCAGE SECTION
   =================================== */

.trouble-section {
    background: var(--color-bg-alt);
}

/* Bloc « Si vous rencontrez un blocage » : il propose de l'AIDE.
   Il portait exactement le même dégradé que .problem-identify des pages
   /problemes/ (#FEF2F2 -> #FEE2E2), qui lui annonce LE PROBLÈME. Le rouge
   signifiait donc deux choses opposées selon le silo, et le lecteur qui circule
   entre les deux ne pouvait construire aucun repère. Passé en ardoise, adossé
   à --color-secondary : le rouge redevient univoque, réservé au problème. */
.trouble-box {
    background: linear-gradient(135deg, #F1F5F9 0%, #E2E8F0 100%);
    border-radius: var(--radius-lg);
    padding: 40px 32px;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    border: 1px solid rgba(45, 74, 111, 0.18);
}

.trouble-box h2 {
    color: var(--color-secondary);   /* 8,26:1 sur le fond du dégradé */
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.trouble-box > p {
    color: var(--color-text-muted);
    margin-bottom: 24px;
    font-size: 0.95rem;
}

.trouble-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 500px;
    margin: 0 auto;
}

.trouble-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    background: white;
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-text);
    transition: var(--transition-smooth);
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(45, 74, 111, 0.15);
}

.trouble-link:hover {
    transform: translateX(6px);
    box-shadow: var(--shadow-medium);
    color: var(--color-secondary);   /* 9,05:1 sur blanc */
}

.trouble-link i {
    color: var(--color-secondary);
    font-size: 1.1rem;
    width: 24px;
    text-align: center;
}

.trouble-link span {
    font-weight: 500;
    text-align: left;
}

@media (max-width: 767px) {
    .trouble-box {
        padding: 24px;
    }

    .trouble-links {
        grid-template-columns: 1fr;
    }
}