/*
 * Pages « Offres » (certification ISO, RSE, Qualiopi, formation) — feuille partagée par les quatre gabarits
 * Extrait de templates/public/offer/_styles.html.twig : ce fichier remplace le bloc <style> que le
 * gabarit portait en ligne. Chargé via asset() (versionné par ASSETS_VERSION).
 */

/* =========================================================
   OFFER PAGES - DESIGN SYSTEM
   Conversion-focused: proof-rich, multiple CTAs, scannable.
   ========================================================= */

:root {
    --of-primary: #2c178a;
    --of-primary-light: #4828b3;
    --of-primary-lighter: #7045e1;
    --of-primary-soft: #ede8fb;
    --of-bg: #ffffff;
    --of-card-bg: #ffffff;
    --of-ink: #1a0f2b;
    --of-ink-soft: #25155e;
    --of-text: #3e2870;
    --of-text-muted: #5f4992;
    --of-border: rgba(44, 23, 138, 0.10);
    --of-border-strong: rgba(44, 23, 138, 0.22);
    --of-shadow-sm: 0 4px 14px rgba(44, 23, 138, 0.06);
    --of-shadow-md: 0 10px 35px rgba(44, 23, 138, 0.08), 0 1px 4px rgba(0, 0, 0, 0.02);
    --of-shadow-lg: 0 20px 60px rgba(44, 23, 138, 0.18);
    --of-success: #16a34a;
}

/* Light theme override on offer pages */
body:has(.offer-page) {
    background-color: var(--of-bg);
}

body:has(.offer-page) .main-content::before {
    display: none;
}

body:has(.offer-page) .navbar {
    background-color: rgba(12, 8, 20, 0.92) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 2px 30px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(112, 69, 225, 0.08);
}

body:has(.offer-page) .navbar .nav-link {
    color: #dcd0f8 !important;
}

body:has(.offer-page) .navbar .nav-link:hover {
    color: #9b7eed !important;
}

body:has(.offer-page) .footer {
    background:
        radial-gradient(circle at 15% 20%, rgba(44, 23, 138, 0.18) 0%, transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(72, 40, 179, 0.16) 0%, transparent 45%),
        linear-gradient(135deg, #1a0f2b 0%, #0f0a1a 100%);
}

.offer-page {
    padding: 120px 0 80px;
    background: transparent;
    position: relative;
    color: var(--of-ink-soft);
}

.offer-page::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 60% at 80% 20%, rgba(72, 40, 179, 0.06) 0%, transparent 65%),
        radial-gradient(ellipse 55% 55% at 15% 70%, rgba(112, 69, 225, 0.05) 0%, transparent 65%);
    z-index: 0;
    pointer-events: none;
}

.offer-page > * {
    position: relative;
    z-index: 1;
}

.offer-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--of-text-muted);
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.offer-back-link:hover {
    color: var(--of-primary);
    transform: translateX(-4px);
}

/* =========================================================
   HERO - Proof-rich, dual-CTA
   ========================================================= */
.of-hero {
    position: relative;
    background: var(--of-card-bg);
    border: 1px solid var(--of-border);
    border-radius: 28px;
    box-shadow: var(--of-shadow-md);
    overflow: hidden;
    margin-bottom: 3rem;
}

.of-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--of-primary), var(--of-primary-lighter), var(--of-primary));
}

.of-hero::after {
    content: '';
    position: absolute;
    top: -200px;
    right: -200px;
    width: 500px;
    height: 500px;
    z-index: 0;
    pointer-events: none;
}

.of-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 3rem;
    padding: 3.5rem 3rem;
    align-items: center;
}

.of-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1.3rem;
    border-radius: 999px;
    background: rgba(112, 69, 225, 0.12);
    border: 1px solid rgba(44, 23, 138, 0.18);
    color: var(--of-primary);
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin-bottom: 1.4rem;
}

.of-hero-pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--of-primary-light);
    box-shadow: 0 0 0 3px rgba(112, 69, 225, 0.25), 0 0 8px rgba(72, 40, 179, 0.4);
}

.of-hero h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 3.2rem;
    font-weight: 800;
    color: var(--of-ink);
    margin-bottom: 1.2rem;
    letter-spacing: -0.035em;
    line-height: 1.05;
}

.of-hero h1 .accent {
    background: linear-gradient(135deg, var(--of-primary) 0%, var(--of-primary-light) 50%, var(--of-primary-lighter) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.of-hero .lead {
    font-size: 1.1rem;
    color: var(--of-text);
    line-height: 1.65;
    margin-bottom: 1.8rem;
    max-width: 580px;
}

.of-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    align-items: center;
    margin-bottom: 1.8rem;
}

.of-trust-line {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
    font-size: 0.85rem;
    color: var(--of-text-muted);
    align-items: center;
}

.of-trust-line span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
}

.of-trust-line i {
    color: var(--of-success);
    font-size: 1rem;
}

/* Hero sidecard - KPIs */
.of-hero-kpi {
    background: linear-gradient(160deg, rgba(112, 69, 225, 0.10) 0%, rgba(44, 23, 138, 0.04) 100%);
    border: 1px solid var(--of-border-strong);
    border-radius: 22px;
    padding: 2rem 1.8rem;
    display: grid;
    gap: 1.4rem;
    position: relative;
}

.of-hero-kpi-title {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--of-primary);
    margin-bottom: 0.4rem;
    text-align: center;
}

.of-hero-kpi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
}

.of-hero-kpi-item {
    text-align: left;
}

.of-hero-kpi-num {
    font-family: 'Poppins', sans-serif;
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, var(--of-primary), var(--of-primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.03em;
    margin-bottom: 0.35rem;
    text-align: center;
}

.of-hero-kpi-label {
    font-size: 0.78rem;
    color: var(--of-text-muted);
    line-height: 1.3;
    font-weight: 500;
    text-align: center;
}

.of-hero-call {
    margin-top: 0.5rem;
    padding-top: 1.4rem;
    border-top: 1px dashed var(--of-border-strong);
    text-align: center;
}

.of-hero-call-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--of-text-muted);
    margin-bottom: 0.4rem;
}

.of-hero-call a {
    font-family: 'Poppins', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--of-ink);
    text-decoration: none;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.2s;
}

.of-hero-call a:hover {
    color: var(--of-primary);
}

.of-hero-call a i {
    color: var(--of-primary-light);
}

/* =========================================================
   BUTTONS - primary / ghost
   ========================================================= */
.of-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.95rem 1.8rem;
    border-radius: 50px;
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, color 0.25s ease;
    position: relative;
    overflow: hidden;
    line-height: 1;
}

.of-btn-primary {
    background: linear-gradient(135deg, var(--of-primary) 0%, var(--of-primary-light) 50%, var(--of-primary-lighter) 100%);
    color: #fff;
    box-shadow: 0 10px 28px rgba(44, 23, 138, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.of-btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transition: left 0.6s ease;
}

.of-btn-primary:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 18px 38px rgba(44, 23, 138, 0.55), 0 0 0 1px rgba(112, 69, 225, 0.4);
}

.of-btn-primary:hover::before {
    left: 100%;
}

.of-btn-ghost {
    background: transparent;
    color: var(--of-primary);
    border: 1.5px solid var(--of-border-strong);
}

.of-btn-ghost:hover {
    background: var(--of-primary);
    color: #fff;
    border-color: var(--of-primary);
    transform: translateY(-2px);
}

.of-btn-light {
    background: #fff;
    color: var(--of-primary);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.of-btn-light:hover {
    background: #fff;
    color: var(--of-primary);
    transform: translateY(-3px);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.25);
}

.of-btn-light i {
    color: var(--of-primary-light);
}

/* =========================================================
   SECTION HEADER (shared)
   ========================================================= */
.of-section {
    max-width: 1180px;
    margin: 0 auto 3.2rem;
}

.of-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--of-primary);
    text-transform: uppercase;
    letter-spacing: 1.8px;
    margin-bottom: 0.8rem;
}

.of-eyebrow::before {
    content: '';
    width: 28px;
    height: 2px;
    background: linear-gradient(90deg, var(--of-primary), var(--of-primary-lighter));
    border-radius: 2px;
}

.of-eyebrow-nl {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--of-primary);
    text-transform: uppercase;
    letter-spacing: 1.8px;
    margin-bottom: 0.8rem;
}

.of-section-title {
    font-family: 'Poppins', sans-serif;
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--of-ink);
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: 1rem;
}

.of-section-title .accent {
    background: linear-gradient(135deg, var(--of-primary), var(--of-primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.of-section-sub {
    font-size: 1.05rem;
    color: var(--of-text);
    line-height: 1.7;
    max-width: 760px;
    margin-bottom: 2.2rem;
}

.of-section-head-center {
    text-align: center;
    margin-bottom: 2.6rem;
}

.of-section-head-center .of-eyebrow {
    justify-content: center;
}

.of-section-head-center .of-section-sub {
    margin-left: auto;
    margin-right: auto;
}

/* =========================================================
   NORMS STRIP - trust badges
   ========================================================= */
.of-norms-strip {
    background: #0C0814;
    border: 1px solid var(--of-border);
    border-radius: 14px;
    padding: 0.9rem 1.4rem;
    box-shadow: var(--of-shadow-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 2rem;
}

.of-norms-strip-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.of-norms-strip-label::before,
.of-norms-strip-label::after {
    content: '';
    display: inline-block;
    width: 22px;
    height: 1px;
    background: rgba(255, 255, 255, 0.25);
}

.of-norms-strip-list {
    display: flex;
    gap: 0.4rem 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.of-norm-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.8rem;
    background: #fff;
    border: 1px solid var(--of-border);
    border-radius: 999px;
    color: var(--of-ink);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    transition: all 0.25s ease;
}

.of-norm-chip i {
    color: var(--of-primary-light);
    font-size: 0.85rem;
}

.of-norm-chip:hover {
    border-color: var(--of-border-strong);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(44, 23, 138, 0.1);
}

/* =========================================================
   VALUE PROPS - 3/4 col benefits
   ========================================================= */
.of-values {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.4rem;
}

.of-value-card {
    background: var(--of-card-bg);
    border: 1px solid var(--of-border);
    border-radius: 18px;
    padding: 1.8rem 1.6rem;
    box-shadow: var(--of-shadow-sm);
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}

.of-value-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--of-primary), var(--of-primary-lighter));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.of-value-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--of-shadow-md);
    border-color: var(--of-border-strong);
}

.of-value-card:hover::after {
    transform: scaleX(1);
}

.of-value-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--of-primary), var(--of-primary-light));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-bottom: 0.85rem;
    box-shadow: 0 6px 16px rgba(44, 23, 138, 0.22);
}

.of-value-card h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--of-ink);
    margin-bottom: 0.6rem;
    letter-spacing: -0.01em;
}

.of-value-card p {
    font-size: 0.95rem;
    color: var(--of-text);
    line-height: 1.6;
    margin: 0;
}

/* Accent tournant - teintes déjà présentes sur le site (icônes expertise home).
   4n+1 = violet par défaut ; +2 orange ; +3 turquoise ; +4 bleu. */
.of-value-card:nth-child(4n+2) .of-value-icon {
    background: linear-gradient(135deg, #D4571F, #FFB84D);
    box-shadow: 0 8px 20px rgba(212, 87, 31, 0.28);
}
.of-value-card:nth-child(4n+2)::after {
    background: linear-gradient(90deg, #D4571F, #FFB84D);
}
.of-value-card:nth-child(4n+2):hover {
    border-color: rgba(212, 87, 31, 0.35);
}

.of-value-card:nth-child(4n+3) .of-value-icon {
    background: linear-gradient(135deg, #00A4B8, #3DBCD1);
    box-shadow: 0 8px 20px rgba(0, 164, 184, 0.28);
}
.of-value-card:nth-child(4n+3)::after {
    background: linear-gradient(90deg, #00A4B8, #3DBCD1);
}
.of-value-card:nth-child(4n+3):hover {
    border-color: rgba(0, 164, 184, 0.35);
}

.of-value-card:nth-child(4n) .of-value-icon {
    background: linear-gradient(135deg, #4A90E2, #7BB3E8);
    box-shadow: 0 8px 20px rgba(74, 144, 226, 0.28);
}
.of-value-card:nth-child(4n)::after {
    background: linear-gradient(90deg, #4A90E2, #7BB3E8);
}
.of-value-card:nth-child(4n):hover {
    border-color: rgba(74, 144, 226, 0.35);
}

/* =========================================================
   PAIN POINTS - "Vous reconnaissez-vous ?"
   ========================================================= */
.of-pain {
    background: var(--of-card-bg);
    border: 1px solid var(--of-border);
    border-radius: 24px;
    padding: 2.6rem 2.4rem;
    box-shadow: var(--of-shadow-md);
    position: relative;
    overflow: hidden;
}

.of-pain::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 6px;
    background: linear-gradient(180deg, var(--of-primary), var(--of-primary-lighter));
}

.of-pain-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.8rem;
    margin-top: 1.2rem;
}

.of-pain-item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.95rem 1.1rem;
    background: linear-gradient(135deg, rgba(112, 69, 225, 0.06), rgba(44, 23, 138, 0.02));
    border: 1px solid var(--of-border);
    border-radius: 14px;
    font-size: 0.95rem;
    color: var(--of-ink-soft);
    line-height: 1.5;
    transition: all 0.25s ease;
}

.of-pain-item:hover {
    border-color: var(--of-border-strong);
    transform: translateX(4px);
}

.of-pain-check {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--of-primary), var(--of-primary-light));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    margin-top: 1px;
    box-shadow: 0 3px 10px rgba(44, 23, 138, 0.25);
}

/* =========================================================
   PROCESS STEPS - visual flow
   ========================================================= */
.of-process {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.4rem;
    position: relative;
}

/* Exactement 5 étapes : grille 3 + 2, la 2e ligne centrée
   (grille 6 colonnes, chaque step span 2 ; étapes 4-5 décalées). */
@media (min-width: 768px) {
    .of-process:has(.of-step:nth-child(5)):not(:has(.of-step:nth-child(6))) {
        grid-template-columns: repeat(6, 1fr);
    }
    .of-process:has(.of-step:nth-child(5)):not(:has(.of-step:nth-child(6))) .of-step {
        grid-column: span 2;
    }
    .of-process:has(.of-step:nth-child(5)):not(:has(.of-step:nth-child(6))) .of-step:nth-child(4) {
        grid-column: 2 / span 2;
    }
    .of-process:has(.of-step:nth-child(5)):not(:has(.of-step:nth-child(6))) .of-step:nth-child(5) {
        grid-column: 4 / span 2;
    }
}

.of-step {
    background: var(--of-card-bg);
    border: 1px solid var(--of-border);
    border-radius: 20px;
    padding: 1.2rem 1.6rem 1.2rem;
    box-shadow: var(--of-shadow-sm);
    position: relative;
    transition: all 0.35s ease;
    overflow: visible;
}

.of-step:hover {
    transform: translateY(-5px);
    box-shadow: var(--of-shadow-md);
    border-color: var(--of-border-strong);
}

.of-step-num {
    position: absolute;
    top: -18px;
    left: 1.6rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--of-primary), var(--of-primary-light));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(44, 23, 138, 0.35);
    border: 3px solid #fff;
}

.of-step-trophy {
    position: absolute;
    top: -1.4rem;
    right: -0.9rem;
    font-size: 3.8rem;
    line-height: 1;
    color: #ffbf00;
    transform: rotate(15deg);
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.18));
    z-index: 2;
    pointer-events: none;
}

@media (max-width: 600px) {
    .of-step-trophy { font-size: 2.2rem; top: -1rem; right: -0.4rem; }
}

.of-step h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--of-ink);
    margin: 1rem 0 0.6rem;
    letter-spacing: -0.01em;
}

.of-step p {
    font-size: 0.9rem;
    color: var(--of-text);
    line-height: 1.55;
    margin: 0;
}

/* =========================================================
   TIMELINE - vertical alternating timeline ("Notre méthode")
   Each step occupies its own row, anchored left/right of the
   central dotted line, producing a zigzag/staggered layout.
   ========================================================= */
.of-timeline {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 1.4rem;
    max-width: 980px;
    margin: 0 auto;
    padding: 1.2rem 0;
    position: relative;
}

.of-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    border-left: 3px dashed var(--of-border-strong);
    transform: translateX(-50%);
    pointer-events: none;
}

.of-timeline > .of-step {
    position: relative;
    overflow: visible;
    width: calc(50% - 36px);
    box-sizing: border-box;
}

.of-timeline > .of-step:nth-child(odd) {
    justify-self: start;
    text-align: right;
}

.of-timeline > .of-step:nth-child(even) {
    justify-self: end;
    text-align: left;
}

.of-timeline > .of-step .of-step-num {
    top: 1.4rem;
    left: auto;
    right: auto;
}

.of-timeline > .of-step:nth-child(odd) .of-step-num {
    right: -58px;
}

.of-timeline > .of-step:nth-child(even) .of-step-num {
    left: -58px;
}

@media (max-width: 768px) {
    .of-timeline {
        row-gap: 1rem;
    }
    .of-timeline::before {
        left: 30px;
    }
    .of-timeline > .of-step:nth-child(odd),
    .of-timeline > .of-step:nth-child(even) {
        width: calc(100% - 60px);
        justify-self: end;
        text-align: left;
    }
    .of-timeline > .of-step:nth-child(odd) .of-step-num,
    .of-timeline > .of-step:nth-child(even) .of-step-num {
        left: -52px;
        right: auto;
    }
}

/* =========================================================
   RESULTS / KPIs strip
   ========================================================= */
.of-results {
    background: linear-gradient(135deg, var(--of-primary) 0%, var(--of-primary-light) 60%, #6238c8 100%);
    border-radius: 24px;
    padding: 2.6rem 2.2rem;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: var(--of-shadow-lg);
}

.of-results::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 100% at 50% 0%, rgba(255, 255, 255, 0.18) 0%, transparent 65%),
        radial-gradient(ellipse 40% 60% at 100% 100%, rgba(255, 255, 255, 0.10) 0%, transparent 65%);
    pointer-events: none;
}

.of-results > * {
    position: relative;
    z-index: 1;
}

.of-results-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0.6rem;
}

.of-results-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.7rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 1.8rem;
    letter-spacing: -0.025em;
    max-width: 780px;
}

.of-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
}

.of-result {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 16px;
    padding: 1.4rem 1.3rem;
    backdrop-filter: blur(10px);
    text-align: center;
}

.of-result-num {
    font-family: 'Poppins', sans-serif;
    font-size: 2.4rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 0.4rem;
}

.of-result-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
}

/* =========================================================
   BANNER CTA - mid-page
   ========================================================= */
.of-banner {
    background: #0C0814;
    border: 1px solid var(--of-border-strong);
    border-radius: 22px;
    padding: 2rem 2.2rem;
    box-shadow: var(--of-shadow-md);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.of-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(180deg, var(--of-primary), var(--of-primary-lighter));
}

.of-banner h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.4rem;
    letter-spacing: -0.02em;
}

.of-banner p {
    margin: 0;
    font-size: 0.95rem;
    color: #fff;
    line-height: 1.55;
}

.of-banner-actions {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
}

/* =========================================================
   TWO-COLUMN - Pourquoi/Problématique etc.
   ========================================================= */
.of-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: stretch;
}

.of-split-card {
    background: var(--of-card-bg);
    border: 1px solid var(--of-border);
    border-radius: 22px;
    padding: 2.4rem 2.2rem;
    box-shadow: var(--of-shadow-md);
    position: relative;
}

.of-split-card h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--of-ink);
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    letter-spacing: -0.02em;
}

.of-split-card h3 i {
    font-size: 1.1rem;
    color: #fff;
    background: linear-gradient(135deg, var(--of-primary), var(--of-primary-light));
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(44, 23, 138, 0.25);
}

.of-split-card p {
    font-size: 1rem;
    color: var(--of-text);
    line-height: 1.7;
    margin-bottom: 0.9rem;
}

.of-split-card p:last-child {
    margin-bottom: 0;
}

.of-split-card strong {
    color: var(--of-ink);
    font-weight: 700;
}

.of-split-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
}

.of-split-list li {
    position: relative;
    padding: 0.55rem 0 0.55rem 1.8rem;
    color: var(--of-text);
    font-size: 0.97rem;
    line-height: 1.55;
}

.of-split-list li::before {
    content: '\f26a';
    font-family: 'bootstrap-icons';
    position: absolute;
    left: 0;
    top: 0.55rem;
    color: var(--of-success);
    font-weight: 700;
    font-size: 0.95rem;
}

/* =========================================================
   QUOTE / CALLOUT - pull quote
   ========================================================= */
.of-quote {
    background: linear-gradient(135deg, rgba(112, 69, 225, 0.08), rgba(44, 23, 138, 0.03));
    border: 1px solid var(--of-border);
    border-left: 4px solid var(--of-primary-light);
    border-radius: 16px;
    padding: 1.6rem 1.8rem;
    font-size: 1rem;
    color: var(--of-ink-soft);
    line-height: 1.7;
    margin-top: 1.2rem;
}

.of-quote i {
    color: var(--of-primary-light);
    margin-right: 0.5rem;
}

.of-quote strong {
    color: var(--of-ink);
    font-weight: 700;
}

/* =========================================================
   TESTIMONIAL - Pull quote
   ========================================================= */
.of-testimonial {
    background: var(--of-card-bg);
    border: 1px solid var(--of-border);
    border-radius: 24px;
    padding: 2.4rem 2.4rem 2rem;
    box-shadow: var(--of-shadow-md);
    position: relative;
}

.of-testimonial::before {
    content: '\201C';
    position: absolute;
    top: 1rem;
    left: 1.6rem;
    font-family: 'Poppins', sans-serif;
    font-size: 6rem;
    line-height: 1;
    color: var(--of-primary-lighter);
    opacity: 0.4;
}

.of-testimonial blockquote {
    font-family: 'Poppins', sans-serif;
    font-size: 1.25rem;
    font-style: italic;
    font-weight: 500;
    color: var(--of-ink);
    line-height: 1.55;
    margin: 0 0 1.4rem;
    position: relative;
    padding-left: 1rem;
}

.of-testimonial-author {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.of-testimonial-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--of-primary), var(--of-primary-light));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    box-shadow: 0 6px 18px rgba(44, 23, 138, 0.3);
}

.of-testimonial-info strong {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    color: var(--of-ink);
    font-weight: 700;
}

.of-testimonial-info span {
    font-size: 0.82rem;
    color: var(--of-text-muted);
}

/* =========================================================
   CASE STUDIES - accordion (refined)
   ========================================================= */
.of-cases {
    display: grid;
    gap: 1.2rem;
}

.of-case {
    background: var(--of-card-bg);
    border: 1px solid var(--of-border);
    border-radius: 18px;
    box-shadow: var(--of-shadow-sm);
    position: relative;
    overflow: hidden;
    transition: all 0.35s ease;
}

.of-case:hover {
    border-color: var(--of-border-strong);
    box-shadow: var(--of-shadow-md);
}

.of-case[open] {
    border-color: var(--of-border-strong);
    box-shadow: var(--of-shadow-md);
}

.of-case-header {
    list-style: none;
    cursor: pointer;
    padding: 1.5rem 1.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    transition: background 0.3s ease;
}

.of-case-header:hover {
    background: rgba(112, 69, 225, 0.04);
}

.of-case-header::-webkit-details-marker { display: none; }
.of-case-header::marker { content: ''; }

.of-case-headline {
    flex: 1;
    min-width: 0;
}

.of-case-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--of-primary);
    margin-bottom: 0.4rem;
}

.of-case-tag i {
    font-size: 0.8rem;
}

.of-case-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--of-ink);
    margin: 0 0 0.25rem;
    letter-spacing: -0.015em;
    line-height: 1.3;
}

.of-case-sub {
    font-size: 0.85rem;
    color: var(--of-primary-light);
    font-weight: 600;
    margin: 0;
}

.of-case-result-pill {
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--of-primary), var(--of-primary-light));
    color: #fff;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(44, 23, 138, 0.25);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.of-case-toggle {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(112, 69, 225, 0.10);
    color: var(--of-primary);
    font-size: 1.2rem;
    border: 1px solid var(--of-border);
    transition: all 0.3s ease;
}

.of-case[open] > .of-case-header .of-case-toggle {
    transform: rotate(45deg);
    background: linear-gradient(135deg, var(--of-primary), var(--of-primary-light));
    color: #fff;
    border-color: transparent;
}

.of-case-body {
    padding: 0 1.8rem 1.8rem;
    border-top: 1px solid var(--of-border);
    padding-top: 1.4rem;
    animation: caseFade 0.35s ease-out;
}

@keyframes caseFade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.of-case-section {
    margin-bottom: 1.2rem;
}

.of-case-section:last-child { margin-bottom: 0; }

.of-case-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--of-primary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 0.4rem;
}

.of-case-label i { font-size: 0.85rem; }

.of-case-section p {
    font-size: 0.95rem;
    color: var(--of-text);
    line-height: 1.7;
    margin: 0;
}

.of-case-section strong { color: var(--of-ink); font-weight: 700; }

.of-case-section ul {
    list-style: none;
    padding: 0;
    margin: 0.6rem 0;
}

.of-case-section ul li {
    position: relative;
    padding: 0.4rem 0 0.4rem 1.5rem;
    color: var(--of-text);
    font-size: 0.92rem;
    line-height: 1.55;
}

.of-case-section ul li::before {
    content: '\f270';
    font-family: 'bootstrap-icons';
    position: absolute;
    left: 0;
    top: 0.4rem;
    color: var(--of-primary-light);
    font-size: 0.9rem;
}

.of-case-result {
    margin-top: 1.2rem;
    padding: 1.2rem 1.4rem;
    background: linear-gradient(135deg, rgba(112, 69, 225, 0.12), rgba(44, 23, 138, 0.06));
    border-left: 4px solid var(--of-primary-light);
    border-radius: 12px;
}

.of-case-result .of-case-label {
    color: var(--of-primary);
    margin-bottom: 0.3rem;
}

.of-case-result p {
    color: var(--of-ink);
    font-weight: 500;
}

/* =========================================================
   FAQ - objection handling
   ========================================================= */
.of-faq {
    display: grid;
    gap: 0.8rem;
}

.of-faq-item {
    background: var(--of-card-bg);
    border: 1px solid var(--of-border);
    border-radius: 14px;
    box-shadow: var(--of-shadow-sm);
    overflow: hidden;
    transition: all 0.3s ease;
}

.of-faq-item[open] {
    border-color: var(--of-border-strong);
    box-shadow: var(--of-shadow-md);
}

.of-faq-q {
    list-style: none;
    cursor: pointer;
    padding: 1.1rem 1.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--of-ink);
    transition: background 0.3s ease;
}

.of-faq-q::-webkit-details-marker { display: none; }
.of-faq-q::marker { content: ''; }

.of-faq-q:hover { background: rgba(112, 69, 225, 0.05); }

.of-faq-q i {
    flex-shrink: 0;
    font-size: 1rem;
    color: var(--of-primary);
    transition: transform 0.3s ease;
}

.of-faq-item[open] .of-faq-q i {
    transform: rotate(180deg);
}

.of-faq-a {
    padding: 0 1.4rem 1.2rem;
    font-size: 0.95rem;
    color: var(--of-text);
    line-height: 1.7;
}

.of-faq-a strong { color: var(--of-ink); font-weight: 700; }

/* =========================================================
   FINAL CTA - strong, contact-heavy
   ========================================================= */
.of-final-cta {
    background: linear-gradient(135deg, var(--of-primary) 0%, var(--of-primary-light) 60%, #6238c8 100%);
    border-radius: 28px;
    padding: 3.2rem 2.4rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: var(--of-shadow-lg);
}

.of-final-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 100% at 50% 0%, rgba(255, 255, 255, 0.18) 0%, transparent 65%),
        radial-gradient(ellipse 40% 60% at 100% 100%, rgba(255, 255, 255, 0.10) 0%, transparent 65%);
    pointer-events: none;
}

.of-final-cta > * { position: relative; z-index: 1; }

.of-final-cta-eyebrow {
    display: inline-block;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    padding: 0.45rem 1.1rem;
    border-radius: 999px;
    margin-bottom: 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.of-final-cta h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 2.4rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 1rem;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.of-final-cta p {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.92);
    max-width: 680px;
    margin: 0 auto 2rem;
    line-height: 1.7;
}

.of-final-cta-actions {
    display: flex;
    gap: 0.9rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1.6rem;
}

.of-final-cta-trust {
    display: flex;
    gap: 1.6rem;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.88);
}

.of-final-cta-trust span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
}

.of-final-cta-trust i {
    color: #d6f1de;
}

/* =========================================================
   STICKY MOBILE CTA - shows on scroll
   ========================================================= */
.of-sticky-cta {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    background: var(--of-card-bg);
    border: 1px solid var(--of-border-strong);
    border-radius: 999px;
    padding: 0.4rem 0.4rem 0.4rem 1.4rem;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    box-shadow: 0 18px 50px rgba(44, 23, 138, 0.30);
    z-index: 1040;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-width: calc(100vw - 2rem);
}

.of-sticky-cta.is-visible {
    transform: translateX(-50%) translateY(0);
}

.of-sticky-cta-text {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--of-ink);
    white-space: nowrap;
}

.of-sticky-cta-btn {
    background: linear-gradient(135deg, var(--of-primary), var(--of-primary-light));
    color: #fff;
    text-decoration: none;
    padding: 0.6rem 1.2rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    box-shadow: 0 6px 16px rgba(44, 23, 138, 0.4);
    transition: transform 0.25s ease;
}

.of-sticky-cta-btn:hover {
    color: #fff;
    transform: translateY(-2px);
}

/* =========================================================
   BLOCK SPACING
   ========================================================= */
.of-block-stack > * + * { margin-top: 3.2rem; }

.of-content {
    max-width: 1180px;
    margin: 0 auto;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 992px) {
    .of-hero-grid {
        grid-template-columns: 1fr;
        padding: 2.6rem 2rem;
        gap: 2rem;
    }

    .of-hero h1 { font-size: 2.5rem; }

    .of-split { grid-template-columns: 1fr; }

    .of-banner {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .of-section-title { font-size: 1.85rem; }
}

@media (max-width: 576px) {
    .offer-page { padding: 100px 0 60px; }

    .of-hero { border-radius: 22px; }

    .of-hero-grid {
        padding: 2rem 1.4rem;
        gap: 1.6rem;
    }

    .of-hero h1 { font-size: 1.95rem; }

    .of-hero .lead { font-size: 0.98rem; }

    .of-hero-actions { flex-direction: column; align-items: stretch; }

    .of-hero-actions .of-btn { justify-content: center; }

    .of-hero-kpi {
        padding: 1.5rem 1.3rem;
    }

    .of-hero-kpi-num { font-size: 1.7rem; }

    .of-hero-call a { font-size: 1.15rem; }

    .of-norms-strip {
        padding: 0.75rem 1rem;
        gap: 0.55rem;
    }

    .of-norms-strip-label {
        font-size: 0.6rem;
        letter-spacing: 1.3px;
        gap: 0.45rem;
    }

    .of-norms-strip-label::before,
    .of-norms-strip-label::after {
        width: 14px;
    }

    .of-norms-strip-list {
        gap: 0.35rem 0.4rem;
    }

    .of-norm-chip {
        padding: 0.28rem 0.65rem;
        font-size: 0.7rem;
    }

    .of-norm-chip i {
        font-size: 0.8rem;
    }

    .of-section-title { font-size: 1.55rem; }

    .of-pain {
        padding: 1.8rem 1.4rem;
    }

    .of-split-card {
        padding: 1.8rem 1.4rem;
    }

    .of-results {
        padding: 2rem 1.5rem;
    }

    .of-result-num { font-size: 2rem; }

    .of-banner {
        padding: 1.6rem 1.4rem;
    }

    .of-final-cta {
        padding: 2.4rem 1.5rem;
    }

    .of-final-cta h2 { font-size: 1.6rem; }

    .of-final-cta p { font-size: 0.95rem; }

    .of-final-cta-actions { flex-direction: column; align-items: stretch; }

    .of-final-cta-actions .of-btn { justify-content: center; }

    .of-case-header {
        flex-wrap: wrap;
    }

    .of-case-result-pill {
        order: 3;
        width: 100%;
        justify-content: center;
        margin-top: 0.4rem;
    }

    .of-testimonial { padding: 2rem 1.5rem 1.6rem; }

    .of-testimonial blockquote { font-size: 1.05rem; }

    .of-sticky-cta {
        padding: 0.35rem 0.35rem 0.35rem 1rem;
    }

    .of-sticky-cta-text {
        font-size: 0.78rem;
        white-space: normal;
    }

    .of-sticky-cta-btn {
        font-size: 0.72rem;
        padding: 0.5rem 0.9rem;
    }
}

/* =========================================================
   CABINET CERTIFICATIONS - répliqué depuis home.css
   ========================================================= */
.cabinet-certifications {
    padding-bottom: 2.5rem;
}

.cabinet-certifications-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(26, 15, 46, 0.55);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 1.5rem;
    text-align: center;
}

.cabinet-logos {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 3.5rem;
    flex-wrap: wrap;
}

.cabinet-logo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0.5rem;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0.9;
    text-decoration: none;
    color: inherit;
}

a.cabinet-logo-item {
    cursor: pointer;
    gap: 0.4rem;
}

.cabinet-logo-download {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--of-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.cabinet-logo-download i {
    font-size: 0.85rem;
}

a.cabinet-logo-item:hover .cabinet-logo-download {
    text-decoration: underline;
}

.cabinet-logo-item:hover {
    transform: translateY(-3px);
    opacity: 1;
}

.cabinet-logo-item img {
    height: 70px;
    max-width: 160px;
    width: auto;
    object-fit: contain;
    filter: none;
}

@media (max-width: 600px) {
    .cabinet-logos { gap: 2rem; }
    .cabinet-logo-item img { height: 55px; max-width: 120px; }
}

/* =========================================================
   FLOATING BUTTON - répliqué depuis home.css
   ========================================================= */
.floating-btn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: linear-gradient(135deg, #2c178a 0%, #4828b3 50%, #7045e1 100%);
    color: #fff;
    padding: 1.05rem 1.8rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow:
        0 12px 32px rgba(44, 23, 138, 0.55),
        0 0 0 1px rgba(112, 69, 225, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    z-index: 999;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    animation: floatPulse 3s ease-in-out infinite;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@keyframes floatPulse {
    0%, 100% {
        box-shadow:
            0 10px 30px rgba(44, 23, 138, 0.5),
            0 0 0 0 rgba(112, 69, 225, 0.4);
    }
    50% {
        box-shadow:
            0 10px 30px rgba(44, 23, 138, 0.5),
            0 0 0 12px rgba(112, 69, 225, 0);
    }
}

.floating-btn:hover {
    transform: translateY(-8px) scale(1.04);
    box-shadow:
        0 18px 45px rgba(44, 23, 138, 0.6),
        0 0 0 1px rgba(112, 69, 225, 0.5);
    color: #fff;
    animation: none;
}

.floating-btn:active {
    transform: translateY(-4px) scale(1);
}

.floating-btn i {
    font-size: 1.2rem;
}

@media (max-width: 768px) {
    .floating-btn {
        bottom: 1.5rem;
        right: 1.5rem;
        padding: 0.85rem 1.2rem;
        font-size: 0.85rem;
    }

    .floating-btn i {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .floating-btn {
        padding: 0.7rem;
        border-radius: 50%;
        width: 48px;
        height: 48px;
        justify-content: center;
    }

    .floating-btn span {
        display: none;
    }

    .floating-btn i {
        font-size: 1.2rem;
        margin: 0;
    }
}

.cabinet-logo-caption {
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(26, 15, 46, 0.55);
    text-align: center;
    margin-top: -0.15rem;
}

/* =========================================================
   Sticky CTA reveal script
   ========================================================= */

/* =========================================================
   Navigation entre pages sœurs (les 4 offres).
   Voir templates/public/_partials/_offer_nav.html.twig

   Ces pages sont en THÈME CLAIR (--of-bg: #fff) : le bloc reprend donc
   exactement le vocabulaire de .of-value-card — carte blanche, tuile
   d'icône en dégradé, barre d'accent révélée au survol, rotation des
   4 teintes de la maison — plutôt que d'introduire un style à part.
   ========================================================= */
.offer-siblings {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3.5rem 1.5rem 5rem;
}

.offer-siblings-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--of-ink);
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0 0 0.5rem;
}

.offer-siblings-lead {
    font-size: 1rem;
    color: var(--of-text-muted);
    margin: 0 0 2rem;
    max-width: 60ch;
}

.offer-siblings-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.25rem;
}

.offer-sibling {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.6rem 1.5rem;
    background: var(--of-card-bg);
    border: 1px solid var(--of-border);
    border-radius: 18px;
    box-shadow: var(--of-shadow-sm);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: all 0.35s ease;
}

.offer-sibling::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--of-primary), var(--of-primary-lighter));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.offer-sibling:hover {
    transform: translateY(-6px);
    box-shadow: var(--of-shadow-md);
    border-color: var(--of-border-strong);
    text-decoration: none;
}

.offer-sibling:hover::after { transform: scaleX(1); }

.offer-sibling-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--of-primary), var(--of-primary-light));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-bottom: 0.9rem;
    box-shadow: 0 6px 16px rgba(44, 23, 138, 0.22);
}

.offer-sibling-label {
    font-family: 'Poppins', sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--of-ink);
    letter-spacing: -0.01em;
    margin-bottom: 0.4rem;
}

.offer-sibling-hint {
    font-size: 0.95rem;
    color: var(--of-text);
    line-height: 1.6;
}

/* Page courante : elle reste cliquable et lisible. Fond lavande clair de la
   charte, texte inchangé (donc contraste conservé), et barre d'accent
   affichée en permanence au lieu d'être révélée au survol. */
.offer-sibling.is-current {
    background: var(--of-primary-soft);
    border-color: var(--of-border-strong);
}

.offer-sibling.is-current::after { transform: scaleX(1); }

.offer-sibling-current {
    margin-top: 0.75rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--of-primary-light);
}

/* Rotation d'accents identique à .of-value-card : violet, orange,
   turquoise, bleu — les teintes déjà utilisées ailleurs sur le site. */
.offer-siblings-list li:nth-child(4n+2) .offer-sibling-icon {
    background: linear-gradient(135deg, #D4571F, #FFB84D);
    box-shadow: 0 8px 20px rgba(212, 87, 31, 0.28);
}
.offer-siblings-list li:nth-child(4n+2) .offer-sibling::after {
    background: linear-gradient(90deg, #D4571F, #FFB84D);
}
.offer-siblings-list li:nth-child(4n+2) .offer-sibling:hover {
    border-color: rgba(212, 87, 31, 0.35);
}

.offer-siblings-list li:nth-child(4n+3) .offer-sibling-icon {
    background: linear-gradient(135deg, #00A4B8, #3DBCD1);
    box-shadow: 0 8px 20px rgba(0, 164, 184, 0.28);
}
.offer-siblings-list li:nth-child(4n+3) .offer-sibling::after {
    background: linear-gradient(90deg, #00A4B8, #3DBCD1);
}
.offer-siblings-list li:nth-child(4n+3) .offer-sibling:hover {
    border-color: rgba(0, 164, 184, 0.35);
}

.offer-siblings-list li:nth-child(4n) .offer-sibling-icon {
    background: linear-gradient(135deg, #4A90E2, #7BB3E8);
    box-shadow: 0 8px 20px rgba(74, 144, 226, 0.28);
}
.offer-siblings-list li:nth-child(4n) .offer-sibling::after {
    background: linear-gradient(90deg, #4A90E2, #7BB3E8);
}
.offer-siblings-list li:nth-child(4n) .offer-sibling:hover {
    border-color: rgba(74, 144, 226, 0.35);
}

@media (max-width: 768px) {
    .offer-siblings { padding: 2.5rem 1rem 3.5rem; }
    .offer-siblings-title { font-size: 1.4rem; }
}

/* ---- Anciens attributs style="" des pages Offres ---- */

/* Bouton fantôme posé sur fond sombre (appel téléphonique du CTA final) :
   couleur et bordure fixes, y compris au survol, comme l'ancien style inline. */
.of-btn.of-btn-ghost-light,
.of-btn.of-btn-ghost-light:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}

/* Signe (+, >) précédant un chiffre clé. */
.of-num-sign {
    font-size: 1.4rem;
}

/* Durée indiquée sous le titre d'une étape (page Formation). */
.of-step p.of-step-duration {
    font-size: 0.78rem;
    color: var(--of-primary-light);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin: -0.4rem 0 0.5rem;
}

.of-quote .of-quote-bold {
    font-weight: bold;
}