/* === css/main.css === */
/**
 * R-Advertising — Styles globaux
 *
 * Variables CSS, reset, typographie, layout, composants communs.
 * Basé sur le design system du site WordPress existant.
 */

/* =============================================================================
   CSS Variables (Design Tokens)
   ============================================================================= */
:root {
    /* Couleurs */
    --color-orange: #e55945;
    --color-vert-fonce: #124014;
    --color-olive: #babf73;
    --color-beige: #fcfaf2;
    --color-anthracite: #212621;
    --color-noir: #000000;
    --color-white: #ffffff;

    /* Typographie */
    --font-family: 'Manrope', sans-serif;
    --font-size-small: 14px;
    --font-size-base: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.5), 18px);
    --font-size-large: clamp(1.875rem, 1.875rem + ((1vw - 0.2rem) * 1.667), 46px);
    --font-size-xlarge: clamp(25px, 1.563rem + ((1vw - 3.2px) * 1.769), 42px);

    /* Espacements */
    --space-xs: 0.44rem;
    --space-sm: 0.67rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2.25rem;
    --space-2xl: 3.38rem;
    --space-3xl: 5.06rem;

    /* Ombres */
    --shadow-natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
    --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.08);

    /* Layout */
    --container-width: 1280px;
    --container-narrow: 860px;

    /* Boutons */
    --btn-radius: 14px;
    --btn-font-size: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.208), 16px);
    --btn-padding: 10px 16px;
    --btn-font-weight: 600;
}

/* =============================================================================
   Background color utilities
   ============================================================================= */
.bg-white       { background-color: var(--color-white); }
.bg-beige       { background-color: var(--color-beige); }
.bg-vert-fonce  { background-color: var(--color-vert-fonce); }
.bg-anthracite  { background-color: var(--color-anthracite); }
.bg-orange      { background-color: var(--color-orange); }

/* Mots colorés dans les textes : syntaxe [couleur]mot[/couleur] (cf. Block::colorText) */
.text-color-orange     { color: var(--color-orange); }
.text-color-olive      { color: var(--color-olive); }
.text-color-vert-fonce { color: var(--color-vert-fonce); }
.text-color-white      { color: var(--color-white); }
.text-color-anthracite { color: var(--color-anthracite); }

/* =============================================================================
   Reset
   ============================================================================= */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-anthracite);
    background: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, video, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

ul, ol {
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

/* =============================================================================
   Typography
   ============================================================================= */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    font-weight: 700;
}

h1 { font-size: var(--font-size-large); }
h2 { font-size: var(--font-size-xlarge); }
h3 { font-size: clamp(20px, 1.25rem + 0.5vw, 26px); }
h4 { font-size: clamp(18px, 1.125rem + 0.3vw, 22px); }

p + p { margin-top: var(--space-md); }

/* =============================================================================
   Layout
   ============================================================================= */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

.container--narrow {
    max-width: var(--container-narrow);
}

main {
    min-height: 50vh;
}

/* =============================================================================
   Buttons
   ============================================================================= */
.btn {
    display: inline-block;
    padding: var(--btn-padding);
    border-radius: var(--btn-radius);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    text-align: center;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    border: 2px solid transparent;
}

.btn--primary {
    background: var(--color-vert-fonce);
    color: var(--color-white);
    border-color: var(--color-vert-fonce);
}
.btn--primary:hover {
    background: #0d2e0f;
    border-color: #0d2e0f;
}

.btn--outline-green {
    background: transparent;
    color: var(--color-vert-fonce);
    border-color: var(--color-vert-fonce);
}
.btn--outline-green:hover {
    background: var(--color-vert-fonce);
    color: var(--color-white);
}

.btn--outline-white {
    background: transparent;
    color: var(--color-white);
    border-color: var(--color-white);
}
.btn--outline-white:hover {
    background: var(--color-white);
    color: var(--color-vert-fonce);
}

.btn--sm {
    padding: 6px 12px;
    font-size: var(--font-size-small);
}

/* =============================================================================
   Header
   ============================================================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--header-bg, var(--color-orange));
    color: var(--color-white);
    transition: background-color 0.3s;
}

/* Couleur du header choisie par la page ($layout['header_color']) */
.has-header-vert-fonce { --header-bg: var(--color-vert-fonce); }

/* Barre d'action fixe en bas d'écran, mobile uniquement ($layout['sticky_cta']) */
.sticky-cta { display: none; }
@media (max-width: 900px) {
    .has-sticky-cta { padding-bottom: 76px; }
    .sticky-cta {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, 0.97);
        border-top: 1px solid #e7e4d8;
        box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.08);
        transition: transform 0.25s ease;
    }
    .sticky-cta.is-hidden { transform: translateY(110%); }
    .sticky-cta__btn {
        display: block;
        width: 100%;
        text-align: center;
        padding: 13px 16px;
        font-weight: 700;
    }
}
@media (prefers-reduced-motion: reduce) {
    .sticky-cta { transition: none; }
}

/* Transparent header — le header se superpose au hero */
.has-transparent-header .site-header {
    position: absolute;
    left: 0;
    right: 0;
    background: transparent;
}

.has-transparent-header .site-header.is-scrolled {
    position: fixed;
    background: var(--header-bg, var(--color-orange));
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0.75rem var(--space-lg);
    gap: var(--space-lg);
}

.header-logo img {
    width: 165px;
    height: auto;
}

/* Logo + pastille « 20 ans » (lien vers /20-ans, FR seulement) */
.header-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.header-anniv {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: 14px;
    color: var(--color-white);
    border-radius: 50%;
}
.header-anniv::before {
    content: '';
    width: 1px;
    height: 34px;
    background: currentColor;
    opacity: .55;
}
.header-anniv svg {
    display: block;
    font-family: inherit;
    transition: transform .25s ease;
}
.header-anniv:hover svg,
.header-anniv:focus-visible svg { transform: rotate(-8deg) scale(1.06); }
@media (prefers-reduced-motion: reduce) {
    .header-anniv svg { transition: none; }
}
/* Étoiles autour de la pastille, une fois par session (main.js → initAnnivSparkle) */
.header-anniv { position: relative; }
.header-anniv.is-sparkling > svg { animation: anniv-pop .7s .5s ease-out; }
.header-anniv__spark {
    position: absolute;
    /* centre de la pastille : trait (1px) + espace (14px) + rayon (20px) */
    left: calc(35px + var(--x));
    top: calc(50% + var(--y));
    width: var(--s);
    height: var(--s);
    margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
    color: var(--color-white);
    pointer-events: none;
    opacity: 0;
    transform: scale(0);
    animation: anniv-spark 1.4s ease-in-out forwards;
}
.header-anniv__spark.is-gold { color: #ffe29a; }
.header-anniv__spark svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, .7));
}
@keyframes anniv-spark {
    0%   { opacity: 0; transform: scale(0) rotate(0); }
    45%  { opacity: 1; transform: scale(1) rotate(90deg); }
    100% { opacity: 0; transform: scale(.2) rotate(180deg); }
}
@keyframes anniv-pop {
    0%, 100% { transform: scale(1); }
    40%      { transform: scale(1.07); }
}

/* Main navigation */
.main-nav { flex: 1; }

.nav-list {
    display: flex;
    gap: var(--space-xs);
    justify-content: center;
}

.nav-item { position: relative; }

.nav-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-white);
    font-size: 15px;
    font-weight: 600;
    padding: 0.5rem 0.75rem;
    white-space: nowrap;
}

.nav-item.has-submenu .nav-link::after {
    display: none;
}

/* =============================================================================
   Minimenu — full-width banner dropdowns (Cas d'usage, Nous découvrir, Ressources)
   ============================================================================= */
.nav-item.has-minimenu { position: static; }

.minimenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    color: var(--color-anthracite);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
    z-index: 110;
}
.minimenu.is-open { display: block; }

.minimenu__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    max-width: 1060px;
    margin: 0 auto;
    padding: var(--space-xl);
}

/* Ressources — 2 items → 2 columns centered */
#minimenu-ressources .minimenu__grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 640px;
}

/* Keyboard accessibility */
.nav-item.has-minimenu:focus-within .minimenu { display: block; }

/* =============================================================================
   Megamenu — Expertises dropdown
   ============================================================================= */
.nav-item.has-megamenu {
    position: static;
}

.megamenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    color: var(--color-anthracite);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
    border-top: 1px solid var(--color-orange);
    z-index: 110;
}

.megamenu.is-open {
    display: block;
}

.megamenu__inner {
    display: flex;
    max-width: 1060px;
    margin: 0 auto;
    min-height: 280px;
}

/* Left column — category list */
.megamenu__categories {
    width: 280px;
    flex-shrink: 0;
    border-right: 1px solid #eee;
    padding: var(--space-lg) 0;
}

.megamenu__cat {
    position: relative;
}

.megamenu__cat a {
    display: block;
    padding: 0.875rem var(--space-xl);
    font-size: 15px;
    font-weight: 600;
    color: var(--color-anthracite);
    transition: color 0.15s, background 0.15s;
}

.megamenu__cat:hover a,
.megamenu__cat.is-active a {
    color: var(--color-orange);
}

.megamenu__cat.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 24px;
    background: var(--color-orange);
    border-radius: 0 3px 3px 0;
}

.megamenu__section-title {
    padding: 0.5rem var(--space-xl) 0.25rem;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #999;
    pointer-events: none;
}
.megamenu__section-title:not(:first-child) {
    margin-top: 0.5rem;
    border-top: 1px solid #eee;
    padding-top: 0.75rem;
}

/* Right column — card panels */
.megamenu__panels {
    flex: 1;
    padding: var(--space-xl);
    position: relative;
}

.megamenu__panel {
    display: none;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    align-content: start;
}

.megamenu__panel.is-active {
    display: grid;
}

/* Card */
.megamenu-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: 10px;
    transition: background 0.15s;
    text-decoration: none;
    color: inherit;
}

.megamenu-card:hover {
    background: var(--color-beige);
}

.megamenu-card__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
}

.megamenu-card__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.megamenu-card__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-anthracite);
    line-height: 1.3;
}

.megamenu-card__desc {
    font-size: 12px;
    line-height: 1.5;
    color: #777;
}

/* Header actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.header-phone {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-white);
    text-decoration: none;
}
.header-phone svg { flex-shrink: 0; }
@media (max-width: 768px) {
    .header-phone__number { display: none; }
}

.lang-switch {
    font-size: 13px;
    font-weight: 700;
    opacity: 0.8;
    padding: 4px 8px;
}
.lang-switch:hover { opacity: 1; }

.header-cta {
    font-size: 13px;
}

/* Burger menu (mobile) */
.burger-menu {
    display: none;
    width: 28px;
    height: 20px;
    position: relative;
}
.burger-menu span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-white);
    position: absolute;
    left: 0;
    transition: transform 0.3s, opacity 0.3s;
}
.burger-menu span:nth-child(1) { top: 0; }
.burger-menu span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.burger-menu span:nth-child(3) { bottom: 0; }

.burger-menu[aria-expanded="true"] span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.burger-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger-menu[aria-expanded="true"] span:nth-child(3) { top: 50%; bottom: auto; transform: translateY(-50%) rotate(-45deg); }

/* =============================================================================
   Footer
   ============================================================================= */
.footer-newsletter {
    background: var(--color-vert-fonce);
    color: var(--color-white);
    padding: var(--space-2xl) var(--space-lg);
    text-align: center;
}
.footer-newsletter__title {
    font-size: clamp(18px, 1.125rem + 0.5vw, 24px);
    margin-bottom: var(--space-xs);
}
.footer-newsletter__form {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}
.footer-newsletter__form input[type="email"] {
    flex: 1;
    padding: 0.625rem 1rem;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: var(--btn-radius);
    background: rgba(255,255,255,0.1);
    color: var(--color-white);
    font-size: 14px;
}
.footer-newsletter__form input::placeholder { color: rgba(255,255,255,0.6); }

.footer-main {
    padding: var(--space-2xl) 0;
}
.footer-main__top {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-2xl);
}

.footer-brand img { width: 460px; height: auto; margin-bottom: var(--space-md); }
.footer-social {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}
.footer-social a {
    color: var(--color-anthracite);
    transition: color 0.2s;
}
.footer-social a:hover { color: var(--color-vert-fonce); }
.footer-tagline {
    font-size: var(--font-size-small);
    color: #666;
}

.footer-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}
.footer-nav h3 {
    font-size: var(--font-size-small);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: var(--space-sm);
    color: var(--color-vert-fonce);
}
.footer-nav a {
    display: block;
    font-size: var(--font-size-small);
    padding: 0.25rem 0;
    color: #555;
    transition: color 0.2s;
}
.footer-nav a:hover { color: var(--color-vert-fonce); }

.footer-certifs {
    display: flex;
    gap: var(--space-xl);
    justify-content: center;
    flex-wrap: wrap;
    padding: var(--space-xl) 0;
    border-top: 1px solid #eee;
    margin-top: var(--space-xl);
}

/* Footer de landing « liens légaux + certifications » : bandeau de certifications seul */
.footer-certifs-only .footer-certifs {
    border-top: 1px solid #eee;
    padding: var(--space-lg) 0;
}
.footer-legal {
    background: var(--color-vert-fonce);
    color: var(--color-white);
    padding: var(--space-sm) 0;
    font-size: 11px;
}
.footer-legal .container {
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
}
.footer-legal a, .footer-legal button {
    color: rgba(255,255,255,0.7);
    font-size: 11px;
    transition: color 0.2s;
}
.footer-legal a:hover, .footer-legal button:hover { color: var(--color-white); }

/* =============================================================================
   Blocks — Common
   ============================================================================= */
.block {
    padding: var(--space-3xl) 0;
}

/* =============================================================================
   Breadcrumb
   ============================================================================= */
.breadcrumb {
    padding: var(--space-md) 0;
    max-width: var(--container-width);
    margin: 0 auto;
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
}
.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    list-style: none;
    font-size: var(--font-size-small);
}
.breadcrumb li:not(:last-child)::after {
    content: '›';
    margin-left: 0.25rem;
    color: #999;
}
.breadcrumb a { color: var(--color-vert-fonce); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span[aria-current] { color: #666; }

/* =============================================================================
   Preview banner
   ============================================================================= */
.preview-banner {
    background: #fef3c7;
    color: #92400e;
    text-align: center;
    padding: 0.5rem;
    font-size: 14px;
    font-weight: 600;
}

/* =============================================================================
   Responsive
   ============================================================================= */
@media (max-width: 1024px) {
    .footer-main__top {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .main-nav { display: none; }
    .burger-menu { display: block; }
    .header-cta { display: none; }

    /* Mobile nav open — logo + burger au-dessus de l'overlay nav */
    body.nav-open .header-logo,
    body.nav-open .header-anniv,
    body.nav-open .header-actions {
        position: relative;
        z-index: 103;
    }
    body.nav-open .main-nav {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--header-bg, var(--color-orange));
        padding: 70px var(--space-lg) var(--space-lg);
        overflow-y: auto;
        z-index: 101;
    }
    body.nav-open .nav-list {
        flex-direction: column;
        gap: 0;
    }
    body.nav-open .megamenu {
        position: static;
        box-shadow: none;
        background: rgba(255,255,255,0.1);
        border-radius: 0;
    }

    /* Minimenu mobile */
    body.nav-open .minimenu {
        position: static;
        box-shadow: none;
        background: rgba(255,255,255,0.1);
        border-radius: 0;
        padding: var(--space-md);
        width: 100%;
        display: none;
    }
    body.nav-open .has-minimenu > .nav-link[aria-expanded="true"] + .minimenu {
        display: block;
    }
    body.nav-open .minimenu__grid {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
    }
    body.nav-open .minimenu .megamenu-card { padding: var(--space-sm) 0; }
    body.nav-open .minimenu .megamenu-card__icon { display: none; }
    body.nav-open .minimenu .megamenu-card__title { color: var(--color-white); }
    body.nav-open .minimenu .megamenu-card__desc { color: rgba(255,255,255,0.7); }
    body.nav-open .minimenu .megamenu-card:hover { background: rgba(255,255,255,0.1); }

    /* Megamenu mobile — vertical layout */
    body.nav-open .megamenu {
        display: none;
    }
    body.nav-open .has-megamenu > .nav-link[aria-expanded="true"] + .megamenu {
        display: block;
    }
    body.nav-open .megamenu__inner {
        flex-direction: column;
        min-height: auto;
    }
    body.nav-open .megamenu__categories {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.15);
        padding: var(--space-sm) 0;
    }
    body.nav-open .megamenu__cat a {
        color: var(--color-white);
        padding: 0.5rem 2rem;
        font-size: 14px;
    }
    body.nav-open .megamenu__cat.is-active a { color: var(--color-white); opacity: 1; }
    body.nav-open .megamenu__cat:not(.is-active) a { opacity: 0.7; }
    body.nav-open .megamenu__cat.is-active::before { background: var(--color-white); }
    body.nav-open .megamenu__section-title {
        color: rgba(255,255,255,0.5);
        padding: 0.25rem 2rem;
        font-size: 10px;
    }
    body.nav-open .megamenu__panels { padding: var(--space-md); }
    body.nav-open .megamenu__panel.is-active { display: flex; flex-direction: column; gap: var(--space-sm); }
    body.nav-open .megamenu-card { padding: var(--space-sm) 0; }
    body.nav-open .megamenu-card__icon { display: none; }
    body.nav-open .megamenu-card__title { color: var(--color-white); }
    body.nav-open .megamenu-card__desc { color: rgba(255,255,255,0.7); }
    body.nav-open .megamenu-card:hover { background: rgba(255,255,255,0.1); }

    .footer-nav {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    .footer-newsletter__form {
        flex-direction: column;
    }
}

/* =============================================================================
   Font face — Manrope
   ============================================================================= */
@font-face {
    font-family: 'Manrope';
    src: url('/assets/fonts/manrope-var.woff2') format('woff2');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

/* === css/blocks/hero-page.css === */
/**
 * Hero Page — Pages internes (services, a propos, juridique)
 *
 * Deux modes :
 * 1. Centré (défaut) — fond beige ou blanc, titre h1 centré, sous-titre.
 * 2. Avec image (.hero-page--with-image) — 2 colonnes : texte à gauche,
 *    image à droite. Reproduit le layout WordPress.
 */

/* =============================================================================
   Layout
   ============================================================================= */
.hero-page {
    padding: var(--space-2xl) 0 var(--space-xl);
}

.hero-page__inner {
    text-align: center;
}

/* =============================================================================
   Breadcrumb override (centered in hero)
   ============================================================================= */
.hero-page .breadcrumb {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: var(--space-md);
}

.hero-page .breadcrumb ol {
    justify-content: center;
}

/* =============================================================================
   Title
   ============================================================================= */
.hero-page__title {
    font-size: var(--font-size-large);
    font-weight: 500;
    color: var(--color-anthracite);
    line-height: 1.15;
    margin-bottom: var(--space-md);
}

.hero-page__title--massive {
    font-size: clamp(42px, 2.625rem + 3vw, 86px);
    font-weight: 500;
    line-height: 1.1;
}

/* =============================================================================
   Subtitle
   ============================================================================= */
.hero-page__subtitle {
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
    color: #555;
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.6;
}

/* =============================================================================
   CTA Buttons
   ============================================================================= */
.hero-page__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

/* Centered variant (no image) — center the buttons */
.hero-page:not(.hero-page--with-image) .hero-page__ctas {
    justify-content: center;
}

/* =============================================================================
   Two-column variant — image on right (matches WordPress layout)
   ============================================================================= */
.hero-page--with-image .hero-page__inner {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.hero-page--with-image .hero-page__subtitle {
    margin: 0;
    max-width: 100%;
}

.hero-page--with-image .breadcrumb ol {
    justify-content: flex-start;
}

.hero-page__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-page__media {
    flex-shrink: 0;
    width: 100%;
}

.hero-page__media img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    object-fit: cover;
}

/* =============================================================================
   Image-left variant — image à gauche, texte à droite
   ============================================================================= */
.hero-page--image-left .hero-page__media {
    order: -1;
}

/* =============================================================================
   Image Mask & Badges (pastilles) — optionnel
   ============================================================================= */

/* Allow badges to overflow the media column */
.hero-page__media--overlay {
    overflow: visible;
}

/* Wrapper — positioning context for badges */
.hero-page__img-wrapper {
    position: relative;
}

/* Mask container */
.hero-page__img-mask {
    display: block;
}

.hero-page__img-mask picture {
    display: block;
}

.hero-page__img-mask img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
}

/* Blob mask shape (400×400 rounded with concave corners) */
.hero-page__img-mask--blob {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='400' height='400' viewBox='0 0 400 400' fill='none' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M361.412 160.016C360.94 160.032 360.467 160.043 359.995 160.043C359.522 160.043 359.05 160.032 358.577 160.016C358.362 160.011 358.147 160 357.933 159.989C336.797 158.919 319.989 141.441 319.989 120.032V40.0108C319.989 17.9134 302.081 0 279.984 0H120.016C97.9192 0 80.0107 17.9134 80.0107 40.0108C80.0107 62.1081 62.1023 80.0215 40.0054 80.0215C17.9084 80.0215 0 97.9349 0 120.032V200C0 222.097 17.9084 240.011 40.0054 240.011C62.1023 240.011 80.0107 257.924 80.0107 280.022V360.043C80.0107 381.452 96.8184 398.93 117.954 400H362.057C383.192 398.93 400 381.452 400 360.043V200C400 178.376 382.854 160.758 361.412 160.016Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='400' height='400' viewBox='0 0 400 400' fill='none' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M361.412 160.016C360.94 160.032 360.467 160.043 359.995 160.043C359.522 160.043 359.05 160.032 358.577 160.016C358.362 160.011 358.147 160 357.933 159.989C336.797 158.919 319.989 141.441 319.989 120.032V40.0108C319.989 17.9134 302.081 0 279.984 0H120.016C97.9192 0 80.0107 17.9134 80.0107 40.0108C80.0107 62.1081 62.1023 80.0215 40.0054 80.0215C17.9084 80.0215 0 97.9349 0 120.032V200C0 222.097 17.9084 240.011 40.0054 240.011C62.1023 240.011 80.0107 257.924 80.0107 280.022V360.043C80.0107 381.452 96.8184 398.93 117.954 400H362.057C383.192 398.93 400 381.452 400 360.043V200C400 178.376 382.854 160.758 361.412 160.016Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}

.hero-page__img-mask--blob img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    max-height: 480px;
}

/* Wave mask — landscape shape with circular cutouts */
.hero-page__img-mask--wave {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 638 383' preserveAspectRatio='none'%3E%3Cpath d='M576.453 0.043C575.699 0.069 574.945 0.086 574.191 0.086C573.438 0.086 572.684 0.069 571.93 0.043C571.588 0.034 571.245 0.017 570.903 0H449.863C449.521 0.017 449.178 0.034 448.835 0.043C448.082 0.069 447.328 0.086 446.574 0.086C445.821 0.086 445.067 0.069 444.313 0.043C410.113 1.227 382.766 29.341 382.766 63.848C382.766 98.354 354.202 127.695 318.957 127.695C283.713 127.695 256.382 100.328 255.191 66.113C255.183 66.457 255.166 66.791 255.149 67.134V60.561C253.478 27.573 226.79 1.193 193.687 0.043C192.933 0.069 192.179 0.086 191.426 0.086C190.672 0.086 189.918 0.069 189.165 0.043C154.965 1.227 127.617 29.341 127.617 63.848C127.617 98.354 99.053 127.695 63.809 127.695C28.564 127.695 0 156.281 0 191.543V319.238C0 353.402 26.808 381.292 60.52 383H449.863C483.575 381.292 510.383 353.402 510.383 319.238C510.383 285.075 538.947 255.391 574.191 255.391C609.436 255.391 638 226.771 638 191.457V63.848C638 29.341 610.652 1.227 576.453 0.043Z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 638 383' preserveAspectRatio='none'%3E%3Cpath d='M576.453 0.043C575.699 0.069 574.945 0.086 574.191 0.086C573.438 0.086 572.684 0.069 571.93 0.043C571.588 0.034 571.245 0.017 570.903 0H449.863C449.521 0.017 449.178 0.034 448.835 0.043C448.082 0.069 447.328 0.086 446.574 0.086C445.821 0.086 445.067 0.069 444.313 0.043C410.113 1.227 382.766 29.341 382.766 63.848C382.766 98.354 354.202 127.695 318.957 127.695C283.713 127.695 256.382 100.328 255.191 66.113C255.183 66.457 255.166 66.791 255.149 67.134V60.561C253.478 27.573 226.79 1.193 193.687 0.043C192.933 0.069 192.179 0.086 191.426 0.086C190.672 0.086 189.918 0.069 189.165 0.043C154.965 1.227 127.617 29.341 127.617 63.848C127.617 98.354 99.053 127.695 63.809 127.695C28.564 127.695 0 156.281 0 191.543V319.238C0 353.402 26.808 381.292 60.52 383H449.863C483.575 381.292 510.383 353.402 510.383 319.238C510.383 285.075 538.947 255.391 574.191 255.391C609.436 255.391 638 226.771 638 191.457V63.848C638 29.341 610.652 1.227 576.453 0.043Z' fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.hero-page__img-mask--wave img {
    aspect-ratio: 638 / 383;
    object-fit: cover;
    max-height: 480px;
}

/* Badges (pastilles) — floating labels on the image */
.hero-badge {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    z-index: 10;
    background: #fff;
    border-radius: 20px;
    padding: 5px 15px 5px 5px;
    box-sizing: border-box;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
    width: 220px;
    gap: 5px;
}

.hero-badge--left {
    top: 3%;
    left: 5%;
}

.hero-badge--right {
    bottom: 21%;
    right: 2%;
}

.hero-badge__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--color-orange);
    padding: 10px;
    box-sizing: border-box;
    height: 46px;
    width: 46px;
    transform: scale(0.7);
    color: var(--icon-color, white);
}

.hero-badge__icon svg {
    width: 26px;
    height: 26px;
    fill: currentColor;
}

.hero-badge__text {
    font-weight: 700;
    line-height: 20px;
    font-size: 12px;
    color: var(--color-anthracite);
}

@media (min-width: 1024px) {
    .hero-badge {
        width: 260px;
        gap: 10px;
        padding: 5px 20px 5px 5px;
    }

    .hero-badge__icon {
        transform: scale(1);
    }

    .hero-badge__text {
        font-size: 14px;
    }
}

/* =============================================================================
   Decorative circle background (motif WordPress)
   ============================================================================= */
.hero-page.has-circle-bg {
    position: relative;
    overflow: hidden;
}

.hero-page.has-circle-bg .hero-page__inner {
    position: relative;
    z-index: 1;
}

.hero-page .circle-bg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    width: min(50vw, 750px);
    pointer-events: none;
    color: #fcfbf2;
}

.hero-page .circle-bg svg {
    width: 100%;
    height: auto;
    display: block;
}

/* =============================================================================
   Responsive
   ============================================================================= */
@media (max-width: 768px) {
    .hero-page {
        padding: var(--space-xl) 0 var(--space-lg);
    }

    .hero-page__subtitle {
        max-width: 100%;
    }
}

@media (min-width: 768px) {
    .hero-page--with-image .hero-page__inner {
        flex-direction: row;
        align-items: center;
        gap: var(--space-2xl);
    }

    .hero-page__text {
        width: 55%;
        flex: none;
    }

    .hero-page__media {
        width: 45%;
    }
}

@media (min-width: 1024px) {
    .hero-page {
        padding: var(--space-3xl) 0 var(--space-2xl);
    }

    .hero-page--with-image .hero-page__inner {
        gap: var(--space-3xl);
    }

    .hero-page__media img {
        border-radius: 20px;
    }
}

/* === css/custom/20-ans.css === */
/**
 * Bloc personnalisé « Ils racontent R » — 20 ans de R-Advertising
 *
 * Mosaïque-trombinoscope qui reprend le motif de la charte (carré + cercle inscrit),
 * projecteur qui fait défiler les voix, mots-clés cliquables, portraits complets en fenêtre.
 *  - Bureau (≥ 1024 px) : 6 colonnes, projecteur 2 × 2 au centre.
 *  - Tablette (720-1023 px) : 4 colonnes, projecteur 2 × 2.
 *  - Mobile (< 720 px) : mosaïque seule ; toucher un visage ouvre directement son portrait,
 *    en panneau qui monte du bas de l'écran (le projecteur est masqué).
 * Toutes les classes sont préfixées r20 : aucun effet sur le reste du site.
 */

.r20 {
    --r20-vert: var(--color-vert-fonce, #124014);
    --r20-corail: var(--color-orange, #e55945);
    --r20-olive: var(--color-olive, #babf73);
    --r20-creme: var(--color-beige, #fcfaf2);
    --r20-anthra: var(--color-anthracite, #212621);
    --r20-trait: #2d5528;
    --r20-ease: cubic-bezier(.2, .7, .2, 1);
    position: relative;
    padding: var(--space-3xl, 5rem) 0;
    background: var(--r20-vert);
    color: var(--r20-creme);
}

/* =============================================================================
   En-tête du bloc
   ============================================================================= */
.r20__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 32px;
    margin-bottom: 36px;
}
.r20__eyebrow {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--r20-corail);
}
.r20__title {
    margin: 0;
    font-size: clamp(32px, 2rem + 2vw, 56px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--r20-creme);
}
.r20__intro {
    max-width: 560px;
    margin: 14px 0 0;
    font-size: 16px;
    line-height: 1.55;
    color: rgba(252, 250, 242, .78);
}
.r20__hint-touch { display: none; }
@media (hover: none) {
    .r20__hint-hover { display: none; }
    .r20__hint-touch { display: inline; }
}

.r20__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.r20__filters button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 16px;
    border: 1px solid rgba(186, 191, 115, .55);
    border-radius: 999px;
    background: transparent;
    color: var(--r20-creme);
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}
.r20__filters button small {
    font-size: 12px;
    opacity: .7;
}
.r20__filters button:hover { border-color: var(--r20-creme); }
.r20__filters button[aria-pressed="true"] {
    background: var(--r20-creme);
    border-color: var(--r20-creme);
    color: var(--r20-vert);
}
.r20__dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.r20__dot--client { background: var(--r20-olive); }
.r20__dot--equipe { background: var(--r20-corail); }

.r20 :focus-visible {
    outline: 3px solid var(--r20-corail);
    outline-offset: 2px;
}

/* =============================================================================
   Scène : projecteur + mosaïque
   ============================================================================= */
.r20__stage {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-flow: dense;
    border-top: 1px solid var(--r20-trait);
    border-left: 1px solid var(--r20-trait);
}
/* La mosaïque laisse ses cellules s'insérer dans la grille de la scène, autour du projecteur */
.r20__grid { display: contents; }

.r20__cell {
    position: relative;
    aspect-ratio: 1 / 1;
    min-width: 0;
    border-right: 1px solid var(--r20-trait);
    border-bottom: 1px solid var(--r20-trait);
}
/* Cercle inscrit du motif de la charte */
.r20__cell::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid var(--r20-trait);
    border-radius: 50%;
    pointer-events: none;
    transition: transform .9s var(--r20-ease), opacity .9s;
}

/* Apparition en cascade quand le bloc entre à l'écran (classe ajoutée par le JS) */
.r20.js .r20__cell::before { transform: scale(.2) rotate(-90deg); opacity: 0; }
.r20.js .r20__cell > * {
    opacity: 0;
    transform: scale(.6);
    transition: opacity .5s var(--r20-ease), transform .6s var(--r20-ease);
}
.r20.js.is-in .r20__cell::before,
.r20.js.is-in .r20__cell > * {
    opacity: 1;
    transform: none;
    transition-delay: calc(var(--d, 0) * 35ms);
}

/* --- Visage --- */
.r20__face {
    all: unset;
    position: absolute;
    inset: 0;
    display: block;
    cursor: pointer;
    border-radius: 50%;
}
.r20__disc {
    position: absolute;
    inset: 11%;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 4px solid transparent;
    border-radius: 50%;
    font-size: clamp(20px, 2.4vw, 34px);
    font-weight: 600;
    transition: transform .45s var(--r20-ease), opacity .35s, filter .35s;
}
.r20__face[data-type="client"] .r20__disc { border-color: var(--r20-olive); color: var(--r20-olive); }
.r20__face[data-type="equipe"] .r20__disc { border-color: var(--r20-corail); color: var(--r20-corail); }
/* Sans photo : initiales dans un cercle cerné, qui se remplit au survol / à l'écoute */
.r20__disc:not(.has-photo) { background: rgba(252, 250, 242, .04); font-weight: 500; letter-spacing: .02em; }
.r20__face[data-type="client"]:is(:hover, :focus-visible, .is-on) .r20__disc:not(.has-photo) { background: var(--r20-olive); color: var(--r20-vert); }
.r20__face[data-type="equipe"]:is(:hover, :focus-visible, .is-on) .r20__disc:not(.has-photo) { background: var(--r20-corail); color: var(--r20-creme); }
.r20__disc img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.05);
    transition: filter .4s, transform .6s var(--r20-ease);
}
/* Anneau en pointillés qui tourne autour de la voix active */
.r20__face::after {
    content: "";
    position: absolute;
    inset: 4%;
    border: 2px dashed var(--r20-olive);
    border-radius: 50%;
    opacity: 0;
    transform: scale(.85);
    transition: opacity .3s, transform .45s var(--r20-ease);
}
.r20__face[data-type="equipe"]::after { border-color: var(--r20-corail); }
.r20__face:hover .r20__disc,
.r20__face:focus-visible .r20__disc,
.r20__face.is-on .r20__disc { transform: scale(1.06); }
.r20__face:hover .r20__disc img,
.r20__face:focus-visible .r20__disc img,
.r20__face.is-on .r20__disc img { filter: none; transform: scale(1.06); }
.r20__face.is-on::after {
    opacity: 1;
    transform: none;
    animation: r20-orbit 14s linear infinite;
}
@keyframes r20-orbit { to { transform: rotate(360deg); } }

/* Nom au survol (bureau) */
.r20__name {
    position: absolute;
    left: 50%;
    bottom: 3%;
    max-width: 96%;
    overflow: hidden;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--r20-creme);
    color: var(--r20-vert);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: 0;
    transform: translate(-50%, 6px);
    transition: opacity .25s, transform .25s;
    pointer-events: none;
    z-index: 1; /* au-dessus de l'anneau en pointillés */
}
.r20__face:hover .r20__name,
.r20__face:focus-visible .r20__name,
.r20__face.is-on .r20__name {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Voix hors filtre ou hors mot-clé : estompées */
.r20__face.is-dim .r20__disc {
    opacity: .14;
    transform: scale(.78);
}
.r20__face.is-dim .r20__name { opacity: 0; }

/* --- Mots-clés cliquables --- */
.r20__kw {
    all: unset;
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    gap: 4px;
    padding: 12%;
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
    transition: background .3s, color .3s;
}
.r20__kw-word {
    font-size: clamp(15px, 1.5vw, 20px);
    font-weight: 600;
    line-height: 1.15;
    color: var(--r20-creme);
}
.r20__kw small {
    font-size: 12px;
    font-weight: 500;
    color: var(--r20-olive);
}
.r20__kw::after {
    content: "";
    position: absolute;
    inset: 11%;
    border-radius: 50%;
    background: var(--r20-olive);
    opacity: 0;
    transform: scale(.6);
    transition: opacity .3s, transform .45s var(--r20-ease);
    z-index: -1;
}
.r20__kw:hover::after,
.r20__kw:focus-visible::after { opacity: .18; transform: none; }
.r20__kw[aria-pressed="true"]::after { opacity: 1; transform: none; }
.r20__kw[aria-pressed="true"] .r20__kw-word,
.r20__kw[aria-pressed="true"] small { color: var(--r20-vert); }
.r20__cell--kw { isolation: isolate; }

/* --- Cellules décoratives --- */
.r20__cell--n20 {
    display: grid;
    place-items: center;
}
.r20__twenty {
    /* Positionné en absolu : le dessin ne peut jamais agrandir sa case (Safari le faisait,
       ce qui étirait toute la rangée de la mosaïque) */
    position: absolute;
    inset: 0;
    width: 92%;
    height: 70%;
    margin: auto;
    overflow: visible;
}
.r20__twenty text {
    font-family: inherit;
    font-size: 150px;
    font-weight: 800;
    letter-spacing: -.06em;
}
/* Contour obtenu par filtre à partir de la forme pleine : pas de tracés internes
   (la police variable superpose des contours, qu'un stroke ferait apparaître) */
.r20__twenty-line { fill: #000; }
.r20__twenty-fill { fill: var(--r20-olive); opacity: .16; }
.r20.js .r20__twenty { clip-path: inset(0 100% 0 0); }
.r20.js .r20__twenty-fill { opacity: 0; }
.r20.js.is-in .r20__twenty { animation: r20-sweep 1.6s .3s var(--r20-ease) forwards; }
.r20.js.is-in .r20__twenty-fill { animation: r20-fill 1s 1.7s forwards; }
@keyframes r20-sweep { to { clip-path: inset(0 0 0 0); } }
@keyframes r20-fill { to { opacity: .16; } }
.r20__cell--n20 i {
    position: absolute;
    right: 10%;
    bottom: 9%;
    font-style: normal;
    font-weight: 700;
    font-size: clamp(13px, 1.4vw, 18px);
    color: var(--r20-corail);
}
.r20__cell--mono,
.r20__cell--year {
    display: grid;
    place-items: center;
}
.r20__picto {
    width: 44%;
    height: auto;
    color: var(--r20-creme);
}
.r20__cell--year span {
    font-size: clamp(18px, 2vw, 28px);
    font-weight: 300;
    letter-spacing: .04em;
    color: var(--r20-olive);
}
.r20__cell--quote {
    display: grid;
    place-items: center;
}
.r20__cell--quote span {
    font-size: clamp(90px, 9vw, 150px);
    font-weight: 800;
    line-height: 1;
    height: .5em;
    color: var(--r20-corail);
    animation: r20-breathe 5s ease-in-out infinite;
}
@keyframes r20-breathe { 50% { transform: scale(.9) rotate(-6deg); opacity: .75; } }

/* =============================================================================
   Projecteur
   ============================================================================= */
.r20__spot {
    grid-column: 3 / span 2;
    grid-row: 2 / span 2;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    overflow: hidden;
    padding: clamp(20px, 2.4vw, 34px);
    border-right: 1px solid var(--r20-trait);
    border-bottom: 1px solid var(--r20-trait);
    background: var(--r20-creme);
    color: var(--r20-vert);
    touch-action: pan-y;
}
.r20__spot-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}
.r20__spot-eb {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--r20-corail);
}
.r20__spot-count {
    font-size: 12px;
    font-weight: 600;
    color: #6b726c;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.r20__spot-q {
    flex: 1;
    margin: 0;
    display: flex;
    align-items: center;
}
.r20__spot-q p {
    margin: 0;
    font-size: clamp(20px, 1.2rem + .7vw, 30px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.01em;
    text-wrap: balance;
}
.r20__spot-q.is-long p { font-size: clamp(17px, .95rem + .45vw, 22px); line-height: 1.3; }
/* Mots qui apparaissent l'un après l'autre */
.r20__spot-q .w {
    display: inline-block;
    animation: r20-word .55s var(--r20-ease) both;
    animation-delay: calc(min(var(--w), 40) * 28ms);
}
@keyframes r20-word { from { opacity: 0; transform: translateY(.45em); filter: blur(3px); } }

.r20__spot-who {
    display: flex;
    align-items: center;
    gap: 12px;
}
.r20__spot-who b {
    display: block;
    font-size: 17px;
    font-weight: 700;
    color: var(--r20-anthra);
}
.r20__spot-who span:not(.r20__spot-av) {
    display: block;
    font-size: 14px;
    line-height: 1.35;
    color: #5b625c;
}
.r20__spot-who .r20__spot-since {
    color: var(--r20-corail);
    font-weight: 600;
}
.r20__spot-av { display: none; }
.r20__spot.is-swapping .r20__spot-who,
.r20__spot.is-swapping .r20__spot-eb { opacity: 0; transform: translateY(6px); }
.r20__spot-who,
.r20__spot-eb { transition: opacity .25s, transform .3s var(--r20-ease); }

.r20__spot-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.r20__open {
    all: unset;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 2px;
    border-bottom: 2px solid var(--r20-corail);
    font-size: 15px;
    font-weight: 700;
    color: var(--r20-vert);
    cursor: pointer;
}
.r20__open span { transition: transform .2s; }
.r20__open:hover span { transform: translateX(4px); }
.r20__nav { display: flex; gap: 6px; }
.r20__nav-btn {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(18, 64, 20, .25);
    border-radius: 50%;
    background: transparent;
    color: var(--r20-vert);
    font: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.r20__play svg { width: 12px; height: 12px; fill: currentColor; }
.r20__nav-btn:hover { background: var(--r20-vert); color: var(--r20-creme); }
.r20__ico-play { display: none; }
.r20.is-paused .r20__ico-play { display: block; }
.r20.is-paused .r20__ico-pause { display: none; }

/* Barre de progression du défilement automatique */
.r20__progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: rgba(18, 64, 20, .08);
}
.r20__progress i {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--r20-corail);
    transform: scaleX(0);
    transform-origin: left;
}
.r20__progress i.is-running { animation: r20-progress var(--r20-dur, 6s) linear forwards; }
.r20.is-paused .r20__progress i,
.r20__stage:hover .r20__progress i { animation-play-state: paused; }
@keyframes r20-progress { to { transform: scaleX(1); } }

/* Bandeau du mot-clé actif : sur mobile seulement (ailleurs, le projecteur l'affiche) */
.r20__kwinfo { display: none; }

/* Légende */
.r20__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 18px 0 0;
    font-size: 14px;
    color: var(--r20-olive);
}
.r20__legend span { display: inline-flex; align-items: center; gap: 8px; }
.r20__legend-kw { color: rgba(252, 250, 242, .6); }

/* =============================================================================
   Portrait (fenêtre)
   ============================================================================= */
.r20__portraits[hidden] { display: none; }
.r20__dialog {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 24px 16px 0; /* marge basse portée par ::after : la barre collante reste au ras de l'écran */
    overflow-y: auto;
    border: 0;
    background: transparent;
    color: var(--r20-anthra);
    overscroll-behavior: contain;
    scrollbar-width: none; /* la carte défile avec tout l'écran : pas de barre visible */
}
.r20__dialog::-webkit-scrollbar { display: none; }
.r20__dialog[open] { display: flex; flex-direction: column; }
.r20__dialog::after { content: ""; flex: 0 0 24px; }
.r20__dialog-card {
    position: relative;
    width: 100%;
    max-width: 760px;
    margin: auto; /* centrée quand elle est courte, alignée en haut et défilante quand elle est longue */
    overflow: clip;
    border-radius: 16px;
    background: var(--r20-creme);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
/* L'animation d'ouverture porte sur la fenêtre entière, jamais sur la carte : une carte décalée
   allongerait la zone défilante et Safari, en amenant le bouton « Fermer » à l'écran, ouvrirait
   le portrait sur sa fin au lieu de son début */
.r20__dialog[open] { animation: r20-pop .35s var(--r20-ease); }
@keyframes r20-pop { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.r20__dialog::backdrop {
    background: rgba(18, 64, 20, .82);
    backdrop-filter: blur(3px);
}
.r20__dialog-close {
    position: sticky;
    top: 12px;
    float: right;
    z-index: 2;
    width: 40px;
    height: 40px;
    margin: 12px 12px -52px 0;
    border: 1px solid rgba(252, 250, 242, .5);
    border-radius: 50%;
    background: var(--r20-vert);
    color: var(--r20-creme);
    font: inherit;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.r20-portrait__head {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: center;
    gap: 20px;
    padding: 28px 64px 28px 28px;
    background: var(--r20-vert);
    color: var(--r20-creme);
}
.r20-portrait__av {
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    overflow: hidden;
    border-radius: 50%;
    outline: 1px solid var(--r20-olive);
    outline-offset: 5px;
    font-size: 30px;
    font-weight: 600;
}
.r20-portrait--client .r20-portrait__av { background: var(--r20-olive); color: var(--r20-vert); }
.r20-portrait--equipe .r20-portrait__av { background: var(--r20-corail); color: var(--r20-creme); }
.r20-portrait__av img { width: 100%; height: 100%; object-fit: cover; }
.r20-portrait__head h3 {
    margin: 0;
    font-size: clamp(21px, 1.2rem + .6vw, 28px);
    font-weight: 700;
    color: var(--r20-creme);
}
.r20-portrait__head p { margin: 2px 0 0; font-size: 15px; opacity: .85; }
.r20-portrait__head .r20-portrait__since { color: var(--r20-olive); opacity: 1; font-weight: 600; }
.r20-portrait__quote {
    margin: 0;
    padding: 28px 28px 6px;
    font-size: clamp(21px, 1.1rem + .9vw, 30px);
    font-weight: 600;
    line-height: 1.2;
    color: var(--r20-vert);
}
.r20-portrait__qa {
    margin: 0 28px;
    padding: 18px 0;
    border-bottom: 1px solid #e7e7cf;
}
/* Pas de filet sous le dernier bloc quand il n'y a pas de « dernier mot » */
.r20-portrait__qa:last-child { border-bottom: 0; }
.r20-portrait__qa h4 {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--r20-corail);
}
.r20-portrait__qa p { margin: 0; font-size: 16px; line-height: 1.65; max-width: 65ch; }
/* Phrase qui cite le mot-clé choisi */
.r20-mark {
    padding: 1px 3px;
    border-radius: 3px;
    background: rgba(186, 191, 115, .45);
    color: inherit;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
.r20-portrait__last {
    margin: 22px 28px 8px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--r20-vert);
}
.r20-portrait__last small {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #6b726c;
}
.r20__dialog-nav {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding: 14px 28px;
    border-top: 1px solid #e7e7cf;
    background: var(--r20-creme);
}
.r20__dialog-nav button {
    padding: 8px 0;
    border: 0;
    background: none;
    color: var(--r20-vert);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.r20__dialog-nav button:hover { color: var(--r20-corail); }

/* =============================================================================
   Tablette : 4 colonnes, projecteur 2 × 2
   ============================================================================= */
@media (max-width: 1023px) {
    .r20__stage { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .r20__spot { grid-column: 2 / span 2; }
    .r20__cell--vide { display: none; }
    .r20__disc { font-size: clamp(20px, 4vw, 32px); }
    .r20__kw-word { font-size: clamp(14px, 2.2vw, 19px); }
}

/* =============================================================================
   Mobile : mosaïque seule (toucher = portrait), portrait en panneau qui monte du bas
   ============================================================================= */
@media (max-width: 719px) {
    .r20 { padding: var(--space-2xl, 3.38rem) 0; }
    .r20__head { margin-bottom: 20px; }
    .r20__filters { width: 100%; }
    .r20__filters { flex-wrap: nowrap; gap: 6px; }
    .r20__filters button { flex: 1 1 0; justify-content: center; gap: 6px; padding: 8px 6px; font-size: 13.5px; white-space: nowrap; }
    .r20__filters button small { display: none; }

    .r20__stage {
        display: block;
        border: 0;
    }
    .r20__grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-flow: dense;
        border-top: 1px solid var(--r20-trait);
        border-left: 1px solid var(--r20-trait);
    }
    /* 4 × 9 cases : 25 visages, 4 mots-clés, les deux années, le guillemet et le « 20 » en pièce
       centrale 2 × 2 (2 rangées au-dessus, 5 en dessous) ; logo et cases vides masqués */
    .r20__cell--mono,
    .r20__cell--blanc { display: none; }
    .r20__cell--quote span { font-size: 17vw; }
    .r20__cell--n20 { grid-column: 2 / span 2; grid-row: 3 / span 2; }
    .r20__cell--n20 .r20__twenty { width: 86%; height: 62%; }
    .r20__cell--n20 i { right: 17%; bottom: 15%; font-size: 18px; }

    .r20__spot { display: none; }
    .r20__kwinfo:not([hidden]) {
        display: block;
        margin: 0 0 14px;
        padding: 12px 14px;
        border-left: 3px solid var(--r20-olive);
        border-radius: 0 8px 8px 0;
        background: rgba(186, 191, 115, .14);
        font-size: 14px;
        line-height: 1.45;
        color: var(--r20-creme);
    }
    .r20__kwinfo b { color: var(--r20-olive); }

    .r20__disc { inset: 9%; border-width: 3px; font-size: 6vw; }
    .r20__name { display: none; }
    .r20__kw { padding: 6%; }
    .r20__kw-word { font-size: 3.6vw; }
    .r20__kw small { font-size: 10px; }

    /* Portrait : panneau qui monte du bas de l'écran, puis défile avec tout l'écran */
    .r20__dialog { padding: 10dvh 0 0; }
    .r20__dialog::after { display: none; }
    .r20__dialog-card {
        max-width: none;
        margin: auto 0 0;
        border-radius: 20px 20px 0 0;
    }
    .r20__dialog[open] { animation: r20-sheet .4s var(--r20-ease); }
    .r20-portrait__head { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 22px 60px 22px 20px; }
    .r20-portrait__av { width: 64px; height: 64px; font-size: 22px; outline-offset: 4px; }
    .r20-portrait__quote { padding: 22px 20px 4px; }
    .r20-portrait__qa { margin: 0 20px; }
    .r20-portrait__last { margin: 20px 20px 8px; }
    .r20__dialog-nav { padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); }
}
@keyframes r20-sheet { from { transform: translateY(100%); } }

/* =============================================================================
   Mouvements réduits : pas d'animation ni de défilement automatique
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    .r20:not(.force-motion) *,
    .r20:not(.force-motion) *::before,
    .r20:not(.force-motion) *::after {
        animation: none !important;
        transition: none !important;
    }
    .r20.js:not(.force-motion) .r20__cell > *,
    .r20.js:not(.force-motion) .r20__cell::before { opacity: 1; transform: none; }
    .r20.js:not(.force-motion) .r20__twenty { clip-path: none; }
    .r20.js:not(.force-motion) .r20__twenty-fill { opacity: .16; }
}

/* === css/blocks/cta-prefooter.css === */
/**
 * CTA Pre-footer — Appel a l'action avant le pied de page
 *
 * Deux variantes :
 * 1. Défaut — Fond beige, texte anthracite, bouton vert (style WordPress).
 * 2. .cta-prefooter--orange — Fond orange, texte blanc, bouton plein vert.
 *
 * 2 colonnes : image gauche (coins arrondis), texte droite avec
 * h2 + paragraphe + bouton.
 */

/* =============================================================================
   Section — Default (beige, matches WordPress)
   ============================================================================= */
.cta-prefooter {
    color: var(--color-anthracite);
    padding: var(--space-3xl) 0;
    overflow: hidden;
}

/* =============================================================================
   Inner layout
   ============================================================================= */
.cta-prefooter__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2xl);
}

/* =============================================================================
   Image column
   ============================================================================= */
.cta-prefooter__media {
    flex-shrink: 0;
    width: 100%;
}

.cta-prefooter__media img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    object-fit: cover;
}

/* =============================================================================
   Text column
   ============================================================================= */
.cta-prefooter__content {
    width: 100%;
}

.cta-prefooter__title {
    font-size: var(--font-size-xlarge);
    font-weight: 500;
    line-height: 1.15;
    margin-bottom: var(--space-lg);
    color: var(--color-anthracite);
}

.cta-prefooter__desc {
    font-size: var(--font-size-base);
    line-height: 1.6;
    margin-bottom: var(--space-xl);
    color: #555;
}

/* =============================================================================
   Orange variant (legacy / optional)
   ============================================================================= */
.cta-prefooter--orange {
    background-color: var(--color-orange);
    color: var(--color-white);
}

.cta-prefooter--orange .cta-prefooter__title {
    color: var(--color-white);
}

.cta-prefooter--orange .cta-prefooter__desc {
    color: var(--color-white);
    opacity: 0.92;
}

/* =============================================================================
   Fond choisi (background_color) en variante beige
   ============================================================================= */
/* Fond sombre (vert-fonce, anthracite) : textes clairs */
.cta-prefooter--dark .cta-prefooter__title {
    color: var(--color-white);
}
.cta-prefooter--dark .cta-prefooter__desc {
    color: rgba(255, 255, 255, 0.85);
}
/* Le bouton principal (vert) disparaîtrait sur fond vert : passage en orange, comme le bloc vidéo */
.cta-prefooter--dark .btn--primary {
    background: var(--color-orange);
    border-color: var(--color-orange);
    color: var(--color-white);
}
.cta-prefooter--dark .btn--primary:hover {
    background: #cf4a37;
    border-color: #cf4a37;
}

/* Fond orange : textes anthracite (le gris du texte y serait illisible), bouton vert conservé */
.cta-prefooter--accent .cta-prefooter__title,
.cta-prefooter--accent .cta-prefooter__desc {
    color: var(--color-anthracite);
}

/* =============================================================================
   Responsive
   ============================================================================= */
@media (max-width: 768px) {
    .cta-prefooter {
        padding: var(--space-2xl) 0;
    }

    .cta-prefooter__title {
        font-size: clamp(1.5rem, 1.25rem + 1.5vw, 2.25rem);
    }
}

@media (min-width: 768px) {
    .cta-prefooter__inner {
        flex-direction: row;
        align-items: center;
    }

    .cta-prefooter__media {
        width: 50%;
    }

    .cta-prefooter__content {
        width: 50%;
    }
}

@media (min-width: 1024px) {
    .cta-prefooter__media img {
        border-radius: 20px;
        max-height: 400px;
    }

    .cta-prefooter__inner {
        gap: var(--space-3xl);
    }
}