/**
 * Template article Sylius / e-commerce (CRSW-224).
 * Charte alignée sur les pages Métiers / Cas Clients et la landing Sylius (CRSW-216) —
 * mêmes variables que style/landing-flexible/flexible-landing.css et style/project-flexible/project-flexible.css.
 */

:root {
    --color-navy:        #0A1628;
    /* Noir neutre du H1 sur la maquette (mesuré ~#0D0D0D) — repris de la convention sitewide
       var(--black, #1A1A1A) utilisée dans components.css, plutôt que --color-navy qui a une
       dominante bleue trop marquée pour ce cas précis. */
    --color-black:       #1A1A1A;
    /* #002266 mesuré par pixel-sampling sur la maquette : couleur du H2 "Pourquoi connecter
       Sylius..." et du texte en gras de l'intro (les deux partagent exactement cette teinte). */
    --color-heading-blue: #002266;
    --color-blue:        #0066FF;
    --color-blue-hover:  #0052CC;
    /* #E6F0FF mesuré sur la maquette (fond FAQ et fond "Nos ressources dédiées" —
       exactement la même teinte pour les deux sections). */
    --color-blue-light:  #E6F0FF;
    --color-white:       #FFFFFF;
    --color-gray-light:  #F5F7FA;
    --color-gray-medium: #6B7280;
    --color-green:       #22C55E;
    --color-red:         #EF4444;
    --color-amber:       #F59E0B;
    --color-border:      #E5E7EB;
    --radius-card:        12px;
    --transition-base:    200ms ease;
}

/* Le thème définit body { background-color: #F8F8F8 } sitewide (voulu ailleurs) —
   surchargé uniquement sur cette page via .sylius-article-page (ajoutée par
   inc/single-sylius.php::body_class), sans toucher à la règle globale ni au reste
   du site. */
body.sylius-article-page {
    background-color: var(--color-white, #fff);
}

.sylius-article {
    font-family: 'Inter', sans-serif;
    color: var(--color-navy);
}

/* ── Fil d'ariane ─────────────────────────────────────────────────────────── */

.sylius-article__breadcrumb {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 20px 0;
}

.sylius-article__breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: var(--color-gray-medium);
}

.sylius-article__breadcrumb li:not(:last-child)::after {
    content: '›';
    margin-left: 6px;
    color: var(--color-gray-medium);
}

.sylius-article__breadcrumb a {
    color: var(--color-gray-medium);
    text-decoration: none;
}

.sylius-article__breadcrumb a:hover {
    color: var(--color-blue);
}

.sylius-article__breadcrumb li[aria-current="page"] {
    color: var(--color-navy);
    font-weight: 500;
}

/* ── Layout 2 colonnes ────────────────────────────────────────────────────── */

.sylius-article__layout {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 20px 64px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 64px;
    align-items: start;
}

.sylius-article__main {
    min-width: 0;
}

.sylius-article__sidebar {
    /* Le header du site est en position: fixed (cf. style.css) — 200px est l'offset déjà
       utilisé ailleurs sur le site (js/index.js) pour dégager ce même header, repris ici
       pour rester cohérent plutôt que d'inventer une valeur différente. */
    position: sticky;
    top: 200px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── En-tête (H1, métadonnées, visuel) ───────────────────────────────────── */

.sylius-article__header .sylius-article__title {
    width: 100%;
    max-width: none;
    font-family: 'Proxima Nova', sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.15;
    color: var(--color-black);
    margin: 0 0 24px;
}

.sylius-article__meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.sylius-article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 14px;
    color: var(--color-gray-medium);
}

.sylius-article__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sylius-article__meta-item svg {
    flex-shrink: 0;
}

.sylius-article__meta-item:not(:last-child)::after {
    content: '•';
    margin-left: 16px;
    color: var(--color-border);
}

.sylius-article__tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
}

.sylius-article__tag {
    font-size: 13px;
    color: var(--color-navy);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 6px 14px;
    white-space: nowrap;
}

.sylius-article__visual {
    margin-top: 24px;
    border-radius: var(--radius-card);
    overflow: hidden;
}

.sylius-article__visual-img {
    width: 100%;
    height: auto;
    display: block;
}

/* ── Contenu ──────────────────────────────────────────────────────────────── */

.sylius-article__content {
    font-size: 16px;
    line-height: 1.7;
}

.sylius-article__content img {
    border-radius: var(--radius-card);
}

.sylius-article__content figure {
    margin: 24px 0;
}

.sylius-article__content h2 {
    font-family: 'Proxima Nova', sans-serif;
    font-weight: 700;
    font-size: 28px;
    color: var(--color-heading-blue);
    text-align: left;
    margin: 48px 0 16px;
    scroll-margin-top: 200px;
}

.sylius-article__content h3 {
    font-family: 'Proxima Nova', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: var(--color-black);
    text-align: left;
    margin: 32px 0 12px;
}

.sylius-article__content strong,
.sylius-article__content b {
    font-weight: 700;
    color: var(--color-heading-blue);
}

.sylius-article__content ul,
.sylius-article__content ol {
    margin: 8px 0 16px;
    padding-left: 20px;
}

/* Le paragraphe d'intro d'une liste ("... permet :") ne doit pas laisser d'espace avant
   la liste elle-même — le margin-bottom par défaut du thème (~1.5em sur tous les <p>)
   n'est pas assez réduit par le collapse de marges avec le margin-top de la liste. */
.sylius-article__content p:has(+ ul),
.sylius-article__content p:has(+ ol) {
    margin-bottom: 0;
}

.sylius-article__content ul li,
.sylius-article__content ol li {
    margin-bottom: 4px;
    line-height: 1.5;
}

/* ── Sommaire (sidebar) ───────────────────────────────────────────────────── */

.sylius-article__sommaire {
    background: var(--color-gray-light);
    border-radius: var(--radius-card);
    padding: 20px;
}

.sylius-article__sommaire-title {
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-navy);
    margin: 0 0 12px;
}

.sylius-article__sommaire-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
}

.sylius-article__sommaire-list a {
    display: block;
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-gray-medium);
    text-decoration: none;
    border-left: 2px solid transparent;
    padding-left: 10px;
    transition: color var(--transition-base), border-color var(--transition-base);
}

.sylius-article__sommaire-list a:hover,
.sylius-article__sommaire-list a.is-active {
    color: var(--color-blue);
    border-left-color: var(--color-blue);
}

/* ── Bloc auteur (sidebar) ────────────────────────────────────────────────── */

.sylius-article__auteur {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 20px;
}

.sylius-article__auteur-expertise {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-blue);
    margin: 0 0 12px;
}

.sylius-article__auteur-identite {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sylius-article__auteur-photo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.sylius-article__auteur-nom-wrapper {
    flex: 1;
    min-width: 0;
}

.sylius-article__auteur-nom {
    font-weight: 700;
    font-size: 14px;
    color: var(--color-navy);
    margin: 0;
}

.sylius-article__auteur-role {
    font-size: 13px;
    color: var(--color-gray-medium);
    margin: 2px 0 0;
}

.sylius-article__auteur-linkedin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-blue-light);
    color: var(--color-blue);
    flex-shrink: 0;
}

.sylius-article__auteur-bio {
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-gray-medium);
    margin: 16px 0 0;
}

/* ── Bloc "Insert éditorial" (8 variantes) ───────────────────────────────── */

.sylius-insert {
    margin: 32px 0;
    border-radius: var(--radius-card);
    scroll-margin-top: 200px;
}

/* -- Encadré différencié (info / vigilance / bonne pratique / conseil / définition) -- */

.sylius-insert--info,
.sylius-insert--vigilance,
.sylius-insert--bonne-pratique,
.sylius-insert--conseil,
.sylius-insert--definition {
    display: flex;
    gap: 16px;
    padding: 20px 24px;
    border-left: 4px solid var(--color-blue);
    background: var(--color-blue-light);
}

.sylius-insert--vigilance {
    border-left-color: var(--color-red);
    background: #FEF2F2;
}

.sylius-insert--bonne-pratique {
    border-left-color: var(--color-green);
    background: #F0FDF4;
}

.sylius-insert--conseil {
    border-left-color: var(--color-amber);
    background: #FFFBEB;
}

.sylius-insert--definition {
    border-left-color: var(--color-gray-medium);
    background: var(--color-gray-light);
}

.sylius-insert__icon {
    flex-shrink: 0;
    color: var(--color-blue);
}

.sylius-insert--vigilance .sylius-insert__icon      { color: var(--color-red); }
.sylius-insert--bonne-pratique .sylius-insert__icon { color: var(--color-green); }
.sylius-insert--conseil .sylius-insert__icon        { color: var(--color-amber); }
.sylius-insert--definition .sylius-insert__icon     { color: var(--color-gray-medium); }

.sylius-insert__body {
    min-width: 0;
}

.sylius-insert__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-gray-medium);
    margin: 0 0 6px;
}

.sylius-insert__titre {
    font-weight: 700;
    font-size: 15px;
    color: var(--color-navy);
    margin: 0 0 6px;
}

.sylius-insert__texte,
.sylius-insert__texte p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-navy);
    margin: 0;
}

.sylius-insert__placeholder {
    font-size: 13px;
    font-style: italic;
    color: var(--color-gray-medium);
    margin: 0;
}

/* -- Citation -- */

.sylius-insert--citation {
    padding: 28px 32px;
    background: var(--color-blue-light);
    text-align: left;
}

.sylius-insert__quote-icon {
    color: var(--color-blue);
    margin-bottom: 12px;
}

.sylius-insert--citation .sylius-insert__citation-texte {
    width: 100%;
    font-size: 18px;
    font-style: normal;
    line-height: 1.5;
    color: var(--color-black);
    margin: 0 0 16px;
}

.sylius-insert__citation-divider {
    display: block;
    width: 48px;
    height: 2px;
    background: var(--color-blue);
    margin-bottom: 16px;
}

.sylius-insert__citation-auteur {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sylius-insert__citation-nom-wrapper {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    line-height: 1.4;
}

.sylius-insert__citation-nom {
    font-weight: 700;
    color: var(--color-blue);
}

.sylius-insert__citation-fonction {
    color: var(--color-blue);
}

.sylius-insert__citation-logo {
    height: 20px;
    width: auto;
}

/* -- Chiffres clés -- */

.sylius-insert--chiffre-cle {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.sylius-insert__chiffre {
    flex: 1 1 200px;
    background: var(--color-blue-light);
    border-radius: var(--radius-card);
    padding: 20px 24px;
}

.sylius-insert__chiffre-valeur {
    display: block;
    font-family: 'Proxima Nova', sans-serif;
    font-weight: 700;
    font-size: 36px;
    color: var(--color-blue);
    line-height: 1;
}

.sylius-insert__chiffre-libelle {
    display: block;
    font-size: 14px;
    color: var(--color-navy);
    margin-top: 8px;
}

/* -- Question / Réponse -- */
/* Différent de la FAQ (accordéon replié par défaut) : la réponse est immédiatement
   visible, pas de clic requis — un badge "Q" identifie clairement le format au premier
   coup d'œil, distinct des encadrés colorés (info/vigilance/...) qui ont une icône. */

.sylius-insert--question-reponse {
    display: flex;
    gap: 16px;
    padding: 20px 24px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-white);
}

.sylius-insert__question-badge {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-heading-blue);
    color: var(--color-white);
    font-family: 'Proxima Nova', sans-serif;
    font-weight: 700;
    font-size: 14px;
}

.sylius-insert__question-body {
    min-width: 0;
}

.sylius-insert__question {
    font-weight: 700;
    font-size: 16px;
    color: var(--color-heading-blue);
    margin: 0 0 8px;
}

.sylius-insert__reponse,
.sylius-insert__reponse p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-black);
    margin: 0;
}

/* ── Tableau (bloc natif Gutenberg) ───────────────────────────────────────── */

.sylius-article__content .wp-block-table {
    margin: 32px 0;
    overflow-x: auto;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 8px;
}

.sylius-article__content .wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.sylius-article__content .wp-block-table th,
.sylius-article__content .wp-block-table td {
    padding: 16px 20px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
}

.sylius-article__content .wp-block-table th:last-child,
.sylius-article__content .wp-block-table td:last-child {
    border-right: none;
}

.sylius-article__content .wp-block-table thead th {
    background: transparent;
    color: var(--color-black);
    font-weight: 700;
    white-space: nowrap;
}

.sylius-article__content .wp-block-table tbody td:first-child {
    font-weight: 700;
    color: var(--color-black);
    white-space: nowrap;
}

.sylius-article__content .wp-block-table tbody tr:nth-child(even) {
    background: var(--color-gray-light);
}

.sylius-article__content .wp-block-table tbody tr:last-child td {
    border-bottom: none;
}

/* ── Bandeau formulaire : masque le titre embarqué dans le formulaire CF7 ───── */
/* Le formulaire "Landing Page contact 1" (et similaires) contient son propre
   <div class="form-title"> — on affiche déjà un titre via le champ ACF dédié,
   pas touché au fichier CRSW-216 partagé, juste masqué dans notre contexte. */

.flexible-formulaire-section .form-title {
    display: none;
}

/* ── CTA inline ───────────────────────────────────────────────────────────── */

.sylius-cta-inline {
    margin: 32px 0;
    scroll-margin-top: 200px;
}

/* Le thème définit .primary-button à une trentaine d'endroits différents (souvent avec
   !important, scopés à d'autres contextes) — on fixe explicitement l'apparence ici plutôt
   que de dépendre de l'ordre de cascade global, pour un rendu prévisible. */
.sylius-cta-inline .primary-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--color-blue);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-btn, 8px);
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--transition-base);
}

.sylius-cta-inline .primary-button svg {
    flex-shrink: 0;
}

.sylius-cta-inline .primary-button:hover {
    background: var(--color-blue-hover);
    color: var(--color-white);
}

/* ── Ressources : surcharge de couleur scopée ────────────────────────────── */
/* Le fichier ressources-flexible.css est partagé avec la landing Sylius (CRSW-216) —
   pas touché. #EBF4FF y est codé en dur ; #E6F0FF est la valeur exacte mesurée sur
   la maquette article, appliquée uniquement dans le contexte de ce template. */

.sylius-article .flexible-ressources {
    background: #E6F0FF;
}

/* ── FAQ (optionnel) ──────────────────────────────────────────────────────── */
/* Style propre, classes .faq-accordion-item conservées pour le toggle JS sitewide
   (js/index.js) — les classes .faq/.content-wrapper du thème n'ont pas de style de
   base hors de leur contexte d'origine (68px de h2, pas de centrage...). */

.sylius-article__faq {
    background: var(--color-blue-light);
    padding: 56px 20px;
}

.sylius-article__faq-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.sylius-article__faq-titre {
    font-family: 'Proxima Nova', sans-serif;
    font-weight: 700;
    font-size: 32px;
    color: var(--color-black);
    text-align: center;
    margin: 0 0 32px;
}

.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Item fermé : carte blanche. Item actif : seul le bandeau question passe en navy,
   la réponse reste sur le fond de la section (pas dans la carte) — comme la maquette. */

.faq-accordion-item {
    padding: 0;
    border-bottom: none;
    border-radius: var(--radius-card);
    overflow: hidden;
}

/* Neutralise l'icône "+" (rotée en croix quand .active) du thème sur .faq-accordion-header
   — on affiche notre propre chevron SVG à la place. */
.faq-accordion-header::after {
    content: none;
}

.faq-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    background: var(--color-white);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card, 0 2px 8px rgba(0, 0, 0, 0.06));
    font-weight: 500;
    font-size: 16px;
    color: var(--color-black);
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base);
}

.faq-accordion-item.active .faq-accordion-header {
    background: var(--color-heading-blue);
    color: var(--color-white);
}

.faq-accordion-chevron {
    flex-shrink: 0;
    color: var(--color-gray-medium);
    transition: transform var(--transition-base), color var(--transition-base);
}

.faq-accordion-item.active .faq-accordion-chevron {
    color: var(--color-white);
    transform: rotate(180deg);
}

.faq-accordion-body {
    margin-top: 0;
    padding: 12px 24px 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-black);
}

.faq-accordion-item:not(.active) .faq-accordion-body {
    display: none;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    /* Le sommaire n'a d'utilité que placé AVANT le contenu (il sert à y naviguer) ;
       l'auteur reste pertinent après (une bio se lit après l'article). On dissout
       .sylius-article__sidebar (display: contents) pour repositionner ses deux
       enfants indépendamment dans la grille, sans dupliquer le HTML. */
    .sylius-article__layout {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .sylius-article__sidebar {
        display: contents;
    }

    .sylius-article__sommaire {
        order: -1;
        width: 100%;
        box-sizing: border-box;
    }

    .sylius-article__auteur {
        width: 100%;
        box-sizing: border-box;
    }

    .sylius-article__sommaire-list {
        max-height: none;
    }
}

@media (max-width: 600px) {
    .sylius-article__header .sylius-article__title {
        font-size: 28px;
    }

    .sylius-article__content h2 {
        font-size: 22px;
    }

    .sylius-article__layout {
        padding: 16px 16px 40px;
    }

    /* Encadrés différenciés : icône au-dessus du texte plutôt que côte à côte */
    .sylius-insert--info,
    .sylius-insert--vigilance,
    .sylius-insert--bonne-pratique,
    .sylius-insert--conseil,
    .sylius-insert--definition {
        flex-direction: column;
        padding: 16px;
    }

    .sylius-insert--citation {
        padding: 20px;
    }

    .sylius-insert__citation-texte {
        font-size: 16px;
    }

    /* Chiffres clés : un seul par ligne plutôt que côte à côte */
    .sylius-insert__chiffre {
        flex: 1 1 100%;
    }

    .sylius-insert__chiffre-valeur {
        font-size: 28px;
    }

    .sylius-cta-inline .primary-button {
        width: 100%;
        text-align: center;
    }
}