/**
 * C2S — Blog CSS
 * Chargé sur :
 *   - pages/blog/page-blog.php  (page Blog WP, listing — legacy)
 *   - single.php                (single article — refondu v4.51.4)
 *
 * IMPORTANT — Variables --space-X disponibles dans global.css :
 *   1, 2, 3, 4, 6, 8, 10, 12, 16, 20, 24, 30
 *   (PAS de 5, 7, 9, 11, 14… → ne JAMAIS les utiliser ici).
 *
 * Sommaire :
 *   1. Page Blog (listing) — legacy
 *   2. Single Article
 *      2.1 Layout principal (article + grid 2 cols + sticky)
 *      2.2 Hero (split texte + image)
 *      2.3 Article meta + breadcrumb
 *      2.4 Contenu article — centré, max-width 70ch
 *      2.5 CTA 3-pack — couleurs distinctes, anim sur le bouton
 *      2.6 Sidebar cards (Kinsta, Newsletter, Widgets)
 *      2.7 Author Knowledge Graph
 *      2.8 Responsive
 */


/* ================================================================
   1. PAGE BLOG (listing) — legacy
   ================================================================ */
.c2s-page-blog .c2s-hero {
    padding-block: var(--space-20) var(--space-12);
}

.c2s-blog-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--space-8);
}

.c2s-blog-card {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    transition: transform var(--duration-base) var(--ease-out-expo),
                box-shadow var(--duration-base) var(--ease-out-expo);
}

.c2s-blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

.c2s-blog-card__thumb img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.c2s-blog-card__body { padding: var(--space-6); }

.c2s-blog-card__title {
    font-size: var(--18px-size);
    margin-bottom: var(--space-2);
}

.c2s-blog-card__title a:hover { color: var(--color-primary); }

.c2s-blog-card__excerpt {
    font-size: var(--14px-size);
    color: var(--color-body-light);
    margin: 0;
}


/* ================================================================
   2. SINGLE ARTICLE
   ================================================================ */

.c2s-page-article { background-color: var(--color-bg); }

.c2s-article { position: relative; }

/* Eyebrow universel des cards / sections */
.c2s-sidebar-card__eyebrow {
    font-size: var(--12px-size);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-primary);
    margin: 0;
}


/* --- 2.1 Layout principal — sidebars 2.5 cols / contenu 6 cols centrées ---
   Grille fr asymétrique : 5fr / 1fr / 12fr / 1fr / 5fr  (= 24fr unités)
   ── 5/24  = 2.5/12   pour les sidebars
   ── 12/24 = 6/12     pour le contenu (centré)
   ── 1/24  = 0.5/12   en gap visuel de chaque côté du contenu */
.c2s-article__body {
    /* Padding-block = 1 colonne du système */
    padding-top: calc(var(--col) * 1);
    padding-bottom: calc(var(--col) * 1);
    /* Counter pour les blurbs Divi convertis en .c2s-feature-block
       (rendu : numéro au-dessus du H3 + paragraphe, type "1 / Crawl
       et indexation / texte…"). Reset une fois par article. */
    counter-reset: c2s-article-blurb;
}

/* ==========================================================
   FEATURE BLOCK numéroté (blurbs Divi convertis dans articles)
   ----------------------------------------------------------
   Pattern : H2 "Comment faire du SEO ?" → suite de
   .c2s-feature-block, chacun avec un H3 + paragraphe.
   Le numéro est généré via CSS counter (pas de hard-code
   dans le contenu), au-dessus du H3.
   ========================================================== */
.c2s-article__body .c2s-feature-block {
    counter-increment: c2s-article-blurb;
    position: relative;
    padding: var(--space-8) 0 var(--space-4);
    border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.c2s-article__body .c2s-feature-block::before {
    content: counter(c2s-article-blurb, decimal-leading-zero);
    display: block;
    font-size: var(--20px-size);
    font-weight: 500;
    line-height: 1;
    color: var(--color-primary, #0056ff);
    letter-spacing: -0.02em;
    margin-bottom: var(--space-2);
}

.c2s-article__body .c2s-feature-block__title {
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--color-heading);
    margin: 0;
}

.c2s-article__body .c2s-feature-block > p {
    margin: 0;
}

/* Grille body = pattern 12 cols système (cf. c2s-theme.mdc).
   Sidebars 2 cols chacune (cols 1-2 et 11-12) ; contenu 6 cols centrées
   (cols 4-9) ; 1 col de gap entre chaque (cols 3 et 10).
   → 2 + 1 + 6 + 1 + 2 = 12 cols, alignement pile sur Shift+G. */
.c2s-article__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.5em;
    row-gap: var(--space-12);
    /* PAS de align-items: start sinon les sidebars (grid items) se réduisent
       à la hauteur de leur contenu et le `position: sticky` de l'inner
       n'a plus d'espace pour scroller. */
}

/* Sidebar GAUCHE — 2 cols (cols 1-2) */
.c2s-article__sidebar--left {
    grid-column: 1 / span 2;
    min-width: 0;
}

/* Contenu CENTRE — 6 cols centrées (cols 4-9), 2 cols de gap effectif
   chaque côté (sidebar 2 + gap 1) */
.c2s-article__content {
    grid-column: 4 / span 6;
    min-width: 0;
}

/* Sidebar DROITE — 2 cols (cols 11-12) */
.c2s-article__sidebar--right {
    grid-column: 11 / span 2;
    min-width: 0;
}

/* Sticky (les sidebars restent visibles pendant la lecture).
   `top` = padding système 1.5 colonne pour bien décoller du menu fixed. */
.c2s-article__sidebar-inner {
    position: sticky;
    top: calc(var(--col) * 1.5);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* Wrapper "centré au site" pour CTA bottom + Auteur — 6 cols centrées
   (cols 4-9, MÊME ALIGNEMENT que le main content article) */
.c2s-article__centered {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.5em;
}

.c2s-article__centered > * {
    grid-column: 4 / span 6;
    min-width: 0;
}


/* --- 2.2 Hero (FOND NOIR, split texte + image, 1 col padding chaque côté) --- */
.c2s-article__hero {
    /* Fond noir de la marque — texte blanc à l'intérieur */
    background-color: var(--color-heading);
    color: var(--white);
    /* Padding-block = 1.5 colonne du système */
    padding-top: calc(var(--col) * 1.5);
    padding-bottom: calc(var(--col) * 1.5);
}

/* Grille hero = pattern 12 cols STRICTEMENT IDENTIQUE à l'overlay
   Shift+G (`/grid-overlay/grid-test.css`) : `repeat(12, 1fr); gap: 1.5em`
   directement enfant de `.container` (`padding-inline: 1.5em`).
   → s'aligne PILE-POIL sur l'overlay. */
.c2s-article__hero-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.5em;
    align-items: center;
    margin-top: var(--space-4);
}

/* 1 COL DE PADDING DE CHAQUE CÔTÉ (cols 1 et 12 vides) — contenu sur
   cols 2-11 = 10 cols utilisables, dont 1 col de respiration entre
   le texte et le média (col 7) :
     col 1   = padding gauche (1 col vide)
     cols 2-6 = texte (5 cols)
     col 7   = gap interne (1 col vide)
     cols 8-11 = média (4 cols)
     col 12  = padding droit (1 col vide)
   → 1 + 5 + 1 + 4 + 1 = 12 ✓ — aligné PILE aux colonnes Shift+G. */
.c2s-article__hero-text {
    grid-column: 2 / span 5;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.c2s-article__hero-media {
    grid-column: 8 / span 4;
    min-width: 0;
    border-radius: 1.25em;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    /* Pas de background : on laisse le fond noir du hero apparaître pendant
       le chargement de l'image (sinon flash blanc avant l'animation). */
    background-color: transparent;
}

/* Sans média : le texte s'étend sur 8 cols (toujours cols 2-9, 1 col
   padding gauche, 3 cols de respiration à droite). */
.c2s-article__hero:not(.has-media) .c2s-article__hero-text {
    grid-column: 2 / span 8;
}

.c2s-article__hero-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.c2s-article__hero-cat-tag {
    font-size: var(--12px-size);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-primary);
    margin: 0 0 var(--space-1) 0;
}

/* Titre hero — BLANC sur fond noir */
.c2s-article__hero-title {
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--white);
    margin: 0;
    max-width: 16ch;
}

.c2s-article__hero-lede {
    font-size: var(--16px-size);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    max-width: 55ch;
    margin: 0;
}


/* --- 2.3 Breadcrumb (Yoast SEO) ---
   Yoast émet : <span class="breadcrumb"><span><span><a>…</a></span> → <span>…</span></span></span>
   On force toutes les variantes (Yoast et fallback) à un même style sobre. */
.c2s-article__breadcrumb {
    font-size: var(--14px-size);
    color: rgba(255, 255, 255, 0.7);
}

/* Yoast wrapper (.breadcrumb_yoast émis par notre wrapper PHP) */
.c2s-article__breadcrumb-yoast {
    display: block;
}

/* Liens du breadcrumb (Yoast OU fallback) */
.c2s-article__breadcrumb a,
.c2s-article__breadcrumb-link {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color var(--duration-fast) ease;
}

.c2s-article__breadcrumb a:hover,
.c2s-article__breadcrumb-link:hover {
    color: var(--white);
}

/* Élément courant (page actuelle) */
.c2s-article__breadcrumb .breadcrumb_last,
.c2s-article__breadcrumb-current {
    color: var(--white);
    font-weight: 500;
}

/* Séparateurs Yoast (→) et fallback (/) */
.c2s-article__breadcrumb-sep { opacity: 0.4; }

/* Fallback list */
.c2s-article__breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.c2s-article__breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* Animation char-stagger sur les liens du breadcrumb (fallback) */
.c2s-article__breadcrumb-link [data-button-animate-chars] {
    overflow: hidden;
    position: relative;
    display: inline-block;
}

.c2s-article__breadcrumb-link [data-button-animate-chars] span {
    display: inline-block;
    position: relative;
    text-shadow: 0px 1.3em currentColor;
    transform: translateY(0em) rotate(0.001deg);
    transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

@media (hover: hover) and (pointer: fine) {
    .c2s-article__breadcrumb-link:hover [data-button-animate-chars] span {
        transform: translateY(-1.3em) rotate(0.001deg);
    }
}

/* Article meta — fond noir hero, texte clair */
.c2s-article__meta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--14px-size);
    color: rgba(255, 255, 255, 0.7);
    padding-block: var(--space-3);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    width: fit-content;
    margin-top: var(--space-2);
}

.c2s-article__meta-item { display: inline-flex; align-items: baseline; gap: var(--space-2); }
.c2s-article__meta-label { opacity: 0.55; font-weight: 500; }
.c2s-article__meta-value { color: var(--white); font-weight: 500; }
.c2s-article__meta-sep { opacity: 0.3; }


/* --- 2.4 Contenu article (typographie WP/Gutenberg) --- */
.c2s-article__content {
    font-size: var(--16px-size);
    line-height: 1.7;
    color: var(--color-body);
}

.c2s-article__content > * + * {
    margin-top: var(--space-4);
}

.c2s-article__content p {
    font-size: inherit;
    line-height: inherit;
    color: var(--color-body);
    margin-bottom: 0;
}

.c2s-article__content h2 {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--color-heading);
    margin-top: var(--space-10);
    margin-bottom: var(--space-2);
}

.c2s-article__content h3 {
    font-size: clamp(1.25rem, 1.8vw, 1.5rem);
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--color-heading);
    margin-top: var(--space-8);
    margin-bottom: var(--space-2);
}

.c2s-article__content h4 {
    font-size: var(--18px-size);
    line-height: 1.3;
    color: var(--color-heading);
    margin-top: var(--space-6);
    margin-bottom: var(--space-2);
}

/* Liens dans le contenu :
   - couleur orange + soulignement classique (toujours visibles)
   - hover : char-stagger comme `.twostep-nav__link` du menu, mais avec
     `clip-path: inset(0)` au lieu de `overflow: hidden` → le wrapper
     inline-block garde la baseline du texte interne (pas de décalage
     vers le haut comme dans la précédente itération).
   - Pattern HTML produit par filtre PHP + bouton.js :
       <a><span data-button-animate-chars><span>T</span><span>e</span>…</span></a> */

.c2s-article__content a:not(.c2s-cta-3pack__card):not(.c2s-cta-mid__card):not(.c2s-cta-mid__hero),
.c2s-page-basic__content a,
.c2s-outil-fiche__content a:not(.c2s-cta-3pack__card):not(.c2s-cta-mid__card):not(.c2s-cta-mid__hero) {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
}

/* Wrapper inline-block (data-button-animate-chars).
   IMPORTANT : on utilise `clip-path: inset(0)` et NON `overflow: hidden`.
   `overflow: hidden` sur un inline-block fait passer la baseline au bottom
   margin edge → décale tout le wrapper vers le HAUT par rapport au texte
   inline qui l'entoure. `clip-path` ne crée pas de nouveau formatting
   context et préserve la baseline naturelle (= baseline du texte interne). */
.c2s-article__content a:not(.c2s-cta-3pack__card):not(.c2s-cta-mid__card):not(.c2s-cta-mid__hero) [data-button-animate-chars],
.c2s-page-basic__content a [data-button-animate-chars],
.c2s-outil-fiche__content a:not(.c2s-cta-3pack__card):not(.c2s-cta-mid__card):not(.c2s-cta-mid__hero) [data-button-animate-chars] {
    display: inline-block;
    position: relative;
    clip-path: inset(0);
    vertical-align: baseline;
    line-height: inherit;
}

/* Char-spans (créés par bouton.js) — translatent au hover. */
.c2s-article__content a:not(.c2s-cta-3pack__card):not(.c2s-cta-mid__card):not(.c2s-cta-mid__hero) [data-button-animate-chars] > span,
.c2s-page-basic__content a [data-button-animate-chars] > span,
.c2s-outil-fiche__content a:not(.c2s-cta-3pack__card):not(.c2s-cta-mid__card):not(.c2s-cta-mid__hero) [data-button-animate-chars] > span {
    display: inline-block;
    position: relative;
    text-shadow: 0px 1.3em currentColor;
    transform: translateY(0em) rotate(0.001deg);
    transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

@media (hover: hover) and (pointer: fine) {
    .c2s-article__content a:not(.c2s-cta-3pack__card):not(.c2s-cta-mid__card):not(.c2s-cta-mid__hero):hover [data-button-animate-chars] > span,
    .c2s-page-basic__content a:hover [data-button-animate-chars] > span,
    .c2s-outil-fiche__content a:not(.c2s-cta-3pack__card):not(.c2s-cta-mid__card):not(.c2s-cta-mid__hero):hover [data-button-animate-chars] > span {
        transform: translateY(-1.3em) rotate(0.001deg);
    }
}

.c2s-article__content strong,
.c2s-article__content b {
    color: var(--color-heading);
    font-weight: 600;
}

.c2s-article__content ul,
.c2s-article__content ol {
    padding-left: 1.4em;
    margin-block: var(--space-3);
}

.c2s-article__content ul { list-style: disc; }
.c2s-article__content ol { list-style: decimal; }

.c2s-article__content li {
    margin-bottom: var(--space-1);
    color: var(--color-body);
}

.c2s-article__content li::marker { color: var(--color-primary); }

.c2s-article__content blockquote {
    border-left: 3px solid var(--color-primary);
    padding: var(--space-4) var(--space-6);
    margin-block: var(--space-6);
    background-color: var(--color-bg-alt);
    border-radius: 0 0.75em 0.75em 0;
    font-style: italic;
    font-size: var(--18px-size);
    line-height: 1.5;
    color: var(--color-heading);
}

.c2s-article__content blockquote p { margin: 0; }

.c2s-article__content code {
    background-color: var(--color-heading);
    color: var(--white);
    padding: 0.15em 0.4em;
    border-radius: 0.3em;
    font-size: 0.9em;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.c2s-article__content pre {
    background-color: var(--color-heading);
    color: var(--white);
    padding: var(--space-6);
    border-radius: 0.75em;
    overflow-x: auto;
    font-size: var(--14px-size);
    line-height: 1.6;
    margin-block: var(--space-6);
}

.c2s-article__content pre code {
    background: none;
    padding: 0;
    border-radius: 0;
}

.c2s-article__content img,
.c2s-article__content figure img,
.c2s-article__content .wp-block-image img {
    width: 100%;
    height: auto;
    border-radius: 0.75em;
    display: block;
    margin-block: var(--space-6);
}

.c2s-article__content figure { margin-block: var(--space-6); }

.c2s-article__content figcaption,
.c2s-article__content .wp-block-image figcaption {
    font-size: var(--14px-size);
    color: var(--color-body-light);
    text-align: center;
    margin-top: var(--space-2);
}

.c2s-article__content hr {
    border: none;
    height: 1px;
    background-color: var(--color-separator);
    margin-block: var(--space-10);
}

.c2s-article__content table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--space-6);
    font-size: var(--14px-size);
}

.c2s-article__content table th,
.c2s-article__content table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-separator);
    text-align: left;
}

.c2s-article__content table th {
    font-weight: 600;
    color: var(--color-heading);
    background-color: var(--color-bg-alt);
}


/* ============================================================
   2.5 CTA 3-pack
   - 3 cards aux couleurs distinctes (plus de noir-sur-noir)
   - Animation char-stagger UNIQUEMENT sur le label du bouton bas
   - Espacements généreux
   ============================================================ */
.c2s-cta-3pack {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.c2s-cta-3pack__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 32ch;
}

.c2s-cta-3pack__title {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-heading);
    margin: 0;
}

.c2s-cta-3pack__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

/* ---- Variants nombre de cards (feature flags theme/zloop bottom) ---- */
.c2s-cta-3pack--cards-2 .c2s-cta-3pack__grid {
    grid-template-columns: repeat(2, 1fr);
}
.c2s-cta-3pack--cards-1 .c2s-cta-3pack__grid {
    grid-template-columns: 1fr;
    max-width: 720px;
}

/* === Card de base === */
.c2s-cta-3pack__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-8);
    background-color: var(--white);
    border: 1px solid var(--color-border);
    border-radius: 1.25em;
    color: var(--color-heading);
    text-decoration: none;
    overflow: hidden;
    min-height: 280px;
    transition: border-color 0.4s var(--ease-out-expo),
                transform 0.5s var(--ease-out-expo),
                box-shadow 0.5s var(--ease-out-expo);
}

@media (hover: hover) and (pointer: fine) {
    .c2s-cta-3pack__card:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 44px -16px rgba(0, 0, 0, 0.18);
    }
}

/* Card head : eyebrow gauche + cercle flèche droite */
.c2s-cta-3pack__card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.c2s-cta-3pack__card-eyebrow {
    font-size: var(--12px-size);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0;
    opacity: 0.7;
    color: inherit;
}

.c2s-cta-3pack__card-arrow {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 99px;
    border: 1px solid currentColor;
    color: inherit;
    opacity: 0.5;
    flex-shrink: 0;
    transition: opacity 0.4s var(--ease-out-expo),
                background-color 0.4s var(--ease-out-expo),
                color 0.4s var(--ease-out-expo),
                border-color 0.4s var(--ease-out-expo);
}

.c2s-cta-3pack__card-arrow svg {
    width: 14px;
    height: auto;
    display: block;
    transition: transform 0.5s var(--ease-out-expo);
}

@media (hover: hover) and (pointer: fine) {
    .c2s-cta-3pack__card:hover .c2s-cta-3pack__card-arrow {
        opacity: 1;
        background-color: currentColor;
        border-color: currentColor;
    }
    .c2s-cta-3pack__card:hover .c2s-cta-3pack__card-arrow svg {
        transform: translateX(2px);
    }
}

/* Card body : titre + description (PAS d'animation char ici) */
.c2s-cta-3pack__card-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex: 1 1 auto;
}

.c2s-cta-3pack__card-title {
    font-size: var(--20px-size);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.015em;
    margin: 0;
    color: inherit;
}

.c2s-cta-3pack__card-desc {
    font-size: var(--14px-size);
    line-height: 1.55;
    color: inherit;
    opacity: 0.7;
    margin: 0;
}

/* Card CTA — c'est ICI qu'on anime au hover (logique : c'est l'action) */
.c2s-cta-3pack__card-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--12px-size);
    font-weight: 500;
    color: inherit;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid currentColor;
    width: 100%;
}

.c2s-cta-3pack__card-cta [data-button-animate-chars] {
    overflow: hidden;
    position: relative;
    display: inline-block;
    line-height: 1.3;
}

.c2s-cta-3pack__card-cta [data-button-animate-chars] span {
    display: inline-block;
    position: relative;
    text-shadow: 0px 1.3em currentColor;
    transform: translateY(0em) rotate(0.001deg);
    transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

.c2s-cta-3pack__card-cta svg {
    margin-left: auto;
    transition: transform 0.5s var(--ease-out-expo);
}

@media (hover: hover) and (pointer: fine) {
    .c2s-cta-3pack__card:hover .c2s-cta-3pack__card-cta [data-button-animate-chars] span {
        transform: translateY(-1.3em) rotate(0.001deg);
    }
    .c2s-cta-3pack__card:hover .c2s-cta-3pack__card-cta svg {
        transform: translateX(3px);
    }
}

/* === Variant Contact (NOIR + halo orange — CTA principal, comme Kinsta) === */
.c2s-cta-3pack__card--contact {
    background-color: var(--color-heading);
    color: var(--white);
    border-color: var(--color-heading);
}

.c2s-cta-3pack__card--contact::before {
    content: "";
    position: absolute;
    top: -25%;
    right: -25%;
    width: 22em;
    height: 22em;
    background: radial-gradient(circle, rgba(255, 113, 34, 0.40) 0%, rgba(255, 113, 34, 0) 60%);
    pointer-events: none;
    z-index: 0;
}

.c2s-cta-3pack__card--contact > * {
    position: relative;
    z-index: 1;
}

/* TOUS les enfants textuels en blanc (titre, desc, eyebrow, label CTA) */
.c2s-cta-3pack__card--contact .c2s-cta-3pack__card-title,
.c2s-cta-3pack__card--contact .c2s-cta-3pack__card-desc,
.c2s-cta-3pack__card--contact .c2s-cta-3pack__card-eyebrow,
.c2s-cta-3pack__card--contact .c2s-cta-3pack__card-cta {
    color: var(--white);
}

@media (hover: hover) and (pointer: fine) {
    .c2s-cta-3pack__card--contact:hover {
        border-color: var(--color-primary);
        box-shadow: 0 18px 44px -14px rgba(255, 113, 34, 0.55);
    }
    .c2s-cta-3pack__card--contact:hover .c2s-cta-3pack__card-arrow {
        background-color: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--white);
    }
}

/* === Variant SEO Zloop (BLEU + texte blanc) === */
.c2s-cta-3pack__card--seo {
    background-color: rgba(0, 86, 255, 0.94);
    color: var(--white);
    border-color: rgba(0, 86, 255, 0.94);
}

.c2s-cta-3pack__card--seo .c2s-cta-3pack__card-title,
.c2s-cta-3pack__card--seo .c2s-cta-3pack__card-desc,
.c2s-cta-3pack__card--seo .c2s-cta-3pack__card-eyebrow,
.c2s-cta-3pack__card--seo .c2s-cta-3pack__card-cta {
    color: var(--white);
}

@media (hover: hover) and (pointer: fine) {
    .c2s-cta-3pack__card--seo:hover {
        box-shadow: 0 18px 44px -14px rgba(0, 86, 255, 0.55);
    }
    .c2s-cta-3pack__card--seo:hover .c2s-cta-3pack__card-arrow {
        background-color: var(--white);
        border-color: var(--white);
        color: rgba(0, 86, 255, 1);
    }
}

/* === Variant Thème WP (NOIR du site + texte blanc) === */
.c2s-cta-3pack__card--theme {
    background-color: var(--color-heading);
    color: var(--white);
    border-color: var(--color-heading);
}

.c2s-cta-3pack__card--theme .c2s-cta-3pack__card-title,
.c2s-cta-3pack__card--theme .c2s-cta-3pack__card-desc,
.c2s-cta-3pack__card--theme .c2s-cta-3pack__card-eyebrow,
.c2s-cta-3pack__card--theme .c2s-cta-3pack__card-cta {
    color: var(--white);
}

@media (hover: hover) and (pointer: fine) {
    .c2s-cta-3pack__card--theme:hover {
        box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.45);
    }
    .c2s-cta-3pack__card--theme:hover .c2s-cta-3pack__card-arrow {
        background-color: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--white);
    }
}

/* ============================================================
   2.5b CTA MID — injecté à 50% de l'article, AVANT un H2
   ============================================================
   Format différent du 3-pack :
   ┌─────────────────────────────────────┐
   │   GRANDE CARD : "Démarrer un projet" │  full width
   └─────────────────────────────────────┘
   ┌─────────────────┬─────────────────┐
   │   Zloop SEO     │  Thème WordPress │  2 cards
   └─────────────────┴─────────────────┘
*/
.c2s-cta-mid {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-block: var(--space-12);
}

/* IMPORTANT — Override des règles génériques `.c2s-article__content h2/h3/p`
   qui s'appliquent au CTA mid (inséré via the_content). On reset margins ET
   on force des couleurs explicites par classe pour que tout reste lisible. */
.c2s-article__content .c2s-cta-mid h2,
.c2s-article__content .c2s-cta-mid h3,
.c2s-article__content .c2s-cta-mid p,
.c2s-cta-mid h2,
.c2s-cta-mid h3,
.c2s-cta-mid p {
    margin: 0;
}

/* Forçage de la visibilité (override du anti-FOUC text-reveal qui cache certains
   éléments tant qu'ils n'ont pas été splitted par GSAP). */
.c2s-cta-mid h2,
.c2s-cta-mid h3,
.c2s-cta-mid p {
    visibility: visible !important;
    animation: none !important;
}

/* Forçage des couleurs avec !important + valeurs brutes — battre toute la cascade WP */
.c2s-cta-mid__hero-title {
    color: #ffffff !important;
    font-size: clamp(1.5rem, 2.6vw, 2.25rem) !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    max-width: 18ch;
    margin: 0 !important;
}
.c2s-cta-mid__hero-desc {
    color: rgba(255, 255, 255, 0.85) !important;
    margin: 0 !important;
}
.c2s-cta-mid__hero-eyebrow {
    color: #FF7122 !important;
    margin: 0 !important;
}

.c2s-cta-mid__card-title {
    color: #ffffff !important;
    font-size: var(--20px-size) !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    margin: 0 !important;
}
.c2s-cta-mid__card-desc {
    color: rgba(255, 255, 255, 0.85) !important;
    margin: 0 !important;
}
.c2s-cta-mid__card-eyebrow {
    color: #ffffff !important;
    margin: 0 !important;
}

/* Liens CTA mid : pas le style "lien content" (orange + underline) */
.c2s-article__content a.c2s-cta-mid__card,
.c2s-article__content a.c2s-cta-mid__hero {
    text-decoration: none;
    /* Pas de color: inherit ici sinon les variantes (--seo / --theme) sont
       écrasées et le label "Voir l'outil" / "Découvrir" devient invisible
       (gris foncé sur fond bleu/noir). Les .c2s-cta-mid__card--XXX
       gardent leur color: var(--white). */
}

/* Card commune */
.c2s-cta-mid__card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--space-8);
    border-radius: 1.25em;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform var(--duration-base) var(--ease-out-expo),
                box-shadow var(--duration-base) var(--ease-out-expo);
    gap: var(--space-6);
    min-height: 220px;
}

@media (hover: hover) and (pointer: fine) {
    .c2s-cta-mid__card:hover {
        transform: translateY(-3px);
    }
}

/* HERO du CTA mid (full width, "Démarrer un projet") — noir + halo orange */
.c2s-cta-mid__hero {
    background-color: var(--color-heading);
    color: var(--white);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    min-height: 260px;
}

.c2s-cta-mid__hero::before {
    content: "";
    position: absolute;
    top: -25%;
    right: -15%;
    width: 30em;
    height: 30em;
    background: radial-gradient(circle, rgba(255, 113, 34, 0.45) 0%, rgba(255, 113, 34, 0) 60%);
    pointer-events: none;
    z-index: 0;
}

.c2s-cta-mid__hero > * {
    position: relative;
    z-index: 1;
}

.c2s-cta-mid__hero-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex: 1;
    min-width: 0;
}

.c2s-cta-mid__hero-eyebrow {
    font-size: var(--12px-size);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 500;
    color: var(--color-primary);
    margin: 0;
}

.c2s-cta-mid__hero-title {
    font-size: clamp(1.5rem, 2.6vw, 2.25rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--white);
    margin: 0;
    max-width: 18ch;
}

.c2s-cta-mid__hero-desc {
    font-size: var(--14px-size);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
    max-width: 50ch;
}

.c2s-cta-mid__hero-cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    background-color: var(--color-primary);
    color: var(--white);
    border-radius: 99px;
    font-weight: 500;
    font-size: var(--14px-size);
    transition: background-color var(--duration-base) var(--ease-out-expo);
}

@media (hover: hover) and (pointer: fine) {
    .c2s-cta-mid__hero:hover .c2s-cta-mid__hero-cta {
        background-color: var(--white);
        color: var(--color-primary);
    }
}

/* Animation char-stagger sur le label CTA */
.c2s-cta-mid__hero-cta [data-button-animate-chars],
.c2s-cta-mid__card-cta [data-button-animate-chars] {
    overflow: hidden;
    position: relative;
    display: inline-block;
}

.c2s-cta-mid__hero-cta [data-button-animate-chars] span,
.c2s-cta-mid__card-cta [data-button-animate-chars] span {
    display: inline-block;
    position: relative;
    text-shadow: 0px 1.3em currentColor;
    transform: translateY(0em) rotate(0.001deg);
    transition: transform 0.55s cubic-bezier(0.625, 0.05, 0, 1);
}

@media (hover: hover) and (pointer: fine) {
    .c2s-cta-mid__hero:hover .c2s-cta-mid__hero-cta [data-button-animate-chars] span,
    .c2s-cta-mid__card:hover .c2s-cta-mid__card-cta [data-button-animate-chars] span {
        transform: translateY(-1.3em) rotate(0.001deg);
    }
}

/* Grid des 2 sub-cards */
.c2s-cta-mid__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

/* Quand le toggle Theme WP est OFF → 1 seule sous-card (Zloop) en pleine largeur */
.c2s-cta-mid__grid--single {
    grid-template-columns: 1fr;
}

.c2s-cta-mid__card-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.c2s-cta-mid__card-eyebrow {
    font-size: clamp(1.125rem, 1.6vw, 1.5rem);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
    color: #ffffff;
}

.c2s-cta-mid__card-title {
    font-size: var(--20px-size);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.015em;
    margin: 0;
}

.c2s-cta-mid__card-desc {
    font-size: var(--14px-size);
    line-height: 1.55;
    margin: 0;
    opacity: 0.78;
}

.c2s-cta-mid__card-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 500;
    font-size: var(--14px-size);
    margin-top: var(--space-2);
    /* Force la couleur blanche pour rester visible sur les fonds bleu/noir
       des sub-cards (Zloop, Theme WordPress) — au cas où une règle parent
       force un color inherit. */
    color: var(--white) !important;
}

.c2s-cta-mid__card-cta svg {
    color: var(--white);
    fill: currentColor;
}

/* Variantes couleurs des sub-cards */
.c2s-cta-mid__card--seo {
    background-color: rgba(0, 86, 255, 0.94);
    color: var(--white);
}

.c2s-cta-mid__card--theme {
    background-color: var(--color-heading);
    color: var(--white);
}


/* ============================================================
   2.6 Sidebar cards
   ============================================================ */
.c2s-sidebar-card {
    position: relative;
    padding: var(--space-8);
    border-radius: 1.25em;
    border: 1px solid var(--color-border);
    background-color: var(--white);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    flex-shrink: 0;
}

/* Kinsta — fond BLANC harmonisé avec les autres cards (Newsletter, Widgets).
   Le seul élément orange/blanc reste le bouton (data-theme="primary"). */
.c2s-sidebar-kinsta {
    /* Hérite de .c2s-sidebar-card : background blanc + border-color border */
    color: var(--color-body);
}

/* Halo orange diffus en haut à droite — discret pour rappeler l'identité
   Kinsta sans dominer la carte blanche. */
.c2s-sidebar-kinsta::before {
    content: "";
    position: absolute;
    top: -60%;
    right: -30%;
    width: 16em;
    height: 16em;
    background: radial-gradient(circle, rgba(255, 113, 34, 0.18) 0%, rgba(255, 113, 34, 0) 65%);
    pointer-events: none;
}

.c2s-sidebar-kinsta > * {
    position: relative;
    z-index: 1;
}

.c2s-sidebar-kinsta__title {
    font-size: var(--18px-size);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: var(--color-heading);
    margin: 0;
}

.c2s-sidebar-kinsta__desc {
    font-size: var(--14px-size);
    line-height: 1.55;
    color: var(--color-body-light);
    margin: 0;
}

/* Bouton Kinsta — c2s-btn data-theme="dark" :
   - pre-hover : fond NOIR + texte BLANC (lisible sur carte blanche)
   - hover    : btn__circle ORANGE s'agrandit → fond orange
   On override le hover du theme dark qui passe le texte en noir : ici
   le user veut le texte du bouton TOUJOURS BLANC (seul élément qui
   reste blanc dans la carte). */
.c2s-sidebar-kinsta__btn.c2s-btn {
    margin-top: var(--space-2);
    width: 100%;
    justify-content: space-between;
    transition: background-color var(--duration-base) var(--ease-out-expo),
                color var(--duration-base) var(--ease-out-expo);
}

/* Sidebar Zloop (fiches outils single — pousse l'outil maison) */
.c2s-sidebar-zloop {
    color: var(--color-body);
    position: relative;
    overflow: hidden;
}
.c2s-sidebar-zloop::before {
    content: "";
    position: absolute;
    top: -60%;
    right: -30%;
    width: 16em;
    height: 16em;
    background: radial-gradient(circle, rgba(255, 171, 0, 0.22) 0%, rgba(255, 171, 0, 0) 65%);
    pointer-events: none;
}
.c2s-sidebar-zloop > * {
    position: relative;
    z-index: 1;
}
.c2s-sidebar-zloop__title {
    font-size: var(--18px-size);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: var(--color-heading);
    margin: 0 0 var(--space-3);
}
.c2s-sidebar-zloop__desc {
    font-size: var(--14px-size);
    line-height: 1.55;
    color: var(--color-body-light);
    margin: 0 0 var(--space-5);
}
.c2s-sidebar-zloop__btn.c2s-btn {
    width: 100%;
    justify-content: space-between;
}

@media (hover: hover) and (pointer: fine) {
    /* Garde le texte BLANC au hover (override de la règle theme="dark"
       qui le passe en var(--color-heading) sur les autres boutons). */
    .c2s-sidebar-kinsta__btn.c2s-btn:hover .c2s-btn__text,
    .c2s-sidebar-kinsta__btn.c2s-btn:hover .c2s-btn__label {
        color: var(--white);
    }
}

/* Newsletter */
.c2s-sidebar-news__title {
    font-size: var(--18px-size);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: var(--color-heading);
    margin: 0;
}

.c2s-sidebar-news__desc {
    font-size: var(--14px-size);
    line-height: 1.55;
    color: var(--color-body-light);
    margin: 0;
}

.c2s-sidebar-news__form {
    margin-top: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Champ : input + bouton flèche posés sur la même ligne dans une pilule */
.c2s-sidebar-news__field {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: 99px;
    padding: 4px 4px 4px var(--space-4);
    background-color: var(--color-bg);
    transition: border-color var(--duration-base) var(--ease-out-expo);
}

.c2s-sidebar-news__field:focus-within {
    border-color: var(--color-heading);
}

.c2s-sidebar-news__input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0.7em 0;
    font-size: var(--14px-size);
    color: var(--color-heading);
    min-width: 0;
}

.c2s-sidebar-news__input::placeholder {
    color: var(--color-body-light);
    opacity: 0.6;
}

/* Bouton submit newsletter — réplique le pattern `.c2s-btn__icon` du site :
   1 wrapper carré + tunnel `__icon-wrap` (overflow hidden) + 2 flèches
   alignées en `__icon-list`. Au hover :
     • la 1ère flèche translate-X 200% (sort à droite)
     • la 2ème prend sa place naturellement (vient de la gauche)
   Effet : flèche qui « part puis revient » exactement comme c2s-btn. */
.c2s-sidebar-news__submit {
    flex-shrink: 0;
    width: 2.5em;
    height: 2.5em;
    border-radius: 50%;
    background-color: var(--color-heading);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background-color var(--duration-base) var(--ease-out-expo);
}

.c2s-sidebar-news__submit-icon {
    width: 1em;
    height: 1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.c2s-sidebar-news__submit-icon-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.c2s-sidebar-news__submit-icon-list {
    flex: none;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.c2s-sidebar-news__submit-arrow {
    flex: none;
    width: 1em;
    height: 100%;
    padding: 0.2em;
    transition: transform 0.525s cubic-bezier(0.625, 0.05, 0, 1);
}

@media (hover: hover) and (pointer: fine) {
    .c2s-sidebar-news__submit:hover {
        background-color: var(--color-primary);
    }
    /* Comme `.c2s-btn:hover .c2s-btn__arrow { transform: translate(200%, 0) }`. */
    .c2s-sidebar-news__submit:hover .c2s-sidebar-news__submit-arrow {
        transform: translate(200%, 0px);
    }
}

.c2s-sidebar-news__feedback {
    margin: 0;
    font-size: var(--12px-size);
    line-height: 1.4;
    min-height: 1.4em;
    color: var(--color-body-light);
}

.c2s-sidebar-news__feedback.is-success { color: #16a34a; font-weight: 500; }
.c2s-sidebar-news__feedback.is-error   { color: #dc2626; font-weight: 500; }

/* Widgets WP — neutralisation des styles Divi (link link--carpo, .titlenav) */
.c2s-sidebar-widgets__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    font-size: var(--14px-size);
    line-height: 1.5;
}

.c2s-sidebar-widgets__inner > div,
.c2s-sidebar-widgets__inner > section,
.c2s-sidebar-widgets__inner .c2s-widget {
    margin: 0;
    padding: 0;
    background: none;
    box-shadow: none;
    border: none;
}

.c2s-sidebar-widgets__inner h2,
.c2s-sidebar-widgets__inner h3,
.c2s-sidebar-widgets__inner h4,
.c2s-sidebar-widgets__inner .titlenav,
.c2s-sidebar-widgets__inner .c2s-widget__title,
.c2s-sidebar-widgets__inner .widgettitle,
.c2s-sidebar-widgets__inner .widget-title {
    font-size: var(--16px-size);
    font-weight: 600;
    color: var(--color-heading);
    letter-spacing: -0.01em;
    margin: var(--space-2) 0;
    line-height: 1.3;
    text-transform: none;
}

.c2s-sidebar-widgets__inner h2:first-child,
.c2s-sidebar-widgets__inner h3:first-child,
.c2s-sidebar-widgets__inner h4:first-child,
.c2s-sidebar-widgets__inner .titlenav:first-child {
    margin-top: 0;
}

.c2s-sidebar-widgets__inner ul,
.c2s-sidebar-widgets__inner ol {
    list-style: none;
    padding-left: var(--space-4);
    margin: var(--space-1) 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-left: 1px solid var(--color-separator);
}

.c2s-sidebar-widgets__inner ul ul,
.c2s-sidebar-widgets__inner ol ol {
    margin-left: var(--space-2);
}

.c2s-sidebar-widgets__inner li {
    font-size: var(--14px-size);
    color: var(--color-body-light);
    line-height: 1.4;
    margin: 0;
    padding-left: var(--space-2);
}

.c2s-sidebar-widgets__inner p {
    font-size: var(--14px-size);
    color: var(--color-heading);
    margin: 0;
    line-height: 1.4;
}

/* Liens widgets : PAS d'underline de base (force !important car Divi
   peut injecter `text-decoration: underline` sur les liens via son CSS
   global "link link--carpo"). Hover : couleur orange + petit indicateur
   border-bottom (pas underline). */
.c2s-sidebar-widgets__inner a,
.c2s-sidebar-widgets__inner a.link,
.c2s-sidebar-widgets__inner a.link--carpo {
    color: var(--color-heading);
    text-decoration: none !important;
    border-bottom: 1px solid transparent;
    transition: color var(--duration-fast) ease, border-color var(--duration-fast) ease;
    background: none;
    padding: 0;
}

.c2s-sidebar-widgets__inner a:hover,
.c2s-sidebar-widgets__inner a.link:hover,
.c2s-sidebar-widgets__inner a.link--carpo:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    text-decoration: none !important;
}

.c2s-sidebar-widgets__inner span,
.c2s-sidebar-widgets__inner .titlelink {
    font-size: inherit !important;
    font-weight: 500;
}

.c2s-sidebar-widgets__inner br { display: none; }


/* ============================================================
   2.7 Author Knowledge Graph + espacements bas
   ============================================================ */
/* CTA bottom : pas de padding (espacement géré par les sections voisines) */
.c2s-article__cta-bottom { padding-block: 0; }

/* Auteur : padding-top léger (0.5 col) + bottom conséquent (1.5 col) pour
   bien séparer du footer. */
.c2s-article__author-section {
    padding-top: calc(var(--col) * 0.5);
    padding-bottom: calc(var(--col) * 1.5);
}

.c2s-author-kg {
    position: relative;
    padding: var(--space-10);
    border-radius: 1.25em;
    background-color: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.c2s-author-kg::before {
    content: "";
    position: absolute;
    top: -40%;
    right: -10%;
    width: 28em;
    height: 28em;
    background: radial-gradient(circle, rgba(255, 113, 34, 0.10) 0%, rgba(255, 113, 34, 0) 65%);
    pointer-events: none;
    z-index: 0;
}

.c2s-author-kg > * { position: relative; z-index: 1; }

.c2s-author-kg__eyebrow {
    font-size: var(--12px-size);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-heading);
    margin: 0 0 var(--space-6) 0;
}

.c2s-author-kg__grid {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: var(--space-8);
    align-items: center;
}

.c2s-author-kg__photo-wrap {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--color-border);
}

.c2s-author-kg__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Cadrage : on remonte le focus sur la tête (par défaut object-fit
       cadrait au centre, ce qui coupait le haut du visage). */
    object-position: center 18%;
    display: block;
}

.c2s-author-kg__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.c2s-author-kg__name {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-heading);
    margin: 0;
}

.c2s-author-kg__role {
    font-size: var(--14px-size);
    font-weight: 500;
    color: var(--color-heading);
    margin: 0;
}

.c2s-author-kg__bio {
    font-size: var(--16px-size);
    line-height: 1.6;
    color: var(--color-body-light);
    margin: var(--space-1) 0 0 0;
    max-width: 64ch;
}

.c2s-author-kg__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    margin-top: var(--space-3);
}

.c2s-author-kg__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-size: var(--14px-size);
    font-weight: 500;
    color: var(--color-heading);
    text-decoration: none;
    transition: color var(--duration-fast) ease;
}

.c2s-author-kg__link:hover { color: var(--color-primary); }

.c2s-author-kg__link [data-button-animate-chars] {
    overflow: hidden;
    position: relative;
    display: inline-block;
}

.c2s-author-kg__link [data-button-animate-chars] span {
    display: inline-block;
    position: relative;
    text-shadow: 0px 1.3em currentColor;
    transform: translateY(0em) rotate(0.001deg);
    transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

@media (hover: hover) and (pointer: fine) {
    .c2s-author-kg__link:hover [data-button-animate-chars] span {
        transform: translateY(-1.3em) rotate(0.001deg);
    }
}

.c2s-author-kg__link-icon {
    display: inline-block;
    font-size: 0.9em;
    opacity: 0.55;
    transition: transform 0.4s var(--ease-in-out), opacity 0.4s var(--ease-in-out);
}

.c2s-author-kg__link:hover .c2s-author-kg__link-icon {
    opacity: 1;
    transform: translate(3px, -3px);
}


/* ============================================================
   2.8 Responsive
   ============================================================ */
@media screen and (max-width: 1199px) {
    /* Tablet large : on garde la grille 12 cols système, mais on
       élargit le contenu (8 cols) + sidebar droite (3 cols) sur la 1ʳᵉ
       rangée, et la sidebar gauche bascule en bas pleine largeur. */
    .c2s-article__content {
        grid-column: 1 / span 8;
    }
    .c2s-article__sidebar--right {
        grid-column: 10 / span 3;
        grid-row: 1;
    }
    .c2s-article__sidebar--left {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    /* CTA + Auteur : 8 cols centrées au lieu de 6 (cols 3-10) */
    .c2s-article__centered > * {
        grid-column: 3 / span 8;
    }

    .c2s-cta-3pack__grid { gap: var(--space-4); }
    .c2s-cta-3pack__card { padding: var(--space-6); }

    /* CTA mid : hero stack, sub-grid garde 2 cols */
    .c2s-cta-mid__hero {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media screen and (max-width: 991px) {
    .c2s-page-blog .c2s-blog-list {
        grid-template-columns: repeat(2, 1fr);
    }
    .c2s-article__hero-title { max-width: none; }

    /* === LAYOUT BODY MOBILE ===
       Sur mobile, on bascule la grille 12-cols en FLEX COLUMN. Ça permet à
       `order` de fonctionner sans interférence avec les `grid-column` /
       `grid-row` explicites définis aux breakpoints supérieurs (1199px).
       Cascade-safe : les sélecteurs grid-* du desktop restent inertes
       puisque le parent n'est plus un grid container ici. */
    .c2s-article__grid {
        display: flex;
        flex-direction: column;
        gap: var(--space-8);
    }

    /* === REORDER MOBILE ===
       Article (content) → Articles connexes (sidebar-left = widgets/zloop)
       → Sidebar-right (Kinsta puis Newsletter, cf. règle plus bas). */
    .c2s-article__content        { order: 1; width: 100%; }
    .c2s-article__sidebar--left  { order: 2; width: 100%; }
    .c2s-article__sidebar--right { order: 3; width: 100%; }

    .c2s-article__sidebar-inner {
        position: static;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: var(--space-4);
        width: 100%;
    }

    .c2s-article__sidebar-inner > * {
        width: 100%;
    }

    /* Dans la sidebar droite, Kinsta (order 1) avant Newsletter (order 2). */
    .c2s-article__sidebar--right .c2s-sidebar-kinsta { order: 1; }
    .c2s-article__sidebar--right .c2s-sidebar-news   { order: 2; }

    .c2s-article__centered > * {
        grid-column: 1 / -1;
    }

    /* === ESPACEMENTS MOBILE ===
       Sur desktop, .c2s-article__cta-bottom a `padding-block: 0` pour que
       les bordures réveal soient calées sur la grille. En mobile, on
       redonne de l'espace haut/bas pour séparer du body de l'article et de
       la section auteur (sinon "Continuons ensemble" est collé à l'article).

       S'applique aussi à `.c2s-outil-fiche__cta-bottom` (fiches outils SEO)
       et à `.c2s-outil-fiche__author` qui partagent les mêmes layouts. */
    .c2s-article__cta-bottom,
    .c2s-outil-fiche__cta-bottom {
        padding-top: var(--space-12);
        padding-bottom: var(--space-12);
    }

    .c2s-article__author-section,
    .c2s-outil-fiche__author {
        padding-top: var(--space-10);
        padding-bottom: var(--space-16);  /* respiration avant le footer */
    }

    /* Bouton "Voir Kinsta" mobile : pas de margin-top (le bouton se colle au
       texte de la card pour libérer de la place verticale). Le padding
       interne du bouton (.c2s-btn { height: 3em }) reste intact. */
    .c2s-sidebar-kinsta__btn.c2s-btn {
        margin-top: 0;
    }
}

@media screen and (max-width: 991px) {
    /* Hero article : passe en stack vertical dès la tablette (cohérent
       avec le reste du responsive C2S, breakpoint unique 991px).
       Auparavant en 768px, le hero restait en split text+image entre
       768-991px et débordait visuellement (image positionnée hors
       container sur tablette portrait). */
    .c2s-article__hero-grid {
        grid-template-columns: 1fr;
        row-gap: var(--space-6);
    }
    .c2s-article__hero-text,
    .c2s-article__hero-media,
    .c2s-outil-fiche__hero-alts {
        grid-column: 1 / -1;
    }
    .c2s-article__hero-media {
        aspect-ratio: 16 / 9;
        max-width: 100%;
    }

    .c2s-cta-3pack__grid {
        grid-template-columns: 1fr;
    }

    /* CTA mid : sub-grid en 1 col aussi */
    .c2s-cta-mid__grid {
        grid-template-columns: 1fr;
    }

    .c2s-author-kg__grid {
        grid-template-columns: 1fr;
        text-align: left;
        gap: var(--space-6);
    }
    .c2s-author-kg__photo-wrap {
        width: 120px;
        height: 120px;
    }
}

@media screen and (max-width: 767px) {
    .c2s-page-blog .c2s-blog-list { grid-template-columns: 1fr; }

    /* Hero article : padding mobile resserré (haut sous nav, bas avant body).
       Tasking spécifique du brief — s'applique aussi aux fiches outils
       (qui réutilisent .c2s-article__hero) et aux pages basic (idem). */
    .c2s-article__hero {
        padding-top: calc(var(--space-24) + var(--space-2));
        padding-bottom: calc(var(--space-4) + var(--space-2));
    }
    .c2s-article__hero-title {
        font-size: clamp(1.5rem, 7vw, 2rem);
    }
    .c2s-article__hero-lede { font-size: var(--16px-size); }

    .c2s-article__sidebar-inner { flex-direction: column; }

    .c2s-author-kg { padding: var(--space-6); }

    .c2s-cta-3pack__card {
        padding: var(--space-6);
        min-height: 220px;
    }
    .c2s-cta-mid__card { padding: var(--space-6); }
    .c2s-cta-mid__hero { padding: var(--space-6); }
}

@media screen and (max-width: 479px) {
    .c2s-article__breadcrumb-current { max-width: 22ch; }
    .c2s-article__meta { font-size: var(--12px-size); }
}






/* ================================================================
   6. PAGE BLOG (listing simple) — refonte v4.51.27
   Système de colonnes : grille 12 cols à l'intérieur de .container.
   Pas de padding-inline override sur le container.
   Hero + sections : grid-column: 2 / span 10  (1 col gap chaque côté).
   ================================================================ */

.c2s-page-blog { background-color: var(--color-bg); color: var(--color-text); }


/* --- 6.1 Hero (titre + lede) ------------------------------------- */
.c2s-blog-hero {
    padding-top: calc(var(--col) * 2);
    padding-bottom: calc(var(--col) * 1);
    background: var(--color-bg);
}
.c2s-blog-hero__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.5em;
    row-gap: var(--space-6);
}
.c2s-blog-hero__title {
    grid-column: 2 / span 10;
    font-size: clamp(2.75rem, 8vw, 6.5rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.03em;
    margin: 0;
    color: var(--color-heading);
    text-transform: capitalize;
}
.c2s-blog-hero__lede {
    grid-column: 2 / span 8;
    font-size: var(--18px-size);
    line-height: 1.5;
    color: var(--color-body);
    margin: 0;
}
.c2s-blog-hero__lede strong {
    color: var(--color-heading);
    font-weight: 500;
}


/* --- 6.2 Section "Les hubs des articles…" ------------------------ */
.c2s-blog-section {
    padding-top: calc(var(--col) * 1);
    padding-bottom: calc(var(--col) * 1);
}
.c2s-blog-section--last {
    padding-bottom: calc(var(--col) * 2);
}
.c2s-blog-section__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.5em;
    row-gap: calc(var(--col) * 0.5);
}
.c2s-blog-section__title {
    grid-column: 2 / span 10;
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--color-heading);
}


/* --- 6.3 Cards — grid sur les cols 2-11 -------------------------- */
.c2s-page-blog .c2s-blog-list {
    grid-column: 2 / span 10;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
}
.c2s-page-blog .c2s-blog-card {
    background: var(--white);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.c2s-page-blog .c2s-blog-card__thumb {
    display: block;
    overflow: hidden;
    background: rgba(0,0,0,0.04);
}
.c2s-page-blog .c2s-blog-card__thumb img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    transition: transform 0.6s var(--ease-out-expo);
}
.c2s-page-blog .c2s-blog-card:hover .c2s-blog-card__thumb img {
    transform: scale(1.04);
}
.c2s-page-blog .c2s-blog-card__thumb-placeholder {
    display: block;
    width: 100%;
    height: 240px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-heading) 100%);
}
.c2s-page-blog .c2s-blog-card__body {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    flex: 1;
}
.c2s-page-blog .c2s-blog-card__title {
    font-size: var(--20px-size);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-3);
    color: var(--color-heading);
}
.c2s-page-blog .c2s-blog-card__title a { color: inherit; text-decoration: none; }
.c2s-page-blog .c2s-blog-card__excerpt {
    font-size: var(--14px-size);
    line-height: 1.55;
    color: var(--color-body);
    margin: 0 0 var(--space-5);
}
.c2s-page-blog .c2s-blog-card__more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-heading);
    font-size: var(--14px-size);
    font-weight: 500;
    text-decoration: none;
    margin-top: auto;
}
.c2s-page-blog .c2s-blog-card__more svg {
    transition: transform 0.3s var(--ease-out-expo);
}
.c2s-page-blog .c2s-blog-card:hover .c2s-blog-card__more svg {
    transform: translateX(6px);
}


/* --- 6.4 Responsive ---------------------------------------------- */
@media (max-width: 1100px) {
    .c2s-page-blog .c2s-blog-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .c2s-blog-hero__title,
    .c2s-blog-hero__lede,
    .c2s-blog-section__title,
    .c2s-page-blog .c2s-blog-list {
        grid-column: 1 / -1;
    }
    .c2s-page-blog .c2s-blog-list { grid-template-columns: 1fr; gap: var(--space-5); }
    .c2s-page-blog .c2s-blog-card__thumb img,
    .c2s-page-blog .c2s-blog-card__thumb-placeholder { height: 200px; }
}



/* ================================================================
   7. PAGE OUTILS SEO (hub) — refonte v4.51.28
   URL : /seo/outils/   (post 340418, type=page)
   - Hero = markup `.c2s-article__hero` (fond noir, split texte/image,
     padding-inline col, hérite de la section #2 Single Article)
   - Toutes les sections du body sont sur le main content article
     (`.c2s-article__centered > * { grid-column: 4 / span 6 }` = 6 cols
     centrées pile au milieu).
   - Pas de sidebars "pub" sur les côtés.
   ================================================================ */

.c2s-page-article--outils { background: var(--color-bg); color: var(--color-text); }
/* IMPORTANT : on EXCLUT le hero (.c2s-article__hero), sinon on écrase
   son padding-block: calc(var(--col)*1.5) défini en section #2 et le
   hero du hub n'a plus d'air vertical (≠ hero d'article). */
.c2s-page-article--outils .c2s-section:not(.c2s-article__hero) { padding-block: 0; }

/* Le hero hérite tout de .c2s-article__hero (section #2). */

/* --- 7.0 Hero — markup et grid IDENTIQUES à _layout-single.php
       (cf. .c2s-article__hero / .c2s-article__hero-grid plus haut).
       Sans featured image : .c2s-article__hero:not(.has-media) .c2s-article__hero-text
       prend grid-column: 2 / span 8 — pas besoin de styles supplémentaires. */


/* --- 7.1 Spotlight Zloop (PAS de background, contenu sur main content) - */
.c2s-outils__zloop {
    background: var(--color-bg);
    color: var(--color-text);
    padding-top: calc(var(--col) * 1);
    padding-bottom: 0;
}
.c2s-outils__zloop-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
.c2s-outils__zloop-title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0;
    padding-bottom: var(--space-4);
    color: var(--color-heading);
}
.c2s-outils__zloop-intro {
    font-size: var(--18px-size);
    line-height: 1.6;
    margin: 0;
    color: var(--color-body);
}
.c2s-outils__zloop-points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-3);
}
.c2s-outils__zloop-points li {
    font-size: var(--16px-size);
    line-height: 1.55;
    color: var(--color-body);
}
.c2s-outils__zloop-points strong { color: var(--color-heading); font-weight: 600; }
.c2s-outils__zloop-emoji { display: inline-block; margin-right: 0.4em; }
.c2s-outils__zloop-subtitle {
    font-size: var(--20px-size);
    font-weight: 500;
    margin: var(--space-4) 0 0;
    color: var(--color-heading);
}
.c2s-outils__zloop-features {
    list-style: disc;
    padding: 0 0 0 1.2em;
    margin: 0;
    color: var(--color-body);
    font-size: var(--16px-size);
    line-height: 1.6;
}
.c2s-outils__zloop-features li { margin-bottom: 0.3em; }
.c2s-outils__zloop-price {
    font-size: var(--16px-size);
    color: var(--color-body);
    margin: 0;
}
.c2s-outils__zloop-price strong { color: var(--color-heading); font-weight: 600; }
.c2s-outils__zloop-cta { align-self: flex-start; }


/* --- 7.1.b Espacements mobile (≤ 991px) — utilise les variables du système ---
   (--space-12 = 3rem, --space-4 = 1rem ; cohérent avec global.css §1) */
@media screen and (max-width: 991px) {
    .c2s-outils__zloop {
        margin-top: var(--space-12);
    }

    .c2s-outils__zloop-cta.c2s-btn {
        margin-top: var(--space-4);
    }

    .c2s-outils__group-title {
        margin-top: var(--space-12);
    }
}


/* --- 7.2 Groupes d'outils (cards avec logos) sur main content --- */
.c2s-outils__group {
    padding-top: calc(var(--col) * 1);
    /* pas de padding-bottom : on enchaîne les sections naturellement */
}
.c2s-outils__group-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}
.c2s-outils__group-title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--color-heading);
}
.c2s-outils__tools {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}
.c2s-outils__tool {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    overflow: hidden;
    background: var(--white);
    transition: transform var(--duration-base) var(--ease-out-expo),
                box-shadow var(--duration-base) var(--ease-out-expo);
}
.c2s-outils__tool:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.06);
}
.c2s-outils__tool > a {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: 15px;
    height: 100%;
    text-decoration: none;
    color: inherit;
}
.c2s-outils__tool-logo {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(0,0,0,0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-1);
}
.c2s-outils__tool-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
.c2s-outils__tool-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.c2s-outils__tool-name {
    font-size: var(--18px-size);
    font-weight: 500;
    margin: 0;
    letter-spacing: -0.01em;
    color: var(--color-heading);
}
.c2s-outils__tool-tag {
    display: inline-block;
    padding: 0.2em 0.7em;
    background: rgba(0,0,0,0.05);
    border-radius: 999px;
    font-size: var(--12px-size);
    font-weight: 500;
    color: var(--color-body-light);
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.c2s-outils__tool-tag--gratuit  { background: rgba(34,197,94,0.12);   color: rgb(21,128,61); }
.c2s-outils__tool-tag--freemium { background: rgba(255,171,0,0.12);   color: rgb(180,83,9); }
.c2s-outils__tool-tag--payant   { background: rgba(0,0,0,0.06);       color: rgb(50,50,50); }
.c2s-outils__tool-desc {
    margin: 0;
    font-size: var(--14px-size);
    line-height: 1.55;
    color: var(--color-body);
}
.c2s-outils__tool-arrow {
    margin-top: auto;
    align-self: flex-end;
    color: var(--color-primary);
    transition: transform var(--duration-base) var(--ease-out-expo);
}
.c2s-outils__tool:hover .c2s-outils__tool-arrow {
    transform: translateX(6px);
}


/* --- 7.3 FAQ (sur main content article, MÊME WIDTH que les autres) - */
.c2s-outils__faq {
    padding-top: calc(var(--col) * 1);
    /* pas de padding-bottom */
}
.c2s-outils__faq-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}
.c2s-outils__faq-title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--color-heading);
}
.c2s-outils__faq-list {
    border-top: 1px solid var(--color-border);
}
.c2s-outils__faq-item {
    border-bottom: 1px solid var(--color-border);
}
.c2s-outils__faq-trigger {
    display: grid;
    grid-template-columns: 3em 1fr 2em;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
    padding: var(--space-6) 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    color: var(--color-heading);
    font-family: inherit;
}
.c2s-outils__faq-index {
    font-size: var(--12px-size);
    font-weight: 500;
    color: var(--color-body-light);
    letter-spacing: 0.05em;
}
.c2s-outils__faq-q {
    font-size: var(--18px-size);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--color-heading);
}
.c2s-outils__faq-icon {
    width: 18px;
    height: 18px;
    position: relative;
    justify-self: end;
}
.c2s-outils__faq-icon span {
    position: absolute;
    background: var(--color-heading);
    transition: transform var(--duration-base) var(--ease-out-expo),
                opacity var(--duration-base) var(--ease-out-expo);
}
.c2s-outils__faq-icon span:nth-child(1) {
    top: 50%; left: 0; width: 100%; height: 1.5px;
    transform: translateY(-50%);
}
.c2s-outils__faq-icon span:nth-child(2) {
    top: 0; left: 50%; width: 1.5px; height: 100%;
    transform: translateX(-50%);
}
.c2s-outils__faq-item.is-open .c2s-outils__faq-icon span:nth-child(2) {
    opacity: 0;
    transform: translateX(-50%) rotate(90deg);
}
.c2s-outils__faq-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.5s cubic-bezier(0.65,0,0.35,1);
}
.c2s-outils__faq-a {
    margin: 0;
    padding: 0 0 var(--space-6) calc(3em + var(--space-4));
    font-size: var(--16px-size);
    line-height: 1.6;
    color: var(--color-body);
}


/* --- 7.4 CTA bottom + auteur (sur .c2s-article__centered) -------- */
.c2s-outils__cta-bottom {
    padding-top: calc(var(--col) * 1);
    /* pas de padding-bottom */
}


/* --- 7.5 Responsive --------------------------------------------- */
@media (max-width: 768px) {
    .c2s-outils__tools { grid-template-columns: 1fr; }
    .c2s-outils__faq-trigger { grid-template-columns: 2.5em 1fr 1.5em; }
    .c2s-outils__faq-a { padding-left: calc(2.5em + var(--space-4)); }
}




/* ================================================================
   8. PAGE FICHE OUTIL SINGLE — refonte v4.51.28
   URL : /seo/outils/<slug>/   (post_type=page)
   - Hero = markup `.c2s-article__hero` (fond noir, mêmes colonnes
     que le template d'article) MAIS avec :
       · gauche  : logo + breadcrumb + titre + lede + bouton C2S standard
       · droite : "Alternatives à X" + 3 logos cliquables
   - Body : contenu Divi nettoyé centré, 8 cols (2 col gap chaque côté)
   - CTA bottom + auteur : centrés 6 cols
   ================================================================ */

.c2s-outil-fiche { background: var(--color-bg); color: var(--color-text); }


/* --- 8.1 Hero — OVERRIDE de `.c2s-article__hero-grid` :
   2 COLS DE PADDING DE CHAQUE CÔTÉ (cols 1-2 et 11-12 vides).
   Contenu sur cols 3-10 = 8 cols utilisables, dont 1 col de
   respiration entre le texte et les alternatives (col 7) :
     cols 1-2  = padding gauche (2 cols vides)
     cols 3-6  = texte (4 cols)
     col 7     = gap interne (1 col vide)
     cols 8-10 = alternatives (3 cols)
     cols 11-12 = padding droit (2 cols vides)
   → 2 + 4 + 1 + 3 + 2 = 12 ✓ — aligné PILE aux colonnes Shift+G. */
.c2s-outil-fiche__hero .c2s-article__hero-text {
    grid-column: 3 / span 4;
}
.c2s-outil-fiche__hero-alts {
    grid-column: 8 / span 3;
    align-self: center;
    min-width: 0;
}

.c2s-outil-fiche__hero-logo {
    width: clamp(140px, 14vw, 220px);
    margin-bottom: var(--space-3);
}
.c2s-outil-fiche__hero-logo img {
    max-width: 100%;
    height: auto;
    display: block;
    /* fond clair pour les logos colorés sur fond noir */
    background: var(--white);
    padding: var(--space-3) var(--space-4);
    border-radius: 10px;
}
.c2s-outil-fiche .c2s-article__hero-cta-row {
    margin-top: var(--space-4);
}

/* Bloc alternatives : minimaliste, sans bordure ni fond — juste
   un titre + grille de logos cliquables. */
.c2s-outil-fiche__hero-alts-title {
    font-size: var(--14px-size);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.7);
    margin: 0 0 var(--space-5);
}
/* 3 logos sur 3 cols avec `gap: 1.5em` (gap système) → chaque logo
   tombe PILE sur 1 col du système, puisque le wrapper `.c2s-outil-fiche__hero-alts`
   fait 3 cols système (cols 8-10). PAS de max-width pour ne pas
   désaligner les logos des colonnes Shift+G. */
.c2s-outil-fiche__hero-alts-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5em;
}
.c2s-outil-fiche__hero-alts-list li {
    min-width: 0;
}
.c2s-outil-fiche__hero-alts-link {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    width: 100%;
    background: var(--white);
    border-radius: 10px;
    padding: 8px;
    transition: transform var(--duration-base) var(--ease-out-expo),
                box-shadow var(--duration-base) var(--ease-out-expo);
}
.c2s-outil-fiche__hero-alts-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(255,255,255,0.18);
}
.c2s-outil-fiche__hero-alts-link img {
    max-width: 70%;
    max-height: 70%;
    object-fit: contain;
    display: block;
}


/* --- 8.2 Body — contenu Divi nettoyé sur 8 cols centrales -------- */
.c2s-outil-fiche__body {
    padding-top: calc(var(--col) * 1);
    padding-bottom: calc(var(--col) * 1);
}
.c2s-outil-fiche__body-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.5em;
}
/* 6 cols centrales (cols 4-9) — MÊME ALIGNEMENT que `.c2s-article__content`
   → 2 cols de gap effectif chaque côté (sidebar 2 + gap 1) */
.c2s-outil-fiche__content {
    grid-column: 4 / span 6;
    min-width: 0;
}

/* Style des éléments du content Divi nettoyé */
.c2s-outil-fiche__content > * + * { margin-top: var(--space-6); }

.c2s-outil-fiche__content h2,
.c2s-outil-fiche__content h2.titleprice {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-heading);
    margin: var(--space-3) 0 var(--space-6);
    padding-top: 0;
    border-top: 0;
}
/* Section head : étiquette + icône qui précède un H2.titleprice. */
.c2s-outil-fiche__content .c2s-section-head {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: calc(var(--col) * 1) 0 var(--space-3);
    padding: 0.4em 0.9em 0.4em 0.6em;
    background: rgba(255, 171, 0, 0.08);
    border: 1px solid rgba(255, 171, 0, 0.25);
    border-radius: 999px;
    font-size: var(--12px-size);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
}
.c2s-outil-fiche__content .c2s-section-head__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4em;
    height: 1.4em;
    color: var(--color-primary);
}
.c2s-outil-fiche__content .c2s-section-head__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
.c2s-outil-fiche__content .c2s-section-head + h2 {
    margin-top: 0;
}
.c2s-outil-fiche__content > .c2s-section-head:first-child {
    margin-top: 0;
}
.c2s-outil-fiche__content h3 {
    font-size: var(--20px-size);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--color-heading);
    margin: var(--space-6) 0 var(--space-3);
}
.c2s-outil-fiche__content p {
    font-size: var(--16px-size);
    line-height: 1.7;
    color: var(--color-body);
    margin: 0 0 var(--space-4);
}
.c2s-outil-fiche__content a {
    color: #0056FF;
    text-decoration: underline;
}
.c2s-outil-fiche__content a:hover { color: var(--color-heading); }
.c2s-outil-fiche__content ul,
.c2s-outil-fiche__content ol {
    list-style: disc;
    padding-left: 1.5em;
    margin: 0 0 var(--space-4);
    color: var(--color-body);
    line-height: 1.7;
}
.c2s-outil-fiche__content ol { list-style: decimal; }
.c2s-outil-fiche__content ul li,
.c2s-outil-fiche__content ol li { margin-bottom: 0.4em; }
.c2s-outil-fiche__content figure { margin: var(--space-6) 0; }
.c2s-outil-fiche__content figure img,
.c2s-outil-fiche__content figure picture,
.c2s-outil-fiche__content img,
.c2s-outil-fiche__content picture {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}
.c2s-outil-fiche__content strong { font-weight: 600; color: var(--color-heading); }


/* --- 8.2.b Galerie de screenshots de l'outil (ex [et_pb_gallery])
       - 1 page = grille 2x2 (4 images max).
       - Au-delà : pagination dots + flèches (initC2SGalleryPagination).
       - Transition entre pages : fade + slide (translateX 16px).        */
.c2s-outil-fiche__content .c2s-gallery {
    margin: var(--space-8) 0;
    position: relative;
}
.c2s-outil-fiche__content .c2s-gallery__viewport {
    position: relative;
    overflow: hidden;
    min-height: 1px;
}
.c2s-outil-fiche__content .c2s-gallery__page {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}
/* Mode multi-pages : on superpose les pages en absolute, fade between them. */
.c2s-outil-fiche__content .c2s-gallery--paginated .c2s-gallery__page {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    inset: 0;
    transition: opacity var(--duration-base) var(--ease-out-expo),
                transform var(--duration-base) var(--ease-out-expo);
    transform: translateX(16px);
}
.c2s-outil-fiche__content .c2s-gallery--paginated .c2s-gallery__page.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    position: relative;
    transform: translateX(0);
}
.c2s-outil-fiche__content .c2s-gallery__item {
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    background: var(--color-bg-alt);
    aspect-ratio: 16 / 10;
}
.c2s-outil-fiche__content .c2s-gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
    transition: transform 0.6s var(--ease-out-expo);
}
.c2s-outil-fiche__content .c2s-gallery__item:hover .c2s-gallery__img {
    transform: scale(1.04);
}

/* Contrôles pagination : flèches + dots, sous la galerie. */
.c2s-outil-fiche__content .c2s-gallery__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-5);
}
.c2s-outil-fiche__content .c2s-gallery__nav {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-heading);
    transition: background var(--duration-base) var(--ease-out-expo),
                color var(--duration-base) var(--ease-out-expo),
                border-color var(--duration-base) var(--ease-out-expo);
}
.c2s-outil-fiche__content .c2s-gallery__nav:hover {
    background: var(--color-heading);
    color: var(--white);
    border-color: var(--color-heading);
}
.c2s-outil-fiche__content .c2s-gallery__nav--prev .c2s-gallery__nav-icon { transform: rotate(180deg); }
.c2s-outil-fiche__content .c2s-gallery__nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.c2s-outil-fiche__content .c2s-gallery__nav[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}
.c2s-outil-fiche__content .c2s-gallery__dots {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.c2s-outil-fiche__content .c2s-gallery__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 0;
    background: var(--color-border);
    cursor: pointer;
    padding: 0;
    transition: background var(--duration-base) var(--ease-out-expo),
                transform var(--duration-base) var(--ease-out-expo);
}
.c2s-outil-fiche__content .c2s-gallery__dot:hover { background: var(--color-body-light); }
.c2s-outil-fiche__content .c2s-gallery__dot.is-active {
    background: var(--color-heading);
    transform: scale(1.3);
}

/* Compteur numérique "01 / 02" entre les flèches */
.c2s-outil-fiche__content .c2s-gallery__counter {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35em;
    font-family: inherit;
    font-size: var(--14px-size);
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--color-heading);
    font-variant-numeric: tabular-nums;
    min-width: 3.5em;
    justify-content: center;
}
.c2s-outil-fiche__content .c2s-gallery__counter-current {
    font-size: var(--16px-size);
    color: var(--color-primary);
}
.c2s-outil-fiche__content .c2s-gallery__counter-sep {
    color: var(--color-body-light);
    opacity: 0.7;
}
.c2s-outil-fiche__content .c2s-gallery__counter-total {
    color: var(--color-body-light);
}

@media (max-width: 768px) {
    .c2s-outil-fiche__content .c2s-gallery__page { grid-template-columns: 1fr; }
}


/* --- 8.2.c Stats circulaires (ex [et_pb_circle_counter]) — DA C2S */
/*  Pas de border ni de fond ; chaque stat est un grand chiffre en
    primary + label sous-titre. Séparées par un divider vertical fin. */
.c2s-outil-fiche__content .c2s-stats-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: var(--space-8) 0;
    padding: var(--space-6) 0;
    background: transparent;
    border-radius: 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.c2s-outil-fiche__content .c2s-stat-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-3);
    position: relative;
}
.c2s-outil-fiche__content .c2s-stat-circle + .c2s-stat-circle::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    height: 60%;
    width: 1px;
    background: var(--color-border);
    transform: translateY(-50%);
}
.c2s-outil-fiche__content .c2s-stat-circle__num {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--color-primary);
}
.c2s-outil-fiche__content .c2s-stat-circle__num small {
    font-size: 0.35em;
    font-weight: 400;
    color: var(--color-body-light);
    margin-left: 0.1em;
}
.c2s-outil-fiche__content .c2s-stat-circle__label {
    font-size: var(--14px-size);
    font-weight: 500;
    color: var(--color-heading);
    letter-spacing: 0.01em;
}
@media (max-width: 768px) {
    .c2s-outil-fiche__content .c2s-stats-row { grid-template-columns: 1fr; }
    .c2s-outil-fiche__content .c2s-stat-circle + .c2s-stat-circle::before {
        left: 50%; top: 0; height: 1px; width: 60%; transform: translateX(-50%);
    }
}


/* --- 8.2.d Grille fonctionnalités (ex Divi 1/3 × N) — DA C2S ----- */
/*  Design minimaliste : pas de border, pas de fond agressif.
    Numéro/index discret en haut + titre fort + texte body ;
    une fine ligne primaire en haut qui s'élargit au hover (compteur). */
.c2s-outil-fiche__content .c2s-feature-grid {
    display: grid;
    gap: var(--space-6);
    margin: var(--space-8) 0;
    counter-reset: c2s-feat;
}
/* 2 grids consécutives = 2 encarts visuellement séparés
   (ex : "Les formules de prix" 4 cols + "Offre/Rapport/Dispo" 3 cols) */
.c2s-outil-fiche__content .c2s-feature-grid + .c2s-feature-grid {
    margin-top: var(--space-10);
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border);
}
.c2s-outil-fiche__content .c2s-feature-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.c2s-outil-fiche__content .c2s-feature-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.c2s-outil-fiche__content .c2s-feature-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.c2s-outil-fiche__content .c2s-feature-block {
    counter-increment: c2s-feat;
    position: relative;
    padding: var(--space-6) 0 var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    background: transparent;
    border: 0;
    border-radius: 0;
}
.c2s-outil-fiche__content .c2s-feature-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 1.5px;
    background: var(--color-primary);
    transition: width var(--duration-base) var(--ease-out-expo);
}
.c2s-outil-fiche__content .c2s-feature-block:hover::before { width: 64px; }

.c2s-outil-fiche__content .c2s-feature-block::after {
    content: counter(c2s-feat, decimal-leading-zero);
    position: absolute;
    top: var(--space-3);
    right: 0;
    font-size: var(--12px-size);
    font-weight: 500;
    color: var(--color-body-light);
    letter-spacing: 0.08em;
}
.c2s-outil-fiche__content .c2s-feature-block > * { margin: 0; }
.c2s-outil-fiche__content .c2s-feature-block h3,
.c2s-outil-fiche__content .c2s-feature-block h4 {
    font-size: var(--20px-size);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--color-heading);
    border-top: 0;
    padding-top: 0;
    padding-right: 2.5em; /* laisse de la place au compteur en absolu */
}
.c2s-outil-fiche__content .c2s-feature-block p {
    font-size: var(--14px-size);
    line-height: 1.65;
    color: var(--color-body);
}
.c2s-outil-fiche__content .c2s-feature-block ul,
.c2s-outil-fiche__content .c2s-feature-block ol {
    padding-left: 1.2em;
    font-size: var(--14px-size);
    line-height: 1.6;
    margin: 0;
    color: var(--color-body);
}
.c2s-outil-fiche__content .c2s-feature-block li { margin-bottom: 0.4em; }
.c2s-outil-fiche__content .c2s-feature-block li::marker { color: var(--color-primary); }

@media (max-width: 980px) {
    .c2s-outil-fiche__content .c2s-feature-grid--3,
    .c2s-outil-fiche__content .c2s-feature-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .c2s-outil-fiche__content .c2s-feature-grid--2,
    .c2s-outil-fiche__content .c2s-feature-grid--3,
    .c2s-outil-fiche__content .c2s-feature-grid--4 { grid-template-columns: 1fr; }
}


/* --- 8.2.e FAQ — réutilise EXACTEMENT le markup + CSS du hub
       (.c2s-outils__faq*, cf. section #7.3) — rien à styler ici.    */
.c2s-outil-fiche__content .c2s-outil-fiche__faq {
    margin: var(--space-8) 0 0;
    padding-top: 0;
}
.c2s-outil-fiche__content .c2s-outil-fiche__faq .c2s-outils__faq-title {
    margin-bottom: var(--space-6);
}


/* --- 8.3 CTA bottom + auteur ------------------------------------ */
.c2s-outil-fiche__cta-bottom {
    padding-top: calc(var(--col) * 1);
    /* pas de padding-bottom */
}
.c2s-outil-fiche__author {
    padding-top: calc(var(--col) * 1);
    padding-bottom: calc(var(--col) * 1);
}


/* --- 8.4 Responsive --------------------------------------------- */
@media (max-width: 1199px) {
    /* Tablet large : on élargit le content (8 cols centrées) — même
       traitement que `.c2s-article__content` à ce breakpoint. */
    .c2s-outil-fiche__content { grid-column: 3 / span 8; }
}
@media (max-width: 991px) {
    /* Tablet : pleine largeur du container. Le hero stack à 768px. */
    .c2s-outil-fiche__content { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
    /* Mobile : tout pleine largeur. La règle `.c2s-article__hero-grid {
       grid-template-columns: 1fr }` plus haut s'applique aussi à la
       fiche outil (mêmes classes). */
    .c2s-outil-fiche__hero-alts-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ============================================================
   ============================================================
   #9 — PAGE BASIQUE (`_layout-page-basic.php`)
        URLs : /mentions-legales/, /nos-outils/, /auteur/<slug>/

   Strictement aligné sur le système de grille C2S :
     - Hero = markup `.c2s-article__hero` (sans média) → texte sur
       cols 2 / span 8 grâce à la règle `:not(.has-media)`.
     - Body = wrapper grid 12 cols, contenu sur cols 3 / span 8
       (8 cols centrées, 2 cols de respiration de chaque côté).
   ============================================================ */

/* --- 9.1 Body grid ---------------------------------------------- */
.c2s-page-basic__body {
    /* Padding-block en colonnes système. Bottom = 2 cols pour ouvrir
       l'espace avant la section "derniers articles" (et le footer sur
       page basique seule). Top = 1 col, suffisant après le hero noir.
       Mobile : `--col` est rebasé sur `--col-mob` via global.css §8.0
       → padding ≈ 65px / 130px sur 390px viewport, automatique. */
    padding-top: calc(var(--col) * 1);
    padding-bottom: calc(var(--col) * 2);
}

.c2s-page-basic__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.5em;
}

/* Contenu sur 8 cols centrées (cols 3-10). 2 cols de gap chaque côté
   = un peu plus large que .c2s-article__centered (6 cols) pour laisser
   respirer les contenus textuels longs (mentions légales, listes). */
.c2s-page-basic__content {
    grid-column: 3 / span 8;
    min-width: 0;
}

/* --- 9.2 Typo du contenu (s'aligne sur les règles d'article quand
       elles existent — voir section #4 — sinon hérite du global C2S). */
.c2s-page-basic__content > h2 {
    margin-top: var(--space-7);
    margin-bottom: var(--space-4);
}
.c2s-page-basic__content > h3 {
    margin-top: var(--space-6);
    margin-bottom: var(--space-3);
}
.c2s-page-basic__content > p,
.c2s-page-basic__content > ul,
.c2s-page-basic__content > ol {
    margin-bottom: var(--space-4);
}

/* --- 9.3 Liens du body — styles + animation chars-hover sont définis
       en section #4 (factorisés avec `.c2s-article__content a`).
       Rien à dupliquer ici. */

/* --- 9.4 Images du body — on BLOQUE l'animation reveal (sinon les images
       restent invisibles tant que le scroll n'a pas atteint le viewport,
       ce qui est gênant sur des contenus longs / feature-grid figés).
       Ajouté côté JS via `data-no-reveal` injecté par le filtre, mais on
       sécurise aussi côté CSS. */
.c2s-page-basic img,
.c2s-page-basic picture,
.c2s-page-basic figure {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

/* --- 9.5 Responsive --------------------------------------------- */
@media (max-width: 1199px) {
    /* Tablet large : on élargit à 10 cols (cols 2-11), 1 col gap chaque côté. */
    .c2s-page-basic__content { grid-column: 2 / span 10; }
}
@media (max-width: 991px) {
    /* Tablet : pleine largeur du container. */
    .c2s-page-basic__content { grid-column: 1 / -1; }
}


/* ============================================================
   #10 — PAGE AUTEUR (`_layout-author.php`)
        URL : /auteur/<slug>/

   Hérite de tout le système page-basic (hero + body 8 cols).
   Ajoute UNIQUEMENT :
     - une grille des derniers articles publiés par l'auteur
     - styles spécifiques aux cards
   ============================================================ */

/* .c2s-page-author__articles : hérite du padding-block 1col de .c2s-page-basic__body */

.c2s-page-author__articles-title {
    margin-top: 0;
    margin-bottom: var(--space-5);
}

/* Grille pleine largeur du container (cols 1-12), 3 colonnes desktop. */
.c2s-page-author__articles-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5em;
    margin-top: var(--space-4);
}

@media (max-width: 991px) {
    .c2s-page-author__articles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .c2s-page-author__articles-grid { grid-template-columns: 1fr; }
}

/* Card article — flat, fond clair, hover discret (pas le bleu Divi). */
.c2s-page-author__article-card {
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
    color: inherit;
    background: var(--color-bg-soft, #f7f7f5);
    border-radius: 1em;
    overflow: hidden;
    transition: transform 0.4s var(--ease-out-expo, ease-out),
                box-shadow 0.4s var(--ease-out-expo, ease-out);
}
.c2s-page-author__article-card:hover { opacity: 1 !important; }

@media (hover: hover) and (pointer: fine) {
    .c2s-page-author__article-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
    }
}

.c2s-page-author__article-media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-heading);
}
.c2s-page-author__article-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.c2s-page-author__article-body {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.c2s-page-author__article-cat {
    margin: 0;
    font-size: var(--12px-size);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-primary);
}

.c2s-page-author__article-title {
    margin: 0;
    font-size: var(--18px-size);
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-heading);
}


/* ================================================================
   FIX char-stagger sur tactile / mobile / tablette (≤ 991px)

   Problème : 5 contextes du blog (breadcrumb, liens dans le contenu
   article, CTA 3pack, CTA mid, lien auteur KG) ont un
   `text-shadow: 0 1.3em currentColor` desktop pour préparer la
   double-translation hover. Sur tactile l'animation hover ne
   s'exécute jamais → le shadow reste visible et le label apparaît
   en double (texte fantôme sous le vrai). Visuellement = "boutons
   gros" / "texte mal aligné" reportés par le user.

   Fix DRY : on coupe le text-shadow sur tous les conteneurs touchés
   d'un coup, via 4 media-queries équivalentes (couvrir browsers
   anciens + simulateurs DevTools qui matchent (hover:hover) à tort).

   On NE TOUCHE PAS l'animation desktop (le hover continue à marcher
   sur souris fine). On NE TOUCHE PAS le JS. CSS-only.
   ================================================================ */
@media (hover: none),
       (pointer: coarse),
       not all and (hover: hover),
       screen and (max-width: 991px) {
    .c2s-article__breadcrumb-link [data-button-animate-chars] span,
    .c2s-article__content a [data-button-animate-chars] > span,
    .c2s-page-basic__content a [data-button-animate-chars] > span,
    .c2s-outil-fiche__content a [data-button-animate-chars] > span,
    .c2s-cta-3pack__card-cta [data-button-animate-chars] span,
    .c2s-cta-mid__hero-cta [data-button-animate-chars] span,
    .c2s-cta-mid__card-cta [data-button-animate-chars] span,
    .c2s-author-kg__link [data-button-animate-chars] span {
        text-shadow: none !important;
    }
}