/* Medialem — long-form article layout (loaded on page-guide.php views).
   Tokens, chrome, buttons, the .section/.wave rhythm and the closing
   .blog/.final-cta sections live in base.css. So do .page-hero, .crumbs and
   .steps-card, which medialem/landing-hero also renders, and the .stat-grid /
   .figure / .callout components, which now appear on flush pages where this
   sheet never loads. What is left here is what only ArticleView emits: the
   byline chips, the sommaire, the article column and its core-block styling.

   Transcribed from new-design/services/marketplace.html with three deliberate
   departures: the design's `.reveal.in` is `.reveal.visible` here (site.js adds
   `visible`), its `.related` section is the medialem/latest-posts `.blog`
   section, and its re-declarations of h2 / .midcta / .wave-top are dropped so
   base.css stays the single source for those. */

/* ===== BYLINE CHIPS ===== */
.hero-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 600;
    color: #dce9f1;
}

.hero-meta svg {
    flex: none;
}

/* ================= BANDE « FEUILLE DE ROUTE » =================
   Les mêmes entrées que le sommaire, en pleine largeur entre le hero et la
   colonne d'article. Sept étapes dans une carte de 300px se lisaient comme une
   note de bas de page ; c'est le plan de l'article, donc il occupe une bande.
   Numérotées parce que c'est une vraie séquence. */
.steps-band {
    padding: 64px 0 8px;
}

.steps-band .section-head {
    margin-bottom: 34px;
}

.steps-band-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
    list-style: none;
    counter-reset: none;
}

.steps-band-grid li {
    margin: 0;
    padding: 0;
}

.steps-band-grid li::before {
    content: none;
}

.steps-band-grid a {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 16px 18px;
    border: 1.5px solid var(--line);
    border-radius: 16px;
    background: #fff;
    text-decoration: none;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.steps-band-grid a:hover {
    border-color: var(--coral);
    box-shadow: var(--shadow-card);
    transform: translateY(-2px);
}

.steps-band-grid .n {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--mist);
    color: var(--navy);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.9rem;
}

.steps-band-grid a:hover .n {
    background-image: var(--grad-coral);
    color: #fff;
}

.steps-band-grid .t {
    font-weight: 700;
    font-size: 0.97rem;
    color: var(--navy);
    line-height: 1.35;
}

@media (max-width: 640px) {
    .steps-band {
        padding-top: 48px;
    }
}

/* ================= LAYOUT ARTICLE + SOMMAIRE ================= */
.layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 60px;
    align-items: start;
    /* padding-block, not `padding`: also a .container — see .page-hero-grid. */
    padding-block: 56px 88px;
}

.sidebar {
    position: sticky;
    top: 104px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.toc {
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    padding: 24px 22px;
}

.toc p {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--navy);
    margin-bottom: 14px;
}

.toc ol {
    list-style: none;
    position: relative;
}

.toc ol::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 12px;
    bottom: 12px;
    border-left: 3px dotted var(--line);
}

.toc a {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--muted);
    font-weight: 600;
    font-size: 0.88rem;
    padding: 6px 0;
    transition: color 0.15s ease;
}

.toc .n {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 10px;
    position: relative;
    z-index: 1;
    background: #fff;
    border: 2.5px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.72rem;
    color: var(--navy);
    transition: 0.18s ease;
}

.toc a:hover {
    color: var(--coral);
}

/* La chaîne se "remplit" au fil de la lecture (scrollspy dans site.js). */
.toc a.active {
    color: var(--navy);
}

.toc a.active .n {
    border-color: var(--coral);
    background-image: var(--grad-coral);
    color: #fff;
}

.toc .toc-extra {
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1.5px solid var(--line);
}

.toc .toc-extra a {
    padding-left: 2px;
}

.side-cta {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    padding: 26px 24px;
    color: #fff;
    background:
        radial-gradient(300px 180px at 90% -30%, rgba(253, 79, 88, 0.35), transparent 60%),
        linear-gradient(150deg, var(--navy) 10%, var(--navy-mid) 100%);
}

.side-cta h3 {
    color: #fff;
    font-size: 1.08rem;
    margin-bottom: 8px;
}

.side-cta p {
    color: #b9cfdd;
    font-size: 0.88rem;
    margin-bottom: 18px;
}

.side-cta .btn {
    width: 100%;
    padding: 0.75em 1em;
    font-size: 0.92rem;
}

.side-cta small {
    display: block;
    text-align: center;
    color: #9fc0d4;
    margin-top: 10px;
    font-size: 0.78rem;
}

/* ================= TYPOGRAPHIE DE L'ARTICLE ================= */
.article {
    max-width: 760px;
    /* Grid items default to min-width:auto, which lets the 640px-wide tables
       push the column wider than the track instead of scrolling inside their
       own wrapper. */
    min-width: 0;
}

.article > h2 {
    font-size: clamp(1.65rem, 3vw, 2.2rem);
    scroll-margin-top: 110px;
    margin: 64px 0 22px;
}

.article > h3 {
    margin: 34px 0 14px;
    font-size: 1.22rem;
}

.article p {
    margin-bottom: 18px;
}

.article p strong {
    color: var(--navy);
}

.article ul,
.article ol {
    margin: 0 0 22px 0;
    padding-left: 0;
    list-style: none;
}

.article ul > li,
.article ol > li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 11px;
}

/* Puce "maillon" corail. */
.article ul > li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.44em;
    width: 14px;
    height: 9px;
    border: 2.5px solid var(--coral);
    border-radius: 999px;
}

.article ol {
    counter-reset: oli;
}

.article ol > li {
    counter-increment: oli;
    padding-left: 36px;
}

.article ol > li::before {
    content: counter(oli);
    position: absolute;
    left: 0;
    top: 0.12em;
    width: 24px;
    height: 24px;
    border-radius: 9px;
    background: var(--coral-tint);
    color: var(--coral);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.article a:not(.btn) {
    color: var(--navy);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(253, 79, 88, 0.45);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: color 0.15s ease;
}

.article a:not(.btn):hover {
    color: var(--coral);
}

/* Titre d'étape : numéro-maillon + libellé. */
.step-h {
    display: flex;
    align-items: center;
    gap: 18px;
}

.step-h .step-num {
    flex: none;
    width: 58px;
    height: 58px;
    border-radius: 20px;
    background: #fff;
    border: 3px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--navy);
    box-shadow: 0 6px 18px rgba(0, 51, 80, 0.07);
    transition: 0.22s ease;
}

.article > h2:hover .step-num {
    border-color: var(--coral);
    color: #fff;
    background-image: var(--grad-coral);
    transform: rotate(-5deg) scale(1.05);
}

.kicker {
    display: block;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 4px;
}

/* ================= COMPOSANTS D'ARTICLE ================= */

/* Tableaux. Le tableau comparatif met en avant sa première ligne via la classe
   CSS additionnelle `hl-first` du bloc core/table — core ne sait pas poser de
   classe sur un <tr>. */
.article .wp-block-table,
.table-wrap {
    overflow-x: auto;
    margin: 24px 0 30px;
    border: 1.5px solid var(--line);
    border-radius: 16px;
}

.article table {
    border-collapse: collapse;
    width: 100%;
    min-width: 640px;
    font-size: 0.92rem;
}

/* Un bloc core/html peut contenir un <table> nu — pas de <figure> autour, donc
   rien qui puisse défiler, et le min-width ci-dessus pousse la page entière en
   scroll horizontal sous 640px. Sans conteneur à qui confier le débordement,
   la table devient elle-même la boîte scrollable.
   Doit rester après `.article table` : même spécificité, c'est l'ordre qui
   tranche. */
.article > table {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
}

.article thead th {
    background: var(--navy);
    color: #fff;
    text-align: left;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.86rem;
    letter-spacing: 0.03em;
    padding: 14px 18px;
    white-space: nowrap;
    border: 0;
}

.article tbody td {
    padding: 14px 18px;
    border: 0;
    border-top: 1.5px solid var(--line);
    vertical-align: top;
}

.article tbody tr:nth-child(even) {
    background: var(--mist);
}

.article tbody td:first-child {
    font-weight: 700;
    color: var(--navy);
}

.article .hl-first tbody tr:first-child td {
    background: var(--coral-tint);
}

.article .hl-first tbody tr:first-child td:first-child {
    color: var(--coral);
}

/* ---------------------------------------------------------------------------
   Blocs core.

   Le guide marketplace est écrit avec les blocs medialem/*, mais les articles
   du blog sont du Gutenberg core : image, citation, tableau, liste, code. Le
   vocabulaire est court (relevé sur les 140 articles : image 21 articles,
   citation 3, tableau 3, galerie 2, code 1) mais il doit être couvert, sinon
   ces blocs tombent sur les styles par défaut du navigateur.
   --------------------------------------------------------------------------- */

.article > h4 {
    margin: 26px 0 10px;
    font-size: 1.05rem;
    color: var(--navy);
}

/* Images core : même traitement que .figure, cadre clair et légende centrée. */
.article .wp-block-image {
    margin: 34px 0;
}

.article .wp-block-image img {
    height: auto;
    max-width: 100%;
    border-radius: 16px;
}

.article .wp-block-image figcaption,
.article figcaption {
    text-align: center;
    font-size: 0.84rem;
    color: var(--muted);
    margin-top: 10px;
}

/* La colonne fait 760px : « wide » et « full » n'ont nulle part où déborder,
   on les ramène simplement à la largeur du texte. */
.article .alignwide,
.article .alignfull {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.article .aligncenter {
    margin-left: auto;
    margin-right: auto;
}

.article .wp-block-gallery {
    margin: 34px 0;
}

.article .wp-block-gallery img {
    border-radius: 12px;
}

/* Citations. La barre corail reprend celle du .callout. */
.article .wp-block-quote {
    margin: 30px 0;
    padding: 4px 0 4px 22px;
    border-left: 4px solid var(--coral);
    color: var(--navy);
    font-size: 1.06rem;
}

.article .wp-block-quote p:last-child {
    margin-bottom: 0;
}

.article .wp-block-quote cite,
.article .wp-block-pullquote cite {
    display: block;
    margin-top: 10px;
    font-size: 0.86rem;
    font-style: normal;
    color: var(--muted);
}

.article .wp-block-pullquote {
    margin: 38px 0;
    padding: 26px 28px;
    border: 0;
    border-top: 3px solid var(--coral);
    border-bottom: 3px solid var(--coral);
    background: var(--mist);
    text-align: center;
}

.article .wp-block-pullquote p {
    font-family: var(--font-display);
    font-size: 1.25rem;
    line-height: 1.45;
    color: var(--navy);
    margin-bottom: 0;
}

/* Code. Le bloc doit défiler dans sa propre boîte, pas élargir la colonne. */
.article .wp-block-code,
.article pre {
    margin: 26px 0;
    padding: 18px 20px;
    border: 1.5px solid var(--line);
    border-radius: 14px;
    background: var(--mist);
    overflow-x: auto;
    font-size: 0.88rem;
    line-height: 1.6;
}

.article code {
    font-size: 0.9em;
}

.article :not(pre) > code {
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--mist);
    color: var(--navy);
}

.article .wp-block-separator {
    margin: 40px auto;
    border: 0;
    border-top: 1.5px solid var(--line);
    max-width: 120px;
}

/* Embeds : aucun article n'en utilise aujourd'hui, mais un oEmbed collé dans
   l'éditeur ne doit pas casser la grille. */
.article .wp-block-embed {
    margin: 34px 0;
}

.article .wp-block-embed__wrapper {
    position: relative;
}

.article .wp-block-embed iframe {
    max-width: 100%;
}

/* Le .midcta de base.css, resserré pour la colonne d'article. */
.article .midcta {
    padding: 38px 42px;
    /* The article column is the container here; drop the self-width base.css
       gives the band for flush pages. */
    width: auto;
    margin: 44px 0;
}

.article .midcta h3 {
    font-size: 1.35rem;
    max-width: none;
}

.article .midcta p {
    margin: 0;
    /* The column is the constraint here — undo the standalone block's cap. */
    max-width: none;
}

/* Auteur (E-E-A-T). */
.author-box {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    margin: 56px 0 0;
}

.author-box .avatar {
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0e5b85, #003350);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.3rem;
}

.author-box h3 {
    margin-bottom: 2px;
}

.author-box .role {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--coral);
    margin-bottom: 10px;
}

.author-box p {
    color: var(--muted);
    font-size: 0.94rem;
    margin-bottom: 8px;
}

.author-box .date {
    font-size: 0.82rem;
    color: var(--muted);
}

.author-box a {
    color: var(--navy);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.author-box a:hover {
    color: var(--coral);
}

/* ================= RESPONSIVE ================= */
@media (max-width: 1000px) {
    .layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 44px;
    }

    .sidebar {
        position: static;
        order: -1;
    }

    /* Le sommaire n'est masqué que quand la carte du hero le reprend déjà —
       un article sans carte garde le sien, au-dessus du texte. */
    .has-steps-card .toc {
        display: none;
    }

    .side-cta {
        max-width: 400px;
    }
}

@media (max-width: 640px) {
    .author-box {
        flex-direction: column;
    }

    .step-h {
        gap: 14px;
    }

    .step-h .step-num {
        width: 46px;
        height: 46px;
        border-radius: 16px;
        font-size: 1rem;
    }

    .article .midcta {
        padding: 30px 26px;
    }
}