/* ════════════════════════════════════════════════════════════════════
   OVERRIDES.CSS — Retours client v3 (2026-05-18)
   Charte appliquée d'après la maquette Figma + briefs intégration

   Couvre :
   - Alignement gauche par défaut
   - Border-radius CTAs 8px / blocs 12px
   - Margin-bottom containers 1rem (blocs chiffres 2rem)
   - Headers : images en background + titre 40px (sauf home)
   - Citations Poppins light 24px centrées
   - Suppression flèches CTAs
   - Blocs CTA fond vert #3AC056
   - Couleur primaire ajustée #3AC056
   ════════════════════════════════════════════════════════════════════ */

:root {
    /* Couleur primaire ajustée à la maquette */
    --color-primary: #3AC056;
    --color-primary-rgb: 58, 192, 86;
    --color-primary-light: #4FD068;
    --color-primary-dark: #2E9F45;

    /* Border-radius spec */
    --radius-button: 8px;
    --radius-block: 12px;

    /* Espacement vertical sections réduit de moitié (était 6rem) */
    --section-py: 3rem;
}

/* Override toute valeur de section-py dans tous les contextes */
.section { padding: 3rem 0 !important; }
.section-hero { padding: 3rem 0 !important; }
.section-steps { padding: 2.5rem 0 !important; }
.section-cta,
.section.section-cta { padding: 2rem 0 !important; }

@media (max-width: 768px) {
    .section { padding: 2rem 0 !important; }
    .section-hero { padding: 2rem 0 !important; }
}

/* ── Alignement gauche par défaut ────────────────────────────────── */
.section-heading,
.section-subheading {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    max-width: none;
}

.hero-content,
.hero-h1,
.hero-heading,
.hero-subheading {
    text-align: left;
}

.cta-banner,
.cta-card,
.cta-content,
.section-cta .container > * {
    text-align: left;
}

/* Stats blocks (chiffres) */
.section-stats h2,
.section-stats .section-heading,
.stats-grid,
.stats-banner,
.stats-list {
    text-align: left;
}

/* ── Interligne titres ───────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.hero-h1,
.hero-heading,
.section-heading,
.card-title,
.text-image-content h2,
.text-image-content h3 {
    line-height: 1.25;
}

/* ── Headers sauf accueil : titre 40px ───────────────────────────── */
body:not(.page-home) .hero-h1,
body:not(.page-home) .section-hero .hero-heading {
    font-size: 40px;
    line-height: 1.2;
}

/* Sur l'accueil, on garde la grande typo */
body.page-home .hero-h1 {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
}

/* ── Hero avec image en background (et pas dans un container) ───── */
/* Header pleine largeur : pas de border-radius, le visuel occupe toute la
   largeur du site, n'est pas rogné en haut et se fond dans le fond noir
   via un dégradé (cf. maquette). */
.section-hero {
    position: relative;
    background-color: var(--color-bg);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    padding: 6rem 0 5rem;
    min-height: 480px;
    display: flex;
    align-items: center;
    border-radius: 0;
    overflow: hidden;
    /* Pleine largeur : on annule le padding-inline du body (.75rem). */
    margin-left: -.75rem;
    margin-right: -.75rem;
}

.section-hero::before {
    content: none;
}

/* Dégradé de fondu : assombrit le haut (lisibilité du menu), garde le centre
   net, et fait disparaître le visuel dans le noir du site en bas. */
.section-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(to right,
            rgba(0, 0, 0, 0.65) 0%,
            rgba(0, 0, 0, 0.15) 45%,
            rgba(0, 0, 0, 0) 72%),
        linear-gradient(to bottom,
            rgba(0, 0, 0, 0.30) 0%,
            rgba(0, 0, 0, 0) 22%,
            rgba(0, 0, 0, 0) 55%,
            var(--color-bg) 100%);
}

/* ── Wrappers de mise en page : pas de border-radius ─────────────────
   On aplatit uniquement les bandes pleine largeur (sections structurelles).
   Les blocs de contenu imbriqués (cards, tableaux, images, citations,
   pricing, témoignages, etc.) conservent leur border-radius. */
.section-steps,
.section-cta,
.section.section-cta {
    border-radius: 0 !important;
}

.section-hero .container,
.section-hero .hero-inner {
    position: relative;
    z-index: 2;
}

/* L'ancien bloc image distinct est masqué (on utilise le background du section) */
.section-hero .hero-image {
    display: none !important;
}

/* La hero-inner ne doit plus être en 2 colonnes : 1 colonne, alignée à gauche */
.hero-inner {
    grid-template-columns: 1fr !important;
}

.hero-content {
    max-width: 720px;
}

/* ── Sous-titre Hero : toujours en blanc sur toutes les pages ───── */
.section-hero .hero-subheading,
.section-hero .hero-subheading * {
    color: #FFF !important;
}

/* ── CTAs : border-radius 8px + suppression flèches ─────────────── */
.btn,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-dark,
.nav-cta,
a.btn,
button.btn {
    border-radius: var(--radius-button) !important;
}

.btn::after,
.btn-primary::after,
.btn-secondary::after,
.btn-outline::after,
.btn-dark::after,
.hero-content a.btn-primary::after,
.hero-content .btn::after,
.card-link::after,
.text-image-content .btn::after,
.section-cta .btn::after,
.nav-cta svg,
.btn-arrow {
    content: none !important;
    display: none !important;
}

/* Re-supprime aussi les flèches inline SVG dans le CTA header */
.nav-cta {
    border-radius: var(--radius-button) !important;
    gap: 0;
}

/* ── Blocs : border-radius 12px ──────────────────────────────────── */
.card,
.text-image-image,
.hero-image,
.cards-grid.stats-strip .card,
.callout,
.rich-text blockquote,
.rich-text table,
.text-image-image img,
.section-stats .stat-card,
.testimonial-card,
.pricing-card {
    border-radius: var(--radius-block) !important;
}

/* Hero image (si jamais réutilisée) */
.hero-image,
.hero-image img,
.hero-image::after {
    border-radius: var(--radius-block) !important;
}

/* ── Containers : margin-bottom 1rem par défaut ─────────────────── */
.section + .section,
.text-image,
.cards-grid > .card,
.rich-text > *,
.callout,
.text-image-image {
    margin-bottom: 1rem;
}

/* Spécifique blocs chiffres : 2rem */
.section-stats .section-heading,
.section-stats h2,
.section-stats .stats-grid,
.section-stats .stats-list,
.stat-block,
.stat-block-heading,
.stat-block-value {
    margin-bottom: 2rem !important;
}

/* ── Blocs CTA fond vert #3AC056 ─────────────────────────────────── */
.section-cta,
.section.section-cta,
.block-cta-green,
.section-cta-green {
    background: #3AC056 !important;
    color: #0E0F0F !important;
    padding: 4rem 0;
    border-radius: var(--radius-block);
}

.section-cta h2,
.section-cta .section-heading,
.section-cta p,
.section-cta .cta-banner h2 {
    color: #0E0F0F !important;
}

.section-cta .btn,
.section-cta a.btn-primary {
    background: #0E0F0F !important;
    color: #FFFFFF !important;
    border-radius: var(--radius-button) !important;
}

.section-cta .btn:hover {
    background: #1c1f1f !important;
}

/* Outline btn inside .section-cta : transparent bg + white text/border (sections.css
   defines an !important black-on-black rule with higher specificity — beat it here). */
.section-cta .btn-outline,
.section-cta a.btn-outline,
.section-cta .rich-text a.btn-outline {
    background: transparent !important;
    color: #FFFFFF !important;
    border: 1.5px solid #FFFFFF !important;
}
.section-cta .btn-outline:hover,
.section-cta a.btn-outline:hover,
.section-cta .rich-text a.btn-outline:hover {
    background: #FFFFFF !important;
    color: #0E0F0F !important;
}

/* ── Citations Poppins light 24px centrées ──────────────────────── */
.rich-text blockquote,
blockquote {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: 24px;
    line-height: 35px;
    text-align: center !important;
    max-width: 760px;
    /* marge au-dessus pour séparer la citation du texte précédent */
    margin: 3rem auto 1.5rem !important;
    padding: 0;
    background: transparent;
    border-radius: 0;
    border-left: none;
    color: var(--color-text);
}

.rich-text blockquote em,
blockquote em {
    font-style: normal;
}

/* ── Navigation header — CTA "Discuter de votre projet" pill ───── */
.nav-cta {
    padding: .75rem 1.5rem;
    background: var(--color-primary);
    color: #0E0F0F;
    font-weight: 600;
}

.nav-cta:hover {
    background: var(--color-primary-light);
    color: #0E0F0F;
}

/* ── Footer Weaver-fi style (4 col + frise filiales) ────────────── */
.site-footer {
    background: #0A0A0A;
    color: rgba(255,255,255,0.75);
    padding: 4rem 0 0;
    margin-top: 4rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 3rem;
    padding-bottom: 3rem;
}

@media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .footer-grid { grid-template-columns: 1fr; }
}

.footer-brand img.footer-logo-img {
    height: 64px;
    width: auto;
    margin-bottom: 1rem;
}

.footer-brand p {
    color: rgba(255,255,255,0.6);
    font-size: .9rem;
    line-height: 1.55;
    max-width: 280px;
}

.footer-column h4 {
    color: #fff;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 600;
    margin-bottom: 1.25rem;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column li {
    margin-bottom: .65rem;
}

.footer-column a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: .875rem;
    transition: color 200ms ease;
}

.footer-column a:hover {
    color: #fff;
}

.footer-contact {
    grid-column: 1 / -1;
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    font-size: .85rem;
    color: rgba(255,255,255,0.65);
}

.footer-contact a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
}

/* Frise filiales MV Group */
.footer-filiales {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 2rem 0 1.5rem;
    margin-top: 2rem;
}

.footer-filiales-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: rgba(255,255,255,0.6);
    margin-bottom: 1.25rem;
    text-align: center;
}

.footer-filiales-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.footer-filiales-list li {
    flex: 0 0 auto;
    opacity: .85;
    transition: opacity 200ms ease;
}

.footer-filiales-list li:hover { opacity: 1; }

.footer-filiales-list img {
    max-width: 110px;
    height: 28px;
    width: auto;
    filter: brightness(0) invert(1);
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 1.5rem 0;
    color: rgba(255,255,255,0.45);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

/* ── Cards / grids — alignement gauche ─────────────────────────── */
.card,
.card-body,
.card-title,
.card-text,
.cards-grid .card {
    text-align: left;
}

.cards-grid.stats-strip .card {
    border-radius: var(--radius-block);
}

/* ── Cards-grid-12 : layout maquette DM International ────────────
   Layout: 8+4 / 4+8 / 12
   Row 1: Intelligence Pro (span-8) + Immobilier (span-4)
   Row 2: Banque-Assurance (span-4) + Ciblage Particuliers (span-8)
   Row 3: E-commerce (span-12)
   ────────────────────────────────────────────────────────────── */
.section-cards .cards-grid.cards-grid-12,
.cards-grid.cards-grid-12 {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(280px, auto);
    gap: 1.5rem;
    margin-top: 2rem;
}

.cards-grid.cards-grid-12 .card {
    background: #0A0A0A;
    border-radius: var(--radius-block);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Les 2 grosses cards (Intelligence Pro + Ciblage Particuliers) : fond #1A1A1A */
.cards-grid.cards-grid-12 .card.card-span-8 {
    grid-column: span 8;
    background: #1A1A1A;
}

/* Les 3 petites cards (Immo + Banque + E-com) : fond noir */
.cards-grid.cards-grid-12 .card.card-span-4 {
    grid-column: span 4;
    background: #0A0A0A;
}
.cards-grid.cards-grid-12 .card.card-span-12 {
    grid-column: span 12;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
    background: #0A0A0A;
}
.cards-grid.cards-grid-12 .card.card-span-6  { grid-column: span 6; }

.cards-grid.cards-grid-12 .card-label {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: .75rem;
    color: var(--color-primary);
    margin-bottom: .75rem;
    font-weight: 600;
}

.cards-grid.cards-grid-12 .card-title {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 1rem;
    color: var(--color-text);
}

.cards-grid.cards-grid-12 .card.card-span-8 .card-title { font-size: 1.6rem; }
.cards-grid.cards-grid-12 .card.card-span-4 .card-title { font-size: 1.15rem; }

.cards-grid.cards-grid-12 .card-description {
    color: var(--color-text-muted);
    font-size: .9rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.cards-grid.cards-grid-12 .card.card-span-12 .card-body {
    flex: 1 1 auto;
}

.cards-grid.cards-grid-12 .card.card-span-4 .card-description {
    font-size: .85rem;
}

/* Sur les 2 grosses cards : CTA = bouton vert plein */
.cards-grid.cards-grid-12 .card.card-span-8 .card-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--color-primary);
    color: #0E0F0F;
    padding: .85rem 1.5rem;
    border-radius: var(--radius-button);
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    margin-top: auto;
    align-self: flex-start;
    transition: background 200ms ease;
}

.cards-grid.cards-grid-12 .card.card-span-8 .card-link:hover {
    background: var(--color-primary-light);
}

/* Sur les 3 petites cards : CTA = flèche verte seule (sans rond), taille 2.5rem */
.cards-grid.cards-grid-12 .card.card-span-4 .card-link,
.cards-grid.cards-grid-12 .card.card-span-12 .card-link {
    font-size: 0;
    text-decoration: none;
    margin-top: auto;
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--color-primary);
    transition: transform 200ms ease;
    position: relative;
}

.cards-grid.cards-grid-12 .card.card-span-4 .card-link::after,
.cards-grid.cards-grid-12 .card.card-span-12 .card-link::after {
    content: '→' !important;
    display: inline-block !important;
    font-size: 2.5rem;
    line-height: 1;
    color: var(--color-primary);
}

.cards-grid.cards-grid-12 .card.card-span-4 .card-link:hover::after,
.cards-grid.cards-grid-12 .card.card-span-12 .card-link:hover::after {
    transform: translateX(4px);
}

@media (max-width: 1024px) {
    .cards-grid.cards-grid-12 .card.card-span-8,
    .cards-grid.cards-grid-12 .card.card-span-4,
    .cards-grid.cards-grid-12 .card.card-span-12 {
        grid-column: span 12;
        flex-direction: column;
        align-items: stretch;
    }
}

/* ── Steps : 5 colonnes méthode Euroleads (maquette) ──────────── */
.section-steps {
    padding: 5rem 0;
    background: #1A1D21;
    border-radius: var(--radius-block);
    margin: 2rem 0;
}

.section-steps .section-intro {
    color: var(--color-text-muted);
    margin: 1rem 0 3rem;
    max-width: 920px;
    line-height: 1.65;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
}

/* Nombre de colonnes paramétrable par section (champ « Colonnes ») */
.steps-grid--3 { grid-template-columns: repeat(3, 1fr); }
.steps-grid--4 { grid-template-columns: repeat(4, 1fr); }
.steps-grid--5 { grid-template-columns: repeat(5, 1fr); }

.step {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.step-number {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-primary);
    margin-bottom: .25rem;
    letter-spacing: 0.02em;
}

.step-title {
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text);
    margin-bottom: .5rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.step-description {
    color: var(--color-text-muted);
    font-size: .85rem;
    line-height: 1.6;
}

.step-description em { color: var(--color-text); font-style: normal; font-weight: 600; }

@media (max-width: 1024px) {
    .steps-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .steps-grid { grid-template-columns: 1fr; }
}

/* ── Tables (e.g., qsn 2 colonnes) ────────────────────────────── */
.rich-text table.comparison-table {
    border-collapse: collapse;
    width: 100%;
    margin: 1.5rem 0;
    border-radius: var(--radius-block);
    overflow: hidden;
}

.rich-text table.comparison-table th,
.rich-text table.comparison-table td {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    text-align: left;
}

.rich-text table.comparison-table th {
    background: rgba(58,192,86,0.1);
    color: var(--color-primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: .75rem;
}

/* ════════════════════════════════════════════════════════════════════
   HEADER — transparent en haut, plein au scroll, hero derrière le menu
   - En haut de page : background transparent, le visuel du hero est visible
   - Au scroll (classe .scrolled ajoutée par main.js) : on retrouve le look
     actuel (fond sombre + flou + séparateur)
   ════════════════════════════════════════════════════════════════════ */

/* Le header passe en overlay : il chevauche le contenu au lieu de réserver
   sa place, ce qui laisse le hero apparaître derrière le menu. */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 1px solid transparent;
    box-shadow: none;
    transition: background var(--transition),
                -webkit-backdrop-filter var(--transition),
                backdrop-filter var(--transition),
                border-color var(--transition),
                box-shadow var(--transition);
}

.site-header.scrolled {
    background: rgba(0, 0, 0, 0.85);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

/* Sécurité : une page sans hero ne doit pas passer sous le header fixe. */
body:not(.has-hero-header) #main-content {
    padding-top: 4.5rem;
}

/* Pages avec hero : le visuel démarre tout en haut, derrière le menu. */
body.has-hero-header #main-content {
    position: relative;
}

/* Fil d'ariane superposé sur le hero, juste sous le menu. */
body.has-hero-header .breadcrumb {
    position: absolute;
    top: 4.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 3;
    padding-top: .75rem;
    padding-bottom: .75rem;
}
body.has-hero-header .breadcrumb a,
body.has-hero-header .breadcrumb span,
body.has-hero-header .breadcrumb li:not(:last-child)::after {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* ════════════════════════════════════════════════════════════════════
   AJUSTEMENTS DESIGN (home + règles globales factorisées)
   ════════════════════════════════════════════════════════════════════ */

/* ── Alignement gauche par défaut des sous-titres de section ─────────
   (les titres .section-heading sont déjà à gauche ; on complète avec les
   sous-titres et on neutralise le centrage hérité de base.css). */
.section-subtitle {
    text-align: left;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* ── Bloc « chiffres » (table 2 colonnes convertie en cartes stats) ──
   1) marge entre les chiffres et le paragraphe qui suit.
   2) chiffres alignés en haut des cartes (flex column-reverse → flex-end
      pousse le contenu vers le haut). */
.section-text .rich-text > table.comparison-table:first-child:not(:has(thead tr th:nth-child(3))) + p {
    margin-top: 2.5rem;
}
.section-text .rich-text > table.comparison-table:first-child:not(:has(thead tr th:nth-child(3))) > tbody > tr {
    justify-content: flex-end;
}

/* ── Cartes « deux offres » (two-up) : carrés noirs + flèche sur le lien ── */
.cards-grid.two-up .card {
    background: #000000;
}
.cards-grid.two-up .card-link::after {
    content: '→' !important;
    display: inline-block !important;
    transition: transform var(--transition);
}
.cards-grid.two-up .card-link:hover::after {
    transform: translateX(3px);
}

/* ── Bloc CTA : contenu aligné à gauche (comme une section texte) ──── */
.section-cta {
    text-align: left;
}
.section-cta h2,
.section-cta .rich-text {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
}

/* ── Citation (outro des cartes) : Poppins Light 24px, sans italique ── */
.cards-outro blockquote,
.cards-outro blockquote em {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: 24px;
    line-height: 35px;
    font-style: normal;
}

/* ── Variante de fond pour une section texte (administrable via le
   champ « variant » de la section). Ex. fond gris foncé #1A1A1A. ──── */
.section-text--surface {
    background: #1A1A1A;
}

/* ── Cartes par défaut : lien « En savoir plus » aligné en bas ──────
   Cartes de hauteur égale (grille) + lien poussé en bas pour aligner les
   CTA entre eux. Ne s'applique qu'à la grille par défaut (pas aux variantes
   two-up / stacked / stats-strip / cards-grid-12 / cards-five). */
.section-cards .cards-grid:not(.stacked):not(.two-up):not(.stats-strip):not(.cards-grid-12):not(.cards-five) .card {
    display: flex;
    flex-direction: column;
}
.section-cards .cards-grid:not(.stacked):not(.two-up):not(.stats-strip):not(.cards-grid-12):not(.cards-five) .card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.section-cards .cards-grid:not(.stacked):not(.two-up):not(.stats-strip):not(.cards-grid-12):not(.cards-five) .card-body .card-link {
    margin-top: auto;
}

/* Carte entièrement cliquable (data-href ajouté par le template quand un
   lien existe ; le clic est géré par main.js). */
.card[data-href] {
    cursor: pointer;
}

/* ── Bloc CTA : davantage de respiration verticale ─────────────────── */
.section-cta {
    margin-top: 3.5rem;
    margin-bottom: 3.5rem;
}

/* ── Titre des pages de listing (blog) : 40px ──────────────────────── */
.collection-listing h1 {
    font-size: 40px;
}

/* ── Citations : le gras interne reste en Poppins Light ──────────────
   (certaines citations utilisent <strong> ; on force le poids 300 pour
   conserver l'aspect Poppins Light demandé.) */
.rich-text blockquote strong,
blockquote strong {
    font-weight: 300;
}

/* ── Callout « encadré » (type « cas client ») : carte bordée ────────
   Fond sombre, fine bordure verte, coins arrondis, intitulé en tête de
   bloc. Repris du design de carte montré en maquette. */
.callout.callout-boxed {
    background: #0A0A0A;
    border: 1px solid rgba(58, 192, 86, 0.45);
    border-left: 1px solid rgba(58, 192, 86, 0.45);
    border-radius: var(--radius-block);
    padding: 2rem 2.5rem;
}
.callout.callout-boxed > strong:first-child {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 1rem;
}

/* ── Écart resserré titre → grille de cartes (modifier « gap-tight ») ── */
.section-cards .cards-grid.gap-tight {
    margin-top: 28px;
}

/* ── Cartes « cards-grid-12 » avec flèche décorative (modifier ────────
   « cards-arrow » sur la section). Flèche verte sans rond, 2.5rem,
   en bas de chaque carte. */
.cards-grid.cards-grid-12.cards-arrow .card {
    position: relative;
}
.cards-grid.cards-grid-12.cards-arrow .card::after {
    content: '→';
    margin-top: 1.25rem;
    font-size: 2.5rem;
    line-height: 1;
    color: var(--color-primary);
}

/* ── Steps en 3 colonnes : 5 étapes sur 2 lignes, centrées ───────────
   (flex + wrap pour centrer la 2ᵉ ligne, contrairement à la grille). */
.steps-grid--3 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.steps-grid--3 .step {
    flex: 0 0 calc((100% - 3rem) / 3);
    max-width: calc((100% - 3rem) / 3);
}
@media (max-width: 1024px) {
    .steps-grid--3 .step {
        flex-basis: calc((100% - 1.5rem) / 2);
        max-width: calc((100% - 1.5rem) / 2);
    }
}
@media (max-width: 600px) {
    .steps-grid--3 .step { flex-basis: 100%; max-width: 100%; }
}

/* ── Final pass : remove forbidden em dashes via CSS (visual only) ── */
/* (les dashes éventuels dans le texte restent — c'est traité côté contenu) */